:root {color-scheme:dark;--ink:#051013;--panel:#102838;--lime:#baff6b;--hair:#d9ecf6;--outline:rgba(255,255,255,.42)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#061018;color:white;font-family:system-ui,-apple-system,sans-serif;overscroll-behavior:none}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
#app{width:100vw;height:100vh;height:100dvh;position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0a1820;image-rendering:pixelated}
#vignette{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 85px 12px rgba(0,0,0,.24)}
#hud{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:4}.glass{background:rgba(8,22,31,.76);border:2px solid rgba(189,255,177,.45);border-radius:12px;box-shadow:0 4px 20px #0006, inset 0 1px 0 #ffffff1e;backdrop-filter:blur(9px)}#location{padding:7px 15px 8px;display:flex;align-items:center;gap:10px;line-height:1.15}#location b{font-size:12px;letter-spacing:2px;font-weight:900;text-shadow:1px 2px #000}#location small{display:block;font-size:10px;color:#bfddcf;margin-top:4px;letter-spacing:.55px}.leaf{font-size:30px;line-height:1;color:#82f365}#fullscreen{pointer-events:auto;min-width:38px;min-height:38px;color:#e9fff4;font-size:25px;background:rgba(8,22,31,.7)}
#hint{position:absolute;left:50%;bottom:clamp(124px,21vh,165px);transform:translateX(-50%);padding:8px 15px;font-size:12px;font-weight:700;letter-spacing:.3px;opacity:0;transition:opacity .18s;pointer-events:none;z-index:7;max-width:min(360px,60vw);text-align:center}#hint.show{opacity:1}
#touch-controls{position:absolute;left:0;right:0;bottom:0;height:clamp(142px,27vh,204px);pointer-events:none;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;padding:0 max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#dpad{position:relative;width:clamp(130px,22vh,182px);height:clamp(130px,22vh,182px);pointer-events:auto;touch-action:none;filter:drop-shadow(0 8px 5px #0007);opacity:.93}.pad-vertical,.pad-horizontal{position:absolute;background:linear-gradient(145deg,#405268,#172536 60%,#080e1b);border:2px solid #78909e;box-shadow:inset 3px 3px 6px #b1d4e53b,inset -3px -4px 7px #0008}.pad-vertical{width:38%;height:100%;left:31%;top:0;border-radius:14px}.pad-horizontal{height:38%;width:100%;left:0;top:31%;border-radius:14px}.pad-center{position:absolute;inset:38%;background:#131f2f;border-radius:6px;box-shadow:inset 0 0 8px #000}.pad-arrow{position:absolute;color:#cad6db9c;font-weight:900;font-size:13px;text-shadow:0 -1px #000;display:flex;align-items:center;justify-content:center;width:35%;height:35%}.pad-up{top:1%;left:32.5%}.pad-down{bottom:1%;left:32.5%}.pad-left{left:0;top:32.5%}.pad-right{right:0;top:32.5%}#dpad.pressed .pad-vertical,#dpad.pressed .pad-horizontal{filter:brightness(1.28)}
#small-controls{pointer-events:auto;display:flex;gap:8px;align-items:center;justify-content:center;position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%)}.pill{height:26px;padding:0 14px;color:#bac2cc;border:1px solid #84929f;border-radius:999px;background:linear-gradient(#374351,#1b2834);font-size:9px;font-weight:900;letter-spacing:1.2px;box-shadow:0 4px 5px #0009;transform:rotate(-12deg)}.pill:active{background:#536479}
#action-controls{pointer-events:auto;position:relative;width:clamp(158px,29vh,226px);height:clamp(124px,22vh,174px);margin-bottom:0}.action{position:absolute;width:clamp(67px,12vh,94px);height:clamp(67px,12vh,94px);border-radius:50%;font-size:clamp(26px,6vh,42px);font-weight:1000;color:#f1ffe6;text-shadow:1px 3px 2px #0414109c,0 0 8px #fff6;border:4px solid #abc0a8;box-shadow:inset 0 -9px 0 #0c49298a, inset 0 5px 0 #fff8, 0 8px 2px #0009, 0 0 0 3px #121b22;background:radial-gradient(circle at 30% 22%,#76cc8a 0%,#2e9862 45%,#0d5635 100%);touch-action:none}.action.a{right:5px;top:1px}.action.b{left:8px;bottom:4px;background:radial-gradient(circle at 30% 22%,#9eacc1 0%,#506b8b 43%,#293e5f 100%);box-shadow:inset 0 -9px 0 #081b3d8a,inset 0 5px 0 #fff7,0 8px 2px #0009,0 0 0 3px #121b22}.action.down{transform:translateY(5px) scale(.96);filter:brightness(1.18);box-shadow:inset 0 0 12px #0009,0 3px 1px #0008,0 0 0 3px #121b22}
.dialogue{position:absolute;left:50%;top:max(13%,65px);transform:translateX(-50%);width:min(580px,75vw);z-index:8;background:#f9f7df;color:#253348;border:5px solid #283648;border-radius:13px;box-shadow:0 0 0 3px white,0 12px 35px #0009;padding:14px 18px 15px;min-height:106px}.dialogue .speaker{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#0c7e48}.dialogue p{margin:6px 0 9px;font-size:clamp(13px,2.5vw,16px);line-height:1.55;font-weight:650}.dialogue-next{position:absolute;bottom:10px;right:16px;color:#248951;font-size:11px;font-weight:900}.dialogue-next span{animation:bob .7s infinite alternate;display:inline-block}@keyframes bob{to{transform:translateY(4px)}}
.curtain{position:absolute;inset:0;z-index:12;background:rgba(3,10,17,.65);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}.splash-card,.panel-card{max-width:min(500px,90vw);width:min(500px,90vw);padding:clamp(18px,5vh,38px);border-radius:20px;background:linear-gradient(145deg,#163340,#091a28);border:2px solid #9bdc9b;box-shadow:0 16px 70px #000a, inset 0 0 55px #ffffff0c;text-align:center}.splash-mark{margin:-10px 0 7px;color:#98f678;font-size:54px;line-height:1}.game-tag{font-size:clamp(8px,1.9vh,10px);font-weight:900;letter-spacing:3px;color:#ace99f}.splash-card h1{font-size:clamp(37px,9vh,68px);letter-spacing:-2px;margin:3px 0 6px;font-weight:1000;line-height:1.15;filter:drop-shadow(3px 5px #061110)}.splash-card h1 span{color:#85fa70}.hero-sub{font-size:clamp(10px,2.3vh,13px);font-weight:800;letter-spacing:1px;color:#d2deeb}.hero-sub span{color:#89e991;padding:0 5px}.primary,.panel-card button{border:2px solid #bcffb0;border-radius:10px;padding:13px 19px;background:linear-gradient(#76eb68,#319c5b);color:#081c1b;font-size:12px;font-weight:900;letter-spacing:1.6px;min-width:185px;box-shadow:0 5px 0 #135c3b;margin:19px 0 12px}.primary:disabled{filter:grayscale(1);opacity:.7}.primary:active,.panel-card button:active{transform:translateY(3px);box-shadow:0 2px 0 #135c3b}.helper{font-size:11px;color:#b8cdd0;line-height:1.7;margin-top:8px}.helper i{display:inline-block;width:3px;height:3px;border-radius:50%;background:#7ec67a;margin:0 5px;vertical-align:middle}
.panel-card h2{font-size:clamp(17px,4vh,27px);margin:8px 0 14px}.panel-card .meta{line-height:1.8;font-size:13px;color:#bed5dc}.panel-card .control-list{text-align:left;font-size:12px;line-height:1.9;margin:12px 0}.panel-card button{min-width:0;padding:10px 17px;margin:6px}.panel-card .secondary{background:#2a4050;color:#f3fff2;border-color:#889f9e;box-shadow:0 5px 0 #0d1c27}#mini-map{display:block;width:min(280px,65vw);height:auto;margin:8px auto;border:3px solid #adf6c5;border-radius:4px}
#rotate{z-index:20;position:absolute;inset:0;background:#07131e;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}.phone{font-size:55px;transform:rotate(90deg);color:#9ce7b0}#rotate h2{margin:10px 0 0}#rotate p{color:#c2d9dc;max-width:260px}#rotate button{background:#80eb79;border:0;border-radius:10px;padding:12px;color:#09211b;font-weight:800}.hidden{display:none!important}
@media (orientation:portrait) and (max-width:900px){#rotate:not(.hidden){display:flex}#touch-controls{height:185px}#location b{font-size:9px}#location small{font-size:9px}}
@media (max-height:500px){#hud{top:max(6px,env(safe-area-inset-top))}#location{padding:4px 11px}#location b{font-size:9px}#location small{font-size:9px}.leaf{font-size:21px}#fullscreen{min-height:31px;min-width:31px;font-size:20px}#touch-controls{height:142px;padding-bottom:6px}#dpad{width:122px;height:122px}#action-controls{height:126px;width:165px}.action{width:70px;height:70px;font-size:27px}.pill{height:20px;font-size:8px}#hint{top:53px;bottom:auto}.splash-card,.panel-card{padding:13px 22px}.splash-mark{font-size:25px}.splash-card h1{font-size:36px}.helper{font-size:9px;margin-top:2px}.primary{padding:8px 20px;margin:9px 0 4px}.dialogue{width:65vw;top:18%;padding:8px 12px;min-height:84px}.dialogue p{font-size:12px;margin:2px 0 8px}}
@media (pointer:fine) and (min-width:1000px){#touch-controls{opacity:.65}#touch-controls:hover{opacity:1}}

/* v0.3 — explicit device profile, preserving the same D-pad/A-B layout on mobile. */
.device-card{width:min(590px,calc(100vw - 32px));max-width:590px;padding:clamp(17px,3vw,33px)}
.device-title{font-size:clamp(20px,4.1vh,31px)!important;letter-spacing:-.5px!important;line-height:1.24!important;max-width:475px;margin:9px auto 18px!important;filter:none!important}
.device-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.device-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:124px;max-width:none;width:100%;padding:13px 12px;background:linear-gradient(155deg,#25414a,#15282f);border:2px solid #5c8b84;border-radius:14px;box-shadow:0 4px 0 #071618;color:#f0fff6;transition:background .14s,border-color .14s,transform .14s}
.device-choice:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #071618}.device-choice:hover:not(:disabled),.device-choice:focus-visible{border-color:#b6f7a3;background:linear-gradient(155deg,#315852,#203b37)}
.device-choice:disabled{opacity:.45;cursor:wait}.device-icon{font-weight:900;font-size:34px;line-height:1;color:#b2f9b2}.device-name{font-size:16px;font-weight:900}.device-description{font-size:10px;color:#c3d9d5;line-height:1.4;max-width:190px}
#loadStatus{min-height:16px;margin-top:13px;font-size:10px;letter-spacing:.75px}
body[data-device="desktop"] #touch-controls{display:none!important}
body[data-device="desktop"] #hint{bottom:clamp(25px,5vh,54px)}
body[data-device="desktop"] #vignette{box-shadow:inset 0 0 55px 8px rgba(0,0,0,.12)}
body[data-device="mobile"] #touch-controls{display:flex}
@media(max-height:470px){.device-card{padding:12px 18px}.device-title{font-size:19px!important;margin:4px auto 10px!important}.device-choice{min-height:85px;padding:6px 9px}.device-icon{font-size:22px}.device-name{font-size:14px}.device-description{font-size:9px}.device-card .splash-mark{display:none}.device-choices{gap:10px}#loadStatus{margin-top:7px}}
@media(max-width:460px) and (orientation:portrait){.device-choices{grid-template-columns:1fr}.device-choice{min-height:82px}.device-title{font-size:22px!important}}