:root{--shell:#c22222;--shell-dark:#8f1717;--shell-darker:#6d1010;--shell-light:#cf2b2b;--bezel:#cfcfc9;--bezel-dark:#a9a9a3;--bezel-ink:#2b2b31;--screen:#10131a;--screen-2:#171b25;--screen-edge:#2c3140;--lcd:#a8c98f;--lcd-dim:#93b57c;--lcd-ink:#16281a;--lens:#4aa3e0;--lens-deep:#1d6ba8;--led-red:#ff5b5b;--led-amber:#ffd24a;--led-green:#58d977;--text:#eceafa;--muted:#b9b2d8;--pixel:"Press Start 2P", ui-monospace, monospace;--ui:"Chakra Petch", ui-sans-serif, -apple-system, "Segoe UI", sans-serif}*,:before,:after{box-sizing:border-box}body{min-height:100vh;color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;background:radial-gradient(120% 90% at 50% 0,#2a2f3d 0%,#14161d 55%,#0d0e13 100%);margin:0;font-size:16px;line-height:1.5}button{cursor:pointer;color:inherit;font-family:inherit}:focus-visible{outline:3px solid var(--led-amber);outline-offset:3px}a{color:#9fd4ff;text-underline-offset:3px}.dex{max-width:70rem;margin-inline:auto;padding:clamp(.9rem,3vw,2.25rem) clamp(.6rem,2.5vw,1.5rem) 2.5rem}.dex-body{background: linear-gradient(100deg, var(--shell-light) 0%, var(--shell) 16%, var(--shell) 84%, var(--shell-dark) 100%);box-shadow:inset 0 2px 0 #ffffff47, inset 0 -3px 0 var(--shell-darker), 0 18px 40px #0000008c;border-radius:18px 18px 14px 14px;padding:clamp(.9rem,2.5vw,1.4rem);position:relative}.dex-body:after{content:"";background:linear-gradient(90deg,#0000,#00000047 12% 88%,#0000);border-radius:2px;height:2px;position:absolute;bottom:.55rem;left:6%;right:6%}.dex-top{grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:clamp(.6rem,2vw,1.1rem);padding:.15rem .25rem clamp(.75rem,2vw,1.1rem);display:grid}.lens{aspect-ratio:1;background:radial-gradient(circle at 34% 30%, #9ad4ff 0%, var(--lens) 42%, var(--lens-deep) 100%);border-radius:50%;width:clamp(2.6rem,7vw,4rem);display:block;position:relative;box-shadow:0 0 0 4px #f2f2ee,0 0 0 6px #00000038,inset 0 -6px 12px #00000059}.glint{filter:blur(1px);background:#fffc;border-radius:50%;width:30%;height:22%;position:absolute;top:15%;left:20%}.lights{flex-direction:column;gap:clamp(.28rem,1vw,.45rem);display:flex}.light{aspect-ratio:1;border-radius:50%;width:clamp(.55rem,1.6vw,.85rem);display:block;box-shadow:inset 0 -2px 3px #00000059,0 0 0 2px #0000002e}.light--red{background:var(--led-red)}.light--amber{background:var(--led-amber)}.light--green{background:var(--led-green)}.dex-label h1{font-family:var(--pixel);color:#fff;text-shadow:0 2px 0 var(--shell-darker);margin:0;font-size:clamp(.72rem,2.5vw,1.35rem);line-height:1.5}.dex-label h1 span{color:var(--led-amber);text-shadow:0 2px 0 var(--shell-darker)}.dex-label p{color:#fff;margin:.5rem 0 0;font-size:clamp(.8rem,1.6vw,.95rem)}.bezel{background:linear-gradient(180deg, var(--bezel) 0%, var(--bezel-dark) 100%);border-radius:10px;padding:clamp(.5rem,1.5vw,.85rem);box-shadow:inset 0 2px 4px #ffffff80,inset 0 -2px 4px #00000040,0 2px #0003}.screen{background:linear-gradient(180deg, var(--screen-2) 0%, var(--screen) 100%);min-height:14rem;box-shadow:inset 0 0 0 1px var(--screen-edge), inset 0 6px 18px #0009;border-radius:6px;padding:clamp(.7rem,2vw,1.2rem);position:relative;overflow:hidden}.screen:after{content:"";pointer-events:none;background:repeating-linear-gradient(#0000 0 3px,#00000024 3px 4px);position:absolute;inset:0}.board{grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:clamp(.45rem,1.4vw,.8rem);margin:0;padding:0;list-style:none;display:grid}.board[data-count="12"],.board[data-count="14"],.board[data-count="16"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,6.75rem),1fr))}.slot{perspective:1000px}.card{aspect-ratio:3/4;width:100%;transform-style:preserve-3d;background:0 0;border:0;padding:0;transition:transform .38s cubic-bezier(.45,.05,.2,1);display:block;position:relative}.card.is-down{transform:rotateY(180deg)}.face{backface-visibility:hidden;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;padding:.4rem .3rem .5rem;display:flex;position:absolute;inset:0;overflow:hidden}.face--front{background:linear-gradient(#212636 0%,#171b26 100%);box-shadow:inset 0 0 0 1px #39405a}.card:hover:not(:disabled) .face--front{box-shadow:inset 0 0 0 2px var(--led-amber), 0 0 18px #ffd24a40}.face--front img{object-fit:contain;filter:drop-shadow(0 3px 8px #0009);background:radial-gradient(circle at 50% 45%,#4aa3e01a,#0000 68%);width:100%;height:auto;max-height:66%}.entry{font-family:var(--pixel);color:var(--led-amber);letter-spacing:.04em;font-size:clamp(.42rem,.9vw,.52rem)}.name{font-family:var(--pixel);text-align:center;color:var(--text);text-transform:lowercase;word-break:break-word;font-size:clamp(.5rem,1.05vw,.62rem);line-height:1.4}.face--back{background:linear-gradient(#2a3040 0%,#1a1f2c 100%);transform:rotateY(180deg);box-shadow:inset 0 0 0 1px #39405a}.back-mark{aspect-ratio:1;background:linear-gradient(180deg, var(--shell) 0% 47%, #f2f2ee 53% 100%);border-radius:50%;width:44%;position:relative;box-shadow:inset 0 0 0 2px #14161d,0 0 12px #c2222259}.back-mark:after{content:"";aspect-ratio:1;background:#f2f2ee;border-radius:50%;width:32%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #14161d}.card:disabled{cursor:default}.deck{padding-top:clamp(.7rem,2vw,1.1rem)}.hud{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem clamp(.6rem,2.5vw,1.5rem);display:grid}.readout{background:linear-gradient(180deg, var(--lcd) 0%, var(--lcd-dim) 100%);border-radius:5px;flex-direction:column;align-items:center;gap:.1rem;min-width:clamp(4.1rem,12vw,5.5rem);margin:0;padding:.35rem .5rem .4rem;display:flex;box-shadow:inset 0 2px 5px #00000059,0 1px #ffffff40}.label{font-family:var(--pixel);letter-spacing:.1em;color:var(--lcd-ink);opacity:.75;font-size:clamp(.42rem,.9vw,.5rem)}.value{font-family:var(--pixel);color:var(--lcd-ink);font-size:clamp(1rem,3.4vw,1.5rem);line-height:1.1}.readout--best .value,.readout--best .label{color:var(--lcd-ink)}.progress{text-align:center;min-width:0}.level{font-family:var(--pixel);color:#fff;text-shadow:0 1px 0 var(--shell-darker);margin:0;font-size:clamp(.5rem,1.2vw,.65rem)}.level span{color:#ffd9d9}.remaining{color:#fff;margin:.35rem 0 0;font-size:clamp(.75rem,1.5vw,.88rem)}.pips{flex-wrap:wrap;justify-content:center;gap:4px;margin-top:.45rem;display:flex}.pip{background:var(--shell-darker);border-radius:50%;width:9px;height:9px;box-shadow:inset 0 1px 2px #00000080}.pip.is-lit{background:var(--led-amber);box-shadow:0 0 7px #ffd24acc,inset 0 -1px 2px #00000040}.controls{justify-content:space-between;align-items:center;gap:1rem;padding:clamp(.7rem,2vw,1rem) .15rem .5rem;display:flex}.dpad{aspect-ratio:1;flex:none;width:clamp(2rem,5.5vw,2.75rem);position:relative}.dpad:before,.dpad:after{content:"";background:#2e3340;border-radius:3px;position:absolute;box-shadow:inset 0 1px #ffffff24,0 1px #0000004d}.dpad:before{inset:34% 0}.dpad:after{inset:0 34%}.knobs{gap:.5rem;display:flex}.knobs i{aspect-ratio:1;background:linear-gradient(#f2f2ee 0%,#c9c9c2 100%);border-radius:50%;width:clamp(.9rem,2.4vw,1.25rem);box-shadow:inset 0 -2px 3px #0000004d,0 1px #00000040}.grille{flex-direction:column;flex:none;gap:3px;display:flex}.grille i{background:var(--shell-darker);opacity:.55;border-radius:2px;width:clamp(2.2rem,6vw,3.2rem);height:3px;display:block}.overlay{z-index:20;background:#0a0c12e6;place-items:center;padding:1rem;display:grid;position:absolute;inset:0;overflow:auto}.overlay--flash{pointer-events:none;background:#0a0c128c}.overlay-line{font-family:var(--pixel);color:var(--led-green);text-shadow:0 0 14px #58d977b3;text-align:center;margin:0;font-size:clamp(.85rem,3vw,1.5rem)}.overlay-panel{text-align:center;background:linear-gradient(#212636 0%,#171b26 100%);border-radius:8px;width:min(26rem,100%);padding:clamp(1rem,3.5vw,1.6rem);box-shadow:inset 0 0 0 1px #39405a,0 16px 40px #0009}.overlay-panel h2{font-family:var(--pixel);color:var(--led-amber);margin:0;font-size:clamp(.7rem,2.6vw,1rem);line-height:1.6}.overlay-panel p{color:var(--muted);margin:.8rem 0 0;font-size:.9rem}.overlay-scores{justify-content:center;gap:2rem;margin:1.2rem 0 1.3rem;display:flex}.overlay-scores dt{font-family:var(--pixel);letter-spacing:.1em;color:var(--muted);font-size:.46rem}.overlay-scores dd{font-family:var(--pixel);color:var(--text);margin:.35rem 0 0;font-size:1.3rem}.dex-button{font-family:var(--pixel);color:#fff;background:linear-gradient(180deg, var(--shell-light) 0%, var(--shell) 100%);box-shadow:0 4px 0 var(--shell-darker), 0 0 18px #c2222259;border:0;border-radius:6px;padding:.85rem 1.2rem;font-size:clamp(.55rem,1.6vw,.68rem);line-height:1}.dex-button:hover{background:linear-gradient(180deg, var(--shell) 0%, #a81a1a 100%)}.dex-button:active{box-shadow:0 2px 0 var(--shell-darker);transform:translateY(2px)}.system-state{flex-direction:column;align-items:center;gap:1.25rem;padding:2rem 0;display:flex}.system{text-align:center;font-family:var(--pixel);color:var(--led-green);margin:0;font-size:clamp(.6rem,1.8vw,.72rem);line-height:1.8}.system--bad{color:var(--led-red)}.plate{text-align:center;color:#b6bac6;margin-top:1.1rem;font-size:.8rem}.plate p{margin:0}@media (width<=30rem){.dex-top{grid-template-columns:auto auto;row-gap:.6rem}.dex-label{grid-column:1/-1}.lights{flex-direction:row}.controls{justify-content:center}.grille{display:none}}@media (prefers-reduced-motion:reduce){.card,.dex-button{transition:none}.screen:after{display:none}}