@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--hb-canvas:#f5f7fa;--hb-surface:#fff;--hb-ink:#1c2b3a;--hb-muted:#526477;--hb-line:#d7e0e9;--hb-accent:#365f8c;--hb-soft:#e9f0f8;--hb-shadow:0 12px 32px #1c2b3a0a;--hb-radius:20px;--hb-font:'DM Sans',system-ui,sans-serif;--hb-display:'Outfit',system-ui,sans-serif}
body[data-hb-ui]{font-family:var(--hb-font);font-synthesis:none;-webkit-text-size-adjust:100%;color:var(--hb-ink)}
body[data-hb-ui] :where(h1,h2,h3,h4){font-family:var(--hb-display);text-wrap:balance}
body[data-hb-ui] :where(button,input,select,textarea){font-family:var(--hb-font)}
body[data-hb-ui] :where(p,li){line-height:1.65}
body[data-hb-ui] :where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--hb-accent);outline-offset:3px}
body[data-hb-ui] :where(input,select,textarea){accent-color:var(--hb-accent)}
body[data-hb-ui] :where(input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;max-width:100%;box-sizing:border-box}
body[data-hb-ui] :where(.primary,.secondary,.quiet,.icon-button,.hb-rules-link,.text-button,button[type=submit],.hb-nav-toggle){min-height:44px;touch-action:manipulation}
body[data-hb-ui] :where(header,.site-header,.game-header) :where(button,a){min-height:44px;align-content:center}
body[data-hb-ui] :where(.primary,.secondary){border-radius:12px;box-shadow:none;transition:background-color .16s,transform .16s}
body[data-hb-ui] :where(.primary,.secondary):active:not(:disabled){transform:translateY(1px)}
body[data-hb-ui] button:disabled{cursor:not-allowed}
body[data-hb-ui] dialog{box-sizing:border-box;max-width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--hb-line);border-radius:24px;box-shadow:0 24px 80px #111b2640}
body[data-hb-ui] dialog::backdrop{background:#111b26b3;backdrop-filter:blur(5px)}
body[data-hb-ui] dialog :where(.close,.close-button,[aria-label^="Close"]){min-width:44px;min-height:44px}
body[data-hb-ui] :where(.hb-start-links,.hb-site-links){gap:8px 20px}
body[data-hb-ui] :where(.hb-start-links,.hb-site-links) a{min-height:44px;display:inline-flex;align-items:center;font-size:14px;text-underline-offset:5px}
body[data-hb-ui] .hb-rules-link{font-size:13px!important;padding:10px 14px;border:1px solid currentColor;border-radius:10px;text-decoration:none!important;opacity:.9}
body[data-hb-ui] :where(.eyebrow,.kicker){letter-spacing:.13em;line-height:1.5}
body[data-hb-ui] :where(output,.room-code,#roomCode,.score,.timer,.metric-value){font-variant-numeric:tabular-nums}
body[data-hb-ui] [hidden]{display:none!important}
body[data-hb-ui] .hb-game-help{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--hb-line);font-size:14px}
body[data-hb-ui] .hb-game-help a{color:inherit;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}
@media(max-width:767px){body[data-hb-ui] :where(input,select,textarea){font-size:16px}body[data-hb-ui] dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:24px}body[data-hb-ui] .hb-rules-link{font-size:12px!important;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){body[data-hb-ui]{scroll-behavior:auto}body[data-hb-ui] :where(.game-card,.primary,.secondary,.hb-filter,.hb-status-dot){animation:none!important;transition:none!important}}
body[data-hb-ui]{min-width:0}
@media(max-width:380px){
 body[data-hb-ui] :is(header,.site-header){height:auto;min-height:76px;flex-wrap:wrap;gap:10px;padding-left:16px;padding-right:16px}
 body[data-hb-ui] :is(header,.site-header) .brand{font-size:21px}
 body[data-hb-ui] :is(header,.site-header) .back-link{display:none}
 body[data-hb-ui] .hb-rules-link{white-space:nowrap}
}