:root{color-scheme:dark;--bg:#09051c;--text:#f4f0ff;--muted:#c2b6d8;--cyan:#69fff5;--line:#b886ef40;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
:root[data-theme="living-signal"]{--bg:#100e1c;--text:#f6ecdf;--muted:#c1afcf;--cyan:#b9ead6;--line:#d8bce42b}
:root[data-theme="gravity-field"]{--bg:#080910;--text:#f5eee4;--muted:#b9b6cc;--cyan:#f0d6aa;--line:#cebba140}
:root[data-theme="particle-playground"]{--bg:#090b17;--text:#f1f0e8;--muted:#b8b8d4;--cyan:#d3ff86;--line:#c6c3ef40}
:root[data-theme="raven-threshold"]{--bg:#090a09;--text:#eee5d6;--muted:#bfb5a6;--cyan:#efb76e;--line:#efb76e40;font-family:Georgia,serif}
:root[data-theme="creative-workshop"]{--bg:#f8f7f3;--text:#20221f;--muted:#5b655e;--cyan:#284fe6;--line:#284fe640;color-scheme:light}
:root[data-theme="quiet-studio"]{--bg:#f3efe6;--text:#203d32;--muted:#5b655e;--cyan:#203d32;--line:#203d3240;font-family:Georgia,serif;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0,#74267c25,transparent 50%)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;background:transparent;border:1px solid var(--line);padding:11px 16px}button:hover:not(:disabled),a:hover{color:var(--cyan);border-color:var(--cyan)}button:disabled{opacity:.35;cursor:default}:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}[hidden]{display:none!important}
header{min-height:90px;border-bottom:1px solid var(--line);padding:20px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:23px;font-weight:600;letter-spacing:-1px}.brand span{display:inline-block;width:7px;height:7px;background:var(--cyan);margin-left:8px;border-radius:50%}.header-actions{display:flex;align-items:center;gap:28px;font-size:13px}#language{font-family:Consolas,monospace}
main{max-width:1100px;padding:54px 30px 35px;margin:auto}.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}h1{font-size:clamp(32px,4vw,52px);font-weight:500;letter-spacing:-2px;margin:0 0 14px}h1 em{font-style:normal;color:var(--cyan)}p{line-height:1.6}.intro p{font-size:15px;color:var(--muted);margin:0;max-width:620px}.edition{font:12px Consolas,monospace;color:var(--muted);white-space:nowrap;padding-bottom:4px}
#arcade{border:1px solid var(--line);background:#06050e}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:#131022;border-bottom:1px solid var(--line);font:12px Consolas,monospace}.toolbar>div{display:flex;gap:8px}.toolbar button{padding:9px 12px}#status{color:var(--cyan)}
#screen{position:relative;width:100%;aspect-ratio:16/10;max-height:65vh;min-height:290px;background:#000;overflow:hidden}#screen iframe{position:absolute;inset:0;border:0;width:100%;height:100%}#welcome,#loading{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;background:radial-gradient(ellipse at 50% 50%,#222036,#06050e 72%)}.screen-title{font-size:clamp(60px,10vw,128px);font-weight:900;letter-spacing:-7px;color:#e3def0;line-height:1.1}#welcome>p{color:var(--muted);font:13px Consolas,monospace}.play{margin:16px 0;background:var(--cyan);color:#09051c;font-weight:700;min-width:170px;border:0;padding:17px 30px}.play:hover:not(:disabled){background:#b0fff9;color:#09051c}.hint{max-width:300px;font-size:11px!important;line-height:1.7!important}#loading p{font-size:23px}#loading span{color:var(--muted);font-size:13px}.under-player{display:flex;justify-content:space-between;gap:30px;color:var(--muted);font-size:12px}.under-player p{max-width:560px}
.controls{margin-top:28px}h2{font-size:22px;font-weight:400;letter-spacing:-.5px}dl{display:grid;grid-template-columns:repeat(8,1fr);gap:16px;margin-top:24px}dt{min-height:35px;white-space:nowrap;font-size:12px}kbd{font:12px Consolas,monospace;border:1px solid var(--line);background:#181328;padding:6px;display:inline-block;margin-right:3px}dd{margin:8px 0;color:var(--muted);font-size:12px}footer{display:flex;justify-content:space-between;gap:20px;margin:10px 5% 0;padding:24px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}footer a{text-decoration:underline;text-underline-offset:4px}
.touch-controls{display:flex;justify-content:space-between;gap:16px;padding:14px}.touch-controls button{touch-action:none;user-select:none;-webkit-user-select:none;min-width:44px;min-height:44px;padding:10px}.dpad{display:grid;grid-template-columns:repeat(3,44px);gap:5px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.action-pad{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.action-pad button:first-child{color:var(--cyan)}#arcade:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;border:0}#arcade:fullscreen #screen{flex:1;max-height:none;min-height:0;aspect-ratio:auto}#arcade:fullscreen .toolbar{flex-shrink:0}
@media(min-width:801px) and (pointer:fine){.touch-controls{display:none}}
@media(max-width:800px){main{padding:35px 20px}.intro{display:block}.edition{display:block;margin-top:16px}dl{grid-template-columns:repeat(4,1fr);row-gap:22px}.under-player{display:block}.under-player p{margin:12px 0}#screen{min-height:0;aspect-ratio:4/3;max-height:none}header{padding:18px 20px;min-height:78px}.brand{font-size:19px}.header-actions{gap:12px;font-size:11px}#language{padding:8px}footer{flex-direction:column;gap:12px}.toolbar{padding:10px;font-size:11px}.toolbar button{padding:8px}.screen-title{letter-spacing:-4px}.play{margin:8px 0;padding:13px 25px}#welcome{padding:12px}#welcome p{margin:8px 0}.hint{max-width:260px}}
@media(max-width:360px){main{padding-inline:12px}.toolbar{flex-wrap:wrap}.brand{font-size:16px}.header-actions{gap:8px}.touch-controls{padding:9px;gap:10px}}
/* Keep translated action labels inside their buttons on narrow phones. */
@media(max-width:420px){.touch-controls{flex-direction:column;align-items:center}.action-pad{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep the arcade chrome in the palette of the originating site. */
.toolbar,kbd{background:var(--bg)}
#welcome,#loading{background:radial-gradient(ellipse at center,var(--bg),#06050e 80%);--muted:#c2bfd0}
.play:hover:not(:disabled){background:var(--cyan);filter:brightness(1.15)}
[data-theme="creative-workshop"] .play,[data-theme="quiet-studio"] .play{color:#fff}
[data-theme="raven-threshold"] h1 em{font-style:italic}
[data-theme="living-signal"] .play,[data-theme="particle-playground"] .play{border-radius:40px}
