/* A quiet arcade shelf: color belongs to the three games, type stays clear. */
:root{--arcade-bg:#11151e;--arcade-panel:#1a202c;--arcade-line:#343d4c;--arcade-text:#f4f5f7;--arcade-muted:#a8b2c1;--arcade-accent:#b9ef80}
#mapScreen{background:var(--arcade-bg);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;color:var(--arcade-text)}
.arcade-shell{width:min(1160px,100%);min-height:100%;min-height:100dvh;margin:0 auto;padding:28px clamp(20px,4vw,52px) max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:44px}
.arcade-header{display:flex;justify-content:space-between;align-items:center;gap:18px}
.arcade-brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.letter-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--arcade-accent);color:var(--arcade-bg);font-size:28px;line-height:1;font-weight:900}
.arcade-settings{display:flex;align-items:center;gap:18px;min-height:44px;padding:8px 14px;background:transparent;border:1px solid var(--arcade-line);border-radius:6px;color:var(--arcade-text);font-size:14px;font-weight:650;cursor:pointer}
.arcade-settings span{font-family:monospace;font-size:20px;color:var(--arcade-accent)}
.arcade-settings:hover{background:#242c39;border-color:#8491a5}
.arcade-main{margin:auto 0}
.arcade-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.arcade-eyebrow{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:.14em;color:var(--arcade-accent);margin:0 0 12px}
#mapScreen h1{font-size:clamp(28px,3.6vw,44px);line-height:1.2;letter-spacing:-.065em;font-weight:850;margin:0;text-shadow:none;word-break:keep-all}
.arcade-mode{color:var(--arcade-muted);font-size:14px;margin:0 0 3px;white-space:nowrap}
.arcade-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#mapScreen .arcade-game{--game-color:#ffa28d;position:relative;inset:auto;display:flex;flex-direction:column;width:100%;min-width:0;min-height:0;padding:0;border:1px solid var(--arcade-line);border-radius:8px;background:var(--arcade-panel);box-shadow:none;backdrop-filter:none;color:var(--arcade-text);text-align:left;transform:none;overflow:hidden;cursor:pointer;transition:transform .16s,border-color .16s,background-color .16s}
#mapScreen .arcade-game[data-game=proverb]{--game-color:#9ee3c7}
#mapScreen .arcade-game[data-game=idiom]{--game-color:#9ecaff}
#mapScreen .arcade-game:hover{transform:translateY(-5px);border-color:var(--game-color);background:#202937;box-shadow:0 8px 0 #080d14}
#mapScreen .arcade-game:active{transform:translateY(-1px);box-shadow:none}
#mapScreen .arcade-game:focus-visible{outline:3px solid var(--game-color);outline-offset:5px}
.game-art{position:relative;display:block;overflow:hidden;width:100%;aspect-ratio:1.35;background-color:#111824;border-bottom:1px solid var(--arcade-line)}
.game-art::before{content:"";position:absolute;left:0;bottom:0;width:100%;aspect-ratio:1;background-image:url('assets/arcade-scenes.webp');background-size:300% 100%;background-position:var(--art-position) center;background-repeat:no-repeat;image-rendering:pixelated}
.art-spelling{--art-position:0%}
.art-proverb{--art-position:50%}
.art-idiom{--art-position:100%}
.game-details{display:flex;flex:1;flex-direction:column;padding:22px 21px 18px;min-width:0}
.game-category{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.5;color:var(--arcade-muted)}
.game-number{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--game-color);font-size:14px;letter-spacing:.02em}
.game-name{display:block;font-size:clamp(22px,2.4vw,28px);font-weight:850;letter-spacing:-.06em;line-height:1.4;margin:9px 0 6px;word-break:keep-all}
.game-description{font-size:15px;line-height:1.6;color:#bdc5d1;word-break:keep-all}
.game-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:22px;margin-top:auto;font-size:13px;color:var(--arcade-muted)}
.game-start{display:flex;align-items:center;gap:16px;font-size:16px;font-weight:800;color:var(--game-color)}
.game-start span{font-size:22px;line-height:1}
.arcade-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--arcade-line);padding-top:20px;color:var(--arcade-muted);font-size:14px}
.arcade-footer p{margin:0;line-height:1.6}
.arcade-footer p span{color:#627083;padding:0 10px}
#mapScreen .controller-pill{display:inline-block;font-size:13px;color:var(--arcade-muted);font-weight:500;border:0;border-radius:0;background:none;padding:0;backdrop-filter:none}
#mapScreen .controller-pill.connected{color:var(--arcade-accent)}
/* Matching launch and settings panels keep the game selection flow coherent. */
dialog{background:#1a202c;color:var(--arcade-text);border:1px solid #455163;border-radius:10px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
dialog::backdrop{background:#050a12bd;backdrop-filter:blur(5px)}
.game-dialog,.result-dialog{padding:30px}
.dialog-icon{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:26px;color:var(--arcade-accent);margin-bottom:20px}
.dialog-eyebrow,.dialog-head small,.settings-dialog output{color:var(--arcade-accent)}
.game-dialog h2,.result-dialog h2,.settings-dialog h2{font-size:28px;letter-spacing:-.05em}
#introDescription{color:#c4cdd9;font-size:17px}
.control-guide span{background:#242e3d;border:1px solid #3b485b;border-radius:5px;color:#d4dde8;font-size:14px;line-height:1.5}
.primary-button{background:var(--arcade-accent);border:1px solid var(--arcade-accent);border-radius:5px;color:#17231e;font-size:17px}
.primary-button:hover{background:#cef8a1}
.text-button{color:#b9c5d5;font-size:15px}
.setting-note{background:#242e3d;color:#c4cdd9;border-radius:5px}
.close-button{background:#303d4f;color:#fff;border-radius:4px}
.settings-dialog input{accent-color:var(--arcade-accent)}
.result-score,.result-grid strong{color:var(--arcade-accent)}
.result-grid div{background:#242e3d;border-radius:5px}
.result-grid small{color:#c4cdd9}
button:focus-visible{outline:3px solid var(--arcade-accent);outline-offset:4px}
@media(min-width:1500px){.arcade-shell{width:min(1400px,100%)}.game-name{font-size:32px}.game-description{font-size:17px}}
@media(max-width:900px) and (min-width:641px){.arcade-shell{padding-inline:24px}.arcade-games{gap:12px}.game-details{padding:18px 14px}.game-category{font-size:13px;gap:8px}.game-bottom{flex-wrap:wrap;gap:14px}.game-start{margin-left:auto}.game-art{aspect-ratio:1.15}.arcade-mode{display:none}}
@media(max-width:640px){
 .arcade-shell{gap:30px;padding:20px 18px max(24px,env(safe-area-inset-bottom))}
 .arcade-brand{font-size:18px;gap:9px}.letter-mark{width:30px;height:30px;font-size:25px}
 .arcade-settings{padding:8px 10px;gap:12px}
 .arcade-heading{display:block;margin-bottom:20px}.arcade-eyebrow{font-size:11px;margin-bottom:10px}
 .arcade-mode{margin:12px 0 0;font-size:13px}
 .arcade-games{grid-template-columns:1fr;gap:14px}
 #mapScreen .arcade-game{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:stretch;min-height:167px}
 .game-art{aspect-ratio:auto;height:100%;min-height:167px;border-bottom:0;border-right:1px solid var(--arcade-line)}
 .game-art::before{bottom:auto;top:50%;transform:translateY(-50%)}
 .game-details{padding:16px 14px}.game-category{font-size:12px;gap:8px}.game-number{font-size:12px}
 .game-name{font-size:23px;margin:5px 0 4px}.game-description{font-size:14px;line-height:1.45}
 .game-bottom{padding-top:12px;font-size:12px}.game-start{font-size:14px;gap:8px}.game-start span{font-size:18px}
 .arcade-footer{font-size:12px;gap:10px;padding-top:18px}.arcade-footer p span{padding:0 6px}
 #mapScreen .controller-pill{font-size:12px}
}
@media(max-width:360px){#mapScreen .arcade-game{grid-template-columns:82px minmax(0,1fr)}.game-details{padding-inline:12px}.game-name{font-size:21px}.game-bottom>span:first-child{font-size:11px}.game-description{font-size:13px}}
@media(max-height:600px) and (min-width:641px){.arcade-shell{gap:24px;padding-top:18px}.arcade-heading{margin-bottom:18px}.game-art{aspect-ratio:2}.game-details{padding-top:15px;padding-bottom:14px}.game-bottom{padding-top:14px}.arcade-footer{padding-top:14px}}
@media(prefers-reduced-motion:reduce){#mapScreen .arcade-game{transition:none}#mapScreen .arcade-game:hover{transform:none}}