* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
/* No pinch or double-tap zoom (scrolling still works); iOS also needs the gesture guard in app.js. */
html { touch-action: pan-x pan-y; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #123d25; color: #f3e6c4; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; }

/* ---------- shared ---------- */
/* A solid colour under the gradient: iOS 26 tints the status bar from the background colour of the view at the top, and
   with none (a gradient is an image) it kept the table's brown after you left the table. */
.felt { background: radial-gradient(ellipse at 50% 30%, #2f7d4f 0%, #1d5a37 55%, #123d25 100%) #123d25; }
.view { position: fixed; inset: 0; overflow-y: auto; }
.label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px 2px; opacity: .75; }
.btn { display: block; width: 100%; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 700; text-align: center; }
.btn.primary { background: linear-gradient(#f3d27a, #d4a640); color: #3a2a08; box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.btn.ghost { border: 1.5px solid rgba(243,230,196,.6); }
.small-btn { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; border: 1.5px solid rgba(243,230,196,.6); }
.card-face { position: relative; display: block; aspect-ratio: 320 / 466; }
.card-face img { display: block; width: 100%; height: 100%; border-radius: 6% / 4.2%; box-shadow: 0 4px 12px rgba(0,0,0,.45); }

/* ---------- main ---------- */
/* safe center: centred when it fits, scrolls from the top when it doesn't */
#view-main { display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 24px; padding: max(44px, env(safe-area-inset-top)) 26px 30px; }
.title { font-family: Georgia, serif; font-size: 32px; font-weight: 700; color: #f0c75e; }
.name-field { width: 100%; max-width: 340px; }
.name-field input { width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 16px; background: rgba(0,0,0,.3); color: #f3e6c4; border: 1px solid rgba(243,230,196,.35); }
.menu-cards { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 20px 38px; }
.menu-card { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.menu-card .card-face { width: 104px; transition: translate .15s; }
.menu-card:active .card-face { translate: 0 -4px; }
.menu-card .tag { font-family: Georgia, serif; font-size: 16px; font-weight: 700; color: #f0c75e; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.tilt-left .card-face { rotate: -7deg; }
.tilt-right .card-face { rotate: 6deg; }
.tilt-slight .card-face { rotate: -2deg; }
#btn-settings { grid-column: 1 / -1; }

/* ---------- sheets ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.45); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px;
         padding: 22px 22px max(26px, env(safe-area-inset-bottom)); background: #fffdf7; color: #1a1a1a; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.35); }
.sheet-title { font-family: Georgia, serif; font-size: 22px; }
.sheet-sub { font-size: 13px; color: #6b5f4a; }
.sheet .small-btn { border-color: #ddd2b8; }
.sheet-tall { max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; }
/* How to play: one text, in a sheet on the main screen and in a popup on the table */
.rules-body { display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 14px; line-height: 1.45; color: #2a2418; }
.rules-body .rules-title { font-family: Georgia, serif; font-size: 22px; }
.rules-body h3 { margin-top: 6px; font-family: Georgia, serif; font-size: 16px; color: #1a1a1a; }
.rules-body ul { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; }
.rules-body .rules-order { font-weight: 700; }
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice-row { display: flex; gap: 10px; }
.choice-list button, .choice-row button { padding: 14px; border-radius: 12px; border: 1.5px solid #ddd2b8; background: #f6f1e4; font-size: 16px; font-weight: 700; }
.choice-row button { flex: 1; font-size: 20px; }
.sheet-step { display: flex; flex-direction: column; gap: 12px; }
/* Friends / Computer on the New table sheet */
.seg { display: flex; padding: 3px; border-radius: 12px; background: #efe7d3; }
.seg button { flex: 1; padding: 9px; border: none; border-radius: 9px; background: none; color: #6b5f4a; font-size: 15px; font-weight: 700; }
.seg button.on { background: #fffdf7; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.join-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.join-form .btn { flex-basis: 100%; }
.code-input { flex: 1; min-width: 0; padding: 12px; border-radius: 10px; border: 1.5px solid #ddd2b8; background: #f6f1e4; font-size: 24px; font-weight: 700; letter-spacing: 6px; text-align: center; text-transform: uppercase; }
.theme-swatches { display: flex; gap: 10px; }
.swatch { position: relative; flex: 1; height: 64px; border-radius: 10px; border: 3px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.swatch span { position: absolute; left: 6px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; }
.style-tiles { display: flex; gap: 10px; }
.style-tile { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
              border: 1.5px solid #ddd2b8; background: #f6f1e4; font-size: 15px; font-weight: 700; }
.style-tile img { width: 30px; aspect-ratio: 320 / 466; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.style-vintage img { filter: sepia(.38) saturate(.85) contrast(.96) brightness(.98); }
/* The chosen table or card style: a dark ring and a check in the corner. */
.swatch.on, .style-tile.on { outline: 3px solid #1a1a1a; outline-offset: 2px; }
.style-tile.on { border-color: #1a1a1a; }
.swatch.on::after, .style-tile.on::after { content: "✓"; position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 22px; height: 22px;
                                           border-radius: 50%; background: #1a1a1a; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 2px #fffdf7; }

/* ---------- lobby ---------- */
#view-lobby { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: max(60px, env(safe-area-inset-top)) 26px max(30px, env(safe-area-inset-bottom)); text-align: center; }
.lobby-game { font-family: Georgia, serif; font-size: 24px; font-weight: 700; color: #f0c75e; }
.lobby-code-row { display: flex; align-items: center; gap: 12px; }
/* Its labels share one cell, so the button is always as wide as the longest and the code never moves. */
#btn-copy { display: inline-grid; white-space: nowrap; }
#btn-copy span { grid-area: 1 / 1; visibility: hidden; }
#btn-copy span.on { visibility: visible; }
.lobby-code { font-family: Georgia, serif; font-size: 60px; font-weight: 700; letter-spacing: .14em; color: #fffdf7; user-select: all; -webkit-user-select: all; }
.lobby-hint { max-width: 290px; font-size: 14px; opacity: .75; }
.lobby-count { margin-top: 18px; font-weight: 700; }
.lobby-seats { display: grid; gap: 10px; width: 100%; max-width: 340px; list-style: none; }
.lobby-seats li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid transparent; border-radius: 14px; background: rgba(0,0,0,.3); text-align: left; font-weight: 600; } /* same border as an open seat: taking one doesn't shrink it */
.lobby-seats .avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f0c75e; color: #3a2a08; font-family: Georgia, serif; font-size: 17px; font-weight: 700; }
.lobby-seats li.taken::after { content: "✓"; margin-left: auto; color: #7fd18b; font-weight: 700; }
.lobby-seats li.offline { opacity: .55; }
.lobby-seats li.open { background: none; border: 1.5px dashed rgba(243,230,196,.4); }
.lobby-seats li.open .avatar { background: none; border: 1.5px dashed rgba(243,230,196,.5); }
.lobby-groups { display: grid; gap: 14px; width: 100%; max-width: 340px; }
.lobby-team { display: grid; gap: 8px; }
.team-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: .75; text-align: left; }
.lobby-seats li.open { cursor: pointer; }
.lobby-seats li.open:hover, .lobby-seats li.open:active { background: rgba(0,0,0,.18); border-color: rgba(243,230,196,.7); }
.lobby-seats li.me { box-shadow: 0 0 0 2px #f0c75e; }
.lobby-seats li.computer .avatar { background: rgba(243,230,196,.18); font-size: 20px; }
.lobby-seats li.computer::after { content: none; }
.lobby-seats .seat-add, .lobby-seats .seat-remove { margin-left: auto; padding: 6px 10px; border: 1px solid rgba(243,230,196,.45); border-radius: 999px; color: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
.lobby-seats .seat-remove { width: 32px; height: 32px; padding: 0; }
.lobby-seats .seat-add:hover, .lobby-seats .seat-remove:hover { background: rgba(243,230,196,.12); }
.lobby-unseated { min-height: 1.4em; font-size: 14px; line-height: 1.4; opacity: .75; } /* keeps its line when empty, so nothing moves */
#view-lobby .btn { max-width: 340px; margin-top: auto; }

/* ---------- desktop: same layout, sized for a big screen ---------- */
@media (min-width: 900px) and (min-height: 600px) {
  #view-main { gap: 40px; }
  .title { font-size: 76px; }
  .name-field { max-width: 440px; }
  .name-field input { padding: 15px 18px; font-size: 20px; border-radius: 12px; }
  .menu-cards { grid-template-columns: repeat(3, auto); gap: 56px; margin-top: 10px; }
  #btn-settings { grid-column: auto; }
  .menu-card { gap: 16px; }
  .menu-card .card-face { width: 180px; }
  .menu-card .tag { font-size: 25px; }

  #view-lobby { justify-content: safe center; gap: 14px; }
  .lobby-game { font-size: 40px; }
  .lobby-code-row { gap: 22px; margin-top: 8px; }
  .lobby-code { font-size: 120px; line-height: 1.1; }
  #btn-copy { padding: 12px 22px; font-size: 20px; border-radius: 10px; }
  #btn-lobby-rules { padding: 8px 16px; font-size: 16px; border-radius: 10px; }
  .lobby-hint { max-width: none; font-size: 18px; }
  .lobby-count { margin-top: 30px; font-size: 20px; }
  .lobby-seats { grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px; }
  .lobby-seats li { padding: 18px 22px; font-size: 20px; }
  .lobby-seats .avatar { width: 48px; height: 48px; font-size: 22px; }
  .lobby-groups { max-width: 720px; }
  .lobby-groups.teams { grid-template-columns: 1fr 1fr; gap: 22px; }
  .lobby-groups.teams .lobby-seats { grid-template-columns: 1fr; }
  .team-label { font-size: 15px; }
  .lobby-unseated { font-size: 17px; }
  #view-lobby .btn { max-width: 240px; margin-top: 42px; padding: 15px; font-size: 18px; }
}

/* ---------- table ---------- */
#view-table { overflow: hidden; background: var(--edge, #000); } /* the strips by the notch and home bar look like more table */
.table-frame { position: absolute; inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /* clear of the notch and home bar */
               container-type: size; --bar: clamp(34px, 9cqh, 52px);
               /* How far past the frame, on each of the table's own sides, the screen goes on (the notch and home-bar strips). */
               --bleed-t: env(safe-area-inset-top); --bleed-r: env(safe-area-inset-right); --bleed-b: env(safe-area-inset-bottom); --bleed-l: env(safe-area-inset-left); }
/* Portrait phone: lay the landscape table on its side so it reads with the phone turned. */
#view-table.rotated .table-frame { inset: auto; top: env(safe-area-inset-top); left: env(safe-area-inset-left);
                                   width: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
                                   width: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right));
                                   transform-origin: top left; transform: rotate(90deg) translateY(-100%);
                                   /* turned a quarter: the table's top faces the screen's right, its right the screen's bottom, and so on */
                                   --bleed-t: env(safe-area-inset-right); --bleed-r: env(safe-area-inset-bottom); --bleed-b: env(safe-area-inset-left); --bleed-l: env(safe-area-inset-top); }
.table { position: absolute; inset: 0; overflow: hidden; }
.surface { position: absolute; inset: var(--bar) calc(-1 * var(--bleed-r)) calc(-1 * var(--bleed-b)) calc(-1 * var(--bleed-l)); }
.bar-bleed { position: absolute; top: calc(-1 * var(--bleed-t)); left: calc(-1 * var(--bleed-l)); right: calc(-1 * var(--bleed-r)); height: calc(var(--bar) + var(--bleed-t));
             background: var(--bar-bg); border-bottom: 3px solid var(--bar-edge); box-shadow: 0 2px 6px rgba(0,0,0,.35); } /* the bar, drawn on out under the notch / home bar */
.surface > * { position: absolute; display: none; } /* each theme turns on the layers it uses */
/* The bar above the table: menu, scores, round. The table's surface starts below it. */
.table { --hand-w: min(68cqw, 94cqw - 208px); } /* the widest a hand gets: clear of the corner buttons (3cqw + 96px + a gap, each side) */
@container (max-height: 500px) { .table { --hand-w: min(68cqw, 94cqw - 164px); } } /* phones: smaller corner buttons (72px) */
/* Three columns with equal sides, so the scores sit on the table's centre line, above the top player and the hand. */
.table-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; height: var(--bar); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 14px;
             background: var(--bar-bg); border-bottom: 3px solid var(--bar-edge); color: var(--plate-fg); font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.table-menu-btn { justify-self: start; width: 34px; height: 100%; font-size: 18px; }
@container (max-height: 500px) { .table-menu-btn { width: 44px; font-size: 26px; line-height: 1; } } /* phones: a bigger target for a thumb */
.table-menu { position: absolute; top: calc(var(--bar) + 4px); left: 14px; z-index: 10; overflow: hidden; border-radius: 10px; background: #fffdf7; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.table-menu button { display: block; padding: 12px 18px; color: #1a1a1a; font-weight: 700; }
.seat { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.seat-top { top: calc(var(--bar) + 10px); left: 50%; transform: translateX(-50%); }
.seat-left { left: 22px; top: 34%; }
.seat-right { right: 22px; top: 34%; }
.plate { position: relative; display: flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 13px; white-space: nowrap; background: var(--plate-bg); color: var(--plate-fg); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.plate .name { max-width: 18cqw; overflow: hidden; text-overflow: ellipsis; } /* long names stay clear of the play area */
.plate .count { font-weight: 700; color: var(--plate-count); }
.plate .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.plate.offline { opacity: .6; }
.plate.offline .dot { background: #9ca3af; }
.backs { display: flex; }
.card-back { width: 22px; height: 32px; margin-left: -14px; border-radius: 3px; background: var(--card-back); border: 1.5px solid var(--card-back-edge); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.card-back:first-child { margin-left: 0; }
/* Between the top player's name and the turn row, so it never covers either. */
.play-area { position: absolute; left: 50%; top: calc(var(--bar) + 80px); bottom: calc(3cqh + var(--card-w) * 1.66 + 60px); z-index: 3; width: 42%; transform: translateX(-50%); border-radius: 16px; border: 1.5px dashed transparent; } /* unseen until a drag: then it shows where to drop */

/* ---------- murlan table ---------- */
/* Sizes follow the table box (cq units), so they're right when the table is turned on a portrait phone. */
.table { container-type: size; --card-w: min(12cqh, 7.4cqw); }
@container (max-height: 500px) { .table { --card-w: min(13.5cqh, 8.3cqw); } } /* phones: a touch bigger */
.plate.turn { background: linear-gradient(#f3d27a, #d4a640); color: #3a2a08; font-weight: 700;
              box-shadow: 0 0 0 2px #fff3cf, 0 0 10px 3px rgba(240,199,94,.7); animation: turn-glow 1.4s ease-in-out infinite alternate; }
.plate.turn .count { color: #3a2a08; }
@keyframes turn-glow { from { box-shadow: 0 0 0 2px #fff3cf, 0 0 6px 1px rgba(240,199,94,.45); } }
/* PASS: a red stamp across the player's cards, which grey out (above your name for you). */
.backs { position: relative; }
.seat.passed .card-back { filter: grayscale(.7) brightness(.7); }
.stamp { position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% -50%; rotate: -14deg; padding: 1px 8px; border: 2.5px solid #e2464f; border-radius: 4px;
         background: rgba(20,0,0,.4); color: #ff5a63; font: 900 14px/1.1 system-ui, sans-serif; letter-spacing: 2px; text-shadow: 0 1px 1px rgba(0,0,0,.5); white-space: nowrap; }
.seat-me .stamp { top: auto; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; }
@container (max-height: 340px) { .seat-me .stamp { top: 50%; bottom: auto; left: auto; right: calc(100% + 8px); translate: 0 -50%; } } /* no room above on the smallest phones */
.stamp.landing { animation: stamp .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes stamp { from { opacity: 0; scale: 1.8; } }
/* Names shrink (ellipsis) so the scores always show; no overflow clip, so the +N under a score shows too. */
.scoreboard { display: flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; max-width: 50cqw; white-space: nowrap; }
.scoreboard span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scoreboard .sep { flex: none; }
.scoreboard b { flex: none; font-size: 15px; color: var(--plate-count); }
.score-round { justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: .7; }
/* The pile: this trick's plays stacked, each a little turned, the newest on top. */
.pile { position: absolute; inset: 0; }
.pile-cards { position: absolute; left: 50%; top: 46%; display: flex; --w: var(--card-w);
              --gap: min(calc(var(--w) * -.45), calc((38cqw - var(--n, 1) * var(--w)) / max(1, var(--n, 1) - 1)));
              transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)); }
.pile-cards.under { filter: brightness(.8); }
.pile-cards .card-face { flex: none; width: var(--w); margin-left: var(--gap); }
.pile-cards .card-face:first-child { margin-left: 0; }
.pile-who { position: absolute; left: 50%; top: calc(46% + var(--card-w) * 1.46 / 2 + 8px); transform: translateX(-50%); white-space: nowrap;
            padding: 2px 9px; border-radius: 999px; background: var(--plate-bg); color: var(--plate-fg); font-size: 12px; }
.hand { position: absolute; left: 50%; bottom: 3cqh; z-index: 4; width: max-content; transform: translateX(-50%); display: flex;
        --gap: min(4px, calc((var(--hand-w) - var(--n, 1) * var(--card-w)) / max(1, var(--n, 1) - 1))); }
.hand-card { flex: none; width: var(--card-w); margin-left: var(--gap); transition: translate .12s, transform .18s ease-out;
             touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hand-card img { -webkit-user-drag: none; }
/* Dragged to the pile (drag.js): the cards follow your finger, the pile lights up while they're over it. */
.hand-card.dragging { z-index: 1; transition: translate .12s; cursor: grabbing; }
.hand-card.dragging .card-face img { box-shadow: 0 0 0 2px #f0c75e, 0 10px 22px rgba(0,0,0,.55); }
.hand-card.dropped { transition: translate .12s; }
.play-area { transition: background-color .12s, border-color .12s; }
.play-area.drag-on { border-color: rgba(240,199,94,.55); }
.play-area.drop-over { border-style: solid; border-color: #f0c75e; background: rgba(240,199,94,.14); }
.hand-card:first-child { margin-left: 0; }
.hand-card.selected { translate: 0 -14%; }
.hand-card.selected .card-face img { box-shadow: 0 0 0 2px #f0c75e, 0 4px 12px rgba(0,0,0,.45); }
.hand-card.dim { filter: brightness(.55); }
/* The card you were just given in the swap stands up out of your hand, glowing, then settles in. */
.hand-card.received { animation: received 3.6s var(--since, 0ms) ease-in-out both; }
.hand-card.received .card-face img { animation: received-glow 3.6s var(--since, 0ms) ease-in-out both; }
@keyframes received { 0% { translate: 0 0; } 11%, 81% { translate: 0 -30%; } 100% { translate: 0 0; } }
@keyframes received-glow { 0%, 100% { box-shadow: none; } 11%, 81% { box-shadow: 0 0 0 2px #f0c75e, 0 0 14px 4px rgba(240,199,94,.75); } }
@media (prefers-reduced-motion: reduce) { .hand-card.received { animation: none; translate: 0 -30%; } .hand-card.received .card-face img { animation: none; box-shadow: 0 0 0 2px #f0c75e; } }
/* The deal (deal.js): backs fly from the middle; your hand and the turn row wait, the fans fill up. */
.deal-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.deal-layer .card-back { position: absolute; margin: 0; }
.deal-card, .deal-deck { width: calc(var(--card-w) * .55); height: auto; aspect-ratio: 320 / 466; transform: translate(-50%, -50%); }
.table.dealing .hand, .table.dealing .turn-note, .table.dealing .corner-btn { visibility: hidden; }
.table[data-fan="0"] .seats .card-back, .table[data-fan="1"] .seats .card-back:nth-child(n+2),
.table[data-fan="2"] .seats .card-back:nth-child(n+3), .table[data-fan="3"] .seats .card-back:nth-child(n+4),
.table[data-fan="4"] .seats .card-back:nth-child(n+5) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .plate.turn, .stamp.landing { animation: none; } }
/* Out of the round: a gold medal with their place where their cards were, and a dimmer name. */
.medal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 11px system-ui, sans-serif; color: #3a2a08;
         background: radial-gradient(circle at 35% 30%, #fff1b8, #f0c75e 45%, #b8871f); box-shadow: 0 0 0 2px #fff3cf, 0 2px 6px rgba(0,0,0,.5); }
.seat.out .plate { opacity: .75; }

/* Reactions: tap your own name for the picker; a reaction plays over the name of whoever sent it, on every screen */
.plate.mine { cursor: pointer; }
.plate.mine:focus-visible { outline: 2px solid #f0c75e; outline-offset: 2px; }
.react-picker { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; z-index: 7; display: flex; gap: 2px; padding: 4px 6px;
                border-radius: 999px; background: rgba(20,14,8,.88); box-shadow: 0 4px 12px rgba(0,0,0,.45); animation: picker-in .15s ease-out both; }
@keyframes picker-in { from { opacity: 0; translate: -50% 6px; } }
.react-choice { width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1; }
.react-choice:hover, .react-choice:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.reaction { position: absolute; left: 50%; bottom: calc(100% + 2px); translate: -50% 0; z-index: 6; pointer-events: none;
            font-size: clamp(26px, 9cqh, 44px); line-height: 1; animation: reaction-out 2.8s var(--since, 0ms) ease-in both; }
.seat-top .reaction { bottom: auto; top: 50%; left: calc(100% + 8px); translate: 0 -50%; } /* no room above the top seat, under the bar */
.reaction-face { display: inline-block; }
.reaction-bit { position: absolute; font: 800 .4em system-ui, sans-serif; opacity: 0; }
@keyframes reaction-out { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* shocked: pops, jolts, two "!" */
.reaction-shocked .reaction-face { animation: react-shock 2.8s var(--since, 0ms) both; }
@keyframes react-shock { 0% { scale: 0; } 12% { scale: 1.6; } 20% { scale: .95; } 26% { scale: 1.1; translate: 0 -8px; } 32%, 100% { scale: 1; translate: 0 0; } }
.reaction-shocked .reaction-bit { color: #fff; text-shadow: 0 1px 2px #000; animation: react-bang 2.8s var(--since, 0ms) both; }
.reaction-shocked .b1 { left: -.3em; top: -.1em; rotate: -20deg; }
.reaction-shocked .b2 { right: -.3em; top: -.15em; rotate: 20deg; animation-delay: calc(var(--since, 0ms) + 80ms); }
@keyframes react-bang { 0%, 14% { opacity: 0; scale: .3; } 22% { opacity: 1; scale: 1.3; } 60% { opacity: 1; scale: 1; } 75%, 100% { opacity: 0; } }
/* laughing: bounces and rocks, "ha" floats off */
.reaction-laughing .reaction-face { transform-origin: 50% 90%; animation: react-laugh 2.8s var(--since, 0ms) both; }
@keyframes react-laugh { 0% { scale: 0; } 10% { scale: 1.2; } 16% { scale: 1; rotate: 0deg; }
  24% { rotate: -16deg; translate: 0 -5px; } 32% { rotate: 14deg; translate: 0 0; } 40% { rotate: -14deg; translate: 0 -5px; } 48% { rotate: 12deg; translate: 0 0; }
  56% { rotate: -10deg; translate: 0 -4px; } 64% { rotate: 8deg; translate: 0 0; } 72%, 100% { rotate: 0deg; } }
.reaction-laughing .reaction-bit { color: #ffe08a; text-shadow: 0 1px 2px #000; font-size: .32em; animation: react-haha 2.8s var(--since, 0ms) both; }
.reaction-laughing .b1 { left: -.5em; top: 0; }
.reaction-laughing .b2 { right: -.55em; top: -.25em; animation-delay: calc(var(--since, 0ms) + 350ms); }
@keyframes react-haha { 0%, 12% { opacity: 0; translate: 0 4px; } 22% { opacity: 1; } 60% { opacity: 1; translate: 0 -10px; } 75%, 100% { opacity: 0; translate: 0 -14px; } }
/* angry: shakes, goes red, lets off steam */
.reaction-angry .reaction-face { animation: react-angry 2.8s var(--since, 0ms) both; }
@keyframes react-angry { 0% { scale: 0; filter: none; } 10% { scale: 1.1; } 18% { scale: 1; filter: drop-shadow(0 0 0 #f00); }
  22%, 30%, 38%, 46%, 54% { translate: -3px 0; } 26%, 34%, 42%, 50%, 58% { translate: 3px 0; }
  40% { scale: 1.25; filter: drop-shadow(0 0 8px #ff2a2a) saturate(1.6); } 62%, 100% { translate: 0 0; scale: 1.1; filter: drop-shadow(0 0 5px #ff2a2a) saturate(1.4); } }
.reaction-angry .reaction-bit { width: .3em; height: .3em; border-radius: 50%; background: rgba(255,255,255,.85); filter: blur(1.5px); animation: react-puff 2.8s var(--since, 0ms) both; }
.reaction-angry .b1 { left: -.1em; top: -.1em; }
.reaction-angry .b2 { right: -.1em; top: -.15em; animation-delay: calc(var(--since, 0ms) + 200ms); }
@keyframes react-puff { 0%, 30% { opacity: 0; scale: .4; } 40% { opacity: .9; } 70% { opacity: 0; scale: 1.8; translate: 0 -16px; } 100% { opacity: 0; } }
/* asleep: nods off, z z z drift up */
.reaction-asleep .reaction-face { transform-origin: 50% 100%; animation: react-sleep 2.8s var(--since, 0ms) both; }
@keyframes react-sleep { 0% { scale: 0; } 12% { scale: 1; rotate: 0deg; } 35% { rotate: 14deg; translate: 0 2px; } 55% { rotate: 6deg; } 75%, 100% { rotate: 16deg; translate: 0 3px; } }
.reaction-asleep .reaction-bit { color: #cfe3ff; text-shadow: 0 1px 2px #000; animation: react-zzz 2.8s var(--since, 0ms) both; }
.reaction-asleep .b1 { right: -.15em; top: 0; font-size: .26em; animation-delay: calc(var(--since, 0ms) + 300ms); }
.reaction-asleep .b2 { right: -.4em; top: -.25em; font-size: .34em; animation-delay: calc(var(--since, 0ms) + 700ms); }
.reaction-asleep .b3 { right: -.65em; top: -.55em; font-size: .42em; animation-delay: calc(var(--since, 0ms) + 1100ms); }
@keyframes react-zzz { 0% { opacity: 0; translate: -6px 6px; } 15% { opacity: 1; } 60% { opacity: 1; translate: 4px -10px; } 80%, 100% { opacity: 0; translate: 8px -16px; } }
@media (prefers-reduced-motion: reduce) { .reaction-face, .reaction-bit, .react-picker { animation: none; } }
/* Someone went out and play goes on: a short note over the top of the pile. */
.out-note { position: absolute; left: 50%; top: calc(var(--bar) + 106px); z-index: 6; translate: -50% -50%; display: grid; justify-items: center;
            padding: 5px 16px; border-radius: 999px; background: linear-gradient(#f3d27a, #d4a640); color: #3a2a08; white-space: nowrap; pointer-events: none;
            box-shadow: 0 3px 10px rgba(0,0,0,.45); animation: out-note 2.6s var(--since, 0ms) ease-out both; }
.out-note-text { font-size: 14px; font-weight: 700; }
.out-note-sub { font-size: 11px; font-weight: 600; opacity: .75; }
@keyframes out-note { 0% { opacity: 0; scale: .8; } 10%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .out-note { animation: none; } }

/* ---------- easter eggs ---------- */
.plate .bot-mark { margin-right: -3px; font-size: 1.05em; line-height: 1; }
.table.shake { animation: bomb-shake .52s ease-out; }
@keyframes bomb-shake { 0%, 100% { translate: 0 0; } 12% { translate: -7px 3px; } 25% { translate: 6px -4px; } 38% { translate: -5px -2px; } 52% { translate: 4px 3px; } 68% { translate: -2px 1px; } 84% { translate: 1px -1px; } }
.lucky { position: absolute; left: 50%; top: 42%; z-index: 7; translate: -50% -50%; display: grid; justify-items: center; gap: 8px; padding: 18px 28px; border-radius: 18px;
         background: rgba(24,16,6,.94); color: #fffdf7; text-align: center; box-shadow: 0 8px 28px rgba(0,0,0,.5); pointer-events: none; animation: lucky 4s ease-out both; }
.lucky-face { font-size: 64px; line-height: 1; animation: lucky-face 4s ease-in-out both; }
.lucky-text { font-family: Georgia, serif; font-size: 20px; font-weight: 700; white-space: nowrap; }
@keyframes lucky { 0% { opacity: 0; scale: .6; } 10% { opacity: 1; scale: 1.06; } 16%, 85% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes lucky-face { 0%, 30% { rotate: 0deg; } 40% { rotate: -12deg; } 50% { rotate: 10deg; } 60%, 100% { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .table.shake, .lucky, .lucky-face { animation: none; } }
/* Your name above your cards (clear of a lifted card), with the note beside it: only for the swap
   and the first lead, since whose turn it is shows on the names. */
.my-row { position: absolute; left: 50%; bottom: calc(3cqh + var(--card-w) * 1.46 * 1.14 + 6px); z-index: 5; transform: translateX(-50%);
          display: flex; align-items: center; gap: 8px; width: max-content; max-width: 94cqw; white-space: nowrap; }
.my-row .seat-me { position: relative; }
.turn-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 3px 12px; border-radius: 999px; background: var(--plate-bg); color: var(--plate-fg); font-size: 13px; font-weight: 700; }
.turn-note:empty { display: none; }
/* Two stacked in each corner, under your thumbs and clear of your cards: Give up over Clear on the left,
   Pass over Play on the right. The ones you use most sit at the bottom. */
.corner-btn { position: absolute; bottom: 4cqh; z-index: 5; width: auto; min-width: 96px; padding: 9px 20px; border-radius: 999px; font-size: 16px; }
#btn-giveup, #btn-clear { left: 3cqw; }
#btn-pass, #btn-play { right: 3cqw; }
#btn-giveup, #btn-pass { bottom: calc(4cqh + 56px); } /* a gap between the two, so Pass isn't hit for Play */
@container (max-height: 500px) { /* phones: smaller, so they stay clear of your cards */
  .corner-btn { min-width: 72px; padding: 6px 14px; font-size: 13px; }
  #btn-giveup, #btn-pass { bottom: calc(4cqh + 44px); }
}
.corner-btn.ghost { border: none; background: var(--plate-bg); color: var(--plate-fg); }
#btn-giveup { color: #ffb4a8; }
.corner-btn:disabled { opacity: .45; cursor: default; }
/* A hand thrown in (see throw.js): face up all over the table, under the seats and the pile */
.thrown-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.thrown-card { position: absolute; width: var(--card-w); translate: -50% -50%; opacity: .75; }
.thrown-card.flying { animation: thrown .8s var(--since, 0ms) cubic-bezier(.2, .7, .3, 1) both; }
@keyframes thrown { from { left: var(--from-x); top: var(--from-y); rotate: 0deg; opacity: 1; } 75% { opacity: 1; } }
.seat-me .gave-up-tag { position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; }
.gave-up-tag { padding: 3px 9px; border-radius: 999px; background: rgba(120, 20, 20, .8); color: #fff; font: 800 11px system-ui, sans-serif; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .thrown-card.flying { animation: none; } }
.hand.locked .hand-card { cursor: default; }
.reveal { position: absolute; left: 50%; top: 46%; z-index: 7; transform: translate(-50%, -50%); /* centre stage, over the pile: play waits for it */ display: flex; align-items: flex-end; gap: 12px;
          padding: 8px 14px; border-radius: 14px; background: var(--plate-bg); color: var(--plate-fg); font-size: 12px; }
.reveal-title { align-self: center; font-weight: 700; }
.reveal-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.reveal-cards { display: flex; gap: 4px; }
.reveal-item .card-face { width: calc(var(--card-w) * .7); }
/* The end of a round (spotlight.js): the table dims under the bar, the winner's seat stays lit with a crown. */
.spot-shade { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.55); animation: fade-in .4s; }
.table.spotlight .spot-winner { z-index: 7; }
.crown { position: absolute; left: 50%; bottom: calc(100% + 2px); translate: -50% 0; color: #f0c75e; font-size: 22px; line-height: 1;
         text-shadow: 0 2px 4px rgba(0,0,0,.6); animation: crown .5s ease-out; }
.seat-top .crown { position: static; translate: none; font-size: 16px; margin-right: -2px; order: -1; } /* no room above the top seat */
.ribbon { position: absolute; left: 50%; top: 46%; z-index: 8; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; width: max-content; max-width: min(86cqw, 64cqw - 132px); /* clear of the side seats */
          padding: 10px 26px; border-radius: 8px; background: linear-gradient(#f3d27a, #d4a640); color: #3a2a08; text-align: center;
          box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: ribbon .35s ease-out; }
.ribbon-text { font: 700 20px Georgia, serif; }
.ribbon.big { padding: 16px 34px; cursor: pointer; }
.ribbon.big .ribbon-text { font-size: 28px; }
.ribbon-hint { font-size: 12px; font-weight: 700; opacity: .7; }
.scoreboard b { position: relative; }
.gain { position: absolute; left: 50%; top: 100%; translate: -50% 0; color: #7fe08f; font-size: 12px; font-style: normal; font-weight: 800; animation: gain 1.8s .4s both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes crown { from { opacity: 0; translate: -50% 8px; } }
@keyframes ribbon { from { opacity: 0; scale: .8; } }
@keyframes gain { 0% { opacity: 0; translate: -50% -6px; } 25% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% 8px; } }
@media (prefers-reduced-motion: reduce) { .spot-shade, .crown, .ribbon, .gain { animation: none; } }
.overlay { position: absolute; left: 50%; top: 45%; z-index: 8; transform: translate(-50%, -50%); width: max-content; max-width: 86cqw; max-height: 80cqh; overflow-y: auto;
           display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 16px;
           background: #fffdf7; color: #1a1a1a; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.overlay h2 { font-family: Georgia, serif; font-size: 20px; }
.overlay p { font-size: 14px; color: #4a4030; }
/* Same size as the leave popup's buttons. */
.overlay .choice-row { width: auto; min-width: 240px; max-width: 100%; }
.overlay .choice-row button { padding: 12px; font-size: 15px; overflow-wrap: anywhere; }
.overlay button.on { background: linear-gradient(#f3d27a, #d4a640); border-color: #d4a640; color: #3a2a08; }
.overlay-buttons { display: grid; gap: 8px; width: 240px; }
.overlay-buttons button { padding: 12px; border-radius: 12px; border: 1.5px solid #ddd2b8; background: #f6f1e4; font-weight: 700; white-space: nowrap; }
/* Our own confirm, drawn on the table so it turns with it on a portrait phone. */
.confirm { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(0,0,0,.45); }
.confirm-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 86cqw; padding: 18px 24px; border-radius: 16px;
               background: #fffdf7; color: #1a1a1a; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.confirm-box h2 { font-family: Georgia, serif; font-size: 20px; }
.confirm-box p { font-size: 14px; color: #4a4030; }
.confirm-box .overlay-buttons { grid-template-columns: 1fr 1fr; width: auto; min-width: 240px; } /* one line each: wider for a longer label */
.confirm-box .overlay-buttons.one { grid-template-columns: 1fr; }
.confirm-box.rules-box { width: min(560px, 90cqw); max-width: none; max-height: 88cqh; padding: 14px 18px; }
.rules-box .rules-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; align-self: stretch; }
.overlay-buttons button.danger { background: #b3121f; border-color: #b3121f; color: #fff; }
.overlay .countdown { font-family: Georgia, serif; font-size: 34px; font-weight: 700; }
.score-list { display: grid; gap: 3px; min-width: 200px; font-size: 14px; }
.score-list div { display: flex; justify-content: space-between; gap: 16px; }
.score-list div span:last-child { font-weight: 700; }
.score-target { font-size: 12px; color: #6b5f4a; }
/* The deck to cut: two rows of 27 overlapping backs, small enough that the panel never scrolls. */
.cut-deck { --w: min(4.8cqw, 8cqh); --s: min(2.4cqw, calc((70cqw - var(--w)) / 26));
            display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px;
            max-width: calc(27 * var(--s) + var(--w) - var(--s) + 1px); padding-left: calc(var(--w) - var(--s)); }
.cut-card { flex: none; width: var(--w); aspect-ratio: 320 / 466; margin-left: calc(var(--s) - var(--w)); border-radius: 3px; transition: translate .1s;
            background: var(--card-back); border: 1.5px solid var(--card-back-edge); box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.cut-card:hover { translate: 0 -5px; }
.overlay .cut-pick { width: var(--card-w); }

/* ---------- toast & banner ---------- */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 40; max-width: 90vw; transform: translateX(-50%);
         padding: 11px 16px; border-radius: 12px; background: #1a1a1a; color: #fff; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
body.table-rotated .toast { left: max(40px, env(safe-area-inset-left)); bottom: auto; top: 50%; max-width: 90vh; transform: translate(-50%, -50%) rotate(90deg); }
body.table-rotated .banner { left: auto; right: max(24px, env(safe-area-inset-right)); top: 50%; transform: translate(50%, -50%) rotate(90deg); }
/* Always there along the top, only its colour changes (ui.js): iOS 26 tints the status bar from a fixed full-width
   element at the top, and kept the table's brown once the table view that gave it was hidden. Nearly see-through, so it
   doesn't show; iOS blends it over the page background, which ui.js keeps the same colour. It takes taps (iOS finds it
   the way a tap would), so nothing tappable sits in those top 12px. */
.status-tint { position: fixed; top: 0; left: 0; right: 0; height: 12px; z-index: 50; }
.banner { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; z-index: 40; transform: translateX(-50%);
          padding: 6px 14px; border-radius: 999px; background: #b45309; color: #fff; font-size: 13px; font-weight: 700; }