*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0a0605;color:#eadfcf;font:14px system-ui,sans-serif;overflow:hidden}
#app{position:relative;height:100vh;height:100dvh}canvas#c{width:100%;height:100%;display:block;touch-action:none}
#hero-overlay{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
#session-lock{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(5,3,2,.9)}
#session-lock[hidden]{display:none}
#session-lock>div{width:min(440px,100%);padding:24px;background:linear-gradient(#1a120d,#0f0907);border:1px solid #d8a84a;border-radius:12px;box-shadow:0 20px 60px #000c;text-align:center}
#session-lock h2{margin:0 0 10px;font:700 22px Cinzel,Georgia,serif;color:#f0b24a}
#session-lock p{margin:0;color:#eadfcf;line-height:1.6}
#vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,rgba(8,3,2,.82))}
button{font-family:inherit}

/* ---------- HUD: health / exp / zone ---------- */
#hud{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:min(500px,94vw);font-family:Cinzel,Georgia,serif;pointer-events:none}
#plate{position:relative}
.badge{position:absolute;left:0;top:-3px;width:58px;height:58px;border-radius:50%;z-index:3;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,#5a3a20,#1a0e08 72%);border:3px solid #d8a84a;box-shadow:0 0 0 2px #2a1708,0 4px 12px #000c,inset 0 0 12px #000}
.badge b{font:700 21px/1 Cinzel,Georgia,serif;color:#ffe9a0;text-shadow:0 1px 3px #000}.badge small{font:700 8px Cinzel,Georgia,serif;letter-spacing:2px;color:#d8a84a;margin-top:2px}
.bars{display:flex;flex-direction:column;gap:4px;padding-left:34px}
.bar{position:relative;overflow:hidden;border-radius:7px;background:linear-gradient(#080403,#1a0c08);border:2px solid #6a4a22;box-shadow:0 0 0 1px #000,0 3px 8px #000a,inset 0 2px 5px #000}
.bar i{position:absolute;inset:0 auto 0 0;width:0}
.bar .gloss{position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0));pointer-events:none}
.bar em{position:absolute;inset:0;display:grid;place-items:center;font:700 12px Cinzel,Georgia,serif;font-style:normal;color:#fff;text-shadow:0 1px 3px #000,0 0 5px #000;letter-spacing:.5px}
.hp{height:30px;padding-left:0}
.hp::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(0,0,0,.28) 28px 30px);pointer-events:none}
#hpf{background:linear-gradient(#ff7a62,#d02a1c 50%,#7a1008);transition:width .12s;z-index:1}
#hpg{background:linear-gradient(#fff0e0,#ffb898);width:100%;transition:width .9s .35s ease-out}
.hp .heart{position:absolute;left:10px;top:0;line-height:27px;color:#ffd8d0;font-size:16px;z-index:3;text-shadow:0 0 8px #ff3a2a}
.hp em{z-index:3}
.hp.low{animation:lowhp .8s infinite}@keyframes lowhp{50%{box-shadow:0 0 0 1px #000,0 0 18px 4px #ff2a1a,inset 0 2px 5px #000}}
.xp{height:17px}.xp i{background:linear-gradient(#ffe896,#dba632 55%,#9a6a14);transition:width .25s}.xp em{font-size:10px}
.xp::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(0,0,0,.22) 48px 50px);pointer-events:none}
.zrow{display:flex;align-items:center;gap:8px;margin-top:7px;padding-left:34px}
.zrow b{font:700 12px Cinzel,Georgia,serif;letter-spacing:2px;color:#f0d9a8;text-shadow:0 1px 3px #000;white-space:nowrap}
.zn{flex:1;height:16px;border-color:var(--zone-color,#7a3a1a)}.zn i{background:linear-gradient(180deg,color-mix(in srgb,var(--zone-color,#ffa060) 72%,white),var(--zone-color,#e05a22) 55%,color-mix(in srgb,var(--zone-color,#8a2a0c) 55%,black));transition:width .25s}.zn em{font-size:10px}
.zn .skull{position:absolute;right:4px;top:0;line-height:12px;font-size:11px;color:#ffd0b0;opacity:.8;z-index:2}
.zn.boss i{background:linear-gradient(#ff6a52,#c0281c 55%,#6a0a0a);animation:bossp 1s infinite}@keyframes bossp{50%{filter:brightness(1.4)}}
#boss-hud{margin:8px 34px 0;padding:5px 8px 7px;background:rgba(12,5,4,.86);border:1px solid #6a3328;border-radius:7px;box-shadow:0 3px 10px #0009}
#boss-hud[hidden]{display:none}
.boss-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;color:#ffd5c2;font:700 11px Cinzel,Georgia,serif;letter-spacing:1px;text-shadow:0 1px 3px #000}
.boss-label span{color:#f2c3ad}
.boss-bar{height:10px;overflow:hidden;border:1px solid #552018;border-radius:5px;background:#1a0807;box-shadow:inset 0 1px 3px #000}
.boss-bar i{display:block;width:100%;height:100%;background:linear-gradient(#ff8870,#d52c20 55%,#78110e);transition:width .15s}

/* ---------- top-left pills ---------- */
#pills{position:absolute;top:8px;left:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:calc(50vw - 270px);z-index:3}
.pill{background:rgba(15,9,7,.88);border:1px solid #5a4528;border-radius:16px;padding:4px 12px;color:#ffd24a;font-weight:700;font-family:inherit;font-size:14px}.pill.teal{color:#4be3c5;border-color:#285a50}
.currency{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.currency.gold::before{content:"";width:12px;height:12px;flex:none;border:1px solid #ffe08a;border-radius:50%;background:radial-gradient(circle,#fff0ad 0 18%,#e0a333 23% 62%,#7b4511 68%);box-shadow:0 0 7px #d9952c88}
.currency.ember::before{content:"";width:9px;height:9px;flex:none;margin:0 2px;background:linear-gradient(135deg,#a4fff0,#36c9a8 55%,#176b5f);border:1px solid #8ffff0;transform:rotate(45deg);box-shadow:0 0 7px #35d4b366}
.gold-rate{color:#d6bd83;font-size:11px;letter-spacing:.15px;white-space:nowrap}
button.pill{cursor:pointer}
#pills button,#iclose,#sclose{background:#241912;color:#eadfcf;border:1px solid #5a4528;border-radius:8px;padding:6px 10px;cursor:pointer}#pills button:hover,#iclose:hover,#sclose:hover{border-color:#d8a84a}
kbd{color:#f0b24a;margin-left:4px}#user{display:none!important}
@media(max-width:1100px){#pills{position:absolute;top:104px;max-width:none;left:10px}}
#toast{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);color:#ffcf8a;font-family:Cinzel,Georgia,serif;opacity:0;transition:opacity .4s;text-shadow:0 2px 6px #000;text-align:center;padding:0 12px;z-index:30;pointer-events:none;max-width:92vw}

/* ---------- shared modal bits ---------- */
#inv,#sp{position:absolute;inset:0;background:rgba(5,3,2,.76);display:grid;place-items:center;z-index:5}#inv[hidden],#sp[hidden]{display:none}#sp{z-index:6}
.modal{width:min(820px,96vw);max-height:94vh;overflow:auto;background:linear-gradient(#1a120d,#0f0907);border:1px solid #4a3826;border-radius:12px;padding:14px 18px;box-shadow:0 20px 60px #000c}.modal.wide{width:min(1000px,96vw)}
.mh{display:flex;justify-content:space-between;align-items:center;gap:10px}.mh h2{margin:0;font:700 26px Cinzel,Georgia,serif;color:#f0b24a;letter-spacing:2px}
.note{margin:8px 0;padding:6px 8px;border:1px solid #33261b;border-radius:6px;text-align:center;color:#d8c9a8;background:#0c0705;font-size:12px}.note b{color:#f0b24a}
#tabs,#ltabs,#stabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
#tabs button,#ltabs button,#stabs button{background:none;color:#9a8670;border:1px solid transparent;border-radius:6px;padding:7px 12px;cursor:pointer;font:700 12px Cinzel,Georgia,serif;letter-spacing:1px;text-transform:uppercase}
#tabs .on,#ltabs .on,#stabs .on{background:#2a1d14;color:#f2e6cc;border-color:#d8a84a}
.empty{grid-column:1/-1;text-align:center;color:#8a7560;padding:24px}

/* ---------- inventory ---------- */
.eqrow{display:grid;grid-template-columns:1fr 220px 1fr;gap:10px;align-items:center}.col{display:flex;flex-direction:column;gap:6px}
.slot{display:flex;gap:8px;align-items:center;border:1px solid #5a4528;border-radius:6px;background:#140d09;padding:5px 8px;cursor:pointer;min-height:46px}.slot.sel{border-color:#f0b24a;box-shadow:0 0 8px #f0b24a55}
.slot img{width:32px;height:32px;flex:none}.slot .e{width:32px;height:32px;flex:none;border:1px dashed #3a2c20;border-radius:4px}
.slot b{display:block;font:700 10px Cinzel,Georgia,serif;letter-spacing:1px;color:#a89070}.slot span{font-size:12px}
#sum{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0;padding:7px;border:1px solid #33261b;border-radius:6px;background:#0c0705}
#sum span{font:700 11px Cinzel,Georgia,serif;color:#d8c9a8;letter-spacing:.5px;padding:2px 8px;border:1px solid #3a2c20;border-radius:10px}#sum span b{color:#f0b24a}
#list,#lstock{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}

/* ---------- item cards (shop + inventory) ---------- */
.icard{display:flex;flex-direction:column;border:1px solid #4a3826;border-radius:7px;background:linear-gradient(#1b130e,#100a07);position:relative;overflow:hidden}
.icard::before{content:'';position:absolute;inset:3px;border:1px solid rgba(216,168,74,.14);border-radius:5px;pointer-events:none}
.icard.r1{border-color:#2f6aa8}.icard.r2{border-color:#7a4aa8}.icard.r3{border-color:#c98a2a}.icard.eq{box-shadow:0 0 0 1px #f0b24a,0 0 14px #f0b24a40}
.icard .top{display:grid;grid-template-columns:112px 1fr;gap:10px;padding:12px 12px 8px;flex:1}
.ic{width:58px;height:58px;border:1px solid #3a2c20;border-radius:4px;background:radial-gradient(#2a1d14,#0b0705);display:grid;place-items:center;margin-bottom:6px}.ic img{width:44px;height:44px}
.nm b{display:block;font:700 14px/1.15 Cinzel,Georgia,serif;letter-spacing:1px;text-transform:uppercase;color:#f2e6cc}
.nm span{display:block;font:700 9px Cinzel,Georgia,serif;letter-spacing:2px;margin-top:4px}.nm em{display:block;font-style:normal;font-size:11px;color:#d8a84a;margin-top:2px}
.ds p{margin:0 0 6px;font-size:12px;color:#d8c9a8;line-height:1.35}
.blk{border-left:1px solid #5a4528;padding-left:8px;margin-top:5px}.blk label{display:block;font:700 9px Cinzel,Georgia,serif;letter-spacing:2px;color:#8a7560}.blk small{display:block;font-size:12px;color:#eadfcf}
.ft{padding:0 12px 12px}.ft .two{display:grid;grid-template-columns:auto 1fr;gap:6px}
.ft button,.cos .ft button,.pack .ft button{width:100%;padding:9px 10px;border-radius:6px;cursor:pointer;font:700 12px Cinzel,Georgia,serif;letter-spacing:1px;text-transform:uppercase;color:#f2e6cc;background:linear-gradient(#2c1f15,#1a110b);border:1px solid #5a4528}
.ft button.buy{background:linear-gradient(#6a4a22,#3a2610);border-color:#d8a84a;color:#fff2c8}
.ft button:hover:not(:disabled){filter:brightness(1.2)}.ft button:disabled{opacity:.42;cursor:default}
.ft button.em{background:linear-gradient(#0f5a4c,#07302a);border-color:#4be3c5;color:#c8fff2}

/* ---------- Special shop ---------- */
#sbody{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#sbody .wide{grid-column:1/-1}
.sn{grid-column:1/-1;padding:10px 12px;border:1px solid #285a50;background:#07120f;border-radius:8px;color:#bfeee2;font-size:12.5px;line-height:1.45}.sn b{color:#4be3c5}
.cos,.pack{display:flex;flex-direction:column;border:1px solid #2a4a44;border-radius:8px;background:linear-gradient(#0e1614,#080d0c);position:relative;overflow:hidden}
.cos.eq{border-color:#4be3c5;box-shadow:0 0 12px #4be3c555}
.cos .tag{position:absolute;left:8px;top:6px;font:700 8px Cinzel,Georgia,serif;letter-spacing:2px;color:#6a8a84;z-index:1}
.cos .pv{height:130px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 70%,#1d2b28,#080b0a 75%);border-bottom:1px solid #1d2f2b}
.cos .nmx{font:700 20px Cinzel,Georgia,serif;letter-spacing:1px}
.rainbow{animation:rb 3s linear infinite}@keyframes rb{to{filter:hue-rotate(360deg)}}.nmx.rainbow{color:#ff5a8a}
.cos b,.pack b{padding:8px 12px 0;font:700 14px Cinzel,Georgia,serif;letter-spacing:1px;color:#f2e6cc;text-transform:uppercase}
.cos p{margin:4px 12px 10px;font-size:11.5px;color:#9fb5af;line-height:1.35;flex:1}
.pack{align-items:center;text-align:center;padding-top:14px}.pack .big{font:700 34px Cinzel,Georgia,serif;color:#4be3c5;text-shadow:0 0 14px #4be3c566}.pack .big small{display:block;font-size:11px;letter-spacing:3px;color:#6a9a90}
.pack .tg{height:18px;margin:6px 0 10px;font:700 10px Cinzel,Georgia,serif;letter-spacing:2px;color:#ffd24a}
.pack .ft{width:100%;padding:0 12px 12px}
.bundle{display:flex;flex-direction:column;min-height:180px;padding:14px 12px 0;border:1px solid #80612e;border-radius:8px;background:linear-gradient(145deg,#21190f,#0d0e0c);position:relative;overflow:hidden}
.bundle.eq{border-color:#4be3c5;box-shadow:0 0 12px #4be3c555}
.bundle .tag{font:700 8px Cinzel,Georgia,serif;letter-spacing:2px;color:#6a9a90}
.bundle-preview{display:block;width:100%;height:160px;margin:8px 0 2px;border:1px solid rgba(216,168,74,.2);border-radius:6px;background:radial-gradient(ellipse at 50% 75%,#24302b,#080b0a 78%)}
.bundle b{padding:10px 0 0;font:700 16px Cinzel,Georgia,serif;letter-spacing:1px;color:#f2e6cc}
.bundle p{margin:5px 0 8px;font-size:12px;color:#c5b99f;line-height:1.4}
.bundle .contents{margin:auto 0 10px;color:#d8a84a;font-size:10px;line-height:1.4}
.bundle .ft{margin:0 -12px}
#setbody select{max-width:45%;padding:7px 9px;border:1px solid #5a4528;border-radius:6px;background:#140d09;color:#f2e6cc;font:12px Georgia,serif}
.country-value{min-width:38%;padding:7px 9px;border:1px solid #5a4528;border-radius:6px;color:#f2e6cc;font:700 12px Cinzel,Georgia,serif;cursor:pointer}
@media(max-width:900px){#sbody{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#list,#lstock{grid-template-columns:1fr}.eqrow{grid-template-columns:1fr 1fr}#hv{display:none}.icard .top{grid-template-columns:1fr}}

#touch-controls{position:absolute;inset:0;z-index:5;pointer-events:none}
#touch-controls[hidden]{display:none}
#touch-stick{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:132px;height:132px;display:grid;place-items:center;pointer-events:auto;touch-action:none}
.stick-ring{position:absolute;inset:8px;border:2px solid rgba(241,207,146,.55);border-radius:50%;background:radial-gradient(circle,rgba(49,34,27,.56),rgba(12,8,7,.35));box-shadow:0 3px 14px #0009,inset 0 0 14px #0009}
.stick-knob{position:relative;width:52px;height:52px;border:2px solid rgba(255,230,177,.8);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(187,143,82,.94),rgba(76,49,31,.94) 70%);box-shadow:0 3px 10px #000b,inset 0 1px 3px #fff5;will-change:transform}
@media(pointer:coarse){#touch-controls:not([hidden]){display:block}}
@media(max-width:640px){
  #hud{top:8px;left:8px;transform:none;width:min(270px,54vw)}
  .badge{width:44px;height:44px;top:0;border-width:2px}
  .badge b{font-size:17px}
  .bars{gap:3px;padding-left:22px}
  .hp{height:24px}
  .hp .heart{left:6px;line-height:21px;font-size:13px}
  .bar em{font-size:10px}
  .xp{height:14px}
  .xp em{font-size:9px}
  .zrow{gap:4px;margin-top:5px;padding-left:22px}
  .zrow b{font-size:9px;letter-spacing:.5px}
  .zn{height:14px}
  #boss-hud{margin:5px 0 0 22px;padding:4px 6px}
  .boss-label{font-size:9px;letter-spacing:.5px}
  #pills{top:8px;right:8px;left:auto;max-width:44vw;gap:4px;justify-content:flex-end}
  #pills .pill{padding:3px 7px;font-size:11px}
  #pills .gold-rate{font-size:9px}
  #pills button{padding:6px 7px;font-size:11px}
  #pills #logout{display:none}
  #toast{bottom:160px;font-size:13px}
  .modal{max-height:calc(100dvh - 16px);padding:10px}
  .mh h2{font-size:20px}
  .eqrow{gap:5px}
  .slot{gap:5px;padding:4px;min-width:0}
  .slot span{font-size:10px}
  #sum{gap:4px;margin:6px 0;padding:5px}
  #sum span{font-size:9px;padding:2px 5px}
  #tabs button,#ltabs button,#stabs button{padding:7px 8px}
  #list .icard .top{grid-template-columns:80px minmax(0,1fr);gap:7px;padding:8px}
  #list .ic.w{width:64px;height:64px}
  #list .ic.w img{width:58px;height:58px}
  #list .ft{padding:0 8px 8px}
  #sbody{grid-template-columns:1fr}
}

/* ---------- The Ruins (lobby / shop) ---------- */
#lobby{position:absolute;inset:0;z-index:4;background:#07050d}#lobby[hidden]{display:none}#lbg{position:absolute;inset:0;width:100%;height:100%}
.lpanel{position:absolute;top:0;right:0;bottom:0;width:min(840px,100%);background:linear-gradient(90deg,rgba(10,6,4,0),rgba(14,9,6,.95) 9%);padding:18px 22px 18px 64px;overflow:auto;display:flex;flex-direction:column;gap:10px}
#lstock{flex:1}.lfoot{display:flex;gap:8px;flex-wrap:wrap}
.lfoot button{background:#241912;color:#eadfcf;border:1px solid #5a4528;border-radius:8px;padding:10px 14px;cursor:pointer}.lfoot button:hover:not(:disabled){border-color:#d8a84a}.lfoot button:disabled{opacity:.5;cursor:default}
.lfoot .go{flex:1;background:linear-gradient(#a8381c,#6a1e0c);border-color:#d8763a;font:700 14px Cinzel,Georgia,serif;letter-spacing:1px}
.lfoot .sp{background:linear-gradient(#0f5a4c,#07302a);border-color:#4be3c5;color:#c8fff2}
@media(max-width:700px){.lpanel{padding-left:18px;background:rgba(12,7,5,.95)}}

/* ---------- tutorial ---------- */
#tut{position:absolute;left:12px;bottom:60px;width:min(350px,calc(100% - 24px));z-index:9;background:rgba(20,12,8,.97);border:1px solid #d8a84a;border-radius:10px;padding:10px 12px;box-shadow:0 6px 24px #000a}#tut[hidden]{display:none}
#tut b{font:700 11px Cinzel,Georgia,serif;letter-spacing:2px;color:#f0b24a}#tut p{margin:6px 0 8px;line-height:1.45;color:#eadfcf}#tut button{background:#241912;color:#eadfcf;border:1px solid #5a4528;border-radius:6px;padding:5px 10px;cursor:pointer;margin-right:6px}
.hl{outline:3px solid #ffd24a!important;box-shadow:0 0 14px 4px #ffd24a99!important;animation:hlp 1s infinite}@keyframes hlp{50%{box-shadow:0 0 3px 1px #ffd24a44!important}}
#tut.top{bottom:auto;top:70px}
#tut.side{bottom:auto;top:130px;width:min(250px,calc(100% - 24px))}

/* weapon icons: larger, rarity-lit frame */
.ic.w{width:96px;height:96px;border-radius:8px;border-color:var(--rc);background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--rc) 30%,#1a120d),#0b0705 78%);box-shadow:inset 0 0 14px #000a,0 0 10px color-mix(in srgb,var(--rc) 25%,transparent)}
.ic.w img{width:88px;height:88px;filter:drop-shadow(0 2px 3px #000a)}
.slot img{object-fit:contain}