/* spells.css — Cloudless Sky
   Tabbed spell browser. One tab per element, 4 spells per page.
   Depends on: tokens.css, components.css */

/* ── ELEMENT COLOURS (reference) ────────────────────────────
   Fire  #c0392b   Ice   #2980b9   Wind  #27ae60
   Earth #8b5a2b   Light #c0992a   Dark  #4a2a6e          */

/* ── MP CONTEXT BAR ─────────────────────────────────────── */
/* Shown at top of modal so player knows what they can afford
   without closing the panel. Updated by buildSpellsModal.   */

.spell-mp-context {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-4);
  border-bottom:   1px solid var(--border);
  background:      var(--bg-inset);
}

.spell-mp-context-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.05em;
  color:          var(--mp-fill);
  flex-shrink:    0;
}

.spell-mp-context-track {
  flex:          1;
  height:        6px;
  background:    rgba(41,128,185,0.15);
  border-radius: 3px;
  overflow:      hidden;
  border:        1px solid rgba(41,128,185,0.25);
}

.spell-mp-context-fill {
  height:        100%;
  background:    var(--mp-fill);
  border-radius: 3px;
  transition:    width var(--dur-slow) ease;
}

.spell-mp-context-value {
  font-size:   var(--text-xs);
  color:       var(--mp-fill);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── ELEMENT TABS ────────────────────────────────────────── */

.spell-tabs {
  display:            flex;
  border-bottom:      1.5px solid var(--border);
  background:         var(--bg-header);
  overflow-x:         auto;
  scrollbar-width:    none;
  -ms-overflow-style: none;
  position:           sticky;
  top:                0;
  z-index:            var(--z-raised);
}

.spell-tabs::-webkit-scrollbar { display: none; }

.spell-tab {
  flex:           1;
  min-width:      52px;
  padding:        10px var(--space-2) 8px;
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.05em;
  text-align:     center;
  color:          var(--text-secondary);
  cursor:         pointer;
  border-bottom:  3px solid transparent;
  white-space:    nowrap;
  transition:
    color            var(--dur-fast),
    border-color     var(--dur-fast),
    background-color var(--dur-fast);
  user-select:    none;
  position:       relative;
}

.spell-tab:hover { color: var(--text-primary); }

.spell-tab.active {
  color:               var(--text-primary);
  border-bottom-color: var(--accent);
}

/* Per-element tab accent — underline colour + subtle bg tint */
.spell-tab.active[data-element="Fire"]  { border-bottom-color: #c0392b; color: #c0392b; background: rgba(192,57,43,0.06);  }
.spell-tab.active[data-element="Ice"]   { border-bottom-color: #2980b9; color: #2980b9; background: rgba(41,128,185,0.06); }
.spell-tab.active[data-element="Wind"]  { border-bottom-color: #27ae60; color: #27ae60; background: rgba(39,174,96,0.06);  }
.spell-tab.active[data-element="Earth"] { border-bottom-color: #8b5a2b; color: #8b5a2b; background: rgba(139,90,43,0.06); }
.spell-tab.active[data-element="Light"] { border-bottom-color: #c0992a; color: #c0992a; background: rgba(192,153,42,0.06); }
.spell-tab.active[data-element="Dark"]  { border-bottom-color: #6a3d8f; color: #6a3d8f; background: rgba(106,61,143,0.06); }

/* ── SPELL PAGE ──────────────────────────────────────────── */

.spell-page        { display: none; }
.spell-page.active { display: flex; flex-direction: column; }

.spell-page-inner {
  padding:        var(--space-3) var(--space-4);
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* ── PAGINATION ──────────────────────────────────────────── */

.spell-pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  padding:         var(--space-2) var(--space-4) var(--space-3);
  border-top:      1px solid var(--border);
}

.spell-page-btn {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  padding:        var(--space-1) var(--space-3);
  background:     var(--btn-ghost-bg);
  border:         1px solid var(--btn-ghost-border);
  border-radius:  var(--radius-md);
  color:          var(--text-secondary);
  cursor:         pointer;
  transition:     color var(--dur-fast), background var(--dur-fast);
  min-width:      var(--touch-min);
}

.spell-page-btn:hover    { color: var(--text-primary); background: var(--border); }
.spell-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.spell-page-indicator {
  font-size:  var(--text-sm);
  color:      var(--text-secondary);
  font-style: italic;
  min-width:  48px;
  text-align: center;
}

/* ── SPELL CARDS ─────────────────────────────────────────── */

.spell-card {
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-left:   4px solid var(--border);
  border-radius: var(--radius-md);
  padding:       12px var(--space-3);
  cursor:        pointer;
  display:       flex;
  position:      relative;
  overflow:      hidden;
  align-items:   center;
  gap:           var(--space-3);
  transition:    background var(--dur-fast), border-left-color var(--dur-fast);
  user-select:   none;
}

.spell-card:hover  { background: var(--bg-header); }
.spell-card:active { background: var(--bg-inset); }

.spell-card.cant-afford {
  cursor:  not-allowed;
  opacity: 0.6;
}
.spell-card.cant-afford:hover  { background: var(--bg-inset); }
.spell-card.cant-afford:active { background: var(--bg-inset); }

/* Element left border per spell */
.spell-card[data-element="Fire"]  { border-left-color: #c0392b; }
.spell-card[data-element="Ice"]   { border-left-color: #2980b9; }
.spell-card[data-element="Wind"]  { border-left-color: #27ae60; }
.spell-card[data-element="Earth"] { border-left-color: #8b5a2b; }
.spell-card[data-element="Light"] { border-left-color: #c0992a; }
.spell-card[data-element="Dark"]  { border-left-color: #6a3d8f; }

/* ── SPELL BADGE ─────────────────────────────────────────── */

.spell-badge {
  height:          28px;
  padding:         0 var(--space-2);
  border-radius:   var(--radius-full);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       10px;
  font-family:     var(--font-display);
  color:           #fff6e0;
  font-weight:     var(--weight-bold);
  flex-shrink:     0;
  letter-spacing:  0.04em;
  white-space:     nowrap;
}

.spell-badge.spell-el-fire  { background: #c0392b; }
.spell-badge.spell-el-ice   { background: #2980b9; }
.spell-badge.spell-el-wind  { background: #27ae60; }
.spell-badge.spell-el-holy  { background: #c0992a; }
.spell-badge.spell-el-earth { background: #8b5a2b; }
.spell-badge.spell-el-dark  { background: #4a2a6e; }

/* ── SPELL INFO ──────────────────────────────────────────── */

.spell-card-info {
  flex:      1;
  min-width: 0;
}

.spell-card-name {
  font-family:  var(--font-display);
  font-weight:  var(--weight-bold);
  font-size:    var(--text-base);
  color:        var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.spell-card-desc {
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
  font-style:  italic;
  line-height: 1.4;
}

.spell-card-dmg {
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
  margin-top:  4px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.spell-card-dmg span {
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
}

/* ── SPELL META (right column) ───────────────────────────── */

.spell-card-meta {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--space-1);
  flex-shrink:    0;
}

/* MP cost pill */
.spell-card-cost {
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  color:          #d6eaf8;
  background:     #2471a3;
  border-radius:  var(--radius-full);
  padding:        3px 8px;
  white-space:    nowrap;
}

/* Red pill when player can't afford */
.spell-card-cost.cant-afford {
  background: var(--color-danger);
  color:      var(--color-danger-text);
}

/* ── EMPTY STATE ─────────────────────────────────────────── */

.spell-empty {
  padding:    var(--space-6) var(--space-4);
  text-align: center;
  color:      var(--text-secondary);
  font-style: italic;
  font-size:  var(--text-base);
}

/* ── ULTIMATE SPELL CARDS ────────────────────────────────── */

/* ── ULTIMATE CARD — completely distinct from all tiers ───── */
/* Dark saturated element-colour background with inverted
   (light) text so ultimates look nothing like T1–T3.
   The card IS the element colour — not a tint over parchment. */

.spell-card--ultimate {
  border:        2px solid rgba(255,255,255,0.2);
  border-left:   5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-md);
  padding:       13px var(--space-3) 13px calc(var(--space-3) - 1px);
}

/* Invert all text on ultimate cards */
.spell-card--ultimate .spell-card-name,
.spell-card--ultimate .spell-card-desc,
.spell-card--ultimate .spell-card-dmg,
.spell-card--ultimate .spell-card-lv-label,
.spell-card--ultimate .spell-card-upgrade-hint,
.spell-card--ultimate .spell-card-maxed {
  color: rgba(255,255,255,0.9);
}
.spell-card--ultimate .spell-card-dmg span { color: #ffffff; }
.spell-card--ultimate .spell-card-desc     { color: rgba(255,255,255,0.7); }

/* MP cost pill — white background with dark text on ultimate */
.spell-card--ultimate .spell-card-cost {
  background: rgba(255,255,255,0.22);
  color:      #ffffff;
  border:     1px solid rgba(255,255,255,0.3);
}
.spell-card--ultimate .spell-card-cost.cant-afford {
  background: rgba(220,50,50,0.5);
  color:      #ffffff;
}

/* Level pips inverted */
.spell-card--ultimate .spell-level-pip        { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); }
.spell-card--ultimate .spell-level-pip.filled { background: rgba(255,255,255,0.85); border-color: #ffffff; box-shadow: none; }

/* Cast level buttons inverted */
.spell-card--ultimate .spell-cast-lv-btn        { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
.spell-card--ultimate .spell-cast-lv-btn:hover  { background: rgba(255,255,255,0.22); }
.spell-card--ultimate .spell-cast-lv-btn.active { background: rgba(255,255,255,0.9); border-color: #ffffff; color: #333; }

/* Tier badge on ultimates — white pill */
.spell-card--ultimate .spell-card-tier-badge { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); color: #ffffff; }

/* CD bar inverted */
.spell-card--ultimate .spell-card-cd-track { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); }
.spell-card--ultimate .spell-card-cd-fill  { background: rgba(255,255,255,0.7); }
.spell-card--ultimate .spell-card-cooldown-badge { background: rgba(0,0,0,0.3); color: #ffffff; }

/* Fire — deep crimson */
.spell-card--ultimate[data-element="Fire"]  { background: #8b1a10; border-left-color: #ff6644; }
/* Ice — deep ocean */
.spell-card--ultimate[data-element="Ice"]   { background: #0d3d6e; border-left-color: #66ccff; }
/* Wind — deep forest */
.spell-card--ultimate[data-element="Wind"]  { background: #0d4a24; border-left-color: #66ee88; }
/* Earth — deep soil */
.spell-card--ultimate[data-element="Earth"] { background: #3d2010; border-left-color: #cc8844; }
/* Light — deep gold */
.spell-card--ultimate[data-element="Light"] { background: #5a3d00; border-left-color: #ffdd44; }
/* Dark — deep void */
.spell-card--ultimate[data-element="Dark"]  { background: #1e0a36; border-left-color: #aa66ff; }

/* Rune marker — top-right corner star/diamond shape */
/* ::after removed — symbol now lives on the badge element */

.spell-card-name-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-bottom: 2px;
}


/* Cooldown remaining badge — shown instead of MP cost while on cooldown */
.spell-card-cooldown-badge {
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  color:          var(--text-primary);
  background:     var(--bg-header);
  border-radius:  var(--radius-full);
  padding:        3px 8px;
  white-space:    nowrap;
}

/* Cooldown progress bar — fills left to right as CD drains */
.spell-card-cd-track {
  height:        4px;
  background:    rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow:      hidden;
  margin-top:    5px;
  border:        1px solid rgba(255,255,255,0.12);
}

.spell-card-cd-fill {
  height:        100%;
  background:    var(--accent);
  border-radius: 2px;
  transition:    width var(--dur-slow) ease;
}

/* On cooldown — extra dim and clearly unavailable */
.spell-card--ultimate.cant-afford {
  opacity: 0.65;
}

/* ── TIER BADGES ─────────────────────────────────────────── */

.spell-card-tier-badge {
  font-family:    var(--font-display);
  font-size:      8px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.07em;
  border-radius:  var(--radius-full);
  padding:        2px 6px;
  white-space:    nowrap;
  flex-shrink:    0;
}

/* T1 — understated, grey */
.spell-tier-1 {
  color:      var(--text-secondary);
  background: rgba(139,90,43,0.1);
  border:     1px solid rgba(139,90,43,0.2);
}

/* T2 — silver */
.spell-tier-2 {
  color:      #6a7a8a;
  background: rgba(100,120,140,0.12);
  border:     1px solid rgba(100,120,140,0.3);
}

/* T3 — bronze/amber */
.spell-tier-3 {
  color:      #8b6010;
  background: rgba(180,120,20,0.12);
  border:     1px solid rgba(180,120,20,0.35);
}

/* T4 (Ultimate) — gold, matches card border */
.spell-tier-4 {
  color:      #c0992a;
  background: rgba(192,153,42,0.14);
  border:     1px solid rgba(192,153,42,0.4);
}

/* ── TIER CARD BACKGROUNDS & ELEMENT ICONS ──────────────── */
/* Cards use element-coloured tints that intensify with tier.
   Each card gets a large element icon via ::before pseudo-element
   positioned bottom-right as a watermark. Tier 1 = subtle,
   Ultimate = striking. */


.spell-card::before {
  content:             '';
  position:            absolute;
  right:               -6px;
  bottom:              -6px;
  width:               75px;
  height:              75px;
  background-repeat:   no-repeat;
  background-size:     contain;
  background-position: center;
  pointer-events:      none;
  opacity:             0;
  z-index: var(--z-base);
}

/* All card children sit above the ::before watermark */
.spell-badge,
.spell-card-info,
.spell-card-meta {
  position: relative;
  z-index: var(--z-local-1);
}

.spell-card--t1::before { opacity: 0.07; }
.spell-card--t2::before { opacity: 0.11; width: 82px; height: 82px; }
.spell-card--t3::before { opacity: 0.17; width: 92px; height: 92px; }
.spell-card--ultimate::before { opacity: 0.24; width: 108px; height: 108px; right: -10px; bottom: -10px; }

/* Fire */
.spell-card[data-element="Fire"] { border-left-color: #c0392b; }
.spell-card--t1[data-element="Fire"] { background: rgba(192,57,43,0.05); }
.spell-card--t2[data-element="Fire"] { background: rgba(192,57,43,0.10); }
.spell-card--t3[data-element="Fire"] { background: rgba(192,57,43,0.16); border-left-width: 5px; }
.spell-card[data-element="Fire"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNTAgNSBDNTAgNSAzMCAyNSAzMCA0NSBDMzAgMzUgNDAgMzIgNDAgMzIgQzM1IDUwIDQyIDU4IDQyIDU4IEM0MCA1MiA0NSA0OCA0NSA0OCBDNDMgNjAgNTAgNzAgNTAgNzAgQzUwIDcwIDU3IDYwIDU1IDQ4IEM1NSA0OCA2MCA1MiA1OCA1OCBDNTggNTggNjUgNTAgNjAgMzIgQzYwIDMyIDcwIDM1IDcwIDQ1IEM3MCAyNSA1MCA1IDUwIDUgWiIgZmlsbD0iI2MwMzkyYiIvPjwvc3ZnPg=="); }

/* Ice */
.spell-card[data-element="Ice"] { border-left-color: #2980b9; }
.spell-card--t1[data-element="Ice"] { background: rgba(41,128,185,0.05); }
.spell-card--t2[data-element="Ice"] { background: rgba(41,128,185,0.10); }
.spell-card--t3[data-element="Ice"] { background: rgba(41,128,185,0.16); border-left-width: 5px; }
.spell-card[data-element="Ice"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48bGluZSB4MT0iNTAiIHkxPSI4IiB4Mj0iNTAiIHkyPSI5MiIgc3Ryb2tlPSIjMjk4MGI5IiBzdHJva2Utd2lkdGg9IjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxsaW5lIHgxPSI4IiB5MT0iNTAiIHgyPSI5MiIgeTI9IjUwIiBzdHJva2U9IiMyOTgwYjkiIHN0cm9rZS13aWR0aD0iNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjE4IiB5MT0iMTgiIHgyPSI4MiIgeTI9IjgyIiBzdHJva2U9IiMyOTgwYjkiIHN0cm9rZS13aWR0aD0iNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjgyIiB5MT0iMTgiIHgyPSIxOCIgeTI9IjgyIiBzdHJva2U9IiMyOTgwYjkiIHN0cm9rZS13aWR0aD0iNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iOCIgZmlsbD0iIzI5ODBiOSIvPjwvc3ZnPg=="); }

/* Wind */
.spell-card[data-element="Wind"] { border-left-color: #27ae60; }
.spell-card--t1[data-element="Wind"] { background: rgba(39,174,96,0.05); }
.spell-card--t2[data-element="Wind"] { background: rgba(39,174,96,0.10); }
.spell-card--t3[data-element="Wind"] { background: rgba(39,174,96,0.16); border-left-width: 5px; }
.spell-card[data-element="Wind"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTUgMzUgUTM1IDIwIDU1IDM1IFE3NSA1MCA1NSA2NSBRMzUgODAgNTUgODAgUTcwIDgwIDc1IDcwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyN2FlNjAiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTE1IDUwIFE0MCAzOCA2MCA1MCBRODAgNjIgNzAgNzUgUTY1IDgyIDc1IDg1IiBmaWxsPSJub25lIiBzdHJva2U9IiMyN2FlNjAiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTIwIDY1IFE0MiA1NSA1OCA2NSBRNzIgNzQgNjggODUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzI3YWU2MCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4="); }

/* Earth */
.spell-card[data-element="Earth"] { border-left-color: #8b5a2b; }
.spell-card--t1[data-element="Earth"] { background: rgba(139,90,43,0.05); }
.spell-card--t2[data-element="Earth"] { background: rgba(139,90,43,0.10); }
.spell-card--t3[data-element="Earth"] { background: rgba(139,90,43,0.16); border-left-width: 5px; }
.spell-card[data-element="Earth"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDggMjAsNTUgMzUsNTUgMjAsOTIgODAsOTIgNjUsNTUgODAsNTUiIGZpbGw9IiM4YjVhMmIiLz48L3N2Zz4="); }

/* Light */
.spell-card[data-element="Light"] { border-left-color: #c0992a; }
.spell-card--t1[data-element="Light"] { background: rgba(192,153,42,0.05); }
.spell-card--t2[data-element="Light"] { background: rgba(192,153,42,0.10); }
.spell-card--t3[data-element="Light"] { background: rgba(192,153,42,0.16); border-left-width: 5px; }
.spell-card[data-element="Light"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIxOCIgZmlsbD0iI2MwOTkyYSIvPjxsaW5lIHgxPSI1MCIgeTE9IjUiIHgyPSI1MCIgeTI9IjIyIiBzdHJva2U9IiNjMDk5MmEiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjUwIiB5MT0iNzgiIHgyPSI1MCIgeTI9Ijk1IiBzdHJva2U9IiNjMDk5MmEiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGxpbmUgeDE9IjUiIHkxPSI1MCIgeDI9IjIyIiB5Mj0iNTAiIHN0cm9rZT0iI2MwOTkyYSIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iNzgiIHkxPSI1MCIgeDI9Ijk1IiB5Mj0iNTAiIHN0cm9rZT0iI2MwOTkyYSIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMTgiIHkxPSIxOCIgeDI9IjMwIiB5Mj0iMzAiIHN0cm9rZT0iI2MwOTkyYSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iNzAiIHkxPSI3MCIgeDI9IjgyIiB5Mj0iODIiIHN0cm9rZT0iI2MwOTkyYSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iODIiIHkxPSIxOCIgeDI9IjcwIiB5Mj0iMzAiIHN0cm9rZT0iI2MwOTkyYSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48bGluZSB4MT0iMzAiIHkxPSI3MCIgeDI9IjE4IiB5Mj0iODIiIHN0cm9rZT0iI2MwOTkyYSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4="); }

/* Dark */
.spell-card[data-element="Dark"] { border-left-color: #6a3d8f; }
.spell-card--t1[data-element="Dark"] { background: rgba(106,61,143,0.05); }
.spell-card--t2[data-element="Dark"] { background: rgba(106,61,143,0.10); }
.spell-card--t3[data-element="Dark"] { background: rgba(106,61,143,0.16); border-left-width: 5px; }
.spell-card[data-element="Dark"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNjUgMTUgQzQwIDE1IDIwIDM1IDIwIDYwIEMyMCA3OCAzMiA5MyA0OCA5NyBDMzAgODggMjIgNzIgMjIgNjAgQzIyIDM2IDQwIDE4IDY1IDE4IEM3MiAxOCA3OSAyMCA4NSAyNCBDNzggMTggNzIgMTUgNjUgMTUgWiIgZmlsbD0iIzZhM2Q4ZiIvPjxjaXJjbGUgY3g9IjU4IiBjeT0iNTIiIHI9IjIyIiBmaWxsPSIjNmEzZDhmIi8+PC9zdmc+"); }

/* ── LOCKED CARD ─────────────────────────────────────────── */

.spell-card--locked {
  opacity:    0.72;
  cursor:     not-allowed;
  filter:     grayscale(0.4);
}

.spell-card--locked:hover { background: var(--bg-inset); }

.spell-badge--locked {
  background:  rgba(100,100,100,0.4) !important;
  color:       var(--text-secondary) !important;
  font-size:   var(--text-base) !important;
}

.spell-card-name--locked {
  color: var(--text-secondary);
}

.spell-card-locked-hint {
  color:      var(--text-secondary);
  font-style: italic;
  font-size:  var(--text-xs);
}

.spell-card-lock-icon {
  font-size: 18px;
  opacity:   0.5;
}

/* ── SPELL LEVEL PIPS ────────────────────────────────────── */

.spell-card-level-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-top:  5px;
}

.spell-card-lv-label {
  font-family:    var(--font-display);
  font-size:      9px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.05em;
  color:          var(--text-secondary);
  white-space:    nowrap;
}

.spell-level-pips {
  display: flex;
  gap:     3px;
}

.spell-level-pip {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    rgba(139,90,43,0.2);
  border:        1px solid rgba(139,90,43,0.3);
  transition:    background var(--dur-fast), border-color var(--dur-fast);
}

.spell-level-pip.filled {
  background:  var(--accent);
  border-color: #a0671a;
}


.spell-card-upgrade-hint {
  font-size:  9px;
  color:      var(--text-secondary);
  font-style: italic;
  white-space: nowrap;
  margin-left: auto;
}

.spell-card-maxed {
  font-family:    var(--font-display);
  font-size:      9px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  color:          #c0992a;
  margin-left:    auto;
}

/* ── CAST LEVEL SELECTOR ─────────────────────────────────── */

.spell-cast-level-row {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.spell-cast-lv-btn {
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  width:          24px;
  height:         24px;
  border-radius:  var(--radius-full);
  border:         1.5px solid var(--btn-ghost-border);
  background:     var(--bg-base);
  color:          var(--text-secondary);
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content: center;
  transition:     background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  flex-shrink:    0;
  line-height:    1;
}

.spell-cast-lv-btn:hover {
  background:   var(--bg-inset);
  border-color: var(--accent);
  color:        var(--text-primary);
}

.spell-cast-lv-btn.active {
  background:   var(--accent);
  border-color: #a0671a;
  color:        #fff6e0;
}


/* ── ULTIMATE SYMBOL BADGE ───────────────────────────────── */
/* Inverted pill: element colour background with white text.
   Sits before the spell name so it can't be missed. */

.spell-card-ult-star {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  background:      #c0992a;
  border:          2px solid rgba(255,255,255,0.25);
}

.spell-card-ult-star svg {
  display: block;
  filter:  drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

.spell-card--ultimate[data-element="Fire"]  .spell-card-ult-star { background: #c0392b; }
.spell-card--ultimate[data-element="Ice"]   .spell-card-ult-star { background: #2980b9; }
.spell-card--ultimate[data-element="Wind"]  .spell-card-ult-star { background: #27ae60; }
.spell-card--ultimate[data-element="Earth"] .spell-card-ult-star { background: #8b5a2b; }
.spell-card--ultimate[data-element="Light"] .spell-card-ult-star { background: #c0992a; }
.spell-card--ultimate[data-element="Dark"]  .spell-card-ult-star { background: #6a3d8f; }