@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:    #F1C40F;
  --gold2:   #C8A000;
  --bg:      #0A0A1A;
  --bg2:     #0F0F24;
  --bg3:     #14143A;
  --panel:   #0C0C20;
  --border:  #F1C40F44;
  --red:     #E74C3C;
  --green:   #2ECC71;
  --orange:  #FF8C00;
  --blue:    #5B9BD5;
  --text:    #D0D0F0;
  --muted:   #555580;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Press Start 2P', 'Courier New', Courier, monospace;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  image-rendering: pixelated;
}

/* ── TOP HUD (matches lobby dark-wood style) ──────── */
#top-hud {
  height: 50px;
  background: #261408;
  border-bottom: 3px solid #4A2808;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 7px;
  flex-shrink: 0;
  box-shadow: 0 3px 0 #000;
  z-index: 10;
}
.wallet-box {
  background: #160C04;
  border: 2px solid #6A4020;
  border-bottom: 3px solid #2A1000;
  border-right: 3px solid #2A1000;
  padding: 4px 10px;
  font-size: 8px;
  color: #D8C080;
  box-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .1s;
}
.wallet-box:hover { transform: translate(1px,1px); border-bottom-width:2px; border-right-width:2px; }
.hud-sep { flex: 1; }
.hud-btn {
  width: 34px; height: 34px;
  background: #321A08;
  border: 2px solid #6A4020;
  border-bottom: 3px solid #2A1000;
  border-right: 3px solid #2A1000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  transition: transform .1s;
}
.hud-btn:hover { transform: translate(1px,1px); border-bottom-width:2px; border-right-width:2px; }
.hud-btn canvas { image-rendering: pixelated; display: block; }
.bcoin-box {
  background: #160C04;
  border: 2px solid #C8A000;
  border-bottom: 3px solid #7A5000;
  border-right: 3px solid #7A5000;
  padding: 4px 10px;
  font-size: 12px;
  color: #F1C40F;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 2px 2px 0 #000;
  text-shadow: 1px 1px 0 #000, 0 0 8px #F1C40F88;
}
.bcoin-box canvas { image-rendering: pixelated; display: block; }
#bcoin-val { font-size: 12px; color: #F1C40F; min-width: 44px; }

/* ── IN-GAME PANELS ───────────────────────────────── */

/* inventory (chest) panel — matches lobby */
.inv-title-bar { background:linear-gradient(180deg,#F876A0 0%,#D84070 100%);
  border-bottom:3px solid #A02050; padding:7px 0 6px; text-align:center;
  font-size:12px; color:#FFF; text-shadow:2px 2px 0 #7A1040,0 0 10px #FF88BB88;
  letter-spacing:2px; flex-shrink:0; box-shadow:0 3px 0 #7A1040; }
.inv-controls { background:#1A2A3A; border-bottom:2px solid #2A3A4A;
  padding:6px 10px; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.inv-filter-btn { background:linear-gradient(180deg,#5CD8A0,#3EB880); color:#fff;
  font-size:6px; font-family:'Press Start 2P',monospace;
  border:none; border-bottom:3px solid #1A9858; border-radius:20px;
  padding:5px 14px 4px; cursor:pointer; box-shadow:0 2px 0 #0006;
  transition:transform .1s; display:flex; align-items:center; gap:6px; }
.inv-filter-btn:hover { transform:translateY(1px); border-bottom-width:2px; }
.inv-active-lbl { margin-left:auto; font-size:7px; color:#44DD88; letter-spacing:0; }
.inv-body { flex:1; display:flex; overflow:hidden; min-height:0; }
.inv-grid-wrap { flex:1; min-width:0; overflow-y:auto; padding:10px;
  background:#3A8AAA;
  scrollbar-width:thin; scrollbar-color:#2A6A8A #1A4A6A; }
.inv-grid-wrap::-webkit-scrollbar { width:5px; }
.inv-grid-wrap::-webkit-scrollbar-thumb { background:#2A6A8A; border-radius:3px; }
.inv-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.inv-card { background:#5BBDE8; border-radius:10px; padding:5px 4px 4px;
  cursor:pointer; position:relative; display:flex; flex-direction:column;
  align-items:center; gap:2px; border:2px solid #3A9DC8;
  box-shadow:0 3px 0 #1A6A90; transition:transform .1s,box-shadow .1s; }
.inv-card:hover { transform:translateY(-2px); box-shadow:0 5px 0 #1A6A90; }
.inv-card.rest { background:#4A8AAA; border-color:#2A6A8A; box-shadow:0 3px 0 #0A3A5A; }
.inv-card.sel  { border-color:#22FF55; box-shadow:0 0 0 2px #22FF55,0 0 14px #22FF5566,0 4px 0 #009922; }
.inv-card canvas { image-rendering:pixelated; display:block; background:transparent; border-radius:4px; }
.inv-card-id  { font-size:5px; color:#CCE8F8; align-self:flex-start; padding-left:1px;
  text-shadow:1px 1px 0 #0008; letter-spacing:0; }
.inv-dot { width:8px; height:8px; border-radius:50%; position:absolute; top:5px; right:5px;
  border:1px solid rgba(0,0,0,.35); }
.inv-dot.on  { background:#22EE44; box-shadow:0 0 5px #22EE44; }
.inv-dot.off { background:#EE3322; box-shadow:0 0 4px #EE3322; }
.inv-card-foot { display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:0 1px; }
.inv-s { background:#F1C40F; color:#060606; font-size:7px; border-radius:3px;
  padding:1px 5px; border:1px solid #C89000; line-height:1.5; }
.inv-detail { width:200px; flex-shrink:0; background:#DCF0FC;
  border-left:3px solid #8ABCD0; display:flex; flex-direction:column;
  padding:10px 9px; gap:8px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:#8ABCD0 transparent; }
.inv-det-empty { flex:1; display:flex; align-items:center; justify-content:center;
  font-size:7px; color:#6890A8; text-align:center; line-height:2.5; padding:20px; }
.inv-det-top  { display:flex; align-items:flex-start; gap:8px; }
.inv-det-portrait { image-rendering:pixelated; border:2px solid; box-shadow:2px 2px 0 #0003;
  border-radius:6px; flex-shrink:0; background:transparent; display:block; }
.inv-det-meta { flex:1; min-width:0; }
.inv-det-id  { font-size:7px; color:#334455; margin-bottom:1px; }
.inv-det-lv  { font-size:6px; color:#7090A8; }
.inv-det-name { font-size:9px; margin:3px 0 1px; }
.inv-det-rar  { font-size:6px; }
.inv-sect { background:#FFF; border-radius:8px; padding:8px 9px;
  border:1px solid #C8DCEA; box-shadow:0 1px 0 #C0D8E8; }
.inv-sect-lbl { font-size:6px; color:#8AACBE; margin-bottom:5px; letter-spacing:1px; }
.inv-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px 8px; }
.inv-stat { display:flex; align-items:center; gap:5px; font-size:10px; color:#223344; }
.inv-stat-ic { font-size:13px; line-height:1; }
.inv-skill-row { display:flex; align-items:flex-start; gap:7px; margin-bottom:5px; }
.inv-skill-row:last-child { margin-bottom:0; }
.inv-skill-ic { font-size:16px; line-height:1; flex-shrink:0; }
.inv-skill-name { font-size:7px; color:#223344; margin-bottom:1px; }
.inv-skill-desc { font-size:5.5px; color:#7899AA; letter-spacing:.3px; }
.inv-hpbar-wrap { background:#D0E8D0; border-radius:4px; height:9px; overflow:hidden; margin:4px 0 2px; }
.inv-hpbar { height:100%; border-radius:4px; transition:width .3s; }
.inv-hplbl { font-size:6px; color:#446644; text-align:right; }
.inv-det-btn { width:100%; padding:10px 0; font-size:9px; font-family:'Press Start 2P',monospace;
  border:none; border-radius:6px; cursor:pointer; letter-spacing:0;
  transition:transform .1s,box-shadow .1s; box-shadow:0 4px 0 #0004; }
.inv-det-btn:hover { transform:translateY(2px); box-shadow:0 2px 0 #0004; }
.inv-det-btn.btn-deact { background:linear-gradient(180deg,#F5A623,#D88010); color:#FFF;
  text-shadow:1px 1px 0 #8040006A; }
.inv-det-btn.btn-act  { background:linear-gradient(180deg,#44DD44,#22AA22); color:#FFF;
  text-shadow:1px 1px 0 #0044006A; }

/* shop panel */
.gp-shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:9px; }
.s-card { background:#080818; border:2px solid #FFFFFF0C;
  border-bottom:3px solid #000; border-right:3px solid #000;
  padding:10px 8px; text-align:center; box-shadow:3px 3px 0 #000; }
.s-card canvas { display:block; margin:0 auto; image-rendering:pixelated;
  border:2px solid; box-shadow:2px 2px 0 #000; background:transparent; border-radius:4px; }
.s-name  { font-size:7px; color:#C8C8E8; margin:6px 0 2px; text-shadow:1px 1px 0 #000; }
.s-rar   { font-size:6px; margin-bottom:5px; }
.s-stats { font-size:5px; color:#667788; display:flex; gap:6px; justify-content:center; margin-bottom:6px; }
.s-price { font-size:9px; color:var(--gold); text-shadow:1px 1px 0 #000; margin-bottom:6px; }
.btn-buy { width:100%; padding:5px 0; font-size:6px; font-family:'Press Start 2P',monospace;
  background:var(--gold); color:#080808; border:none;
  border-bottom:3px solid var(--gold2); border-right:3px solid var(--gold2);
  cursor:pointer; box-shadow:2px 2px 0 #000; letter-spacing:0; transition:transform .1s; }
.btn-buy:hover { transform:translate(1px,1px); border-bottom-width:2px; border-right-width:2px; }
.btn-buy:disabled { background:#222244; color:#333360; border-color:#111133; cursor:default; transform:none; }

/* chest popup */
.chest-overlay { position:fixed; inset:0; background:rgba(0,10,30,.78);
  display:flex; align-items:center; justify-content:center; z-index:2000;
  backdrop-filter:blur(3px); }
.chest-overlay.hidden { display:none; }
.chest-modal { background:#0C1A2E; width:480px; max-width:95vw; border-radius:16px; overflow:hidden;
  border:3px solid #44FF66;
  box-shadow:0 0 0 2px #22AA3388,0 0 28px #44FF6688,0 0 60px #22FF4444;
  animation:chest-pop .25s cubic-bezier(.2,1.5,.5,1); }
@keyframes chest-pop { from { transform:scale(.7); opacity:0; } to { transform:scale(1); opacity:1; } }
.chest-modal-hdr { position:relative; background:linear-gradient(180deg,#2ABB48,#189030);
  padding:16px 48px; text-align:center; border-bottom:3px solid #0E6022;
  box-shadow:0 3px 0 #0A4018; }
.chest-modal-hdr h2 { font-size:14px; color:#FFF; letter-spacing:3px;
  text-shadow:1px 1px 0 #000,0 0 12px #AAFFCC; }
.chest-modal-close { position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; background:#CC2222; border-radius:50%;
  border:2px solid #882222; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#FFF; box-shadow:0 2px 0 #551111; font-family:'Press Start 2P',monospace; line-height:1; }
.chest-modal-close:hover { background:#EE3333; }
.chest-modal-body { display:flex; gap:16px; padding:28px 24px 30px; }
.chest-reward-col { flex:1; background:#0A2A40; border:2px solid #1A4A6A; border-radius:12px;
  padding:22px 16px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.chest-reward-lbl { font-size:8px; color:#88CCEE; letter-spacing:1px; }
.chest-reward-canvas { image-rendering:pixelated; display:block; }
.chest-reward-amt { font-size:26px; color:#FFE040;
  text-shadow:2px 2px 0 #8A5000,0 0 12px #FFD00088; letter-spacing:1px; }
.chest-reward-amt.zero { color:#556688; text-shadow:none; }
.chest-claim-btn { width:100%; padding:10px 0; font-size:8px; font-family:'Press Start 2P',monospace;
  background:linear-gradient(180deg,#44DD44,#22AA22); color:#FFF; border:none;
  border-radius:20px; cursor:pointer; letter-spacing:1px;
  box-shadow:0 3px 0 #116611,0 0 8px #44DD4466; transition:transform .1s,box-shadow .1s;
  text-shadow:1px 1px 0 #006600; }
.chest-claim-btn:hover  { transform:translateY(1px); box-shadow:0 1px 0 #116611; }
.chest-claim-btn.empty  { background:linear-gradient(180deg,#334455,#223344); color:#445566;
  box-shadow:none; cursor:default; transform:none; text-shadow:none; }

.gpanel {
  display: none;
  position: absolute;
  inset: 0;
  background: #0A0A18;
  flex-direction: column;
  z-index: 20;
  overflow: hidden;
}
.gpanel.active { display: flex; }
.gpanel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  background: #261408;
  border-bottom: 3px solid #4A2808;
  padding: 0 14px;
  height: 42px;
  font-size: 9px;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
  flex-shrink: 0;
}
.gpanel-close {
  width: 30px; height: 30px;
  background: #3A1808;
  border: 2px solid #6A3018;
  border-bottom: 3px solid #1A0800;
  border-right: 3px solid #1A0800;
  color: #FF6644;
  font-size: 9px;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  transition: transform .1s;
}
.gpanel-close:hover { transform: translate(1px,1px); }
.gp-bulk-bar { display:flex; gap:8px; padding:8px 10px; background:#1A0C04; border-bottom:2px solid #3A1A08; flex-shrink:0; }
.gp-bulk-btn { flex:1; padding:10px 0; font-size:7px; font-family:'Press Start 2P',monospace; cursor:pointer; border-radius:4px; border-bottom:4px solid #000; border-right:3px solid #000; border-top:1px solid rgba(255,255,255,.15); border-left:1px solid rgba(255,255,255,.15); transition:transform .1s; letter-spacing:.5px; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
.gp-bulk-btn:hover { transform:translate(1px,2px); border-bottom-width:2px; border-right-width:1px; }
.gp-bulk-work { background:linear-gradient(180deg,#2AA0EE,#1A70C0); color:#E0F4FF; box-shadow:0 0 8px #1A8AD466; }
.gp-bulk-rest { background:linear-gradient(180deg,#F09020,#C06010); color:#FFF8E0; box-shadow:0 0 8px #E8820A44; }
.gpanel-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  scrollbar-width: thin;
  scrollbar-color: #C8A000 #000;
}
.gpanel-body::-webkit-scrollbar { width: 4px; }
.gpanel-body::-webkit-scrollbar-thumb { background: #C8A000; }
.gpanel-empty {
  width: 100%; text-align: center;
  padding: 40px 0; font-size: 9px; color: #444466;
}
.gp-hero-card {
  display: flex; align-items: center; gap: 8px;
  background: #0F0F28;
  border: 2px solid #1E1E3A;
  border-bottom: 3px solid #0A0A18;
  border-right: 3px solid #0A0A18;
  padding: 7px;
  width: calc(50% - 4px);
  box-shadow: 2px 2px 0 #000;
}
.gp-hero-card.gp-active { border-color: #2ECC71; box-shadow: 2px 2px 0 #000, 0 0 8px #2ECC7144; }
.gp-hero-portrait { image-rendering: pixelated; image-rendering: crisp-edges; flex-shrink: 0; }
.gp-hero-info { flex: 1; min-width: 0; }
.gp-hero-name { font-size: 6px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-hp-bar-wrap { background: #000; border: 1px solid #222; height: 5px; margin-bottom: 3px; overflow: hidden; }
.gp-hp-bar { height: 100%; }
.gp-stat { font-size: 5px; color: #888888; margin-bottom: 2px; }
.gp-toggle-btn {
  background: #000010; border: 2px solid;
  padding: 4px 5px; font-size: 5px;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer; white-space: nowrap;
  box-shadow: 2px 2px 0 #000; transition: transform .1s;
  flex-shrink: 0;
}
.gp-toggle-btn:hover { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.gp-shop-card {
  display: flex; align-items: center; gap: 8px;
  background: #0F0F28; border: 2px solid #1E1E3A;
  border-bottom: 3px solid #0A0A18; border-right: 3px solid #0A0A18;
  padding: 7px; width: calc(50% - 4px);
  box-shadow: 2px 2px 0 #000;
}
.gp-buy-btn {
  background: var(--gold); color: #000;
  border: none; border-bottom: 3px solid var(--gold2); border-right: 3px solid var(--gold2);
  padding: 5px 8px; font-size: 6px;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer; box-shadow: 2px 2px 0 #000; transition: transform .1s;
  flex-shrink: 0;
}
.gp-buy-btn:hover { transform: translate(1px,1px); }
.gp-buy-btn:disabled { background: #333; color: #666; border-color: #222; cursor: not-allowed; transform: none; }

/* ── HEROES PANEL (lobby-style full-width list) ───── */
.gh-list { display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex:1; padding:8px 10px;
  scrollbar-width:thin; scrollbar-color:#C8A000 #000; }
.gh-list::-webkit-scrollbar { width:4px; }
.gh-list::-webkit-scrollbar-thumb { background:#C8A000; }
.gh-row { background:#080818; border:2px solid #FFFFFF0C;
  border-bottom:3px solid #000; border-right:3px solid #000;
  padding:8px; display:flex; gap:10px; align-items:center; box-shadow:3px 3px 0 #000; }
.gh-row canvas { image-rendering:pixelated; border:2px solid; box-shadow:2px 2px 0 #000; flex-shrink:0; }
.gh-info { flex:1; min-width:0; }
.gh-name { font-size:8px; color:#C8C8E8; margin-bottom:4px; text-shadow:1px 1px 0 #000; }
.gh-sub  { display:flex; gap:8px; font-size:6px; color:#667788; margin-bottom:4px; }
.gh-hpw  { background:#000018; border:1px solid #FFFFFF1A; height:5px; max-width:160px; margin:4px 0; }
.gh-hpb  { height:100%; }
.gh-hptxt { font-size:5px; color:#444466; }
.btn-gh-recall { flex-shrink:0; padding:6px 10px; font-size:6px; font-family:'Press Start 2P',monospace;
  background:#000010; color:#EE2222; border:2px solid #EE2222;
  border-bottom:3px solid #881010; border-right:3px solid #881010;
  cursor:pointer; box-shadow:2px 2px 0 #000; transition:transform .1s; }
.btn-gh-recall:hover { transform:translate(1px,1px); box-shadow:1px 1px 0 #000; }
.gh-empty { padding:32px; text-align:center; font-size:7px; color:#444466; line-height:2.5; }

/* ── CHARACTER PANEL (split layout) ──────────────── */
.gpanel-split {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.gpanel-list {
  flex: 0 0 58%; overflow-y: auto; padding: 6px 7px;
  border-right: 3px solid #1A1008;
  background: #0E0E20;
  scrollbar-width: thin; scrollbar-color: #C8A000 #000;
}
.gpanel-list::-webkit-scrollbar { width: 4px; }
.gpanel-list::-webkit-scrollbar-thumb { background: #C8A000; }
.gpanel-detail {
  flex: 1; overflow-y: auto; padding: 12px 10px;
  background: #0D0D1C;
}
.gp-hero-row {
  display: flex; align-items: center; gap: 8px;
  background: #131328; border: 2px solid #1E1E38;
  border-bottom: 3px solid #0A0A18; border-right: 3px solid #0A0A18;
  padding: 7px 8px; margin-bottom: 6px; cursor: pointer;
  box-shadow: 2px 2px 0 #000; transition: border-color .1s;
}
.gp-hero-row:hover { border-color: #F1C40F55; }
.gp-hero-row.sel { border-color: var(--gold); background: #181830; }
.gp-row-portrait { image-rendering: pixelated; image-rendering: crisp-edges; flex-shrink: 0; background:transparent; border-radius:4px; }
.gp-row-mid { flex: 1; min-width: 0; }
.gp-row-name { font-size: 7px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-row-rar  { font-size: 6px; color: #AAAACC; margin-bottom: 4px; }
.gp-row-bar  { background: #000; border: 1px solid #2A2A44; height: 6px; margin-bottom: 4px; overflow: hidden; border-radius: 3px; }
.gp-row-fill { height: 100%; border-radius: 3px; }
.gp-row-status-work { font-size: 6px; color: #2ECC71; letter-spacing: 1px; text-shadow: 0 0 6px #2ECC7188; }
.gp-row-status-rest { font-size: 6px; color: #FF6644; letter-spacing: 1px; }
.gp-work-btn {
  flex-shrink: 0; padding: 8px 10px; font-size: 6px;
  font-family: 'Press Start 2P', monospace; cursor: pointer;
  border: 2px solid; border-bottom-width: 4px; border-right-width: 3px;
  box-shadow: 2px 2px 0 #000; transition: transform .1s; color: #FFF;
  white-space: nowrap; border-radius: 3px; text-shadow: 1px 1px 0 rgba(0,0,0,.6);
  letter-spacing: .5px;
}
.gp-work-btn.go-rest { background: linear-gradient(180deg,#F09020,#C06010); border-color: #904010; box-shadow: 2px 2px 0 #000, 0 0 8px #F0902044; }
.gp-work-btn.go-work { background: linear-gradient(180deg,#2AA0EE,#1A70C0); border-color: #0E5A90; box-shadow: 2px 2px 0 #000, 0 0 8px #2AA0EE44; }
.gp-work-btn:hover { transform: translate(1px,2px); box-shadow: 1px 1px 0 #000; }

/* detail panel */
.gp-det-portrait-box {
  width: 64px; height: 64px; margin: 0 auto 8px;
  border: 2px solid #2A2A44; box-shadow: 3px 3px 0 #000; overflow: hidden;
}
.gp-det-portrait { display: block; image-rendering: pixelated; width: 64px; height: 64px; }
.gp-det-name   { font-size: 8px; text-align: center; margin-bottom: 3px; }
.gp-det-rar    { font-size: 6px; text-align: center; margin-bottom: 3px; }
.gp-det-lvl    { font-size: 5px; color: #888; text-align: right; margin-bottom: 10px; }
.gp-det-stat {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  background: #131328; border: 1px solid #1E1E38; padding: 5px 8px; border-radius: 4px;
}
.gp-det-stat-icon { width: 14px; height: 14px; flex-shrink: 0; image-rendering: pixelated; display: block; }
.gp-det-stat-label { flex: 1; font-size: 6px; color: #B0B0C8; }
.gp-det-stat-val   { font-size: 9px; color: var(--gold); }
.gp-upgrade-btn {
  display: block; width: 100%; margin-top: 14px; padding: 11px;
  background: linear-gradient(180deg,#30D870,#1A9040);
  border: 2px solid #1A9040; border-bottom: 4px solid #0E5A28; border-right: 3px solid #0E5A28;
  color: #FFF; font-family: 'Press Start 2P', monospace; font-size: 8px;
  cursor: pointer; box-shadow: 2px 2px 0 #000, 0 0 10px #28C06044; transition: transform .1s;
  text-shadow: 1px 1px 0 #000; letter-spacing: .5px;
}
.gp-upgrade-btn:hover { transform: translate(1px,2px); box-shadow: 1px 1px 0 #000; }
.gp-det-placeholder { font-size: 7px; color: #333355; text-align: center; padding-top: 40px; }

/* ── MAIN AREA ────────────────────────────────────── */
#main-area {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

/* ── HERO PANEL ───────────────────────────────────── */
#hero-panel {
  width: 220px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 3px solid #F1C40F33;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#hero-panel-title {
  text-align: center;
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--gold);
  padding: 7px 0 6px;
  border-bottom: 2px solid #F1C40F33;
  background: #070714;
  flex-shrink: 0;
  text-shadow: 1px 1px 0 #000;
}

#hero-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 3px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold2) #000;
}
#hero-list::-webkit-scrollbar { width: 4px; }
#hero-list::-webkit-scrollbar-track { background: #000; }
#hero-list::-webkit-scrollbar-thumb { background: var(--gold2); }

/* ── HERO CARD ────────────────────────────────────── */
.hero-card {
  display: flex;
  gap: 5px;
  background: #0A0A1E;
  border: 2px solid #FFFFFF0F;
  border-bottom: 2px solid #00000066;
  border-right: 2px solid #00000066;
  padding: 5px;
  margin-bottom: 4px;
  transition: border-color 0.1s;
  box-shadow: inset 1px 1px 0 #FFFFFF08;
}
.hero-card:hover { border-color: #F1C40F66; }

.hero-portrait {
  width: 48px; height: 48px;
  border: 2px solid;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  image-rendering: pixelated;
  box-shadow: 2px 2px 0 #000;
}
.hero-sprite-canvas {
  display: block;
  image-rendering: pixelated;
}
.hero-rarity-badge {
  position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px;
  font-size: 7px; font-weight: 400;
  font-family: 'Press Start 2P', monospace;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.hero-info { flex: 1; min-width: 0; }
.hero-name {
  font-size: 7px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
  text-shadow: 1px 1px 0 #000;
}
.hero-rarity-label { font-size: 6px; margin-bottom: 3px; }

.hero-hp-bar-wrap {
  background: #000018;
  border: 1px solid #FFFFFF22;
  height: 6px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 2px;
  box-shadow: inset 1px 1px 0 #000;
}
.hero-hp-bar { height: 100%; transition: width 0.3s; }
.hero-hp-text { font-size: 6px; color: var(--muted); margin-bottom: 2px; }

.hero-stats {
  display: flex; gap: 4px;
  font-size: 6px; color: #8888AA;
  margin-bottom: 2px;
}
.hero-stats span { white-space: nowrap; }

.hero-state { font-size: 6px; font-weight: 400; letter-spacing: 1px; }
.hero-earned { font-size: 6px; color: var(--gold); }

.hero-actions { display: flex; flex-direction: column; justify-content: center; gap: 4px; }

.btn-deploy, .btn-recall {
  border: 2px solid;
  background: #000010;
  padding: 3px 5px;
  font-size: 6px;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
  letter-spacing: 0;
  transition: transform 0.1s;
  white-space: nowrap;
  box-shadow: 2px 2px 0 #000;
}
.btn-deploy:hover, .btn-recall:hover { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.btn-deploy:active, .btn-recall:active { transform: translate(2px,2px); box-shadow: none; }
.btn-recall { border-color: var(--red); color: var(--red); }

/* ── CANVAS WRAP ──────────────────────────────────── */
#canvas-wrap {
  flex: 1;
  background: #5A5A5A;
  overflow: hidden;
  position: relative;
}
#game-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── SCANLINE OVERLAY ─────────────────────────────── */
#canvas-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 5;
}

/* ── GAME BOTTOM NAV (matches lobby style) ────────── */
#game-nav {
  height: 64px;
  flex-shrink: 0;
  background: #261408;
  border-top: 3px solid #4A2808;
  display: flex;
  align-items: stretch;
  box-shadow: 0 -3px 0 #000;
}

.gnav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  border-right: 2px solid #3A2008;
  transition: background .12s;
}
.gnav-tab:last-child { border-right: none; }
.gnav-tab:hover { background: #3A1E08; }
.gnav-tab:active { background: #180A00; }
.gnav-tab.on { background: #180E02; position: relative; }
.gnav-tab.on::after {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%;
  height: 3px; background: var(--gold);
}
.gnav-tab.on .gnav-lbl { color: var(--gold); text-shadow: 1px 1px 0 #000, 0 0 6px var(--gold); }

.gnav-icon {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

.gnav-lbl {
  font-size: 6px;
  color: #887750;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #000;
  font-family: 'Press Start 2P', 'Courier New', monospace;
}
.gnav-tab:hover .gnav-lbl { color: var(--gold); }

/* ── BOTTOM BAR (hidden, kept for JS compat) ──────── */
#bottom-bar {
  display: none;
}

.mode-btn {
  background: #000010;
  border: 2px solid #333355;
  border-bottom: 3px solid #222244;
  color: var(--muted);
  padding: 4px 10px;
  font-size: 7px;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
  letter-spacing: 0;
  transition: all 0.1s;
  box-shadow: 2px 2px 0 #000;
}
.mode-btn:hover { border-color: var(--gold); color: var(--gold); }
.mode-btn.active {
  border-color: var(--gold);
  border-bottom-color: var(--gold2);
  color: var(--gold);
  background: #1A1A00;
  box-shadow: 2px 2px 0 #000, 0 0 8px #F1C40F44;
  text-shadow: 0 0 8px var(--gold);
}

#mode-info {
  flex: 1;
  font-size: 6px;
  color: var(--muted);
  text-align: right;
}

/* ── TOAST ────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #0A0A1C;
  border: 3px solid var(--gold);
  border-bottom: 4px solid var(--gold2);
  border-right: 4px solid var(--gold2);
  padding: 10px 20px;
  font-size: 9px;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 999;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 4px 4px 0 #000;
  text-shadow: 1px 1px 0 #000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── SHOP MINT BANNER ─────────────────────────────── */
.s-mint-banner {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg,#0D2A1A,#0A1810);
  border: 2px solid #2ECC71; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 6px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.s-mint-banner:hover { border-color: #5EFFA5; background: linear-gradient(135deg,#122E1E,#0D1E12); }
.s-mint-ic { font-size: 26px; flex-shrink: 0; }
.s-mint-lbl { font-size: 9px; color: #2ECC71; letter-spacing: .5px; }
.s-mint-sub { font-size: 5.5px; color: #5A9A6A; margin-top: 4px; letter-spacing: .3px; }

/* ── HERO RESULT POPUP ────────────────────────────── */
#hero-result-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.78); z-index: 310;
  align-items: center; justify-content: center;
}
#hero-result-modal {
  background: linear-gradient(180deg,#4AD0F0 0%,#28A8D0 100%);
  border: 5px solid #1880A8;
  border-bottom: 8px solid #0E5878;
  border-right:  8px solid #0E5878;
  border-radius: 20px;
  width: 660px; max-width: 97vw;
  padding: 18px 20px 18px;
  box-shadow: 0 16px 60px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.25);
  position: relative;
}
/* ── header ── */
.hr-header {
  display: flex; justify-content: center; align-items: center;
  position: relative; margin-bottom: 16px;
}
.hr-banner {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#F04040 0%,#C01818 100%);
  border: 3px solid #801010;
  border-bottom: 5px solid #601010;
  border-radius: 10px;
  padding: 9px 36px;
  font-size: 13px; color: #FFF;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 3px;
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
}
.hr-close-x {
  position: absolute; right: 0; top: -4px;
  width: 36px; height: 36px;
  background: linear-gradient(180deg,#F04040,#C01818);
  border: 2px solid #801010;
  border-bottom: 5px solid #601010;
  border-right:  4px solid #601010;
  border-radius: 8px;
  color: #FFF; font-size: 10px;
  font-family: 'Press Start 2P',monospace; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* ── body ── */
.hr-body {
  display: flex; gap: 16px; margin-bottom: 16px;
}
/* left white card */
.hr-left {
  width: 185px; flex-shrink: 0;
  background: #F4F8FF;
  border: 3px solid #C8D8F0;
  border-bottom: 5px solid #A0B8E0;
  border-right:  4px solid #A0B8E0;
  border-radius: 12px;
  padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.hr-portrait {
  width: 140px; height: 130px;
  background: transparent;
  border: 2px solid #C0D0F0;
  border-radius: 10px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.hr-portrait canvas { image-rendering: pixelated; }
.hr-rarity-badge {
  position: absolute; bottom: -11px; right: -11px;
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 1px 2px 0 rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #FFF;
  font-family: 'Press Start 2P',monospace;
  text-shadow: 1px 1px 0 #000;
}
.hr-name {
  font-size: 10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
  text-align: center; margin-top: 6px; letter-spacing: .5px;
}
.hr-sub {
  font-size: 7px; text-align: center;
}
/* right stats panel */
.hr-right {
  flex: 1;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.hr-stat-full, .hr-stat-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #FFF;
  text-shadow: 1px 1px 0 #000;
}
.hr-stat-row { gap: 5px; }
.hr-sic { font-size: 16px; }
.hr-divider { border-top: 1px dashed rgba(255,255,255,.35); margin: 4px 0; }
.hr-skills { display: flex; gap: 7px; flex-wrap: wrap; }
.hr-skill-ic {
  width: 36px; height: 36px;
  border-radius: 7px;
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.hr-sp {
  font-size: 11px; color: #FFF;
  text-shadow: 1px 1px 0 #000;
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
/* ── footer ── */
.hr-footer { display: flex; gap: 10px; align-items: center; }
.hr-continue-btn {
  flex: 1; padding: 14px 0; font-size: 10px;
  font-family: 'Press Start 2P',monospace;
  background: linear-gradient(180deg,#6EE870,#28B030);
  color: #FFF; text-shadow: 1px 1px 0 #000;
  border: none; border-bottom: 5px solid #187020; border-right: 4px solid #187020;
  border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
}
.hr-continue-btn:hover { filter: brightness(1.1); }
.hr-skip-btn {
  flex: 1; padding: 14px 0; font-size: 10px;
  font-family: 'Press Start 2P',monospace;
  background: linear-gradient(180deg,#9060D0,#6030A0);
  color: #FFF; text-shadow: 1px 1px 0 #000;
  border: none; border-bottom: 5px solid #402080; border-right: 4px solid #402080;
  border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
}
.hr-skip-btn:hover { filter: brightness(1.1); }
.hr-x-btn {
  width: 48px; height: 48px; flex-shrink: 0;
  background: linear-gradient(180deg,#999,#666);
  border: none; border-bottom: 5px solid #333; border-right: 4px solid #333;
  border-radius: 10px; color: #FFF; font-size: 11px;
  font-family: 'Press Start 2P',monospace; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
}
.hr-x-btn:hover { filter: brightness(1.1); }
/* ── multi-mint result grid ── */
.hr-multi-grid {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 8px;
  padding: 10px; max-height: 320px; overflow-y: auto;
  background: rgba(255,255,255,.15); border-radius: 10px; margin-bottom: 10px;
}
.hr-multi-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(0,0,0,.25); border: 2px solid; border-radius: 8px; padding: 6px 4px;
}
.hr-multi-card canvas { image-rendering: pixelated; display: block; }
.hr-multi-name  { font-size: 5px; text-align: center; text-shadow: 1px 1px 0 #000; }
.hr-multi-status{ font-size: 5px; text-align: center; font-weight: bold; }
.hr-multi-summary {
  text-align: center; font-size: 9px; color: #FFF;
  text-shadow: 1px 1px 0 #000; margin-bottom: 10px; letter-spacing: 1px;
}
/* ── quantity selector in mint card ── */
.mshop-qty-bar { display: flex; gap: 6px; width: 100%; margin: 8px 0 4px; }
.mshop-qty-opt {
  flex: 1; padding: 7px 0; font-size: 6px;
  font-family: 'Press Start 2P',monospace;
  background: #2A1608; border: 2px solid #5A3A18;
  border-bottom: 4px solid #1A0A02; border-radius: 6px;
  color: #888; cursor: pointer; transition: background .1s;
}
.mshop-qty-opt.active {
  background: linear-gradient(180deg,#FFA030,#E06000);
  border-color: #904000; color: #FFF; text-shadow: 1px 1px 0 #000;
}
.mshop-qty-opt:hover:not(.active) { background: #3A2010; color: #CCC; }

/* ── MINT SHOP MODAL ──────────────────────────────── */
#mint-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.72); z-index: 200;
  align-items: center; justify-content: center;
}
#mint-modal {
  background: #C8903A;
  border: 5px solid #8B5E1A;
  border-bottom: 8px solid #5A3A0A;
  border-right:  8px solid #5A3A0A;
  border-radius: 18px;
  width: 520px; max-width: 97vw; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 14px 56px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,220,100,.3);
}
/* title bar — green like the image */
.mshop-hdr {
  background: linear-gradient(180deg,#6AE080 0%,#28B845 60%,#1E8C35 100%);
  border-bottom: 3px solid #157828;
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 0 16px;
}
.mshop-hdr-title {
  font-size: 14px; color: #FFF;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 rgba(255,255,255,.2);
  letter-spacing: 3px;
}
.mshop-hdr-deco {
  position: absolute; left: 16px; font-size: 16px;
  color: rgba(255,255,255,.5);
}
.mshop-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; background: #E03030;
  border: 2px solid #A01818;
  border-bottom: 5px solid #701010; border-right: 5px solid #701010;
  border-radius: 8px; color: #FFF; font-size: 11px;
  font-family: 'Press Start 2P',monospace; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mshop-close:hover { filter: brightness(1.15); }
/* inner body — warm tan matching the image */
.mshop-body {
  background: #DBA86A;
  padding: 22px 24px; overflow-y: auto;
  border-top: 2px solid #E8C07A;
}
/* single-item flex layout */
.mshop-grid {
  display: flex; justify-content: center; align-items: flex-start; gap: 14px;
}
/* each item = card + buttons below */
.mshop-item { display: flex; flex-direction: column; gap: 10px; }
.mshop-item-single { width: 300px; }
/* rarity chance table inside card */
.mshop-chances { width: 100%; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 6px; }
.mshop-chance-row {
  display: flex; justify-content: space-between; padding: 2px 6px;
  font-size: 6px; color: rgba(255,255,255,.6);
}
.mshop-chance-row span:first-child { text-shadow: 0 0 5px currentColor; }
.mshop-card {
  background: #1C0E05;
  border: 3px solid #7A5020;
  border-bottom: 6px solid #3A1800;
  border-right:  5px solid #3A1800;
  border-radius: 12px;
  padding: 14px 12px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  box-shadow: inset 0 1px 0 rgba(255,180,60,.12), inset 0 -2px 8px rgba(0,0,0,.5);
}
.mshop-card-title {
  font-size: 8px; color: #EEE;
  text-shadow: 1px 1px 0 #000; letter-spacing: .5px; text-align: center;
}
.mshop-card canvas { image-rendering: pixelated; display: block; margin: 0 auto; }
.mshop-price {
  font-size: 11px; color: #FFD840;
  text-shadow: 1px 1px 0 #000; margin-top: 2px;
  display: flex; align-items: center; gap: 5px;
}
.mshop-supply {
  font-size: 6px; color: rgba(255,255,255,.4); letter-spacing: .3px;
}
/* MINT button */
.mshop-btn-row { display: flex; gap: 6px; }
.mshop-buy-btn {
  flex: 1; padding: 11px 0; font-size: 8px;
  font-family: 'Press Start 2P',monospace;
  background: linear-gradient(180deg,#FFA030,#E06000);
  color: #FFF; text-shadow: 1px 1px 0 #000;
  border: none; border-bottom: 5px solid #904000; border-right: 4px solid #904000;
  border-radius: 8px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.4); transition: transform .1s;
}
.mshop-buy-btn:not(:disabled):hover { transform: translate(1px,2px); border-bottom-width: 3px; border-right-width: 2px; }
.mshop-buy-btn:disabled { background: #666; color: #999; border-color: #444; box-shadow: none; cursor: not-allowed; }

/* ── ROUND SUMMARY MODAL ─────────────────── */
#round-summary-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,10,30,.78);
  align-items: center; justify-content: center;
  z-index: 2100; backdrop-filter: blur(3px);
}

/* ── START SCREEN ────────────────────────── */
#start-overlay {
  position:fixed; inset:0; background:rgba(0,5,15,.96);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; backdrop-filter:blur(4px);
}
.start-box { text-align:center; }
.start-logo { font-size:22px; color:#FFE040; letter-spacing:4px;
  text-shadow:0 0 30px #FFE04099,3px 3px 0 #000; margin-bottom:10px; }
.start-sub { font-size:7px; color:#446688; letter-spacing:2px; margin-bottom:40px; }
.start-btn { padding:16px 52px; font-size:11px; font-family:'Press Start 2P',monospace;
  background:linear-gradient(180deg,#2ABB48,#189030); color:#fff; border:none;
  cursor:pointer; border-bottom:4px solid #0A5010; letter-spacing:3px;
  box-shadow:4px 4px 0 #000; display:block; margin:0 auto 16px; }
.start-btn:hover { transform:translateY(2px); box-shadow:2px 2px 0 #000; }
.start-hint { font-size:6px; color:#334455; letter-spacing:1px; }

/* ── MAP CLEARED ─────────────────────────── */
#map-clear-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,5,15,.90);
  align-items:center; justify-content:center;
  z-index:2200; backdrop-filter:blur(6px);
}
.mc-box { text-align:center; animation:mc-pop .45s cubic-bezier(.34,1.56,.64,1); }
.mc-stars { display:flex; justify-content:center; gap:14px; margin-bottom:20px; }
.mc-star { font-size:52px; color:#FFE040;
  text-shadow:0 0 22px #FFE04099,2px 2px 0 #884400;
  display:inline-block;
  animation:star-in .38s cubic-bezier(.34,1.56,.64,1) both; }
.mc-star.s1 { animation-delay:.12s; }
.mc-star.s2 { animation-delay:.32s; }
.mc-star.s3 { animation-delay:.52s; }
.mc-title { font-size:30px; color:#FFE040; letter-spacing:5px;
  text-shadow:0 0 40px #FFE040AA,3px 3px 0 #000; margin-bottom:10px; }
.mc-round { font-size:8px; color:#88CCEE; letter-spacing:2px; margin-bottom:22px; }
.mc-coins { font-size:22px; color:#FFE040;
  text-shadow:0 0 18px #FFE04066; margin-bottom:28px; }
.mc-next-btn { padding:13px 40px; font-size:9px;
  font-family:'Press Start 2P',monospace;
  background:linear-gradient(180deg,#2ABB48,#189030);
  color:#fff; border:none; cursor:pointer;
  border-bottom:4px solid #0A5010; letter-spacing:2px;
  box-shadow:3px 3px 0 #000; display:block; margin:0 auto 14px; }
.mc-next-btn:hover { transform:translateY(1px); box-shadow:1px 1px 0 #000; }
.mc-auto { font-size:6px; color:#334455; letter-spacing:1px; }
@keyframes mc-pop {
  from { transform:scale(.5) translateY(40px); opacity:0; }
  to   { transform:none; opacity:1; }
}
@keyframes star-in {
  from { transform:scale(0) rotate(-40deg); opacity:0; }
  to   { transform:none; opacity:1; }
}

/* ── BCOIN PULSE ─────────────────────────── */
@keyframes bcoin-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); color: #FFE840; text-shadow: 1px 1px 0 #000, 0 0 14px #FFE840; }
  100% { transform: scale(1); }
}
.bcoin-flash { animation: bcoin-pulse .3s ease-out; }