/* ── TOKENS ─────────────────────────────────────────────── */
:root{
  --bg0:#0e0e0c;--bg1:#161614;--bg2:#1e1e1b;--bg3:#262622;--bg4:#2e2e2a;
  --ink0:#f0ede4;--ink1:#b8b5ad;--ink2:#7a7770;--ink3:#4a4845;
  --gold:#c8901a;--gold-dim:#7a5510;--gold-glow:#f0aa30;
  --blue:#3a7fd4;--blue-dim:#1a3f6a;
  --red:#c0402a;--red-dim:#6a1e10;
  --green:#4a9a30;--green-dim:#1e4a10;
  --purple:#7060d0;--purple-dim:#302860;
  --crystal:#50c0e0;--crystal-dim:#185a6a;
  --border:rgba(255,255,255,0.07);--border-mid:rgba(255,255,255,0.13);--border-hi:rgba(255,255,255,0.22);
  --radius:8px;--radius-sm:5px;--radius-lg:12px;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:monospace;
  --screen-w:1100px;--screen-h:680px;
}
/* ── LOADING SCREEN ──────────────────────────────────────── */
@keyframes hexspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ── RESET ──────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-body);background:var(--bg0);color:var(--ink0);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0 40px;}

/* ── SHELL ──────────────────────────────────────────────── */
#shell{width:var(--screen-w);display:flex;flex-direction:column;gap:0;position:relative;}

/* ── TOP BAR ────────────────────────────────────────────── */
#topbar{display:flex;align-items:center;gap:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;border:1px solid var(--border-mid);border-bottom:none;background:var(--bg2);}
#logo{padding:0 18px;font-size:17px;font-weight:bold;letter-spacing:-.3px;white-space:nowrap;color:var(--ink0);border-right:1px solid var(--border);}
#logo span{color:var(--gold);}
#tabs{display:flex;flex:1;}
.tab-btn{flex:1;padding:11px 0;font-size:11px;font-weight:bold;cursor:pointer;background:transparent;color:var(--ink2);border:none;border-right:1px solid var(--border);letter-spacing:.04em;text-transform:uppercase;font-family:var(--font-body);transition:color .15s,background .15s;}
.tab-btn:last-child{border-right:none;}
.tab-btn.active{color:var(--ink0);background:var(--bg3);}
.tab-btn:hover:not(.active){color:var(--ink1);background:var(--bg3);}
#topbar-right{display:flex;align-items:center;gap:10px;padding:0 14px;border-left:1px solid var(--border);}
.currency-pill{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:bold;font-family:var(--font-mono);}
.currency-pill .icon{font-size:14px;}
.gold-pill .icon{color:var(--gold-glow);}
.gold-pill .val{color:var(--gold-glow);}
.crystal-pill .icon{color:var(--crystal);}
.crystal-pill .val{color:var(--crystal);}

/* ── SCREEN ─────────────────────────────────────────────── */
#screen{width:var(--screen-w);height:var(--screen-h);background:var(--bg1);border:1px solid var(--border-mid);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;position:relative;}
.tab-panel{display:none;width:100%;height:100%;overflow-y:auto;padding:20px;}
.tab-panel.active{display:block;}
.tab-panel::-webkit-scrollbar{width:4px;}
.tab-panel::-webkit-scrollbar-track{background:var(--bg2);}
.tab-panel::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px;}

/* ── SECTION TITLES ─────────────────────────────────────── */
.sec{font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin-bottom:10px;margin-top:18px;}
.sec:first-child{margin-top:0;}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{padding:8px 18px;border-radius:var(--radius-sm);font-size:11px;font-weight:bold;cursor:pointer;border:1px solid;font-family:var(--font-body);letter-spacing:.02em;transition:opacity .12s;}
.btn:hover{opacity:.82;}
.btn:disabled{opacity:.3;cursor:not-allowed;}
.btn-gold{background:var(--gold);border-color:var(--gold-glow);color:#000;}
.btn-blue{background:var(--blue);border-color:#5090e0;color:#fff;}
.btn-ghost{background:transparent;border-color:var(--border-mid);color:var(--ink1);}
.btn-crystal{background:var(--crystal-dim);border-color:var(--crystal);color:var(--crystal);}
.btn-danger{background:var(--red-dim);border-color:var(--red);color:#ff9080;}
.btn-sm{padding:5px 12px;font-size:10px;}

/* ── DECK / COLLECTION PANEL ─────────────────────────────── */
#deck-panel{display:grid;grid-template-columns:220px 1fr;height:100%;gap:0;}
#deck-left{border-right:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;}
#deck-right{padding:16px;overflow-y:auto;}

/* leader selector */
.leader-selector{display:flex;flex-direction:column;gap:6px;}
.leader-opt{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 11px;cursor:pointer;transition:border-color .12s;}
.leader-opt:hover{border-color:var(--border-mid);}
.leader-opt.selected{border-color:var(--gold);background:var(--bg3);}
.leader-opt.legendary{border-color:var(--purple-dim);}
.leader-opt.legendary.selected{border-color:var(--purple);}
.lo-name{font-size:12px;font-weight:bold;display:flex;justify-content:space-between;align-items:center;}
.lo-budget{font-size:11px;color:var(--gold);font-family:var(--font-mono);}
.lo-budget.leg{color:var(--purple);}
.lo-effect{font-size:10px;color:var(--ink2);margin-top:3px;line-height:1.4;}

/* deck slots */
.deck-slots-row{display:flex;gap:6px;flex-wrap:wrap;}
.tower-slots-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;}
.tower-slots-grid .deck-slot{width:100%;height:62px;}
.deck-slot{width:62px;height:68px;border:1.5px dashed var(--border-mid);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;color:var(--ink3);cursor:default;}
.deck-slot.filled{border-style:solid;border-color:var(--border-mid);background:var(--bg2);cursor:pointer;position:relative;}
.deck-slot.filled:hover{border-color:var(--red);}
.ds-abbr{font-size:11px;font-weight:bold;}
.ds-name{font-size:8px;color:var(--ink2);text-align:center;}
.ds-hover{display:none;font-size:8px;color:var(--red);}
.deck-slot.filled:hover .ds-abbr,.deck-slot.filled:hover .ds-name{display:none;}
.deck-slot.filled:hover .ds-hover{display:block;}

/* troop bar */
.troop-row{display:flex;align-items:center;gap:8px;}
.troop-track{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;}
.troop-fill{height:100%;border-radius:3px;background:var(--blue);transition:width .2s;}
.troop-fill.over{background:var(--red);}
.troop-label{font-size:10px;color:var(--ink2);font-family:var(--font-mono);min-width:44px;text-align:right;}

/* rule badge */
.rule-badge{display:flex;gap:10px;font-size:10px;padding:5px 10px;background:var(--bg2);border-radius:var(--radius-sm);border:1px solid var(--border);}
.rule-ok{color:var(--green);font-weight:bold;}
.rule-need{color:var(--red);}

/* collection grid */
.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.filter-btn{padding:3px 10px;border-radius:var(--radius-sm);font-size:10px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--ink2);font-family:var(--font-body);}
.filter-btn.active{background:var(--bg3);color:var(--ink0);border-color:var(--border-mid);}
.coll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;}
.coll-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 5px;cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:center;transition:border-color .12s,background .12s;position:relative;}
.coll-card:hover{border-color:var(--border-mid);background:var(--bg3);}
.coll-card.in-deck{border-color:var(--blue);background:var(--blue-dim);}
.coll-card.disabled{opacity:.35;cursor:not-allowed;}
.coll-card .cc-abbr{font-size:12px;font-weight:bold;}
.coll-card .cc-name{font-size:8px;color:var(--ink2);text-align:center;line-height:1.2;}
.coll-card .cc-rar{font-size:7px;font-weight:bold;text-transform:uppercase;letter-spacing:.04em;}
.cc-qty{position:absolute;top:3px;right:4px;font-size:8px;font-family:var(--font-mono);color:var(--ink2);}
.cc-qty.dup{color:var(--gold);}

/* ── SHOP ────────────────────────────────────────────────── */
#shop-panel{padding:20px;overflow-y:auto;height:100%;}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start;}
.shop-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px;display:flex;flex-direction:column;gap:6px;
  min-height:160px; /* consistent height for grid alignment */
}
.shop-card.legendary{border-color:var(--purple-dim);background:linear-gradient(135deg,#1a1030 0%,var(--bg2) 60%);}
.shop-card.rare-card{border-color:#c07810;}
.shop-card.uncommon-card{border-color:#3a7fd4;}
.shop-card .sc-tag{font-size:8px;font-weight:bold;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);height:14px;}
.shop-card .sc-name{font-size:13px;font-weight:bold;color:var(--ink0);min-height:18px;}
.shop-card .sc-desc{font-size:10px;color:var(--ink2);line-height:1.4;flex:1;} /* flex:1 pushes price to bottom */
.shop-card .sc-flavor{font-size:9px;color:var(--ink3);font-style:italic;line-height:1.4;}
.shop-card .sc-price{font-size:15px;font-weight:bold;color:var(--gold-glow);font-family:var(--font-mono);margin-top:auto;}
.shop-card .sc-owned{font-size:10px;color:var(--green);margin-top:auto;}
.shop-card .sc-divider{height:1px;background:var(--border);margin:2px 0;}
.shop-card .btn{width:100%;margin-top:4px;} /* full-width buttons */

/* ── PROFILE ─────────────────────────────────────────────── */
#profile-panel{padding:20px;overflow-y:auto;height:100%;}
.profile-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--bg3);border:2px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;}
.profile-info{flex:1;}
.profile-name{font-size:20px;font-weight:bold;}
.profile-bio{font-size:11px;color:var(--ink2);margin-top:4px;line-height:1.5;}
.btn-edit{font-size:9px;padding:3px 9px;margin-top:6px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-align:center;}
.stat-val{font-size:22px;font-weight:bold;font-family:var(--font-mono);}
.stat-val.gold-val{color:var(--gold-glow);}
.stat-val.crystal-val{color:var(--crystal);}
.stat-label{font-size:9px;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;margin-top:3px;}
.collection-overview{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:14px;}
.cov-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:4px 0;border-bottom:1px solid var(--border);}
.cov-row:last-child{border-bottom:none;}
.cov-label{color:var(--ink2);}
.cov-val{font-weight:bold;font-family:var(--font-mono);}

/* ── COMBAT ──────────────────────────────────────────────── */
#combat-panel{height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;overflow-y:auto;}
.combat-topbar{display:flex;align-items:center;gap:14px;width:100%;justify-content:center;}
.sbox{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 0;text-align:center;width:130px;min-width:130px;max-width:130px;}
.sbox .lbl{font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;margin:0 auto;display:block;}
.sbox .val{font-size:22px;font-weight:bold;font-family:var(--font-mono);}
.sp .val{color:var(--blue);}
.sa .val{color:var(--red);}
#badge{font-size:12px;font-weight:bold;padding:5px 18px;border-radius:20px;letter-spacing:.03em;}
.bp{background:var(--blue-dim);color:#80b8ff;}
.ba{background:var(--red-dim);color:#ff9080;}
.be{background:var(--bg3);color:var(--ink2);}
#field-info-bar{font-size:11px;padding:5px 14px;border-radius:var(--radius-sm);text-align:center;min-height:26px;}
#combat-row{display:flex;gap:16px;align-items:flex-start;justify-content:center;width:100%;}
.combat-side{display:flex;flex-direction:column;gap:6px;align-items:center;width:140px;min-width:140px;}
.htitle{font-size:11px;color:var(--ink2);font-weight:bold;text-align:center;text-transform:uppercase;letter-spacing:.05em;}
.ldr-box{border-radius:var(--radius-sm);padding:8px;text-align:center;width:100%;border:1px solid;margin-top:6px;}
.ldr-box .ln{font-size:11px;font-weight:bold;}
.ldr-box .le{font-size:9px;line-height:1.3;margin-top:3px;}
.ldr-box .lu{font-size:8px;margin-top:3px;opacity:.55;}
.lp-box{background:var(--blue-dim);border-color:#3a7fd4;color:#80b8ff;}
.la-box{background:var(--red-dim);border-color:#c0402a;color:#ff9080;}
.lused{opacity:.35;filter:grayscale(.7);}
.act-btn-c{padding:5px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:bold;cursor:pointer;width:100%;margin-top:4px;font-family:var(--font-body);}
#cmsg{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;font-size:12px;color:var(--ink2);text-align:center;max-width:620px;width:100%;}
#capture-log{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;font-size:10px;color:var(--ink2);max-width:620px;width:100%;line-height:1.6;font-family:var(--font-mono);max-height:70px;overflow-y:auto;}

/* ── TOWER ───────────────────────────────────────────────── */
#tower-panel{height:100%;display:grid;grid-template-columns:280px 1fr;gap:0;}
#tower-left{border-right:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden;}
#tower-right{padding:16px;overflow-y:auto;}
.tower-entry-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px;}
.tower-entry-cost{display:flex;align-items:center;gap:6px;font-size:12px;}
.tower-entry-cost .icon{color:var(--crystal);font-size:16px;}
.tower-entry-cost .amt{color:var(--crystal);font-weight:bold;font-family:var(--font-mono);}
.tower-floor-big{font-size:32px;font-weight:bold;text-align:center;font-family:var(--font-mono);}
.tower-prog-track{height:8px;background:var(--bg4);border-radius:4px;overflow:hidden;}
.tower-prog-fill{height:100%;border-radius:4px;background:var(--blue);transition:width .4s ease;}
.tower-prog-fill.boss{background:#c07810;}
.tower-result{border-radius:var(--radius-sm);padding:8px 12px;font-size:11px;font-weight:bold;text-align:center;}
.tr-win{background:var(--green-dim);color:#80e050;}
.tr-boss{background:#3a2000;color:#f0a030;}
.tr-loss{background:var(--red-dim);color:#ff9080;}
.loot-log{display:flex;flex-direction:column;gap:3px;max-height:180px;overflow-y:auto;}
.loot-item{font-size:9px;display:flex;justify-content:space-between;font-family:var(--font-mono);padding:2px 0;}
.mini-widget{background:var(--bg2);border:1px solid var(--border-mid);border-radius:var(--radius);padding:10px;display:flex;flex-direction:column;gap:5px;}
.mw-label{font-size:8px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;text-align:center;}
.mw-floor{font-size:16px;font-weight:bold;text-align:center;font-family:var(--font-mono);}
.mw-track{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;}
.mw-fill{height:100%;border-radius:3px;background:var(--blue);transition:width .3s;}
.mw-fill.boss{background:#c07810;}
.mw-status{font-size:9px;text-align:center;font-weight:bold;}
.mw-win{color:var(--green);}
.mw-loss{color:var(--red);}
.mw-run{color:var(--blue);}
.crystal-entry{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;padding:8px;background:var(--bg3);border:1px solid var(--crystal-dim);border-radius:var(--radius-sm);}
.crystal-entry .ci{color:var(--crystal);font-size:16px;}
.crystal-entry .cv{color:var(--crystal);font-weight:bold;font-family:var(--font-mono);}

/* ── HISTORY (placeholder) ───────────────────────────────── */
#history-panel{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;}
.history-placeholder{color:var(--ink2);font-size:13px;line-height:1.7;}

/* ── TOOLTIP ─────────────────────────────────────────────── */
#tooltip{position:fixed;background:var(--bg2);border:1px solid var(--border-mid);border-radius:var(--radius);padding:10px 12px;max-width:200px;pointer-events:none;display:none;z-index:500;box-shadow:0 4px 20px rgba(0,0,0,.5);}
#tt-rar{font-size:8px;font-weight:bold;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
#tt-name{font-size:13px;font-weight:bold;margin-bottom:5px;}
#tt-troops{font-size:10px;color:var(--crystal);margin-bottom:4px;}
#tt-vals{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;font-size:10px;margin-bottom:6px;}
#tt-vals .tv-l{color:var(--ink2);}
#tt-vals .tv-v{font-weight:bold;font-family:var(--font-mono);}
#tt-lore{font-size:9px;color:var(--ink2);line-height:1.4;border-top:1px solid var(--border);padding-top:6px;font-style:italic;}
#tt-sell{font-size:9px;color:var(--gold);margin-top:4px;border-top:1px solid var(--border);padding-top:5px;}

/* ── OVERLAY / MODAL ─────────────────────────────────────── */
#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:20;border-radius:0 0 var(--radius-lg) var(--radius-lg);}
#overlay.show{display:flex;}
#modal{background:var(--bg2);border:1px solid var(--border-mid);border-radius:var(--radius-lg);padding:20px;max-width:320px;width:92%;display:flex;flex-direction:column;gap:12px;}
#modal h3{font-size:15px;font-weight:bold;}
#modal p{font-size:11px;color:var(--ink2);line-height:1.5;}
#modal-btns{display:flex;gap:8px;}
.mbtn{flex:1;padding:7px;border-radius:var(--radius-sm);font-size:11px;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--ink1);font-family:var(--font-body);}
.mbtn.ok{background:var(--blue-dim);border-color:var(--blue);color:#80b8ff;font-weight:bold;}
.mbtn.ghost-ok{background:var(--purple-dim);border-color:var(--purple);color:#c0b0ff;font-weight:bold;}
#modal-input{display:none;flex-direction:column;gap:6px;}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.val-item{background:var(--bg3);border-radius:var(--radius-sm);padding:5px;text-align:center;font-size:10px;}
.val-item input{width:38px;border:1px solid var(--border-mid);border-radius:4px;padding:3px;font-size:11px;text-align:center;background:var(--bg1);color:var(--ink0);font-family:var(--font-mono);}

/* ── DRAG GHOST ──────────────────────────────────────────── */
#drag-ghost{position:fixed;pointer-events:none;z-index:999;display:none;transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));}

/* RARITY COLORS */
.rc{color:#888580;}.ri{color:#3a7fd4;}.rr{color:#c07810;}.rl{color:#7060d0;}

/* ── VISUAL NOVEL ────────────────────────────────────────────── */
@keyframes tutpulse{0%,100%{opacity:.5;}50%{opacity:1;}}
@keyframes vnfadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes charidlefloat{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-7px);}}
.vn-char-svg{animation:vnfadein .8s ease forwards;}
#vn-character{animation:none;}
#vn-character.idle{animation:charidlefloat 3.2s ease-in-out infinite;}
#vn-text span{animation:vnfadein .05s ease forwards;}

/* ── CARD FLIP ANIMATION ─────────────────────────────────────── */
@keyframes cardFlip{
  0%{transform:scaleX(1) scale(1);}
  40%{transform:scaleX(0) scale(1.05);}
  60%{transform:scaleX(0) scale(1.05);}
  100%{transform:scaleX(1) scale(1);}
}
.hex-flip{
  animation:cardFlip 0.32s ease-in-out;
  transform-origin:center center;
}

/* ── FLOATING TOWER WIDGET ──────────────────────────────────── */
/* Tower float widget animations */
@keyframes tfw-slide-in{
  0%  { transform:translateX(140%); opacity:0; }
  70% { transform:translateX(-6px); opacity:1; }
  85% { transform:translateX(3px);  opacity:1; }
  100%{ transform:translateX(0);    opacity:1; }
}
@keyframes tfw-slide-out{
  0%  { transform:translateY(0);     opacity:1; }
  25% { transform:translateY(-5px);  opacity:1; }
  100%{ transform:translateY(140%);  opacity:0; }
}
#tower-float-widget{
  position:fixed;bottom:20px;right:20px;
  background:#0e0e0c;border:1px solid var(--amber);
  border-radius:12px;padding:12px 16px;
  min-width:180px;z-index:500;
  box-shadow:0 4px 24px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--font-mono);
  /* Default: off-screen right, invisible, non-interactive */
  transform:translateX(140%);
  opacity:0;
  pointer-events:none;
}
#tower-float-widget.visible{
  /* Resting state: on-screen, visible */
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
  animation:tfw-slide-in .45s cubic-bezier(.22,1,.36,1);
}
#tower-float-widget.hiding{
  /* Exit: slide down */
  animation:tfw-slide-out .35s cubic-bezier(.55,0,1,.45) forwards;
  pointer-events:none;
}
.tfw-title{font-size:9px;color:var(--amber);text-transform:uppercase;letter-spacing:.1em;}
.tfw-floor{font-size:18px;font-weight:bold;color:var(--ink0);}
.tfw-track{height:4px;background:var(--bg2);border-radius:2px;overflow:hidden;}
.tfw-fill{height:100%;background:var(--amber);border-radius:2px;transition:width .3s;}
.tfw-status{font-size:10px;color:var(--ink2);}
.tfw-close{position:absolute;top:8px;right:10px;font-size:10px;color:var(--ink3);cursor:pointer;padding:2px 4px;}
.tfw-close:hover{color:var(--ink0);}

/* ── SHOP REDESIGN ───────────────────────────────────────────── */
#shop-panel{padding:0;overflow-y:auto;height:100%;}
.shop-section{padding:16px 20px;}
.shop-section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.shop-section-title{
  font-size:13px;font-weight:bold;color:var(--ink0);
  text-transform:uppercase;letter-spacing:.06em;
}
.shop-section-sub{font-size:10px;color:var(--ink2);}
.shop-timer{font-size:10px;color:var(--amber);font-family:var(--font-mono);}
.shop-divider{height:1px;background:var(--border);margin:0 20px;}
.shop-featured{
  background:linear-gradient(135deg,#1a1200 0%,#0e0e0c 60%);
  border-bottom:1px solid rgba(200,144,26,.2);
  padding:20px;
}
.shop-featured-label{
  font-size:9px;font-weight:bold;letter-spacing:.12em;
  color:var(--amber);text-transform:uppercase;margin-bottom:6px;
}
.shop-featured-title{font-size:20px;font-weight:bold;color:var(--ink0);margin-bottom:4px;}
.shop-featured-desc{font-size:11px;color:var(--ink2);line-height:1.5;margin-bottom:14px;}
.daily-crystals-banner{
  background:linear-gradient(135deg,#001830 0%,#0e0e0c 60%);
  border:1px solid rgba(58,127,212,.3);
  border-radius:var(--radius);padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.dcb-left{display:flex;flex-direction:column;gap:3px;}
.dcb-title{font-size:12px;font-weight:bold;color:#80b8ff;}
.dcb-desc{font-size:10px;color:var(--ink2);}
.dcb-claimed{font-size:10px;color:var(--green);}
.dcb-crystals{font-size:22px;font-weight:bold;color:#3a7fd4;font-family:var(--font-mono);}
.rotation-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(200,144,26,.12);border:1px solid rgba(200,144,26,.25);
  border-radius:4px;padding:2px 8px;font-size:9px;color:var(--amber);
  font-family:var(--font-mono);
}
.shop-card.featured-card{
  background:linear-gradient(135deg,#1a1000,#0e0e0c);
  border-color:var(--gold-glow);
}
.shop-card.rare-card{border-color:#c07810;}
.shop-card.uncommon-card{border-color:#3a7fd4;}

/* ── COMBAT DISCLAIMER ───────────────────────────────────────── */
#combat-disclaimer{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:rgba(6,6,4,.88);z-index:20;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);
  border-radius:0 0 12px 12px;
}
#combat-disclaimer.hidden{display:none;}
.cdis-card{
  background:#0e0e0c;border:1px solid rgba(200,144,26,.3);
  border-radius:14px;padding:28px 32px;max-width:340px;
  display:flex;flex-direction:column;gap:16px;align-items:center;
  text-align:center;
}
.cdis-rune{font-size:40px;opacity:.7;}
.cdis-title{font-size:16px;font-weight:bold;color:var(--ink0);}
.cdis-flavor{font-size:11px;color:var(--ink2);font-style:italic;line-height:1.6;}
.cdis-warning{font-size:10px;color:rgba(200,80,40,.8);line-height:1.5;}
.cdis-actions{display:flex;gap:10px;width:100%;}

/* ── COMPACT MINI CARDS (profile) ───────────────────────────── */
.mini-card-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.mini-card{
  display:flex;flex-direction:column;align-items:center;
  width:52px;padding:5px 4px 4px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:6px;cursor:default;transition:border-color .15s;
  position:relative;
}
.mini-card:hover{border-color:var(--gold-dim);}
.mini-card .mc-abbr{font-size:11px;font-weight:bold;font-family:var(--font-mono);color:var(--ink0);}
.mini-card .mc-rar{font-size:8px;text-transform:uppercase;letter-spacing:.04em;margin-top:1px;}
.mini-card .mc-count{
  position:absolute;top:2px;right:3px;
  font-size:8px;font-family:var(--font-mono);color:var(--amber);font-weight:bold;
}
#profile-cards-grid{display:flex;flex-direction:column;gap:8px;}
.profile-section-label{
  font-size:10px;font-weight:bold;color:var(--ink2);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;
}

/* ── FRIENDS NOTIFICATION BADGE ─────────────────────────────── */
.tab-notif-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:#c0402a;color:#fff;
  font-size:8px;font-weight:bold;font-family:var(--font-mono);
  min-width:14px;height:14px;padding:0 3px;
  border-radius:7px;margin-left:5px;
  vertical-align:middle;line-height:1;
}

/* ── FRIENDS LIST & CARDS ──────────────────────────────────── */
#friends-list{display:flex;flex-direction:column;gap:10px;}
.friend-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s;
}
.friend-card:hover{border-color:var(--border-mid);}
.friend-card-main{
  display:flex;align-items:center;gap:12px;cursor:pointer;
}
.friend-card-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.friend-card-name{font-size:14px;font-weight:bold;color:var(--ink0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.friend-card-tag{font-size:10px;color:var(--amber);font-family:var(--font-mono);}
.friend-card-stats{font-size:10px;color:var(--ink3);}
.friend-card-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* Botões de amigos / PvP */
.fc-btn{
  background:var(--bg3);border:1px solid var(--border-mid);border-radius:var(--radius-sm);
  padding:6px 14px;font-size:11px;font-weight:600;color:var(--ink1);
  cursor:pointer;transition:background .15s, border-color .15s;
  font-family:var(--font-body);white-space:nowrap;
}
.fc-btn:hover{background:var(--bg4);border-color:var(--border-hi);}
.fc-btn-remove{color:#c0402a;border-color:rgba(192,64,42,.3);}
.fc-btn-remove:hover{background:rgba(192,64,42,.12);border-color:rgba(192,64,42,.5);}

/* Chat modal */
.fchat-preset-btn{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:5px 10px;font-size:11px;color:var(--ink1);cursor:pointer;
  transition:background .15s;font-family:var(--font-body);
}
.fchat-preset-btn:hover{background:var(--bg4);border-color:var(--border-mid);}

/* Chat overlay */
.fchat-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  display:none;align-items:center;justify-content:center;z-index:9600;
}
.fchat-overlay.fchat-visible{display:flex;}
.fchat-modal{
  background:var(--bg1);border:1px solid var(--border-mid);border-radius:var(--radius-lg);
  width:380px;max-width:96vw;display:flex;flex-direction:column;overflow:hidden;
  max-height:80vh;
}
.fchat-header{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--border);background:var(--bg2);
}
.fchat-header-info{flex:1;min-width:0;}
.fchat-name{font-size:14px;font-weight:bold;color:var(--ink0);}
.fchat-meta{font-size:10px;color:var(--ink3);margin-top:2px;}
.fchat-close{background:transparent;border:none;color:var(--ink2);font-size:16px;cursor:pointer;padding:4px 8px;}
.fchat-messages{
  flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;
  min-height:180px;max-height:300px;
}
.fchat-loading{font-size:11px;color:var(--ink3);font-style:italic;text-align:center;padding:20px 0;}
.fchat-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
.fchat-picker{display:flex;flex-direction:column;gap:6px;}
.fchat-picker-presets,.fchat-picker-emojis{display:flex;flex-wrap:wrap;gap:5px;}
.fchat-emoji-btn{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:4px 8px;font-size:16px;cursor:pointer;transition:background .15s;
}
.fchat-emoji-btn:hover{background:var(--bg4);}
.fchat-msg{font-size:12px;padding:6px 10px;border-radius:var(--radius-sm);max-width:80%;}
.fchat-msg-mine{background:var(--blue-dim);color:#80b8ff;align-self:flex-end;border:1px solid rgba(58,127,212,.2);}
.fchat-msg-theirs{background:var(--bg3);color:var(--ink1);align-self:flex-start;border:1px solid var(--border);}
.fchat-msg-time{font-size:8px;color:var(--ink3);margin-top:2px;}

/* ================================================================
   WELCOME SCREEN
   ================================================================ */
#welcome-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,12,.92);
  backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .55s cubic-bezier(.22,1,.36,1);
}
#welcome-overlay.ws-show{opacity:1;pointer-events:all;}
#welcome-overlay.ws-hide{opacity:0;pointer-events:none;transition:opacity .4s ease-in;}

#welcome-box{
  display:flex;flex-direction:column;align-items:center;
  width:460px;max-width:96vw;gap:0;
  transform:translateY(32px) scale(.96);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
#welcome-overlay.ws-show #welcome-box{transform:translateY(0) scale(1);}
#welcome-overlay.ws-hide  #welcome-box{transform:translateY(-24px) scale(.97);transition:transform .38s ease-in;}

/* Cabeçalho */
.ws-header{text-align:center;padding:0 0 20px 0;width:100%;}
.ws-title{
  font-size:26px;font-weight:800;letter-spacing:.04em;
  font-family:var(--font-mono);color:var(--ink0);
  background:linear-gradient(135deg,#c0a060 0%,#f0d080 45%,#c08030 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:none;
  margin-bottom:6px;
}
.ws-subtitle{font-size:12px;color:var(--ink2);letter-spacing:.06em;text-transform:uppercase;}

/* Carrossel */
.ws-carousel{
  width:100%;background:var(--bg2);border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
}
.ws-slides{display:flex;transition:transform .45s cubic-bezier(.35,0,.25,1);}
.ws-slide{
  min-width:100%;padding:28px 32px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-sizing:border-box;
}
.ws-slide-icon{font-size:36px;line-height:1;}
.ws-slide-label{font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.08em;}
.ws-slide-value{font-size:28px;font-weight:800;font-family:var(--font-mono);}
.ws-gold-val{color:var(--gold);}
.ws-crystal-val{color:var(--crystal);}
.ws-leader-val{color:#c0b0ff;font-size:20px;}
.ws-cards-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%;}

/* Navegação */
.ws-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:16px;width:100%;
}
.ws-dot-row{display:flex;gap:6px;align-items:center;}
.ws-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--bg4);border:1px solid var(--border-mid);
  transition:background .2s,transform .2s;
}
.ws-dot.active{background:var(--amber);transform:scale(1.3);border-color:var(--amber);}
.ws-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border-mid);
  background:var(--bg3);color:var(--ink1);font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,transform .1s;flex-shrink:0;
}
.ws-btn:hover:not(:disabled){background:var(--bg4);border-color:var(--amber);color:var(--amber);}
.ws-btn:active{transform:scale(.92);}
.ws-btn:disabled{opacity:.25;cursor:default;}
.ws-btn-start{
  width:auto;padding:0 20px;border-radius:20px;
  background:linear-gradient(135deg,#c07010,#f09030);
  border:none;color:#0a0600;font-weight:800;font-size:13px;
  letter-spacing:.04em;font-family:var(--font-body);
}
.ws-btn-start:hover{filter:brightness(1.12);}

/* Rodapé flavor */
.ws-footer{text-align:center;padding:16px 0 0 0;width:100%;}
.ws-flavor{font-size:11px;color:var(--ink3);font-style:italic;line-height:1.6;max-width:340px;margin:0 auto;}

/* ── Líderes: scroll horizontal no deck builder ─────────────── */
.leader-selector{
  display:flex;flex-direction:row;gap:6px;
  overflow-x:auto;overflow-y:hidden;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
}
.leader-selector::-webkit-scrollbar{height:3px;}
.leader-selector::-webkit-scrollbar-track{background:var(--bg3);}
.leader-selector::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px;}

.leader-opt{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 10px;cursor:pointer;
  transition:border-color .12s;
  min-width:130px;max-width:150px;flex-shrink:0;
  scroll-snap-align:start;
}
.leader-opt:hover{border-color:var(--border-mid);}
.leader-opt.selected{border-color:var(--gold);background:var(--bg3);}
.leader-opt.legendary{border-color:var(--purple-dim);}
.leader-opt.legendary.selected{border-color:var(--purple);}
.lo-name{font-size:11px;font-weight:bold;display:flex;justify-content:space-between;align-items:center;gap:4px;white-space:nowrap;}
.lo-budget{font-size:10px;color:var(--gold);font-family:var(--font-mono);}
.lo-budget.leg{color:var(--purple);}
.lo-effect{font-size:9px;color:var(--ink2);margin-top:3px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ── Modal de confirmação de compra ─────────────────────────── */
#buy-confirm-overlay{
  position:fixed;inset:0;z-index:8000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,12,.80);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
#buy-confirm-overlay.show{opacity:1;pointer-events:all;}
#buy-confirm-box{
  background:var(--bg2);border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);padding:24px 28px;
  min-width:280px;max-width:380px;width:90vw;
  display:flex;flex-direction:column;gap:14px;
  transform:scale(.94) translateY(12px);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
  text-align:center;
}
#buy-confirm-overlay.show #buy-confirm-box{transform:scale(1) translateY(0);}
.bcf-icon{font-size:30px;line-height:1;}
.bcf-title{font-size:15px;font-weight:bold;color:var(--ink0);}
.bcf-desc{font-size:11px;color:var(--ink2);line-height:1.5;}
.bcf-price{font-size:20px;font-weight:800;font-family:var(--font-mono);}
.bcf-gold{color:var(--gold);}
.bcf-crystal{color:var(--crystal);}
.bcf-btns{display:flex;gap:10px;}
.bcf-btns button{flex:1;}

/* ── Botão de música ─────────────────────────────────────────── */
#music-toggle-btn{
  position:fixed;bottom:14px;right:16px;z-index:7000;
  width:30px;height:30px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--ink2);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background .15s;
  opacity:.6;
}
#music-toggle-btn:hover{opacity:1;color:var(--amber);border-color:var(--amber);}
#music-toggle-btn.music-off{color:var(--ink3);}

/* ── Modal de seleção de líder ───────────────────────────────── */
#leader-modal-overlay {
  position: fixed; inset: 0; z-index: 8500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,12,.85); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#leader-modal-overlay.show { opacity: 1; pointer-events: all; }
#leader-modal-box {
  background: var(--bg2); border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg); padding: 20px 22px;
  width: 640px; max-width: 94vw; max-height: 80vh;
  display: flex; flex-direction: column; gap: 14px;
  transform: scale(.94) translateY(10px);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
#leader-modal-overlay.show #leader-modal-box { transform: scale(1) translateY(0); }
.lm-header { display: flex; align-items: center; justify-content: space-between; }
.lm-title { font-size: 14px; font-weight: bold; color: var(--ink0); }
.lm-close { background: none; border: none; color: var(--ink3); font-size: 18px;
  cursor: pointer; padding: 2px 6px; transition: color .15s; }
.lm-close:hover { color: var(--red); }
.lm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr));
  gap: 8px; overflow-y: auto; max-height: 55vh; padding-right: 4px;
}
.lm-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.lm-card:hover   { border-color: var(--border-mid); background: var(--bg4); }
.lm-card.lm-sel  { border-color: var(--gold); background: var(--bg3); }
.lm-card.lm-leg  { border-color: var(--purple-dim); }
.lm-card.lm-leg.lm-sel { border-color: var(--purple); }
.lm-name   { font-size: 12px; font-weight: bold; display: flex; justify-content: space-between; }
.lm-budget { font-size: 11px; color: var(--gold); font-family: var(--font-mono); }
.lm-budget.leg { color: var(--purple); }
.lm-effect { font-size: 10px; color: var(--ink2); margin-top: 4px; line-height: 1.4; }

/* ── Líder selecionado: botão compacto no deck ───────────────── */
.leader-selected-btn {
  background: var(--bg2); border: 1px solid var(--gold);
  border-radius: var(--radius); padding: 8px 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: border-color .12s, background .12s;
  width: 100%;
}
.leader-selected-btn:hover { background: var(--bg3); }
.lsb-name   { font-size: 12px; font-weight: bold; color: var(--ink0); }
.lsb-budget { font-size: 11px; color: var(--gold); font-family: var(--font-mono); }
.lsb-change { font-size: 10px; color: var(--ink3); }

/* ── Botão excluir conta ─────────────────────────────────────── */
.btn-danger-soft {
  background: transparent; border: 1px solid rgba(180,50,30,.4);
  color: rgba(180,50,30,.7); border-radius: var(--radius);
  padding: 8px 16px; font-size: 11px; cursor: pointer; font-family: var(--font-body);
  transition: all .15s; width: 100%;
}
.btn-danger-soft:hover { background: rgba(180,50,30,.12); border-color: rgba(180,50,30,.7); color: #d04030; }

/* ── COMBAT RESULT OVERLAY ─────────────────────────────────── */
.cro-overlay{
  position:absolute;inset:0;z-index:25;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,4,.93);backdrop-filter:blur(4px);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  opacity:0;animation:cro-fade-in .4s ease forwards;
}
.cro-overlay.cro-hide{animation:cro-fade-out .35s ease forwards;}
.cro-content{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  position:relative;z-index:2;
}
.cro-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.cro-rune{
  position:absolute;top:50%;left:50%;
  font-family:serif;pointer-events:none;
  animation:cro-rune-fly var(--dur) ease-out var(--delay) forwards;
  opacity:0;
}
.cro-icon{
  font-size:44px;opacity:.7;
  animation:cro-el-in .5s ease .1s both;
}
.cro-title{
  font-size:34px;font-weight:800;letter-spacing:.08em;
  font-family:var(--font-mono);
  text-shadow:0 0 40px currentColor, 0 2px 12px rgba(0,0,0,.6);
  animation:cro-title-pop .55s cubic-bezier(.22,1,.36,1) .15s both;
}
.cro-subtitle{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  animation:cro-el-in .4s ease .35s both;
}
.cro-flavor{
  font-size:11px;color:var(--ink2);font-style:italic;
  line-height:1.6;text-align:center;max-width:280px;
  animation:cro-el-in .4s ease .5s both;
}
.cro-reward{
  font-size:26px;font-weight:800;font-family:var(--font-mono);
  position:relative;overflow:hidden;padding:6px 24px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  animation:cro-el-in .4s ease .75s both;
}
.cro-reward::after{
  content:'';position:absolute;top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  animation:cro-stripe 2.2s ease-in-out 1.1s infinite;
}
.cro-continue{
  margin-top:6px;padding:9px 28px;border-radius:20px;
  font-size:11px;font-weight:bold;cursor:pointer;
  border:1px solid var(--border-mid);background:var(--bg3);
  color:var(--ink1);font-family:var(--font-body);letter-spacing:.03em;
  transition:all .15s;
  animation:cro-el-in .3s ease 1.2s both;
}
.cro-continue:hover{border-color:var(--gold);color:var(--gold);}

@keyframes cro-fade-in{from{opacity:0}to{opacity:1}}
@keyframes cro-fade-out{from{opacity:1}to{opacity:0}}
@keyframes cro-title-pop{
  0%{transform:scale(0) translateY(10px);opacity:0}
  60%{transform:scale(1.14) translateY(-3px);opacity:1}
  80%{transform:scale(.97) translateY(1px);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes cro-el-in{
  from{transform:translateY(18px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes cro-rune-fly{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:.85}
  60%{opacity:.4}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(0);opacity:0}
}
@keyframes cro-stripe{0%{left:-60%}100%{left:160%}}

/* ================================================================
   COMBAT HUB — hub de seleção de adversários
   ================================================================ */

#combat-hub {
  padding: 20px;
  overflow-y: auto;
  height: 100%;
}

.chub-section-label {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink2);
  margin-bottom: 12px;
}

.chub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* Card do inimigo */
.chub-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* altura fixa para a silhueta vazar com consistência */
  min-height: 128px;
  overflow: visible;           /* silhueta pode vazar para cima */
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  display: flex;
  flex-direction: column;
  /* clip para o conteúdo interno, mas não para o pseudo overflow */
}

.chub-card:hover {
  border-color: var(--border-hi);
  background: var(--bg3);
  transform: translateY(-2px);
}

/* Área da silhueta — ocupa topo do card, overflow para cima */
.chub-sil-wrap {
  position: absolute;
  /* Silhueta centrada, saindo 28px para cima do card */
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 82px;
  pointer-events: none;
  z-index: 3;
  color: var(--bg4);
}

/* Garante que o card pai não corte a silhueta */
.chub-grid {
  padding-top: 32px; /* espaço para as silhuetas vazarem */
}

.chub-card-body {
  /* Padding superior para não sobrepor a silhueta */
  padding: 52px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.chub-enemy-name {
  font-size: 12px;
  font-weight: bold;
  color: var(--ink0);
  text-align: center;
  line-height: 1.3;
}

.chub-diff-badge {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid;
}

.chub-mini-stats {
  font-size: 10px;
  font-weight: bold;
  font-family: var(--font-mono);
  display: flex;
  gap: 6px;
}

.chub-never {
  color: var(--ink3);
}

/* ================================================================
   ENEMY MODAL
   ================================================================ */

#enemy-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(2px);
}

#enemy-modal-overlay.show {
  display: flex;
}

#enemy-modal-box {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px 24px 24px;
  /* Espaço no topo para silhueta vazar */
  padding-top: 92px;
  overflow: visible;
}

/* Silhueta no topo do modal — vaza para cima */
.em-sil-wrap {
  position: absolute;
  top: -62px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  /* A silhueta usa color: currentColor, herdado do container */
}

.em-sil-inner {
  /* Cor da silhueta: contraste sutil sobre o fundo do modal */
  color: var(--bg4);
}

/* Box precisa clipar apenas o overflow Y, não X no topo */
#enemy-modal-box {
  overflow: hidden;
  overflow-y: auto;
}

/* Para a silhueta vazar para cima do modal,
   precisamos que o overflow seja visible no wrapper externo */
#enemy-modal-overlay.show #enemy-modal-box {
  overflow: visible;
}

.em-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink2);
  font-size: 11px;
  cursor: pointer;
  padding: 3px 7px;
  line-height: 1;
  z-index: 10;
  transition: color .12s, border-color .12s;
}
.em-close:hover { color: var(--ink0); border-color: var(--border-mid); }

.em-header {
  text-align: center;
  margin-bottom: 12px;
  padding-top: 4px;
}

.em-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--ink0);
  line-height: 1.2;
}

.em-title-txt {
  font-size: 11px;
  color: var(--ink2);
  margin-top: 3px;
  font-style: italic;
}

.em-badge-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.em-diff-badge {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
}

.em-cat-badge {
  font-size: 10px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
}
.em-cat-panteao {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(200,144,26,.1);
}
.em-cat-desc {
  color: var(--crystal);
  border-color: var(--crystal-dim);
  background: rgba(80,192,224,.08);
}

.em-bio {
  font-size: 11px;
  color: var(--ink1);
  line-height: 1.65;
  margin-bottom: 16px;
  text-align: left;
}

.em-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.em-info-block {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  text-align: center;
}
.em-info-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3);
  margin-bottom: 3px;
}
.em-info-val {
  font-size: 11px;
  font-weight: bold;
  color: var(--ink0);
}

/* Stats W/D/L */
.em-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}
.em-stat {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 6px 8px;
  text-align: center;
}
.em-stat-win  { border-color: rgba(74,154,48,.3);  }
.em-stat-draw { border-color: rgba(74,72,69,.5);   }
.em-stat-loss { border-color: rgba(192,64,42,.3);  }

.em-stat-val {
  font-size: 22px;
  font-weight: bold;
  font-family: var(--font-mono);
  line-height: 1;
}
.em-stat-win  .em-stat-val { color: var(--green); }
.em-stat-draw .em-stat-val { color: var(--ink2);  }
.em-stat-loss .em-stat-val { color: var(--red);   }

.em-stat-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3);
  margin-top: 4px;
}

.em-total {
  font-size: 10px;
  color: var(--ink2);
  text-align: center;
  margin-bottom: 16px;
}

.em-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ================================================================
   TURN INDICATOR — sbox ativo
   ================================================================ */
.sbox { transition: border-color .2s, box-shadow .2s; }
.turn-active {
  border-color: var(--gold) !important;
  box-shadow: 0 0 8px rgba(200,144,26,.35);
}

/* ================================================================
   SOMA FLASH — lettering animado
   ================================================================ */
.soma-flash {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.4);
  font-size: 52px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--gold-glow);
  text-shadow: 0 0 24px var(--gold), 0 0 60px rgba(240,170,48,.5);
  letter-spacing: .12em;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: none;
}
.soma-flash-go {
  animation: soma-impact .25s cubic-bezier(.2,1.6,.4,1) forwards,
             soma-fade   1.1s ease .3s forwards;
}
@keyframes soma-impact {
  to { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
@keyframes soma-fade {
  0%  { opacity: 1; transform: translate(-50%,-58%) scale(1);   }
  100%{ opacity: 0; transform: translate(-50%,-70%) scale(1.1); }
}

/* ================================================================
   ACHIEVEMENT TOAST — canto inferior direito
   ================================================================ */
.ach-toast {
  position: fixed;
  bottom: 24px; right: 24px; /* valor inicial — sobrescrito por JS */
  background: var(--bg2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  width: 280px;
  z-index: 9000;
  opacity: 0;
  transform: translateY(16px);
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.ach-toast-in  { animation: ach-in  .4s cubic-bezier(.2,1.2,.4,1) forwards; }
.ach-toast-out { animation: ach-out .4s ease forwards; }
@keyframes ach-in  { to { opacity:1; transform:translateY(0); } }
@keyframes ach-out { to { opacity:0; transform:translateY(16px); } }

.ach-toast-icon { font-size: 28px; flex-shrink: 0; }
.ach-toast-body { display: flex; flex-direction: column; gap: 2px; }
.ach-toast-label { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: bold; }
.ach-toast-name  { font-size: 13px; font-weight: bold; color: var(--ink0); }
.ach-toast-desc  { font-size: 10px; color: var(--ink2); line-height: 1.4; }

/* ================================================================
   ACHIEVEMENTS MODAL
   ================================================================ */
#achievements-modal-overlay,
#ranking-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  display: none; align-items: center; justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(2px);
}
#achievements-modal-overlay.show,
#ranking-modal-overlay.show { display: flex; }

#achievements-modal-box,
#ranking-modal-box {
  background: var(--bg2);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 0;
}

.ach-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg2); z-index: 1;
}
.ach-modal-title { font-size: 15px; font-weight: bold; color: var(--ink0); }

.ach-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
}

.ach-card {
  border-radius: var(--radius);
  padding: 14px 12px;
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.ach-unlocked { background: var(--bg3); border-color: var(--gold-dim); }
.ach-locked   { background: var(--bg2); opacity: .55; }

.ach-card-icon { font-size: 22px; }
.ach-card-name { font-size: 12px; font-weight: bold; color: var(--ink0); }
.ach-card-desc { font-size: 10px; color: var(--ink2); line-height: 1.4; }
.ach-card-badge { font-size: 9px; color: var(--green); margin-top: 4px; font-weight: bold; }

/* ================================================================
   RANKING MODAL
   ================================================================ */
.rank-my-pos {
  padding: 10px 20px;
  font-size: 12px;
  color: var(--ink1);
  border-bottom: 1px solid var(--border);
}
.rank-list { padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
}
.rank-row-me { border-color: var(--gold-dim); background: rgba(200,144,26,.08); }
.rank-pos  { font-size: 14px; width: 28px; text-align: center; flex-shrink: 0; }
.rank-name { flex: 1; font-size: 12px; font-weight: bold; color: var(--ink0); }
.rank-pts  { font-size: 13px; font-weight: bold; font-family: var(--font-mono); color: var(--gold-glow); }

/* ================================================================
   RANKING DELTA TOAST
   ================================================================ */
.rank-delta-toast {
  position: fixed;
  bottom: 80px; right: 24px;
  background: var(--bg2);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 15px; font-weight: bold; font-family: var(--font-mono);
  z-index: 8999;
  opacity: 0; transform: translateY(8px);
  text-align: center;
  min-width: 80px;
}
.rank-delta-in  { animation: ach-in  .3s ease forwards; }
.rank-delta-out { animation: ach-out .3s ease forwards; }

/* cro-reward: comporta gold + ranking delta lado a lado */
.cro-reward {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 16px;
  font-weight: bold;
  font-family: var(--font-mono);
  margin: 8px 0 4px;
  flex-wrap: wrap;
}