/* Game chrome is scoped by page. Board geometry and gameplay colors stay local. */
body[data-hb-ui]:not([data-hb-ui=clubhouse]):not([data-hb-ui=reading]):not([data-hb-ui=hundred-app]){--hb-body-size:16px;font-size:var(--hb-body-size)}
body[data-hb-ui] :is(.brand,.book-brand){font-family:var(--hb-display);letter-spacing:-.8px}
body[data-hb-ui] :is(.site-header,.topbar){gap:20px}
body[data-hb-ui] :is(.setup-panel,.setup-card,.room-card,.panel){border-radius:20px}
body[data-hb-ui] :is(.setup-panel,.setup-card,.room-card) input:not([type=radio]):not([type=checkbox]),body[data-hb-ui] :is(.setup-panel,.setup-card,.room-card) select{min-height:48px}
body[data-hb-ui] :is(.room-code,.invite-box strong,.room-code-box strong){font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body[data-hb-ui] :is(.close,.close-btn,.close-button){min-width:44px;min-height:44px}
body[data-hb-ui] :is(.room-share,.invite-actions,.result-actions){flex-wrap:wrap}
body[data-hb-ui] :is(.game-nav,.header-actions){gap:12px}
/* Name Place Animal Thing, Square-It and The 100 share the clubhouse shell. */
body[data-hb-ui=clubhouse] :is(#gameView,#roomView,#squareView,#hundredView){max-width:1240px;margin:auto}
body[data-hb-ui=clubhouse] .game-nav{padding:0 0 24px;border-bottom:1px solid var(--hb-line);margin-bottom:36px}
body[data-hb-ui=clubhouse] .game-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--hb-accent)}
body[data-hb-ui=clubhouse] :is(.intro h1,.sq-intro h1,.hundred-heading h1){font-size:clamp(40px,6vw,68px);letter-spacing:-2px;line-height:1.05;font-family:var(--hb-display);font-weight:650}
body[data-hb-ui=clubhouse] :is(.intro h1 span,.hundred-heading h1 span){color:var(--hb-accent)}
body[data-hb-ui=clubhouse] .room-card{background:var(--hb-surface);border:1px solid var(--hb-line);box-shadow:none;padding:32px}
body[data-hb-ui=clubhouse] .game-entry{max-width:720px;margin-top:32px}
body[data-hb-ui=clubhouse] :is(.primary,.sq-start){background:var(--hb-accent);color:#fff;border:1px solid var(--hb-accent);box-shadow:none;border-radius:12px;min-height:48px}
body[data-hb-ui=clubhouse] :is(.secondary,.quiet){border:1px solid var(--hb-line);background:#fff;color:var(--hb-ink);border-radius:12px;box-shadow:none}
body[data-hb-ui=clubhouse] :is(.sq-intro,.hundred-heading){margin:32px 0}
body[data-hb-ui=clubhouse] :is(.sq-entry-grid,.ha-mode-cards){gap:24px}
body[data-hb-ui=clubhouse] :is(.sq-host,.sq-join,.ha-mode-card){border:1px solid var(--hb-line);background:var(--hb-canvas);border-radius:16px;padding:24px;box-shadow:none}
body[data-hb-ui=clubhouse] :is(.sq-presets button,.ha-mode-buttons button,.sq-mode-tile>span){min-height:48px;border-radius:10px}
body[data-hb-ui=clubhouse] .ha-mode-card h3{font-size:26px}
body[data-hb-ui=clubhouse] .ha-setup-heading>span{display:none}
body[data-hb-ui=clubhouse] .hundred-badge{background:var(--hb-soft);color:var(--hb-accent);border:1px solid var(--hb-line);border-radius:16px;transform:none}
body[data-hb-ui=clubhouse] .room-layout{gap:24px}
body[data-hb-ui=clubhouse] .room-heading h1{font-size:clamp(32px,4vw,46px);letter-spacing:-1.4px}
/* Tabletop games: quiet surfaces around distinctive boards. */
body[data-hb-ui=black-hole]{--violet:var(--hb-accent);background:var(--hb-canvas)}
body[data-hb-ui=black-hole] .heading h1{font-size:clamp(38px,5vw,56px);letter-spacing:-1.8px}
body[data-hb-ui=black-hole] :is(.board-panel,.panel){border:1px solid var(--hb-line);border-radius:20px;box-shadow:none}
body[data-hb-ui=black-hole] :is(.mode-choices button,.player-count button){min-height:48px;font-size:14px;border-radius:12px}
body[data-hb-ui=black-hole] .side-panel{min-width:0}
body[data-hb-ui=black-hole] #turnLabel{font-size:24px}
body[data-hb-ui=black-hole] #turnHint{line-height:1.6;font-size:14px}
body[data-hb-ui=black-hole] #playLocal{min-height:48px;background:var(--hb-accent);color:white}
body[data-hb-ui=swap-hearts]{--hb-ink:#eef3ee;--hb-muted:#b9c8c1;--hb-line:#365046;--hb-accent:#b4d5c6;color:var(--hb-ink)}
body[data-hb-ui=swap-hearts] .heading{margin-bottom:24px}
body[data-hb-ui=swap-hearts] .heading h1{font-size:clamp(38px,5vw,60px);letter-spacing:-1.8px;text-shadow:none}
body[data-hb-ui=swap-hearts] .heading .eyebrow{border:0;background:none;box-shadow:none;padding:0;color:#b9c8c1}
body[data-hb-ui=swap-hearts]:not(.is-playing) .game-layout{background:#0f2b22;border:1px solid #365046;box-shadow:none;border-radius:24px;padding:32px;gap:32px}
body[data-hb-ui=swap-hearts] :is(#setup,#gameInfo,#results){box-shadow:none;border-radius:18px;border-color:#365046}
body[data-hb-ui=swap-hearts] :is(.modes button,.setup-actions button){min-height:48px;font-size:14px}
body[data-hb-ui=swap-hearts] #dealButton{min-height:50px;box-shadow:none;border-radius:12px}
body[data-hb-ui=swap-hearts] #turnLabel{font-family:var(--hb-display)}
body[data-hb-ui=fairway-nine]{background:var(--hb-canvas);--paper:var(--hb-canvas);--line:var(--hb-line)}
body[data-hb-ui=fairway-nine] .landing h1{font-size:clamp(42px,5.3vw,68px);letter-spacing:-2px}
body[data-hb-ui=fairway-nine] .landing-copy{padding-top:12px}
body[data-hb-ui=fairway-nine] .setup-panel{background:white;border:1px solid var(--hb-line);border-radius:20px;padding:24px;margin-top:28px}
body[data-hb-ui=fairway-nine] .mode-options button{min-height:48px;font-size:14px;border-radius:12px}
body[data-hb-ui=fairway-nine] :is(#start,#next,#rematch){min-height:48px;border-radius:12px;box-shadow:none}
body[data-hb-ui=fairway-nine] :is(.score-panel,.result-score){border-radius:18px;box-shadow:none}
body[data-hb-ui=fairway-nine] .turn-banner{font-size:16px}
body[data-hb-ui=city-circuit]{background:var(--hb-canvas);--paper:var(--hb-canvas);--ink:var(--hb-ink);--muted:var(--hb-muted);--line:var(--hb-line);--serif:var(--hb-display)}
body[data-hb-ui=city-circuit] .landing{gap:48px;align-items:start}
body[data-hb-ui=city-circuit] .landing h1{font-size:clamp(42px,5.5vw,72px);letter-spacing:-2px}
body[data-hb-ui=city-circuit] :is(.setup-panel,.turn-panel,.event-card,.lobby){background:#fff;border-color:var(--hb-line);box-shadow:none;border-radius:20px}
body[data-hb-ui=city-circuit] .setup-panel{max-width:none;padding:26px}
body[data-hb-ui=city-circuit] :is(.mode-tabs button,.turn-actions button,.manage-actions button,.invite-actions button){min-height:44px;font-size:14px}
body[data-hb-ui=city-circuit] :is(#start,#createRoom,#joinRoom){min-height:48px;border-radius:12px}
body[data-hb-ui=city-circuit] .game-top{padding-bottom:20px}
body[data-hb-ui=city-circuit] .turn-panel{padding:24px}
/* Book Cricket keeps its stadium and book artwork, with a quieter match menu. */
body[data-hb-ui=book-cricket]{--hb-ink:#eff4f1;--hb-muted:#b1c1b8;--hb-line:#354f43;--hb-accent:#c3dcb5;--sans:var(--hb-font);--serif:var(--hb-display);--muted:#b1c1b8;color:var(--hb-ink);font-size:16px}
body[data-hb-ui=book-cricket] .setup-grid{gap:36px;padding-top:28px}
body[data-hb-ui=book-cricket] h1{font-size:clamp(44px,5.2vw,70px);font-weight:600;letter-spacing:-2px}
body[data-hb-ui=book-cricket] h1 em{font-style:normal}
body[data-hb-ui=book-cricket] .setup-card{box-shadow:none;border:1px solid var(--line);padding:28px}
body[data-hb-ui=book-cricket] :is(.mode-grid button,.segmented button,.play-controls button){min-height:48px;border-radius:12px}
body[data-hb-ui=book-cricket] :is(.match-top,.scoreboard){border-radius:16px}
body[data-hb-ui=book-cricket] :is(.room-code,#resultWord){font-family:var(--hb-display)}
body[data-hb-ui=book-cricket] :is(.setup-card label,.setup-card legend){font-size:14px}
/* Party rooms put setup, invites and the current action ahead of decoration. */
body[data-hb-ui=pictionary]{background:var(--hb-canvas)}
body[data-hb-ui=pictionary] header{border-bottom:1px solid var(--hb-line)}
body[data-hb-ui=pictionary] main{max-width:1400px}
body[data-hb-ui=pictionary] .entry{max-width:720px;margin:48px auto;padding:40px}
body[data-hb-ui=pictionary] h1{font-size:clamp(32px,4vw,44px);letter-spacing:-1.4px}
body[data-hb-ui=pictionary] .panel{box-shadow:none;border-color:var(--hb-line)}
body[data-hb-ui=pictionary] button{background:var(--hb-accent)}
body[data-hb-ui=pictionary] .quiet{background:var(--hb-soft);color:var(--hb-accent)}
body[data-hb-ui=pictionary] .entry-actions{gap:24px;margin-top:28px}
body[data-hb-ui=pictionary] .entry-actions>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding-top:24px;border-top:1px solid var(--hb-line)}
body[data-hb-ui=pictionary] #create{min-height:50px}
body[data-hb-ui=pictionary] :is(.room-bar,.turn-bar){padding:16px 0;flex-wrap:wrap}
body[data-hb-ui=pictionary] #guessForm{gap:8px}
body[data-hb-ui=pictionary] #guess{min-width:0;width:100%}
body[data-hb-ui=pictionary] .scores{border-radius:18px}
body[data-hb-ui=my-quiz]{background:var(--hb-canvas);--ink:var(--hb-ink)}
body[data-hb-ui=my-quiz] .title-lockup h1{font-size:clamp(42px,6vw,68px);letter-spacing:-2px}
body[data-hb-ui=my-quiz] :is(.panel,.stage,.roster,.table-panel,.score-summary){box-shadow:none;border:1px solid var(--hb-line);border-radius:20px;background:white}
body[data-hb-ui=my-quiz] .entry-grid{gap:28px}
body[data-hb-ui=my-quiz] .editor{padding:30px}
body[data-hb-ui=my-quiz] :is(.primary,button[type=submit]){background:var(--hb-accent);color:white;border:1px solid var(--hb-accent);box-shadow:none;min-height:48px;border-radius:12px}
body[data-hb-ui=my-quiz] :is(.secondary,.question-edit,.question-label){box-shadow:none}
body[data-hb-ui=my-quiz] .question-edit{background:var(--hb-canvas);border:1px solid var(--hb-line);border-radius:14px;padding:20px}
body[data-hb-ui=my-quiz] .remove-question{min-width:44px;min-height:44px}
body[data-hb-ui=my-quiz] .stage{padding:28px}
body[data-hb-ui=my-quiz] .room-heading{gap:24px}
body[data-hb-ui=riddles-puzzles]{--hb-ink:#edf3fa;--hb-muted:#b3c1d2;--hb-line:#33465b;--hb-accent:#a6c5e2;--bg:#111b26;--panel:#1d2b3b;--deep:#152231;--line:#33465b;--text:#edf3fa;--muted:#b3c1d2;--cyan:#a6c5e2;background:var(--bg);color:var(--text)}
body[data-hb-ui=riddles-puzzles] .hero{background:#1d2b3b;border:1px solid var(--line);border-radius:22px;padding:36px}
body[data-hb-ui=riddles-puzzles] .hero-mark{animation:none;box-shadow:none}
body[data-hb-ui=riddles-puzzles] :is(.mode-card,.category-card,.panel,.stat){box-shadow:none;border:1px solid var(--line)}
body[data-hb-ui=riddles-puzzles] :is(.primary,.choices button,.text-button,.player-tools button){min-height:44px;border-radius:12px}
body[data-hb-ui=riddles-puzzles] .primary{box-shadow:none}
body[data-hb-ui=riddles-puzzles] :is(.hero h1,.results-hero h1){font-size:clamp(32px,4vw,48px);letter-spacing:-1.4px}
body[data-hb-ui=riddles-puzzles] .game-strip .text-button{min-height:44px}
/* Small puzzles stay compact so the full board remains visible. */
body[data-hb-ui=wordle]{background:var(--hb-canvas)}
body[data-hb-ui=wordle] h1{font-size:clamp(36px,5vw,50px);font-style:normal;letter-spacing:-1.5px}
body[data-hb-ui=wordle] .modes{padding:5px;background:var(--hb-soft);border-radius:14px}
body[data-hb-ui=wordle] .modes button{min-height:44px;border-radius:10px}
body[data-hb-ui=wordle] .puzzle-meta{font-size:13px;color:var(--hb-muted)}
body[data-hb-ui=wordle] :is(#help,#closeHelp){min-height:44px;min-width:44px}
body[data-hb-ui=wordle] .key{min-height:48px}
body[data-hb-ui=wordle] #message{font-size:15px;min-height:26px}
body[data-hb-ui=arrow-escape]{background:var(--hb-canvas)}
body[data-hb-ui=arrow-escape] .game-heading h1{font-size:clamp(36px,4vw,52px);letter-spacing:-1.6px}
body[data-hb-ui=arrow-escape] :is(.journey-card,.game-console,.journey-panel){box-shadow:none;border-color:var(--hb-line);border-radius:20px}
body[data-hb-ui=arrow-escape] :is(.mode-tabs button,.game-toolbar button,#levels){min-height:44px;border-radius:12px;font-size:14px}
body[data-hb-ui=arrow-escape] .board-status{font-size:14px}
body[data-hb-ui=arrow-escape] .mission{font-size:15px;line-height:1.55}
body[data-hb-ui=arrow-escape] :is(.world-item,.level-mark){font-family:var(--hb-font)}
/* Immersive games retain their art and viewport; menu chrome is consistent. */
body[data-hb-ui=living-chess]{--hb-ink:#f0f4ed;--hb-muted:#c1d0c3;--hb-line:#607369;--hb-accent:#d0e2bb;color:var(--hb-ink)}
body[data-hb-ui=living-chess] .scene-heading h1{font-size:clamp(32px,4vw,52px);letter-spacing:-1.4px}
body[data-hb-ui=living-chess] :is(.scene-tools button,.match-controls button){min-height:44px;border-radius:12px}
body[data-hb-ui=living-chess] .scene-tools{gap:8px}
body[data-hb-ui=living-chess] .turn-card{border-radius:16px;box-shadow:0 8px 24px #101c1820}
body[data-hb-ui=living-chess] .match-controls select{min-height:48px}
body[data-hb-ui=living-chess] #history{font-size:14px;line-height:1.6}
body[data-hb-ui=pen-fight] .game-menu{background:#f5f7fa;color:#1c2b3a;border:1px solid #d7e0e9;padding:28px;box-shadow:0 24px 80px #1c2b3a30}
body[data-hb-ui=pen-fight] .menu-heading h1,body[data-hb-ui=pen-fight] .menu-heading h2{font-family:var(--hb-display);letter-spacing:-1px}
body[data-hb-ui=pen-fight] :is(.mode,.pen-choice){min-height:48px;border-radius:12px}
body[data-hb-ui=pen-fight] .setup-fields label{font-size:14px}
body[data-hb-ui=pen-fight] :is(#playSolo,#create,#join,#quickSolo,#quickOnline,#next){min-height:48px;border-radius:12px;box-shadow:none}
body[data-hb-ui=pen-fight] :is(.icon-button,#closeMenu){min-width:44px;min-height:44px}
body[data-hb-ui=pen-fight] .result-card{border-radius:20px;padding:24px}
body[data-hb-ui=pen-fight] .join-row input{min-width:0}
body[data-hb-ui=buddy-rush],body[data-hb-ui=buddy-dash],body[data-hb-ui=city-racing],body[data-hb-ui=squad-surge]{--hb-ink:#eef3fa;--hb-muted:#b3c1d2;--hb-line:#3a4b61;--hb-accent:#a6c5e2;color:var(--hb-ink)}
body[data-hb-ui=buddy-rush]{--ink:#111b26;--panel:#1d2b3b;--muted:#b3c1d2;--mint:#a6c5e2;--lime:#c0d5e9}
body[data-hb-ui=buddy-rush] .header{border-color:var(--hb-line)}
body[data-hb-ui=buddy-rush] .mode-button{min-height:48px;border-radius:12px}
body[data-hb-ui=buddy-rush] .swatch{width:44px;height:44px}
body[data-hb-ui=buddy-rush] :is(#startBtn,#resumeBtn,#retryBtn,#garageBtn,#quitBtn){min-height:48px;border-radius:12px;box-shadow:none}
body[data-hb-ui=buddy-rush] .menu-content h1{font-family:var(--hb-display);font-style:normal;font-size:clamp(38px,5vw,64px);letter-spacing:-1.8px}
body[data-hb-ui=buddy-rush] :is(.menu-content p,.side-card p){font-size:14px;line-height:1.6}
body[data-hb-ui=buddy-rush] :is(.side-card,.menu-inner){border-radius:20px}
body[data-hb-ui=buddy-dash]{background:#111b26}
body[data-hb-ui=buddy-dash] .menu-content h1{font-family:var(--hb-display);font-size:clamp(40px,6vw,72px);font-style:normal;letter-spacing:-2px;line-height:.98}
body[data-hb-ui=buddy-dash] .menu-content p{font-size:15px;max-width:420px;line-height:1.65}
body[data-hb-ui=buddy-dash] :is(#start,#resume,#retry,#garage,#quit){min-height:48px;border-radius:12px;box-shadow:none}
body[data-hb-ui=buddy-dash] :is(.dialog,.pill){border-radius:16px}
body[data-hb-ui=buddy-dash] .controls button{min-height:48px}
body[data-hb-ui=city-racing]{--cyan:#a6c5e2}
body[data-hb-ui=city-racing] .hero h1{font-family:var(--hb-display);font-size:clamp(44px,6vw,78px);font-style:normal;letter-spacing:-2px;line-height:.98}
body[data-hb-ui=city-racing] .race-panel{background:#172638ed;border:1px solid var(--hb-line);border-radius:22px;box-shadow:none;padding:28px}
body[data-hb-ui=city-racing] .fields label{font-size:13px;color:#c2cfdd;letter-spacing:.3px}
body[data-hb-ui=city-racing] :is(.action-row button,.join button,.pursuit-button){min-height:48px;border-radius:12px}
body[data-hb-ui=city-racing] .fields :is(input,select){min-height:48px;font-size:16px}
body[data-hb-ui=city-racing] :is(.lobby,.results){border-radius:20px}
body[data-hb-ui=city-racing] :is(.hud-chip span,.drive-status){font-size:12px}
body[data-hb-ui=squad-surge]{background:#111b26;--muted:#b3c1d2}
body[data-hb-ui=squad-surge] :is(.header-tools button,.close){min-height:44px;min-width:44px}
body[data-hb-ui=squad-surge] .briefing h1{font-family:var(--hb-display);font-size:clamp(40px,5vw,64px);letter-spacing:-1.5px;line-height:1}
body[data-hb-ui=squad-surge] :is(.launch-card,.campaign-aside,.small-dialog){border-radius:20px}
body[data-hb-ui=squad-surge] .launch-card p{font-size:14px;line-height:1.6}
body[data-hb-ui=squad-surge] :is(#deploy,#next,#replay,#resume){min-height:48px;border-radius:12px;box-shadow:none}
body[data-hb-ui=squad-surge] .sector-tabs button{min-height:44px;font-size:13px}
@media(max-width:1000px){
 body[data-hb-ui=book-cricket] .setup-grid{gap:24px}
 body[data-hb-ui=city-circuit] .landing{gap:28px}
}
@media(max-width:768px){
 body[data-hb-ui] :is(.site-header,.topbar){gap:12px}
 body[data-hb-ui=clubhouse] :is(.room-card,.sq-host,.sq-join,.ha-mode-card){padding:22px}
 body[data-hb-ui=clubhouse] :is(.sq-entry-grid,.ha-mode-cards,.room-layout){grid-template-columns:minmax(0,1fr)}
 body[data-hb-ui=clubhouse] .game-nav{margin-bottom:24px;padding-bottom:16px}
 body[data-hb-ui=clubhouse] .sq-profile{flex-wrap:wrap;gap:20px}
 body[data-hb-ui=clubhouse] .sq-name-field{width:100%}
 body[data-hb-ui=clubhouse] .ha-mode-buttons{flex-wrap:wrap}
 body[data-hb-ui=black-hole] .game-layout{grid-template-columns:minmax(0,1fr)}
 body[data-hb-ui=black-hole] .game-layout:has(#setup:not([hidden])) .side-panel{grid-row:1}
 body[data-hb-ui=black-hole] .game-layout:has(#setup:not([hidden])) .board-panel{opacity:.8}
 body[data-hb-ui=swap-hearts]:not(.is-playing) .game-layout{grid-template-columns:minmax(0,1fr);padding:22px;gap:16px}
 body[data-hb-ui=swap-hearts]:not(.is-playing) .side-panel{grid-row:1}
 body[data-hb-ui=swap-hearts]:not(.is-playing) .deck-showcase{max-height:170px;overflow:hidden;order:2}
 body[data-hb-ui=swap-hearts] .modes{grid-template-columns:1fr;gap:8px}
 body[data-hb-ui=swap-hearts] .modes button{font-size:15px;padding:12px}
 body[data-hb-ui=book-cricket] :is(.setup-grid,.match-grid){grid-template-columns:minmax(0,1fr);gap:24px}
 body[data-hb-ui=book-cricket] .setup-card{padding:22px}
 body[data-hb-ui=book-cricket] .setup-grid{padding-top:20px}
 body[data-hb-ui=fairway-nine] .landing{grid-template-columns:minmax(0,1fr);gap:28px}
 body[data-hb-ui=fairway-nine] .setup-panel{padding:22px}
 body[data-hb-ui=city-circuit] .landing{grid-template-columns:minmax(0,1fr)}
 body[data-hb-ui=city-circuit] .landing>div:first-child{order:0}
 body[data-hb-ui=city-circuit] .preview-side{order:1}
 body[data-hb-ui=city-circuit] .setup-panel{padding:22px}
 body[data-hb-ui=pictionary] main{padding:0 16px;margin-top:24px}
 body[data-hb-ui=pictionary] .entry{padding:24px;margin:24px auto}
 body[data-hb-ui=pictionary] .logo{width:min(44vw,190px);height:54px}
 body[data-hb-ui=my-quiz] :is(.editor,.stage){padding:22px}
 body[data-hb-ui=my-quiz] .entry-grid{grid-template-columns:minmax(0,1fr)}
 body[data-hb-ui=riddles-puzzles] .hero{padding:24px}
 body[data-hb-ui=riddles-puzzles] .mode-grid{grid-template-columns:minmax(0,1fr)}
 body[data-hb-ui=arrow-escape] .journey-panel{padding:16px}
 body[data-hb-ui=arrow-escape] .game-heading{gap:16px}
 body[data-hb-ui=living-chess] .scene-heading h1{font-size:30px}
 body[data-hb-ui=living-chess] .scene-heading p{font-size:13px;max-width:260px}
 body[data-hb-ui=pen-fight] .game-menu{padding:24px}
 body[data-hb-ui=pen-fight] .modes{gap:8px}
 body[data-hb-ui=buddy-rush] .menu-content h1{font-size:40px}
 body[data-hb-ui=buddy-rush] .menu-content p{font-size:13px}
 body[data-hb-ui=buddy-dash] .menu-content h1{font-size:48px;letter-spacing:-1.5px}
 body[data-hb-ui=buddy-dash] .menu-content p{font-size:14px}
 body[data-hb-ui=city-racing] .race-panel{padding:22px}
 body[data-hb-ui=city-racing] .hero h1{font-size:54px}
 body[data-hb-ui=squad-surge] .sector-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:420px){
 body[data-hb-ui=pictionary] .entry-actions>div{grid-template-columns:minmax(0,1fr)}
 body[data-hb-ui=clubhouse] .room-actions{flex-wrap:wrap}
 body[data-hb-ui=clubhouse] .room-actions>button{flex:1 1 160px}
 body[data-hb-ui=pen-fight] .join-row{flex-wrap:wrap}
 body[data-hb-ui=pen-fight] .join-row input{flex:1 1 160px}
 body[data-hb-ui=wordle] .key{padding-left:2px;padding-right:2px}
}
@media(max-height:520px) and (orientation:landscape){
 body[data-hb-ui=buddy-rush] .menu-content h1,body[data-hb-ui=buddy-dash] .menu-content h1{font-size:34px}
 body[data-hb-ui=buddy-rush] .swatch{width:36px;height:36px}
 body[data-hb-ui=buddy-dash] .overlay{padding:18px 5%}
 body[data-hb-ui=pen-fight] .game-menu{padding:20px}
}
/* Final responsive corrections observed during real game flows. */
body[data-hb-ui=clubhouse] #hundredSetup{background:white;border:1px solid var(--hb-line);border-radius:20px;padding:28px;box-shadow:none}
body[data-hb-ui=clubhouse] #hundredView .ha-mode-card{border:1px solid var(--hb-line);box-shadow:none;background:var(--hb-canvas)}
body[data-hb-ui=clubhouse] #hundredView .ha-mode-tag{background:var(--hb-soft);color:var(--hb-accent);border:0;box-shadow:none;transform:none;border-radius:6px;letter-spacing:.08em;font-size:11px;padding:7px 10px}
body[data-hb-ui=clubhouse] #hundredView .ha-mode-buttons button{background:white;border:1px solid var(--hb-line);box-shadow:none;color:var(--hb-ink)}
body[data-hb-ui=clubhouse] #hundredView .ha-mode-buttons button[aria-pressed=true]{background:var(--hb-accent);color:white;border-color:var(--hb-accent)}
body[data-hb-ui=clubhouse] #hundredView .hundred-heading h1 span{color:var(--hb-accent)}
body[data-hb-ui=clubhouse] .sq-colors label{min-width:44px;min-height:44px;display:grid;place-items:center}
body[data-hb-ui=clubhouse] .sq-colors label span{width:30px;height:30px}
body[data-hb-ui=fairway-nine] .header-actions button{font-size:12px;padding:10px 12px;min-height:44px;border:1px solid var(--hb-line);border-radius:10px;white-space:nowrap;color:var(--hb-ink)}
body[data-hb-ui=fairway-nine] .landing-copy .eyebrow{font-size:11px;background:var(--hb-soft);color:var(--hb-accent)}
body[data-hb-ui=fairway-nine] .mode-options button.active{background:var(--hb-soft);color:var(--hb-accent)}
body[data-hb-ui=city-circuit] .mode-tabs{background:var(--hb-soft)}
body[data-hb-ui=city-circuit] .mode-tabs button.active{color:var(--hb-accent)}
body[data-hb-ui=city-circuit] :is(#createRoom,#start,#joinRoom){background:var(--hb-accent);color:white;box-shadow:none}
body[data-hb-ui=city-racing] .error-screen{max-width:560px;width:100%;box-sizing:border-box;background:#172638;border:1px solid var(--hb-line);border-radius:20px;padding:28px}
body[data-hb-ui=city-racing] .error-screen h2{font-size:32px;letter-spacing:-.8px;text-transform:none;overflow-wrap:anywhere;line-height:1.1}
body[data-hb-ui=city-racing] .error-screen a{color:var(--hb-accent);display:inline-flex;align-items:center;min-height:44px}
body[data-hb-ui=living-chess] .hb-graphics-notice{width:min(460px,calc(100% - 40px));padding:28px;background:#1d3028;border:1px solid #607369;border-radius:20px;box-sizing:border-box;pointer-events:auto;text-align:left}
body[data-hb-ui=living-chess] .hb-graphics-notice h2{font-size:30px;line-height:1.15;letter-spacing:-1px}
body[data-hb-ui=living-chess] .hb-graphics-notice p{font-size:16px;line-height:1.7;color:#c1d0c3}
body[data-hb-ui=living-chess] .hb-graphics-notice a{display:inline-flex;min-height:44px;align-items:center;color:#d0e2bb;margin-right:18px;text-underline-offset:4px}
body[data-hb-ui=living-chess].hb-graphics-unavailable :is(.scene-heading,.scene-tools,.turn-card,aside){display:none}
body[data-hb-ui=living-chess].hb-graphics-unavailable .arena{min-height:460px;height:70vh}
body[data-hb-ui=living-chess].hb-graphics-unavailable #loading{z-index:20;display:grid;place-items:center;padding:0}
@media(max-width:768px){
 body[data-hb-ui=clubhouse] #hundredSetup{padding:20px}
 body[data-hb-ui=clubhouse] #sqMatch{padding:18px}
 body[data-hb-ui=clubhouse] .sq-player{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px}
 body[data-hb-ui=clubhouse] .sq-player>strong{text-align:left;font-size:26px}
 body[data-hb-ui=clubhouse] .sq-player b{font-size:14px}
 body[data-hb-ui=fairway-nine] .landing-copy{order:-1}
 body[data-hb-ui=fairway-nine] header{height:auto;min-height:76px;flex-wrap:wrap;padding:14px 20px;gap:10px}
 body[data-hb-ui=fairway-nine] .header-actions{margin-left:auto}
 body[data-hb-ui=pictionary] header{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 20px}
 body[data-hb-ui=pictionary] header>a:first-child{grid-column:1/-1;font-size:13px;text-align:left;min-height:32px}
 body[data-hb-ui=pictionary] .entry h1{font-size:32px}
}

@media(max-width:380px){body[data-hb-ui=arrow-escape]{min-width:0}body[data-hb-ui=arrow-escape] .game-toolbar{flex-wrap:wrap}body[data-hb-ui=buddy-rush] .header{gap:8px}body[data-hb-ui=buddy-dash] header{gap:8px}}
body[data-hb-ui=living-chess].hb-graphics-unavailable main{display:block;max-width:1100px;margin:auto}
body[data-hb-ui=living-chess] .hb-graphics-notice p{letter-spacing:0;text-transform:none}
@media(max-width:420px){
 body[data-hb-ui=buddy-dash] .menu-content{width:100%;min-width:0}
 body[data-hb-ui=buddy-dash] .characters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 body[data-hb-ui=buddy-dash] .characters button{min-width:0;padding:10px 4px}
 body[data-hb-ui=buddy-dash] .overlay{overflow-x:hidden}
 body[data-hb-ui=buddy-dash] .controls p{display:none}
}