/* Farcast: a playmat, not a dashboard.
   Type: Gloock for display (wordmark, deck names, life totals), Hanken Grotesk for everything else.
   Felt green table, bone text, brass for you, lilac for your opponent.
   Life totals are the one loud thing. */

/* Fonts are bundled with the app (no requests to Google). Both are SIL Open Font License; see /fonts. */
/* Gloock has a single weight; declaring the full weight range stops browsers from faking a bold. */
@font-face { font-family: 'Gloock'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/gloock-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Gloock'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/gloock-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/fonts/hanken-grotesk-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-wght-italic.woff2') format('woff2-variations'), url('/fonts/hanken-grotesk-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext-wght-italic.woff2') format('woff2-variations'), url('/fonts/hanken-grotesk-latin-ext-wght-italic.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --felt: #17302c;
  --felt-hi: #1f3f39;
  --felt-deep: #0d1d1a;
  --panel: #102320;
  --line: rgba(236, 229, 211, 0.12);
  --line-strong: rgba(236, 229, 211, 0.24);
  --bone: #ece5d3;
  --bone-dim: rgba(236, 229, 211, 0.64);
  --brass: #d4a648;
  --brass-ink: #241a06;
  --lilac: #ab9ce8;
  --wound: #ee8a76;
  --heal: #93d6a3;

  --cw: clamp(50px, 4.9vw, 92px);
  --ch: calc(var(--cw) * 1.396);
  --card-r: calc(var(--cw) * 0.055);

  --ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Gloock', Georgia, 'Times New Roman', serif;

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }
html { background: var(--felt-deep); }

body {
  margin: 0;
  font: 500 16px/1.4 var(--ui);
  color: var(--bone);
  background:
    radial-gradient(120% 90% at 50% 45%, var(--felt-hi) 0%, var(--felt) 45%, var(--felt-deep) 100%) fixed;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 1.15rem; letter-spacing: 0.01em; }
h3 { font-size: 0.95rem; margin-top: 1rem; color: var(--bone-dim); }

a { color: var(--brass); }

.hint { color: var(--bone-dim); font-size: 0.9rem; margin: 0.35rem 0 0; }
.hint.error, .notice.error { color: var(--wound); }
.notice { padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid var(--line-strong); margin: 0.75rem 0; }
.notice.warn { border-color: rgba(212, 166, 72, 0.5); }
.center-note { color: var(--bone-dim); text-align: center; margin: auto; }

.row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }

/* ---------- buttons & inputs ---------- */

.btn {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: rgba(236, 229, 211, 0.06);
  padding: 0.5rem 0.95rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: rgba(236, 229, 211, 0.12); border-color: var(--bone-dim); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); }
.btn.primary:hover:not(:disabled) { background: #e2b65a; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(238, 138, 118, 0.6); color: var(--wound); background: transparent; }
.btn.small { padding: 0.32rem 0.7rem; font-size: 0.9rem; }
.btn.tiny { padding: 0.15rem 0.45rem; font-size: 0.78rem; border-radius: 4px; }

.icon-btn {
  border: 0; background: none; cursor: pointer; font-size: 1.6rem; line-height: 1;
  color: var(--bone-dim); padding: 0 0.3rem; border-radius: 4px;
}
.icon-btn:hover { color: var(--bone); }

input, textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}
textarea { resize: vertical; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85rem; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: rgba(236, 229, 211, 0.35); }

.field-label { display: grid; gap: 0.35rem; margin-top: 1rem; font-weight: 600; font-size: 0.95rem; }

.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; width: fit-content; }
.segmented button { border: 0; background: transparent; padding: 0.45rem 0.9rem; cursor: pointer; font-weight: 600; }
.segmented button + button { border-left: 1px solid var(--line-strong); }
.segmented button.on { background: var(--brass); color: var(--brass-ink); }

.panel {
  background: rgba(8, 20, 17, 0.55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.35rem 1.4rem;
}

/* ---------- home ---------- */

.home-inner { max-width: 880px; margin: 0 auto; padding: clamp(2rem, 8vh, 5rem) 1.25rem 3rem; }
.home-inner.narrow { max-width: 500px; }

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.2rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-decoration: none;
}
.wordmark.small { font-size: 1.6rem; display: inline-block; margin-bottom: 1rem; }
.lede { max-width: 34em; font-size: 1.15rem; color: var(--bone-dim); margin: 1rem 0 2.25rem; }

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.home-grid .panel { display: flex; flex-direction: column; }
.home-grid .panel > .btn { margin-top: auto; align-self: flex-start; }
.home-grid .panel > .field-label + .btn,
.home-grid .panel > .hint + .btn { margin-top: 1.25rem; }

.code-input {
  font-family: var(--display); font-size: 1.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; width: 9.5ch;
}

.history { margin-top: 2.5rem; }
.history-list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.history-list li {
  display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: 0.65rem 0; border-top: 1px solid var(--line);
}
.h-when { color: var(--bone-dim); font-size: 0.9rem; }
.h-who { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.h-player { display: grid; }
.h-player small { color: var(--bone-dim); font-size: 0.82rem; }
.h-player.won { color: var(--brass); }
.h-result { color: var(--bone-dim); font-size: 0.9rem; text-align: right; }

/* ---------- lobby ---------- */

.lobby { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.lobby-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.lobby-head .wordmark.small { margin: 0; }
.room-code { display: flex; align-items: center; gap: 0.75rem; }
.code-label { color: var(--bone-dim); }
.room-code .code { font-family: var(--display); font-size: 2rem; letter-spacing: 0.16em; font-weight: 700; }

.lobby-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .lobby-grid { grid-template-columns: 1fr; } }

.seat-list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.seat-row {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'dot name ready' 'dot deck deck';
  column-gap: 0.6rem; padding: 0.7rem 0; border-top: 1px solid var(--line); align-items: center;
}
.seat-row .dot { grid-area: dot; align-self: start; margin-top: 0.45rem; }
.seat-row.empty { grid-template-areas: 'dot name'; color: var(--bone-dim); }
.seat-name { grid-area: name; font-weight: 600; font-size: 1.05rem; }
.seat-row.mine .seat-name { color: var(--brass); }
.seat-row.theirs .seat-name { color: var(--lilac); }
.seat-name small { color: var(--bone-dim); font-weight: 500; }
.seat-deck { grid-area: deck; color: var(--bone-dim); font-size: 0.9rem; }
.seat-ready { grid-area: ready; font-size: 0.85rem; color: var(--bone-dim); }
.seat-ready.yes { color: var(--heal); }

.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(236, 229, 211, 0.25); display: inline-block; flex: none; }
.dot.online { background: var(--heal); box-shadow: 0 0 0 3px rgba(147, 214, 163, 0.18); }

.deck-title-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.deck-name { font-family: var(--display); font-size: 1.35rem; font-weight: 600; background: transparent; border-color: transparent; padding-left: 0; }
.deck-name:hover, .deck-name:focus { border-color: var(--line-strong); padding-left: 0.5rem; }
.deck-count { white-space: nowrap; color: var(--bone-dim); }

.deck-list { list-style: none; padding: 0; margin: 0.5rem 0 0; columns: 2 220px; column-gap: 1.5rem; font-size: 0.92rem; }
.deck-list li { display: flex; align-items: center; gap: 0.4rem; padding: 0.12rem 0; break-inside: avoid; }
.deck-list.cmd { columns: 1; font-size: 1rem; font-weight: 600; }
.deck-list .qty { color: var(--bone-dim); min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
.star { border: 0; background: none; cursor: pointer; color: var(--bone-dim); font-size: 1rem; padding: 0 0.15rem; width: 1.4em; }
.star:hover, .star.on { color: var(--brass); }
.star-spacer { width: 1.4em; display: inline-block; }
details { margin-top: 1rem; }
summary { cursor: pointer; color: var(--bone-dim); font-weight: 600; }

/* ---------- game board ---------- */

.game-page { height: 100dvh; overflow: hidden; }
.board { display: grid; grid-template-columns: 1fr clamp(240px, 21vw, 320px); height: 100%; }

.table { display: grid; grid-template-rows: 1fr auto 1fr; min-width: 0; min-height: 0; }

.seat { display: grid; min-height: 0; }
.seat.opp { grid-template-rows: auto 1fr; }
.seat.mine { grid-template-rows: 1fr auto auto; }

.seat-body { display: grid; grid-template-columns: auto 1fr; min-height: 0; }

.field {
  position: relative;
  min-height: 0;
  margin: 0.4rem 0.6rem;
  border-radius: 12px;
  border: 1px dashed transparent;
  transition: border-color 0.12s, background 0.12s;
}
.seat.mine .field { --seat: var(--brass); }
.seat.opp .field { --seat: var(--lilac); }
.field.empty-field::after {
  content: 'Drag cards here, or double-click a card in your hand';
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(236, 229, 211, 0.22); font-size: 0.95rem; pointer-events: none;
}
.seat.opp .field.empty-field::after { content: ''; }
.drop-hover { border-color: var(--brass) !important; background: rgba(212, 166, 72, 0.06); }

.midline {
  height: 1.6rem;
  display: flex; align-items: center; gap: 1rem;
  color: var(--bone-dim); font-size: 0.85rem;
  padding: 0 1rem;
}
.midline::before, .midline::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* seat bars */

.seat-bar {
  display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.6rem); flex-wrap: wrap;
  padding: 0.35rem 1rem;
  background: rgba(5, 14, 12, 0.45);
}
.seat.opp .seat-bar { border-bottom: 1px solid var(--line); }
.seat.mine .seat-bar { border-top: 1px solid var(--line); }

.who { display: flex; align-items: center; gap: 0.5rem; min-width: 8rem; }
.who-name { font-weight: 600; font-size: 1.1rem; }
.seat.mine .who-name { color: var(--brass); }
.seat.opp .who-name { color: var(--lilac); }
.turn-tag {
  font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.seat.mine .turn-tag { color: var(--brass); }
.seat.opp .turn-tag { color: var(--lilac); }
.turn-tag.muted { color: var(--bone-dim) !important; }

.life { display: flex; align-items: center; gap: 0.15rem; }
.life-total {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 2.2ch;
  text-align: center;
  letter-spacing: -0.02em;
}
.seat.mine .life-total { color: var(--brass); }
.seat.opp .life-total { color: var(--lilac); }
.life-delta {
  position: absolute; top: -0.2rem; right: -1.6rem;
  font-family: var(--ui); font-size: 1rem; font-weight: 600; letter-spacing: 0;
}
.life-delta.down { color: var(--wound); }
.life-delta.up { color: var(--heal); }
.life-btn {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--bone-dim);
}
.life-btn:hover { color: var(--bone); border-color: var(--bone-dim); background: rgba(236, 229, 211, 0.06); }

.trackers { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tracker {
  display: inline-flex; align-items: center; gap: 0.15rem;
  border: 1px solid var(--line); border-radius: 6px; padding: 0.1rem 0.25rem 0.1rem 0.5rem;
  font-size: 0.85rem; color: var(--bone-dim);
}
.tracker.has { color: var(--bone); border-color: var(--line-strong); }
.tracker.lethal { color: var(--wound); border-color: var(--wound); }
.tracker-label { margin-right: 0.25rem; }
.tracker.readonly { padding-right: 0.55rem; }
.tracker.readonly .tracker-value { margin-left: 0.15rem; }
.tracker button { border: 0; background: none; cursor: pointer; padding: 0 0.3rem; color: inherit; font-size: 1rem; }
.tracker button:hover { color: var(--bone); }
.tracker-value { min-width: 1.4ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.counts { margin-left: auto; display: flex; gap: 1rem; color: var(--bone-dim); font-size: 0.9rem; }
.hand-count { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--bone); }
.mini-back { width: 12px; height: 17px; border-radius: 2px; display: inline-block; }

/* piles */

.piles {
  display: grid; grid-template-columns: repeat(2, auto); grid-auto-rows: min-content;
  column-gap: 1.1rem; row-gap: 1.3rem;
  padding: 0.5rem 0.45rem 1.4rem 0.75rem; align-content: center;
}
.pile {
  position: relative;
  width: calc(var(--cw) * 0.7); height: calc(var(--ch) * 0.7);
  border-radius: var(--card-r);
  border: 1px dashed var(--line-strong);
  background: rgba(0, 0, 0, 0.18);
  padding: 0; cursor: pointer; overflow: visible;
}
.pile > img, .pile > .card-back, .pile > .text-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--card-r); }
.pile.empty { cursor: default; }
.pile-label {
  position: absolute; left: 0; right: 0; bottom: -0.1rem; transform: translateY(100%);
  font-size: 0.62rem; color: var(--bone-dim); display: flex; justify-content: space-between; gap: 0.15rem; letter-spacing: -0.01em;
  white-space: nowrap;
}
.pile-label b { color: var(--bone); font-weight: 600; }

/* cards */

.card, .card-probe {
  width: var(--cw); height: var(--ch);
}
.card-probe { position: fixed; left: -9999px; top: 0; visibility: hidden; }

.card {
  position: absolute;
  border-radius: var(--card-r);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 6px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
  touch-action: none;
  user-select: none;
}
.card.own { cursor: grab; }
.card > img, .card > .card-back, .card > .text-face {
  display: block; width: 100%; height: 100%; border-radius: var(--card-r); object-fit: cover;
}
.card.tapped { transform: rotate(90deg); }
.card.drag-source { opacity: 0.25; }
.drag-ghost {
  position: fixed !important; z-index: 1000; pointer-events: none; cursor: grabbing;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.card-back {
  display: block;
  background:
    radial-gradient(ellipse 34% 26% at 50% 50%, #c49a46 0 30%, transparent 32%),
    radial-gradient(ellipse 44% 34% at 50% 50%, transparent 0 60%, rgba(196, 154, 70, 0.55) 62%, transparent 66%),
    repeating-linear-gradient(45deg, #1d3d36 0 5px, #173129 5px 10px);
  border: 2px solid #8a6a2c;
}
.card-back.big { width: 100%; aspect-ratio: 488 / 680; border-radius: 4.5%; }

.text-face {
  display: grid !important; grid-template-rows: auto 1fr auto; padding: 8% 9%;
  background: linear-gradient(160deg, #e9e2cd, #cfc6ad);
  color: #1d211c; border: 2px solid #3a3a33; overflow: hidden;
}
.tf-name { font-weight: 600; font-size: calc(var(--cw) * 0.13); line-height: 1.1; }
.tf-type { font-size: calc(var(--cw) * 0.09); color: #4a4b42; align-self: start; margin-top: 0.2em; }
.tf-pt { justify-self: end; font-weight: 700; font-size: calc(var(--cw) * 0.15); }

.peek-tag, .token-tag {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 0.62rem; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 999px; white-space: nowrap;
  pointer-events: none;
}
.peek-tag { top: 40%; background: rgba(0, 0, 0, 0.7); color: var(--bone); }
.token-tag { top: -0.55rem; background: var(--felt-deep); border: 1px solid var(--line-strong); color: var(--bone-dim); }

.counters {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.counter {
  border: 0; border-radius: 999px; padding: 0.08rem 0.45rem; font-size: 0.72rem; font-weight: 700;
  background: rgba(10, 10, 10, 0.85); color: var(--bone); cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(236, 229, 211, 0.35);
}
.counter:disabled { cursor: default; opacity: 1; }
.counter.plus { background: #1f4a2b; box-shadow: 0 0 0 1px var(--heal); }
.counter.minus { background: #4f2019; box-shadow: 0 0 0 1px var(--wound); }
.card.tapped .counters { transform: translateX(-50%) rotate(-90deg); }

/* hand */

.hand {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  height: calc(var(--ch) + 1.4rem);
  padding: 0.6rem 1rem 0.4rem;
  border-top: 1px dashed transparent;
}
.hand .card {
  position: relative;
  flex: none;
  margin-left: calc(var(--cw) * -0.18 * min(1, max(0, (var(--n) - 7) / 5)));
  transition: transform 0.12s ease, margin 0.12s ease;
}
.hand .card:first-child { margin-left: 0; }
.hand .card:hover, .hand .card:focus-visible { transform: translateY(-16%); z-index: 5; }
.hand-empty { color: rgba(236, 229, 211, 0.3); margin: auto; font-size: 0.9rem; }

/* sidebar */

.side {
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden;
  border-left: 1px solid var(--line);
  background: rgba(5, 14, 12, 0.55);
}
.preview { padding: 0.9rem 0.9rem 0.5rem; min-height: 3rem; }
.preview-card { width: 100%; max-width: min(240px, 30vh * 0.718); margin: 0 auto; }
.preview-card img { display: block; width: 100%; border-radius: 4.5%; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
.preview-card .text-face { --cw: 240px; aspect-ratio: 488 / 680; border-radius: 4.5%; }
.preview-meta { margin: 0.5rem 0 0; font-size: 0.9rem; text-align: center; }

.controls { padding: 0.4rem 0.9rem 0.8rem; border-bottom: 1px solid var(--line); }
.controls .row { margin-top: 0.5rem; }

.log {
  list-style: none; margin: 0; padding: 0.6rem 0.9rem; overflow-y: auto; min-height: 0;
  font-size: 0.86rem; line-height: 1.35;
}
.log li { padding: 0.18rem 0; color: var(--bone-dim); }
.log b.me { color: var(--brass); font-weight: 600; }
.log b.them { color: var(--lilac); font-weight: 600; }
.log .log-system { color: var(--bone); font-style: italic; }
.log .log-chat { color: var(--bone); }
.chat { padding: 0.6rem 0.9rem 0.9rem; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .side { grid-template-rows: auto; grid-template-columns: 1fr; max-height: 34vh; border-left: 0; border-top: 1px solid var(--line); }
  .preview { display: none; }
  .log { max-height: 16vh; }
}

/* ---------- menus, dialogs, toasts ---------- */

.menu {
  position: fixed; z-index: 2000; min-width: 220px;
  background: #0f201c; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0.3rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.menu button {
  display: flex; justify-content: space-between; gap: 1rem; width: 100%;
  border: 0; background: none; text-align: left; padding: 0.42rem 0.65rem; border-radius: 5px; cursor: pointer;
}
.menu button:hover, .menu button:focus-visible { background: rgba(236, 229, 211, 0.09); outline: none; }
.menu button.danger { color: var(--wound); }
.menu kbd { font: inherit; font-size: 0.8rem; color: var(--bone-dim); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 0.25rem 0; }

.scrim {
  position: fixed; inset: 0; z-index: 1500; background: rgba(4, 11, 9, 0.72);
  display: grid; place-items: center; padding: 1rem;
}
.dialog {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 1.1rem 1.25rem 1.3rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.dialog:has(.card-grid) { width: min(980px, 100%); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.dialog-head h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 600; }
.dialog hr { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0 0.25rem; }
.filter-input { margin: 0.5rem 0 0.25rem; }

.card-grid {
  list-style: none; padding: 0; margin: 0.75rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.9rem;
}
.grid-face img, .grid-face .card-back, .grid-face .text-face {
  display: block; width: 100%; aspect-ratio: 488 / 680; border-radius: 4.5%;
}
.grid-face .text-face { --cw: 140px; }
.grid-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }

#toast-root { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 3000; display: grid; gap: 0.5rem; }
.toast {
  background: #0f201c; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0.6rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: 90vw;
}
.toast.error { border-color: var(--wound); }
.toast.warn { border-color: var(--brass); }

.conn {
  position: fixed; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 2500;
  background: var(--brass); color: var(--brass-ink); font-weight: 600;
  padding: 0.35rem 0.9rem; border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- playmat ---------- */

.field { isolation: isolate; }
.field::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(13, 29, 26, 0.35) 0%, rgba(13, 29, 26, 0.78) 100%),
    var(--mat-tint, none),
    var(--mat-art, none) center 28% / cover no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.field.has-mat::before { opacity: 1; }
/* Scryfall art crops are ~626px wide; soften them so they read as a backdrop, not a blurry photo. */
.field.has-mat::before { filter: blur(1.5px) saturate(1.05); }
.seat.mine .field::before { box-shadow: inset 0 0 0 1px rgba(212, 166, 72, 0.18); }
.seat.opp .field::before { box-shadow: inset 0 0 0 1px rgba(171, 156, 232, 0.18); }

/* ---------- turn helper, checkboxes, printings ---------- */

.midline-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--brass); background: var(--brass); color: var(--brass-ink);
  font-weight: 600; padding: 0.25rem 0.9rem; border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(212, 166, 72, 0.18);
}
.midline-cta:hover { background: #e2b65a; }
.midline-cta kbd { font: inherit; font-size: 0.75rem; border: 1px solid rgba(36, 26, 6, 0.4); border-radius: 4px; padding: 0 0.3rem; }
.midline { height: 2.1rem; }

.check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.88rem; color: var(--bone-dim); cursor: pointer; }
.check input { width: auto; margin: 0.2rem 0 0; accent-color: var(--brass); }
.check.disabled { opacity: 0.55; cursor: default; }
.dialog .check { font-size: 1rem; color: var(--bone); margin: 1rem 0 0.5rem; }

.printing { margin-left: auto; padding-left: 0.5rem; font-size: 0.75rem; color: var(--bone-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- accounts, decks, records ---------- */

.top-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.top-bar .wordmark.small { margin: 0; }
.top-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.top-nav a { color: var(--bone); text-decoration: none; font-weight: 600; }
.top-nav a:hover { color: var(--brass); }
.who-am-i { color: var(--bone-dim); padding-left: 1.1rem; border-left: 1px solid var(--line-strong); }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.page-title { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; letter-spacing: -0.01em; }

.deck-cards { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.deck-card { display: grid; grid-template-columns: 1fr auto auto; gap: 1.25rem; align-items: center; padding: 1rem 1.25rem; }
.deck-card h2 { font-family: var(--display); font-size: 1.35rem; }
.deck-card .hint { margin-top: 0.2rem; }
.deck-card-actions { display: flex; gap: 0.4rem; }
.deck-record { display: grid; justify-items: center; min-width: 4.5rem; }
.rec-num { font-family: var(--display); font-weight: 700; font-size: 1.6rem; font-variant-numeric: tabular-nums lining-nums; color: var(--brass); line-height: 1.1; }
.rec-label { font-size: 0.78rem; color: var(--bone-dim); }
@media (max-width: 620px) { .deck-card { grid-template-columns: 1fr auto; } .deck-card-actions { grid-column: 1 / -1; } }

.editor-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr); gap: 1rem; margin-top: 1.25rem; align-items: start; }
@media (max-width: 820px) { .editor-grid { grid-template-columns: 1fr; } }
.deck-name-input { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.deck-summary h3:first-child { margin-top: 0; }

.deck-choices { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.5rem; }
.deck-choice {
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name rec' 'meta rec';
  column-gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 8px;
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--line);
}
.deck-choice:hover { border-color: var(--bone-dim); }
.deck-choice.on { border-color: var(--brass); background: rgba(212, 166, 72, 0.1); box-shadow: inset 3px 0 0 var(--brass); }
.dc-name { grid-area: name; font-weight: 600; font-size: 1.05rem; }
.dc-meta { grid-area: meta; color: var(--bone-dim); font-size: 0.88rem; }
.dc-rec { grid-area: rec; align-self: center; font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--brass); font-variant-numeric: tabular-nums; }
.dc-rec small { font-family: var(--ui); font-size: 0.75rem; font-weight: 500; color: var(--bone-dim); }

.records { display: grid; gap: 0.35rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
#lobby-records .records { border: 1px solid var(--line); border-radius: 8px; margin-top: 1rem; }
.dialog .records { border: 1px solid var(--line); border-radius: 8px; margin: 0.75rem 0; }
.rec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.records .rec-label { font-size: 0.85rem; }
.records .rec-num { font-size: 1.15rem; }

.life.readonly .life-total { margin: 0 0.5rem; }

.deck-panel .deck-title-row:first-child { margin-top: 0; }
.rec-num { white-space: nowrap; }
.records .rec-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- sign-in options ---------- */

.home-inner.narrow .panel + .panel { margin-top: 0.85rem; }
.google-panel { display: grid; gap: 0.5rem; }
.btn.google {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  background: var(--bone); color: #1d211c; border-color: var(--bone); font-size: 1.02rem; padding: 0.65rem 1rem;
}
.btn.google:hover:not(:disabled) { background: #fff; color: #1d211c; }
.g-mark {
  display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: #fff; color: #4a76d6; font-weight: 700; font-family: Arial, sans-serif; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
button.who-am-i { background: none; border: 0; border-left: 1px solid var(--line-strong); cursor: pointer; font: inherit; }
button.who-am-i:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- lobby head-to-head ---------- */

#lobby-h2h:not(:empty) { margin-bottom: 1rem; }
.h2h { padding: 1.4rem 1.5rem 1.2rem; }
.h2h-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.h2h-side { display: grid; gap: 0.1rem; min-width: 0; }
.h2h-side.theirs { text-align: right; }
.h2h-player { font-weight: 600; font-size: 0.95rem; }
.h2h-side.mine .h2h-player { color: var(--brass); }
.h2h-side.theirs .h2h-player { color: var(--lilac); }
.h2h-deck { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.1; overflow-wrap: anywhere; }
.h2h-cmd { color: var(--bone-dim); font-size: 0.9rem; }
.h2h-vs { font-family: var(--display); font-size: 1.3rem; color: var(--bone-dim); }
.h2h-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.2rem; }
.h2h-stat { display: grid; gap: 0.3rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.16); }
.h2h-label { font-size: 0.88rem; color: var(--bone-dim); }
.h2h-score { display: flex; align-items: baseline; gap: 0.2rem; font-family: var(--display); font-variant-numeric: tabular-nums lining-nums; }
.h2h-score b { font-weight: 700; font-size: 2.3rem; line-height: 1; }
.h2h-score .w { color: var(--brass); }
.h2h-score .l { color: var(--lilac); }
.h2h-score .dash { font-size: 1.6rem; color: var(--bone-dim); margin: 0 0.1rem; }
.h2h-score small { font-family: var(--ui); font-size: 0.85rem; color: var(--bone-dim); margin-left: 0.6rem; }
.h2h-wait { color: var(--bone-dim); font-size: 0.95rem; align-self: center; padding: 0.55rem 0; }
@media (max-width: 640px) {
  .h2h-top { grid-template-columns: 1fr; }
  .h2h-side.theirs { text-align: left; }
  .h2h-stats { grid-template-columns: 1fr; }
}

.home-inner.narrow > .wordmark { margin-bottom: 1.25rem; display: block; }
.home-inner.narrow > .lede { margin-top: -0.25rem; }

.commander-box { min-height: 3.6rem; }

/* ---------- deck editor: automatic checking ---------- */
.editor-side { position: sticky; top: 1rem; display: grid; gap: 0.5rem; }
.editor-side h2 { font-family: var(--display); font-size: 1.4rem; margin-bottom: 0.4rem; }
.steps { margin: 0.6rem 0 0; padding-left: 1.3rem; color: var(--bone-dim); display: grid; gap: 0.45rem; }
.steps b { color: var(--bone); }
.checking { display: flex; align-items: center; gap: 0.55rem; color: var(--bone-dim); margin: 0.2rem 0 0.6rem; }
.spinner { width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--brass); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.deck-body.dim { opacity: 0.5; }
.deck-total { margin: 0; font-weight: 600; }
.save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; margin-top: 0.4rem; }
.save-bar .hint { margin: 0; flex: 1; }
.editor-side .deck-list { max-height: 50vh; overflow-y: auto; }
@media (max-width: 820px) { .editor-side { position: static; } }

.h2h-scope { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); opacity: 0.85; }
.h2h-label { overflow-wrap: anywhere; }
.h2h-stat:first-child { background: rgba(212, 166, 72, 0.07); border-color: rgba(212, 166, 72, 0.3); }
@media (max-width: 900px) { .h2h-stats { grid-template-columns: 1fr; } }

/* ---------- library controls ---------- */
.control-group { margin-top: 0.8rem; }
.control-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); }
.control-group .row { margin-top: 0.35rem; }
.pile-wrap { position: relative; }
.pile-more {
  position: absolute; top: -0.45rem; right: -0.45rem; z-index: 2;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; padding: 0; line-height: 1;
  border: 1px solid var(--brass); background: var(--felt-deep); color: var(--brass); cursor: pointer; font-weight: 700;
}
.pile-more:hover { background: var(--brass); color: var(--brass-ink); }
select {
  width: 100%; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 0.55rem 0.7rem; color: inherit; font: inherit;
}
select option { background: var(--panel); }

/* ---------- reporting results ---------- */
.midline-result {
  display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
  padding: 0.25rem 0.5rem 0.25rem 0.9rem; border-radius: 999px;
  background: rgba(8, 20, 17, 0.92); border: 1px solid var(--lilac); color: var(--bone); font-size: 0.9rem;
}
.btn.tiny.primary { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); }
.report-options { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.report-option {
  display: grid; gap: 0.15rem; text-align: left; cursor: pointer; padding: 0.75rem 0.9rem;
  border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.18);
}
.report-option:hover, .report-option:focus-visible { border-color: var(--brass); background: rgba(212, 166, 72, 0.08); }
.report-option b { font-size: 1.05rem; }
.report-option span { color: var(--bone-dim); font-size: 0.88rem; }
.report .row .hint { margin: 0; }
.confirm-claim { font-size: 1.15rem; }
.confirm-claim b { color: var(--bone); }
.confirm-claim b.me { color: var(--brass); }
.confirm-claim b.them { color: var(--lilac); }

/* Gloock's dash is a hairline; draw record dashes in the UI font so "3–1" reads clearly. */
.rd { font-family: var(--ui); font-weight: 500; color: var(--bone-dim); margin: 0 0.12em; }
.h2h-score .dash { font-family: var(--ui); font-weight: 500; }

/* ---------- wordmark: FAR in bone, CAST in brass ---------- */
.wordmark { text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; font-size: clamp(3rem, 11vw, 5.4rem); line-height: 1; }
.wordmark.small { font-size: 2rem; letter-spacing: 0.1em; }
.wordmark .wm-far { color: var(--bone); }
.wordmark .wm-cast { color: var(--brass); }
a.wordmark:hover .wm-far { color: #fff; }

/* ---------- unranked ---------- */
.pill {
  display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid var(--lilac); color: var(--lilac); vertical-align: middle;
}
.midline-text .pill { margin-left: 0.6rem; }
.h-result .pill { margin-right: 0.5rem; }
.unranked-note { margin: 0.9rem 0 0; color: var(--bone-dim); }
#seats .field-label { margin-top: 0.9rem; }