/* School synergy panel — parchment box, fits 330px. Colour from --school. */
.sp{--sp-ink:#4a3320;--sp-sub:#8a6a3a;box-sizing:border-box;width:100%;max-width:330px;padding:10px 12px 11px;border-radius:12px;
  background:rgba(255,248,228,.6);border:2px solid color-mix(in srgb,var(--school) 55%,#8a5410);color:var(--sp-ink);
  font-size:13px;line-height:1.35;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -8px 14px -10px color-mix(in srgb,var(--school) 40%,transparent)}
.sp *{box-sizing:border-box}
.sp-head{display:flex;align-items:center;gap:9px}
.sp-medal{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff8e4,color-mix(in srgb,var(--school) 22%,#f3e2b8));
  border:3px solid var(--school);box-shadow:0 0 0 2px rgba(255,248,228,.8),0 1px 3px rgba(60,35,5,.35)}
.sp-medal.sp-lit{box-shadow:0 0 0 2px rgba(255,248,228,.8),0 0 12px 3px color-mix(in srgb,var(--school) 70%,transparent)}
.sp-emoji{font-size:22px;line-height:1}
.sp-art{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover;border-radius:50%}
.sp-title{flex:1;min-width:0;font-weight:800;font-size:15px;color:color-mix(in srgb,var(--school) 60%,#3a2410);letter-spacing:.2px}
.sp-held{flex:none;font-size:12px;color:var(--sp-sub)}
.sp-held b{font-size:15px;color:color-mix(in srgb,var(--school) 70%,#3a2410)}
.sp-rail{position:relative;height:22px;margin:8px 8px 0 6px}
.sp-track{position:absolute;left:0;right:0;top:4px;height:6px;border-radius:3px;background:rgba(138,84,16,.22);box-shadow:inset 0 1px 2px rgba(60,35,5,.35);overflow:hidden}
.sp-fill{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--school) 70%,#fff),var(--school))}
.sp-notch{position:absolute;top:-2px;transform:translateX(-50%);font-style:normal;font-size:15px;line-height:18px;text-align:center;color:var(--sp-sub);text-shadow:0 0 3px #fff8e4,0 0 3px #fff8e4}
.sp-notch u{display:block;text-decoration:none;font-size:10px;line-height:10px;margin-top:-1px}
.sp-notch.sp-on{color:var(--school);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--school) 70%,transparent))}
.sp-pips{display:flex;gap:4px;margin:2px 0 0 4px;min-height:12px}
.sp-pip{width:9px;height:9px;border-radius:50%;background:var(--school);border:1px solid color-mix(in srgb,var(--school) 50%,#3a2410);box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}
.sp-pip.sp-ghost{background:transparent;border:1.5px dashed var(--school);box-shadow:none;animation:sp-pulse 1.2s ease-in-out infinite}
@keyframes sp-pulse{50%{opacity:.35}}
.sp-tiers{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.sp-tier{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 6px;padding:5px 7px 5px 11px;border-radius:7px;background:rgba(255,255,255,.28)}
.sp-tier::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:rgba(138,84,16,.25)}
.sp-mark{color:var(--sp-sub);font-size:13px}
.sp-need{font-weight:700;font-size:12px;color:var(--sp-sub);white-space:nowrap}
.sp-text{flex:1 1 120px;min-width:0}
.sp-tier.sp-dim,.sp-tier.sp-off{opacity:.65}
.sp-tier.sp-on{background:color-mix(in srgb,var(--school) 16%,rgba(255,255,255,.4));font-weight:600}
.sp-tier.sp-on::before{background:var(--school);box-shadow:0 0 7px 1px var(--school)}
.sp-tier.sp-on .sp-mark,.sp-tier.sp-on .sp-need{color:color-mix(in srgb,var(--school) 75%,#3a2410)}
.sp-tier.sp-will{outline:1.5px dashed var(--school);outline-offset:-1px}
.sp-tier.sp-will::before{background:color-mix(in srgb,var(--school) 55%,transparent)}
.sp-lack{margin-left:auto;font-size:11px;color:var(--sp-sub);white-space:nowrap}
.sp-badge{margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px;color:#fff8e4;background:var(--school);text-shadow:0 1px 1px rgba(0,0,0,.4);white-space:nowrap}
.sp-note{margin-top:7px;font-size:11.5px;color:var(--sp-sub);text-align:center;font-style:italic}
/* dark (draft) */
.sp-dark{--sp-ink:#f3e6c8;--sp-sub:#c9ad7c;background:rgba(24,16,34,.78);border-color:color-mix(in srgb,var(--school) 70%,#2a1a08)}
.sp-dark .sp-title,.sp-dark .sp-held b{color:color-mix(in srgb,var(--school) 55%,#fff)}
.sp-dark .sp-medal{background:radial-gradient(circle at 35% 30%,#4a3a5c,#1c1226);box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.sp-dark .sp-medal.sp-lit{box-shadow:0 0 12px 3px color-mix(in srgb,var(--school) 70%,transparent)}
.sp-dark .sp-track{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.sp-dark .sp-notch{text-shadow:0 0 3px #181022,0 0 3px #181022}
.sp-dark .sp-tier{background:rgba(255,255,255,.06)}
.sp-dark .sp-tier::before{background:rgba(255,255,255,.18)}
.sp-dark .sp-tier.sp-on{background:color-mix(in srgb,var(--school) 22%,rgba(255,255,255,.04))}
.sp-dark .sp-tier.sp-on .sp-mark,.sp-dark .sp-tier.sp-on .sp-need{color:color-mix(in srgb,var(--school) 60%,#fff)}
.sp-dark .sp-pip{border-color:rgba(255,255,255,.5)}

/* painted art replaces glyphs: neutral dot under the medal art, CSS diamond for tier marks */
.sp-dot{width:10px;height:10px;border-radius:50%;background:var(--school);opacity:.55}
.sp-dia{display:inline-block;width:8px;height:8px;border:1.5px solid currentColor;transform:rotate(45deg);vertical-align:middle;text-decoration:none}
.sp-on .sp-dia{background:currentColor}
.sp-notch .sp-dia{display:block;margin:5px auto 3px}
.sp-tier .sp-dia{margin:0 2px}

/* codex v2 (DRAFT-CARD-V3 §5): play line, card icon row, numbered tier medals */
.sp-play{margin:2px 0 0 53px;font-size:12.5px;color:var(--sp-sub);opacity:.9}
.sp-cards{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 2px}
.sp-card{display:inline-flex}
.sp-card-btn{appearance:none;border:1.5px solid color-mix(in srgb,var(--school) 50%,#8a5410);background:rgba(255,255,255,.35);padding:0;margin:0;width:28px;height:28px;min-width:28px;border-radius:7px;display:grid;place-items:center;cursor:pointer;font:inherit}
span.sp-card-btn{cursor:default}
.sp-card-btn .j-cx-ico,.sp-card-btn .j-cx-ico .skill-icon,.sp-card-btn .j-cx-ico img,.sp-card-btn .j-cx-ico svg,.sp-card-btn img{width:22px;height:22px;object-fit:contain}
.sp-card-btn.sel{box-shadow:0 0 0 2px var(--school)}
.sp-card-btn.locked{opacity:.8}
.sp-card-btn.locked .j-cx-ico .skill-icon,.sp-card-btn.locked img{filter:brightness(0) opacity(.55)}
.sp-held-card .sp-card-btn{border-color:#c8902a;box-shadow:0 0 0 1px #ffc84a}
.sp-more{align-self:center;font-size:12px;font-weight:700;color:var(--sp-sub);margin-left:2px}
.sp-tmedal{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--school) 18%,transparent);border:2px solid var(--school);color:color-mix(in srgb,var(--school) 70%,#3a2410);font-size:13px;font-weight:800;line-height:1}
.sp-dark .sp-tmedal{color:color-mix(in srgb,var(--school) 60%,#fff)}
.sp-tier{align-items:center}
.sp-tier.sp-on .sp-tmedal{background:var(--school);color:#fff8e4;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.sp-codex .sp-tier{padding-left:9px}
.sp-codex .sp-tier::before{display:none}
.sp-codex{max-width:none}
.sp-codex .sp-tier.sp-dim{opacity:1}
.sp-codex .sp-tmedal{background:color-mix(in srgb,var(--school) 30%,#fff8e4);border-color:color-mix(in srgb,var(--school) 75%,#5a3a10);color:#4a3320}
.sp-codex .sp-title{color:#3a2410}
.sp-codex .sp-held{color:var(--sp-ink)}
.sp-codex .sp-held b{color:#3a2410}
.sp .sp-card-btn{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px;padding:0!important}
.sp-codex .sp-play{color:#6a4a22;opacity:1}
.sp-tier.sp-on .sp-tmedal{color:#3a2410;text-shadow:none}
.sp-live .sp-tier:not(.sp-on) .sp-tmedal{color:#5a4326}