@font-face{font-family:GameSans;src:url(../fonts/NotoSansSC.ttf)format("truetype");font-display:swap;font-weight:100 900}@font-face{font-family:TitleScript;src:url(../fonts/MaShanZheng-Regular.ttf)format("truetype");font-display:swap}*{box-sizing:border-box}html{color:#e7e3d3;background:#070e13;font-family:GameSans,Microsoft YaHei,sans-serif}body{overscroll-behavior:none;background:radial-gradient(at 50% 10%,#25373b 0,#111d25 43%,#080e14 85%);min-height:100dvh;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}header{color:#a8b6b4;justify-content:space-between;align-items:center;max-width:1680px;height:48px;margin:0 auto;padding:11px 25px;display:flex}header div{align-items:center;gap:22px;display:flex}header strong{letter-spacing:2px;font-size:14px;font-weight:500}header span{color:#9c937d;font-size:12px}header small{letter-spacing:1px;font-size:11px}main{flex-direction:column;align-items:center;gap:24px;margin:5px auto 0;display:flex}#screen{background:#0b161b;border:1px solid #716c55;width:max-content;max-width:calc(100vw - 22px);line-height:0;position:relative;box-shadow:0 18px 65px #000a,0 0 0 5px #111b22}canvas{width:var(--screen-width,1280px);aspect-ratio:8/5;touch-action:none;outline:none;max-width:100%;height:auto;display:block}footer{color:#8b9a9b;justify-content:center;align-items:center;gap:22px;height:45px;margin:9px auto 0;font-size:12px;display:flex}footer button{color:#c2b595;background:0 0;border:0;border-bottom:1px solid #64716b;min-height:32px;padding:4px 2px}.controls{display:none}.dpad{grid-template-rows:48px 48px 48px;grid-template-columns:48px 48px 48px;gap:1px;display:grid}.dpad button{color:#d1cdb8;background:#24353a;border:1px solid #68746c;border-radius:6px;padding:0;font-size:20px;box-shadow:inset 0 -3px #101e23}.dpad button[data-key=up]{grid-column:2}.dpad button[data-key=left]{grid-area:2/1}.dpad span{background:#1a2a30;grid-area:2/2}.dpad button[data-key=right]{grid-area:2/3}.dpad button[data-key=down]{grid-area:3/2}.rightpod{flex-direction:column;align-items:center;gap:20px;display:flex}.ab{align-items:center;gap:15px;display:flex}.ab button{color:#f0dbc0;touch-action:none;background:#8a4e40;border:2px solid #b79c71;border-radius:50%;width:65px;height:65px;font-size:26px;box-shadow:0 5px #382c29}.ab button[data-key=b]{color:#d7dfd7;background:#354751;border-color:#718789;transform:translateY(10px)}.ab small{font-size:10px;line-height:12px;display:block}.utility{gap:12px;display:flex}.utility button{color:#bcbda8;background:#1c2c34;border:1px solid #687772;border-radius:5px;min-width:57px;min-height:44px;padding:5px;font-size:12px}.controls button.held{filter:brightness(1.5);box-shadow:none}.controls button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.controls{-webkit-user-select:none;user-select:none;touch-action:none}dialog{color:#ece5d0;background:#102027;border:1px solid #bca783;border-radius:2px;width:min(720px,100vw - 24px);max-height:calc(100dvh - 28px);padding:24px;line-height:1.75;box-shadow:0 20px 70px #000b}dialog::backdrop{background:#03080dce}.panel-top{z-index:1;background:#102027;justify-content:space-between;align-items:center;gap:12px;display:flex;position:sticky;top:-24px}.panel-top h2{color:#dec493;font-family:TitleScript,serif;font-size:31px;font-weight:400}dialog h3{color:#dfc285;margin:22px 0 8px;font-size:17px;font-weight:500}dialog p{font-size:15px;line-height:1.85}dialog button{color:#f0e5ce;background:#263c42;border:1px solid #78847a;border-radius:2px;min-height:44px;padding:8px 13px;font-size:14px}dialog button:hover{background:#374e50}dialog textarea{color:#dce4d6;resize:vertical;touch-action:auto;-webkit-user-select:text;user-select:text;background:#08151d;border:1px solid #677b77;width:100%;padding:12px;font:13px monospace;display:block}dialog input[type=file]{width:100%;margin-top:14px;font-size:13px}.slot{border-bottom:1px solid #425a58;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0;display:flex}.slot strong{color:#d6be91;font-weight:500}.slot span{flex:1;font-size:13px}.slot button{font-size:12px}.panel-actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}#panel-message{color:#e2c17f}dialog label{align-items:center;gap:15px;padding:16px 0;font-size:15px;display:flex}.range-row input{accent-color:#a6b287;flex:1;min-width:100px}.sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=999px){.controls{justify-content:space-between;align-items:center;gap:24px;width:min(100%,640px);padding:0 20px;display:flex}}@media (width<=600px){header{height:58px;padding:13px 16px 9px}header div{display:block}header strong{letter-spacing:0;font-size:12px}header span{margin-top:3px;font-size:11px;display:block}main{gap:28px;margin-top:12px}.controls{gap:12px;padding:0 20px}footer{flex-wrap:wrap;gap:7px;height:auto;margin-top:24px}footer span{text-align:center;width:100%;font-size:11px}.ab button{width:61px;height:61px}.dpad{grid-template-rows:46px 46px 46px;grid-template-columns:46px 46px 46px}}@media (width<=350px){.controls{padding:0 9px}.dpad{grid-template-rows:44px 44px 44px;grid-template-columns:44px 44px 44px}.ab{gap:9px}.ab button{width:55px;height:55px}.utility{gap:5px}.utility button{min-width:50px}}@media (orientation:landscape) and (height<=600px){header,footer{display:none}main{padding:9px max(8px,env(safe-area-inset-right)) 9px max(8px,env(safe-area-inset-left));grid-template-columns:130px minmax(0,1fr) 130px;align-items:center;gap:10px;width:100%;max-width:none;height:100dvh;margin:0 auto;display:grid}#screen{grid-area:1/2;justify-self:center;max-width:100%;box-shadow:0 0 0 3px #111b22}.controls{display:contents}.leftpod{grid-area:1/1}.rightpod{grid-area:1/3;gap:27px}.dpad{grid-template-rows:44px 44px 44px;grid-template-columns:44px 44px 44px;gap:0}.ab{gap:9px}.ab button{width:55px;height:55px}.utility{gap:6px}.utility button{min-width:51px}.panel-top{top:-24px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}header div{min-width:0}header small{text-align:right;flex-shrink:0;margin-left:12px}header .creator{letter-spacing:0;font-size:10px;line-height:1.5;display:block}@media (width<=600px){header{height:66px}header strong{line-height:1.35}header small,header .creator{font-size:9px}}canvas{image-rendering:pixelated;image-rendering:crisp-edges}body{background:#070a11}#screen{border-color:#b0bfd7;box-shadow:0 0 0 4px #161e30,0 12px 40px #0008}