:root {
  --bg:#0f0f1a;
  --panel:#1a1a2e;
  --panel-2:#242440;
  --input-bg:#2a2a48;
  --border:#3d3d5c;
  --grid-line:#4a4a6a;
  --text:#ffffff;
  --text-2:#c8c8da;
  --text-3:#9898b0;
  --text-4:#6a6a82;
  --accent:#fbbf24;
  --accent-dim:#92640f;
  --success:#4cdf9a;
  --danger:#ff5252;
  --neon-glow:#ccff00;
  --neon-org:#ff6600;
  --tile-bg:linear-gradient(180deg,#f5f0e8 0%,#e0d8c8 100%);
  --tile-text:#1a1410;
  --radius:14px;
  --radius-sm:10px;
  --shadow-tile:0 3px 0 var(--tile-edge), 0 5px 10px rgba(0,0,0,.45);
  --fd:'Syne',sans-serif;
  --ft:'Archivo Black',sans-serif;
  --fu:'Outfit',sans-serif;
  --fcode:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;
  --accent-2:#ffd24a;
  --accent-edge:#a86f06;
  --edge:#0a0b16;
  --tile-edge:#b9ad94;
  /* 58.9 (FIX-80): the stacked home card surface, shared by every screen */
  --card-bg:linear-gradient(180deg,rgba(34,46,86,.96),rgba(20,28,56,.96));
  --card-line:rgba(140,170,255,.28);
  --card-shadow:0 4px 0 rgba(0,0,0,.45);
  --card-sub:#aab6d3;
  --card-radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--text);font-family:var(--fu);font-size:16px;-webkit-font-smoothing:antialiased;overscroll-behavior:none;height:100%;width:100%;overflow:hidden;user-select:none;-webkit-user-select:none}
body{display:flex;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{width:100%;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}

/* INPUTS */
input[type="text"],input[type="number"]{background:var(--input-bg);border:2px solid var(--border);color:var(--text);font-family:var(--fu);font-size:18px;font-weight:600;padding:14px 16px;border-radius:var(--radius);width:100%;outline:none}
input:focus{border-color:var(--accent);box-shadow:0 0 12px rgba(251,191,36,.2)}
input::placeholder{color:var(--text-3)}
input[type="number"]{-moz-appearance:textfield}
button{background:var(--panel-2);color:var(--text);border:2px solid var(--border);font-family:var(--fu);font-size:16px;font-weight:800;padding:14px 20px;border-radius:var(--radius);cursor:pointer;transition:transform .08s ease, box-shadow .08s ease, background .15s, color .15s, border-color .15s;letter-spacing:.01em;box-shadow:0 4px 0 var(--edge)}
button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
button,.hdr-btn,.rack-actions button,.lobby-action-bar button,.setup-sticky-top button{touch-action:manipulation;user-select:none;-webkit-user-select:none}
button.primary{background:linear-gradient(180deg,var(--accent-2) 0%,var(--accent) 100%);color:#1a1410;border-color:#e7ab12;font-weight:900;font-size:17px;box-shadow:0 4px 0 var(--accent-edge), inset 0 1px 0 rgba(255,255,255,.45);text-shadow:0 1px 0 rgba(255,255,255,.35)}
button.primary:disabled{background:var(--panel-2);color:var(--text-4);border-color:var(--border);cursor:not-allowed}
button.ghost{background:var(--card-bg);border-color:var(--card-line);color:#fff;box-shadow:var(--card-shadow)}
button.sm{padding:10px 14px;font-size:14px}
button.danger-ghost{background:rgba(255,82,82,.1);border-color:rgba(255,82,82,.5);color:var(--danger)}
select{background:var(--input-bg);border:2px solid var(--border);color:var(--text);font-family:var(--fu);font-size:16px;font-weight:600;padding:12px 16px;border-radius:var(--radius);width:100%;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8c8da' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}

/* LAYOUT */
.screen{flex:1;display:flex;flex-direction:column;overflow:hidden}
.welcome-screen .wordmark{font-size:clamp(44px,13vw,72px)}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:24px}.gap-sm{gap:10px}.gap-md{gap:16px}.gap-lg{gap:24px}
.fc{display:flex;flex-direction:column}.fr{display:flex;align-items:center}.ctr{text-align:center}

/* SETUP SCREEN — sticky top bar, scrollable body underneath */
.setup-screen{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.setup-sticky-top{flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px calc(10px + env(safe-area-inset-top,0px)) 16px;background:var(--bg);border-bottom:1px solid var(--border);z-index:5;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.setup-sticky-top button{width:100%}
.setup-body{padding-top:18px}

/* BRANDING */
.label{color:var(--text-2);font-size:16px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;margin-bottom:8px}

/* LOBBY */
.lobby-code{font-family:var(--fcode);font-weight:800;font-size:56px;letter-spacing:.1em;color:var(--accent);text-shadow:0 0 30px rgba(251,191,36,.4)}
.player-row{background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:8px 12px;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:var(--text)}
.player-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-on{background:var(--success);box-shadow:0 0 10px var(--success)}.dot-off{background:var(--text-4)}
.tag{margin-left:auto;font-size:14px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.05em;flex-shrink:0}
.tag-host{background:rgba(251,191,36,.2);color:var(--accent);border:1px solid var(--accent)}
.setting-row{display:flex;align-items:center;gap:12px;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:14px 16px}
.setting-row select,.setting-row input[type="number"]{width:auto;min-width:132px;max-width:180px;padding:10px 12px;font-size:16px}
.welcome-screen{overflow-y:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start!important;padding-top:max(24px,env(safe-area-inset-top) + 18px)!important;padding-bottom:72px!important;touch-action:pan-y}
.team-section .team-top .label{margin:0}
.team-section .create-team-compact,.team-section .bot-team-compact{padding:7px 10px;font-size:13px;border-radius:12px;white-space:nowrap}
.team-section .team-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.assign-row.compact-assign-row{grid-template-columns:minmax(0,1fr) minmax(120px,150px);gap:8px;align-items:center}
.assign-row.compact-assign-row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.check-popup .def-entry{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
.check-popup .def-entry:first-child{border-top:0;margin-top:0;padding-top:0}


.tile.team-ghost{background:rgba(251,191,36,.38);border-color:rgba(251,191,36,.85);color:#111;box-shadow:0 0 0 2px rgba(251,191,36,.38), inset 0 0 10px rgba(255,255,255,.28)}
@keyframes scorePop{0%{opacity:0;transform:translate(-50%,-35%) scale(.8)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}78%{opacity:1;transform:translate(-50%,-56%) scale(1)}100%{opacity:0;transform:translate(-50%,-72%) scale(.96)}}
.review-board-clean{background:#000;padding:0;gap:0;overflow:hidden}
.review-board-clean .game-header,.review-board-clean .scores-strip,.review-board-clean .review-banner{display:none!important}
.review-board-clean .board-wrap{flex:1 1 auto!important;margin:0!important;padding:0!important;width:100%!important;min-height:100%!important;border-radius:0!important;background:#000!important}
.review-board-clean .board-wrap.globe-mode{margin-bottom:0!important;padding-bottom:0!important}
.def-more{margin-top:5px;border-top:1px solid rgba(255,255,255,.08);padding-top:5px}
.def-meaning.secondary{font-size:12px;color:var(--text-3);margin-top:3px}
.def-link{display:inline-block;margin-top:6px;color:var(--accent);font-size:12px;font-weight:800;text-decoration:underline}
.stats-overlay .score-row{grid-template-columns:1fr auto auto}
.hdr-btn{font-size:13px!important}

/* GAME HEADER */
.hdr-round.final .hdr-round-num{color:var(--danger);animation:finalPulse 1.1s ease-in-out infinite}
.hdr-round.final .hdr-round-top{color:var(--danger)}
.hdr-round-dot{width:4px;height:4px;border-radius:50%;background:var(--border)}
.hdr-round-dot.done{background:var(--accent)}
.hdr-round-dot.now{background:var(--accent);box-shadow:0 0 6px var(--accent);width:5px;height:5px}
.hdr-round.final .hdr-round-dot.now{background:var(--danger);box-shadow:0 0 6px var(--danger)}
@keyframes finalPulse{0%,100%{opacity:1}50%{opacity:.55}}
.hdr-timer.warn{color:var(--accent-dim)}.hdr-timer.danger{color:var(--danger);animation:pulse .8s ease-in-out infinite}
.hdr-timer.paused{color:var(--text-4);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hdr-btn{background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-radius:10px;padding:6px 10px;font-size:12px;font-weight:700;color:#fff;cursor:pointer}

/* TURN BANNER */
.turn-banner.yours{background:#000;color:#fff;border:2px solid #fff}
.turn-banner.theirs{background:var(--panel);color:var(--text-2);border:2px solid var(--border)}
/* Big readable turn line — Archivo Black for max legibility, no separate ROUND line.
   Round info already shown in the top-left header chip. */
.tb-turn{font-family:var(--ft);font-weight:900;font-size:clamp(28px,8vw,40px);letter-spacing:-.01em;line-height:1;text-transform:uppercase}
.turn-banner.yours .tb-turn{color:#fff}
.turn-banner.theirs .tb-turn{color:var(--text-2)}


/* SCORES STRIP */
.scores-strip::-webkit-scrollbar{display:none}
.starter-pointer{position:absolute;z-index:50;pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:starterBounce 1.2s ease-in-out infinite}
.starter-pointer-text{background:rgba(251,191,36,.92);color:#000;font-family:var(--fu);font-weight:700;font-size:13px;padding:5px 12px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.starter-pointer-arrow{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid rgba(251,191,36,.92)}
@keyframes starterBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.score-chip.me .sc-name{color:var(--text)}
.score-chip.turn .sc-name{color:#000}
.score-chip.skipped{opacity:0.5;text-decoration:line-through}
.sc-name{color:var(--text-2);font-size:15px;max-width:98px;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.turn-arrow{height:32px;min-width:20px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;font-weight:900;color:rgba(255,255,255,.2);flex-shrink:0;margin:0 -2px}
.turn-arrow.next{color:var(--accent);font-size:24px;filter:drop-shadow(0 0 6px rgba(251,191,36,.6))}


.score-chip.done{background:#fff;color:#000;border-color:#fff!important;box-shadow:0 0 14px rgba(255,255,255,.35)}
.score-chip.done .sc-name{color:#000!important}
.sc-score-stack{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1;min-width:34px;padding-right:2px}
.sc-round{font-family:var(--fcode);font-size:18px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.score-chip.turn .sc-round,.score-chip.done .sc-round{color:#000!important}
.scores-strip.simultaneous .turn-arrow{display:none}
.gear-btn{font-size:22px;line-height:1;padding:5px 10px;color:#fff}
.host-menu-panel{background:var(--panel);border:2px solid var(--border);border-radius:var(--radius);padding:14px;width:min(100%,420px);max-width:min(100%,420px);display:flex;flex-direction:column;gap:8px;box-sizing:border-box;overflow-x:hidden}
.host-menu-code{font-family:var(--fcode);font-size:30px;font-weight:800;letter-spacing:.12em;color:var(--accent);text-align:center;background:var(--panel-2);border-radius:var(--radius);padding:9px}
.host-menu-panel button{min-height:42px;padding:10px 12px;font-size:14px;white-space:normal;line-height:1.15}.host-menu-panel .setting-row{gap:8px}.host-menu-panel select,.host-menu-panel input{min-height:40px}
.host-player-row .name{flex:1;font-weight:700;color:var(--text)}
.confirm-overlay{position:absolute;inset:0;background:rgba(15,15,26,.94);z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.ov-sub{color:var(--text-2);font-size:15px}
.def-close{position:absolute;top:6px;right:8px;background:rgba(255,255,255,.08);border:1px solid var(--border);color:#fff;width:34px;height:34px;border-radius:17px;font-size:23px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;padding:0}
.def-challenge-area{margin-top:10px;padding-top:10px;border-top:1px solid rgba(251,191,36,.35);display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.def-owner-note{font-size:13px;font-weight:800;color:var(--text-2);line-height:1.25}
.def-challenge-btn{background:linear-gradient(180deg,#fcd34d 0%,#f59e0b 100%);border:2px solid #fbbf24;color:#1a1410;font-weight:900;border-radius:12px;padding:10px 12px;font-size:15px;pointer-events:auto;box-shadow:0 2px 8px rgba(251,191,36,.35)}
.challenge-strip{position:absolute;right:12px;bottom:calc(126px + env(safe-area-inset-bottom));z-index:240;background:rgba(17,24,39,.62);border:1.5px solid rgba(251,191,36,.78);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 18px rgba(251,191,36,.16);backdrop-filter:blur(8px);pointer-events:auto;cursor:pointer;max-width:min(230px,calc(100vw - 28px));animation:challengePulse 1.2s ease-in-out infinite alternate;user-select:none;-webkit-user-select:none}
.challenge-strip .txt{flex:1;font-weight:900;color:#fff;font-size:13px;line-height:1.12}.challenge-strip .word{display:block;color:var(--accent);font-size:15px;text-transform:uppercase;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.challenge-strip .challenge-line{display:flex;align-items:baseline;gap:7px}.challenge-strip .challenge-count{font-family:var(--fcode);font-size:19px;color:#fff;font-variant-numeric:tabular-nums}
@keyframes challengePulse{from{transform:translateY(0);box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 12px rgba(251,191,36,.12)}to{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.48),0 0 24px rgba(251,191,36,.30)}}
.challenge-overlay{position:absolute;inset:0;background:rgba(15,15,26,.96);z-index:170;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px;text-align:center;box-sizing:border-box}
.challenge-card{background:var(--panel);border:2px solid var(--accent);border-radius:16px;padding:14px;width:min(420px,calc(100vw - 28px));max-width:calc(100vw - 28px);box-sizing:border-box;display:flex;flex-direction:column;gap:11px;box-shadow:0 0 30px rgba(251,191,36,.2);overflow:hidden}
.challenge-title{font-family:var(--fd);font-weight:800;font-size:clamp(27px,8vw,34px);color:#fff;letter-spacing:.02em}
.challenge-word{font-family:var(--fd);font-weight:800;font-size:clamp(26px,10vw,48px);color:var(--accent);letter-spacing:.04em;text-transform:uppercase;max-width:100%;overflow-wrap:anywhere;word-break:break-word;line-height:1.05}
.challenge-text{color:var(--text-2);font-size:clamp(15px,4.2vw,17px);line-height:1.35;overflow-wrap:anywhere}
.challenge-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.challenge-actions button{flex:1 1 140px;min-width:0;white-space:normal}
.challenge-countdown{align-self:center;background:rgba(17,24,39,.62);border:1.5px solid rgba(251,191,36,.78);border-radius:16px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 18px rgba(251,191,36,.16);max-width:100%;transition:border-color .2s,box-shadow .2s}
.challenge-countdown-row{display:flex;align-items:baseline;gap:8px;font-weight:900;color:#fff;font-size:13px}.challenge-countdown-label{color:var(--accent);font-size:13px;letter-spacing:.02em}.challenge-countdown-num{font-family:var(--fcode);font-size:22px;color:#fff;font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}
.challenge-zero-line{color:var(--text-2);font-size:13px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.challenge-countdown.urgent{border-color:var(--danger);box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 18px rgba(255,82,82,.28)}.challenge-countdown.urgent .challenge-countdown-num,.challenge-countdown.urgent .challenge-countdown-label{color:var(--danger)}
.challenge-timer-overlay{position:fixed;inset:0;background:#000;z-index:1605;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;color:#fff}.challenge-timer-overlay button{font-size:clamp(18px,5vw,24px);padding:14px 24px}
.sim-count-overlay{position:fixed;inset:0;background:rgba(15,15,26,.98);z-index:690;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.waiting-join{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;gap:18px}.waiting-join h2{font-family:var(--fd);font-size:42px;color:#fff}.waiting-join .code{font-family:var(--fcode);font-size:38px;color:var(--accent);letter-spacing:.12em;font-weight:900}.waiting-join p{color:var(--text-2);font-size:22px;line-height:1.35;font-weight:700}.waiting-summary{background:var(--panel);border:2px solid var(--border);border-radius:18px;padding:18px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px}.waiting-summary-row{display:flex;justify-content:space-between;gap:16px;font-size:20px;font-weight:800}.waiting-summary-row span:first-child{color:var(--text-2)}.waiting-summary-row span:last-child{color:var(--accent)}



/* V24 clarity fixes */
.join-help{font-family:var(--fu);font-size:17px;font-weight:700;color:var(--text-2);line-height:1.5;text-align:center;overflow:visible}.lobby-action-bar .start-game-btn{width:100%;min-height:46px;font-size:16px;font-weight:900}.lobby-action-row{display:grid;grid-template-columns:1fr;gap:6px}.lobby-action-row button{min-height:38px;padding:8px 8px;font-size:13px}.lobby-screen{padding-bottom:76px}
.people-team-panel{background:transparent;border:0;border-radius:0;padding:0;display:flex;flex-direction:column;gap:8px}
.people-team-panel .lobby-section-title{margin-top:0;text-align:left}
.final-card.winner .fc-name{font-size:clamp(24px,7vw,34px);font-weight:900}
.final-standings{display:flex;flex-direction:column;gap:10px}
.winner-margin{font-size:clamp(20px,5.5vw,28px);font-weight:900;color:#fff;text-align:center;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:14px;padding:10px 12px;line-height:1.25}
.no-score-panel{background:#000;border:3px solid #fff;border-radius:18px;padding:24px 18px;text-align:center;color:#fff;display:flex;flex-direction:column;gap:10px}
.no-score-title{font-family:var(--fd);font-weight:900;font-size:clamp(44px,13vw,72px);letter-spacing:-.04em;line-height:.92;text-transform:uppercase}
.no-score-sub{font-size:clamp(18px,5vw,24px);font-weight:800;color:#e5e7eb;line-height:1.3}
.bg-detail{font-size:clamp(18px,5vw,28px);font-weight:900;color:#fff;text-align:center;line-height:1.2;max-width:92vw}.bg-detail .bonus{color:var(--success)}
@media(max-width:420px){.pad{padding:18px}}

/* BOARD */
.board{display:grid;gap:2px;background:var(--grid-line);padding:2px;border-radius:var(--radius);border:2px solid var(--grid-line);position:relative}
/* Wrap-edge hint: subtle yellow seam stripes on left/right edges of the flat board
   so players notice the board wraps left↔right. Globe mode replaces this entirely. */
.board::before,.board::after{content:'';position:absolute;top:2px;bottom:2px;width:3px;pointer-events:none;border-radius:2px;background:repeating-linear-gradient(180deg,rgba(251,191,36,0.55) 0px,rgba(251,191,36,0.55) 6px,transparent 6px,transparent 12px);opacity:0.55}
.board::before{left:-1px}
.board::after{right:-1px}
.cell{background:var(--panel);border-radius:3px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;aspect-ratio:1;cursor:pointer;overflow:hidden}
.cell.centre{background:rgba(204,255,0,.05)}
.cell.centre::after{content:'\2605';color:var(--neon-glow);font-size:clamp(16px,4vw,24px);animation:starpulse 1.5s infinite;text-shadow:0 0 10px var(--neon-glow)}
@keyframes starpulse{0%,100%{transform:scale(1);opacity:0.6;text-shadow:0 0 5px var(--neon-glow)}50%{transform:scale(1.3);opacity:1;text-shadow:0 0 15px var(--neon-glow)}}
.cell.has-tile::after{display:none}

/* MULTIPLIERS */
.cell.hot-DL, .cell.hot-TL, .cell.hot-DW, .cell.hot-TW {background:transparent;border:none;}
.cell .ml{position:absolute;font-size:clamp(8px,1.8vw,11px);font-family:var(--fd);font-weight:800;z-index:1;transform:rotate(-45deg);opacity:0.5}
.cell.hot-DL .ml{color:#00ffff}
.cell.hot-TL .ml{color:#39ff14}
.cell.hot-DW .ml{color:var(--neon-org)}
.cell.hot-TW .ml{color:#ffff00}
.cell.has-tile .ml{display:none}

/* TILES */
.tile{position:absolute;inset:1px;background:var(--tile-bg);color:var(--tile-text);border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-size:clamp(11px,2.5vw,18px);padding-bottom:3px;box-shadow:var(--shadow-tile);animation:drop .25s cubic-bezier(.34,1.56,.64,1)}
.tile.ghost{outline:3px solid var(--accent);outline-offset:-1px;box-shadow:0 0 12px rgba(251,191,36,.4)}/* v56: warm yellow instead of fluorescent */
.tile.player-highlight .tp{color:#1a1410;opacity:.85}
.tile .tp{position:absolute;bottom:1px;right:2px;font-family:var(--fcode);font-size:0.45em;line-height:1;font-weight:900;color:var(--tile-text);opacity:.82;text-shadow:0 0 2px rgba(245,240,232,.8)}
@keyframes drop{from{transform:translateY(-12px) scale(.8);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}


/* 5-SECOND RECENT MOVE PULSE — fluorescent yellow, fades at end */
@keyframes recentPop {
  0%   { transform: scale(1);    background: #fbbf24; box-shadow: 0 0 18px 7px rgba(251,191,36,.9), 0 0 36px 14px rgba(251,191,36,.5); }/* v56 warm yellow */
  4%   { transform: scale(1.20); background: #ffffff; box-shadow: 0 0 40px 18px rgba(255,255,200,1); }
  10%  { transform: scale(1);    background: #ffff00; box-shadow: 0 0 18px 7px rgba(255,255,0,.9); }
  18%  { transform: scale(1.08); background: #ffff44; box-shadow: 0 0 26px 10px rgba(255,255,0,.8); }
  30%  { transform: scale(1);    background: #ffff00; box-shadow: 0 0 18px 7px rgba(255,255,0,.85); }
  42%  { transform: scale(1.08); background: #ffff44; box-shadow: 0 0 26px 10px rgba(255,255,0,.8); }
  55%  { transform: scale(1);    background: #ffff00; box-shadow: 0 0 18px 7px rgba(255,255,0,.75); }
  68%  { transform: scale(1.05); background: #ffff44; box-shadow: 0 0 20px 8px rgba(255,255,0,.65); }
  80%  { transform: scale(1);    background: #ffff00; box-shadow: 0 0 14px 5px rgba(255,255,0,.5); }
  90%  { transform: scale(1);    background: #ffd700; box-shadow: 0 0 10px 4px rgba(255,220,0,.3); }
  100% { transform: scale(1);    background: var(--tile-bg); box-shadow: var(--shadow-tile); }
}

/* BLANK TILE */
.rack-tile.blank{background:linear-gradient(180deg,#fff7d6 0%,#f2e2a8 100%);border:2px dashed rgba(26,20,16,.35)}
.rack-tile.blank::before{content:'\2605';font-size:18px;color:rgba(26,20,16,.45);font-family:var(--fd)}
.rack-tile.blank .tp{display:none}



/* SHARE INVITE */
.qr-overlay{align-items:center;justify-content:center;padding:16px}
.qr-title{
  font-size:clamp(24px,7vw,38px);
  font-family:var(--ft);
  text-transform:uppercase;
  text-align:center;
}
.qr-img{
  width:min(320px,calc(100vw - 72px));
  height:min(320px,calc(100vw - 72px));
  background:white;
  border-radius:12px;
  padding:10px;
}
.qr-code{
  font-family:var(--fcode);
  font-size:clamp(28px,10vw,52px);
  font-weight:900;
  letter-spacing:.18em;
  color:var(--accent);
}
.qr-sub{
  text-align:center;
  color:var(--muted);
  font-weight:800;
  line-height:1.35;
}

/* CLEAR BLANK TILE MARKING */
.tile.blank{
  background:linear-gradient(180deg,#fff7d6 0%,#f2e2a8 100%);
  border:2px dashed rgba(26,20,16,.62);
  box-shadow:0 0 0 1px rgba(255,255,255,.55), var(--shadow-tile);
}
.tile.blank::before{
  content:'★';
  position:absolute;
  left:3px;
  bottom:2px;
  font-family:var(--fd);
  font-size:clamp(9px,30%,14px);
  line-height:1;
  color:rgba(26,20,16,.55);
  z-index:2;
}
.tile.blank::after{
  content:'BLANK';
  position:absolute;bottom:2px;
  left:50%;width:4px;height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  top:2px;
  transform:translateX(-50%);
  font-family:var(--fs);
  font-weight:900;
  font-size:clamp(6px,18%,10px);
  letter-spacing:.04em;
  color:rgba(26,20,16,.52);
  padding:1px 3px;
  z-index:2;
}
.tile.blank .tp{
  opacity:1;
  color:#111;
  background:rgba(255,255,255,.64);
  border-radius:999px;
  padding:0 2px;
  right:1px;
  bottom:1px;
  text-shadow:none;
}
.tile.blank.recent .tp,
.tile.blank.player-highlight .tp{
  color:#111;
  opacity:1;
}

/* SETTING HINT */

/* LETTER PICKER */
.lp-overlay{position:fixed;inset:0;background:rgba(15,15,26,.85);backdrop-filter:blur(10px);z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;animation:defIn .2s ease-out}
.lp-title{font-family:var(--fd);font-weight:800;font-size:22px;color:var(--accent);margin-bottom:6px;letter-spacing:.02em;text-align:center}
.lp-sub{color:var(--text-3);font-size:13px;margin-bottom:20px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.lp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:360px;width:100%}
.lp-letter{aspect-ratio:1;background:var(--tile-bg);color:var(--tile-text);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-size:22px;box-shadow:var(--shadow-tile);cursor:pointer;transition:transform .1s;border:none;padding:0}
.lp-letter:active{transform:scale(.9)}
.lp-cancel{margin-top:20px}

/* START ORDER REVEAL: full-screen black and white order draw */
.sr-order{display:flex;flex-direction:column;gap:12px;width:min(620px,94vw);margin-top:4px}
.sr-rank{font-family:var(--fcode);font-weight:900;font-size:clamp(28px,8vw,42px);line-height:1;text-align:left;font-variant-numeric:tabular-nums;color:inherit;letter-spacing:-.04em}
.sr-order-name{font-family:var(--fd);font-weight:900;font-size:clamp(26px,7.5vw,42px);line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;letter-spacing:-.03em}
.sr-order-row.waiting .sr-roller{animation:srRollBlink .8s steps(2,end) infinite}
@keyframes srRollBlink{50%{filter:invert(1)}}

/* ROUND INTRO SPLASH */
.ri-overlay.final{background:radial-gradient(circle at 50% 40%, rgba(239,68,68,.18) 0%, rgba(15,15,26,.97) 60%)}
.ri-sub{color:var(--text-3);font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;opacity:0;animation:srFadeIn .3s .4s forwards}

/* BINGO SPLASH + FIREWORKS */
.bg-overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 45%, rgba(251,191,36,.22) 0%, rgba(15,15,26,.96) 55%);backdrop-filter:blur(14px);z-index:720;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:8px;animation:defIn .3s ease-out;overflow:hidden}
.bg-kicker{font-family:var(--fd);font-weight:800;font-size:14px;letter-spacing:.42em;color:var(--accent);text-transform:uppercase;opacity:0;animation:srFadeIn .3s forwards}
.bg-bingo{font-family:var(--fd);font-weight:800;font-size:clamp(64px,18vw,108px);letter-spacing:-.04em;line-height:.92;background:linear-gradient(180deg,#fbbf24 0%,#ef4444 55%,#fbbf24 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;text-shadow:0 0 40px rgba(251,191,36,.3);animation:bingoPop .6s cubic-bezier(.22,1.4,.32,1)}
@keyframes bingoPop{0%{opacity:0;transform:scale(.5) rotate(-8deg);letter-spacing:.2em}60%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0);letter-spacing:-.04em}}
.bg-player{font-family:var(--fu);font-weight:700;font-size:17px;color:var(--text-2);opacity:0;animation:srFadeIn .3s .5s forwards;text-align:center;letter-spacing:.04em}
.bg-player strong{color:var(--accent);font-weight:800}
.bg-word{font-family:var(--fd);font-weight:800;font-size:clamp(32px,9vw,48px);color:var(--text);text-transform:uppercase;letter-spacing:.06em;margin-top:10px;opacity:0;animation:srFadeIn .4s .7s forwards;text-shadow:0 0 20px rgba(251,191,36,.5);text-align:center;word-break:break-all;max-width:90vw}
.bg-score-row{display:flex;align-items:baseline;gap:10px;margin-top:14px;opacity:0;animation:srFadeIn .4s .9s forwards}
.bg-score-plus{font-family:var(--fd);font-weight:800;font-size:52px;color:var(--success);line-height:1;text-shadow:0 0 20px rgba(76,223,154,.6)}
.bg-score-bonus{background:rgba(76,223,154,.15);border:2px solid var(--success);border-radius:999px;padding:6px 14px;font-family:var(--fd);font-weight:800;font-size:12px;color:var(--success);letter-spacing:.18em;text-transform:uppercase}

/* Fireworks particles */
.bg-fw{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bg-fw-burst{position:absolute;width:0;height:0}
.bg-fw-burst::before,.bg-fw-burst::after,.bg-fw-particle{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;will-change:transform,opacity}
.bg-fw-particle{animation:fwFly 1.4s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fwFly{
  0%  {transform:translate(0,0) scale(.6); opacity:0}
  10% {opacity:1}
  60% {opacity:1}
  100%{transform:translate(var(--fw-x,80px), calc(var(--fw-y,80px) + 40px)) scale(1); opacity:0}
}

/* RACK */
/* Transparent globe chrome: UI chips stay readable but the globe can use the black space behind them. */
.scores-strip{display:flex;gap:8px;padding:5px 8px;overflow-x:auto;scrollbar-width:none;align-items:center;background:transparent!important;position:relative;z-index:20;margin-bottom:-42px;pointer-events:auto;border-color:transparent!important;box-shadow:none!important}
.tile.sim-round-recent{background:linear-gradient(145deg,#fff89a 0%,#ffe600 38%,#ffc400 68%,#b46b00 100%);color:#1a1410;box-shadow:inset 2px 2px 2px rgba(255,255,255,.95),inset -4px -5px 6px rgba(90,45,0,.42),0 0 18px 7px rgba(255,255,0,.82),0 9px 18px rgba(0,0,0,.55);border:1px solid rgba(255,244,112,.95);z-index:10}.tile.sim-round-recent .tp{color:#1a1410}.tile.recent{animation: recentPop 5s linear forwards;z-index:10;color:#1a1410;background:linear-gradient(145deg,#fff89a 0%,#ffe600 38%,#ffc400 68%,#b46b00 100%);border:1px solid rgba(255,244,112,.95);box-shadow:inset 2px 2px 2px rgba(255,255,255,.95),inset -4px -5px 6px rgba(90,45,0,.42),0 0 16px 6px rgba(255,255,0,.78),0 9px 18px rgba(0,0,0,.55);transform:translateY(-1px)}.tile.recent .tp{color:#1a1410}
.rack-tile{width:46px;height:46px;background:var(--tile-bg);color:var(--tile-text);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-size:24px;box-shadow:var(--shadow-tile);position:relative;cursor:pointer;transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;flex-shrink:0;touch-action:none;font-weight:800}
.rack-tile:active{transform:translateY(1px) scale(.97);box-shadow:0 1px 0 var(--tile-edge)}
.rack-tile.sel{transform:translateY(-9px) rotate(-2deg);outline:3px solid var(--accent);box-shadow:0 6px 0 var(--tile-edge), 0 14px 22px rgba(251,191,36,.35)}
.rack-tile.used{background:var(--panel-2);color:var(--text-4);box-shadow:none;cursor:default}
.rack-tile .tp{position:absolute;top:3px;right:5px;font-family:var(--fu);font-size:10px;font-weight:800;opacity:.7}
.rack-tile.dragging{opacity:.3}
.rack-ghost{position:fixed;z-index:200;width:48px;height:48px;background:var(--tile-bg);color:var(--tile-text);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-size:24px;box-shadow:0 8px 24px rgba(0,0,0,.6);pointer-events:none;transform:translate(-50%,-50%)}
.word-preview.bad{color:var(--danger)}.word-preview.ok{color:var(--success)}

/* OVERLAYS & RULES */
.overlay{position:absolute;inset:0;background:rgba(15,15,26,.95);backdrop-filter:blur(8px);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:32px 24px;gap:16px;overflow-y:auto}
.ov-title{font-family:var(--fd);font-weight:800;font-size:26px;color:var(--accent)}

/* PAUSE & SKIP */
.pause-overlay{position:absolute;inset:0;background:rgba(15,15,26,.92);backdrop-filter:blur(8px);z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.pause-text{font-family:var(--fd);font-weight:800;font-size:48px;color:var(--accent)}
.skip-banner{position:absolute;top:60px;left:50%;transform:translateX(-50%);background:var(--danger);color:#fff;padding:12px 20px;border-radius:var(--radius);font-weight:700;z-index:200;display:flex;flex-direction:column;align-items:center;gap:10px}

/* TOAST */
.toast-container{position:fixed;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--panel-2);border:2px solid var(--border);border-radius:var(--radius);padding:10px 16px;font-size:15px;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.5);animation:si .25s,fo .3s 2.4s forwards;max-width:90vw}
.toast.success{border-color:var(--success);color:var(--success)}
.toast.error{border-color:var(--danger);color:var(--danger)}
.toast.info{border-color:var(--accent);color:var(--accent)}
.tap-bubble{position:fixed;z-index:1001;transform:translate(-50%,-110%);background:rgba(0,0,0,.86);border:2px solid var(--accent);color:var(--accent);font-weight:900;font-size:14px;padding:8px 12px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap;animation:tbFade 1.8s ease forwards}
@keyframes tbFade{0%{opacity:0;transform:translate(-50%,-95%) scale(.96)}12%{opacity:1;transform:translate(-50%,-110%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-125%) scale(.98)}}
@keyframes si{from{transform:translateY(-20px);opacity:0}}
@keyframes fo{to{opacity:0;transform:translateY(-20px)}}

/* BOARD ZOOM */
.board-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:6px;overflow:hidden;contain:layout paint;background:var(--bg);touch-action:none}
.board-zoom{transform-origin:0 0;transition:transform .16s ease-out;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0)}
.board-zoom.pinching{transition:none}


/* GLOBE BOARD MODE */
.screen .board-wrap.globe-mode{margin-bottom:-150px;padding-bottom:150px}
.screen .rack-wrap{position:relative;z-index:35}
.globe-stage{position:relative;width:100%;height:100%;touch-action:none;overflow:hidden;background:transparent}
.globe-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* GUIDE / INSTALL OVERLAYS */
.guide-scroll.rules-fit img{width:100vw;margin-left:auto;margin-right:auto;max-width:none}
/* Floating close pill — overlaid top-right over the infographic image */
.guide-close-float{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:calc(env(safe-area-inset-right,0px) + 14px);z-index:850;background:rgba(0,0,0,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.28);color:#fff;font-family:var(--fu);font-size:14px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;letter-spacing:.04em}
.guide-close-float:active{transform:scale(.96);background:rgba(0,0,0,0.75)}
/* Agree to Disagree overlay */
.agree-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(15,15,26,.96);border:2px solid var(--accent);border-radius:18px;padding:24px 20px;text-align:center;max-width:320px;width:calc(100vw - 40px);z-index:200;box-shadow:0 0 40px rgba(251,191,36,.2)}
.agree-title{font-family:var(--fd);font-weight:900;font-size:clamp(26px,8vw,36px);color:var(--accent);letter-spacing:-.02em;margin-bottom:10px}
.agree-sub{color:var(--text-2);font-size:15px;line-height:1.45;font-weight:600}

/* DEFINITION POPUP */
.def-word{font-family:var(--fcode);font-weight:900;font-size:28px;color:var(--accent);letter-spacing:.03em;margin-bottom:6px;text-transform:uppercase}
.results-main-actions{display:flex;gap:10px;width:100%;max-width:460px}
.results-main-actions>button{flex:1 1 0;min-width:0}
.rematch-ask-note{font-size:15px;font-weight:700;color:var(--accent);text-align:center;margin:0 0 8px}
.rematch-ask-note.on-board{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 132px);z-index:30;background:rgba(10,12,24,.82);border-radius:var(--radius-sm);padding:8px 10px;pointer-events:none}
.rematch-btn.asked{box-shadow:0 0 0 3px var(--accent),0 0 18px rgba(251,191,36,.55)}
.ask-rematch-btn:disabled{opacity:.6}
.moves-overlay{position:fixed;inset:0;z-index:760;background:rgba(3,5,14,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.moves-card{width:min(380px,100%);max-height:calc(100vh - 64px);overflow-y:auto;background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;color:var(--text)}
.moves-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.moves-title{font-weight:800;font-size:20px;min-width:0;overflow-wrap:anywhere}
.moves-close{flex:0 0 auto;width:40px;height:40px;border-radius:50%;font-size:22px;line-height:1}
.moves-sub{opacity:.75;font-size:14px;margin:4px 0 10px}
.moves-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.moves-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04)}
.moves-row.best{background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.5)}
.moves-word{font-family:var(--fcode);font-weight:800;letter-spacing:.04em;overflow-wrap:anywhere;min-width:0}
.moves-pts{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.results-row{cursor:pointer}
.setting-estimate{font-size:14px;font-weight:600;color:var(--accent);opacity:.9;padding:2px 4px 10px;text-align:right}
.def-source{color:var(--text);opacity:.6;font-size:13px;font-weight:600;letter-spacing:.04em;margin:-4px 0 10px}
.def-pos{color:#fff;font-size:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;font-style:italic}
.def-meaning{color:var(--text);font-size:24px;font-weight:600;line-height:1.35}
@keyframes defIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* WELCOME DIVIDER */


.rounds-warning{margin:4px 10px 0;padding:7px 10px;border:1px solid rgba(251,191,36,.32);border-radius:12px;background:rgba(251,191,36,.10);color:#fef3c7;font-family:var(--fu);font-size:12px;text-align:center;letter-spacing:.01em}

/* IN-GAME ROOM CODE */

/* GRAPH CANVAS */

/* END OF GAME */
.final-title{font-family:var(--fd);font-weight:800;font-size:clamp(44px,12vw,64px);letter-spacing:-.03em;line-height:.95;background:linear-gradient(180deg,#fbbf24 0%,#ef4444 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin:4px 0}
.winner-panel{background:var(--panel);border:3px solid var(--accent);border-radius:16px;padding:22px 18px;text-align:center;position:relative;animation:winPop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes winPop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
.winner-label{font-family:var(--fcode);font-weight:900;font-size:28px;letter-spacing:.22em;color:#fff;margin-bottom:8px}
.winner-crown{font-size:42px;line-height:1;margin-bottom:4px;filter:drop-shadow(0 0 14px currentColor);animation:crownSpin 3s ease-in-out infinite}
@keyframes crownSpin{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}
.winner-name{font-family:var(--fd);font-weight:800;font-size:clamp(30px,9vw,46px);letter-spacing:-.02em;line-height:1;margin-bottom:14px;text-shadow:0 0 24px currentColor;word-break:break-word}
.winner-score{font-family:var(--fcode);font-weight:900;font-size:clamp(42px,14vw,68px);color:var(--text);letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.winner-points{font-family:var(--fu);font-weight:700;font-size:11px;letter-spacing:.32em;color:var(--text-3);margin-top:4px}

.final-card{background:var(--panel);border:2px solid var(--border);border-left:5px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;gap:10px}
.final-card.me{border-color:var(--accent);background:rgba(251,191,36,.06)}
.fc-rank{font-family:var(--fd);font-weight:800;font-size:30px;color:var(--text);min-width:72px;text-align:center;background:var(--panel-2);border-radius:16px;padding:7px 10px;flex-shrink:0;text-transform:uppercase}
.fc-rank sup{font-size:.42em;vertical-align:super;margin-left:1px}
.fc-rank.gold{background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#1a1410;box-shadow:0 2px 10px rgba(251,191,36,.4)}
.fc-rank.silver{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#1a1410}
.fc-rank.bronze{background:linear-gradient(135deg,#d97706,#92400e);color:#fff}
.fc-info{display:flex;flex-direction:column;min-width:0}
.fc-name{font-size:19px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-score{font-family:var(--fcode);font-weight:900;font-size:23px;color:var(--accent);flex-shrink:0;font-variant-numeric:tabular-nums}

.setup-msg{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px;gap:16px}
.setup-msg h2{font-family:var(--fd);font-weight:800;font-size:28px;color:var(--accent)}


.team-section{border:1px solid var(--card-line);border-radius:var(--card-radius);padding:12px;background:var(--card-bg);box-shadow:var(--card-shadow);margin-top:10px}
.team-card{border:1px solid var(--border);border-radius:14px;padding:10px;margin:8px 0;background:rgba(0,0,0,.18)}
.team-title{font-weight:900;font-size:18px;color:var(--accent);display:flex;align-items:center;gap:8px;justify-content:space-between}
.team-members{font-size:15px;color:var(--text-2);margin-top:6px;line-height:1.35}
.team-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.assign-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:8px;margin-top:8px}
.assign-row .name{font-weight:800;min-width:90px;flex:1;color:var(--text)}
.assign-row select{font-size:15px;min-width:130px}
.compact-team-card{margin:6px 0;padding:9px 10px}.team-line{display:flex;align-items:center;gap:8px;min-width:0}.team-line-name{font-weight:900;color:var(--accent);white-space:nowrap}.team-line-members{font-weight:700;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact-assign-row{flex-wrap:nowrap}.compact-assign-row select{flex:0 0 min(46vw,180px)}
.score-section-title{font-family:var(--fd);font-size:26px;font-weight:900;color:var(--accent);letter-spacing:.03em;margin-top:6px;text-align:center}
.score-table{width:100%;border:2px solid var(--border);border-radius:16px;background:rgba(255,255,255,.04);padding:8px;margin-bottom:12px}
.score-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px;font-weight:800}
.score-row:last-child{border-bottom:0}
.score-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.score-value{font-family:var(--fcode);font-weight:900;font-size:22px;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.score-value.tbc{font-size:17px;color:var(--text-3);letter-spacing:.08em}
.lobby-section-title{font-family:var(--fu);font-weight:800;font-size:15px;color:var(--card-sub);letter-spacing:0;text-transform:none;margin:4px 2px 0}
.review-actions{display:flex;gap:8px;padding:10px 12px;background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap;justify-content:center}
.review-banner{margin:8px 8px 4px;padding:10px 12px;border:2px solid #fff;border-radius:var(--radius);background:#000;color:#fff;text-align:center;font-family:var(--fd);font-weight:900;font-size:clamp(22px,7vw,34px);letter-spacing:-.02em}
.lobby-code,.host-menu-code,.waiting-join .code{font-family:var(--fcode);font-variant-numeric:tabular-nums}
.ri-overlay::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.28);pointer-events:auto}
.guide-scroll img{display:block;width:100vw;max-width:none;height:auto;margin:0 auto;padding:0;touch-action:pinch-zoom pan-x pan-y;transform-origin:top center}
.starter-pointer{pointer-events:none}

.ri-blocker{position:fixed;inset:0;z-index:998;background:rgba(0,0,0,.30);backdrop-filter:blur(3px);pointer-events:auto}
.ri-overlay{position:fixed;inset:0;background:rgba(8,10,18,.68);backdrop-filter:blur(12px);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:14px;animation:defIn .25s ease-out;left:14px;right:14px;width:auto;max-width:520px;margin:0 auto;border:2px solid rgba(255,255,255,.22);box-shadow:0 18px 60px rgba(0,0,0,.55);border-radius:22px;pointer-events:auto}


/* v22 interaction and display fixes */
button,input,select,.rack-tile,.scores-strip,.score-chip,.rack-wrap,.setup-screen,.welcome-screen{touch-action:manipulation;}
.globe-stage,.globe-stage canvas{touch-action:none;overscroll-behavior:none;}
.board-wrap.globe-mode{position:relative;background:radial-gradient(ellipse at 50% 38%,#0a1230 0%,#040818 45%,#01020a 78%,#000 100%);padding:0;overflow:hidden;margin-bottom:-230px!important;padding-bottom:230px!important;}
.board-wrap.globe-mode .globe-stage{height:calc(100% + 230px)!important;}
.rack-wrap,.rack,.rack-actions{background:transparent;}
.tile.recent,.tile.sim-round-recent{animation:none;filter:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -4px 0 rgba(120,68,4,.45),0 2px 5px rgba(0,0,0,.45);}
.phone-portrait-lock{display:none;position:fixed;inset:0;z-index:100000;background:rgba(5,8,15,.96);color:#fff;align-items:center;justify-content:center;text-align:center;padding:28px;font-family:var(--fs)}
.phone-portrait-lock .card{max-width:420px;border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:22px;background:rgba(255,255,255,.08);box-shadow:0 18px 60px rgba(0,0,0,.45)}
.phone-portrait-lock .icon{font-size:54px;margin-bottom:12px}.phone-portrait-lock .title{font-size:24px;font-weight:900;margin-bottom:8px}.phone-portrait-lock .msg{font-size:16px;line-height:1.35;color:#dbe5f5}
/* FIX-54: driven by body.phone-landscape-lock (see updatePhoneLandscapeLock in
   02-util.js), not a CSS orientation/max-height media query. The old
   `@media (orientation:landscape) and (max-height:520px) and (pointer:coarse)`
   rule keyed off window.innerHeight, which Chrome for iOS shrinks whenever the
   on-screen keyboard opens (Safari on iOS does not) - so tapping any text
   field could make an upright phone in Chrome momentarily look like a short
   landscape viewport and pop this lock up over the name-entry screen. The JS
   check instead reads screen.width/height, which don't change for an
   on-screen keyboard or browser chrome, only for an actual device rotation. */
body.phone-landscape-lock .phone-portrait-lock{display:flex}

/* ======= SCORBAL post-v22 enhancements ======= */

/* SCORBAL home: hero image fills upper area; brand text overlays the darker lower portion */
.scorbal-buttons{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
.scorbal-buttons .wide{grid-column:1/-1}
@media (min-aspect-ratio: 3/4){.scorbal-hero{flex:0 1 50vh}}

/* SCORBAL: hide game UI during cinematic, fade in after board forms */


/* SCORBAL: starter pointer styling — short, punchy, persistent flash */
.starter-pointer{animation:starterFlash 1.1s ease-in-out infinite}
.starter-pointer-text{background:linear-gradient(180deg,#fff5cc 0%,#fbbf24 100%);color:#1a1410;font-weight:900;font-size:14px;padding:7px 14px;border-radius:10px;box-shadow:0 4px 14px rgba(251,191,36,.55),0 0 22px rgba(251,191,36,.35);border:1.5px solid #fff;letter-spacing:.02em}
.starter-pointer-arrow{border-top-color:#fbbf24;border-left-width:10px;border-right-width:10px;border-top-width:13px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
@keyframes starterFlash{0%,100%{transform:translateY(0) scale(1);opacity:.95}50%{transform:translateY(-6px) scale(1.04);opacity:1}}
/* SCORBAL: pointer alarm flash — triggered when player attempts illegal first placement */
.starter-pointer.alarm{animation:starterAlarm 0.45s ease-in-out 4}
@keyframes starterAlarm{0%,100%{transform:translateY(0) scale(1.18);opacity:1;filter:drop-shadow(0 0 16px rgba(255,82,82,.85))}50%{transform:translateY(-12px) scale(1.32);opacity:1;filter:drop-shadow(0 0 22px rgba(255,82,82,1))}}

/* SCORBAL: bottom rack action buttons must be solid (non-transparent) */
.rack-actions button.primary{background:linear-gradient(180deg,#ffd24a 0%,#f5a70a 100%)!important;border-color:#e7ab12!important;color:#1a1410!important;text-shadow:0 1px 0 rgba(255,255,255,.25)!important;box-shadow:0 3px 0 var(--accent-edge), inset 0 1px 0 rgba(255,255,255,.5)!important}
.rack-actions button.primary:disabled{background:linear-gradient(180deg,#3a3a52 0%,#2a2a40 100%)!important;border-color:#4a4a6a!important;color:#7a7a92!important;text-shadow:none!important;box-shadow:0 2px 4px rgba(0,0,0,.4)!important}

/* SCORBAL: Top-right header controls — larger room code + larger gear */

/* v8: compact, single-line top game header */
.hdr-round-top{color:var(--text);font-size:10px;font-weight:800;letter-spacing:.10em;white-space:nowrap}
.hdr-actions .hdr-btn{font-size:14px!important;padding:6px 8px!important;min-height:34px!important;line-height:1!important;white-space:nowrap!important}
.hdr-actions .gear-btn{font-size:18px!important;min-width:34px!important;padding:5px 8px!important}
.hdr-code-chip{font-family:var(--fcode);font-size:15px;font-weight:900;color:#1a1410;background:linear-gradient(180deg,#fcd34d 0%,#f59e0b 100%);border:2px solid #fbbf24;border-radius:8px;padding:6px 8px;letter-spacing:.10em;cursor:pointer;flex-shrink:0;line-height:1;min-height:34px;display:flex;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4);white-space:nowrap}
.hdr-btn{padding:8px 12px!important;font-size:14px!important;min-height:38px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important}
.hdr-btn.gear-btn{font-size:24px!important;padding:4px 12px!important;min-width:42px!important;min-height:38px!important;line-height:1!important}

/* SCORBAL: score popup — dark, subtle, "+N pts" wording (positioned above the played word) */

/* SCORBAL: View Globe review board — Replay removed; only close button */

/* SCORBAL: game over actions in a single horizontal row */
.gameover-actions button.primary{font-size:14px}
@media (max-width:360px){.gameover-actions button{font-size:13px;padding:10px 4px}}.gameover-scroll .final-standings{gap:6px}.gameover-scroll .final-card{background:rgba(255,255,255,.04);padding:8px 10px;border-radius:14px}.gameover-scroll .fc-name{font-size:15px}.gameover-scroll .fc-score{font-size:20px;color:#f2cb73}



/* v11: score chip must be readable but quiet, transparent, and outside the word profile */
.def-example{margin-top:5px;font-size:13px;line-height:1.3;color:#d7ddea;opacity:.88;font-style:italic}


/* Scorbal 31.0: compact four-character room code entry and matching Join button width */
.sc-round.tbc{font-size:13px!important;letter-spacing:.04em!important;color:var(--text-3)!important}
.score-chip.turn .sc-round.tbc,.score-chip.done .sc-round.tbc{color:#111!important}


/* Scorbal 33.0: score chip holds for 3 seconds after the committed move, then fades */


/* Scorbal 36.0: compact score overlay title/subtitle and embedded game-score bars */


/* 41.0 header/timer and turn-score refinement */


/* 42.0 cinematic skip reliability */
.cinematic-skip{
  position:fixed;
  bottom:calc(env(safe-area-inset-bottom) + 16px);
  right:calc(env(safe-area-inset-right) + 16px);
  z-index:2147483647;
  padding:9px 14px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  background:rgba(15,15,26,.56);
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;cursor:pointer;
  font-family:var(--fu);
  letter-spacing:.04em;
  pointer-events:auto;
  display:block;
  opacity:.82;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.cinematic-skip:active{background:rgba(255,255,255,.18);opacity:1;transform:scale(.98)}


/* 43.0 turn strip, header, starter pointer and score popup refinements */
.hdr-actions{display:flex;gap:6px;align-items:center;flex:0 1 auto;min-width:0;margin-left:auto;justify-content:flex-end;overflow:hidden;justify-self:end;white-space:nowrap}
.turn-arrow{font-size:26px!important;line-height:1!important;font-weight:1000!important;color:#fbbf24!important;text-shadow:0 1px 0 rgba(0,0,0,.85),0 0 12px rgba(251,191,36,.45)!important;margin:0 1px!important;transform:scaleX(1.28)!important}
.score-chip.turn .sc-name,.score-chip.turn .sc-round{color:#fff!important}
.sc-round.live-total{font-size:20px!important;color:inherit!important}
.starter-pointer-text{background:rgba(251,191,36,.55);color:rgba(0,0,0,.82);box-shadow:0 2px 9px rgba(0,0,0,.24);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.starter-pointer-arrow{border-top-color:rgba(251,191,36,.55)}
.timer-seconds-input:disabled{opacity:.45}



/* 44.0 enhancement set: opaque chips, stronger arrows, document zoom containment, review board ranking cycle */
.score-chip .sc-name,.score-chip .sc-round{color:#f7f7f7!important}
.score-chip.muted-next .sc-name,.score-chip.muted-next .sc-round{color:#d7dbe4!important}


.turn-arrow{position:relative!important;width:34px!important;min-width:34px!important;height:18px!important;margin:0 1px!important;font-size:0!important;line-height:0!important;transform:none!important;color:transparent!important;text-shadow:none!important;align-self:center!important;flex:0 0 34px!important}
.turn-arrow::before{content:"";position:absolute;left:1px;right:9px;top:50%;height:6px;transform:translateY(-50%);background:#fbbf24;border-radius:999px;box-shadow:0 0 12px rgba(251,191,36,.45)}
.turn-arrow::after{content:"";position:absolute;right:1px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:13px solid #fbbf24;filter:drop-shadow(0 0 6px rgba(251,191,36,.45))}
.turn-banner.yours,.turn-banner.theirs{background:#050508;color:#fff;border:2px solid #fbbf24}


.starter-pointer-text{background:#f2c94c;color:#14100a;box-shadow:0 3px 12px rgba(0,0,0,.30);backdrop-filter:none;-webkit-backdrop-filter:none;font-weight:900}
.starter-pointer-arrow{border-top-color:#f2c94c}
body.score-pop-active .score-chip:empty{display:none!important}
.guide-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:740;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#fff;padding:0;margin:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:contain;touch-action:none}
.guide-scroll{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:0;margin:0;background:#000;display:block;width:100vw;max-width:100vw;box-sizing:border-box;align-self:flex-start;touch-action:none;overscroll-behavior:contain;justify-self:center;max-height:100vh;min-height:0;transform-origin:top center;position:relative;height:100vh}
.guide-content{display:block;transform-origin:0 0;will-change:transform;background:#000;margin:0;padding:0}
.guide-content img{display:block;width:100vw;max-width:none;height:auto;margin:0;padding:0;user-select:none;-webkit-user-drag:none;touch-action:none}
.review-rank-strip::-webkit-scrollbar{display:none}.review-rank-chip .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.review-board-clean .board-wrap.globe-mode .globe-stage{height:100%!important}


/* 45.0 scoring/turn-flash refinements */


.game-score-table-with-bars .game-score-row{
  display:block!important;
  padding:10px 8px 11px!important;
}



/* 47.0 score-pop, flashing chip, lobby sharing, timer-toggle refinements */
.turn-score-slot .scores-strip.in-turn-slot{margin-bottom:-36px!important}
/* v56: smooth chip spotlight pulse - stays white, box-shadow breathes */
.hdr-round-dots{display:flex;gap:1.5px;margin-top:3px;max-width:86px;overflow:hidden}
.lobby-share-section{order:-10;border:0;background:transparent;border-radius:var(--card-radius);padding:0;display:flex;flex-direction:column;gap:5px;box-shadow:none}
.assign-players-label{display:block;margin-top:14px!important;padding-top:10px!important;border-top:1px solid rgba(255,255,255,.10)}
.team-section .team-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px!important}
@media(max-width:360px){.hdr-round{flex-basis:82px;min-width:82px;max-width:82px}.hdr-round-num{font-size:27px}.hdr-round-num small{font-size:20px}}



/* 48.0 held-enhancement final overrides */
html,body,#app{overflow-x:hidden;overscroll-behavior-x:none;touch-action:manipulation;overscroll-behavior:none}
.score-chip .sc-name{font-size:clamp(12px,3.6vw,15px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.turn-arrow.next{font-size:26px!important;font-weight:1000!important;line-height:1!important;color:#fff!important;text-shadow:0 0 2px #000,0 0 8px rgba(251,191,36,.35);transform:scaleX(1.45)!important;min-width:28px!important}
.turn-arrow.next::after{content:"";display:inline-block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid currentColor;margin-left:-4px;vertical-align:middle}
.score-row-main{
  display:flex!important;
  align-items:baseline!important;
  gap:10px!important;
  width:100%!important}
.score-section-subtitle{
  font-family:var(--fu);font-size:14px;
  line-height:1.1;
  font-weight:800;color:var(--text-2);text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 7px;margin-bottom:4px}
.timer-notice-board{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:710;width:min(86vw,440px);padding:18px 16px;border-radius:20px;border:2px solid rgba(251,191,36,.82);background:#10131a;color:#fff;font-family:var(--fd);font-size:clamp(22px,6.5vw,34px);font-weight:900;line-height:1.08;text-align:center;box-shadow:0 22px 72px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.08)}
.scorbal-buttons button{min-height:52px!important;padding:12px 12px;font-size:clamp(16px,4.4vw,19px)!important;font-weight:700;min-width:0;width:100%}
.wordmark{font-family:var(--fd);font-weight:800;font-size:clamp(42px,15vw,68px)!important;letter-spacing:-.03em;line-height:.95;background:linear-gradient(180deg,#fbbf24 0%,#ef4444 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.wordmark-sub{color:var(--text-3);font-size:clamp(15px,4.4vw,19px)!important;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:8px 0 20px}
.review-rank-strip{position:absolute;top:max(8px,env(safe-area-inset-top));left:0;right:0;z-index:36;display:flex;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px 58px 6px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:transparent;pointer-events:auto;padding-bottom:6px} /* 57V28 (Item 110): top + padding-top now set solely by consolidated .v22-medal-strip rule */
.review-rank-chip{flex:0 0 auto;min-width:96px;max-width:154px;border-radius:999px;border:2px solid #555a66;background:#363a43;color:#e6e9ef;padding:7px 10px;font-family:var(--fu);font-weight:900;display:flex;align-items:center;gap:6px;box-shadow:0 4px 16px rgba(0,0,0,.42);user-select:none;touch-action:none;font-size:13px}.review-rank-chip .score{margin-left:4px;font-family:var(--fcode);
  font-size:13px;color:#fff4cf;font-weight:900;
  font-variant-numeric:tabular-nums}.review-rank-chip.active{background:#fff;color:#050508;border-color:#fff;box-shadow:0 0 22px rgba(255,255,255,.40)}.review-rank-chip.active .score{color:#050508}
.hdr-round-num{font-family:var(--fd);font-weight:800;font-size:clamp(20px,5.8vw,28px);color:#fff;line-height:.95;letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:baseline;gap:4px;overflow:visible}.hdr-round-num small{font-size:.72em;color:#e9eaf2;font-weight:700;white-space:nowrap;letter-spacing:0}


/* 48.0 final fit refinements */
.hdr-round{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1;flex:0 0 98px;min-width:98px;max-width:98px;overflow:visible;justify-self:start;white-space:nowrap}



/* 49.0 final handoff refinements: desktop gate, install dismissal, join row, score labels, chips/arrows */
.desktop-landing{position:fixed;inset:0;z-index:760;background:radial-gradient(circle at 50% 20%,rgba(65,80,120,.28),#05070d 60%,#000);color:#fff;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;text-align:center}
.desktop-card{width:min(520px,94vw);background:rgba(11,15,25,.94);border:1px solid rgba(255,255,255,.18);border-radius:26px;padding:28px 24px;box-shadow:0 28px 80px rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;gap:14px}
.desktop-title{font-family:var(--fd);font-size:clamp(30px,5vw,48px);font-weight:900;line-height:.96;letter-spacing:-.04em}
.desktop-copy{font-size:18px;line-height:1.35;color:#d8dce8;max-width:440px}.desktop-url{font-family:var(--fcode);font-size:18px;font-weight:900;color:#fbbf24;letter-spacing:.04em}
.desktop-qr{width:190px;height:190px;border-radius:16px;background:#fff;padding:8px;box-shadow:0 10px 36px rgba(0,0,0,.4)}.desktop-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;margin-top:2px}.desktop-actions button{min-width:170px}

.turn-arrow.next,.turn-arrow{position:relative!important;width:34px!important;min-width:34px!important;height:20px!important;font-size:0!important;line-height:0!important;color:transparent!important;text-shadow:none!important;transform:none!important;flex:0 0 34px!important;margin:0 1px!important}.turn-arrow.next::before,.turn-arrow::before{content:""!important;position:absolute!important;left:1px!important;right:9px!important;top:50%!important;height:7px!important;transform:translateY(-50%)!important;background:#050508!important;border-radius:999px!important;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 9px rgba(251,191,36,.36)!important}.turn-arrow.next::after,.turn-arrow::after{content:""!important;position:absolute!important;right:1px!important;top:50%!important;transform:translateY(-50%)!important;width:0!important;height:0!important;border-top:10px solid transparent!important;border-bottom:10px solid transparent!important;border-left:14px solid #050508!important;filter:drop-shadow(0 0 1px rgba(255,255,255,.8)) drop-shadow(0 0 6px rgba(251,191,36,.35))!important;margin-left:0!important;vertical-align:baseline!important}.score-row-bar-fill{
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(251,191,36,.48),rgba(255,236,170,.92))!important;min-width:4px;position:relative;z-index:1}.score-gap-segment{position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:22px}



/* 50.0 next enhancement package: install UX, home hero reliability, turn/chip stability, timer/menu/share polish */
.install-landing{position:fixed;inset:0;z-index:730;background:#000;color:#fff;display:block;flex-direction:column;overflow:hidden}
.install-landing .install-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#000;height:100dvh;padding:0}
.install-landing img{display:block;width:100%;height:auto;margin:0 auto;max-width:720px}
.install-close{position:fixed;right:calc(env(safe-area-inset-right,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 12px);z-index:780;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;background:rgba(0,0,0,.78);border:2px solid rgba(255,255,255,.46);color:#fff;font-size:30px;font-weight:900;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.scorbal-actions{flex:0 0 auto;background:#0a0a14;padding:10px 12px calc(64px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box;padding-top:10px!important;padding-bottom:calc(62px + env(safe-area-inset-bottom))!important}
@media (max-height:720px){.scorbal-hero{min-height:clamp(220px,44dvh,520px)!important}.scorbal-actions{gap:7px!important}.scorbal-buttons button{min-height:42px!important;padding-top:8px!important;padding-bottom:8px!important}}
/* Prevent the chip strip from re-running a fade animation on every render; reveal is handled by turn timing instead. *//* v56: halved gap from top band */
/* v56: smooth spotlight pulse - element stays visible, never blinks off */

/* Keep the opening instruction clear of the top chip strip. */
.starter-pointer{z-index:18}
.starter-pointer-text{font-size:clamp(13px,3.7vw,15px);max-width:min(86vw,340px);text-align:center;line-height:1.08}
/* Score overlay should fit small phones and scroll if the game has many players. */
.score-overlay-current .score-section-title{margin-top:3px!important;font-size:clamp(20px,5.7vw,25px)!important;
  line-height:1!important;
  margin-bottom:1px!important;
  white-space:nowrap!important}
.score-overlay-current .score-section-subtitle{font-size:13px;margin-bottom:2px}
.score-overlay-current .score-table{margin-bottom:6px!important;padding:6px!important;border-radius:14px!important}
.game-score-table-with-bars .score-row{display:block!important;font-size:16px!important;padding:8px 8px!important}
.game-score-table-with-bars .score-name{font-size:16px!important;font-weight:900!important}.game-score-table-with-bars .score-value{font-size:clamp(20px,5.8vw,23px)!important}
.score-row-bar-track{
  width:100%!important;height:12px!important;
  border-radius:999px!important;background:rgba(255,255,255,.10)!important;overflow:hidden!important;margin-top:5px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;position:relative}.score-gap-label{position:static!important;right:auto!important;top:auto!important;transform:none!important;font-family:var(--fcode)!important;font-size:clamp(12px,3.2vw,16px)!important;font-weight:500!important;color:rgba(210,214,222,.82)!important;background:transparent!important;padding:0 3px!important;border-radius:0!important;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.55)!important;white-space:nowrap!important}
/* Host menu typography and sharing controls */
.host-menu-panel{gap:10px;padding:15px}
.host-sharing-section{border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:9px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;gap:8px;width:100%}.host-share-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-bottom:2px}.host-share-split button{min-width:0;min-height:58px!important;border-radius:16px!important;font-weight:900!important;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.host-share-split .host-qr-btn{background:#fff!important;color:#111!important;border-color:#fff!important;overflow:hidden!important;padding:0!important}.host-share-split .host-qr-btn img{width:100%!important;height:100%!important;border-radius:12px!important;object-fit:contain!important;flex-shrink:0;display:block!important}.host-share-split .host-qr-btn span{display:none!important}
.host-share-split .host-code-btn,.host-menu-code{font-size:clamp(28px,9vw,42px)!important;letter-spacing:.12em!important;font-weight:950!important;line-height:1!important}
.setting-row .label,.host-menu-panel .label{font-size:16px!important;font-weight:900!important}
/* Timer row: compact seconds field, proper slider-style on/off control, no cramped wide input. */
.timer-toggle{position:relative!important;min-width:104px!important;height:38px!important;border-radius:999px!important;padding:0 14px 0 42px!important;text-align:right!important;background:#2f333d!important;border:1px solid rgba(255,255,255,.22)!important;color:#d9dde7!important;font-weight:900!important;line-height:36px!important;width:104px!important;font-size:15px!important}.timer-toggle::before{content:"";position:absolute;left:4px!important;top:3px!important;width:30px!important;height:30px!important;border-radius:50%;background:#cfd4de;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .18s ease,background .18s ease}.timer-toggle.on::before{transform:translateX(65px)!important;background:#fbbf24}
@media (max-width:360px){.timer-toggle{min-width:96px!important;width:96px!important}.timer-toggle.on::before{transform:translateX(57px)!important}.host-section-title{font-size:15px}}


/* 51.0 first-turn cinematic fade, stable turn flashing, hero replacement, timer wording, game-over polish */
.wordmark-sub,.scorbal-brand .wordmark-sub{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:calc(100vw - 28px)!important;
  text-align:center!important;
  font-size:clamp(10px,2.8vw,13px)!important;
  line-height:1.15!important;
  letter-spacing:.035em!important;
}
/* Maintain a visible gap under the top black bar while keeping the chips close to it. */

/* Gentle handoff from cinematic/skip: UI fades in instead of popping over the grid. */
.cinematic-just-ended .game-header,
.cinematic-just-ended .turn-score-slot,
.cinematic-just-ended .rack-wrap,
.cinematic-just-ended .review-banner,
.cinematic-just-ended .starter-pointer{
}

.starter-pointer-text{box-shadow:0 8px 24px rgba(0,0,0,.48)}
/* Make human and bot score popups independent of board rerenders. */
/* Timer wording/layout: remove explanatory clutter and keep the seconds input compact. */
.timer-setting-row .label small{display:none!important}
.timer-controls{display:flex!important;gap:9px!important;align-items:center!important;justify-content:flex-end!important}
.timer-seconds-input{max-width:78px!important;text-align:center!important}
/* Game-over screen aligned with the Scorbal home visual language. */
.gameover-screen{
  background:
    radial-gradient(circle at 50% 8%,rgba(251,191,36,.20),rgba(251,191,36,0) 22%),
    radial-gradient(circle at 50% 42%,rgba(42,92,160,.20),rgba(42,92,160,0) 38%),
    linear-gradient(180deg,#02040a 0%,#070b14 52%,#03050a 100%);
  color:#fff;
}
.gameover-scroll{
  gap:10px;
  padding:12px 14px 84px;max-width:560px;
  align-self:center;
  width:min(100%,560px);overflow:hidden;
  overflow-y:auto;
}
.gameover-scroll .final-title{
  font-size:clamp(32px,9vw,48px);
  background:linear-gradient(180deg,#ffffff 0%,#f8e5aa 52%,#d5a642 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:2px 0 0;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:0 12px 30px rgba(0,0,0,.65);
}
.gameover-scroll .winner-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  padding:15px 14px;
  border-radius:24px!important;
  backdrop-filter:blur(12px);
  width:100%;
  box-sizing:border-box;
  border:1.5px solid rgba(251,191,36,.74)!important;
  box-shadow:0 18px 58px rgba(0,0,0,.56),inset 0 0 0 1px rgba(255,255,255,.08)!important;
}
.gameover-scroll .winner-label{font-size:13px;letter-spacing:.18em;margin-bottom:2px;color:#f8e7b8}
.gameover-scroll .winner-crown{font-size:24px;margin-bottom:0;margin:0}
.gameover-scroll .winner-name{font-size:clamp(24px,7vw,34px);margin-bottom:4px;text-shadow:none;line-height:1.02;margin:2px 0}
.gameover-scroll .winner-score{font-size:clamp(38px,12vw,56px);color:#fff;line-height:.95}
.gameover-scroll .winner-points{font-size:10px;letter-spacing:.22em;color:#c9d2e1}
.gameover-scroll .final-standings{display:flex;flex-direction:column;gap:7px;width:100%}
.gameover-scroll .final-card{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-left:4px solid rgba(251,191,36,.62)!important;
  border-radius:18px!important;
  padding:10px 12px!important;
  box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
}
.gameover-scroll .final-card.winner{background:rgba(251,191,36,.12)!important;border-color:rgba(251,191,36,.72)!important}
.gameover-scroll .fc-name{font-size:clamp(16px,4.5vw,20px)!important;font-weight:900!important;line-height:1.05!important}
.gameover-scroll .fc-score{font-size:clamp(22px,6vw,30px);font-family:var(--fcode);color:#ffe2a2;font-weight:950}
.gameover-actions{display:flex;flex-direction:row;flex-wrap:nowrap;
  gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));justify-content:center;align-items:stretch;
  background:linear-gradient(180deg,rgba(2,4,10,0),rgba(2,4,10,.92) 22%,#02040a 100%);
  position:fixed;left:0;right:0;bottom:0;z-index:84;
}
.gameover-actions button{flex:1 1 0;min-width:0;padding:11px 6px;font-size:clamp(13px,3.6vw,15px)!important;font-weight:900!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;min-height:44px!important;border-radius:14px!important}
@media (max-height:720px){.scorbal-hero{min-height:clamp(300px,58dvh,640px)!important}.gameover-scroll{gap:7px}.gameover-scroll .winner-panel{padding:12px}.gameover-scroll .final-card{padding:8px 10px!important}}


/* 52.0: restore home layout, stable turn timing, bot-delay, chip spacing, game-over readability */
.scorbal-hero{
  position:relative!important;
  flex:1 1 auto!important;
  min-height:clamp(250px,50dvh,620px)!important;
  background-color:#070912!important;
}
.scorbal-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,20,0) 50%,rgba(10,10,20,.55) 70%,rgba(10,10,20,.94) 92%,#0a0a14 100%);pointer-events:none;z-index:1!important;display:block!important}
@media (max-height:720px){.scorbal-hero{min-height:clamp(220px,44dvh,520px)!important}}

:root{--scorbal-chip-gap:5px;--scorbal-turn-top:53px;}
.turn-arrow.next{margin-left:0!important;margin-right:0!important}

.host-share-split .host-code-btn{font-family:var(--fcode)!important;letter-spacing:.12em;background:#f2c94c!important;color:#111!important;border-color:#f2c94c!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:8px 10px!important}
.host-code-btn .code-btn-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1;width:100%}
.host-code-btn .code-btn-label{font-family:var(--ft)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;opacity:.72!important}
.host-code-btn .code-btn-value{font-family:var(--fcode)!important;font-size:clamp(24px,8vw,38px)!important;font-weight:950!important;letter-spacing:.12em!important;line-height:1!important}
.gameover-scroll .winner-margin{font-size:clamp(13px,4vw,18px);padding:7px 10px;background:rgba(251,191,36,.10);color:#f7e6b3;border-radius:14px;border:1px solid rgba(251,191,36,.22);display:none}
.gameover-scroll .final-standings{align-items:stretch;width:100%}
.gameover-scroll .final-card{
  width:100%!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:86px minmax(0,1fr) minmax(64px,max-content)!important;
  align-items:center!important;
  gap:10px!important;
}
.gameover-scroll .fc-info{min-width:0!important;overflow:hidden!important}
.gameover-scroll .fc-name{font-size:clamp(17px,4.8vw,21px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.gameover-scroll .fc-score{justify-self:end;text-align:right;min-width:64px;font-variant-numeric:tabular-nums}

/* 53.0 room/lobby safeguards and late-join host approval */
.late-join-approval{position:fixed;inset:0;z-index:980;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.58);backdrop-filter:blur(4px)}
.late-join-card{width:min(430px,calc(100vw - 32px));border:2px solid rgba(251,191,36,.78);border-radius:24px;background:linear-gradient(180deg,#101827,#070b12);box-shadow:0 18px 60px rgba(0,0,0,.62),0 0 34px rgba(251,191,36,.22);padding:20px 18px;text-align:center}
.late-join-title{font-family:var(--fd);font-size:clamp(26px,8vw,38px);font-weight:950;letter-spacing:.02em;color:#ffe2a2;margin-bottom:8px}
.late-join-name{font-size:clamp(22px,7vw,34px);font-weight:950;color:#fff;margin:8px 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.late-join-sub{font-size:clamp(15px,4vw,18px);color:#cbd5e1;margin-bottom:16px}
.late-join-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.late-join-actions button{min-height:48px;border-radius:16px;font-size:clamp(15px,4.2vw,18px);font-weight:950}

/* 53.0 turn phase: hide play controls during the notice, then fade them in softly */
/* v56: rack-wrap removed from turn-notice-active hide; rack stays visible during YOUR TURN */



/* 53.0 readable home tagline floor */
.scorbal-buttons button,.scorbal-actions button{font-size:clamp(15px,4.2vw,18px)!important}

/* 55.0 hard mobile fit for the SCORBAL home wordmark. Earlier generic
   .wordmark rules used larger !important font sizes and could clip the L. */
.scorbal-brand{position:absolute;
  left:0!important;
  right:0!important;bottom:14px!important;text-align:center;z-index:2!important;
  padding:0 12px!important;
  max-width:100vw!important;
  box-sizing:border-box!important;pointer-events:none;display:block!important;
  width:100%!important;
  overflow:visible!important;
}
.scorbal-brand .wordmark{font-family:var(--fd);font-weight:800;
  font-size:clamp(30px,9.2vw,46px)!important;
  letter-spacing:-.07em!important;
  line-height:.96!important;background:linear-gradient(180deg,#ffffff 0%,#fbbf24 55%,#ef4444 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:0 4px 24px rgba(0,0,0,.55);
  margin:0 auto!important;
  max-width:calc(100vw - 24px)!important;
  overflow:visible!important;
  white-space:nowrap!important;
  display:block!important;
  width:100%!important;
  text-align:center!important;
  text-overflow:clip!important;
  box-sizing:border-box!important;
  transform:none!important;
  padding:0!important;
}
.scorbal-brand .wordmark-sub{color:#e9eaf2;font-family:var(--fu);
  font-size:clamp(14px,4.1vw,18px)!important;font-weight:600;letter-spacing:.035em!important;
  margin:5px auto 0!important;text-shadow:0 2px 12px rgba(0,0,0,.85);text-transform:none;
  max-width:calc(100vw - 28px)!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
  display:block!important;margin-left:auto!important;margin-right:auto!important;
  line-height:1.16!important;
  width:100%!important;
  text-align:center!important;
}
@media (max-width:390px){
  .scorbal-brand .wordmark{font-size:clamp(29px,8.9vw,39px)!important;letter-spacing:-.08em!important;}
  .scorbal-brand .wordmark-sub{font-size:clamp(13px,3.9vw,16px)!important;}
}
@media (max-width:340px){
  .scorbal-brand .wordmark{font-size:clamp(27px,8.5vw,34px)!important;letter-spacing:-.085em!important;}
}






.qr-js{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:0;padding:14px;min-height:0;color:#111;font-family:var(--fu);font-size:14px;text-align:center;box-sizing:border-box;overflow:visible}
.qr-img.qr-js{width:min(300px,calc(100vw - 96px));height:min(300px,calc(100vw - 96px));max-width:100%;flex:0 0 auto}
.qr-js canvas,.qr-js img,.qr-js table{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;display:block!important;margin:0 auto!important;border:0!important;box-sizing:border-box!important}
.qr-js table{border-collapse:collapse;border-spacing:0;table-layout:fixed;background:#fff}
.qr-js table tbody{display:table-row-group}
.qr-js table tr{display:table-row}
.qr-js table td{padding:0;margin:0;border:0;line-height:0;font-size:0}
.qr-fallback{padding:14px!important;color:#111!important}

/* ===== SCORBAL v57 SCORE POPUP POSITIONING — single owner ===== */
.word-score-pop{position:absolute;left:64%;top:40%;transform:translate(-50%,-50%) scale(.96);z-index:920;background:rgba(94,99,112,.70);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:13px;padding:7px 12px;font-family:var(--fd);font-weight:900;font-size:clamp(18px,5vw,24px);box-shadow:0 8px 24px rgba(0,0,0,.38);
  pointer-events:none;animation:none;white-space:nowrap;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:none;transition:opacity .55s ease,transform .55s ease;
  opacity:0;letter-spacing:.01em;min-width:0;
  min-height:34px;
  text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.word-score-pop.score-pop-visible{opacity:.92;transform:translate(-50%,-50%) scale(1)}
.word-score-pop.score-pop-fading{opacity:0;transform:translate(-50%,calc(-50% - 18px)) scale(.96);transition:opacity .65s ease, transform .65s ease}

/* ===== SCORBAL v57 OPENING CINEMATIC / HUD FADE SYSTEM — single owner ===== */
.cinematic-active .game-header,
.cinematic-active .scores-strip,
.cinematic-active .turn-banner,
.cinematic-active .turn-score-slot,
.cinematic-active .rack-wrap,
.cinematic-active .review-banner,
.cinematic-active .skip-banner,
.cinematic-active .starter-pointer{
  opacity:0!important;
  pointer-events:none!important;
}
.cinematic-active .board-wrap{background:#000!important}
.cinematic-just-ended .game-header,
.cinematic-just-ended .turn-score-slot,
.cinematic-just-ended .scores-strip,
.cinematic-just-ended .turn-banner,
.cinematic-just-ended .rack-wrap,
.cinematic-just-ended .review-banner,
.cinematic-just-ended .skip-banner,
.cinematic-just-ended .starter-pointer,
.turn-notice-ended .rack-wrap{
  animation:scorbalHudFadeIn57 1.8s ease both!important;
}
@keyframes scorbalHudFadeIn57{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== SCORBAL v57 TURN / PULSE VISUAL SYSTEM — single owner ===== */
.turn-score-slot .turn-banner,.turn-score-slot .scores-strip,.turn-score-slot .score-chip{pointer-events:auto!important}
.turn-banner .tb-turn{font-size:clamp(17px,5.2vw,24px);line-height:1;font-weight:900;color:inherit;text-shadow:none}
@keyframes turnBannerPulse{
  0%{opacity:0;transform:translateY(-4px) scale(.98);box-shadow:0 4px 12px rgba(0,0,0,.35)}
  10%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 18px rgba(251,191,36,.35),0 6px 18px rgba(0,0,0,.42)}
  24%,52%,80%{opacity:1;transform:translateY(0) scale(1.012);box-shadow:0 0 28px rgba(251,191,36,.62),0 0 10px rgba(255,255,255,.22) inset}
  38%,66%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 14px rgba(251,191,36,.32),0 6px 18px rgba(0,0,0,.42)}
  88%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-5px) scale(.985);box-shadow:0 4px 12px rgba(0,0,0,.30)}
}
/* FIX-57: scrolls sideways when the chips overflow; the first/last-child auto margins centre them when they fit (justify-content:center pushed overflow off both edges, where it could not be scrolled to). */
.scores-strip.in-turn-slot{width:auto!important;margin:0 auto!important;padding:4px 6px!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;max-width:calc(100vw - 18px)!important;background:transparent!important;gap:5px!important;margin-top:0!important;padding-top:0!important;animation:none!important;opacity:1!important;transform:none!important}
.score-chip .sc-name,.score-chip .sc-round,.score-chip .sc-score-stack{color:inherit!important}
.score-chip.muted-next{opacity:1!important;background:#3a3d46!important;border-color:#5a5f6b!important;box-shadow:0 2px 8px rgba(0,0,0,.28)!important;color:#d7dbe4!important;filter:none!important}
.score-chip.turn{background:#fff!important;color:#050508!important;transform:none!important;box-shadow:0 0 20px rgba(255,255,255,.36),0 4px 12px rgba(0,0,0,.40)!important;border-color:#fff!important}
@keyframes chipGlowPulse{
  0%,100%{box-shadow:0 0 14px rgba(255,255,255,.30),0 4px 12px rgba(0,0,0,.40);transform:scale(1)}
  50%{box-shadow:0 0 26px rgba(255,255,255,.62),0 0 16px rgba(251,191,36,.38),0 4px 12px rgba(0,0,0,.40);transform:scale(1.018)}
}

/* ===== SCORBAL v57 FINAL TARGETED OVERRIDES ===== */
/* Tile warm-yellow hold highlight */
.tile.player-highlight{background:#fbbf24;color:#1a1410;box-shadow:0 0 20px 8px rgba(251,191,36,.72);z-index:12}
/* host-timer-line reuse for Extend Game */
/* Rack stays visible during turn notice */
.turn-notice-active .rack-wrap{opacity:1;pointer-events:auto}
/* timer-toggle On state */
.timer-toggle.on{border-color:var(--accent)!important;color:#050508!important;padding-left:14px!important;padding-right:42px!important;text-align:left!important;background:var(--accent)!important}

/* ===== SCORBAL v57.1 requested refinements ===== */
:root{--scorbal-turn-top:56px!important;}
@keyframes turnBannerBreathingPulse{
  0%{opacity:0;transform:translateY(-4px) scale(.985);box-shadow:0 4px 12px rgba(0,0,0,.30)}
  8%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 16px rgba(251,191,36,.38),0 6px 18px rgba(0,0,0,.42)}
  24%,48%,72%{opacity:1;transform:translateY(0) scale(1.025);box-shadow:0 0 34px rgba(251,191,36,.78),0 0 18px rgba(255,255,255,.22) inset,0 6px 18px rgba(0,0,0,.42)}
  36%,60%,84%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 14px rgba(251,191,36,.34),0 6px 18px rgba(0,0,0,.42)}
  100%{opacity:0;transform:translateY(-4px) scale(.985);box-shadow:0 4px 12px rgba(0,0,0,.30)}
}
@keyframes chipSpotlightPulse{
  0%,100%{box-shadow:0 0 16px rgba(255,255,255,.38),0 4px 12px rgba(0,0,0,.40);transform:scale(1)}
  50%{box-shadow:0 0 34px rgba(251,191,36,.66),0 0 20px rgba(255,255,255,.70),0 4px 12px rgba(0,0,0,.40);transform:scale(1.02)}
}
.score-chip.clock-expired{opacity:.62!important;filter:grayscale(.45)!important;}
.timer-controls input[disabled]{opacity:.48!important;}
/* ===== END SCORBAL v57.1 requested refinements ===== */

/* ===== END v57 targeted overrides ===== */

/* ===== SCORBAL 57V6 FINAL OVERRIDES ===== */
.score-overlay-current .score-row-main{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important;width:100%!important;}
.score-overlay-current .game-score-row.has-clock .score-row-main{grid-template-columns:52px minmax(0,1fr) auto!important;}
.score-clock{font-family:var(--fcode);font-variant-numeric:tabular-nums;font-size:clamp(14px,4vw,18px);font-weight:800;color:#fbbf24;text-align:left;white-space:nowrap;}
.score-clock.clock-out{color:rgba(210,214,222,.72);text-decoration:line-through;}
.hdr-timer.player-clock-on{font-size:clamp(16px,4.7vw,24px);letter-spacing:.02em;white-space:nowrap;}
.score-chip.turn.active-pulse{
  filter:none;background:#fff!important;color:#050508!important;border-color:#fff!important;animation:chipSpotlightPulse57V6 1.5s ease-in-out infinite!important;will-change:box-shadow,transform!important;}
.score-chip.turn.active-pulse .sc-name,.score-chip.turn.active-pulse .sc-round,.score-chip.turn.active-pulse .sc-score-stack{color:#050508!important;}
@keyframes chipSpotlightPulse57V6{0%,100%{box-shadow:0 0 14px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.40);transform:scale(1)}50%{box-shadow:0 0 36px rgba(251,191,36,.78),0 0 22px rgba(255,255,255,.72),0 4px 12px rgba(0,0,0,.40);transform:scale(1.025)}}
.turn-banner.flash-5{animation:turnBannerPulse57V6 var(--turn-banner-duration,5s) ease-in-out forwards;will-change:opacity,transform,box-shadow;}
@keyframes turnBannerPulse57V6{0%{opacity:0;transform:translateY(-4px) scale(.985);box-shadow:0 4px 12px rgba(0,0,0,.30)}8%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 16px rgba(251,191,36,.38),0 6px 18px rgba(0,0,0,.42)}24%,48%,72%{opacity:1;transform:translateY(0) scale(1.025);box-shadow:0 0 34px rgba(251,191,36,.78),0 0 18px rgba(255,255,255,.22) inset,0 6px 18px rgba(0,0,0,.42)}36%,60%,84%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 14px rgba(251,191,36,.34),0 6px 18px rgba(0,0,0,.42)}100%{opacity:0;transform:translateY(-4px) scale(.985);box-shadow:0 4px 12px rgba(0,0,0,.30)}}
.timer-controls input,.timer-seconds-input,.rounds-input,.setting-row input[type=number]{text-align:center!important;}
.timer-controls input:not(:disabled){border-color:rgba(251,191,36,.82)!important;box-shadow:0 0 0 1px rgba(251,191,36,.18),0 0 12px rgba(251,191,36,.12)!important;}
.timer-controls input:disabled{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.13)!important;color:rgba(255,255,255,.40)!important;box-shadow:none!important;}
/* ===== END SCORBAL 57V6 FINAL OVERRIDES ===== */



/* ===== SCORBAL 57V7 OVERRIDES ===== */
.game-header .hdr-round{grid-column:1;justify-self:start;min-width:92px;}
.game-header .hdr-actions{grid-column:3;justify-self:end;}
.rack{display:flex;gap:6px;justify-content:center;min-height:55px;}
.rack-actions:has(.player-clock-pill){grid-template-columns:.78fr repeat(5,minmax(0,1fr));}
.rack-actions button{flex:1;padding:10px 8px;font-size:14px;font-weight:800!important;background:linear-gradient(180deg,#2d2f4c 0%,#20223a 100%)!important;border:2px solid #3f4260!important;color:#fff!important;box-shadow:0 3px 0 #0b0c18, inset 0 1px 0 rgba(255,255,255,.08)!important;min-width:0!important;white-space:nowrap!important;padding-left:6px!important;padding-right:6px!important;border-radius:12px;}
.player-clock-pill{
  background:#f5c84b;
  color:#15110a;
  border:2px solid rgba(255,255,255,.28);
  border-radius:12px;
  font-weight:900;
  font-size:13px;
  opacity:1;
  filter:none;
  pointer-events:none;
}
.timer-seconds-input,.rounds-input,.setting-row input[type="number"]{text-align:center!important;}
.timer-seconds-input:disabled,.rounds-input:disabled,.setting-row input:disabled{
  color:#b8bcc8!important;
  -webkit-text-fill-color:#b8bcc8!important;
  opacity:1!important;
  background:#171a22!important;
  border-color:#4b5160!important;
}
.timer-toggle:not(.on){background:#1a1d27!important;color:#d1d5db!important;border-color:#555c69!important;opacity:1!important;}
.home-fixed-footer{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px max(12px,calc((100vw - 640px)/2 + 12px)) calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(7,10,18,0),rgba(7,10,18,.92) 24%,rgba(7,10,18,.98));backdrop-filter:blur(8px);}
.home-fixed-footer button{font-size:clamp(12px,3.45vw,15px);padding:10px 6px;min-width:0!important;width:100%!important;white-space:nowrap;overflow:hidden;text-align:center;line-height:1.1;letter-spacing:-.01em;}
.host-menu-scroll{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden;}
.host-menu-doc-tiles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;width:100%;}
.host-menu-doc-tiles button{min-width:0!important;padding:10px 8px!important;font-size:clamp(13px,3.6vw,15px)!important;line-height:1.1!important;border-radius:13px!important;white-space:normal!important;min-height:42px!important;width:100%!important;}
.live-qr-btn{aspect-ratio:1/1!important;width:96px!important;min-width:96px!important;border-radius:10px!important;overflow:hidden!important;padding:4px!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.qr-thumb-live{width:86px!important;height:86px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;color:#111!important;font-size:9px!important;text-align:center!important;overflow:hidden!important;}
.qr-thumb-live img,.qr-thumb-live canvas{width:86px!important;height:86px!important;display:block!important;}
@keyframes scorbalSpotlightPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,200,75,.2),0 0 0 rgba(245,200,75,0);filter:none;transform:translateZ(0) scale(1);}50%{box-shadow:0 0 0 4px rgba(245,200,75,.26),0 0 22px rgba(245,200,75,.9);filter:brightness(1.25);transform:translateZ(0) scale(1.035);}}
.score-chip.turn.active-pulse,.score-chip.active-pulse{animation:scorbalSpotlightPulse 1.5s ease-in-out infinite!important;}
.challenge-result-overlay{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:3000;width:min(360px,88vw);background:rgba(15,23,42,.96);border:2px solid rgba(245,200,75,.85);border-radius:20px;box-shadow:0 18px 54px rgba(0,0,0,.55);padding:20px 18px;text-align:center;color:#fff;}
.challenge-result-title{font-size:24px;font-weight:900;margin-bottom:8px;color:#f5c84b;}
.challenge-result-text{font-size:16px;line-height:1.35;font-weight:700;}
.score-clock:empty::after{content:'—';opacity:.75;}
.game-score-between{max-width:min(380px,92vw);}


/* 57V10 refinements */
.home-rejoin-notice{margin:8px auto 10px auto;max-width:min(320px,86vw);background:rgba(15,23,42,.92);border:2px solid rgba(245,200,75,.75);border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.35);color:#fff;font-size:24px;font-weight:900;line-height:1.05;text-align:center;padding:16px 18px;position:relative;}
.home-notice-close{position:absolute;right:8px;top:6px;border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;width:28px;height:28px;font-size:20px;font-weight:900;line-height:24px;cursor:pointer;}
.rack.rack-timeout{min-height:54px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(245,200,75,.38);border-radius:14px;background:rgba(20,20,20,.72);}
.rack-timeout-msg{font-size:14px;font-weight:900;letter-spacing:.04em;color:#f7d65b;text-transform:uppercase;}
.rack-wrap.clock-locked .word-preview{display:none;}
.rack-actions button:disabled{opacity:.38!important;background:linear-gradient(180deg,#262638 0%,#1a1a2a 100%)!important;border-color:#3a3a52!important;color:#6a6a82!important;text-shadow:none!important;box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)!important;filter:grayscale(.95);}
.player-clock-pill.time-out{background:linear-gradient(180deg,#f7d65b,#d99b13);color:#1a1410;animation:timePulse 1s ease-in-out infinite;}
@keyframes timePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.hdr-timer{font-family:var(--fcode);font-weight:900;font-size:clamp(24px,7.2vw,38px);color:#fff;min-width:5ch;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.01em;flex:0 0 auto;justify-self:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;align-self:center;line-height:1;}

.timer-controls input:disabled,.timer-seconds-input:disabled,.rounds-input:disabled{color:rgba(255,255,255,.70)!important;}
.setting-row .label{margin:0;flex:1;color:rgba(255,255,255,.88)!important;}

/* ===== SCORBAL 57V12 OVERRIDES =====
   Fixes carried forward from the 57V11 -> 57V12 handoff document.
   These rules are appended LAST so they win source-order ties with
   earlier !important declarations that were the root cause of several
   reported visual defects (timer centering, pulse, pill yellow, rack
   button greyscale, clipped selected tile).
*/

/* TIM-01: top-ribbon timer geometrically centred in the ribbon (not in the
   flex-grow middle cell whose width is asymmetric). Larger, tabular,
   readable. The ribbon itself becomes the positioning context, the round
   block and gear cluster stay where they are, and the timer sits at exactly
   50% left of the ribbon. */
/* Keep round and action blocks above the timer for tap targets */
.game-header .hdr-round,.game-header .hdr-actions{position:relative;z-index:3;}

/* CLK-02: the bottom Player Clock pill must stay yellow even though it is
   rendered as a disabled <button> (so it is not tappable). An earlier rule
   forced grayscale + opacity on every disabled rack-actions button, which
   washed the pill out. Restore full saturation and full opacity, but only
   for the pill — other disabled buttons keep their faded look. */
.rack-actions button.player-clock-pill:disabled,
.rack-actions button.player-clock-pill[disabled]{
  filter:none!important;
  opacity:1!important;
  background:#f5c84b!important;
  color:#15110a!important;
  border:2px solid rgba(255,255,255,.28)!important;
  text-shadow:none!important;
  box-shadow:0 2px 8px rgba(0,0,0,.4)!important;
}
.rack-actions button.player-clock-pill.time-out:disabled,
.rack-actions button.player-clock-pill.time-out[disabled]{
  background:linear-gradient(180deg,#f7d65b,#d99b13)!important;
  color:#1a1410!important;
}

/* RACK-02: bottom action buttons must remain solid grey/readable when
   disabled. The previous filter:grayscale + opacity:.38 rule made them look
   transparent. Replace with a clearly-disabled-but-readable dark grey,
   exempting the Player Clock pill above. */
.rack-actions button:disabled:not(.player-clock-pill),
.rack-actions button[disabled]:not(.player-clock-pill){
  filter:none!important;
  opacity:1!important;
  background:linear-gradient(180deg,#2a2c38 0%,#1d1f29 100%)!important;
  border:2px solid #404452!important;
  color:#9aa1ae!important;
  text-shadow:none!important;
  box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.rack-actions button.primary:disabled:not(.player-clock-pill),
.rack-actions button.primary[disabled]:not(.player-clock-pill){
  background:linear-gradient(180deg,#3a3a52 0%,#2a2a40 100%)!important;
  border-color:#4a4a6a!important;
  color:#9aa1ae!important;
}

/* RACK-03: the action row should use more horizontal width than the rack
   palette itself, stay centred under the palette, and never crush Submit.
   Add ~10px on each side beyond the rack's max-width, while keeping a
   sensible cap on tablets. */

/* RACK-04: tapped rack tiles bump up by 8px. The previous "contain: layout
   paint" on .rack-wrap clipped that bump at the top. Drop the paint
   containment, allow overflow visible, and add a little top padding so the
   bumped tile lands inside the rack's visual box. */

/* UI-01: pulse using a ::after glow ring on both the active score chip
   and the YOUR TURN banner. We DO NOT touch background/color/transform on
   the chip itself, so the earlier static !important rules in the cascade
   no longer conflict with the animation. The chip keeps its dark theme
   (not the white reversal), and the glow comes from a pseudo-element. */
.score-chip{background:#3a3d46!important;border:2px solid var(--border);border-radius:20px;padding:6px 10px 6px 8px;display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;white-space:nowrap;flex-shrink:0;cursor:pointer;position:relative;transition:transform .15s,box-shadow .2s;box-shadow:0 2px 8px rgba(0,0,0,.28)!important;min-width:96px!important;justify-content:space-between!important;max-width:124px!important;border-color:#5a5f6b!important;color:#d7dbe4!important;opacity:1!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important;isolation:isolate;}
/* Override the white-reversal rule for the active chip so it stays dark. */
.score-chip.turn.active-pulse,
.score-chip.turn{
  background:#050508!important;
  color:#fff!important;
  border-color:rgba(251,191,36,.95)!important;
  transform:none!important;
  box-shadow:0 0 16px rgba(251,191,36,.35)!important;
}
.score-chip.turn.active-pulse .sc-name,
.score-chip.turn.active-pulse .sc-round,
.score-chip.turn.active-pulse .sc-score-stack,
.score-chip.turn .sc-name,
.score-chip.turn .sc-round,
.score-chip.turn .sc-score-stack{color:#fff!important;}
/* Animated glow ring on the active chip — pseudo-element, no transform/bg conflict. */
.score-chip.turn.active-pulse::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 2px rgba(251,191,36,.95),0 0 22px 4px rgba(251,191,36,.55);
  animation:scorbalActiveChipRing57V12 1.4s ease-in-out infinite;
  z-index:1;
}
@keyframes scorbalActiveChipRing57V12{
  0%,100%{box-shadow:0 0 0 2px rgba(251,191,36,.75),0 0 14px 2px rgba(251,191,36,.35);opacity:.85}
  50%{box-shadow:0 0 0 3px rgba(255,224,140,1),0 0 32px 8px rgba(251,191,36,.85);opacity:1}
}

/* YOUR TURN banner: same approach — keep its inner styles alone, drive
   the pulse via a pseudo-element ring/glow. */
.turn-banner.flash-5::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  pointer-events:none;
  animation:scorbalTurnBannerRing57V12 1.5s ease-in-out infinite;
  z-index:1;
}
@keyframes scorbalTurnBannerRing57V12{
  0%,100%{box-shadow:0 0 0 2px rgba(251,191,36,.55),0 0 18px 4px rgba(251,191,36,.35);opacity:.9}
  50%{box-shadow:0 0 0 3px rgba(255,224,140,1),0 0 40px 10px rgba(251,191,36,.85);opacity:1}
}
/* The pre-existing scorbalPulse keyframe on .turn-notice multiplied
   brightness, which double-flashed with our ring. Suppress it on the
   turn-banner family; the ring is enough. */

/* SIM-03 banner: thin top-of-screen "Round complete" banner during the
   board-review phase. Sits below the top ribbon, leaves the board fully
   visible so yellow words can be held to challenge. */
.sim-review-banner{
  position:fixed;
  left:50%;
  top:calc(env(safe-area-inset-top,0px) + 64px);
  transform:translateX(-50%);
  z-index:120;
  background:rgba(8,10,18,.88);
  border:2px solid rgba(251,191,36,.85);
  border-radius:14px;
  padding:8px 16px;
  box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 18px rgba(251,191,36,.25);
  pointer-events:none;
  text-align:center;
  max-width:min(360px,calc(100vw - 28px));
}
/* End SIM-03 banner */

/* ===== SCORBAL 57V13 OVERRIDES ===== */

/* SIM-03 Phase B (revised): big centred countdown digit on the Game Score
   panel. Board behind is hidden by the opaque overlay background. */
.sim-phase-b{
  position:fixed;
  inset:0;
  background:rgba(8,10,18,.97);
  z-index:700;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  /* 57V15 (Item 17): push the Game Score content well below the top toolbar
     (header height ~60px) plus safe-area inset so the title is never hidden
     behind the gear/round/timer bar. */
  padding:calc(env(safe-area-inset-top,0px) + 76px) 18px calc(env(safe-area-inset-bottom,0px) + 18px);
  overflow-y:auto;
}
.sim-phase-b .score-section-title{font-size:clamp(22px,6vw,28px);}
.sim-phase-b-countdown{
  margin-top:18px;
  text-align:center;
  width:100%;
  pointer-events:none;
}
.sim-phase-b-countdown-label{
  font-family:var(--fu);
  font-weight:900;
  letter-spacing:.14em;
  font-size:13px;
  color:rgba(255,255,255,.65);
  margin-bottom:6px;
}
.sim-phase-b-countdown-num{
  font-family:var(--fd);
  font-weight:900;
  font-size:clamp(96px,28vw,160px);
  line-height:1;
  color:#fbbf24;
  text-shadow:0 0 24px rgba(251,191,36,.5),0 8px 24px rgba(0,0,0,.55);
  animation:simPhaseBNumPulse57V13 1s ease-in-out infinite;
}
@keyframes simPhaseBNumPulse57V13{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.06);filter:brightness(1.18)}
}

/* TIM-01 refinement: keep the timer geometrically centred only WITHIN the
   space remaining between the round block on the left and the action
   cluster on the right. Done by placing the timer in the centre cell of a
   grid whose left/right cells are sized to the actual blocks. The whole
   game-header was already grid-laid; we keep the timer in the middle grid
   column, drop the absolute-positioned approach from 57V12 that overlapped
   the gear at narrow widths. */
.game-header .hdr-timer{
  grid-column:2;
  position:static;
  left:auto;
  top:auto;right:auto;
  transform:none;
  justify-self:center;
  min-width:0;
  text-align:center;
  font-size:clamp(24px,7.6vw,38px);
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  align-self:center;
  font-family:var(--fcode);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  z-index:1;
}
.game-header .hdr-timer.paused,
.game-header .hdr-timer.player-clock-on{
  font-size:clamp(20px,5.8vw,28px);
}

/* CLK-02 (deeper): the previous targeted rule worked on host. To make sure
   it also wins on non-host, lift the specificity even further: a max-
   specificity selector exempting the pill from ALL faded/grey treatments
   from any earlier rule, regardless of source order. The pill is rendered
   as a disabled button so it isn't tappable, but it must always look
   solid yellow. */
.rack-actions button.player-clock-pill,
.rack-actions button.player-clock-pill:disabled,
.rack-actions button.player-clock-pill[disabled],
.rack-actions:has(.player-clock-pill) button.player-clock-pill{
  filter:none!important;
  -webkit-filter:none!important;
  opacity:1!important;
  background:#f5c84b!important;
  background-image:none!important;
  color:#15110a!important;
  border:2px solid rgba(255,255,255,.32)!important;
  text-shadow:none!important;
  box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.45)!important;
  -webkit-text-fill-color:#15110a!important;
}
.rack-actions button.player-clock-pill.time-out,
.rack-actions button.player-clock-pill.time-out:disabled{
  background:linear-gradient(180deg,#f7d65b,#d99b13)!important;
  color:#1a1410!important;
  -webkit-text-fill-color:#1a1410!important;
}

/* Duplicate-submit centre notice (sim mode): styled like the existing
   "wait for your turn" notice but explicit about already-submitted. */
.submit-wait-notice{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:760;width:min(86vw,430px);
  padding:18px 22px;
  border-radius:16px;
  border:2px solid rgba(251,191,36,.85);
  background:rgba(8,10,18,.96);
  color:#fff;
  font-family:var(--fu);
  font-size:16px;
  font-weight:800;
  line-height:1.35;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 22px rgba(251,191,36,.28);
  pointer-events:none;
  max-width:min(360px,calc(100vw - 32px));
}

/* Globe-view chips bar: bar background transparent so the globe is visible
   through it; chips themselves stay solid. Move the bar to the very top of
   the screen with safe-area-inset padding. */
.globe-mode .scores-strip{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding-top:calc(env(safe-area-inset-top,0px) + 8px)!important;
}
/* Make sure chip surfaces stay opaque even though their parent strip is transparent. */
.scores-strip .score-chip{
  background:rgba(15,15,26,.96)!important;
}
.scores-strip .score-chip.turn{
  background:#050508!important;
}
/* End SCORBAL 57V13 OVERRIDES */

/* ===== SCORBAL 57V14 OVERRIDES ===== */

/* Item 3 (lobby Challenges allowed centring): the value sits in a fixed-width
   select that gets pushed right by the label's flex:1. Force the select to
   the centre of the available right-hand area by giving the label its own
   width and the select symmetric margins. */

/* Item 8 (Game Over screen): no recurring animations on the champion card.
   The crown's slow infinite spin was being perceived as the whole card
   "pulsing every 5 seconds". Kill all infinite animations under the
   .winner-panel; the one-shot winPop on panel entry is intentionally kept
   so the panel still pops in on arrival. */
.gameover-screen .winner-panel,
.gameover-screen .winner-panel *,
.gameover-scroll .winner-panel,
.gameover-scroll .winner-panel *{
  animation:none;
}
/* Re-enable the one-shot entry pop on the panel itself but never repeat. */
.gameover-screen .winner-panel,
.gameover-scroll .winner-panel{
  animation:winPop .6s cubic-bezier(.34,1.56,.64,1) 1;
}

/* Item 11 banner / Item 14 (sim Phase A banner): single readable line that
   stays out of the way of the board so yellow words remain tappable. We
   pin the banner to just below the top ribbon, give it plenty of horizontal
   room, and use the same family/size as other in-game messages. */
.sim-review-banner.sim-review-banner-v14{
  top:calc(env(safe-area-inset-top,0px) + 56px);
  background:rgba(8,10,18,.92);
  border:2px solid rgba(251,191,36,.92);
  border-radius:14px;
  padding:10px 18px;
  max-width:min(calc(100vw - 16px),700px);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 22px rgba(251,191,36,.25);
}
.sim-review-banner.sim-review-banner-v14 .sim-review-banner-line{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:14px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
  font-family:var(--fu);
}
.sim-review-banner.sim-review-banner-v14 .sim-review-banner-tag{
  font-weight:900;
  font-size:clamp(13px,3.6vw,16px);
  letter-spacing:.10em;
  color:#fbbf24;
  flex-shrink:0;
}
.sim-review-banner.sim-review-banner-v14 .sim-review-banner-text{
  font-weight:700;
  font-size:clamp(14px,4.2vw,17px);
  color:#ffffff;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sim-review-banner.sim-review-banner-v14 .sim-review-banner-count{
  font-family:var(--fcode);
  font-weight:900;
  font-size:clamp(16px,5vw,22px);
  color:#fbbf24;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  min-width:1.5em;
  text-align:right;
}

/* Item 10 first-round countdown only (no Game Score): when the Phase B
   overlay has the .sim-phase-b-first-round class, centre the lone
   countdown digit in the screen. */

/* Item 15 (host gear access when clock expired): the host menu and gear
   icon must remain operable for the host even when their own Player
   Clock has expired. None of the host-controls should inherit the rack
   timeout's disabled state. The header sits above Phase A / submit-wait
   notices and any other in-game overlays so the gear is reachable. */
.game-header{
  display:grid;justify-content:space-between;
  align-items:center;padding:7px 8px;gap:6px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:nowrap;overflow:hidden;
  grid-template-columns:minmax(92px,auto) minmax(48px,1fr) auto;column-gap:8px;
  position:relative;
  z-index:780;
  min-height:48px;
}
.game-header .hdr-actions,
.game-header .hdr-actions *{
  pointer-events:auto;
  opacity:1;
}
/* Host menu overlay above Phase B as well so the host can pause/end mid-
   countdown. */
.host-menu-overlay{padding:0;justify-content:flex-end;align-items:stretch;
  z-index:820;
}

/* Item 7 (rack + action row full width, equal widths within each row):
   stretch the rack-wrap edge-to-edge with a 6 px breathing margin on each
   side, drop the older 500/540 px cap, and let both palette tiles and
   action buttons share the same outer width. Within each row, all boxes
   are equal width (independent of the other row). */
.rack-wrap .rack .rack-tile{
  width:100%;
  aspect-ratio:1/1;
  min-width:0;
}
/* When the Player Clock pill is present, the action row has 6 columns
   instead of 5. The grid-auto-columns rule above handles both layouts
   automatically since each cell is sized 1fr. */

/* Item 9 (lobby Share area 50/50): big room code + host on left; large
   square QR on right, tappable to enlarge. Removes the older small QR
   thumbnail. QR container has NO rounded corners around the actual code
   so the QR doesn't get clipped and remains scannable; the outer button
   keeps a small radius. White quiet zone (padding) around the code. */
.v14-share{
  border:2px solid rgba(251,191,36,.55)!important;
  border-radius:18px!important;
  padding:10px!important;
  background:rgba(251,191,36,.06)!important;
}
/* LEFT — big room code stack */
.v14-code-btn{
  background:#f2c94c!important;
  color:#111!important;
  border:2px solid #f2c94c!important;
  padding:14px 10px!important;
  text-align:center!important;
  align-items:center!important;
  justify-content:center!important;
}
.v14-code-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  width:100%!important;
}
.v14-code-label{
  font-family:var(--fu)!important;
  font-weight:700!important;
  font-size:11px!important;
  letter-spacing:.18em!important;
  color:rgba(15,15,26,.78)!important;
  text-transform:uppercase!important;
}
.v14-code-value{
  font-family:var(--fcode)!important;
  font-weight:900!important;
  font-size:clamp(34px,11vw,52px)!important;
  letter-spacing:.10em!important;
  line-height:1.02!important;
  color:#111!important;
}
/* RIGHT — full-size square QR. Container is square (aspect-ratio 1/1) so
   the QR fills both dimensions equally regardless of left-column height.
   No rounded corners on the inner QR area; outer button has a small
   radius. White quiet zone padding so scanners can lock on. */
.v14-qr-thumb img,.v14-qr-thumb canvas,.v14-qr-thumb svg{
  width:100%!important;
  height:100%!important;
  border-radius:0!important;
  display:block!important;
  object-fit:contain!important;
}

/* End SCORBAL 57V14 OVERRIDES */

/* ===== SCORBAL 57V15 OVERRIDES ===== */

/* Item 20 (turn banner spacing below toolbar): the YOUR TURN banner and
   opponent-turn notices need the same gap from the toolbar that player
   chips have. The turn-score-slot is the chip container at top:48-62px;
   give the turn-notice the same effective offset so it doesn't jam
   against the toolbar. */
.turn-banner{text-align:center;
  padding:6px 12px;font-weight:700;
  border-radius:14px;margin:4px 8px;
  transition:opacity .12s linear,transform .12s linear;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 6px 18px rgba(0,0,0,.42);
  min-height:30px;
  background:#050508;
  color:#fff;
  opacity:1;
  margin-top:8px;
  width:min(90vw,390px);
  border:2px solid #fbbf24;
  transform:translateY(0) scale(1);
  will-change:opacity,transform,box-shadow;animation:none;position:relative;overflow:visible;
}

/* 57V16 (Item 37): the real fix — the banner is .turn-banner inside
   .turn-score-slot, and earlier rules set margin to 0 with !important.
   Force the slot itself to sit well below the toolbar with explicit
   gap, and the banner inside it inherits that position. The slot's
   top is repositioned to env(safe-area-inset-top) + 64px so the banner
   has visible breathing room between the toolbar and itself. */
.turn-score-slot .turn-banner{width:min(92vw,420px);margin:0 auto;
  margin-top:12px; /* 59.1: room for the pulsing ring below the header bar */
  margin-bottom:0;
}

/* Item 21 (yellow arrow separator between main play chips): match the
   globe-review yellow arrow style instead of the simple unicode arrow.
   Drop the textContent of .turn-arrow.next and style it as a yellow bar
   with a chevron head, like .review-rank-arrow does in globe view. */
.scores-strip .turn-arrow.next{
  font-size:0!important; /* hide the unicode → */
  position:relative;
  flex:0 0 28px;
  width:28px;
  height:14px;
  margin:0 2px;
}
.scores-strip .turn-arrow.next::before{
  content:""!important;
  position:absolute!important;
  left:1px!important;
  right:8px!important;
  top:50%!important;
  height:4px!important;
  transform:translateY(-50%)!important;
  background:#fbbf24!important;
  border-radius:999px!important;
  box-shadow:0 0 8px rgba(251,191,36,.45)!important;
}
.scores-strip .turn-arrow.next::after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  border-top:7px solid transparent!important;
  border-bottom:7px solid transparent!important;
  border-left:11px solid #fbbf24!important;
  filter:drop-shadow(0 0 6px rgba(251,191,36,.45))!important;
  background:transparent!important;
  width:0!important;
  height:0!important;
}

/* Item 22 + 23 (play-order screen spacing + theme): drop content below the
   top toolbar AND switch the palette from black/white to the landing-screen
   theme (dark navy background, yellow accents, white text). */
.sr-overlay{position:fixed;inset:0;
  background:rgba(7,10,18,.97);color:#fff;z-index:700;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(env(safe-area-inset-top) + 28px) 18px 24px;gap:18px;overflow:hidden;
  padding-top:calc(env(safe-area-inset-top,0px) + 80px);
}
.sr-label{font-family:var(--fd);font-weight:900;font-size:clamp(46px,13vw,76px);line-height:.95;letter-spacing:-.04em;
  color:#fbbf24;text-transform:uppercase;text-align:center;margin:4px 0 8px;
}
.sr-order-row{display:grid;grid-template-columns:minmax(72px,92px) 1fr 68px;align-items:center;gap:12px;padding:13px 14px;border-radius:18px;
  border:2px solid rgba(251,191,36,.55);
  background:rgba(15,15,26,.92);
  color:#fff;min-height:70px;transition:transform .28s ease,background .2s ease,color .2s ease;
}
.sr-order-row.revealed{
  background:rgba(251,191,36,.18);
  color:#fff;
  border-color:#fbbf24;
}
.sr-order-row.revealed .sr-rank{
  color:#fbbf24;
}
.sr-order-row .sr-rank{
  color:#fff;
}
.sr-order-row .sr-order-name{
  color:#fff;
}
.sr-roller{height:48px;border-radius:14px;border:3px solid currentColor;display:flex;align-items:center;justify-content:center;font-family:var(--fcode);font-weight:900;font-size:32px;font-variant-numeric:tabular-nums;line-height:1;overflow:hidden;background:transparent;
  color:#fbbf24;
  border-color:rgba(251,191,36,.55);
}
.sr-order-row.revealed .sr-roller{
  border-color:#fbbf24;
  color:#fbbf24;
}
.sr-note{font-size:18px;font-weight:800;
  color:rgba(255,255,255,.88);margin-top:2px;letter-spacing:.02em;
}

/* Item 25 (lobby waiting message): exact YOUR TURN font + ::after glow ring
   pulse. The 'Waiting for host to start the game' message becomes a
   prominent banner with the same family/size as the YOUR TURN notice. */
.lobby-waiting-banner{
  position:relative;
  display:block;
  margin:18px auto 8px;
  max-width:min(420px,calc(100vw - 24px));
  padding:14px 20px;
  background:rgba(15,15,26,.92);
  border:3px solid #fbbf24;
  border-radius:18px;
  text-align:center;
  font-family:var(--fd);
  font-weight:900;
  font-size:clamp(22px,6vw,30px);
  line-height:1.1;
  letter-spacing:.04em;
  color:#fff;
  text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 22px rgba(251,191,36,.18);
  overflow:visible;
}
.lobby-waiting-banner::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  pointer-events:none;
  animation:lobbyWaitingRing57V15 1.5s ease-in-out infinite;
  z-index:1;
}
@keyframes lobbyWaitingRing57V15{
  0%,100%{box-shadow:0 0 0 2px rgba(251,191,36,.55),0 0 18px 4px rgba(251,191,36,.35);opacity:.9}
  50%{box-shadow:0 0 0 3px rgba(255,224,140,1),0 0 38px 9px rgba(251,191,36,.8);opacity:1}
}

/* Item 26 (rack action row full text visible): tighten the rack against
   screen edges and reduce button padding so labels fit. Override the
   57V14 6px margins to 2px. Reduce button font slightly. */
.rack-wrap .rack{
  overflow:visible;
  padding-top:10px;
  padding-bottom:2px;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  width:100%;
  justify-items:stretch;
  padding-left:0;
  padding-right:0;
}
.rack-wrap .rack-actions{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:5px;
}
.rack-wrap .rack-actions button{
  width:100%!important;
  min-width:0!important;
  padding-left:2px!important;
  padding-right:2px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:clamp(11px,3.3vw,14px)!important;
  letter-spacing:0!important;
}

/* Item 28 (word definition popup): always centred on screen, never behind
   the toolbar. Z-index above the toolbar (780) and below the host menu
   (820) and guide close (850). */
.def-popup{padding-right:46px!important;pointer-events:auto!important;
  position:fixed!important;
  z-index:810!important;background:var(--panel);border:2px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--radius);padding:16px 18px;
  max-width:min(420px,calc(100vw - 32px))!important;min-width:220px;box-shadow:0 12px 32px rgba(0,0,0,.6);animation:defIn .18s ease-out;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  max-height:calc(100vh - 160px)!important;
  overflow-y:auto!important;
}
/* Ensure close × on definition popup is reachable */
.def-popup .def-close{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  z-index:820!important;
  min-width:36px!important;
  min-height:36px!important;
}

/* Item 30a (sim opening message overflow): allow the "Your first move must
   cross one of the flashing tiles" message to wrap to two lines so it
   doesn't run off the screen edge. */
.starter-pointer{
  max-width:min(calc(100vw - 28px),420px);
}
.starter-pointer-text{
  white-space:normal;
  line-height:1.2;
  text-align:center;
}

/* Item 34 (challenge dismiss button on def popup): pair the Challenge
   button with an explicit Dismiss button so accidental taps don't trigger
   the challenge. */
.def-dismiss-btn{
  display:block;
  width:100%;
  margin-top:8px;
  padding:10px 14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:rgba(255,255,255,.85);
  font-family:var(--fu);
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  cursor:pointer;
}
.def-dismiss-btn:active{
  background:rgba(255,255,255,.16);
}

/* End SCORBAL 57V15 OVERRIDES */

/* ===== SCORBAL 57V16 OVERRIDES ===== */

/* Item 38 (Score button overlay title hidden behind toolbar): the Score
   overlay shown when the user taps Score in the toolbar during play is
   .score-overlay-current at z-index 130 — below the game-header (z=780
   from 57V14 Item 15). The toolbar covers the top of the overlay.
   Push the overlay content down so the Game Score title sits below
   the toolbar with adequate spacing. */
.score-overlay-current{max-height:100dvh;overflow:auto;padding:12px 12px!important;gap:8px;overflow-y:auto;align-items:stretch;background:#050508;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:130;
  padding-top:calc(env(safe-area-inset-top,0px) + 76px)!important;
}

/* Item 40 (QR corners visibly clipped): defensive nuclear override —
   remove ALL border-radius and overflow:hidden from EVERY container
   in the QR ancestry chain. The user reported the corners are visibly
   clipped on both lobby thumb and enlarged overlay views, meaning some
   ancestor's rounded corners + overflow:hidden is still active. */

/* Lobby small QR — outer button must NOT clip the QR locator squares */
.v14-qr-thumb canvas,
.v14-qr-thumb img,
.v14-qr-thumb table,
.v14-qr-thumb svg{
  border-radius:0!important;
  background:#fff!important;
  display:block!important;
}

/* Enlarged QR overlay (qr-card / qr-img.qr-js) */
.qr-card{
  width:min(440px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  background:var(--panel);
  border:2px solid var(--accent);
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  box-sizing:border-box
}
.qr-img canvas,
.qr-img img,
.qr-img table,
.qr-img svg,
.qr-js canvas,
.qr-js img,
.qr-js table,
.qr-js svg{
  border-radius:0!important;
  background:#fff!important;
}

/* End SCORBAL 57V16 OVERRIDES */

/* ===== SCORBAL 57V17 OVERRIDES ===== */

/* Item 39 (combined Globe + rank chip end-game screen): styling for the
   integrated end-game screen. The Globe is the background, rank chip
   strip sits at top, action row sits at bottom. */

/* Winner chip — gold tile, crown icon, gentle pulse */
.review-rank-chip.winner{
  background:#f2c94c;
  color:#15110a;
  border:2px solid #ffe07a;
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 18px rgba(251,191,36,.4);
  position:relative;
  animation:winnerChipPulse57V17 1.8s ease-in-out infinite;
  padding-left:6px;
}
.review-rank-chip.winner .name,
.review-rank-chip.winner .score{
  color:#15110a!important;
  font-weight:900!important;
  text-shadow:none!important;
}
@keyframes winnerChipPulse57V17{
  0%,100%{
    box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 14px rgba(251,191,36,.4);
    filter:brightness(1);
  }
  50%{
    box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 32px rgba(255,224,140,.85);
    filter:brightness(1.1);
  }
}

/* Action row at the bottom of the globe end-game screen. The
   review-board-actions container holds Play Again, Share Result, Leave
   when phase==='done'. Position fixed at bottom with safe-area inset. */
.review-board-actions{
  position:fixed;
  right:0;
  bottom:0;
  z-index:120;
  display:flex;
  gap:8px;
  align-items:stretch;
  left:0;
  padding:14px 12px calc(env(safe-area-inset-bottom,0px) + 14px);
  justify-content:center;
  background:linear-gradient(to top,rgba(7,10,18,.92) 0%,rgba(7,10,18,.7) 60%,rgba(7,10,18,0) 100%);
  pointer-events:auto;
}
.review-board-actions button{min-height:38px;
  padding:12px 6px!important;
  border-radius:14px!important;background:rgba(15,15,26,.62)!important;border:1px solid rgba(255,255,255,.36)!important;backdrop-filter:blur(8px);
  font-size:15px!important;color:#fff;
  flex:1 1 0!important;
  min-width:0!important;max-width:150px;line-height:1.15;
  font-family:var(--fu)!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  cursor:pointer!important;
}
.review-board-actions button.primary{
  background:#fbbf24!important;
  color:#15110a!important;
  border:2px solid #ffe07a!important;
}
.review-board-actions button.ghost{
  background:rgba(15,15,26,.85)!important;
  color:#fff!important;
  border:2px solid rgba(255,255,255,.25)!important;
}
.review-board-actions .review-close-btn{
  width:44px;
  min-width:44px;
  padding:0;
  font-size:24px;font-weight:900;height:46px;background:rgba(15,15,26,.55);border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:50%;backdrop-filter:blur(8px);
  line-height:1;
}

/* End SCORBAL 57V17 OVERRIDES */

/* ===== SCORBAL 57V18 OVERRIDES ===== */

/* Item 40 (QR scanning, third attempt): the qrcodejs library does NOT
   generate its own quiet zone (the 4-module white border that QR scanners
   need to lock onto the code). We must add it via container padding,
   AND ensure that padding is white (not transparent), AND the canvas
   itself stays at native pixel size with no scaling.

   The 57V16 fix removed border-radius and overflow:hidden. The 57V18 fix
   adds proper quiet zone padding and ensures the canvas matches its
   container exactly. */

/* Small lobby QR — proper white quiet zone */
.v14-qr-btn{
  background:#ffffff!important;
  border:2px solid #f2c94c!important;
  aspect-ratio:1/1!important;
  padding:14px!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  border-radius:6px!important;
  overflow:visible!important;
}
.v14-qr-thumb{
  width:100%!important;
  height:100%!important;
  background:#ffffff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:0!important;
  overflow:visible!important;
  padding:0!important;
}
/* Enlarged overlay QR — bigger quiet zone */
.qr-img,
.qr-img.qr-js,
.qr-js{
  border-radius:0;
  overflow:visible;
  background:#ffffff;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Canvas/img inside any QR holder — sharp, no border-radius, no transform */
.v14-qr-thumb canvas,
.v14-qr-thumb img,
.qr-img canvas,
.qr-img img,
.qr-js canvas,
.qr-js img{
  image-rendering:pixelated!important;
  image-rendering:crisp-edges!important;
  border-radius:0!important;
  background:#ffffff!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
}

/* End SCORBAL 57V18 OVERRIDES */

/* ===== SCORBAL 57V19 OVERRIDES ===== */

/* Item 43 (gold/silver/bronze medallions above top 3 chips on end-game).
   Flat colours, no gradients. Winner medallion pulses in sync with the
   gold winner chip below. Sits absolutely positioned just above the
   review-rank-strip; relies on the same parent (rG screen container). */
/* When a medallion row is present, push the chip strip down to make room. */
body:has(.rank-medal-row) .review-rank-strip{
  top:calc(env(safe-area-inset-top,0px) + 60px);
}

/* Item 45 (pre-populate setting row + prepop tile styling) */

/* Item 45 prepop tile (flat board): no drop animation, neutral cream tone
   to distinguish from current-round and previous-round player tiles.
   On the globe canvas the same effect happens automatically — the cream
   gradient is used for any non-recent tile. */
.tile.prepop-tile{
  animation:none;
  filter:saturate(0.85);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.18);
}

/* End SCORBAL 57V19 OVERRIDES */

/* ===== SCORBAL 57V20 OVERRIDES ===== */

/* Item 47: lobby bottom button text larger (was small ~12-13px, now 15px).
   Applied via .lobby-bottom-btn class which is added to Change name, Leave,
   Forget this game, Claim host. */
.lobby-action-row .lobby-bottom-btn{
  font-size:15px!important;
  padding:11px 16px!important;
  letter-spacing:.04em!important;
  min-height:42px!important;
}

/* Item 48 + 50: new share frame layout — both QR and Room Code inside
   single yellow outlined frame. QR is the dominant element (large square
   on top), Room Code is a slim banner below. "Room Code" label doubled
   in size for prominence. Host name removed. */
.v20-share-frame{
  background:transparent!important;
}
/* Item 48: "Room Code" label doubled in size (was ~11px, now ~22px) */
/* Host name removed from yellow box — make sure if it shows it's hidden */

/* Item 49: QR intro splash screen */
.qr-intro-screen{
  background:linear-gradient(180deg,#0f0d1e 0%,#080612 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px;
  color:#fff;
}
.qr-intro-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  max-width:360px;
}
.qr-intro-wordmark{
  font-family:var(--ft);
  font-size:clamp(38px,11vw,56px);
  font-weight:900;
  color:#fbbf24;
  letter-spacing:.04em;
  margin-bottom:24px;
  text-shadow:0 0 18px rgba(251,191,36,.4);
}
.qr-intro-greeting{
  font-family:var(--fu);
  font-size:16px;
  color:rgba(255,255,255,.7);
  letter-spacing:.05em;
}
.qr-intro-name{
  font-family:var(--fd);
  font-size:clamp(28px,8vw,40px);
  font-weight:900;
  color:#fbbf24;
  margin-bottom:14px;
  letter-spacing:.04em;
  animation:qrIntroNamePulse 1.5s ease-in-out infinite;
}
@keyframes qrIntroNamePulse{
  0%,100%{transform:scale(1);text-shadow:0 0 14px rgba(251,191,36,.35);}
  50%{transform:scale(1.04);text-shadow:0 0 26px rgba(251,191,36,.7);}
}
.qr-intro-msg{
  font-family:var(--fu);
  font-size:18px;
  font-weight:700;
  color:#fff;
  letter-spacing:.03em;
  margin-top:18px;
}
.qr-intro-dots{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.qr-intro-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fbbf24;
  animation:qrIntroDotPulse 1s ease-in-out infinite;
}
@keyframes qrIntroDotPulse{
  0%,100%{opacity:.3;transform:scale(.8);}
  50%{opacity:1;transform:scale(1.2);}
}

/* Item 49: pulsing yellow ring on Change Name button for auto-joined users */
.pulse-change-name{
  position:relative;
  border:2px solid #fbbf24;
  background:rgba(251,191,36,.18);
  color:#fbbf24;
  font-weight:900;
  animation:changeNamePulse57V20 1.5s ease-in-out infinite;
}
@keyframes changeNamePulse57V20{
  0%,100%{
    box-shadow:0 0 0 0 rgba(251,191,36,.6),0 0 14px 2px rgba(251,191,36,.4);
  }
  50%{
    box-shadow:0 0 0 6px rgba(251,191,36,0),0 0 28px 6px rgba(251,191,36,.75);
  }
}

/* Item 49: Welcome banner shown in lobby for QR auto-joined users */
.qr-welcome-banner{
  background:rgba(15,15,26,.92);
  border:2px solid #fbbf24;
  border-radius:14px;
  padding:14px 18px;
  text-align:center;
  margin:14px 0 6px;
  font-family:var(--fu);
  font-weight:700;
  font-size:16px;
  color:#fff;
  line-height:1.4;
  box-shadow:0 0 22px rgba(251,191,36,.22);
}
.qr-welcome-banner .qr-welcome-name{
  color:#fbbf24;
  font-weight:900;
  font-size:20px;
  letter-spacing:.04em;
}
.qr-welcome-banner .qr-welcome-hint{
  margin-top:6px;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.7);
  letter-spacing:.02em;
}

/* Item 51: Pre-populate inline toggle next to Play Computer on welcome */

/* Items 30b/c: starter pointer smooth cross-fade. The `transition` makes
   the existing show/hide (via display:none) appear smoother. Note: since
   the existing code uses display:none, opacity won't smoothly transition
   between display:none and display:block — so we add opacity-based fade. */
.starter-pointer-fade{
  transition:opacity 0.4s ease-in-out;
}

/* End SCORBAL 57V20 OVERRIDES */

/* ===== SCORBAL 57V21 OVERRIDES ===== */

/* Item 58: side-by-side share layout — Room Code LEFT, QR RIGHT inside
   the shared yellow outline. Compact enough that the Players list is
   visible below it without scrolling. */
/* LEFT: Room Code — compact, taller-than-wide tile */
.v21-share-frame-inner .v14-code-btn.v21-code-side{
  flex:1 1 38%!important;
  min-width:0!important;
  border:none!important;
  border-radius:10px!important;
  padding:10px 8px!important;
  background:#fbbf24!important;
  color:#15110a!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.v21-code-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:4px!important;
  line-height:1.1!important;
}
.v21-code-label{
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:#15110a!important;
}
.v21-code-value{
  font-size:clamp(24px,8vw,32px)!important;
  font-weight:900!important;
  font-family:var(--fcode)!important;
  letter-spacing:.16em!important;
  color:#15110a!important;
}
/* Host name still hidden */
/* RIGHT: QR — square */
.v21-share-frame-inner .v14-qr-btn.v21-qr-side{
  flex:0 0 auto!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  width:auto!important;
  border:2px solid rgba(255,255,255,.18)!important;
  padding:8px!important;
  background:#fff!important;
  border-radius:10px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.v21-qr-thumb{
  width:100%!important;
  height:100%!important;
  aspect-ratio:1/1!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.v21-qr-thumb svg{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:block!important;
}
/* Constrain the whole share frame height so Players list is visible */
.v21-share-frame{
  background:transparent!important;
  max-height:200px!important;
  overflow:visible!important;
}
.v21-share-frame-inner{
  border:1px solid var(--card-line)!important;
  box-shadow:var(--card-shadow)!important;
  border-radius:14px!important;
  padding:8px!important;
  display:flex!important;
  flex-direction:row!important;
  gap:8px!important;
  background:var(--card-bg)!important;
  width:100%!important;
  box-sizing:border-box!important;
  align-items:stretch!important;
  max-height:180px!important;
}

/* Item 58 — sticky Leave button at bottom of lobby. The .lobby-action-bar
   was already positioned at the bottom; make it explicitly sticky with
   safe-area inset and a soft backdrop. */
.lobby-action-bar{flex:0 0 auto;padding:7px 12px;
  background:linear-gradient(to top,rgba(7,10,18,.92) 0%,rgba(7,10,18,.6) 70%,rgba(7,10,18,0) 100%);border-top:1px solid rgba(61,61,92,.72);display:flex;flex-direction:column;gap:6px;
  z-index:20;
  position:sticky;left:0;right:0;
  bottom:0;max-width:680px;margin:0 auto;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
}

/* Item 59: lobby header bar with gear icon for host */
.v21-lobby-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  padding-top:max(8px,env(safe-area-inset-top));
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.v21-lobby-header .lobby-header-title{
  font-family:var(--ft);
  font-size:18px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
}
.v21-lobby-header .lobby-header-actions{
  display:flex;
  gap:8px;
}
.v21-lobby-header .lobby-gear-btn{
  font-size:22px;
  padding:6px 12px;
  min-width:42px;
  min-height:38px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#fbbf24;
  cursor:pointer;
}
/* Item 59: lobby menu overlay panel */
.lobby-menu-overlay{
  z-index:820;
}
.lobby-menu-panel{
  max-width:min(420px,calc(100vw - 32px));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lobby-menu-btn{
  width:100%;
  padding:11px 16px;
  font-size:15px;
  border-radius:12px;
}
.v21-menu-section-divider{
  height:1px;
  background:rgba(255,255,255,.1);
  margin:10px 0 4px;
}

/* End SCORBAL 57V21 OVERRIDES */

/* ===== SCORBAL 57V22 OVERRIDES ===== */

/* Item 61: medals as absolute children of chips (not parallel row). The
   old .rank-medal-row + .rank-medal-spacer is no longer rendered; we keep
   the CSS rules above for backwards compat but they won't trigger because
   no elements with those classes exist anymore. Medal sits absolutely
   positioned above its chip, centred horizontally. Chip needs position
   relative + margin-top to make room for the medal. */
/* Bump the strip down slightly so medals don't hit the toolbar at top */
/* 57V28 (Item 110): v22-medal-strip top/padding consolidated into a single
   rule in the V28 block. This old V22 declaration is neutralised. */
/* (was: top safe-area+56px, padding-top 44px) */
/* Old parallel-row rules still in earlier blocks won't be rendered to */

/* Item 62: welcome-screen prepop row matches setup screen styling.
   Reuses .setting-row + .prepop-row but constrained to fit inside the
   welcome btns container width. */
/* Item 75 (57V23): the v22-welcome-prepop class is kept on the element ONLY
   as a width-constraint hook for any welcome-specific tweaks. All other
   styling now inherits from .setting-row + .prepop-row defined in the
   shared setup-style block, so the welcome row looks visually identical
   to the setup screen row (was: forced override of padding, background,
   border, etc., which broke the inheritance). */

/* Item 63: loading splash for slow game-start */
.game-start-splash{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,#0f0d1e 0%,#080612 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:24px;
  color:#fff;
}

/* Item 64c: LOBBY title big, sized like the previous "PLAYERS" header */
.v22-lobby-title{
  font-size:clamp(26px,7vw,34px)!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
}

/* Item 64a: SHARING title inside the yellow frame, top-left */
.v22-share-frame-inner{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  padding:8px 10px!important;
}
.v22-share-split{
  display:flex!important;
  flex-direction:row!important;
  gap:8px!important;
  align-items:stretch!important;
  width:100%!important;
}
/* Item 64b: host QR overflow fix — slightly smaller QR, more padding */
.v22-share-frame-host .v21-qr-side{
  aspect-ratio:1/1!important;
  max-height:140px!important;
  max-width:140px!important;
  padding:6px!important;
}
.v22-share-frame-host .v21-code-side{
  flex:1 1 auto!important;
}
.v22-share-frame-host{
  max-height:200px!important;
}

/* Item 64d/e: sticky bottom bar with horizontal split buttons */
.v22-sticky-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:30;
  padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 12px);
  background:linear-gradient(to top,rgba(7,10,18,.96) 0%,rgba(7,10,18,.75) 70%,rgba(7,10,18,0) 100%);
  max-width:680px;
  margin:0 auto;
}
/* 57V24 (Item 85): scroll content needs bottom padding so the last items
   aren't hidden behind the fixed bar (which is ~70px tall with the
   safe-area inset). */
.lobby-scroll{padding:10px 12px 10px;gap:8px;overflow:auto;min-height:0;
  padding-bottom:90px;
}
.v22-bottom-row{
  display:flex;
  flex-direction:row;
  gap:10px;
  width:100%;
}
.v22-bottom-row button{
  flex:1 1 0!important;
  min-width:0!important;
  padding:12px 8px!important;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  border-radius:12px!important;
}

/* Item 66: spinning globe background in non-host lobby. Sits BEHIND
   content with low opacity. The lobby scroll container gets bottom
   margin to leave room for the action bar. */
.lobby-scroll.v22-with-globe{
  position:relative;
  z-index:2;
  background:transparent;
}
/* Make content panels opaque so they sit cleanly over the globe */
.lobby-scroll.v22-with-globe .people-team-panel,
.lobby-scroll.v22-with-globe .qr-welcome-banner,
.lobby-scroll.v22-with-globe .v22-waiting-banner{
  background-color:rgba(15,15,26,.88)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}

/* Item 68: pulsing Start Game button when ready */
@keyframes startGamePulse57V22{
  0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.55),0 4px 14px rgba(251,191,36,.3);}
  50%{box-shadow:0 0 0 8px rgba(251,191,36,0),0 4px 22px rgba(255,224,140,.7);}
}
.v22-start-ready-pulse{
  animation:startGamePulse57V22 1.8s ease-in-out infinite!important;
}

/* Item 69: settings recap chip strip */

/* Item 70: join feedback animation — new players fade in with a subtle
   yellow border pulse */
@keyframes justJoined57V22{
  0%{opacity:0;transform:translateX(-12px);background:rgba(251,191,36,.15);}
  60%{opacity:1;transform:translateX(0);background:rgba(251,191,36,.1);}
  100%{opacity:1;transform:translateX(0);background:rgba(255,255,255,.04);}
}
.v22-just-joined{
  animation:justJoined57V22 1.2s ease-out forwards!important;
}

/* Item 71: share frame collapsed state (when 4+ players joined) */
.v22-share-collapsed{
  padding:0;
  background:transparent;
  border:none;
}
.v22-share-collapse-bar{
  width:100%;
  padding:10px 14px;
  background:rgba(251,191,36,.12);
  border:1px dashed rgba(251,191,36,.55);
  color:#fbbf24;
  border-radius:10px;
  font-family:var(--fu);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}

/* Item 72: bag preview */

/* Item 73: kick player button */
.v22-kick-btn{
  margin-left:auto!important;
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  background:rgba(220,38,38,.18)!important;
  border:1px solid rgba(220,38,38,.5)!important;
  color:rgba(255,180,180,.95)!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
  padding:0!important;
}
.v22-kick-btn:active{
  background:rgba(220,38,38,.35)!important;
}

/* End SCORBAL 57V22 OVERRIDES */

/* ===== SCORBAL 57V23 OVERRIDES ===== */

/* Item 80 (V23) + Item 97a (V26): chip strip closer to top — was 24px,
   now 8px so chips/medals sit almost touching the top of the screen. */
/* 57V28 (Item 110): V23 v22-medal-strip declaration neutralised; consolidated
   into the V28 block below. (was: top safe-area+8px, padding-top 54px) */

/* Item 81: ribbon rosette SVG medal. Replaces flat circle. The rosette
   has a circular body + V-shaped tails below; positioned absolutely above
   each chip with the body centred above and tails dangling down toward
   the chip. */
/* Winner rosette pulses with the same timing as the winner chip below. */
/* Chip gets extra top margin to make space for the rosette above. */

/* Item 76: welcome screen (scorbal-home) must allow vertical scrolling so
   that when the Pre-populate toggle is ON and the moves input expands the
   row, other content (Play Friends / Play Computer buttons) doesn't get
   pushed off the top of the viewport. The scroll container is the
   .scorbal-home root itself. */
.welcome-screen.scorbal-home{padding-top:0!important;padding-bottom:0!important;overflow:hidden;touch-action:auto;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
.scorbal-home{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0!important;gap:0!important;background:#0a0a14;overflow-x:hidden!important;
  overflow-y:auto!important;
}
/* Allow vertical scrolling on the welcome btns container too, so growth
   inside it doesn't overflow into other layout. */

/* Item 78 (57V23): font sizes — all section titles and labels in the
   lobby now match the existing .lobby-section-title size as the minimum
   (clamp(22px, 6vw, 30px) used by TEAMS). This makes them all consistent
   and legible. */
.v22-share-title{
  font-family:var(--fd);
  font-size:clamp(22px,6vw,30px);
  font-weight:900;
  letter-spacing:-.02em;
  text-transform:none;
  color:#fff;
  padding:0;
  text-align:left;
}

/* Item 77: HOST sticky "Waiting for players..." message when no other
   players have joined. Replaces the disabled Start button in the bottom
   bar. Leave button moves into the scroll content area. */
@keyframes waitingPulse57V23{
  0%,100%{opacity:.85;}
  50%{opacity:1;box-shadow:0 0 18px rgba(251,191,36,.25);}
}
.v23-host-content-leave-row{
  display:flex!important;
  justify-content:center!important;
  padding:12px 0!important;
}
.v23-host-content-leave-btn{
  min-width:140px!important;
  padding:11px 24px!important;
  font-size:14px!important;
}

/* Item 83: Non-host lobby — full-screen globe layout */
.v23-nonhost-lobby{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
}
/* Sticky top bar with player names + gear */
.v23-nonhost-topbar{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:10px;
  padding:max(8px,env(safe-area-inset-top,0)) 12px 8px;
  background:rgba(15,15,26,.92);
  border-bottom:1px solid rgba(251,191,36,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  min-height:50px;
}
.v23-you-tag{
  color:#fbbf24;
  font-weight:900;
  letter-spacing:.04em;
}
.v23-waiting-suffix{
  color:rgba(255,255,255,.6);
  font-style:italic;
  font-weight:500;
  font-size:13px;
}
.v23-expand-indicator{
  color:#fbbf24;
  font-size:14px;
  margin-left:4px;
}
.v23-nonhost-gear{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fbbf24;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Players popover (overflow state) */
.v23-players-popover{
  position:absolute;
  top:60px;
  left:12px;
  right:12px;
  z-index:60;
  background:rgba(15,15,26,.98);
  border:2px solid #fbbf24;
  border-radius:14px;
  padding:14px;
  max-height:70vh;
  overflow-y:auto;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.v23-players-popover-title{
  font-family:var(--fd);
  font-size:18px;
  font-weight:900;
  color:#fbbf24;
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.v23-players-popover-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.v23-players-popover-row:last-of-type{
  border-bottom:none;
}
.v23-players-popover-name{
  flex:1 1 auto;
  font-size:14px;
  color:#fff;
}
.v23-players-popover-close{
  margin-top:10px;
  width:100%;
}
/* Full-screen globe between top and bottom bars */
.v23-nonhost-globe-wrap{
  position:absolute;
  top:50px; /* below top bar */
  bottom:72px; /* above bottom bar */
  left:0;
  right:0;
  z-index:1;
  pointer-events:auto;
}
.v23-nonhost-globe-stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.v23-nonhost-globe-stage .globe-canvas{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:block!important;
}
/* Non-host sticky bottom bar */
.v23-nonhost-actions{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:50;
}

/* End SCORBAL 57V23 OVERRIDES */

/* ===== SCORBAL 57V25 OVERRIDES ===== */

/* Item 88: prepop row stays on one line regardless of On/Off. Input wrap
   is always visible; disabled-grey when toggle is Off. Input is narrow
   (2-digit width), no spinner arrows. */ /* never actually hide */
/* Ensure the prepop-row itself never wraps */

/* Item 89: reduce welcome screen button heights ~40%, keep font size */
.welcome-screen .scorbal-buttons button,
.welcome-screen .scorbal-actions button,
.scorbal-home .scorbal-buttons button,
.scorbal-home .scorbal-actions button{
  min-height:34px!important;
  padding:6px 14px!important;
}
/* Setting row inside the welcome scorbal-buttons grid is taller; reduce
   its inner padding only on welcome (don't touch setup screen). */
/* Smaller responsive override (max-height:720px) currently sets 42px;
   bring that in line too. */
@media (max-height:720px){
  .welcome-screen .scorbal-buttons button,
  .scorbal-home .scorbal-buttons button{
    min-height:32px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
}

/* Item 90: symmetric sticky bar — Start game + Leave equal 50/50 width
   when both are shown. Removes the 2:1 ratio from Item 64d. The default
   `.v22-bottom-row button { flex: 1 1 0 }` rule already gives equal
   distribution — we just need to undo the override that gave start-btn
   flex:2. */
.v22-bottom-row .v22-start-btn{
  flex:1 1 0!important;
}

/* End SCORBAL 57V25 OVERRIDES */

/* ===== SCORBAL 57V27 OVERRIDES ===== */

/* Item 107: end-game chips bigger; rank labels above top-3.
   The .v107-chip-rank-label sits above each top-3 chip with a coloured
   ordinal (gold/silver/bronze for 1st/2nd/3rd). The chip itself is
   sized up: bigger min/max widths, more padding, larger name and
   score fonts. */

/* Rank label above the chip — uses same prominent font as PRE-POPULATE
   label (clamp(22px, 6vw, 30px)). Coloured per tier. */
.v107-chip-rank-label{
  position:absolute;
  top:-32px; /* 57V28 (Item 110): tighter so chips sit high */
  left:50%;
  transform:translateX(-50%);
  font-family:var(--fd);
  font-size:clamp(22px,6vw,30px);
  font-weight:900;
  letter-spacing:-.02em;
  white-space:nowrap;
  pointer-events:none;
  z-index:3;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.v107-chip-rank-label .v107-rank-num{
  display:inline;
}
.v107-chip-rank-label .v107-rank-suffix{
  font-size:.5em;
  margin-left:.05em;
  vertical-align:super;
  font-weight:900;
}
.v107-rank-gold{color:#fbbf24;}
.v107-rank-silver{color:#cbd5e1;}
.v107-rank-bronze{color:#d99155;}

/* Chips with a rank label need extra top-margin to make room for the
   label above them. */
.v107-has-rank{
  margin-top:32px; /* 57V28 (Item 110): match tighter label offset */
}
.v107-chip{
  position:relative;
}

/* Chip sizing — ~50% larger than original (big-but-balanced per spec).
   Note: !important here outscores the prior .review-rank-chip override
   at line ~1098 which set min-width:112px max-width:154px. */
.review-rank-chip.v107-chip{
  min-width:140px;
  max-width:200px;
  padding:11px 16px;
  gap:8px;
  border-radius:999px;
  border-width:2px;
}
.review-rank-chip.v107-chip .name{
  font-size:18px!important;
  font-weight:900!important;
}
.review-rank-chip.v107-chip .score{
  font-size:22px;
  font-weight:900;
  margin-left:6px;
}

/* Adjust the strip's padding-top: rosette needed 54px headroom; the
   text rank label needs ~42px. */
/* 57V28 (Item 110): SINGLE consolidated rule for the end-game chip strip
   position. Chips + rank labels sit as high as physically possible —
   strip top at the bare safe-area inset, padding-top only as much as the
   rank label above each chip needs (label is position:absolute at
   top:-34px, ~30px tall, so ~34px headroom keeps it from clipping). */
.v22-medal-strip{
  top:env(safe-area-inset-top,0px);
}
/* 57V30 (Item 118): in-game strip has NO rank labels, so minimal padding —
   chips sit right at the top. Done-game strip keeps headroom (34px) for
   the rank labels above the top-3 chips, and must allow overflow-y so the
   absolute-positioned labels (top:-32px) aren't clipped. */
.v22-medal-strip.v118-ingame{
  padding-top:4px;
}

/* End SCORBAL 57V27 OVERRIDES */

/* ===== SCORBAL 57V28 OVERRIDES ===== */

/* Item 112: in-game word+score preview — fonts +50%, no black bar
   (transparent background with a dark text-shadow so the green text
   stays readable over the globe), and sit closer to the tile rack. */
.word-preview{
  background:transparent;border-radius:12px;text-align:center;font-family:var(--fd);font-weight:700;
  font-size:24px;color:var(--text-2);
  padding:3px 0;min-height:28px;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6);
}
.word-preview .pts{color:var(--accent);
  margin-left:10px;
  font-size:24px;
}
/* Halve the gap between the word-preview and the rack below it. The
   .rack-wrap originally has gap:5px; tighten to bring the preview
   closer to the tiles. */

/* Item 113: gesture hint overlay — first in-game globe per session.
   A light scrim with an animated two-finger pinch then drag demo. */
.gesture-hint-overlay{
  position:fixed;
  inset:0;
  z-index:760;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(8,10,18,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  pointer-events:auto;
  animation:ghFadeIn .35s ease-out;
  gap:0;
  padding:24px;
}
.gesture-hint-overlay.gh-fading{
  opacity:0;
  transition:opacity .4s ease;
}
@keyframes ghFadeIn{from{opacity:0}to{opacity:1}}
.gh-title{
  font-family:var(--fd,'Bowlby One SC',sans-serif);
  font-size:clamp(20px,5.5vw,26px);
  font-weight:900;
  color:#fbbf24;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  margin-bottom:26px;
  letter-spacing:.01em;
}
/* Each gesture row: animated finger stage on the left, label on the right */
.gh-gesture{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  max-width:340px;
  margin-bottom:24px;
}
.gh-demo{
  position:relative;
  width:120px;
  height:72px;
  flex:0 0 120px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:14px;
  overflow:hidden;
}
.gh-label{
  flex:1 1 auto;
}
.gh-label .gh-l1{
  font-family:var(--fu,sans-serif);
  font-size:18px;
  font-weight:900;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.gh-label .gh-l2{
  font-family:var(--fu,sans-serif);
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.7);
  margin-top:2px;
}
/* Finger glyph — a fingertip circle with a soft "pad" and glow so it
   clearly reads as a finger touching glass. */
.gh-finger{
  position:absolute;
  top:50%;
  left:50%;
  width:26px;
  height:26px;
  margin:-13px 0 0 -13px;
  border-radius:50%;
  background:radial-gradient(circle at 36% 32%,rgba(255,255,255,.98),rgba(251,191,36,.9) 55%,rgba(245,158,11,.7));
  box-shadow:0 0 14px rgba(251,191,36,.85),0 3px 8px rgba(0,0,0,.55);
  z-index:2;
}
/* Contact ripple ring under each finger */
.gh-finger::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(251,191,36,.45);
  animation:ghRipple 1.6s ease-out infinite;
}
@keyframes ghRipple{
  0%{transform:scale(.6);opacity:.8}
  100%{transform:scale(1.5);opacity:0}
}
/* Direction arrows inside the demo box */
.gh-arrow{
  position:absolute;
  top:50%;
  margin-top:-7px;
  width:0;height:0;
  opacity:.75;
}
.gh-arrow.gh-ar-left{left:6px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid rgba(255,255,255,.7);}
.gh-arrow.gh-ar-right{right:6px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid rgba(255,255,255,.7);}

/* ZOOM IN — two fingers start near centre, slide APART, hold, reset. */
.gh-zoomin .gh-f1{animation:ghZiL 2.6s ease-in-out infinite;}
.gh-zoomin .gh-f2{animation:ghZiR 2.6s ease-in-out infinite;}
@keyframes ghZiL{0%{transform:translateX(-6px)}35%{transform:translateX(-34px)}70%{transform:translateX(-34px)}100%{transform:translateX(-6px)}}
@keyframes ghZiR{0%{transform:translateX(6px)}35%{transform:translateX(34px)}70%{transform:translateX(34px)}100%{transform:translateX(6px)}}

/* ZOOM OUT — two fingers start APART, slide TOGETHER, hold, reset. */
.gh-zoomout .gh-f1{animation:ghZoL 2.6s ease-in-out infinite;}
.gh-zoomout .gh-f2{animation:ghZoR 2.6s ease-in-out infinite;}
@keyframes ghZoL{0%{transform:translateX(-34px)}35%{transform:translateX(-6px)}70%{transform:translateX(-6px)}100%{transform:translateX(-34px)}}
@keyframes ghZoR{0%{transform:translateX(34px)}35%{transform:translateX(6px)}70%{transform:translateX(6px)}100%{transform:translateX(34px)}}

/* SWIPE — one finger sweeps left to right and back. */
.gh-swipe .gh-f1{animation:ghSwipe 2.6s ease-in-out infinite;}
@keyframes ghSwipe{0%{transform:translateX(-36px)}45%{transform:translateX(36px)}55%{transform:translateX(36px)}100%{transform:translateX(-36px)}}

.gh-gotit{
  margin-top:8px;
  font-family:var(--fu,sans-serif);
  font-size:18px;
  font-weight:900;
  letter-spacing:.03em;
  color:#08121e;
  background:linear-gradient(180deg,#ffe066,#fbbf24);
  border:none;
  border-radius:999px;
  padding:13px 38px;
  box-shadow:0 6px 18px rgba(251,191,36,.4),0 2px 6px rgba(0,0,0,.4);
  cursor:pointer;
}
.gh-gotit:active{transform:translateY(1px);}

/* Item 119 update + 57V36 (Item 138, originally 57V35): hold-to-define
   gesture demo. Shows 4 tiles spelling ABLE with a finger pressed on
   one tile, a pulsing ripple, and a definition callout fading in/out
   to convey "press and hold a tile in a word → definition appears". */
.gh-demo-hold{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px 4px;
}
.gh-hold-word{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  position:relative;
  z-index:2;
}
.gh-hold-tile{
  width:18px;height:20px;
  border-radius:4px;
  background:linear-gradient(160deg,#fffbe6,#e8d5a0);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ft,serif);
  font-size:13px;font-weight:900;
  color:#2d1a00;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  flex-shrink:0;
}
.gh-hold-tile-target{
  /* Target tile is highlighted slightly to show which one the finger is
     pressing. */
  background:linear-gradient(160deg,#fff5c8,#d9b96e);
  box-shadow:0 0 0 1.5px rgba(251,191,36,.7),0 1px 4px rgba(0,0,0,.5);
}
/* Finger sits ON the target tile (the B in ABLE), pulsing in place to
   convey "press and hold". Centered on the demo box then nudged left
   ~10px to land on the B tile, and 10px down to overlay the word. */
.gh-hold-finger{
  position:absolute;
  top:50%;
  left:50%;
  margin:-13px 0 0 -13px;
  transform:translateX(-10px) translateY(10px);
  animation:ghHoldFinger 2.6s ease-in-out infinite;
}
@keyframes ghHoldFinger{
  0%,10%{opacity:0;transform:translateX(-10px) translateY(14px) scale(.7);}
  22%,80%{opacity:1;transform:translateX(-10px) translateY(10px) scale(1);}
  100%{opacity:0;transform:translateX(-10px) translateY(14px) scale(.7);}
}
/* Definition callout — appears above the word once the finger is held. */
.gh-hold-popup{
  font-family:var(--fu,sans-serif);
  font-size:10px;font-weight:800;
  letter-spacing:.04em;
  background:rgba(15,15,30,.94);
  color:#fbbf24;
  border:1px solid rgba(251,191,36,.6);
  border-radius:6px;
  padding:3px 8px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  position:relative;
  z-index:3;
  animation:ghHoldPopup 2.6s ease-in-out infinite;
}
/* Small downward-pointing notch on the callout aligned with the B tile. */
.gh-hold-popup::after{
  content:"";
  position:absolute;
  bottom:-4px;
  left:50%;
  margin-left:-4px;
  transform:translateX(-10px);
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid rgba(251,191,36,.6);
}
@keyframes ghHoldPopup{
  0%,35%{opacity:0;transform:translateY(4px);}
  55%,85%{opacity:1;transform:translateY(0);}
  100%{opacity:0;transform:translateY(4px);}
}

/* Got it button disabled state — used until first animation loop ends. */
.gh-gotit:disabled,
.gh-gotit.gh-gotit-waiting{
  opacity:.45;
  cursor:wait;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* End SCORBAL 57V28 OVERRIDES */

/* ===== SCORBAL 57V30 OVERRIDES ===== */

/* Item 116: resume-as-old-player prompt (shown on QR-join with no saved
   name when the room has offline human records). */
.resume-prompt-overlay{
  position:fixed;
  inset:0;
  z-index:780;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(8,10,18,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  padding:24px;
}
.resume-card{
  width:100%;
  max-width:340px;
  background:linear-gradient(180deg,#1a1d2e,#12141f);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:22px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.resume-title{
  font-family:var(--fd,sans-serif);
  font-size:22px;
  font-weight:900;
  color:#fbbf24;
  text-align:center;
}
.resume-sub{
  font-family:var(--fu,sans-serif);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  text-align:center;
  margin-bottom:6px;
}
.resume-pick{
  font-family:var(--fu,sans-serif);
  font-size:17px;
  font-weight:700;
  color:#08121e;
  background:linear-gradient(180deg,#ffe066,#fbbf24);
  border:none;
  border-radius:12px;
  padding:13px 16px;
  cursor:pointer;
}
.resume-pick b{font-weight:900;}
.resume-host-tag{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:rgba(8,18,30,.25);
  border-radius:6px;
  padding:1px 6px;
  margin-left:4px;
}
.resume-new{
  font-family:var(--fu,sans-serif);
  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,.85);
  background:transparent;
  border:1.5px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:11px 16px;
  margin-top:4px;
  cursor:pointer;
}
.resume-new:active,.resume-pick:active{transform:translateY(1px);}

/* End SCORBAL 57V30 OVERRIDES */

/* ===== SCORBAL 57V32 OVERRIDES ===== */

/* Item 121: end-game chip strip must not intercept touch events and
   create phantom second pointers that trigger pinch-zoom on the globe.
   touch-action:pan-x allows horizontal chip scrolling but prevents the
   vertical/pinch interpretation that was causing single-finger zoom.
   Remove -webkit-overflow-scrolling:touch (not needed for short chip row). */
.review-rank-strip,.v22-medal-strip{
  touch-action:pan-x;
  -webkit-overflow-scrolling:auto;
}

/* Item 129: stronger breathing pulse for lobby waiting bars.
   Old waitingPulse57V23 was 0.85→1.0 (barely noticeable). New
   v129LobbyPulse is 0.2→1.0 — clearly noticeable without being
   alarming. Applied to both host and non-host waiting bars. */
@keyframes v129LobbyPulse{
  0%,100%{opacity:.2;}
  50%{opacity:1;}
}
/* Host bar: update to use the stronger pulse */
.v23-waiting-msg-sticky{
  flex:1 1 100%;
  text-align:center;
  padding:14px 8px;
  font-family:var(--fu);
  font-size:16px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fbbf24;
  background:rgba(251,191,36,.08);
  border:2px dashed rgba(251,191,36,.6);
  border-radius:12px;
  animation:v129LobbyPulse 1.6s ease-in-out infinite;
}
/* Non-host waiting bar — new element inserted above the action row */
.v129-waiting-bar{
  width:100%;
  text-align:center;
  padding:13px 8px;
  font-family:var(--fu);
  font-size:15px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fbbf24;
  background:rgba(251,191,36,.08);
  border:2px dashed rgba(251,191,36,.55);
  border-radius:12px;
  margin-bottom:6px;
  animation:v129LobbyPulse 1.6s ease-in-out infinite;
}
/* Top player count bar: bigger, bolder, two-line layout */
.v129-player-count{
  font-family:var(--fd,'Bowlby One SC',sans-serif);
  font-size:clamp(18px,5vw,24px);
  font-weight:900;
  color:#fbbf24;
  display:block;
  letter-spacing:.01em;
}
.v129-player-names{
  font-family:var(--fu,sans-serif);
  font-size:clamp(13px,3.5vw,16px);
  font-weight:600;
  color:rgba(255,255,255,.85);
  display:block;
  margin-top:2px;
}
.v23-players-text{
  flex:1 1 auto;
  font-family:var(--fu);
  font-size:15px;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:flex-start;
}

/* Item 122: block pinch-to-zoom everywhere except the globe. */
   html/body/app: pan-x pan-y allows scrolling but prevents pinch zoom.
   welcome-screen was touch-action:auto which explicitly allowed everything. */
html,body,#app{
  touch-action:pan-x pan-y!important;
}
.welcome-screen,.welcome-screen.scorbal-home{
  touch-action:pan-y!important;
}

/* End SCORBAL 57V32 OVERRIDES */

/* ===== SCORBAL 57V33 OVERRIDES ===== */

/* Item 132: settings screen — compact uniform rows. All setting rows
   (Turn Timer, Player Clock, Rounds, Pre-Populate, Challenges, Challenge
   Points) share the same one-line layout with aligned toggles and inputs.
   Row height reduced. Toggles slimmed. Inputs fixed-width for 3 digits. */

/* All .v132-row setting rows: compact, flex grid, reduced padding */
.setting-row.v132-row{
  padding:8px 14px;
  gap:10px;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  min-height:0;
}
.setting-row.v132-row .label{
  flex:1 1 auto!important;
  min-width:0!important;
  font-size:15px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
/* Narrower toggle: 72px instead of 104px */
.v132-row .timer-toggle{
  min-width:62px!important;
  width:62px!important;
  height:30px!important;
  line-height:28px!important;
  font-size:13px!important;
  padding:0 8px 0 28px!important;
}
.v132-row .timer-toggle::before{
  width:20px!important;
  height:20px!important;
  left:4px!important;
  top:4px!important;
}
.v132-row .timer-toggle.on{
  padding-left:8px!important;
  padding-right:28px!important;
}
.v132-row .timer-toggle.on::before{
  transform:translateX(33px)!important;
}

/* Fixed-width inputs: 60px, right-aligned, 3 digits max */
.v132-row .timer-seconds-input,
.v132-row .timer-controls input[type="number"]{
  width:60px!important;
  min-width:60px!important;
  max-width:60px!important;
  text-align:center!important;
  font-size:15px!important;
  padding:6px 4px!important;
}

/* Timer controls container: tighter gap */

/* Prepop input wrap: inline, no extra chrome */
/* Prepop input same size as other inputs */

/* Override the old base .setting-row input rules that forced min-width:132px */
.v132-row select,
.v132-row input[type="number"]{
  min-width:0!important;
  width:auto!important;
}

/* End SCORBAL 57V33 OVERRIDES */

/* ===== SCORBAL 57V34 OVERRIDES ===== */

/* Item 135: welcome screen Pre-Populate row — vertically centre text
   and slider. The "moves" text node + input had baseline misalignment. */

/* End SCORBAL 57V34 OVERRIDES */

/* ===== SCORBAL 57V36 OVERRIDES ===== */

/* Item 141: Opponent / Difficulty / Play style now use .v132-row to
   match the compact height of Turn Timer / Player Clock / Rounds.
   The native <select> inside those rows needs explicit sizing to slot
   into the same right-hand column the timer inputs use. */
.v132-row select.v132-select{
  width:auto!important;
  min-width:120px!important;
  max-width:160px!important;
  height:30px!important;
  padding:4px 22px 4px 10px!important;
  font-size:14px!important;
  text-align:left!important;
  text-align-last:center!important; /* selected value centred */
  flex-shrink:0!important;
}
.v132-row .label{
  /* keep label snug so the select can sit at the right edge */
  flex:1 1 auto!important;
}

/* Item 142: combined Challenges row.
   One row with: label "Challenges" + Yes/No toggle + numeric points
   input. When the toggle is "No" the points input is hidden (display:
   none) so the row visually collapses to just label + toggle. */
.v132-row.challenges-row .timer-controls{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-shrink:0!important;
}
.challenges-row .cp-input-wrap{
  display:flex;
  align-items:center;
  gap:0;
}
.challenges-row .cp-input-wrap.hidden{
  display:none;
}

/* Item 141 refinement: ensure all v132-row inputs and selects share a
   common right-edge alignment by giving timer-controls a consistent
   right margin treatment. */
.v132-row .timer-controls{
  gap:8px!important;
  flex-shrink:0!important;
  justify-content:flex-end!important;
}

/* End SCORBAL 57V36 OVERRIDES */

/* ===== SCORBAL 57V38 LAYOUT REFINEMENTS =====
   Three vertical-spacing tweaks requested for the play + endgame screens.
   These sit last in the stylesheet so they win the cascade cleanly. */

/* (1) PLAYING SCREEN player chips: halve the vertical gap between the chip
   strip and the top banner bar (measured ~26px -> ~13px). The chips no
   longer sit so far down the screen. (was --scorbal-turn-top:56px) */
:root{--scorbal-turn-top:50px!important;}

/* (2) ENDGAME (done-game) player chips: halve the gap between the chips and
   the top of the screen (~66px -> ~33px) so the rank chips sit as high as
   possible. The headroom was split across two reservations for the 1st/2nd/
   3rd labels (strip padding-top 34px + chip margin-top 32px); halve both so
   the labels still clear the chip without clipping off the top. */
.v22-medal-strip.v118-done{padding-top:17px;}
.review-rank-chip.v107-has-rank{margin-top:16px;}

/* (3) BOTTOM controls (tile rack + Shuffle/Clear/Check/Swap/Submit): halve
   the gap below the buttons down to the browser nav bar so the whole block
   sits lower. (was calc(8px + env(safe-area-inset-bottom))) */

/* End SCORBAL 57V38 LAYOUT REFINEMENTS */

/* ===== SCORBAL 57V44 ENHANCEMENTS (CSS) ===== */
/* ENH-7: turn indicator clear of the top status bar. The game screen is
   full-viewport (viewport-fit=cover), so on notched iPhones the chip's outer
   pulsing glow (chipGlowPulse box-shadow, ~26px) extended up behind the iOS
   status bar. Make the slot top safe-area-aware: on devices where the status
   bar intrudes (env>38px) the chips drop just enough for the ring to clear;
   on devices with no/short status bar nothing changes (still 50px). */
:root{--scorbal-turn-top:max(50px,calc(env(safe-area-inset-top,0px) + 12px))!important;}
.turn-score-slot{
  position:absolute;
  z-index:70;
  margin:0;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;top:var(--scorbal-turn-top);
  left:8px;
  right:8px;
  background:transparent;
  pointer-events:none;flex-direction:column;gap:6px;
  padding-top:8px;}

/* ENH-2: halve the gap below the action buttons (again) so the rack+buttons
   sit closer to the Safari bottom toolbar. (was calc(4px + inset*.5)) */
.rack-actions{
  display:grid;
  gap:5px;background:transparent;padding:6px 8px calc(2px + env(safe-area-inset-bottom)*.25);
  min-height:46px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;}
.rack-wrap{background:transparent;border:2px solid var(--border);border-radius:var(--radius);padding:6px 10px 4px;display:flex;flex-direction:column;
  gap:2px;margin:0 8px 3px;
  max-width:none;
  align-self:center;
  width:calc(100% - 4px);box-shadow:none;border-color:transparent;min-height:136px;
  contain:layout;
  overflow:visible;
  margin-left:2px;
  margin-right:2px;
  padding-left:0;
  padding-right:0;margin-bottom:1px;}

/* ENH-6: compact host menu so it fits one iPhone screen without scrolling.
   The QR code button/thumb is deliberately untouched (must stay scannable). */
/* 57V46 (H): host menu rows now use the SAME v132 setting-row look as the
   setup screens — label left, identically sized toggle/input/button boxes
   right, all vertically aligned. Section titles match the label typography
   instead of the old tiny uppercase caption. */
.host-menu-panel .setting-row.v132-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding:2px 0}
.host-menu-panel .setting-row.v132-row .label{flex:1 1 auto;font-size:14px;font-weight:600}
.host-menu-panel .timer-controls{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.host-menu-panel .timer-controls .timer-toggle{min-width:52px;min-height:30px!important;padding:4px 0!important;font-size:13px!important}
.host-menu-panel .timer-controls .timer-seconds-input{width:56px;min-height:30px!important;padding:4px 6px!important;font-size:14px!important;text-align:center}
.host-menu-panel .timer-controls button:not(.timer-toggle){min-width:58px;min-height:30px!important;padding:4px 8px!important;font-size:13px!important}
.host-menu-panel .v132-select{min-height:30px!important;padding:4px 8px!important;font-size:14px!important;min-width:120px}
.host-section-title{font-family:var(--fu);font-weight:600;font-size:13px;color:var(--text-2);letter-spacing:0;text-transform:none;line-height:1.1;margin:0 0 6px;padding-bottom:3px}
.host-menu-shell{width:100%;height:100dvh;max-width:500px;display:flex;flex-direction:column;min-height:0;padding:calc(env(safe-area-inset-top) + 20px) 12px calc(env(safe-area-inset-bottom) + 10px);box-sizing:border-box;gap:6px;overflow:hidden;max-height:100dvh;padding-bottom:calc(8px + env(safe-area-inset-bottom));padding-top:calc(env(safe-area-inset-top) + 10px)}
.host-menu-shell .ov-title{font-size:20px;margin:0 0 2px}
.host-menu-panel{gap:7px}
.host-menu-panel>*{margin:0}
.host-player-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 0;min-height:30px}
.host-player-row .ghost.sm{min-height:28px!important;padding:3px 10px!important;font-size:12px!important}
.host-pause-reset-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.host-pause-reset-row button{min-height:34px!important;padding:6px 8px!important;font-size:13px!important}
.host-share-rightcol{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0}
.host-share-rightcol .host-code-btn{flex:1 1 auto}
.host-share-name-btn{min-height:30px!important;padding:4px 8px!important;font-size:13px!important;width:100%}
.host-menu-footer{position:sticky;bottom:0;z-index:2;display:flex;grid-template-columns:1fr 1fr;gap:6px;width:100%;background:linear-gradient(180deg,rgba(15,15,26,0),rgba(15,15,26,.96) 32%,rgba(15,15,26,.96));padding-top:6px;flex-direction:column;margin-top:auto;padding-bottom:env(safe-area-inset-bottom)}
.host-menu-footer button{min-height:36px!important;font-size:13px!important;padding:6px 8px!important}
.host-menu-footer .host-menu-doc-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.host-menu-footer .host-menu-doc-tiles button{min-height:32px!important;font-size:12px!important}
.host-menu-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
/* 57V48: intent-based landing + dedicated join screen */
.scorbal-pc-row{display:flex;gap:0;width:100%;grid-column:1/-1}
.join-entry-body{align-items:stretch}
.join-entry-hint{color:var(--text-2);font-size:14px;line-height:1.4}
.join-code-input{width:100%;box-sizing:border-box;font-family:var(--fcode);font-size:34px;font-weight:800;text-align:center;letter-spacing:.22em;text-transform:uppercase;padding:16px 10px;border-radius:14px;border:2px solid var(--border);background:var(--input-bg);color:var(--accent);outline:none}
.join-code-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(251,191,36,.18)}
.join-entry-actions{display:flex;gap:10px}
.join-entry-actions .primary{flex:1 1 auto;min-height:50px;font-size:18px;font-weight:900}
.join-entry-actions .ghost{flex:0 0 auto;min-width:90px}

/* 57V47: host lobby settings as a full-screen setup-style screen */
.lobby-menu-overlay.lobby-menu-full{padding:0;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;align-items:stretch;gap:0}
.lobby-menu-full .lobby-host-settings{width:100%;height:100%;max-width:none;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.lobby-menu-full .setup-body{flex:1 1 auto;min-height:0;overflow-y:auto}
.lobby-menu-full .lobby-menu-btn{width:100%}

/* 57V46 (G): lobby fly-in cinematic overlay */
.lobby-flyin-overlay{position:fixed;inset:0;z-index:940;background:#02030c;opacity:1;transition:opacity .4s ease}
.lobby-flyin-overlay.lobby-flyin-fade{opacity:0;pointer-events:none}
.lobby-flyin-overlay canvas{display:block;width:100vw;height:100vh}
/* ===== End SCORBAL 57V44 ENHANCEMENTS (CSS) ===== */

/* ===== SCORBAL 57V39: centred "enter your name" prompt ===== */
.name-prompt-overlay{position:fixed;inset:0;z-index:990;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.name-prompt-title{font-family:var(--fd);font-size:clamp(24px,7vw,32px);font-weight:950;letter-spacing:.01em;color:#ffe2a2;margin-bottom:8px}
.name-prompt-msg{font-size:clamp(15px,4vw,18px);color:#cbd5e1;margin-bottom:18px;line-height:1.35}
.name-prompt-card button{min-height:48px;min-width:130px;border-radius:14px;font-size:18px;font-weight:900}
.name-prompt-card{width:min(420px,calc(100vw - 40px));background:var(--card-bg);border:1px solid var(--card-line);border-radius:22px;box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 34px rgba(251,191,36,.22);padding:24px 20px;text-align:center;animation:winPop .35s cubic-bezier(.34,1.56,.64,1);position:relative}
.name-prompt-close{position:absolute;top:8px;right:8px;min-width:40px!important;min-height:40px!important;width:40px;height:40px;padding:0;border-radius:50%!important;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#e2e8f0;font-size:24px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center}
.name-prompt-input{width:100%;box-sizing:border-box;font-size:18px;padding:12px 14px;margin-bottom:16px;border-radius:12px;border:1.5px solid rgba(251,191,36,.45);background:rgba(255,255,255,.06);color:#fff;text-align:center;outline:none}
.name-prompt-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(251,191,36,.18)}
@keyframes namePromptShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.name-prompt-shake{animation:namePromptShake .35s ease;border-color:#ef4444}

/* ===== Live globe hero (home) and setup globe band ===== */
.scorbal-hero-live{background-color:#02040a!important;overflow:hidden}
.home-globe-stage{position:absolute;inset:0;z-index:0;width:100%;height:100%;touch-action:none}
.setup-globe-band{position:relative;height:150px;flex:0 0 150px;margin:-8px -14px 0;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,rgba(60,110,255,.16),rgba(2,4,10,0) 60%)}
.setup-globe-stage{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.setup-globe-band::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,26,0) 55%,rgba(15,15,26,.85) 100%);pointer-events:none}
/* ===== Tactile controls (2026 refresh) ===== */
button:disabled,button[disabled]{box-shadow:none;transform:none;opacity:.55}
button.primary:active{box-shadow:0 1px 0 var(--accent-edge),inset 0 1px 0 rgba(255,255,255,.3)}
.rack-actions button:active{transform:translateY(2px);box-shadow:0 1px 0 #0b0c18}
.rack-actions button.primary:active{box-shadow:0 1px 0 var(--accent-edge)}
.rack-tile.sel{animation:tileLift .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes tileLift{0%{transform:translateY(0) rotate(0)}60%{transform:translateY(-12px) rotate(-3deg)}100%{transform:translateY(-9px) rotate(-2deg)}}
.setting-row select,.setting-row input{border-radius:10px}
.hdr-btn:active,.gear-btn:active{transform:translateY(1px)}

/* ===== Wide and narrow screens ===== */
/* iPad: keep rack tiles square and no bigger than 64px, and stop the rack/actions and home buttons stretching edge to edge */
.rack-wrap .rack .rack-tile{height:auto;max-width:64px}
.rack-wrap .rack{grid-template-columns:repeat(7,minmax(0,64px));justify-content:center}
.rack-wrap{max-width:640px}
.scorbal-actions{max-width:640px;margin-left:auto;margin-right:auto;width:100%}
/* 320px phones: the header has no room for the room-code chip; it is still in the host menu */
@media (max-width:339px){.hdr-code-chip{display:none}}

/* FIX-26: in-app confirm dialog (shares the name-prompt modal styling) */
.name-prompt-actions{display:flex;gap:10px;margin-top:14px}
.name-prompt-actions button{flex:1;min-height:44px}

/* FIX-34: screen-reader-only text */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.scores-strip.in-turn-slot>:first-child{margin-left:auto}
.scores-strip.in-turn-slot>:last-child{margin-right:auto}
.scores-strip.in-turn-slot.is-scrollable{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}

/* FIX-56: How to Play / Rules as text documents (buildGuideDoc in 13-board-ui.js). */
.guide-doc-overlay{background:radial-gradient(120% 60% at 50% 0,#0f1d3d 0,#060a16 60%,#04060d 100%)}
.guide-doc{--gd-scale:1;flex:1 1 auto;align-self:stretch;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 64px) 16px calc(env(safe-area-inset-bottom,0px) + 28px);font-family:var(--fs);font-size:calc(17px * var(--gd-scale));line-height:1.45;color:#e8eefb;text-align:left}
.guide-doc>*{max-width:560px;margin-left:auto;margin-right:auto}
.gd-head{text-align:center;margin-bottom:18px}
.gd-title{margin:0;font-family:var(--fu);font-size:calc(38px * var(--gd-scale));font-weight:900;letter-spacing:.02em;line-height:1.05;color:#fff;text-shadow:0 0 18px rgba(120,170,255,.45)}
.gd-sub{margin-top:6px;font-size:1.15em;font-weight:800;color:#fbbf24}
.gd-lead{margin-top:6px;color:#c9d5ee}
.gd-card{background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);padding:14px 16px 12px;margin-bottom:12px;box-shadow:var(--card-shadow)}
.gd-h{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--fu);font-size:1.12em;font-weight:800;letter-spacing:0;text-transform:none;color:#fff}
.gd-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.75em;height:1.75em;border-radius:9px;background:rgba(251,191,36,.14);border:1.5px solid rgba(251,191,36,.55);color:#fbbf24;font-size:.9em}
.gd-list{margin:0;padding:0;list-style:none}
.install-landing .install-close{z-index:860}
.gd-intro{margin:0 0 10px;color:#dbe5f5;font-weight:500}
.gd-rows{margin:2px 0 8px;display:flex;flex-direction:column;gap:12px}
.gd-row{display:block}
.gd-row-k{margin:0 0 4px;display:inline-block;padding:2px 8px;border-radius:6px;background:rgba(251,191,36,.14);border:1.5px solid rgba(251,191,36,.6);color:#fde68a;font-family:var(--fu);font-weight:900;font-size:.88em;white-space:nowrap}
.gd-row-v{margin:0;color:#e6edf9}
.gd-list li{position:relative;padding-left:1.1em;margin:5px 0}
.gd-list li::before{content:'';position:absolute;left:.1em;top:.6em;width:.45em;height:.45em;border-radius:50%;background:#fbbf24}
.gd-tiles{display:flex;gap:4px;margin:4px 0 10px}
.gd-tile{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:6px;background:linear-gradient(180deg,#ffd75e,#f2b01e);color:#1a1200;font-family:var(--fu);font-weight:900;box-shadow:0 2px 0 #b07a08}
.gd-bonus{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:2px 0 10px}
.gd-bonus-row{display:flex;align-items:center;gap:8px;font-weight:600}
.gd-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:3px 6px;border-radius:6px;font-family:var(--fu);font-weight:900;font-size:.9em;border:1.5px solid}
.gd-dl{color:#67e8f9;border-color:#22d3ee;background:rgba(34,211,238,.16)}
.gd-tl{color:#86efac;border-color:#4ade80;background:rgba(74,222,128,.15)}
.gd-dw{color:#fdba74;border-color:#fb923c;background:rgba(251,146,60,.16)}
.gd-tw{color:#fde047;border-color:#facc15;background:rgba(250,204,21,.16)}
.gd-def{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18)}
.gd-def-word{font-family:var(--fu);font-weight:900;color:#86efac;font-size:1.1em}
.gd-def-pos{color:#86efac;font-style:italic;font-size:.9em}
.gd-def-text{color:#dbe5f5;font-size:.95em}
.gd-tip{text-align:center;padding:12px 16px;margin-bottom:16px;border-radius:14px;border:1px solid rgba(96,150,255,.38);background:rgba(18,30,62,.72)}
.gd-tip b{color:#fbbf24}
.gd-done{display:block;width:100%;min-height:48px;margin-top:6px}
.guide-size-float{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:calc(env(safe-area-inset-left,0px) + 14px);z-index:850;background:rgba(0,0,0,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.28);color:#fff;font-family:var(--fu);font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;letter-spacing:.02em;white-space:pre}

/* FIX-58: the help row is secondary - quieter than the three main actions, same side margins, even spacing. */
.home-fixed-footer{gap:10px!important}
.home-fixed-footer button{min-height:40px;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.16)!important;color:#c9d2e3!important;font-weight:600!important;box-shadow:none!important;border-radius:999px!important}
.guide-doc-overlay::before{content:'';position:fixed;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 62px);background:linear-gradient(180deg,rgba(6,10,22,.97) 0,rgba(6,10,22,.9) 70%,rgba(6,10,22,0) 100%);z-index:849;pointer-events:none}

/* FIX-60: "?" help beside each setting label, and its popup. */
.setting-row>.label.has-help{display:flex;align-items:center;gap:8px}
.setting-help{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;padding:0!important;border-radius:50%!important;border:1.5px solid rgba(251,191,36,.75)!important;background:rgba(251,191,36,.14)!important;color:#fcd34d!important;font-size:14px!important;font-weight:900!important;line-height:1;box-shadow:none!important;cursor:pointer;position:relative}
.setting-help::after{content:'';position:absolute;inset:-10px}
.help-pop-overlay{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,6,14,.62);padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 16px);box-sizing:border-box}
.help-pop-card{width:100%;max-width:460px;background:linear-gradient(180deg,#16244a,#0d1630);border:1px solid rgba(96,150,255,.45);border-radius:18px;padding:16px 18px 14px;box-shadow:0 18px 50px rgba(0,0,0,.55);color:#e8eefb;font-family:var(--fs);text-align:left}
.help-pop-kicker{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fbbf24}
.help-pop-title{font-family:var(--fu);font-size:20px;font-weight:900;color:#fff;margin:2px 0 6px}
.help-pop-text{margin:6px 0;font-size:16px;line-height:1.45;color:#dbe5f5}
.help-pop-ok{display:block;width:100%;min-height:46px;margin-top:10px}

/* FIX-60: long setting labels wrap to two lines instead of being cut off by the "?" */
.setting-row>.label.has-help{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.12!important;min-width:0}
/* FIX-63: lobby sharing card - how to join, and tap hints on the code and QR */
.v22-share-help{font-size:13px;line-height:1.3;color:var(--card-sub);margin:0;text-align:left;font-weight:600}
.share-tap-hint{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-top:6px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:none;line-height:1}
.v21-code-stack .share-tap-hint{color:rgba(26,20,16,.72)}
.host-qr-btn{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
.qr-tap-hint{color:#1a1410;background:#fbbf24;border-radius:999px;padding:4px 9px;margin-top:6px;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.lobby-share-section.v22-share-frame-host,.v22-share-frame-host .v22-share-frame-inner,.v22-share-frame-host .v22-share-split,.v22-share-frame-host .host-qr-btn{height:auto!important;max-height:none!important}
.v22-share-frame-host .v22-share-split{align-items:stretch!important}
.v22-share-frame-host .host-qr-btn{padding:8px!important}
.qr-tap-hint{white-space:nowrap;font-size:11.5px}

/* FIX-64: stacked home cards (Host / Join / Play the Computer). */
.scorbal-buttons .home-card{display:flex!important;align-items:center;gap:12px;width:100%;min-height:58px!important;padding:8px 14px!important;text-align:left;background:linear-gradient(180deg,rgba(34,46,86,.96),rgba(20,28,56,.96))!important;border:1px solid rgba(140,170,255,.28)!important;border-radius:16px!important;color:#fff!important;box-shadow:0 4px 0 rgba(0,0,0,.45)!important;text-shadow:none!important;font-weight:700;cursor:pointer;transition:transform .1s,box-shadow .1s}
.scorbal-buttons .home-card:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45)!important}
.scorbal-buttons .home-card:disabled{opacity:.7}
/* 58.9 (FIX-80): option B - the home card pieces used on the other screens */
.ui-badge{position:relative;flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid}
.ui-ico{display:inline-flex;line-height:0}.ui-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ui-badge-n{font-size:17px;font-weight:900;font-family:var(--fu)}
.ui-gold{color:#fbbf24;background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.55)}
.ui-cyan{color:#22d3ee;background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.55)}
.ui-purple{color:#a78bfa;background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.55)}
.ui-silver{color:#cbd5e1;background:rgba(203,213,225,.12);border-color:rgba(203,213,225,.5)}
.ui-bronze{color:#d99155;background:rgba(217,145,85,.14);border-color:rgba(217,145,85,.55)}
.ui-rank1{color:#15110a;background:rgba(21,17,10,.12);border-color:rgba(21,17,10,.35)}
.setting-row.v132-row{min-height:62px}
.setting-row.v132-row>.label.set-card-label{display:flex!important;align-items:center;gap:10px;white-space:normal!important;overflow:visible!important}
.set-card-text,.card-head-text{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.15}
.set-card-title{font-size:16px;font-weight:800;color:#fff;text-transform:none;letter-spacing:0}
.set-card-sub,.card-head-sub{font-size:12.5px;font-weight:600;color:var(--card-sub);text-transform:none;letter-spacing:0}
.set-card-title .setting-help{display:inline-flex;align-items:center;justify-content:center;vertical-align:2px;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;padding:0;border-radius:50%;font-size:11px;font-weight:800;margin-left:6px;background:rgba(140,170,255,.12);border:1.5px solid rgba(140,170,255,.5);color:#c9d4f2}
.card-head{display:flex;align-items:center;gap:10px;margin:2px 2px 10px}
@media (max-width:370px){.set-card-sub{display:none}.setting-row.v132-row{min-height:54px;padding:6px 10px}.setting-row.v132-row>.label.set-card-label{gap:8px}.set-card-label .ui-badge{flex-basis:32px;width:32px;height:32px;border-radius:10px}.set-card-label .ui-ico svg{width:18px;height:18px}.set-card-title{font-size:15px}}
.card-head-title{font-size:18px;font-weight:800;color:#fff}
.v21-share-frame-inner>.card-head{flex:0 0 auto;margin:0 2px 2px}
.setup-body>.label,.team-top .label,.assign-players-label{text-transform:none!important;letter-spacing:0!important;font-size:15px!important;font-weight:800!important;color:var(--card-sub)!important}
.player-badge .player-dot{position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border:2px solid #141c38;margin:0}
.player-badge.offline{filter:grayscale(1);opacity:.6}
.name-prompt-badge{display:flex;justify-content:center;margin:0 0 10px}
.results-row .ui-badge{flex:0 0 38px}
.rack-ico-btn{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.rack-ico svg{width:17px;height:17px}
.home-card-badge{flex:0 0 40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1.5px solid}
.home-card-host .home-card-badge{color:#fbbf24;background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.55)}
.home-card-join .home-card-badge{color:#22d3ee;background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.55)}
.home-card-pc .home-card-badge{color:#a78bfa;background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.55)}
.home-ico{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.home-card-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.15}
.home-card-title{font-size:clamp(16px,4.6vw,18px);font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-card-sub{font-size:13px;font-weight:600;color:#aab6d3}
.home-card-chev{flex:0 0 auto;color:#7f8db3}.home-card-chev .home-ico{width:20px;height:20px}
.scorbal-pc-row{display:flex;gap:0;width:100%;grid-column:1/-1}
.scorbal-pc-row .home-card{flex:1 1 auto;min-width:0;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right-width:0!important}
.scorbal-pc-row .scorbal-pc-gear{flex:0 0 60px!important;width:60px!important;min-width:60px;min-height:58px!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(34,46,86,.96),rgba(20,28,56,.96))!important;border:1px solid rgba(140,170,255,.28)!important;border-left:1px solid rgba(140,170,255,.18)!important;border-radius:0 16px 16px 0!important;color:#c4b5fd!important;box-shadow:0 4px 0 rgba(0,0,0,.45)!important}
.scorbal-pc-row .scorbal-pc-gear:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.45)!important}
.scorbal-pc-gear svg{display:block}
.scorbal-actions{padding-bottom:calc(80px + env(safe-area-inset-bottom))!important}
.home-fixed-footer .home-help-btn{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;font-size:12px!important;border-radius:14px!important}
.home-help-ico .home-ico{width:20px;height:20px;color:#fcd34d}

/* ===== 58.8 (FIX-68): end-of-game results screen ===== */
.results-screen{background:radial-gradient(120% 70% at 50% 0%,#1d1d38 0%,var(--bg) 62%);padding:0}
.results-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top,0px) + 28px) 18px 18px;display:flex;flex-direction:column;align-items:center}
.results-head{width:100%;max-width:460px;text-align:center;margin-bottom:20px}
.results-title{font-family:var(--fd);font-weight:800;font-size:clamp(34px,11vw,52px);line-height:1.02;color:#fff;letter-spacing:.01em;overflow-wrap:anywhere}
.results-sub{margin-top:8px;color:var(--text-3);font-size:15px;font-weight:600}
.results-list{list-style:none;width:100%;max-width:460px;display:flex;flex-direction:column;gap:8px}
.results-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:12px 14px;color:var(--text)}
.results-rank{font-family:var(--fd);font-weight:800;font-size:22px;color:var(--text-3)}
.results-rank sup{font-size:.5em;margin-left:1px}
.results-name{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;min-width:0;font-weight:800;font-size:18px;line-height:1.15}
.results-name-text{min-width:0;overflow-wrap:anywhere}
.results-best{flex-basis:100%;font-size:14px;font-weight:600;opacity:.82;margin-top:3px}
.results-best-word{font-family:var(--fcode);font-weight:800;letter-spacing:.04em}
.results-best-pts{white-space:nowrap}
.results-row.first .results-best{font-size:15px;opacity:.9}
.results-you{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--text-3);border:1px solid var(--border);border-radius:999px;padding:1px 7px}
.results-score{font-family:var(--fcode);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.results-row.second .results-rank{color:#cbd5e1}.results-row.third .results-rank{color:#d99155}
.results-row.first{background:linear-gradient(180deg,#ffe07a 0%,#f2c94c 100%);border:2px solid #ffe07a;color:#15110a;padding:18px 16px;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 26px rgba(251,191,36,.28)}
.results-row.first .results-rank{color:#15110a;font-size:28px}
.results-row.first .results-name{font-size:22px}
.results-row.first .results-score{font-size:30px}
.results-row.first .results-you{color:#15110a;border-color:rgba(21,17,10,.4)}
.results-foot{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 18px calc(env(safe-area-inset-bottom,0px) + 16px);background:linear-gradient(to top,var(--bg) 70%,rgba(15,15,26,0))}
.results-auto{color:var(--text-2);font-size:14px;font-weight:700}
.results-auto-n{font-family:var(--fcode);color:var(--accent);font-variant-numeric:tabular-nums}
.results-see{width:100%;max-width:460px}
.results-actions{display:flex;gap:8px;width:100%;max-width:460px}
.results-actions button{flex:1 1 0;min-width:0;padding:12px 8px;font-size:15px}

/* 59.0 (Item 15): Trainer. The tip strip floats just above the rack so the rack never moves;
   home-card surface with the purple extras tile (option B). */
.trainer-strip{position:absolute;left:0;right:0;bottom:calc(100% + 6px);display:flex;align-items:center;gap:10px;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:8px 10px;color:var(--text);cursor:pointer;z-index:2}
.trainer-strip.review{cursor:default;border-color:rgba(167,139,250,.55)}
.trainer-strip .ui-badge{flex:0 0 34px;width:34px;height:34px;border-radius:10px}
.trainer-strip .ui-ico svg{width:19px;height:19px}
.trainer-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.trainer-kicker{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#a78bfa}
.trainer-text{font-size:14px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
/* 59.1: back and forward through the tips, and Show me / Place it / Hide */
.trainer-nav{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:4px}
.trainer-prev,.trainer-next{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;min-height:40px;padding:0;border-radius:10px;background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.55);color:#fff;font-weight:800;box-shadow:none}
.trainer-nav .trainer-count{min-width:30px;text-align:center}
.trainer-acts{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.trainer-show,.trainer-hide{min-height:30px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:800;box-shadow:none;line-height:1.1}
.trainer-show{background:rgba(56,189,248,.16);border:1px solid rgba(56,189,248,.75);color:#e0f7ff}
.trainer-show.primary-ish{background:linear-gradient(180deg,#7dd3fc,#38bdf8);color:#062033;border-color:#0ea5e9}
.trainer-hide{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--text-2)}
.trainer-strip.showing{border-color:rgba(56,189,248,.8)}
.word-score-pop.trainer-hint-pop{z-index:60;pointer-events:none;display:flex;align-items:baseline;gap:8px;background:rgba(8,47,73,.86);border-color:rgba(56,189,248,.85);font-size:clamp(15px,4.2vw,19px);box-shadow:0 0 18px rgba(56,189,248,.45),0 8px 24px rgba(0,0,0,.38)}
.trainer-hint-pop span{font-family:var(--fu);font-weight:900;color:#7dd3fc}
.trainer-count{font-size:12px;opacity:.85;font-variant-numeric:tabular-nums}
.trainer-arrow{font-size:20px;line-height:1}
.word-preview .trainer-target{margin-left:10px;font-family:var(--fu);font-size:14px;font-weight:800;color:#a78bfa;vertical-align:middle}
.moves-missed-title{margin-top:14px;opacity:.9;font-weight:800;color:#a78bfa}
.moves-row.missed{background:rgba(167,139,250,.10);border:1px solid rgba(167,139,250,.35)}
.moves-row.missed .moves-arrow{opacity:.7}
.results-missed{flex-basis:100%;font-size:13px;font-weight:700;color:#a78bfa;margin-top:2px}
.results-row.first .results-missed{color:#4c1d95}
@media (max-width:370px){.trainer-text{font-size:13px}.trainer-strip{gap:8px;padding:7px 8px}}

/* 59.0 (Items 16-17): remote games. The open-seat notice sits under the header; the header clock
   shows days and hours, and the other player's clock is dimmer. */
.remote-seat-banner{position:absolute;left:0;right:0;bottom:calc(100% + 6px);display:flex;align-items:center;gap:10px;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:8px 10px;color:var(--text);z-index:2}
.remote-seat-banner .ui-badge{flex:0 0 34px;width:34px;height:34px;border-radius:10px}
.remote-seat-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.25}
.remote-seat-text b{font-size:14px}
.remote-seat-text span{color:var(--card-sub)}
.remote-seat-send{flex:0 0 auto;min-height:40px;padding:0 14px}
.hdr-timer.remote-clock{font-size:clamp(15px,4.6vw,20px);white-space:nowrap}
.hdr-timer.remote-clock.theirs{opacity:.6}
.remote-rejoin-btn{width:100%}
/* 59.0 (Items 16-17): your remote games on the home screen, and the nudge after your go */
.remote-home{display:flex;flex-direction:column;gap:6px;width:100%}
.remote-home-title{font-family:var(--fu);font-weight:800;font-size:14px;color:var(--card-sub);margin:0 2px}
.remote-home-empty{font-size:13px;color:var(--card-sub);padding:4px 2px}
.remote-home-row{display:flex;align-items:center;gap:10px;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:8px 10px;color:var(--text);cursor:pointer;min-height:52px}
.remote-home-row.remote-yours{border-color:rgba(251,191,36,.7);box-shadow:var(--card-shadow),0 0 14px rgba(251,191,36,.25)}
.remote-home-row .ui-badge{flex:0 0 34px;width:34px;height:34px;border-radius:10px}
.remote-home-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}
.remote-home-name{font-size:15px;overflow-wrap:anywhere}
.remote-home-sub{font-size:12px;color:var(--card-sub);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.remote-home-remove,.remote-nudge-close{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--card-line);color:var(--card-sub);font-size:20px;line-height:1;padding:0}
.remote-home-more{align-self:center}
.remote-home-btn{width:100%}
.scorbal-home.has-remote-games .scorbal-hero{flex:0 1 auto!important;min-height:clamp(170px,32dvh,440px)!important}
/* 59.0 (Items 20-22): the Globe Challenge. Its card takes the game header's place; once you've
   entered, your entry takes the rack's place. */
.puzzle-banner{display:flex;align-items:center;gap:10px;margin:calc(env(safe-area-inset-top) + 6px) 8px 0;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:8px 10px;color:var(--text);position:relative;z-index:36}
.puzzle-banner .ui-badge{flex:0 0 34px;width:34px;height:34px;border-radius:10px}
.puzzle-banner-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.25;color:var(--card-sub)}
.puzzle-banner-text b{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#a78bfa}
.puzzle-when{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.puzzle-share{flex:0 0 auto;min-height:38px}
.puzzle-close{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--card-line);color:var(--card-sub);font-size:20px;line-height:1;padding:0}
.puzzle-entry-card{position:relative;z-index:36;margin:0 8px calc(env(safe-area-inset-bottom) + 10px);background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:12px 14px;color:var(--text);display:flex;flex-direction:column;gap:6px}
.puzzle-entry-kicker{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#a78bfa}
.puzzle-entry-word{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.puzzle-entry-word b{font-family:var(--fcode);font-size:26px;letter-spacing:.06em;overflow-wrap:anywhere}
.puzzle-entry-word span{font-weight:800;font-size:18px;color:var(--accent);white-space:nowrap}
.puzzle-entry-note{margin:0;font-size:14px;color:var(--card-sub);line-height:1.35}
.puzzle-entry-actions{display:flex;gap:8px}.puzzle-entry-actions button{flex:1}
.puzzle-setup-intro{margin:0 2px;font-size:14px;line-height:1.4;color:var(--card-sub)}
@media (max-width:370px){.puzzle-banner-text{font-size:11px}.puzzle-share{padding:0 8px}}
/* the home buttons' full-width sizing must not reach the list's small round × and Show all */
.scorbal-home .scorbal-buttons .remote-home .remote-home-remove{width:36px!important;min-width:36px!important;min-height:36px!important;height:36px!important;padding:0!important;font-size:20px!important;flex:0 0 36px}
.scorbal-home .scorbal-buttons .remote-home .remote-home-more{width:auto!important;min-height:36px!important;padding:6px 14px!important;font-size:14px!important}

/* 59.1: the other player's Turn Timer - grey, smaller, their name above, never red */
.game-header .hdr-timer.theirs-clock{color:var(--text-4);font-size:clamp(18px,5.4vw,26px);opacity:.9;animation:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.game-header .hdr-timer.theirs-clock::before{content:attr(data-who);font-family:var(--fu);font-size:9px;font-weight:800;letter-spacing:.08em;line-height:1;opacity:.9}

/* 59.1: tap feedback. .is-pressed is set on pointerdown (and held 180 ms) so every tap visibly
   lands; `scale` composes with any transform a control already has. .is-busy shows a spinner in
   place of the label while the tap's action is still working, and blocks a second tap. */
button,[role="button"],.hdr-btn,.home-card,.remote-home-row{transition:scale .1s ease-out,filter .1s ease-out}
.is-pressed{scale:.95;filter:brightness(1.22) saturate(1.1)}
.is-busy{pointer-events:none;cursor:progress}
html body .is-busy.is-busy{color:transparent!important;text-shadow:none!important}
.is-busy.busy-rel{position:relative}
.is-busy>*{visibility:hidden}
.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;animation:scorbalBusySpin .7s linear infinite;visibility:visible}
.primary.is-busy::after{border-color:rgba(0,0,0,.22);border-top-color:#111}
@keyframes scorbalBusySpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-busy::after{animation-duration:1.6s}}

/* 59.1: end-of-game board - the label beside the lit best move */
.word-score-pop.review-best-pop{z-index:60;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 12px 7px;background:rgba(20,16,6,.86);border:1.5px solid rgba(251,191,36,.9);box-shadow:0 0 18px rgba(251,191,36,.35),0 8px 24px rgba(0,0,0,.4);font-size:clamp(15px,4.2vw,19px)}
.review-best-pop .rbp-kicker{font-family:var(--fu);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fbbf24;white-space:nowrap}
.review-best-pop .rbp-row{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.review-best-pop .rbp-pts{font-family:var(--fu);font-weight:900;color:#fde68a}