:root{color-scheme:light;--paper:#f3efe5;--ink:#27382f;--muted:#7c8071;--line:#dcd9cb;--olive:#526449;--clay:#a56443;--serif:"Source Serif 4",Georgia,serif;--sans:"Source Sans 3",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--clay);outline-offset:4px}a{color:inherit}button{border:0;background:none}button.primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:13px 19px;border-radius:3px;min-height:48px}button.secondary{border:1px solid var(--line);padding:12px 19px;border-radius:3px;min-height:48px}button.text-button{text-align:left;padding:12px 0;text-decoration:underline;text-underline-offset:5px;color:var(--olive)}button[hidden],[hidden]{display:none!important}
.club-header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:25px}.club-brand{display:flex;align-items:center;gap:14px;text-decoration:none;font-size:18px;letter-spacing:3px;font-weight:600;white-space:nowrap}.club-brand small{display:block;font-size:9px;letter-spacing:3.8px;margin-top:1px}.club-mark{display:grid;grid-template-columns:repeat(2,10px);gap:3px;transform:rotate(-9deg)}.club-mark i{background:var(--ink);width:10px;height:10px;border-radius:50%}.club-mark i:nth-child(2),.club-mark i:nth-child(3){background:var(--clay)}.club-header nav{display:flex;align-items:center;gap:30px;height:100%}.club-header nav button{height:100%;padding:0;font-size:14px;position:relative}.club-header nav button[aria-current]{font-weight:600}.club-header nav button[aria-current]:after{content:"";height:2px;background:var(--ink);position:absolute;left:0;right:0;bottom:-1px}.edition{font-family:var(--serif);font-size:12px;font-style:italic;color:var(--muted)}
.club-main{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:540px;height:calc(100dvh - 137px)}.club-intro{padding:42px 32px 22px;display:flex;flex-direction:column;overflow:auto;border-right:1px solid var(--line)}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.3px;text-transform:uppercase;margin:0 0 24px;color:var(--olive)}h1{font:600 43px/1.06 var(--serif);letter-spacing:-1.8px;margin:0 0 23px}h2{font:600 32px/1.15 var(--serif);letter-spacing:-1px;margin:0 0 14px}h3{font:600 20px/1.2 var(--serif);margin:0 0 8px}p{line-height:1.55}.intro-description{color:#737867;font-size:15px;line-height:1.7;margin:0 0 28px}.intro-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.intro-actions button{text-align:left;display:flex;justify-content:space-between;align-items:center;padding-left:12px;padding-right:12px;font-size:13px}.intro-actions button:first-child{grid-column:1/-1}.intro-bottom{margin-top:auto;padding-top:28px}.intro-divider{border:0;border-top:1px solid var(--line);margin:22px 0}.small-note{font-size:12px;color:var(--muted);line-height:1.55}.intro-footnote{font-family:var(--serif);font-size:14px;font-style:italic;color:#777c6a}.club-stage{position:relative;overflow:hidden;min-width:0;background:#d6d0c2}.club-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}/* While the players walk to their chairs the board is drawn but not yet live. Say so, rather than letting a tap vanish. */body.club-seating .club-stage canvas{cursor:progress}.scene-label{position:absolute;top:26px;left:28px;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#495b47;pointer-events:none}.live-dot{width:5px;height:5px;background:#6d8060;border-radius:50%}.scene-controls{position:absolute;bottom:53px;left:50%;transform:translateX(-50%);background:#f3efe5ed;border:1px solid #fff6;display:flex;box-shadow:0 7px 25px #3c473314;border-radius:4px;white-space:nowrap}.scene-controls button{padding:11px 17px;font-size:12px;min-height:44px}.scene-controls button[aria-pressed=true]{background:#27382f;color:var(--paper);border-radius:3px}.orbit-hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:10px;color:#67705e;letter-spacing:.4px;pointer-events:none}.scene-error{position:absolute;top:65px;left:20px;right:20px;background:var(--paper);padding:15px;border:1px solid var(--line);font-size:13px}.club-footer{height:55px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.5px;color:var(--muted)}.club-footer button{min-height:44px;color:var(--ink);font-size:13px}.club-footer button span{padding-left:15px}
dialog{border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);padding:0;width:min(820px,calc(100% - 32px));max-height:85dvh;box-shadow:0 25px 100px #1e291e3d}dialog::backdrop{background:#1d291f65;backdrop-filter:blur(5px)}.dialog-head{position:sticky;top:0;z-index:2;background:var(--paper);padding:25px 30px 17px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.dialog-head h2{font-size:27px;margin:0}.dialog-head .eyebrow{margin-bottom:8px}.dialog-close{min-width:44px;min-height:44px;font-size:25px}.dialog-body{padding:26px 30px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--line);padding:18px 30px;position:sticky;bottom:0;background:var(--paper)}.dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.dialog-body p{margin-top:0}.muted{color:var(--muted)}label.field{display:flex;flex-direction:column;gap:8px;font-size:13px;margin-bottom:17px}select,input{min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:3px;background:#fff8;color:var(--ink);max-width:100%}select{width:100%}.swatches{display:flex;gap:9px;margin:10px 0 22px}.swatch{min-width:54px;min-height:49px;padding:6px;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center}.swatch span{width:32px;height:25px;display:block;border-radius:2px}.swatch[aria-pressed=true]{border:2px solid var(--ink)}fieldset{border:0;padding:0;margin:0}legend{font-size:13px;margin-bottom:0}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.destination{border:1px solid var(--line);padding:19px;border-radius:3px;display:flex;flex-direction:column}.destination .destination-art{height:95px;margin:-19px -19px 18px;display:grid;place-items:center;position:relative;overflow:hidden;background:#d8cebb}.destination-art span{font:600 60px var(--serif);color:#fff9;z-index:1}.destination-art:before{content:"";position:absolute;width:72%;height:90%;border:1px solid #fff5;border-radius:50% 50% 0 0;bottom:-10px;transform:rotate(-13deg)}.destination p{font-size:13px;color:var(--muted);line-height:1.5}.destination h3{font-size:20px}.destination .status{margin-top:auto;padding-top:15px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase}.destination button{width:100%;margin-top:12px;font-size:12px}.journal-row{padding:21px 0;border-bottom:1px solid var(--line)}.journal-row strong{display:block;font-size:16px}.journal-row progress{width:100%;height:7px;accent-color:var(--olive);display:block;margin-top:13px}.stat-row{display:flex;gap:35px;margin:23px 0}.stat-row b{display:block;font:600 37px var(--serif)}.stat-row span{font-size:12px;color:var(--muted)}.record-illustration{width:145px;height:145px;border-radius:50%;background:repeating-radial-gradient(#283a30 0 2px,#364239 3px 4px);margin:3px auto 25px;display:grid;place-items:center}.record-illustration span{width:48px;height:48px;border-radius:50%;background:#bd9262;display:grid;place-items:center;font:600 15px var(--serif)}.record-list{display:grid;gap:8px}.record-list button{border:1px solid var(--line);padding:14px;text-align:left;border-radius:3px}.record-list button[aria-pressed=true]{border-color:var(--ink);background:#e6e7dc}.record-list small{display:block;color:var(--muted);margin-top:4px}.volume{display:flex;gap:15px;align-items:center;margin-top:20px}.volume input{flex:1;min-width:0;accent-color:var(--olive);padding:0}.game-title{font-size:29px;margin-bottom:13px}.turn-pill{display:flex;gap:9px;align-items:center;font-weight:600;font-size:15px;margin-bottom:10px}.piece-dot{width:13px;height:13px;border-radius:50%;background:var(--clay);box-shadow:inset 0 0 0 2px #ffffff26}.piece-dot.black{background:#2e4940}.game-moves{max-height:105px;overflow:auto;font-size:12px;line-height:1.8;color:var(--muted);margin:10px 0;padding-left:18px}.game-actions{display:flex;gap:10px;flex-wrap:wrap}.game-actions button{min-height:44px;font-size:12px;border-bottom:1px solid var(--line);padding:8px 0}/* How to play. A reference you read while a game waits behind it, so it is
   quiet: the tabs sit on one line, the points are short, and nothing here
   competes with the board. */
.guide-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}
.guide-tabs button{font-size:12px;border:1px solid var(--line);border-radius:3px;padding:8px 11px;min-height:40px;background:#fff6}
.guide-tabs button.on{border-color:var(--ink);background:#e6e7dc;font-weight:600}
.guide-goal{font-size:15px;line-height:1.55;margin:0 0 6px}
.guide-goal strong{font-weight:600}
.guide-meta{font-size:12px;color:var(--muted);margin:0 0 4px;letter-spacing:.4px;text-transform:uppercase}
.guide-points{margin:0 0 4px;padding-left:19px}
.guide-points li{font-size:14px;line-height:1.6;margin-bottom:7px;color:var(--ink)}
dialog[data-kind=guide] .dialog-section{margin-top:19px}
.board-access{margin-top:13px}.board-access summary{font-size:13px;cursor:pointer;padding:10px 0}.board-grid{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1;border:5px solid #675343}.board-grid button{aspect-ratio:1;padding:0;border-radius:0;background:#ddd2b5;display:grid;place-items:center;position:relative}.board-grid button.dark{background:#58634f}.board-grid button:disabled{opacity:1}.board-grid button[data-selected=true]{box-shadow:inset 0 0 0 3px #f3c766}.board-grid button[data-target=true]:after{content:"";width:20%;height:20%;border-radius:50%;background:#f6e6ad;position:absolute}.board-grid .checker{width:72%;height:72%;background:#b5744d;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff30,0 2px 2px #0003;display:grid;place-items:center;color:#ffea9e;font-size:10px}.board-grid .checker.black{background:#243d33}.board-grid .checker.white{background:#efe7d6;color:#40483c;box-shadow:inset 0 0 0 2px #00000014,0 2px 2px #0003}.legal-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.legal-list button{font-size:12px;border:1px solid var(--line);padding:6px;min-height:34px}.people{list-style:none;margin:0 0 17px;padding:0}.people li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:14px}.people button{font-size:12px;text-decoration:underline;min-height:44px}
/* Mute / Report / Remove per person. Wraps under the name on narrow screens so
   every control keeps a 44px touch target. */
.people li{flex-wrap:wrap;gap:4px 12px}.person-actions{display:flex;gap:10px;flex-wrap:wrap}
.people button[aria-pressed="true"]{color:var(--clay)}.phrase-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.phrase-grid button{border:1px solid var(--line);border-radius:3px;padding:10px;min-height:44px;font-size:13px}.reaction-line{font-size:13px;color:var(--olive);border-left:2px solid var(--line);padding-left:10px;margin:10px 0}.share-input{width:100%;font-size:12px}.notice{background:#e6e5d8;padding:15px;border-left:2px solid var(--olive);font-size:13px;line-height:1.55;margin:16px 0}#club-toast{position:fixed;bottom:76px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 20px;max-width:min(460px,90vw);font-size:13px;border-radius:3px;box-shadow:0 7px 28px #0002;z-index:10;pointer-events:none}#club-toast:empty{display:none}
/* "Around the table" (people()): seats first and legible, everyone else in a
   scannable roster with a role badge instead of a run of middot-joined text,
   then the preset phrases last and visibly secondary. Reuses the board's own
   red/black palette (--clay, and the piece-dot black) so a seat card and the
   piece it plays read as the same colour. */
.dialog-section{font-size:13px;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted);margin:22px 0 10px}
.dialog-section:first-child{margin-top:0}
.seat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seat-card{border:1px solid var(--line);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff5}
.seat-dot{width:11px;height:11px;border-radius:50%;background:var(--clay);box-shadow:inset 0 0 0 2px #ffffff26}
.seat-black .seat-dot{background:#2e4940}
.seat-info{display:flex;flex-direction:column;gap:2px}
.seat-info strong{font-size:14px}
.seat-card button{width:100%}
.person-id{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.person-name{font-weight:600}
.role-dot{width:8px;height:8px;border-radius:50%;background:var(--clay)}
.role-dot.role-black{background:#2e4940}
.role-dot.role-visitor{background:var(--muted)}
.role-pill{font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:10px;background:#e6e5d8;color:var(--muted)}
.role-pill.role-red{background:#a564431a;color:var(--clay)}
.role-pill.role-black{background:#2e49401a;color:#2e4940}
.role-pill.role-host,.role-pill.role-away{background:none;padding:2px 0}
.phrase-grid-compact{grid-template-columns:1fr 1fr 1fr}
.phrase-grid-compact button{padding:7px;font-size:12px;min-height:38px}
@media(max-width:700px){.seat-grid{grid-template-columns:1fr}.phrase-grid-compact{grid-template-columns:1fr 1fr}}
@media(hover:hover){button.primary:hover{background:#43533d}button.secondary:hover{background:#e7e6da}.club-header nav button:hover{color:var(--clay)}.destination button:hover,.phrase-grid button:hover{background:#e1e3d7}}
@media(min-width:1400px){.club-main{grid-template-columns:385px minmax(0,1fr)}.club-intro{padding:55px 43px 30px}h1{font-size:50px}}
@media(max-width:1000px){.edition{display:none}.club-header{padding:0 23px}.club-main{grid-template-columns:295px minmax(0,1fr)}.club-intro{padding:30px 24px 20px}h1{font-size:38px}.catalog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.club-header{height:62px;padding:0 16px;gap:12px}.club-brand{font-size:14px;gap:10px;letter-spacing:2px}.club-brand small{font-size:8px;letter-spacing:2px}.club-header nav{gap:15px}.club-header nav button{font-size:12px}.club-main{display:flex;flex-direction:column-reverse;height:auto;min-height:calc(100dvh - 111px)}.club-stage{height:49dvh;min-height:280px}.club-intro{padding:23px 22px;border-right:0;border-top:1px solid var(--line);overflow:visible}.club-intro .eyebrow{margin:0 0 10px}.club-intro h1{font-size:35px;max-width:320px;margin-bottom:11px}.intro-description{font-size:14px;margin-bottom:18px;max-width:490px}.intro-actions{grid-template-columns:1fr 1fr;gap:9px}.intro-actions button{padding:12px;font-size:13px}.intro-bottom{padding-top:8px}.intro-divider{margin:10px 0}.intro-footnote{display:none}.scene-label{top:16px;left:17px;font-size:9px}.scene-controls{bottom:32px}.scene-controls button{font-size:11px;padding:10px 12px}.orbit-hint{bottom:11px;font-size:9px}.club-footer{height:49px;padding:0 18px;font-size:10px}.club-footer #room-materials{display:none}.club-footer button{font-size:12px}.dialog-head{padding:20px 20px 14px}.dialog-body{padding:20px}.dialog-actions{padding:14px 20px}.dialog-grid{grid-template-columns:1fr;gap:18px}.catalog-grid{gap:12px}.destination{padding:15px}.destination .destination-art{margin:-15px -15px 12px;height:75px}.destination h3{font-size:18px}.board-grid{max-width:380px}.legal-list button{min-height:44px}.game-moves{max-height:60px}.game-title{font-size:29px}.record-illustration{width:100px;height:100px;margin-bottom:10px}#club-toast{bottom:63px}}
.account-button{min-height:44px;font-size:13px;white-space:nowrap}.field input:not([type=range]){width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font:inherit}#account-login{max-width:380px}
@media(max-width:700px){.club-header{height:104px;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding-top:7px}.club-header nav{grid-column:1 / -1;grid-row:2;justify-content:center;gap:30px;height:44px}.account-button{grid-column:2;grid-row:1}.club-main{min-height:calc(100dvh - 153px)}}
@media(max-width:370px){.club-brand{font-size:12px}.club-mark{display:none}.catalog-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Full-body third-person walking. The joystick is touch-only; keyboard and
   pointer users retain the same canvas and camera bar. */
.walk-only,.walk-joystick,.walk-status{display:none}
body.club-walking .walk-only{display:block}
body.club-walking .orbit-hint{display:block;color:#f7f1e5;text-shadow:0 1px 3px #1b241ccc}
body.club-walking .orbit-hint::before{content:"WASD or arrows to walk · tap a destination · drag to orbit · "}
.walk-joystick{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));width:112px;height:112px;border-radius:50%;background:#f3efe533;border:1px solid #fff8;box-shadow:inset 0 0 0 1px #24362b35;z-index:8;touch-action:none}
.walk-joystick span{position:absolute;width:46px;height:46px;left:33px;top:33px;border-radius:50%;background:#f3efe5dd;border:1px solid #fff;box-shadow:0 5px 16px #16221955;will-change:transform}
.walk-status{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);margin:0;padding:8px 13px;border-radius:3px;background:#27382fdd;color:var(--paper);font-size:12px;z-index:8;pointer-events:none}
body.club-walking .walk-status:not(:empty){display:block}
@media(pointer:coarse){body.club-walking .walk-joystick{display:block}body.club-walking .scene-controls{bottom:calc(150px + env(safe-area-inset-bottom,0px))}}
/* Filling the screen, two ways.

   1. The real Fullscreen API, where the browser has one. Both spellings: on a
      prefixed-only engine the unprefixed selector never matches, which used to
      leave the stage unsized on top of a toggle that could not be exited.
   2. `body.club-immersive` -- the Club hides its own chrome and pins the stage
      to the viewport. This is what an iPhone gets, because iPhone Safari has no
      element Fullscreen API at all. viewport-fit=cover is set on the Club, so
      the controls must clear the notch and the home indicator themselves. */
.club-stage:fullscreen,.club-stage:-webkit-full-screen{height:100dvh;width:100vw;border:0}
.club-stage:fullscreen #club-canvas,.club-stage:-webkit-full-screen #club-canvas{height:100dvh}
.club-stage:fullscreen .scene-controls,.club-stage:-webkit-full-screen .scene-controls{bottom:26px}
html:fullscreen .club-stage,html:-webkit-full-screen .club-stage{height:100%}

body.club-immersive{overflow:hidden}
body.club-immersive .club-header,
body.club-immersive .club-footer,
body.club-immersive #club-invites,
body.club-immersive .club-intro{display:none}
body.club-immersive .club-main{display:block;height:100dvh;min-height:0}
body.club-immersive .club-stage{position:fixed;inset:0;height:auto;min-height:0;z-index:5}
body.club-immersive .scene-controls{bottom:calc(26px + env(safe-area-inset-bottom,0px))}
/* In fullscreen the room is the whole point, so the camera bar tucks itself off
   the right edge and comes back when the tab is pressed. Out of fullscreen the
   tab is not rendered at all and the bar sits where it always has. */
.scene-controls-tab{display:none}
body.club-immersive .scene-controls-tab{
  display:flex;align-items:center;justify-content:center;
  position:absolute;bottom:calc(26px + env(safe-area-inset-bottom,0px));
  right:calc(0px + env(safe-area-inset-right,0px));
  width:30px;min-height:44px;z-index:7;
  background:#f3efe5ed;border:1px solid #fff6;border-right:0;
  border-radius:4px 0 0 4px;box-shadow:0 7px 25px #3c473314;
  font-size:15px;color:#27382f;padding:0}
body.club-immersive.club-controls-open .scene-controls-tab{transform:translateX(0)}
body.club-immersive .scene-controls-tab span{display:block;transition:transform .18s ease}
body.club-immersive.club-controls-open .scene-controls-tab span{transform:rotate(180deg)}
body.club-immersive .scene-controls{
  left:auto;right:30px;transform:translateX(calc(100% + 34px));
  transition:transform .22s ease;z-index:6}
body.club-immersive.club-controls-open .scene-controls{transform:translateX(0)}
/* The Motion setting's "Still" means no motion at all, and the same goes for a
   reader who asked the OS for less of it. The bar still opens -- it just
   arrives rather than slides. */
@media(prefers-reduced-motion:reduce){
  body.club-immersive .scene-controls,
  body.club-immersive .scene-controls-tab span{transition:none}
}
body.club-still.club-immersive .scene-controls,
body.club-still.club-immersive .scene-controls-tab span{transition:none}
/* The hint under the bar is noise once the bar itself is hidden. */
body.club-immersive .orbit-hint{display:none}
body.club-immersive .orbit-hint{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
body.club-immersive .scene-label{top:calc(16px + env(safe-area-inset-top,0px));left:calc(17px + env(safe-area-inset-left,0px))}
body.club-immersive #club-toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}

/* Development lock (gate.js). Remove with the gate before the public release. */
/* Residential switches join the camera controls without running off a phone. */
.scene-controls{width:max-content;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}

/* The members list: a light for who is here, and nothing else that moves. */
.member-list{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.member-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .1rem;border-bottom:1px solid var(--hairline,rgba(60,50,40,.12))}
.member-row:last-child{border-bottom:0}
.member-row strong{flex:1;font-weight:600}
.member-dot{width:.55rem;height:.55rem;border-radius:50%;background:rgba(90,80,70,.28);flex:none}
.member-dot.on{background:#4a8a5c;box-shadow:0 0 0 3px rgba(74,138,92,.18)}
.field-row{display:flex;align-items:center;gap:.5rem;margin:.4rem 0}
.account-button.signed-in{font-weight:600}
/* Invitations waiting for you. Stored server-side, so they survive a reload. */
.invite-bar{display:flex;flex-direction:column;gap:.4rem;padding:.6rem 1.2rem;background:rgba(74,138,92,.10);border-bottom:1px solid rgba(74,138,92,.25)}
.invite-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.invite-row span{flex:1;min-width:12rem}
.member-row button{flex:none}

/* Domino Rally is a separate detailed-game view. Its canvas owns the screen
   while active; the Club room stays mounted underneath so returning is instant. */
.domino-rally{position:fixed;inset:0;z-index:80;background:#17231e;color:#f3efe5;display:grid;grid-template-rows:auto 1fr;min-height:100dvh}
.domino-rally[hidden]{display:none}
.domino-header{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:24px;padding:16px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));border-bottom:1px solid #f3efe529;background:#1d2b25f2}
.domino-header h1{margin:2px 0 0;font:600 clamp(26px,3vw,42px)/1.05 var(--display,serif)}
.domino-header .eyebrow{color:#d6b978;margin:0}.domino-readout{display:flex;gap:16px;align-items:center;font-size:12px;color:#d8d1c2}.domino-readout strong{color:#fff}
.domino-workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px}.domino-workspace canvas{display:block;width:100%;height:100%;min-height:420px;touch-action:none}
.domino-tools{background:#f3efe5;color:#27382f;padding:22px;overflow:auto;box-shadow:-14px 0 40px #08100c55}.domino-tools fieldset{border:1px solid #8b7b6844;margin:18px 0;padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.domino-tools legend{font-weight:650;padding:0 6px}.domino-tools label{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.domino-tools input,.domino-tools select{width:100%;display:block;margin-top:5px;padding:9px 7px;border:1px solid #897b68;background:#fffaf1;color:#27382f}.domino-tools fieldset button{grid-column:1/-1}.domino-tool-row{display:flex;gap:8px;margin:9px 0}.domino-tool-row button{flex:1}.domino-start{width:100%;min-height:50px;margin:16px 0}.domino-tools button:disabled{opacity:.4;cursor:not-allowed}.domino-tools #domino-status{min-height:2.8em;margin:0;padding:10px;background:#e7dfd0;border-left:3px solid #aa824d}.domino-tools #domino-status[data-tone="bad"]{border-color:#a64c3e}.domino-tools #domino-status[data-tone="good"]{border-color:#4f7858}
body.domino-active{overflow:hidden}
.tower-game{position:fixed;inset:0;z-index:81;background:#ddd3c1;color:#27382f;display:block;min-height:100dvh}
/* The workspace IS the section now that there is no bar above it. */
.tower-game .tower-workspace{position:absolute;inset:0}
.tower-game[hidden]{display:none}
/* No chrome at all: the table is the whole window. Everything the old bar
   carried — the round, who is playing, the clock — lives in the standings
   panel now, and the two buttons it held moved into the controls drawer. */
.tower-visually-hidden,.tower-game h1.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tower-header h1{margin:2px 0 0;font:600 clamp(26px,3vw,42px)/1.05 var(--display,serif)}.tower-header .eyebrow{color:#87633f;margin:0}.tower-readout{display:flex;gap:16px;align-items:center;font-size:12px;color:#5f625b}.tower-readout strong{color:#27382f}
/* The table is the point, so it gets the whole window and the controls live
   in a drawer off the right edge — the same idea as the room's camera bar in
   fullscreen. The status line is NOT a control: it is how the game answers
   you, so it floats over the canvas and is always readable with the drawer
   shut. */
.tower-workspace{min-height:0;position:relative;display:block}.tower-workspace canvas{display:block;width:100%;height:100%;min-height:420px;touch-action:none;outline:none}
.tower-workspace #tower-status{position:absolute;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:6;margin:0;max-width:min(540px,62vw);
  padding:11px 14px;background:#f3efe5f2;border-left:3px solid #aa824d;border-radius:3px;box-shadow:0 8px 28px #3c473326;font-family:var(--serif);font-size:15px;color:#27382f}
.tower-workspace #tower-status[data-tone="bad"]{border-color:#a64c3e}.tower-workspace #tower-status[data-tone="good"]{border-color:#4f7858}
.tower-header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.tower-header-actions button{white-space:nowrap}
.tower-tools-tab{position:absolute;top:50%;right:calc(0px + env(safe-area-inset-right,0px));transform:translateY(-50%);z-index:8;
  display:flex;align-items:center;justify-content:center;gap:6px;width:34px;min-height:132px;padding:10px 0;
  background:#f3efe5ed;border:1px solid #fff6;border-right:0;border-radius:4px 0 0 4px;box-shadow:0 7px 25px #3c473314;font-size:15px;color:#27382f;
  transition:right .22s ease}
.tower-tools-tab span{display:block;transition:transform .18s ease}
/* The tab says what it is. A bare chevron on the edge of a 3D scene is not a
   discoverable way to reach Ready to play. */
.tower-tools-tab-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.tower-game.tower-controls-open .tower-tools-tab-label{display:none}
.tower-game.tower-controls-open .tower-tools-tab{min-height:64px;width:30px}
.tower-game.tower-controls-open .tower-tools-tab{right:320px}
.tower-game.tower-controls-open .tower-tools-tab span{transform:rotate(180deg)}
.tower-tools{position:absolute;top:0;right:0;bottom:0;width:320px;z-index:7;transform:translateX(100%);transition:transform .22s ease;
  padding:22px;background:#f3efe5;overflow:auto;box-shadow:-14px 0 40px #49382733}
.tower-game.tower-controls-open .tower-tools:not(.tower-board){transform:translateX(0)}
/* Standings share the drawer's shape but their own tab and open state, so a
   player can read the table without losing sight of their controls. */
.tower-board{left:0;right:auto;transform:translateX(-100%);box-shadow:14px 0 40px #49382733}
.tower-game.tower-board-open .tower-board{transform:translateX(0)}
.tower-board-tab{right:auto;left:calc(0px + env(safe-area-inset-left,0px));border-radius:0 4px 4px 0;border-right:1px solid #fff6;border-left:0;transition:left .22s ease}
.tower-game.tower-board-open .tower-board-tab{left:320px}
.tower-game.tower-board-open .tower-board-tab span[aria-hidden]{transform:rotate(180deg)}
.tower-board-tab span[aria-hidden]{transform:rotate(180deg)}
.tower-game.tower-board-open .tower-board-tab span[aria-hidden]{transform:rotate(0deg)}
/* The status line steps aside for the standings rather than hiding under
   them: it is the game answering you, and it has to stay readable. */
.tower-game.tower-board-open .tower-workspace #tower-status{left:338px}
.tower-board-title{font:600 17px var(--display,serif);margin:18px 0 6px;padding-top:12px;border-top:1px solid #d5cebf}
.tower-board-title:first-child{margin-top:0;padding-top:0;border-top:0}
.tower-board-round{font-family:var(--serif);font-size:15px;margin:0 0 10px;color:#4a5a4f}
.tower-seat{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline;padding:8px 0;border-bottom:1px solid #e0d8c8}
.tower-seat:last-child{border-bottom:0}
.tower-seat-name{font-weight:600;font-size:15px}
.tower-seat-note{grid-column:2/-1;font-size:12px;color:#6a6f66}
.tower-seat[data-active="true"]{background:#e9f0e4;margin:0 -8px;padding:8px}
.tower-seat-badge{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#4f7858}
.tower-seat-figures{grid-column:1/-1;display:flex;gap:14px;font-size:12px;color:#5f625b;margin-top:2px}
/* All-time figures sit apart from the live ones: the numbers beside them
   change during a round, these do not. */
.tower-seat-career{opacity:.72;white-space:nowrap}
.tower-seat-career b{font-variant-numeric:tabular-nums}

.tower-seat-figures b{font-weight:600;color:#27382f}
@media(prefers-reduced-motion:reduce){.tower-tools,.tower-tools-tab{transition:none}}.tower-tools button{width:100%;margin:6px 0;min-height:46px}.tower-tools button:disabled{opacity:.46;cursor:not-allowed;box-shadow:none}.tower-tools h2{font:600 21px var(--display,serif);margin-top:25px}.tower-step-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#5f625b}.tower-step-label select{flex:0 0 auto;width:auto;padding:7px 9px;border:1px solid #cec6b7;background:#faf6ed;color:#27382f;font-size:13px}body.tower-active{overflow:hidden}
@media(max-width:760px){.domino-header{grid-template-columns:1fr auto;gap:10px;padding-top:calc(10px + env(safe-area-inset-top))}.domino-readout{grid-column:1/-1;grid-row:2;justify-content:space-between}.domino-header h1{font-size:27px}.domino-workspace{grid-template-columns:1fr;grid-template-rows:minmax(45dvh,1fr) auto;overflow:auto}.domino-workspace canvas{min-height:45dvh;height:45dvh}.domino-tools{padding:14px;padding-bottom:calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px #08100c55}.domino-tools fieldset{margin:9px 0}.domino-tools .small-note{margin-bottom:0}}
@media(max-width:760px){.tower-header{grid-template-columns:1fr auto;gap:10px;padding-top:calc(10px + env(safe-area-inset-top))}.tower-readout{grid-column:1/-1;grid-row:2;justify-content:space-between}.tower-header h1{font-size:27px}.tower-workspace{overflow:hidden}.tower-workspace canvas{min-height:0;height:100%}
  /* On a phone the drawer is a bottom sheet, and its tab sits above it. */
  .tower-tools{top:auto;left:0;right:0;width:auto;max-height:74dvh;transform:translateY(100%);
    padding:14px;padding-bottom:calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px #49382733;border-radius:12px 12px 0 0}
  .tower-game.tower-controls-open .tower-tools:not(.tower-board){transform:translateY(0)}
  .tower-board{left:0;right:0;transform:translateY(100%);box-shadow:0 -10px 30px #49382733}
  .tower-game.tower-board-open .tower-board{transform:translateY(0)}
  .tower-board-tab{left:14px;right:auto;border-radius:6px 6px 0 0;border-left:1px solid #fff6;transition:bottom .22s ease}
  .tower-game.tower-board-open .tower-board-tab{left:14px;bottom:74dvh}
  .tower-game.tower-board-open .tower-workspace #tower-status{left:14px}
  .tower-tools-tab{top:auto;bottom:calc(0px + env(safe-area-inset-bottom,0px));right:14px;transform:none;
    width:auto;min-width:112px;min-height:44px;padding:0 16px;border-radius:6px 6px 0 0;border-right:1px solid #fff6;transition:bottom .22s ease}
  .tower-game .tower-tools-tab-label{writing-mode:horizontal-tb;transform:none}
  .tower-game.tower-controls-open .tower-tools-tab{min-height:44px;width:auto}
  .tower-game.tower-controls-open .tower-tools-tab{right:14px;bottom:74dvh}
  .tower-tools-tab span{transform:rotate(90deg)}
  .tower-game.tower-controls-open .tower-tools-tab span{transform:rotate(-90deg)}
  .tower-workspace #tower-status{left:14px;right:14px;max-width:none;bottom:calc(52px + env(safe-area-inset-bottom,0px));font-size:14px}}

/* --------------------------------------------------------------------------
   Club editorial system — invitations, membership and shared dialog polish.
   The materials stay quiet and architectural: warm paper, hairlines, ink and
   one clay accent. Detail comes from proportion and typography, not generic
   gradients, floating pills or decorative dashboard chrome.
   -------------------------------------------------------------------------- */
::selection{background:#bd8b672e;color:var(--ink)}
button{transition:color .16s ease,background-color .16s ease,border-color .16s ease,transform .16s ease}
button.primary{background:#21382f;border-color:#21382f;box-shadow:inset 0 -1px #0004;letter-spacing:.01em}
button.secondary{background:#f8f4ea80;border-color:#cfcabb}
button.text-button{text-decoration-thickness:1px;text-decoration-color:#75806c;text-underline-offset:6px}
@media(hover:hover){button.primary:hover{background:#314b40;transform:translateY(-1px)}button.secondary:hover{background:#eae5d9;border-color:#b8b2a2;transform:translateY(-1px)}button.text-button:hover{color:var(--clay)}}

dialog{width:min(760px,calc(100% - 40px));max-height:min(88dvh,900px);border-color:#cbc4b3;border-radius:2px;box-shadow:0 34px 100px #111b1538,0 3px 12px #111b151f;overflow:auto}
dialog[data-kind="hosting"]{width:min(1040px,calc(100% - 48px))}
dialog[data-kind="invite"]{width:min(920px,calc(100% - 48px))}
dialog[data-kind="collection"],dialog[data-kind="furnish"]{width:min(1080px,calc(100% - 48px))}
dialog[data-kind="look"]{width:min(1060px,calc(100% - 48px))}
dialog[data-kind="confirm"],dialog[data-kind="report"],dialog[data-kind="moves"]{width:min(580px,calc(100% - 32px))}
dialog::backdrop{background:#14201899;backdrop-filter:blur(8px) saturate(.72)}
.dialog-head{padding:28px 34px 20px;background:#f3efe5f7;border-bottom-color:#d5d0c2;backdrop-filter:blur(14px)}
.dialog-head h2{max-width:760px;font-size:clamp(27px,3vw,38px);line-height:1.08;letter-spacing:-1.15px}
.dialog-head .eyebrow{margin-bottom:9px;color:#6a765e}
.dialog-close{display:flex;align-items:center;gap:9px;padding:0 2px 0 14px;min-height:44px;color:#5c665b;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-left:1px solid var(--line)}
.dialog-close b{font:300 25px/1 var(--sans);margin-top:-2px}.dialog-close:hover{color:var(--ink)}
.dialog-body{padding:30px 34px 34px}.dialog-body>p:first-child{font-size:16px;line-height:1.65}.dialog-body>:last-child{margin-bottom:0}
.dialog-actions{padding:17px 34px;background:#eee9ddf5;border-top-color:#d5d0c2;backdrop-filter:blur(12px)}
.dialog-actions button{min-width:132px}
.dialog-section{font-size:10px;letter-spacing:2px;color:#687460;margin:27px 0 13px}
.dialog-grid{gap:38px}
.dialog-body .journal-row{padding:19px 2px}.dialog-body .journal-row strong{font-family:var(--serif);font-size:18px;font-weight:600}
.dialog-body .record-list{gap:7px}.dialog-body .record-list button,.record-list-item{position:relative;padding:15px 17px;border-radius:2px;background:#f8f4ea66;border-color:#d4cfc1}
.dialog-body .record-list button[aria-pressed=true],.record-list-item.on{border-color:var(--ink);box-shadow:inset 3px 0 var(--clay);background:#ebe8dc}
.dialog-body .record-list small{font-size:12px;line-height:1.5;margin-top:5px}
.dialog-body .game-actions{gap:8px}.dialog-body .game-actions button:not(.primary):not(.secondary){padding:9px 12px;border:1px solid var(--line);background:#f8f4ea55;border-radius:2px}
label.field{gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#62695e}
select,input{border-radius:2px;border-color:#c9c2b2;background:#fbf8f0;color:#20352d}

/* Avatar choices read like a tailor's sample book: no gendered presets and no
   game-store tiles. Every category is independent and remains keyboard/touch
   operable. */
.avatar-customizer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin-top:24px;border-top:1px solid var(--line)}
.avatar-field{border:0;border-bottom:1px solid var(--line);padding:19px 0 20px;min-width:0}
.avatar-field legend{font:600 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#56645b;padding:0}
.avatar-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.avatar-options button{min-height:42px;padding:8px 12px;border:1px solid #cbc4b4;background:#faf7ef;color:var(--ink);font-size:12px;border-radius:2px}
.avatar-options button[aria-pressed=true]{border-color:#263d33;box-shadow:inset 0 -3px #b26d49;background:#ebe8dc}
.avatar-options button i{display:block;width:25px;height:25px;border-radius:50%;background:var(--avatar-swatch);border:1px solid #3a302533;box-shadow:inset 0 0 0 1px #fff4;margin:auto}
.avatar-swatches button{min-width:66px;padding:8px 7px 6px}.avatar-swatches button span{display:block;margin-top:5px;font-size:10px;line-height:1.1}
@media(max-width:680px){.avatar-customizer{grid-template-columns:1fr}.avatar-options button{min-height:44px}.avatar-field{padding:16px 0 17px}}

/* A signed-out visitor sees real in-product moments, one at a time. */
.club-reel{margin:22px 0 4px;border-top:1px solid #cecabb;border-bottom:1px solid #cecabb;padding:12px 0 11px}
.club-reel-top,.club-reel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.club-reel-top{padding:0 1px 10px}.club-reel-top>span{font-size:9px;font-weight:650;letter-spacing:1.9px;text-transform:uppercase;color:#53664e}
.club-reel-top button{min-height:32px;padding:0;font-size:10px;color:#687164;text-decoration:underline;text-underline-offset:4px}
.club-reel-viewport{position:relative;aspect-ratio:16/10;overflow:hidden;background:#27382f;isolation:isolate}
.club-reel-frame{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.club-reel-frame.is-current{opacity:1;visibility:visible;transition-delay:0s;z-index:1}
.club-reel-frame img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.005)}
.club-reel-frame.is-current img{animation:club-reel-drift 5.2s linear both}
.club-reel-frame figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 14px 13px;color:#fff;background:linear-gradient(transparent,#17241ed9);text-shadow:0 1px 2px #0d1612}
.club-reel-frame figcaption strong{display:block;font:600 18px/1.05 var(--serif);letter-spacing:-.25px}.club-reel-frame figcaption span{display:block;font-size:10px;line-height:1.35;margin-top:5px;color:#f1ede2de}
.club-reel-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px #f8f2e533,inset 0 0 36px #101a1333}
.club-reel-foot{padding-top:9px}.club-reel-dots{display:flex;gap:2px}.club-reel-dots button{width:25px;min-height:28px;padding:0;display:grid;place-items:center}.club-reel-dots span{display:block;width:15px;height:2px;background:#c5bfae;transition:width .18s ease,background .18s ease}.club-reel-dots button[aria-current=true] span{width:22px;background:var(--ink)}
.club-reel-membership{font-size:11px;color:var(--ink);padding:7px 0;border-bottom:1px solid #8a8f83}.club-reel-membership span{padding-left:8px}
@keyframes club-reel-drift{from{transform:scale(1.005)}to{transform:scale(1.055)}}
body.club-still .club-reel-frame.is-current img{animation:none}
@media(prefers-reduced-motion:reduce){.club-reel-frame{transition:none}.club-reel-frame.is-current img{animation:none}}

/* Invitation composer: every game gets enough room to explain the occasion. */
.invitation-composer{margin:-2px 0 0}.invitation-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,1fr);gap:44px;align-items:start}
.invitation-lede{font:500 clamp(20px,2vw,27px)/1.33 var(--serif);letter-spacing:-.4px;margin:0;max-width:620px}
.invitation-facts,.invitation-ticket-facts,.account-welcome dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid #d2ccbd;border-bottom:1px solid #d2ccbd}
.invitation-facts div,.invitation-ticket-facts div,.account-welcome dl div{padding:12px 12px 12px 0}.invitation-facts div+div,.invitation-ticket-facts div+div,.account-welcome dl div+div{padding-left:12px;border-left:1px solid #d2ccbd}
.invitation-facts dt,.invitation-ticket-facts dt,.account-welcome dt{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#7a7d70}.invitation-facts dd,.invitation-ticket-facts dd,.account-welcome dd{margin:5px 0 0;font-size:12px;line-height:1.3}
.invitation-game-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.invitation-game{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr) 26px;gap:18px;min-height:158px;padding:0;text-align:left;border:1px solid #d0cabb;background:#f8f4ea66;overflow:hidden}
.invitation-game.recommended{border-color:#75816d}.invitation-game:after{content:"";position:absolute;inset:5px;border:1px solid transparent;pointer-events:none}
.invitation-game:hover{border-color:#8d8c7e;background:#faf7ef}.invitation-game:focus-visible:after{border-color:var(--clay)}
.invitation-game-art{position:relative;align-self:stretch;min-height:156px;overflow:hidden;background:#d5cab4;border-right:1px solid #d0cabb}
.invitation-game-copy{padding:20px 0;display:flex;flex-direction:column;align-items:flex-start;min-width:0}.invitation-game-copy small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#697261}.invitation-game-copy strong{font:600 23px/1.1 var(--serif);margin:6px 0 7px;letter-spacing:-.4px}.invitation-game-copy>span{font-size:12px;line-height:1.45;color:#696d63}.invitation-game-copy em{font-size:10px;font-style:normal;color:#885c40;margin-top:auto;padding-top:10px}.invitation-game-arrow{align-self:start;margin-top:20px;font-size:13px}
.art-checkers{background-color:#c7b992;background-image:linear-gradient(45deg,#43594b 25%,transparent 25%),linear-gradient(-45deg,#43594b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#43594b 75%),linear-gradient(-45deg,transparent 75%,#43594b 75%);background-size:42px 42px;background-position:0 0,0 21px,21px -21px,-21px 0}
.art-checkers i{position:absolute;width:27px;height:27px;border-radius:50%;background:#b46d46;box-shadow:inset 0 0 0 2px #f5d0a744,0 3px 4px #2b231c44}.art-checkers i:nth-child(1){left:18px;top:24px}.art-checkers i:nth-child(2){left:76px;top:65px}.art-checkers i:nth-child(3){left:29px;top:108px;background:#263f36}.art-checkers i:nth-child(4){left:89px;top:18px;background:#263f36}
.art-chess{background:#34473f}.art-chess:before,.art-chess:after{position:absolute;font:500 76px/1 Georgia,serif;color:#e8e1d2;text-shadow:0 5px 16px #0b171255}.art-chess:before{content:"♜";left:7px;bottom:21px}.art-chess:after{content:"♞";right:5px;top:20px;color:#b67a52}
.art-domino{background:#c2b69f}.art-domino i{position:absolute;width:20px;height:72px;background:#f1e7d3;border:1px solid #756c5c;box-shadow:5px 7px 12px #4c423444;transform:rotate(var(--r));left:var(--x);top:var(--y)}.art-domino i:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#35483f;left:7px;top:13px;box-shadow:0 40px #35483f}.art-domino i:nth-child(1){--x:15px;--y:55px;--r:-18deg}.art-domino i:nth-child(2){--x:45px;--y:35px;--r:-7deg}.art-domino i:nth-child(3){--x:76px;--y:30px;--r:6deg}.art-domino i:nth-child(4){--x:104px;--y:48px;--r:19deg}
.art-tower{background:#ded0b7}.art-tower i{position:absolute;width:76px;height:19px;background:#b27a46;border:1px solid #8d5e38;box-shadow:0 3px 5px #5c3b2533;left:28px}.art-tower i:nth-child(1){bottom:25px}.art-tower i:nth-child(2){bottom:46px;transform:rotate(90deg)}.art-tower i:nth-child(3){bottom:77px}.art-tower i:nth-child(4){bottom:98px;transform:rotate(90deg)}
.invitation-privacy{margin:17px 0 0!important;padding-top:13px;border-top:1px solid #d5d0c2;font-size:11px!important;color:#767a6f}.invitation-privacy span{font-size:8px;color:#6b8061;margin-right:8px}

/* The share screen reads as an invitation, with controls kept outside it. */
.invitation-sheet{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(330px,1.1fr);border:1px solid #c9c2b2;background:#f9f5eb;box-shadow:0 12px 34px #20312914}
.invitation-ticket{position:relative;padding:29px 30px 27px;background:#263b32;color:#f4efe3;overflow:hidden}.invitation-ticket:after{content:"";position:absolute;width:220px;height:220px;border:1px solid #f4efe31a;border-radius:50%;right:-110px;bottom:-130px;box-shadow:0 0 0 24px #f4efe309,0 0 0 48px #f4efe307}
.invitation-ticket-brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:650;letter-spacing:.2em}.invitation-ticket-brand small{display:block;font-size:7px;letter-spacing:.3em;margin-top:2px}.invitation-seal{display:grid;grid-template-columns:repeat(2,7px);gap:2px;transform:rotate(-9deg)}.invitation-seal i{width:7px;height:7px;border-radius:50%;background:#f0eadc}.invitation-seal i:nth-child(2),.invitation-seal i:nth-child(3){background:#bd7b55}
.invitation-ticket-note{font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:#c9c6b7;margin:35px 0 10px!important}.invitation-ticket h3{font-size:31px;color:#fff;margin:0}.invitation-ticket h3 span{display:block;font:400 16px/1.3 var(--serif);color:#d6d2c5;margin-top:6px}.invitation-ticket-rule{height:1px;background:#f3eee32e;margin:23px 0}.invitation-ticket-copy{font:400 17px/1.48 var(--serif);max-width:330px}.invitation-ticket-facts{position:relative;z-index:1;margin-top:29px;border-color:#f3eee32e}.invitation-ticket-facts div+div{border-color:#f3eee32e}.invitation-ticket-facts dt{color:#bbbdb3}.invitation-ticket-facts dd{color:#fff}
.invitation-share{display:flex;flex-direction:column;justify-content:center;padding:32px}.invitation-share>label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#687165;margin-bottom:9px}.invitation-link{display:flex;border:1px solid #bbb4a4;background:#fffaf2}.invitation-link input{flex:1;min-width:0;border:0;background:transparent;font:12px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;color:#435047}.invitation-link button{padding:0 15px;border-left:1px solid #bbb4a4;font-size:12px;font-weight:650;background:#ebe4d7}.invitation-share>p{font-size:11px;color:#797c71;line-height:1.45;margin:9px 0 22px}.invitation-share-actions{display:flex;gap:9px}.invitation-share-actions button{flex:1}
.invitation-settings{margin-top:18px;border-top:1px solid #d4cebf;border-bottom:1px solid #d4cebf}.invitation-settings summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:12px;font-weight:650}.invitation-settings summary:after{content:"+";margin-left:auto;font-size:18px;font-weight:400}.invitation-settings[open] summary:after{content:"−"}.invitation-settings>div{display:flex;gap:9px;padding-bottom:12px}.invitation-settings p,.invitation-quiet{font-size:11px!important;color:#777b70}.invitation-quiet{margin:14px 0 0!important}

/* Membership forms and the supporting benefits use the same editorial grid. */
.account-welcome{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding-bottom:26px}.account-welcome .eyebrow{margin-bottom:9px}.account-welcome h3{font-size:27px}.account-welcome p{font-size:14px;color:#6d7167}.account-welcome dl{grid-template-columns:1fr;margin:auto 0}.account-welcome dl div{padding:10px 0}.account-welcome dl div+div{padding-left:0;border-left:0;border-top:1px solid #d2ccbd}.account-welcome dd{font-size:13px}.account-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #cfc9ba;margin:0 0 24px}.account-tabs button{min-height:46px;padding:0 12px;font-size:13px;color:#72766c;position:relative}.account-tabs button[aria-selected=true]{color:var(--ink);font-weight:650}.account-tabs button[aria-selected=true]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.account-form{max-width:460px}.account-form .field{margin-bottom:15px}.account-form .primary{min-width:170px;margin-top:4px}.field-note{font-size:11px!important;color:#7c8071;margin:-9px 0 15px!important}.account-fineprint{max-width:600px;margin-top:18px!important}

/* Existing collections and lists inherit a stronger card rhythm. */
.catalog-grid{gap:12px}.destination{border-radius:2px;background:#f8f4ea66;border-color:#d3cebf}.destination .destination-art{filter:saturate(.78)}.destination .status{border-top:1px solid #ddd6c7;margin-top:auto}.seat-card{border-radius:2px;background:#f8f4ea77}.phrase-grid button{border-radius:2px;background:#f8f4ea66}.notice{background:#e8e4d7;border-left-width:3px}

/* Invitations received, toasts, and the two Arcade workspaces use the same
   clear action hierarchy instead of browser-default rows of text buttons. */
.invite-bar{padding:0;background:#263b32;color:#f3efe5;border:0}.invite-row{width:min(100%,1180px);margin:auto;padding:11px 26px;gap:10px}.invite-row span{font-family:var(--serif);font-size:16px}.invite-row .primary{background:#f0e9da;color:#263b32;border-color:#f0e9da}.invite-row .secondary{color:#f0e9da;background:transparent;border-color:#f0e9da66}
#club-toast{border-radius:2px;box-shadow:0 14px 36px #0c15103d;font-weight:550;letter-spacing:.01em}
.domino-header,.tower-header{padding-top:18px;padding-bottom:17px}.domino-header h1,.tower-header h1{letter-spacing:-1px}.domino-readout,.tower-readout{padding-left:20px;border-left:1px solid currentColor}
.domino-tools,.tower-tools{padding:26px}.domino-tools button:not(.primary),.tower-tools button:not(.primary){border:1px solid #cec6b7;background:#faf6ed;min-height:44px;padding:9px 12px}.domino-tool-row button{min-height:44px}.domino-tools fieldset{border-color:#c7beae;background:#f8f3e9}.domino-start,.tower-tools .primary{box-shadow:inset 0 -1px #0004}.tower-tools h2{padding-top:20px;border-top:1px solid #d5cebf}.domino-tools #domino-status,.tower-tools #tower-status{font-family:var(--serif);font-size:15px;background:#e9e1d3}

@media(max-width:820px){
  dialog[data-kind]{width:min(720px,calc(100% - 24px))}.invitation-intro{grid-template-columns:1fr;gap:22px}.invitation-sheet{grid-template-columns:1fr}.invitation-ticket{padding:24px}.invitation-share{padding:24px}.account-welcome{grid-template-columns:1fr;gap:18px}
}
@media(max-width:620px){
  dialog,dialog[data-kind]{width:100%;max-width:none;max-height:94dvh;margin:auto 0 0;border:0;border-top:1px solid #cbc4b3}.dialog-head{padding:20px 20px 15px}.dialog-head h2{font-size:28px}.dialog-close{padding-left:10px}.dialog-close span{display:none}.dialog-body{padding:22px 20px 26px}.dialog-actions{padding:13px 20px;display:grid;grid-template-columns:1fr 1fr}.dialog-actions button{min-width:0}.invitation-game-grid{grid-template-columns:1fr}.invitation-game{grid-template-columns:96px minmax(0,1fr) 20px;min-height:140px}.invitation-game-art{min-height:138px}.invitation-game-copy{padding:16px 0}.invitation-game-copy strong{font-size:21px}.invitation-game-copy>span{font-size:11px}.art-checkers{background-size:34px 34px}.art-checkers i:nth-child(2){left:58px}.art-checkers i:nth-child(4){left:65px}.art-domino i:nth-child(4){display:none}.art-tower i{left:10px}.invitation-sheet{margin:0 -4px}.invitation-ticket h3{font-size:28px}.invitation-ticket-facts{grid-template-columns:1fr}.invitation-ticket-facts div,.invitation-ticket-facts div+div{padding:9px 0;border-left:0;border-top:1px solid #f3eee32e}.invitation-ticket-facts div:first-child{border-top:0}.invitation-share{padding:22px}.invitation-share-actions{display:grid}.invitation-settings>div{display:grid}.club-reel{margin-top:18px}.club-reel-frame figcaption strong{font-size:17px}
}
@media(max-width:700px){.invite-row{padding:12px 16px}.invite-row span{width:100%;font-size:15px}.invite-row button{flex:1}.domino-readout,.tower-readout{padding-left:0;border-left:0}}

/* Ludo. The accessible board is fifteen squares across where checkers and chess
   are eight, so the column count comes from the game's own sheet (`--board-cells`,
   set inline by app.js from `presentation.grid`) instead of a literal 8.
   Fifteen 44-pixel squares do not fit the 340-pixel reading column on any device,
   so the panel pans rather than shrinking the targets under the tap minimum: a
   fallback control surface can be slid sideways, a two-millimetre tap target has
   to be guessed at. */
.board-grid{grid-template-columns:repeat(var(--board-cells,8),1fr)}
.board-access{overflow-x:auto;overscroll-behavior-x:contain}
.board-grid.cells-15{min-width:660px;max-width:none}
/* Match the etched lines on the table in the large touch/keyboard board. */
.board-grid.cells-15 button{box-shadow:inset 0 0 0 2px var(--cell-ink,#293740)}
.board-grid.cells-15 button[data-selected=true]{box-shadow:inset 0 0 0 2px var(--cell-ink,#293740),inset 0 0 0 5px #f3c766}
/* Ludo's four sides, in the colours the board is printed in. These are the four
   hexes of LUDO_COLOR in js/club/games/presentation.js: the 3D table and this
   grid are the same board and may disagree about nothing, so
   test/club-piece-contrast.test.js compares the two lists. */
.board-grid .checker.ruby,.piece-dot.ruby{background:#b23a2b}
.board-grid .checker.jade,.piece-dot.jade{background:#2f7d4f}
.board-grid .checker.amber,.piece-dot.amber{background:#c78f16}
.board-grid .checker.sapphire,.piece-dot.sapphire{background:#2f5f9e}
/* Amber is the one side light enough that the count printed on it has to go
   dark — a pale numeral on pale wood is unreadable for everyone, not only for
   someone with colour blindness. */
.board-grid .checker.amber{color:#4a3708}
/* Ludo's card art: the four sides, in their four printed colours, standing on
   the pale board — the same four hexes as LUDO_COLOR and the accessible grid. */
.art-reversi{background-color:#4a5345;background-image:linear-gradient(90deg,#3d463b 1px,transparent 1px),linear-gradient(#3d463b 1px,transparent 1px);background-size:30px 30px}
.art-reversi i{position:absolute;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff26,0 3px 5px #12180f4d}
.art-reversi i:nth-child(1){left:20px;top:22px;background:#22312c}
.art-reversi i:nth-child(2){left:52px;top:52px;background:#efe7d6}
.art-reversi i:nth-child(3){left:84px;top:22px;background:#efe7d6}
.art-reversi i:nth-child(4){left:20px;top:86px;background:#22312c}
/* Connect Four's card art: the blue rack with a stack leaning to four —
   the same slab and disc colours the 3D board paints. */
.art-connect-four{background-color:#2b4d8f;background-image:linear-gradient(90deg,#22407a 1px,transparent 1px),linear-gradient(#22407a 1px,transparent 1px);background-size:30px 30px}
.art-connect-four i{position:absolute;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff26,0 3px 5px #12180f4d}
.art-connect-four i:nth-child(1){left:20px;top:86px;background:#c8382c}
.art-connect-four i:nth-child(2){left:52px;top:58px;background:#eaa617}
.art-connect-four i:nth-child(3){left:84px;top:30px;background:#c8382c}
.art-connect-four i:nth-child(4){left:116px;top:2px;background:#eaa617}
.art-ludo{background-color:#cdc2a4;background-image:linear-gradient(90deg,#b7ab8c 1px,transparent 1px),linear-gradient(#b7ab8c 1px,transparent 1px);background-size:22px 22px}
.art-ludo i{position:absolute;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff3d,0 3px 4px #2b231c44}
.art-ludo i:nth-child(1){left:20px;top:26px;background:#b23a2b}
.art-ludo i:nth-child(2){left:78px;top:20px;background:#2f7d4f}
.art-ludo i:nth-child(3){left:30px;top:88px;background:#c78f16}
.art-ludo i:nth-child(4){left:86px;top:80px;background:#2f5f9e}
/* Who is at the table. The turn is otherwise said in three small places — a 15px
   pill, a highlighted chair, the face of a die — and a four-colour race needs one
   line that can be read from where the other players are sitting. Sized to be
   legible across a table, and deliberately quiet about everybody except whoever
   is throwing next. */
.turn-board{border:1px solid var(--line);border-radius:4px;background:#fff6;padding:14px 16px 12px;margin:0 0 15px}
.turn-board .turn-head{margin:0 0 11px;font:600 21px/1.25 var(--serif)}
.turn-board .turn-head strong{font-weight:600;border-bottom:2px solid var(--olive);padding-bottom:1px}
.turn-rows{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.turn-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:6px 8px;border-left:3px solid transparent;border-radius:2px;font-size:16px;color:var(--muted)}
.turn-row .turn-name{font-weight:600;font-size:19px;color:var(--ink)}
.turn-row .turn-roll,.turn-row .turn-note{font-size:13px;color:var(--muted)}
.turn-row .turn-note{margin-left:auto;font-size:11px;letter-spacing:1.1px;text-transform:uppercase}
.turn-row.is-turn{border-left-color:var(--olive);background:#e9eadf;color:var(--ink)}
.turn-row.is-turn .turn-name{color:var(--ink)}
.turn-row.is-turn:after{content:"to move";font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--olive)}
.turn-row.is-out{opacity:.5}
.turn-stone{width:15px;height:15px;border-radius:50%;background:var(--clay);box-shadow:inset 0 0 0 2px #ffffff33;flex:0 0 auto;align-self:center}
.turn-stone[data-color=black]{background:#2e4940}
.turn-stone[data-color=ruby]{background:#b23a2b}
.turn-stone[data-color=jade]{background:#2f7d4f}
.turn-stone[data-color=amber]{background:#c78f16}
.turn-stone[data-color=sapphire]{background:#2f5f9e}
@media(max-width:520px){.turn-board .turn-head{font-size:19px}.turn-row{font-size:15px}.turn-row .turn-name{font-size:17px}}
@media(prefers-reduced-motion:no-preference){.turn-row{transition:background .4s ease,border-color .4s ease}}

.die-lever{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;font-size:13px;font-weight:600;color:var(--ink)}.die-lever output{margin-left:auto;font-variant-numeric:tabular-nums}.die-lever input{width:100%;min-height:44px;margin:0;accent-color:var(--olive);touch-action:none}

.die-pressure-stage,.die-pass-stage{display:none}body.club-immersive .die-pressure-stage:not([hidden]),body.club-immersive .die-pass-stage:not([hidden]){display:flex;position:absolute;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:8;width:min(290px,calc(100vw - 36px));padding:14px 16px;gap:9px;flex-direction:column;background:#f3efe5f2;border:1px solid #fff9;border-radius:5px;box-shadow:0 7px 25px #1e291e30}.die-pressure-stage label{display:flex;justify-content:space-between;font-size:13px;font-weight:600}.die-pressure-stage output{font-variant-numeric:tabular-nums}.die-pressure-stage input{width:100%;min-height:44px;margin:0;padding:0;accent-color:var(--olive);touch-action:none}.die-pressure-stage button,.die-pass-stage button{min-height:44px}.die-pass-stage p{margin:0;font-size:13px;line-height:1.4;color:var(--ink)}

/* The Club inside Utopia City (js/club/embed.js): its own chrome is already hidden by the fullscreen layout. */
.embed-leave{position:fixed;left:calc(14px + env(safe-area-inset-left,0px));top:calc(14px + env(safe-area-inset-top,0px));z-index:30;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(238,244,240,.28);background:rgba(7,29,38,.78);color:#eef4f0;font:inherit;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(10px)}
.embed-leave:hover{background:rgba(7,29,38,.92)}
.embed-seat{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border-radius:16px;border:1px solid rgba(238,244,240,.28);background:rgba(7,29,38,.86);color:#eef4f0;backdrop-filter:blur(10px);max-width:calc(100% - 24px)}
.embed-seat[hidden],.embed-leave[hidden]{display:none}
.embed-seat b{color:#f3bc4d}
.embed-seat button{min-height:42px;padding:0 16px;border:0;border-radius:11px;background:#46d4c3;color:#04302b;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.embed-seat kbd{margin-left:6px;padding:2px 6px;border-radius:5px;border:1px solid rgba(4,48,43,.35);background:rgba(4,48,43,.12);font:600 11px ui-monospace,Menlo,monospace}
body.club-embed{background:#06141a}
body.club-embed .club-brand,body.club-embed .scene-label{display:none}
/* The city panel in the sidebar: short silent loops from the live city. */
.club-city{margin:22px 0 4px;border-top:1px solid #cecabb;border-bottom:1px solid #cecabb;padding:12px 0 14px}
.club-city-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 1px 10px}
.club-city-top>span{font-size:9px;font-weight:650;letter-spacing:1.9px;text-transform:uppercase;color:#53664e}
.club-city-top button{min-height:32px;padding:0;font-size:10px;color:#687164;text-decoration:underline;text-underline-offset:4px}
.club-city-viewport{position:relative;aspect-ratio:16/10;overflow:hidden;background:#27382f;isolation:isolate}
.club-city-frame{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.club-city-frame.is-current{opacity:1;visibility:visible;transition-delay:0s;z-index:1}
.club-city-frame video{width:100%;height:100%;display:block;object-fit:cover;background:#27382f}
.club-city-frame figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 14px 13px;color:#fff;background:linear-gradient(transparent,#172419d9);text-shadow:0 1px 2px #0d1612}
.club-city-frame figcaption strong{display:block;font:600 18px/1.05 var(--serif);letter-spacing:-.25px}
.club-city-frame figcaption span{display:block;font-size:10px;line-height:1.35;margin-top:5px;color:#f1ede2de}
.club-city-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px #f8f2e533,inset 0 0 36px #101a1333}
.club-city-foot{display:flex;padding-top:8px}
.club-city-dots{display:flex;gap:2px}
.club-city-dots button{width:25px;min-height:28px;padding:0;display:grid;place-items:center}
.club-city-dots span{display:block;width:15px;height:2px;background:#c5bfae;transition:width .18s ease,background .18s ease}
.club-city-dots button[aria-current=true] span{width:22px;background:var(--ink)}
.club-city-offer{font-size:12px;line-height:1.5;color:var(--muted);margin:6px 0 12px}
.club-city-visit{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 14px;background:#27382f;color:var(--paper);font-size:13px;text-decoration:none;border-radius:3px}
.club-city-visit:hover,.club-city-visit:focus-visible{background:#33493c}
@media(prefers-reduced-motion:reduce){.club-city-frame{transition:none}}