/* Art slots, swapping, hero unlocks, tiered talents and the illustrated arts page. */
.mini-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--art-color);color:#fff}.mini-icon svg{width:100%;height:100%;padding:4px}

/* Every art slot is visible: carried arts as tiles, open slots as dashed frames. */
.loadout .weapon-icon.empty-slot,.slot-icon.empty-slot{display:block;background:#ffffff59;border:2px dashed #94a3b8;box-shadow:none}
:root.dark .loadout .weapon-icon.empty-slot,:root.dark .slot-icon.empty-slot{background:#0f172a73;border-color:#64748b}
.slot-strip{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 2px}
.slot-strip>small{font-size:13px;font-weight:700;color:var(--muted);margin-right:2px}
.slot{position:relative;display:inline-grid}
.slot-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--art-color);color:#fff;box-shadow:inset 0 -3px 0 #0000001f}.slot-icon svg{width:100%;height:100%;padding:4px;stroke-width:2.6}
.slot b{position:absolute;right:-6px;bottom:-6px;min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;border-radius:99px;border:2px solid var(--surface);background:#0f172a;color:#fff;font-size:12px}
.slot.evolved .slot-icon{box-shadow:0 0 0 3px #fbbf2466}.slot.evolved b{background:#b45309}

/* A swap card stands apart; the forgetting step lists the carried arts. */
.choice.swap-choice{border-style:dashed;border-left-style:solid;background:color-mix(in srgb,#f97316 7%,var(--surface))}
.swap-tag{background:#ea580c;color:#fff!important;border-radius:99px;padding:5px 11px}
.choice-text small.swap-note{color:#c2410c;font-weight:800}:root.dark .choice-text small.swap-note{color:#fdba74}
.forget-choice:disabled{opacity:.55}.forget-choice .swap-target{display:grid;place-items:center}
.swap-back{width:100%}

/* Large wave cards reuse the stage card; an empty third line collapses. */
.stage-card span:empty{display:none}

/* Map: seal balance next to the stars, six heroes in two rows, locked heroes greyed with their price. */
.progress-seals{display:inline-flex;align-items:center;gap:4px;color:#b45309;font-weight:700}:root.dark .progress-seals{color:#fcd34d}
.progress-seals .seal-icon{display:inline-grid;width:18px;height:18px;color:#d97706}.progress-seals .seal-icon svg{width:100%;height:100%}
.hero-picker,.panel[data-screen=menu][data-tab=play] .hero-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hero-choice.locked canvas{filter:grayscale(1);opacity:.5}.hero-choice.locked b{color:var(--muted)}
.hero-choice .hero-price{display:inline-flex!important;align-items:center;justify-content:center;gap:3px;color:#b45309;font-weight:800}:root.dark .hero-choice .hero-price{color:#fcd34d}
.hero-choice .hero-price[hidden]{display:none!important}
.hero-price .lock-icon{display:inline-grid;width:14px;height:14px;color:#64748b}.hero-price .lock-icon svg{width:100%;height:100%}

/* Talents: five tier tabs, then one card per talent with its rank, effect now → next, and price. */
.talent-tiers{display:flex;gap:4px;padding:4px;border-radius:13px;background:var(--bg);margin:10px 0 0}
.talent-tier{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:46px;padding:6px 2px;border-radius:10px;background:transparent;color:var(--muted)}
.talent-tier b{font-size:15px}.talent-tier small{font-size:11px;color:#b45309;white-space:nowrap}:root.dark .talent-tier small{color:#fcd34d}
.talent-tier[aria-selected=true]{background:var(--surface);color:var(--brand);box-shadow:0 2px 8px #0f172a08}
.talent-tier.closed b{opacity:.7}
.panel[data-tab=talents] .talent-grid{display:flex;flex-direction:column;gap:8px;margin:10px 0 12px}
.tier-notice{padding:9px 12px;border-radius:12px;background:#fbbf2414;border:1px solid #fbbf2455;font-size:13px;color:var(--muted);text-align:center}
.panel[data-tab=talents] .talent-card,.panel[data-tab=talents] .endless-talent{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:3px;align-items:center;padding:10px 12px;text-align:left}
.panel[data-tab=talents] .talent-card>.talent-top{grid-column:1;display:flex;align-items:center;gap:9px}
.panel[data-tab=talents] .talent-card .talent-top .art-icon{width:38px;height:38px;margin:0}
.panel[data-tab=talents] .talent-card .talent-effect{grid-column:1;min-height:0;margin:2px 0 0;font-size:14px;font-weight:700;color:var(--ink)}
.talent-effect .talent-next{color:#15803d}:root.dark .talent-effect .talent-next{color:#4ade80}
.panel[data-tab=talents] .talent-card .talent-pips{grid-column:1;display:flex;gap:3px;margin:3px 0 0;max-width:160px}
.panel[data-tab=talents] .talent-card .talent-pips:empty{display:none}
.panel[data-tab=talents] .talent-card .talent-actions{grid-column:2;grid-row:1/4;margin:0;align-self:center}
.panel[data-tab=talents] .talent-card .talent-buy{min-width:118px;width:auto;padding:8px 10px}
.panel[data-tab=talents] .talent-card.closed{opacity:.62}
@media(max-width:400px){.panel[data-tab=talents] .talent-card .talent-buy{min-width:96px;font-size:12px}.talent-tier b{font-size:14px}.talent-tier small{font-size:10px}}
@media(max-height:440px) and (min-width:600px){.panel[data-tab=talents] .talent-grid{overflow:auto}}

/* The arts page: every art as an illustrated card, schools as icon recipes. */
.art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:6px}
.art-card{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-left:5px solid var(--art-color);border-radius:12px;background:var(--bg)}
.art-card .art-icon{width:48px;height:48px}
.art-card-text{min-width:0}.art-card-text b{display:block;font-size:15px}.art-card-text small{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.art-card-text .art-evolve{color:#b45309}:root.dark .art-card-text .art-evolve{color:#fcd34d}
.art-card-text .art-owner{color:var(--brand);font-weight:700}
.school-intro{color:var(--muted)}
.school-recipe{display:flex;align-items:flex-start;gap:4px;margin:8px 0 4px}
.recipe-art{display:flex;flex-direction:column;align-items:center;gap:4px;width:68px;text-align:center}
.recipe-art .art-icon{position:relative;width:44px;height:44px}
.recipe-art .recipe-level{position:absolute;right:-7px;bottom:-7px;padding:1px 4px;border-radius:99px;border:2px solid var(--surface);background:#0f172a;color:#fff;font-size:10px;line-height:1.3}
.recipe-art small{font-size:11px;line-height:1.3;color:var(--muted)}
.recipe-plus{align-self:center;margin-top:-18px;font-size:20px;font-weight:800;color:var(--muted)}
@media(max-width:480px){.art-grid{grid-template-columns:1fr}}
@media(max-height:460px) and (min-width:641px){.panel[data-screen=menu][data-tab=play] .hero-choice canvas{width:28px;height:30px}.panel[data-screen=menu][data-tab=play] .hero-choice{padding:3px 2px;min-height:0}}
@media(max-height:460px) and (min-width:600px){
 .slot-strip{flex-wrap:wrap;gap:6px 10px}.slot-strip>small{flex-basis:100%;text-align:center;margin:0}
 .panel[data-screen=upgrade] .choices{gap:6px}.panel[data-screen=upgrade] .choice{min-height:60px;padding:6px 9px}
 .panel[data-screen=upgrade] .choice-icon{width:44px;height:44px;border-radius:12px}.panel[data-screen=upgrade] .choice-text small{line-height:1.3}
}