/*
 * The life tracker (/mtg/life, public/js/mtglife.js). Its own small sheet: the
 * page has no site header or menus, so it carries only the site's colours and
 * fonts, not app.css.
 *
 * Every seat is a CSS size container, and the panel inside it (.face) is
 * turned to face its player. A seat on a long side is turned 90 degrees, so
 * its face swaps width and height (100cqh x 100cqw) to still fill it; text is
 * sized in cqmin so a 2-player half screen and an 8-player sliver both read.
 */
:root {
  --ink: #f1e4c6;
  --ink-soft: #cdb98e;
  --gold: #e0b24c;
  --gold-bright: #f6d888;
  --gold-deep: #b6863a;
  --leather: #2b1d12;
  --leather-2: #33241a;
  --leather-3: #20130b;
  --wine: #732536;
  --wine-deep: #551c28;
  --font-body: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-display: Cinzel, "Trajan Pro", "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #150c07; color: var(--ink);
  font-family: var(--font-body); touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
/* No auto-rotate (mtglife.js holdOrientation): when a phone or tablet turns,
   the whole page is turned back to match the device. The transform also makes
   body the frame for every position:fixed piece (table, menus, windows), so
   they all turn with it. JS sets the swapped width/height in px. */
body.turned {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--turn, 0deg));
}

#lifetable {
  position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px;
  padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right))
    max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
}

/* --- a seat ------------------------------------------------------------------ */
.seat { position: relative; container-type: size; overflow: hidden; border-radius: 14px; }
.seat.first { outline: 3px solid var(--gold-bright); outline-offset: -3px; }
.face {
  position: absolute; left: 50%; top: 50%; width: 100cqw; height: 100cqh;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  container-type: size; overflow: hidden; border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% 40%, hsl(var(--hue) 45% 30% / .85), hsl(var(--hue) 40% 14% / .95)),
    var(--leather);
  border: 1px solid hsl(var(--hue) 40% 45% / .5);
}
.seat.side .face { width: 100cqh; height: 100cqw; }

/* Tap the RIGHT half to gain, the LEFT half to lose — beside the number as
   its player sees it, in every seat (the face is already turned to them),
   never above/below it (the user's call, 2026-10-29). */
.zone {
  position: absolute; top: 0; width: 50%; height: 100%; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: flex; align-items: center;
}
.zone.up { right: 0; justify-content: flex-end; }
.zone.down { left: 0; justify-content: flex-start; }
.zone:active { background: rgba(255, 255, 255, .05); }
.zone:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
/* Bigger and brighter (2026-10-28, the user's call; was 9cqmin at 35%): lit in
   the seat's own colour with a soft glow, so they read at arm's length. */
.zoneglyph {
  font-size: clamp(30px, 21cqmin, 92px); font-weight: bold; padding: 0 4cqmin; line-height: 1;
  color: hsl(var(--hue) 95% 72%);
  text-shadow: 0 0 .25em hsl(var(--hue) 100% 55% / .7), 0 2px 3px rgba(0, 0, 0, .6);
}
.face.out .zoneglyph { opacity: .35; }

.pname, .plife, .pdelta, .pchips { position: absolute; pointer-events: none; }
.pname {
  left: 12%; right: 12%; top: 13%; text-align: center; font-size: clamp(11px, 7cqmin, 30px);
  color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plife {
  left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; line-height: 1;
  font-family: var(--font-display); font-size: clamp(30px, 36cqmin, 220px); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink); text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.pdelta {
  left: calc(50% + 24cqmin); top: 50%; transform: translateY(-50%); font-size: clamp(12px, 9cqmin, 48px);
  color: var(--gold-bright); opacity: 0; transition: opacity .4s;
}
.pdelta.on { opacity: 1; transition: none; }
.pchips {
  left: 4%; right: 4%; bottom: 15%; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5cqmin 2.5cqmin;
  font-size: clamp(10px, 5.5cqmin, 24px);
}
.chip { background: rgba(0, 0, 0, .35); border-radius: 999px; padding: .1em .55em; white-space: nowrap; }
.chip.lethal { background: var(--wine); color: #fff; }
/* Bottom-right of the face: in every seating that's the player's own outer
   edge, never the middle of the table where the menu button sits. */
.pmore {
  position: absolute; bottom: 3cqmin; right: 3cqmin; width: clamp(44px, 18cqmin, 76px); height: clamp(44px, 18cqmin, 76px);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .3);
  font-size: clamp(22px, 10cqmin, 42px); line-height: 1; cursor: pointer; z-index: 2; padding: 0;
}
/* The crown: commander damage. Bottom-left, the player's own edge like ⋯. */
.pcmd {
  position: absolute; bottom: 3cqmin; left: 3cqmin; width: clamp(44px, 18cqmin, 76px); height: clamp(44px, 18cqmin, 76px);
  border-radius: 50%; border: 1px solid var(--gold-deep); background: rgba(0, 0, 0, .3); color: var(--gold-bright);
  padding: 0; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center;
}
.pcmd svg { width: 64%; height: 64%; display: block; }
/* Out of the game (0 life, 10 poison, 21 from one commander): dimmed, still adjustable. */
.face.out .plife { opacity: .35; }
.face.out::after {
  content: "Out"; position: absolute; left: 0; right: 0; top: 24%; text-align: center; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(11px, 6cqmin, 26px); letter-spacing: .2em; color: #f3a0a0;
}

/* --- a player's counters (inside the face, so it turns with it) -------------- */
.panel {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  background: rgba(16, 10, 6, .96); font-size: clamp(13px, 5cqmin, 22px);
}
.phead { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pnamein {
  flex: 1 1 auto; min-width: 0; font: inherit; color: var(--ink); background: var(--leather-3);
  border: 1px solid var(--gold-deep); border-radius: 6px; padding: 6px 8px; -webkit-user-select: text; user-select: text;
}
.pdone, .ptoggle, .mchoice, .mgo, .mclose {
  border: 1px solid var(--gold-deep); background: var(--leather-2); border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.pdone { background: var(--wine); border-color: var(--wine); }
.pbody { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 10px; overscroll-behavior: contain; }
.prow { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.prow.lethal .pval, .prow.lethal .plabel { color: #f3a0a0; }
.plabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstep {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold-deep);
  background: var(--leather-2); font-size: 20px; line-height: 1; cursor: pointer; touch-action: none;
}
.pval { min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums; }
.psub { margin: 10px 0 2px; font-size: .8em; color: var(--ink-soft); letter-spacing: .04em; }
.ptoggles { display: flex; gap: 8px; margin-top: 10px; }
.ptoggle[aria-pressed="true"], .mchoice[aria-pressed="true"] {
  background: var(--gold-deep); color: #1a1008; border-color: var(--gold-bright);
}

/* --- the menu in the middle --------------------------------------------------- */
.hub {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1;
  background: var(--leather-3); border: 2px solid var(--gold-deep); color: var(--gold-bright);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.menu {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .7);
}
.mbox {
  width: min(440px, 100%); max-height: 100%; overflow-y: auto; background: var(--leather);
  border: 1px solid var(--gold-deep); border-radius: 12px; padding: 14px 16px; font-size: 15px;
}
.mhead { display: flex; align-items: center; justify-content: space-between; }
.mhead h1 { margin: 0; font-family: var(--font-display); color: var(--gold); font-size: 20px; }
.mclose { padding: 4px 10px; }
.msec { margin-top: 14px; }
.msec h2 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-weight: normal; }
.mrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mchoice { min-width: 44px; min-height: 40px; }
.mlife {
  width: 80px; font: inherit; color: var(--ink); background: var(--leather-3); border: 1px solid var(--gold-deep);
  border-radius: 8px; padding: 6px 8px; -webkit-user-select: text; user-select: text;
}
.mgo { width: 100%; min-height: 44px; background: var(--wine); border-color: var(--wine); }
.mresult { margin: 4px 0 0; min-height: 1.4em; font-family: var(--font-display); color: var(--gold-bright); font-size: 18px; }
/* The commander damage window: a copy of the table (mtglife.js openCmd),
   each opponent where they sit, every cell's writing turned to face the
   player who opened it (a side seat's cells swap width and height). */
.cmdgrid {
  position: fixed; inset: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px;
  padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right))
    max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
  background: rgba(8, 5, 3, .92);
}
.cmdcell { position: relative; container-type: size; overflow: hidden; border-radius: 14px; }
.cmdface {
  position: absolute; left: 50%; top: 50%; width: 100cqw; height: 100cqh; container-type: size; overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); border-radius: 14px;
  background: hsl(var(--hue) 40% 16%); border: 2px solid hsl(var(--hue) 50% 50%);
}
.cmdgrid.side .cmdface { width: 100cqh; height: 100cqw; }
.cmdzone {
  position: absolute; top: 0; width: 50%; height: 100%; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: flex; align-items: center; touch-action: none;
}
.cmdzone.less { left: 0; justify-content: flex-start; }
.cmdzone.more { right: 0; justify-content: flex-end; }
.cmdzone:active { background: rgba(255, 255, 255, .06); }
.cmdname, .cmdval { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.cmdname {
  top: 12%; padding: 0 14%; font-size: clamp(11px, 7cqmin, 28px); color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdval {
  top: 50%; transform: translateY(-50%); line-height: 1; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 32cqmin, 180px); font-variant-numeric: tabular-nums;
}
.cmdface.lethal { border-color: #f3a0a0; }
.cmdface.lethal .cmdval { color: #f3a0a0; }
.cmdface.cmdme {
  background: var(--leather); border-color: var(--gold-deep); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4cqmin; padding: 4cqmin; text-align: center;
}
.cmdtitle { font-family: var(--font-display); color: var(--gold); font-size: clamp(14px, 8cqmin, 30px); }
.cmdlife { color: var(--ink); font-size: clamp(12px, 6cqmin, 22px); }
.cmdhint { color: var(--ink-soft); font-size: clamp(10px, 4.5cqmin, 16px); }
.cmddone {
  min-height: 40px; padding: 6px 22px; border-radius: 8px; border: 1px solid var(--wine); background: var(--wine);
  cursor: pointer; font-size: clamp(14px, 6cqmin, 20px);
}
.mwake { margin: 14px 0 0; font-size: 13px; color: #f3a0a0; }
.mwake.on { color: var(--ink-soft); }
.mwake::before { content: "\25CF  "; }
.mwake.on::before { color: #8fce7a; }
.mwake + .mchoice { margin-top: 6px; }
/* Force screen on: the looping silent video. Tiny and see-through, but still
   on the page and "visible", which is what keeps the device from locking. */
.keepawake { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }
.mfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 8px; }
.mback { color: var(--gold); }
.lifenojs { padding: 20px; }
.lifenojs a { color: var(--gold); }