/* Spell slots and the level-up grimoire. Mobile-first: players pick their
   spells on a phone, the DM reads the same widgets in a narrow side panel. */

.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------- slots */

/* BG3's hotbar: one tile per spell level, a roman numeral above it, and a
   small grid of glowing squares inside — one square per slot. */
.slotbar { display:flex; flex-wrap:wrap; gap:8px; }
.slotgroup { display:flex; flex-direction:column; align-items:center; gap:3px; }
.slotgroup__numeral {
  color:var(--muted); font:700 10px var(--ui); letter-spacing:.12em;
}
.slotgroup__tile {
  display:grid; grid-template-columns:repeat(2, 15px); gap:4px;
  justify-content:center; align-content:center;
  min-width:50px; min-height:50px; padding:6px;
  border:1px solid var(--line2); border-radius:5px;
  background:rgba(0,0,0,.4);
}
.slotgroup__tile.is-drained { border-color:var(--line); }

.pip {
  display:block; width:15px; height:15px; border-radius:2px;
  background:var(--slot); box-shadow:0 0 6px rgba(92,201,238,.75);
}
.pip.is-spent { background:var(--slot-dim); box-shadow:none; }

a.pip { cursor:pointer; transition:transform .08s ease, filter .12s ease; }
a.pip:hover { transform:scale(1.2); filter:brightness(1.25); }
a.pip.is-spent:hover { background:#2c6076; }

/* ------------------------------------------------------- known spells */

.spelllist { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.spelllist__group h4 {
  margin:0 0 5px; color:var(--gold-dim); font:700 10px var(--ui);
  letter-spacing:.14em; text-transform:uppercase;
}
.spelllist ul { list-style:none; margin:0; padding:0; }
.spelllist li { padding:4px 0; border-bottom:1px solid var(--line); }
.spelllist li:last-child { border-bottom:0; }
.spelllist__name { font-weight:600; }
.spelllist summary { cursor:pointer; }
.spelllist summary::marker { color:var(--gold-dim); }
.spelllist details p { margin:5px 0 4px; color:var(--muted); font-size:13px; }
.spelllist__meta { color:var(--faint) !important; font-size:11px !important; }

.spell-badge {
  display:inline-block; margin-left:5px; padding:1px 6px; border-radius:3px;
  border:1px solid var(--line2); background:var(--panel2);
  color:var(--muted); font:600 9px var(--ui); font-style:normal;
  letter-spacing:.08em; text-transform:uppercase; vertical-align:middle;
}
.spell-badge.is-locked { border-color:var(--gold-dim); color:var(--gold); }

/* ------------------------------------------------- magic block, sheets */

.magic-pending {
  display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:9px 11px;
  border:1px solid var(--gold-dim); border-radius:8px; background:var(--panel2);
  color:var(--gold); font-size:13px; font-weight:600;
}
.magic-pending:hover { text-decoration:none; background:var(--raise); }
.magic-pending span:first-child { font-size:17px; line-height:1; }
.magic-pending small { display:block; color:var(--muted); font-weight:400; font-size:11px; }

.magic-manage { display:inline-block; margin-top:11px; font-size:12px; }
.magic-empty { margin:8px 0 0; color:var(--faint); font-size:12px; }
.magic-hint { margin:2px 0 0; color:var(--faint); font-size:11px; font-style:italic; }

/* DM side panel: same widgets, tighter. */
.sheet-magic {
  margin-top:12px; padding:12px; border:1px solid var(--line);
  border-radius:9px; background:var(--panel2);
}
.sheet-magic__known { margin:11px 0 0; color:var(--muted); font-size:12px; }

/* ------------------------------------------------------------ grimoire */

.grimoire { max-width:760px; margin:0 auto; padding:0 16px 56px; }
.grimoire__back { margin:16px 0 0; font-size:13px; }

.grimoire__head { margin:22px 0 14px; }
.grimoire__eyebrow {
  margin:0 0 3px; color:var(--gold-dim); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.grimoire__head h1 { margin:0; font-size:30px; line-height:1.1; }
.grimoire__sub { margin:4px 0 0; color:var(--muted); font-size:13px; }
.grimoire__intro { margin:0 0 16px; color:var(--muted); font-size:13px; }

.grimoire__meters {
  position:sticky; top:0; z-index:5;
  display:flex; gap:10px; padding:11px 0; margin-bottom:6px;
  background:linear-gradient(var(--bg) 78%, transparent);
}
.meter {
  flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel);
}
.meter span {
  display:block; color:var(--muted); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.meter b {
  color:var(--gold); font:700 20px var(--serif);
  font-variant-numeric:tabular-nums;
}
.meter b.is-full { color:var(--green); }

.grimoire__group { margin-top:22px; }
.grimoire__group-head { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.grimoire__group-head h2 { margin:0; font-size:17px; white-space:nowrap; }
.grimoire__group-head small { color:var(--faint); font-size:11px; white-space:nowrap; }
.grimoire__rule { flex:1; height:1px; background:linear-gradient(90deg, var(--blood-dim), transparent); }

.spell-picks { display:grid; grid-template-columns:1fr; gap:7px; }
@media (min-width:620px) { .spell-picks { grid-template-columns:1fr 1fr; } }

.spell-pick {
  display:flex; gap:10px; padding:10px 12px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:var(--panel);
  transition:border-color .12s ease, background .12s ease, opacity .12s ease;
}
.spell-pick:hover { border-color:var(--line2); background:var(--panel2); }
.spell-pick input {
  width:auto; margin:3px 0 0; accent-color:var(--gold);
  flex:none; align-self:flex-start;
}
.spell-pick__body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.spell-pick__name { font-weight:600; }
.spell-pick__body small { color:var(--faint); font-size:11px; }
.spell-pick__text { color:var(--muted); font-size:12px; }

.spell-pick.is-picked { border-color:var(--gold-dim); background:var(--panel2); }
.spell-pick.is-picked .spell-pick__name { color:var(--gold); }
.spell-pick.is-frozen { opacity:.4; cursor:not-allowed; }
.spell-pick.is-frozen:hover { border-color:var(--line); background:var(--panel); }
.spell-pick.is-locked { cursor:default; border-color:var(--gold-dim); }
.spell-pick.is-locked input { cursor:default; }

.grimoire__actions { margin-top:26px; }