.bh-hub { display: grid; gap: 20px; width: 100%; min-width: 0; color: var(--text); font-family: var(--font-ui); }
.bh-hub *, .bh-hub *::before, .bh-hub *::after { box-sizing: border-box; }
.bh-hub [hidden] { display: none !important; }
.bh-hub h2, .bh-hub h3, .bh-hub h4, .bh-hub p { margin: 0; }
.bh-hub h2, .bh-hub h3, .bh-hub h4 { color: var(--text-bright); line-height: 1.3; overflow-wrap: anywhere; }
.bh-hub h2 { font-size: clamp(23px, 2.2vw, 32px); letter-spacing: -.02em; }
.bh-hub p, .bh-hub small { color: var(--text-muted); line-height: 1.6; }
.bh-hub-card { min-width: 0; padding: 26px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); }
.bh-hub-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bh-hub-heading > div { min-width: 0; }
.bh-hub-eyebrow { display: block; margin-bottom: 6px; color: var(--accent-bright); font-size: 10px; font-weight: 850; letter-spacing: .12em; line-height: 1.5; }
.bh-hub-week, .bh-hub-house-count { flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; color: var(--text-muted); background: var(--bg-soft); font-size: 12px; line-height: 1.5; }
.bh-hub .bh-hub-intro { margin-top: 12px; font-size: 13px; }
.bh-hub .bh-hub-footnote { margin-top: 16px; font-size: 12px; }
.bh-hub .bh-hub-subtitle { margin: 24px 0 12px; font-size: 17px; }
.bh-hub-button { min-height: 44px; border: 1px solid var(--border); border-radius: 11px; padding: 10px 14px; background: var(--bg-soft); color: var(--text-bright); font: inherit; font-size: 13px; font-weight: 800; line-height: 1.45; cursor: pointer; transition: background .15s, border-color .15s; }
.bh-hub-button:hover:not(:disabled) { background: var(--panel-elevated); border-color: var(--accent); }
.bh-hub-button:disabled { opacity: .55; cursor: default; }
.bh-hub-primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.bh-hub-primary:hover:not(:disabled) { background: var(--accent-bright); }
.bh-hub :is(button, a):focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.bh-hub-scene { position: relative; display: grid; place-items: center; margin: 20px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(ellipse at 55% 32%, var(--accent-dim), transparent 65%), var(--bg-soft); }
.bh-hub-hall { display: block; width: 100%; max-width: 970px; height: auto; max-height: 460px; overflow: visible; }
.bh-hub-hall [data-hub-piece] { display: none; }
.bh-hub-hall [data-hub-piece].hub-piece-owned { display: block; }
.bh-hub-hall .hub-foundation { fill: none; stroke: var(--accent-bright); stroke-width: 2; stroke-dasharray: 7 7; opacity: .6; }
.bh-hub-scene-built .hub-foundation { display: none; }
.bh-hub-hall .hub-ground-shadow { fill: var(--accent); opacity: .07; }
.bh-hub-hall .hub-land { fill: color-mix(in srgb, var(--success) 12%, var(--panel)); stroke: var(--border); stroke-width: 1.5; }
.bh-hub-hall .hub-path { fill: color-mix(in srgb, var(--warm) 20%, var(--panel)); stroke: var(--border); }
.bh-hub-hall .hub-wall-front { fill: color-mix(in srgb, var(--accent) 22%, var(--panel-elevated)); stroke: var(--border); stroke-width: 1.5; }
.bh-hub-hall .hub-wall-side { fill: color-mix(in srgb, var(--accent) 12%, var(--bg-soft)); stroke: var(--border); stroke-width: 1.5; }
.bh-hub-hall .hub-roof { fill: color-mix(in srgb, var(--accent) 78%, var(--panel)); stroke: var(--accent-bright); stroke-width: 1.5; }
.bh-hub-hall .hub-roof-edge { fill: color-mix(in srgb, var(--accent) 40%, var(--bg-soft)); stroke: var(--accent-bright); }
.bh-hub-hall .hub-window { fill: color-mix(in srgb, var(--warm) 75%, var(--panel)); stroke: var(--warm); stroke-width: 1.5; }
.bh-hub-hall .hub-door { fill: color-mix(in srgb, var(--warm) 32%, var(--bg-soft)); stroke: var(--warm); stroke-width: 1.5; }
.bh-hub-hall .hub-steps { fill: var(--panel-elevated); stroke: var(--border); }
.bh-hub-hall .hub-banner-pole { stroke: var(--text-muted); stroke-width: 3; stroke-linecap: round; }
.bh-hub-hall .hub-house-banner { fill: var(--accent-bright); stroke: var(--accent); }
.bh-hub-hall .hub-banner-star { fill: var(--accent-ink); }
.bh-hub-hall .hub-workshop-roof { fill: color-mix(in srgb, var(--warm) 66%, var(--panel)); stroke: var(--warm); stroke-width: 1.5; }
.bh-hub-hall .hub-chimney { fill: color-mix(in srgb, var(--warm) 34%, var(--panel-elevated)); stroke: var(--warm); stroke-width: 1.5; }
.bh-hub-hall .hub-tools { fill: var(--text-bright); stroke: var(--text-bright); stroke-width: 3; }
.bh-hub-hall .hub-library-roof { fill: color-mix(in srgb, var(--success) 64%, var(--panel)); stroke: var(--success-bright); stroke-width: 1.5; }
.bh-hub-hall .hub-gable { fill: color-mix(in srgb, var(--success) 28%, var(--panel-elevated)); stroke: var(--success-bright); }
.bh-hub-hall .hub-books { stroke: var(--panel); stroke-width: 4; }
.bh-hub-hall .hub-dome { fill: color-mix(in srgb, var(--accent-bright) 50%, var(--panel)); stroke: var(--accent-bright); stroke-width: 2; }
.bh-hub-hall .hub-dome-line { fill: none; stroke: var(--accent-ink); stroke-width: 2; opacity: .5; }
.bh-hub-hall .hub-telescope { fill: var(--warm); stroke: var(--warm); stroke-width: 1.5; }
.bh-hub-hall .hub-tree path:first-child { fill: none; stroke: var(--warm); stroke-width: 7; stroke-linecap: round; }
.bh-hub-hall .hub-tree path:last-child { fill: color-mix(in srgb, var(--success) 70%, var(--panel)); stroke: var(--success-bright); stroke-width: 1.5; }
.bh-hub-hall .hub-basin-side { fill: var(--panel-elevated); stroke: var(--border); stroke-width: 2; }
.bh-hub-hall .hub-basin { fill: var(--accent-dim); stroke: var(--accent-bright); stroke-width: 2; }
.bh-hub-hall .hub-water { fill: var(--accent); opacity: .65; }
.bh-hub-hall .hub-water-jets { fill: none; stroke: var(--accent-bright); stroke-width: 3; stroke-linecap: round; }
.bh-hub-hall .hub-lanterns { fill: none; stroke: var(--text-muted); stroke-width: 3; stroke-linecap: round; }
.bh-hub-hall .hub-lantern-glass { fill: var(--warm); stroke: var(--warm); }
.bh-hub-hall .hub-cup { fill: var(--warm); }
.bh-hub-hall .hub-cup-line { fill: none; stroke: var(--warm); stroke-width: 2; }
.bh-hub-scene:not(.hub-has-cups) .hub-trophy-display :is(.hub-cup, .hub-cup-line) { display: none; }
.bh-hub-hall .hub-pennants { fill: var(--warm); stroke: var(--warm); stroke-width: 1.5; }
.bh-hub-hall .hub-pennants path:first-child { fill: none; stroke: var(--text-muted); }
.bh-hub-hall .hub-sparkles { fill: none; stroke: var(--accent-bright); stroke-width: 2; opacity: .5; }
.bh-hub-house-caption { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; }
.bh-hub-house-caption > div { min-width: 0; }
.bh-hub-house-title { display: block; color: var(--text-bright); font-size: 18px; overflow-wrap: anywhere; }
.bh-hub .bh-hub-house-note { margin-top: 6px; font-size: 12px; }
.bh-hub-house-caption > button { flex-shrink: 0; }
.bh-hub-room-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bh-hub-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px 10px; align-items: start; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-soft); }
.bh-hub-item-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--accent-dim); color: var(--accent-bright); font-size: 23px; font-weight: 800; }
.bh-hub-item h4 { font-size: 14px; }
.bh-hub-item p { margin-top: 5px; font-size: 11px; }
.bh-hub-item > button, .bh-hub-item-state { grid-column: 1 / -1; margin-top: 3px; }
.bh-hub-item-state { color: var(--text-muted); font-size: 11px; }
.bh-hub-item-owned { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.bh-hub-item-owned .bh-hub-item-state { color: var(--success-bright); font-weight: 700; }
.bh-hub-small { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.bh-hub-decoration-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bh-hub-decoration-list .bh-hub-item { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.bh-hub-decoration-list .bh-hub-item > button { width: 100%; }
.bh-hub-cups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bh-hub-cup { display: flex; align-items: center; gap: 12px; min-width: 0; border: 1px solid var(--warm-border); border-radius: 13px; background: var(--warm-dim); padding: 14px; }
.bh-hub-cup-icon { width: 32px; flex-shrink: 0; color: var(--warm); }
.bh-hub-cup-icon svg { width: 32px; height: 36px; display: block; }
.bh-hub-cup strong { display: block; color: var(--text-bright); font-size: 13px; line-height: 1.5; }
.bh-hub-cup small { display: block; margin-top: 3px; font-size: 10px; }
.bh-hub-cup-rank-2 .bh-hub-cup-icon { color: var(--text-muted); }
.bh-hub-cup-rank-3 .bh-hub-cup-icon { color: var(--warm); opacity: .75; }
.bh-hub-no-cups { grid-template-columns: 1fr; }
.bh-hub-empty-cup { color: var(--text-muted); background: var(--bg-soft); border-color: var(--border); font-size: 12px; line-height: 1.6; }
.bh-hub-quest-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.bh-hub-quest { position: relative; overflow: hidden; min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg-soft); }
.bh-hub-quest-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bh-hub-quest h3 { font-size: 16px; }
.bh-hub-quest-check { color: var(--text-muted); font-size: 10px; flex-shrink: 0; line-height: 1.5; }
.bh-hub .bh-hub-quest-progress { color: var(--text-bright); font-size: 12px; font-weight: 750; margin-top: 16px; font-variant-numeric: tabular-nums; }
.bh-hub-meter { height: 9px; overflow: hidden; border-radius: 6px; background: var(--panel-elevated); margin: 10px 0 13px; }
.bh-hub-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .35s ease; }
.bh-hub .bh-hub-quest-reward { font-size: 11px; line-height: 1.6; }
.bh-hub-quest-done { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: var(--success-dim); }
.bh-hub-quest-done .bh-hub-quest-check { color: var(--success-bright); font-weight: 800; }
.bh-hub-quest-done .bh-hub-meter > span { background: var(--success); }
.bh-hub-tournament-summary h3 { font-size: 21px; }
.bh-hub-own-tournament { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.bh-hub-own-tournament > p { grid-column: 1 / -1; }
.bh-hub-own-tournament strong { display: block; color: var(--text-bright); font-size: 22px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bh-hub-own-tournament small { display: block; margin-top: 3px; font-size: 11px; }
.bh-hub-league-tabs { display: flex; gap: 8px; padding: 5px; margin-top: 20px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg-soft); }
.bh-hub-league-tab { display: grid; flex: 1; min-width: 0; gap: 3px; padding: 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.bh-hub-league-tab strong { font-size: 14px; }
.bh-hub-league-tab small { color: inherit; opacity: .9; font-size: 11px; }
.bh-hub-league-tab[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.bh-hub-tournament-list { display: grid; gap: 10px; margin-top: 20px; }
.bh-hub .bh-hub-archive-loading { color: var(--accent-bright); font-size: 13px; margin-top: 16px; }
.bh-hub-tournament-row { display: grid; grid-template-columns: 38px 48px minmax(0, 1fr) minmax(125px, 180px); align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); }
.bh-hub-tournament-row[data-rank="1"] { border-color: var(--warm-border); background: var(--warm-dim); }
.bh-hub-position { color: var(--text-muted); text-align: center; font-size: 17px; font-weight: 800; }
.bh-hub-position svg { display: block; width: 30px; height: 36px; margin: 0 auto; color: var(--warm); }
.bh-hub-tournament-row[data-rank="2"] .bh-hub-position svg { color: var(--text-muted); }
.bh-hub-tournament-row[data-rank="3"] .bh-hub-position svg { opacity: .75; }
.bh-hub-team-flag { display: grid; place-items: center; width: 48px; height: 54px; padding: 4px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--accent-dim); color: var(--accent-bright); font-size: 28px; }
.bh-hub-team-flag img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.bh-hub-team-copy { min-width: 0; }
.bh-hub-clan-link { border: 0; padding: 0; color: var(--text-bright); background: transparent; font: inherit; font-size: 18px; font-weight: 850; text-align: left; line-height: 1.4; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); cursor: pointer; }
.bh-hub-clan-link:disabled { text-decoration: none; cursor: default; }
.bh-hub-team-copy small { display: block; font-size: 11px; margin-top: 5px; }
.bh-hub-team-score { min-width: 0; text-align: right; }
.bh-hub-team-score strong { display: block; color: var(--text-bright); font-size: 26px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bh-hub-team-score small { display: block; font-size: 10px; }
.bh-hub-empty { margin-top: 16px !important; font-size: 13px; }
.bh-hub-archive { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-hub-archive-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bh-hub-archive-week { border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; color: var(--text-muted); background: var(--bg-soft); font: inherit; font-size: 12px; line-height: 1.5; }
button.bh-hub-archive-week { cursor: pointer; }
button.bh-hub-archive-week[aria-pressed="true"] { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-dim); }
.bh-hub-announcement { position: sticky; bottom: 16px; z-index: 3; padding: 16px 20px; border: 1px solid var(--warm-border); border-radius: 14px; color: var(--text-bright); background: var(--panel); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 750; line-height: 1.6; }
.hub-new-piece { transform-box: fill-box; transform-origin: 50% 100%; animation: hub-build .85s cubic-bezier(.2, .8, .2, 1) both; }
.bh-hub-celebrate { animation: hub-complete 1.2s ease both; }
@keyframes hub-build { 0% { opacity: 0; transform: translateY(-35px) scale(.7); } 65% { opacity: 1; transform: translateY(3px) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes hub-complete { 0%, 100% { box-shadow: none; } 35% { box-shadow: inset 0 0 0 3px var(--success), 0 0 28px var(--success-dim); } }
.bh-hub-paused *, .bh-hub-paused *::before, .bh-hub-paused *::after { animation-play-state: paused !important; }
@media (max-width: 900px) {
  .bh-hub-decoration-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-hub-quest-list { grid-template-columns: minmax(0, 1fr); }
  .bh-hub-quest { padding: 16px; }
  .bh-hub-quest-heading { align-items: center; }
}
@media (max-width: 640px) {
  .bh-hub { gap: 16px; }
  .bh-hub-card { padding: 18px 16px; border-radius: 18px; }
  .bh-hub-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .bh-hub h2 { font-size: 23px; }
  .bh-hub-eyebrow { font-size: 9px; }
  .bh-hub-week, .bh-hub-house-count { padding: 5px 8px; font-size: 10px; }
  .bh-hub-scene { margin-top: 16px; border-radius: 12px; }
  .bh-hub-hall { width: 120%; max-width: none; }
  .bh-hub-house-caption { align-items: flex-start; flex-direction: column; gap: 12px; }
  .bh-hub-house-caption > button { width: 100%; }
  .bh-hub-house-title { font-size: 17px; }
  .bh-hub-room-list { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .bh-hub-room-list .bh-hub-item { grid-template-columns: 36px minmax(0, 1fr); align-items: center; }
  .bh-hub-room-list .bh-hub-item > button, .bh-hub-room-list .bh-hub-item-state { grid-column: 2; }
  .bh-hub-decoration-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .bh-hub-decoration-list .bh-hub-item { padding: 12px 9px; }
  .bh-hub-cups { grid-template-columns: minmax(0, 1fr); }
  .bh-hub-cup { padding: 12px; }
  .bh-hub-own-tournament { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bh-hub-own-tournament > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .bh-hub-own-tournament strong { font-size: 18px; }
  .bh-hub-own-tournament small { text-align: right; font-size: 10px; }
  .bh-hub-league-tabs { gap: 3px; padding: 4px; }
  .bh-hub-league-tab { padding: 10px 4px; }
  .bh-hub-league-tab strong { font-size: 11px; }
  .bh-hub-league-tab small { font-size: 9px; }
  .bh-hub-tournament-row { grid-template-columns: 25px 35px minmax(0, 1fr); gap: 8px; padding: 12px 10px; }
  .bh-hub-position { font-size: 13px; }
  .bh-hub-position svg { width: 23px; height: 29px; }
  .bh-hub-team-flag { width: 35px; height: 40px; font-size: 23px; }
  .bh-hub-clan-link { font-size: 14px; }
  .bh-hub-team-copy small { font-size: 10px; }
  .bh-hub-team-score { grid-column: 3; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px; }
  .bh-hub-team-score strong { font-size: 21px; }
  .bh-hub-team-score small { font-size: 9px; }
  .bh-hub-announcement { bottom: 8px; padding: 13px 15px; font-size: 12px; }
}
.bh-public-ranking.bh-presentation .bh-hub-tournament h2 { font-size: clamp(25px, 2.3vw, 42px); }
.bh-public-ranking.bh-presentation .bh-hub-tournament-row { grid-template-columns: 50px 64px minmax(0, 1fr) minmax(180px, 250px); padding: 16px 20px; }
.bh-public-ranking.bh-presentation .bh-hub-clan-link { font-size: clamp(20px, 1.6vw, 30px); }
.bh-public-ranking.bh-presentation .bh-hub-team-score strong { font-size: clamp(25px, 2vw, 38px); }
.bh-public-ranking.bh-presentation .bh-hub-team-flag { width: 64px; height: 72px; }
@media (max-width: 640px) {
  .bh-public-ranking.bh-presentation .bh-hub-tournament-row { grid-template-columns: 25px 35px minmax(0, 1fr); gap: 8px; padding: 12px 10px; }
  .bh-public-ranking.bh-presentation .bh-hub-team-flag { width: 35px; height: 40px; }
  .bh-public-ranking.bh-presentation .bh-hub-clan-link { font-size: 14px; }
  .bh-public-ranking.bh-presentation .bh-hub-team-score strong { font-size: 21px; }
  .bh-hub-archive-heading { flex-wrap: wrap; gap: 0 10px; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .bh-hub *, .bh-hub *::before, .bh-hub *::after { animation: none !important; transition: none !important; } }