:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#060810;color:#eef2ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#17223d,transparent 65%)}main{max-width:620px;margin:auto;padding:24px 20px}header{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:#7585a5}a{color:#97aaca;text-decoration:none}h1{text-align:center;font-size:clamp(48px,12vw,76px);letter-spacing:6px;margin:18px 0 0;color:#ffe348;font-weight:950;text-shadow:0 0 35px #ffdb3440}.tagline{text-align:center;color:#98a7c4;margin:4px 0 24px}.scores{display:flex;justify-content:space-between;padding:15px 4px;font-size:10px;letter-spacing:2px;color:#8f9bbc}.scores b{display:block;font-size:21px;letter-spacing:1px;color:#fff;margin-top:5px;font-variant-numeric:tabular-nums}.scores div:last-child b{color:#ffe348}.frame{position:relative;background:#000;border:1px solid #293c73;border-radius:15px;overflow:hidden;box-shadow:0 0 65px #2744ad30}canvas{display:block;width:100%;touch-action:none}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#030611cc;text-align:center;padding:20px}#overlay[hidden]{display:none}h2{color:#ffe348;letter-spacing:5px;font-size:30px}button{border:1px solid #334265;border-radius:9px;background:#172039;color:#edf2ff;padding:12px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}button:hover{background:#263759}button:focus-visible,a:focus-visible{outline:3px solid #ffe348;outline-offset:3px}#play{background:#ffe348;color:#171713;border:0;padding:14px 30px}#status{text-align:center;min-height:35px;color:#aebbd6;font-size:13px}.buttons{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.dpad{text-align:center;margin:18px auto}.dpad button{width:58px;height:48px;margin:3px;touch-action:manipulation}.hint{text-align:center;color:#74829f;font-size:12px;line-height:1.8}details,footer{border-top:1px solid #26314b;padding:20px 0;color:#a0aec9;font-size:13px;line-height:1.8}summary{cursor:pointer}footer{font-size:11px;text-align:center;color:#6e7b98}nav{margin:12px}@media(min-width:850px){.dpad{display:none}}@media(max-width:400px){main{padding:15px 10px}.scores b{font-size:17px}}
/* The game scales to the available viewport; banner and footer stay outside fullscreen. */
main{max-width:960px;padding:20px clamp(10px,3vw,28px)}
.image-banner{margin:18px 0 24px;border-radius:16px;overflow:hidden;border:1px solid #28385a;background:#0b1428;aspect-ratio:3/1}
.image-banner img{display:block;width:100%;height:100%;object-fit:cover}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#arcade{--board-width: min(100%,500px);max-width:620px;margin:0 auto;scroll-margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 12px}
.scores{width:100%;max-width:560px;padding:8px 6px;flex-shrink:0;position:sticky;top:0;background:#060810f5;z-index:2;border-radius:8px}
.frame{width:var(--board-width);max-width:100%;flex-shrink:0}
canvas{width:100%;height:auto;aspect-ratio:560/620}
#status{margin:2px 0;min-height:18px;font-size:12px;line-height:1.5;max-width:560px}
.buttons{flex-shrink:0;width:100%;gap:6px}
.buttons button{padding:10px 12px}
.dpad{margin:0;flex-shrink:0}
.dpad button{height:40px;padding:6px;margin:2px}
#arcade:fullscreen{max-width:none;width:100%;height:100dvh;margin:0;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));background:#060810;overflow:auto;justify-content:center;gap:6px}
#arcade:fullscreen .scores{position:static}
#arcade:fullscreen .buttons{max-width:560px}
@media(pointer:coarse){.dpad{display:block}}
@media(max-height:500px) and (orientation:landscape){.dpad{display:none}#status{display:none}.scores b{font-size:16px}.scores{padding:4px 6px}.buttons button{padding:7px 10px}}

/* 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}

.site-footer{max-width:640px;margin:28px auto 0;background:transparent;border:0;border-radius:0;letter-spacing:normal}.site-footer p{margin-top:0}.site-footer nav{margin:0}.more-games{border:0;padding:0;line-height:2.5}