:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
--u:clamp(40px,11vmin,92px);--ink:#3b3226;--paper:#f6efdc;--paper2:#ebe1c6;--leaf:#6f9a5b;--accent:#d98f5c}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#2f3b2a;overscroll-behavior:none;touch-action:none;position:fixed;inset:0;width:100%;
font-family:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;color:var(--ink)}
input,textarea{-webkit-user-select:text;user-select:text}
canvas#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;padding:0;touch-action:manipulation}
#hud{position:fixed;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#stats{position:absolute;left:calc(var(--sl) + 10px);top:calc(var(--st) + 8px);background:rgba(246,239,220,.86);border-radius:14px;padding:6px 10px;font-size:clamp(11px,2.6vmin,17px);box-shadow:0 2px 8px rgba(0,0,0,.15);min-width:clamp(120px,26vmin,210px)}
#clock{font-weight:700}
.bars{display:flex;flex-direction:column;gap:3px;margin:4px 0}
.bar{height:clamp(5px,1.2vmin,9px);background:rgba(0,0,0,.15);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;border-radius:6px}
.bar.hp i{background:#d9776a}.bar.st i{background:#7fb37a}
#gold{font-weight:600}
#hotbar{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--st) + 8px);display:flex;gap:5px;background:rgba(246,239,220,.8);padding:5px;border-radius:14px}
#hotbar button{width:calc(var(--u)*.62);height:calc(var(--u)*.62);border-radius:10px;background:rgba(255,255,255,.55);font-size:calc(var(--u)*.34);position:relative}
#hotbar button.sel{background:#fff;box-shadow:0 0 0 3px var(--accent)}
#hotbar button small{position:absolute;right:2px;bottom:0;font-size:calc(var(--u)*.16);font-weight:700}
#topbtns{position:absolute;right:calc(var(--sr) + 10px);top:calc(var(--st) + 8px);display:flex;gap:6px}
.tb{width:calc(var(--u)*.66);height:calc(var(--u)*.66);border-radius:50%;background:rgba(246,239,220,.86);font-size:calc(var(--u)*.32);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tb.on{background:#ffe59a;box-shadow:0 0 0 3px #ffd24a}
.tb.pulse{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,74,.9)}50%{box-shadow:0 0 0 12px rgba(255,210,74,0)}}
#stickzone{position:absolute;left:0;bottom:0;width:45vw;height:72vh}
#stick{position:absolute;width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);margin:calc(var(--u)*-.85) 0 0 calc(var(--u)*-.85);border-radius:50%;background:rgba(246,239,220,.25);border:2px solid rgba(246,239,220,.6);pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:calc(var(--u)*.75);height:calc(var(--u)*.75);margin:calc(var(--u)*-.375) 0 0 calc(var(--u)*-.375);border-radius:50%;background:rgba(246,239,220,.85)}
#actions{position:absolute;right:calc(var(--sr) + 12px);bottom:calc(var(--sb) + 12px);width:calc(var(--u)*3.3);height:calc(var(--u)*2.9)}
.ab{position:absolute;width:var(--u);height:var(--u);border-radius:50%;background:rgba(246,239,220,.82);box-shadow:0 3px 8px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ab span{font-size:calc(var(--u)*.36)}.ab b{font-size:calc(var(--u)*.15);margin-top:2px;font-weight:700}
.ab.big{width:calc(var(--u)*1.3);height:calc(var(--u)*1.3);right:0;bottom:0}
.ab.down{transform:scale(.92);background:#fff}
.ab.locked{opacity:.4}
#btnShoot{right:calc(var(--u)*1.45);bottom:0}
#btnDodge{right:0;bottom:calc(var(--u)*1.45)}
#btnTool{right:calc(var(--u)*1.25);bottom:calc(var(--u)*1.15)}
#btnTalk{right:calc(var(--u)*2.5);bottom:calc(var(--u)*.75)}
#btnTalk.ready{background:#ffe59a;box-shadow:0 0 0 3px #ffd24a}
#aimring{position:absolute;width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);margin:calc(var(--u)*-1.1) 0 0 calc(var(--u)*-1.1);border-radius:50%;border:2px dashed rgba(255,230,160,.8);pointer-events:none}
#aimknob{position:absolute;left:50%;top:50%;width:calc(var(--u)*.6);height:calc(var(--u)*.6);margin:calc(var(--u)*-.3) 0 0 calc(var(--u)*-.3);border-radius:50%;background:rgba(255,220,140,.9)}
#toast{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--st) + var(--u)*1.05);background:rgba(59,50,38,.85);color:#f6efdc;padding:6px 14px;border-radius:12px;font-size:clamp(12px,2.8vmin,18px);opacity:0;transition:opacity .4s;pointer-events:none;max-width:70vw;text-align:center}
#toast.show{opacity:1}
#banner{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%) scale(.6);background:linear-gradient(#fff7df,#f2dfae);color:#5a3f1c;padding:14px 30px;border-radius:18px;font-size:clamp(20px,5vmin,40px);font-weight:800;box-shadow:0 8px 30px rgba(0,0,0,.3);opacity:0;transition:all .5s cubic-bezier(.2,1.6,.4,1);pointer-events:none;white-space:nowrap}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#dialog{position:fixed;left:calc(var(--sl) + 6vw);right:calc(var(--sr) + 6vw);bottom:calc(var(--sb) + 14px);background:var(--paper);border:3px solid #cdbb8e;border-radius:18px;padding:12px 18px 16px;font-size:clamp(14px,3.3vmin,22px);box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:20;min-height:22vh}
#dlgName{font-weight:800;color:#8a5a2b;margin-bottom:4px}
#dlgText{line-height:1.35}
#dlgChoices{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#dlgChoices button{background:#fff;border:2px solid #cdbb8e;border-radius:12px;padding:8px 14px;font-weight:700}
#dlgMore{position:absolute;right:16px;bottom:6px;animation:bob 1s infinite;color:#b08a50}
@keyframes bob{50%{transform:translateY(3px)}}
#panel{position:fixed;inset:0;background:rgba(30,26,18,.45);z-index:30;display:flex;align-items:center;justify-content:center;padding:calc(var(--st) + 8px) calc(var(--sr) + 8px) calc(var(--sb) + 8px) calc(var(--sl) + 8px)}
#panelInner{background:var(--paper);border-radius:20px;width:min(94vw,980px);max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:14px 18px;font-size:clamp(13px,2.9vmin,19px);box-shadow:0 10px 40px rgba(0,0,0,.35);overscroll-behavior:contain}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ph h2{margin:0;font-size:1.35em}
.x{width:calc(var(--u)*.6);height:calc(var(--u)*.6);border-radius:50%;background:var(--paper2);font-size:1.2em;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(120px,24vmin,190px),1fr));gap:8px}
.card{background:#fff;border-radius:14px;padding:8px;border:2px solid var(--paper2);text-align:center}
.card canvas{width:100%;height:auto;display:block}
.card .nm{font-weight:800}
.pill{display:inline-block;background:var(--paper2);border-radius:10px;padding:6px 12px;margin:3px;font-weight:700}
.pill.on{background:#bfe0a8}
.btn{display:inline-block;background:var(--accent);color:#fff;border-radius:12px;padding:9px 16px;margin:4px;font-weight:800}
.btn.alt{background:var(--leaf)}.btn.ghost{background:var(--paper2);color:var(--ink)}
.btn.dis{opacity:.45}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.col{flex:1;min-width:200px}
.sw{width:calc(var(--u)*.55);height:calc(var(--u)*.55);border-radius:50%;display:inline-block;margin:3px;border:3px solid #fff;box-shadow:0 0 0 1px #bba}
.sw.on{box-shadow:0 0 0 3px var(--accent)}
.swl{display:inline-flex;flex-direction:column;align-items:center;font-size:.72em;margin:2px;width:calc(var(--u)*.95)}
input[type=range]{width:100%;height:calc(var(--u)*.5);accent-color:var(--accent);touch-action:pan-x}
.lvl{display:inline-flex;gap:2px}.lvl i{width:10px;height:10px;border-radius:50%;background:#ddd;display:inline-block}.lvl i.f{background:#e3a64c}
table.tr{width:100%;border-collapse:collapse}table.tr td{padding:5px 4px;border-bottom:1px solid var(--paper2)}
#radial{position:fixed;z-index:25;transform:translate(-50%,-100%);display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:min(70vw,460px);background:rgba(246,239,220,.95);padding:10px;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.3)}
#radial .rt{width:100%;text-align:center;font-weight:800}
#radial button{background:#fff;border-radius:12px;padding:8px 12px;font-weight:700;border:2px solid var(--paper2)}
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#cfe3b4,#8fb27a 60%,#4f6b45);z-index:40}
.tcard{text-align:center;padding:20px}
.tcard h1{font-size:clamp(36px,11vmin,90px);margin:0;color:#fff8e6;text-shadow:0 3px 0 #5d7a4c,0 8px 20px rgba(0,0,0,.25);letter-spacing:1px}
.sub{color:#fff8e6;opacity:.9;font-size:clamp(14px,3.4vmin,22px);margin:4px 0 18px;font-style:italic}
.tbtn{display:block;margin:10px auto;background:var(--paper);border-radius:16px;padding:12px 36px;font-size:clamp(16px,4vmin,26px);font-weight:800;box-shadow:0 4px 0 #b9a77a;min-width:220px}
.hint{color:#fff8e6;opacity:.75;font-size:clamp(11px,2.4vmin,15px);max-width:60vw;margin:16px auto 0}
#rotate{display:none;position:fixed;inset:0;z-index:100;background:#2f3b2a;color:#f6efdc;align-items:center;justify-content:center;text-align:center;font-size:20px}
.phone{font-size:64px;animation:rot 2s ease-in-out infinite}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait){#rotate{display:flex}}
.mg{position:relative;height:calc(var(--u)*1.1);background:#efe5c8;border-radius:14px;margin:10px 0;overflow:hidden}
.mg .zone{position:absolute;top:0;bottom:0;background:rgba(127,179,122,.6)}
.mg .mk{position:absolute;top:6%;bottom:6%;width:8px;margin-left:-4px;background:#8a5a2b;border-radius:4px}
.swipe{height:calc(var(--u)*2.2);background:#efe5c8;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.2em;font-weight:800;color:#8a6a3b;touch-action:none;margin:10px 0}