:root{color-scheme:dark;--mint:#a5e8dc;--gold:#e6c88e;--line:#3b535e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#233c51,#09151f 65%);color:#e6eeed;font:14px/1.6 Arial,sans-serif}header{padding:22px 4%;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}nav{display:flex;gap:20px;flex-wrap:wrap}a{color:var(--mint);text-decoration:none}main{max-width:1500px;margin:auto;padding:30px 4%}h1,h2,h3{font-family:Georgia,serif;font-weight:400;line-height:1.2}h1{font-size:44px;margin:10px 0}h2{font-size:29px}small{letter-spacing:2px;font-size:10px;color:var(--gold)}p{color:#a6bbc7}button,select{font:inherit;background:#19303e;color:#e5efeb;border:1px solid #5c7380;padding:10px 15px;border-radius:5px;cursor:pointer}button:hover{border-color:var(--gold);background:#2c4450}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.gold{background:linear-gradient(135deg,#e9d29a,#a88b57);color:#16242d}.title{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:25px}.setup{display:flex;gap:12px;flex-wrap:wrap}.arcade-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px}.play-shell{position:relative;background:#070e1b;border:1px solid #526477;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px #0005}canvas{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;touch-action:none}.bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:linear-gradient(#081721ef,transparent);gap:10px;font-size:12px}.bar span{text-shadow:0 2px 5px #000}#cover{position:absolute;inset:0;background:#07121bce;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;backdrop-filter:blur(3px)}#cover[hidden]{display:none}aside{padding:22px;background:linear-gradient(140deg,#203842,#10222c);border:1px solid #435a63;border-radius:12px}aside>img{height:220px;width:100%;object-fit:contain;filter:drop-shadow(0 0 25px #92778f44)}aside h2{margin:8px 0}aside p{font-size:12px}aside button{width:100%;font-size:12px}hr{border:0;border-top:1px solid #405760;margin:24px 0}.footnote{font-size:11px}.touch{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;pointer-events:none}.touch button{pointer-events:auto;background:#112837dd;padding:10px 15px;touch-action:none;font-size:12px}.touch button.active{background:#5c6b6e}@media(max-width:950px){.arcade-layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:100px 1fr;gap:8px 20px}aside>img{height:150px;grid-row:span 5}aside h3,aside hr,aside>p,aside>a{grid-column:1/-1}.title{flex-wrap:wrap}canvas{max-height:75vh}}@media(max-width:600px){header{flex-wrap:wrap}nav{gap:12px;font-size:12px}main{padding:18px 12px}h1{font-size:32px}.bar{font-size:10px;padding:8px}.touch button{padding:9px 10px;font-size:10px}.title{gap:10px}.setup{width:100%}canvas{min-height:360px}aside{padding:16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.play-shell{align-self:start} aside>img{height:180px}