:root{color-scheme:light;--ink:#233e4d;--muted:#667c83;--mint:#317d75;--gold:#f7d98b;--paper:#f7f7ee;--line:#d9e5df}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 system-ui,'Malgun Gothic',sans-serif}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:var(--mint)}button:focus-visible,a:focus-visible{outline:3px solid #ee9c3b;outline-offset:3px}.shell{width:min(1400px,100%);margin:auto;height:100dvh;display:flex;flex-direction:column;padding:18px 24px;gap:12px}.top{display:flex;justify-content:space-between;gap:16px;align-items:center}.brand{font-size:23px;font-weight:900;letter-spacing:-1px}.edition{font-size:11px;letter-spacing:1.5px;color:var(--muted);font-weight:800}.top-actions{display:flex;gap:8px}.quiet{border:1px solid var(--line);background:white;color:var(--ink);border-radius:13px;padding:10px 14px;font-weight:800;min-height:44px;text-decoration:none}.stats{display:flex;gap:10px;align-items:center}.stat{padding:9px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;min-width:100px}.stat small{display:block;color:var(--muted);font-size:11px}.stat b{font-size:21px}.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px}.world-area{position:relative;min-height:0;border-radius:28px;overflow:hidden;border:1px solid #bdd4d7;background:#cbe0e8;box-shadow:0 8px 30px #52788616}.world-area canvas{display:block;width:100%;height:100%;touch-action:none}.stage-note{position:absolute;top:16px;left:18px;pointer-events:none;background:#ffffffed;border:1px solid #d5e1da;border-radius:16px;padding:10px 14px;max-width:calc(100% - 36px);box-shadow:0 3px 12px #456e7420}.stage-note strong{display:block;font-size:16px}.stage-note small{display:block;color:var(--muted)}.side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px}.card h2{font-size:17px;margin:0 0 9px}.card p{margin:6px 0;color:var(--muted);font-size:13px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.5px;color:var(--mint)}.tag{display:inline-block;background:#edf4ef;border-radius:8px;padding:4px 8px;font-size:12px;margin:3px 2px}.actions{display:flex;gap:10px;align-items:center}.main-btn{min-height:58px;border:0;border-radius:17px;padding:11px 24px;background:var(--mint);box-shadow:0 4px 0 #1e5b54;color:white;font-weight:900;font-size:17px;flex:1}.main-btn.gold{background:var(--gold);color:#4d422c;box-shadow:0 4px 0 #cab47b}.main-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #1e5b54}.actions .quiet{min-height:58px;min-width:74px}.hintline{font-size:12px;color:var(--muted);text-align:center;margin:0}.cover,.finish{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#e8f2ebd9;backdrop-filter:blur(7px);padding:20px;z-index:10}.cover[hidden],.finish[hidden],#fallback[hidden]{display:none}.cover .card,.finish .card{width:min(440px,100%);text-align:center;padding:30px}.cover h1,.finish h1{font-size:29px;letter-spacing:-1px;margin:10px 0}.cover p,.finish p{font-size:15px;line-height:1.65;margin:15px 0}.cover .main-btn,.finish .main-btn{width:100%;margin-top:10px}#fallback{position:absolute;inset:0;background:#f7f7ee;padding:30px;z-index:30;display:grid;place-content:center;text-align:center}.toast{position:fixed;bottom:102px;left:50%;transform:translate(-50%,12px);background:#203d47ed;color:white;padding:12px 20px;border-radius:16px;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:50;max-width:90vw;font-size:14px}.toast.show{opacity:1;transform:translate(-50%,0)}.roadmap{display:flex;gap:5px;margin-top:8px}.roadmap i{display:block;height:6px;flex:1;border-radius:4px;background:#e3ebe5}.roadmap i.on{background:#63a68b}.roadmap i.now{background:#e3b66b}.load{position:absolute;inset:0;display:grid;place-content:center;background:#eef4ed;z-index:20;font-size:16px;font-weight:800}.load[hidden]{display:none}.progress{height:6px;border-radius:6px;background:#e1eae4;overflow:hidden;margin:10px 0}.progress span{display:block;height:100%;background:#60a789;transition:width .15s}
@media(max-width:800px){.shell{padding:10px 12px;gap:9px}.brand{font-size:19px}.edition{font-size:9px}.top-actions{gap:5px}.top .quiet{padding:8px 10px;font-size:12px}.stats{gap:6px}.stat{min-width:0;flex:1;padding:6px 11px}.stat b{font-size:18px}.layout{grid-template-columns:1fr;grid-template-rows:minmax(280px,1fr) auto;gap:9px}.world-area{border-radius:23px}.side{display:grid;grid-template-columns:1fr 1fr;overflow:visible;gap:8px}.card{padding:11px 13px;border-radius:17px}.card h2{font-size:14px;margin-bottom:4px}.card p{font-size:11px;margin:3px 0}.tag{font-size:10px;padding:3px 5px}.eyebrow{font-size:9px}.stage-note{top:10px;left:10px;padding:8px 11px;border-radius:12px;max-width:calc(100% - 20px)}.stage-note strong{font-size:13px}.stage-note small{font-size:10px}.main-btn{padding:9px 10px;min-height:52px;font-size:15px;border-radius:14px}.actions .quiet{min-height:52px;min-width:56px;padding:8px;font-size:12px}.hintline{font-size:10px}.cover h1,.finish h1{font-size:24px}.cover .card,.finish .card{padding:24px}}
@media(max-height:600px) and (min-width:650px){.shell{padding:8px 14px;gap:6px}.layout{grid-template-columns:minmax(0,1fr) 245px;grid-template-rows:1fr}.side{display:flex;overflow:auto}.stats{position:absolute;right:285px;top:8px;z-index:1}.stat{padding:3px 10px}.stat b{font-size:16px}.top{padding-right:260px}.top-actions{display:none}.hintline{display:none}.main-btn,.actions .quiet{min-height:44px}.actions{max-width:500px;margin:auto;width:100%}}
.card,.side,.layout,.main-btn,.top>div{min-width:0}.actions{min-width:0}.actions .main-btn,.top .quiet{white-space:nowrap}.side h2{max-width:100%}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}