:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#f3f4f6}*{box-sizing:border-box}body{margin:0;padding:12px;background:radial-gradient(circle at 18% 0%,#2563eb1f,transparent 30rem),linear-gradient(135deg,#111827,#030712 58%,#000);min-height:100vh;background-attachment:fixed}.shell{max-width:640px;margin:auto}header,main{border:1px solid #ffffff1a;border-radius:16px;background:#ffffff09;box-shadow:0 24px 60px #0005}header{padding:28px;margin-bottom:24px;text-align:center;background:radial-gradient(ellipse at center,#143d67,transparent)}h1{margin:10px 0;color:#dbeafe;font-family:monospace;font-size:clamp(32px,9vw,64px);letter-spacing:.08em;text-shadow:3px 3px #1569a1,6px 6px #040c1a}.eyebrow{font-size:11px;letter-spacing:.15em;color:#93c5fd}p{margin:0;font-size:13px;color:#9ca3af;line-height:1.6}main{padding:24px;display:grid;gap:16px}.scoreboard{display:flex;justify-content:space-between;gap:8px;font:11px monospace;color:#93c5fd}.scoreboard b{display:block;margin-top:5px;font-size:17px;color:#fff}.frame{padding:4px;border:1px solid #93c5fd59;border-radius:10px;background:#030712}canvas{display:block;width:100%;height:auto;touch-action:none;border-radius:6px;cursor:none}.controls{display:flex;flex-wrap:wrap;gap:8px}button{flex:1;border:1px solid #60a5fa44;background:#111827;border-radius:9px;padding:11px;color:#dbeafe;font:inherit;font-size:12px;cursor:pointer}button:first-child{background:#2563eb40}button:hover{background:#2563eb55}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:2px solid #bfdbfe;outline-offset:3px}#status{color:#93c5fd}.hint,.edition{font-size:12px}details{border-top:1px solid #ffffff1a;padding-top:14px;color:#9ca3af;font-size:13px}summary{cursor:pointer;color:#dbeafe}details p{margin-top:12px}.edition{color:#6b7280}@media(max-width:420px){main{padding:12px}header{padding:20px}.scoreboard b{font-size:14px}}
/* Footer shared with franz.kraibacher.com */
.site-footer{margin-top:24px;padding:0 0 24px;text-align:left;display:grid;gap:20px}
.site-footer>div{padding:24px;border:1px solid #ffffff1a;border-radius:16px;background:#ffffff09;box-shadow:0 24px 60px #0005;backdrop-filter:blur(10px);font-size:14px;line-height:1.625;color:#9ca3af}
.site-footer h2{margin:0 0 16px;color:#e5e7eb;font-size:16px;font-weight:600;line-height:1.5}
.site-footer>div p{font-size:14px;line-height:1.625;margin-bottom:16px}
.site-footer>div p:last-child{margin-bottom:0}
.site-footer strong{color:#e5e7eb}
.site-footer>div a{color:#60a5fa}
.site-footer>div a:hover{color:#bfdbfe}
.site-footer>p{font-size:12px;text-align:center;color:#6b7280}
.site-footer>p:first-of-type{padding-bottom:16px;border-bottom:1px dotted #ffffff26}
.site-footer>p:last-child{color:#4b5563}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:12px}
.site-footer>p a,.site-footer nav a{color:#6b7280}
.site-footer>p a:hover,.site-footer nav a:hover{color:#d1d5db}

.site-footer a{text-decoration:none}
/* Atari ST screen proportions */
.shell{max-width:960px}.frame{padding:0;border-radius:0;border-color:#333}canvas{border-radius:0;image-rendering:pixelated}.scoreboard{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.site-footer{max-width:640px;margin-left:auto;margin-right:auto}

/* Responsive arcade cabinet: fit both screen width and available height. */
body{padding:clamp(8px,1.5vw,24px)}
.shell{width:100%;max-width:1440px}
header{padding:16px 24px;margin-bottom:16px}
h1{font-size:clamp(28px,4vw,44px);margin:6px 0}
main{padding:clamp(10px,1.8vw,24px);gap:12px}
.frame{width:min(100%,calc((100svh - 240px)*1.6));min-width:0;justify-self:center;aspect-ratio:8/5;overflow:hidden}
canvas{width:100%;height:100%;aspect-ratio:8/5}
.controls{justify-content:center}
.controls button{flex:0 1 160px;min-height:44px;font-size:14px;padding:10px 14px}
#status,.hint{text-align:center}
.frame:fullscreen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border:0;display:flex;align-items:center;justify-content:center;background:#000}
.frame:fullscreen canvas{width:min(100vw,160vh);height:auto;max-height:100vh;aspect-ratio:8/5}
@media(max-width:600px){
  header{padding:12px;margin-bottom:10px}
  header>p:last-child{display:none}
  main{padding:8px;gap:10px}
  .frame{width:100%}
  .controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .controls button{font-size:13px;min-height:44px}
  #fullscreen{grid-column:1/-1}
}
@media(max-height:500px) and (min-width:601px){
  header{display:none}
  .frame{width:min(100%,calc((100svh - 112px)*1.6))}
  main{padding:8px;gap:8px}
  .hint{font-size:11px}
}
/* Draw bevels and chrome at the actual display resolution. */
canvas{image-rendering:auto}

header.image-banner{padding:0;overflow:hidden;background:#050c1c;margin-bottom:16px}
.image-banner img{display:block;width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){header.image-banner{margin-bottom:10px}}
/* Keep the banner aligned with the arcade screen, including card padding. */
.shell{--game-padding:clamp(10px,1.8vw,24px);--arcade-width:calc((100svh - 240px)*1.6)}
header.image-banner{width:min(calc(100% - 2*var(--game-padding) - 2px),var(--arcade-width));margin-left:auto;margin-right:auto}
@media(max-width:600px){.shell{--game-padding:8px}header.image-banner{width:calc(100% - 18px)}}
@media(max-height:500px) and (min-width:601px){.shell{--game-padding:8px;--arcade-width:calc((100svh - 112px)*1.6)}}
/* The card shares the banner width; the game fills its inner space. */
main{width:min(calc(100% - 2*var(--game-padding) - 2px),var(--arcade-width));margin-left:auto;margin-right:auto}
main .frame{width:100%}
@media(max-width:600px){main{width:calc(100% - 18px)}}
.level-picker{display:grid;grid-template-columns:auto 44px minmax(0,1fr) 44px;gap:8px;align-items:center;padding-bottom:2px}
.level-picker label{font-size:13px;color:#bfdbfe;margin-right:8px}
.level-picker select{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #60a5fa44;border-radius:9px;background:#101b2b;color:#dbeafe;font:inherit;font-size:14px;cursor:pointer}
.level-picker button{min-height:44px;padding:8px;font-size:20px}
.level-picker-hint{font-size:12px;text-align:center;color:#7f91a7}
@media(max-width:600px){.level-picker{grid-template-columns:40px minmax(0,1fr) 40px}.level-picker label{grid-column:1/-1}.level-picker select{font-size:13px}.level-picker-hint{font-size:11px}}
.slider-zone{display:none}
@media(max-width:1000px){
  main .scoreboard{position:static;width:auto;height:auto;padding:10px 12px;overflow:visible;clip-path:none;white-space:normal;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border:1px solid #29415a;border-radius:10px;background:linear-gradient(145deg,#14243a,#080e18);font-size:10px}
  .scoreboard b{font-size:clamp(12px,3.4vw,17px);font-variant-numeric:tabular-nums}
  main .frame,canvas{aspect-ratio:448/400}
  .slider-zone{display:grid;gap:8px;min-height:84px;padding:12px 16px;border:1px solid #315a7e;border-radius:12px;background:linear-gradient(180deg,#162c44,#0b1525);box-shadow:inset 0 1px #ffffff12;touch-action:none}
  .slider-zone label{font-size:12px;color:#93c5fd;text-align:center}
  #paddle-slider{appearance:none;-webkit-appearance:none;display:block;width:100%;height:36px;margin:0;background:transparent;cursor:ew-resize;touch-action:none}
  #paddle-slider::-webkit-slider-runnable-track{height:10px;border:1px solid #43617b;border-radius:6px;background:#050c17}
  #paddle-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:54px;height:32px;margin-top:-12px;border:2px solid #e6f4ff;border-radius:8px;background:linear-gradient(90deg,#ed2537 0 12%,#a8c5d8 12% 88%,#ed2537 88%);box-shadow:0 3px 9px #0008}
  #paddle-slider::-moz-range-track{height:10px;border:1px solid #43617b;border-radius:6px;background:#050c17}
  #paddle-slider::-moz-range-thumb{width:50px;height:28px;border:2px solid #e6f4ff;border-radius:8px;background:linear-gradient(90deg,#ed2537 0 12%,#a8c5d8 12% 88%,#ed2537 88%)}
  main:fullscreen{width:100%;height:100svh;max-width:none;margin:0;border:0;border-radius:0;padding:8px;overflow:auto;display:flex;flex-direction:column;gap:8px;background:#030712}
  main:fullscreen>.level-picker,main:fullscreen>.level-picker-hint,main:fullscreen>.hint,main:fullscreen>details,main:fullscreen>.edition,main:fullscreen>#status{display:none}
  main:fullscreen>.frame{width:min(100%,calc((100svh - 226px)*1.12));min-height:0;flex-shrink:0;align-self:center}
  main:fullscreen>.slider-zone{width:min(100%,calc((100svh - 226px)*1.12));align-self:center;flex-shrink:0}
  main:fullscreen>.controls{display:flex;flex-wrap:wrap}
  main:fullscreen>.controls button{flex:1;min-width:55px;padding:8px 4px;font-size:11px}
}
.controls #launch.laser-active{background:linear-gradient(180deg,#e53946,#a91225);border-color:#ff7884;color:#fff;font-weight:700;box-shadow:0 0 16px #ef334033,inset 0 1px #ffffff35}
.controls #launch.laser-active:hover{background:linear-gradient(180deg,#fa4b58,#c71930);border-color:#ffacb3}