:root {
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#482b18;
  background:#e9d8b8;
  font-synthesis:none;
  --bg:#e9d8b8; --paper:#fff7e4; --ink:#482b18; --muted:#817052;
  --line:#d9be84; --accent:#a91912; --accent-hover:#870e0a; --gold:#bb8a32;
  --red:#dc151b; --green:#0b9a3b; --yellow:#ffd029; --blue:#0783d6;
  --red-soft:#fbe1d7; --green-soft:#e0eed7; --yellow-soft:#fff0b6; --blue-soft:#dcecf9;
  --track:#fff6df; --board-line:#56412b; --board-trim:#b3802c;
  --serif:'Playfair Display',Georgia,serif;
  --scene:url('/assets/courtyard-royal.webp');
}
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--bg); color:var(--ink); isolation:isolate; }
body::before { content:''; position:fixed; inset:0; z-index:-2; background-image:var(--scene); background-position:center top; background-size:cover; background-repeat:no-repeat; }
body::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#fff0ca20,#fff5d619 48%,#f4deac48); }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.5; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #287ebc; outline-offset:4px; }
button:active:not(:disabled) { transform:translateY(1px); }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.page-shell { max-width:1340px; padding:0 36px; margin:auto; }
.site-header { min-height:115px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; }
.brand { display:flex; align-items:center; gap:12px; padding:14px 22px 15px 16px; position:relative; color:#6d2815; isolation:isolate; }
.brand::before { content:''; position:absolute; inset:6px 0; z-index:-1; background:linear-gradient(135deg,#fff8e7ed,#f7e5b9e8); border:1px solid #b98227; border-radius:30px 9px 30px 9px; box-shadow:inset 0 0 0 3px #f8e4ad,inset 0 0 0 4px #c7a159,0 3px 12px #4b29152b; }
.brand-mark { width:41px; height:41px; color:#b57d20; filter:drop-shadow(0 1px #fff4c9); }
.brand-word { font-family:var(--serif); font-size:21px; font-weight:700; line-height:1.05; letter-spacing:1.3px; text-shadow:0 1px #fff9e1; }
.brand-word>span { display:block; font-size:11px; letter-spacing:6px; text-align:center; margin-top:7px; color:#9a210e; }
.header-actions { display:flex; align-items:center; gap:8px; padding:7px; border:1px solid #c2a265; border-radius:28px; background:#fff5dfe8; box-shadow:inset 0 1px 0 #fffdf1,0 3px 12px #4b291517; }
.text-button,.outline-button,.icon-button { background:none; border:none; font-size:12px; font-weight:550; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.text-button { padding:8px 10px; color:var(--muted); }
.text-button:hover { color:var(--ink); }
.nav-symbol { font-size:18px; color:#774020; }
.outline-button { border:1px solid #c0a36a; border-radius:5px; padding:11px 15px; color:var(--ink); background:linear-gradient(#fffbec,#f3e7c9); box-shadow:inset 0 1px 0 #fff; }
.outline-button:hover { background:#fff7df; }
.header-actions .outline-button { border-radius:20px; }
.small { font-size:12px; }
.game-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr); gap:42px; padding:14px 0 32px; align-items:start; }
.board-column { min-width:0; position:relative; }
.board-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 8px 13px; min-height:20px; padding:8px 13px; background:linear-gradient(#fff9e9ee,#f9e9c6ed); border:1px solid #bc9654; border-radius:20px 6px; box-shadow:inset 0 0 0 2px #fff6d7,0 2px 8px #41240920; }
.eyebrow { font-size:9px; font-weight:650; letter-spacing:1.5px; line-height:1.7; color:var(--muted); }
.board-heading .eyebrow { color:#785022; }
.live-label { font-size:9px; color:#725c3f; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.live-label i,.status-dot { height:6px; width:6px; display:inline-block; background:#229244; border-radius:50%; }

/* The playable board has one invariant classic palette in every atmosphere. */
.board-frame,.board-players {
  --red:#dc151b; --green:#0b9a3b; --yellow:#ffd029; --blue:#0783d6;
  --red-soft:#fbe1d7; --green-soft:#e0eed7; --yellow-soft:#fff0b6; --blue-soft:#dcecf9;
  --track:#fff6df; --board-line:#56412b; --board-trim:#b3802c;
}
.board-frame { position:relative; padding:9px; border:1px solid #80501a; border-radius:9px; background:linear-gradient(135deg,#80501d 0%,#ffdf81 9%,#bd872c 18%,#fff0a9 27%,#ad7223 49%,#eec96c 73%,#81531b 91%,#edc36b); box-shadow:0 0 0 2px #f5d995,inset 0 0 0 2px #fff0b4,inset 0 0 0 4px #9d6a22,0 15px 26px #512c2833; }
.board-frame::before,.board-frame::after { content:'❦'; position:absolute; z-index:7; width:27px; height:27px; font-size:28px; line-height:27px; color:#e6bd62; text-shadow:1px 1px #6c3d13,-1px -1px #fff1b5; pointer-events:none; }
.board-frame::before { top:-6px; left:-5px; transform:rotate(-45deg); }
.board-frame::after { bottom:-6px; right:-5px; transform:rotate(135deg); }
.board { aspect-ratio:1; display:grid; grid-template-columns:repeat(15,1fr); grid-template-rows:repeat(15,1fr); position:relative; border:1px solid var(--board-line); background:var(--track); overflow:visible; isolation:isolate; }
.cell { border-right:1px solid var(--board-line); border-bottom:1px solid var(--board-line); position:relative; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#fffbed,#f7ecd3); font-size:clamp(11px,1.7vw,22px); }
.cell.safe::after { content:'★'; color:#ac853f; font-size:1.12em; line-height:1; text-shadow:0 1px #fffbdf; }
.cell.start,.cell.lane { background:linear-gradient(140deg,color-mix(in srgb,var(--tone) 83%,white),var(--tone) 60%,color-mix(in srgb,var(--tone) 88%,black)); }
.cell.start::after { color:#fff3c9; text-shadow:0 1px 2px #0005; font-size:1.04em; }
.cell.start.yellow::after { color:#895a17; text-shadow:0 1px #fff; }
.cell.direction::before { content:attr(data-arrow); color:#927143; font-size:1.04em; line-height:1; }
.red { --tone:var(--red); --tone-soft:var(--red-soft); }
.green { --tone:var(--green); --tone-soft:var(--green-soft); }
.yellow { --tone:var(--yellow); --tone-soft:var(--yellow-soft); }
.blue { --tone:var(--blue); --tone-soft:var(--blue-soft); }
.yard { position:relative; grid-row:span 6; grid-column:span 6; display:flex; align-items:center; justify-content:center; z-index:1; border:1px solid var(--board-line); overflow:hidden; background:radial-gradient(ellipse at 25% 20%,#ffffff22,transparent 64%),linear-gradient(135deg,var(--tone),color-mix(in srgb,var(--tone) 82%,black)); box-shadow:inset 0 0 0 4px #ffffff14,inset 0 0 12px #0002; }
.yard::before { content:''; position:absolute; inset:8%; border:1px solid color-mix(in srgb,var(--tone) 55%,black); box-shadow:1px 1px 0 #ffffff50,inset 1px 1px 0 #ffffff30; pointer-events:none; }
.yard::after { content:''; position:absolute; inset:5%; border:1px solid #fff3ce30; pointer-events:none; }
.yard-inner { position:absolute; inset:20%; border:1px solid #574020; border-radius:15%; background:radial-gradient(ellipse at 30% 20%,#fffbed,#f8e9bc); box-shadow:0 1px 2px #0003,inset 0 0 0 2px #fff2cf; }
.yard-label { position:absolute; bottom:4%; text-transform:uppercase; font-size:7px; letter-spacing:1.8px; font-weight:650; color:#fff8de; text-shadow:0 1px #0005; max-width:88%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.yard.yellow .yard-label { color:#5e3a0d; text-shadow:0 1px #fff8; }
.yard-slot { position:absolute; width:18%; height:18%; border:1px solid color-mix(in srgb,var(--tone) 55%,#5d3617); border-radius:50%; background:radial-gradient(ellipse,#00000013,transparent 67%); box-shadow:inset 0 1px 2px #0002,0 1px 0 #fff9; }
.yard-slot.s0 { top:29%; left:28%; }.yard-slot.s1 { top:29%; right:28%; }.yard-slot.s2 { bottom:29%; left:28%; }.yard-slot.s3 { bottom:29%; right:28%; }
.centre { grid-row:7/10; grid-column:7/10; z-index:1; position:relative; background:var(--track); overflow:hidden; border:1px solid var(--board-line); }
.centre-triangle { position:absolute; inset:0; background:linear-gradient(140deg,color-mix(in srgb,var(--tone) 80%,white),var(--tone) 52%,color-mix(in srgb,var(--tone) 85%,black)); }
.centre-triangle.red:not([data-home-side]),.centre-triangle[data-home-side="left"] { clip-path:polygon(0 0,50% 50%,0 100%); }
.centre-triangle.green:not([data-home-side]),.centre-triangle[data-home-side="top"] { clip-path:polygon(0 0,100% 0,50% 50%); }
.centre-triangle.yellow:not([data-home-side]),.centre-triangle[data-home-side="right"] { clip-path:polygon(100% 0,100% 100%,50% 50%); }
.centre-triangle.blue:not([data-home-side]),.centre-triangle[data-home-side="bottom"] { clip-path:polygon(0 100%,50% 50%,100% 100%); }
.centre::after { content:''; position:absolute; inset:0; background:linear-gradient(45deg,transparent 49.3%,#4a371c 49.6%,#4a371c 50.3%,transparent 50.6%),linear-gradient(-45deg,transparent 49.3%,#4a371c 49.6%,#4a371c 50.3%,transparent 50.6%); pointer-events:none; }
.centre-mark { display:none; }
.pieces { position:absolute; inset:2%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1px; z-index:4; pointer-events:none; }
.piece { pointer-events:auto; position:relative; border:1px solid color-mix(in srgb,var(--tone) 57%,black); border-radius:47% 47% 42% 42%; width:69%; height:62%; max-width:32px; max-height:30px; margin-top:15%; padding:0; background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 66%,black),var(--tone) 34%,color-mix(in srgb,var(--tone) 90%,white) 52%,var(--tone) 70%,color-mix(in srgb,var(--tone) 64%,black)); box-shadow:inset 0 -3px 2px #0003,0 4px 3px #0005; color:#fffdf2; font-size:8px; font-weight:700; display:flex; align-items:flex-end; justify-content:center; line-height:1; isolation:isolate; }
.piece::before { content:''; position:absolute; z-index:2; width:72%; height:78%; top:-33%; left:14%; border:1px solid color-mix(in srgb,var(--tone) 65%,black); border-radius:50%; background:radial-gradient(circle at 31% 24%,#ffffffeb 0%,#ffffff57 12%,var(--tone) 40%,color-mix(in srgb,var(--tone) 52%,black) 100%); box-shadow:0 2px 2px #0004; pointer-events:none; }
.piece::after { content:''; position:absolute; z-index:-1; left:-13%; width:126%; height:35%; bottom:-12%; border-radius:50%; border:1px solid color-mix(in srgb,var(--tone) 53%,black); background:linear-gradient(var(--tone),color-mix(in srgb,var(--tone) 85%,white) 27%,color-mix(in srgb,var(--tone) 57%,black)); box-shadow:0 2px 1px #0006; pointer-events:none; }
.piece span { position:relative; z-index:3; font-size:inherit; margin-bottom:7%; text-shadow:0 1px 1px #000; }
.piece.yellow span { color:#573302; text-shadow:0 1px #fff9; }
.piece:disabled { opacity:1; }
.piece.legal { cursor:pointer; outline:2px solid #fff9d8; outline-offset:4px; filter:drop-shadow(0 0 3px #5e360e); animation:legal-pulse 1.6s ease-in-out infinite; }
.piece.legal:hover { filter:brightness(1.1) drop-shadow(0 0 3px #5e360e); transform:translateY(-2px); }
.piece:focus-visible { outline:3px solid #142834; outline-offset:5px; }
.pieces[data-count="2"] .piece,.pieces[data-count="3"] .piece,.pieces[data-count="4"] .piece { width:39%; height:34%; margin-top:9%; font-size:6px; border-width:.7px; box-shadow:0 2px 2px #0004; }
.pieces.many .piece { width:24%; height:23%; margin-top:6%; font-size:5px; border-width:.5px; box-shadow:0 1px 1px #0004; }
.pieces.many .piece::before,.pieces.many .piece::after { border-width:.5px; }
.yard-pieces { position:absolute; width:17%; height:17%; display:flex; align-items:center; justify-content:center; z-index:5; }
.yard-pieces.y0 { top:29.5%; left:28.5%; }.yard-pieces.y1 { top:29.5%; right:28.5%; }.yard-pieces.y2 { bottom:29.5%; left:28.5%; }.yard-pieces.y3 { bottom:29.5%; right:28.5%; }
.yard-pieces .piece { width:72%; height:65%; max-width:none; max-height:none; font-size:9px; margin-top:12%; }
.home-pieces { position:absolute; z-index:5; display:flex; align-items:center; justify-content:center; gap:1px; flex-wrap:wrap; }
.home-pieces.red:not([data-home-side]),.home-pieces[data-home-side="left"] { left:2%; top:34%; width:31%; height:32%; }
.home-pieces.green:not([data-home-side]),.home-pieces[data-home-side="top"] { left:34%; top:2%; width:32%; height:31%; }
.home-pieces.yellow:not([data-home-side]),.home-pieces[data-home-side="right"] { right:2%; top:34%; width:31%; height:32%; }
.home-pieces.blue:not([data-home-side]),.home-pieces[data-home-side="bottom"] { left:34%; bottom:2%; width:32%; height:31%; }
.home-pieces .piece { width:33%; height:32%; font-size:5px; border-width:.6px; margin-top:9%; box-shadow:0 1px 2px #0005; }

/* Seat names and progress stay outside the playable cells. */
.board-players { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,7vw,86px); position:relative; margin:12px -3px; }
.board-players:empty { display:none; }
.board-player { display:flex; align-items:center; gap:9px; position:relative; min-width:0; min-height:65px; padding:9px 13px 9px 8px; border:1px solid #ad7726; border-radius:35px 14px 30px 35px; background:linear-gradient(120deg,#fff9e9,#f3e2b8); color:#422819; box-shadow:inset 0 0 0 2px #ffe7a9,inset 0 0 0 3px #c99f59,0 3px 8px #53320c30; }
.board-player::after { content:'❧'; position:absolute; right:-7px; top:50%; transform:translateY(-50%); color:#b88635; font-size:24px; line-height:1; text-shadow:0 1px #fff1bd; }
.board-player.current { box-shadow:inset 0 0 0 2px #fff0b7,inset 0 0 0 3px #bd852f,0 0 0 2px #f1cd67,0 4px 14px #7f461d4d; }
.player-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:22px; font-weight:700; color:#fff9db; background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--tone) 65%,white),var(--tone) 55%,color-mix(in srgb,var(--tone) 63%,black)); border:2px solid #f6db86; outline:1px solid #ac7b2b; text-shadow:0 1px 2px #0006; box-shadow:inset 0 1px 4px #ffffff5c,0 2px 3px #53320c4d; }
.board-player.yellow .player-avatar { color:#6c3f05; text-shadow:0 1px #fff9; }
.board-player-info { flex:1; min-width:0; }
.board-player-name { font-family:var(--serif); font-size:17px; line-height:1.3; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-player-status { font-size:9px; margin-top:4px; line-height:1.3; color:#6d6555; white-space:nowrap; }
.board-player-status.unlocked,.board-player-status[data-unlocked="true"] { color:#19753a; }
.board-player-finished { font-size:9px; color:#856b41; white-space:nowrap; align-self:flex-end; margin-bottom:2px; }
.board-player .you-tag { display:inline-block; font-family:'DM Sans',sans-serif; font-size:7px; line-height:1.5; vertical-align:middle; padding:1px 5px; margin-left:4px; border:1px solid #d5b777; border-radius:8px; color:#7d541d; background:#fff5d6; font-weight:600; }
.board-below { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 7px 0; padding:7px 10px; font-size:9px; color:#72563a; background:#fff5dee6; border:1px solid #c7ad7a; border-radius:6px; }
.board-note { line-height:1.6; }.board-note>span { color:#ac7a27; margin-right:5px; }
.board-theme-name { font-size:8px; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; }
.mobile-turn { margin-top:10px; font-size:11px; text-align:center; color:var(--ink); background:#fff2d5ec; border:1px solid #c7ad7a; border-radius:12px; padding:7px; }

/* Parchment controls keep the theme scenery from competing with the game. */
.control-column { position:relative; padding:28px 26px 24px; margin-top:3px; background:linear-gradient(135deg,#fffaebf7,#f8ebcaf7); border:1px solid #a5772d; border-radius:35px 10px 35px 10px; box-shadow:inset 0 0 0 3px #fff0bf,inset 0 0 0 4px #c4a064,0 12px 30px #51310e30; }
.control-column::before,.control-column::after { content:'❦'; position:absolute; top:-15px; left:calc(50% - 13px); font-size:29px; line-height:29px; color:#b88b3b; text-shadow:0 1px #fff3c4; pointer-events:none; }
.control-column::after { top:auto; bottom:-14px; transform:rotate(180deg); }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:var(--serif); font-size:38px; letter-spacing:-1.1px; line-height:1.16; font-weight:600; margin:13px 0 15px; color:#651b12; }
h1 em { font-weight:500; color:var(--accent); font-style:italic; }
h2 { font-family:var(--serif); font-weight:600; font-size:30px; letter-spacing:-.7px; margin:10px 0 12px; color:#641e13; }
h3 { font-family:var(--serif); font-size:24px; font-weight:500; margin:7px 0 12px; }
.lead { color:var(--muted); font-size:12px; line-height:1.8; margin-bottom:23px; max-width:340px; }
.mode-tabs { display:flex; gap:3px; background:#e9d9b5; border:1px solid #dac18d; border-radius:7px; padding:4px; margin-bottom:21px; }
.mode-tab { flex:1; white-space:nowrap; border:none; background:transparent; border-radius:4px; font-size:10px; padding:11px 5px; font-weight:550; color:#8b754e; }
.mode-tab[aria-selected="true"] { background:linear-gradient(#fffdf2,#fff1ce); color:#6d3c16; box-shadow:0 2px 4px #643b1626,inset 0 0 0 1px #cdb078; }
.field { margin-bottom:15px; }
.field label,.field-label { display:block; font-size:10px; font-weight:600; margin-bottom:8px; }
.field input,.field select { width:100%; border:1px solid #ccb27e; background:#fffaf0; border-radius:5px; padding:12px 13px; font-size:12px; color:var(--ink); height:43px; min-width:0; box-shadow:inset 0 1px 2px #8c60200b; }
.field input::placeholder { color:#aa9673; }
.field-hint { font-size:9px; line-height:1.6; margin-top:7px; color:var(--muted); }
.name-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }.name-grid label { display:flex; align-items:center; gap:6px; }
.colour-dot { display:inline-block; width:9px; height:9px; border:1px solid #0002; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff8,var(--tone) 58%); flex-shrink:0; }
.section-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 9px; }.section-label .field-label { margin:0; }
.tag { font-size:8px; color:var(--muted); letter-spacing:.25px; }
.themes { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.theme-option { background:#fff8e8; border:1px solid #d2b98d; border-radius:5px; padding:0; overflow:hidden; text-align:left; position:relative; }
.theme-option[aria-checked="true"] { border-color:#a6731d; box-shadow:0 0 0 1px #ad7f30; }
.theme-option[aria-checked="true"]::after { content:'✓'; position:absolute; right:4px; top:4px; width:12px; height:12px; display:grid; place-items:center; background:#fff5cc; border-radius:50%; font-size:8px; color:#6c3c0c; box-shadow:0 1px 3px #0003; }
.theme-art { height:43px; display:flex; align-items:center; justify-content:center; gap:3px; position:relative; overflow:hidden; background-position:center; background-size:cover; }
.theme-art i { width:11px; height:11px; border-radius:3px; transform:rotate(45deg); box-shadow:0 1px 2px #0004; }
.theme-art i:nth-child(1) { background:#dc151b; }.theme-art i:nth-child(2) { background:#0b9a3b; }.theme-art i:nth-child(3) { background:#ffd029; }.theme-art i:nth-child(4) { background:#0783d6; }
.theme-art.classic { background:#f3e6c8; }.theme-art.classic i { transform:none; }
.theme-art.royal { background-image:linear-gradient(#f5d49355,#dca95166),url('/assets/courtyard-royal.webp'); }
.theme-art.holi { background-image:linear-gradient(#f399bf33,#ffffff11),url('/assets/courtyard-holi.webp'); }
.theme-art.diwali { background-image:linear-gradient(#102e6166,#05183444),url('/assets/courtyard-diwali.webp'); background-color:#142547; }
.theme-name { display:block; padding:7px 3px 8px; font-size:8px; font-weight:550; white-space:nowrap; text-align:center; }
.primary-button { background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 72%,#f37332),var(--accent) 42%,color-mix(in srgb,var(--accent) 88%,black)); color:#fff8d7; border:1px solid #7a4611; border-radius:22px; padding:13px 16px; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:inset 0 0 0 1px #efca68,inset 0 2px 0 #ffffbf77,0 3px 0 #a17934,0 5px 9px #63361523; text-shadow:0 1px #0004; }
.primary-button:hover:not(:disabled) { filter:brightness(1.07); }.primary-button:disabled { box-shadow:inset 0 0 0 1px #efca68,0 2px 0 #a1793466; }
.primary-button .arrow { margin-left:auto; font-size:18px; line-height:1; }.full-width { width:100%; }.create-button { margin-top:21px; justify-content:space-between; }
.privacy-note { font-size:9px; color:var(--muted); text-align:center; margin:12px 0 16px; line-height:1.6; }
.join-toggle { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; font-size:10px; margin:0; padding:7px 0; }.join-toggle b { font-weight:550; color:var(--ink); border-bottom:1px solid #b18747; padding-bottom:1px; }
.join-fields { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; margin-top:17px; }.join-fields .field { margin:0; }.join-fields button { height:43px; padding:11px 18px; }.room-input { text-transform:uppercase; letter-spacing:2px; }
.fine-print { font-size:10px; line-height:1.75; color:var(--muted); margin-bottom:0; }
.welcome-details { display:flex; justify-content:center; gap:18px; border-top:1px solid #d9c191; padding-top:17px; margin-top:17px; font-size:8px; color:var(--muted); }.welcome-details span { display:flex; gap:5px; align-items:center; }.welcome-details b { font-size:13px; font-weight:400; color:#ab7c30; }
.site-footer { padding:18px 18px 22px; margin-bottom:12px; display:flex; justify-content:space-between; gap:18px; color:#72573a; font-size:9px; letter-spacing:.2px; border-top:1px solid #b79b60; background:linear-gradient(#fff0cfaa,#fff3d775); border-radius:6px; }.footer-detail { display:flex; gap:10px; align-items:center; }.footer-detail>span { color:#9f6e23; }
.connection-banner,.error-banner { padding:12px 15px; font-size:12px; border:1px solid #b7964a; border-radius:6px; background:#fff0c8f5; color:#715324; margin:7px 0 15px; line-height:1.5; box-shadow:0 3px 12px #0001; }.connection-banner.offline { border-color:#d6b194; background:#fae9dc; }
.error-banner { display:flex; align-items:center; justify-content:space-between; gap:15px; border-color:#bc7970; background:#fbe9e4; color:#823b32; }.error-banner button { border:0; background:none; font-size:22px; padding:0 2px; color:inherit; }
.back-button { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); border:0; background:none; padding:0; margin-bottom:12px; }.lobby-intro { margin-bottom:16px; }
.room-share { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px dashed #b08c49; background:#fff8e5; border-radius:6px; padding:12px 13px; margin:17px 0; }.room-share .eyebrow { font-size:8px; letter-spacing:1px; }.room-code { font-size:23px; letter-spacing:3px; font-weight:600; line-height:1.3; }.share-actions { display:flex; gap:6px; align-items:center; }
.icon-button { border:1px solid #c6a773; border-radius:5px; width:33px; height:33px; font-size:17px; background:#fff5da; }.share-link { font-size:10px; color:var(--accent); display:block; text-align:center; margin-top:-6px; margin-bottom:16px; text-decoration:underline; text-underline-offset:3px; }
.seat-list { display:flex; flex-direction:column; gap:7px; margin:12px 0 16px; }.seat-row { display:flex; align-items:center; gap:10px; background:#fffaeb; border:1px solid #d4bd8e; padding:9px 11px; border-radius:6px; min-height:48px; }
.seat-swatch { width:27px; height:27px; border-radius:50%; background:var(--tone-soft); border:1px solid color-mix(in srgb,var(--tone) 30%,transparent); display:flex; justify-content:center; align-items:center; color:color-mix(in srgb,var(--tone) 68%,black); font-size:12px; font-weight:600; flex-shrink:0; }
.seat-name { font-size:11px; font-weight:550; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.seat-name small { display:block; font-size:8px; margin-top:2px; font-weight:400; color:var(--muted); }.seat-ready { font-size:9px; color:#287d35; white-space:nowrap; }.seat-ready.pending { color:var(--muted); }.seat-row.empty { border-style:dashed; background:transparent; color:var(--muted); }
.colour-picker { display:flex; gap:7px; margin-bottom:15px; }.colour-choice { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; background:#fff8e9; border:1px solid #d0b986; border-radius:5px; font-size:9px; padding:9px 4px; }.colour-choice[aria-pressed="true"] { border-color:var(--tone); background:var(--tone-soft); box-shadow:0 0 0 1px var(--tone); }.colour-choice:disabled { opacity:.35; }
.ready-button { margin-top:18px; }.ready-button.is-ready { background:linear-gradient(#fff9e8,#f7e8c7); color:#5c4a2a; border-color:#b49a63; text-shadow:none; }.lobby-message { font-size:10px; color:var(--muted); text-align:center; line-height:1.7; margin:13px 0 0; }
.turn-card { position:relative; padding:17px 8px 19px; border-bottom:1px solid #c9ac73; text-align:center; }
.turn-card::before { content:'❧'; position:absolute; left:1px; top:40px; font-size:23px; color:#b99048; }.turn-card::after { content:'❧'; position:absolute; right:1px; top:40px; transform:scaleX(-1); font-size:23px; color:#b99048; }
.turn-header { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; }.turn-name { font-family:var(--serif); font-size:26px; font-weight:600; margin:5px 0 4px; color:#6f2718; overflow-wrap:anywhere; }.turn-label { font-size:9px; color:var(--muted); }.turn-color { display:inline-flex; align-items:center; gap:5px; font-size:8px; text-transform:uppercase; letter-spacing:1px; color:#826943; font-weight:600; }.turn-color::before { content:''; width:6px; height:6px; background:var(--tone); border:1px solid #0002; border-radius:50%; }
.dice-area { display:flex; flex-direction:column; align-items:center; gap:13px; margin:20px 0 11px; }
.die { width:77px; height:77px; flex-shrink:0; border-radius:17px; border:1px solid #b7a883; background:radial-gradient(circle at 30% 20%,#fff,#fff9e8 52%,#dbc69f); box-shadow:inset 1px 2px 3px #fff,0 5px 0 #a48c68,0 9px 13px #754c2240; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:15px; gap:5px; position:relative; color:#231911; }
.die:disabled { opacity:1; }.die.available { cursor:pointer; }.die.available:hover { box-shadow:inset 1px 2px 3px #fff,0 5px 0 #a48c68,0 9px 17px #b5844e70; }.die-dot { background:radial-gradient(circle at 60% 65%,#49382b,#130e07); border-radius:50%; align-self:stretch; justify-self:stretch; box-shadow:inset 1px 1px 2px #000,0 1px 0 #fff9; }.die-dot.blank { visibility:hidden; }.die-question { grid-column:1/4; grid-row:1/4; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:36px; color:#ac7f31; }.die.rolling { animation:shake .35s ease; }
.roll-help { font-size:10px; line-height:1.65; color:var(--muted); margin:0; }.roll-help strong { color:#69441e; font-weight:550; display:block; }.turn-card .primary-button { padding:12px 15px; font-family:var(--serif); font-size:18px; font-weight:600; border-radius:25px; min-height:48px; }
.token-choices { display:flex; gap:6px; margin-top:12px; }.token-choice { flex:1; border:1px solid #c7ad7b; background:#fff8e6; border-radius:5px; padding:8px 3px; font-size:10px; }.token-choice.legal { border-color:color-mix(in srgb,var(--tone) 72%,black); color:color-mix(in srgb,var(--tone) 68%,black); background:var(--tone-soft); }.move-status { font-size:10px; line-height:1.7; margin:0; color:var(--muted); min-height:34px; }.six-counter { font-size:8px; color:var(--muted); margin-top:10px; text-align:center; }
.player-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:17px; }.player-card { padding:10px; border:1px solid #d6bd8a; border-radius:6px; background:#fff6df; min-width:0; }.player-card.current { border-color:color-mix(in srgb,var(--tone) 77%,#795017); box-shadow:inset 0 2px 0 var(--tone); }.player-card-top { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:550; }.player-card-top span.name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.player-card-top .you-tag { font-size:8px; color:var(--muted); font-weight:400; margin-left:auto; white-space:nowrap; }.unlock-status { display:flex; align-items:center; gap:4px; font-size:8px; color:var(--muted); margin:8px 0; }.unlock-status.unlocked { color:#297c33; }.finish-track { display:flex; align-items:center; gap:4px; }.finish-marker { width:8px; height:8px; border:1px solid color-mix(in srgb,var(--tone) 80%,black); opacity:.4; border-radius:50%; }.finish-marker.done { background:var(--tone); opacity:1; }.finish-count { margin-left:auto; font-size:8px; color:var(--muted); }
.match-log { margin-top:20px; }.match-log .section-label { margin:0 0 10px; }.log-list { padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:7px; }.log-list li { font-size:9px; color:var(--muted); line-height:1.6; padding-left:10px; position:relative; }.log-list li::before { content:''; width:3px; height:3px; background:#b18a46; border-radius:50%; position:absolute; left:0; top:6px; }.log-list li:first-child { color:var(--ink); }.game-meta { display:flex; align-items:center; justify-content:space-between; gap:5px; border-top:1px solid #d6bd8c; margin-top:17px; padding-top:12px; font-size:9px; color:var(--muted); }.game-meta button { font-size:9px; padding:5px 0; }
.winner-card { padding:20px 8px; text-align:center; border-bottom:1px solid #c7a466; }.winner-ornament { font-size:35px; color:#b4893a; margin-bottom:12px; }.winner-card h2 { font-size:29px; }.winner-card .primary-button { margin-top:20px; }.winner-card p { font-size:12px; color:var(--muted); line-height:1.7; }
.resume-card { margin:17px 0 0; padding:10px 11px; border:1px solid #d1b783; border-radius:5px; font-size:10px; display:flex; justify-content:space-between; align-items:center; background:#fff7e0; }.resume-card button { font-size:10px; color:var(--accent); background:none; border:0; text-decoration:underline; text-underline-offset:3px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#482b18; color:#fff5d5; padding:12px 20px; font-size:12px; border:1px solid #b08a48; border-radius:7px; box-shadow:0 5px 20px #0004; z-index:100; max-width:90%; text-align:center; }
dialog { width:min(610px,calc(100% - 32px)); padding:30px 34px; background:linear-gradient(135deg,#fff9e9,#f8eac6); color:var(--ink); border:1px solid #b48a44; border-radius:18px 7px; box-shadow:inset 0 0 0 3px #ffedbc,inset 0 0 0 4px #c9a564,0 20px 80px #0005; max-height:85dvh; overflow-y:auto; }dialog::backdrop { background:#291b1477; backdrop-filter:blur(4px); }.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }.dialog-heading .icon-button { background:transparent; border:none; font-size:25px; width:24px; height:24px; }.dialog-intro { font-size:12px; color:var(--muted); line-height:1.8; margin-bottom:22px; }.rules-list { padding-left:21px; font-size:12px; line-height:1.85; color:var(--muted); }.rules-list li { padding-left:5px; margin-bottom:12px; }.rules-list li::marker { color:#ac7f32; font-weight:600; }.rules-list strong { color:var(--ink); }.rules-safe { border-top:1px solid #d2b986; padding:16px 0; font-size:11px; color:var(--muted); display:flex; gap:10px; align-items:center; }.rules-safe span { color:#a57d34; font-size:18px; }.install-step { display:flex; gap:15px; margin:20px 0; }.install-step>span { color:#ad8235; font-family:var(--serif); font-size:21px; }.install-step strong { font-size:12px; }.install-step p { font-size:12px; line-height:1.8; color:var(--muted); margin:6px 0 0; }.install-step b { font-weight:550; color:var(--ink); }

/* Atmospheres decorate the room around the shared board, never its cells. */
body[data-theme="classic"] { --bg:#e8e1ce; --scene:none; --accent:#226344; --accent-hover:#1d543a; }
body[data-theme="classic"]::before { background-color:#e7e3d3; background-image:repeating-linear-gradient(0deg,transparent 0 45px,#bbb18e19 45px 46px),repeating-linear-gradient(90deg,transparent 0 45px,#bbb18e19 45px 46px); }
body[data-theme="classic"]::after { background:radial-gradient(ellipse at center,#fff7e73b,#fff9df9e); }
body[data-theme="holi"] { --bg:#ecd6ad; --scene:url('/assets/courtyard-holi.webp'); --accent:#963362; --accent-hover:#7e2951; }
body[data-theme="holi"]::after { background:linear-gradient(145deg,#ffc2dd19,#ffe8b715 50%,#beefd01a); }
body[data-theme="diwali"] { --bg:#122445; --scene:url('/assets/courtyard-diwali.webp'); --accent:#284469; --accent-hover:#1c3657; }
body[data-theme="diwali"]::after { background:linear-gradient(180deg,#0a1d391c,#0a173819 55%,#050f2940); }
body[data-theme="diwali"] .site-header .brand::before,body[data-theme="diwali"] .header-actions { box-shadow:inset 0 0 0 2px #ffdf9244,0 0 20px #f0b75826; }
body[data-theme="diwali"] .site-footer { color:#f4d79d; background:#182d4dde; border-color:#ad8950; }
body[data-theme="diwali"] .footer-detail>span { color:#ecc56e; }
@keyframes legal-pulse { 0%,100% { outline-offset:3px; }50% { outline-offset:5px; } }
@keyframes shake { 0%,100% { transform:rotate(0); }25% { transform:rotate(-9deg); }75% { transform:rotate(9deg); } }

@media(min-width:1400px) {
  .page-shell { max-width:1380px; }.site-header { min-height:123px; }.game-layout { gap:48px; padding-top:19px; }.control-column { padding:32px 29px 27px; }h1 { font-size:42px; }.board-player-name { font-size:19px; }.board-player { min-height:70px; }.player-avatar { width:47px; height:47px; }
}
@media(max-width:1100px) {
  .page-shell { padding:0 25px; }.game-layout { gap:29px; grid-template-columns:minmax(0,1.3fr) minmax(315px,1fr); }.site-header { min-height:106px; }.control-column { padding:25px 20px 21px; }.board-heading .live-label { display:none; }h1 { font-size:34px; }.theme-name { font-size:7px; }.theme-art i { width:9px; height:9px; }.board-theme-name { display:none; }.board-players { gap:32px; }.board-player { padding:8px 9px 8px 7px; min-height:59px; gap:7px; }.player-avatar { width:37px; height:37px; font-size:19px; }.board-player-name { font-size:15px; }.board-player-status { font-size:8px; }.board-player-finished { font-size:8px; }.yard-pieces .piece { font-size:8px; }.turn-name { font-size:24px; }.turn-card::before,.turn-card::after { font-size:19px; }
}
@media(max-width:850px) {
  .page-shell { padding:0 20px; }.site-header { min-height:98px; }.brand { padding:12px 17px 13px 12px; gap:8px; }.brand-word { font-size:18px; }.brand-word>span { font-size:9px; letter-spacing:5px; }.brand-mark { width:34px; height:34px; }.header-actions { gap:2px; padding:5px; }.header-actions .text-button { font-size:11px; padding:8px; }.header-actions .outline-button { padding:9px 11px; font-size:10px; }.game-layout { gap:23px; grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr); padding-top:12px; }.control-column { padding:23px 17px 20px; }h1 { font-size:30px; letter-spacing:-.7px; }.lead { font-size:11px; margin-bottom:19px; }.eyebrow { font-size:8px; letter-spacing:1.2px; }.mode-tab { font-size:9px; padding:10px 3px; }.mode-tabs { margin-bottom:18px; }.field input { height:40px; }.field { margin-bottom:12px; }.field-hint { font-size:8px; }.theme-art { height:37px; }.theme-art i { width:8px; height:8px; }.theme-name { white-space:normal; line-height:1.25; min-height:27px; padding:6px 3px; }.primary-button { font-size:11px; padding:12px; }.privacy-note { margin-bottom:12px; }.section-label { margin-top:16px; }.tag { font-size:7px; }.welcome-details { gap:13px; font-size:7px; }.board-frame { padding:7px; }.board-heading { margin-bottom:9px; padding:6px 10px; }.board-players { gap:23px; margin:10px -1px; }.board-player { gap:5px; min-height:53px; padding:8px 9px 8px 6px; border-radius:28px 11px 23px 28px; }.player-avatar { width:31px; height:31px; font-size:16px; }.board-player-name { font-size:12px; }.board-player-status { font-size:7px; }.board-player-finished { display:none; }.board-player .you-tag { font-size:6px; padding:0 3px; margin-left:2px; }.yard-label { font-size:5px; letter-spacing:1.2px; }.yard-pieces .piece { font-size:6px; border-width:.7px; }.piece { font-size:6px; border-width:.7px; }.piece::before,.piece::after { border-width:.7px; }.cell { font-size:15px; }.board-below { font-size:8px; padding:7px 8px; margin-top:12px; }.board-frame::before,.board-frame::after { font-size:23px; width:24px; height:24px; }.turn-card { padding:13px 0 16px; }.turn-name { font-size:23px; }.turn-card::before,.turn-card::after { display:none; }.player-card { padding:8px; }.player-card-top { font-size:9px; }.unlock-status { font-size:7px; }.finish-count { font-size:7px; }.room-share { padding:10px; }.room-code { font-size:20px; }.share-actions { gap:5px; }.share-actions .outline-button { font-size:10px; padding:9px; }.colour-choice { font-size:8px; gap:3px; padding:9px 3px; }.seat-row { padding:8px 9px; }.seat-name { font-size:10px; }
}
@media(max-width:670px) {
  .page-shell { padding:0 15px; max-width:560px; }.site-header { min-height:89px; gap:10px; }.brand { padding:11px 14px 12px 10px; gap:6px; }.brand-word { font-size:15px; letter-spacing:.8px; }.brand-word>span { font-size:8px; letter-spacing:4px; margin-top:5px; }.brand-mark { width:29px; height:29px; }.brand::before { inset:5px 0; border-radius:24px 7px; }.header-actions { gap:3px; border-radius:21px; padding:4px; }.header-actions .text-button { font-size:0; padding:6px; gap:0; }.nav-symbol { font-size:19px; }.sound-label { display:none; }.header-actions .outline-button { font-size:0; width:30px; height:30px; padding:0; }.header-actions .outline-button>span { font-size:20px; }.game-layout { display:flex; flex-direction:column; gap:24px; padding-top:5px; padding-bottom:26px; }.board-column { width:100%; margin:auto; }.control-column { width:100%; margin:5px auto 0; padding:26px 23px 23px; border-radius:31px 9px; }.game-layout.is-home { flex-direction:column-reverse; gap:26px; }.game-layout.is-home .control-column>.eyebrow { display:block; text-align:center; }.game-layout.is-lobby { flex-direction:column-reverse; }.game-layout.is-lobby .board-column { max-width:430px; }.game-layout.is-lobby .board-below { display:none; }h1 { font-size:35px; text-align:center; line-height:1.16; margin:10px 0 13px; }h1 br { display:none; }.lead { text-align:center; max-width:355px; margin:0 auto 21px; font-size:12px; }.mode-tabs { margin-bottom:20px; }.mode-tab { font-size:10px; padding:11px 5px; }.theme-name { font-size:8px; white-space:nowrap; min-height:0; padding:7px 3px; }.theme-art { height:42px; }.theme-art i { width:10px; height:10px; }.field label,.field-label { font-size:11px; }.field input { font-size:12px; height:44px; }.field { margin-bottom:14px; }.field-hint { font-size:9px; }.primary-button { font-size:12px; padding:14px; }.create-button { margin-top:21px; }.privacy-note { font-size:9px; margin-top:12px; }.welcome-details { display:none; }.join-toggle { font-size:11px; }.board-heading { margin:0 5px 11px; padding:7px 10px; }.board-heading .live-label { display:flex; font-size:8px; }.board-frame { padding:7px; }.board-below { margin-top:12px; font-size:8px; }.board-theme-name { display:block; font-size:7px; }.board-players { gap:clamp(18px,7vw,34px); margin:10px -2px; }.board-player { min-height:54px; padding:8px 10px 8px 6px; gap:6px; }.player-avatar { width:33px; height:33px; font-size:17px; }.board-player-name { font-size:14px; }.board-player-status { font-size:7px; margin-top:4px; }.board-player .you-tag { font-size:6px; }.board-player::after { font-size:20px; right:-6px; }.yard-label { font-size:5px; letter-spacing:1.5px; }.yard-pieces .piece { font-size:7px; }.piece { font-size:7px; }.cell { font-size:17px; }.eyebrow { font-size:8px; letter-spacing:1.3px; }.site-footer { font-size:8px; padding:14px 10px 18px; gap:16px; }.footer-detail { gap:6px; font-size:7px; }.game-layout.is-game { gap:19px; }.game-layout.is-game .board-below { display:none; }.game-layout.is-game .control-column { padding:23px 22px 21px; }.game-layout.is-game .control-column>.back-button { display:none; }.game-layout.is-game .mobile-turn { display:none; }.turn-card { padding:2px 2px 20px; }.turn-name { font-size:26px; }.turn-card::before,.turn-card::after { display:block; top:35px; font-size:25px; }.dice-area { margin:18px 0 12px; gap:11px; }.die { width:73px; height:73px; padding:14px; gap:5px; }.turn-card .primary-button { min-height:48px; font-size:20px; padding:10px 16px; }.roll-help { font-size:10px; }.move-status { font-size:11px; min-height:32px; }.player-card { padding:11px; }.player-card-top { font-size:11px; }.unlock-status { font-size:9px; }.finish-count { font-size:9px; }.match-log { margin-top:18px; }.log-list li { font-size:10px; }.seat-name { font-size:12px; }.seat-name small { font-size:9px; }.seat-row { padding:11px 12px; }.seat-ready { font-size:10px; }.colour-choice { font-size:10px; padding:10px 4px; }.lobby-message { font-size:11px; }.room-code { font-size:25px; }.room-share { padding:12px; }.share-actions .outline-button { font-size:11px; padding:10px; }.lobby-intro { text-align:left; margin-bottom:10px; }.lobby-intro.lead { max-width:none; }.control-column h2 { font-size:31px; }.connection-banner,.error-banner { font-size:11px; margin:8px 0 15px; }.game-meta { font-size:9px; }.rules-list { font-size:12px; }dialog { padding:24px; }.dialog-intro { font-size:12px; }.toast { bottom:max(20px,env(safe-area-inset-bottom)); font-size:11px; }.board-note { font-size:8px; }
}
@media(max-width:370px) {
  .page-shell { padding:0 11px; }.brand-word { font-size:13px; }.brand-mark { width:26px; height:26px; }.brand { padding:12px 12px 12px 9px; }.header-actions .text-button { padding:5px; }.header-actions { gap:1px; }.board-player { gap:5px; padding:7px 9px 7px 5px; }.player-avatar { width:29px; height:29px; font-size:15px; }.board-player-name { font-size:12px; }.board-player-status { font-size:6px; }.board-players { gap:19px; }.board-player .you-tag { font-size:5px; }.control-column { padding:25px 18px 23px; }h1 { font-size:31px; }.theme-name { font-size:7px; }.tag { font-size:6px; }.cell { font-size:14px; }.board-heading .live-label { font-size:7px; }.board-heading .eyebrow { font-size:7px; }.footer-detail { display:none; }
}
@media(max-width:850px) {
  .board-player { min-height:64px; }
  .board-player-info { padding-bottom:10px; }
  .board-player-finished { display:block; position:absolute; left:43px; bottom:7px; font-size:7px; margin:0; }
}
@media(max-width:670px) {
  .board-player-status { font-size:8px; }
  .board-player-finished { left:46px; }
}
@media(max-width:370px) {
  .board-player-status { font-size:7px; }
  .board-player-finished { left:40px; font-size:6px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Phone artwork keeps festival details visible around the narrow board. */
@media(max-width:670px) {
  body::before { background-size:100% 100%; }
  body[data-theme="royal"] { --scene:url('/assets/courtyard-royal-mobile.webp'); }
  body[data-theme="holi"] { --scene:url('/assets/courtyard-holi-mobile.webp'); }
  body[data-theme="diwali"] { --scene:url('/assets/courtyard-diwali-mobile.webp'); }
  .board-player { min-height:70px; }
  .board-player-info { padding-bottom:13px; }
  .board-player-status { font-size:10px; line-height:1.2; white-space:normal; }
  .board-player-finished { font-size:9px; bottom:7px; }
}
@media(max-width:370px) {
  .board-player-status { font-size:9px; }
  .board-player-finished { font-size:8px; }
}

/* Turn timing stays beside the active name; clocks never change board geometry. */
.board-player-name-row { display:flex; align-items:center; gap:5px; min-width:0; }
.board-player-name-row .board-player-name { flex:1; min-width:0; }
.turn-countdown { --clock-color:#387d46; --remaining:1; position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:43px; height:43px; border-radius:50%; color:#4e3b1d; background:conic-gradient(var(--clock-color) calc(var(--remaining)*1turn),#d7c79f 0); font:700 15px/1 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-variant-numeric:tabular-nums; vertical-align:middle; }
.turn-countdown::before { content:''; position:absolute; inset:3px; border-radius:50%; background:#fff5db; box-shadow:inset 0 1px 2px #80612318; }
.turn-countdown>span,.turn-countdown>small { position:relative; z-index:1; }
.turn-countdown>small { font-size:8px; margin:2px 0 0 1px; }
.turn-countdown.compact { width:25px; height:25px; font-size:10px; }
.turn-countdown.compact::before { inset:2px; }
.turn-countdown.compact>small { font-size:6px; }
.turn-countdown.urgent { --clock-color:#b83223; color:#9d2c1c; }
.turn-name-row { display:flex; align-items:center; justify-content:center; gap:10px; margin:5px 0 7px; }
.turn-name-row .turn-name { margin:0; flex:0 1 auto; min-width:0; font-size:25px; line-height:1.25; }
.turn-header>div { width:100%; }
.turn-next { margin:12px 0 0; padding:8px 11px; background:#fff7e4; border:1px solid #d4bd88; border-radius:7px; font-size:12px; color:#79572c; }
.turn-next strong { color:#4a321c; font-weight:650; }
.turn-next>span { display:block; font-size:8px; line-height:1.5; color:#8a795a; margin-top:2px; }
.turn-timeout-help { font-size:9px; line-height:1.6; color:#846c47; margin:13px 0 0; }
.seat-turn-badge { position:absolute; top:-7px; right:12px; border:1px solid #aa8139; border-radius:7px; padding:2px 6px; background:#fff2c8; color:#71501d; font-size:7px; line-height:1.2; font-weight:700; letter-spacing:.7px; box-shadow:0 1px 2px #5a341527; }
.next-badge { background:#345f72; color:#fff7df; border-color:#b49d63; }
.left-badge { background:#e3d9c3; color:#6f6250; border-color:#b3a17b; }
.extra-badge { background:#f0d27a; color:#765214; }
.board-player.upcoming { border-color:#5d7b7d; }
.board-player.left .board-player-name { color:#837458; }
.board-player.left .board-player-status { color:#897861; }
.departure-notice { padding:11px 12px; margin:4px 0 15px; border:1px solid #c9ae79; border-radius:6px; background:#fff7e0; color:#816641; font-size:10px; line-height:1.8; }
.departure-notice strong { display:block; color:#5e4020; font-size:12px; }
.departure-notice .text-button { display:inline; padding:0; color:#774c24; font-size:10px; text-decoration:underline; text-underline-offset:2px; }
.leave-match-button { margin-top:15px; padding:10px 12px; border:1px solid #d5b58a; border-radius:6px; background:transparent; color:#925040; font-size:10px; font-weight:550; }
.leave-match-button:hover:not(:disabled) { background:#f9e8d2; }
.leave-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.leave-dialog-actions>button { min-width:124px; }
.leave-error { padding:10px 12px; background:#f9e1d7; border:1px solid #d3a597; border-radius:5px; color:#893a29; font-size:12px; line-height:1.6; }
@media(max-width:1100px) {
  .turn-name-row .turn-name { font-size:22px; }
  .board-player.current .board-player-finished { position:absolute; left:52px; bottom:6px; font-size:8px; }
  .board-player.current .board-player-info { padding-bottom:10px; }
  .board-player.current { min-height:72px; }
}
@media(max-width:850px) {
  .turn-countdown.compact { width:22px; height:22px; font-size:9px; }
  .turn-countdown.compact>small { font-size:5px; }
  .board-player.current .board-player-finished { left:43px; bottom:7px; font-size:7px; }
  .board-player.current .board-player-info { padding-bottom:10px; }
  .board-player.current { min-height:64px; }
}
@media(max-width:670px) {
  .turn-name-row .turn-name { font-size:24px; }
  .turn-countdown { width:42px; height:42px; }
  .board-player.current .board-player-finished { left:46px; bottom:7px; font-size:9px; }
  .board-player.current .board-player-info { padding-bottom:13px; }
  .board-player.current { min-height:70px; }
  .board-player-name-row { gap:3px; }
  .board-player.current .board-player-name { font-size:13px; }
  .seat-turn-badge { font-size:7px; right:10px; padding:2px 5px; }
  .turn-timeout-help { font-size:10px; }
  .turn-next { font-size:13px; }
  .turn-next>span { font-size:9px; }
  .leave-match-button { font-size:11px; padding:11px; }
}
@media(max-width:370px) {
  .board-player.current .board-player-name { font-size:11px; }
  .board-player.current .board-player-finished { left:40px; font-size:8px; }
  .turn-countdown.compact { width:21px; height:21px; }
  .turn-name-row { gap:8px; }
  .turn-name-row .turn-name { font-size:22px; }
  .leave-dialog-actions { gap:8px; }
  .leave-dialog-actions>button { min-width:0; flex:1; font-size:11px; padding:11px 8px; }
}