/* Ivory cabinet surfaces are native interface elements, not painted controls. */
#app[data-state=menu]>.hud,#app[data-state=menu]>.controls{display:none}
#app[data-state=menu] #stage{background:#160d09}
#app[data-state=menu] #stage:before{opacity:.3;filter:brightness(.65);background-size:cover}
#app[data-state=menu] #chamber{visibility:hidden}
#app[data-state=menu] .overlay{padding:12px;backdrop-filter:none;background:linear-gradient(90deg,#100806a8,transparent 25%,transparent 75%,#100806a8);overflow:auto;align-items:center}
#app[data-state=menu] .menu-card{position:relative;display:flex;flex-direction:column;width:min(430px,100%);height:min(820px,calc(100dvh - 24px));min-height:620px;padding:13px 14px 10px;margin:auto;border:3px solid #c49a52;border-radius:16px 16px 6px 6px;color:#28201b;background:linear-gradient(115deg,#fff5d7 0,#dfc79b 2%,#f9edcf 6%,#f6e8c7 89%,#a77833 97%,#f8dda0);box-shadow:inset 0 0 0 2px #fff4c7,0 0 0 2px #392713,0 12px 45px #000b}
#app[data-state=menu] .menu-card:before,#app[data-state=menu] .menu-card:after{content:'';position:absolute;top:22px;bottom:21px;width:3px;background:#cc2639;box-shadow:0 0 7px #de2348;pointer-events:none}
#app[data-state=menu] .menu-card:before{left:4px}#app[data-state=menu] .menu-card:after{right:4px}
.arcade-marquee{flex-shrink:0;position:relative;background:linear-gradient(125deg,#18241b,#090c0b 65%);border:2px solid #b58a42;border-radius:8px 8px 3px 3px;padding:8px 12px 9px;box-shadow:inset 0 0 0 2px #090907,0 2px 0 #7d542b;color:#fff1d1}
.arcade-signature{font-size:12px;font-weight:800;letter-spacing:3px}.arcade-signature>span{color:#e5394b}.arcade-signature small{font:6px monospace;letter-spacing:1.4px;margin-left:16px;color:#cbb98e}
#app[data-state=menu] h1{display:flex;align-items:center;justify-content:center;gap:8px;line-height:1;margin:3px 0 2px;height:62px;letter-spacing:-2px;text-shadow:none}
#app[data-state=menu] h1 img{height:66px;width:135px;object-fit:contain;transform:rotate(-3deg)}
#app[data-state=menu] h1 span{font:950 37px Arial,sans-serif;color:#f2cd7b;text-shadow:0 2px #745326;letter-spacing:-2px}
.arcade-tagline{font:7px monospace;letter-spacing:2px;color:#d4c5a7}
.attract-screen{position:relative;flex:1;min-height:170px;margin:12px 3px 10px;padding:10px 9px 20px;border:6px solid #141715;border-top-width:9px;background:#0a0f0d;border-radius:5px;box-shadow:0 0 0 2px #a78140,0 0 0 4px #f4d18c,inset 0 0 0 2px #2f7654,0 4px 7px #5b3a2866}
.attract-screen:before{content:'';position:absolute;inset:0;border:1px solid #34ad79;pointer-events:none;box-shadow:inset 0 0 8px #269c5920}
#attract{display:block;width:100%;height:100%;object-fit:contain;background:#090d0b}
.screen-label{position:absolute;left:10px;right:10px;bottom:5px;text-align:left;font:6px monospace;letter-spacing:1.2px;color:#82968a}.screen-label b{float:right;color:#d9c58d;font-weight:400}.live-dot{display:inline-block;width:4px;height:4px;background:#51c98d;border-radius:50%;margin-right:3px}
#app[data-state=menu] #menu-title,#app[data-state=menu] #menu-copy,#app[data-state=menu] .howto{display:none}
#app[data-state=menu] .scene-picker{margin:3px 0 10px;gap:7px;flex-shrink:0}
#app[data-state=menu] .scene-picker button{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;padding:0;color:#f2e6cd;background:#131312;border:2px solid #866739;border-radius:4px;overflow:hidden;box-shadow:0 2px 2px #33201044;position:relative}
.scene-image{display:block;height:49px;width:100%;background-size:cover;background-position:center;filter:brightness(.72)}.vault-thumb{background-image:url('assets/ui/vault.svg')}.red-thumb{background-image:url('assets/ui/redline.svg')}.night-thumb{background-image:url('assets/ui/night.svg')}
#app[data-state=menu] .scene-picker button>span:last-child{padding:7px 1px 6px;font:700 8px monospace;letter-spacing:.4px}
#app[data-state=menu] .scene-picker button[aria-pressed=true]{border-color:#cf3344;box-shadow:0 0 0 1px #f8d787,0 2px 6px #8d182b4d;color:#fff8df}
#app[data-state=menu] .scene-picker button[aria-pressed=true] .scene-image{filter:brightness(1)}
#app[data-state=menu] .scene-picker button[aria-pressed=true]:after{content:'✓';position:absolute;top:3px;right:4px;background:#bd2538;color:white;font:10px Arial;padding:1px 3px;border-radius:2px}
#app[data-state=menu] .arcade-deck{display:flex;align-items:center;gap:12px;padding:11px 9px;background:linear-gradient(#eddbb7,#f9edcc 40%,#c7a36b);border:1px solid #b28a49;border-bottom:3px solid #8e6734;border-radius:5px;box-shadow:inset 0 1px #fff9e6}
.arcade-rounds{display:flex;gap:10px;flex-shrink:0}.arcade-rounds button{min-width:38px;min-height:44px;padding:0;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:8px;color:#52351d}.arcade-rounds button>span{display:block;width:30px;height:30px;border-radius:50%;border:3px solid #ddbb70;background:radial-gradient(circle at 35% 25%,#f06868,#b61c31 55%,#590915);box-shadow:0 3px 0 #765020,0 4px 3px #3f2b2166,inset 0 1px #ffc4b8}.arcade-rounds button[aria-pressed=true]>span{background:radial-gradient(circle at 35% 25%,#9cf3bf,#268854 55%,#094a28)}.arcade-rounds small{font:700 6px monospace;letter-spacing:.6px}.arcade-rounds button:active>span{transform:translateY(2px);box-shadow:0 1px #765020}
#app[data-state=menu] .primary{flex:1;width:auto;min-width:0;padding:16px 4px;font-size:16px;border-radius:4px;border:1px solid #926527;border-bottom:3px solid #825823;background:linear-gradient(115deg,#ffe9ac,#e8bc62 65%,#ffe4a0);box-shadow:inset 0 1px 1px #fffae1,0 2px 2px #956c3944;letter-spacing:.5px}
#app[data-state=menu] #load-status{font-size:7px;min-height:9px;margin:7px 0 4px;color:#735d3e}
.arcade-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}#show-pieces{background:transparent;color:#593d23;border:0;padding:5px 0;font:700 7px monospace;letter-spacing:.9px;text-decoration:underline;text-underline-offset:3px}
#app[data-state=menu] .best{margin:0;font:8px monospace;letter-spacing:1px;color:#735b3b}#app[data-state=menu] .best b{color:#291b0e;margin-left:4px}
#app:not([data-state=menu]) .menu-only{display:none!important}
#app:not([data-state=menu]) .arcade-bottom{justify-content:center}
dialog{max-width:min(440px,calc(100vw - 32px));max-height:85dvh;border:1px solid #d7b36e;border-radius:8px;padding:28px 24px;background:#14100e;color:#ecddc4;box-shadow:0 18px 90px #000c;font:13px/1.7 Arial,sans-serif}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog small{font:8px monospace;letter-spacing:2px;color:#d6b36b}dialog h2{font-size:21px;margin:12px 0 18px;letter-spacing:1px}dialog p{color:#c5b6a0}dialog dt{font:700 10px monospace;color:#e8c67c;margin-top:14px}dialog dd{margin:3px 0 0;color:#e9dfd0}.dialog-close{position:absolute;top:8px;right:10px;border:0;background:none;font-size:26px;color:#eed59b;width:36px;height:36px}.keyboard-note{font-size:10px}#pieces-dialog #collection{display:grid;height:200px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;margin:0}#pieces-dialog #collection canvas{width:100%;height:100%;min-width:0;min-height:0}
@media(min-width:700px) and (min-height:650px){#app[data-state=menu] .overlay{padding:20px}#app[data-state=menu] .menu-card{height:min(850px,calc(100dvh - 40px))}.scene-image{height:58px}}
@media(max-height:700px) and (min-height:501px){#app[data-state=menu] .menu-card{min-height:0;padding-top:9px;height:calc(100dvh - 18px)}#app[data-state=menu] h1{height:48px}#app[data-state=menu] h1 img{height:52px;width:110px}#app[data-state=menu] h1 span{font-size:30px}.arcade-marquee{padding:6px}.attract-screen{min-height:140px;margin:10px 3px}.scene-image{height:39px}#app[data-state=menu] .arcade-deck{padding:8px}.arcade-tagline{font-size:6px}}
@media(max-height:500px){#app[data-state=menu] .overlay{padding:8px}#app[data-state=menu] .menu-card{width:min(780px,100%);height:calc(100dvh - 16px);min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,1fr);grid-template-rows:100px 1fr 70px 20px;gap:5px 16px;padding:10px 18px}.arcade-marquee{grid-column:2;grid-row:1;align-self:stretch}#app[data-state=menu] h1{display:flex;height:50px}#app[data-state=menu] h1 img{height:54px;width:110px}#app[data-state=menu] h1 span{font-size:30px}.attract-screen{grid-column:1;grid-row:1/5;margin:3px;min-height:0}#app[data-state=menu] .scene-picker{grid-column:2;grid-row:2;margin:0;align-self:center}.scene-image{height:45px}#app[data-state=menu] .arcade-deck{grid-column:2;grid-row:3;padding:6px;gap:12px}#app[data-state=menu] .arcade-bottom{grid-column:2;grid-row:4}#app[data-state=menu] #load-status{display:none}.arcade-rounds button>span{width:25px;height:25px}.arcade-rounds{gap:10px}#app[data-state=menu] .primary{font-size:13px;padding:15px 3px}}
@media(prefers-reduced-motion:reduce){#app[data-state=menu] h1 img{transform:none}}

/* Approved Arcade Deck: black inset, red utility caps, gold Start. */
#app[data-state=menu] .arcade-deck{gap:13px;padding:12px 10px;background:linear-gradient(120deg,#252522,#101211 70%);border:2px solid #aa8246;border-bottom:3px solid #795526;border-radius:8px;box-shadow:inset 0 0 0 1px #ead6a033,0 2px 3px #4d301c44}
#app[data-state=menu] .arcade-rounds{gap:10px;padding-right:12px;border-right:1px solid #a5844b77}
#app[data-state=menu] .arcade-rounds button{min-width:39px;min-height:52px;gap:6px;color:#f4e5bc}
#app[data-state=menu] .arcade-rounds button>span{display:grid;place-items:center;width:36px;height:36px;border:2px solid #e2ba6d;background:radial-gradient(circle at 35% 20%,#e15460,#a00e26 64%,#580c18);box-shadow:0 3px 0 #7c581f,inset 0 1px #ffb3b8,0 4px 4px #0007;color:#fff1d0;font:800 24px Arial}
#app[data-state=menu] .arcade-rounds button[aria-pressed=true]>span{background:radial-gradient(circle at 35% 20%,#ff8990,#c61532 64%,#640c1d);box-shadow:0 3px 0 #9f752e,0 0 0 2px #f6da8d66,inset 0 1px #ffd2d6}
.arcade-rounds svg{width:21px;height:21px}
#app[data-state=menu] .arcade-rounds small{font-size:6px;letter-spacing:.4px}
#app[data-state=menu] .primary{position:relative;font-size:14px;letter-spacing:.5px;padding:17px 17px 17px 7px;border:1px solid #f0d28e;border-bottom:3px solid #9d7030;border-radius:5px;box-shadow:0 0 0 2px #755124,inset 0 1px 3px #fff1bc;white-space:nowrap}
#app[data-state=menu] .primary:after{content:'';position:absolute;right:7px;top:50%;transform:translateY(-50%);border-left:6px solid #2c1d0b;border-top:5px solid transparent;border-bottom:5px solid transparent}
#app[data-state=menu] .arcade-bottom{display:grid;grid-template-columns:1fr auto 1fr;gap:3px;align-items:center;margin-top:0;min-height:33px}
#app[data-state=menu] .best{grid-column:2;grid-row:1;display:flex;align-items:center;gap:7px;background:#131412;color:#d3b775;border:1px solid #aa8348;border-top:0;border-radius:0 0 6px 6px;padding:7px 10px 6px;font:7px monospace;letter-spacing:.8px;white-space:nowrap;box-shadow:0 2px 2px #704e2533}
#app[data-state=menu] .best b{color:#fff0c5;font:700 15px monospace;letter-spacing:1px;margin:0;border-left:1px solid #8c7043;padding-left:8px}
#app[data-state=menu] #show-pieces{grid-column:1;grid-row:1;font-size:6px;justify-self:start;letter-spacing:.2px}
#app[data-state=menu] #load-status:empty{display:none}
@media(max-width:360px){#app[data-state=menu] .arcade-deck{gap:9px;padding:10px 7px}#app[data-state=menu] .arcade-rounds{gap:6px;padding-right:8px}#app[data-state=menu] .arcade-rounds button{min-width:34px}#app[data-state=menu] .primary{font-size:12px}#app[data-state=menu] .best{padding-left:6px;padding-right:6px;font-size:6px;gap:5px}#app[data-state=menu] .best b{font-size:13px}}
@media(max-height:500px){#app[data-state=menu] .menu-card{grid-template-rows:93px 1fr 76px 34px}#app[data-state=menu] .arcade-deck{padding:8px;gap:10px}#app[data-state=menu] .arcade-rounds{gap:8px;padding-right:10px}#app[data-state=menu] .arcade-rounds button{min-width:34px;min-height:45px}#app[data-state=menu] .arcade-rounds button>span{width:30px;height:30px;font-size:22px}.arcade-rounds svg{width:18px;height:18px}#app[data-state=menu] .primary{font-size:12px;padding-top:16px;padding-bottom:16px}#app[data-state=menu] .arcade-bottom{margin:0;min-height:30px}#app[data-state=menu] .best{font-size:6px;padding-top:6px;padding-bottom:5px}#app[data-state=menu] .best b{font-size:13px}}
#pieces-dialog{width:min(760px,94vw);max-width:94vw;max-height:90dvh;overflow:auto}
#pieces-dialog #collection{height:auto;grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:135px;margin:0;gap:12px}
@media(max-width:600px){#pieces-dialog #collection{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:125px}}
/* Game-specific board navigation stays readable beside the best score. */
.arcade-bottom>.stack-board-link{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px;color:#301b0c;background:#efd797;border:1px solid #8d5f2c;border-radius:5px;font:700 8px Arial,sans-serif;text-decoration:none;max-width:100%}#app[data-state=menu] .arcade-bottom>.stack-board-link{grid-column:3;grid-row:1;justify-self:end}.stack-board-link:focus-visible{outline:2px solid #9f1628;outline-offset:2px}