/* Player view (mobile-first): read-only character sheet. */

.psheet { max-width:520px; margin:0 auto; padding:16px 14px 48px; }

.psheet__bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.psheet__bar .brand { font-size:15px; margin:0; }
.psheet__bar .spacer { flex:1; }

/* ---------- player navigation ---------- */
.player-nav { margin-bottom:14px; }
.player-nav__masthead {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:11px;
}
.player-nav__masthead .brand { font-size:15px; margin:0; text-decoration:none; }
.player-nav__menu {
  color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.04em;
  text-decoration:none;
}
.player-nav__menu::before { content:"←"; margin-right:5px; color:var(--gold-dim); }
.player-nav__menu:hover { color:var(--gold); text-decoration:none; }
.player-nav__tabs {
  display:grid; grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--line); border-radius:9px; overflow:hidden;
  background:var(--panel);
}
.player-nav__tab {
  padding:8px 5px; border-left:1px solid var(--line);
  color:var(--muted); font-size:11px; font-weight:600; text-align:center;
  text-decoration:none;
}
.player-nav__tab:first-child { border-left:0; }
.player-nav__tab:hover { color:var(--gold); background:rgba(212,166,63,.06); text-decoration:none; }
.player-nav__tab.is-active {
  color:var(--gold); background:rgba(212,166,63,.11);
  box-shadow:inset 0 -2px var(--gold-dim);
}

.psheet__top { display:flex; align-items:center; gap:14px; }
.psheet__avatar {
  width:60px; height:60px; border-radius:50%; flex:none;
  background-size:cover; background-position:center; border:2px solid var(--gold-dim);
}
.psheet__name { font:600 24px var(--serif); color:var(--ink); margin:0; line-height:1.1; }
.psheet__sub { color:var(--muted); font-size:13px; margin-top:2px; }

.psheet__vitals { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.vital { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; text-align:center; }
.vital b { display:block; font:600 10px var(--serif); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.vital .val { font:700 26px var(--ui); font-variant-numeric:tabular-nums; color:var(--ink); }
.vital .val small { font-size:15px; color:var(--faint); }
.hpbar { height:6px; border-radius:3px; background:rgba(0,0,0,.5); overflow:hidden; margin-top:8px; }
.hpbar i { display:block; height:100%; background:var(--green); }
.hpbar i.low { background:var(--red); }

.pabils { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
.pabil { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 4px; text-align:center; }
.pabil b { display:block; font:600 10px var(--serif); letter-spacing:.16em; color:var(--muted); }
.pabil .score { font:700 20px var(--ui); font-variant-numeric:tabular-nums; }
.pabil .mod { font-size:12px; color:var(--gold); font-variant-numeric:tabular-nums; }
.pabil__bonus { font-style:normal; font-size:10px; color:var(--green); margin-left:2px; }

.pstates { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0; }
.pstate { border:1px solid var(--gold-dim); border-radius:20px; padding:4px 11px; font-size:13px; color:var(--gold); }

.pcard { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; margin-top:14px; }
.pcard h3 { margin:0 0 8px; font:600 12px var(--serif); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pcard p { margin:0; white-space:pre-wrap; }
.pbuild { list-style:none; margin:0; padding:0; }
.pbuild li { display:grid; grid-template-columns:28px 1fr; gap:8px; padding:3px 0; font-size:13px; }
.pbuild li b { text-align:right; color:var(--faint); font-variant-numeric:tabular-nums; }

/* ---------- where the player is ---------- */
.psheet__where {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  margin:0 0 14px; text-align:center;
}
.psheet__where span { color:var(--gold-dim); }

/* ---------- purse ---------- */
.purse {
  display:flex; align-items:center; gap:9px; margin:14px 0;
  background:linear-gradient(180deg, rgba(212,166,63,.12), rgba(212,166,63,.04));
  border:1px solid var(--gold-dim); border-radius:10px; padding:12px 14px;
}
.purse__icon { color:var(--gold); font-size:18px; line-height:1; }
.purse__amount { font:700 22px var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; }
.purse__unit { color:var(--muted); font-size:13px; }

/* ---------- equipment slots ---------- */
.slots { list-style:none; margin:0; padding:0; }
.slots li {
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:7px 0; border-top:1px solid var(--line); font-size:13px;
}
.slots li:first-child { border-top:none; }
.slots__label { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; flex:none; }
.slots__item { text-align:right; }
.slots__item em { display:block; font-style:normal; font-size:11px; color:var(--faint); }
.slots--empty .slots__item { color:var(--faint); }

/* ---------- backpack ---------- */
.pcard__count { float:right; color:var(--faint); letter-spacing:0; }
.bag { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.bag li {
  border:1px solid var(--line); border-radius:7px; padding:9px 11px; font-size:13px;
  background:var(--panel2);
}
.bag__name { display:block; }
.bag__details { display:block; margin-top:2px; color:var(--faint); font-size:11px; }
.bag li.bag--empty {
  border-style:dashed; background:none; color:var(--faint); font-style:italic; font-size:12px;
}
.spell-group { margin:0 0 10px; font-size:13px; }
.spell-group b { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- party ---------- */
.party { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.party__row {
  display:flex; align-items:center; gap:12px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 13px;
}
.party__row:hover { border-color:var(--gold-dim); text-decoration:none; }
.party__avatar {
  width:40px; height:40px; border-radius:50%; flex:none;
  background-size:cover; background-position:center; border:2px solid var(--line2);
}
.party__id { flex:1; min-width:0; display:flex; flex-direction:column; }
.party__id b { font:600 15px var(--serif); color:var(--gold); }
.party__id span { font-size:12px; color:var(--muted); }
.party__hp { font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; }
.party__me {
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-dim); border-radius:20px; padding:1px 7px;
}

/* ---------- encounter ---------- */
.party__row--static { cursor:default; }
.party__row--static:hover { border-color:var(--line); }
.party__avatar--creature { border-radius:10px; border-color:var(--red); }
.encounter__states { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.encounter__states .pstate { font-size:11px; padding:2px 8px; }

/* ---------- encounter loot ---------- */
.party__row--boss { border-color:var(--gold-dim); }
.boss-tag { color:var(--gold); font-size:10px; letter-spacing:.06em; margin-left:4px; }
.encounter__loot { margin:6px 0 2px 52px; }
.encounter__loot-hint { font-size:11px; color:var(--faint); font-style:italic; margin:0 0 4px; }
.loot__chip--claim { color:var(--gold); border-color:var(--gold-dim); cursor:pointer; }
.loot__chip--claim:hover { background:rgba(212,166,63,.14); }
.defeated-tag { color:var(--muted); }

/* ---------- DM group view: the whole party's sheets at a glance ---------- */
.group-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* Table management is still here, just folded away behind a menu. */
.game-admin {
  border:1px solid var(--line2); border-radius:12px; background:rgba(0,0,0,.14);
  margin-bottom:30px; overflow:hidden;
}
.game-admin > summary {
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  cursor:pointer; list-style:none; color:var(--muted);
  font:600 12px var(--serif); letter-spacing:.16em; text-transform:uppercase;
}
.game-admin > summary::-webkit-details-marker { display:none; }
.game-admin > summary::before { content:"▸"; color:var(--blood); }
.game-admin[open] > summary::before { content:"▾"; }
.game-admin > summary:hover { color:var(--gold); }
.game-admin > summary .section-count { margin-left:auto; }
.game-admin__body {
  display:grid; gap:22px; padding:18px 16px;
  border-top:1px solid var(--line);
}
.game-admin__body h3 {
  margin:0 0 6px; font:600 11px var(--serif); letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-dim);
}
.game-admin__body p.muted { margin:0 0 8px; font-size:13px; }

.gsheets {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:16px; align-items:start;
}
.gsheet {
  background:linear-gradient(160deg, var(--panel), #1c1610);
  border:1px solid var(--line2); border-radius:12px; padding:15px;
}
/* Nested cards need to lift off the sheet's own panel background. */
.gsheet .pcard { background:var(--panel2); }
.gsheet .psheet__name { font-size:21px; }
.gsheet__player {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:13px; padding-bottom:10px; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.gsheet__pending {
  font-style:normal; letter-spacing:0; text-transform:none; font-size:11px;
  color:var(--slot); border:1px solid var(--slot-dim); border-radius:20px; padding:2px 9px;
}
.gsheet__open { margin-top:15px; }

/* Long lists the DM folds away to keep several sheets comparable. */
details.pcard > summary, .fold > summary {
  cursor:pointer; list-style:none;
}
details.pcard > summary::-webkit-details-marker,
.fold > summary::-webkit-details-marker { display:none; }
details.pcard > summary h3 { margin:0; }
details.pcard[open] > summary h3 { margin-bottom:8px; }
details.pcard > summary h3::before, .fold > summary::before {
  content:"▸"; color:var(--gold-dim); margin-right:6px;
}
details.pcard[open] > summary h3::before, .fold[open] > summary::before { content:"▾"; }
details.pcard > summary:hover h3, .fold > summary:hover { color:var(--gold); }
.fold { margin-top:10px; }
.fold > summary {
  font:600 12px var(--serif); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.fold > summary .pcard__count { float:none; margin-left:4px; }
.fold[open] > summary { margin-bottom:8px; }

/* ---------- initiative: the BG3 portrait bar, DM board and phones alike ---------- */
.in-combat {
  display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:10px 13px;
  border:1px solid var(--blood-dim); border-radius:9px;
  background:linear-gradient(180deg, rgba(192,57,46,.18), rgba(192,57,46,.05));
  color:var(--blood); font:600 14px var(--serif); letter-spacing:.06em; text-transform:uppercase;
}
.in-combat small { display:block; color:var(--muted); font-weight:400; font-size:11px; letter-spacing:0; text-transform:none; }

.initiative { margin-bottom:12px; }
.initiative__head {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;
}
.initiative__head .spacer { flex:1; }
.initiative__round {
  font:700 11px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-dim); border-radius:20px; padding:3px 10px;
}
.initiative__now { font-size:12px; color:var(--muted); }
.initiative__now b { color:var(--ink); }
.initiative__head .btn { padding:6px 12px; font-size:12px; }
.initiative__start { display:inline-block; width:auto; }

.initiative__order {
  list-style:none; display:flex; gap:8px; margin:0; padding:0 0 4px;
  overflow-x:auto; counter-reset:none;
}
.init {
  flex:none; width:74px; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px; border:1px solid var(--line); border-radius:9px; background:var(--panel);
  transition:opacity .15s, border-color .15s;
}
.init__portrait {
  position:relative; width:44px; height:44px; border-radius:50%;
  background-size:cover; background-position:center; border:2px solid var(--line2);
}
.init__portrait--creature { border-radius:10px; border-color:var(--red); }
.init__score {
  position:absolute; right:-5px; bottom:-4px; min-width:19px; padding:0 4px;
  border-radius:10px; background:var(--bg); border:1px solid var(--gold-dim);
  color:var(--gold); font:700 10px var(--ui); line-height:16px; text-align:center;
}
.init__name {
  max-width:100%; font-size:11px; text-align:center; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.init__hp { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.init__fix { margin:0; width:100%; }
.init__fix input { padding:2px 4px; font-size:11px; text-align:center; }

.init.is-up { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-dim), 0 0 14px rgba(212,166,63,.25); }
.init.is-up .init__name { color:var(--gold); font-weight:600; }
.init.is-done { opacity:.38; }
.init.is-out { opacity:.28; }
.init.is-out .init__name { text-decoration:line-through; }
.init.is-mine .init__portrait { border-color:var(--gold); }

/* Phones get a tighter strip: the banner above already carries the round. */
.initiative--compact .initiative__head { margin-bottom:6px; font-size:12px; }
.initiative--compact .initiative__order { gap:6px; }
.initiative--compact .init { width:62px; padding:6px 3px; }
.initiative--compact .init__portrait { width:36px; height:36px; }
.initiative--compact .init__name { font-size:10px; }

/* ---------- whose turn it is, on the sheet and in the roster ---------- */
.turn {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding:11px 14px;
  border:1px solid var(--line2); border-radius:10px; background:var(--panel);
}
.turn__label { flex:1; min-width:0; font:600 13px var(--serif); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.turn__label small { display:block; color:var(--faint); font-weight:400; font-size:11px; letter-spacing:0; text-transform:none; }
.turn .btn { flex:none; }
.turn--mine {
  border-color:var(--gold); background:linear-gradient(180deg, rgba(212,166,63,.16), rgba(212,166,63,.04));
  box-shadow:0 0 18px rgba(212,166,63,.18);
}
.turn--mine .turn__label { color:var(--gold); }
.turn--done { border-color:var(--line2); }
.party__turn {
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--gold); border:1px solid var(--gold-dim); border-radius:20px; padding:1px 7px;
}