:root {
  color-scheme: light;
  --paper: #f2f4ef;
  --paper-raised: #ffffff;
  --ink: #1e2d2c;
  --muted: #657573;
  --line: #d9e0da;
  --pine: #1e6657;
  --pine-deep: #174b41;
  --pine-wash: #e6f0ec;
  --citron: #d9e879;
  --red: #a9403d;
  --soft-red: #f7eae7;
  --focus: #266e61;
  --shadow: 0 12px 40px rgba(29, 54, 47, .07);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 55%, white);
  outline-offset: 3px;
}
.app-shell { width: min(1160px, calc(100% - 44px)); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-suits { width: 35px; display: grid; grid-template-columns: repeat(2, 14px); grid-template-rows: repeat(2, 13px); align-items: center; justify-items: center; font: 15px/1 Georgia, serif; }
.brand-suits i { font-style: normal; color: var(--pine); }
.brand-suits .heart, .brand-suits .diamond { color: var(--red); }
.brand-name { font: 17px/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.brand-name strong { font-weight: 700; }
.button { border: 0; border-radius: 8px; padding: 12px 17px; min-height: 44px; background: var(--pine); color: #fff; font-weight: 680; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.button:hover { background: var(--pine-deep); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.button-quiet { color: var(--pine-deep); background: transparent; border: 1px solid #aebdb6; }
.button-quiet:hover { background: var(--pine-wash); }
.button-small { min-height: 36px; padding: 8px 12px; font-size: 13px; }
.button-danger { color: var(--red); background: white; border: 1px solid #d8b7b2; }
.button-danger:hover { background: var(--soft-red); }
main { flex: 1; }
.site-footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; padding: 17px 0 19px; }
.local-note { display: inline-flex; align-items: center; gap: 7px; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: #638d5a; border-radius: 50%; }

.landing { padding: 42px 0 72px; }
.hero { min-height: 300px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 42px; padding: 29px 38px 31px 43px; color: #f5f7ee; background: var(--pine-deep); border-radius: 19px; overflow: hidden; position: relative; }
.hero:after { content: ""; position: absolute; width: 390px; height: 390px; right: 160px; top: -235px; border: 1px solid rgba(238, 244, 229, .12); border-radius: 50%; box-shadow: 0 0 0 36px rgba(238, 244, 229, .035), 0 0 0 72px rgba(238, 244, 229, .025); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; max-width: 620px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; color: #d5e57a; font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.hero h1 { margin: 13px 0 12px; max-width: 590px; font: 500 clamp(37px, 5vw, 56px)/1.01 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.hero p { max-width: 470px; margin: 0; color: #d4e1d9; font-size: 16px; line-height: 1.55; }
.table-art { position: relative; z-index: 1; height: 215px; width: 275px; justify-self: center; transform: rotate(5deg); }
.playing-card { position: absolute; width: 130px; height: 182px; background: #f7f8f1; border: 1px solid rgba(18, 43, 35, .1); border-radius: 12px; box-shadow: 0 12px 22px rgba(0, 0, 0, .16); }
.card-back { top: 16px; left: 31px; transform: rotate(-15deg); background: #bfd33f; color: var(--pine-deep); display: flex; align-items: center; justify-content: center; }
.card-back:before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(24, 72, 61, .37); border-radius: 7px; }
.card-back span { font: 54px/1 Georgia, serif; }
.card-front { top: 12px; right: 17px; transform: rotate(12deg); color: var(--pine-deep); padding: 13px; }
.card-front strong { display: block; font: 25px/1 Georgia, serif; }
.card-front em { display: block; margin-top: 3px; font: normal 15px/1 Georgia, serif; }
.card-front .large-suit { display: grid; height: 108px; place-items: center; color: var(--red); font: 60px/1 Georgia, serif; }
.game-section { padding-top: 47px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font: 500 30px/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.section-heading p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.game-card { position: relative; min-height: 159px; text-align: left; padding: 18px 18px 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); cursor: pointer; box-shadow: 0 2px 6px rgba(37, 61, 53, .025); transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.game-card:hover { transform: translateY(-2px); border-color: #9eb7aa; box-shadow: var(--shadow); }
.game-card h3 { margin: 23px 0 6px; font: 500 20px/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.game-card p { margin: 0; color: var(--muted); font-size: 13px; }
.game-pip { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--pine); background: var(--pine-wash); font: 15px/1 Georgia, serif; }
.game-card:nth-child(2) .game-pip { color: #a34340; background: var(--soft-red); }
.game-card:nth-child(3) .game-pip { color: #a16b24; background: #f4efda; }
.game-card:nth-child(4) .game-pip { color: #5d618e; background: #ececf8; font: 700 20px/1 sans-serif; }
.join-strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; margin-top: 24px; padding: 21px 22px; background: #e6ede8; border-radius: 12px; }
.join-strip h3 { margin: 0 0 4px; font: 500 20px/1.15 Georgia, serif; }
.join-strip p { margin: 0; color: var(--muted); font-size: 13px; }
.join-form { display: flex; align-items: center; gap: 8px; }
.join-form input { width: 154px; text-transform: uppercase; letter-spacing: .12em; }

.panel { max-width: 830px; margin: 44px auto 64px; padding: 29px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-raised); box-shadow: 0 8px 28px rgba(37, 61, 53, .04); }
.panel-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.text-button { border: 0; color: var(--pine); background: none; padding: 7px 0; cursor: pointer; font-weight: 650; }
.text-button:hover { text-decoration: underline; }
.panel h1 { margin: 0; font: 500 34px/1.08 Georgia, serif; letter-spacing: -.04em; }
.panel-lede { margin: 8px 0 24px; color: var(--muted); line-height: 1.5; }
.form-section { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 21px; }
.form-section h2 { margin: 0 0 14px; font: 500 21px/1.15 Georgia, serif; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field-label { font-size: 13px; font-weight: 650; }
.field small, .field-help { color: var(--muted); font-size: 12px; line-height: 1.45; }
input, select, textarea { width: 100%; min-height: 45px; padding: 10px 11px; border: 1px solid #cbd5ce; border-radius: 7px; color: var(--ink); background: #fff; }
textarea { min-height: 72px; resize: vertical; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.deck-reference-fields { display: grid; align-content: start; gap: 12px; min-width: 0; }
.deck-reference-fields a, .deck-reference-note a { color: var(--pine); font-weight: 650; text-underline-offset: 2px; }
.deck-reference-note { margin-top: 13px; padding: 10px; border-radius: 7px; background: #f4f6f2; color: #50605c; font-size: 11px; line-height: 1.45; }
.deck-reference-note strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 11px; }
.deck-reference-note p { margin: 0 0 5px !important; font-size: 11px !important; }
.deck-reference-note small { color: #52625d; font-size: 10px; }
.players-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; }
.player-field { display: grid; grid-template-columns: 25px 1fr; align-items: end; gap: 7px; }
.player-index { height: 45px; display: grid; place-items: center; color: var(--muted); font: 16px Georgia, serif; }
.choice-note { border-left: 3px solid var(--citron); padding: 10px 13px; margin: 14px 0 0; background: #f6f8e8; color: #4f5c3f; font-size: 13px; line-height: 1.45; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 23px; }
.form-actions p { margin: 0; color: var(--muted); font-size: 12px; }
.alert { padding: 12px 14px; border: 1px solid #e4bbb5; border-radius: 8px; background: var(--soft-red); color: #722d29; font-size: 14px; line-height: 1.4; }
.alert:empty { display: none; }
.host-gate { max-width: 600px; }
.host-gate .host-login { display: grid; gap: 16px; }
.host-gate .host-login .button { min-height: 44px; }
.host-gate .auth-message { margin-top: 18px; }
.auth-message, .alert { scroll-margin-block: 24px; }
.auth-message:focus, .alert:focus { outline: 3px solid var(--focus); outline-offset: 4px; }
.invite-dialog { width: min(540px, calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 24px; overflow-y: auto; border: 1px solid #ddd6c7; border-radius: 17px; background: #fffdf8; color: #21392c; box-shadow: 0 18px 60px rgba(9, 42, 30, .3); }
.invite-dialog::backdrop { background: rgba(9, 30, 22, .65); }
.invite-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invite-heading h2 { margin: 0; color: #173e2e; }
.invite-dialog p { line-height: 1.5; }
.invite-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-block: 18px; }
.invite-actions .button, .invite-heading button { min-height: 44px; }
.invite-status { color: #173e2e; }
.invite-status:empty { display: none; }
.invite-code { margin: 20px 0 0; text-align: center; }
.invite-qr { display: block; margin: 0 auto 10px; max-width: 100%; height: auto; }
.invite-code figcaption { font-size: 13px; }
.invite-dialog input { font-size: 16px; }
@media (max-width: 540px) { .invite-dialog { padding: 20px 17px; } .invite-actions { flex-direction: column; } .invite-actions .button { width: 100%; } }
.join-panel { max-width: 510px; }
.code-display { display: inline-flex; padding: 10px 14px; border: 1px solid #cdd7cf; border-radius: 8px; background: #f7f9f6; color: var(--pine-deep); font: 700 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .17em; }

.score-page { padding: 27px 0 50px; }
.room-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.room-title { display: flex; align-items: center; gap: 12px; }
.room-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--pine); color: #fff; font: 20px/1 Georgia, serif; }
.room-title h1 { margin: 0; font: 500 29px/1 Georgia, serif; letter-spacing: -.035em; }
.room-title p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.room-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.share-band { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; margin-bottom: 17px; border: 1px solid #c8d9ce; border-radius: 10px; background: #e6f0ea; }
.share-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.share-copy p { margin: 0; font-size: 13px; line-height: 1.4; }
.share-copy small { display: block; color: var(--muted); font-size: 11px; }
.room-code { padding: 7px 9px; border-radius: 6px; background: #fff; color: var(--pine-deep); font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; white-space: nowrap; }
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 18px; }
.score-main { min-width: 0; }
.score-summary { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.summary-item { min-height: 74px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.summary-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.summary-value { font: 500 21px/1.05 Georgia, serif; letter-spacing: -.02em; }
.progress-track { height: 5px; margin-top: 10px; border-radius: 99px; background: #e6ebe6; overflow: hidden; }
.progress-track span { height: 100%; display: block; background: var(--pine); border-radius: inherit; transition: width .18s ease; }
.round-picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: var(--pine-deep); color: #f7f9f3; border-radius: 11px 11px 0 0; }
.round-picker p { margin: 0; font-size: 12px; color: #cfddd4; }
.round-picker h2 { margin: 3px 0 0; font: 500 21px/1.15 Georgia, serif; }
.round-switches { display: flex; gap: 6px; }
.round-switches button { min-width: 37px; height: 35px; padding: 0 7px; border: 1px solid rgba(245, 247, 238, .27); border-radius: 6px; background: transparent; color: #f7f9f3; cursor: pointer; font-size: 12px; }
.round-switches button[aria-current="step"] { color: var(--pine-deep); background: var(--citron); border-color: var(--citron); font-weight: 700; }
.player-scores { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 11px 11px; background: #e9efea; }
.score-row { display: grid; grid-template-columns: minmax(118px, .75fr) minmax(220px, 1.25fr) minmax(90px, .55fr); align-items: center; gap: 11px; padding: 12px; border: 1px solid #e2e8e2; border-radius: 9px; background: #fff; }
.score-player { min-width: 0; }
.score-player strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.score-player small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.score-total { text-align: right; }
.score-total span { display: block; color: var(--muted); font-size: 10px; }
.score-total strong { font: 500 23px/1.15 Georgia, serif; }
.score-entry-group { display: grid; gap: 8px; }
.score-entry { display: grid; grid-template-columns: minmax(55px, .7fr) 40px minmax(62px, 1fr) 40px auto; align-items: center; gap: 5px; }
.score-entry label { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.score-entry input { min-height: 38px; padding: 6px 5px; text-align: center; font-variant-numeric: tabular-nums; }
.stepper { width: 40px; height: 40px; padding: 0; border: 1px solid #cdd8d0; border-radius: 8px; color: var(--pine-deep); background: #f7f9f6; cursor: pointer; font-size: 21px; line-height: 1; }
.stepper:hover { background: var(--pine-wash); }
.save-score { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.skip-action { display: flex; justify-content: end; margin-top: -1px; }
.skip-action button { border: 0; padding: 4px 0; color: var(--muted); background: transparent; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.skip-action button:hover { color: var(--pine); }
.sitting-out { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.winner-banner { margin-top: 12px; padding: 13px 15px; border: 1px solid #d7e58b; border-radius: 9px; background: #f2f7d8; color: #34482b; font-size: 14px; line-height: 1.4; }
.winner-banner strong { font-weight: 750; }
.side-rail { display: grid; gap: 13px; }
.side-box { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.side-box h2 { margin: 0 0 10px; font: 500 20px/1.1 Georgia, serif; letter-spacing: -.02em; }
.side-box p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.participant-list { display: grid; gap: 9px; margin-top: 14px; }
.participant { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.participant span { min-width: 0; overflow-wrap: anywhere; }
.role-label { color: var(--muted); font-size: 10px; white-space: nowrap; }
.role-toggle { flex: 0 0 auto; min-height: 31px; padding: 6px 8px; border: 1px solid #cbd7ce; border-radius: 6px; color: var(--pine-deep); background: #fff; cursor: pointer; font-size: 11px; font-weight: 650; }
.role-toggle[aria-pressed="true"] { color: #315129; border-color: #cfdd83; background: #f4f8dc; }
.room-notes { display: grid; gap: 8px; margin-top: 13px; }
.room-note { padding: 9px 10px; border-radius: 7px; background: #f4f6f2; color: #50605c; font-size: 11px; line-height: 1.45; }
.room-note strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 11px; }
.reference details { margin-top: 11px; }
.reference summary { color: var(--pine); cursor: pointer; font-size: 12px; font-weight: 650; }
.reference ul { margin: 8px 0 0; padding-left: 17px; color: #52625d; font-size: 11px; line-height: 1.5; }
.reference li + li { margin-top: 6px; }
.local-callout { background: #f5f5e8; border-color: #e1e4c0; }
.local-callout h2 { font-size: 17px; }
.local-callout p { color: #576246; }
.undo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--line); }
.undo-row small { color: var(--muted); font-size: 10px; }
.event-note { min-height: 18px; margin: 8px 1px 0; color: var(--muted); font-size: 11px; }

@media (max-width: 950px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; }
  .score-row { grid-template-columns: 1fr; gap: 8px; }
  .score-total { display: flex; align-items: baseline; justify-content: space-between; text-align: left; padding-top: 7px; border-top: 1px solid #edf0ed; }
  .score-total span { order: 0; }
  .score-total strong { order: 1; }
}
@media (max-width: 700px) {
  .app-shell { width: min(calc(100% - 28px), 540px); }
  .topbar { min-height: 68px; }
  .brand-name { font-size: 16px; }
  .top-join { min-height: 39px; padding: 8px 11px; font-size: 12px; }
  .site-footer { flex-direction: column; gap: 6px; }
  .landing { padding-top: 19px; }
  .hero { grid-template-columns: 1fr; gap: 6px; min-height: unset; padding: 24px 22px 7px; border-radius: 15px; }
  .hero h1 { max-width: 390px; margin-top: 12px; font-size: clamp(36px, 11vw, 48px); }
  .hero p { max-width: 440px; font-size: 14px; }
  .table-art { height: 160px; width: 230px; margin-top: 1px; transform: scale(.82) rotate(5deg); transform-origin: top center; }
  .game-section { padding-top: 32px; }
  .section-heading { margin-bottom: 13px; }
  .section-heading h2 { font-size: 26px; }
  .section-heading p { max-width: 145px; text-align: right; font-size: 12px; }
  .game-grid { gap: 8px; }
  .game-card { min-height: 132px; padding: 12px; }
  .game-card h3 { margin-top: 18px; font-size: 17px; }
  .game-card p { font-size: 11px; line-height: 1.35; }
  .join-strip { grid-template-columns: 1fr; gap: 13px; padding: 17px; }
  .join-form input { width: 135px; }
  .join-form .button { flex: 1; }
  .panel { margin: 22px auto 39px; padding: 20px 17px; }
  .panel h1 { font-size: 30px; }
  .panel-lede { margin-bottom: 17px; font-size: 14px; }
  .field-grid, .players-list { grid-template-columns: 1fr; }
  .form-section { margin-top: 17px; padding-top: 16px; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .room-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .room-actions { justify-content: flex-start; width: 100%; }
  .room-actions .button { flex: 1; }
  .room-title h1 { font-size: 25px; }
  .share-band { align-items: flex-start; flex-direction: column; }
  .share-copy { align-items: flex-start; flex-wrap: wrap; }
  .room-layout { grid-template-columns: 1fr; }
  .score-summary { grid-template-columns: 1fr 1fr; }
  .summary-item:first-child { grid-column: 1 / -1; }
  .round-picker { align-items: flex-start; flex-direction: column; }
  .round-switches { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .round-switches button { flex: 0 0 auto; }
  .player-scores { padding: 8px; }
  .score-row { padding: 11px; }
  .score-entry { grid-template-columns: minmax(52px, .75fr) 40px minmax(56px, 1fr) 40px auto; gap: 4px; }
  .score-entry label { font-size: 10px; }
  .score-entry input { min-width: 0; }
  .save-score { padding: 6px 8px; }
}

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

/* Card room refresh: warm paper, quiet gold, and a clear emerald score table. */
:root {
  --paper: #f4f1e8;
  --paper-raised: #fffdf8;
  --ink: #19352c;
  --muted: #5b7067;
  --line: #d8ded2;
  --pine: #176b4e;
  --pine-deep: #103f30;
  --pine-wash: #e6eee6;
  --citron: #e6c16f;
  --red: #a94749;
  --soft-red: #f7e9e6;
  --focus: #a46d15;
  --shadow: 0 16px 40px rgba(27, 56, 43, .10);
}

body { background: var(--paper); }
.app-shell { width: min(1240px, calc(100% - 48px)); }
.topbar { min-height: 76px; border-color: #d5dacc; }
.brand { gap: 12px; }
.brand-suits { width: 39px; height: 36px; grid-template-columns: repeat(2, 17px); grid-template-rows: repeat(2, 15px); font-size: 17px; }
.brand-name { font-size: 18px; }
.top-join { border-color: #c6a45d; }
.button { border-radius: 10px; font-weight: 700; box-shadow: 0 2px 0 rgba(9, 42, 30, .10); }
.button-quiet { box-shadow: none; }

.landing { padding-top: 30px; }
.hero {
  min-height: 314px;
  padding: 32px 48px;
  border: 1px solid rgba(230, 193, 111, .50);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 79% 23%, rgba(226, 193, 118, .15), transparent 27%),
    repeating-linear-gradient(117deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #14563d 0%, #0e3f30 58%, #123b2f 100%);
  box-shadow: 0 18px 42px rgba(16, 63, 48, .14), inset 0 0 0 5px rgba(235, 206, 140, .055);
}
.hero:after {
  right: 120px;
  top: -238px;
  border-color: rgba(238, 218, 166, .16);
  box-shadow: 0 0 0 36px rgba(238, 218, 166, .045), 0 0 0 72px rgba(238, 218, 166, .025);
}
.hero-kicker { color: #f1d48e; text-transform: uppercase; letter-spacing: .11em; font-size: 11px; }
.hero h1 { max-width: 620px; font-size: clamp(39px, 5vw, 58px); }
.hero p { color: #e0e9df; }
.table-art { height: 232px; width: 292px; }
.playing-card { width: 142px; height: 198px; border-radius: 14px; box-shadow: 0 16px 28px rgba(0,0,0,.20); }
.card-back {
  top: 13px;
  left: 29px;
  background:
    linear-gradient(45deg, transparent 46%, rgba(16,63,48,.17) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(16,63,48,.17) 47% 53%, transparent 54%),
    linear-gradient(135deg, #f0d58f, #d7ad57);
  background-size: 17px 17px, 17px 17px, auto;
  color: var(--pine-deep);
}
.card-back:before { inset: 9px; border: 1px solid rgba(16,63,48,.42); border-radius: 8px; }
.card-back span { font-size: 48px; text-shadow: 0 1px rgba(255,255,255,.35); }
.card-front { background: #fffdf8; color: var(--pine-deep); }
.card-front .large-suit { color: #a94749; }

.game-section { padding-top: 38px; }
.section-heading { margin-bottom: 15px; }
.section-heading h2 { font-size: 29px; }
.section-heading p { font-size: 13px; }
.game-grid { gap: 14px; }
.game-card {
  min-height: 164px;
  padding: 20px;
  border: 1px solid #d8d8c9;
  border-radius: 15px;
  background: linear-gradient(180deg, #fffdf8, #fbfaf3);
  box-shadow: 0 5px 14px rgba(33, 56, 41, .045);
}
.game-card:after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, transparent, #d7b66b, transparent);
  opacity: .72;
}
.game-card:hover { transform: translateY(-3px); border-color: #bd9b55; box-shadow: 0 12px 26px rgba(33, 56, 41, .11); }
.game-card:focus-visible { outline-color: #bb923f; }
.game-card h3 { margin: 20px 0 7px; font-size: 21px; }
.game-card p { color: #5c7065; font-size: 13px; line-height: 1.45; }
.game-pip { width: 30px; height: 30px; border-radius: 10px; color: #154c37; background: #e4eee5; font-size: 17px; }
.game-card:nth-child(2) .game-pip { color: #9a3b40; background: #f5e8e5; }
.game-card:nth-child(3) .game-pip { color: #77561b; background: #f4ecd7; }
.game-card:nth-child(4) .game-pip { color: #465d52; background: #e9ece2; }
.join-strip { border: 1px solid #d5ddcf; border-radius: 15px; background: #e9eee4; }
.join-strip h3 { font-size: 19px; }

.panel { border-color: #dedbce; border-radius: 17px; background: var(--paper-raised); box-shadow: 0 12px 32px rgba(28, 51, 39, .07); }
.panel h1 { color: var(--pine-deep); }
.form-section { border-color: #e2e3d9; }
.form-section h2 { color: var(--pine-deep); }
input, select, textarea { min-height: 48px; border-color: #c9d2c8; border-radius: 10px; background: #fffefa; }
input:hover, select:hover, textarea:hover { border-color: #98ad9b; }
.player-index { color: #846728; font-weight: 700; }
.choice-note { border-left-color: #bb9140; background: #f5f0df; color: #4b513d; }

.score-page { padding-top: 26px; }
.room-head { margin-bottom: 15px; }
.room-title { gap: 14px; }
.room-mark { width: 48px; height: 48px; border: 1px solid #c5a75e; border-radius: 15px; background: linear-gradient(145deg, #1d7655, #103f30); color: #f2d48b; font-size: 23px; box-shadow: 0 5px 12px rgba(16,63,48,.12); }
.room-title h1 { font-size: 30px; color: var(--pine-deep); }
.room-title p { color: #596c62; }
.room-actions .button-quiet { background: #fffdf8; border-color: #d0c59f; }
.share-band { border-color: #d8c99e; border-radius: 13px; background: #f6f0df; }
.room-code { border: 1px solid #e4d5ae; color: #183f31; letter-spacing: .15em; }
.room-layout { grid-template-columns: minmax(0, 1fr) 302px; gap: 20px; }
.score-summary { gap: 10px; }
.summary-item { border-color: #dcded4; border-radius: 13px; background: #fffdf8; }
.summary-label { color: #5b7067; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; font-size: 10px; }
.summary-value { color: #173e2f; font-size: 22px; }
.progress-track { height: 7px; background: #e5e8df; }
.progress-track span { background: linear-gradient(90deg, #1b7856, #a9883e); }
.round-picker { padding: 15px 18px; border: 1px solid #c5a75e; border-bottom: 0; border-radius: 15px 15px 0 0; background: linear-gradient(135deg, #14563d, #0d3d2e); box-shadow: inset 0 1px rgba(255,255,255,.10); }
.round-picker p { color: #e0d4b2; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.round-picker h2 { margin-top: 5px; color: #fffdf5; font-size: 23px; }
.round-switches { gap: 7px; }
.round-switches button { min-width: 44px; min-height: 44px; height: 44px; border-color: rgba(255,255,255,.35); border-radius: 10px; font-size: 12px; }
.round-switches button[aria-current="step"] { color: #1c3b2c; background: #eed28d; border-color: #eed28d; }
.player-scores { gap: 10px; padding: 13px; border: 1px solid #bd9e58; border-top: 0; border-radius: 0 0 15px 15px; background:
  radial-gradient(ellipse at top, rgba(255,255,255,.09), transparent 70%),
  #124a36; }
.score-row { grid-template-columns: minmax(112px, .62fr) minmax(240px, 1.35fr) minmax(108px, .58fr); gap: 12px; padding: 13px; border: 1px solid #e7e4d6; border-radius: 12px; background: #fffdf8; box-shadow: 0 3px 9px rgba(4,27,17,.12); }
.score-row.is-leader { border-color: #d4b25e; box-shadow: 0 0 0 2px rgba(212,178,94,.22), 0 4px 12px rgba(4,27,17,.12); }
.score-player strong { font-size: 15px; color: #1a3d30; }
.score-player small { color: #5c7065; font-size: 11px; }
.leader-crown { display: inline-block; margin-left: 4px; color: #a37822; font-size: 15px; }
.score-total { text-align: center; padding: 8px 7px; border: 1px solid #e6e0cb; border-radius: 10px; background: #f6f2e6; }
.score-total span { color: #53675d; font-size: 10px; font-weight: 650; }
.score-total strong { display: block; margin-top: 3px; color: #163e2e; font: 700 24px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.score-entry-group { gap: 9px; }
.score-entry { grid-template-columns: minmax(70px, .7fr) 44px minmax(82px, 1fr) 44px 68px; gap: 6px; }
.score-entry label { color: #51665a; font-size: 11px; font-weight: 650; }
.score-entry input { min-height: 46px; border-color: #b8c6b8; border-radius: 10px; color: #173c2d; font-size: 16px; font-weight: 700; }
.score-entry input::placeholder { color: #6b756f; font-size: 12px; font-weight: 500; }
.stepper { width: 44px; height: 46px; border-color: #c4d1c4; border-radius: 11px; background: #edf2e9; color: #174b36; font-size: 22px; font-weight: 700; }
.stepper:hover { background: #e0ebdf; }
.save-score { min-height: 46px; padding-inline: 12px; border-radius: 10px; font-size: 13px; }
.skip-action button { min-height: 32px; padding: 6px 3px; color: #56695f; font-size: 12px; }
.winner-banner { display: flex; align-items: center; gap: 14px; padding: 14px 17px; border: 1px solid #d1b15e; border-radius: 13px; background: linear-gradient(120deg, #fbf3dc, #f2e3b6); color: #3b402b; box-shadow: 0 5px 15px rgba(95,72,27,.08); }
.winner-banner > span:last-child { display: grid; gap: 3px; }
.winner-banner small { color: #725f2f; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.winner-banner strong { color: #183e2e; font-size: 17px; }
.winner-banner > span:last-child > span { color: #58644c; font-size: 12px; }
.winner-mark { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #c5a24e; border-radius: 50%; background: #fff8e5; color: #8a6820; font: 22px/1 Georgia, serif; }
.winner-final .winner-mark { animation: quiet-reveal .65s ease-out both; }
.undo-row .button { min-height: 44px; }
@keyframes quiet-reveal { from { transform: scale(.84); opacity: .5; } to { transform: scale(1); opacity: 1; } }
.side-box { border-color: #dddccf; border-radius: 14px; background: #fffdf8; box-shadow: 0 6px 17px rgba(30,52,39,.04); }
.side-box h2 { color: #153e2e; font-size: 20px; }
.participant { min-height: 37px; }
.role-toggle { min-height: 38px; padding-inline: 11px; border-radius: 9px; }
.role-toggle[aria-pressed="true"] { border-color: #ceb15f; background: #f7f0d9; color: #51401c; }
.room-note, .deck-reference-note { border-radius: 9px; background: #f3f2e9; }
.reference summary { min-height: 35px; display: inline-flex; align-items: center; }
.local-callout { border-color: #e4d7b1; background: #f7f2e3; }
.undo-row { border-color: #dcded4; }
.event-note { color: #53675d; }

@media (max-width: 950px) {
  .room-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .score-row { grid-template-columns: minmax(110px, .7fr) minmax(210px, 1.3fr); }
  .score-total { grid-column: 1 / -1; }
  .score-entry { grid-template-columns: minmax(64px, .7fr) 44px minmax(74px, 1fr) 44px 68px; }
}
@media (max-width: 1100px) {
  .room-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .app-shell { width: min(calc(100% - 28px), 540px); }
  .topbar { min-height: 66px; }
  .brand-suits { transform: scale(.93); transform-origin: left center; }
  .brand-name { font-size: 16px; }
  .top-join { min-height: 42px; padding: 8px 12px; }
  .landing { padding-top: 17px; }
  .hero { grid-template-columns: 1fr; gap: 4px; min-height: unset; padding: 24px 22px 0; border-radius: 17px; }
  .hero h1 { max-width: 420px; margin: 11px 0 9px; font-size: clamp(35px, 10vw, 46px); }
  .hero p { max-width: 420px; font-size: 14px; }
  .table-art { width: 232px; height: 166px; margin: 4px auto 0; transform: scale(.79) rotate(4deg); transform-origin: top center; }
  .playing-card { width: 132px; height: 184px; }
  .game-section { padding-top: 25px; }
  .section-heading h2 { font-size: 24px; }
  .section-heading p { max-width: 125px; }
  .game-grid { gap: 9px; }
  .game-card { min-height: 134px; padding: 13px; border-radius: 12px; }
  .game-card h3 { margin-top: 15px; font-size: 17px; }
  .game-card p { font-size: 11px; }
  .game-pip { width: 27px; height: 27px; }
  .join-strip { padding: 16px; border-radius: 13px; }
  .join-form { gap: 7px; }
  .join-form input { width: min(44%, 160px); min-width: 112px; }
  .join-form .button { flex: 1; padding-inline: 11px; }
  .panel { margin: 19px auto 32px; padding: 20px 16px; }
  .panel h1 { font-size: 28px; }
  .form-actions { gap: 12px; }
  .room-head { gap: 12px; }
  .room-actions { gap: 8px; }
  .room-actions .button { min-height: 46px; }
  .room-title { align-items: flex-start; }
  .room-title h1 { font-size: 25px; line-height: 1.1; }
  .room-title p { font-size: 12px; line-height: 1.4; }
  .share-band { gap: 11px; padding: 13px; border-radius: 12px; }
  .share-copy { gap: 9px; }
  .share-copy p { flex: 1; min-width: 145px; }
  .share-copy small { line-height: 1.5; }
  .share-band > .button { align-self: flex-start; min-height: 42px; }
  .room-layout { grid-template-columns: 1fr; gap: 12px; }
  .score-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .summary-item { min-height: 70px; padding: 11px 12px; }
  .summary-item:first-child { grid-column: 1 / -1; }
  .summary-value { font-size: 19px; }
  .round-picker { gap: 10px; padding: 14px; }
  .round-switches { max-width: 100%; gap: 6px; padding: 2px 1px 5px; }
  .round-switches button { min-width: 44px; min-height: 44px; }
  .player-scores { gap: 9px; padding: 9px; }
  .score-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "player total" "entry entry"; gap: 9px; padding: 12px; }
  .score-player { grid-area: player; }
  .score-row > div:nth-child(2) { grid-area: entry; }
  .score-total { grid-area: total; min-width: 96px; display: block; padding: 6px 9px; border-top: 1px solid #e6e0cb; text-align: center; }
  .score-total span { display: block; font-size: 9px; }
  .score-total strong { margin-top: 2px; font-size: 22px; }
  .score-entry { grid-template-columns: 44px minmax(76px, 1fr) 44px 66px; gap: 7px; }
  .score-entry label { grid-column: 1 / 4; grid-row: 1; white-space: normal; }
  .score-entry .stepper:first-of-type { grid-column: 1; grid-row: 2; }
  .score-entry input { grid-column: 2; grid-row: 2; min-width: 0; min-height: 48px; }
  .score-entry .stepper:nth-of-type(2) { grid-column: 3; grid-row: 2; }
  .score-entry .save-score { grid-column: 4; grid-row: 1 / 3; width: 100%; min-height: 48px; padding-inline: 7px; }
  .skip-action button { min-height: 38px; }
  .winner-banner { padding: 13px; }
  .winner-banner strong { font-size: 16px; line-height: 1.35; }
  .side-rail { gap: 10px; }
  .side-box { padding: 15px; }
  .undo-row { align-items: flex-start; }
  .undo-row small { max-width: 54%; font-size: 11px; line-height: 1.45; }
  .undo-row .button { min-height: 44px; }
}

/* Neon table direction: near-black surfaces, crisp electric accents, and clean card-room UI. */
:root {
  color-scheme: dark;
  --paper: #080b12;
  --paper-raised: #101521;
  --ink: #f2f5ff;
  --muted: #a2adc2;
  --line: #283247;
  --pine: #23d9f2;
  --pine-deep: #09131d;
  --pine-wash: #112630;
  --citron: #bb8cff;
  --red: #ff6c9f;
  --soft-red: #341e2b;
  --focus: #43e6ff;
  --shadow: 0 14px 44px rgba(0, 0, 0, .38);
  background: var(--paper);
  color: var(--ink);
}
body { background: radial-gradient(ellipse at 50% -30%, #182139 0, #080b12 52rem); }
.app-shell { width: min(1240px, calc(100% - 48px)); }
.topbar { border-color: #202a3d; }
.brand-suits i { color: #43e6ff; }
.brand-suits .heart, .brand-suits .diamond { color: #bd83ff; }
.brand-name { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 560; letter-spacing: -.045em; }
.brand-name strong { color: #49e7ff; }
.button { color: #061016; background: linear-gradient(110deg, #53eaff, #7ddcff); box-shadow: 0 0 20px rgba(35,217,242,.14); }
.button:hover { background: #99f2ff; }
.button-quiet { color: #d9e3f5; background: #111827; border-color: #39465f; }
.button-quiet:hover { background: #1a2638; }
.button-danger { color: #ff9cbc; background: #201522; border-color: #63384c; }
.site-footer { border-color: #202a3d; }
.status-dot { background: #53eaff; box-shadow: 0 0 10px #53eaff; }
.landing { padding-top: 30px; }
.hero { min-height: 320px; grid-template-columns: minmax(0, 1fr) 340px; padding: 38px 50px; border: 1px solid #30415d; border-radius: 24px; background: radial-gradient(ellipse at 76% 35%, rgba(137,88,255,.20), transparent 30%), radial-gradient(ellipse at 47% 115%, rgba(29,204,245,.10), transparent 40%), linear-gradient(132deg,#111827,#0b101b 62%,#101326); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 20px 55px rgba(0,0,0,.32); }
.hero:after { width: 310px; height: 310px; right: 173px; top: -208px; border-color: rgba(72,220,255,.20); box-shadow: 0 0 0 34px rgba(72,220,255,.035),0 0 0 68px rgba(169,113,255,.035); }
.hero-kicker,.eyebrow { color: #63eaff; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; }
.hero h1 { font: 740 clamp(38px,5vw,62px)/.99 ui-sans-serif,system-ui,sans-serif; letter-spacing: -.065em; }
.hero h1 span { color: #a985ff; }
.hero p { color: #c0cbdf; font-size: 15px; }
.table-art { width: 292px; height: 232px; transform: rotate(2deg); filter: drop-shadow(0 20px 28px rgba(0,0,0,.32)); }
.playing-card { width: 142px; height: 198px; border: 1px solid #475474; border-radius: 17px; background: linear-gradient(145deg,#1a2233,#111827); box-shadow: 0 12px 30px rgba(0,0,0,.44); }
.card-back { background: repeating-linear-gradient(135deg,rgba(72,227,255,.08) 0 2px,transparent 2px 10px),linear-gradient(140deg,#1a3150,#12182a); color: #68edff; }
.card-back:before { border: 1px solid rgba(95,228,255,.45); border-radius: 11px; }
.card-back span { font: 62px/1 ui-sans-serif,system-ui,sans-serif; text-shadow: 0 0 22px rgba(52,229,255,.62); }
.card-front { padding: 13px; color: #f3f5ff; transform: rotate(11deg); }
.card-front strong { font: 800 30px/1 ui-sans-serif,system-ui,sans-serif; }
.card-front em { color: #69eaff; font: normal 20px/1 ui-sans-serif,system-ui,sans-serif; }
.card-front .large-suit { height: 105px; color: #b78aff; font: 700 75px/1 ui-sans-serif,system-ui,sans-serif; text-shadow: 0 0 22px rgba(183,138,255,.55); }
.card-front small { display:block; color:#a7b4cd; font-size:8px; letter-spacing:.17em; text-align:center; }
.game-section { padding-top: 38px; }
.section-heading h2,.quickstart h2 { margin: 5px 0 0; font: 680 27px/1.1 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.04em; }
.section-heading p { color: var(--muted); }
.game-grid { gap: 13px; }
.game-card { min-height: 166px; border: 1px solid #29364e; border-radius: 16px; background: linear-gradient(155deg,#131a28,#0f141f 72%); box-shadow: inset 0 1px rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.17); }
.game-card:after { content:""; position:absolute; inset:auto 17px 0; height:2px; background:linear-gradient(90deg,transparent,#33def8,#a87cff,transparent); opacity:.7; }
.game-card:hover { transform:translateY(-3px); border-color:#4e6b91; box-shadow:0 0 0 1px rgba(59,216,245,.13),0 14px 32px rgba(0,0,0,.27); }
.game-card h3 { font: 680 19px/1.15 ui-sans-serif,system-ui,sans-serif; }
.game-card p { color:#a7b3ca; font-size:12px; line-height:1.45; }
.game-pip { width:30px;height:30px;border:1px solid #31445e;border-radius:10px;color:#65eaff;background:#142431;font:600 16px/1 ui-sans-serif,system-ui,sans-serif; }
.game-card:nth-child(2) .game-pip,.game-card:nth-child(4) .game-pip { color:#c49aff;background:#251c35;border-color:#44335d; }
.game-card:nth-child(3) .game-pip { color:#67ecff;background:#142b34;border-color:#285164; }
.quickstart { margin-top:22px;padding:20px 22px 16px;border:1px solid #28364e;border-radius:16px;background:linear-gradient(120deg,#111827,#10131f); }
.quickstart-head { display:flex;align-items:center;gap:12px; }
.quickstart-icon { display:grid;place-items:center;width:38px;height:38px;border:1px solid #544177;border-radius:12px;background:#201a30;color:#c39aff;font-size:21px; }
.quickstart h2 { font-size:19px; }
.quicksteps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:18px; }
.quicksteps > div { display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start;padding-top:12px;border-top:1px solid #2a3447; }
.quicksteps b { color:#64eaff;font:750 11px/1.4 ui-monospace,monospace; }
.quicksteps p { margin:0;color:#aebbd0;font-size:12px;line-height:1.55; }
.quicksteps strong { color:#f3f5fc; }
.quickstart-note { margin:12px 0 0;color:#9da9be;font-size:11px; }
.join-strip { border:1px solid #29364c;background:#111827;border-radius:15px; }
.join-strip h3 { font:650 17px/1.2 ui-sans-serif,system-ui,sans-serif; }
.join-strip p { color:#aab7ce; }
input,select,textarea { border-color:#37435c;color:#f3f5fc;background:#0b1019; }
input::placeholder,textarea::placeholder { color:#8290a9; }
input:hover,select:hover,textarea:hover { border-color:#64799b; }
.panel,.side-box,.summary-item { border-color:#29364c;background:#111723;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.2); }
.panel h1,.form-section h2,.side-box h2 { color:#f0f4ff;font-family:ui-sans-serif,system-ui,sans-serif;font-weight:680; }
.form-section,.undo-row { border-color:#2b3548; }
.field label,.field-label { color:#e8edfb; }
.field small,.field-help { color:#a3afc5; }
.deck-reference-fields a,.deck-reference-note a,.text-button,.reference summary { color:#66e8ff; }
.deck-reference-note,.room-note { background:#171f2e;color:#bdc8dc; }
.deck-reference-note strong,.room-note strong { color:#f2f4fd; }
.choice-note { border-color:#b385ff;background:#201a2c;color:#d2c5eb; }
.room-mark { border:1px solid #3f6481;background:linear-gradient(145deg,#163849,#20203d);color:#6feaff;box-shadow:0 0 22px rgba(35,217,242,.1); }
.room-title h1 { color:#f3f5fc;font-family:ui-sans-serif,system-ui,sans-serif;font-weight:700; }
.room-title p,.share-copy small { color:#a6b2c9; }
.share-band { border-color:#2d4961;background:#101c29; }
.room-code { border:1px solid #354964;background:#0a111c;color:#72eaff; }
.summary-item { min-height:78px; }
.summary-label { color:#a8b5cb;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:10px; }
.summary-value { color:#f2f5ff;font:700 22px/1.05 ui-sans-serif,system-ui,sans-serif; }
.progress-track { background:#273247; }
.progress-track span { background:linear-gradient(90deg,#31dcf6,#ab7cff);box-shadow:0 0 14px rgba(49,220,246,.35); }
.round-picker { border:1px solid #344563;border-bottom:0;background:linear-gradient(110deg,#17263b,#211a37); }
.round-picker p { color:#b7c3d8; }
.round-picker h2 { color:#f6f7ff;font-family:ui-sans-serif,system-ui,sans-serif;font-weight:680; }
.round-switches button { border-color:#48566e;color:#dfe7f5; }
.round-switches button[aria-current="step"] { border-color:#54e7ff;background:#54e7ff;color:#08121a;box-shadow:0 0 14px rgba(84,231,255,.28); }
.player-scores { border-color:#344563;background:#0c121d; }
.score-row { border-color:#303c52;background:#151c2a;box-shadow:0 5px 13px rgba(0,0,0,.2); }
.score-row.is-leader { border-color:#a684ee;box-shadow:0 0 0 1px rgba(177,139,255,.25),0 5px 16px rgba(0,0,0,.25); }
.score-player strong { color:#f1f5ff; }
.score-player small,.score-total span { color:#a8b5ca; }
.score-total { border:1px solid #303b51;border-radius:10px;background:#0e1420; }
.score-total strong { color:#72eaff;font-family:ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums; }
.score-entry label { color:#b0bdd2; }
.score-entry input { border-color:#3c4b65;color:#f6f7ff;background:#0b111b; }
.stepper { border-color:#3c5068;background:#152331;color:#68eaff; }
.stepper:hover { background:#1a3242; }
.skip-action button { color:#abb7ca; }
.winner-banner { border-color:#604b8e;background:linear-gradient(110deg,#211c32,#151f2d);color:#d9d0f2;box-shadow:0 0 25px rgba(159,116,238,.09); }
.winner-mark { border:1px solid #775ca7;background:#251d38;color:#d0a5ff; }
.winner-banner small { color:#68eaff; }
.winner-banner strong { color:#f5f1ff; }
.winner-banner > span:last-child > span { color:#bdc7d9; }
.side-box p,.reference ul { color:#b2bfd2; }
.role-toggle { border-color:#3d4b61;background:#101722;color:#dce5f5; }
.role-toggle[aria-pressed="true"] { border-color:#8468b8;background:#241d32;color:#d2b7ff; }
.local-callout { border-color:#514777;background:#1c1a2b; }
.local-callout p { color:#c3bdd8; }
.event-note { color:#adbad0; }
.alert { border-color:#784358;background:#2a1923;color:#ffb2c8; }
@media (max-width:700px) {
 .app-shell { width:min(calc(100% - 28px),540px); }
 .hero { grid-template-columns:1fr;gap:4px;padding:24px 21px 0; }
 .hero h1 { font-size:clamp(35px,10vw,46px); }
 .table-art { margin:4px auto 0;transform:scale(.79) rotate(2deg); }
 .quickstart { padding:17px 15px 14px; }
 .quickstart h2 { font-size:17px; }
 .quicksteps { grid-template-columns:1fr;gap:0;margin-top:10px; }
 .quicksteps > div { padding:11px 0;border-top:1px solid #2a3447; }
 .section-heading h2 { font-size:23px; }
 .game-card { border-radius:14px; }
}

/* Original vector card set: engraved suit silhouettes, mirrored court ornament, and a woven back. */
.suit-svg { display:block;width:100%;height:100%;overflow:visible;fill:currentColor;flex:none; }
.brand-suits { display:grid;grid-template-columns:repeat(2,15px);grid-template-rows:repeat(2,15px);gap:2px;width:34px;height:34px;align-items:center;justify-items:center; }
.brand-suits .suit-svg { width:13px;height:13px;color:#5beaff;filter:drop-shadow(0 0 4px rgba(91,234,255,.18)); }
.brand-suits .suit-heart,.brand-suits .suit-diamond { color:#b98cff; }
.game-pip { padding:6px;overflow:hidden; }
.game-pip .suit-svg { width:17px;height:17px; }
.game-card:nth-child(2) .game-pip .suit-svg,.game-card:nth-child(4) .game-pip .suit-svg { color:#c49aff; }
.game-card:nth-child(3) .game-pip .suit-svg { color:#67ecff; }
.custom-game-mark { font-size:18px;line-height:1; }
.game-card { isolation:isolate; }
.game-card:hover .game-pip .suit-svg { transform:scale(1.08); }
.table-art { perspective:900px; }
.playing-card { overflow:hidden;isolation:isolate; }
.playing-card:after { content:"";position:absolute;inset:2px;border:1px solid rgba(240,246,255,.075);border-radius:13px;pointer-events:none; }
.card-back { display:block;overflow:hidden;background:linear-gradient(145deg,#172943,#111a2b 62%,#171a34); }
.card-back:before { inset:8px;border:1px solid rgba(110,223,255,.35);border-radius:10px;z-index:1; }
.card-back-lines { position:absolute;inset:0;width:100%;height:100%; }
.card-back-lines pattern path { fill:none;stroke:#67e8ff;stroke-opacity:.16;stroke-width:.8; }
.back-frame { fill:none;stroke:#87eaff;stroke-opacity:.48;stroke-width:1; }
.back-diamond { fill:rgba(69,221,255,.045);stroke:#b188ff;stroke-opacity:.76;stroke-width:1.3; }
.back-centerline { fill:none;stroke:#6feaff;stroke-opacity:.66;stroke-width:1; }
.back-jewel { fill:#bc8cff;stroke:#f0eaff;stroke-opacity:.72;stroke-width:1.2; }
.back-corner { position:absolute;z-index:2;color:#88edff;font:13px/1 ui-sans-serif,system-ui,sans-serif;text-shadow:0 0 9px rgba(75,225,255,.7); }
.card-back .back-corner { font-size:10px;line-height:1; }
.back-corner-a { top:14px;left:15px; }
.back-corner-b { right:15px;bottom:14px;transform:rotate(180deg);color:#bf9aff; }
.card-front { background:linear-gradient(155deg,#1b2435,#111725 74%,#191832); }
.card-front:before { content:"";position:absolute;inset:8px;border:1px solid rgba(131,216,255,.2);border-radius:9px;pointer-events:none; }
.card-corner { position:absolute;top:13px;left:13px;z-index:2;display:grid;justify-items:center;gap:2px;color:#f4f6ff; }
.card-corner strong { font:800 20px/.9 ui-sans-serif,system-ui,sans-serif; }
.card-corner .suit-svg { width:13px;height:13px;color:#53eaff; }
.card-corner-reversed { inset:auto 13px 13px auto;transform:rotate(180deg); }
.royal-portrait { position:absolute;inset:28px 15px 30px;width:calc(100% - 30px);height:calc(100% - 58px); }
.portrait-frame { fill:rgba(141,105,255,.055);stroke:#9474d7;stroke-opacity:.66;stroke-width:1.2; }
.portrait-lines { fill:none;stroke:#70eaff;stroke-opacity:.48;stroke-width:1; }
.portrait-crown { fill:#bf91ff;stroke:#e5ccff;stroke-opacity:.82;stroke-width:1; }
.portrait-face { fill:#202943;stroke:#6feaff;stroke-opacity:.65;stroke-width:1.2; }
.portrait-collar { fill:#a777eb;fill-opacity:.72;stroke:#d8bdff;stroke-opacity:.65;stroke-width:1; }
.portrait-jewel { fill:#5ceaff;filter:drop-shadow(0 0 4px #53eaff); }
.face-suit { position:absolute;right:12px;top:12px;width:20px;height:20px;color:#5deaff;filter:drop-shadow(0 0 7px rgba(72,226,255,.55)); }
.card-caption { position:absolute;bottom:10px;left:0;right:0;color:#a6bad4;font-size:7px;font-weight:800;letter-spacing:.2em;text-align:center; }
.playing-card.card-back { box-shadow:0 16px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(95,220,255,.15); }
.playing-card.card-front { box-shadow:0 20px 38px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.04); }
.score-player { display:flex;align-items:center;gap:10px; }
.score-player > div { min-width:0; }
.player-token { flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border:1px solid #394b67;border-radius:10px;background:linear-gradient(145deg,#14283a,#1b1a31);color:#65eaff; }
.player-token .suit-svg { width:14px;height:14px; }
.room-mark .suit-svg { width:23px;height:23px;filter:drop-shadow(0 0 8px rgba(87,230,255,.3)); }
.token-heart .suit-svg,.token-diamond .suit-svg { color:#be91ff; }
.leader-crown { width:17px;height:14px;vertical-align:-2px;color:#b88bff; }
.leader-crown .crown-svg,.winner-live .crown-svg { width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }
.winner-mark { padding:9px; }
.winner-mark .winner-suit { width:18px;height:18px;color:#d8b6ff; }
.winner-mark .crown-svg { width:20px;height:17px; }
.winner-final .winner-mark { color:#d5b2ff; }
@media (max-width:700px) {
 .brand-suits { width:32px;height:32px;grid-template-columns:repeat(2,14px);grid-template-rows:repeat(2,14px); }
 .score-player { gap:8px; }
 .player-token { flex-basis:27px;width:27px;height:27px;border-radius:9px; }
 .game-pip .suit-svg { width:15px;height:15px; }
 .royal-portrait { inset:26px 14px 28px;width:calc(100% - 28px);height:calc(100% - 54px); }
}
@media (prefers-reduced-motion: reduce) {
 .game-card:hover .game-pip .suit-svg { transform:none; }
 .playing-card,.game-card,.game-pip .suit-svg { filter:none; }
}

/* Premium card-room palette: emerald felt, warm ivory, and restrained brass. */
:root{color-scheme:light;--paper:#f5f1e8;--paper-raised:#fffdf8;--ink:#1e2b25;--muted:#58675e;--line:#d8d2c4;--pine:#176044;--pine-deep:#0f3d2d;--pine-wash:#e7efe8;--citron:#d6b468;--red:#a9403d;--soft-red:#f8eae6;--focus:#a76f16;--shadow:0 16px 44px rgba(25,48,36,.10);background:var(--paper);color:var(--ink)}
body{background:radial-gradient(ellipse at 50% -28%,#fffdf7 0,var(--paper) 54rem)}
.app-shell{width:min(1280px,calc(100% - 48px))}.topbar{border-color:#d8d1c3}.brand{color:#183c2c}.brand-name{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.035em}.brand-suits .suit-svg{color:#205d43;filter:none}.brand-suits .suit-heart,.brand-suits .suit-diamond{color:#9d4540}
.button{background:#16583d;color:#fffdf7;box-shadow:0 2px 0 rgba(13,52,37,.12)}.button:hover{background:#104630}.button-quiet{color:#234b38;background:#fffdf8;border-color:#cfc5ac}.button-quiet:hover{background:#f2ecdc}.site-footer{border-color:#d8d1c3}
.landing{padding-top:32px}.hero{min-height:350px;grid-template-columns:minmax(0,1fr) minmax(320px,.95fr);padding:42px 46px;border:1px solid #c29e55;border-radius:22px;background:linear-gradient(116deg,#174f39 0%,#10412f 60%,#0c3528 100%);box-shadow:0 19px 45px rgba(22,55,38,.14),inset 0 0 0 5px rgba(229,203,146,.055)}.hero:after{right:15%;top:-245px;border-color:rgba(238,218,166,.12)}.hero-kicker{color:#f0d28d;text-transform:uppercase;letter-spacing:.14em;font-size:11px}.hero h1{font-size:clamp(42px,5.6vw,66px);line-height:1.01}.hero h1 span{color:#efcf86}.hero p{color:#e2e9df;max-width:440px}.hero-copy{z-index:2}
.table-art{position:absolute;inset:0 0 0 auto;width:55%;height:100%;transform:none;overflow:hidden;border-radius:0 22px 22px 0}.table-art:before{position:absolute;content:"";z-index:1;inset:0;background:linear-gradient(90deg,#10412f 0%,rgba(16,65,47,.22) 30%,rgba(16,65,47,0) 75%),linear-gradient(0deg,rgba(10,45,32,.18),transparent 45%)}.table-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.game-section{padding-top:46px}.section-heading{align-items:center}.section-heading h2{color:#203a2d;font-size:33px}.section-heading>p{text-align:right}.section-heading a,.deck-reference-fields a,.deck-reference-note a{color:#175e43}.eyebrow{color:#866521}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.game-card{min-height:151px;border:1px solid #ddd6c7;border-radius:14px;background:#fffdf8;box-shadow:0 4px 12px rgba(42,55,42,.035)}.game-card:hover{transform:translateY(-3px);border-color:#b49656;box-shadow:0 13px 28px rgba(39,59,43,.10)}.game-card h3{color:#1e3b2d;font-size:21px}.game-card p{color:#566a5e}.game-pip{color:#15563c;background:#e7efe7;border:1px solid #d2e0d2}.game-card:nth-child(2) .game-pip,.game-card:nth-child(4) .game-pip{color:#9f4842;background:#f7e9e5}.game-card:nth-child(3) .game-pip{color:#815d1c;background:#f6eed9}.join-strip{border:1px solid #d8d2c4;background:#e9ede3}.quickstart{margin-top:28px;border:1px solid #d9d4c7;border-radius:18px;background:#fffdf8}.quickstart h2{color:#203a2d}.quickstart-icon{color:#88651d}.quicksteps>div{border-color:#e7e1d4}.quicksteps b{color:#946e23}
.panel,.account-panel{border-color:#ddd6c7;border-radius:17px;background:#fffdf8;box-shadow:0 12px 32px rgba(28,51,39,.07)}.panel h1,.form-section h2,.side-box h2{color:#173e2e}.panel-lede,.field small,.field-help,.form-actions p{color:#53645a}.form-section,.undo-row{border-color:#e2ded3}.field label,.field-label{color:#243e31}.field input,.field select,.field textarea,.join-form input{color:#1d3027;background:#fffefa;border:1px solid #becabe;border-radius:9px}.field input:focus,.field select:focus,.field textarea:focus{border-color:#387657}.reference{border-color:#d8d2c4;background:#f7f4ec}.reference summary{color:#155c40}.reference ul,.side-box p{color:#4d5f54}.deck-reference-note,.room-note{background:#f2efe6;color:#48594d}.choice-note{border-color:#b98b32;background:#f6f0df;color:#4e4a38}
.room-mark{background:linear-gradient(145deg,#1c7150,#10412f);color:#f0d28d;border:1px solid #c4a45c;box-shadow:0 5px 12px rgba(16,63,48,.12)}.room-title h1{color:#163d2d}.room-title p,.share-copy small{color:#53665a}.share-band{border-color:#d8c99e;background:#f6f0df}.room-code{background:#fffdf6;color:#183f31;border-color:#ddc995}.summary-item{border-color:#dcded4;background:#fffdf8}.summary-label{color:#53685d}.summary-value{color:#173e2f}.progress-track{background:#e5e8df}.progress-track span{background:linear-gradient(90deg,#1b7856,#a9883e);box-shadow:none}.round-picker{border-color:#c5a75e;background:linear-gradient(135deg,#14563d,#0d3d2e)}.round-picker p{color:#e0d4b2}.round-picker h2{color:#fffdf5}.round-switches button{color:#fffdf5;border-color:rgba(255,255,255,.35)}.round-switches button[aria-current="step"]{background:#eed28d;border-color:#eed28d;color:#20392d}.player-scores{border-color:#bd9e58;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px),#15513a}.score-row{border-color:#e5dfd0;background:#fffdf8;box-shadow:0 4px 12px rgba(4,27,17,.13)}.score-row.is-leader{border-color:#c6a653;box-shadow:0 0 0 2px rgba(212,178,94,.22),0 4px 12px rgba(4,27,17,.12)}.score-player strong{color:#1a3d30}.score-player small,.score-total span,.score-entry label{color:#51665a}.score-total{background:#f5f1e6;border-color:#e3dcc8}.score-total strong{color:#153e2d}.score-entry input{background:#fffefa;color:#173c2d;border-color:#b8c6b8}.stepper{color:#174b36;background:#edf2e9;border-color:#c4d1c4}.stepper:hover{background:#e0ebdf}.winner-banner{border-color:#d5bd7b;background:#f5f0dd;color:#38472e;box-shadow:0 7px 18px rgba(94,74,25,.07)}.winner-mark{color:#8a681c;background:#fbf6e8;border-color:#d6bd7a}.winner-banner small{color:#785d24}.winner-banner strong{color:#2a3c2e}.winner-banner>span:last-child>span{color:#4e5b4e}.side-box{border-color:#ded8ca;background:#fffdf8}.role-toggle{color:#244a37;background:#fffdf8;border-color:#cbd7ce}.role-toggle[aria-pressed="true"]{color:#315129;border-color:#cfdd83;background:#f4f8dc}.local-callout{background:#f4f1e4;border-color:#ded7ba}.local-callout p,.event-note{color:#53665a}.alert{border-color:#dfb5ad;background:#f8eae6;color:#722d29}.site-footer{color:#5a695f}.status-dot{background:#287b4e}.account-panel{color:#21392c}
.profile-entry{margin-top:22px;padding:10px 0;border:0;background:none;color:#175a40;font-weight:700;cursor:pointer}.profile-entry:hover{color:#8b6821;text-decoration:underline}.profile-link-field{display:grid;gap:7px;margin-top:18px;padding:15px;border:1px solid #d8cfb5;border-radius:12px;background:#f7f3e8}.profile-link-field label{font-size:14px;font-weight:700;color:#243e31}.profile-link-field select{min-height:44px;padding:8px 10px;border:1px solid #becabe;border-radius:8px;color:#1d3027;background:#fffefa}.profile-link-field small,.optional-label{color:#58675e;font-size:12px}
.profile-page{max-width:1050px;margin:34px auto 64px}.profile-heading{margin:23px 0 28px}.profile-heading h1{margin:8px 0;color:#163d2d;font:500 clamp(36px,5vw,52px)/1.02 Georgia,"Times New Roman",serif;letter-spacing:-.04em}.profile-heading p,.profile-section-title p{max-width:690px;color:#53645a;line-height:1.55}.profile-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.profile-metrics>div{padding:18px 20px;border:1px solid #d9d2c2;border-radius:14px;background:#fffdf8}.profile-metrics span{display:block;color:#5a6b5f;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}.profile-metrics strong{display:block;margin-top:8px;color:#18553a;font:600 32px/1 Georgia,serif;font-variant-numeric:tabular-nums}.profile-section{margin-top:34px}.profile-section-title h2{margin:5px 0;color:#1c3c2d;font:500 29px/1.1 Georgia,serif}.profile-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.profile-game-stat,.profile-history-row,.profile-best-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 17px;border:1px solid #e0d9ca;border-radius:12px;background:#fffdf8}.profile-game-stat{display:grid;gap:5px}.profile-game-stat strong,.profile-history-row strong,.profile-best-row strong{color:#233d30}.profile-game-stat span,.profile-history-row span,.profile-best-row span{color:#5b695f;font-size:12px;line-height:1.4}.profile-list{display:grid;gap:9px;margin-top:14px}.profile-history-row>div:first-child,.profile-best-row>div:first-child{display:grid;gap:5px}.profile-result{flex:0 0 auto;min-width:115px;text-align:right}.profile-result b,.profile-result span{display:block}.profile-result b{color:#1a5b3e;font:700 20px/1.1 Georgia,serif;font-variant-numeric:tabular-nums}.profile-empty{margin-top:28px;padding:40px;border:1px dashed #b9a978;border-radius:18px;background:#faf7ee;text-align:center}.profile-empty-mark{display:grid;place-items:center;width:54px;height:54px;margin:auto auto 14px;border-radius:50%;color:#d8be7f;background:#15533a;font-size:25px}.profile-empty h2{color:#1c3c2d;font:500 27px Georgia,serif}.profile-empty p{max-width:570px;margin:0 auto 18px;color:#53645a;line-height:1.55}.profile-footnote{margin-top:28px;color:#56675c;font-size:12px;line-height:1.5}
@media(max-width:1000px){.app-shell{width:min(100% - 36px,900px)}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{min-height:330px;padding:35px}.room-layout{grid-template-columns:minmax(0,1fr)}.side-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.app-shell{width:min(calc(100% - 28px),560px)}.topbar{min-height:68px}.landing{padding-top:20px}.hero{min-height:unset;display:block;padding:27px 22px 0}.hero h1{max-width:460px;font-size:clamp(37px,9.8vw,49px)}.hero p{max-width:390px;font-size:14px}.table-art{position:relative;width:calc(100% + 44px);height:210px;margin:18px -22px 0;border-radius:0 0 21px 21px}.table-art:before{background:linear-gradient(0deg,rgba(14,61,44,0),#10412f 100%)}.table-art img{object-position:58% 62%}.section-heading{display:block}.section-heading>p{text-align:left}.game-section{padding-top:32px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-card{min-height:142px;padding:15px}.game-card h3{margin-top:17px;font-size:18px}.game-card p{font-size:12px}.quickstart{padding:17px 15px}.join-strip{grid-template-columns:1fr}.join-form{align-items:stretch}.join-form input{min-width:0;width:100%}.panel{margin:22px auto 40px;padding:20px 16px}.field-grid,.players-list{grid-template-columns:1fr}.form-actions{align-items:stretch;flex-direction:column}.form-actions .button{width:100%}.profile-page{margin-top:22px}.profile-metrics{gap:8px}.profile-metrics>div{padding:13px 11px}.profile-metrics span{font-size:9px;letter-spacing:.04em}.profile-metrics strong{font-size:26px}.profile-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-history-row,.profile-best-row{align-items:flex-start;gap:8px;padding:13px}.profile-result{min-width:79px}.profile-result b{font-size:17px}.profile-result span{font-size:10px}.profile-empty{padding:28px 18px}.side-rail{grid-template-columns:1fr}}
@media(max-width:390px){.profile-game-grid{grid-template-columns:1fr}.room-actions{width:100%;justify-content:stretch}.room-actions .button{flex:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.game-search-label{display:block;margin-top:17px;color:#344e3d;font-size:12px;font-weight:750}.section-heading #gameSearch{display:block;width:min(360px,100%);min-height:44px;margin-top:6px;padding:9px 12px;border:1px solid #c4cbbc;border-radius:10px;color:#1e3227;background:#fffdf8}.section-heading #gameSearch::placeholder{color:#66736a}.game-count{display:inline-block;margin-top:6px;color:#59695f;font-size:11px}.game-card[hidden]{display:none}

/* Black card room: warm white, charcoal surfaces, and restrained gold. */
:root {
  color-scheme: dark;
  --paper: #080808;
  --paper-raised: #171615;
  --ink: #f5f0e8;
  --muted: #c1b8aa;
  --line: #48433b;
  --pine: #e2be77;
  --pine-deep: #17130c;
  --pine-wash: #29241b;
  --citron: #e2be77;
  --red: #ffb2a5;
  --soft-red: #301b18;
  --focus: #edca83;
  --shadow: 0 16px 44px rgba(0, 0, 0, .35);
  background: var(--paper);
  color: var(--ink);
}
body { background: radial-gradient(ellipse at 50% -28%, #211d16 0, var(--paper) 54rem); }
a { color: var(--pine); }
.topbar, .site-footer, .form-section, .undo-row { border-color: var(--line); }
.brand, .brand-name strong { color: var(--ink); }
.brand-suits .suit-svg, .brand-suits .suit-heart, .brand-suits .suit-diamond { color: var(--pine); filter: none; }
.button { background: var(--pine); color: var(--pine-deep); box-shadow: none; }
.button:hover { background: #f1d49c; }
.button-quiet { color: var(--ink); background: #1b1916; border-color: #817461; }
.button-quiet:hover { background: #29241b; }
.button-danger { color: var(--red); background: var(--soft-red); border-color: #a76c60; }
.button-danger:hover { background: #44251f; }
.status-dot { background: var(--pine); box-shadow: none; }
.hero { background: linear-gradient(116deg, #191715, #10100f 60%, #080808); border-color: #8f784f; box-shadow: var(--shadow), inset 0 0 0 5px rgba(226, 190, 119, .035); }
.hero:after { border-color: rgba(226, 190, 119, .12); box-shadow: 0 0 0 36px rgba(226, 190, 119, .025); }
.hero h1 { color: var(--ink); }
.hero-kicker, .hero h1 span, .eyebrow { color: var(--pine); }
.hero p { color: #e0d8ca; }
.table-art { background: #10100f; filter: none; }
.table-art:before { background: linear-gradient(90deg, #10100f, rgba(16,16,15,.12) 28%, transparent 60%); }
.table-art img { object-fit: contain; object-position: center; }
.section-heading h2, .quickstart h2, .join-strip h3, .game-card h3,
.panel h1, .form-section h2, .side-box h2, .room-title h1 { color: var(--ink); }
.section-heading a, .deck-reference-fields a, .deck-reference-note a,
.text-button, .reference summary, .profile-entry { color: var(--pine); }
.profile-entry:hover { color: #f1d49c; }
.game-card { border-color: var(--line); background: linear-gradient(155deg, #211e19, #151413 72%); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.game-card:after { background: linear-gradient(90deg, transparent, #b79961, transparent); opacity: .55; }
.game-card:hover { border-color: #b79961; box-shadow: var(--shadow); }
.game-pip, .game-card:nth-child(n) .game-pip { color: var(--pine); background: #29241b; border-color: #776647; }
.game-card:nth-child(n) .game-pip .suit-svg { color: var(--pine); }
.game-card p, .quicksteps p, .quickstart-note, .join-strip p, .panel-lede,
.field small, .field-help, .form-actions p, .room-title p, .share-copy small,
.reference ul, .side-box p, .local-callout p, .event-note, .site-footer { color: var(--muted); }
.join-strip, .quickstart, .panel, .account-panel, .side-box, .summary-item { border-color: var(--line); background: var(--paper-raised); color: var(--ink); box-shadow: none; }
.quickstart-icon { color: var(--pine); border-color: #776647; background: #29241b; }
.quicksteps > div { border-color: var(--line); }
.quicksteps b { color: var(--pine); }
.quicksteps strong, .field label, .field-label { color: var(--ink); }
input, select, textarea, .field input, .field select, .field textarea,
.join-form input, .score-entry input, .profile-link-field select,
.section-heading #gameSearch { background: #0f0e0c; color: var(--ink); border-color: #817461; }
input::placeholder, textarea::placeholder, .score-entry input::placeholder, .section-heading #gameSearch::placeholder { color: var(--muted); }
input:hover, select:hover, textarea:hover { border-color: #b79961; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, [tabindex="-1"]:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.reference, .deck-reference-note, .room-note, .choice-note, .local-callout,
.profile-link-field { border-color: var(--line); background: #211e19; color: var(--muted); }
.deck-reference-note strong, .room-note strong { color: var(--ink); }
.deck-reference-note small { color: var(--muted); }
.choice-note { border-left-color: var(--pine); }
.room-mark { border-color: #8f784f; background: #29241b; color: var(--pine); box-shadow: none; }
.room-mark .suit-svg { filter: none; }
.share-band { border-color: #776647; background: #211e19; }
.room-code, .code-display { border-color: #776647; background: #0f0e0c; color: var(--pine); }
.summary-label { color: var(--muted); }
.summary-value, .score-player strong { color: var(--ink); }
.progress-track { background: #48433b; }
.progress-track span { background: var(--pine); box-shadow: none; }
.round-picker { border-color: #776647; background: #211e19; }
.round-picker p { color: var(--muted); }
.round-picker h2, .round-switches button { color: var(--ink); }
.round-switches button { border-color: #817461; }
.round-switches button[aria-current="step"] { background: var(--pine); color: var(--pine-deep); border-color: var(--pine); box-shadow: none; }
.player-scores { border-color: #776647; background: #0e0d0b; }
.score-row { border-color: var(--line); background: #1b1916; box-shadow: none; }
.score-row.is-leader { border-color: #b79961; box-shadow: 0 0 0 1px rgba(226,190,119,.18); }
.score-player small, .score-total span, .score-entry label, .skip-action button { color: var(--muted); }
.score-total { border-color: var(--line); background: #12110f; }
.score-total strong { color: var(--pine); }
.stepper { border-color: #817461; color: var(--pine); background: #29241b; }
.stepper:hover { background: #393022; }
.player-token { border-color: #776647; background: #29241b; color: var(--pine); }
.token-heart .suit-svg, .token-diamond .suit-svg, .leader-crown,
.winner-mark .winner-suit, .winner-final .winner-mark { color: var(--pine); }
.winner-banner { border-color: #b79961; color: var(--ink); background: #29241b; box-shadow: none; }
.winner-mark { border-color: #8f784f; background: #17130c; color: var(--pine); }
.winner-banner small { color: var(--pine); }
.winner-banner strong { color: var(--ink); }
.winner-banner > span:last-child > span { color: var(--muted); }
.role-toggle { border-color: #817461; background: #1b1916; color: var(--ink); }
.role-toggle[aria-pressed="true"] { border-color: var(--pine); background: #29241b; color: var(--pine); }
.alert { border-color: #a76c60; background: var(--soft-red); color: var(--red); }
.profile-link-field label, .profile-heading h1, .profile-section-title h2,
.profile-game-stat strong, .profile-history-row strong, .profile-best-row strong,
.profile-empty h2 { color: var(--ink); }
.profile-link-field small, .optional-label, .profile-heading p, .profile-section-title p,
.profile-metrics span, .profile-game-stat span, .profile-history-row span,
.profile-best-row span, .profile-empty p, .profile-footnote,
.game-search-label, .game-count { color: var(--muted); }
.profile-metrics > div, .profile-game-stat, .profile-history-row, .profile-best-row,
.profile-empty { border-color: var(--line); background: var(--paper-raised); }
.profile-metrics strong, .profile-result b { color: var(--pine); }
.profile-empty-mark { background: #29241b; color: var(--pine); }
.invite-dialog { border-color: #817461; color: var(--ink); background: var(--paper-raised); box-shadow: var(--shadow); }
.invite-dialog::backdrop { background: rgba(0,0,0,.75); }
.invite-heading h2 { color: var(--ink); }
.invite-status { color: var(--pine); }
@media (max-width: 700px) {
  .table-art { height: auto; aspect-ratio: 3 / 2; }
  .table-art:before { background: linear-gradient(180deg, #10100f, transparent 18%); }
  .table-art img { object-position: center; }
}