/* The Deco club (round 9, the owner: "put all the mocks in"): the lobby, your tables, a new table, joining one,
   and learning to play. Their rules are the mock screens' own (public/mock), each scoped under its page's root
   (.club, and .c-lobby, .c-new or .c-learn beside it), with the animations renamed c-*, so nothing here reaches the
   game screen and the game's stylesheet cannot reach in: the class names both use are reset first (below). */

/* ---------------------------------------------------------------- the three faces, served from node_modules */
@font-face { font-family: 'Poiret One'; font-weight: 400; font-display: swap; src: url('/vendor/fontsource/poiret-one/files/poiret-one-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-weight: 300; font-display: swap; src: url('/vendor/fontsource/josefin-sans/files/josefin-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-weight: 400; font-display: swap; src: url('/vendor/fontsource/josefin-sans/files/josefin-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-weight: 600; font-display: swap; src: url('/vendor/fontsource/josefin-sans/files/josefin-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-display: swap; src: url('/vendor/fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-display: swap; src: url('/vendor/fontsource/cormorant-garamond/files/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-display: swap; src: url('/vendor/fontsource/cormorant-garamond/files/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/vendor/fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/vendor/fontsource/cormorant-garamond/files/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('/vendor/fontsource/cormorant-garamond/files/cormorant-garamond-latin-600-italic.woff2') format('woff2'); }

body[data-page='club'] { background: #050506; overflow: hidden; }

/* ---------------------------------------------------------------- the game's classes that the club's markup also uses:
   back to the browser's own styles first, so only the club's rules below decide how they look */
.club :is(.ghost, .panel, .field, .toggle, .seg, .tag, .stage, .game, .ic, .ledger, .on, .mine, .nm, .over, .seats, .seat, .turn, .you, .out,
  .setup, .steps, .num, .sheet, .small, .hint, .picks, .pick, .band, .sent, .stamp, .learn, .note, .dots) { all: revert; box-sizing: border-box; margin: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; }

/* ================================================================ shared (mock deco.css) */
/* Shared by the mock screens: the night, the gold frame, the type, the buttons and the small controls. */
.club {
  --night: #050506;
  --gold: #d4af61;
  --gold-hi: #f6e2a8;
  --gold-lo: #8a6a30;
  --line: rgba(212, 175, 97, 0.22);
  --line-hi: rgba(232, 201, 131, 0.8);
  --ivory: #f1e8d4;
  --ivory-2: rgba(241, 232, 212, 0.72);
  --ivory-3: rgba(241, 232, 212, 0.52);
  --ivory-4: rgba(241, 232, 212, 0.32);
  --green: 95, 214, 150;
  --emerald-text: #8fe0b4;
  --foil: linear-gradient(180deg, #fff6da 0%, #f0d089 26%, #c4944a 50%, #f6dc98 72%, #a27734 100%);
  --plate: linear-gradient(180deg, #fff1c8 0%, #eecb7c 20%, #c29349 47%, #e5bf73 68%, #fbe4a6 84%, #b5853d 100%);
  --deco: 'Poiret One', 'Josefin Sans', sans-serif;
  --sans: 'Josefin Sans', 'Futura', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --u: min(1vh, 0.62vw);
}
.club * { box-sizing: border-box; margin: 0; padding: 0; }
.club, .club { height: 100%; background: var(--night); }
.club { color: var(--ivory); font-family: var(--sans); font-weight: 300; overflow: hidden; -webkit-font-smoothing: antialiased; }
.club a { color: inherit; text-decoration: none; }
.club button, .club input { font: inherit; color: inherit; background: none; border: 0; }
.club button { cursor: pointer; }
@keyframes c-fade { to { opacity: 1; } }
@keyframes c-pulse { 50% { opacity: 0.72; } }
@keyframes c-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes c-swapIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- the room and its frame */
.club .room { position: fixed; inset: 0; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(60, 42, 20, 0.35), transparent 72%), var(--night); }
.club .layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.club .walls { z-index: 0; }
.club .vignette { z-index: 5; background: radial-gradient(ellipse 82% 78% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.6) 100%); }
.club .frame { z-index: 6; }
.club .grain { z-index: 7; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.club .glitter { z-index: 9; }
.club .frame .draw { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); animation: c-draw 2s cubic-bezier(0.65, 0, 0.25, 1) var(--dl, 0s) forwards; }
.club .settled .frame .draw { animation: none; stroke-dashoffset: 0; }
@keyframes c-draw { to { stroke-dashoffset: 0; } }
.club .page { position: absolute; inset: 0; z-index: 8; }

.club .back { position: absolute; z-index: 10; left: 104px; top: 38px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--deco); font-size: calc(1.6 * var(--u)); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ivory-3); transition: color 0.25s; }
.club .back:hover { color: var(--gold-hi); }
.club .back svg { width: 16px; height: 10px; }

/* ---------------------------------------------------------------- type */
.club .head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.club .head .crest-sm { width: calc(20 * var(--u)); color: var(--gold); }
.club .head .crest-sm svg { display: block; width: 100%; overflow: visible; }
.club .head h1 { margin-top: calc(0.4 * var(--u)); font-family: var(--deco); font-weight: 400; font-size: calc(4.2 * var(--u)); letter-spacing: 0.3em; margin-right: -0.3em; text-transform: uppercase; line-height: 1;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.club .head p { margin-top: calc(1.2 * var(--u)); font-family: var(--serif); font-style: italic; font-size: calc(2.05 * var(--u)); color: var(--ivory-2); }
.club .eyebrow { font-size: calc(1.1 * var(--u)); letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
.club .lede { font-family: var(--serif); font-style: italic; font-size: calc(2.2 * var(--u)); line-height: 1.35; color: var(--ivory-2); }
.club .rule { display: flex; align-items: center; gap: 14px; color: var(--gold); }
.club .rule::before, .club .rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 97, 0.6), transparent); }

/* ---------------------------------------------------------------- buttons */
.club .plate { position: relative; display: inline-flex; align-items: center; justify-content: center; height: calc(5.2 * var(--u)); padding: 0 calc(3.6 * var(--u)); overflow: hidden; white-space: nowrap;
  font-family: var(--sans); font-weight: 600; font-size: calc(1.35 * var(--u)); letter-spacing: 0.42em; text-transform: uppercase; color: #22170a; text-shadow: 0 1px 0 rgba(255, 244, 214, 0.55);
  background: var(--plate); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  transition: filter 0.3s ease; }
.club .plate span { position: relative; z-index: 1; margin-right: -0.42em; }
.club .plate::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(70, 46, 12, 0.5); }
.club .plate::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: c-plateSheen 6s ease-in-out 2s infinite; }
@keyframes c-plateSheen { 0% { left: -60%; } 28%, 100% { left: 130%; } }
.club .plate:hover { filter: brightness(1.1) saturate(1.05); }
.club .ghost { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: calc(5.2 * var(--u)); padding: 0 calc(3 * var(--u)); white-space: nowrap;
  font-family: var(--sans); font-weight: 400; font-size: calc(1.3 * var(--u)); letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold-hi);
  border: 1px solid rgba(212, 175, 97, 0.55); transition: border-color 0.25s, background 0.25s; }
.club .ghost span { margin-right: -0.36em; }
.club .ghost:hover { border-color: var(--gold-hi); background: rgba(212, 175, 97, 0.06); }
.club .link { font-size: calc(1.15 * var(--u)); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(212, 175, 97, 0.35); padding-bottom: 2px; }
.club .link:hover { color: var(--gold-hi); border-color: var(--gold-hi); }

/* ---------------------------------------------------------------- your move */
.club .state { display: inline-flex; align-items: center; gap: 10px; font-size: calc(1.2 * var(--u)); letter-spacing: 0.34em; text-transform: uppercase; color: var(--emerald-text); }
.club .state.dim { color: var(--ivory-3); }
.club .gem { flex: none; display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, #e3fcef 0%, #6fdc9f 38%, #137a4c 100%);
  box-shadow: 0 0 5px 1px rgba(95, 214, 150, 0.6), 0 0 14px 3px rgba(95, 214, 150, 0.2); animation: c-pulse 3.6s ease-in-out infinite; }

/* ---------------------------------------------------------------- panels and small controls */
.club .panel { position: relative; background: linear-gradient(180deg, rgba(20, 16, 11, 0.86), rgba(10, 9, 7, 0.9)); border: 1px solid var(--line); }
.club .panel::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(212, 175, 97, 0.1); pointer-events: none; }
.club .corners { position: absolute; inset: -1px; pointer-events: none; }
.club .corners i { position: absolute; width: 12px; height: 12px; border-color: var(--line-hi); border-style: solid; border-width: 0; }
.club .corners i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.club .corners i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.club .corners i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.club .corners i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

.club .field { display: flex; flex-direction: column; gap: 6px; }
.club .field > span { font-size: calc(1.05 * var(--u)); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.club .field input { padding: 6px 0 7px; font-family: var(--serif); font-style: italic; font-size: calc(2.3 * var(--u)); color: var(--ivory); border-bottom: 1px solid rgba(212, 175, 97, 0.45); outline: none; transition: border-color 0.25s; }
.club .field input::placeholder { color: var(--ivory-4); }
.club .field input:focus { border-color: var(--gold-hi); }
.club .field small { font-family: var(--serif); font-style: italic; font-size: calc(1.7 * var(--u)); color: var(--ivory-3); }

.club .toggle { position: relative; flex: none; width: calc(5.4 * var(--u)); height: calc(2.6 * var(--u)); border: 1px solid rgba(212, 175, 97, 0.55); border-radius: 999px; transition: background 0.3s, border-color 0.3s; }
.club .toggle::after { content: ''; position: absolute; top: 50%; left: calc(0.6 * var(--u)); width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); transform: translateY(-50%) rotate(45deg); background: var(--ivory-3); transition: left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s; }
.club .toggle[aria-pressed='true'] { background: rgba(212, 175, 97, 0.2); border-color: var(--gold-hi); }
.club .toggle[aria-pressed='true']::after { left: calc(100% - 1.8 * var(--u)); background: var(--gold-hi); box-shadow: 0 0 8px rgba(246, 226, 168, 0.6); }
.club .stepper { flex: none; display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(212, 175, 97, 0.4); }
.club .stepper button { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); color: var(--gold); font-size: calc(1.8 * var(--u)); line-height: 1; }
.club .stepper button:hover { color: var(--gold-hi); background: rgba(212, 175, 97, 0.08); }
.club .stepper b { min-width: calc(7 * var(--u)); text-align: center; font-weight: 400; font-family: var(--serif); font-style: italic; font-size: calc(2 * var(--u)); color: var(--ivory); }
.club .seg { display: inline-flex; border: 1px solid rgba(212, 175, 97, 0.4); }
.club .seg button { padding: calc(0.8 * var(--u)) calc(1.6 * var(--u)); font-size: calc(1.05 * var(--u)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory-3); transition: background 0.25s, color 0.25s; white-space: nowrap; }
.club .seg button + button { border-left: 1px solid rgba(212, 175, 97, 0.25); }
.club .seg button[aria-pressed='true'] { background: rgba(212, 175, 97, 0.18); color: var(--gold-hi); }
.club .seg button:hover { color: var(--ivory); }

.club .medal { display: block; width: 100%; height: auto; }
.club .coin svg { display: block; width: 100%; height: 100%; }
.club .rise { opacity: 0; animation: c-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--d, 0) * 90ms + 200ms); }
@media (prefers-reduced-motion: reduce) {
  .club *, .club *::before, .club *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ================================================================ the lobby and your tables (mock club9) */
.club.c-lobby {
    --night: #050506;
    --gold: #d4af61;
    --gold-hi: #f6e2a8;
    --ivory: #f1e8d4;
    --ivory-2: rgba(241, 232, 212, 0.72);
    --ivory-3: rgba(241, 232, 212, 0.52);
    --ivory-4: rgba(241, 232, 212, 0.32);
    --green: 95, 214, 150;
    --emerald-text: #8fe0b4;
    --foil: linear-gradient(180deg, #fff6da 0%, #f0d089 26%, #c4944a 50%, #f6dc98 72%, #a27734 100%);
    --plate: linear-gradient(180deg, #fff1c8 0%, #eecb7c 20%, #c29349 47%, #e5bf73 68%, #fbe4a6 84%, #b5853d 100%);
    --deco: 'Poiret One', 'Josefin Sans', sans-serif;
    --sans: 'Josefin Sans', 'Futura', sans-serif;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --u: min(1vh, 0.62vw);
    --hy: 83vh;
  }
  .club.c-lobby * { box-sizing: border-box; margin: 0; padding: 0; }
  .club.c-lobby, .club.c-lobby { height: 100%; background: var(--night); }
  .club.c-lobby { color: var(--ivory); font-family: var(--sans); font-weight: 300; overflow: hidden; -webkit-font-smoothing: antialiased; }
  .club.c-lobby a { color: inherit; text-decoration: none; }
  .club.c-lobby button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

  /* ---------------------------------------------------------------- the night, in layers */
  .club.c-lobby .room { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: var(--night); }
  .club.c-lobby .layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .club.c-lobby .scene { position: absolute; inset: 0; z-index: 0; isolation: isolate; transform-origin: var(--zx, 50%) var(--zy, 80%);
    background:
      radial-gradient(ellipse 48% 34% at 50% 22%, rgba(212, 175, 97, 0.08), transparent 72%),
      radial-gradient(ellipse 62% 30% at 50% var(--hy), rgba(24, 44, 92, 0.5), transparent 72%),
      radial-gradient(ellipse 36% 22% at 50% var(--hy), rgba(255, 196, 110, 0.12), transparent 70%);
    transition: transform 1.5s cubic-bezier(0.62, 0, 0.86, 0.32), opacity 1.1s ease 0.35s; }
  .club.c-lobby .beams { z-index: 0; opacity: 0; animation: c-fade 2.6s ease 1s forwards; }
  .club.c-lobby .rays { z-index: 1; opacity: 0; animation: c-fade 3s ease 2.9s forwards; }
  .club.c-lobby #sky { z-index: 2; }
  .club.c-lobby .bay { z-index: 3; }
  .club.c-lobby #mirror { z-index: 4; }
  .club.c-lobby .vignette { z-index: 5; background: radial-gradient(ellipse 82% 78% at 50% 42%, transparent 52%, rgba(0, 0, 0, 0.6) 100%); }
  .club.c-lobby .frame { z-index: 6; }
  .club.c-lobby .grain { z-index: 7; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .club.c-lobby #front { z-index: 9; }
  

  .club.c-lobby .beam { position: absolute; left: var(--x); top: calc(var(--hy) - 150vh); width: 64vh; height: 150vh; margin-left: -32vh; transform-origin: 50% 100%;
    background: conic-gradient(from -3.5deg at 50% 100%, rgba(255, 242, 214, 0) 0deg, rgba(255, 242, 214, 0.12) 1.8deg, rgba(255, 247, 230, 0.2) 3.5deg, rgba(255, 242, 214, 0.12) 5.2deg, rgba(255, 242, 214, 0) 7deg, rgba(255, 242, 214, 0) 360deg);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 92%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 92%);
    will-change: transform; animation: c-sweep var(--dur, 17s) ease-in-out var(--delay, 0s) infinite alternate; }
  @keyframes c-sweep { from { transform: rotate(var(--from, -30deg)); } to { transform: rotate(var(--to, 24deg)); } }

  .club.c-lobby .frame .draw, .club.c-lobby .crest .draw { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); animation: c-draw 2.4s cubic-bezier(0.65, 0, 0.25, 1) var(--dl, 0s) forwards; }
  .club.c-lobby .settled .frame .draw { animation: none; stroke-dashoffset: 0; }
  

  .club.c-lobby .lamp { animation: c-lampOn 1.4s ease 2.5s both, c-pulse 3.6s ease-in-out 3.9s infinite; }
  .club.c-lobby .shim { animation: c-shim 2.6s ease-in-out infinite; }
  .club.c-lobby .reflection { opacity: 0; animation: c-fade 2s ease 2.8s forwards; }
  .club.c-lobby .jet { transform-box: fill-box; transform-origin: 50% 100%; animation: c-jet 1.9s ease-in-out infinite; }
  .club.c-lobby .jet.b { animation-duration: 2.3s; animation-delay: -0.7s; }
  .club.c-lobby .spray { animation: c-shim 1.7s ease-in-out infinite; }
  @keyframes c-jet { 50% { transform: scaleY(0.93); opacity: 0.82; } }
  @keyframes c-lampOn { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0.35; } 100% { opacity: 1; } }
  
  @keyframes c-shim { 0%, 100% { opacity: 1; } 40% { opacity: 0.25; } 70% { opacity: 0.8; } }

  /* ---------------------------------------------------------------- the lobby: the name, and three doors */
  .club.c-lobby .lobby { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; padding-top: calc(3.4 * var(--u)); text-align: center;
    transition: opacity 0.55s ease, transform 0.9s ease; }
  .club.c-lobby .leaving .lobby { opacity: 0; transform: scale(1.03); pointer-events: none; }
  .club.c-lobby .crest { width: calc(33 * var(--u)); color: var(--gold); opacity: 0; animation: c-fade 1.2s ease 0.3s forwards; }
  .club.c-lobby .crest svg { display: block; width: 100%; overflow: visible; }
  .club.c-lobby .crest text { opacity: 0; animation: c-fade 1.6s ease 1.1s forwards; }
  .club.c-lobby .title-wrap { position: relative; }
  .club.c-lobby .title-wrap::before { content: attr(data-name); position: absolute; left: 0; top: 0; z-index: -1; font-family: var(--deco); text-transform: uppercase; line-height: 1;
    font-size: min(calc(10.6 * var(--u)), 9.6vw); letter-spacing: 0.24em; color: rgba(246, 226, 168, 0.3); filter: blur(16px); opacity: 0; animation: c-fade 2s ease 2.2s forwards; pointer-events: none; }
  .club.c-lobby h1 {
    font-family: var(--deco); font-weight: 400; text-transform: uppercase; line-height: 1;
    font-size: min(calc(10.6 * var(--u)), 9.6vw); letter-spacing: 0.24em; margin-right: -0.24em;
    background-image: linear-gradient(104deg, transparent 42%, rgba(255, 251, 236, 0.95) 50%, transparent 58%), var(--foil);
    background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: c-track 2.8s cubic-bezier(0.16, 0.7, 0.12, 1) 0.45s both, c-sheen 9s ease-in-out 3.6s infinite;
  }
  @keyframes c-track { from { letter-spacing: 0.62em; opacity: 0; filter: blur(8px); } 60% { opacity: 1; } to { letter-spacing: 0.24em; opacity: 1; filter: blur(0); } }
  @keyframes c-sheen { 0% { background-position: 160% 0, 0 0; } 26%, 100% { background-position: -70% 0, 0 0; } }
  .club.c-lobby .glint { position: absolute; z-index: 2; width: 18px; height: 18px; pointer-events: none; transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(255, 250, 232, 0.95) 0 7%, rgba(255, 240, 200, 0.35) 18%, transparent 42%); animation: c-glint 1.25s ease-in-out forwards; }
  .club.c-lobby .glint::before, .club.c-lobby .glint::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 1px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, #fffaf0, transparent); }
  .club.c-lobby .glint::after { transform: translate(-50%, -50%) rotate(90deg); }
  @keyframes c-glint { 45% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0) rotate(100deg); opacity: 0; } }
  .club.c-lobby .tag { display: flex; align-items: center; gap: 18px; margin-top: calc(1.7 * var(--u)); font-size: calc(1.3 * var(--u)); letter-spacing: 0.52em; text-transform: uppercase; color: var(--ivory-2); }
  .club.c-lobby .tag span { margin-right: -0.52em; }
  .club.c-lobby .tag::before, .club.c-lobby .tag::after { content: ''; width: calc(7 * var(--u)); height: 1px; }
  .club.c-lobby .tag::before { background: linear-gradient(90deg, transparent, rgba(212, 175, 97, 0.7)); }
  .club.c-lobby .tag::after { background: linear-gradient(90deg, rgba(212, 175, 97, 0.7), transparent); }

  .club.c-lobby .stage { position: relative; width: 100%; margin-top: calc(3 * var(--u)); }
  .club.c-lobby .triptych { display: flex; align-items: flex-end; justify-content: center; gap: calc(2.2 * var(--u)); }
  .club.c-lobby .door { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .club.c-lobby .shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: filter 0.4s ease; }
  .club.c-lobby .door:hover { transform: translateY(-4px); }
  .club.c-lobby .door:hover .shape { filter: drop-shadow(0 0 7px rgba(246, 226, 168, 0.4)); }
  .club.c-lobby .door > :not(.shape):not(.haze) { position: relative; }
  .club.c-lobby .door.main { width: calc(47 * var(--u)); height: calc(27 * var(--u)); padding: 0 calc(3 * var(--u)) calc(2.9 * var(--u)); }
  .club.c-lobby .door.main .haze { position: absolute; left: 12%; right: 12%; top: 8%; height: 60%; pointer-events: none;
    background: radial-gradient(ellipse 50% 46% at 50% 40%, rgba(var(--green), 0.1), transparent 72%); animation: c-pulse 3.6s ease-in-out infinite; }
  .club.c-lobby .state { display: inline-flex; align-items: center; gap: 12px; font-size: calc(1.3 * var(--u)); letter-spacing: 0.4em; text-transform: uppercase; color: var(--emerald-text); }
  .club.c-lobby .state span { margin-right: -0.4em; }
  .club.c-lobby .state.dim { color: var(--ivory-3); }
  .club.c-lobby .gem { flex: none; display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, #e3fcef 0%, #6fdc9f 38%, #137a4c 100%);
    box-shadow: 0 0 5px 1px rgba(95, 214, 150, 0.6), 0 0 14px 3px rgba(95, 214, 150, 0.2); animation: c-pulse 3.6s ease-in-out infinite; }
  .club.c-lobby .game { margin-top: calc(1.1 * var(--u)); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(4.6 * var(--u)); line-height: 1; color: var(--ivory); }
  .club.c-lobby .meta { margin-top: calc(1.2 * var(--u)); font-size: calc(1.45 * var(--u)); letter-spacing: 0.14em; color: var(--ivory-2); }
  .club.c-lobby .plate { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-top: calc(2.3 * var(--u)); height: calc(5.2 * var(--u)); padding: 0 calc(3.6 * var(--u)); overflow: hidden;
    font-family: var(--sans); font-weight: 600; font-size: calc(1.35 * var(--u)); letter-spacing: 0.42em; text-transform: uppercase; color: #22170a; text-shadow: 0 1px 0 rgba(255, 244, 214, 0.55);
    background: var(--plate); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    transition: filter 0.3s ease; }
  .club.c-lobby .plate span { position: relative; z-index: 1; margin-right: -0.42em; }
  .club.c-lobby .plate::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(70, 46, 12, 0.5); }
  .club.c-lobby .plate::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: c-plateSheen 6s ease-in-out 4.2s infinite; }
  
  .club.c-lobby .door.main:hover .plate, .club.c-lobby .plate:hover { filter: brightness(1.1) saturate(1.05); }
  .club.c-lobby .door.side { width: calc(26 * var(--u)); height: calc(21.5 * var(--u)); padding: 0 calc(1.6 * var(--u)) calc(2.8 * var(--u)); }
  .club.c-lobby .door.side .ic { width: calc(5 * var(--u)); height: calc(5 * var(--u)); color: var(--gold-hi); }
  .club.c-lobby .door.side .ic svg { width: 100%; height: 100%; display: block; }
  .club.c-lobby .door.side b { margin-top: calc(1.5 * var(--u)); font-family: var(--deco); font-weight: 400; font-size: calc(1.95 * var(--u)); letter-spacing: 0.24em; margin-right: -0.24em; white-space: nowrap; text-transform: uppercase; color: var(--ivory); }
  .club.c-lobby .door.side small { margin-top: calc(0.9 * var(--u)); font-family: var(--serif); font-style: italic; font-size: calc(1.95 * var(--u)); color: var(--ivory-3); }
  .club.c-lobby .door.side:hover b { color: var(--gold-hi); }
  .club.c-lobby .fine { position: absolute; z-index: 10; left: 0; right: 0; bottom: 52px; text-align: center; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ivory-4); pointer-events: none; transition: opacity 0.5s ease; }
  .club.c-lobby .leaving .fine { opacity: 0; }
  .club.c-lobby .fine a { pointer-events: auto; color: var(--gold); text-decoration: none; border-bottom: 1px dotted rgba(212, 175, 97, 0.6); }
  .club.c-lobby .fine a:hover, .club.c-lobby .fine a:focus-visible { color: var(--gold-hi); outline: none; }

  .club.c-lobby .rise { opacity: 0; animation: c-rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--d, 0) * 110ms + 1.9s); }
  

  /* through the front door */
  .club.c-lobby .entering .scene { transform: scale(3.6); opacity: 0; }
  .club.c-lobby .in-room .scene { visibility: hidden; }

  /* ---------------------------------------------------------------- the salon: your games in a list, the chosen one on its table */
  .club.c-lobby .salon { position: absolute; inset: 0; z-index: 8; opacity: 0; visibility: hidden; transform: scale(1.05); transition: opacity 0.9s ease, visibility 0.9s, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .club.c-lobby .in-room .salon { opacity: 1; visibility: visible; transform: none; }
  .club.c-lobby .salon-bg { z-index: 0; }
  .club.c-lobby .back { position: absolute; z-index: 5; left: 104px; top: 38px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--deco); font-size: calc(1.6 * var(--u)); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ivory-3); transition: color 0.25s; }
  .club.c-lobby .back:hover { color: var(--gold-hi); }
  .club.c-lobby .back svg { width: 16px; height: 10px; }

  /* the list: every game, its venue, whose move; the ones waiting on you first */
  .club.c-lobby .ledger { position: absolute; z-index: 3; left: 70px; top: 86px; bottom: 60px; width: min(31vw, calc(46 * var(--u))); display: flex; flex-direction: column; }
  .club.c-lobby .l-head { padding-left: 34px; }
  .club.c-lobby .l-head h2 { font-family: var(--deco); font-weight: 400; font-size: calc(3.3 * var(--u)); letter-spacing: 0.28em; text-transform: uppercase; line-height: 1;
    background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .club.c-lobby .l-head p { margin-top: calc(0.9 * var(--u)); font-family: var(--serif); font-style: italic; font-size: calc(1.9 * var(--u)); color: var(--ivory-2); }
  .club.c-lobby .list { list-style: none; margin-top: calc(2.4 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); overflow-y: auto; padding: 2px 14px 2px 34px;
    scrollbar-width: thin; scrollbar-color: rgba(212, 175, 97, 0.35) transparent; }
  .club.c-lobby .item { position: relative; display: grid; grid-template-columns: calc(6.4 * var(--u)) 1fr; align-items: center; gap: calc(1.6 * var(--u)); padding: calc(1.1 * var(--u)) calc(1.4 * var(--u)); cursor: pointer;
    background: rgba(14, 12, 9, 0.6); border: 1px solid rgba(212, 175, 97, 0.18); opacity: 0; transform: translateX(-8px);
    transition: background 0.3s, border-color 0.3s, opacity 0.6s ease, transform 0.6s ease; }
  .club.c-lobby .in-room .item { opacity: 1; transform: none; transition: background 0.3s, border-color 0.3s, opacity 0.6s ease calc(var(--i) * 70ms + 500ms), transform 0.6s ease calc(var(--i) * 70ms + 500ms); }
  .club.c-lobby .item:hover { border-color: rgba(232, 201, 131, 0.45); }
  .club.c-lobby .item.on { background: rgba(30, 24, 15, 0.9); border-color: rgba(232, 201, 131, 0.85); }
  .club.c-lobby .item.on::after { content: ''; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; transform: rotate(45deg); background: #1e180f;
    border-top: 1px solid rgba(232, 201, 131, 0.85); border-right: 1px solid rgba(232, 201, 131, 0.85); }
  .club.c-lobby .item.mine::before { content: ''; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 2px; background: #6fdc9f; box-shadow: 0 0 8px 1px rgba(95, 214, 150, 0.6); }
  .club.c-lobby .item .medal { display: block; width: 100%; height: auto; }
  .club.c-lobby .item .txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .club.c-lobby .item .nm { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(2.35 * var(--u)); line-height: 1.1; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .club.c-lobby .item .vn { font-size: calc(1 * var(--u)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .club.c-lobby .item .st { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: calc(1.05 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory-4); white-space: nowrap; }
  .club.c-lobby .item.mine .st { color: var(--emerald-text); }
  .club.c-lobby .item.over .nm { color: var(--ivory-3); }
  .club.c-lobby .item.new { border-style: dashed; }
  .club.c-lobby .item.new .nm { color: var(--gold-hi); }

  /* the chosen game: its name and venue, its poker table, the players round the rail */
  .club.c-lobby .focus { position: absolute; z-index: 2; top: 56px; bottom: 56px; left: calc(70px + min(31vw, calc(46 * var(--u))) + 2vw); right: 60px; }
  .club.c-lobby .f-head { position: absolute; left: 0; right: 0; top: calc(2.4 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(2 * var(--u)); transition: opacity 0.35s ease; }
  .club.c-lobby .f-head .medal { width: calc(8.4 * var(--u)); height: auto; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
  .club.c-lobby .f-head .txt { display: flex; flex-direction: column; gap: 5px; }
  .club.c-lobby .f-head h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(4.4 * var(--u)); line-height: 1; color: var(--ivory); }
  .club.c-lobby .f-head .vn { font-size: calc(1.2 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
  .club.c-lobby .f-head .state { font-size: calc(1.15 * var(--u)); }
  .club.c-lobby .pt-stage { position: absolute; left: 50%; top: calc(15.5 * var(--u)); width: calc(50 * var(--u)); height: calc(50 * var(--u)); margin-left: calc(-25 * var(--u)); perspective: calc(125 * var(--u));
    pointer-events: none; transition: opacity 0.35s ease, transform 0.5s ease; }
  .club.c-lobby .swap .pt-stage, .club.c-lobby .swap .seats, .club.c-lobby .swap .f-head, .club.c-lobby .swap .f-foot { opacity: 0; }
  .club.c-lobby .swap .pt-stage { transform: translateY(8px); }
  .club.c-lobby .over .pt-stage { filter: saturate(0.45) brightness(0.62); }

  .club.c-lobby .pt3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(50deg); }
  .club.c-lobby .pt3d > i, .club.c-lobby .pt3d > div { position: absolute; display: block; }
  .club.c-lobby .pt3d .spot { left: -32%; right: -32%; top: -70%; bottom: -70%; border-radius: 50%; transform: translateZ(calc(-11.2 * var(--u))); background: radial-gradient(closest-side, rgba(255, 214, 150, 0.11), transparent); }
  .club.c-lobby .pt3d .shadow { left: -9%; right: -9%; top: -9%; bottom: -9%; border-radius: calc(12 * var(--u)); transform: translateZ(calc(-11 * var(--u))); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.45) 62%, transparent); }
  .club.c-lobby .pt3d .col { left: calc(50% - 5 * var(--u)); top: 50%; width: calc(10 * var(--u)); height: calc(11 * var(--u)); transform-origin: top; transform: rotateX(-90deg);
    background: linear-gradient(90deg, #050404, #30261a 50%, #050404); clip-path: polygon(24% 0, 76% 0, 62% 80%, 92% 100%, 8% 100%, 38% 80%); }
  .club.c-lobby .pt3d .skirt { inset: 0; border-radius: calc(7.5 * var(--u)); transform: translateZ(calc(-2.6 * var(--u))); background: linear-gradient(90deg, #0a0806, #221a11 50%, #0a0806); box-shadow: inset 0 0 0 1px rgba(232, 201, 131, 0.55); }
  .club.c-lobby .pt3d .top { inset: 0; border-radius: calc(7.5 * var(--u)); background: radial-gradient(ellipse 70% 80% at 50% 30%, #2f271e, #100d0a 65%, #070605);
    box-shadow: inset 0 0 0 1px rgba(232, 201, 131, 0.75), inset 0 0 0 calc(0.45 * var(--u)) #0b0907, inset 0 0 0 calc(0.45 * var(--u) + 1px) rgba(232, 201, 131, 0.3); }
  .club.c-lobby .pt3d .top::before { content: ''; position: absolute; inset: calc(0.9 * var(--u)); border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 calc(0.8 * var(--u)) calc(1.2 * var(--u)) rgba(255, 240, 214, 0.09), inset 0 calc(-0.8 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, 0.5); }
  .club.c-lobby .pt3d .track { position: absolute; inset: calc(3.4 * var(--u)); border-radius: calc(4.2 * var(--u)); background: linear-gradient(100deg, #6a4d1f, #e9c880 22%, #8a6a30 44%, #f3d58f 70%, #6a4d1f); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
  .club.c-lobby .pt3d .felt { position: absolute; inset: calc(4.7 * var(--u)); border-radius: calc(2.9 * var(--u)); overflow: hidden;
    background: radial-gradient(ellipse 60% 75% at 50% 42%, var(--felt-hi), var(--felt) 58%, var(--felt-lo)); box-shadow: inset 0 0 calc(2.2 * var(--u)) rgba(0, 0, 0, 0.65); }
  .club.c-lobby .pt3d .felt::before { content: ''; position: absolute; inset: 0; opacity: 0.25; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .club.c-lobby .pt3d .felt::after { content: ''; position: absolute; inset: calc(0.7 * var(--u)); border-radius: calc(2.2 * var(--u)); border: 1px solid rgba(232, 201, 131, 0.35); }
  .club.c-lobby .pt3d .board { position: absolute; z-index: 1; inset: calc(6.9 * var(--u));
    box-shadow: 0 0 0 1px rgba(232, 201, 131, 0.75), 0 0 0 calc(0.35 * var(--u)) rgba(0, 0, 0, 0.45), inset 0 0 calc(1.2 * var(--u)) rgba(0, 0, 0, 0.35); }
  .club.c-lobby .pt3d .board svg { display: block; width: 100%; height: 100%; }
  .club.c-lobby .pt3d .reserved { position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(17 * var(--u)); height: calc(10 * var(--u)); margin: calc(-5 * var(--u)) 0 0 calc(-8.5 * var(--u));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #2a1d10; background: linear-gradient(#f4ecd9, #e2d4b3);
    box-shadow: inset 0 0 0 1px #c9a55a, inset 0 0 0 4px #f4ecd9, inset 0 0 0 5px rgba(201, 165, 90, 0.6), 0 4px 8px rgba(0, 0, 0, 0.6); }
  .club.c-lobby .pt3d .reserved b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(2.8 * var(--u)); }
  .club.c-lobby .pt3d .reserved small { font-size: calc(0.9 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
  /* the racetrack lights up emerald when the table waits on you */
  .club.c-lobby .pt3d .glow { position: absolute; z-index: 2; inset: calc(3.75 * var(--u)); border-radius: calc(3.9 * var(--u)); border: calc(0.6 * var(--u)) solid rgba(118, 222, 164, 0.88); opacity: 0; transition: opacity 0.8s; }
  .club.c-lobby .pt3d .glow.soft { border-radius: calc(4.5 * var(--u)); inset: calc(3.1 * var(--u)); border-width: calc(1.9 * var(--u)); border-color: rgba(66, 182, 122, 0.5); filter: blur(calc(1.5 * var(--u))); }
  .club.c-lobby .mine .pt3d .glow { opacity: 1; animation: c-breathe 3.8s ease-in-out infinite; }
  .club.c-lobby .mine .pt3d .felt { box-shadow: inset 0 0 calc(2.2 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 calc(4 * var(--u)) rgba(95, 214, 150, 0.09); }
  @keyframes c-breathe { 50% { opacity: 0.55; } }

  .club.c-lobby .seats { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.35s ease; }
  .club.c-lobby .seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
  .club.c-lobby .seat .coin { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: 50%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7)); }
  .club.c-lobby .seat .coin svg { display: block; width: 100%; height: 100%; }
  .club.c-lobby .seat b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(2 * var(--u)); color: var(--ivory); white-space: nowrap; }
  .club.c-lobby .seat i { font-style: normal; font-size: calc(1.05 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-3); white-space: nowrap; }
  .club.c-lobby .seat.turn b { color: var(--gold-hi); }
  .club.c-lobby .seat.turn .coin { box-shadow: 0 0 0 2px rgba(232, 201, 131, 0.8), 0 0 14px 2px rgba(232, 201, 131, 0.45); }
  .club.c-lobby .seat.you.turn .coin { box-shadow: 0 0 0 2px rgba(128, 230, 174, 0.95), 0 0 16px 3px rgba(95, 214, 150, 0.5); }
  .club.c-lobby .seat.out { opacity: 0.4; }

  .club.c-lobby .f-foot { position: absolute; left: 0; right: 0; bottom: calc(0.6 * var(--u)); display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity 0.35s ease; }
  .club.c-lobby .f-foot .meta { margin-top: 0; font-size: calc(1.3 * var(--u)); }
  .club.c-lobby .f-foot .plate { margin-top: calc(1.6 * var(--u)); }
  .club.c-lobby .aux { margin-top: calc(1.3 * var(--u)); display: flex; justify-content: center; align-items: center; gap: 12px; font-size: calc(1.15 * var(--u)); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ivory-4); }
  .club.c-lobby .aux i { font-style: normal; opacity: 0.6; }
  .club.c-lobby .aux button:hover { color: var(--gold-hi); }
  .club.c-lobby .f-foot .blurb { font-family: var(--serif); font-style: italic; font-size: calc(2.1 * var(--u)); color: var(--ivory-2); }

  @media (max-width: 700px) { .club.c-lobby { --u: min(0.9vh, 1.9vw); } }
  @media (prefers-reduced-motion: reduce) {
    .club.c-lobby *, .club.c-lobby *::before, .club.c-lobby *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }

/* ================================================================ a new table (mock new-game) */
.club.c-new .setup .head { position: absolute; left: 0; right: 0; top: calc(6.6 * var(--u)); }
  .club.c-new .setup .head .crest-sm { width: calc(15 * var(--u)); }
  .club.c-new .steps { position: absolute; left: 0; right: 0; margin-inline: auto; top: calc(20.4 * var(--u)); width: max-content; display: flex; align-items: center; list-style: none; white-space: nowrap; }
  .club.c-new .steps li { display: flex; align-items: center; }
  .club.c-new .steps li + li::before { content: ''; width: calc(4 * var(--u)); height: 1px; margin: 0 calc(0.8 * var(--u)); background: linear-gradient(90deg, rgba(212, 175, 97, 0.15), rgba(212, 175, 97, 0.55), rgba(212, 175, 97, 0.15)); }
  .club.c-new .steps button { display: flex; align-items: center; gap: calc(1.2 * var(--u)); padding: 4px 6px; color: var(--ivory-4); font-size: calc(1.1 * var(--u)); letter-spacing: 0.26em; text-transform: uppercase; transition: color 0.25s; }
  .club.c-new .steps .num { width: calc(3 * var(--u)); height: calc(3 * var(--u)); display: grid; place-items: center; transform: rotate(45deg); border: 1px solid rgba(212, 175, 97, 0.45); transition: background 0.3s, border-color 0.3s; }
  .club.c-new .steps .num b { transform: rotate(-45deg); font-family: var(--deco); font-weight: 400; font-size: calc(1.45 * var(--u)); color: var(--gold); }
  .club.c-new .steps button:hover { color: var(--ivory-2); }
  .club.c-new .steps .on button { color: var(--gold-hi); }
  .club.c-new .steps .on .num { background: rgba(212, 175, 97, 0.22); border-color: var(--gold-hi); box-shadow: 0 0 12px rgba(246, 226, 168, 0.3); }
  .club.c-new .steps .done .num { background: rgba(212, 175, 97, 0.1); }

  /* One row, never taller than the desk: a step longer than the window scrolls inside the sheet, and "Next" (and
     "Deal the cards") stays on screen. Left to grow, the row pushed them below the bottom of a laptop's window,
     where the page cannot scroll, and the seats the three picks change went out of sight with them. */
  .club.c-new .desk { position: absolute; left: 50%; top: calc(26.4 * var(--u)); bottom: calc(5.4 * var(--u)); width: min(92vw, calc(138 * var(--u))); transform: translateX(-50%);
    display: grid; grid-template-columns: minmax(0, 1fr) calc(40 * var(--u)); grid-template-rows: minmax(0, 1fr); gap: calc(4.4 * var(--u)); }
  .club.c-new .sheet { position: relative; padding: calc(3 * var(--u)) calc(3.6 * var(--u)) calc(9 * var(--u)); }
  .club.c-new .sheet .stepbody { animation: c-swapIn 0.5s ease; }
  .club.c-new .sheet h2 { font-family: var(--deco); font-weight: 400; font-size: calc(2.9 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-hi); line-height: 1; }
  .club.c-new .sheet .lede { margin-top: calc(1 * var(--u)); max-width: calc(80 * var(--u)); font-size: calc(2 * var(--u)); }
  .club.c-new .nav { position: absolute; left: calc(3.6 * var(--u)); right: calc(3.6 * var(--u)); bottom: calc(2.6 * var(--u)); display: flex; justify-content: space-between; align-items: center; }
  .club.c-new .nav .ghost[hidden] { display: inline-flex; visibility: hidden; }
  .club.c-new .ghost.small { height: calc(4 * var(--u)); padding: 0 calc(2 * var(--u)); font-size: calc(1.1 * var(--u)); letter-spacing: 0.3em; }
  .club.c-new .hint { font-family: var(--serif); font-style: italic; font-size: calc(1.8 * var(--u)); color: var(--ivory-3); }

  /* I. the guests */
  .club.c-new .picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.4 * var(--u)); margin-top: calc(2.4 * var(--u)); }
  .club.c-new .pick { display: flex; flex-direction: column; gap: 4px; padding: calc(1.3 * var(--u)) calc(1.6 * var(--u)); text-align: left; border: 1px solid var(--line); transition: border-color 0.25s, background 0.25s; }
  .club.c-new .pick b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(2.3 * var(--u)); color: var(--ivory); }
  .club.c-new .pick small { font-size: calc(1 * var(--u)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-3); }
  .club.c-new .pick:hover { border-color: rgba(232, 201, 131, 0.45); }
  .club.c-new .pick[aria-pressed='true'] { border-color: var(--gold-hi); background: rgba(212, 175, 97, 0.1); }
  .club.c-new .seats { list-style: none; margin-top: calc(2.2 * var(--u)); }
  .club.c-new .seat { display: grid; grid-template-columns: calc(4.6 * var(--u)) 1fr auto calc(2.6 * var(--u)); align-items: center; gap: calc(1.8 * var(--u)); padding: calc(0.9 * var(--u)) 0; border-bottom: 1px solid rgba(212, 175, 97, 0.14); }
  .club.c-new .seat .coinbtn { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 50%; transition: transform 0.2s; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
  .club.c-new .seat .coinbtn:hover { transform: scale(1.08); }
  .club.c-new .seat input { width: 100%; padding: 4px 0; font-family: var(--serif); font-style: italic; font-size: calc(2.3 * var(--u)); color: var(--ivory); border-bottom: 1px solid transparent; outline: none; }
  .club.c-new .seat input:focus { border-color: rgba(212, 175, 97, 0.5); }
  .club.c-new .seat input::placeholder { color: var(--ivory-4); }
  /* the host's name, while it is what stands between the table and the next step (newgame.js stopAt) */
  .club.c-new .seat input.want { border-color: #f3b7b1; box-shadow: 0 1px 0 #f3b7b1; animation: c-nudge 0.42s ease; }
  .club.c-new .seat input.want::placeholder { color: #f3b7b1; }
  @keyframes c-nudge { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
  .club.c-new .seat .you { font-size: calc(1.05 * var(--u)); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
  .club.c-new .seat .rm { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); color: var(--ivory-4); font-size: calc(2.2 * var(--u)); line-height: 1; }
  .club.c-new .seat .rm:hover { color: var(--gold-hi); }
  .club.c-new .coinrow { display: flex; gap: 10px; padding: calc(0.9 * var(--u)) 0 calc(0.5 * var(--u)) calc(6.4 * var(--u)); }
  .club.c-new .coinrow button { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: 50%; opacity: 0.85; transition: transform 0.2s, opacity 0.2s; }
  .club.c-new .coinrow button:hover { transform: translateY(-2px); opacity: 1; }
  .club.c-new .coinrow button[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 12px rgba(246, 226, 168, 0.5); opacity: 1; }
  .club.c-new .adds { display: flex; align-items: center; gap: calc(1.2 * var(--u)); margin-top: calc(1.8 * var(--u)); }
  .club.c-new .adds .hint { margin-left: auto; }

  /* II. the venue */
  .club.c-new .venues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(1.2 * var(--u)); margin-top: calc(2.2 * var(--u)); }
  .club.c-new .vcard { min-width: 0; display: flex; align-items: center; gap: calc(1.2 * var(--u)); padding: calc(1 * var(--u)) calc(1.2 * var(--u)); text-align: left; border: 1px solid var(--line); transition: border-color 0.25s, background 0.25s, transform 0.25s; }
  .club.c-new .vcard .medal { width: calc(5.4 * var(--u)); flex: none; }
  .club.c-new .vcard span { min-width: 0; }
  .club.c-new .vcard b { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(1.95 * var(--u)); line-height: 1.1; color: var(--ivory); }
  .club.c-new .vcard small { display: block; margin-top: 3px; font-size: calc(0.95 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .club.c-new .vcard:hover { border-color: rgba(232, 201, 131, 0.45); transform: translateY(-2px); }
  .club.c-new .vcard[aria-pressed='true'] { border-color: var(--gold-hi); background: rgba(212, 175, 97, 0.1); }
  .club.c-new .venue-foot { display: flex; align-items: center; gap: calc(2.4 * var(--u)); margin-top: calc(2.2 * var(--u)); }

  /* III. house rules */
  .club.c-new .groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.6 * var(--u)); margin-top: calc(2.2 * var(--u)); }
  .club.c-new .group { padding: calc(1.4 * var(--u)) calc(1.8 * var(--u)) calc(0.6 * var(--u)); border: 1px solid var(--line); background: rgba(10, 9, 7, 0.4); }
  .club.c-new .group h3 { font-weight: 400; font-size: calc(1.15 * var(--u)); letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
  .club.c-new .rulerow { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: calc(1.2 * var(--u)); row-gap: 4px; padding: calc(1.1 * var(--u)) 0; }
  .club.c-new .rulerow small { grid-column: 1 / -1; }
  .club.c-new .rulerow + .rulerow { border-top: 1px solid rgba(212, 175, 97, 0.12); }
  .club.c-new .rulerow b { font-weight: 400; font-size: calc(1.45 * var(--u)); letter-spacing: 0.05em; color: var(--ivory); }
  .club.c-new .rulerow small { display: block; font-family: var(--serif); font-style: italic; font-size: calc(1.55 * var(--u)); line-height: 1.25; color: var(--ivory-3); }
  .club.c-new .rulerow .stepper b { min-width: calc(8.4 * var(--u)); font-size: calc(1.75 * var(--u)); }
  .club.c-new .rules-foot { margin-top: calc(1.8 * var(--u)); min-height: calc(2.6 * var(--u)); }

  /* IV. the invitation */
  .club.c-new .inv-form { display: grid; gap: calc(2.6 * var(--u)); max-width: calc(72 * var(--u)); margin-top: calc(2.4 * var(--u)); }
  .club.c-new .inv-form .seg { align-self: start; }

  /* the invitation card: it fills in as you go */
  .club.c-new .card-inv { position: relative; align-self: start; padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(3.2 * var(--u)); text-align: center; color: #2a1d10;
    background: radial-gradient(ellipse at 50% 20%, #fbf4e3, #eee1c3 60%, #e3d2ad); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px #b98f45; transform: rotate(0.8deg); transition: transform 0.4s; }
  .club.c-new .card-inv::before { content: ''; position: absolute; inset: 7px; border: 3px double rgba(155, 116, 50, 0.75); pointer-events: none; }
  .club.c-new .card-inv::after { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(155, 116, 50, 0.3); pointer-events: none; }
  .club.c-new .card-inv > * { position: relative; }
  .club.c-new .card-inv .cs { width: calc(15 * var(--u)); margin: 0 auto; color: #9c7a3c; }
  .club.c-new .card-inv .cs svg { display: block; width: 100%; overflow: visible; }
  .club.c-new .card-inv .kicker { margin-top: calc(0.4 * var(--u)); font-family: var(--deco); font-size: calc(1.5 * var(--u)); letter-spacing: 0.46em; margin-right: -0.46em; color: #7a5a26; }
  .club.c-new .card-inv .req { margin-top: calc(1.4 * var(--u)); font-family: var(--serif); font-style: italic; font-size: calc(1.85 * var(--u)); line-height: 1.3; color: #4a3520; }
  .club.c-new .card-inv .gname { margin-top: calc(0.6 * var(--u)); font-family: var(--serif); font-style: italic; font-weight: 600; font-size: calc(2.4 * var(--u)); color: #2a1d10; }
  .club.c-new .card-inv .medal-sm { width: calc(6.4 * var(--u)); margin: calc(1.2 * var(--u)) auto 0; filter: drop-shadow(0 3px 5px rgba(60, 40, 10, 0.35)); }
  .club.c-new .card-inv .vname { margin-top: calc(0.8 * var(--u)); font-family: var(--deco); font-size: calc(3 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.05; color: #2a1d10; }
  .club.c-new .card-inv .vcity { margin-top: 2px; font-family: var(--serif); font-style: italic; font-size: calc(1.9 * var(--u)); color: #6a4f2a; }
  .club.c-new .card-inv .band { display: block; width: 58%; height: 6px; margin: calc(1.4 * var(--u)) auto; background: var(--felt, #1f1f27); box-shadow: 0 0 0 1px #b98f45; }
  .club.c-new .card-inv .with { font-family: var(--serif); font-style: italic; font-size: calc(1.95 * var(--u)); line-height: 1.3; color: #3a2a18; }
  .club.c-new .card-inv .coins { display: flex; justify-content: center; gap: 5px; margin-top: calc(1 * var(--u)); }
  .club.c-new .card-inv .coins span { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); }
  .club.c-new .card-inv .terms { margin-top: calc(1.2 * var(--u)); font-size: calc(1 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.9; color: #6a4f2a; }
  .club.c-new .card-inv .host { margin-top: calc(1.4 * var(--u)); font-family: var(--serif); font-style: italic; font-size: calc(1.8 * var(--u)); color: #4a3520; }
  .club.c-new .card-inv.sent { transform: rotate(-1deg) translateY(-6px); }
  .club.c-new .card-inv .stamp { position: absolute; right: calc(2 * var(--u)); bottom: calc(2 * var(--u)); padding: 4px 10px; border: 2px solid #8a1f25; color: #8a1f25; font-family: var(--deco); font-size: calc(1.4 * var(--u)); letter-spacing: 0.3em;
    transform: rotate(-10deg); opacity: 0; transition: opacity 0.3s; }
  .club.c-new .card-inv.sent .stamp { opacity: 0.85; }

/* ================================================================ learn to play (mock learn) */
.club.c-learn .learn .head { position: absolute; left: 0; right: 0; top: calc(6.6 * var(--u)); }
  .club.c-learn .learn .head .crest-sm { width: calc(15 * var(--u)); }
  .club.c-learn .desk { position: absolute; left: 50%; top: calc(23.5 * var(--u)); bottom: calc(6 * var(--u)); width: min(92vw, calc(138 * var(--u))); transform: translateX(-50%);
    display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: calc(4 * var(--u)); }

  /* the contents: three ways in */
  .club.c-learn .contents { list-style: none; display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); }
  .club.c-learn .chap { display: grid; grid-template-columns: calc(4.4 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(1.6 * var(--u)); width: 100%; padding: calc(1.6 * var(--u)) calc(1.8 * var(--u)); text-align: left;
    border: 1px solid var(--line); background: rgba(12, 10, 8, 0.6); transition: border-color 0.25s, background 0.25s; }
  .club.c-learn .chap:hover { border-color: rgba(232, 201, 131, 0.45); }
  .club.c-learn .chap[aria-pressed='true'] { border-color: var(--line-hi); background: rgba(30, 24, 15, 0.9); }
  .club.c-learn .chap .num { width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); display: grid; place-items: center; margin: 0 auto; transform: rotate(45deg); border: 1px solid rgba(212, 175, 97, 0.5); }
  .club.c-learn .chap[aria-pressed='true'] .num { background: rgba(212, 175, 97, 0.22); border-color: var(--gold-hi); }
  .club.c-learn .chap .num b { transform: rotate(-45deg); font-family: var(--deco); font-weight: 400; font-size: calc(1.5 * var(--u)); color: var(--gold); }
  .club.c-learn .chap .top { display: flex; align-items: baseline; gap: 10px; }
  .club.c-learn .chap .top b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(2.5 * var(--u)); color: var(--ivory); white-space: nowrap; }
  .club.c-learn .chap .top i { flex: 1; min-width: 20px; border-bottom: 1px dotted rgba(212, 175, 97, 0.45); transform: translateY(-4px); }
  .club.c-learn .chap .top small { font-size: calc(1.05 * var(--u)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
  .club.c-learn .chap p { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: calc(1.75 * var(--u)); line-height: 1.3; color: var(--ivory-3); }
  .club.c-learn .chap .tag { display: inline-block; margin-bottom: 6px; padding: 2px 8px; font-size: calc(0.95 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: #22170a; background: var(--plate); }

  .club.c-learn .page-panel { position: relative; padding: calc(3.2 * var(--u)) calc(3.8 * var(--u)); overflow: hidden; }
  .club.c-learn .page-panel .body { height: 100%; animation: c-swapIn 0.5s ease; }
  .club.c-learn .page-panel h2 { font-family: var(--deco); font-weight: 400; font-size: calc(2.9 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-hi); line-height: 1; }

  /* I. the guided game */
  .club.c-learn .guided { display: grid; grid-template-columns: minmax(0, 1fr) calc(40 * var(--u)); gap: calc(3.4 * var(--u)); height: 100%; }
  .club.c-learn .guided .lede { margin-top: calc(1.2 * var(--u)); }
  .club.c-learn .learns { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.1 * var(--u)) calc(2.4 * var(--u)); margin-top: calc(2.4 * var(--u)); }
  .club.c-learn .learns li { display: flex; align-items: center; gap: 12px; font-size: calc(1.45 * var(--u)); letter-spacing: 0.04em; color: var(--ivory); }
  .club.c-learn .guided .go { display: flex; flex-direction: column; align-items: flex-start; gap: calc(1.2 * var(--u)); margin-top: calc(3.2 * var(--u)); }
  .club.c-learn .guided .go .plate { flex: none; }
  .club.c-learn .guided .go small { font-family: var(--serif); font-style: italic; font-size: calc(1.75 * var(--u)); line-height: 1.3; color: var(--ivory-3); max-width: calc(46 * var(--u)); }
  .club.c-learn .vignette-table { position: relative; align-self: center; height: calc(40 * var(--u)); perspective: calc(90 * var(--u)); }
  .club.c-learn .vignette-table .t { position: absolute; left: 50%; top: 50%; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin: calc(-16 * var(--u)) 0 0 calc(-16 * var(--u)); transform: rotateX(52deg) rotateZ(-8deg);
    border-radius: calc(5 * var(--u)); background: radial-gradient(ellipse at 50% 30%, #2f271e, #0d0b09 70%); box-shadow: 0 0 0 1px rgba(232, 201, 131, 0.7), 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.8); }
  .club.c-learn .vignette-table .t::before { content: ''; position: absolute; inset: calc(2.2 * var(--u)); border-radius: calc(2.8 * var(--u)); border: calc(0.5 * var(--u)) solid rgba(118, 222, 164, 0.85); box-shadow: 0 0 calc(2 * var(--u)) rgba(95, 214, 150, 0.6), inset 0 0 calc(1.4 * var(--u)) rgba(95, 214, 150, 0.4); animation: c-pulse 3.8s ease-in-out infinite; }
  .club.c-learn .vignette-table .felt { position: absolute; inset: calc(3.1 * var(--u)); border-radius: calc(1.8 * var(--u)); background: #6b4414; }
  .club.c-learn .vignette-table .b { position: absolute; inset: calc(4.4 * var(--u)); box-shadow: 0 0 0 1px rgba(232, 201, 131, 0.7); }
  .club.c-learn .vignette-table .b svg { display: block; width: 100%; height: 100%; }
  .club.c-learn .vignette-table .note { position: absolute; right: 0; top: 4%; width: calc(21 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.4 * var(--u)); background: rgba(14, 12, 9, 0.94); border: 1px solid var(--line-hi);
    font-family: var(--serif); font-style: italic; font-size: calc(1.6 * var(--u)); line-height: 1.3; color: var(--ivory-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
  .club.c-learn .vignette-table .note b { display: block; margin-bottom: 4px; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: calc(1 * var(--u)); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }

  /* II. the rules booklet: two ivory pages */
  .club.c-learn .booklet { display: flex; flex-direction: column; height: 100%; }
  .club.c-learn .spread { flex: 1; display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(2 * var(--u)); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
  .club.c-learn .leaf { position: relative; padding: calc(3 * var(--u)) calc(3.2 * var(--u)); color: #2a1d10; background: linear-gradient(90deg, #efe4c9, #f7efdc 30%, #f4ead3); }
  .club.c-learn .leaf.l { background: linear-gradient(90deg, #f4ead3, #f7efdc 70%, #e8dbbc); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .club.c-learn .leaf::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(155, 116, 50, 0.4); pointer-events: none; }
  .club.c-learn .leaf.l::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, transparent, rgba(80, 55, 20, 0.18)); }
  .club.c-learn .leaf .icon { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #8a6a30; }
  .club.c-learn .leaf .icon svg { width: 100%; height: 100%; }
  .club.c-learn .leaf .pno { margin-top: calc(2 * var(--u)); font-family: var(--deco); font-size: calc(1.3 * var(--u)); letter-spacing: 0.4em; color: #9b7432; }
  .club.c-learn .leaf .ptitle { margin-top: calc(0.6 * var(--u)); font-family: var(--deco); font-size: calc(3.2 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: #2a1d10; }
  .club.c-learn .leaf.r { display: flex; flex-direction: column; justify-content: center; }
  .club.c-learn .leaf.r p { font-family: var(--serif); font-size: calc(2.35 * var(--u)); line-height: 1.45; color: #3a2a18; }
  .club.c-learn .leaf.r p:first-child::first-letter { font-family: var(--serif); font-weight: 600; font-size: 2.1em; line-height: 0.7; color: #8a6a30; }
  .club.c-learn .leaf.r .aside { margin-top: calc(2 * var(--u)); padding-top: calc(1.4 * var(--u)); border-top: 1px solid rgba(155, 116, 50, 0.35); font-style: italic; font-size: calc(1.9 * var(--u)); color: #6a4f2a; }
  .club.c-learn .turns { display: flex; align-items: center; justify-content: center; gap: calc(2.2 * var(--u)); margin-top: calc(1.8 * var(--u)); }
  .club.c-learn .turns .arrow { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); color: var(--gold); }
  .club.c-learn .turns .arrow svg { width: 100%; height: 100%; }
  .club.c-learn .turns .arrow:hover { color: var(--gold-hi); }
  .club.c-learn .turns .dots { display: flex; gap: 12px; }
  .club.c-learn .turns .dots i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); opacity: 0.6; }
  .club.c-learn .turns .dots i.on { background: var(--gold-hi); opacity: 1; }

  /* III. playing by post */
  .club.c-learn .post { display: flex; flex-direction: column; height: 100%; }
  .club.c-learn .points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); }
  .club.c-learn .point { padding: calc(2.4 * var(--u)) calc(2.2 * var(--u)); border: 1px solid var(--line); background: rgba(10, 9, 7, 0.45); text-align: center; }
  .club.c-learn .point .icon { display: block; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin: 0 auto; color: var(--gold-hi); }
  .club.c-learn .point .icon svg { width: 100%; height: 100%; }
  .club.c-learn .point b { display: block; margin-top: calc(1.6 * var(--u)); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(2.4 * var(--u)); color: var(--ivory); }
  .club.c-learn .point p { margin-top: calc(1 * var(--u)); font-family: var(--serif); font-size: calc(1.85 * var(--u)); line-height: 1.4; color: var(--ivory-2); }
  .club.c-learn .post .aside { margin-top: calc(2.6 * var(--u)); font-family: var(--serif); font-style: italic; font-size: calc(1.9 * var(--u)); color: var(--ivory-3); text-align: center; }

/* ================================================================ the club, live: what the mocks did not need */

/* a table waiting for its players: its code on the felt, and empty chairs round the rail */
.club.c-lobby .pt3d .reserved.code { width: calc(19 * var(--u)); height: calc(9.4 * var(--u)); margin: calc(-4.7 * var(--u)) 0 0 calc(-9.5 * var(--u)); }
.club.c-lobby .pt3d .reserved.code b { font-family: var(--deco); font-style: normal; font-weight: 400; letter-spacing: 0.24em; margin-right: -0.24em; font-size: calc(3 * var(--u)); }
.club.c-lobby .seat .coin.open { display: grid; place-items: center; border: 1px dashed rgba(232, 201, 131, 0.7); font-family: var(--deco); font-size: calc(1.8 * var(--u)); color: var(--gold-hi); background: rgba(10, 9, 7, 0.7); }
.club.c-lobby .seat.open b { color: var(--ivory-3); }
.club.c-lobby .item.table .st { color: var(--gold); }
.club.c-lobby .item.gone .nm { color: var(--ivory-3); text-decoration: line-through rgba(212, 175, 97, 0.4); }
.club.c-lobby .gone .pt-stage { filter: saturate(0.3) brightness(0.5); }

/* the invite links of a game set up before codes: a small card over the table */
.club.c-lobby .links-card { position: absolute; z-index: 6; right: 70px; bottom: 70px; width: min(34vw, calc(44 * var(--u))); padding: calc(1.8 * var(--u)) calc(2.2 * var(--u));
  background: rgba(14, 12, 9, 0.96); border: 1px solid var(--line-hi); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); }
.club.c-lobby .links-card[hidden] { display: none; }
.club.c-lobby .links-card header { display: flex; justify-content: space-between; align-items: center; }
.club.c-lobby .links-card header b { font-family: var(--deco); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-hi); font-size: calc(1.6 * var(--u)); }
.club.c-lobby .links-card header button { font-size: calc(2.4 * var(--u)); color: var(--ivory-3); line-height: 1; }
.club.c-lobby .links-card p { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: calc(1.7 * var(--u)); color: var(--ivory-3); }
.club.c-lobby .links-card ul { list-style: none; margin-top: calc(1.2 * var(--u)); display: flex; flex-direction: column; gap: 8px; }
.club.c-lobby .links-card li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(212, 175, 97, 0.14); }
.club.c-lobby .links-card li span { font-family: var(--serif); font-style: italic; font-size: calc(2 * var(--u)); }

/* notes from the house, in the club's colours */
body[data-page='club'] #toasts .toast { background: rgba(14, 12, 9, 0.96); color: #f1e8d4; border: 1px solid rgba(232, 201, 131, 0.7); border-radius: 0; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.1rem; }
body[data-page='club'] #toasts .toast.bad { border-color: rgba(236, 142, 134, 0.8); }
body[data-page='club'] #toasts .toast.good { border-color: rgba(118, 222, 164, 0.8); }

/* the pedestal starts under the skirt: where it met the tabletop, the seam showed through a card on the felt */
.club.c-lobby .pt3d .col { height: calc(8.4 * var(--u)); transform: translateZ(calc(-2.6 * var(--u))) rotateX(-90deg); }
.club.c-lobby .aux button { text-transform: inherit; letter-spacing: inherit; }

/* ---------------------------------------------------------------- a new table, live: open seats, the host code, errors */
.club .back.fore { left: auto; right: 104px; }
.club.c-new .sheet { display: flex; flex-direction: column; }
.club.c-new .sheet > #body { flex: 1; min-height: 0; overflow-y: auto; margin-right: calc(-1.6 * var(--u)); padding-right: calc(1.6 * var(--u)); scrollbar-width: thin; scrollbar-color: rgba(212, 175, 97, 0.35) transparent; }
.club.c-new .open-coin { display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(232, 201, 131, 0.7); color: var(--gold-hi); font-family: var(--deco); font-size: calc(1.8 * var(--u)); background: rgba(10, 9, 7, 0.6); }
.club.c-new .open-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.club.c-new .open-text b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: calc(2.2 * var(--u)); color: var(--ivory-2); }
.club.c-new .open-text small { font-size: calc(0.95 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club.c-new .card-inv .coin.open { display: grid; place-items: center; border-radius: 50%; border: 1px dashed #9b7432; color: #9b7432; font-family: var(--deco); font-size: calc(1.4 * var(--u)); }
.club.c-new .err { margin-top: calc(1.6 * var(--u)); font-family: var(--serif); font-style: italic; font-size: calc(1.95 * var(--u)); color: #f3b7b1; }
.club.c-new .rulerow.off > b, .club.c-new .rulerow.off .stepper { opacity: 0.45; }
.club.c-new .stepper button:disabled { opacity: 0.35; cursor: default; }
.club.c-new .nav .plate:disabled { filter: grayscale(0.4) brightness(0.8); cursor: progress; }
.club.c-new .field small .link { margin-left: 8px; font-family: var(--sans); font-style: normal; font-size: calc(1 * var(--u)); }
.club.c-new .field input[type='password'] { font-style: normal; letter-spacing: 0.2em; }

/* joining with a code: the code, then your name and coin */
.club.c-new .codeform { display: flex; gap: calc(1.6 * var(--u)); align-items: stretch; margin-top: calc(1.8 * var(--u)); }
.club.c-new .code-input { flex: 1; min-width: 0; height: calc(6.6 * var(--u)); padding: 0 calc(1.6 * var(--u)); text-align: center; font-family: var(--deco); font-size: calc(3.6 * var(--u)); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--gold-hi); border: 1px solid rgba(212, 175, 97, 0.55); background: rgba(10, 9, 7, 0.6); outline: none; transition: border-color 0.25s; }
.club.c-new .code-input:focus { border-color: var(--gold-hi); }
.club.c-new .code-input::placeholder { color: var(--ivory-4); }
.club.c-new .codeform .ghost { height: calc(6.6 * var(--u)); }
.club.c-new .codeform + .hint, .club.c-new .codeform + .err { margin-top: calc(1.4 * var(--u)); }
.club.c-new .seatform { display: grid; gap: calc(2.2 * var(--u)); margin-top: calc(2.6 * var(--u)); padding-top: calc(2.2 * var(--u)); border-top: 1px solid rgba(212, 175, 97, 0.18); }
.club.c-new .seatform .lede { margin-top: 0; }
.club.c-new .coinrow.free { padding: 4px 0 0; flex-wrap: wrap; }
.club.c-new .coinrow.free button:disabled { opacity: 0.2; cursor: not-allowed; transform: none; }
.club.c-new .go { display: flex; gap: 12px; margin-top: calc(0.4 * var(--u)); }
.club.c-new .go .plate:disabled { filter: grayscale(0.4) brightness(0.8); cursor: progress; }

/* ---------------------------------------------------------------- a table waiting for its players: the salon's list and table */
.club.c-wait .wait-page { position: absolute; inset: 0; z-index: 8; }
.club.c-wait .list { flex: 0 1 auto; min-height: 0; }
.club.c-wait .item { grid-template-columns: calc(5 * var(--u)) 1fr; cursor: default; }
.club.c-wait .item .coin { width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); border-radius: 50%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.club.c-wait .item .coin svg { display: block; width: 100%; height: 100%; }
.club.c-wait :is(.item, .seat) .coin.open { display: grid; place-items: center; border: 1px dashed rgba(232, 201, 131, 0.7); color: var(--gold-hi); font-family: var(--deco); font-size: calc(1.8 * var(--u)); background: rgba(10, 9, 7, 0.7); }
.club.c-wait .item.open { border-style: dashed; }
.club.c-wait .item.on::after { display: none; }
.club.c-wait .acts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.club.c-wait .acts .link { font-size: calc(0.95 * var(--u)); }
.club.c-wait .host-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: calc(1.6 * var(--u)) 14px 0 34px; }
.club.c-wait .ghost.small { height: calc(4 * var(--u)); padding: 0 calc(1.8 * var(--u)); font-size: calc(1.05 * var(--u)); letter-spacing: 0.26em; }
.club.c-wait .deal-now { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: calc(2.2 * var(--u)) 14px 0 34px; }
.club.c-wait .deal-now small, .club.c-wait .note-line { font-family: var(--serif); font-style: italic; font-size: calc(1.75 * var(--u)); line-height: 1.3; color: var(--ivory-3); }
.club.c-wait .note-line { margin: calc(2.2 * var(--u)) 14px 0 34px; }
.club.c-wait .ledger > .plate { margin: calc(1.4 * var(--u)) 0 0 34px; align-self: flex-start; }
.club.c-wait .err { margin: calc(1.4 * var(--u)) 14px 0 34px; font-family: var(--serif); font-style: italic; font-size: calc(1.8 * var(--u)); color: #f3b7b1; }
.club.c-wait .plate:disabled { filter: grayscale(0.5) brightness(0.7); cursor: default; }
.club.c-wait .plate:disabled::after { display: none; }
.club.c-wait .wait-msg { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center; font-family: var(--serif); font-style: italic; font-size: calc(2.4 * var(--u)); color: var(--ivory-2); }
.club.c-wait .f-foot .meta { max-width: calc(64 * var(--u)); margin-inline: auto; line-height: 1.4; }

/* ---------------------------------------------------------------- about (about.js): Learn to play's frame, a page of fine print */
.club.c-about .prose h2 { font-family: var(--deco); font-weight: 400; font-size: calc(2.9 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-hi); line-height: 1.1; }
.club.c-about .prose h2.second { margin-top: calc(3 * var(--u)); }
.club.c-about .prose .lede { margin-top: calc(1.4 * var(--u)); font-size: calc(2.2 * var(--u)); }
.club.c-about .prose p, .club.c-about .prose li { margin-top: calc(1.2 * var(--u)); font-family: var(--serif); font-size: calc(1.95 * var(--u)); line-height: 1.45; color: var(--ivory-2); }
.club.c-about .prose ul { margin-top: calc(0.6 * var(--u)); padding-left: 1.1em; }
.club.c-about .prose li::marker { color: var(--gold); }
.club.c-about .prose li b { color: var(--ivory); font-weight: 600; }
.club.c-about .prose .aside { margin-top: calc(2.4 * var(--u)); font-style: italic; color: var(--ivory-3); font-size: calc(1.8 * var(--u)); }
.club.c-about .prose a { color: var(--gold-hi); }

/* ---------------------------------------------------------------- learn to play, live */
.club.c-learn .page-panel .body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212, 175, 97, 0.35) transparent; }
/* The rules book is sized to its panel, but its page-turner row sits 7px deep in the scrollable area, so a wheel
   over the book slid its title half out of the top (the owner: the lines must not go off the box). */
.club.c-learn .page-panel .body.book { overflow-y: hidden; }
.club.c-learn .go .plate:disabled { filter: grayscale(0.4) brightness(0.8); cursor: progress; }
.club.c-learn .hostcode { width: min(100%, calc(40 * var(--u))); }

/* ================================================================ on a phone (round 9: the phone's own design is still to come; until
   then every page stacks into one scrolling column, and the club's unit grows so the words stay readable) */
@media (max-width: 760px) {
  .club { --u: min(1.1vh, 2.5vw); }
  .club .back { left: 40px; top: 64px; font-size: 10px; letter-spacing: 0.22em; }
  .club .back.fore { left: auto; right: 40px; }
  .club .plate { padding: 0 20px; letter-spacing: 0.24em; }
  .club .plate span { margin-right: -0.24em; }

  /* the lobby: the middle door first, the side doors under it */
  .club.c-lobby .lobby { padding-top: calc(2 * var(--u)); }
  .club.c-lobby .triptych { flex-wrap: wrap; align-items: stretch; gap: 12px; padding: 0 22px; }
  .club.c-lobby .door.main { order: -1; width: 100%; height: auto; min-height: calc(25 * var(--u)); padding-top: calc(6 * var(--u)); }
  .club.c-lobby .door.side { width: calc(50% - 6px); height: auto; min-height: calc(19 * var(--u)); padding-top: calc(4 * var(--u)); }
  .club.c-lobby .door.side b { font-size: calc(1.7 * var(--u)); letter-spacing: 0.16em; margin-right: -0.16em; }
  .club.c-lobby .door.side small { font-size: calc(1.7 * var(--u)); }
  .club.c-lobby .tag { font-size: calc(1.1 * var(--u)); letter-spacing: 0.32em; padding: 0 22px; }
  .club.c-lobby .tag::before, .club.c-lobby .tag::after { display: none; }
  .club.c-lobby .fine { bottom: 30px; padding: 0 30px; font-size: 9px; }

  /* your tables: the list alone; a tap sits you down */
  .club.c-lobby .ledger { left: 30px; right: 30px; top: 96px; bottom: 40px; width: auto; }
  .club.c-lobby .l-head, .club.c-lobby .list { padding-left: 4px; padding-right: 4px; }
  .club.c-lobby .salon .focus, .club.c-lobby .links-card { display: none; }
  .club.c-lobby .item.on::after { display: none; }

  /* a new table, joining one, learning: one column that scrolls */
  .club :is(.page.setup, .page.learn) { overflow-y: auto; padding: 96px 30px 48px; }
  /* The salon's sconces hang at a fixed height of the screen, which on a phone is where these pages set their
     title: the fans showed through "JOIN A TABLE" and "A NEW TABLE". A scrolling column has no walls to hang
     them on anyway. */
  .club:is(.c-new, .c-learn, .c-wait) .walls { display: none; }
  .club.c-new .setup .head, .club.c-learn .learn .head { position: static; }
  .club.c-new .steps { position: static; margin: 18px auto 0; width: auto; max-width: 100%; }
  .club.c-new .steps button { font-size: 0; gap: 0; padding: 4px; }
  .club.c-new .steps li + li::before { width: 18px; margin: 0 4px; }
  .club:is(.c-new, .c-learn) .desk { position: static; transform: none; width: auto; display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
  .club.c-new .sheet { padding: 22px 18px 90px; }
  .club.c-new .sheet > #body { overflow: visible; margin-right: 0; padding-right: 0; }
  .club.c-new .nav { left: 18px; right: 18px; bottom: 20px; }
  .club.c-new .card-inv { transform: none; }
  .club.c-new .picks { grid-template-columns: 1fr; }
  .club.c-new .seat { grid-template-columns: calc(4.6 * var(--u)) minmax(0, 1fr) calc(2.6 * var(--u)); row-gap: 8px; }
  .club.c-new .seat .seg { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .club.c-new .seat .seg button { flex: 1; padding-inline: 4px; }
  .club.c-new .seat .you { grid-column: 2 / -1; grid-row: 2; white-space: nowrap; } /* under the name, as the other seats' kinds are: a 28px column broke it over three lines */
  .club.c-new .seat .rm { grid-column: 3; grid-row: 1; }
  .club.c-new .coinrow { flex-wrap: wrap; padding-left: 0; }
  .club.c-new .adds { flex-wrap: wrap; }
  .club.c-new .adds .hint { margin-left: 0; width: 100%; }
  .club.c-new .venues { grid-template-columns: 1fr 1fr; }
  .club.c-new .groups { grid-template-columns: 1fr; }
  .club.c-new .inv-form { max-width: none; }
  .club.c-new .codeform { flex-direction: column; }

  .club.c-learn .contents { gap: 10px; }
  .club.c-learn .chap .top i, .club.c-learn .chap .top small { display: none; }
  .club.c-learn .page-panel { padding: 22px 18px; }
  .club.c-learn .guided { grid-template-columns: 1fr; }
  .club.c-learn .vignette-table { display: none; }
  .club.c-learn .learns { grid-template-columns: 1fr; }
  .club.c-learn .spread { grid-template-columns: 1fr; }
  .club.c-learn .leaf.l { padding-block: 20px; }
  .club.c-learn .points { grid-template-columns: 1fr; }

  /* a table waiting for its players: its seats, and the code large */
  .club.c-wait .wait-page { overflow-y: auto; }
  .club.c-wait .ledger { position: static; width: auto; margin: 96px 30px 0; }
  .club.c-wait .l-head, .club.c-wait .list { padding-left: 0; padding-right: 0; }
  .club.c-wait :is(.host-acts, .deal-now, .note-line, .err) { margin-left: 0; margin-right: 0; }
  .club.c-wait .ledger > .plate { margin-left: 0; }
  .club.c-wait .focus { position: static; margin: 26px 30px 48px; }
  .club.c-wait .focus :is(.pt-stage, .seats) { display: none; }
  .club.c-wait .f-head, .club.c-wait .f-foot { position: static; }
  .club.c-wait .f-head { justify-content: flex-start; }
  .club.c-wait .f-foot { margin-top: 18px; }
  .club.c-wait .f-foot .code-line { display: block; margin-bottom: 14px; }
}
.club.c-wait .code-line { display: none; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-align: center; }
.club.c-wait .code-line b { display: block; margin-top: 6px; font-family: var(--deco); font-weight: 400; font-size: 40px; letter-spacing: 0.24em; color: var(--gold-hi); }

/* ================================================================ the ways out (round 9, the owner: "the lobby and join a game are way too
   inconspicuous ... they need to stand out a little bit more"). Not larger type: a gold ticket, framed twice like the
   panels, bright where it was a whisper, with room round the words so a click a little off them still lands. */
.club .room a.back { top: 64px; left: 132px; gap: calc(1.2 * var(--u)); padding: calc(1.15 * var(--u)) calc(1.6 * var(--u)) calc(1.15 * var(--u)) calc(1.5 * var(--u));
  color: var(--gold-hi); background: linear-gradient(180deg, rgba(30, 24, 15, 0.95), rgba(10, 9, 7, 0.95)); border: 1px solid rgba(232, 201, 131, 0.72);
  box-shadow: 0 0 0 3px rgba(8, 7, 6, 0.9), 0 0 0 4px rgba(212, 175, 97, 0.3), 0 10px 26px rgba(0, 0, 0, 0.6);
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s; }
.club .room a.back.fore { left: auto; right: 132px; }
/* (the owner: "they're still too close to the top. Leave ample space around those two") What sits under a ticket
   steps down to leave as much air below it as above; the ticket grows with the screen, so the step does too. */
.club.c-lobby .salon .ledger, .club.c-wait .ledger { top: calc(100px + 4.6 * var(--u)); }
/* A narrow window has no room beside the title for both tickets: the title and all below it step down beneath them. */
@media (min-width: 761px) and (max-width: 1000px) {
  .club.c-new { --drop: calc(98px - 2 * var(--u)); }
  .club.c-new .setup .head { top: calc(var(--drop) + 6.6 * var(--u)); }
  .club.c-new .steps { top: calc(var(--drop) + 20.4 * var(--u)); }
  /* the desk is shorter for it (the sheet keeps to it and its body scrolls, as at any size) */
  .club.c-new .desk { top: calc(var(--drop) + 26.4 * var(--u)); }
}
.club .room a.back svg { width: 18px; height: 11px; flex: none; transition: transform 0.25s; }
.club .room a.back:hover, .club .room a.back:focus-visible { color: #fff6da; border-color: #f6e2a8; outline: none;
  box-shadow: 0 0 0 3px rgba(8, 7, 6, 0.9), 0 0 0 4px rgba(246, 226, 168, 0.55), 0 0 22px rgba(246, 226, 168, 0.22), 0 10px 26px rgba(0, 0, 0, 0.6); }
.club .room a.back:hover svg { transform: translateX(-3px); }
.club .room a.back.fore:hover svg { transform: translateX(3px); }
/* On a phone the corner fans come down to 82px: the tickets sit clear below them, as far from the frame's sides as
   from each other. */
@media (max-width: 760px) {
  .club .room a.back { top: 108px; left: 42px; gap: 9px; padding: 9px 12px 9px 10px; font-size: 10px; letter-spacing: 0.2em; }
  .club .room a.back.fore { left: auto; right: 42px; }
  .club :is(.page.setup, .page.learn) { padding-top: 176px; }
  .club.c-lobby .salon .ledger { top: 176px; }
  /* On a phone the table's name and its code come first: sharing the code is the host's first move, and after the
     seats it sat below the fold. */
  .club.c-wait .wait-page { display: flex; flex-direction: column; }
  .club.c-wait .focus { order: -1; margin: 176px 30px 0; }
  .club.c-wait .ledger { margin: 34px 30px 48px; }
  /* Scrolled, a page slides under the gold tickets: a band of night fades in behind them (kit.js mountRoom). */
  .club .room::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 176px; z-index: 9; pointer-events: none;
    background: linear-gradient(180deg, var(--night) 0, var(--night) 150px, transparent); opacity: 0; transition: opacity 0.25s; }
  .club .room.scrolled::after { opacity: 1; }
}
@media (max-width: 379px) {
  .club .room a.back { left: 38px; padding: 9px 10px 9px 8px; letter-spacing: 0.14em; }
  .club .room a.back.fore { left: auto; right: 38px; }
}
@media (max-width: 349px) {
  .club .room a.back { gap: 0; }
  .club .room a.back svg { display: none; }
}