*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#161310;font-family:system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}#app,#app canvas{position:fixed;inset:0;touch-action:none}.login-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#2a2118,#161310 70%);z-index:100}.login-card{text-align:center;padding:22px 28px calc(20px + env(safe-area-inset-bottom));color:#f0e6d2;max-height:100dvh;overflow-y:auto}.login-card h1{margin:0;font-size:30px;letter-spacing:6px;color:#e8a84d;text-shadow:0 2px 0 #4a2f14}.hero-wrap{width:260px;margin:0 auto 10px;border-radius:12px;overflow:hidden;border:1px solid #4a3826;box-shadow:0 8px 24px #00000073;line-height:0}.hero-art{display:block;width:100%;height:auto}.login-card .tagline{margin:6px 0 24px;color:#b8a888;font-style:italic}.login-card input{display:block;width:230px;margin:0 auto 12px;padding:12px 14px;font-size:16px;color:#f0e6d2;background:#241d15;border:2px solid #5a4526;border-radius:8px;outline:none;text-align:center}.login-card input:focus{border-color:#e8a84d}.login-card button{width:230px;padding:12px;font-size:16px;font-weight:600;color:#241505;background:#e8a84d;border:0;border-radius:8px;cursor:pointer}.login-card button:active{transform:translateY(1px)}.login-card .hint{margin-top:18px;font-size:12px;line-height:1.6;color:#8a7c64}.auth-tabs{display:flex;gap:6px;margin:0 auto 18px;width:230px;background:#1d160f;border-radius:10px;padding:4px}.auth-tabs button{flex:1;width:auto;padding:8px;font-size:14px;background:transparent;color:#b8a888;border-radius:7px;cursor:pointer}.auth-tabs button.active{background:#e8a84d;color:#241505;font-weight:700}.auth-sub{margin:10px auto 16px;font-size:13px;line-height:1.5;color:#b8a888;max-width:260px}.link-btn{display:block;width:auto!important;margin:12px auto 0!important;padding:4px 8px!important;background:transparent!important;color:#c9a25a!important;font-size:13px!important;font-weight:500!important;text-decoration:underline;text-decoration-color:#c9a25a73;text-underline-offset:3px;cursor:pointer}.link-btn:hover{text-decoration-color:currentColor}.link-btn:disabled{color:#8a7c64!important;text-decoration:none;cursor:default}.info-card h1{font-size:22px;letter-spacing:1px;text-shadow:0 1px 0 #4a2f14}.info-card .auth-sub{margin:12px auto 6px;font-size:14px;line-height:1.6;max-width:300px}.recovery-card .recovery-code{margin:8px auto 4px;padding:14px;width:260px;font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:2px;color:#ffe9bd;background:#241d15;border:2px dashed #7d5a36;border-radius:10px;word-break:break-all}.login-card .error{min-height:18px;margin-top:10px;font-size:13px;color:#e07050}.field-cap{display:block;width:230px;margin:2px auto -4px;text-align:left;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#8a7c64}.pw-meter{width:230px;margin:-2px auto 12px}.pw-bar{display:flex;gap:4px}.pw-seg{flex:1;height:4px;border-radius:2px;background:#3a2e20;transition:background .15s}.pw-meter[data-score="1"] .pw-seg.on{background:#d0563f}.pw-meter[data-score="2"] .pw-seg.on{background:#d99a3c}.pw-meter[data-score="3"] .pw-seg.on{background:#cbb53f}.pw-meter[data-score="4"] .pw-seg.on{background:#7bbd5a}.pw-rules{list-style:none;margin:8px 0 0;padding:0;text-align:left;font-size:11px;line-height:1.7;color:#8a7c64}.pw-rules li:before{content:"○ ";color:#6a5c48}.pw-rules li.met{color:#9ec987}.pw-rules li.met:before{content:"✓ ";color:#7bbd5a}#hud{position:fixed;inset:0;pointer-events:none;z-index:10}#hud .joy-zone,#hud .action-btn,#hud .bag-btn,#hud .inv-panel,#hud .dialogue-overlay,#hud .shop-overlay,#hud .lore-overlay{pointer-events:auto}#hud .touch-only{display:none}#hud.touch .touch-only{display:block}.joy-zone{position:absolute;left:0;top:0;bottom:0;width:50%;touch-action:none}.joy-base{position:absolute;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:#f0e6d214;border:2px solid rgba(240,230,210,.25);display:none}.joy-base.active{display:block}.joy-knob{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;background:#e8a84dd9;box-shadow:0 2px 8px #0006;transform:translate(-50%,-50%)}.toasts{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:6px;pointer-events:none}.toast{padding:6px 14px;border-radius:14px;background:#18130dd9;color:#f0e6d2;font-size:14px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;white-space:nowrap}.toast.in{opacity:1;transform:translateY(0)}.toast.out{opacity:0}.toast.warn{background:#542216e6;color:#ffd9c9}.toast.level{background:linear-gradient(180deg,#b97c2a,#8a5a1c);color:#fff3d6;font-weight:700;box-shadow:0 2px 12px #e8a84d59}.skill-chips{position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:6px}.skill-chip{padding:6px 10px;border-radius:8px;background:#18130dbf;color:#f0e6d2;font-size:13px;font-weight:600}.skill-chip .bar{margin-top:4px;width:110px;height:4px;border-radius:2px;background:#f0e6d226;overflow:hidden}.skill-chip .fill{height:100%;width:0%;background:#e8a84d;transition:width .3s}.bag-btn{position:absolute;top:calc(10px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:42px;height:42px;border-radius:10px;border:1px solid rgba(240,230,210,.25);background:#18130dbf;color:#f0e6d2;font-size:20px;cursor:pointer}.inv-panel{position:absolute;top:calc(60px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:232px;padding:10px;border-radius:10px;border:1px solid rgba(240,230,210,.2);background:#18130deb;color:#f0e6d2}.inv-panel.hidden{display:none}.inv-title{font-weight:700;margin-bottom:8px}.inv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.inv-slot{position:relative;aspect-ratio:1;border-radius:6px;background:#f0e6d212;display:flex;align-items:center;justify-content:center}.inv-item{width:78%;height:78%;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff3d6}.inv-qty{position:absolute;right:2px;bottom:1px;font-size:10px;font-weight:700;color:#ffe9bd;text-shadow:0 1px 2px #000}.inv-detail{margin-top:8px;min-height:28px;font-size:12px;line-height:1.4;color:#c9b998;font-style:italic}.lore-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a08068c}.lore-card{max-width:min(420px,86vw);padding:26px 26px 20px;border-radius:12px;border:1px solid #6f5a35;background:linear-gradient(180deg,#2b241a,#201a12);color:#efe3c8;text-align:center;box-shadow:0 8px 40px #0009}.lore-text{margin:0 0 12px;font-size:15px;line-height:1.7;letter-spacing:.04em}.lore-source{margin:0 0 18px;font-size:12px;font-style:italic;color:#a8956f}.lore-card button{padding:9px 22px;font-size:14px;border:0;border-radius:7px;background:#e8a84d;color:#241505;font-weight:600;cursor:pointer}.ember-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 62%,rgba(232,168,77,.5),transparent 62%)}.ember-flash.on{animation:emberflash .7s ease-out}@keyframes emberflash{0%{opacity:0}18%{opacity:1}to{opacity:0}}.dialogue-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(28px + env(safe-area-inset-bottom));pointer-events:none}.dialogue-card{pointer-events:auto;width:min(460px,92vw);padding:16px 18px 14px;border-radius:12px;border:1px solid #6f5a35;background:linear-gradient(180deg,#2b241a,#201a12);color:#efe3c8;box-shadow:0 8px 40px #0000008c}.dialogue-name{font-weight:700;color:#e8a84d;margin-bottom:6px}.dialogue-line{margin:0 0 8px;font-size:14px;line-height:1.55}.dialogue-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.dialogue-buttons button{padding:8px 14px;border:0;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer}.dialogue-buttons .primary{background:#e8a84d;color:#241505}.dialogue-buttons .plain{background:#f0e6d21f;color:#efe3c8}.shop-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a080673}.shop-card{width:min(520px,94vw);max-height:82vh;overflow:auto;padding:16px;border-radius:12px;border:1px solid #6f5a35;background:linear-gradient(180deg,#2b241a,#201a12);color:#efe3c8}.shop-title{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;color:#e8a84d;margin-bottom:10px}.shop-marks{font-size:13px;color:#ffe9bd}.shop-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.shop-col-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#a8956f;margin-bottom:6px}.shop-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;font-size:13px;border-bottom:1px solid rgba(240,230,210,.08)}.shop-row button{flex-shrink:0;padding:4px 10px;border:0;border-radius:6px;background:#e8a84d40;color:#ffe9bd;font-size:12px;cursor:pointer}.shop-row button:hover{background:#e8a84d73}.shop-close{margin-top:12px;width:100%;padding:10px;border:0;border-radius:8px;background:#e8a84d;color:#241505;font-weight:700;cursor:pointer}.inv-marks{float:right;font-size:12px;font-weight:600;color:#ffe9bd}.zone-fade{position:absolute;inset:0;background:#0d0b09;pointer-events:none;z-index:50}.hp-bar{position:absolute;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));transform:translate(-50%);width:180px;height:14px;border-radius:7px;background:#18130dd9;border:1px solid rgba(240,230,210,.25);overflow:hidden;pointer-events:none}.hp-bar.hidden{display:none}.hp-fill{height:100%;width:100%;background:linear-gradient(180deg,#5ac25a,#3f8f3f);transition:width .2s}.hp-bar.dead .hp-fill{background:#4a2020}.hp-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff3d6;text-shadow:0 1px 2px #000}.action-btn{position:absolute;right:calc(22px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));width:76px;height:76px;border-radius:50%;border:2px solid rgba(240,230,210,.35);background:#e8a84d47;color:#f0e6d2;font-size:30px;touch-action:none}.action-btn:active{background:#e8a84d8c}