:root { --paper:#eff0e5; --ink:#1d241e; --night:#101713; --acid:#d7fb34; --muted:#667166; --line:rgba(29,36,30,.22); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--paper); font:14px/1.5 Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.74; background:radial-gradient(circle at 80% 9%,rgba(215,251,52,.18),transparent 25%),linear-gradient(rgba(29,36,30,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(29,36,30,.045) 1px,transparent 1px); background-size:auto,34px 34px,34px 34px; }
.runtime-main { width:min(1140px,calc(100% - 36px)); margin:0 auto; padding:26px 0 52px; }
.runtime-head { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:0 0 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.runtime-brand { color:var(--ink); font:600 30px/.9 Arial,sans-serif; letter-spacing:-.11em; text-decoration:none; }.runtime-brand b { color:#82a900; font-weight:500; }
.runtime-back,.runtime-button { border:1px solid var(--line); padding:9px 12px; color:var(--ink); background:rgba(255,255,255,.43); font:10px var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; cursor:pointer; }
.runtime-eyebrow { margin:44px 0 12px; color:#668203; font:10px var(--mono); text-transform:uppercase; letter-spacing:.11em; }.runtime-eyebrow span { color:var(--ink); padding-right:13px; margin-right:13px; border-right:1px solid var(--line); }
h1 { max-width:850px; margin:0; font-size:clamp(40px,7vw,76px); line-height:.9; letter-spacing:-.08em; font-weight:500; }.runtime-intro { max-width:790px; margin:22px 0 32px; color:#4e5b50; font-size:16px; }
.runtime-panel { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:22px; padding:18px; border:1px solid var(--line); background:rgba(255,255,255,.43); box-shadow:12px 14px 0 rgba(29,36,30,.07); }
.runtime-play-area { min-width:0; overflow:hidden; background:var(--night); border:1px solid #8eb700; box-shadow:inset 0 0 0 1px rgba(215,251,52,.18); }.runtime-frame { display:block; width:100%; aspect-ratio:16/9; border:0; background:var(--night); outline:0; }
.runtime-play-area:fullscreen { width:100vw; height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:stretch; background:var(--night); }.runtime-play-area:fullscreen .runtime-frame { width:100%; height:100vh; max-height:none; aspect-ratio:auto; }
.runtime-result { display:grid; align-content:start; gap:12px; padding:7px; }.runtime-kicker { color:#668203; font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; }.runtime-status { min-height:88px; padding:12px; border:1px solid rgba(29,36,30,.25); background:#172016; color:#efffd4; font:11px/1.45 var(--mono); white-space:pre-wrap; }
.runtime-facts { margin:0; display:grid; border-top:1px solid var(--line); }.runtime-facts div { padding:10px 0; border-bottom:1px solid var(--line); }.runtime-facts dt { color:#6d7a6f; font:9px var(--mono); text-transform:uppercase; }.runtime-facts dd { margin:4px 0 0; font-size:12px; }
.runtime-notice { margin:26px 0 0; padding:15px 18px; border-left:3px solid #88ad00; background:rgba(215,251,52,.13); color:#455246; font-size:13px; }.runtime-notice strong { color:var(--ink); }.runtime-notice a { color:inherit; }
.runtime-controls { display:none; min-height:152px; padding:12px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(135deg,#101713,#344119); user-select:none; -webkit-user-select:none; touch-action:none; }.runtime-control-cluster { display:grid; justify-items:center; gap:5px; min-width:142px; }.runtime-control-label { color:#d7fb34; font:9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.runtime-dpad,.runtime-actions { display:grid; gap:7px; }.runtime-dpad { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,52px); }.runtime-dpad [data-key="ArrowUp"] { grid-column:2; }.runtime-dpad [data-key="ArrowLeft"] { grid-column:1; grid-row:2; }.runtime-dpad [data-key="ArrowDown"] { grid-column:2; grid-row:2; }.runtime-dpad [data-key="ArrowRight"] { grid-column:3; grid-row:2; }.runtime-actions { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,52px); }.runtime-pad { display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(215,251,52,.9); border-radius:50%; color:#f3ffe0; background:rgba(16,23,19,.96); box-shadow:0 3px 0 rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.08); font:700 14px var(--mono); touch-action:none; -webkit-tap-highlight-color:transparent; }.runtime-pad--action { border-color:#fbdb3b; background:#556813; }.runtime-pad--wide { width:111px; grid-column:1 / span 2; border-radius:28px; color:#efffd4; font-size:9px; letter-spacing:.08em; }.runtime-pad:active,.runtime-pad.is-active { transform:translateY(2px); background:#88a900; color:#101713; box-shadow:0 1px 0 rgba(0,0,0,.3); }.runtime-touch-note { max-width:230px; margin:0; color:#d7e8c5; font:10px/1.45 var(--mono); text-align:center; }.runtime-touch-note strong { color:#fff; font-size:11px; }.runtime-controller-status { display:block; margin-top:6px; color:#b5cda1; font-size:9px; }.runtime-controller-status.is-gamepad { color:#f4fc91; }
@media (max-width:760px) { .runtime-main { width:min(100% - 24px,680px); padding-top:18px; }.runtime-panel { grid-template-columns:1fr; }.runtime-controls { display:flex; }.runtime-intro { font-size:14px; }.runtime-frame { max-height:54vh; }.runtime-play-area:fullscreen .runtime-controls { display:flex; }.runtime-play-area:fullscreen .runtime-frame { height:calc(100vh - 152px); } }
@media (max-width:540px) { .runtime-main { width:100%; padding-top:0; }.runtime-panel { gap:0; padding:0; border:0; box-shadow:none; }.runtime-controls { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"dpad action" "note note"; justify-items:center; gap:7px 8px; padding:9px max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }.runtime-control-cluster { min-width:0; }.runtime-control-cluster:first-child { grid-area:dpad; }.runtime-control-cluster:last-child { grid-area:action; }.runtime-touch-note { grid-area:note; max-width:none; font-size:9px; }.runtime-dpad,.runtime-actions { grid-template-columns:repeat(3,44px); grid-template-rows:repeat(2,44px); }.runtime-pad { width:44px; height:44px; font-size:12px; }.runtime-pad--wide { width:95px; font-size:8px; }.runtime-control-label { font-size:8px; }.runtime-play-area:fullscreen .runtime-frame { height:calc(100vh - 134px); } }
@media (min-width:761px) { .runtime-play-area:fullscreen .runtime-controls { display:none; } }