/* Rock Paper Scissor: Battle Royale
   A risograph tournament broadsheet. Three spot inks, warm newsprint, hard
   ink shadows, no blur anywhere. */

@font-face { font-family: "Anton"; src: url("../fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 100%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plexmono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plexmono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@property --sweep { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --paper: #EFE7D8;
  --ink-black: #14110F;
  --ink-rock: #FF3B8D;
  --ink-paper: #0B5CD5;
  --ink-scissor: #00A95C;
  --mis: 3px;
  --grain: 0.5;
  --head: 1;
  --rule: 1.5px;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --poster: "Anton", "Arial Narrow", Impact, sans-serif;
  --pad: 14px;
}

* { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink-black);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* The screen door and the fibre of the paper, pressed over everything. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--ink-black) 0.7px, transparent 0.8px);
  background-size: 3px 3px;
  opacity: calc(0.055 * var(--grain));
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.14;
  mix-blend-mode: multiply;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* An overlay that is hidden must not eat a tap on the page underneath it. */
.sheet[hidden], .mat[hidden], .board[hidden], .toast[hidden] { display: none !important; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.dim { opacity: 0.62; }
b, strong { font-weight: 800; }

.screen { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 var(--pad) 40px; }

/* ------------------------------------------------------------------ masthead */

.masthead { padding: 10px 0 0; }

.namestrip {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between;
  border-bottom: var(--rule) solid var(--ink-black);
  border-top: 5px solid var(--ink-black);
  padding: 6px 0 5px;
}
.namestrip .cell { display: flex; align-items: baseline; gap: 7px; }
.namestrip em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; opacity: 0.62; }
.namestrip .cell > span:first-child { font-family: var(--mono); font-size: 13px; font-weight: 600; }
#balance { display: flex; align-items: baseline; gap: 6px; }
#balance .mono { font-family: var(--mono); font-size: 20px; font-weight: 700; }

.title-block { position: relative; padding: 12px 0 8px; }
h1.masthead-title {
  font-family: var(--poster);
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(clamp(30px, 13.5vw, 96px) * var(--head));
  line-height: 0.85;
  letter-spacing: -0.012em;
  margin: 0;
  white-space: nowrap;
  text-shadow: calc(-1 * var(--mis)) var(--mis) 0 var(--ink-rock);
}
h1.masthead-title > span { display: block; white-space: nowrap; }
h1.masthead-title .line2 { text-shadow: calc(-1 * var(--mis)) var(--mis) 0 var(--ink-paper); }
h1.masthead-title .line3 { text-shadow: calc(-1 * var(--mis)) var(--mis) 0 var(--ink-scissor); }
/* Wide: the first two words join up into one long printed line, the way a
   broadsheet masthead sets, and the whole thing gets the room it deserves. */
@media (min-width: 760px) {
  h1.masthead-title .line1, h1.masthead-title .line2 { display: inline; }
  h1.masthead-title .line1::after { content: " "; }
  h1.masthead-title .line3 { display: block; }
}
.strapline {
  margin: 8px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.75;
}
.mast-rule { height: 4px; background: var(--ink-black); margin-top: 8px; position: relative; }
.mast-rule::after { content: ""; position: absolute; left: 0; right: 30%; top: 4px; height: 2px; background: var(--ink-scissor); }
.mast-rule::before { content: ""; position: absolute; left: 42%; right: 0; top: 4px; height: 2px; background: var(--ink-rock); }

.ticker {
  display: flex; gap: 0; overflow-x: auto; margin-top: 6px;
  border-bottom: var(--rule) solid var(--ink-black);
  scrollbar-width: none;
}
.ticker::-webkit-scrollbar { display: none; }
/* The strip runs on past the edge, so fade it rather than cut it. Only when it
   really does run on: a strip that fits keeps its last word whole. */
.ticker.runs-on { mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
/* Where there is room, print the whole strapline band rather than run it off
   the page: no headline is worth hiding behind a swipe nobody knows about. */
@media (min-width: 900px) {
  .ticker { flex-wrap: wrap; overflow-x: visible; }
  .ticker.runs-on { mask-image: none; }
  .ticker p { padding: 5px 14px; }
  .ticker p:last-child { border-right: none; }
}
.ticker p {
  margin: 0; padding: 5px 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em;
  text-transform: uppercase; white-space: nowrap; border-right: 1px solid rgba(20,17,15,0.35);
}
.ticker p:first-child { padding-left: 0; }

/* ------------------------------------------------------------------ tabs */

/* Every section has to be reachable without a sideways scrub. Seven of these
   never fit one phone row, and a strip that scrolls hides the last of them
   entirely, so on a narrow screen it wraps into two rows instead. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 0; position: sticky; top: 0; z-index: 6;
  background: var(--paper); border-bottom: 3px solid var(--ink-black);
  padding-top: 4px;
}
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--poster); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-black); padding: 8px 10px 6px; white-space: nowrap;
  border-right: 1px solid rgba(20,17,15,0.3); border-bottom: 1px solid rgba(20,17,15,0.3);
}
@media (min-width: 760px) {
  .tabs { flex-wrap: nowrap; }
  .tab { font-size: 15px; padding: 9px 13px 7px; border-bottom: none; }
}
.tab:hover { background: rgba(20,17,15,0.08); }
.tab.on { background: var(--ink-black); color: var(--paper); }

/* ------------------------------------------------------------------ sections */

.section { padding: 16px 0 30px; animation: none; }

.rubric { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.rubric h2 {
  font-family: var(--poster); font-weight: 400; text-transform: uppercase;
  font-size: clamp(28px, 8vw, 46px); line-height: 1; margin: 0; letter-spacing: -0.01em;
  text-shadow: calc(-1 * var(--mis)) var(--mis) 0 var(--ink-paper);
}
.rubric-rule { flex: 1; height: 3px; background: var(--ink-black); }
.rubric-note { font-size: 10px; letter-spacing: 0.1em; opacity: 0.7; text-align: right; }

.subhead {
  font-family: var(--poster); text-transform: uppercase; font-size: 18px; letter-spacing: 0.02em;
  margin: 26px 0 8px; padding-bottom: 4px; border-bottom: var(--rule) solid var(--ink-black);
}

.body { margin: 0 0 10px; font-size: 15px; max-width: 68ch; }
.body.small { font-size: 13.5px; }
.lead { font-size: 16.5px; }
.warn { font-family: var(--mono); font-size: 12px; background: var(--ink-black); color: var(--paper); padding: 7px 10px; display: inline-block; }

.blank-sheet {
  border: 2px dashed rgba(20,17,15,0.4); padding: 22px; text-align: center; margin: 10px 0;
}
.blank-sheet .mono { font-size: 12px; letter-spacing: 0.08em; opacity: 0.7; }

.explain, .advice { border-top: var(--rule) solid var(--ink-black); margin-top: 26px; padding-top: 4px; }

/* ------------------------------------------------------------------ buttons */

.btn {
  appearance: none; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; font-family: var(--poster); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 17px; line-height: 1;
  background: var(--ink-black); color: var(--paper);
  border: 2px solid var(--ink-black); padding: 11px 18px;
  box-shadow: 4px 4px 0 var(--ink-rock);
  transition: none;
}
.btn:hover:not(:disabled) { background: var(--ink-rock); box-shadow: 4px 4px 0 var(--ink-black); }
.btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink-black); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: 4px 4px 0 rgba(20,17,15,0.3); }
.btn-small { font-size: 13px; padding: 7px 10px; box-shadow: 3px 3px 0 var(--ink-paper); }
.btn.wide { width: 100%; margin-top: 16px; }

.chip {
  appearance: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 6px 10px; border: var(--rule) solid var(--ink-black);
  background: transparent; color: var(--ink-black);
}
.chip.on { background: var(--ink-black); color: var(--paper); }
.chip.s-rock.on { background: var(--ink-rock); color: var(--ink-black); }
.chip.s-paper.on { background: var(--ink-paper); color: var(--paper); }
.chip.s-scissor.on { background: var(--ink-scissor); color: var(--ink-black); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fgroup { display: flex; flex-wrap: wrap; border: 0; padding: 0; gap: 4px; }

/* ------------------------------------------------------------------ seals & marks */

.seal {
  position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 2px solid currentColor; border-radius: 50%; flex: 0 0 auto;
}
.seal .hand { width: 22px; height: 21px; display: block; }
.seal-label { display: none; }
.seal-sm { width: 26px; height: 26px; border-width: 1.5px; }
.seal-sm .hand { width: 16px; height: 15px; }
.seal-lg { width: 76px; height: 76px; border-width: 3px; }
.seal-lg .hand { width: 50px; height: 47px; }
.seal-rock { color: var(--ink-rock); }
.seal-paper { color: var(--ink-paper); }
.seal-scissor { color: var(--ink-scissor); }

.bot-seal {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; border: 1px solid currentColor;
  padding: 0 3px; opacity: 0.85;
}
.ink-dot { display: inline-block; width: 8px; height: 8px; background: var(--ink-black); vertical-align: middle; }
.ellip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* ------------------------------------------------------------------ the card */

/* The card is a column that GROWS: the picture takes what is left and every
   word of the name and the effect is laid out in full. Nothing on a card is
   clipped, so a long legendary name wraps rather than trailing off, and a card
   in a grid row stretches to the height of the longest in that row. */
.card {
  position: relative; display: flex; flex-direction: column; background: var(--paper);
  border: 2px solid var(--ink-black);
  box-shadow: 5px 5px 0 var(--ink-black);
  overflow: hidden;
}
.card-face { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* The tribe band: the sign is answered by SHAPE before the picture is read, so
   a rock card and a scissor card are not the same card in two inks. */
.tribe-band {
  position: relative; flex: 0 0 auto; height: 19px; overflow: hidden;
  border-bottom: 2px solid var(--ink-black);
  background: var(--sign-ink, var(--ink-black));
  display: flex; align-items: center; padding: 0 6px;
}
.tribe-band.s-rock { --sign-ink: var(--ink-rock); }
.tribe-band.s-paper { --sign-ink: var(--ink-paper); }
.tribe-band.s-scissor { --sign-ink: var(--ink-scissor); }
.tribe-pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.tribe-name {
  position: relative; z-index: 1; font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--ink-black); background: var(--paper); padding: 1px 5px 0;
  border: 1.5px solid var(--ink-black);
}
.tribe-band.s-paper .tribe-name { color: var(--ink-black); }

.card-name {
  font-family: var(--sans); font-weight: 800; font-size: 12px; line-height: 1.15; margin: 0;
  letter-spacing: -0.005em;
}
/* The picture is a 12:10 window. The spacer gives it a DEFINITE height off the
   card's own width, so it lays out the same in a grid row and standing alone,
   and it still grows into any height a taller neighbour leaves behind. */
.card-art { position: relative; flex: 1 1 auto; overflow: hidden; }
.card-art::before { content: ""; display: block; padding-top: 83.3333%; }
.card-art > svg, .card-art > .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art { display: block; width: 100%; height: 100%; }

/* The stat corner, top left, laid over the picture the way a printed card puts
   its numbers where the eye lands first. */
.stat-corner { position: absolute; top: 0; left: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.sc-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--ink-black); color: var(--paper);
  font-size: 11px; font-weight: 700; line-height: 1.35; padding: 1px 6px 2px;
  border-bottom: 1.5px solid var(--ink-black);
}
.sc-chip i { font-style: normal; font-size: 8px; letter-spacing: 0.1em; opacity: 0.7; }
.sc-chip.pwr { background: var(--sign-ink, var(--ink-black)); color: var(--ink-black); }
.card.s-rock { --sign-ink: var(--ink-rock); }
.card.s-paper { --sign-ink: var(--ink-paper); }
.card.s-scissor { --sign-ink: var(--ink-scissor); }
.card.s-paper .sc-chip.pwr { color: var(--paper); }
.card.fullart .stat-corner { top: 6px; left: 6px; }
.card.fullart .sc-chip { border-bottom: none; }

.card-info { flex: 0 0 auto; border-top: 2px solid var(--ink-black); padding: 5px 6px 4px; background: var(--paper); }
.stat-effect { margin: 3px 0 0; font-size: 9px; line-height: 1.3; font-weight: 600; opacity: 0.88; }

.card-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px; margin-top: 5px;
  border-top: 1.5px solid var(--ink-black); padding: 3px 0 0; background: var(--paper);
}
.rbar { display: flex; gap: 2px; }
.rbar i { display: block; width: 6px; height: 9px; border: 1px solid var(--ink-black); }
.rbar i.on { background: var(--ink-black); }
.rar-lbl { font-size: 7.5px; letter-spacing: 0.08em; opacity: 0.7; }
.foil-lbl { font-size: 7.5px; letter-spacing: 0.06em; margin-left: auto; color: var(--ink-paper); font-weight: 700; }
.card-index { position: absolute; top: 4px; left: 4px; font-family: var(--mono); font-size: 8px;
  background: var(--ink-black); color: var(--paper); padding: 1px 3px; z-index: 4; }

/* rarity: how many inks are laid down, and how badly they miss */
.card.r-common { box-shadow: 4px 4px 0 rgba(20,17,15,0.35); }
.card.r-uncommon { box-shadow: 5px 5px 0 var(--ink-paper); }
.card.r-rare { box-shadow: 5px 5px 0 var(--ink-rock); outline: 1px solid var(--ink-black); outline-offset: calc(-1 * var(--mis)); }
.card.r-rare .card-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 2px solid var(--ink-paper); transform: translate(calc(var(--mis) - 1px), calc(var(--mis) - 2px)); mix-blend-mode: multiply;
}
.card.r-legendary { border-color: var(--paper); box-shadow: 5px 5px 0 var(--ink-black); }
.card.r-legendary .card-face { box-shadow: inset 0 0 0 2px var(--ink-black); }

.card.s-rock .card-name { color: var(--ink-black); }
.card.s-paper .card-name { color: var(--ink-black); }

/* foil: a lazy holographic sweep, behind the linework */
.foil-sweep, .sparkle { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.card.foil-foil .foil-sweep, .card.foil-fullart .foil-sweep {
  opacity: 0.55;
  background:
    conic-gradient(from var(--sweep) at 50% 50%,
      rgba(255,59,141,0.85), rgba(255,196,0,0.7), rgba(0,169,92,0.8),
      rgba(11,92,213,0.85), rgba(255,59,141,0.85));
  mix-blend-mode: color-dodge;
  animation: sweep 7s linear infinite;
}
.card.foil-foil .sparkle, .card.foil-fullart .sparkle {
  opacity: 0.4;
  background-image: repeating-linear-gradient(115deg,
    rgba(255,255,255,0) 0 3px, rgba(255,255,255,0.75) 3px 4px);
  mix-blend-mode: overlay;
}
.card.foil-fullart .foil-sweep { opacity: 0.7; animation-duration: 5s; }
.no-foil .foil-sweep, .no-foil .sparkle { animation: none; }
@keyframes sweep { to { --sweep: 360deg; } }

/* unique full-art foil: no frame, art edge to edge, one thin die-cut edge */
.card.fullart { border-color: var(--ink-black); border-width: 1.5px; box-shadow: 6px 6px 0 var(--ink-black); aspect-ratio: 12 / 17.6; }
.card.fullart .card-face.full { position: absolute; inset: 0; }
.card-art.full { position: absolute; inset: 0; aspect-ratio: auto; }
.full-plate {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 8px 8px;
  background: linear-gradient(to top, rgba(20,17,15,0.95), rgba(20,17,15,0.7) 62%, rgba(20,17,15,0));
  color: var(--paper);
}
.full-plate .card-name { color: var(--paper); font-size: 13px; }
.full-plate .stat-effect { color: var(--paper); font-size: 9px; opacity: 0.9; }
.full-foot { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.full-foot .rbar i { border-color: var(--paper); }
.full-foot .rbar i.on { background: var(--paper); }
.full-foot .rar-lbl { color: var(--paper); opacity: 0.85; }
.card.back { box-shadow: 5px 5px 0 rgba(20,17,15,0.4); }

.pick { appearance: none; border: none; background: none; padding: 0; cursor: pointer; display: block; width: 100%; }
.pick .card { width: 100%; }

/* ------------------------------------------------------------------ grids */

/* Two big cards across a phone rather than three cramped ones: a card is a
   picture and a sentence, and both have to be readable at the narrow end. */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 16px; } }
.deck-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 460px) { .deck-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .deck-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .deck-grid { grid-template-columns: repeat(5, 1fr); } }
.slot-wrap { position: relative; }
.slot-no { position: absolute; top: -3px; left: -3px; z-index: 5; background: var(--paper);
  border: 1.5px solid var(--ink-black); font-size: 9px; padding: 0 3px; }
.slot-empty {
  appearance: none; cursor: pointer; width: 100%; aspect-ratio: 12 / 17.6;
  border: 2px dashed var(--ink-black); background:
    repeating-linear-gradient(90deg, rgba(20,17,15,0.09) 0 6px, transparent 6px 12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0.7;
}
.slot-empty .mono { font-size: 11px; letter-spacing: 0.12em; }
.slot-empty .mono.dim { font-size: 22px; }
.slot-empty:hover { opacity: 1; background-color: rgba(20,17,15,0.06); }

/* ------------------------------------------------------------------ tournament */

.departure {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: flex-end;
  border-top: 3px solid var(--ink-black); border-bottom: 3px solid var(--ink-black);
  padding: 12px 2px; background: repeating-linear-gradient(0deg, rgba(20,17,15,0.05) 0 1px, transparent 1px 5px);
}
.kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; margin: 0 0 4px; }
.countdown { display: flex; gap: 4px; }
.countdown { align-items: stretch; }
.countdown .digit {
  font-family: var(--mono); font-weight: 700; font-size: clamp(38px, 14vw, 74px); line-height: 0.9;
  background: var(--ink-black); color: var(--paper); padding: 4px 6px 8px; min-width: 0.7em; text-align: center;
}
.countdown .digit.flick { background: var(--ink-rock); color: var(--ink-black); transform: translateY(2px); }
.countdown .colon { font-family: var(--mono); font-weight: 700; font-size: clamp(30px, 11vw, 58px);
  align-self: center; padding: 0 2px; }
.stat-big { font-family: var(--mono); font-weight: 700; font-size: clamp(30px, 10vw, 46px); line-height: 1; margin: 0; }
.stat-big span { font-size: 0.5em; opacity: 0.55; }
.dep-right { text-align: right; }

.entry-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 16px 0 6px; }
.btn-entry { font-size: 20px; padding: 14px 22px; box-shadow: 5px 5px 0 var(--ink-scissor); }
.btn-entry[data-state="seated"] { background: var(--ink-scissor); color: var(--ink-black); box-shadow: 5px 5px 0 var(--ink-black); }
.entry-meta { flex: 1 1 240px; }
.entry-meta p { margin: 0 0 4px; font-size: 12.5px; }
.entry-meta .warn { display: block; }

.invite {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 4px 0 22px; padding-top: 12px;
  border-top: 1px solid rgba(20,17,15,0.22);
}
.invite .btn { flex: 0 0 auto; }
.invite p { flex: 1 1 220px; margin: 0; font-size: 11.5px; line-height: 1.5; word-break: break-word; }

.seat-grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  border: 1px solid rgba(20,17,15,0.4); padding: 5px; background: rgba(20,17,15,0.03);
}
.seat {
  display: flex; flex-direction: column; gap: 1px; padding: 2px 3px; min-height: 26px;
  border: 1px solid rgba(20,17,15,0.35); overflow: hidden;
}
.seat.open .seat-empty { display: none; }
.seat.seated.real { background: var(--ink-black); color: var(--paper); }
.seat.seated.bot { background: rgba(20,17,15,0.16); }
.seat.me { outline: 3px solid var(--ink-rock); outline-offset: -2px; }
.seat-no { font-size: 8px; opacity: 0.62; }
.seat.seated .seat-no { opacity: 0.85; }
.seat-name, .seat .bot-seal { display: none; }
@media (min-width: 700px) {
  .seat { min-height: 40px; }
  .seat-name { display: block; font-family: var(--sans); font-weight: 700; font-size: 8px; line-height: 1.05;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seat.seated.bot .bot-seal { display: inline-block; align-self: flex-start; }
}
.legend { font-size: 10px; letter-spacing: 0.06em; margin: 8px 0 0; opacity: 0.75; }
.legend .bot-seal { color: var(--ink-black); }
.ink-dot { display: inline-block; width: 8px; height: 8px; background: var(--ink-black); vertical-align: middle; }

.roster { border: var(--rule) solid var(--ink-black); padding: 10px 12px; margin-top: 12px; }
.roster h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; margin: 0 0 6px; }
.roster ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
@media (min-width: 560px) { .roster ul { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.roster li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
  border-bottom: 1px solid rgba(20,17,15,0.25); padding: 2px 0; }
.roster li.mine { background: var(--ink-rock); }
.roster li span { font-size: 10px; opacity: 0.7; }
.roster > p { margin: 0; font-size: 10.5px; }

.warmup {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  border: 2px solid var(--ink-black); padding: 14px; margin-top: 22px;
  background: repeating-linear-gradient(45deg, rgba(0,169,92,0.12) 0 8px, transparent 8px 16px);
}
.warmup .subhead { margin-top: 0; border: 0; padding: 0; }

.result-sheet {
  position: relative; border: 2px solid var(--ink-black); padding: 16px; margin-top: 24px;
  box-shadow: 6px 6px 0 var(--ink-paper);
}
.result-stamp {
  position: absolute; top: -11px; right: 12px; background: var(--ink-rock); color: var(--ink-black);
  font-family: var(--poster); font-size: 13px; letter-spacing: 0.1em; padding: 2px 8px; border: 2px solid var(--ink-black);
}
.result-place { margin: 0 0 10px; font-family: var(--poster); text-transform: uppercase; font-size: 20px; }
.result-place .big { font-size: 46px; line-height: 1; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.result-grid dt { font-size: 9px; letter-spacing: 0.12em; opacity: 0.65; }
.result-grid dd { margin: 0; font-size: 16px; font-weight: 700; }
.result-grid dd.won-word { color: var(--ink-scissor); }
.result-grid dd.lost-word { color: var(--ink-rock); }

/* ------------------------------------------------------------------ packs */

.pack-rack { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .pack-rack { grid-template-columns: repeat(3, 1fr); } }
.pack { border: 2px solid var(--ink-black); box-shadow: 6px 6px 0 var(--ink-black); background: var(--paper); }
.pack.poor { opacity: 0.72; }
.pack-wrap {
  position: relative; padding: 14px; border-bottom: 2px solid var(--ink-black); overflow: hidden;
  background-repeat: repeat; min-height: 150px;
}
.pack-wrap.ink-ink_rock { background-color: var(--ink-rock); color: var(--ink-black); }
.pack-wrap.ink-ink_paper { background-color: var(--ink-paper); color: var(--paper); }
.pack-wrap.ink-ink_scissor { background-color: var(--ink-scissor); color: var(--ink-black); }
.pack-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.28;
  background-image: radial-gradient(currentColor 0.9px, transparent 1px); background-size: 4px 4px;
}
.pack-tear { position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 4px, currentColor 4px 6px); opacity: 0.5; }
.pack-name { font-family: var(--poster); text-transform: uppercase; font-size: 30px; margin: 12px 0 0; line-height: 1; }
.pack-cards { font-size: 11px; letter-spacing: 0.12em; margin: 4px 0 10px; }
.pack-art { display: flex; justify-content: flex-end; }
.pack-price { font-size: 15px; margin: 6px 0 0; }
.pack-price b { font-size: 24px; }
.pack-back { padding: 12px 14px 16px; }
.odd-row { display: grid; grid-template-columns: 76px 1fr 44px; align-items: center; gap: 6px; font-size: 10px; margin-bottom: 3px; }
.odd-bar { height: 9px; background: var(--ink-black); display: block; }
.odd-bar.r-common { background: rgba(20,17,15,0.5); }
.odd-bar.r-uncommon { background: var(--ink-paper); }
.odd-bar.r-rare { background: var(--ink-rock); }
.odd-bar.r-legendary { background: var(--ink-scissor); }
.pack-foil { font-size: 10px; letter-spacing: 0.05em; margin: 10px 0; border-top: 1px solid rgba(20,17,15,0.4); padding-top: 8px; }

.pull-sheet { margin-top: 26px; border-top: 3px solid var(--ink-black); padding-top: 6px; }
.fan { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 14px; scroll-snap-type: x mandatory; }
.fan > * { flex: 0 0 132px; scroll-snap-align: start; }
.fan > .fan-in { animation: slideout 0.32s cubic-bezier(0.2, 1.2, 0.4, 1) backwards; animation-delay: calc(var(--slide) * 70ms); }
@keyframes slideout { from { transform: translateX(38px) rotate(2deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ thermometer */

.thermo { border: 2px solid var(--ink-black); padding: 12px; margin: 12px 0 18px; }
.thermo-bar { position: relative; height: 34px; background: rgba(20,17,15,0.1); border: 1.5px solid var(--ink-black); overflow: hidden; }
.thermo-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--ink-black) 0 6px, var(--ink-scissor) 6px 12px); }
.thermo-val { position: absolute; right: 6px; top: 4px; font-weight: 700; font-size: 18px; background: var(--paper); padding: 0 4px; }
.thermo-scale { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: 0.1em; margin-top: 4px; }
.sign-tally { display: flex; gap: 16px; margin: 10px 0 0; }
.sign-tally > div { display: flex; align-items: baseline; gap: 5px; }
.sign-tally dt { font-size: 9px; letter-spacing: 0.1em; }
.sign-tally dd { margin: 0; font-size: 18px; font-weight: 700; }
.sign-tally .s-rock dd { color: var(--ink-rock); }
.sign-tally .s-paper dd { color: var(--ink-paper); }
.sign-tally .s-scissor dd { color: var(--ink-scissor); }
.deck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ------------------------------------------------------------------ auction */

.classifieds { border-top: 2px solid var(--ink-black); }
/* A lot is a small printed advert: the lot number down the left, the whole card
   in the middle, and the clock, the price and the button down the right. The
   numbers are all that changes, so they sit in their own column. */
.ad-row {
  display: grid; gap: 3px 10px; align-items: start;
  grid-template-columns: 30px minmax(0, 1fr) 86px;
  grid-template-areas: "no body bid" "no body clock" "no body buy";
  padding: 10px 2px 12px; border-bottom: 1px solid rgba(20,17,15,0.35);
}
.ad-head {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 86px; gap: 10px; align-items: baseline;
  padding: 5px 2px; font-size: 9.5px; letter-spacing: 0.14em; border-bottom: 1.5px solid var(--ink-black);
}
.ad-head span:nth-child(3), .ad-head span:nth-child(4) { display: none; }
.ad-head span:nth-child(5) { text-align: right; }
@media (min-width: 700px) {
  .ad-head {
    grid-template-columns: 54px minmax(0, 1fr) 132px 96px 96px 84px; align-items: baseline;
  }
  .ad-head span:nth-child(3), .ad-head span:nth-child(4) { display: block; }
  .ad-head span:nth-child(5) { text-align: right; }
  .ad-row {
    grid-template-columns: 54px minmax(0, 1fr) 132px 96px 96px 84px;
    grid-template-areas: "no body seller clock bid buy";
    align-items: center;
  }
}
.ad-row { font-size: 12px; }
.lot-no { grid-area: no; font-size: 11px; opacity: 0.75; padding-top: 2px; }
.lot-body { grid-area: body; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lot-name { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 800; line-height: 1.15; }
.lot-meta { margin: 0; font-size: 9px; letter-spacing: 0.06em; opacity: 0.72; }
/* The card's own sentence, printed in full. It is the reason to buy the thing. */
.lot-desc { margin: 1px 0 0; font-family: var(--sans); font-size: 11px; line-height: 1.35; }
.lot-seller { grid-area: seller; display: none; font-size: 10px; opacity: 0.7; }
@media (min-width: 700px) { .lot-seller { display: block; } }
.lot-timer { grid-area: clock; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.lot-timer b {
  display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--ink-black); color: var(--paper); padding: 1px 5px 2px; white-space: nowrap;
}
.lot-timer i { font-style: normal; font-size: 7.5px; letter-spacing: 0.14em; opacity: 0.6; }
/* The last minute is printed in the rock ink, so it is plain without reading. */
.lot-timer.closing b { background: var(--ink-rock); color: var(--ink-black); }
.lot-timer.gone b { background: rgba(20,17,15,0.22); color: var(--ink-black); }
.lot-bid { grid-area: bid; text-align: right; font-weight: 700; white-space: nowrap; }
.ad-row .btn-small { grid-area: buy; justify-self: end; }
.ad-row.foil-lot .lot-no {
  background: conic-gradient(from 140deg, var(--ink-rock), #FFC400, var(--ink-scissor), var(--ink-paper), var(--ink-rock));
  color: var(--ink-black); padding: 2px 4px;
}
.ad-row.mine { background: rgba(0,169,92,0.14); }
.sold-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.sold-strip p { margin: 0; font-size: 11px; }
.sold-word { background: var(--ink-scissor); padding: 0 5px; color: var(--ink-black); font-weight: 700; }
.taken-strip { margin: 10px 0 14px; }
.taken-word { background: var(--ink-black); padding: 0 5px; color: var(--paper); font-weight: 700; }

/* The floor, seen from the tournament page: three lots and their clocks, so the
   countdowns are readable on the page a person lands on, not only behind a tab. */
.floor-block { margin: 22px 0 26px; border-top: 3px solid var(--ink-black); padding-top: 10px; }
.floor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.floor-head .subhead { margin: 0; }
.floor-list { margin-top: 8px; }
.floor-row {
  display: grid; gap: 3px 10px; align-items: start;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  padding: 8px 2px 9px; border-bottom: 1px solid rgba(20,17,15,0.35);
}
.floor-no { font-size: 10px; opacity: 0.7; padding-top: 3px; }
/* The shared auction rules name their own grid areas; this grid has none, so
   both cells are reset to auto or they would be placed by a name that is absent. */
.floor-row .lot-timer { grid-area: auto; justify-self: end; }
.floor-row .lot-body { grid-area: auto; }
@media (min-width: 700px) { .floor-row { grid-template-columns: 30px minmax(0, 1fr) 120px; } }

/* The same floor, printed on the mat. The market runs on its own half hour, so
   the clock that matters keeps running while a bout does, and the mat is mostly
   empty space on a phone. Tighter than the landing strip, and with no button:
   the tabs are behind the overlay. */
.mat-floor .floor-block { margin: 16px 0 8px; }
.mat-floor .floor-head .subhead { font-size: 12px; letter-spacing: 0.16em; }
.mat-floor .floor-row { padding: 6px 2px 7px; }
.mat-floor .lot-name { font-size: 14px; }
.mat-floor .lot-desc { font-size: 12px; }

/* ------------------------------------------------------------------ leaderboards */

.board-block { margin-bottom: 26px; }
table.lb { width: 100%; border-collapse: collapse; border-top: 3px solid var(--ink-black); }
table.lb th {
  background: var(--ink-black); color: var(--paper); text-align: left; font-size: 9.5px;
  letter-spacing: 0.14em; padding: 5px 8px;
}
table.lb th:last-child, table.lb td:last-child { text-align: right; }
table.lb td { padding: 6px 8px; border-bottom: 1px solid rgba(20,17,15,0.3); font-size: 14px; font-weight: 600; }
table.lb tr.mine td { background: rgba(255,59,141,0.22); }
table.lb td.rank { font-weight: 700; font-size: 15px; width: 44px; }
table.lb tbody tr:first-child td:not([colspan]) { font-family: var(--poster); font-size: 19px; }
table.lb tbody tr:first-child td.rank { font-size: 22px; }
table.lb td[colspan] { font-size: 12px; letter-spacing: 0.06em; padding: 14px 8px; }
table.lb a { color: var(--ink-black); text-decoration: none; border-bottom: 2px solid var(--ink-paper); }
table.lb td.num { font-weight: 700; }

/* ------------------------------------------------------------------ rules */

.rules .subhead { margin-top: 20px; }
.rules .body { max-width: 74ch; }

/* ------------------------------------------------------------------ mat (the match) */

.mat { position: fixed; inset: 0; z-index: 40; background: var(--paper); overflow: auto; }
.mat-inner { min-height: 100%; display: flex; flex-direction: column; padding: 10px var(--pad) 16px; max-width: 1000px; margin: 0 auto; }
/* Held at the top the way the verdict is held at the bottom. The win and loss
   card lives here, and a bout long enough to push the mat past one screen would
   otherwise scroll the one line that says what this run has cost the player off
   the top, while the verdict stays pinned at the foot. Both ends stay. */
.mat-head { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--ink-black); padding-bottom: 8px;
  position: sticky; top: 0; z-index: 2; background: var(--paper); }
.mat-title { font-family: var(--poster); text-transform: uppercase; font-size: clamp(18px, 5vw, 26px); margin: 0; }
.mat-sub { font-size: 10px; letter-spacing: 0.14em; margin: 2px 0 0; opacity: 0.7; }
/* The win and loss card, carried onto the mat. The mat covers the masthead, so
   without this the record is the one thing a run hides. */
.mat-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.mat-record { font-size: 11px; letter-spacing: 0.08em; margin: 0; white-space: nowrap; }
.mat-record em, .mat-record i { font-style: normal; opacity: 0.65; font-size: 9px; letter-spacing: 0.1em; margin-left: 1px; }
.arena { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 14px 0; }
.bout { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; width: 100%; align-items: start; }
.fighter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fighter-name { font-size: 10px; letter-spacing: 0.06em; margin: 0; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtag { background: var(--ink-black); color: var(--paper); font-style: normal; padding: 0 3px; }
.hprow { display: flex; align-items: center; gap: 7px; }
.hpbar { position: relative; flex: 1; height: 18px; border: 2px solid var(--ink-black); background: rgba(20,17,15,0.08); overflow: hidden; }
.hpbar i { display: block; height: 100%; background: var(--ink-black); }
.hpnum { font-size: 13px; font-weight: 700; min-width: 40px; text-align: right; }
.fighter.lost .hpbar i { background: rgba(20,17,15,0.4); }
.mini-card { position: relative; border: 2px solid var(--ink-black); background: var(--paper); padding: 4px;
  border-left-width: 7px; border-left-color: var(--sign-ink, var(--ink-black)); }
.mini-card.s-rock { --sign-ink: var(--ink-rock); }
.mini-card.s-paper { --sign-ink: var(--ink-paper); }
.mini-card.s-scissor { --sign-ink: var(--ink-scissor); }
.mini-card.r-uncommon { box-shadow: inset 0 0 0 2px var(--ink-paper); }
.mini-card.r-rare { box-shadow: inset 0 0 0 3px var(--ink-paper); }
.mini-card.r-legendary { box-shadow: inset 0 0 0 3px var(--ink-scissor); }
.mini-art { position: relative; aspect-ratio: 12 / 10; overflow: hidden; border: 1px solid rgba(20,17,15,0.5); }
.mini-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mini-art .sc-chip { font-size: 10px; padding: 0 5px 1px; }
.mini-art .sc-chip i { font-size: 7.5px; }
.mini-name { margin: 4px 0 2px; font-size: 11px; font-weight: 800; line-height: 1.1; }
.mini-sign { font-size: 8.5px; margin: 0; letter-spacing: 0.04em; opacity: 0.8; }
.mini-sign b { letter-spacing: 0.1em; }
.fighter.won .mini-card { box-shadow: 4px 4px 0 var(--ink-scissor); }
.fighter.lost .mini-card { opacity: 0.45; }
.fighter.you .fighter-name { color: var(--ink-paper); }
.bout-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-top: 30px; min-width: 56px; }
.bout-dmg { font-family: var(--mono); font-weight: 700; font-size: 22px; margin: 0; background: var(--ink-rock); color: var(--ink-black);
  padding: 2px 8px; border: 2px solid var(--ink-black); }
.bout-dmg.tie { background: rgba(20,17,15,0.15); color: var(--ink-black); font-size: 13px; }
.vs { font-size: 11px; letter-spacing: 0.2em; opacity: 0.5; }
.bout-note { font-size: 8.5px; text-align: center; max-width: 110px; opacity: 0.8; margin: 0; }
.mini-card.down { background: repeating-linear-gradient(45deg, rgba(20,17,15,0.11) 0 5px, transparent 5px 10px); }
.down-glyph { display: flex; align-items: center; justify-content: center; aspect-ratio: 12 / 10;
  font-family: var(--poster); font-size: clamp(30px, 12vw, 46px); line-height: 1; opacity: 0.35; }
/* ORACLE reads the opponent's next card: the face-down placeholder turns into
   the real card, and it is marked so a face-up card in that seat is never a
   mistake. The dashed rule is the "you are being shown this" mark. */
.mini-card.revealed { box-shadow: 3px 3px 0 var(--ink-paper); outline: 2px dashed var(--ink-paper); outline-offset: 2px; }
.mini-tag { display: inline-block; font-size: 8px; letter-spacing: 0.1em; margin: 3px 0 0;
  background: var(--ink-paper); color: var(--paper); padding: 1px 5px; }

/* ---- the hand: three cards dealt up off the top of the deck, tap one ---- */

.handbar { border-top: 2px solid var(--ink-black); padding-top: 6px; margin-top: 4px; }
.hand-label { display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
  font-size: 9px; letter-spacing: 0.16em; margin: 0 0 5px; opacity: 0.75; }
.hand-label em { font-style: normal; letter-spacing: 0.08em; text-align: right; }
/* minmax(0, 1fr) and min-width: 0, or a long card name pushes the third card
   off the side of the phone instead of ellipsising */
.hand-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hand-card { position: relative; text-align: left; display: flex; flex-direction: column;
  min-width: 0;
  border: 2px solid var(--ink-black); background: var(--paper); color: var(--ink-black);
  padding: 0; border-radius: 0; font-family: inherit; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink-black); }
.hand-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink-black); }
.hand-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-black); }
.hand-card:focus-visible { outline: 3px solid var(--ink-paper); outline-offset: 2px; }
.hand-card.r-uncommon { box-shadow: 3px 3px 0 var(--ink-paper); }
.hand-card.r-rare { box-shadow: 3px 3px 0 var(--ink-rock); }
.hand-card.r-legendary { box-shadow: 3px 3px 0 var(--ink-scissor); }
.hand-card.s-rock { --sign-ink: var(--ink-rock); }
.hand-card.s-paper { --sign-ink: var(--ink-paper); }
.hand-card.s-scissor { --sign-ink: var(--ink-scissor); }
/* The number key rides the tribe band, so the stat corner keeps the top left. */
.hand-key { font-style: normal; margin-left: auto; background: var(--ink-black); color: var(--paper);
  font-size: 10px; line-height: 1.35; padding: 0 5px; border: 1.5px solid var(--ink-black); }
.hand-art { position: relative; display: block; overflow: hidden;
  border-bottom: 2px solid var(--ink-black); }
.hand-art::before { content: ""; display: block; padding-top: 83.3333%; }
.hand-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hand-art .stat-corner { top: 0; left: 0; }
.hand-art .sc-chip { font-size: 10px; padding: 0 5px 1px; }
.hand-art .sc-chip i { font-size: 7.5px; }
/* A word of a name or an effect is never the thing that gives way: if a hand
   card has to lose height it loses it out of the picture. */
.hand-card > * { flex: 0 0 auto; }
.hand-card > .hand-art { flex: 0 1 auto; }
.hand-name { font-size: 11px; font-weight: 800; line-height: 1.1; margin: 4px 5px 0; }
/* Held, not played: while this card sits in the hand it reads the opponent's
   next card, so the card that does it says so on its face. */
.hand-badge { font-size: 7.6px; letter-spacing: 0.09em; margin: 3px 5px 0; align-self: flex-start;
  background: var(--ink-paper); color: var(--paper); padding: 1px 4px; }
/* Name, sign, effect: every word printed, nothing clipped or cut short. */
.hand-line { font-size: 8px; letter-spacing: 0.04em; margin: 2px 5px 0; }
/* The 1px of padding keeps the descender row of the last line inside the box
   instead of a rounding error below it. */
.hand-effect { font-size: 8.4px; line-height: 1.22; margin: 3px 5px 4px; padding-bottom: 1px; opacity: 0.78; }
@media (min-width: 620px) {
  .hand-name { font-size: 12.5px; }
  .hand-line { font-size: 9px; }
  .hand-effect { font-size: 9.5px; }
  /* Three cards across a laptop would be three posters, and the whole hand would
     finish below the fold. Capped, the strip stays a strip: still bigger than the
     collection card, still on screen without scrolling. */
  .hand-row { max-width: 620px; margin: 0 auto; }
  /* The stand-off is capped against the HEIGHT of the window, so a short laptop
     shrinks the two staged cards rather than pushing the hand out of reach. */
  .bout { max-width: min(100%, 78vh); margin: 0 auto; }
}
/* The hand and the stand-off sit at the top of what is left, and the log takes
   the slack, so nothing the player needs is below the fold on a phone. */
.mat-inner.has-hand .arena { flex: 0 0 auto; padding: 8px 0; }
.mat-inner.has-hand .handbar { flex: 0 0 auto; }
.mat-inner.has-hand .mat-log { flex: 1 1 auto; max-height: none; }

.mat-log { border-top: 2px solid var(--ink-black); padding-top: 6px; max-height: 148px; overflow: hidden; }
.logline { font-size: 11px; margin: 0 0 2px; display: flex; gap: 6px; align-items: baseline; opacity: 0.9; }
.logline .n { opacity: 0.5; }
.logline.win { color: var(--ink-scissor); }
.logline.loss { color: var(--ink-black); opacity: 0.55; }
.logline .d { margin-left: auto; font-weight: 700; }
/* The way out of a bout never falls below the fold. Printing the floor on the
   mat made it taller than a phone, so the verdict and its button have to hold
   the bottom of the screen instead of sitting under whatever is above them. */
.mat-foot { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; position: sticky; bottom: 0; background: var(--paper);
  border-top: 3px solid var(--ink-black); padding: 8px 0 6px; }
.mat-verdict { display: flex; flex-direction: column; }
.verdict-word { font-family: var(--poster); font-size: 30px; text-transform: uppercase; line-height: 1; }
.mat-verdict.win .verdict-word { color: var(--ink-scissor); }
.mat-verdict.loss .verdict-word { color: var(--ink-rock); }

/* ------------------------------------------------------------------ broadcast board */

.board { position: fixed; inset: 0; z-index: 30; background: var(--paper); overflow: auto; }
.board-inner { max-width: 900px; margin: 0 auto; padding: 12px var(--pad) 24px; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--ink-black); padding-bottom: 6px; }
.board-head p { margin: 0; font-size: 11px; letter-spacing: 0.14em; font-weight: 700; }
.round-tag { font-size: 11px; letter-spacing: 0.14em; margin: 12px 0 6px; }
.pairings { display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 620px) { .pairings { grid-template-columns: 1fr 1fr; } }
.pairing { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; font-size: 11px; padding: 3px 5px;
  border-bottom: 1px solid rgba(20,17,15,0.25); }
.pairing.mine { background: var(--ink-rock); }
.pairing .w::before { content: "▶ "; }
.pairing .l { opacity: 0.5; text-decoration: line-through; }
.pairing .b { opacity: 0.5; }
.board-final { padding: 20px 0; }
.big-place { font-family: var(--poster); font-size: 76px; line-height: 1; margin: 0; }
.big-place span { font-size: 22px; }
.board-foot { margin-top: 16px; }

/* ------------------------------------------------------------------ sheet */

.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(239,231,216,0.9); }
.sheet-body { box-shadow: 0 -8px 0 rgba(20,17,15,0.14); }
.sheet-body {
  position: relative; background: var(--paper); border-top: 4px solid var(--ink-black);
  width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; padding: 16px var(--pad) 28px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
}
.sheet-x {
  position: absolute; top: 8px; right: 10px; appearance: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; border: 2px solid var(--ink-black); background: var(--paper); padding: 4px 8px;
}
.sheet-card { flex: 0 0 200px; }
.sheet-card .card { width: 200px; }
.sheet-info { flex: 1 1 260px; min-width: 240px; }
.sheet-info h3 { font-family: var(--poster); text-transform: uppercase; font-size: 24px; margin: 0 0 2px; }
.sheet-info .subhead { font-size: 15px; margin-top: 20px; }
.sheet-body.picker { display: block; }
.xpbar { position: relative; height: 22px; border: 2px solid var(--ink-black); margin: 12px 0; background: rgba(20,17,15,0.08); }
.xpbar i { display: block; height: 100%; background: var(--ink-paper); }
.xpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: var(--ink-black); font-weight: 700; }
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.price-row .btn { align-items: flex-start; text-align: left; }
.price em { font-style: normal; font-family: var(--mono); font-size: 9px; opacity: 0.75; }
@media (min-width: 700px) { .price-row { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ toast, footer */

.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60;
  background: var(--ink-black); color: var(--paper); padding: 10px 16px; font-size: 12.5px;
  border: 2px solid var(--paper); box-shadow: 5px 5px 0 var(--ink-rock); max-width: 90vw;
}
body.mat-open .toast { z-index: 70; }

.colophon {
  border-top: 4px solid var(--ink-black); margin-top: 20px; padding-top: 10px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8;
}
.colophon p { margin: 0; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  .foil-sweep, .sparkle { animation: none !important; }
  .fan > .fan-in { animation: none !important; }
}