/* Kitchen Table Replays — a dim game room. Single dark look by design:
   the table is lit by one warm lamp and the UI sits on smoked glass. */
:root {
  color-scheme: dark;
  --ground: #0b0806;
  --panel: rgba(21, 15, 10, 0.76);
  --panel-solid: #17110c;
  --panel-hover: rgba(58, 42, 26, 0.7);
  --line: rgba(217, 179, 108, 0.2);
  --line-strong: rgba(217, 179, 108, 0.46);
  --brass: #d9b36c;
  --text: #f1e7d5;
  --muted: #ab9c84;
  --faint: #978770;
  --you: #efc47a;
  --opp: #9fbcff;
  --loss: #ff8a75;
  --gain: #8ae6a3;
  /* Lora is the primary face; small-caps labels keep Alegreya Sans SC */
  --font-display: Lora, Georgia, "Times New Roman", serif;
  --font-ui: Lora, Georgia, "Times New Roman", serif;
  --font-caps: "Alegreya Sans SC", system-ui, sans-serif;
  --radius: 3px;
  --gutter: 16px;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ground);
  color: var(--text);
  font: 400 15px/1.4 var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; touch-action: none; }

.panel, .seat, .log, .transport {
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* ---------- top bar ---------- */
.topbar {
  position: absolute;
  top: calc(var(--top) + 12px);
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; justify-self: start; }
/* The match's games, in the View button's style: 29px tall like it and level
   with it. The 3.5px under them keeps the diamonds (and the name tag under
   those) where they sat under the old title. */
.match-games { display: flex; gap: 4px; margin-bottom: 3.5px; }
.game-tab {
  min-width: 72px; /* all three the same width */
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 500 13px/1 var(--font-ui);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.game-tab:hover { color: var(--text); border-color: var(--line-strong); }
/* the game showing: lit, with a brass bar along its foot like the phase rail's */
.game-tab[aria-current="true"] { color: var(--text); border-color: var(--line-strong); background: var(--panel-hover); box-shadow: inset 0 -2px 0 var(--brass); cursor: default; }

/* The turn's phases in a quiet row at the bottom right: the current one lights
   up and a short bar slides along under it, in the colour of whoever's turn it
   is. The words never change, so nothing flickers as the steps go by. */
.phase-rail {
  position: absolute;
  right: calc(var(--gutter) + 26px);
  bottom: calc(var(--bottom) + 22px);
  pointer-events: none;
  display: flex; align-items: baseline; gap: 16px;
}
/* "Turn 6" in the colour of whoever's turn it is, before the phases */
.phase-turn { padding-bottom: 7px; font: 700 14px/1 var(--font-display); white-space: nowrap; color: var(--text); }
.phase-turn:empty { display: none; }
.phase-rail.you .phase-turn { color: var(--you); }
.phase-rail.opp .phase-turn { color: var(--opp); }
.phase-steps { list-style: none; margin: 0; padding: 0 0 7px; display: flex; gap: 16px; }
.phase-steps li {
  font: 600 14px/1 var(--font-display);
  color: rgba(241, 231, 213, 0.5);
  white-space: nowrap;
  transition: color .35s ease;
}
.phase-steps li.done { color: rgba(241, 231, 213, 0.72); }
.phase-steps li.active { color: var(--text); }
/* a 100px bar, slid and stretched into place with a transform (set in hud.js) */
.phase-mark {
  position: absolute; left: 0; bottom: 0;
  height: 2px;
  display: flex; gap: 3px;
  transform: translateX(0);
  opacity: 0;
  transition: transform .35s ease, width .35s ease, opacity .3s ease;
}
/* one segment per step of the phase: dim, done, current */
.phase-mark i { flex: 1; height: 100%; background: currentColor; opacity: 0.22; transition: opacity .25s ease; }
.phase-mark i.done { opacity: 0.5; }
.phase-mark i.on { opacity: 1; }
.phase-rail .phase-mark { color: var(--brass); }
.phase-rail.you .phase-mark { color: var(--you); }
.phase-rail.opp .phase-mark { color: var(--opp); }

.view-tools { justify-self: end; display: flex; gap: 6px; }
.chip {
  padding: 7px 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 500 13px/1 var(--font-ui);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { color: var(--text); border-color: var(--line-strong); background: var(--panel-hover); }
#btn-camera.free { color: var(--brass); border-color: var(--line-strong); }

/* Arena look: life lives on the in-scene badges and opponent cards are always upright. */
#app.look-arena .seats,
#app.look-arena #btn-upright { display: none; }

/* Match score, as in Arena: one diamond per game needed to win the match, lit
   for each game won. Corners in the Arena view, seat panels in the table view. */
.match-pips { display: flex; gap: 9px; align-items: center; padding: 6px 4px; }
.match-pips i {
  width: 11px; height: 11px;
  transform: rotate(45deg);
  border: 1.5px solid rgba(240, 232, 220, 0.6);
  background: rgba(12, 10, 8, 0.6);
}
.match-pips i.won {
  border-color: #ffe7b0;
  background: linear-gradient(135deg, #fff3d6 0%, #ffb347 45%, #ee761a 100%);
  box-shadow: 0 0 6px 1px rgba(255, 150, 40, 0.85), 0 0 16px 4px rgba(255, 110, 20, 0.4);
}
.match-pips i.just-won { animation: pip-lit 0.9s ease-out; }
@keyframes pip-lit {
  0% { transform: rotate(45deg) scale(0.3); }
  55% { transform: rotate(45deg) scale(1.45); }
  100% { transform: rotate(45deg) scale(1); }
}
/* yours sits under your name the way the opponent's sits over theirs: same
   gap to the name (about 7px of air), diamonds flush with the name's left edge */
.match-pips.corner { position: absolute; left: var(--gutter); bottom: calc(var(--bottom) + 25px); }
.match-pips.inline { display: inline-flex; gap: 7px; padding: 0 0 0 4px; }
.match-pips.inline i { width: 8px; height: 8px; }
#app:not(.look-arena) #pips-opp,
#app:not(.look-arena) #pips-me { display: none; }


/* ---------- seats ---------- */
.seats {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--top) + 96px);
  bottom: calc(var(--bottom) + 96px);
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.seat {
  pointer-events: auto;
  width: 142px;
  border-radius: var(--radius);
  padding: 9px 11px 10px;
  display: grid;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.seat.active { border-color: var(--line-strong); }
.seat-name { display: flex; align-items: center; gap: 7px; font: 700 13px/1 var(--font-ui); letter-spacing: 0.01em; }
.seat-name::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .3s; }
.seat.active .seat-name::after { opacity: 1; }
.seat-me .seat-name { color: var(--you); }
.seat-opp .seat-name { color: var(--opp); }
.life {
  display: inline-block;
  font: 800 38px/1 var(--font-ui);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
  transition: color .3s;
}
.life.hit { animation: hit .7s ease-out; color: var(--loss); }
.life.heal { animation: hit .7s ease-out; color: var(--gain); }
@keyframes hit { 0% { transform: scale(1); } 25% { transform: scale(1.18); } 100% { transform: scale(1); } }
.seat-stats { display: grid; gap: 3px; margin: 6px 0 0; }
.seat-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.seat-stats dt { font: 500 11px/1 var(--font-caps); letter-spacing: 0.04em; color: var(--faint); text-transform: lowercase; }
.seat-stats dd { margin: 0; font: 700 14px/1 var(--font-ui); font-variant-numeric: lining-nums tabular-nums; color: var(--muted); }

/* ---------- log ---------- */
.log {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--top) + 96px);
  bottom: calc(var(--bottom) + 96px);
  width: 300px;
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* solid, so the turn headers that stick at the top can match it exactly
     (and the browser needn't blur the 3D board behind a tall panel) */
  background: var(--panel-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.log-head {
  padding: 10px 14px;
  font: 700 12px/1 var(--font-caps);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--brass);
  border-bottom: 1px solid var(--line);
}
/* the default: a short log on the left, under the playback panel and as wide
   as it (main.js keeps --transport-bottom/-width up to date), clear of the name */
#app.look-arena .log.half {
  left: var(--gutter); right: auto;
  top: calc(var(--transport-bottom, 60%) + 10px);
  bottom: calc(var(--bottom) + 86px);
  width: max(280px, var(--transport-width, 300px));
}
/* no top padding: a turn header sticks flush under the title */
.log-list { list-style: none; margin: 0; padding: 0 0 12px; overflow-y: auto; flex: 1; }
.log-turn {
  position: sticky; top: 0; z-index: 1; /* over the log lines, which are positioned too */
  padding: 10px 14px 6px;
  font: 700 13px/1 var(--font-display);
  color: var(--muted);
  background: var(--panel-solid);
  box-shadow: 0 1px 0 var(--line);
}
.log-turn.you { color: var(--you); }
.log-turn.opp { color: var(--opp); }
.log-item {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: baseline;
  padding: 3px 14px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.log-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transform: translateY(-2px); }
.log-item.you::before { background: var(--you); }
.log-item.opp::before { background: var(--opp); }
.log-item:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.log-item.past { color: var(--text); }
.log-item.future { color: var(--faint); }
.log-item.current { color: var(--text); background: rgba(217,179,108,0.1); border-left-color: var(--brass); }
.log-item .k-cast, .log-item .k-life { font-weight: 700; }
.log-item.minor { font-size: 13px; }


/* ---------- inspector ---------- */
/* the hovered card on its own, a little larger than a printed card's picture */
.inspector {
  position: absolute;
  left: calc(var(--gutter) + 180px);
  top: 50%;
  transform: translateY(-50%);
  width: min(282px, (100vh - 40px) * 488 / 680); /* shrinks to fit a short window */
  pointer-events: none;
  z-index: 10;
}
.inspect-art img { display: block; width: 100%; max-width: 100%; border-radius: 4.75% / 3.4%; aspect-ratio: 488 / 680; object-fit: cover; box-shadow: 0 24px 60px rgba(0,0,0,0.6); }

/* ---------- banner ---------- */
.banner {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 6px;
  pointer-events: none;
  text-align: center;
  z-index: 5;
}
.banner span {
  font: 800 clamp(34px, 6vw, 68px)/1 var(--font-display);
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.9), 0 0 80px rgba(0,0,0,0.6);
}
.banner small {
  font: 500 clamp(14px, 1.8vw, 18px)/1 var(--font-ui);
  font-style: italic;
  color: var(--muted);
  text-shadow: 0 0 20px rgba(0,0,0,0.9);
}
.banner small:empty { display: none; }
.banner.you span { color: var(--you); }
.banner.opp span { color: var(--opp); }
.banner.show { animation: banner 1.5s cubic-bezier(.2,.8,.2,1) both; }
.banner.hold { animation: banner-hold .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.96); letter-spacing: 0.04em; }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); letter-spacing: 0.02em; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%); }
}
@keyframes banner-hold {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* pointer tooltip (library size) */
.tip {
  position: fixed;
  z-index: 25;
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(21, 15, 10, 0.92);
  border: 1px solid var(--line);
  font: 500 13px/1 var(--font-ui);
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

/* ---------- graveyard browser ---------- */
.zone-view {
  position: fixed; inset: 0;
  z-index: 30;
  display: grid; place-items: center;
  padding: calc(var(--top) + 64px) var(--gutter) calc(var(--bottom) + 24px);
  background: rgba(8, 6, 4, 0.5);
}
.zone-panel {
  width: fit-content;
  min-width: min(340px, 100%);
  max-width: min(1040px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(21, 15, 10, 0.9);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.zone-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--line);
}
.zone-head h2 { margin: 0; font: 700 19px/1 var(--font-display); letter-spacing: 0.02em; }
.zone-count { font: 500 13px/1 var(--font-ui); color: var(--muted); }
.zone-close { margin-left: auto; }
.zone-close svg { fill: none; stroke-width: 2; stroke-linecap: round; }
.zone-cards {
  list-style: none; margin: 0;
  padding: 18px 20px 20px;
  display: flex; flex-wrap: wrap; gap: 14px;
  overflow-y: auto;
}
.zone-card { flex: none; width: clamp(120px, 28vw, 160px); }
.zone-card img, .zone-card-name {
  display: block; width: 100%;
  aspect-ratio: 488 / 680;
  border-radius: 4.75% / 3.4%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.zone-card img { object-fit: cover; }
.zone-card-name { display: grid; place-items: center; padding: 10px; text-align: center; background: var(--panel-solid); border: 1px solid var(--line); color: var(--muted); }
.zone-empty { margin: 0; padding: 28px 20px 32px; color: var(--muted); }

/* ---------- transport ---------- */
/* The playback panel sits at the left edge: in the Arena view centred on the
   line between the two halves of the board (--median-y comes from the camera,
   in main.js), on the table at the bottom. Collapsed (the default) it has the
   buttons over the pacing modes; expanded it grows downward to three rows:
   buttons, the timeline, then pacing and speed. */
.transport {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--bottom) + 14px);
  border-radius: 14px;
  padding: 10px 10px 10px 24px; /* room for the grip, which only touch screens show */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  transition: opacity .15s ease;
}
.transport .grip { position: absolute; left: 4px; top: 50%; margin-top: -16px; }
#app.look-arena .transport { top: calc(var(--median-y, 50%) - 34px); bottom: auto; }
.transport:not(.collapsed) { min-width: 400px; }
.transport.collapsed .timeline { display: none; }
/* after a few seconds without the pointer moving, keys or play/pause (main.js) */
.transport.idle { opacity: 0; pointer-events: none; transition-duration: .8s; }
/* and the pointer goes with it, until the mouse moves */
body.cursor-idle, body.cursor-idle * { cursor: none !important; }
.pacing { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.buttons .expand { justify-self: end; }
.buttons .clock { justify-self: start; }
.nav { display: flex; gap: 2px; align-items: center; }
.icon.expand svg { fill: none; stroke-width: 2; transition: transform .2s ease; }
.transport:not(.collapsed) .icon.expand svg { transform: rotate(180deg); }
.buttons { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2px; align-items: center; }

/* Drag handle for movable panels; a moved panel is pinned where it was dropped. */
.grip {
  display: grid; place-items: center;
  width: 16px; height: 32px;
  color: var(--faint);
  cursor: grab;
  touch-action: none;
  border-radius: 6px;
}
.grip:hover { color: var(--muted); background: rgba(255,255,255,0.04); }
.grip svg { width: 6px; height: 14px; fill: currentColor; }
.dragging, .dragging .grip, .dragging .transport { cursor: grabbing; user-select: none; }
/* the playback bar drags from its background; with a mouse it needs no grip */
.transport { cursor: grab; touch-action: none; }
.transport button, .transport .timeline { cursor: pointer; }
.moved { position: fixed !important; transform: none !important; right: auto !important; bottom: auto !important; }
/* The playback bar floats over the board on clearer glass, so its controls
   step up a shade to stay readable on the lighter backing. */
.transport {
  --panel: rgba(21, 15, 10, 0.5);
  --faint: #b9ab93;
  --muted: #cfc2ab;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
.icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  color: var(--muted);
}
.icon svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.icon:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.icon.play { width: 38px; height: 38px; background: var(--brass); color: #1a120a; margin: 0 4px; }
.icon.play:hover { background: #e8c682; color: #1a120a; }
.icon.play svg { width: 17px; height: 17px; stroke: none; }
.icon.play .i-pause { display: none; }
.playing .icon.play .i-pause { display: block; }
.playing .icon.play .i-play { display: none; }

.timeline { position: relative; height: 40px; cursor: pointer; touch-action: none; }
.tl-turns { position: absolute; left: 0; right: 0; top: 13px; height: 14px; }
.tl-turn {
  position: absolute; top: 0; bottom: 0;
  border-radius: 3px;
  border-right: 1px solid rgba(0,0,0,0.5);
}
.tl-turn.you { background: rgba(239, 196, 122, 0.24); }
.tl-turn.opp { background: rgba(159, 188, 255, 0.18); }
.tl-turn.past.you { background: rgba(239, 196, 122, 0.5); }
.tl-turn.past.opp { background: rgba(159, 188, 255, 0.4); }
.tl-turn b {
  position: absolute; left: 3px; top: -12px;
  font: 700 10px/1 var(--font-ui); color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.tl-marks { position: absolute; left: 0; right: 0; top: 13px; height: 14px; pointer-events: none; }
.tl-mark { position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff7e6; opacity: 0.8; }
.tl-mark.attack { background: #ff7a4a; border-radius: 1px; transform: rotate(45deg); }
.tl-mark.die { background: #1b0f09; box-shadow: 0 0 0 1.5px #ff7a4a; }
.tl-mark.life { background: transparent; }
.tl-needle {
  position: absolute; top: 6px; bottom: 6px; width: 2px; margin-left: -1px;
  background: var(--brass);
  pointer-events: none;
}
.tl-needle::after {
  content: ""; position: absolute; left: 50%; top: -3px;
  width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--brass);
}
.speeds { display: flex; gap: 2px; }
.speed {
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none; cursor: pointer;
  font: 700 13px/1 var(--font-ui);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.speed:hover { color: var(--text); }
.speed[aria-checked="true"] { color: var(--text); border-color: var(--line-strong); background: var(--panel-hover); }

/* ---------- loader ---------- */
.loader {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--ground);
  z-index: 50;
  transition: opacity .6s;
}
.loader.gone { opacity: 0; pointer-events: none; }
.loader-deck { position: relative; width: 60px; height: 84px; }
.loader-deck i {
  position: absolute; inset: 0; border-radius: 4px;
  background: #1a1410 var(--card-back, none) center / cover no-repeat;
  box-shadow: 0 10px 24px rgba(0,0,0,0.6);
  animation: shuffle 1.2s ease-in-out infinite;
}
.loader-deck i:nth-child(2) { animation-delay: .2s; }
.loader-deck i:nth-child(3) { animation-delay: .4s; }
@keyframes shuffle {
  0%, 100% { transform: translateX(0) rotate(0); }
  30% { transform: translateX(-34px) rotate(-10deg); }
  60% { transform: translateX(28px) rotate(8deg); }
}
.loader-text { font: 700 18px/1 var(--font-display); color: var(--muted); letter-spacing: 0.04em; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .log { width: 260px; }
  .inspector { left: auto; right: calc(var(--gutter) + 272px); }
}
@media (max-width: 860px) {
  /* the game buttons keep their line and the view chips wrap beside them; the
     phase goes under them, as the bottom right is taken by the playback bar */
  .topbar { grid-template-columns: auto 1fr; }
  .view-tools { flex-wrap: wrap; justify-content: flex-end; }
  .phase-rail { top: calc(var(--top) + 86px); bottom: auto; left: var(--gutter); right: auto; }
  .phase-steps { gap: 11px; }
  .phase-steps li { font-size: 12px; }
  .view-tools #btn-upright { display: none; }
  .log, #app.look-arena .log.half { top: auto; left: auto; right: var(--gutter); bottom: calc(var(--bottom) + 150px); height: 34%; width: calc(100% - 2 * var(--gutter)); }
  .seats { top: calc(var(--top) + 116px); bottom: auto; right: var(--gutter); flex-direction: row; gap: 8px; }
  .seats .seat-me { order: -1; }
  .seat { width: auto; flex: 1; padding: 8px 10px; grid-template-columns: 1fr auto; align-items: center; }
  .life { font-size: 32px; }
  .seat-stats { display: none; }
  .inspector { left: 50%; right: auto; top: calc(var(--top) + 116px); transform: translateX(-50%); width: 210px; }
  .transport, #app.look-arena .transport { top: auto; bottom: calc(var(--bottom) + 14px); left: auto; right: var(--gutter); }
  .transport:not(.collapsed) { min-width: 0; width: min(400px, calc(100% - 2 * var(--gutter))); }
}
@media (max-width: 480px) {
  .icon { width: 32px; height: 32px; }
  .icon.play { width: 36px; height: 36px; }
}
/* with a mouse the playback bar drags from its background, so it needs no grip
   (after the narrow-screen rules, which lay the bar out around one) */
@media (hover: hover) and (pointer: fine) {
  .transport .grip { display: none; }
  .transport { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .phase-mark { transition: opacity .3s ease; }
  .banner.show, .banner.hold, .life.hit, .life.heal, .loader-deck i, .match-pips i.just-won { animation: none; }
  .banner.show, .banner.hold { opacity: 1; }
}

/* ---------- worlds replays additions ---------- */
.chip.warn { color: var(--loss); border-color: rgba(255, 138, 117, 0.5); cursor: help; }
.seat.priority .seat-life::after { content: "priority"; margin-left: 8px; font: 500 10px/1 var(--font-caps); letter-spacing: 0.06em; color: var(--brass); vertical-align: middle; }
.seat-look { min-height: 1.2em; margin-top: 6px; font: italic 400 12px/1.2 var(--font-ui); color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-item { position: relative; }
.log-time { padding-left: 4px; font: 400 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--faint); }
.clock { min-width: 3.4em; padding: 0 6px; font: 700 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--muted); text-align: center; align-self: center; }
.clock.live { color: var(--brass); }
.mode-pick select {
  appearance: none; -webkit-appearance: none;
  padding: 5px 24px 5px 9px; border: 1px solid var(--line); border-radius: 4px;
  font: 500 12px/1 var(--font-caps); letter-spacing: 0.03em; color: var(--text); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23cfc2ab' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center / 10px;
}
.mode-pick select:hover { border-color: var(--line-strong); }
.mode-pick select option { background: #17110c; color: var(--text); }
/* The cards the log's owner looked at (Sleight of Hand, scry, surveil, a
   mulligan), in the style of Arena's own "Choose One" screen: a big title over
   a fading rule, the offered cards glowing cyan. When the answer shows, the
   picked cards glow gold, the rest dim, and each says where it went. A soft
   dark band behind it, not the whole screen. */
.choice {
  position: absolute; left: 50%; top: calc(var(--top) + 14vh); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2 * var(--gutter));
  padding: 14px 40px 20px;
  pointer-events: none; text-align: center; color: #f4efe6;
  isolation: isolate;
}
/* a soft oval of shade behind it, no edge to it */
.choice::before {
  content: ""; position: absolute; inset: -70px -120px; z-index: -1;
  background: radial-gradient(closest-side, rgba(7, 9, 13, 0.84), rgba(7, 9, 13, 0.72) 62%, rgba(7, 9, 13, 0));
}
.choice-title { margin: 0; font: 600 44px/1.05 var(--font-display); letter-spacing: 0.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.choice-title::after {
  content: ""; display: block; height: 1px; margin: 12px -28px 0;
  background: linear-gradient(90deg, transparent, rgba(244, 239, 230, 0.6) 18%, rgba(244, 239, 230, 0.6) 82%, transparent);
}
.choice-sub { margin: 8px 0 18px; font: 400 17px/1.3 var(--font-ui); color: rgba(244, 239, 230, 0.9); }
.choice-cards { display: flex; justify-content: center; gap: 16px; }
.choice-card { margin: 0; width: clamp(96px, 11vw, 176px); display: grid; gap: 10px; justify-items: center; perspective: 900px; }
/* copies of the picker's cards flying off to where they went, after it closes */
.fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.fly-layer .choice-card { position: absolute; margin: 0; }
/* front and back, for turning over as a card comes off the library */
.choice-flip { position: relative; width: 100%; transform-style: preserve-3d; }
.choice-flip img, .choice-flip .choice-name { backface-visibility: hidden; }
.choice-back {
  position: absolute; inset: 0; border-radius: 4.75% / 3.4%;
  background: var(--card-back, none) center / cover, #3b2a1d;
  transform: rotateY(180deg); backface-visibility: hidden;
}
.choice-cards.many { gap: 10px; }
.choice-cards.many .choice-card { width: clamp(70px, 7vw, 112px); }
.choice-card img, .choice-card .choice-name { display: block; width: 100%; aspect-ratio: 488 / 680; border-radius: 4.75% / 3.4%; transition: box-shadow .25s, filter .25s; }
.choice-card .choice-name { display: grid; place-items: center; padding: 8px; font-size: 13px; background: #1b1712; color: #d8cfbf; }
.choice-card figcaption { min-height: 1em; font: 500 14px/1 var(--font-caps); letter-spacing: 0.08em; color: #e9e2d4; }
.choice-card.offered img, .choice-card.offered .choice-name { box-shadow: 0 0 0 3px #4fd6ff, 0 0 18px 4px rgba(79, 214, 255, 0.6); }
.choice-card.kept img, .choice-card.kept .choice-name { box-shadow: 0 0 0 3px #f2c76b, 0 0 20px 5px rgba(242, 199, 107, 0.55); }
.choice-card.kept figcaption { color: #f2c76b; }
.choice-card.away img, .choice-card.away .choice-name { filter: brightness(0.42) saturate(0.55); }
@media (max-width: 860px) {
  .choice-title { font-size: 32px; }
  .choice { padding-inline: 20px; }
}
.decision {
  position: absolute; left: var(--gutter); top: calc(var(--top) + 104px); width: min(320px, calc(100vw - 2 * var(--gutter)));
  border-radius: var(--radius); padding: 10px 12px; pointer-events: none; transition: opacity .25s;
}
.decision.stale { opacity: 0.55; }
.decision-top { display: flex; justify-content: space-between; gap: 8px; font: 700 13px/1.2 var(--font-ui); color: var(--you); }
.decision-time { font-variant-numeric: tabular-nums; color: var(--brass); }
.decision-options { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; max-height: 180px; overflow: hidden; }
.decision-options li { font: 400 13px/1.25 var(--font-ui); color: var(--muted); padding-left: 12px; position: relative; }
.decision-options li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.decision-options li.chosen { color: var(--text); font-weight: 700; }
.decision-options li.chosen::before { background: var(--brass); }
.decision-choice { margin-top: 6px; font: 700 13px/1.25 var(--font-ui); color: var(--text); }
/* the table view keeps its seat panels on the left: decisions go right, beside the log */
#app:not(.look-arena) .decision { left: auto; right: var(--gutter); }
#app:not(.look-arena):has(#log:not([hidden])) .decision { right: calc(316px + var(--gutter)); }
/* the Arena view has no seat panels: name each side, and what they're looking at */
.player-tag { position: absolute; left: var(--gutter); display: flex; align-items: baseline; gap: 8px; max-width: min(420px, 60vw); pointer-events: none; font: 400 12px/1.2 var(--font-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-tag b { font: 700 16px/1.2 var(--font-ui); }
.player-tag span { font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.player-tag.opp { top: calc(var(--top) + 73.2px); } /* 11px under the diamonds, which follow the game buttons */
.player-tag.opp b { color: var(--opp); }
.player-tag.me { bottom: calc(var(--bottom) + 50.8px); } /* 11px over the diamonds */
.player-tag.me b { color: var(--you); }
#app:not(.look-arena) .player-tag { display: none; }
@media (max-width: 860px) { .decision { top: auto; bottom: calc(150px + var(--bottom)); } }

/* ---------- the View menu ---------- */
.menu-wrap { position: relative; }
.menu-btn { display: inline-flex; align-items: center; gap: 7px; }
.view-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 250px; padding: 6px 0;
  background: rgba(21, 15, 10, 0.96); border: 1px solid var(--line-strong); border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  display: grid;
}
.menu-head { padding: 9px 14px 4px; font: 500 11px/1 var(--font-caps); letter-spacing: 0.06em; color: var(--faint); }
.menu-item {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 14px; border: 0; background: none; text-align: left; cursor: pointer;
  font: 500 14px/1.2 var(--font-ui); color: var(--muted); text-decoration: none;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--panel-hover); color: var(--text); outline: none; }
.menu-item::before { content: ""; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 2px; }
.menu-item[aria-pressed="true"] { color: var(--text); }
.menu-item[aria-pressed="true"]::before { background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.9' fill='none' stroke='%2317110c' stroke-width='1.8'/%3E%3C/svg%3E") center / 10px no-repeat; border-color: var(--brass); }
.menu-item.action::before { visibility: hidden; } /* an action, not a switch: no box, labels still line up */
.menu-item kbd { font: 500 11px/1 var(--font-caps); color: var(--faint); border: 1px solid var(--line); border-radius: 2px; padding: 3px 5px; }
#app.look-arena .view-menu #btn-upright { display: none; }
.tip { display: grid; gap: 4px; line-height: 1.25; }
.tip b { font-weight: 700; }
.tip span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* a brief line at the top, e.g. "No log from XantosCell for this game" */
.notice { position: absolute; top: calc(var(--top) + 16px); left: 50%; transform: translateX(-50%); padding: 7px 14px; background: rgba(21, 15, 10, 0.88); border: 1px solid var(--line); border-radius: 3px; pointer-events: none; z-index: 45; font: 400 14px/1.2 var(--font-ui); color: var(--text); }
.menu-presets { display: flex; gap: 4px; padding: 4px 14px 6px; }
.preset { flex: 1; padding: 6px 4px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); font: 500 12px/1 var(--font-caps); letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; }
.preset:hover { color: var(--text); border-color: var(--line-strong); }
.preset[aria-pressed="true"] { color: var(--ground); background: var(--brass); border-color: var(--brass); }
.menu-note { padding: 4px 14px 6px; font: 400 12px/1.35 var(--font-ui); color: var(--faint); }

/* ---------- decklist overlay (D) ----------
   Opaque, 85% of the screen: the deck as cards stacked by mana value, the
   sideboard, and the boarding since game 1. Cards that came in are marked +n,
   ones that went out -n. Filters darken what they don't keep. */
.deck-overlay {
  position: absolute; inset: 7.5%; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.dk-head { display: flex; align-items: center; gap: 22px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.dk-tabs { display: flex; gap: 18px; }
.dk-tabs button, .dk-filters button { background: none; border: 0; cursor: pointer; font: 700 14px/1 var(--font-caps); letter-spacing: 0.05em; text-transform: lowercase; color: var(--faint); padding: 6px 0; }
.dk-tabs button span { margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--faint); font-weight: 500; }
.dk-tabs button[aria-selected="true"] { color: var(--brass); box-shadow: inset 0 -2px 0 var(--brass); }
.dk-tabs button:hover, .dk-filters button:hover { color: var(--text); }
.dk-filters { display: flex; gap: 4px; margin-left: auto; }
.dk-filters button { padding: 6px 10px; border: 1px solid transparent; border-radius: 3px; font-weight: 500; font-size: 13px; }
.dk-filters button[aria-checked="true"] { color: var(--text); border-color: var(--line-strong); background: var(--panel-hover); }
.dk-close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 3px; background: none; color: var(--muted); cursor: pointer; }
.dk-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.dk-sub { margin: 10px 20px 0; font: 400 14px/1.3 var(--font-ui); color: var(--muted); }
.dk-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 20px 22px; }
.dk-empty { margin: 24px 0; color: var(--muted); font-style: italic; }
.dk-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 186px)); gap: 16px; justify-content: center; align-items: start; }
/* each column headed only by its card count, small and centred */
.dk-col h4 { margin: 0 0 6px; text-align: center; font: 500 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--faint); }
/* As in Arena's deck view: each column on its own dark panel, each card
   covering all but the top quarter of the one before (its name bar and a band
   of art). Margin percentages are of the column's width, which the card fills;
   the card is a size container so its numbers scale with it. */
.dk-stack { padding: 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.34); }
.dk-card { position: relative; container-type: inline-size; transition: filter .2s; }
.dk-stack .dk-card + .dk-card { margin-top: -103%; }
/* pointing at a card (to show someone which one) lights its border */
.dk-card img, .dk-card .dk-name { transition: box-shadow .15s; }
.dk-card:hover img, .dk-card:hover .dk-name { box-shadow: 0 0 0 2px rgba(255, 234, 190, 0.9), 0 0 14px 3px rgba(255, 212, 135, 0.45), 0 2px 8px rgba(0, 0, 0, 0.55); }
.dk-card.dim { filter: brightness(0.3); }
.dk-card img, .dk-card .dk-name { display: block; width: 100%; aspect-ratio: 488 / 680; border-radius: 4.75% / 3.4%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); }
.dk-card .dk-name { display: grid; place-items: start center; padding: 8px; font-size: 12px; background: #2a231b; color: var(--text); border: 1px solid var(--line); }
/* "x4" in the top right of the art, set in from the corner, under a deep,
   soft shadow */
.dk-count {
  position: absolute; top: 13%; right: 10.5%;
  font: 700 12.75cqw/1 var(--font-display); font-variant-numeric: lining-nums; letter-spacing: -0.01em;
  color: #fff; pointer-events: none;
  text-shadow:
    0 0 2px #000, 0 2px 3px #000, 0 0 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.75), 0 0 26px rgba(0, 0, 0, 0.65), 0 3px 34px rgba(0, 0, 0, 0.6), 0 0 44px rgba(0, 0, 0, 0.5);
}
.dk-count.in { color: #8ff0a8; }
.dk-count.out { color: #ff8f78; }
/* boarded in or out since game 1: a small tag at the top left of the art */
.dk-mark {
  position: absolute; top: 12.5%; left: 7%;
  padding: 1px 5px; border-radius: 3px;
  font: 700 8cqw/1.2 var(--font-ui); font-variant-numeric: tabular-nums; color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.dk-card.in .dk-mark { background: #2f7d48; }
.dk-card.out .dk-mark { background: #a3402e; }
/* boarding: what came in on one row, what went out on the row under it */
.dk-changes { display: grid; gap: 22px; }
.dk-side h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font: 700 17px/1 var(--font-display); }
.dk-side h3 span { font: 500 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--faint); }
.dk-row { display: flex; flex-wrap: wrap; gap: 16px; }
.dk-row .dk-card { width: 172px; }
.dk-note { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
  .deck-overlay { inset: 64px 12px 12px; }
  .dk-head { flex-wrap: wrap; gap: 10px 18px; }
  .dk-filters { margin-left: 0; order: 3; }
  .dk-row .dk-card { width: 110px; }
}