:root{
  --bg:#140e1c; --bg2:#1d1430; --panel:#241a38; --panel2:#2e2247;
  --ink:#f3eefb; --sub:#b6a9d4; --line:rgba(255,255,255,.10);
  --gold:#ffce4d; --hp:#ff5d6c; --hp2:#7a2230; --block:#7fd0ff;
  --burn:#ff8a3d; --poison:#8de36b; --stun:#ffd23f; --acc:#b07cff; --acc2:#7c4dff;
  --good:#5ce0a0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 80% at 50% -10%,#2a1d44 0%,var(--bg) 60%) fixed,var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",system-ui,sans-serif;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
  user-select:none;-webkit-user-select:none;
}

/* topbar */
#topbar{
  display:flex;align-items:center;gap:8px;padding:8px max(10px,env(safe-area-inset-left));
  padding-top:max(8px,env(safe-area-inset-top));
  background:rgba(20,14,28,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);font-size:13px;flex:none;z-index:5;
}
#topbar .back{color:var(--sub);text-decoration:none;font-weight:600;padding:4px 6px;border-radius:8px}
#topbar .back:active{background:var(--line)}
#topbar .brand{font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:5px}
#topbar .brand .ic{font-size:16px}
#topbar .spacer{flex:1}
#topbar .stat{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
#topbar button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:700;cursor:pointer}
#topbar button:active{background:var(--panel2)}

#app{flex:1;display:flex;flex-direction:column;min-height:0;max-width:560px;width:100%;margin:0 auto}

/* stage (battle) */
#stage{flex:1;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:10px 12px;min-height:0}
#enemyZone{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px}
#playerZone{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:4px}

.actor{position:relative;transition:transform .08s}
.actor .sprite{font-size:64px;line-height:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));transition:transform .12s}
.actor.enemy .sprite{font-size:72px}
.actor.hit{animation:hit .28s}
.actor.shake,.shake{animation:shake .3s}
@keyframes hit{0%{transform:translateY(0)}30%{transform:translateY(-6px) scale(1.06)}100%{transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.nameRow{font-weight:800;font-size:15px;letter-spacing:-.01em}
.hpbar{position:relative;width:min(280px,72vw);height:18px;border-radius:999px;background:var(--hp2);overflow:hidden;border:1px solid rgba(0,0,0,.4)}
.hpbar .hpfill{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#ff7b86,var(--hp));transition:width .35s cubic-bezier(.2,.8,.2,1);transform-origin:left}
.hpbar.player .hpfill{background:linear-gradient(90deg,#7ce0a8,#36c987)}
.hpbar .hptext{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}

.phud{display:flex;align-items:center;gap:8px}
.blockBadge{background:rgba(127,208,255,.16);color:var(--block);border:1px solid rgba(127,208,255,.4);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:800}

/* intent */
.intent{min-height:26px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--sub)}
.intent .ico{font-size:15px}
.intent.atk{color:#ff8a8a;border-color:rgba(255,93,108,.45)}
.intent.def{color:var(--block);border-color:rgba(127,208,255,.4)}
.intent.buf{color:var(--gold);border-color:rgba(255,206,77,.4)}
.intent.stunned{color:var(--stun);border-color:rgba(255,210,63,.5)}

/* status badges */
.statusRow{display:flex;gap:5px;min-height:20px;flex-wrap:wrap;justify-content:center}
.stbadge{font-size:11px;font-weight:800;border-radius:7px;padding:2px 6px;display:flex;align-items:center;gap:2px}
.stbadge.burn{background:rgba(255,138,61,.18);color:var(--burn)}
.stbadge.poison{background:rgba(141,227,107,.16);color:var(--poison)}
.stbadge.stun{background:rgba(255,210,63,.18);color:var(--stun)}
.stbadge.weak{background:rgba(180,160,210,.18);color:#cbb6f0}

/* gear */
#gear{display:flex;gap:7px;padding:6px 10px;overflow-x:auto;flex:none;scrollbar-width:none}
#gear::-webkit-scrollbar{display:none}
.gcard{flex:0 0 auto;width:96px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:8px 7px 9px;
  display:flex;flex-direction:column;gap:3px;position:relative;transition:transform .1s,border-color .15s,opacity .15s;cursor:pointer}
.gcard .gi{font-size:24px;line-height:1}
.gcard .gn{font-size:12px;font-weight:800;letter-spacing:-.02em}
.gcard .gn .lv{color:var(--gold);font-size:10px;margin-left:2px}
.gcard .greq{font-size:10px;font-weight:700;color:var(--acc);background:rgba(176,124,255,.14);border-radius:6px;padding:1px 5px;align-self:flex-start}
.gcard .gdesc{font-size:10.5px;line-height:1.25;color:var(--sub)}
.gcard.usable{border-color:var(--acc);box-shadow:0 0 0 2px rgba(176,124,255,.35),0 6px 16px rgba(124,77,255,.25);animation:pulse 1.1s infinite}
.gcard.usable:active{transform:scale(.96)}
.gcard.used{opacity:.32;filter:grayscale(.6)}
.gcard .usedTag{position:absolute;top:6px;right:6px;font-size:9px;font-weight:800;color:var(--sub);background:var(--bg);border-radius:6px;padding:1px 4px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(176,124,255,.35),0 6px 16px rgba(124,77,255,.25)}50%{box-shadow:0 0 0 4px rgba(176,124,255,.5),0 6px 20px rgba(124,77,255,.4)}}

/* tray */
#tray{flex:none;background:rgba(20,14,28,.86);border-top:1px solid var(--line);padding:8px 12px max(10px,env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#hint{text-align:center;font-size:12px;color:var(--sub);font-weight:600;min-height:16px;margin-bottom:6px}
#dice{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;min-height:54px;align-items:center}

.die{width:50px;height:50px;border-radius:12px;background:linear-gradient(160deg,#fffefb,#e7e2f0);position:relative;cursor:pointer;
  box-shadow:0 4px 0 #b9b2c9,0 6px 12px rgba(0,0,0,.35);transition:transform .1s,box-shadow .1s;border:1px solid #cfc9da}
.die:active{transform:translateY(2px);box-shadow:0 2px 0 #b9b2c9,0 4px 8px rgba(0,0,0,.35)}
.die.sel{outline:3px solid var(--acc);outline-offset:1px;transform:translateY(-3px) scale(1.04)}
.die.used{opacity:.25;pointer-events:none;filter:grayscale(1)}
.die.rolling{animation:roll .42s}
@keyframes roll{0%{transform:rotate(0) scale(.7)}50%{transform:rotate(220deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}
.die .pip{position:absolute;width:9px;height:9px;border-radius:50%;background:#2a2336;transform:translate(-50%,-50%)}
/* pip positions (percent) */
.die .p-c{left:50%;top:50%}
.die .p-tl{left:27%;top:27%}.die .p-tr{left:73%;top:27%}
.die .p-bl{left:27%;top:73%}.die .p-br{left:73%;top:73%}
.die .p-ml{left:27%;top:50%}.die .p-mr{left:73%;top:50%}

#actions{display:flex;gap:9px;margin-top:9px}
#actions button{flex:1;border:none;border-radius:13px;padding:13px 10px;font-size:15px;font-weight:800;cursor:pointer;letter-spacing:-.01em}
#actions .ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
#actions .ghost:disabled{opacity:.4}
#actions .ghost small{color:var(--gold);font-weight:800}
#actions .primary{background:linear-gradient(180deg,#8a5bff,var(--acc2));color:#fff;box-shadow:0 6px 16px rgba(124,77,255,.4)}
#actions button:active{transform:translateY(1px)}

/* floating damage / banner */
#fxLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float{position:absolute;font-weight:900;font-size:24px;text-shadow:0 2px 6px rgba(0,0,0,.6);animation:floatUp 1s forwards;will-change:transform,opacity}
.float.dmg{color:#ff6b78}.float.blk{color:var(--block)}.float.heal{color:var(--good)}
.float.burn{color:var(--burn)}.float.poison{color:var(--poison)}.float.crit{color:var(--gold);font-size:30px}
@keyframes floatUp{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-10px) scale(1.1);opacity:1}100%{transform:translate(-50%,-58px) scale(1);opacity:0}}

#banner{position:absolute;left:0;right:0;top:46%;text-align:center;font-size:30px;font-weight:900;letter-spacing:.02em;
  pointer-events:none;opacity:0;text-shadow:0 4px 18px rgba(0,0,0,.7)}
#banner.show{animation:bannerPop 1.05s}
@keyframes bannerPop{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.08)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}

/* overlay */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(8,5,14,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet{width:100%;max-width:430px;max-height:88vh;overflow:auto;background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:20px;padding:20px 18px 22px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.sheet h2{margin:0 0 4px;font-size:23px;font-weight:900;letter-spacing:-.02em;text-align:center}
.sheet .lead{text-align:center;color:var(--sub);font-size:13.5px;margin:0 0 16px;line-height:1.5}
.sheet .big{text-align:center;font-size:15px;margin:2px 0 14px}
.sheet .big b{color:var(--gold);font-size:34px;display:block;font-weight:900}

.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:14px;padding:12px 13px;cursor:pointer;transition:transform .1s,border-color .15s;width:100%;color:inherit;font:inherit}
.opt:active{transform:scale(.98)}
.opt:hover{border-color:var(--acc)}
.opt .oi{font-size:30px;flex:none;width:38px;text-align:center}
.opt .ot{font-weight:800;font-size:15px}
.opt .od{font-size:12px;color:var(--sub);margin-top:2px;line-height:1.35}
.opt .price{margin-left:auto;font-weight:900;color:var(--gold);font-size:14px;white-space:nowrap}
.opt.disabled{opacity:.45;pointer-events:none}
.opt.tagged .ot::after{content:attr(data-tag);font-size:10px;font-weight:800;color:var(--acc);background:rgba(176,124,255,.16);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}

.bigbtn{display:block;width:100%;margin-top:14px;border:none;border-radius:14px;padding:14px;font-size:16px;font-weight:800;cursor:pointer;
  background:linear-gradient(180deg,#8a5bff,var(--acc2));color:#fff;box-shadow:0 6px 16px rgba(124,77,255,.4)}
.bigbtn.alt{background:var(--panel2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.bigbtn:active{transform:translateY(1px)}

.howto{font-size:13px;line-height:1.6;color:var(--sub)}
.howto li{margin:5px 0}
.howto b{color:var(--ink)}
.tablekey{display:inline-block;min-width:18px;font-weight:800;color:var(--acc)}

.shopGold{text-align:center;font-weight:800;color:var(--gold);margin:-6px 0 12px}