/* =====================================================
   IDLE REALMS — NES 8-bit UI
   ===================================================== */
@font-face { font-family: 'PressStart'; src: url('../fonts/PressStart2P.woff2') format('woff2'); font-display: block; }

:root {
  --black: #000000;
  --white: #fcfcfc;
  --grey: #bcbcbc;
  --dgrey: #7c7c7c;
  --gold: #f8b800;
  --red: #d82800;
  --green: #58d854;
  --blue: #3cbcfc;
  --purple: #9878f8;
  --font: 'PressStart', monospace;
  --px: 4;
  --gb: 74px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--black); color: var(--white);
  font-family: var(--font); font-size: 10px; line-height: 1.4;
  -webkit-tap-highlight-color: transparent; user-select: none; overflow: hidden;
  -webkit-font-smoothing: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; font-size: inherit; }
.hidden { display: none !important; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.ico16 { width: 16px; height: 16px; }
.ico24 { width: 24px; height: 24px; }
.ico48 { width: 48px; height: 48px; }
.muted { color: var(--grey); }
#app { display: flex; flex-direction: column; height: 100dvh; }

.btn { padding: 10px 12px; font-size: 10px; background: var(--black); color: var(--white); box-shadow: inset 0 0 0 2px var(--white); }
.btn:hover:not(:disabled) { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.btn:active:not(:disabled) { background: var(--white); color: var(--black); }
.btn:disabled { color: var(--dgrey); box-shadow: inset 0 0 0 2px var(--dgrey); cursor: default; }
.btn-primary { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.btn-danger { color: #fc7460; box-shadow: inset 0 0 0 2px var(--red); margin-top: auto; align-self: flex-start; }

.bar { position: relative; background: var(--black); overflow: hidden; }
.bar .fill { position: absolute; inset: 2px; transform-origin: left; }
.bar span { position: relative; display: block; text-align: center; font-size: 8px; text-shadow: 1px 1px 0 var(--black); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--black); border-bottom: 2px solid var(--white); flex-shrink: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.brand span { color: var(--gold); text-shadow: 2px 2px 0 var(--red); }
.brand-ico { width: 32px; height: 32px; }
.resources { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.res { display: flex; align-items: center; gap: 6px; font-size: 10px; white-space: nowrap; }
.res img { width: 24px; height: 24px; }
.res .lbl { color: var(--grey); }
.res b { font-weight: normal; }
.res-gold b { color: var(--gold); font-size: 12px; }
.res-souls b { color: var(--blue); }
.res-gold.pulse { animation: blink .15s steps(1) 2; }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- layout ---------- */
main { flex: 1; display: grid; grid-template-columns: 1fr 420px; min-height: 0; }

/* ---------- battle ---------- */
#battle { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; overflow: hidden; background: #3cbcfc; }
#groundfill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--gb) + 4px); }
#scene {
  position: absolute; left: 0; right: 0; bottom: var(--gb); height: calc(100px * var(--px));
  background-repeat: repeat-x; background-position: center bottom;
  background-size: calc(160px * var(--px)) calc(100px * var(--px));
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#arena { position: absolute; inset: 0; cursor: pointer; touch-action: manipulation; }
.b-top, .b-bottom { position: relative; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; gap: 6px; }
.b-top button, .b-bottom button, .b-bottom label { pointer-events: auto; }

.stage-bar { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 440px; }
.stage-info { flex: 1; text-align: center; padding: 8px 4px; background: var(--black); box-shadow: inset 0 0 0 2px var(--white); }
.zone-name { font-size: 8px; color: var(--grey); text-transform: uppercase; margin-bottom: 6px; }
.stage-num { font-size: 14px; }
.stage-num b { color: var(--gold); font-weight: normal; }
.nav-btn { width: 40px; height: 40px; font-size: 12px; background: var(--black); box-shadow: inset 0 0 0 2px var(--white); }
.nav-btn:disabled { opacity: .35; cursor: default; }

.kill-row { display: flex; gap: 3px; height: 10px; }
.kill-row i { width: 14px; height: 8px; background: var(--black); box-shadow: inset 0 0 0 1px var(--dgrey); }
.kill-row i.on { background: var(--gold); box-shadow: none; }
.kill-row .label { font-size: 8px; color: var(--green); text-shadow: 1px 1px 0 var(--black), -1px -1px 0 var(--black); }

.m-name { font-size: 12px; text-shadow: 2px 2px 0 var(--black), -1px -1px 0 var(--black); margin-top: 2px; text-transform: uppercase; }
.m-name.boss, .m-name.chest { color: var(--gold); }
.hpbar { width: 100%; max-width: 300px; height: 16px; box-shadow: 0 0 0 2px var(--white); }
.hpbar .fill { background: var(--red); }
.hpbar span { line-height: 16px; }
.boss-timer { width: 100%; max-width: 220px; height: 12px; box-shadow: 0 0 0 2px var(--white); }
.boss-timer .fill { background: var(--gold); }
.boss-timer span { font-size: 8px; line-height: 12px; }
.buffs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.buff { display: flex; align-items: center; gap: 4px; padding: 4px 6px; font-size: 8px; background: var(--black); box-shadow: inset 0 0 0 1px var(--white); }
.buff img { width: 12px; height: 12px; }
.buff b { color: var(--gold); font-weight: normal; }

/* monster + party stand on the dirt path (scene row 86 of 100) */
#monster { position: absolute; left: calc(50% + 24px * var(--px)); bottom: calc(var(--gb) + 14px * var(--px)); transform: translateX(-50%); pointer-events: none; --ms: 16; }
#mImg { width: calc(var(--ms) * 1px * var(--px)); height: calc(var(--ms) * 1px * var(--px)); }
#monster .shadow { position: absolute; left: 15%; right: 15%; bottom: calc(-1px * var(--px)); height: calc(2px * var(--px)); background: rgba(0,0,0,.35); }
#monster.hit #mImg { animation: none; filter: brightness(0) invert(1); }
#monster.dead #mImg { opacity: 0; }
#monster.spawn #mImg { animation: spawnIn .2s steps(2); }
@keyframes hop { 50% { transform: translateY(calc(-1px * var(--px))); } }
@keyframes die { 33% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 0; } }
@keyframes spawnIn { from { opacity: 0; } }

#party { position: absolute; right: calc(50% + 2px * var(--px)); bottom: calc(var(--gb) + 14px * var(--px)); display: flex; flex-direction: row-reverse; align-items: flex-end; pointer-events: none; }
.hero-mini { width: calc(16px * var(--px)); height: calc(16px * var(--px)); margin-left: calc(-3px * var(--px)); }
.hero-mini:nth-child(2n) { margin-bottom: calc(5px * var(--px)); }
.hero-mini.lunge { transform: translateX(calc(6px * var(--px))); }
.fxs { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }

#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.dmg { position: absolute; font-size: 12px; color: var(--white); text-shadow: 2px 2px 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 2px 0 0 #000; animation: floatUp .6s steps(6) forwards; white-space: nowrap; }
.dmg.crit { color: var(--gold); font-size: 16px; }
.dmg.auto { font-size: 10px; color: var(--blue); }
.dmg.gold { color: var(--gold); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.dmg.gold img { width: 12px; height: 12px; }
@keyframes floatUp { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, -48px); opacity: 0; } }
.spark { position: absolute; width: 6px; height: 6px; background: #fff; animation: spark .3s steps(3) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

#fairy { position: absolute; width: calc(16px * var(--px)); height: calc(16px * var(--px)); z-index: 4; cursor: pointer; pointer-events: auto; animation: fairyFly 12s linear forwards, fairyBob .4s steps(1) infinite; }
@keyframes fairyFly { 0% { left: -10%; top: 30%; } 25% { left: 30%; top: 20%; } 50% { left: 55%; top: 34%; } 75% { left: 75%; top: 22%; } 100% { left: 105%; top: 30%; } }
@keyframes fairyBob { 50% { margin-top: -6px; } }

/* bottom: skills */
.b-bottom { flex-direction: row; justify-content: center; align-items: flex-end; gap: 10px; padding-bottom: 10px; }
.skills { display: flex; gap: 6px; }
.skill { position: relative; width: 52px; height: 52px; display: grid; place-items: center; background: var(--black); box-shadow: inset 0 0 0 2px var(--white); pointer-events: auto; }
.skill img { width: 24px; height: 24px; position: relative; }
.skill .key { position: absolute; top: 4px; left: 4px; font-size: 8px; color: var(--grey); z-index: 2; }
.skill .cd { position: absolute; inset: 2px; background: rgba(0,0,0,.75); transform-origin: bottom; z-index: 1; }
.skill .cdt { position: absolute; bottom: 4px; right: 4px; font-size: 8px; z-index: 2; text-shadow: 1px 1px 0 #000; }
.skill.ready { animation: ready 1s steps(1) infinite; }
.skill.active { box-shadow: inset 0 0 0 2px var(--green); }
.skill.locked img { filter: brightness(0) invert(.35); }
@keyframes ready { 50% { box-shadow: inset 0 0 0 2px var(--gold); } }

.toggle { display: flex; align-items: center; gap: 8px; font-size: 8px; cursor: pointer; }
.b-bottom .toggle { flex-direction: column; gap: 6px; background: var(--black); box-shadow: inset 0 0 0 2px var(--white); padding: 8px; height: 52px; justify-content: center; }
.toggle input { display: none; }
.slider { width: 28px; height: 12px; background: var(--dgrey); position: relative; }
.slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: var(--black); }
.toggle input:checked + .slider { background: var(--green); }
.toggle input:checked + .slider::after { left: 18px; }
.t-lbl { font-size: 8px; }

/* ---------- panel ---------- */
#panel { display: flex; flex-direction: column; background: var(--black); min-height: 0; box-shadow: inset 2px 0 0 var(--white); }
.tabs { display: flex; flex-shrink: 0; padding: 8px 8px 0 10px; gap: 4px; }
.tabs button { flex: 1; padding: 10px 2px; font-size: 8px; color: var(--grey); position: relative; box-shadow: inset 0 0 0 2px var(--dgrey); }
.tabs button.active { color: var(--black); background: var(--white); box-shadow: none; }
.badge { position: absolute; top: -6px; right: -4px; background: var(--red); color: #fff; font-size: 8px; padding: 2px 4px; animation: blink 1s steps(1) infinite; }
.tab { display: none; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; padding: 10px 10px 10px 12px; gap: 8px; }
.tab.active { display: flex; }
.tab::-webkit-scrollbar { width: 8px; } .tab::-webkit-scrollbar-thumb { background: var(--dgrey); }

.buy-amt { display: flex; align-items: center; gap: 4px; font-size: 8px; color: var(--grey); }
.buy-amt button { padding: 6px; font-size: 8px; color: var(--grey); box-shadow: inset 0 0 0 1px var(--dgrey); }
.buy-amt button.active { color: var(--black); background: var(--gold); box-shadow: none; }

.list { display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 8px; box-shadow: inset 0 0 0 2px var(--dgrey); }
.row.locked { opacity: .5; }
.row.mystery .r-icon img { filter: brightness(0) invert(.3); }
.r-icon { width: 48px; height: 48px; display: grid; place-items: center; }
.r-icon img { width: 48px; height: 48px; }
.r-icon img.ico { width: 36px; height: 36px; }
.r-main { min-width: 0; }
.r-title { display: flex; align-items: baseline; gap: 6px; font-size: 10px; flex-wrap: wrap; }
.r-lvl { color: var(--gold); font-size: 8px; }
.r-sub { font-size: 8px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.r-sub b { color: var(--white); font-weight: normal; }
.r-ms { height: 4px; background: #222; margin-top: 6px; }
.r-ms div { height: 100%; background: var(--purple); }

.buy-btn { min-width: 96px; padding: 8px 6px; text-align: center; font-size: 8px; line-height: 1.5; color: var(--white); box-shadow: inset 0 0 0 2px var(--green); }
.buy-btn b { display: block; font-size: 8px; font-weight: normal; color: var(--green); margin-bottom: 2px; }
.buy-btn .c { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--gold); }
.buy-btn .c img { width: 12px; height: 12px; }
.buy-btn:hover:not(:disabled) { background: #0a2a0a; }
.buy-btn:active:not(:disabled) { background: var(--green); }
.buy-btn:active:not(:disabled) b, .buy-btn:active:not(:disabled) .c { color: var(--black); }
.buy-btn:disabled { box-shadow: inset 0 0 0 2px var(--dgrey); cursor: default; }
.buy-btn:disabled b, .buy-btn:disabled .c { color: var(--dgrey); }
.buy-btn.soul { box-shadow: inset 0 0 0 2px var(--blue); }
.buy-btn.soul b, .buy-btn.soul .c { color: var(--blue); }
.buy-btn.soul:disabled { box-shadow: inset 0 0 0 2px var(--dgrey); }
.buy-btn.soul:disabled b, .buy-btn.soul:disabled .c { color: var(--dgrey); }

/* ---------- rebirth ---------- */
.rebirth-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; box-shadow: inset 0 0 0 2px var(--purple); }
.rb-souls { display: flex; align-items: center; gap: 12px; font-size: 10px; }
.rb-souls b { color: var(--blue); font-size: 16px; font-weight: normal; }
.rb-souls small { display: block; font-size: 8px; color: var(--green); margin-top: 6px; }
.rb-text { font-size: 8px; color: var(--grey); line-height: 1.8; }
.rb-text b { color: var(--white); font-weight: normal; }
.rb-progress { height: 16px; box-shadow: 0 0 0 2px var(--dgrey); }
.rb-progress .fill { width: 0; background: var(--blue); right: auto; }
.rb-progress span { line-height: 16px; }
.btn-rebirth { padding: 12px; font-size: 10px; color: var(--purple); box-shadow: inset 0 0 0 2px var(--purple); }
.btn-rebirth:not(:disabled):hover { background: #1a0a3a; }
.btn-rebirth:disabled { color: var(--dgrey); box-shadow: inset 0 0 0 2px var(--dgrey); cursor: default; }
.rb-next { font-size: 8px; color: var(--grey); text-align: center; }
.sub-h { font-size: 10px; margin-top: 8px; color: var(--gold); font-weight: normal; }
.sub-h small { color: var(--grey); font-size: 8px; display: block; margin-top: 6px; }

/* ---------- trophies ---------- */
.ach-head { display: flex; justify-content: space-between; align-items: center; padding: 10px; font-size: 8px; box-shadow: inset 0 0 0 2px var(--gold); gap: 8px; }
.ach-head b { color: var(--gold); font-weight: normal; }
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ach { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 8px; box-shadow: inset 0 0 0 2px #333; }
.ach img { width: 24px; height: 24px; }
.ach .an { font-size: 8px; }
.ach .ad { font-size: 7px; color: var(--grey); margin-top: 4px; line-height: 1.5; }
.ach .ap { height: 4px; background: #222; margin-top: 6px; }
.ach .ap div { height: 100%; background: var(--purple); }
.ach.done { box-shadow: inset 0 0 0 2px var(--gold); }
.ach.done .an { color: var(--gold); }
.ach:not(.done) img { filter: grayscale(1) brightness(.5); }

/* ---------- stats ---------- */
.settings { display: flex; flex-direction: column; gap: 10px; padding: 12px; box-shadow: inset 0 0 0 2px var(--dgrey); }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px; font-size: 8px; box-shadow: inset 0 0 0 2px var(--dgrey); }
.stats span { color: var(--grey); }
.stats b { text-align: right; font-weight: normal; }

/* ---------- toasts & modal ---------- */
#toasts { display: flex; flex-direction: column; gap: 4px; z-index: 6; pointer-events: none; align-items: center; margin-top: 4px; }
.toast { display: flex; align-items: center; gap: 8px; background: var(--black); box-shadow: inset 0 0 0 2px var(--white); padding: 8px 10px; font-size: 8px; animation: toastIn .15s steps(2), toastOut .1s 2.4s forwards; white-space: nowrap; }
.toast img { width: 16px; height: 16px; }
.toast.good { box-shadow: inset 0 0 0 2px var(--green); }
.toast.bad { box-shadow: inset 0 0 0 2px var(--red); }
.toast.epic { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
@keyframes toastIn { from { opacity: 0; } }
@keyframes toastOut { to { opacity: 0; } }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal-box { background: var(--black); max-width: 400px; width: 100%; text-align: center; padding: 22px; box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 4px var(--black), inset 0 0 0 6px var(--dgrey); }
.modal-art img { width: 64px; height: 64px; margin: 0 auto 12px; }
.modal-box h3 { font-size: 12px; margin-bottom: 12px; color: var(--gold); font-weight: normal; }
.modal-box p { color: var(--grey); line-height: 2; margin-bottom: 18px; font-size: 8px; }
.modal-box p b { color: var(--gold); font-weight: normal; }
.modal-box p small { font-size: 7px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  :root { --gb: 62px; }
  main { grid-template-columns: 1fr; grid-template-rows: minmax(370px, 54%) 1fr; }
  #panel { box-shadow: inset 0 2px 0 var(--white); }
  .b-top { padding: 8px 10px; gap: 4px; }
  .b-bottom { padding: 6px 10px 8px; gap: 6px; }
  .brand span { display: none; }
  .topbar { padding: 6px 10px; }
  .resources { gap: 10px; }
  .res { font-size: 8px; } .res img { width: 16px; height: 16px; }
  .res-gold b { font-size: 10px; }
  .stage-num { font-size: 12px; }
  .stage-info { padding: 6px 4px; }
  .zone-name { font-size: 7px; margin-bottom: 4px; }
  .nav-btn { width: 34px; height: 34px; }
  .m-name { font-size: 10px; }
  .hpbar { height: 14px; } .hpbar span { line-height: 14px; }
  .skill { width: 44px; height: 44px; }
  .b-bottom .toggle { height: 44px; }
  .hero-mini:nth-child(n+5) { display: none; }
  .tabs button { font-size: 7px; }
  .buy-btn { min-width: 84px; }
  .toast { font-size: 7px; padding: 6px 8px; }
  .toast:nth-last-child(n+3) { display: none; }
}

/* =====================================================
   ARENA VERSION
   ===================================================== */
#battle { background: #000; }
#battle .b-top { padding-bottom: 6px; }
#arenaWrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
#arenaCv { image-rendering: pixelated; image-rendering: crisp-edges; box-shadow: 0 0 0 2px var(--white); background: #000; }
#battle .b-bottom { flex-direction: column; align-items: center; min-height: 40px; gap: 4px; }
.stage-num .of { color: var(--dgrey); font-size: 8px; margin-left: 4px; }
.boss-box { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.boss-box .hpbar { max-width: 340px; }

/* hero rows */
.team-head { display: flex; justify-content: space-between; gap: 8px; padding: 10px; font-size: 8px; box-shadow: inset 0 0 0 2px var(--gold); }
.team-head b { color: var(--gold); font-weight: normal; }
.hint-text { font-size: 7px; color: var(--grey); line-height: 1.8; }
.hero-row { grid-template-columns: 48px 1fr auto; }
.hero-row .r-title .rar { font-size: 7px; }
.hero-row .tag { font-size: 7px; padding: 2px 4px; margin-left: 4px; }
.tag.team { background: var(--green); color: #000; }
.tag.bench { box-shadow: inset 0 0 0 1px var(--dgrey); color: var(--dgrey); }
.r-icon.rar-ring { box-shadow: inset 0 -6px 0 -2px var(--ring, transparent); }
.xp { height: 4px; background: #222; margin-top: 6px; }
.xp div { height: 100%; background: var(--blue); }

/* summon */
.summon-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; text-align: center; box-shadow: inset 0 0 0 2px var(--gold); }
.summon-card h3 { font-size: 12px; color: var(--gold); font-weight: normal; }
.summon-card p { font-size: 8px; color: var(--grey); line-height: 1.8; }
.summon-art { display: flex; gap: 4px; height: 64px; align-items: flex-end; }
.summon-art img { width: 48px; height: 48px; filter: brightness(0) invert(.25); }
.summon-art img:nth-child(2) { width: 64px; height: 64px; }
.summon-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.summon-btns .btn { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 130px; }
.summon-btns .btn .c { display: flex; align-items: center; gap: 4px; font-size: 8px; color: var(--gold); }
.summon-btns .btn .c img { width: 12px; height: 12px; }
.odds { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 12px; padding: 12px; font-size: 8px; box-shadow: inset 0 0 0 2px var(--dgrey); }
.odds .h { color: var(--dgrey); }

/* reveal */
.reveal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.reveal .card { width: 64px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 6px; box-shadow: inset 0 0 0 2px var(--rc); animation: pop .3s steps(3) backwards; }
.reveal .card img { width: 48px; height: 48px; }
.reveal .card b { color: var(--rc); font-weight: normal; }
.reveal.single .card { width: 120px; font-size: 8px; }
.reveal.single .card img { width: 96px; height: 96px; }
@keyframes pop { from { opacity: 0; transform: translateY(-8px); } }
.modal-box .reveal + p, #modalText p { color: var(--grey); line-height: 2; margin-bottom: 14px; font-size: 8px; }
#modalText p b { color: var(--gold); font-weight: normal; }

/* forge / shop rows */
.fuse-arrow { display: flex; align-items: center; gap: 2px; }
.fuse-arrow img { width: 24px; height: 24px; }
.mini { font-size: 7px; color: var(--grey); }

@media (max-width: 820px) {
  #battle .b-top { padding: 6px 8px 4px; }
  .summon-btns .btn { min-width: 120px; }
}

/* ---------- polish pass ---------- */
#battle { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 4px, transparent 4px 8px); }
#arenaCv { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--white), 0 0 0 6px #000, 0 0 0 8px var(--dgrey); }
.banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 20px; background: #000; box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 4px #000, inset 0 0 0 6px var(--dgrey); z-index: 5; pointer-events: none; text-align: center; white-space: nowrap; }
.banner b { font-size: 16px; font-weight: normal; color: var(--gold); }
.banner span { font-size: 8px; color: var(--white); }
.banner.bad b { color: var(--red); }
.banner.show { display: flex; animation: bannerIn 1.8s steps(1) forwards; }
@keyframes bannerIn { 0% { opacity: 1; } 8% { opacity: 0; } 16% { opacity: 1; } 24% { opacity: 0; } 32% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.dmg.lvup { color: var(--green); font-size: 10px; }
@media (max-width: 820px) { .banner b { font-size: 12px; } .banner { padding: 10px 12px; } }

/* fighting / bench sections */
.sec-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 8px; margin-top: 4px; }
.sec-h b { font-weight: normal; }
.sec-h.fight { background: var(--green); color: #000; }
.sec-h.bench { background: var(--dgrey); color: #000; margin-top: 12px; }
.sec-h.bench ~ .hero-row { opacity: .75; }
.empty-slot { padding: 10px; font-size: 7px; line-height: 1.8; color: var(--dgrey); text-align: center; box-shadow: inset 0 0 0 2px #333; }

/* auto-advance toggle */
.auto-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.auto-btn { pointer-events: auto; padding: 6px 8px; font-size: 8px; background: #000; color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.auto-btn.off { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }

/* pay to start + test mode */
.need-hero { color: var(--gold) !important; }
.test-box { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 12px; font-size: 7px; line-height: 1.8; color: var(--grey); box-shadow: inset 0 0 0 2px var(--red); }
.test-box b { color: var(--red); font-weight: normal; font-size: 8px; }

.ledger { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; width: 100%; text-align: left; font-size: 7px; padding-top: 8px; border-top: 2px solid #333; }
.ledger b { font-weight: normal; text-align: right; color: var(--white); font-size: 7px; }
.ledger span { color: var(--grey); }
.ledger .in { color: var(--green); } .ledger .out { color: #fc7460; } .ledger .sub { color: var(--dgrey); }

.btn-reset { color: #fc7460; box-shadow: inset 0 0 0 2px var(--red); font-size: 8px; padding: 8px 10px; }

/* trophies: collect by hand */
#claimAll { font-size: 8px; padding: 10px; }
.ach.ready { box-shadow: inset 0 0 0 2px var(--green); }
.ach.ready img { filter: none; }
.ach.ready .an { color: var(--green); }
.ach .claim { margin-top: 6px; padding: 5px 6px; font-size: 7px; background: var(--green); color: #000; }
.ach .claim:active { background: var(--white); }

.ledger .rate { color: var(--blue); }

/* ---------- earnings bar + "how you earn" window ---------- */
.earn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; padding: 8px 10px; background: var(--black); border-bottom: 2px solid var(--white); font-size: 8px; text-align: left; flex-shrink: 0; }
.earn-bar:hover { background: #181818; }
.earn-main, .earn-bonus { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.earn-main img { width: 16px; height: 16px; }
.earn-main b { color: var(--gold); font-weight: normal; font-size: 10px; }
.earn-bonus { margin-left: auto; }
.earn-bonus b { color: var(--green); font-weight: normal; }
.earn-lbl { color: var(--grey); }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 6px; height: 8px; background: #333; display: block; }
.pips i.on { background: var(--green); }
.earn-help { width: 20px; height: 20px; line-height: 20px; text-align: center; color: var(--black); background: var(--gold); font-size: 10px; flex-shrink: 0; }
.earn-bar.empty .earn-bonus { display: none; }
.how { text-align: left; margin-bottom: 16px; }
.how .step { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 8px; line-height: 1.8; color: var(--grey); }
.how .step i { font-style: normal; flex-shrink: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; background: var(--gold); color: var(--black); }
.how .step b { color: var(--white); font-weight: normal; }
.how h4 { font-size: 8px; font-weight: normal; color: var(--gold); margin: 14px 0 8px; padding-top: 12px; border-top: 2px solid #333; }
.how .calc { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; font-size: 8px; color: var(--grey); }
.how .calc b { font-weight: normal; color: var(--white); text-align: right; }
.how .calc .tot { color: var(--gold); padding-top: 7px; border-top: 2px solid #333; }
.how .calc .grn { color: var(--green); }
.how .pips { margin: 10px 0 2px; gap: 4px; }
.how .pips i { width: 14px; height: 14px; }
.how .note { font-size: 7px; line-height: 1.9; color: var(--dgrey); margin-top: 12px; }
@media (max-width: 820px) {
  .earn-bar { gap: 8px; padding: 7px 8px; font-size: 7px; }
  .earn-main b { font-size: 8px; }
  .earn-bonus .earn-lbl { display: none; }
}

.earn-today { flex-basis: 100%; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.earn-prog { position: relative; flex: 1; height: 16px; background: #222; box-shadow: inset 0 0 0 2px var(--dgrey); overflow: hidden; display: block; }
.earn-prog .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); display: block; }
.earn-prog .earn-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 7px; color: var(--white); text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
.earn-bar.empty .earn-today { display: none; }
.how .calc .gld { color: var(--gold); }

/* ---------- player dashboard (Stats tab) ---------- */
.dash { display: flex; flex-direction: column; gap: 10px; }
.dcard { padding: 12px; box-shadow: inset 0 0 0 2px var(--dgrey); display: flex; flex-direction: column; gap: 9px; }
.dcard h4 { font-size: 9px; font-weight: normal; color: var(--gold); }
.dcard .big { font-size: 14px; color: var(--gold); }
.dcard .big small { font-size: 8px; color: var(--grey); }
.drow { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; font-size: 8px; color: var(--grey); align-items: center; }
.drow b { font-weight: normal; color: var(--white); text-align: right; }
.drow .grn { color: var(--green); } .drow .gld { color: var(--gold); } .drow .dim { color: var(--dgrey); }
.dbar { position: relative; height: 16px; background: #222; box-shadow: inset 0 0 0 2px var(--dgrey); overflow: hidden; }
.dbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); display: block; }
.dbar.grn i { background: var(--green); } .dbar.blu i { background: var(--blue); }
.dbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 7px; color: var(--white); text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
.dsplit { display: grid; grid-template-columns: 96px 1fr 76px; gap: 7px 8px; font-size: 8px; color: var(--grey); align-items: center; }
.dsplit b { font-weight: normal; color: var(--white); text-align: right; }
.dsplit .mini { height: 8px; background: #222; position: relative; }
.dsplit .mini i { position: absolute; left: 0; top: 0; bottom: 0; background: #fc7460; display: block; }
.dsplit.in .mini i { background: var(--green); }
.dnote { font-size: 7px; line-height: 1.8; color: var(--dgrey); }
.dcard .btn { align-self: flex-start; }
.rarrow { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 8px; }
@media (max-width: 820px) { .tabs button { font-size: 6px; padding: 10px 0; } .dsplit { grid-template-columns: 84px 1fr 70px; } }

/* ---------- home screen + wiki ---------- */
.menu-btn { padding: 7px 8px; font-size: 8px; color: var(--black); background: var(--gold); }
.menu-btn:hover { background: var(--white); }
.screen { position: fixed; inset: 0; z-index: 200; background: var(--black); display: flex; flex-direction: column; }
#wiki { z-index: 210; }
#home { align-items: center; justify-content: center; overflow-y: auto; }
.home-bg { position: absolute; inset: 0; background-size: cover; background-position: center bottom; image-rendering: pixelated; opacity: .38; }
.home-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 16px; width: 100%; max-width: 520px; margin: auto; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 44px; line-height: 1; color: var(--gold); text-shadow: 4px 4px 0 var(--red), 8px 8px 0 #000; }
.logo span:last-child { color: var(--white); text-shadow: 4px 4px 0 var(--blue), 8px 8px 0 #000; }
.tagline { font-size: 8px; color: var(--grey); text-align: center; line-height: 1.8; text-shadow: 2px 2px 0 #000; }
.parade { display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 100px; }
.parade .hero { width: 48px; height: 48px; animation: hop .84s steps(2) infinite; }
.parade .boss { width: 96px; height: 96px; transform: scaleX(-1); }
.parade .vs { font-size: 10px; color: var(--red); margin: 0 8px 18px; text-shadow: 2px 2px 0 #000; }
@keyframes hop { 50% { transform: translateY(-4px); } }
.home-card { display: grid; grid-template-columns: auto auto; gap: 8px 18px; padding: 12px 16px; background: rgba(0,0,0,.85); box-shadow: inset 0 0 0 2px var(--dgrey); font-size: 8px; color: var(--grey); width: 100%; max-width: 320px; }
.home-card b { font-weight: normal; text-align: right; color: var(--white); }
.home-card .gld, .wiki-page .gld { color: var(--gold); }
.home-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; }
.home-btns .btn { width: 100%; padding: 13px; background: rgba(0,0,0,.9); }
.home-btns .btn.big { font-size: 14px; padding: 16px; animation: blinkSoft 1.2s steps(1) infinite; }
@keyframes blinkSoft { 50% { box-shadow: inset 0 0 0 2px var(--white); color: var(--white); } }
.home-foot { font-size: 6px; color: var(--dgrey); text-shadow: 1px 1px 0 #000; }
.wiki-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 2px solid var(--white); flex-shrink: 0; }
.wiki-head b { font-weight: normal; color: var(--gold); font-size: 14px; text-shadow: 2px 2px 0 var(--red); }
.wiki-head span { color: var(--grey); font-size: 8px; flex: 1; }
.wiki-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr; }
.wiki-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 2px solid var(--dgrey); overflow-y: auto; }
.wiki-nav button { text-align: left; padding: 11px 10px; font-size: 8px; color: var(--grey); box-shadow: inset 0 0 0 2px #333; white-space: nowrap; }
.wiki-nav button:hover { color: var(--white); }
.wiki-nav button.active { background: var(--white); color: var(--black); box-shadow: none; }
.wiki-page { overflow-y: auto; padding: 18px 20px 40px; font-size: 8px; line-height: 1.9; color: var(--grey); }
.wiki-page > * { max-width: 720px; }
.wiki-page h3 { font-size: 14px; font-weight: normal; color: var(--gold); margin-bottom: 14px; line-height: 1.3; }
.wiki-page h4 { font-size: 9px; font-weight: normal; color: var(--gold); margin: 20px 0 10px; padding-top: 14px; border-top: 2px solid #333; }
.wiki-page p { margin-bottom: 12px; }
.wiki-page p b { color: var(--white); font-weight: normal; }
.wiki-page .dim { color: var(--dgrey); } .wiki-page .grn { color: var(--green); }
.wiki-page .how { margin-bottom: 4px; }
.wtable { display: grid; gap: 0; margin-bottom: 12px; box-shadow: inset 0 0 0 2px var(--dgrey); width: fit-content; max-width: 100%; }
.wtable > * { padding: 8px 10px; border-bottom: 2px solid #222; color: var(--white); line-height: 1.6; }
.wtable .th { font-weight: normal; color: var(--gold); border-bottom: 2px solid var(--dgrey); white-space: nowrap; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
.wcell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; box-shadow: inset 0 0 0 2px #333; text-align: center; }
.wcell img { width: 48px; height: 48px; }
.wcell b { font-weight: normal; color: var(--white); font-size: 7px; }
.wcell span { color: var(--dgrey); font-size: 7px; }
.wzones { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wzone { display: flex; gap: 12px; align-items: center; padding: 10px; box-shadow: inset 0 0 0 2px #333; }
.wzone img { width: 64px; height: 64px; flex-shrink: 0; }
.wzone div { display: flex; flex-direction: column; gap: 3px; }
.wzone b { font-weight: normal; color: var(--white); }
.wzone em { font-style: normal; color: #fc7460; }
@media (max-width: 820px) {
  .logo { font-size: 30px; }
  .wiki-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .wiki-nav { flex-direction: row; border-right: 0; border-bottom: 2px solid var(--dgrey); overflow-x: auto; overflow-y: hidden; padding: 8px; }
  .wiki-nav button { padding: 9px 8px; font-size: 7px; flex-shrink: 0; }
  .wiki-page { padding: 14px 12px 40px; font-size: 7px; }
  .wtable > * { padding: 7px 6px; }
  .menu-btn { font-size: 7px; padding: 6px; }
}
@media (max-width: 820px) { .parade .hero { width: 40px; height: 40px; } .parade .boss { width: 80px; height: 80px; } .parade .vs { margin: 0 4px 14px; } }

/* ---------- wallet + tutorial ---------- */
.wallet-chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(0,0,0,.9); box-shadow: inset 0 0 0 2px var(--green); font-size: 8px; color: var(--grey); width: 100%; max-width: 320px; }
.wallet-chip b { font-weight: normal; color: var(--green); flex: 1; }
.wallet-chip button { font-size: 7px; color: #fc7460; padding: 4px; }
.wallet-chip button:hover { color: var(--white); }
.home-msg { font-size: 7px; line-height: 1.9; color: #fc7460; background: rgba(0,0,0,.9); padding: 10px; box-shadow: inset 0 0 0 2px var(--red); }
.home-msg a { color: var(--gold); }
#tutorial { position: fixed; inset: 0; z-index: 150; }
.tut-hole { position: fixed; box-shadow: 0 0 0 4px var(--gold), 0 0 0 9999px rgba(0,0,0,.78); pointer-events: none; transition: all .15s steps(3); }
.tut-card { position: fixed; background: var(--black); padding: 16px; box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 4px var(--black), inset 0 0 0 6px var(--dgrey); }
.tut-card h4 { font-size: 10px; font-weight: normal; color: var(--gold); margin-bottom: 10px; }
.tut-card p { font-size: 8px; line-height: 1.9; color: var(--grey); margin-bottom: 14px; }
.tut-n { font-size: 7px; color: var(--dgrey); margin-bottom: 8px; }
.tut-btns { display: flex; gap: 8px; align-items: center; }
.tut-btns span { flex: 1; }
.tut-btns .btn { font-size: 8px; padding: 9px 10px; }
.tut-btns .tut-skip { color: var(--dgrey); box-shadow: none; padding-left: 0; }

/* ---------- market ---------- */
.tabs button { padding-left: 0; padding-right: 0; }
.mk-test { font-size: 7px; line-height: 1.8; color: #fc7460; padding: 8px; box-shadow: inset 0 0 0 2px var(--red); }
.mk-tabs { display: flex; gap: 4px; }
.mk-tabs button { flex: 1; padding: 9px 4px; font-size: 8px; color: var(--grey); box-shadow: inset 0 0 0 2px var(--dgrey); }
.mk-tabs button.active { background: var(--gold); color: var(--black); box-shadow: none; }
.mk-tabs button b { font-weight: normal; }
.mk-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-filter button { padding: 6px 7px; font-size: 7px; color: var(--grey); box-shadow: inset 0 0 0 1px var(--dgrey); }
.mk-filter button.active { background: var(--white); color: var(--black) !important; box-shadow: none; }
.mk-row .r-sub.seller { color: var(--dgrey); margin-top: 4px; font-size: 7px; }
.mk-row .buy-btn.sell { box-shadow: inset 0 0 0 2px var(--gold); } .mk-row .buy-btn.sell b { color: var(--gold); }
.mk-row .buy-btn.cancel { box-shadow: inset 0 0 0 2px var(--red); } .mk-row .buy-btn.cancel b { color: #fc7460; }
.mk-row .tag { font-size: 6px; padding: 2px 4px; }
.mk-sell { text-align: left; margin-bottom: 14px; }
.mk-sell .mk-hero { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; font-size: 9px; }
.mk-sell .mk-hero img { width: 48px; height: 48px; }
.mk-sell .mk-hero small { display: block; font-size: 7px; color: var(--grey); margin-top: 6px; }
.mk-sell label { display: block; font-size: 8px; color: var(--grey); margin-bottom: 6px; }
.mk-sell input { width: 100%; padding: 10px; font-family: inherit; font-size: 12px; color: var(--gold); background: #111; border: 2px solid var(--white); outline: none; }
.mk-sell .calc { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; font-size: 8px; color: var(--grey); margin-top: 12px; }
.mk-sell .calc b { font-weight: normal; color: var(--white); text-align: right; }
.mk-sell .calc .gld { color: var(--gold); }
.mk-sell .note { font-size: 7px; line-height: 1.8; color: var(--dgrey); margin-top: 12px; }
@media (max-width: 820px) { .tabs { gap: 3px; padding-left: 6px; padding-right: 6px; } .tabs button { font-size: 6px; } }

/* earnings bar: base + boss bonus shown apart */
.earn-split { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 7px; color: var(--grey); white-space: nowrap; margin-top: -2px; }
.earn-split b { font-weight: normal; color: var(--white); }
.earn-split .g { color: var(--green); } .earn-split .g b { color: var(--green); }
.earn-bar.empty .earn-split { display: none; }
.earn-prog .bonus-zone { position: absolute; right: 0; top: 0; bottom: 0; width: 0; display: block; background: repeating-linear-gradient(90deg, rgba(88,216,84,.38) 0 2px, rgba(88,216,84,.16) 2px 4px); border-left: 2px solid var(--green); }
.earn-prog .fill { opacity: .92; }

/* ---------- homepage (scrolling landing page) ---------- */
#home { align-items: stretch; justify-content: flex-start; overflow: hidden; }
.hp-nav { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 2px solid var(--white); background: var(--black); flex-shrink: 0; z-index: 2; }
.hp-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gold); text-shadow: 2px 2px 0 var(--red); white-space: nowrap; }
.hp-brand img { width: 28px; height: 28px; }
.hp-links { display: flex; gap: 2px; flex: 1; justify-content: center; flex-wrap: nowrap; overflow: hidden; }
.hp-links button { font-size: 8px; color: var(--grey); padding: 8px; white-space: nowrap; }
.hp-links button:hover { color: var(--gold); }
.hp-nav .btn { font-size: 8px; padding: 9px 10px; white-space: nowrap; }
.hp-scroll { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.hp-scroll::-webkit-scrollbar { width: 10px; } .hp-scroll::-webkit-scrollbar-thumb { background: var(--dgrey); }
.hp-hero { position: relative; min-height: calc(100dvh - 48px); display: flex; flex-direction: column; border-bottom: 2px solid var(--white); }
.hp-hero .home-in { flex: 1; justify-content: center; }
.hp-strip { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; background: rgba(0,0,0,.9); border-top: 2px solid var(--dgrey); }
.hp-strip div { padding: 12px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.hp-strip b { font-weight: normal; font-size: 16px; color: var(--gold); }
.hp-strip span { font-size: 7px; color: var(--grey); }
.hp-sec { padding: 44px 16px; }
.hp-sec.alt { background: #0c0c0c; border-top: 2px solid #222; border-bottom: 2px solid #222; }
.hp-sec > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.hp-sec h2 { font-size: 18px; font-weight: normal; color: var(--gold); text-shadow: 3px 3px 0 var(--red); text-align: center; margin-bottom: 16px; line-height: 1.4; }
.hp-sec .lead { font-size: 9px; line-height: 2; color: var(--grey); text-align: center; max-width: 680px; margin-bottom: 24px; }
.hp-grid { display: grid; gap: 10px; }
.hp-grid.three { grid-template-columns: repeat(3, 1fr); }
.hp-grid.six { grid-template-columns: repeat(6, 1fr); }
.hp-card { padding: 16px; box-shadow: inset 0 0 0 2px var(--dgrey); background: var(--black); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hp-card img { width: 48px; height: 48px; }
.hp-card h4, .hp-step h4 { font-size: 10px; font-weight: normal; color: var(--white); }
.hp-card p, .hp-step p { font-size: 8px; line-height: 1.9; color: var(--grey); }
.hp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.hp-step { padding: 14px; box-shadow: inset 0 0 0 2px var(--dgrey); background: var(--black); display: flex; flex-direction: column; gap: 10px; }
.hp-step i { font-style: normal; width: 28px; height: 28px; line-height: 28px; text-align: center; background: var(--gold); color: var(--black); font-size: 12px; }
.hp-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.hp-row .btn { font-size: 8px; }
.hp-earn { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: start; }
.hp-rules { display: flex; flex-direction: column; gap: 8px; }
.hp-rule { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; padding: 14px; box-shadow: inset 0 0 0 2px var(--dgrey); }
.hp-rule b { font-weight: normal; font-size: 11px; color: var(--gold); line-height: 1.5; }
.hp-rule.grn b { color: var(--green); }
.hp-rule span { font-size: 8px; line-height: 1.9; color: var(--grey); }
.hp-calc { padding: 16px; box-shadow: inset 0 0 0 2px var(--gold); display: flex; flex-direction: column; gap: 10px; }
.hp-calc h4 { font-size: 10px; font-weight: normal; color: var(--gold); }
.hp-calc label { font-size: 7px; color: var(--grey); margin-top: 4px; }
.hp-calc input { width: 100%; padding: 10px; font-family: inherit; font-size: 12px; color: var(--gold); background: #111; border: 2px solid var(--white); outline: none; }
.hp-boss { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.hp-boss button { padding: 8px 0; font-size: 8px; color: var(--grey); box-shadow: inset 0 0 0 2px #333; }
.hp-boss button.active { background: var(--green); color: var(--black); box-shadow: none; }
.hp-calc .calc { display: grid; grid-template-columns: 1fr auto; gap: 9px 10px; font-size: 8px; color: var(--grey); margin-top: 6px; padding-top: 12px; border-top: 2px solid #333; }
.hp-calc .calc b { font-weight: normal; color: var(--white); text-align: right; }
.hp-calc .calc .grn { color: var(--green); }
.hp-calc .calc .tot { color: var(--gold); font-size: 10px; padding-top: 9px; border-top: 2px solid #333; }
.hp-rar { padding: 14px 8px; text-align: center; box-shadow: inset 0 0 0 2px var(--rc); background: var(--black); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hp-rar h4 { font-size: 8px; font-weight: normal; color: var(--rc); }
.hp-rar b { font-weight: normal; font-size: 12px; color: var(--white); }
.hp-rar span { font-size: 6px; color: var(--dgrey); }
.hp-rar em { font-style: normal; font-size: 7px; color: var(--grey); }
.hp-classes { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 12px; }
.hp-classes div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; box-shadow: inset 0 0 0 2px #333; background: var(--black); text-align: center; }
.hp-classes img { width: 48px; height: 48px; }
.hp-classes b { font-weight: normal; font-size: 6px; color: var(--white); line-height: 1.5; }
.hp-classes span { font-size: 6px; color: var(--dgrey); }
.hp-zone { position: relative; min-height: 150px; background-size: cover; background-position: center bottom; image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--dgrey); display: flex; align-items: flex-end; gap: 10px; padding: 12px; overflow: hidden; }
.hp-zone .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.86) 55%); box-shadow: inset 0 0 0 2px var(--dgrey); }
.hp-zone img { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.hp-zone .zt { position: relative; display: flex; flex-direction: column; gap: 6px; text-shadow: 1px 1px 0 #000; }
.hp-zone .zt span { font-size: 6px; color: var(--grey); }
.hp-zone .zt h4 { font-size: 9px; font-weight: normal; color: var(--white); line-height: 1.5; }
.hp-zone .zt em { font-style: normal; font-size: 7px; color: #fc7460; }
.hp-zone .zt b { font-weight: normal; font-size: 7px; color: var(--green); }
.hp-faq { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.hp-faq details { box-shadow: inset 0 0 0 2px var(--dgrey); }
.hp-faq summary { padding: 14px; font-size: 9px; color: var(--white); cursor: pointer; list-style: none; line-height: 1.6; display: flex; gap: 10px; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::before { content: '+'; color: var(--gold); flex-shrink: 0; }
.hp-faq details[open] summary::before { content: '-'; }
.hp-faq details[open] summary { color: var(--gold); }
.hp-faq p { padding: 0 14px 14px 34px; font-size: 8px; line-height: 2; color: var(--grey); }
.hp-cta { padding: 48px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; border-top: 2px solid var(--white); background: #0c0c0c; }
.hp-cta .btn.big { font-size: 14px; padding: 16px 28px; }
.logo.small { font-size: 24px; gap: 6px; text-shadow: 3px 3px 0 var(--red), 5px 5px 0 #000; }
.logo.small span:last-child { text-shadow: 3px 3px 0 var(--blue), 5px 5px 0 #000; }
@media (max-width: 900px) {
  .hp-links { display: none; }
  .hp-nav { justify-content: space-between; }
  .hp-brand span { font-size: 10px; }
  .hp-grid.three { grid-template-columns: 1fr; }
  .hp-grid.six { grid-template-columns: repeat(3, 1fr); }
  .hp-steps { grid-template-columns: 1fr; }
  .hp-earn { grid-template-columns: 1fr; }
  .hp-rule { grid-template-columns: 1fr; gap: 8px; }
  .hp-classes { grid-template-columns: repeat(5, 1fr); }
  .hp-sec { padding: 32px 12px; }
  .hp-sec h2 { font-size: 14px; }
  .hp-strip div { padding: 10px 10px; } .hp-strip b { font-size: 12px; } .hp-strip span { font-size: 6px; }
}

.hp-links { min-width: 0; }
.hp-nav .btn, .hp-brand { flex-shrink: 0; }
.hp-nav { min-width: 0; width: 100%; }

/* ---------- homepage hero: live battle scene behind the menu ---------- */
.hero-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hp-hero .home-in { padding-top: 20px; padding-bottom: calc(var(--band, 180px) + 8px); gap: 14px; justify-content: center; max-width: 560px; }
.hp-hero .logo { font-size: 60px; gap: 12px; animation: logoFloat 2.4s steps(4) infinite; text-shadow: 5px 5px 0 var(--red), 10px 10px 0 #000; }
.hp-hero .logo span:last-child { text-shadow: 5px 5px 0 var(--blue), 10px 10px 0 #000; }
@keyframes logoFloat { 50% { transform: translateY(-4px); } }
.hp-hero .tagline { font-size: 9px; color: var(--white); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.home-panel { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; padding: 14px; background: rgba(0,0,0,.88); box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 4px #000, inset 0 0 0 6px var(--gold), 6px 6px 0 rgba(0,0,0,.5); }
.home-panel .home-card, .home-panel .wallet-chip, .home-panel .home-btns { max-width: none; background: none; }
.home-panel .home-card { box-shadow: none; padding: 2px 2px 10px; border-bottom: 2px solid #333; }
.home-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.home-btns .home-mini .btn { padding: 10px 2px; font-size: 7px; }
.hp-down { font-size: 7px; color: var(--white); text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; animation: hpBlink 1.4s steps(1) infinite; padding: 6px; }
.hp-down::after { content: ' v'; color: var(--gold); }
@keyframes hpBlink { 50% { opacity: .25; } }
@media (max-width: 900px) { .hp-hero .logo { font-size: 34px; gap: 8px; text-shadow: 3px 3px 0 var(--red), 6px 6px 0 #000; } .hp-hero .logo span:last-child { text-shadow: 3px 3px 0 var(--blue), 6px 6px 0 #000; } .hp-hero .tagline { font-size: 7px; } }
@media (max-height: 760px) { .hp-hero .logo { font-size: 40px; } .hp-down { display: none; } }

.hero-stage { height: auto; bottom: auto; }
.hp-strip { margin-top: auto; }

.home-mini { display: flex; }
.home-mini .btn { flex: 1; }

/* while the server is answering, buttons wait */
body.busy .buy-btn, body.busy .btn, body.busy .claim { pointer-events: none; opacity: .65; }
body.busy { cursor: progress; }