:root{font-family:Inter,Segoe UI,Malgun Gothic,sans-serif;color:#eff6dc;background:#0b1715;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 40%,#253c32,#0b1715 70%)}button{font:inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}button:focus-visible{outline:2px solid #e8cf91;outline-offset:3px}#console{height:100dvh;width:min(100vw,59dvh);max-width:560px;display:grid;grid-template-rows:75% 25%;box-shadow:0 0 100px #0008;overflow:hidden;position:relative}#screen{position:relative;overflow:hidden;background:#295e55;touch-action:none;-webkit-user-select:none;user-select:none}#game,#game canvas{width:100%;height:100%;display:block;image-rendering:pixelated}#game{position:absolute;inset:0}.hud{position:absolute;top:max(18px,env(safe-area-inset-top));left:20px;right:16px;display:flex;align-items:center;gap:8px;pointer-events:none}.brand{flex:1}.eyebrow{font-size:8px;font-weight:700;letter-spacing:2.2px;color:#e1eac1}h1{font-family:Georgia,serif;font-weight:500;letter-spacing:2px;font-size:20px;margin:5px 0;text-shadow:0 2px 5px #102a29}h1 span{display:block;font-family:inherit;font-size:9px;letter-spacing:3px;margin-top:5px;color:#dce4c6}.hud button{pointer-events:auto;width:29px;height:29px;border:1px solid #c4d7b34d;background:#132b2b70;border-radius:8px;color:#eff7db;font-size:19px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.status{position:absolute;top:110px;left:20px;display:flex;align-items:center;gap:8px}.portrait{height:27px;width:27px;display:grid;place-items:center;color:#e6d793;border:1px solid #e4cc8477;transform:rotate(45deg);background:#203c35bd}.health{display:flex;gap:3px;margin-bottom:5px}.health i{width:14px;height:7px;background:#f1cfa0;box-shadow:0 1px #4c4635;transform:skew(-12deg)}.mana-track{width:82px;background:#122f3cb3;height:4px}.mana-track div{width:100%;height:100%;background:#80d5dd;transition:width .15s}#mana-number{font-size:9px;color:#c3eef0}.location{position:absolute;top:161px;left:20px;font-size:10px;letter-spacing:.6px;text-shadow:0 1px 3px #000}.location>span{color:#ffe7a4}.location small{display:block;margin:5px 0 0 14px;font-size:8px;color:#cbdbc4;letter-spacing:1px}#loading,#pause{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:8;background:#102d29ed;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#pause[hidden],#loading[hidden]{display:none}#loading>span{font-size:40px;color:#d4c78b}#loading h2,#pause h2{font-family:Georgia,Malgun Gothic,serif;font-size:23px;letter-spacing:3px;font-weight:500}#loading p,#pause p{font-size:11px;color:#acbdab}#loading>div{width:140px;height:3px;background:#536359}#load-progress{display:block;width:0;height:100%;background:#ddcf8e}#resume{margin-top:20px;background:#e6d9ad;color:#19392e;border:0;padding:12px 26px;border-radius:6px;font-size:12px}#controls{position:relative;padding:10px 20px max(7px,env(safe-area-inset-bottom));background:linear-gradient(135deg,#273c33,#182e28);border-top:2px solid #baa36a;box-shadow:0 -5px 20px #071b2e55;touch-action:none;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;justify-content:space-between}.controller-top{display:flex;justify-content:space-between;color:#b8bd97;font-size:7px;letter-spacing:1.8px;line-height:12px}.controller-top span:last-child{color:#819c87;font-size:6px}.control-row{display:flex;align-items:center;justify-content:space-between;flex:1;gap:7px;min-height:0}#joystick{height:min(132px,17dvh);width:min(132px,17dvh);flex-shrink:0;position:relative;border-radius:50%;background:radial-gradient(circle,#0c201c 45%,#1a2c25 46%,#14271f 63%,#6e795649 64%,#253a2e 66%);border:1px solid #74816050;box-shadow:inset 0 3px 7px #071d21aa,0 3px #0c2018;touch-action:none}.direction{position:absolute;color:#718669;font-size:12px;pointer-events:none}.direction.up{left:calc(50% - 4px);top:4px}.direction.down{left:calc(50% - 4px);bottom:4px}.direction.left{left:6px;top:calc(50% - 9px)}.direction.right{right:6px;top:calc(50% - 9px)}#stick{position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:50%;background:radial-gradient(circle at 40% 25%,#637457,#3c5140 65%,#2c4033);border:1px solid #93a17b60;box-shadow:0 6px #0d241b,0 8px 12px #0007,inset 0 2px #a9b39438;display:grid;place-items:center;color:#a9b98e;font-size:25px;will-change:transform;pointer-events:none}.system-buttons{align-self:center;display:flex;flex-direction:column;gap:13px;padding-top:6px}.system-buttons button{padding:0;background:none;border:0;color:#a9ba99;display:flex;flex-direction:column;align-items:center;gap:4px}.system-buttons i{font-style:normal;font-size:13px;background:linear-gradient(#405448,#293d32);border:1px solid #74816560;box-shadow:0 3px #0c2019;border-radius:15px;width:41px;height:20px;line-height:17px}.system-buttons span{font-size:6px;letter-spacing:1.3px}.action-buttons{width:min(146px,18.7dvh);height:min(146px,18.7dvh);position:relative;flex-shrink:0}.action{position:absolute;width:37%;height:37%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;box-shadow:0 4px #0b211a,0 7px 10px #0004,inset 0 2px #ffffff20;border:1px solid #d7d5b345;color:#eef2ce}.action b{font-size:20px;line-height:23px}.action small{font-size:7px;opacity:.8;line-height:10px}.action.y{top:0;left:31.5%;background:linear-gradient(#b39149,#80652f);color:#fff0bc}.action.x{top:31.5%;left:0;background:linear-gradient(#547e8a,#355a68);color:#d4f2f9}.action.b{top:31.5%;right:0;background:linear-gradient(#9c6559,#70463f);color:#ffe0d3}.action.a{bottom:0;left:31.5%;background:linear-gradient(#718a4e,#486433);color:#ecf6d1}.action.pressed,.system-buttons button:active i{filter:brightness(1.25);box-shadow:0 1px #0b211a;transform:translateY(3px)}@media(max-width:360px){#controls{padding-left:12px;padding-right:12px}.hud{left:15px}h1{font-size:18px}.control-row{gap:3px}#joystick{width:110px;height:110px}.action-buttons{width:130px;height:130px}}@media(min-width:650px){#console{border-left:1px solid #455640;border-right:1px solid #455640}}@media(max-height:600px){.controller-top,#controls{padding-top:4px;padding-bottom:4px}.action b{font-size:16px;line-height:18px}.action small{font-size:6px}#joystick{width:17dvh;height:17dvh}.action-buttons{width:21dvh;height:21dvh}.system-buttons{gap:7px}.location{top:140px}.status{top:99px}}.wallet{position:absolute;top:114px;right:20px;display:flex;align-items:center;gap:6px;color:#fff0ad;font-size:13px;text-shadow:0 2px 2px #152f26;pointer-events:none}.wallet>span{color:#ffd46c;font-size:16px}.wallet b{font-variant-numeric:tabular-nums;font-weight:600}@media(max-width:650px),(hover:none)and (pointer:coarse){#console{width:100%;max-width:none;border-left:0;border-right:0}#controls{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}.score-display,.time-display{position:absolute;top:max(8px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:1px;pointer-events:none;text-shadow:0 2px 0 #11283c,0 0 8px #07131e}.score-display{left:max(20px,env(safe-area-inset-left));align-items:flex-start}.time-display{right:max(20px,env(safe-area-inset-right));align-items:flex-end}.score-display small,.time-display small{font-size:7px;letter-spacing:3px;color:#e4cf8c}.score-display b,.time-display b{font:700 22px monospace;letter-spacing:3px;color:#fff4cd;font-variant-numeric:tabular-nums}.hud{top:max(47px,calc(env(safe-area-inset-top) + 39px))}.status{top:137px}.wallet{top:141px}.location{top:182px}.action.b.ready{box-shadow:0 4px #0b211a,0 0 14px #ffba5b80,inset 0 2px #fff6bd80;border-color:#ffe29d}#results{position:absolute;inset:0;z-index:30;background:linear-gradient(155deg,#101f32f5,#102a29fa);padding:max(20px,env(safe-area-inset-top)) 24px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;text-align:center;overflow:auto;color:#e9f2db}#results[hidden],#rank-form[hidden],#rank-retry[hidden]{display:none}#results>small{font-size:8px;letter-spacing:2px;color:#b7c5a7}#results h2{font:20px Georgia,serif;letter-spacing:2px;margin:12px 0 5px}#final-score{font:32px monospace;color:#ffe4a4;letter-spacing:3px}#own-result{font-size:12px;color:#d9e8d5;margin:8px 0}#rank-status{font-size:11px;line-height:1.6;min-height:18px;color:#b3cabc;margin:0 0 10px}#rank-form{margin:2px 0 12px}#rank-form label{display:block;text-align:left;font-size:10px;margin-bottom:5px}#rank-form>div{display:flex;gap:7px}#rank-name{min-width:0;flex:1;background:#0d1925;border:1px solid #6d8979;border-radius:5px;color:#fff4cf;padding:9px;font:16px sans-serif}#results button{border:1px solid #91a082;border-radius:5px;background:#314b3a;color:#eff4de;padding:10px 14px;font-size:12px}#results button:disabled{opacity:.5}#results h3{display:flex;justify-content:space-between;margin:8px 0;font-size:10px;letter-spacing:1.5px}#results h3 span{color:#dcca8d}#rank-list{list-style:none;margin:0 0 14px;padding:0;overflow-y:auto;min-height:80px;flex:1;overscroll-behavior:contain;touch-action:pan-y;border-top:1px solid #69807644}#rank-list li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding:9px 7px;border-bottom:1px solid #69807633;text-align:left;font-size:12px}#rank-list li>span:first-child{color:#9bb5a1;font:11px monospace}#rank-list li>b{font:12px monospace;color:#edd8a4}#rank-list li.own{background:#51683e77}#rank-retry{margin-bottom:8px}#result-restart{flex-shrink:0}.time-display.urgent b{color:#ff9989}#score-breakdown{font-size:11px;line-height:1.6;color:#e5cf95;margin:6px 0}#score-breakdown span{display:block}.equipment{position:absolute;top:174px;left:20px;right:20px;display:flex;align-items:center;gap:6px;pointer-events:none;text-shadow:0 1px 3px #10251f;font-size:10px;color:#f6e1ac}.equipment img{width:24px;height:24px;image-rendering:pixelated}.equipment b{font-weight:600}.equipment span{margin-left:auto;font-size:9px;color:#b5f1ea}.location{top:211px}#workshop{position:absolute;z-index:7;bottom:8px;left:8px;right:8px;padding:8px 10px;background:#102c2bea;border:1px solid #82a79780;border-radius:7px;font-size:11px;color:#d9f0d9}#workshop summary{cursor:pointer;touch-action:manipulation}#workshop>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}#workshop button{background:#314f42;border:1px solid #8baf8a70;color:#f7eac6;border-radius:4px;font-size:11px;padding:7px 9px}#workshop[open]{top:250px;bottom:auto}#character-select{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:12px;padding:max(24px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom));background:linear-gradient(#081c2b45,#0b242875 58%,#081820eb),url(../assets/forest.webp) center/auto 100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;isolation:isolate}#character-select[hidden]{display:none}.selecting #controls{pointer-events:none}.selecting #screen>.hud,.selecting #screen>.status{visibility:hidden}.selection-heading{text-align:center;flex-shrink:0;width:100%;text-shadow:0 3px #112332}.selection-heading small{font:700 10px Georgia,serif;letter-spacing:4px;color:#e7dcae}.selection-heading h2{font:700 clamp(25px,4dvh,34px) "Malgun Gothic",sans-serif;letter-spacing:3px;color:#ffebc5;margin:12px 0 0;padding:13px 8px;border:2px solid #b79a64;background:#102336dc;box-shadow:inset 0 0 0 3px #223b45,0 4px #07151e}.character-stage{position:relative;min-height:140px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%}.character-stage:after{content:"";position:absolute;bottom:24px;width:75%;height:10px;background:#071b29a8;box-shadow:0 5px #556a6266;z-index:-1}#character-preview{image-rendering:pixelated;width:auto;height:min(30dvh,260px);max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 2px #07152280)}#character-name{font-size:18px;letter-spacing:4px;color:#fff0ca;text-shadow:0 2px 3px #000;margin:0;line-height:26px}.character-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(70px,14dvh));gap:12px;width:100%;max-width:340px;flex-shrink:0}.character-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:0;padding:0 8px 6px;border:2px solid #768393;border-radius:2px;box-shadow:inset 0 0 0 3px #152235,0 4px #07141d;background:linear-gradient(145deg,#334353ef,#111b2cf5);color:#e9eeed;overflow:hidden;touch-action:manipulation}.character-card canvas{image-rendering:pixelated;height:calc(100% - 22px);width:auto;max-width:100%;object-fit:contain;flex-shrink:1}.character-card b{font-size:16px;line-height:21px;letter-spacing:3px;text-shadow:0 2px #102030}.character-card[aria-pressed=true]{border-color:#ffe49c;background:linear-gradient(145deg,#625035ed,#29212eef);box-shadow:inset 0 0 0 3px #b58b43,0 0 15px #eab85c65,0 4px #282116;color:#fff0b1}.character-card[aria-pressed=true]:after{content:"✓";position:absolute;right:7px;top:5px;color:#ffe8a1;font-size:14px}.character-card.reserved{justify-content:center;cursor:default;border-color:#4d596c;background:linear-gradient(145deg,#293447f5,#101b2bf5);color:#8491a6}.character-card.reserved span{font:700 clamp(36px,7dvh,60px) monospace;line-height:1}#character-start{flex-shrink:0;width:100%;max-width:340px;padding:12px;border:2px solid #f3d188;border-radius:2px;box-shadow:inset 0 0 0 3px #9d773c,0 4px #382b1b;background:linear-gradient(#8c6734,#60421e);color:#fff2cb;font-size:23px;font-weight:700;letter-spacing:3px;text-shadow:0 2px #392a21;touch-action:manipulation}#character-start:disabled{opacity:.6;cursor:wait;font-size:15px}#character-status:empty{display:none}#character-status{font-size:12px;color:#ffe3ae;margin:0;text-align:center}#change-character{margin-top:12px;border:1px solid #799481;background:#18352c;color:#d9e9c6;padding:9px 18px;border-radius:5px;font-size:11px}#result-character{margin-top:8px;flex-shrink:0}@media(max-height:650px){#character-select{gap:8px;padding:12px 20px}.selection-heading h2{font-size:24px;margin-top:5px;padding:7px}.character-stage{min-height:100px}#character-preview{height:26dvh}.character-grid{gap:8px;grid-template-rows:repeat(2,minmax(60px,13dvh))}#character-start{font-size:19px;padding:9px}}@media(prefers-reduced-motion:no-preference){.character-card{transition:border-color .15s,box-shadow .15s}}
