:root{--paper:#e9e6d9;--ink:#344a3b;--orange:#c96540;--key-scale:1;--ratio:1.6}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#d4d8c9;font-family:'PingFang SC','Microsoft Yahei',sans-serif;overscroll-behavior:none}button,input,select{font:inherit}button,.import{cursor:pointer;-webkit-tap-highlight-color:transparent}button{color:inherit}button:disabled{opacity:.42;cursor:default}button:focus-visible{outline:3px solid #dc8056;outline-offset:4px}.handheld{width:min(100%,900px);min-height:100svh;margin:auto;background:var(--paper);padding: max(12px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center}header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:4px 10px 17px}header small{font-size:8px;letter-spacing:3px;color:#7b8575}h1{font-family:'Songti SC',serif;font-weight:500;font-size:24px;letter-spacing:5px;margin:3px 0 0}header button{border:1px solid #bdc4b2;border-radius:50%;width:40px;height:40px;background:transparent;font-size:24px}.display{width:100%;aspect-ratio:var(--ratio);max-height:60svh;background:#111e17;border:6px solid #405240;border-radius:9px;overflow:hidden;position:relative;box-shadow:0 4px 0 #bdc5ae}canvas{width:100%;height:100%;display:block;image-rendering:pixelated;object-fit:fill;touch-action:none}#cover{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,#425a43,#142c22 80%);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#eee6cf;text-align:center;padding:18px}#cover[hidden]{display:none}.seal{font:42px Georgia;color:#d5bd84;border:1px solid #b39a60;width:66px;height:66px;display:grid;place-items:center;border-radius:50%;margin-bottom:12px}h2{font-family:'Songti SC',serif;font-size:24px;font-weight:500;letter-spacing:2px;margin:8px 0}#cover p{font-size:12px;color:#bdcbb6}#cover small{font-size:10px;color:#9db29a;margin-top:16px}#start{background:#d9c795;border:0;border-radius:5px;padding:12px 28px;color:#293c2b;font-weight:600}progress{width:65%;height:7px;accent-color:#d9c795;margin-top:12px}#resume{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #dacb9e;background:#1d352ded;color:#f8edc8;padding:20px;border-radius:6px;white-space:nowrap}.readout{width:100%;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#788570;padding:13px 4px 0}.controls{width:100%;flex:1;display:flex;align-items:center;justify-content:space-between;min-height:165px;padding:18px 5%;gap:10%;touch-action:none;user-select:none;-webkit-user-select:none}.dpad{width:clamp(130px,25vw,210px);aspect-ratio:1;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px;transform:scale(var(--key-scale))}.dpad button,.center{border:0;background:#d2d6c6;box-shadow:0 4px 0 #a9b69a;border-radius:9px;display:grid;place-items:center;font-size:19px;touch-action:none}.center{grid-area:2/2;box-shadow:none;background:#c7cfbb;font-size:17px}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.action{width:43%;max-width:270px;display:flex;align-items:center;gap:11%;transform:scale(var(--key-scale))}.action button{border:0;border-radius:50%;aspect-ratio:1;width:43%;background:#cdd1c2;box-shadow:0 6px 0 #aab59e;font-size:clamp(13px,2.5vw,20px);touch-action:none}.action small{display:block;font-size:8px;letter-spacing:1px;margin-top:5px;opacity:.6}.action .confirm{background:var(--orange);color:#fff1d6;width:54%;transform:translateY(-22%);box-shadow:0 6px 0 #9e4e30}.held{filter:brightness(.85);translate:0 3px;box-shadow:none!important}nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;padding:7px 0}nav button,.extra button,.backup button,.import{border:1px solid #bbc5ae;background:transparent;border-radius:20px;padding:9px 14px;font-size:12px;touch-action:none}#notice{font-size:11px;color:#76836c;margin:10px 0 2px;text-align:center;min-height:16px;line-height:1.5}dialog{border:1px solid #aab69b;border-radius:16px;background:#eeeade;color:var(--ink);width:min(92vw,520px);max-height:85svh;padding:25px;overflow:auto}dialog::backdrop{background:#10271acf;backdrop-filter:blur(5px)}.panelHead{display:flex;justify-content:space-between;align-items:center}.panelHead button{border:0;background:transparent;font-size:22px}dialog p{font-size:13px;line-height:1.8}dialog .fine{font-size:11px;color:#71806a}.settings label{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:20px 0}select{background:transparent;padding:7px;border:1px solid #b9c4ae;color:inherit;border-radius:5px}input{accent-color:#466145}.backup{display:flex;gap:12px;margin:20px 0}.backup button,.import{border-radius:5px;background:#d9dece}.extra{display:flex;gap:8px;flex-wrap:wrap}#history{border-top:1px solid #cbd2bd;padding-top:12px;font-size:11px}.is-paused canvas{filter:brightness(.5)}@media(min-width:1000px){.handheld{min-height:100svh;width:min(95vw,850px);box-shadow:0 0 90px #30462620}.display{max-height:58svh}.controls{min-height:160px}.dpad{width:170px}}@media(max-height:650px){.handheld{min-height:100svh}.controls{min-height:150px}.seal{display:none}.display{max-height:none}#cover h2{font-size:20px}}@media(max-width:450px){.handheld{padding-left:14px;padding-right:14px}.readout{font-size:9px}.controls{padding:22px 3%;gap:8%}.dpad{width:135px}.seal{width:42px;height:42px;font-size:28px;margin-bottom:5px}#cover h2{font-size:19px}#cover small{font-size:9px}nav{gap:6px}nav button{padding:9px 11px}}