/* Shared generated gallery backdrop; opaque artwork mats keep the clues legible. */
#page{background:linear-gradient(#07122030,#07122018 55%,#07122055),url('/watch/assets/night-gallery-v1.png') center/cover no-repeat;}
#page>header{padding:12px 14px;margin-bottom:10px;border:1px solid #ffffff28;border-radius:14px;background:#102034b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#page #hud{background:#102034a6;border-color:#ffffff28;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#page #boardWrap{background:#0d1a2b80;border:1px solid #ffffff24;border-radius:14px;box-shadow:0 12px 28px #0002;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
#colWords{--card-surface:#172c43c9;--card-good-bg:#17433ed9;--card-mismatch-bg:#512d3ee6;}
#page .card{box-shadow:0 3px 10px #0003;}
#colWords .card{border-color:#ffffff24;}
#colWords .card.selected{border-color:var(--accent);}
#colWords .card.matched{border-color:var(--good);}
#colWords .card.mismatch{border-color:var(--mismatch);}
.connect-line{stroke:#a9f5e7;stroke-width:2.5;opacity:1;filter:drop-shadow(0 1px 3px #071923);}
#arrowHead path{fill:#a9f5e7;}
#page .round-progress{padding:6px 10px;border-radius:8px;background:#102034a6;color:#e1edf3;}
#page #playHint{padding:8px 10px;margin-top:8px;border:1px solid #ffffff20;border-radius:10px;background:#102034b3;color:#dce7f0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#switcherBtn{background:#ffffff0d;border-color:#ffffff28;}
#switcherPanel{background:#152538ed;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
@media(max-height:620px){#page>header{padding:8px 10px;margin-bottom:7px;}#page #playHint{padding:5px 8px;}#page .round-progress{padding:4px 8px;}}

/* Play scoreboard glass and palette, shared across the match controls. */
html,body{overflow-x:hidden;overflow-y:auto;}
#page>header,#page #hud{background:linear-gradient(120deg,#0a303bcc,#173d3c99);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-color:#dce6c344;box-shadow:inset 0 1px #ffffff22,0 8px 24px #001e2944;}
#page>header{position:relative;z-index:30;}
#page h1{color:#e4ddc8;}
#page h1 .sub,.hud-badge{color:#b9cbb7;}
#page .hud-badge .n{color:#dcecab;}
#switcherBtn{color:#e5ead7;background:transparent;border-color:#9bb49b44;}
#switcherBtn:hover{background:#d4e4ad18;}
#switcherPanel{background:#103139ed;border-color:#dce6c344;color:#e5ead7;}
#page .round-progress,#page #playHint{background:#10343a99;color:#e5ead7;border-color:#dce6c344;}
#page #boardWrap{background:#0c30354d;border-color:#dce6c344;}
#colWords{--card-surface:#173d3c99;}
#matchMusic{background:var(--navy-2);}
@media(min-width:1200px){html,body{background:radial-gradient(circle at 50% -10%,#1c2755 0%,var(--navy-2) 55%,#05070d 100%);}}

/* Compact phone chrome and four larger pairs instead of tiny thumbnails. */
@media(max-width:600px){
 #page{padding:8px 10px 6px;}
 #page>header{padding:8px 10px;margin-bottom:6px;gap:8px;flex-wrap:nowrap;}
 #page h1{font-size:17px;line-height:1.2;min-width:0;}
 #page h1 .sub{display:none;}
 #switcherBtn{min-height:44px;padding:6px 10px;font-size:11px;}
 #page #hud{padding:7px 0;margin-bottom:6px;}
 .hud-badge{font-size:9px;padding:0 8px;gap:5px;letter-spacing:0;}
 #page .hud-badge .n{font-size:19px;}
 #page .round-progress{padding:3px 6px;margin-bottom:6px;font-size:10px;}
 #page #boardWrap{padding:7px;border-radius:12px;}
 #page #board{gap:24px;}
 .board-col{gap:8px;}
 #colImages .card{border-width:1px;border-radius:10px;}
 #colImages .card img{padding:0;border-radius:8px;}
 #colWords .card-word{font-size:14px;padding:5px;line-height:1.3;}
 #page #playHint{padding:4px 6px;margin-top:5px;font-size:10px;border:0;background:transparent;}
}

/* One compact scoreboard replaces the three stacked top panels. */
#page>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:8px 12px;flex-shrink:0;}
#page>header h1{margin:0;}
#page>header #hud{grid-column:1/-1;margin:0;padding:6px 0 2px;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
#page>header .round-progress{grid-column:1/-1;position:relative;padding:0;margin:0;height:3px;min-height:3px;background:none;border:0;border-radius:0;}
#roundProgress{height:3px;}
#roundProgressLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
#page #playHint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0;border:0;}
@media(max-width:600px){
 #page{padding:6px 8px;}
 #page>header{padding:4px 10px 7px;margin-bottom:6px;gap:2px 8px;}
 #page h1{font-size:16px;}
 #page>header #hud{padding:2px 0 4px;}
 #page .hud-badge .n{font-size:16px;}
 .hud-badge{font-size:9px;gap:5px;}
 #page #boardWrap{padding:4px;background:#0c30352b;border-color:#dce6c326;}
 #page #board{gap:18px;}
 .board-col{gap:6px;}
}

#page #switcherBtn{background:transparent;border:0;box-shadow:none;color:#e5ead7;font-size:11px;font-weight:500;min-height:44px;padding:6px 10px;}
#page #switcherBtn:hover{background:#d4e4ad18;}