/* The Magic life counter.
   A phone in the middle of a table, not a page you read: the numbers are the
   interface, the targets are finger-sized, and with two players the top seat is
   turned to face the person sitting opposite. */

.lc-page .sheet{max-width:1100px}
.gp-back{display:inline-block}

/* ── setting up ─────────────────────────────────────────────────────────── */
.lc-setup{max-width:520px;padding-top:10px}
.lc-setup h1{font-family:var(--display);font-size:clamp(30px,4.4vw,44px);font-weight:600;margin:6px 0 8px}
.lc-setup .lead{color:var(--tx-dim);margin:0 0 30px}
.lc-field{margin-bottom:24px}
.lc-label{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-mut);margin-bottom:9px}
.lc-choices{display:flex;gap:9px;flex-wrap:wrap}
.lc-choice{
  min-width:60px;padding:13px 18px;border:1px solid var(--edge);border-radius:11px;
  background:var(--card);color:var(--tx-dim);cursor:pointer;
  font-family:var(--ui);font-size:19px;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;transition:border-color .18s,color .18s,background .18s;
}
.lc-choice:hover{border-color:var(--gold-dk);color:var(--tx)}
.lc-choice.is-on{border-color:var(--gold);color:var(--gold-lt);background:rgba(201,146,42,.10)}
.lc-field small{display:block;margin-top:8px;color:var(--tx-mut);font-size:14px}
.lc-go{margin-top:6px}

/* ── the table ──────────────────────────────────────────────────────────── */
.lc-grid{display:grid;gap:12px;margin:6px 0 16px}
.lc-n2{grid-template-columns:1fr;grid-template-rows:1fr 1fr;min-height:min(74vh,660px)}
.lc-n3,.lc-n5,.lc-n6{grid-template-columns:repeat(2,1fr)}
.lc-n4{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){
  .lc-n3{grid-template-columns:repeat(3,1fr)}
  .lc-n5,.lc-n6{grid-template-columns:repeat(3,1fr)}
}
/* two players sit opposite each other, so the far seat is turned round */
.lc-n2 .lc-seat:first-child{transform:rotate(180deg)}

.lc-seat{
  --seat:var(--gold);
  position:relative;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;
  gap:6px;padding:16px 14px 14px;min-height:200px;
  border:1px solid var(--edge);border-radius:16px;background:var(--card);
  border-top:3px solid var(--seat);
  transition:opacity .25s ease;
}
.lc-seat.is-out{opacity:.42}
.lc-seat header{
  font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--seat);
}
.lc-life{
  font-family:var(--display);font-size:clamp(52px,11vw,104px);font-weight:700;line-height:1;
  color:var(--tx);font-variant-numeric:tabular-nums;align-self:center;
}

/* the big halves: tap the left of a seat to go down, the right to go up */
.lc-step{
  border:0;background:none;color:var(--tx-dim);cursor:pointer;
  font-family:var(--ui);font-weight:600;transition:color .15s,background .15s;
}
.lc-minus,.lc-plus{
  position:absolute;top:38px;bottom:56px;width:40%;font-size:34px;border-radius:12px;
}
.lc-minus{left:0}
.lc-plus{right:0}
.lc-minus:hover,.lc-plus:hover,
.lc-minus:focus-visible,.lc-plus:focus-visible{color:var(--seat);background:rgba(255,255,255,.04)}

.lc-extra{display:flex;align-items:center;gap:10px}
.lc-small{
  min-width:52px;padding:7px 10px;border:1px solid var(--edge);border-radius:9px;
  font-size:14px;letter-spacing:.06em;background:#121110;
}
.lc-small:hover{border-color:var(--seat);color:var(--tx)}
.lc-poison{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;
  border:1px solid var(--edge);background:#121110;color:var(--tx-mut);cursor:pointer;
  font-family:var(--ui);font-size:14px;letter-spacing:.06em;
}
.lc-poison b{color:#9dbf95;font-variant-numeric:tabular-nums}
.lc-poison:hover{border-color:#4a5f46;color:var(--tx-dim)}

/* ── the bar under the table ────────────────────────────────────────────── */
.lc-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lc-bar-btn{
  padding:12px 22px;border:1px solid var(--edge);border-radius:11px;background:var(--card);
  color:var(--tx-dim);cursor:pointer;
  font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.lc-bar-btn:hover{border-color:var(--gold-dk);color:var(--gold-lt)}
.lc-rolled{
  margin:14px 0 0;text-align:center;min-height:1.6em;
  font-family:var(--ui);font-size:16px;letter-spacing:.06em;color:var(--gold-lt);
}

@media(max-width:520px){
  .lc-seat{min-height:158px;padding:13px 10px 12px}
  .lc-minus,.lc-plus{top:32px;bottom:50px;font-size:28px}
  .lc-small{min-width:46px;padding:6px 8px}
}
@media (prefers-reduced-motion:reduce){ .lc-seat,.lc-step,.lc-choice{transition:none} }