@font-face { font-family: 'Libre Caslon Text'; font-weight: 400; font-display: swap; src: url(fonts/caslon-400.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 700; font-display: swap; src: url(fonts/caslon-700.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/caslon-400i.woff2) format('woff2'); }

:root {
  --baize: #17533f;
  --baize-hi: #20694f;
  --baize-lo: #0d3a2b;
  --back: #8e1f2f;
  --ivory: #fefdfb;
  --ink: #1e2621;
  --ink-soft: #4a554e;
  --rule: #ded6c4;
  --brass: #c9a55c;
  --brass-hi: #e6c886;
  --red: #b3122e;
  --black: #1b1b1f;
  --chrome: #f4ecd9;
  --chrome-dim: rgb(244 236 217 / .74);
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --chrome-h: 172px; /* height above the board; build.mjs's inline script sets the measured value before first paint */
  color-scheme: dark;
}
[data-table='claret'] { --baize: #5b1f2b; --baize-hi: #722a38; --baize-lo: #3c121b; }
[data-table='navy'] { --baize: #1d2e50; --baize-hi: #283e68; --baize-lo: #121d35; }
[data-table='slate'] { --baize: #36444b; --baize-hi: #45565e; --baize-lo: #232c31; }
[data-back='navy'] { --back: #223a6e; }
[data-back='green'] { --back: #1d5a42; }
[data-back='ochre'] { --back: #a8711d; }

/* Caslon has no Japanese or Korean glyphs: headings fall back to a matching serif, reading text and menus to the system sans. */
:lang(ja), :lang(ko) { --serif: 'Libre Caslon Text', 'Hiragino Mincho ProN', 'Yu Mincho', 'AppleMyungjo', 'Nanum Myeongjo', serif; }
:lang(ja) .rules, :lang(ko) .rules, :lang(ja) .games a, :lang(ko) .games a, :lang(ja) .more span, :lang(ko) .more span { font-family: var(--sans); }
:lang(ja) .rules h2, :lang(ko) .rules h2, :lang(ja) .rules h3, :lang(ko) .rules h3 { font-family: var(--sans); font-weight: 700; }
:lang(ko) .rules p, :lang(ko) .rules li, :lang(ko) .toast, :lang(ko) dialog p { word-break: keep-all; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--chrome);
  font: 400 18px/1.55 var(--sans);
  background-color: var(--baize-lo);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% 0%, var(--baize-hi), var(--baize) 55%, var(--baize-lo));
  background-size: 180px 180px, 100% 100vh;
  background-repeat: repeat, no-repeat;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- header ---- */
.top { display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; max-width: 2400px; margin: 0 auto; padding: 10px 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 25px/1 var(--serif); color: var(--chrome); letter-spacing: -.01em; }
.brand svg { width: 26px; height: 26px; fill: var(--brass); }
.games { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.games::-webkit-scrollbar { display: none; }
.games a { flex: none; padding: 10px 11px 8px; font: 400 17px/1 var(--serif); color: var(--chrome-dim); text-decoration: none; border-bottom: 2px solid transparent; }
.games a:hover { color: var(--chrome); }
.games a[aria-current] { color: var(--chrome); border-bottom-color: var(--brass); }

/* ---- play area ---- */
.play { max-width: 2400px; margin: 0 auto; padding: 0 8px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 8px 10px; }
.title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-right: auto; }
.title h1 { margin: 0; font: 700 26px/1.1 var(--serif); letter-spacing: -.01em; }
.variants { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgb(0 0 0 / .2); }
.variants a { padding: 5px 10px; border-radius: 7px; font: 600 14px/1 var(--sans); color: var(--chrome-dim); text-decoration: none; white-space: nowrap; }
.variants a[aria-current] { background: var(--chrome); color: var(--ink); }
.hud { display: flex; gap: 18px; margin: 0; }
.hud div { display: flex; flex-direction: column; }
.hud dt { font: 500 12px/1.2 var(--sans); color: var(--chrome-dim); }
.hud dd { margin: 0; font: 700 19px/1.2 var(--serif); font-variant-numeric: tabular-nums; min-width: 3ch; }
.hud [data-hud='deal'] { min-width: 7ch; }
.hud dd.red { color: #ff9f9f; }
.hud-nodeal .hud > div:first-child { display: none; } /* no room for the deal number up there */
.tools { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.tools button, .btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 13px;
  border: 1px solid rgb(255 255 255 / .14); border-radius: 10px; background: rgb(0 0 0 / .2);
  font: 600 15px/1 var(--sans); cursor: pointer;
}
.tools button:hover, .btn:hover { background: rgb(0 0 0 / .32); }
.tools button:disabled { opacity: .45; cursor: default; }
.tools svg { width: 20px; height: 20px; flex: none; }
.tools .icon { padding: 0 11px; }
.tools .done { position: relative; }
.tools .done::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--brass-hi); }

.board-wrap { position: relative; }
.board {
  position: relative; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  height: clamp(420px, calc(100vh - var(--chrome-h)), 1100px);
  height: clamp(420px, calc(100svh - var(--chrome-h)), 1100px);
}
/* Games without fanned columns only need a box as tall as their fixed layout when the screen is narrow. */
.board.g-pyramid { height: min(clamp(300px, calc(100svh - var(--chrome-h)), 1100px), calc(100vw + 12px)); }
.board.g-tripeaks { height: min(clamp(260px, calc(100svh - var(--chrome-h)), 1100px), calc(51.4vw + 16px)); }
.slot, .card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .075); }
.slot { border: 2px solid rgb(255 255 255 / .16); background: rgb(0 0 0 / .1); }
.slot.spot { display: none; }
.slot[data-mark]::after { content: attr(data-mark); position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--cw) * .42)/1 var(--serif); color: rgb(255 255 255 / .14); }
.slot.stock { cursor: pointer; }
.slot.stock.recycle::after {
  content: ''; position: absolute; inset: 22%; opacity: .5; background: var(--chrome);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.slot.over { border-color: var(--brass-hi); box-shadow: 0 0 0 2px var(--brass-hi); }

.card { transition: transform .24s cubic-bezier(.2, .75, .25, 1); touch-action: none; cursor: pointer; }
.instant .card { transition: none !important; }
.card.buried .face { box-shadow: 0 0 0 1px rgb(0 0 0 / .22); }
.card.buried .back { box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--ivory), inset 0 0 0 calc(var(--cw) * .07) rgb(201 165 92 / .9), 0 0 0 1px rgb(0 0 0 / .25); }
.card.drag { transition: none; cursor: grabbing; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .35)); }
.card.over .face { box-shadow: 0 0 0 3px var(--brass-hi); }
.face, .back { position: absolute; inset: 0; border-radius: inherit; }
.face { overflow: hidden; color: var(--black); background: var(--ivory); box-shadow: 0 0 0 1px rgb(0 0 0 / .22), 0 1px 2px rgb(0 0 0 / .3), 0 3px 8px rgb(0 0 0 / .16); }
.red .face { color: var(--red); }
[data-deck='four'] .s2 .face { color: #1d4fb8; }
[data-deck='four'] .s3 .face { color: #127238; }
.down .face, .card:not(.down) .back { display: none; }
.back {
  background:
    radial-gradient(circle at 50% 50%, transparent calc(var(--cw) * .1), transparent 0),
    repeating-linear-gradient(45deg, rgb(255 255 255 / .13) 0 1px, transparent 1px calc(var(--cw) * .09)),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .13) 0 1px, transparent 1px calc(var(--cw) * .09)),
    var(--back);
  box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--ivory), inset 0 0 0 calc(var(--cw) * .07) rgb(201 165 92 / .9), 0 0 0 1px rgb(0 0 0 / .25), 0 1px 2px rgb(0 0 0 / .3);
}
.back::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * .22); height: calc(var(--cw) * .22);
  translate: -50% -50%; rotate: 45deg; border: max(1px, calc(var(--cw) * .018)) solid var(--brass); background: var(--back);
}

.ix { position: absolute; left: calc(var(--cw) * .07); top: calc(var(--cw) * .05); display: flex; align-items: center; gap: calc(var(--cw) * .025); }
.ix b { font: 700 calc(var(--cw) * .27)/1 var(--serif); letter-spacing: -.05em; }
.ix svg { width: calc(var(--cw) * .19); height: calc(var(--cw) * .19); fill: currentColor; }
.ix2 { display: none; }
.pips { position: absolute; inset: 0; }
.pips svg { position: absolute; width: calc(var(--cw) * .19); height: calc(var(--cw) * .19); translate: -50% -50%; fill: currentColor; }
.pips svg.inv { rotate: 180deg; }
.pips.ace svg { width: calc(var(--cw) * .46); height: calc(var(--cw) * .46); top: 60% !important; }
.s0 .pips.ace svg { width: calc(var(--cw) * .54); height: calc(var(--cw) * .54); }
.court {
  position: absolute; inset: 27% 17% 6%; overflow: hidden;
  border: max(1px, calc(var(--cw) * .016)) solid currentColor; border-radius: calc(var(--cw) * .04);
  background: #fff;
}
.court svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.big { display: none; position: absolute; left: 50%; bottom: 9%; width: calc(var(--cw) * .5); height: calc(var(--cw) * .5); translate: -50% 0; fill: currentColor; }
.compact .pips, .compact .court { display: none; }
.compact .big { display: block; }
.compact .ix { left: calc(var(--cw) * .06); top: calc(var(--cw) * .04); gap: calc(var(--cw) * .02); }
.compact .ix b { font-size: calc(var(--cw) * .36); }
.compact .ix svg { width: calc(var(--cw) * .25); height: calc(var(--cw) * .25); }

.card.flip { animation: flip .22s ease-out; }
@keyframes flip { from { scale: 0 1; } to { scale: 1 1; } }
.card.shake { animation: shake .3s; }
@keyframes shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.card.hint .face, .card.hint .back, .slot.hint { animation: glow .85s 2; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px var(--brass-hi), 0 0 22px 4px var(--brass-hi); } }
.card.sel .face { box-shadow: 0 0 0 4px var(--brass-hi), 0 4px 10px rgb(0 0 0 / .35); }
.card.sel { translate: 0 -4px; }
.card.next .back { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 14px 2px var(--brass-hi); }

.toast {
  position: absolute; left: 50%; bottom: 14px; z-index: 9500; translate: -50% 10px; opacity: 0; pointer-events: none;
  width: max-content; max-width: min(560px, calc(100% - 32px)); padding: 11px 18px; border-radius: 10px; background: rgb(12 22 18 / .92); color: var(--chrome);
  font: 500 16px/1.35 var(--sans); text-align: center; transition: opacity .2s, translate .2s;
}
.toast.on { opacity: 1; translate: -50% 0; }
.paused { position: absolute; inset: 0; z-index: 9600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 12px; background: linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .35)), var(--baize); }
.paused[hidden] { display: none; }
.paused p { margin: 0; font: 700 28px/1.2 var(--serif); }
.paused .btn { min-height: 48px; padding: 0 28px; background: var(--brass-hi); border-color: var(--brass-hi); color: var(--ink); font-weight: 700; }
.clock button { all: unset; cursor: pointer; border-radius: 4px; }
.clock button:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.clock button::after { content: ''; display: inline-block; width: 7px; height: 9px; margin-left: 5px; vertical-align: 2px; border: solid currentColor; border-width: 0 2px; opacity: .55; }
.clock button:hover::after { opacity: 1; }
.finish, .stuck { position: absolute; left: 50%; bottom: 18px; z-index: 9400; translate: -50% 0; }
.finish { min-height: 48px; padding: 0 26px; border: 0; border-radius: 24px; background: var(--brass-hi); color: var(--ink); font: 700 17px/1 var(--sans); box-shadow: 0 6px 18px rgb(0 0 0 / .35); cursor: pointer; }
.stuck { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 16px); padding: 10px 12px 10px 18px; border-radius: 14px; background: rgb(12 22 18 / .94); box-shadow: 0 6px 18px rgb(0 0 0 / .35); white-space: nowrap; }
.stuck p { white-space: normal; text-align: center; }
.stuck p { margin: 0 6px 0 0; font: 600 16px/1.2 var(--sans); }
.stuck[hidden], .finish[hidden] { display: none; }
/* Clock's piles reach the bottom middle of the board; on wide screens the buttons sit in the empty margin instead. */
@media (min-aspect-ratio: 4/3) { .g-clock ~ .finish, .g-clock ~ .stuck { left: 12px; translate: none; } }

/* ---- Hearts table ---- */
/* Capped so the opponents sit around the cards, not at the screen edges. */
.board.g-table { max-width: 1100px; margin: 0 auto; }
.board.g-table { height: clamp(460px, calc(100vh - var(--chrome-h)), 1100px); height: clamp(460px, calc(100svh - var(--chrome-h)), 1100px); }
.g-table .card { transform-origin: 0 0; transition: transform .32s cubic-bezier(.2, .75, .25, 1), opacity .25s; }
.g-table .card.gone { opacity: 0; pointer-events: none; }
.g-table .card.dim .face { filter: brightness(.8) saturate(.6); }
.g-table.compact .ix { flex-direction: column; gap: 0; }
.seat { position: absolute; left: 0; top: 0; z-index: 450; width: 120px; display: flex; flex-direction: column; align-items: center; pointer-events: none; font: 500 14px/1.25 var(--sans); color: var(--chrome-dim); }
.seat b { font: 700 18px/1.2 var(--serif); color: var(--chrome); }
.seat1 { align-items: flex-start; }
.seat3 { align-items: flex-end; }
.seat.turn b { color: var(--brass-hi); text-decoration: underline 2px; text-underline-offset: 4px; }
.seat[hidden] { display: none; }
.seat0, .seat2 { width: 220px; margin-left: -50px; } /* centered names get room for longer lines */
.card.meld .face { box-shadow: inset 0 calc(var(--cw) * .05) 0 var(--brass-hi), 0 0 0 1px rgb(0 0 0 / .22), 0 1px 2px rgb(0 0 0 / .3); }
.hearts-center { position: absolute; left: 50%; z-index: 5000; translate: -50% -50%; width: max-content; max-width: min(360px, 88%); text-align: center; }
.hearts-center:empty { display: none; }
.hearts-center.below { translate: -50% 0; }
.hearts-center .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.hearts-center .row .btn { background: rgb(0 0 0 / .35); border-color: rgb(255 255 255 / .22); color: var(--chrome); }
.hearts-center .row .btn.go { background: var(--brass-hi); border-color: var(--brass-hi); color: var(--ink); }
.hearts-center .check { justify-content: center; margin-top: 10px; color: var(--chrome); font-weight: 600; }
.hearts-center .check input { accent-color: var(--brass-hi); }
.pegboard { position: absolute; z-index: 5; height: 30px; border-radius: 15px; background:
    radial-gradient(circle, rgb(40 22 8 / .55) 1.4px, transparent 1.8px) 4px 5px / 7px 9px repeat-x,
    radial-gradient(circle, rgb(40 22 8 / .55) 1.4px, transparent 1.8px) 4px 15px / 7px 9px repeat-x,
    linear-gradient(#b07a3e, #8a5a2b); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 2px 6px rgb(0 0 0 / .35); }
.pegboard .peg { position: absolute; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; box-shadow: 0 1px 2px rgb(0 0 0 / .5); transition: left .5s ease; }
.pegboard .p0 { top: 15px; background: var(--brass-hi); }
.pegboard .p1 { top: 2px; background: #d8372f; }
.hearts-center p.count { font: 700 26px/1.1 var(--serif); }
.hearts-center p { margin: 0 0 10px; font: 600 17px/1.35 var(--sans); text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.hearts-center .btn { min-height: 46px; padding: 0 22px; background: var(--brass-hi); border-color: var(--brass-hi); color: var(--ink); font-weight: 700; }
.hearts-center .btn:disabled { opacity: .5; cursor: default; }
.hearts-center .bids { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.hearts-center .bids .btn { min-height: 44px; padding: 0; justify-content: center; background: rgb(0 0 0 / .35); border-color: rgb(255 255 255 / .22); color: var(--chrome); }
.hearts-center .bids .btn:hover { background: var(--brass-hi); color: var(--ink); }
dialog .scores { width: 100%; margin: 6px 0 14px; border-collapse: collapse; font-size: 16px; }
dialog .scores th, dialog .scores td { padding: 7px 8px; border-bottom: 1px solid var(--rule); text-align: right; }
dialog .scores th:first-child { text-align: left; }
dialog .scores tbody th { font-weight: 600; }

/* ---- ads ---- */
.ad { max-width: 970px; margin: 22px auto; padding: 0 16px; text-align: center; }
.ad::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 500 12px/1 var(--sans); color: var(--chrome-dim); }
/* Rail ad: a 300px column right of the board, added by build.mjs railAd() only where the cards stay big beside it. */
.play.has-rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; }
.play.has-rail > * { grid-column: 1 / -1; }
.play.has-rail > .board-wrap { grid-column: 1; }
.play.has-rail > .ad-rail { grid-column: 2; grid-row: 2; margin: 0; padding: 0; }

/* ---- article: the rules card ---- */
.rules {
  max-width: 780px; margin: 28px auto 0; padding: 40px clamp(20px, 6vw, 60px) 44px;
  background: var(--ivory); color: var(--ink); border-radius: 16px;
  box-shadow: inset 0 0 0 9px var(--ivory), inset 0 0 0 10px var(--brass), 0 14px 40px rgb(0 0 0 / .3);
  font: 400 19px/1.68 var(--serif);
}
.rules .lede { margin-top: 0; font-size: 21px; line-height: 1.55; color: var(--ink-soft); }
.rules h2 { margin: 1.9em 0 .55em; font: 700 29px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.rules h3 { margin: 1.5em 0 .4em; font: 700 21px/1.3 var(--serif); }
.rules p, .rules li { max-width: 68ch; }
.rules ul, .rules ol { padding-left: 1.3em; }
.rules li { margin: .35em 0; }
.rules li::marker { color: var(--red); }
.rules a { color: #12573f; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rules a:hover { color: var(--red); }
.rules table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font: 400 16px/1.45 var(--sans); }
.rules th, .rules td { padding: 9px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.rules th { font-weight: 700; border-bottom: 2px solid var(--ink); }
.rules .table-wrap { overflow-x: auto; }

/* ---- more games ---- */
.more { max-width: 1100px; margin: 44px auto 0; padding: 0 16px; }
.more h2 { margin: 0 0 16px; font: 700 26px/1.2 var(--serif); text-align: center; }
.more ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.more a { display: block; height: 100%; padding: 16px 18px; border-radius: 12px; background: rgb(0 0 0 / .18); border: 1px solid rgb(255 255 255 / .1); text-decoration: none; }
.more a:hover { background: rgb(0 0 0 / .3); border-color: rgb(201 165 92 / .6); }
.more b { display: block; font: 700 20px/1.25 var(--serif); color: var(--chrome); }
.more span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--chrome-dim); }

/* ---- footer ---- */
.foot { max-width: 1100px; margin: 48px auto 0; padding: 22px 16px 40px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 15px; color: var(--chrome-dim); display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { text-decoration: none; }
.foot .langs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.foot .langs a[aria-current] { color: var(--chrome); text-decoration: underline; text-underline-offset: 4px; }
.foot a:hover { color: var(--chrome); text-decoration: underline; }
.foot p { margin: 0; }

/* ---- plain pages ---- */
.page-head { max-width: 780px; margin: 28px auto 0; padding: 0 16px; }
.page-head h1 { margin: 0; font: 700 36px/1.15 var(--serif); hyphens: auto; overflow-wrap: break-word; }

/* ---- dialogs ---- */
dialog {
  width: min(440px, calc(100% - 32px)); padding: 30px 28px 24px; border: 0; border-radius: 16px;
  background: var(--ivory); color: var(--ink); font: 400 17px/1.5 var(--sans);
  box-shadow: inset 0 0 0 8px var(--ivory), inset 0 0 0 9px var(--brass), 0 24px 60px rgb(0 0 0 / .45);
}
dialog::backdrop { background: rgb(8 18 14 / .58); }
dialog h2 { margin: 0 0 12px; font: 700 28px/1.2 var(--serif); }
dialog p { margin: 0 0 10px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.stats div { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--rule) 45%, var(--ivory)); }
.stats dt { font-size: 14px; color: var(--ink-soft); }
.stats dd { margin: 2px 0 0; font: 700 24px/1.15 var(--serif); }
.note { font-size: 14px; color: var(--ink-soft); }
.cal h3 { margin: 4px 0 8px; font: 600 15px/1.2 var(--sans); }
.cal ol { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 6px; padding: 0; list-style: none; text-align: center; }
.cal li { padding: 7px 0; border-radius: 8px; font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.cal .wd { padding: 2px 0; font-size: 12px; color: var(--ink-soft); }
.cal .won { background: var(--baize); color: var(--chrome); font-weight: 700; }
.cal .today { box-shadow: inset 0 0 0 2px var(--brass); }
.cal .later { color: var(--ink-soft); opacity: .55; }
.badges h3 { margin: 14px 0 8px; font: 600 15px/1.2 var(--sans); }
.badges ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.badges li { display: flex; align-items: center; gap: 7px; word-break: keep-all; overflow-wrap: anywhere; padding: 6px 7px; border-radius: 8px; font: 500 13px/1.2 var(--sans); color: var(--ink-soft); background: rgb(0 0 0 / .04); }
.badges li svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgb(0 0 0 / .1); fill: rgb(0 0 0 / .3); }
.badges li.got { color: var(--ink); font-weight: 700; background: rgb(196 154 76 / .16); }
.badges li.got svg { background: var(--brass); fill: #fff; }
.badges p { margin: 0 0 10px; word-break: keep-all; font: 500 14px/1.3 var(--sans); color: var(--ink-soft); }
.news { position: fixed; z-index: 9999; left: 50%; top: 14px; translate: -50% 0; margin: 0; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 24px; background: var(--brass-hi); color: var(--ink); font: 700 16px/1.3 var(--sans); text-align: center; box-shadow: 0 6px 18px rgb(0 0 0 / .35); animation: news 5s both; }
@keyframes news { 0% { opacity: 0; translate: -50% -12px; } 8%, 85% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; } }
.ask p { margin: 4px 0 0; font-size: 18px; line-height: 1.45; }
.win { text-align: center; }
.win .suits { display: flex; justify-content: center; gap: 10px; margin: 0 0 6px; }
.win .suits svg { width: 22px; height: 22px; fill: var(--ink); }
.win .suits svg:nth-child(2), .win .suits svg:nth-child(3) { fill: var(--red); }
.win h2 { font-size: 34px; }
.win .stats { text-align: left; }
.win .note:empty { display: none; }
.win .actions { justify-content: center; flex-wrap: wrap; }
.win .actions .quiet { margin-right: 0; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.actions button, dialog .btn { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font: 600 16px/1 var(--sans); cursor: pointer; }
.actions .primary { background: var(--baize); border-color: var(--baize); color: var(--chrome); }
.actions .quiet { margin-right: auto; border-color: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
fieldset { margin: 0 0 18px; padding: 0; border: 0; }
legend { margin-bottom: 8px; font-weight: 700; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatches i { display: block; width: 52px; height: 40px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }
.swatches input:checked + i { box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--ink); }
.swatches input:focus-visible + i { outline: 3px solid var(--brass); outline-offset: 4px; }
.dealpick div { display: flex; gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.check + .check { margin-top: 10px; }
.check input { width: 20px; height: 20px; accent-color: var(--baize); }
.dealpick input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

canvas.celebrate { position: fixed; inset: 0; z-index: 99; width: 100vw; height: 100vh; pointer-events: none; transition: opacity .4s; }
canvas.celebrate.out { opacity: 0; }

/* Laptops and up: the tools join the title row when they fit, and the score line moves up into the empty right end
   of the site menu row when build.mjs's inline script finds room (.hud-up), so the cards get that height back. */
@media (min-width: 1366px) and (max-width: 1599px) { .games { gap: 0; } .games a { padding-left: 6px; padding-right: 6px; font-size: 16px; } .hud-up .hud { gap: 12px; } .tools button { padding: 0 10px; } .tools .icon { padding: 0 9px; } }
@media (min-width: 1366px) {
  .title { margin-right: 0; }
  .tools { width: auto; }
  .hud { order: 1; margin-left: auto; }
  .hud-up .hud { position: absolute; top: 12px; right: 16px; }
  .tight .tools .long { display: none; }
  .play.tight .tools .short { display: inline; }
  .tight .bar { column-gap: 14px; }
  .tight .title h1 { font-size: 24px; }
  .bare .tools button:not(.icon) svg { display: none; }
}
@media (max-width: 720px) {
  :root { --chrome-h: 232px; }
  body { font-size: 17px; }
  .top { padding-top: 8px; }
  .brand { font-size: 21px; }
  .brand svg { width: 22px; height: 22px; }
  .bar { gap: 8px 14px; padding: 6px 4px; }
  .title h1 { font-size: 21px; }
  .hud { gap: 14px; }
  .hud dd { font-size: 17px; }
  .hud-up .hud { position: absolute; top: 6px; right: 14px; gap: 12px; }
  .hud-up .hud dt { font-size: 11px; }
  .hud-up .hud dd { font-size: 16px; line-height: 1.15; }
  .variants a { padding: 5px 8px; font-size: 13px; }
  .tools { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
  .tools button { flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 1px; font-size: min(12px, 3vw); letter-spacing: -.01em; white-space: nowrap; }
  .tools .long { display: none; }
  .board { height: clamp(400px, calc(100svh - var(--chrome-h)), 1100px); }
  .board.g-pyramid { height: min(clamp(300px, calc(100svh - var(--chrome-h)), 1100px), calc(100vw + 12px)); }
  .board.g-tripeaks { height: min(clamp(240px, calc(100svh - var(--chrome-h)), 1100px), calc(51.4vw + 16px)); }
  .board.g-table { height: clamp(440px, calc(100svh - var(--chrome-h)), 1100px); }
  .rules { border-radius: 12px; font-size: 18px; margin-top: 20px; }
  .rules h2 { font-size: 25px; }
}
@media (min-width: 721px) { .tools .short { display: none; } }
@media (max-width: 720px) { .tools [data-act='redo'] { display: none; } }
/* Phones held sideways: the screen is short, so the site header goes, the title and score share one line, and the
   tools stand in a column beside the board. The cards get nearly the whole height. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --chrome-h: 52px; }
  .top { display: none; }
  .play { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .bar { display: contents; }
  .title { grid-area: 1 / 1; align-self: center; padding: 6px 4px; }
  .title h1 { font-size: 19px; }
  .hud, .hud-up .hud { position: static; grid-area: 1 / 1; justify-self: end; align-self: center; gap: 14px; padding-right: 4px; }
  .hud dt { font-size: 11px; }
  .hud dd { font-size: 16px; }
  .tools { grid-area: 1 / 2 / 3 / 3; display: flex; width: 66px; flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 6px 0; }
  .tools button { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 0; max-height: 54px; padding: 3px 2px; font-size: 11px; }
  .tools .long, .tools [data-act='redo'] { display: none; }
  .tools .short { display: inline; }
  .board-wrap { grid-area: 2 / 1; }
  .board, .board.g-table { height: max(240px, calc(100svh - var(--chrome-h))); }
  .board.g-pyramid, .board.g-tripeaks { height: max(220px, calc(100svh - var(--chrome-h))); }
}
@media (prefers-reduced-motion: reduce) {
  .news { animation: none; }
  .card, .toast { transition: none !important; }
  .card.flip, .card.shake, .card.hint .face, .card.hint .back { animation: none; }
}