/* web/app/tokens.css */
/* GENERATED by scripts/tokens-css.mjs from design/tokens and utils/boardSkins.ts. Do not edit; edit the app's tokens. */

/* themes: dark, light, sepia */

:root,
[data-sg-theme="light"],
[data-theme="light"] {
  --bg-canvas: #F8F4EC;
  --bg-card: #FFFFFF;
  --bg-card-alt: #FDFBF7;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F1EADD;
  --bg-scrim: rgba(17,21,40,0.48);
  --bg-tab-bar: rgba(255,255,255,0.96);
  --line-hair: #E6DCCB;
  --line-strong: #D3C6AF;
  --line-control: #80869F;
  --line-focus: #1F6C91;
  --text-primary: #1B2140;
  --text-secondary: #4F5677;
  --text-muted: #5F6582;
  --text-faint: #9AA0B8;
  --text-inverse: #FFFFFF;
  --text-link: #1F6C91;
  --action-primary-bg: #1E2546;
  --action-primary-pressed: #2C3458;
  --action-primary-fg: #FFFFFF;
  --action-primary-shadow: 0 6px 18px rgba(30,37,70,0.25);
  --action-gold-bg: linear-gradient(180deg, #F8D86E 0%, #EDBE2B 100%);
  --action-gold-fg: #2B1F00;
  --action-gold-shadow: 0 4px 14px rgba(237,190,43,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  --action-secondary-border: #D3C6AF;
  --gold-fill: #F4CB45;
  --gold-edge: #DDAE22;
  --gold-line: #EFC23A;
  --gold-text: #8A5F00;
  --gold-icon: #C9970F;
  --gold-tint: #FFF6DA;
  --gold-border: #EFD58A;
  --sky-fill: #9AD3EB;
  --sky-edge: #7CC0DE;
  --sky-line: #8ACBE6;
  --sky-text: #1F6C91;
  --sky-tint: #E7F5FB;
  --sky-on-fill: #13203A;
  --ember-dot: #DB5317;
  --ember-text: #B5470C;
  --ember-tint: #FFF1E8;
  --ember-border: #FFD9BF;
  --sage-fill: #3E9B6E;
  --sage-text: #23744C;
  --sage-tint: #E4F3EA;
  --danger-text: #B8382F;
  --danger-tint: #FCE9E7;
  --rose-text: #A83D5E;
  --rose-tint: #FCE8EE;
  --board-bead-idle: #EEE8DD;
  --board-bead-idle-edge: rgba(27,33,64,0.06);
  --board-letter-idle: #1B2140;
  --board-bead-selected: #D3D7E6;
  --board-bead-selected-edge: #C3C8DC;
  --board-twist: rgba(255,255,255,0.60);
  --board-string-twist: rgba(255,250,226,0.90);
  --board-string-glow: rgba(244,203,69,0.22);
  --board-hint-halo: #1F6C91;
  --board-hint-glow: rgba(31,108,145,0.10);
  --board-guide-line: rgba(138,203,230,0.55);
  --elevation-e1: 0 1px 2px rgba(27,33,64,0.05), 0 4px 14px rgba(27,33,64,0.06);
  --elevation-e2: 0 2px 4px rgba(27,33,64,0.06), 0 10px 28px rgba(27,33,64,0.10);
  --elevation-e3: 0 8px 30px rgba(27,33,64,0.16);
  --premium-panel: linear-gradient(160deg, #1B2140 0%, #2C3458 100%);
  --premium-panel-solid: #1B2140;
  --premium-panel-muted: #AEB6C8;
  --premium-on-panel: #FFFFFF;
  --premium-sheen: rgba(255,255,255,0.45);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not([data-sg-theme]) {
    --bg-canvas: #0B0F1E;
    --bg-card: #161B33;
    --bg-card-alt: #1A2040;
    --bg-raised: #1E2445;
    --bg-sunken: #10142A;
    --bg-scrim: rgba(0,0,0,0.62);
    --bg-tab-bar: rgba(22,27,51,0.96);
    --line-hair: #272F55;
    --line-strong: #343D66;
    --line-control: #6F77A0;
    --line-focus: #8FD3EE;
    --text-primary: #F3EFE6;
    --text-secondary: #BCC1D9;
    --text-muted: #959BBA;
    --text-faint: #6B7194;
    --text-inverse: #0B0F1E;
    --text-link: #8FD3EE;
    --action-primary-bg: #BEE7F6;
    --action-primary-pressed: #A6DCF0;
    --action-primary-fg: #0B0F1E;
    --action-primary-shadow: 0 6px 20px rgba(142,212,240,0.18);
    --action-gold-bg: linear-gradient(180deg, #F4CF5A 0%, #E0AE22 100%);
    --action-gold-fg: #1D1500;
    --action-gold-shadow: 0 4px 16px rgba(237,190,43,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
    --action-secondary-border: #343D66;
    --gold-fill: #EDBE2B;
    --gold-edge: #C99712;
    --gold-line: #E2B020;
    --gold-text: #F2C94C;
    --gold-icon: #F2C94C;
    --gold-tint: #2A2208;
    --gold-border: #5C4A16;
    --sky-fill: #5BB2D6;
    --sky-edge: #3E93B8;
    --sky-line: #4FA6CB;
    --sky-text: #8FD3EE;
    --sky-tint: #132A3A;
    --sky-on-fill: #07111F;
    --ember-dot: #FF7A2E;
    --ember-text: #FF9A57;
    --ember-tint: #2A160B;
    --ember-border: #5C3A1E;
    --sage-fill: #4FB985;
    --sage-text: #6FCB98;
    --sage-tint: #10261C;
    --danger-text: #FF7A70;
    --danger-tint: #2E1414;
    --rose-text: #F28FAB;
    --rose-tint: #2C1420;
    --board-bead-idle: #1A2040;
    --board-bead-idle-edge: rgba(255,255,255,0.06);
    --board-letter-idle: #E9E6F2;
    --board-bead-selected: #3A4372;
    --board-bead-selected-edge: #4A5488;
    --board-twist: rgba(255,255,255,0.32);
    --board-string-twist: rgba(255,246,214,0.75);
    --board-string-glow: rgba(237,190,43,0.22);
    --board-hint-halo: #8FE8C8;
    --board-hint-glow: rgba(143,232,200,0.10);
    --board-guide-line: rgba(79,166,203,0.55);
    --elevation-e1: 0 1px 2px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
    --elevation-e2: 0 2px 6px rgba(0,0,0,0.40), 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    --elevation-e3: 0 10px 36px rgba(0,0,0,0.55);
    --premium-panel: linear-gradient(160deg, #0E1320 0%, #1A2236 100%);
    --premium-panel-solid: #0E1320;
    --premium-panel-muted: #AEB6C8;
    --premium-on-panel: #FFFFFF;
    --premium-sheen: rgba(255,236,190,0.28);
    color-scheme: dark;
  }
}

[data-sg-theme="dark"],
[data-theme="dark"] {
  --bg-canvas: #0B0F1E;
  --bg-card: #161B33;
  --bg-card-alt: #1A2040;
  --bg-raised: #1E2445;
  --bg-sunken: #10142A;
  --bg-scrim: rgba(0,0,0,0.62);
  --bg-tab-bar: rgba(22,27,51,0.96);
  --line-hair: #272F55;
  --line-strong: #343D66;
  --line-control: #6F77A0;
  --line-focus: #8FD3EE;
  --text-primary: #F3EFE6;
  --text-secondary: #BCC1D9;
  --text-muted: #959BBA;
  --text-faint: #6B7194;
  --text-inverse: #0B0F1E;
  --text-link: #8FD3EE;
  --action-primary-bg: #BEE7F6;
  --action-primary-pressed: #A6DCF0;
  --action-primary-fg: #0B0F1E;
  --action-primary-shadow: 0 6px 20px rgba(142,212,240,0.18);
  --action-gold-bg: linear-gradient(180deg, #F4CF5A 0%, #E0AE22 100%);
  --action-gold-fg: #1D1500;
  --action-gold-shadow: 0 4px 16px rgba(237,190,43,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
  --action-secondary-border: #343D66;
  --gold-fill: #EDBE2B;
  --gold-edge: #C99712;
  --gold-line: #E2B020;
  --gold-text: #F2C94C;
  --gold-icon: #F2C94C;
  --gold-tint: #2A2208;
  --gold-border: #5C4A16;
  --sky-fill: #5BB2D6;
  --sky-edge: #3E93B8;
  --sky-line: #4FA6CB;
  --sky-text: #8FD3EE;
  --sky-tint: #132A3A;
  --sky-on-fill: #07111F;
  --ember-dot: #FF7A2E;
  --ember-text: #FF9A57;
  --ember-tint: #2A160B;
  --ember-border: #5C3A1E;
  --sage-fill: #4FB985;
  --sage-text: #6FCB98;
  --sage-tint: #10261C;
  --danger-text: #FF7A70;
  --danger-tint: #2E1414;
  --rose-text: #F28FAB;
  --rose-tint: #2C1420;
  --board-bead-idle: #1A2040;
  --board-bead-idle-edge: rgba(255,255,255,0.06);
  --board-letter-idle: #E9E6F2;
  --board-bead-selected: #3A4372;
  --board-bead-selected-edge: #4A5488;
  --board-twist: rgba(255,255,255,0.32);
  --board-string-twist: rgba(255,246,214,0.75);
  --board-string-glow: rgba(237,190,43,0.22);
  --board-hint-halo: #8FE8C8;
  --board-hint-glow: rgba(143,232,200,0.10);
  --board-guide-line: rgba(79,166,203,0.55);
  --elevation-e1: 0 1px 2px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
  --elevation-e2: 0 2px 6px rgba(0,0,0,0.40), 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  --elevation-e3: 0 10px 36px rgba(0,0,0,0.55);
  --premium-panel: linear-gradient(160deg, #0E1320 0%, #1A2236 100%);
  --premium-panel-solid: #0E1320;
  --premium-panel-muted: #AEB6C8;
  --premium-on-panel: #FFFFFF;
  --premium-sheen: rgba(255,236,190,0.28);
  color-scheme: dark;
}

[data-sg-theme="sepia"],
[data-theme="sepia"] {
  --bg-canvas: #F4EAD5;
  --bg-card: #FCF7EC;
  --bg-card-alt: #FFFBF2;
  --bg-raised: #FFFBF2;
  --bg-sunken: #EADDC2;
  --bg-scrim: rgba(40,30,20,0.45);
  --bg-tab-bar: rgba(252,247,236,0.96);
  --line-hair: #DDCCAA;
  --line-strong: #CDB993;
  --line-control: #8A7556;
  --line-focus: #285F75;
  --text-primary: #3A2E22;
  --text-secondary: #5E4D3A;
  --text-muted: #6E5C47;
  --text-faint: #A08D74;
  --text-inverse: #FCF7EC;
  --text-link: #285F75;
  --action-primary-bg: #3A2E22;
  --action-primary-pressed: #4E4032;
  --action-primary-fg: #FCF7EC;
  --action-primary-shadow: 0 6px 18px rgba(58,46,34,0.25);
  --action-gold-bg: linear-gradient(180deg, #F8D86E 0%, #EDBE2B 100%);
  --action-gold-fg: #2B1F00;
  --action-gold-shadow: 0 4px 14px rgba(237,190,43,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  --action-secondary-border: #CDB993;
  --gold-fill: #EEC048;
  --gold-edge: #D3A52E;
  --gold-line: #E8B83A;
  --gold-text: #7D5600;
  --gold-icon: #B88A16;
  --gold-tint: #F7E7BC;
  --gold-border: #E2C77F;
  --sky-fill: #A3CCDB;
  --sky-edge: #86B6C8;
  --sky-line: #93C0D0;
  --sky-text: #285F75;
  --sky-tint: #E3EEEE;
  --sky-on-fill: #1E2A33;
  --ember-dot: #C9531A;
  --ember-text: #9C3D0B;
  --ember-tint: #F9E3D2;
  --ember-border: #EFC4A4;
  --sage-fill: #4E8F65;
  --sage-text: #2A6B49;
  --sage-tint: #E2EBD6;
  --danger-text: #A8362C;
  --danger-tint: #F5DCD5;
  --rose-text: #973855;
  --rose-tint: #F3DDE0;
  --board-bead-idle: #EBDFC6;
  --board-bead-idle-edge: rgba(58,46,34,0.07);
  --board-letter-idle: #3A2E22;
  --board-bead-selected: #D9CCB0;
  --board-bead-selected-edge: #CBBB9A;
  --board-twist: rgba(255,250,240,0.55);
  --board-string-twist: rgba(255,250,226,0.90);
  --board-string-glow: rgba(238,192,72,0.22);
  --board-hint-halo: #285F75;
  --board-hint-glow: rgba(40,95,117,0.10);
  --board-guide-line: rgba(147,192,208,0.55);
  --elevation-e1: 0 1px 2px rgba(58,46,34,0.06), 0 4px 14px rgba(58,46,34,0.07);
  --elevation-e2: 0 2px 4px rgba(58,46,34,0.07), 0 10px 28px rgba(58,46,34,0.12);
  --elevation-e3: 0 8px 30px rgba(58,46,34,0.18);
  --premium-panel: linear-gradient(160deg, #2A2219 0%, #3D3123 100%);
  --premium-panel-solid: #2A2219;
  --premium-panel-muted: #CBBBA2;
  --premium-on-panel: #FFFFFF;
  --premium-sheen: rgba(255,248,230,0.45);
  color-scheme: light;
}

/* board skins: classic (per theme), aurora, botanical, gilded, linen */

:root,
[data-sg-theme="light"],
[data-skin="classic"][data-mode="light"] {
  --skin-bg: #F8F4EC;
  --skin-found-fill: #9AD3EB;
  --skin-found-fill-end: #9AD3EB;
  --skin-found-line: #8ACBE6;
  --skin-found-stroke: #7CC0DE;
  --skin-found-text: #13203A;
  --skin-guide-line: rgba(138,203,230,0.55);
  --skin-hint-glow-soft: rgba(31,108,145,0.10);
  --skin-hint-halo: #1F6C91;
  --skin-idle-edge: rgba(27,33,64,0.06);
  --skin-idle-fill: #EEE8DD;
  --skin-letter: #1B2140;
  --skin-selection: #D3D7E6;
  --skin-selection-line: #878CA4;
  --skin-sparkle: #8A5F00;
  --skin-string-edge: #DDAE22;
  --skin-string-fill: #F4CB45;
  --skin-string-fill-end: #F4CB45;
  --skin-string-glow: rgba(244,203,69,0.22);
  --skin-string-line: #EFC23A;
  --skin-string-text: #2B1F00;
  --skin-string-twist: rgba(255,250,226,0.90);
  --skin-twist: rgba(255,255,255,0.60);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode]):not([data-sg-theme]) {
    --skin-bg: #0B0F1E;
    --skin-found-fill: #5BB2D6;
    --skin-found-fill-end: #5BB2D6;
    --skin-found-line: #4FA6CB;
    --skin-found-stroke: #3E93B8;
    --skin-found-text: #07111F;
    --skin-guide-line: rgba(79,166,203,0.55);
    --skin-hint-glow-soft: rgba(143,232,200,0.10);
    --skin-hint-halo: #8FE8C8;
    --skin-idle-edge: rgba(255,255,255,0.06);
    --skin-idle-fill: #1A2040;
    --skin-letter: #E9E6F2;
    --skin-selection: #3A4372;
    --skin-selection-line: #535D8E;
    --skin-sparkle: #FFE68A;
    --skin-string-edge: #C99712;
    --skin-string-fill: #EDBE2B;
    --skin-string-fill-end: #EDBE2B;
    --skin-string-glow: rgba(237,190,43,0.22);
    --skin-string-line: #E2B020;
    --skin-string-text: #1D1500;
    --skin-string-twist: rgba(255,246,214,0.75);
    --skin-twist: rgba(255,255,255,0.32);
  }
}

[data-sg-theme="dark"],
[data-skin="classic"][data-mode="dark"] {
  --skin-bg: #0B0F1E;
  --skin-found-fill: #5BB2D6;
  --skin-found-fill-end: #5BB2D6;
  --skin-found-line: #4FA6CB;
  --skin-found-stroke: #3E93B8;
  --skin-found-text: #07111F;
  --skin-guide-line: rgba(79,166,203,0.55);
  --skin-hint-glow-soft: rgba(143,232,200,0.10);
  --skin-hint-halo: #8FE8C8;
  --skin-idle-edge: rgba(255,255,255,0.06);
  --skin-idle-fill: #1A2040;
  --skin-letter: #E9E6F2;
  --skin-selection: #3A4372;
  --skin-selection-line: #535D8E;
  --skin-sparkle: #FFE68A;
  --skin-string-edge: #C99712;
  --skin-string-fill: #EDBE2B;
  --skin-string-fill-end: #EDBE2B;
  --skin-string-glow: rgba(237,190,43,0.22);
  --skin-string-line: #E2B020;
  --skin-string-text: #1D1500;
  --skin-string-twist: rgba(255,246,214,0.75);
  --skin-twist: rgba(255,255,255,0.32);
}

[data-sg-theme="sepia"],
[data-skin="classic"][data-mode="sepia"] {
  --skin-bg: #F4EAD5;
  --skin-found-fill: #A3CCDB;
  --skin-found-fill-end: #A3CCDB;
  --skin-found-line: #93C0D0;
  --skin-found-stroke: #86B6C8;
  --skin-found-text: #1E2A33;
  --skin-guide-line: rgba(147,192,208,0.55);
  --skin-hint-glow-soft: rgba(40,95,117,0.10);
  --skin-hint-halo: #285F75;
  --skin-idle-edge: rgba(58,46,34,0.07);
  --skin-idle-fill: #EBDFC6;
  --skin-letter: #3A2E22;
  --skin-selection: #D9CCB0;
  --skin-selection-line: #94856C;
  --skin-sparkle: #7D5600;
  --skin-string-edge: #D3A52E;
  --skin-string-fill: #EEC048;
  --skin-string-fill-end: #EEC048;
  --skin-string-glow: rgba(238,192,72,0.22);
  --skin-string-line: #E8B83A;
  --skin-string-text: #2B1F00;
  --skin-string-twist: rgba(255,250,226,0.90);
  --skin-twist: rgba(255,250,240,0.55);
}

[data-skin="aurora"] {
  --skin-bg: #0E1430;
  --skin-found-fill: #2F6E8E;
  --skin-found-fill-end: #5B4BB7;
  --skin-found-line: #3D82A6;
  --skin-found-stroke: #4FA3C7;
  --skin-found-text: #FFFFFF;
  --skin-guide-line: rgba(79,163,199,0.50);
  --skin-hint-glow-soft: rgba(143,243,224,0.14);
  --skin-hint-halo: #8FF3E0;
  --skin-idle-edge: rgba(230,236,255,0.09);
  --skin-idle-fill: #182045;
  --skin-letter: #E6ECFF;
  --skin-selection: #2C3768;
  --skin-selection-line: #546096;
  --skin-sparkle: #FFF3C8;
  --skin-string-edge: #D9A73A;
  --skin-string-fill: #FFE7A3;
  --skin-string-fill-end: #F5C451;
  --skin-string-glow: rgba(255,231,163,0.26);
  --skin-string-line: #F8D677;
  --skin-string-text: #1B1530;
  --skin-string-twist: rgba(255,252,235,0.85);
  --skin-twist: rgba(180,255,240,0.35);
}

[data-skin="botanical"] {
  --skin-bg: #E7EFE6;
  --skin-found-fill: #B9D9C0;
  --skin-found-fill-end: #A9CDB2;
  --skin-found-line: #6F907A;
  --skin-found-stroke: #759880;
  --skin-found-text: #173323;
  --skin-guide-line: rgba(141,183,154,0.55);
  --skin-hint-glow-soft: rgba(122,90,14,0.10);
  --skin-hint-halo: #7A5A0E;
  --skin-idle-edge: rgba(36,51,42,0.11);
  --skin-idle-fill: #F5F9F3;
  --skin-letter: #24332A;
  --skin-selection: #D4E3D3;
  --skin-selection-line: #798D7B;
  --skin-sparkle: #B9566F;
  --skin-string-edge: #B9566F;
  --skin-string-fill: #E28AA0;
  --skin-string-fill-end: #CF6E88;
  --skin-string-glow: rgba(226,138,160,0.24);
  --skin-string-line: #DB7E96;
  --skin-string-text: #3A1620;
  --skin-string-twist: rgba(255,240,245,0.80);
  --skin-twist: rgba(255,255,255,0.55);
}

[data-skin="gilded"] {
  --skin-bg: #14110B;
  --skin-found-fill: #7A2A20;
  --skin-found-fill-end: #5E1F18;
  --skin-found-line: #974B2E;
  --skin-found-stroke: #C8A04A;
  --skin-found-text: #F8EAD0;
  --skin-guide-line: rgba(200,160,74,0.50);
  --skin-hint-glow-soft: rgba(169,220,201,0.14);
  --skin-hint-halo: #A9DCC9;
  --skin-idle-edge: rgba(200,160,74,0.32);
  --skin-idle-fill: #221C12;
  --skin-letter: #F3E6C4;
  --skin-selection: #4A3B1E;
  --skin-selection-line: #8C7440;
  --skin-sparkle: #FFF4C4;
  --skin-string-edge: #A87A22;
  --skin-string-fill: #F7D774;
  --skin-string-fill-end: #C8902A;
  --skin-string-glow: rgba(247,215,116,0.20);
  --skin-string-line: #E2B547;
  --skin-string-text: #1A1408;
  --skin-string-twist: rgba(255,250,226,0.85);
  --skin-twist: rgba(255,214,150,0.40);
}

[data-skin="linen"] {
  --skin-bg: #EFE6D6;
  --skin-found-fill: #C0D4E3;
  --skin-found-fill-end: #C0D4E3;
  --skin-found-line: #6A889F;
  --skin-found-stroke: #6E8FA8;
  --skin-found-text: #23384A;
  --skin-guide-line: rgba(110,143,168,0.45);
  --skin-hint-glow-soft: rgba(138,95,0,0.10);
  --skin-hint-halo: #8A5F00;
  --skin-idle-edge: rgba(58,46,34,0.12);
  --skin-idle-fill: #F8F2E7;
  --skin-letter: #3A2E22;
  --skin-selection: #E3D7C1;
  --skin-selection-line: #92826A;
  --skin-sparkle: #9A6A12;
  --skin-string-edge: #8C2D27;
  --skin-string-fill: #B8443A;
  --skin-string-fill-end: #9E3530;
  --skin-string-glow: rgba(184,68,58,0.20);
  --skin-string-line: #B8443A;
  --skin-string-text: #FFF6EC;
  --skin-string-twist: rgba(255,236,220,0.70);
  --skin-twist: rgba(255,255,255,0.55);
}

/* site scale: design/tokens/type.ts, layout.ts (app tokens) + web-only fluid sizes (scripts/tokens-css.mjs) */

:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display-fallback: "Strings Display Fallback", Georgia, "Times New Roman", serif;
  --type-display-hero: 700 44px/50px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-display-hero: -0.0136em;
  --type-display-xl: 600 32px/38px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-display-xl: -0.0125em;
  --type-display-xl30: 600 30px/36px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-display-xl30: -0.0133em;
  --type-display-lg: 600 30px/36px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-display-lg: -0.0133em;
  --type-display-md: 600 24px/28px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-display-md: -0.0083em;
  --type-display-sm: 600 22px/26px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-display-sm: -0.0091em;
  --type-display-xs: 600 20px/24px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-display-xs: -0.005em;
  --type-display-xs19: 600 19px/23px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-display-xs19: -0.0053em;
  --type-num-xl: 700 40px/44px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-num-xl: -0.01em;
  --type-num-lg: 700 24px/28px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-num-lg: -0.0083em;
  --type-num-lg22: 700 22px/26px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-num-lg22: -0.0091em;
  --type-num-md: 700 20px/24px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-num-md: 0em;
  --type-num-sm: 700 17px/20px var(--font-display, "Strings Display"), var(--font-display-fallback);
  --tracking-num-sm: 0em;
  --type-title-lg: 700 18px/23px var(--font-ui);
  --tracking-title-lg: 0em;
  --type-title-md: 700 16px/21px var(--font-ui);
  --tracking-title-md: 0em;
  --type-title-sm: 700 15px/19px var(--font-ui);
  --tracking-title-sm: 0em;
  --type-body-lg: 400 17px/24px var(--font-ui);
  --tracking-body-lg: 0em;
  --type-body-md: 400 15px/21px var(--font-ui);
  --tracking-body-md: 0em;
  --type-body-sm: 400 13px/17px var(--font-ui);
  --tracking-body-sm: 0em;
  --type-label: 700 11px/13px var(--font-ui);
  --tracking-label: 0.1182em;
  --case-label: uppercase;
  --type-label-xs: 700 10px/12px var(--font-ui);
  --tracking-label-xs: 0.12em;
  --case-label-xs: uppercase;
  --type-caption: 600 12px/15px var(--font-ui);
  --tracking-caption: 0em;
  --type-button-lg: 700 18px/22px var(--font-ui);
  --tracking-button-lg: 0em;
  --type-button-md: 700 16px/20px var(--font-ui);
  --tracking-button-md: 0em;
  --type-button-sm: 700 14px/18px var(--font-ui);
  --tracking-button-sm: 0em;
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-tile: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-sheet: 28px;
  --radius-pill: 999px;
  --btn-h-hero: 60px;
  --btn-px-hero: 24px;
  --btn-h-lg: 56px;
  --btn-px-lg: 24px;
  --btn-h-md: 48px;
  --btn-px-md: 20px;
  --btn-h-sm: 36px;
  --btn-px-sm: 14px;
  --btn-disabled-opacity: 0.45;
  --icon-btn: 36px;
  --icon-btn-icon: 22px;
  --pill-h-sm: 24px;
  --pill-h-md: 32px;
  --pill-px-sm: 10px;
  --pill-px-md: 14px;
  --min-hit: 44px;
  --stitch-w: 1.25px;
  --stitch-dash: 4px;
  --stitch-gap: 3px;
  --stitch-inset: 4px;
  --stitch-inset-sm: 3px;
  --progress-h: 6px;
  --ring-stroke: 4px;
  --qr-fg: #1B2140;
  --qr-bg: #FFFFFF;
  --container: 1200px;
  --container-prose: 720px;
  --section-y: clamp(56px, 4vw + 32px, 112px);
  --fs-h1: clamp(2.5rem, 1.55rem + 3.1vw, 4.25rem);
  --fs-h1-page: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.625rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --motion-fast: 140ms;
  --motion: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: 16px;
}

@media (min-width: 375px) {
  :root {
    --gutter: 20px;
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
  }
}

/* web/app/chrome.gen.css */
/* GENERATED by web/scripts/prebuild.mjs from packages/site/chrome.ts chromeCss() (the chrome contract). Do not edit. */
.sg-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html{--sg-header-h:0px}
html[data-sg-surface="site"][data-sg-ff="phone"]{--sg-header-h:56px}
html[data-sg-ff="tablet"],html[data-sg-ff="desktop"]{--sg-header-h:52px}
@media (min-height: 800px){html[data-sg-ff="tablet"],html[data-sg-ff="desktop"]{--sg-header-h:64px}}
@media (max-width: 739.98px), (max-height: 599.98px) and (pointer: coarse), (max-height: 599.98px) and (pointer: none){html:not([data-sg-ff]):not([data-sg-surface="play"]){--sg-header-h:56px}}
@media (min-width: 740px) and (max-width: 1023.98px) and (min-height: 600px), (min-width: 740px) and (max-width: 1023.98px) and (pointer: fine), (min-width: 1024px) and (min-height: 600px), (min-width: 1024px) and (pointer: fine){html:not([data-sg-ff]){--sg-header-h:52px}}
@media (min-height: 800px) and (min-width: 740px){html:not([data-sg-ff]){--sg-header-h:64px}}
html[data-sg-surface="play"][data-sg-ff="phone"] #sg-header,html[data-sg-surface="play"][data-sg-ff="phone"] .sg-skip{display:none}
@media (max-width: 739.98px), (max-height: 599.98px) and (pointer: coarse), (max-height: 599.98px) and (pointer: none){html[data-sg-surface="play"]:not([data-sg-ff]) #sg-header{display:none}}
html[data-sg-surface="site"] [data-sg-site="never"],html[data-sg-surface="play"] [data-sg-play="never"]{display:none}
html[data-sg-surface="site"]:not([data-sg-returning]) [data-sg-site="returning"]{display:none}
html:not([data-sg-surface]) [data-sg-site="never"],html:not([data-sg-surface]) [data-sg-site="returning"]{display:none}
html[data-sg-surface="site"]:not([data-sg-returning]) [data-sg-menu="phone"] [data-sg-id="leagues"],html:not([data-sg-surface]) [data-sg-menu="phone"] [data-sg-id="leagues"]{display:none}
.sg-cta__back,.sg-cta__short{display:none}html[data-sg-returning] .sg-cta__new{display:none}html[data-sg-returning] .sg-cta__back{display:inline}
@media (max-width: 399.98px){html .sg-cta .sg-cta__new,html[data-sg-returning] .sg-cta .sg-cta__back{display:none}html .sg-cta .sg-cta__short{display:inline}}
html[data-sg-ff="phone"] .sg-nav,html[data-sg-ff="phone"] .sg-lang,html[data-sg-ff="phone"] .sg-theme,html[data-sg-ff="phone"] .sg-getapp,html[data-sg-ff="phone"] .sg-account{display:none}
@media (max-width: 739.98px), (max-height: 599.98px) and (pointer: coarse), (max-height: 599.98px) and (pointer: none){html:not([data-sg-ff]) .sg-nav,html:not([data-sg-ff]) .sg-lang,html:not([data-sg-ff]) .sg-theme,html:not([data-sg-ff]) .sg-getapp,html:not([data-sg-ff]) .sg-account{display:none}}
html[data-sg-ff="tablet"] [data-sg-fold="tablet"],html[data-sg-ff="tablet"] .sg-nav__sep,html[data-sg-ff="tablet"] .sg-lang,html[data-sg-ff="tablet"] .sg-theme,html[data-sg-ff="tablet"] .sg-getapp,html[data-sg-ff="tablet"] .sg-phonemenu{display:none}
@media (min-width: 740px) and (max-width: 1023.98px) and (min-height: 600px), (min-width: 740px) and (max-width: 1023.98px) and (pointer: fine){html:not([data-sg-ff]) [data-sg-fold="tablet"],html:not([data-sg-ff]) .sg-nav__sep,html:not([data-sg-ff]) .sg-lang,html:not([data-sg-ff]) .sg-theme,html:not([data-sg-ff]) .sg-getapp,html:not([data-sg-ff]) .sg-phonemenu{display:none}}
html[data-sg-ff="desktop"] .sg-more,html[data-sg-ff="desktop"] .sg-phonemenu{display:none}
@media (min-width: 1024px) and (min-height: 600px), (min-width: 1024px) and (pointer: fine){html:not([data-sg-ff]) .sg-more,html:not([data-sg-ff]) .sg-phonemenu{display:none}}
@media (max-width: 1279.98px), not all and (hover: hover) and (pointer: fine){html[data-sg-ff="desktop"] .sg-getapp,html:not([data-sg-ff]) .sg-getapp{display:none}}
html.sg-ads-on[data-sg-ff="desktop"] .sg-header__in{container:sg-header/inline-size}
html[data-sg-ff="desktop"] .sg-more [data-sg-id="howToPlay"],html[data-sg-ff="desktop"] .sg-more [data-sg-id="faq"],html[data-sg-ff="desktop"] .sg-more [data-sg-id="lang"],html[data-sg-ff="desktop"] .sg-more [data-sg-id="theme"]{display:none}
@media (min-width: 1024px){html:not([data-sg-ff]) .sg-more [data-sg-id="howToPlay"],html:not([data-sg-ff]) .sg-more [data-sg-id="faq"],html:not([data-sg-ff]) .sg-more [data-sg-id="lang"],html:not([data-sg-ff]) .sg-more [data-sg-id="theme"]{display:none}}
.sg-more [data-sg-id="themes"],.sg-more [data-sg-id="premium"]{display:none}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine){html[data-sg-ff="desktop"] .sg-more [data-sg-id="getApp"]{display:none}}
@media (max-width: 1179.98px){html[data-sg-ff="desktop"]:not(.sg-ads-on):not([lang|="en"]) .sg-more{display:block}html[data-sg-ff="desktop"]:not(.sg-ads-on):not([lang|="en"]) .sg-nav__item[data-sg-id="faq"]{display:none}html[data-sg-ff="desktop"]:not(.sg-ads-on):not([lang|="en"]) .sg-more [data-sg-id="faq"]{display:list-item}}
@media (max-width: 1179.98px) and (min-width: 1024px){html:not([data-sg-ff]):not([lang|="en"]) .sg-more{display:block}html:not([data-sg-ff]):not([lang|="en"]) .sg-nav__item[data-sg-id="faq"]{display:none}html:not([data-sg-ff]):not([lang|="en"]) .sg-more [data-sg-id="faq"]{display:list-item}}
@media (max-width: 1279.98px){html[data-sg-ff="desktop"]:not(.sg-ads-on)[data-sg-accounts]:not([lang|="en"]) .sg-more{display:block}html[data-sg-ff="desktop"]:not(.sg-ads-on)[data-sg-accounts]:not([lang|="en"]) .sg-nav__item[data-sg-id="faq"]{display:none}html[data-sg-ff="desktop"]:not(.sg-ads-on)[data-sg-accounts]:not([lang|="en"]) .sg-more [data-sg-id="faq"]{display:list-item}}
@media (max-width: 1279.98px) and (min-width: 1024px){html:not([data-sg-ff])[data-sg-accounts]:not([lang|="en"]) .sg-more{display:block}html:not([data-sg-ff])[data-sg-accounts]:not([lang|="en"]) .sg-nav__item[data-sg-id="faq"]{display:none}html:not([data-sg-ff])[data-sg-accounts]:not([lang|="en"]) .sg-more [data-sg-id="faq"]{display:list-item}}
html[data-sg-ff="desktop"][data-sg-squeeze~="2"] .sg-more{display:block}html[data-sg-ff="desktop"][data-sg-squeeze~="2"] .sg-nav__item[data-sg-id="faq"]{display:none}html[data-sg-ff="desktop"][data-sg-squeeze~="2"] .sg-more [data-sg-id="faq"]{display:list-item}
@media (min-width: 1024px){html:not([data-sg-ff])[data-sg-squeeze~="2"] .sg-more{display:block}html:not([data-sg-ff])[data-sg-squeeze~="2"] .sg-nav__item[data-sg-id="faq"]{display:none}html:not([data-sg-ff])[data-sg-squeeze~="2"] .sg-more [data-sg-id="faq"]{display:list-item}}
@container sg-header (max-width: 1099.98px){html.sg-ads-on[data-sg-ff="desktop"] .sg-more{display:block}html.sg-ads-on[data-sg-ff="desktop"] .sg-nav__item[data-sg-id="faq"]{display:none}html.sg-ads-on[data-sg-ff="desktop"] .sg-more [data-sg-id="faq"]{display:list-item}}
@media (max-width: 1179.98px){html[data-sg-ff="desktop"]:not(.sg-ads-on)[data-sg-accounts]:not([lang|="en"]) .sg-nav__item[data-sg-id="howToPlay"],html[data-sg-ff="desktop"]:not(.sg-ads-on)[data-sg-accounts]:not([lang|="en"]) .sg-nav__sep{display:none}html[data-sg-ff="desktop"]:not(.sg-ads-on)[data-sg-accounts]:not([lang|="en"]) .sg-more [data-sg-id="howToPlay"]{display:list-item}}
@media (max-width: 1179.98px) and (min-width: 1024px){html:not([data-sg-ff])[data-sg-accounts]:not([lang|="en"]) .sg-nav__item[data-sg-id="howToPlay"],html:not([data-sg-ff])[data-sg-accounts]:not([lang|="en"]) .sg-nav__sep{display:none}html:not([data-sg-ff])[data-sg-accounts]:not([lang|="en"]) .sg-more [data-sg-id="howToPlay"]{display:list-item}}
html[data-sg-ff="desktop"][data-sg-squeeze~="3"] .sg-nav__item[data-sg-id="howToPlay"],html[data-sg-ff="desktop"][data-sg-squeeze~="3"] .sg-nav__sep{display:none}html[data-sg-ff="desktop"][data-sg-squeeze~="3"] .sg-more [data-sg-id="howToPlay"]{display:list-item}
@media (min-width: 1024px){html:not([data-sg-ff])[data-sg-squeeze~="3"] .sg-nav__item[data-sg-id="howToPlay"],html:not([data-sg-ff])[data-sg-squeeze~="3"] .sg-nav__sep{display:none}html:not([data-sg-ff])[data-sg-squeeze~="3"] .sg-more [data-sg-id="howToPlay"]{display:list-item}}
@container sg-header (max-width: 1099.98px){html.sg-ads-on[data-sg-ff="desktop"] .sg-nav__item[data-sg-id="howToPlay"],html.sg-ads-on[data-sg-ff="desktop"] .sg-nav__sep{display:none}html.sg-ads-on[data-sg-ff="desktop"] .sg-more [data-sg-id="howToPlay"]{display:list-item}}
@media (min-width: 1280px){html[data-sg-accounts]:not([lang|="en"]) .sg-getapp{width:40px;padding:0;justify-content:center}html[data-sg-accounts]:not([lang|="en"]) .sg-getapp > [data-sg-t],html[data-sg-accounts]:not([lang|="en"]) .sg-account[data-sg-account="account"] > [data-sg-t]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}html[data-sg-accounts]:not([lang|="en"]) .sg-account[data-sg-account="account"]{padding:0 4px}}
html[data-sg-squeeze~="1"] .sg-getapp{width:40px;padding:0;justify-content:center}html[data-sg-squeeze~="1"] .sg-getapp > [data-sg-t],html[data-sg-squeeze~="1"] .sg-account[data-sg-account="account"] > [data-sg-t]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}html[data-sg-squeeze~="1"] .sg-account[data-sg-account="account"]{padding:0 4px}
@container sg-header (max-width: 799.98px){html.sg-ads-on[data-sg-ff="desktop"] .sg-getapp{width:40px;padding:0;justify-content:center}html.sg-ads-on[data-sg-ff="desktop"] .sg-getapp > [data-sg-t],html.sg-ads-on[data-sg-ff="desktop"] .sg-account[data-sg-account="account"] > [data-sg-t]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}html.sg-ads-on[data-sg-ff="desktop"] .sg-account[data-sg-account="account"]{padding:0 4px}}
@media (max-width: 859.98px){html[data-sg-ff="tablet"][data-sg-accounts]:not([lang|="en"]) .sg-cta .sg-cta__new,html[data-sg-ff="tablet"][data-sg-accounts]:not([lang|="en"]) .sg-cta .sg-cta__back{display:none}html[data-sg-ff="tablet"][data-sg-accounts]:not([lang|="en"]) .sg-cta .sg-cta__short{display:inline}html[data-sg-ff="tablet"][data-sg-accounts]:not([lang|="en"]) .sg-nav__link,html[data-sg-ff="tablet"][data-sg-accounts]:not([lang|="en"]) .sg-more__btn{padding:0 8px}}
html[data-sg-squeeze~="4"] .sg-cta .sg-cta__new,html[data-sg-squeeze~="4"] .sg-cta .sg-cta__back{display:none}html[data-sg-squeeze~="4"] .sg-cta .sg-cta__short{display:inline}html[data-sg-squeeze~="4"] .sg-nav__link,html[data-sg-squeeze~="4"] .sg-more__btn{padding:0 8px}
html[data-sg-squeeze~="5"] .sg-lang__name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}html[data-sg-squeeze~="5"] .sg-lang__btn{padding:0 10px}
@container sg-header (max-width: 899.98px){html.sg-ads-on[data-sg-ff="desktop"] .sg-lang__name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}html.sg-ads-on[data-sg-ff="desktop"] .sg-lang__btn{padding:0 10px}}
html[data-sg-premium][data-sg-squeeze~="6"] .sg-more{display:block}html[data-sg-premium][data-sg-squeeze~="6"] .sg-nav__item[data-sg-id="premium"]{display:none}html[data-sg-premium][data-sg-squeeze~="6"] .sg-more [data-sg-id="premium"]{display:list-item}
html[data-sg-squeeze~="8"] .sg-more{display:block}html[data-sg-squeeze~="8"] .sg-nav__item[data-sg-id="themes"]{display:none}html[data-sg-squeeze~="8"] .sg-more [data-sg-id="themes"]{display:list-item}
html[data-sg-squeeze~="7"] .sg-header .sg-lockup .sg-lockup__art{width:auto;aspect-ratio:36.6/32;overflow:hidden}html[data-sg-squeeze~="7"] .sg-header .sg-lockup__logo{width:auto;right:auto}html[data-sg-squeeze~="7"] .sg-header .sg-lockup__word{display:none}
@media (max-width: 1279.98px), not all and (hover: hover) and (pointer: fine){html[data-sg-ff="desktop"] .sg-qr,html:not([data-sg-ff]) .sg-qr{display:none}}
html[data-sg-ff="phone"] .sg-qr,html[data-sg-ff="tablet"] .sg-qr,.sg-qr[hidden]{display:none}
html:not([data-sg-cmp]) li:has(> [data-sg-action="privacyChoices"]){display:none}
html:not([data-sg-accounts]) [data-sg-account]{display:none}
html:not([data-sg-premium]) [data-sg-id="premium"]{display:none}
html[data-sg-theme] [data-sg-theme-device],[data-sg-theme-device] [data-sg-scheme="dark"]{display:none}
@media (prefers-color-scheme: dark){[data-sg-theme-device] [data-sg-scheme="light"]{display:none}[data-sg-theme-device] [data-sg-scheme="dark"]{display:inline}}

/* web/app/site-chrome.css */
/*
 * The site chrome's look (WEB_V2_PLAN §4.1, §4.3, §7; lane W1): the header and footer of the chrome contract
 * (packages/site/chrome.ts) in the app's Golden Thread style. What shows where (§23 C6, the tablet/phone folds) and
 * --sg-header-h are the contract's own CSS (app/chrome.gen.css, the same on /play); this file is only the styling.
 * Every colour is a token (app/tokens.css); the icons are CSS masks drawn in currentColor; the logo is T1's SVG,
 * inlined in its exact colours. W4 loads this file on /play next to chrome.gen.css.
 */

:root {
  --sg-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.7 5.6 3.7 9s-1.2 6.4-3.7 9c-2.5-2.6-3.7-5.6-3.7-9S9.5 5.6 12 3Z'/%3E%3C/svg%3E");
  --sg-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --sg-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --sg-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --sg-i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4'/%3E%3C/svg%3E");
  --sg-i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z'/%3E%3C/svg%3E");
  --sg-i-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9'%3E%3Cpath d='M7 3.5h7l4 4V20a.5.5 0 0 1-.5.5h-10A.5.5 0 0 1 7 20V3.5Z'/%3E%3Cpath d='M14 3.5V8h4M9.5 12h5M9.5 15.5h5'/%3E%3C/svg%3E");
  --sg-i-device: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18V3Z' fill='black'/%3E%3Ccircle cx='12' cy='12' r='8.1' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  --sg-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");
  --sg-i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 4.8v14.4c0 .8.9 1.3 1.6.9l11.3-7.2c.6-.4.6-1.3 0-1.7L9.1 3.9c-.7-.4-1.6.1-1.6.9Z' fill='black'/%3E%3C/svg%3E");
  --sg-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --sg-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --sg-i-apple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.37 12.6c-.02-2.3 1.88-3.4 1.97-3.46-1.07-1.57-2.74-1.78-3.33-1.8-1.42-.14-2.77.84-3.49.84-.72 0-1.83-.82-3.01-.8-1.55.02-2.98.9-3.78 2.29-1.61 2.8-.41 6.94 1.16 9.21.77 1.11 1.68 2.36 2.88 2.31 1.16-.05 1.59-.75 2.99-.75 1.4 0 1.79.75 3.01.72 1.24-.02 2.03-1.13 2.79-2.25.88-1.29 1.24-2.53 1.26-2.6-.03-.01-2.42-.93-2.45-3.71ZM14.07 5.85c.64-.77 1.07-1.85.95-2.92-.92.04-2.03.61-2.69 1.38-.59.68-1.11 1.78-.97 2.83 1.02.08 2.07-.52 2.71-1.29Z'/%3E%3C/svg%3E");
  --sg-i-gplay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4.3 2.6c-.2.2-.3.6-.3 1v16.8c0 .4.1.8.3 1l9.4-9.4-9.4-9.4Zm10.5 10.5 2.6 2.6-11 6.3 8.4-8.9Zm0-2.2L6.4 2l11 6.3-2.6 2.6Zm3.7 3.9-2.9-1.7-2.8 2.8V12l2.8-2.8 2.9-1.7 3.2 1.8c.9.5.9 1.4 0 1.9l-3.2 1.6Z'/%3E%3C/svg%3E");
  --sg-i-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.5C12.8 8.2 15.8 11.2 21.5 12 15.8 12.8 12.8 15.8 12 21.5 11.2 15.8 8.2 12.8 2.5 12 8.2 11.2 11.2 8.2 12 2.5Z'/%3E%3C/svg%3E");
  --sg-chrome-w: min(var(--container), calc(100% - 2 * var(--gutter)));
}

/* ── shared bits ─────────────────────────────────────────────────────────────────────────────────────────── */

.sg-chrome {
  display: contents;
}

.sg-header summary,
.sg-footer summary {
  list-style: none;
}
.sg-header summary::-webkit-details-marker {
  display: none;
}

.sg-header [hidden] {
  display: none !important;
}

/* an icon drawn from a mask in the text colour */
.sg-lang__btn::before,
.sg-lang__btn::after,
.sg-more__btn::after,
.sg-theme__btn::before,
.sg-getapp::before,
.sg-cta::before,
.sg-phonemenu__btn::before,
.sg-menu__link::after,
.sg-phonemenu .sg-menu__group:not([data-sg-id="lang"]):not([data-sg-id="theme"]) .sg-menu__link::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--sg-i) center / contain no-repeat;
  mask: var(--sg-i) center / contain no-repeat;
}

.sg-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 60;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font: var(--type-button-sm);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}
.sg-skip:focus {
  left: 8px;
}

/* ── header ──────────────────────────────────────────────────────────────────────────────────────────────── */

.sg-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* solid on touch and by default (§22 E15): blur costs GPU time while scrolling and blurs nothing on /play */
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--line-hair);
  color: var(--text-primary);
  font-family: var(--font-ui);
  /* the site's body sets it; carried here so /play (whose body is the app's) renders the header's text the same (W4) */
  -webkit-font-smoothing: antialiased;
}
/* the frosted header only on site pages, with a hovering fine pointer, in website mode (never around the phone Menu:
   a backdrop filter would trap its fixed sheet) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (hover: hover) and (pointer: fine) {
    html[data-sg-surface="site"][data-sg-ff="tablet"] .sg-header,
    html[data-sg-surface="site"][data-sg-ff="desktop"] .sg-header {
      background: color-mix(in srgb, var(--bg-canvas) 86%, transparent);
      -webkit-backdrop-filter: saturate(1.4) blur(14px);
      backdrop-filter: saturate(1.4) blur(14px);
    }
  }
}

.sg-header__in {
  width: var(--sg-chrome-w);
  margin: 0 auto;
  height: var(--sg-header-h, 64px);
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
}
html[data-sg-surface="site"]:not([data-sg-ff]) .sg-header__in {
  height: var(--sg-header-h, 64px);
}

/* the lockup: T1's logo + "Strings" as outlined paths (the word in the text colour), 32 px tall (§10) */
.sg-lockup {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin-right: 12px;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.sg-lockup__art {
  position: relative;
  display: block;
  width: 127px; /* lockup.svg is 126.77 × 32 */
  height: 32px;
}
.sg-lockup__logo,
.sg-lockup__word {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* round3 (owner 2026-11-01): the logo's light tone on light canvases (Linen, Parchment), its exact colours on dark
   (Midnight, or a dark system scheme with no theme chosen); the same rule as design/art/logoTone.ts logoToneCss */
.sg-lockup__logo--dark {
  display: none;
}
html[data-sg-theme="dark"] .sg-lockup__logo--light {
  display: none;
}
html[data-sg-theme="dark"] .sg-lockup__logo--dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  html:not([data-sg-theme]) .sg-lockup__logo--light {
    display: none;
  }
  html:not([data-sg-theme]) .sg-lockup__logo--dark {
    display: block;
  }
}
/* the outlined word "Strings" (T1's paths) painted in the theme's text colour */
.sg-lockup__word {
  background: currentColor;
  -webkit-mask: url("/brand/lockup-word.svg") 0 0 / 100% 100% no-repeat;
  mask: url("/brand/lockup-word.svg") 0 0 / 100% 100% no-repeat;
}
.sg-lockup__word--stacked {
  -webkit-mask-image: url("/brand/lockup-stacked-word.svg");
  mask-image: url("/brand/lockup-stacked-word.svg");
}

/* nav: the game items │ the site items; the current page gets the app's gold tab bead */
.sg-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  position: relative;
}
.sg-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-nav__link,
.sg-more__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font: var(--type-button-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sg-nav__link:hover,
.sg-more__btn:hover,
.sg-more[open] > .sg-more__btn {
  color: var(--text-primary);
  background: var(--bg-sunken);
}
.sg-nav__link[aria-current="page"] {
  color: var(--text-primary);
}
.sg-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--gold-fill);
  box-shadow: inset 0 0 0 1px var(--gold-edge);
}
.sg-nav__sep {
  width: 1px;
  height: 20px;
  margin: 0 8px;
  background: var(--line-hair);
}
.sg-more {
  position: relative;
}
.sg-more__btn::after {
  --sg-i: var(--sg-i-chevron);
  width: 16px;
  height: 16px;
}

/* round 5 (web Premium "Gold thread"): "✦ Premium" in gold text after Me, in More and in the phone Menu. It exists only
   with html[data-sg-premium] (chrome.gen.css; web Premium can sell, or a ?premium=preview tab). No pill, no motion, no
   badge: the same hit area and focus ring as its neighbours. A member's item carries a check instead of the sparkle (a
   status, not a pitch). When the row runs out of room it folds into More first, and More gets a small gold dot. */
.sg-nav__item[data-sg-id="premium"] > .sg-nav__link,
.sg-nav__item[data-sg-id="premium"] > .sg-nav__link:hover,
.sg-nav__item[data-sg-id="premium"] > .sg-nav__link[aria-current="page"],
.sg-menu [data-sg-id="premium"] > .sg-menu__link {
  color: var(--gold-text);
}
.sg-menu [data-sg-id="premium"] > .sg-menu__link {
  justify-content: flex-start;
  gap: 8px;
}
.sg-menu [data-sg-id="premium"] > .sg-menu__link::after {
  margin-left: auto;
}
.sg-nav__item[data-sg-id="premium"] > .sg-nav__link::before,
.sg-menu [data-sg-id="premium"] > .sg-menu__link::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: var(--gold-icon);
  -webkit-mask: var(--sg-i-sparkle) center / contain no-repeat;
  mask: var(--sg-i-sparkle) center / contain no-repeat;
}
html[data-sg-premium$="member"] .sg-nav__item[data-sg-id="premium"] > .sg-nav__link::before,
html[data-sg-premium$="member"] .sg-menu [data-sg-id="premium"] > .sg-menu__link::before {
  width: 15px;
  height: 15px;
  background: var(--gold-text);
  -webkit-mask-image: var(--sg-i-check);
  mask-image: var(--sg-i-check);
}
html[data-sg-premium="offer"][data-sg-squeeze~="6"] .sg-more__btn::before,
html[data-sg-premium="preview"][data-sg-squeeze~="6"] .sg-more__btn::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-fill);
  box-shadow: inset 0 0 0 1px var(--gold-edge);
}

/* round 5: the plain line under a filled side rail on /play (shims/web/premium/railNote.ts places it 24 px below the ad
   box, outside it). Never styled like an ad: the page's own small type, no box, no button. */
.sg-rail-note {
  position: fixed;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  color: var(--text-secondary);
  font: 500 12.5px/20px var(--font-ui);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.sg-rail-note[hidden] {
  display: none;
}
.sg-rail-note:hover {
  text-decoration: underline;
}
.sg-rail-note:focus-visible {
  outline: 3px solid var(--line-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.sg-rail-note__spark {
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--gold-icon);
  -webkit-mask: var(--sg-i-sparkle) center / contain no-repeat;
  mask: var(--sg-i-sparkle) center / contain no-repeat;
}
.sg-rail-note__accent {
  color: var(--gold-text);
  font-weight: 600;
}

/* dropdown panels: More, the language pill, the theme menu */
.sg-more > .sg-menu,
.sg-lang > .sg-menu,
.sg-theme > .sg-menu {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 40;
  min-width: 240px;
  max-height: calc(100dvh - var(--sg-header-h, 64px) - 24px);
  overflow: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--bg-raised);
  border: 1px solid var(--line-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-e3);
}
.sg-more > .sg-menu {
  left: 0;
}
.sg-lang > .sg-menu,
.sg-theme > .sg-menu {
  right: 0;
}
.sg-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  font: 600 15px/1.25 var(--font-ui);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.sg-menu__link:hover {
  background: var(--bg-sunken);
}
.sg-menu__link::after {
  --sg-i: var(--sg-i-check);
  /* gold.text, not gold.icon: the check is the only visual cue of the current choice (WCAG 1.4.11, >= 3:1 on the menu
     in Linen 5.6, Parchment 6.4, Midnight 9.5; gold.icon is 2.7 in Linen) */
  color: var(--gold-text);
  visibility: hidden;
}
/* the current language and the stored theme carry a gold check (from the attributes: right before any script) */
.sg-menu__link[aria-current="page"]::after,
html[data-sg-theme="light"] [data-sg-theme-set="light"]::after,
html[data-sg-theme="sepia"] [data-sg-theme-set="sepia"]::after,
html[data-sg-theme="dark"] [data-sg-theme-set="dark"]::after {
  visibility: visible;
}
.sg-menu__soon {
  display: block;
  padding: 10px 12px;
  color: var(--text-muted);
  font: var(--type-body-md);
}
.sg-menu__group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-hair);
}
.sg-menu__heading {
  margin: 6px 12px 6px;
  color: var(--text-muted);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: var(--case-label);
}
.sg-menu__device {
  margin: 0 12px 6px;
  color: var(--text-secondary);
  font: var(--type-body-sm);
}
.sg-menu__help {
  max-width: 30ch;
  margin: 8px 12px 4px;
  color: var(--text-muted);
  font: var(--type-body-sm);
}

/* the right-hand cluster */
.sg-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.sg-lang,
.sg-theme {
  position: relative;
}
.sg-lang__btn,
.sg-theme__btn,
.sg-getapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--action-secondary-border);
  color: var(--text-primary);
  font: var(--type-button-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sg-lang__btn:hover,
.sg-theme__btn:hover,
.sg-getapp:hover,
.sg-lang[open] > .sg-lang__btn,
.sg-theme[open] > .sg-theme__btn,
.sg-getapp[aria-expanded="true"] {
  background: var(--bg-sunken);
}
.sg-lang__btn::before {
  --sg-i: var(--sg-i-globe);
}
.sg-lang__btn::after {
  --sg-i: var(--sg-i-chevron);
  width: 16px;
  height: 16px;
}
.sg-theme__btn {
  justify-content: center;
  width: 40px;
  padding: 0;
}
.sg-theme__btn::before {
  --sg-i: var(--sg-i-device);
}
html[data-sg-theme="light"] .sg-theme__btn::before {
  --sg-i: var(--sg-i-sun);
}
html[data-sg-theme="sepia"] .sg-theme__btn::before {
  --sg-i: var(--sg-i-page);
}
html[data-sg-theme="dark"] .sg-theme__btn::before {
  --sg-i: var(--sg-i-moon);
}
.sg-getapp::before {
  --sg-i: var(--sg-i-phone);
}

/* Sign in: a quiet ghost control, never a pill (§23 C8); signed in: the avatar initial and the name */
.sg-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font: var(--type-button-sm);
  text-decoration: none;
  white-space: nowrap;
}
.sg-account:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.sg-account[data-sg-account="account"] {
  padding: 0 12px 0 4px;
  color: var(--text-primary);
}
.sg-account[data-sg-account="account"]:hover {
  text-decoration: none;
  background: var(--bg-sunken);
}
.sg-account [data-sg-t] {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-account__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sky-tint);
  color: var(--sky-text);
  box-shadow: inset 0 0 0 1.5px var(--sky-edge);
  font: 700 15px/1 var(--font-ui);
}

/* ▶ Play / Continue: the header's only filled pill (site pages only; §23 C6, C8) */
.sg-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: var(--radius-pill);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  box-shadow: var(--action-primary-shadow);
  font: var(--type-button-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--motion-fast) var(--ease-out);
}
.sg-cta:hover {
  background: var(--action-primary-pressed);
}
.sg-cta:active {
  transform: scale(0.97);
}
.sg-cta::before {
  --sg-i: var(--sg-i-play);
  width: 14px;
  height: 14px;
}

/* the phone Menu: a <details> whose panel is a sheet under the header */
.sg-phonemenu__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--action-secondary-border);
  color: var(--text-primary);
  cursor: pointer;
}
.sg-phonemenu__btn > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sg-phonemenu__btn::before {
  --sg-i: var(--sg-i-menu);
  width: 22px;
  height: 22px;
}
.sg-phonemenu[open] > .sg-phonemenu__btn {
  background: var(--bg-sunken);
  box-shadow: none;
}
.sg-phonemenu[open] > .sg-phonemenu__btn::before {
  --sg-i: var(--sg-i-close);
}
.sg-phonemenu__close {
  display: none;
}
.sg-phonemenu > .sg-menu {
  position: fixed;
  inset: var(--sg-header-h, 56px) 0 0 0;
  z-index: 40;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 20px var(--gutter) 40px;
  list-style: none;
  background: var(--bg-canvas);
  border-top: 1px solid var(--line-hair);
}
html:has(.sg-phonemenu[open]) body {
  overflow: hidden;
}
.sg-phonemenu .sg-menu__group {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.sg-phonemenu .sg-menu__heading {
  margin: 0 4px 10px;
}
.sg-phonemenu .sg-menu__group:not([data-sg-id="lang"]):not([data-sg-id="theme"]) > ul {
  overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-e1);
}
.sg-phonemenu .sg-menu__group:not([data-sg-id="lang"]):not([data-sg-id="theme"]) li + li {
  border-top: 1px solid var(--line-hair);
}
.sg-phonemenu .sg-menu__group:not([data-sg-id="lang"]):not([data-sg-id="theme"]) .sg-menu__link {
  min-height: 56px;
  padding: 0 16px;
  border-radius: 0;
  font: var(--type-display-xs);
  letter-spacing: var(--tracking-display-xs);
}
.sg-phonemenu .sg-menu__group:not([data-sg-id="lang"]):not([data-sg-id="theme"]) .sg-menu__link::after {
  --sg-i: var(--sg-i-chevron-right);
  color: var(--text-muted);
  visibility: visible;
}
/* language and theme in Menu: a row of pills */
.sg-phonemenu .sg-menu__langs,
.sg-phonemenu .sg-menu__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sg-phonemenu .sg-menu__langs .sg-menu__link,
.sg-phonemenu .sg-menu__themes .sg-menu__link {
  width: auto;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--action-secondary-border);
}
.sg-phonemenu .sg-menu__langs .sg-menu__link::after,
.sg-phonemenu .sg-menu__themes .sg-menu__link::after {
  display: none;
}
.sg-phonemenu .sg-menu__langs .sg-menu__link[aria-current="page"],
html[data-sg-theme="light"] .sg-phonemenu [data-sg-theme-set="light"],
html[data-sg-theme="sepia"] .sg-phonemenu [data-sg-theme-set="sepia"],
html[data-sg-theme="dark"] .sg-phonemenu [data-sg-theme-set="dark"] {
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  box-shadow: none;
}
.sg-phonemenu .sg-menu__device {
  margin: 0 4px 10px;
}

/* Get the app: the QR popover (desktop ≥ 1280 with a fine pointer; no JS = the /get link) */
.sg-qr {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 280px;
  padding: 20px;
  text-align: center;
  background: var(--bg-raised);
  border: 1px solid var(--line-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-e3);
}
.sg-qr:focus {
  outline: none;
}
.sg-qr:focus-visible {
  outline: 3px solid var(--line-focus);
  outline-offset: 2px;
}
.sg-qr__title {
  margin: 0;
  color: var(--text-primary);
  font: var(--type-display-xs);
  letter-spacing: var(--tracking-display-xs);
}
.sg-qr__code {
  display: block;
  padding: 8px;
  line-height: 0;
  background: var(--qr-bg);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--line-hair);
}
.sg-qr__img {
  display: block;
}
.sg-qr__help {
  margin: 0;
  color: var(--text-secondary);
  font: var(--type-body-sm);
}
.sg-qr__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* the store links (footer and popover): the stores' official localized badges (web/lib/badges.ts), 40 px tall, never
   restyled; the gap is Apple's and Google's clear space (a quarter of the height) */
.sg-store {
  display: inline-flex;
  flex: none;
  line-height: 0;
  border-radius: 7px;
}
.sg-store img {
  display: block;
}

/* ── phone site pages: the lockup, the pill and Menu fit in one row down to 320 px (D6) ───────────────────── */

html[data-sg-ff="phone"] .sg-header .sg-lockup__art {
  width: 111px; /* 28 px tall */
  height: 28px;
}
@media (max-width: 739.98px) {
  html:not([data-sg-ff]) .sg-header .sg-lockup__art {
    width: 111px;
    height: 28px;
  }
}
html[data-sg-ff="phone"] .sg-lockup {
  margin-right: auto;
}
html[data-sg-ff="phone"] .sg-actions {
  margin-left: 0;
}
@media (max-width: 399.98px) {
  .sg-cta {
    padding: 0 14px 0 12px;
  }
}

/* ── footer ──────────────────────────────────────────────────────────────────────────────────────────────── */

.sg-footer {
  position: relative;
  margin-top: clamp(48px, 4vw + 32px, 96px);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font: var(--type-body-md);
  -webkit-font-smoothing: antialiased;
}
/* the seam: a gold thread from the left ending in a bead, a sky thread from the right starting with one, side by
   side in the middle like the logo's two ribbons */
.sg-footer__seam {
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: none;
}
.sg-footer__seam::before,
.sg-footer__seam::after {
  content: "";
  position: absolute;
  top: 0;
  width: 64%;
  height: 14px;
}
.sg-footer__seam::before {
  left: 0;
  background:
    radial-gradient(circle at calc(100% - 7px) 50%, var(--gold-fill) 0 5.5px, var(--gold-edge) 5.5px 7px, transparent 7.5px),
    linear-gradient(var(--gold-line), var(--gold-line)) 0 2px / calc(100% - 10px) 5px no-repeat;
}
.sg-footer__seam::after {
  right: 0;
  background:
    radial-gradient(circle at 7px 50%, var(--sky-fill) 0 5.5px, var(--sky-edge) 5.5px 7px, transparent 7.5px),
    linear-gradient(var(--sky-line), var(--sky-line)) 10px 7px / calc(100% - 10px) 5px no-repeat;
}
/* below the fold: no layout, paint or mask fetch until it comes near (the seam stays outside the containment) */
.sg-footer__in,
.sg-footer__base {
  content-visibility: auto;
}
.sg-footer__in {
  contain-intrinsic-size: auto 360px;
}
.sg-footer__base {
  contain-intrinsic-size: auto 80px;
}
.sg-footer__in {
  width: var(--sg-chrome-w);
  margin: 0 auto;
  padding: 56px 0 32px;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
}
.sg-footer .sg-lockup {
  margin: 0;
}
.sg-footer .sg-lockup__art {
  width: 77px; /* lockup-stacked.svg is 100.15 × 94 */
  height: 72px;
}
.sg-footer__line {
  max-width: 34ch;
  margin: 16px 0 4px;
  color: var(--text-primary);
  font: var(--type-display-xs);
  letter-spacing: var(--tracking-display-xs);
}
.sg-footer__free {
  margin: 0 0 16px;
  color: var(--text-secondary);
}
.sg-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sg-footer__heading {
  margin: 0 0 14px;
  color: var(--text-muted);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: var(--case-label);
}
.sg-footer__col ul,
.sg-footer__langs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-footer__col ul {
  display: grid;
  gap: 2px;
}
.sg-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  text-align: start;
  text-decoration: none;
  overflow-wrap: anywhere;
  hyphens: auto;
  cursor: pointer;
}
.sg-footer__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.sg-footer__base {
  width: var(--sg-chrome-w);
  margin: 0 auto;
  padding: 20px 0 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--line-hair);
  font: var(--type-body-sm);
}
.sg-footer__langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}
.sg-footer__langs::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--sg-i-globe) center / contain no-repeat;
  mask: var(--sg-i-globe) center / contain no-repeat;
}
.sg-footer__langs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--text-secondary);
  text-decoration: none;
}
.sg-footer__langs a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.sg-footer__langs a[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 700;
}
.sg-footer__legal {
  margin: 0;
  color: var(--text-muted);
}
@media (max-width: 1023.98px) {
  .sg-footer__in {
    grid-template-columns: repeat(3, 1fr);
  }
  .sg-footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 639.98px) {
  .sg-footer__in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
    padding-top: 44px;
  }
  /* Q-fix QF-m5: the phone footer is laid out like the page (no content-visibility). Its placeholder size never matched
     the two-column phone footer in every language, so an unrendered footer overlapped its own rows (axe target-size on
     de "Über uns", fr "À propos" and the store badge) */
  .sg-footer__in,
  .sg-footer__base {
    content-visibility: visible;
  }
}
@media (max-width: 359.98px) {
  .sg-footer__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── motion and focus ────────────────────────────────────────────────────────────────────────────────────── */

.sg-header a:focus-visible,
.sg-header summary:focus-visible,
.sg-header button:focus-visible,
.sg-footer a:focus-visible,
.sg-footer button:focus-visible {
  outline: 3px solid var(--line-focus);
  outline-offset: 2px;
}
@media (hover: none) {
  .sg-nav__link:hover,
  .sg-menu__link:hover {
    background: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sg-cta {
    transition: none;
  }
  .sg-cta:active {
    transform: none;
  }
}

/* B3's language suggestion bar never covers the open phone Menu */
html:has(.sg-phonemenu[open]) .lang-bar {
  display: none;
}

/* WF: the one-line legal strip under the game stage (§3.1, §5.1 sketch; packages/site/chrome.ts legalStripHtml), cloned
   from the edition fragment by shims/web/chrome/LegalStripSlot.tsx. Caption size, muted, centred, the links separated
   by a middle dot; it wraps on a narrow tablet column rather than overflow. */
.sg-legalstrip-slot {
  width: 100%;
}
.sg-legalstrip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 12px/20px var(--font-ui);
  color: var(--text-muted);
}
.sg-legalstrip__list > li {
  display: inline-flex;
  align-items: center;
}
.sg-legalstrip__list > li + li::before {
  content: "\00B7";
  margin-right: 6px;
  color: var(--text-muted);
}
.sg-legalstrip__link {
  display: inline-flex;
  align-items: center;
  /* a whole 24 px target (WCAG 2.5.8); the side padding is given back by the margin, so the line is laid out as before */
  min-height: 24px;
  padding: 0 6px;
  margin: 0 -6px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sg-legalstrip__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
/* inset: the strip's row clips (it never grows the stage) and sits on the window's bottom edge, so an outset ring would
   be cut off above and below (on the stage, BoardStage's focus rule keeps the skin's colour and sets the same inset) */
.sg-legalstrip__link:focus-visible {
  outline: 3px solid var(--line-focus);
  outline-offset: -3px;
  border-radius: 6px;
}