:root{color-scheme:dark;font-family:Inter,"PingFang SC",system-ui,sans-serif;color:#e2ebe5;background:#0d1414}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;font-size:12px}main{width:100%;max-width:1280px;margin:auto;padding:12px 24px 6px;flex:1;min-height:0;display:grid;grid-template-rows:110px minmax(0,1fr) 22px;gap:12px}.eyebrow{font-size:10px;letter-spacing:2px;color:#9cac9d}h1{font-size:28px;margin:10px 0}h2{font-size:17px;margin:10px 0}p{color:#91a397;font-size:11px;line-height:1.7;margin:8px 0}a{color:#c2f8bd}.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-width);gap:var(--workspace-gap)}.arena-panel{min-height:0;display:flex;flex-direction:column;border:1px solid #324037;border-radius:12px;overflow:hidden;background:#111d18}.arena-top{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;color:#b9cbbb}.arena-top span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.screen{position:relative;flex:1;min-height:0;display:flex;justify-content:center;background:#070b0a}canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;outline-offset:-2px}#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#243527,#0b1310)}#empty[hidden]{display:none}#empty>span{font:10px monospace;letter-spacing:3px;color:#b9dcb2}#empty h2{font-size:25px;margin:20px 0 5px}button,.primary{border:1px solid #435748;background:#223528;color:#cce7c6;border-radius:6px;padding:9px 12px;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}button:disabled{opacity:.4;cursor:not-allowed}.primary,#auto[aria-pressed=true]{background:#c2f8bd;color:#17301e}#empty .primary{margin-top:16px;padding:12px 25px}.controls,.touch{display:flex;gap:8px;justify-content:center;padding:9px}.touch{padding-top:0}.touch button{min-width:42px;touch-action:none}.panel{border:1px solid #304236;border-radius:10px;padding:14px;background:#142019}aside{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px}input,select{width:100%;margin:8px 0;color:#c8dbca;background:#1a2b20;border:1px solid #405344;padding:8px;border-radius:5px;font:inherit}input{font-size:10px}label{color:#bcd0bc}#auto{width:100%;margin-top:3px}.decision{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 0;border-block:1px solid #304236}.decision strong{font-size:15px;color:#c2f8bd}.decision span{white-space:nowrap}.decision b{font:22px monospace}.decision small{font-size:9px;color:#91a397}summary{cursor:pointer;color:#aec3af}footer{font:9px/22px monospace;color:#819889;display:flex;justify-content:space-between}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c2f8bd;outline-offset:2px}@media(max-width:760px),(max-height:600px){body{height:auto;min-height:100dvh}main{display:flex;flex-direction:column;padding:14px}.workspace{display:flex;flex-direction:column}.screen{height:55dvh;min-height:300px;flex:none}aside{overflow:visible}.page-title{margin-bottom:8px}h1{font-size:24px}}
/* Arcade library occupies the playfield and shares its full width. */
#empty{align-items:stretch;justify-content:space-between;padding:clamp(18px,3vw,32px);gap:18px;background:radial-gradient(ellipse at 15% 10%,#2c4934 0,transparent 60%),linear-gradient(145deg,#14241b,#0b1310);overflow:auto}
.library-heading>span{font:9px monospace;letter-spacing:2px;color:#a8c9a0}#empty .library-heading h2{font-size:clamp(20px,2.2vw,28px);margin:10px 0 5px}.library-heading p{margin:0}.game-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,270px));gap:18px;align-content:start;flex:1}.game-card{padding:0;display:flex;flex-direction:column;align-items:stretch;text-align:left;border:1px solid #58714e;border-radius:12px;overflow:hidden;background:#182b1e;transition:transform .18s,border-color .18s;box-shadow:0 12px 35px #0004}.game-card:hover:not(:disabled){transform:translateY(-3px);border-color:#c2f8bd}.game-card img{display:block;width:100%;height:auto;max-height:210px;object-fit:contain;image-rendering:pixelated;background:#6390ff}.game-card-body{display:flex;flex-direction:column;gap:9px;padding:15px}.game-card-body small{font:9px monospace;letter-spacing:1.5px;color:#93ad94}.game-card-body strong{font-size:19px;font-weight:600;color:#f0f7e8}.game-card-action{font-size:11px;border-top:1px solid #3b543c;padding-top:11px;color:#c2f8bd}.library-foot{display:flex;justify-content:space-between;gap:12px;color:#75977b;font:9px monospace;letter-spacing:.5px}.library-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.library-badges span{padding:5px 7px;border:1px solid #3c5340;border-radius:4px;color:#adc2aa;font-size:10px}.controls{flex-wrap:wrap}
@media(min-width:761px) and (max-height:820px){#empty{padding:16px 22px;gap:12px}.game-gallery{grid-template-columns:repeat(auto-fit,minmax(190px,240px))}.game-card img{max-height:150px}.game-card-body{padding:11px;gap:6px}.game-card-body strong{font-size:17px}}
@media(max-width:760px){#empty{padding:18px}.game-gallery{grid-template-columns:repeat(auto-fit,minmax(180px,230px))}.game-card img{max-height:160px}.library-foot{font-size:8px}}
/* A single row fits the playfield; multiple rows retain library scrolling. */
#empty[data-single-row="true"]{overflow:hidden}
#empty[data-single-row="true"] .library-heading,#empty[data-single-row="true"] .library-foot{flex-shrink:0}
#empty[data-single-row="true"] .game-gallery{min-height:0;grid-template-rows:minmax(0,1fr);align-content:stretch}
#empty[data-single-row="true"] .game-card{min-height:0}
#empty[data-single-row="true"] .game-card img{height:0;min-height:0;max-height:none;flex:1;object-fit:contain}
#empty[data-single-row="true"] .game-card-body{flex-shrink:0;padding:10px 13px;gap:5px}
#empty[data-single-row="true"] .game-card-action{padding-top:7px}
#empty{overflow:hidden}
.library-heading,.library-foot{flex-shrink:0}
.game-gallery{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;grid-auto-rows:300px;padding:3px 3px 5px}
#empty[data-single-row="true"] .game-gallery{grid-auto-rows:auto}

.keyboard-help{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;padding:2px 10px 9px;color:#a9bfad;font-size:10px}.keyboard-help>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.keyboard-help kbd{display:inline-flex;justify-content:center;min-width:18px;padding:2px 4px;border:1px solid #425847;border-bottom-width:2px;border-radius:4px;color:#d9eed3;background:#1b2b20;font:10px/1.2 monospace}

#library[hidden]{display:none}
/* Show one controller surface for the device's primary input. */
.touch{display:none}
@media(pointer:coarse){
 .keyboard-help{display:none}
 .touch{display:flex;flex-wrap:wrap;padding:8px 12px 12px;gap:8px}
 .touch button{min-width:44px;min-height:44px}
}

/* Shared desktop/touch input feedback; no movement or delayed release animation. */
body[data-game] .game-controls :is(kbd,button).is-held{color:#061b23;background:#70e6f2;border-color:#a4f3fa;box-shadow:0 0 10px #70e6f238}
