:root{
  --bg:#0a0a0f;--bg2:#12121a;--bg3:#1a1a2e;--border:#3a3a5c;
  --accent:#e8c547;--accent2:#c44bff;--accent3:#4bffb5;--accent4:#ff4b6e;
  --text:#e8e8f0;--muted:#6a6a8a;
  --atk:#ff4b6e;--def:#47c4e8;
  --op-add:#4bffb5;--op-sub:#ff4b6e;--op-mul:#c44bff;--op-div:#47c4e8;--op-pow:#e8c547;
  --bon-atk:#ff6b35;--bon-def:#47c4e8;--bon-heal:#4cdb8a;--bon-dust:#ffd700;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* ── MAP SCREEN ── */
.map-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:6px 4px;font-family:'Press Start 2P',monospace;font-size:9px}
.map-floor-label{color:var(--accent2);text-shadow:0 0 8px var(--accent2)}
.map-hud-hp{color:#ff6b6b}.map-hud-dust{color:var(--bon-gold)}
.map-container{width:100%;flex:1;position:relative;overflow-y:auto;overflow-x:hidden;min-height:340px;padding:0 24px;box-sizing:border-box}
.map-container svg{width:100%;height:100%;position:absolute;inset:0}
.map-node{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;border:2px solid;transition:all .2s;font-family:'Press Start 2P',monospace;z-index:2;background:var(--bg2)}
.map-node.accessible{animation:node-pulse 1.5s ease-in-out infinite;cursor:pointer}
.map-node.current{border-width:3px;box-shadow:0 0 16px currentColor}
.map-node.visited{opacity:0.35;cursor:default;filter:grayscale(1)}
.map-node.locked{opacity:0.2;cursor:default}
.map-node[data-type="combat"]{border-color:#ff4b6e;color:#ff4b6e}
.map-node[data-type="boss"]{border-color:#ff0066;color:#ff0066;width:52px;height:52px;font-size:22px;border-width:3px}
.map-node[data-type="merchant"]{border-color:var(--bon-gold);color:var(--bon-gold)}
.map-node[data-type="enchanter"]{border-color:var(--accent2);color:var(--accent2)}
.map-node[data-type="event"]{border-color:#47c4e8;color:#47c4e8}
.map-legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-family:'Press Start 2P',monospace;font-size:7px;color:var(--muted);padding:4px 0}

#splash-screen{position:fixed;inset:0;background:#000;z-index:99999;display:flex;align-items:center;justify-content:center;pointer-events:none}
#splash-screen .splash-text{font-family:'Press Start 2P',monospace;font-size:clamp(10px,3vw,16px);color:#fff;letter-spacing:2px;opacity:0;text-align:center;line-height:1.8}
#splash-screen .splash-studio{font-family:'Press Start 2P',monospace;font-size:clamp(7px,2vw,11px);color:#aaa;letter-spacing:3px;opacity:0;margin-top:10px;text-align:center}

#bg-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}
body{background:var(--bg);color:var(--text);font-family:'Courier Prime',monospace;min-height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;position:relative}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px);pointer-events:none;z-index:999}
.screen{display:none;width:100%;max-width:600px;padding:12px}
.screen.active{display:flex;flex-direction:column;align-items:center;gap:12px;box-sizing:border-box;min-height:100vh;justify-content:center}

/* ── TITLE ── */
#title-screen{justify-content:center;min-height:100vh;text-align:center;background:radial-gradient(ellipse at center,#1a1a3e 0%,var(--bg) 70%)}
.game-title{font-family:'Press Start 2P',monospace;font-size:clamp(18px,5vw,32px);color:var(--accent);text-shadow:0 0 20px var(--accent),0 0 60px rgba(232,197,71,.3);line-height:1.4;animation:pulse-glow 2s infinite}
.game-subtitle{font-family:'Press Start 2P',monospace;font-size:clamp(7px,2vw,10px);color:var(--accent2);text-shadow:0 0 10px var(--accent2);letter-spacing:3px}
.hero-formula{font-size:clamp(24px,7vw,46px);color:var(--accent3);text-shadow:0 0 30px var(--accent3);letter-spacing:4px;padding:8px}
.btn-primary{font-family:'Press Start 2P',monospace;font-size:clamp(9px,2.5vw,12px);padding:14px 28px;background:transparent;border:2px solid var(--accent);color:var(--accent);cursor:pointer;letter-spacing:2px;text-shadow:0 0 10px var(--accent);transition:all .2s;position:relative;overflow:hidden;text-transform:uppercase;width:100%}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--accent);opacity:0;transition:opacity .2s}
.btn-primary:hover::before,.btn-primary:active::before{opacity:1}
.btn-primary:hover,.btn-primary:active{color:var(--bg)}
.btn-primary span{position:relative;z-index:1}
.btn-secondary{font-family:'Press Start 2P',monospace;font-size:clamp(7px,2vw,9px);padding:10px 20px;background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;letter-spacing:1px;transition:all .2s;text-transform:uppercase;width:100%}
.btn-secondary:hover{border-color:var(--accent2);color:var(--accent2)}
.hs{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--muted)}

/* ── HUD ── */
#game-screen{min-height:100vh;justify-content:flex-start;padding-bottom:24px}
.hud{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--border);border-radius:0 0 8px 8px}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:3px}
.hud-right{align-items:flex-end}
.hud-label{font-size:7px;color:var(--muted);font-family:'Press Start 2P',monospace}
.hud-val{font-family:'Press Start 2P',monospace;font-size:clamp(10px,3vw,14px);color:var(--accent)}
.hud-center{text-align:center}
.floor-badge{font-family:'Press Start 2P',monospace;font-size:clamp(7px,2.5vw,10px);color:var(--accent2);text-shadow:0 0 10px var(--accent2);line-height:1.6}
.hp-bar-bg{background:#1a0a0a;border:1px solid #3a1a1a;border-radius:2px;height:8px;width:80px}
.hp-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent4),#ff8a6e);transition:width .5s}

/* ── RELICS ── */
.relics-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;width:100%;min-height:4px}
.relic-badge{font-size:16px;padding:3px 6px;background:var(--bg2);border:1px solid var(--border);border-radius:5px;cursor:default;position:relative;transition:transform .15s}
.relic-badge:hover{transform:scale(1.1);z-index:50}
.relic-tooltip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--accent2);color:var(--text);font-size:10px;line-height:1.6;padding:7px 10px;border-radius:6px;white-space:normal;width:180px;text-align:left;opacity:0;pointer-events:none;transition:opacity .15s;z-index:200;font-family:'Courier Prime',monospace}
.relic-tooltip strong{color:var(--accent);font-family:'Press Start 2P',monospace;font-size:8px;display:block;margin-bottom:4px}
.relic-badge:hover .relic-tooltip{opacity:1}

/* ── ENEMY ── */
.enemy-area{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;overflow:hidden}
.enemy-area::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(196,75,255,.05) 0%,transparent 60%);pointer-events:none}
.enemy-sprite{font-size:clamp(30px,9vw,44px);line-height:1;filter:drop-shadow(0 0 12px rgba(196,75,255,.6));animation:enemy-idle 2s ease-in-out infinite}
.enemy-sprite.shake{animation:enemy-shake .4s}
.enemy-sprite.defeat{animation:enemy-defeat .6s forwards}
.enemy-img{filter:drop-shadow(0 0 12px rgba(196,75,255,.6));animation:enemy-idle 2s ease-in-out infinite;image-rendering:pixelated}
.enemy-img.shake{animation:enemy-shake .4s}
.enemy-img.defeat{animation:enemy-defeat .6s forwards}
.math-img{border:2px solid var(--border)}
.game-img-fallback{display:none}
.enemy-name{font-family:'Press Start 2P',monospace;font-size:clamp(7px,2.5vw,10px);color:var(--text);letter-spacing:1px}
.enemy-hp-bar-bg{background:#1a0a0a;border:1px solid #3a1a1a;border-radius:3px;height:9px;width:100%}
.enemy-hp-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent4),var(--accent2));transition:width .5s}
.enemy-hp-text{font-size:8px;color:var(--muted);font-family:'Press Start 2P',monospace}
.enemy-atk-preview{font-size:9px;color:var(--atk);font-family:'Press Start 2P',monospace;min-height:14px;line-height:1.6}
.intent-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:5px;font-family:'Press Start 2P',monospace;font-size:8px;border:1px solid;margin-top:3px}
.boss-effect-badge{font-size:9px;color:var(--accent2);font-family:'Press Start 2P',monospace;text-align:center;padding:3px 8px;border:1px solid var(--accent2);border-radius:4px;background:rgba(196,75,255,.08);line-height:1.5;max-width:100%}

/* ── DUAL GRID ── */
.grids-section{width:100%;display:flex;flex-direction:column;gap:8px}
.grid-row-wrap{width:100%;background:var(--bg2);border:2px solid var(--border);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:5px;transition:border-color .2s,box-shadow .2s;position:relative;z-index:1}
.grid-row-wrap.atk-row{border-color:rgba(255,75,110,.4)}
.grid-row-wrap.def-row{border-color:rgba(71,196,232,.35)}
.grid-row-wrap.curse-row{border-color:var(--accent2)!important;animation:curse-pulse 1.5s infinite}
/* Foil shimmer on exact match */
.grid-row-wrap.row-exact{
  position:relative;overflow:hidden;
}
.grid-row-wrap.atk-row.row-exact{border-color:var(--atk);box-shadow:0 0 18px rgba(255,75,110,.45)}
.grid-row-wrap.def-row.row-exact{border-color:var(--def);box-shadow:0 0 18px rgba(71,196,232,.45)}
.grid-row-wrap.row-exact::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  background-size:200% 100%;
  animation:foil-shimmer 1.6s linear infinite;
}
.row-header{display:flex;align-items:center;justify-content:space-between;gap:6px}
.row-label{font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:1px;flex-shrink:0}
.row-label.atk{color:var(--atk)}.row-label.def{color:var(--def)}.row-label.heal{color:var(--bon-heal)}
.grid-row-wrap.heal-row{border-color:rgba(76,219,138,.3)}
.grid-row-wrap.heal-row .target-num{color:var(--bon-heal)}
.btn-priest-intent{font-family:'Press Start 2P',monospace;font-size:8px;padding:9px;background:transparent;border:1px solid #a8e6cf;color:#a8e6cf;cursor:pointer;border-radius:6px;transition:all .2s}
.btn-priest-intent:hover{background:rgba(168,230,207,.1)}
.btn-priest-intent:disabled{opacity:.35;cursor:not-allowed}
.row-target{display:flex;align-items:center;gap:6px;flex-shrink:0}
.target-num{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(18px,5vw,26px);
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  padding:6px 10px;
  border-radius:6px;
  border:1px solid transparent;
  min-width:clamp(42px,12vw,60px);
}
.target-num.atk{color:var(--atk);text-shadow:0 0 16px var(--atk);border-color:rgba(255,75,110,.25);background:rgba(255,75,110,.06)}
.target-num.def{color:var(--def);text-shadow:0 0 16px var(--def);border-color:rgba(71,196,232,.25);background:rgba(71,196,232,.06)}
.tol-badge{font-size:7px;color:var(--muted);background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:2px 5px;font-family:'Press Start 2P',monospace}
.row-formula{font-size:10px;color:var(--muted);font-family:'Courier Prime',monospace;min-height:13px}
.row-preview{display:flex;align-items:center;gap:6px;font-family:'Press Start 2P',monospace;font-size:9px;min-height:18px;flex-wrap:wrap;overflow:visible}
.preview-dmg{color:var(--atk)}.preview-blk{color:var(--def)}.preview-exact{color:var(--accent3);animation:pulse-glow .8s infinite}.preview-neutral{color:var(--muted)}
.grid-cells{display:flex;gap:4px;align-items:center;overflow-x:auto;padding-bottom:2px}
.cell{flex-shrink:0;width:clamp(42px,12vw,56px);height:clamp(42px,12vw,56px);background:var(--bg3);border:1px solid var(--border);border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-family:'Press Start 2P',monospace;font-size:clamp(9px,2.5vw,12px);user-select:none;position:relative}
.cell.start-cell{background:rgba(75,255,181,.07);border-color:var(--accent3);color:var(--accent3);cursor:default;font-size:clamp(10px,3vw,14px)}
.cell.result-cell{background:rgba(232,197,71,.07);border-color:var(--accent);color:var(--accent);cursor:default;margin-left:6px}
.cell.result-cell.correct-cell{background:rgba(71,196,232,.14);border-color:var(--accent3);animation:cell-correct .5s}
.cell.empty:hover,.cell.empty:active{border-color:var(--accent);background:rgba(232,197,71,.05)}
.cell.empty{color:var(--border);font-size:18px}
.cell.add{border-color:var(--op-add);color:var(--op-add);background:rgba(75,255,181,.05)}
.cell.sub{border-color:var(--op-sub);color:var(--op-sub);background:rgba(255,75,110,.05)}
.cell.mul{border-color:var(--op-mul);color:var(--op-mul);background:rgba(196,75,255,.05)}
.cell.div{border-color:var(--op-div);color:var(--op-div);background:rgba(71,196,232,.05)}
.cell.pow{border-color:var(--op-pow);color:var(--op-pow);background:rgba(232,197,71,.05)}
.cell.sqrt{border-color:#b06fff;color:#b06fff;background:rgba(176,111,255,.05)}
.cell.del-btn{border-color:rgba(255,75,110,.4);color:var(--accent4);font-size:15px}
.cell.del-btn:hover{background:rgba(255,75,110,.12)}
.cell-op{font-size:clamp(10px,3vw,13px);line-height:1}
.cell-bonus{position:absolute;top:2px;right:3px;font-size:10px;line-height:1}

/* ── TCG DECK BAR ── */
.deck-bar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px}
.deck-pile{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:default}
.deck-pile-label{font-size:6px;color:var(--muted);font-family:'Press Start 2P',monospace;text-transform:uppercase;letter-spacing:1px}
.deck-pile-count{font-family:'Press Start 2P',monospace;font-size:clamp(11px,3.5vw,16px)}
.deck-pile-count.draw{color:var(--accent)}
.deck-pile-count.hand{color:var(--accent3)}
.deck-pile-count.disc{color:var(--muted)}
.deck-pile-icon{font-size:16px;line-height:1}

/* ── HAND CARDS — FAN LAYOUT ── */
.hand-section{width:100%;display:flex;flex-direction:column;gap:7px}
.hand-title{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;text-align:center}
.hand-cards{
  position:relative;
  width:100%;
  height:150px;
  overflow:visible;
  margin-top:-62px;
  z-index:10;
}
.tile-card{
  width:70px;
  height:90px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:8px;border:2px solid;cursor:pointer;
  font-family:'Press Start 2P',monospace;user-select:none;
  background:var(--bg2);
  position:absolute;
  /* pivot point well below the card bottom — creates arc effect */
  transform-origin:bottom center;
  transition:transform .15s ease, box-shadow .15s ease, z-index 0s;
  overflow:hidden;
  will-change:transform;
}
.tile-card .ts{font-size:20px;line-height:1}
.tile-card .tb{font-size:10px;line-height:1.3;opacity:.9}
/* ── GOLDEN CARD ── */
.tile-card.golden{
  border-color:#ffd700!important;
  border-width:2.5px!important;
  box-shadow:0 0 8px rgba(255,215,0,.35),inset 0 0 12px rgba(255,215,0,.06);
  overflow:hidden;
}
.tile-card.golden::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,
    transparent 20%,
    rgba(255,235,100,.22) 38%,
    rgba(255,255,180,.35) 50%,
    rgba(255,235,100,.22) 62%,
    transparent 80%
  );
  background-size:250% 100%;
  animation:golden-shimmer 2.8s ease-in-out infinite;
}
.tile-card.add{border-color:var(--op-add);color:var(--op-add)}
.tile-card.sub{border-color:var(--op-sub);color:var(--op-sub)}
.tile-card.mul{border-color:var(--op-mul);color:var(--op-mul)}
.tile-card.div{border-color:var(--op-div);color:var(--op-div)}
.tile-card.pow{border-color:var(--op-pow);color:var(--op-pow)}
.tile-card.sqrt{border-color:#b06fff;color:#b06fff}
/* hover and selected override the fan transform via JS inline style */
.tile-card.selected{box-shadow:0 0 18px rgba(232,197,71,.6)!important;z-index:20!important}
.tile-card.selected.add{background:rgba(75,255,181,.12);box-shadow:0 8px 20px rgba(75,255,181,.35)}
.tile-card.selected.sub{background:rgba(255,75,110,.12);box-shadow:0 8px 20px rgba(255,75,110,.35)}
.tile-card.selected.mul{background:rgba(196,75,255,.12);box-shadow:0 8px 20px rgba(196,75,255,.35)}
.tile-card.selected.div{background:rgba(71,196,232,.12);box-shadow:0 8px 20px rgba(71,196,232,.35)}
.tile-card.selected.pow{background:rgba(232,197,71,.12);box-shadow:0 8px 20px rgba(232,197,71,.35)}
.tile-card.selected.sqrt{background:rgba(176,111,255,.12);box-shadow:0 8px 20px rgba(176,111,255,.35)}
.tile-card.selected.golden{background:rgba(255,215,0,.12);box-shadow:0 8px 20px rgba(255,215,0,.4)}
/* drag */
.tile-card[draggable]{cursor:grab}
.tile-card.dragging{opacity:.3;transform:scale(.88)}
.cell.drop-over{border-color:var(--accent)!important;background:rgba(232,197,71,.12)!important;transform:scale(1.08)}
#drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.85;transform:translate(-50%,-50%)}

/* ── PASSIVES ── */
.passives-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;width:100%;min-height:4px}
.passive-tag{font-size:7px;font-family:'Press Start 2P',monospace;padding:3px 6px;border-radius:3px;border:1px solid var(--border);color:var(--muted)}

/* ── ACTION BUTTONS ── */
.btn-attack{font-family:'Press Start 2P',monospace;font-size:clamp(8px,2.5vw,11px);padding:13px 24px;background:linear-gradient(135deg,#1a1a2e,#2a1a3e);border:2px solid var(--accent2);color:var(--accent2);cursor:pointer;letter-spacing:1px;border-radius:6px;text-shadow:0 0 10px var(--accent2);transition:all .2s;text-transform:uppercase}
.btn-attack:hover,.btn-attack:active{background:rgba(196,75,255,.15);box-shadow:0 0 30px rgba(196,75,255,.4)}
.btn-skip{font-family:'Press Start 2P',monospace;font-size:7px;padding:8px 14px;background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:4px;transition:all .2s;text-transform:uppercase;width:100%}
.btn-skip:hover{border-color:var(--accent4);color:var(--accent4)}
.combo-display{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--accent2);white-space:nowrap;animation:combo-glow 1s ease-in-out infinite alternate}

/* ── REWARD SCREEN ── */
#reward-screen{min-height:100vh;justify-content:center;background:radial-gradient(ellipse at center,#1a0a2e 0%,var(--bg) 70%)}
.reward-title{font-family:'Press Start 2P',monospace;font-size:clamp(10px,3vw,14px);color:var(--accent);text-shadow:0 0 20px var(--accent);text-align:center;line-height:1.8;white-space:pre-line}
.reward-cards{display:flex;flex-direction:column;gap:9px;width:100%}
.reward-card{background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:13px;cursor:pointer;transition:all .2s;display:flex;gap:12px;align-items:flex-start}
.reward-card:hover,.reward-card:active{border-color:var(--accent2);background:rgba(196,75,255,.07);transform:translateX(4px)}
.reward-icon{font-size:26px;flex-shrink:0;line-height:1}
.reward-info{flex:1}
.reward-name{font-family:'Press Start 2P',monospace;font-size:clamp(7px,2vw,9px);color:var(--accent);margin-bottom:5px;line-height:1.5}
.reward-desc{font-size:11px;color:var(--muted);line-height:1.5}
.reward-rarity{font-family:'Press Start 2P',monospace;font-size:6px;text-transform:uppercase;padding:2px 5px;border-radius:2px;display:inline-block;margin-top:4px}
.rarity-common{color:#aaa;border:1px solid #555}
.rarity-rare{color:#4bbbff;border:1px solid #4bbbff}
.rarity-epic{color:var(--accent2);border:1px solid var(--accent2)}
.rarity-legendary{color:var(--accent);border:1px solid var(--accent)}

/* ── OFFER CARD (reward / shop / enchanter) ── */
.offer-cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%}
.offer-card-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative}
.offer-card-wrap.cant-afford{opacity:.5;cursor:not-allowed}
.offer-card-wrap.sold{opacity:.35;cursor:default;pointer-events:none}
.offer-card{width:108px;height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:10px;border:2px solid;font-family:'Press Start 2P',monospace;background:var(--bg2);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.offer-card-wrap:not(.cant-afford):not(.sold) .offer-card:hover{transform:translateY(-7px);box-shadow:0 12px 28px rgba(0,0,0,.5)}
.offer-card .oc-sym{font-size:28px;line-height:1}
.offer-card .oc-bon{font-size:11px;line-height:1.3;opacity:.95}
.offer-card .oc-price{font-size:8px;font-family:'Press Start 2P',monospace;color:var(--bon-gold);text-align:center}
.offer-card .oc-label{font-size:7px;font-family:'Press Start 2P',monospace;color:var(--muted);text-align:center;max-width:110px;line-height:1.5}

/* Bonus tooltip on offer cards */
.oc-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:300;background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:8px 10px;box-shadow:0 4px 18px rgba(0,0,0,.6);pointer-events:none;min-width:140px;max-width:200px}
.oc-tooltip-title{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--accent);margin-bottom:5px;white-space:nowrap}
.oc-tooltip-line{font-size:10px;color:var(--muted);line-height:1.6;white-space:nowrap}
.offer-card-wrap:not(.cant-afford):hover .oc-tooltip{display:block}

/* Enchant preview tooltip */
.enchant-preview{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:200;background:var(--bg2);border:2px solid var(--bon-gold);border-radius:10px;padding:6px;box-shadow:0 0 20px rgba(255,215,0,.35);pointer-events:none;white-space:nowrap}
.offer-card-wrap:not(.cant-afford):hover .enchant-preview{display:flex;flex-direction:column;align-items:center;gap:3px}

/* Remove card modal overlay */
#remove-card-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 12px}
#remove-card-overlay.active{display:flex}
#remove-card-box{background:var(--bg2);border:2px solid var(--accent4);border-radius:12px;padding:18px;width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px}
/* ── RESULT CELL TOOLTIP ── */
.result-cell{position:relative;overflow:visible!important;cursor:help}
#result-tooltip-global{position:fixed;z-index:9000;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 13px;box-shadow:0 4px 24px rgba(0,0,0,.8);pointer-events:none;min-width:210px;max-width:280px;display:none}
.rt-title{font-family:'Press Start 2P',monospace;font-size:7px;margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.rt-row{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted);line-height:1.9}
.rt-row span:last-child{font-family:'Press Start 2P',monospace;font-size:8px;white-space:nowrap}

.deck-viewer{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.deck-viewer-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg3);cursor:pointer;user-select:none}
.deck-viewer-title{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--muted);letter-spacing:1px}
.deck-viewer-toggle{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--accent)}
.deck-viewer-body{padding:10px;display:none;flex-direction:column;gap:8px}
.deck-viewer-body.open{display:flex}
.deck-section-label{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.deck-mini-cards{display:flex;gap:4px;flex-wrap:wrap}
.mini-card{width:42px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:5px;border:1px solid;font-family:'Press Start 2P',monospace;background:var(--bg3);position:relative;overflow:hidden}
.mini-card .mts{font-size:10px;line-height:1}
.mini-card .mtb{font-size:6px;line-height:1.2;opacity:.85}
.mini-card.golden{border-color:var(--bon-gold)!important}
.mini-card.golden::before{content:'✦';position:absolute;top:1px;left:2px;font-size:6px;color:var(--bon-gold);opacity:.8}
.mini-card.add{border-color:var(--op-add);color:var(--op-add)}
.mini-card.sub{border-color:var(--op-sub);color:var(--op-sub)}
.mini-card.mul{border-color:var(--op-mul);color:var(--op-mul)}
.mini-card.div{border-color:var(--op-div);color:var(--op-div)}
.mini-card.pow{border-color:var(--op-pow);color:var(--op-pow)}
.mini-card.add{border-color:var(--op-add);color:var(--op-add)}
.mini-card.sub{border-color:var(--op-sub);color:var(--op-sub)}
.mini-card.mul{border-color:var(--op-mul);color:var(--op-mul)}
.mini-card.div{border-color:var(--op-div);color:var(--op-div)}
.mini-card.pow{border-color:var(--op-pow);color:var(--op-pow)}
.mini-card.sqrt{border-color:#b06fff;color:#b06fff}
.deck-empty{font-size:10px;color:var(--muted);font-style:italic;padding:4px}

/* ── GOLD IN HUD ── */
.hud-gold{font-family:'Press Start 2P',monospace;font-size:clamp(10px,3vw,14px);color:var(--bon-gold);text-shadow:0 0 8px rgba(255,215,0,.4)}

/* ── OVERRIDE CARD ── */
.tile-card.override{
  border-color:#ff6b35;color:#ff6b35;
  background:linear-gradient(135deg,rgba(255,107,53,.12),rgba(80,20,0,.1));
  animation:override-pulse 2s ease-in-out infinite;
  box-shadow:0 0 10px rgba(255,107,53,.3);
}
/* Override cell on grid */
.cell.override-cell{
  border-color:#ff6b35!important;
  background:rgba(255,107,53,.15)!important;
  color:#ff6b35!important;
  box-shadow:0 0 10px rgba(255,107,53,.4);
}
.tile-card.enchanted,.mini-card.enchanted{
  border-color:#e8e8ff!important;
  border-width:2.5px!important;
  box-shadow:0 0 10px rgba(220,220,255,.4),0 0 20px rgba(180,180,255,.15);
  overflow:hidden;
}
.tile-card.enchanted::after,.mini-card.enchanted::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 15%,
    rgba(200,200,255,.12) 28%,
    rgba(255,220,255,.22) 38%,
    rgba(210,255,240,.25) 48%,
    rgba(220,210,255,.22) 58%,
    rgba(255,240,210,.15) 68%,
    transparent 82%
  );
  background-size:300% 300%;
  animation:enchanted-foil 3.5s ease-in-out infinite;
}

/* ── MERCHANT / ENCHANTER SCREENS ── */
#merchant-screen,#enchanter-screen{min-height:100vh;justify-content:center;background:radial-gradient(ellipse at center,#0a1a0a 0%,var(--bg) 70%)}
#enchanter-screen{background:radial-gradient(ellipse at center,#1a0a1a 0%,var(--bg) 70%)}
.shop-title{font-family:'Press Start 2P',monospace;font-size:clamp(11px,3vw,16px);text-align:center;line-height:1.7;white-space:pre-line}
.shop-gold-bar{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--bon-gold);text-align:center;padding:6px 12px;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.3);border-radius:6px;width:100%}
.shop-section{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-top:4px}
.shop-items{display:flex;flex-direction:column;gap:8px;width:100%}
.shop-item{background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:12px;display:flex;gap:12px;align-items:flex-start;position:relative}
.shop-item.buyable{cursor:pointer;transition:all .2s}
.shop-item.buyable:hover,.shop-item.buyable:active{border-color:var(--bon-gold);background:rgba(255,215,0,.05);transform:translateX(3px)}
.shop-item.sold{opacity:.45;cursor:default}
.shop-item.cant-afford{opacity:.55;cursor:not-allowed}
.shop-price{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--bon-gold);white-space:nowrap;flex-shrink:0;align-self:center}
.shop-icon{font-size:24px;flex-shrink:0;line-height:1}
.shop-info{flex:1}
.shop-name{font-family:'Press Start 2P',monospace;font-size:clamp(7px,2vw,9px);color:var(--accent);margin-bottom:4px;line-height:1.5}
.shop-desc{font-size:11px;color:var(--muted);line-height:1.4}
.btn-skip-shop{font-family:'Press Start 2P',monospace;font-size:8px;padding:10px;background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:4px;transition:all .2s;text-transform:uppercase;width:100%}
.btn-skip-shop:hover{border-color:var(--accent3);color:var(--accent3)}

/* ── ENCHANTER CARD PICKER ── */
.enchant-cards{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%}
.enchant-card-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.enchant-card-wrap:hover .tile-card{transform:translateY(-6px);box-shadow:0 8px 20px rgba(255,215,0,.4)}
.enchant-card-wrap.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
/* ── POISON CARD ── */
.tile-card.poison{
  border-color:#44cc44;color:#44cc44;
  background:linear-gradient(135deg,rgba(68,204,68,.15),rgba(0,80,0,.12));
  animation:poison-border 3s ease-in-out infinite;
  overflow:visible;
  filter:drop-shadow(0 0 6px rgba(68,204,68,.5));
}
/* Bubble particles via pseudo-elements */
.tile-card.poison::before,.tile-card.poison::after{
  content:'●';
  position:absolute;
  font-size:10px;
  color:rgba(68,204,68,.9);
  pointer-events:none;
  z-index:5;
}
.tile-card.poison::before{
  bottom:4px;left:8px;
  animation:bubble-left 2.2s ease-in-out infinite;
}
.tile-card.poison::after{
  bottom:4px;right:8px;
  animation:bubble-right 1.8s ease-in-out infinite .6s;
}
.tile-card.joker{border-color:#c44bff;color:#fff;text-shadow:0 0 8px #fff;background:transparent;animation:joker-pulse 2s ease-in-out infinite;box-shadow:0 0 12px #c44bff88,0 0 24px #ff006644;overflow:hidden}
.tile-card.joker::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background:linear-gradient(135deg,#ff0066,#ff6b00,#ffff00,#00ff88,#0088ff,#8800ff,#ff0066,#ff6b00);background-size:400% 400%;animation:joker-rainbow 2.5s linear infinite;z-index:0;opacity:0.85}
.tile-card.joker>*{position:relative;z-index:1}

/* ── JOKER-MODIFIED CELL (rainbow foil, distinct from enchanted white shimmer) ── */
.cell.joker-modified{
  position:relative;overflow:hidden;
  border-color:#c44bff!important;
}
.cell.joker-modified::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,75,110,.25) 0%,
    rgba(196,75,255,.25) 25%,
    rgba(71,196,232,.25) 50%,
    rgba(75,255,181,.25) 75%,
    rgba(232,197,71,.25) 100%);
  background-size:300% 100%;
  animation:joker-rainbow 1.8s linear infinite;
}

/* ── OP PICKER MODAL ── */
#op-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:800;display:none;align-items:center;justify-content:center}
#op-picker-overlay.active{display:flex}
#op-picker-box{background:var(--bg2);border:2px solid var(--accent2);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;align-items:center;min-width:260px;box-shadow:0 0 40px rgba(196,75,255,.4)}
.op-picker-title{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--accent2);text-align:center;line-height:1.6}
.op-picker-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.op-picker-btn{width:54px;height:54px;border-radius:7px;border:2px solid;background:var(--bg3);cursor:pointer;font-family:'Press Start 2P',monospace;font-size:16px;transition:all .15s;display:flex;align-items:center;justify-content:center}
.op-picker-btn:hover{transform:scale(1.1)}
.op-picker-cancel{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:4px;padding:6px 14px;cursor:pointer;transition:all .15s}
.op-picker-cancel:hover{border-color:var(--accent4);color:var(--accent4)}

#gameover-screen{min-height:100vh;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#1a0000 0%,var(--bg) 70%)}
#win-screen{min-height:100vh;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#001a0a 0%,var(--bg) 70%)}
.gameover-title{font-family:'Press Start 2P',monospace;font-size:clamp(20px,6vw,36px);color:var(--accent4);text-shadow:0 0 30px var(--accent4);line-height:1.4;animation:flicker 2s infinite}
.win-title{font-family:'Press Start 2P',monospace;font-size:clamp(14px,5vw,26px);color:var(--accent3);text-shadow:0 0 30px var(--accent3);line-height:1.4}
.win-narrative{font-size:12px;color:var(--text);line-height:1.9;text-align:center;max-width:440px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:14px 16px}
.btn-mythic{font-family:'Press Start 2P',monospace;font-size:9px;padding:12px;background:linear-gradient(135deg,rgba(255,165,0,.12),rgba(255,80,0,.06));border:2px solid #ff8c00;color:#ff8c00;cursor:pointer;border-radius:6px;width:100%;transition:all .2s;animation:mythic-pulse 2s ease-in-out infinite}
.btn-mythic:hover{background:rgba(255,140,0,.2);box-shadow:0 0 20px rgba(255,140,0,.4)}
.stat-block{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:14px;width:100%;display:flex;flex-direction:column;gap:9px}
.stat-row{display:flex;justify-content:space-between;font-size:11px;border-bottom:1px solid var(--bg3);padding-bottom:7px}
.stat-row:last-child{border-bottom:none;padding-bottom:0}
.stat-key{color:var(--muted)}.stat-val{color:var(--accent);font-family:'Press Start 2P',monospace;font-size:10px}
/* ── TUTORIAL HIGHLIGHTS ── */
.tuto-highlight-zone{outline:3px solid var(--accent)!important;outline-offset:4px;border-radius:8px;animation:tuto-pulse 1.2s ease-in-out infinite;position:relative;z-index:601}
#howto-screen{min-height:100vh}
.tuto-page{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:14px;width:100%}
.tuto-section{display:flex;gap:12px;align-items:flex-start}
.tuto-icon{font-size:22px;flex-shrink:0;width:28px;text-align:center;margin-top:1px}
.tuto-content{}
.tuto-title{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--accent);margin-bottom:6px;line-height:1.5}
.tuto-text{font-size:11px;color:var(--muted);line-height:1.8}
.tuto-text strong{color:var(--text)}
.tuto-highlight{background:var(--bg3);border-left:3px solid var(--accent);padding:8px 12px;border-radius:0 6px 6px 0;font-size:11px;color:var(--text);line-height:1.8;margin-top:4px}
.tuto-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tuto-chip{font-family:'Press Start 2P',monospace;font-size:7px;padding:3px 8px;border-radius:3px;border:1px solid;background:rgba(0,0,0,.2)}
.tuto-sep{border:none;border-top:1px solid var(--border);margin:2px 0}
.tuto-page-title{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--accent2);text-align:center;padding-bottom:10px;border-bottom:1px solid var(--border);letter-spacing:1px}
.tuto-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);cursor:pointer;transition:all .2s}
.tuto-dot.active{background:var(--accent);border-color:var(--accent)}

/* ── HERO SELECT SCREEN ── */
#hero-screen{min-height:100vh;background:radial-gradient(ellipse at center,#1a1a3e 0%,var(--bg) 70%)}
.hero-cards{display:flex;flex-direction:column;gap:14px;width:100%}
.hero-card{background:var(--bg2);border:2px solid var(--border);border-radius:12px;padding:18px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.hero-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.hero-card:hover{transform:translateY(-3px)}
.hero-card:hover::before{opacity:1}
.hero-card.controleur{border-color:rgba(255,75,110,.5)}
.hero-card.controleur::before{background:radial-gradient(ellipse at 50% 100%,rgba(255,75,110,.08) 0%,transparent 70%)}
.hero-card.controleur:hover{border-color:var(--atk);box-shadow:0 0 24px rgba(255,75,110,.3)}
.hero-card.analyste{border-color:rgba(71,196,232,.5)}
.hero-card.mage::before{background:radial-gradient(ellipse at 50% 100%,rgba(71,196,232,.08) 0%,transparent 70%)}
.hero-card.analyste:hover{border-color:#47c4e8;box-shadow:0 0 24px rgba(71,196,232,.3)}
.hero-card-header{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.hero-sprite{font-size:clamp(34px,9vw,48px);line-height:1}
.hero-name{font-family:'Press Start 2P',monospace;font-size:clamp(11px,3vw,15px)}
.hero-title{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--muted);margin-top:4px;letter-spacing:1px}
.hero-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.hero-stat{font-family:'Press Start 2P',monospace;font-size:7px;padding:3px 8px;border-radius:3px;border:1px solid;background:rgba(0,0,0,.2)}
.hero-trait{font-size:11px;color:var(--muted);line-height:1.7;border-top:1px solid var(--border);padding-top:9px}
.hero-trait strong{font-family:'Press Start 2P',monospace;font-size:7px;display:inline}
.hero-trait .trait-label{font-family:'Press Start 2P',monospace;font-size:7px;display:block;margin-bottom:6px}
/* Hero badge in HUD */
.hero-badge{font-family:'Press Start 2P',monospace;font-size:7px;padding:2px 7px;border-radius:3px;border:1px solid;display:inline-block}

/* ── NOTIFS ── */
#notif-container{position:fixed;top:12px;right:12px;z-index:500;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:230px}
.notif{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:8px 12px;font-size:10px;animation:notif-in .3s ease,notif-out .4s ease 2.3s forwards;line-height:1.5}
.notif.good{border-color:var(--accent3);color:var(--accent3)}
.notif.bad{border-color:var(--accent4);color:var(--accent4)}
.notif.info{border-color:var(--accent);color:var(--accent)}
.notif.boss{border-color:var(--accent2);color:var(--accent2)}

/* ── ANIMATIONS ── */