:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#111014;color:#efedf3;line-height:1.5}*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:16px}header{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}h1{font-size:1.2rem;margin:0}header span,.help,small{color:#bbb6c6;font-size:.9rem}button{font:inherit;min-height:44px;padding:8px 14px;color:inherit;background:#29252f;border:1px solid #766b84;border-radius:4px;cursor:pointer}button:hover{background:#39323f}button:disabled{opacity:.45;cursor:default}button:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #d4acff;outline-offset:3px}#start{background:#69408c;border-color:#c59ce5}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}#viewport{position:relative;background:#000;aspect-ratio:4/3;max-height:75vh;margin:auto;width:min(100%,calc(75vh * 4 / 3))}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;object-fit:fill}#veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;background:#000b;pointer-events:none}#veil[hidden]{display:none}#status{min-height:1.5em;margin:10px 0}#status.error{color:#ffb3ae}.help{margin:10px 0}details{border-top:1px solid #4d4558;margin-top:16px;padding-top:10px}summary{cursor:pointer;padding:5px 0}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;color:#c9c3d2}#touch{display:flex;justify-content:space-between;gap:16px;margin:14px 0;flex-wrap:wrap}.dpad{display:grid;grid-template-columns:repeat(3,48px);gap:4px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#touch button{touch-action:none;user-select:none;min-width:48px}#touch button.held{background:#69408c}#storage{display:block}#viewport:fullscreen{width:100vw;height:100vh;max-height:none;aspect-ratio:auto;display:grid;place-items:center}#viewport:fullscreen canvas{width:min(100vw,calc(100vh * 4 / 3));height:min(100vh,75vw)}@media(max-width:480px){main{padding:10px}.toolbar button{flex:1}header{gap:4px}#touch{gap:8px}.actions{gap:4px}.actions button{padding:8px}pre{font-size:.75rem}}

@font-face{font-family:Galmuri;src:url('/assets/fonts/Galmuri11.woff2') format('woff2');font-display:swap}
:root{background:#000;color:#fff4d6;font-family:Galmuri,monospace;line-height:1.8}main{padding:20px;max-width:1000px}header{gap:8px 20px;padding-block:16px;border-block:1px solid #40516f}h1{font-size:clamp(18px,4vw,26px)}header span,.help,small{color:#b8c7d9}a{color:#74dab9;text-underline-offset:4px}.play-nav{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}.play-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}.play-brand{color:#fff4d6;font-size:16px!important}button{border-radius:0;min-height:48px;background:#2d4260;color:#fff4d6;border:2px solid #91a4ba;box-shadow:inset 2px 2px 0 #526b8c,inset -2px -2px 0 #101827;font-size:14px}button:hover{background:#3b5578}button:disabled{opacity:1;color:#94a6be;background:#19263b;border-color:#40516f;box-shadow:none}#start{background:#74dab9;color:#101827;border-color:#fff4d6}#touch button.held{background:#74dab9;color:#101827}:is(a,button,summary,canvas):focus-visible{outline:3px solid #ffd166;outline-offset:3px}#viewport{border:2px solid #40516f}#status{padding:12px;border:1px solid #40516f;background:#19263b;overflow-wrap:anywhere;min-height:72px}#status.error{color:#ffb3ae;border-color:#ffb3ae}#restartPrompt{border:2px solid #ffd166;padding:12px;background:#19263b}#restartPrompt p{margin:0}.play-note{font-size:13px;overflow-wrap:anywhere;color:#b8c7d9}.play-note strong{color:#ffd166}details{border-color:#40516f}summary{min-height:44px}.license-links{display:flex;flex-wrap:wrap;gap:4px 16px}.license-links a{display:inline-flex;align-items:center;min-height:44px}#storage{margin-top:16px}small{display:block}footer{margin-top:24px;border-top:1px solid #40516f;padding-top:12px;font-size:12px}pre{color:#b8c7d9}#touch{align-items:start}.actions{flex:1;justify-content:flex-end}.actions button{flex:0 1 auto;min-width:56px}.dpad{flex:none}
@media(max-width:480px){main{padding:12px}header{align-items:start;flex-direction:column}.toolbar{gap:8px}.toolbar button{flex:1 1 40%;padding:8px;font-size:13px}.actions{justify-content:flex-start;width:100%;flex-basis:100%;gap:6px}.actions button{flex:1 1 25%;min-width:60px;padding:8px}.help{font-size:13px}#viewport{max-height:60vh}#veil{padding:12px;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#main{max-width:1280px}
.play-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-block:16px 20px;align-items:start}
.game-surface,.checkpoint-panel{min-width:0}
.play-layout #viewport:not(:fullscreen){width:100%;max-height:none}
.checkpoint-panel{margin:0;padding:16px;border:1px solid #777;background:#111;color:#eee;overflow-wrap:anywhere}
.checkpoint-heading{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:baseline}
.checkpoint-heading h2{font-size:1rem;margin:0}
.checkpoint-heading span,.checkpoint-panel .help{color:#bbb;font-size:13px}
.checkpoint-panel p{margin-block:10px}
.checkpoint-panel .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block:10px}
.checkpoint-panel button{min-height:44px;min-width:0;width:100%;padding:8px 6px;white-space:normal;background:#222;color:#eee;border:1px solid #888;box-shadow:none;border-radius:0}
.checkpoint-panel button:hover:not(:disabled){background:#393939}
.checkpoint-panel button:disabled{color:#888;background:#171717;border-color:#444;opacity:1}
.checkpoint-panel button:focus-visible,.checkpoint-help summary:focus-visible{outline:3px solid #fff;outline-offset:3px}
.checkpoint-panel [hidden]{display:none!important}
.checkpoint-panel .checkpoint-backups{border-block-start:1px solid #555;padding-block-start:12px}
.checkpoint-help{margin-block-start:12px;padding-block-start:8px;border-color:#555}
.checkpoint-help summary{min-height:44px;font-size:13px}
#checkpointStatus{min-height:3.6em;border-block-start:1px solid #555;padding-block-start:10px;font-size:13px}
#checkpointStatus.error{color:#fff;border-inline-start:3px solid #eee;padding-inline-start:10px}
#checkpointDate{font-size:13px;font-variant-numeric:tabular-nums}
#checkpointPrompt{border:2px solid #ddd;padding:12px;background:#1b1b1b}
#checkpointPrompt p{margin-block-start:0}
#checkpointAccept{background:#e5e5e5;color:#111;border-color:#fff}
#checkpointAccept:hover:not(:disabled){background:#fff}
@media(min-width:960px){
  .play-layout{grid-template-columns:minmax(0,1fr) 288px;gap:20px}
  .play-layout #viewport:not(:fullscreen){width:min(100%,calc((100svh - 300px)*4/3))}
}
@media(max-width:959px){
  #main header{flex-direction:row;align-items:baseline;gap:4px 12px;padding-block:8px}
  #main header span{font-size:12px}
  #main .play-note{font-size:12px;line-height:1.5;margin-block:8px}
  .game-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-block:10px}
  .game-controls button{min-width:0;min-height:44px;padding:6px 4px;font-size:13px}
  .play-layout{margin-block-start:10px}
  .play-layout #touch{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;margin:12px 0 0}
  .play-layout #touch .dpad{grid-template-columns:repeat(3,44px);gap:4px}
  .play-layout #touch .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:auto;flex-basis:auto}
  .play-layout #touch button{min-width:44px;min-height:44px;padding:6px;font-size:13px;overflow-wrap:anywhere}
  .checkpoint-panel{padding:12px}
}
@media(max-width:340px){.play-layout #touch{grid-template-columns:minmax(0,1fr)}.play-layout #touch .actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:300px){.checkpoint-panel .toolbar{grid-template-columns:1fr}.game-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}