/* ===========================================================
   OnChainRpg — retro pixel RPG UI
   =========================================================== */
:root{
  --bg:#0d0714; --panel:#1b1029; --panel2:#2a1a3f; --edge:#080410;
  --ink:#f6efff; --dim:#a091c2; --gold:#ffd76a; --red:#ff3c5c;
  --green:#7fe86a; --blue:#8fd7ff; --violet:#c98cff;
  --pix: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
  --body: ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:
    radial-gradient(120% 60% at 50% 0%, #241338 0%, var(--bg) 70%),
    var(--bg);
  color:var(--ink); font-family:var(--body);
  overflow:hidden; overscroll-behavior:none; touch-action:manipulation;
  user-select:none; -webkit-user-select:none;
}
#app{display:flex;flex-direction:column;height:100dvh;max-width:820px;margin:0 auto;position:relative}

/* ---------------- HUD ---------------- */
#hud{display:none;padding:6px 8px 4px;background:linear-gradient(#160d22,#12091c);border-bottom:3px solid var(--edge);flex:0 0 auto}
#hud.on{display:block}
.hud-row{display:flex;align-items:center;gap:8px}
.lvl{font-family:var(--pix);font-size:15px;color:var(--gold);background:#2a1a3f;border:3px solid var(--edge);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12);padding:5px 7px;line-height:1;min-width:46px;text-align:center}
.lvl-cap{font-size:7px;color:var(--dim);display:block;margin-bottom:3px}
.bars{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.bar{position:relative;height:14px;background:#241636;border:2px solid var(--edge);overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;width:50%;transition:width .12s linear}
.bar.hp .fill{background:linear-gradient(#ff6b7f,#c81f3d)}
.bar.xp{height:9px}
.bar.xp .fill{background:linear-gradient(#8fd7ff,#3b7fd4)}
.bar-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--pix);font-size:7px;color:#fff;text-shadow:1px 1px 0 #000;letter-spacing:.5px}
.hud-side{display:flex;flex-direction:column;gap:4px}
.chip{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',var(--pix);font-size:8px;background:#2a1a3f;border:2px solid var(--edge);padding:4px 5px;color:var(--gold);white-space:nowrap}
.chip.pot{color:var(--green)}
.hud-row2{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.stage-info{font-family:var(--pix);font-size:7px;color:var(--dim);letter-spacing:.5px}
.stage-info i{color:#5a4a78;font-style:normal}
.boost-chip{display:block;width:100%;margin-top:5px;font-family:var(--pix);font-size:8px;padding:6px 6px;border:2px solid #4a3a68;
  color:var(--dim);background:#1a1028;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px}
.boost-chip.live{animation:pulseGlow 1.1s ease-in-out infinite;background:#20142f}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,215,106,0)}50%{box-shadow:0 0 10px 0 currentColor}}
.hud-btns{display:flex;gap:4px;margin-left:auto}
.mini{font-family:var(--pix);font-size:7px;background:#2a1a3f;color:var(--ink);border:2px solid var(--edge);
  padding:5px 6px;cursor:pointer;box-shadow:inset 0 2px 0 rgba(255,255,255,.1)}
.mini:active{transform:translateY(1px)}
.mini.off{opacity:.5;color:var(--dim)}

/* ---------------- STAGE ---------------- */
#stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  background:#080410;border-bottom:3px solid var(--edge)}
#game{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;background:#0d0714}
#bossbar{position:absolute;left:4%;right:4%;top:6px;display:none}
#bossbar.on{display:block;animation:dropIn .35s ease-out}
@keyframes dropIn{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.bb-top{display:flex;justify-content:space-between;font-family:var(--pix);font-size:7px;
  color:#ffd9e0;text-shadow:1px 1px 0 #000;margin-bottom:2px;gap:6px}
.bb-track{height:11px;background:#2a0f18;border:2px solid var(--edge);box-shadow:0 2px 0 rgba(0,0,0,.5)}
.bb-fill{height:100%;width:100%;background:linear-gradient(#ff6b7f,#a30f2c);transition:width .12s linear}
#bossbar.filling .bb-fill{animation:bbFill 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes bbFill{from{width:0}to{width:100%}}
#bossbar.filling .bb-top{animation:bbName .5s steps(6) both}
@keyframes bbName{from{opacity:0}to{opacity:1}}
#toasts{position:absolute;left:0;right:0;top:34%;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.toast{font-family:var(--pix);font-size:10px;color:var(--gold);text-shadow:2px 2px 0 #000,0 0 8px rgba(0,0,0,.8);
  animation:toastIn .25s ease-out;padding:2px 6px}
.toast.out{animation:toastOut .5s ease-in forwards}
@keyframes toastIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes toastOut{to{transform:translateY(-16px);opacity:0}}

/* ---------------- CONTROLS ---------------- */
#controls{display:none;flex:0 0 auto;height:186px;align-items:center;justify-content:space-between;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px}
#controls.on{display:flex}
#controls.dim{opacity:.25;pointer-events:none}
#stick{position:relative;width:132px;height:132px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(circle,#241636 0%,#160d22 70%);border:3px solid var(--edge);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.07);touch-action:none}
#stick-ring{position:absolute;inset:14px;border-radius:50%;border:2px dashed #3a2a58}
#stick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:linear-gradient(#5a3f8c,#31215a);border:3px solid var(--edge);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.18);transition:transform .05s linear}
.stick-lbl{position:absolute;bottom:-2px;left:0;right:0;text-align:center;font-family:var(--pix);font-size:6px;color:#4d3d70}
.btn-cluster{display:grid;grid-template-areas:"pot ult atk" "dash ab atk";gap:8px;align-items:center}
.abtn{position:relative;overflow:hidden;border-radius:50%;width:66px;height:66px;border:3px solid var(--edge);
  background:linear-gradient(#4b3a72,#2b1c47);color:var(--ink);cursor:pointer;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.15),0 3px 0 rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;touch-action:none}
.abtn .ico{font-size:19px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',var(--body)}
.abtn .lbl{font-family:var(--pix);font-size:6px;color:#e6dcff;letter-spacing:.3px}
.abtn.small{width:56px;height:56px}
.abtn.small .ico{font-size:15px}
.abtn.atk{grid-area:atk;width:98px;height:98px;background:linear-gradient(#c9464f,#7d1d2c)}
.abtn.atk .ico{font-size:30px}
.abtn.ab{grid-area:ab;background:linear-gradient(#3f7fbf,#1f3f77)}
.abtn.ult{grid-area:ult;background:linear-gradient(#c98cff,#6b2fa8)}
.abtn.dash{grid-area:dash;background:linear-gradient(#5fbf8a,#1f6b4a)}
.abtn.pot{grid-area:pot;background:linear-gradient(#8a7bb5,#463a6b)}
.abtn.down{transform:translateY(3px);filter:brightness(1.25)}
.abtn.off{filter:grayscale(1) brightness(.6)}
.abtn.ready{box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 3px 0 rgba(0,0,0,.5),0 0 10px rgba(255,255,255,.22)}
.abtn .cd{position:absolute;inset:0;background:rgba(6,3,12,.72);transform-origin:bottom;transform:scaleY(0);pointer-events:none}
.abtn .cd-num{position:absolute;font-family:var(--pix);font-size:13px;color:#fff;text-shadow:2px 2px 0 #000;pointer-events:none}

/* ---------------- OVERLAY / SCREENS ---------------- */
#overlay{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  padding:14px;overflow-y:auto;background:rgba(8,4,16,.9)}
#overlay.on{display:flex}
.screen{display:none;width:100%;max-width:820px;margin:auto}
.screen.on{display:block;animation:fadeUp .28s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel{background:linear-gradient(#1f1330,#160d22);border:4px solid var(--edge);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.07),0 8px 0 rgba(0,0,0,.5);padding:18px 16px;text-align:center}
h1,h2,h3{font-family:var(--pix);font-weight:400;line-height:1.5}

/* title */
.title-wrap{text-align:center}
.game-title{font-size:clamp(24px,7.2vw,46px);color:var(--gold);text-shadow:0 4px 0 #7a3a10,0 6px 12px rgba(0,0,0,.7);letter-spacing:2px}
.game-title span{color:var(--red);text-shadow:0 4px 0 #5c0f22,0 6px 12px rgba(0,0,0,.7)}
.game-sub{font-family:var(--pix);font-size:7px;color:var(--dim);margin:10px 0 20px;letter-spacing:1px}
.choose{font-size:13px;color:var(--ink);margin-bottom:14px;text-shadow:2px 2px 0 #000}
#class-cards{display:grid;gap:12px;grid-template-columns:1fr}
.card{background:linear-gradient(#241638,#180f26);border:4px solid var(--edge);padding:14px 12px;text-align:center;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.08),0 6px 0 rgba(0,0,0,.5);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc)}
.card-art{height:74px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px;
  background:radial-gradient(60% 70% at 50% 80%,color-mix(in srgb,var(--acc) 28%,transparent),transparent 70%)}
.hero-pv{image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.card h3{font-size:14px;color:var(--acc);margin-bottom:6px;text-shadow:2px 2px 0 #000}
.card .tag{font-family:var(--pix);font-size:7px;color:var(--ink);opacity:.85;margin-bottom:8px}
.card .blurb{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:10px}
.boost-line{font-family:var(--pix);font-size:7px;color:var(--gold);background:#120a1e;border:2px solid var(--edge);padding:6px;margin-bottom:10px;line-height:1.6}
.stats{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.stat{display:flex;align-items:center;justify-content:space-between;font-family:var(--pix);font-size:6px;color:var(--dim)}
.pips{display:flex;gap:2px}
.pips i{width:11px;height:7px;background:#31215a;border:1px solid var(--edge)}
.pips i.on{background:var(--acc)}
.kit{font-family:var(--pix);font-size:6px;color:var(--dim);margin-bottom:12px;line-height:1.7}
.kit b{color:var(--ink)}
.sel{width:100%;font-family:var(--pix);font-size:11px;padding:12px;background:var(--acc);color:#14091f;
  border:3px solid var(--edge);cursor:pointer;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 4px 0 rgba(0,0,0,.5)}
.sel:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.hint{font-size:11px;color:#6d5c94;margin-top:14px;line-height:1.6}

/* buttons */
.big{display:block;width:100%;margin:12px auto 0;max-width:420px;font-family:var(--pix);font-size:11px;padding:14px;
  background:linear-gradient(#5a3f8c,#31215a);color:var(--ink);border:3px solid var(--edge);cursor:pointer;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 5px 0 rgba(0,0,0,.55);letter-spacing:1px}
.big:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.18)}
.big.danger{background:linear-gradient(#c9464f,#7d1d2c)}
.big.ghost{background:linear-gradient(#2a1a3f,#1a1028);color:var(--dim)}

/* banner */
.banner{text-align:center}
.b-kicker{font-family:var(--pix);font-size:9px;color:var(--gold);letter-spacing:2px;margin-bottom:10px}
.b-kicker.danger{color:var(--red);font-size:13px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}
.b-title{font-size:clamp(17px,5.5vw,30px);color:var(--ink);text-shadow:0 4px 0 #000;letter-spacing:1px;margin-bottom:8px}
.b-title.win{color:var(--gold)} .b-title.dead{color:var(--red)}
.b-sub{font-size:13px;color:var(--dim);margin-bottom:8px;line-height:1.6}
.b-note{font-family:var(--pix);font-size:7px;color:#6d5c94;margin-top:12px;line-height:1.8}
.b-hp{font-family:var(--pix);font-size:12px;color:var(--red);margin:8px 0}
.quote{font-size:12px;font-style:italic;color:#8778a8;margin-bottom:12px}
.boss-pv{image-rendering:pixelated;width:auto;max-width:60%;height:auto;display:block;margin:6px auto 10px;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.6))}
.boost-box{background:#120a1e;border:3px solid var(--edge);padding:10px;margin-bottom:6px}
.boost-box p{font-family:var(--pix);font-size:11px;color:var(--gold)}
.boost-box .tiny{font-size:10px;font-family:var(--body);color:var(--dim);margin-top:6px;line-height:1.5}

/* rewards */
.reward-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.rw{background:#120a1e;border:2px solid var(--edge);padding:9px 6px;display:flex;flex-direction:column;gap:5px}
.rw-k{font-family:var(--pix);font-size:6px;color:#6d5c94}
.rw-v{font-family:var(--pix);font-size:10px;color:var(--ink)}
.banked{font-family:var(--pix);font-size:9px;color:var(--gold);margin:6px 0}
.next{font-family:var(--pix);font-size:7px;color:var(--dim);margin:10px 0;line-height:1.7}

/* shop */
.coins-big{font-family:var(--pix);font-size:16px;color:var(--gold);margin:10px 0 14px}
#shop{display:grid;gap:8px}
.shop-item{display:flex;align-items:center;gap:10px;text-align:left;background:linear-gradient(#2a1a3f,#1d1230);
  border:3px solid var(--edge);padding:10px;cursor:pointer;color:var(--ink);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.1)}
.shop-item:active{transform:translateY(2px)}
.shop-item.poor{opacity:.45}
.shop-item.maxed{opacity:.6;border-color:#3a2a58}
.si-ico{font-size:20px;width:26px;text-align:center}
.si-body{flex:1;display:flex;flex-direction:column;gap:4px}
.si-name{font-family:var(--pix);font-size:8px;color:var(--ink)}
.si-name b{color:var(--gold)}
.si-desc{font-size:11px;color:var(--dim)}
.si-cost{font-family:var(--pix);font-size:9px;color:var(--gold);white-space:nowrap}

/* perk choice */
.perk-panel{max-width:760px;margin:0 auto}
#perk-cards{display:grid;gap:10px;grid-template-columns:1fr;margin-top:14px}
.perk-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  background:linear-gradient(#241638,#170e26);border:3px solid var(--edge);padding:14px 12px;cursor:pointer;color:var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.08),0 5px 0 rgba(0,0,0,.5);
  animation:perkIn .3s cubic-bezier(.2,.9,.3,1.4) both}
.perk-card:nth-child(2){animation-delay:.07s}
.perk-card:nth-child(3){animation-delay:.14s}
@keyframes perkIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.perk-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc)}
.perk-card:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.08)}
.perk-card:hover{border-color:var(--acc)}
.pk-ico{font-size:26px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',var(--body)}
.pk-name{font-family:var(--pix);font-size:11px;color:var(--acc);text-shadow:2px 2px 0 #000;letter-spacing:.5px}
.pk-desc{font-size:12px;color:var(--ink);opacity:.9;line-height:1.5}
.pk-meta{font-family:var(--pix);font-size:6px;color:#6d5c94;letter-spacing:.5px}

/* records */
.records{font-family:var(--pix);font-size:7px;color:#7a68a8;margin-top:14px;line-height:1.9}
.rw.wide{grid-column:1 / -1}
.perklist{font-family:var(--body) !important;font-size:11px !important;color:var(--dim) !important;line-height:1.6;text-align:left}

/* help */
.help{list-style:none;text-align:left;margin:10px 0 14px;display:grid;gap:8px}
.help li{font-size:12px;color:var(--dim);line-height:1.5;background:#120a1e;border:2px solid var(--edge);padding:8px}
.help b{font-family:var(--pix);font-size:8px;color:var(--gold);display:block;margin-bottom:3px}

/* ---------------- responsive ---------------- */
@media (min-width:640px){
  #class-cards{grid-template-columns:repeat(3,1fr)}
  #perk-cards{grid-template-columns:repeat(3,1fr)}
  .card .blurb{min-height:72px}
}
@media (max-height:680px){
  #stick{width:112px;height:112px}
  #stick-knob{width:44px;height:44px;margin:-22px 0 0 -22px}
  .abtn{width:58px;height:58px}.abtn.small{width:50px;height:50px}
  .abtn.atk{width:84px;height:84px}
  #controls{height:150px}
}
@media (orientation:landscape) and (max-height:520px){
  #app{max-width:none}
  #controls{height:132px}
  .game-title{font-size:26px}
}

/* ---------------- accessibility ---------------- */
button:focus-visible,.card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#stick:focus-visible{outline:3px solid var(--gold)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .b-kicker.danger{opacity:1}
}