:root{color-scheme:dark;--ink:#f3f3dc;--faint:#b6c5ac;--border:#3e5140;--green:#a9e165;--shadow:#0b120e;font:16px system-ui,"Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:#131d17;color:var(--ink);overscroll-behavior:none}
body{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at 48% 13%,#304831,#17241b 56%,#111a15 85%)}
button{font:inherit;color:inherit;cursor:pointer;touch-action:none;border:1px solid #52634d;background:#25392a;border-radius:5px;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid #ffe58a;outline-offset:3px}
button:active,.held{transform:translateY(2px);filter:brightness(1.22)}
.cabinet{width:min(100%,calc((100dvh - 138px)*16/9),1200px);padding:8px 12px;margin:auto}
.topbar{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.1em}
.brand small{display:block;margin-top:2px;color:var(--faint);font-size:9px;letter-spacing:.19em}
.cube{display:block;width:27px;height:26px;background:linear-gradient(180deg,#9fdb62 0 29%,#956943 29%);border-top:5px solid #d3f99d;border-right:5px solid #526f36;box-shadow:0 3px 0 var(--shadow)}
.tools{display:flex;gap:6px}
.tools button{min-height:36px;padding:3px 10px;font-size:12px;font-weight:750}
.screen{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;background:#7cc9df;border:2px solid var(--border);box-shadow:0 5px 0 var(--shadow),0 18px 60px #080f0b80;touch-action:none}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.hud{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;padding:10px 5%;color:white;background:linear-gradient(#0e231cbd,transparent);pointer-events:none;text-shadow:2px 2px #18241d}
.hud span{display:grid;gap:2px;justify-items:center}
.hud small{font-size:clamp(8px,1.3vw,12px);font-weight:750;color:#edf3e5}
.hud b{font:900 clamp(13px,2.1vw,24px) ui-monospace,monospace;letter-spacing:.06em}
.hud .gold{color:#ffdc70}
.overlay{position:absolute;inset:0;display:grid;align-items:center;padding:0 7%;background:linear-gradient(90deg,#12241aee,#14281aa1 48%,#14281a12 88%)}
.panel{width:fit-content;max-width:100%}
#eyebrow{font-size:clamp(9px,1.4vw,13px);font-weight:850;letter-spacing:.2em;color:#c7efa4;margin:0 0 10px;display:flex;align-items:center;gap:10px}
#eyebrow i{width:5px;height:5px;background:#c7efa4}
h1{margin:0;line-height:1.02;font-size:clamp(26px,6.9vw,86px);letter-spacing:-.04em;font-weight:1000;text-shadow:3px 4px #233927,5px 7px #12261b}
#description{margin:clamp(8px,2vw,22px) 0;color:#e7efdd;font-size:clamp(10px,1.55vw,16px);font-weight:650;line-height:1.45}
.actions{display:flex;gap:8px}
.actions button{min-height:clamp(30px,5vw,51px);padding:4px clamp(9px,2vw,22px);box-shadow:0 4px #111b13;font-size:clamp(10px,1.7vw,16px);font-weight:900}
.actions .primary{background:var(--green);color:#142317;border-color:#c4f099;box-shadow:0 4px #537b38}
.primary span{margin-left:8px;font-size:.8em}
.notice{position:absolute;top:16%;left:50%;translate:-50% 0;margin:0;background:#16291ce8;padding:6px 12px;text-align:center;font-size:clamp(10px,1.5vw,15px);white-space:nowrap;pointer-events:none;border:1px solid #74915d}
.cabinet.playing{position:fixed;inset:0;width:100%;margin:0;padding:0;overflow:hidden}
.playing .screen{position:absolute;inset:0;border:0;box-shadow:none;aspect-ratio:auto}
.playing .topbar{position:absolute;z-index:2;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));min-height:0;margin:0}
.playing .brand,.playing footer{display:none}
.playing .tools button{min-height:40px;background:#16291ce8}
.playing .hud{padding:max(12px,env(safe-area-inset-top)) 6px 12px max(16px,env(safe-area-inset-left));padding-right:max(195px,calc(env(safe-area-inset-right) + 178px))}
.playing .overlay{padding-inline:max(7%,env(safe-area-inset-left))}
.controller{
  --pad-size:clamp(54px,9.6vmin,90px);
  --pad-gap:7px;
  --grip:clamp(12px,3.2vmin,32px);
  --thumb-x:calc(14% - var(--pad-size) - var(--pad-gap)/2);
  --thumb-y:calc(14% - var(--pad-size)*.785 - var(--pad-gap)/2);
  display:none;position:absolute;z-index:2;justify-content:space-between;align-items:end;pointer-events:none;user-select:none;
  left:max(calc(env(safe-area-inset-left) + var(--grip)),var(--thumb-x));
  right:max(calc(env(safe-area-inset-right) + var(--grip)),var(--thumb-x));
  bottom:max(calc(env(safe-area-inset-bottom) + var(--grip)),var(--thumb-y));
}
.dpad{display:grid;grid-template-columns:repeat(2,var(--pad-size));gap:var(--pad-gap)}
.pad-actions{display:flex;align-items:end;gap:var(--pad-gap);padding-bottom:calc(var(--pad-size)*.32)}
.controller button{pointer-events:auto;width:var(--pad-size);height:var(--pad-size);font-weight:950;font-size:clamp(19px,4vmin,34px);box-shadow:0 4px #0d1710b3,inset 0 1px #ffffff38;border-radius:12px}
.dpad button{background:#182c20dd;border-color:#71886c}
.controller [data-key="down"]{grid-column:1/-1;justify-self:center;height:calc(var(--pad-size)*.57)}
.controller small{display:block;font-size:10px;line-height:1}
.controller .run{background:#c78a43ef;border-color:#edb976;color:#221709}
.controller .jump{background:#a5d768ef;border-color:#d2f0a6;color:#172211;margin-bottom:calc(var(--pad-size)*.18)}
footer{display:flex;justify-content:space-between;gap:8px;color:var(--faint);font-size:11px;margin-top:13px}
.mobile{display:none}
.edition{white-space:nowrap}
@media (any-pointer:coarse){
  .cabinet{width:min(100%,calc((100dvh - 150px)*16/9),1200px);padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .playing .controller{display:flex}
  .desktop{display:none}.mobile{display:inline}
}
@media (max-height:520px) and (orientation:landscape){
  .cabinet{width:min(100%,calc((100dvh - 52px)*16/9));padding:3px 6px}
  .topbar{min-height:30px;margin-bottom:4px}.tools button{min-height:28px}.brand small,footer{display:none}
  h1{font-size:clamp(24px,10dvh,58px)}#eyebrow{margin-bottom:4px}#description{margin:6px 0}
}
@media (any-pointer:coarse) and (max-height:520px) and (orientation:landscape){
  .controller{--pad-size:clamp(44px,14vmin,65px);--grip:clamp(10px,3vmin,20px)}
}
@media (max-width:530px) and (orientation:portrait){.topbar{margin-bottom:5px}.screen{border-width:1px}.edition{display:none}.overlay{padding-inline:5%}.hud{padding-top:5px}}
@media (max-width:620px){
  .playing .hud{padding:max(54px,calc(env(safe-area-inset-top) + 48px)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))}
  .playing .notice{top:max(108px,20%)}
}