@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #eee8d3;
  --muted: #9e9a91;
  --paper: #0e0d13;
  --paper-deep: #1b1822;
  --felt: #17382f;
  --felt-deep: #091a18;
  --felt-line: #527363;
  --cream: #fff8e6;
  --coral: #c4687e;
  --coral-deep: #8d3c57;
  --mustard: #d8b35e;
  --line: rgba(239, 232, 208, .14);
  --line-strong: rgba(216, 179, 94, .42);
  --shadow: 0 28px 70px rgba(0, 0, 0, .42);
  color: var(--ink);
  background: var(--paper);
  font-family: "Space Grotesk", "Avenir Next", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% -8%, rgba(216, 179, 94, .13), transparent 27rem),
    radial-gradient(circle at 94% 18%, rgba(124, 61, 105, .17), transparent 30rem),
    linear-gradient(145deg, #111018 0%, var(--paper) 56%, #0b0b10 100%);
}

button, summary { font: inherit; }
button { cursor: pointer; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--mustard); outline-offset: 4px; }

.app-shell { min-height: 100vh; }
.topbar { max-width: 1440px; margin: 0 auto; padding: 24px clamp(20px, 4vw, 62px); display: flex; align-items: center; gap: 30px; border-bottom: 1px solid rgba(239, 232, 208, .08); }
.brand { color: var(--ink); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 15px; letter-spacing: .02em; font-weight: 600; }.brand b { color: var(--mustard); font-weight: 500; }
.brand-glyph { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--mustard); background: #191620; font-size: 16px; box-shadow: 0 0 0 4px rgba(216, 179, 94, .05); }
.table-meta { margin: auto; display: flex; gap: 12px; align-items: center; color: var(--muted); font: 10px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .10em; }.table-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 8px rgba(196, 104, 126, .75); }
.top-actions { display: flex; gap: 18px; align-items: center; }.text-button { border: 0; padding: 8px 0; color: var(--mustard); background: transparent; font-size: 11px; letter-spacing: .10em; text-transform: uppercase; }.text-button:hover { color: var(--cream); }
.rules-mobile { display: none; }.difficulty-menu { position: relative; }.difficulty-menu summary { display: flex; align-items: center; gap: 7px; padding: 8px 0; color: var(--muted); cursor: pointer; font: 10px/1 "DM Mono", monospace; list-style: none; text-transform: uppercase; letter-spacing: .06em; }.difficulty-menu summary::-webkit-details-marker { display: none; }.difficulty-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 9px rgba(196, 104, 126, .7); }.difficulty-popover { position: absolute; right: 0; top: 35px; z-index: 6; width: 190px; padding: 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: #17151f; box-shadow: var(--shadow); }.difficulty-popover > .eyebrow { display: block; margin: 2px 4px 8px; }.difficulty-option { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 9px 5px; border: 0; border-top: 1px solid var(--line); color: var(--muted); background: transparent; text-align: left; }.difficulty-option span { display: grid; gap: 3px; }.difficulty-option strong { color: var(--ink); font-size: 11px; }.difficulty-option small { font: 9px/1 "DM Mono", monospace; }.difficulty-option.is-active strong, .difficulty-option:hover strong { color: var(--mustard); }.difficulty-option.is-active { color: var(--mustard); }

.page-grid { max-width: 1440px; margin: 0 auto; padding: clamp(12px, 2svh, 25px) clamp(20px, 4vw, 62px) clamp(28px, 4svh, 58px); display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(24px, 4vw, 72px); }.play-column { min-width: 0; }
.score-strip { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; gap: clamp(12px, 1.5vw, 20px); max-width: 840px; margin: 0 auto clamp(10px, 1.9svh, 24px); }.score-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: clamp(54px, 5.7svh, 72px); padding: clamp(8px, 1svh, 12px) clamp(10px, 1.2vw, 16px); border: 1px solid var(--line); border-radius: 10px; background: rgba(239, 232, 208, .035); }.score-card.is-you { border-color: rgba(216, 179, 94, .34); background: linear-gradient(135deg, rgba(216, 179, 94, .11), rgba(239, 232, 208, .025)); }.score-copy { display: grid; gap: clamp(5px, .55svh, 7px); }.score-copy small { display: flex; align-items: baseline; gap: 5px; color: var(--muted); font: 9px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .03em; }.score-copy small b { color: var(--cream); font: 600 15px/1 "Space Grotesk", sans-serif; animation: tally-bump .36s ease both; }.score-card.is-you .score-copy small b { color: var(--mustard); }.score-values { display: grid; justify-items: end; gap: 4px; }.score-values strong { color: var(--cream); font: 600 clamp(23px, 2.1svh, 27px)/1 "Space Grotesk", sans-serif; letter-spacing: -.08em; animation: tally-bump .36s ease both; }.score-card.is-you .score-values strong { color: var(--mustard); }.score-values span { color: var(--muted); font: 8px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.score-label, .eyebrow { color: var(--muted); font: 10px/1 "DM Mono", monospace; letter-spacing: .10em; text-transform: uppercase; }.score-card.is-you .score-label { color: var(--mustard); }.score-middle { display: grid; gap: 9px; color: var(--muted); font: 10px/1 "DM Mono", monospace; text-align: center; text-transform: uppercase; letter-spacing: .08em; }.score-track { height: 4px; overflow: hidden; background: rgba(239, 232, 208, .10); border-radius: 5px; }.score-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--mustard)); transition: width .35s ease; }

.trick-ledger { max-width: 840px; margin: -9px auto 20px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(239, 232, 208, .025); }.ledger-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }.ledger-header strong { color: var(--muted); font: 9px/1 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }.ledger-slots { display: flex; gap: 7px; min-height: 31px; }.ledger-trick { min-width: 0; flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 7px; padding: 6px 8px; border-left: 2px solid var(--mustard); border-radius: 5px; background: rgba(216, 179, 94, .09); }.ledger-trick.rivals { border-left-color: var(--coral); background: rgba(196, 104, 126, .09); }.ledger-trick b { grid-row: 1 / -1; align-self: center; color: var(--mustard); font: 600 12px/1 "Space Grotesk", sans-serif; }.ledger-trick.rivals b { color: var(--coral); }.ledger-trick span { align-self: end; overflow: hidden; color: var(--cream); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.ledger-trick small { color: var(--muted); font: 7px/1 "DM Mono", monospace; text-transform: uppercase; white-space: nowrap; }.ledger-empty { align-self: center; color: var(--muted); font: 9px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }

.table-stage { position: relative; padding: 0 0 clamp(10px, 1.9svh, 24px); }.table-felt { --felt-height: clamp(250px, calc(100svh - 530px), 520px); container: felt / size; position: relative; height: var(--felt-height); min-height: 0; overflow: hidden; border: 1px solid rgba(216, 179, 94, .62); border-radius: 28px; background: radial-gradient(ellipse at 50% 43%, #204d3e 0%, var(--felt) 51%, var(--felt-deep) 100%); box-shadow: var(--shadow), 0 0 0 6px rgba(216, 179, 94, .055), inset 0 0 0 2px rgba(239, 232, 208, .07); }.table-felt::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(216, 179, 94, .28); border-radius: 20px; pointer-events: none; }.table-felt::after { content: "✦  TURNED UP  ✦"; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-8deg); color: rgba(216, 179, 94, .075); font: 600 clamp(24px, 4vw, 48px)/1 "Space Grotesk", sans-serif; letter-spacing: .16em; white-space: nowrap; pointer-events: none; }
.felt-stitch { position: absolute; width: 10px; height: 10px; border: 2px solid rgba(216, 179, 94, .55); border-radius: 50%; box-shadow: 0 0 12px rgba(216, 179, 94, .25); }.stitch-a { top: 43%; left: 15%; }.stitch-b { right: 15%; top: 43%; }
.table-center { position: absolute; inset: clamp(50px, calc(var(--felt-height) * .146), 76px) 16% clamp(40px, calc(var(--felt-height) * .138), 72px); display: grid; align-content: center; gap: clamp(12px, calc(var(--felt-height) * .035), 18px); z-index: 2; }.center-heading { max-width: 330px; margin: 0 auto; display: grid; gap: clamp(5px, calc(var(--felt-height) * .015), 8px); color: var(--cream); text-align: center; }.center-heading .eyebrow { color: #bfd1b4; }.center-heading strong { font: 600 clamp(15px, 1.27svh, 16px)/1.25 "Cormorant Garamond", Georgia, serif; letter-spacing: .01em; }.call-summary { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 1px auto 0; padding: 5px 10px; border: 1px solid rgba(216, 179, 94, .28); border-radius: 999px; color: var(--cream); background: rgba(8, 26, 22, .45); }.call-summary i { font-style: normal; font-size: 18px; line-height: 1; }.call-summary span { display: grid; gap: 2px; font: 10px/1 "DM Mono", monospace; text-align: left; text-transform: uppercase; letter-spacing: .03em; }.call-summary span b { color: var(--mustard); font-weight: 500; }.call-summary small { color: var(--muted); font: 7px/1 "DM Mono", monospace; }
.table-play-area { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 5vw, 74px); }.trick-zone { position: relative; width: clamp(170px, 24vw, 250px); height: clamp(110px, calc(var(--felt-height) - 170px), 190px); min-width: clamp(170px, 24vw, 250px); min-height: clamp(110px, calc(var(--felt-height) - 170px), 190px); }.trick-cards { position: relative; width: 100%; height: 100%; }.empty-trick { position: absolute; inset: clamp(15px, 2.3vw, 30px) clamp(22px, 2.4vw, 34px); display: grid; place-items: center; align-content: center; gap: 10px; color: rgba(225, 225, 198, .55); border: 1px dashed rgba(216, 179, 94, .42); border-radius: 12px; font: 10px/1.4 "DM Mono", monospace; text-align: center; text-transform: uppercase; letter-spacing: .06em; }.empty-trick i { font-style: normal; font-size: 20px; color: var(--mustard); text-shadow: 0 0 12px rgba(216, 179, 94, .4); }
.playing-card { position: relative; width: 68px; height: 96px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(25, 35, 30, .25); border-radius: 8px; color: #18211d; background: linear-gradient(145deg, #fff9e9, #e8ddc1); box-shadow: 0 7px 14px rgba(0, 0, 0, .34), 0 0 0 2px rgba(255, 248, 230, .10); }.playing-card::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(25, 61, 53, .18); border-radius: 5px; pointer-events: none; }.card-corner { position: absolute; top: 8px; left: 9px; display: grid; gap: 1px; font: 600 15px/1 "Space Grotesk", sans-serif; text-align: center; z-index: 1; }.card-corner i { font-style: normal; font-size: 13px; }.card-center-suit { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); font-size: 28px; opacity: .8; }.is-red { color: #a03e55; }.is-black { color: #294f42; }
.playing-card.is-playable { transform: translateY(0); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }.playing-card.is-playable:hover, .playing-card.is-playable:focus-visible { transform: translateY(-10px) rotate(-1deg); box-shadow: 0 17px 24px rgba(0, 0, 0, .42), 0 0 0 2px rgba(216, 179, 94, .52); filter: brightness(1.04); z-index: 4; }
.played-card { position: absolute; display: grid; justify-items: center; gap: 5px; color: #e2e5cf; font: 9px/1 "DM Mono", monospace; text-transform: uppercase; }.played-card.player-1 { top: 0; left: 50%; transform: translateX(-50%); }.played-card.player-3 { top: 50%; right: 0; transform: translateY(-50%); }.played-card.player-0 { bottom: 0; left: 50%; transform: translateX(-50%); }.played-card.player-2 { top: 50%; left: 0; transform: translateY(-50%); }.played-card .playing-card { width: clamp(44px, calc(var(--felt-height) * .12), 62px); height: clamp(62px, calc(var(--felt-height) * .165), 86px); animation: card-land .28s cubic-bezier(.2,.8,.2,1) both; }.played-card.is-winning .playing-card { border-color: var(--mustard); box-shadow: 0 0 0 2px rgba(216, 179, 94, .52), 0 0 28px rgba(216, 179, 94, .70), 0 9px 18px rgba(0, 0, 0, .42); animation: card-land .28s cubic-bezier(.2,.8,.2,1) both, winner-glow .48s ease-in-out infinite alternate; }.played-card .card-corner { font-size: 13px; }.played-card .card-center-suit { font-size: 24px; }.played-card > span { padding: 3px 6px; border: 1px solid rgba(216, 179, 94, .25); border-radius: 4px; color: #f0e8d2; background: rgba(8, 26, 22, .78); }.played-card.is-winning > span { border-color: var(--mustard); color: var(--mustard); }
.upcard-stack { display: grid; justify-items: center; align-content: center; gap: 7px; transform: rotate(3deg); }.upcard-label, .kitty-note { color: #bfd1b4; font: 9px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .07em; }.upcard-stack .playing-card { width: clamp(50px, calc(var(--felt-height) * .138), 72px); height: clamp(70px, calc(var(--felt-height) * .196), 102px); }.kitty-note { color: rgba(191, 209, 180, .65); text-transform: none; letter-spacing: 0; }

.seat { position: absolute; z-index: 3; display: grid; justify-items: center; gap: 4px; color: #e7eedf; }.seat.north { top: clamp(10px, calc(var(--felt-height) * .054), 28px); left: 50%; transform: translateX(-50%); }.seat.south { bottom: clamp(8px, calc(var(--felt-height) * .05), 26px); left: 50%; transform: translateX(-50%); }.seat.west { left: clamp(8px, 2vw, 22px); top: 50%; transform: translateY(-50%); }.seat.east { right: clamp(8px, 2vw, 22px); top: 50%; transform: translateY(-50%); }.seat-count { color: rgba(199, 217, 195, .75); font: clamp(7px, 1.1svh, 9px)/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }.seat.is-turn .avatar-portrait { box-shadow: 0 0 0 3px var(--mustard), 0 0 0 7px rgba(216, 179, 94, .22), 0 0 22px rgba(216, 179, 94, .20); }.seat.is-turn .avatar-copy strong::after { content: " · turn"; color: var(--mustard); font-weight: 400; }
.avatar-wrap { display: flex; align-items: center; gap: 8px; }.north .avatar-wrap, .south .avatar-wrap { flex-direction: column; gap: 2px; }.west .avatar-wrap { flex-direction: row-reverse; }.east .avatar-wrap { flex-direction: row; }.avatar-copy { display: grid; gap: 2px; text-align: left; }.north .avatar-copy, .south .avatar-copy { text-align: center; }.avatar-copy strong { font-size: clamp(9px, 1.1svh, 11px); font-weight: 600; }.avatar-copy span { color: rgba(199, 217, 195, .72); font: clamp(7px, 1svh, 9px)/1 "DM Mono", monospace; text-transform: uppercase; }.avatar-portrait { width: clamp(36px, calc(var(--felt-height) * .092), 48px); height: clamp(36px, calc(var(--felt-height) * .092), 48px); border: 2px solid rgba(255, 242, 195, .78); border-radius: 50%; background: var(--accent); box-shadow: 0 5px 12px rgba(0, 0, 0, .34); transition: box-shadow .2s ease; }.avatar-portrait svg { display: block; width: 100%; height: 100%; }.avatar-skin { fill: var(--skin); }.avatar-hair { fill: var(--hair); }.avatar-shirt { fill: var(--shirt); }.avatar-accent { fill: var(--accent); }.avatar-eye { fill: var(--ink); }.avatar-mouth { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }.mood-deciding .avatar-mouth { d: path("M30 45c4-3 8-3 12 0"); }.mood-ready .avatar-mouth { d: path("M30 43c4 4 8 4 12 0"); }

.hand-panel { margin: 0 auto; max-width: 980px; padding: clamp(2px, .8svh, 10px) 0 2px; }.hand-heading { display: flex; justify-content: space-between; align-items: end; padding-bottom: clamp(8px, 1svh, 12px); border-bottom: 1px solid var(--line); }.hand-heading h2 { margin: 7px 0 0; color: var(--cream); font: 600 clamp(25px, 2.4svh, 30px)/.88 "Cormorant Garamond", Georgia, serif; letter-spacing: -.03em; }.hand-hint { color: var(--muted); font: 10px/1 "DM Mono", monospace; text-transform: uppercase; }.hand-cards { display: flex; justify-content: center; gap: clamp(8px, .8vw, 10px); padding: clamp(10px, 1.7svh, 22px) 4px clamp(8px, 1.1svh, 14px); }.hand-cards .playing-card { width: clamp(68px, 6.7svh, 84px); height: clamp(94px, 9.3svh, 118px); }.hand-cards .card-corner { top: clamp(8px, .8svh, 10px); left: clamp(9px, .9svh, 11px); font-size: clamp(16px, 1.4svh, 18px); }.hand-cards .card-corner i { font-size: clamp(14px, 1.25svh, 16px); }.hand-cards .card-center-suit { font-size: clamp(30px, 2.8svh, 35px); }.hand-cards .playing-card.is-playable { cursor: pointer; }.hand-cards .playing-card:not(.is-playable) { opacity: .64; }
.controls { min-height: clamp(64px, 6.2svh, 78px); display: grid; place-items: center; gap: 10px; }.trick-reveal-status { display: flex; align-items: center; gap: 4px; color: var(--mustard); font: 11px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }.control-label { margin: 0; color: var(--muted); font: 11px/1.4 "DM Mono", monospace; text-align: center; text-transform: uppercase; letter-spacing: .05em; }.action-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }.primary-button, .quiet-button, .suit-button { min-height: 46px; border-radius: 7px; padding: 0 17px; border: 1px solid transparent; font-size: 12px; font-weight: 600; }.primary-button { color: #151018; background: var(--mustard); box-shadow: 0 5px 0 #8b6c2e, 0 0 20px rgba(216, 179, 94, .12); }.primary-button:hover { background: #edd27d; }.primary-button:active { transform: translateY(2px); box-shadow: 0 3px 0 #8b6c2e; }.primary-button span { margin-left: 12px; font-size: 18px; }.quiet-button { color: var(--ink); background: rgba(239, 232, 208, .04); border-color: var(--line); }.quiet-button:hover { border-color: var(--mustard); color: var(--mustard); }.suit-button { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); background: #1a1822; border-color: var(--line); }.suit-button span { font-size: 19px; }.suit-button.is-red span { color: var(--coral); }.suit-button:hover { border-color: var(--mustard); background: #24202d; }.thinking { color: var(--muted); font: 11px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }.thinking-pulse, .live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 4px rgba(216, 179, 94, .14); }.thinking-dots { display: inline-block; width: 18px; overflow: hidden; text-align: left; animation: dots 1.1s steps(3, end) infinite; }.result-line { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; }.result-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }.result-dot.is-you { background: #80a97a; }.euchred-badge { padding: 4px 6px; border-radius: 4px; color: #fff5dc; background: var(--coral-deep); font: 9px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }.mobile-note { margin: 18px 0 0; color: var(--muted); font: 10px/1 "DM Mono", monospace; text-align: center; text-transform: uppercase; letter-spacing: .04em; }.mobile-note span { color: var(--mustard); margin-right: 4px; }

.side-column { padding-top: 9px; }.side-kicker { display: flex; align-items: center; margin-bottom: 19px; color: var(--muted); font: 10px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }.live-dot { width: 6px; height: 6px; margin-right: 8px; background: #80a97a; box-shadow: 0 0 8px rgba(128, 169, 122, .65); }.side-card { margin-bottom: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(239, 232, 208, .035); }.side-card-heading { display: flex; justify-content: space-between; align-items: center; }.side-count { color: var(--mustard); font: 11px/1 "DM Mono", monospace; }.history-empty { padding: 32px 0 10px; color: var(--muted); font: 11px/1.45 "DM Mono", monospace; }.trick-history { display: grid; margin-top: 17px; }.history-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); color: var(--muted); font: 10px/1 "DM Mono", monospace; text-transform: uppercase; }.history-row strong { color: var(--ink); font-weight: 500; }.history-row em { color: var(--coral); font-style: normal; }.rules-card { padding: 0; }.rules-card summary { display: flex; align-items: center; gap: 10px; padding: 17px 18px; cursor: pointer; list-style: none; }.rules-card summary::-webkit-details-marker { display: none; }.summary-mark { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid var(--coral); border-radius: 50%; color: var(--coral); font: 12px/1 Georgia, serif; }.rules-card summary strong, .rules-card summary small { display: block; }.rules-card summary strong { color: var(--ink); font-size: 12px; }.rules-card summary small { margin-top: 3px; color: var(--muted); font: 10px/1 "DM Mono", monospace; }.summary-chevron { margin-left: auto; color: var(--muted); }.rules-body { padding: 0 18px 15px; color: var(--muted); font-size: 11px; line-height: 1.5; }.rules-body p { margin: 10px 0; }.multiplayer-card { display: flex; gap: 12px; align-items: start; background: #162d29; color: var(--cream); border-color: rgba(216, 179, 94, .24); }.multiplayer-card .eyebrow { color: #bfd1b4; }.multiplayer-card strong { display: block; margin-top: 8px; font-size: 13px; line-height: 1.3; }.multiplayer-card p { margin: 8px 0 0; color: #bfd1b4; font-size: 11px; line-height: 1.45; }.future-icon { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(216, 179, 94, .55); border-radius: 50%; color: var(--mustard); }.toast { position: fixed; left: 50%; bottom: 20px; z-index: 10; transform: translate(-50%, 130%); padding: 12px 16px; border: 1px solid rgba(216, 179, 94, .42); border-radius: 7px; color: var(--cream); background: #2b1725; font: 11px/1.3 "DM Mono", monospace; box-shadow: var(--shadow); transition: transform .2s ease; }.toast.is-visible { transform: translate(-50%, 0); }

@keyframes dots { 0%, 20% { width: 5px; } 50% { width: 11px; } 80%, 100% { width: 18px; } }
@keyframes card-land { from { opacity: 0; transform: translateY(-9px) scale(.86) rotate(-3deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes tally-bump { 0% { transform: scale(.86); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes winner-glow { from { filter: brightness(1); } to { filter: brightness(1.16); } }

@media (max-width: 1040px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }.side-column { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }.side-kicker { grid-column: 1 / -1; margin-bottom: 0; }.side-card { margin-bottom: 0; }.multiplayer-card { grid-column: 1 / -1; }
}

@container felt (max-height: 400px) {
  .seat-count, .avatar-copy span { display: none; }
  .seat.north { top: 10px; }.seat.south { bottom: 8px; }
  .avatar-copy strong { font-size: 9px; }
}

@media (max-width: 700px) {
  .topbar { padding: 17px 16px; gap: 14px; }.brand { font-size: 14px; }.brand-glyph { width: 25px; height: 25px; }.table-meta { display: none; }.top-actions { margin-left: auto; gap: 12px; }.rules-mobile { display: block; position: relative; }.rules-mobile > summary { padding: 8px 0; color: var(--muted); font: 10px/1 "DM Mono", monospace; list-style: none; text-transform: uppercase; }.rules-mobile > summary::-webkit-details-marker { display: none; }.rules-mobile[open] { position: absolute; right: 16px; top: 55px; z-index: 5; width: min(88vw, 300px); border: 1px solid var(--line-strong); border-radius: 10px; background: #17151f; box-shadow: var(--shadow); }.rules-mobile[open] > summary { padding: 14px 16px; border-bottom: 1px solid var(--line); }.rules-mobile[open] .rules-body { padding: 4px 16px 14px; }.page-grid { padding: 6px 12px 36px; display: block; }.score-strip { gap: 8px; margin-bottom: 14px; }.score-card { min-height: 62px; padding: 8px 9px; display: grid; gap: 5px; }.score-copy { gap: 5px; }.score-copy small { font-size: 7px; }.score-copy small b { font-size: 13px; }.score-values { gap: 3px; }.score-values strong { font-size: 20px; }.score-values span { font-size: 7px; }.score-label { font-size: 8px; }.score-middle { gap: 6px; font-size: 8px; }.trick-ledger { margin: -5px 0 12px; padding: 8px 10px; }.ledger-header { margin-bottom: 7px; }.ledger-slots { gap: 5px; overflow-x: auto; padding-bottom: 2px; }.ledger-trick { flex: 0 0 80px; padding: 6px 7px; }.ledger-empty { font-size: 8px; }.table-felt { --felt-height: clamp(280px, calc(100svh - 490px), 360px); height: var(--felt-height); min-height: 0; border-radius: 24px; }.table-felt::before { inset: 9px; border-radius: 16px; }.table-felt::after { font-size: 20px; }.table-center { inset: 82px 18px 52px; }.center-heading { max-width: 230px; }.center-heading strong { font-size: 16px; }.call-summary { padding: 4px 8px; }.call-summary span { font-size: 9px; }.table-play-area { gap: 5px; flex-direction: row; }.trick-zone { width: 170px; height: 145px; min-width: 170px; min-height: 145px; }.trick-cards { width: 100%; height: 100%; }.upcard-stack { flex-direction: column; align-items: center; transform: rotate(0); }.upcard-stack .playing-card { width: 50px; height: 70px; }.upcard-label { max-width: 65px; line-height: 1.3; text-align: center; }.kitty-note { display: none; }.seat.north { top: 14px; }.seat.south { bottom: 12px; }.seat.west { left: 8px; }.seat.east { right: 8px; }.avatar-portrait { width: 36px; height: 36px; }.avatar-copy span, .seat-count { display: none; }.avatar-copy strong { font-size: 9px; }.north .avatar-copy strong, .south .avatar-copy strong { display: block; }.west .avatar-copy strong, .east .avatar-copy strong { writing-mode: vertical-rl; font-size: 8px; }.played-card .playing-card { width: 44px; height: 62px; }.card-corner { top: 5px; left: 6px; font-size: 11px; }.card-corner i { font-size: 10px; }.card-center-suit { font-size: 21px; }.played-card .card-center-suit { font-size: 17px; }.empty-trick { inset: 20px 22px; font-size: 7px; }.hand-panel { padding-top: 2px; }.hand-heading h2 { font-size: 25px; }.hand-hint { font-size: 8px; }.hand-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); justify-content: center; gap: 4px; margin: 0; padding: 12px 0 10px; overflow: visible; }.hand-cards .playing-card { width: auto; min-width: 0; height: clamp(76px, 22vw, 88px); scroll-snap-align: none; }.hand-cards .card-corner { font-size: 14px; }.hand-cards .card-corner i { font-size: 12px; }.hand-cards .card-center-suit { font-size: 26px; }.controls { min-height: 88px; }.suit-actions { gap: 6px; }.suit-button, .quiet-button, .primary-button { padding: 0 12px; min-height: 46px; }.suit-button { font-size: 11px; }.mobile-note { margin-top: 5px; }.side-column { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}