/* /hub.css */
/* Hub + how-to layout. Paper, chrome, footer: shared/site.css (tokens included). */

/* @import /shared/site.css */
/* Shared paper, chrome, forms, auth, footer.
   Tokens live in ./tokens.css so Pages can ship without the design-system junction. */

/* @import /fonts/fonts.css */
/* Self-hosted Google Fonts (SEO/perf 2026-11-03): Inter, IBM Plex Mono, JetBrains Mono, Sora.
   latin + latin-ext subsets only (the six site languages). font-display: swap. OFL licensed. */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-4af8cef5.woff2?v=4af8cef5) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-bb87500e.woff2?v=bb87500e) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-3e942f42.woff2?v=3e942f42) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-d32f0e07.woff2?v=d32f0e07) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-e57611a8.woff2?v=e57611a8) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ce9a5ca3.woff2?v=ce9a5ca3) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-15aaeeab.woff2?v=15aaeeab) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-223677cf.woff2?v=223677cf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-5ad15d91.woff2?v=5ad15d91) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/sora-latin-779e9507.woff2?v=779e9507) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-5ad15d91.woff2?v=5ad15d91) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/sora-latin-779e9507.woff2?v=779e9507) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-5ad15d91.woff2?v=5ad15d91) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/sora-latin-779e9507.woff2?v=779e9507) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* @import /shared/tokens.css */
/* DIGIGMA tokens — wabi-sabi numérique.
   Home / reading / profile stay washi (paper, light).
   Play remaps these on html.is-play only (sumi / concentration). */

:root {
  color-scheme: light;

  --paper: #FCE9B8;
  --paper-bright: #FFF9E8;
  --paper-wash: #F4D4A0;
  --paper-shade: #F8EACC;

  --ink: #2B2419;
  --ink-strong: #201A12;
  --ink-button: #FFF9E8;
  --muted: #6A5638;
  --note: #856B42;

  --line: #DDBB72;
  --line-strong: #D28F08;
  --grid-thin: #DDBB72;
  --mark-stroke: #DDBB72;
  --gris: #F4D4A0;

  --header-bg: #FFF6E4;
  --header-line: #E4C98A;
  --header-ink: #2B2419;
  --header-theme: #FFF6E4;
  --motif-digits-size: 900px 640px;
  --motif-digits-size-compact: 1100px 780px;
  --game-sudoku: #3547B3;
  --game-killer: #D45E3D;
  --game-binary: #2E8B7A;
  --game-futoshiki: #C88708;
  --game-kakuro: #6B5B95;
  --game-codebreaker: #E07A5F;
  /* Extended catalogue (home/games cards); keep hex identical to catalog-palette.css. */
  --game-suguru: #B64E80;
  --game-shikaku: #247DA8;
  --game-yakazu: #536CB8;
  --game-calcudoku: #AA6830;
  --game-skyscrapers: #3D8EA2;
  --game-crossmath: #9C4961;
  --game-hitori: #6C7840;
  --game-nurikabe: #36876B;
  --game-numberlink: #9860B1;
  --game-kuromasu: #83703D;
  --accent: #3547B3;
  --accent-soft: color-mix(in srgb, #3547B3 16%, var(--paper));
  --accent-hover: #2A3896;
  --gold: var(--accent);
  --gold-fill: var(--ink);
  --gold-border: var(--ink);
  --gold-hover: var(--ink-strong);
  --gold-soft: var(--paper-wash);
  --gold-wash: var(--paper-wash);
  --gold-active: var(--paper-wash);
  --gold-hint: var(--paper-shade);
  --gold-hint-ring: #3547B3;

  --entry: #2438C9;
  --same: #E4E6D4;
  --ok: #7F9252;
  --matcha: #7F9252;
  --hint-witness: #E4EBE3;

  --bad: #D45E3D;
  --vermillion: #D45E3D;

  --cell: var(--paper-bright);
  --cta: #946526;
  --cta-hover: #7E541F;
  --cta-ink: #FFF9E8;
  --btn: transparent;
  --btn-hover: var(--paper-wash);
  --btn-hover-line: #3547B3;
  --debug-bg: #F3EEE4;
  --debug-ink: #5C564C;
  --debug-label: #8A7A62;
  --shadow: none;
  --shadow-indigo: none;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-board: 0;
  --font-display: "Sora", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Sora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: "JetBrains Mono", "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-digits: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --weight-given: 800;
  --weight-entry: 500;

  --mobile-content-width: 95%;
  --mobile-gutter: 2.5%;

  --washi: url("/brand/washi.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");
  --ink-stroke: url("/brand/ink-stroke.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");

  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --given: #140F0A;
  --grid-strong: var(--line-strong);
  --box: var(--line-strong);
  --sel: var(--accent);
  --sel-bg: var(--accent-soft);
  --hi: var(--paper-wash);
  --hint-place: var(--gold-hint);
  --hint-unit: var(--paper-shade);
  --font: var(--font-sans);
  --motion: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0ms;
  }
}



* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .hero-title, .top h1 {
  font-family: var(--font-display);
}

body {
  background-image:
    var(--washi),
    radial-gradient(1100px 520px at 8% -12%, var(--paper-bright) 0%, transparent 58%);
  background-size: 180px 180px, auto;
  overflow-x: hidden;
}

.page,
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 22px 28px 48px;
}

/* Header/footer chrome: shared/site-chrome.css */

/* —— Buttons & fields —— */
.btn,
button.primary,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--paper-shade, #FFF6DF);
  color: var(--ink-strong, #2B2419);
  text-decoration: none;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.btn:hover { border-color: var(--cta, #C88708); background: color-mix(in srgb, var(--cta, #C88708) 18%, var(--paper-shade, #FFF6DF)); }

.btn.primary,
button.primary {
  background: var(--cta, #946526);
  color: var(--cta-ink, #FFF9E8);
  border-color: var(--cta, #946526);
  font-weight: 500;
}

.btn.primary:hover,
button.primary:hover { background: var(--cta-hover, #7E541F); border-color: var(--cta-hover, #7E541F); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: 8px 12px;
}

textarea { min-height: 8rem; resize: vertical; }

.name-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  margin: 0 0 20px;
  max-width: 22rem;
}

@media (max-width: 760px) {
  .name-form {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

.name-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.name-form input,
.name-form textarea,
.name-form select { width: 100%; min-width: 0; }

.name-form input:focus-visible,
.name-form textarea:focus-visible,
.name-form select:focus-visible {
  border-color: var(--cta, #C88708);
}

.name-form .btn,
.name-form button { width: 100%; }

.name-form .field-error {
  display: block;
  margin: 4px 0 0;
  color: var(--danger, #b42318);
  font-size: 0.8rem;
  font-weight: 500;
}

.name-form .field-error[hidden] { display: none; }

.name-form .password-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.name-form .password-row input { flex: 1; }

.name-form .pw-toggle {
  width: auto;
  min-height: 44px;
  min-width: 4.5rem;
  padding: 8px 10px;
}

.name-form .field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  line-height: 1.4;
}

/* —— Home hero + cards —— */
.hero {
  margin: 8px 0 36px;
  padding: 8px 0 4px;
}

.hero-kicker {
  margin: 0 0 10px;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
}

.hero-title {
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.hero-lead {
  margin: 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.5;
}

.games > .card {
  transition: none;
}

.games > .card:hover {
  transform: none;
  box-shadow: none;
}

.continue-link {
  border-radius: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}

.home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 32px 0 8px;
}

.home-panel,
.board-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.home-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.home-panel-head h2 {
  margin: 0;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}

.times-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.times-table thead,
.times-table tbody,
.times-table tr {
  width: 100%;
}

.times-table tbody tr {
  border-bottom: 1px solid var(--line);
}

.times-table th,
.times-table td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
  border: 0;
  box-sizing: border-box;
}

.times-table thead th {
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
}

.times-table th:first-child,
.times-table td:first-child {
  width: 2.4rem;
  color: var(--gold);
  font-weight: 600;
}

.times-table th:last-child,
.times-table td:last-child {
  width: 7.2rem;
  text-align: right;
  white-space: nowrap;
}

.times-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.times-name .lb-star {
  margin-left: 0.2em;
}

@media (max-width: 430px) {
  .times-table th:last-child,
  .times-table td:last-child {
    width: 5.6rem;
    white-space: normal;
    line-height: 1.2;
  }
}

.times-table tbody tr:last-child {
  border-bottom: 0;
}

.times-rank {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.times-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.times-game {
  color: var(--muted);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.times-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
}

.board-head { margin: 0 0 16px; }
.board-head h1 { font-size: 1.7rem; letter-spacing: 0.02em; }
.board-note,
.home-panel .lede {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.45;
}

.board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0 0 16px;
}

.board-filters label,
.board-filters .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.board-filters select { min-width: 10rem; }

.times-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.times-empty {
  margin: 0;
  padding: 18px 4px 8px;
  color: var(--muted);
  text-align: center;
}

td.times-empty {
  text-align: center;
}

.read-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.read-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.read-list a:hover { color: var(--gold); }
.read-list li:last-child a { border-bottom: 0; }

@media (max-width: 760px) {
  .home-split {
    grid-template-columns: 1fr;
  }
}

/* —— Auth —— */
.auth-shell {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 12px 0 36px;
}

.auth-card {
  width: min(26rem, 100%);
  padding: 8px 0 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.auth-card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gold);
}

.auth-card h1 {
  margin: 0 0 8px;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
}

.auth-lead {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.45;
}

.auth-card .name-form { max-width: none; margin-bottom: 4px; }

.auth-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 16px 0 14px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-or::before,
.auth-or::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.auth-or[hidden] { display: none; }

.auth-ok {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cta, #C88708) 12%, var(--paper-bright));
  color: var(--ink);
  line-height: 1.45;
}

.auth-ok[hidden] { display: none; }

.auth-links,
.auth-alt {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
}

.auth-alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
}

.auth-links a,
.auth-alt a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}

.auth-links a:hover,
.auth-alt a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.auth-alt-dot {
  color: var(--line);
}

button.auth-google,
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  min-width: 44px;
  margin: 4px 0 18px;
  padding: 10px 16px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
}

button.auth-google:hover,
.auth-google:hover { background: var(--btn-hover); }

.auth-google-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}

button.auth-google:focus-visible,
.auth-google:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button.auth-google:disabled,
.auth-google:disabled,
.auth-google[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--paper);
}

button.auth-google[hidden],
.auth-google[hidden] {
  display: none;
}

html[data-ds-theme="dark"] input:-webkit-autofill,
html[data-ds-theme="dark"] input:-webkit-autofill:hover,
html[data-ds-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--paper-bright) inset;
  caret-color: var(--ink);
  transition: background-color 99999s ease-out;
}

.auth-google-hint {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.err { color: var(--bad); }

/* —— Start gate —— */
.start-card {
  box-shadow: none;
  position: relative;
}

.start-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gold);
}

.start-card h2 {
  letter-spacing: 0.04em;
}

.start-card .primary {
  width: auto;
  margin-top: 8px;
  min-height: 36px;
  padding: 0;
  background: transparent;
  color: var(--accent);
  border: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.start-gate.is-dismissed { display: none !important; }

button.is-busy,
.btn.is-busy {
  opacity: 0.72;
  cursor: wait;
  pointer-events: none;
}

@media (max-width: 760px) {
  .page {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 0 36px;
  }

  .hero-title { font-size: clamp(2rem, 10vw, 2.6rem); }

  .auth-card {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    padding: 8px 0 18px;
  }
}

@media (max-width: 390px) {
  .auth-shell { padding: 8px 0 28px; }
}

.legal-id {
  margin: 0 0 16px;
  line-height: 1.55;
}

.publisher-card {
  margin: 12px 0 20px;
  padding: 12px;
  max-width: 28rem;
  background: #FBF6EA;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.publisher-card figcaption {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.publisher-card img {
  display: block;
  width: 100%;
  height: auto;
}

.publisher-name {
  display: inline-block;
  height: 1.4em;
  width: auto;
  max-width: 12rem;
  vertical-align: middle;
  margin-left: 8px;
  background: #FBF6EA;
  border-radius: 2px;
}

/* Shared private challenge composer: account, completion and replay surfaces. */
form.challenge-create.challenge-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  text-align: start;
}
form.challenge-create.challenge-compact > p,
form.challenge-create.challenge-compact > h3 { margin: 0; }
form.challenge-create.challenge-compact > p:empty { display: none; }
form.challenge-create.challenge-compact .challenge-field { display: grid; gap: 4px; min-width: 0; margin: 0; }
form.challenge-create.challenge-compact select,
form.challenge-create.challenge-compact button[type="submit"] {
  box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; margin: 0;
}
form.challenge-create.challenge-compact .challenge-stake-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
form.challenge-create.challenge-compact .challenge-stake-choice { min-width: 0; min-height: 44px; margin: 0; padding: 2px; justify-content: center; }
form.challenge-create.challenge-compact > a { overflow-wrap: anywhere; }

/* Challenge eligibility action reuses the shared button template, including visited links. */
form.challenge-create.challenge-compact .challenge-contacts-action {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 16px;
  border: 1px solid #b88738; border-radius: 12px;
  background: #efd49a; color: #493018; text-decoration: none;
  font-weight: 700; text-align: center;
}
form.challenge-create.challenge-compact .challenge-contacts-action:hover { background: #f8e6bd; }
form.challenge-create.challenge-compact .challenge-contacts-action:focus-visible {
  outline: 2px solid #b88738; outline-offset: 3px;
}
form.challenge-create.challenge-compact [hidden] { display: none; }

/* Listing-card challenge dialog (home, library, community). */
.puzzle-challenge-dialog {
  border: 0;
  padding: 0;
  margin: auto;
  max-width: min(calc(100vw - 24px), 28rem);
  width: 100%;
  background: transparent;
  color: var(--ink, #302318);
}
.puzzle-challenge-dialog::backdrop {
  background: rgba(18, 14, 8, 0.52);
}
.puzzle-challenge-dialog-card {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 640px);
  border-radius: 12px;
  background: var(--paper-bright, #fbf6ea);
  color: var(--ink, #302318);
  border: 1px solid var(--line, #e8dcc0);
  box-shadow: 0 18px 48px rgba(18, 14, 8, 0.22);
  overflow: hidden;
}
.puzzle-challenge-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 8px 16px;
  border-bottom: 1px solid var(--line, #e8dcc0);
}
.puzzle-challenge-dialog-header h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 650;
}
.puzzle-challenge-dialog-dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.puzzle-challenge-dialog-dismiss:hover { background: rgba(18, 14, 8, 0.06); }
.puzzle-challenge-dialog-dismiss:focus-visible {
  outline: 2px solid #b88738;
  outline-offset: 2px;
}
.puzzle-challenge-dialog-body {
  padding: 12px 16px 16px;
  overflow: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}
.puzzle-challenge-dialog-body form.challenge-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  text-align: start;
}
.puzzle-challenge-dialog-body form.challenge-create > p,
.puzzle-challenge-dialog-body form.challenge-create > h3 { margin: 0; }
.puzzle-challenge-dialog-body form.challenge-create > p:empty { display: none; }
.puzzle-challenge-dialog-body form.challenge-create .challenge-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.puzzle-challenge-dialog-body form.challenge-create select,
.puzzle-challenge-dialog-body form.challenge-create button[type="submit"] {
  min-height: 44px;
  max-width: 100%;
}
.puzzle-challenge-dialog-body form.challenge-create .challenge-stake-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
.puzzle-challenge-dialog-body form.challenge-create .challenge-stake-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 2px;
  justify-content: center;
  border: 1px solid var(--line, #e8dcc0);
  border-radius: 10px;
  cursor: pointer;
}
.puzzle-challenge-dialog-body .challenge-stake-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.puzzle-challenge-dialog-body .challenge-stake-choice:has(input:checked) {
  border-color: var(--cta, #946526);
  box-shadow: inset 0 0 0 1px var(--cta, #946526);
}
.puzzle-challenge-dialog-body .challenge-stake-choice:focus-within {
  outline: 2px solid var(--cta, #946526);
  outline-offset: 2px;
}
.puzzle-challenge-dialog-body form.challenge-create > a { overflow-wrap: anywhere; }
.puzzle-challenge-dialog-body form.challenge-create .challenge-contacts-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f3e3bc;
  text-decoration: none;
  font-weight: 600;
}
.puzzle-challenge-dialog-body form.challenge-create .challenge-contacts-action:hover { background: #f8e6bd; }
.puzzle-challenge-dialog-body form.challenge-create .challenge-contacts-action:focus-visible {
  outline: 2px solid #b88738;
  outline-offset: 3px;
}
.puzzle-challenge-dialog-body form.challenge-create [hidden] { display: none; }
@media (max-width: 420px) {
  .puzzle-challenge-dialog-card { max-height: 92vh; border-radius: 10px; }
  .puzzle-challenge-dialog-body { padding: 10px 12px 14px; }
}



/* @import /shared/product.css */
/* DIGIGMA product surfaces — editorial paper, not a SaaS dashboard.
   Composition: type, hairlines, columns, open blocks. Cards only when needed. */


/* @import /shared/ranking-ui.css */
/**
 * Shared ranking presentation tokens + typography.
 * Imported by site rankings and product/play leaderboard surfaces.
 * Layout geometry for each surface stays in rankings.css / product.css.
 */

:root {
  --rank-pos-width: 3rem;
  --rank-row-gap: 12px;
  --rank-row-pad-y: 10px;
  --rank-row-pad-x: 12px;
  --rank-tabular: tabular-nums;
  --rank-empty-color: var(--muted, #6a5638);
  --rank-row-bg: var(--paper-bright, #fffaf0);
  --rank-row-line: var(--line, #ddbb72);
  --rank-row-radius: 16px;
}

.rank-pos,
.rank-score,
.lb-rank,
.lb-board .times-table th:last-child,
.lb-board .times-table td:last-child {
  font-variant-numeric: var(--rank-tabular);
}

.rank-empty,
.lb-empty {
  color: var(--rank-empty-color);
}

/* Site boards share these warm medal, portrait and identity tokens. */
:root {
  --rank-gold: #f6d47c;
  --rank-silver: #c9d9ed;
  --rank-bronze: #efb990;
  --rank-accent: #6942a4;
  --rank-avatar-size: 40px;
}
.rank-list [data-medal] {
  --rank-medal: var(--rank-gold);
  background: color-mix(in srgb, var(--rank-medal) 30%, var(--rank-row-bg));
  border-color: color-mix(in srgb, var(--rank-medal) 70%, var(--rank-row-line));
  min-height: 76px;
}
.rank-list [data-medal="silver"] { --rank-medal: var(--rank-silver); }
.rank-list [data-medal="bronze"] { --rank-medal: var(--rank-bronze); }
.rank-list .rank-pos {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-weight: 800;
}
.rank-list [data-medal] .rank-pos {
  border-radius: 50%;
  background: var(--rank-medal);
  color: #3e3024;
  box-shadow: 0 2px 0 #00000012;
}
.rank-player { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; font-weight: 700; text-decoration: none; }
.rank-player:hover .rank-nickname { text-decoration: underline; }
.rank-nickname { overflow-wrap: anywhere; min-width: 0; }
.rank-avatar { position: relative; display: grid; place-items: center; flex: 0 0 var(--rank-avatar-size); width: var(--rank-avatar-size); height: var(--rank-avatar-size); border-radius: 50%; background: #eadcf8; color: #513474; overflow: hidden; font-size: .85rem; }
.rank-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rank-score { font-weight: 800; white-space: nowrap; }
.rank-tabs a, .rank-game button, .rank-pager a { font: inherit; font-weight: 700; }
.rank-tabs a[aria-current="page"] { background: var(--rank-accent); color: #fff; border-color: var(--rank-accent); }
.rank-page [hidden] { display: none !important; }
.rank-page :is(a, button, select):focus-visible { outline: 3px solid var(--rank-accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .rank-page { --rank-pos-width: 32px; --rank-row-gap: 8px; --rank-row-pad-x: 10px; --rank-avatar-size: 32px; }
  .rank-player { gap: 8px; }
  .rank-score { font-size: .9rem; }
}



:root {
  --ok-wash: var(--same);
  --ok-ink: #3D4E2E;
  --lock-wash: var(--paper-wash);
  --motif-grid:
    linear-gradient(var(--mark-stroke) 1px, transparent 1px),
    linear-gradient(90deg, var(--mark-stroke) 1px, transparent 1px);
  --font-ui: var(--font-sans);
  --page-gutter: 28px;
}

html { color-scheme: light; }

html:not(.is-play) body {
  background-color: var(--paper);
  background-image:
    var(--washi),
    radial-gradient(900px 420px at 8% -10%, var(--paper-bright) 0%, transparent 58%);
  background-size: 180px 180px, auto;
}

.section-kicker,
.badge,
.pill-status,
.seg button,
.stat-card span,
.lib-toolbar .field > span,
.price-meta,
.hero-kicker,
.trio-index,
.trio-count,
.times-rank,
.times-time,
.price,
.clock,
.clock #timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, .hero-title, .page-title, .top h1, .site-header h1 {
  font-family: var(--font-display);
}

/* —— Buttons: ink, not indigo pills —— */

.btn,
button.primary,
button.btn {
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  background: var(--paper-shade, #FFF6DF);
  border: 1px solid var(--line-strong);
  color: var(--ink-strong, #2B2419);
}

.btn:hover,
button.btn:hover {
  background: color-mix(in srgb, var(--cta, #C88708) 18%, var(--paper-shade, #FFF6DF));
  border-color: var(--cta, #C88708);
  transform: none;
  box-shadow: none;
}

.btn.primary,
button.primary {
  background: var(--cta, #946526);
  color: var(--cta-ink, #FFF9E8);
  border-color: var(--cta, #946526);
  font-weight: 500;
  box-shadow: none;
}

.btn.primary:hover,
button.primary:hover {
  background: var(--cta-hover, #7E541F);
  border-color: var(--cta-hover, #7E541F);
  transform: none;
  box-shadow: none;
}

.btn.lg {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 0.95rem;
}

.text-cta,
.trio-card .trio-foot .btn,
.continue-card .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.text-cta::after,
.trio-card .trio-foot .btn::after,
.continue-card .btn::after {
  content: "→";
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.text-cta:hover,
.trio-card .trio-foot .btn:hover,
.continue-card .btn:hover {
  color: var(--ink);
  background: none;
  border: 0;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
}

.text-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* —— Full-bleed bands stay paper —— */

.band {
  width: auto;
  margin-left: calc(-1 * var(--page-gutter));
  margin-right: calc(-1 * var(--page-gutter));
  padding: 40px var(--page-gutter);
  position: relative;
  max-width: none;
}

.band-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.band-tight { padding-top: 20px; padding-bottom: 20px; }
.band-room { padding-top: 56px; padding-bottom: 48px; }
.band-cream,
.band-paper,
.band-wash,
.band-gold { background: transparent; box-shadow: none; }

.band-gold::before,
.band-ink::before,
.hero-motif { display: none; }

.band-ink {
  background: var(--ink);
  color: var(--paper);
}

.band-stage {
  min-height: 0;
  display: block;
}

/* —— Type —— */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 28px;
}

.section-head h2,
.trio-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.section-kicker {
  margin: 0 0 10px;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.lede-tight {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 38rem;
  font-size: 1.02rem;
  line-height: 1.55;
}

.page-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* —— Open surfaces (no card chrome) —— */

.surface,
.card-rich,
.home-panel,
.stat-card,
.progress-next,
.lib-item,
.achv-card,
.podium-card,
.dash-profile,
.offer-card,
.games > .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.card-rich:hover,
.games > .card:hover,
.lib-item:hover,
.trio-card:hover {
  transform: none;
  box-shadow: none;
}

.card-rich.is-locked,
.lib-item.is-locked { background: transparent; }
.card-rich.is-solved,
.lib-item.is-solved { background: transparent; }

/* —— Mini boards: ink geometry —— */

.mini-board,
.glyph {
  flex: 0 0 auto;
  position: relative;
}

.mini-board {
  width: 56px;
  height: 56px;
  border-radius: 0;
  border: 1px solid var(--ink);
  background-color: var(--paper-bright);
  box-shadow: none;
  overflow: hidden;
}

.mini-board.sudoku,
.glyph.sudoku {
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 33.33%, 33.33% 100%, 100% 11.11%, 11.11% 100%;
  background-color: var(--paper-bright);
}

.mini-board.killer,
.glyph.killer {
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 33.33%, 33.33% 100%, 100% 11.11%, 11.11% 100%;
  background-color: var(--paper-bright);
}

.mini-board.killer::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 8%;
  width: 36%;
  height: 36%;
  border: 1px dashed var(--accent);
  border-radius: 0;
  pointer-events: none;
}

.mini-board.futoshiki,
.glyph.futoshiki {
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 100% 25%, 25% 100%;
  background-color: var(--paper-bright);
}
.mini-board.futoshiki::before,
.mini-board.futoshiki::after {
  content: "<";
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  pointer-events: none;
}
.mini-board.futoshiki::before { top: 18%; left: 22%; }
.mini-board.futoshiki::after { content: ">"; top: 62%; left: 54%; }

.mini-board.binary,
.glyph.binary {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size:
    10% 10%, 10% 10%, 10% 10%, 10% 10%,
    100% 16.66%, 16.66% 100%;
  background-position:
    22% 22%, 72% 22%, 22% 72%, 72% 72%,
    0 0, 0 0;
  background-repeat: no-repeat;
  background-color: var(--paper-bright);
}

/* —— Labels —— */

.badge,
.pill-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.badge-gold,
.badge-ok,
.badge-lock,
.badge-muted,
.badge-ink {
  background: transparent;
  border: 0;
}

.badge-ok { color: var(--ok-ink); }
.badge-lock,
.badge-muted { color: var(--muted); }
.badge-ink { color: var(--ink); letter-spacing: 0.18em; }

.progress {
  height: 1px;
  border-radius: 0;
  background: var(--line);
  overflow: hidden;
}

.progress > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 0;
}

.empty-state {
  padding: 8px 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.empty-state p {
  margin: 0 0 12px;
  color: var(--muted);
}

#homeTimes.is-empty .times-table thead { display: none; }

/* —— Stats: tabular bar, not four cards —— */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat-card {
  padding: 18px 16px 16px 0;
  min-height: 0;
  position: relative;
  overflow: visible;
}

.stat-card + .stat-card { padding-left: 18px; }
.stat-card + .stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 16px;
  width: 1px;
  background: var(--line);
}

.stat-card .stat-ico { display: none; }

.stat-card strong {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 500;
}

.stat-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.progress-next {
  display: grid;
  gap: 8px;
  padding: 20px 0 0;
  margin-top: 8px;
}

.progress-next strong { display: block; font-family: var(--font-display); }

/* —— Founding: editorial letter —— */

.offer-ink,
.offer-letter {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px 48px;
  align-items: end;
  padding: 8px 0 4px;
  background: transparent;
  color: inherit;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
}

.offer-ink::after,
.offer-letter::after { content: none; }

.offer-ink .badge-gold,
.offer-letter .badge-gold {
  background: transparent;
  color: var(--accent);
}

.offer-ink .price,
.offer-letter .price {
  margin: 10px 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-weight: 500;
}

.offer-ink .price small,
.offer-letter .price small {
  display: inline;
  margin-left: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.offer-ink .price-meta,
.offer-letter .price-meta {
  display: block;
  margin: 0 0 12px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.offer-ink .lede-tight,
.offer-ink p,
.offer-letter .lede-tight,
.offer-letter p { color: var(--muted); }

.offer-benefits {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.offer-benefits li {
  margin: 0;
  padding-left: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.offer-benefits li::before { content: none; }

.offer-side {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.slot-meter { width: min(100%, 220px); }
.slot-meter .progress { background: var(--line); height: 1px; }

.offer-card {
  display: grid;
  gap: 16px;
  padding: 0;
}

.offer-card .price {
  font-family: var(--font-mono);
  font-size: 2rem;
}

/* —— Daily Trio: three editorial columns —— */

.daily-trio.band { padding-top: 48px; padding-bottom: 52px; }

.trio-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 28px;
}

.trio-ritual {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.ritual-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
}

.ritual-dot[data-status="started"] {
  background: var(--accent);
  border-color: var(--accent);
}

.ritual-dot[data-status="completed"] {
  background: var(--matcha);
  border-color: var(--matcha);
}

.trio-sub { margin: 0; color: var(--muted); }
.trio-count {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.trio-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  min-height: 0;
  padding: 8px 28px 4px 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.trio-card + .trio-card {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.trio-card .trio-index {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.trio-card .trio-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.trio-card h3 {
  margin: 6px 0 4px;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.trio-card .trio-foot {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.trio-status { margin: 0; color: var(--muted); font-size: 0.92rem; }
.trio-card[data-status="completed"] .trio-status { color: var(--ok-ink); }
.trio-card[data-locked="true"] { opacity: 0.62; }

.check-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: transparent;
  background: transparent;
}

.trio-card[data-status="completed"] .check-dot,
.lib-item.is-solved .check-dot {
  background: var(--matcha);
  border-color: var(--matcha);
  color: #fff;
}

.check-dot::after {
  content: "✓";
  font-size: 0.7rem;
  font-family: var(--font-ui);
}

/* —— Library —— */

.lib-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin: 0 0 20px;
  align-items: end;
}

.lib-toolbar .field { display: grid; gap: 6px; }

.lib-toolbar .field > span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 36px;
  padding: 6px 12px 8px;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seg button.is-on,
.seg button[aria-pressed="true"] {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}

.lib-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.lib-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: center;
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
}

.lib-item .mini-board { width: 44px; height: 44px; }
.lib-item h3 { margin: 0; font-size: 1.08rem; }
.lib-item p { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; }
.lib-cta { display: grid; justify-items: end; gap: 8px; }

/* —— Account —— */

.dash-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px 22px;
  align-items: center;
  padding: 8px 0 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.dash-profile.is-founding {
  background: transparent;
  color: inherit;
}

.identity-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  font-family: var(--font-display);
  box-shadow: none;
}

.dash-profile h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); }

.dash-profile .who-mail {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.achv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 16px;
}

.achv-card {
  padding: 0;
  min-height: 0;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.achv-seal {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--paper-bright);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: var(--font-mono);
  box-shadow: none;
}

.achv-seal-svg {
  width: 28px;
  height: 28px;
  display: block;
}

.achv-seal-mark {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

.achv-card.is-locked { opacity: 0.55; }
.achv-card.is-locked .achv-seal {
  border-color: var(--line);
  color: var(--muted);
  background: transparent;
}

.achv-card.is-earned .achv-seal {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.achv-card h3 { margin: 0; font-size: 0.92rem; }
.achv-card p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.achv-card .progress { width: 100%; }

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.history-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.history-list .mini-board { width: 36px; height: 36px; }
.history-list strong { display: block; }
.history-list .meta { margin: 3px 0 0; color: var(--muted); font-size: 0.86rem; }

.settings-panel {
  margin-top: 36px;
  padding: 18px 0 16px;
  background: transparent;
  opacity: 1;
}

.settings-panel h2 { margin: 0 0 8px; font-size: 1.05rem; }

/* —— Leaderboard —— */

.podium-card .rank,
.medal {
  width: auto;
  height: auto;
  margin: 0 0 8px;
  border-radius: 0;
  display: block;
  background: transparent;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
}

.lb-board {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  margin-top: 1.75rem;
}

.lb-board-card {
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper-bright, #FFF9E8) 92%, var(--premium, #62417A) 8%);
  border: 1px solid color-mix(in srgb, var(--premium, #62417A) 26%, var(--line, #DDBB72));
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 8px 22px rgba(45, 36, 27, 0.08));
}

.lb-board-card h2 {
  margin: 0;
  padding: 16px 18px 10px;
  font-family: var(--font-display, inherit);
  font-size: 1.2rem;
  font-weight: 650;
  color: var(--ink, #2B2419);
}

.lb-board-card .lb-empty {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted, #6A5638);
}

.lb-board-card .times-table-wrap {
  margin: 0;
  max-width: none;
  border: 0;
  background: transparent;
}

.lb-board-card .times-table thead th {
  padding: 10px 16px;
  background: color-mix(in srgb, var(--paper-wash, #F6E7C4) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line, #DDBB72) 70%, transparent);
}

.lb-board-card #lbShowAll {
  margin: 10px 16px 14px;
}

.times-table-wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: clip;
}

body.ds-shell .lb-board .times-table,
.lb-board .times-table {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  table-layout: fixed;
}

.lb-board .times-table th,
.lb-board .times-table td {
  border: 0;
  background: transparent;
}

.lb-board .times-table th,
.lb-board .times-table td {
  padding: 10px 12px;
}

.lb-board .times-table th:first-child,
.lb-board .times-table td:first-child {
  width: 5rem;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 12px;
}

.lb-board .times-table th:last-child,
.lb-board .times-table td:last-child {
  width: 7.75rem;
  min-width: 7.75rem;
  box-sizing: border-box;
  text-align: right;
  white-space: nowrap;
  padding-right: 20px;
  font-variant-numeric: tabular-nums;
}

.lb-board.is-guesses .times-table th:last-child,
.lb-board.is-guesses .times-table td:last-child,
.lb-board .times-table-wrap.is-guesses .times-table th:last-child,
.lb-board .times-table-wrap.is-guesses .times-table td:last-child {
  width: 10.5rem;
  min-width: 10.5rem;
  white-space: normal;
}

.lb-score-pair {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  column-gap: 0.25em;
  row-gap: 0;
  text-align: right;
}

.lb-attempts {
  font-family: var(--font-sans, inherit);
  font-variant-numeric: tabular-nums;
}

.lb-duration {
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #6A5638);
}

.lb-board .times-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--line, #DDBB72) 55%, transparent);
}

.lb-board .times-table tbody tr:last-child {
  border-bottom: 0;
}

.lb-board .times-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--paper-wash, #F6E7C4) 28%, transparent);
}

.lb-board .times-table tbody tr:hover {
  background: color-mix(in srgb, var(--premium, #62417A) 7%, var(--paper-bright, #FFF9E8));
}

.lb-board .times-table tr[data-medal="gold"] {
  background: color-mix(in srgb, #E8C547 10%, transparent);
}

.lb-board .times-table tr[data-medal="silver"] {
  background: color-mix(in srgb, #8A93A0 7%, transparent);
}

.lb-board .times-table tr[data-medal="bronze"] {
  background: color-mix(in srgb, #B8723A 8%, transparent);
}

.lb-board .times-table tr[data-medal] .lb-rank {
  color: var(--ink);
  font-size: 0.95rem;
}

.lb-board .lb-rank {
  font-weight: 650;
  color: var(--muted, #6A5638);
}

.lb-board .times-table tr[data-medal="gold"] .lb-rank { color: #8A6A10; }
.lb-board .times-table tr[data-medal="silver"] .lb-rank { color: #5C6570; }
.lb-board .times-table tr[data-medal="bronze"] .lb-rank { color: #8A4E22; }

.lb-country {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.lb-country .player-flag {
  width: 18px;
  height: 13px;
  display: inline-flex;
}

.lb-country .player-flag svg {
  width: 18px;
  height: 13px;
  display: block;
  border-radius: 2px;
}

.lb-country-code {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted, #6A5638);
}

.lb-board .lb-identity {
  min-width: 0;
  flex: 0 1 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.25em;
  max-width: 100%;
}

.lb-board .lb-premium-star {
  flex: 0 0 auto;
  display: inline;
  color: var(--premium, #62417A);
  font-size: 0.78rem;
  line-height: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.lb-board .lb-premium-star .lb-star {
  font-size: inherit;
  line-height: 1;
}

.lb-board .lb-avatar {
  width: 26px;
  height: 26px;
  font-size: 0.68rem;
}

.lb-board .times-name {
  gap: 8px;
}

.lb-board .lb-pseudo {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.podium {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 18px;
  align-items: stretch;
}

.podium-card {
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-bright, #FFF9E8);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

.podium-card + .podium-card {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.podium-card[data-medal="gold"] {
  border-color: color-mix(in srgb, #C9A227 55%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #E8C547 18%, var(--paper-bright)) 0%, var(--paper-bright) 70%);
  box-shadow: 0 8px 22px color-mix(in srgb, #C9A227 18%, transparent);
}

.podium-card[data-medal="gold"] .rank {
  color: #8A6A10;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.podium-card[data-medal="silver"] {
  border-color: color-mix(in srgb, #8A93A0 45%, var(--line));
  background: color-mix(in srgb, #8A93A0 8%, var(--paper-bright));
}

.podium-card[data-medal="silver"] .rank { color: #5C6570; font-weight: 700; }

.podium-card[data-medal="bronze"] {
  border-color: color-mix(in srgb, #B8723A 45%, var(--line));
  background: color-mix(in srgb, #B8723A 8%, var(--paper-bright));
}

.podium-card[data-medal="bronze"] .rank { color: #8A4E22; font-weight: 700; }

.podium-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.podium-copy {
  min-width: 0;
}

.podium-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-score {
  margin: 8px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
}

.podium-card.is-you,
.times-table tr.is-you td {
  outline: 2px solid var(--premium, #62417A);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--premium, #62417A) 10%, var(--paper-bright, #FFF9E8));
}

.lb-board .times-table tr.is-you td {
  outline: none;
  background: color-mix(in srgb, var(--premium, #62417A) 6%, transparent);
}

.times-table tr.is-you td:first-child { border-radius: 8px 0 0 8px; }
.times-table tr.is-you td:last-child { border-radius: 0 8px 8px 0; }

.lb-board .times-table tr.is-you td:first-child,
.lb-board .times-table tr.is-you td:last-child {
  border-radius: 0;
}

.lb-avatar,
.podium-card .lb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--indigo) 14%, var(--paper-bright));
  border: 1px solid color-mix(in srgb, var(--indigo) 28%, var(--line));
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  object-fit: cover;
  overflow: hidden;
}

.lb-profile {
  color: inherit;
  text-decoration: none;
}

.lb-profile:hover {
  text-decoration: underline;
}

.lb-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lb-pseudo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

.lb-badge-premium {
  background: var(--premium-soft, color-mix(in srgb, #62417A 16%, var(--paper)));
  color: var(--premium, #62417A);
  border: 1px solid color-mix(in srgb, var(--premium, #62417A) 35%, var(--line));
}

.lb-rank {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.times-table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.times-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 761px) {
  .podium {
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: end;
    gap: 12px;
  }
  .podium-card[data-place="1"] { order: 2; padding-block: 22px; }
  .podium-card[data-place="2"] { order: 1; }
  .podium-card[data-place="3"] { order: 3; }
}

@media (max-width: 760px) {
  .lb-board,
  .podium,
  .times-table {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    margin-inline: auto;
  }
  .lb-board { margin-top: 1.35rem; }
  .podium-card[data-place="1"],
  .podium-card[data-place="2"],
  .podium-card[data-place="3"] { order: 0; }
  .lb-badge-label { display: none; }
  .lb-board .times-table th:first-child,
  .lb-board .times-table td:first-child { width: 4.5rem; }
  .lb-board .times-table th:last-child,
  .lb-board .times-table td:last-child { width: 7.75rem; min-width: 7.75rem; padding-right: 16px; }
  .lb-board.is-guesses .times-table th:last-child,
  .lb-board.is-guesses .times-table td:last-child,
  .lb-board .times-table-wrap.is-guesses .times-table th:last-child,
  .lb-board .times-table-wrap.is-guesses .times-table td:last-child {
    width: 8.75rem;
    min-width: 8.25rem;
    padding-right: 12px;
  }
  .lb-duration { font-size: 0.74em; }
  .lb-board .times-table th,
  .lb-board .times-table td { padding-inline: 6px; }
  .lb-country-code { display: none; }
}

@media (max-width: 430px) {
  .lb-board .times-table {
    table-layout: fixed;
    width: 100%;
  }
  .lb-board .times-table th:first-child,
  .lb-board .times-table td:first-child {
    width: 4rem;
    padding-left: 8px;
    padding-right: 12px;
  }
  .lb-board .times-table th:last-child,
  .lb-board .times-table td:last-child {
    width: 4.6rem;
    min-width: 0;
    padding-right: 6px;
    font-size: 0.78rem;
  }
  .lb-board.is-guesses .times-table th:last-child,
  .lb-board.is-guesses .times-table td:last-child,
  .lb-board .times-table-wrap.is-guesses .times-table th:last-child,
  .lb-board .times-table-wrap.is-guesses .times-table td:last-child {
    width: 6.5rem;
    min-width: 0;
    padding-right: 6px;
  }
  .lb-board .times-name { gap: 4px; }
  .lb-board .lb-avatar { width: 22px; height: 22px; }
  .lb-board .lb-identity,
  .lb-board .lb-pseudo { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .podium-card,
  .times-table tr.is-you td {
    transition: none;
  }
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  font-size: 0.7rem;
}

.rank-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin: 0 0 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.times-table tr.is-you td { background: var(--paper-wash); }
.times-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.times-name .lb-star { flex: 0 0 auto; color: var(--cta); }
.times-name > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-flag {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  overflow: hidden;
  border-radius: 2px;
  line-height: 0;
}

.player-flag svg {
  display: block;
  width: 20px;
  height: 14px;
}

.times-table thead th { border-bottom-color: var(--ink); }

/* —— Games catalogue —— */

.games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.games > .card {
  display: flex;
  flex-direction: column;
  padding: 8px 28px 8px 0;
  position: relative;
}

.games > .card + .card {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.games > .card .card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
}

.games > .card .card-head .game-cat-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--paper-wash) 70%, var(--paper-bright));
}

.games > .card .card-head .game-icon {
  display: block;
  width: 34px;
  height: 34px;
}

.games > .card.card-sudoku .game-cat-icon { color: var(--indigo); }
.games > .card.card-killer-sudoku .game-cat-icon { color: var(--vermillon); }
.games > .card.card-binary-puzzle .game-cat-icon { color: var(--matcha); }
.games > .card.card-futoshiki .game-cat-icon { color: var(--cta); }
.games > .card.card-kakuro .game-cat-icon { color: var(--ink); }
.games > .card.card-codebreaker .game-cat-icon { color: var(--ink); }

.games > .card .mini-board,
.games > .card .play-mini { margin-bottom: 0; }

.games > .card h2 { font-size: 1.35rem; margin: 0; letter-spacing: -0.02em; }

.play-mini {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  border: 1px solid var(--ink);
  background: var(--paper-bright);
  overflow: hidden;
}

.play-mini-sudoku,
.play-mini-killer { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.play-mini-lite {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 9) calc(100% / 9);
}
.play-mini-lite.play-mini-binary {
  background-size: calc(100% / 6) calc(100% / 6);
}
.play-mini-sudoku.play-mini-lite,
.play-mini-killer.play-mini-lite {
  background-image:
    linear-gradient(to right, var(--ink) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, var(--ink) 1.5px, transparent 1.5px),
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 3) calc(100% / 3), calc(100% / 3) calc(100% / 3), calc(100% / 9) calc(100% / 9), calc(100% / 9) calc(100% / 9);
}
.play-mini-binary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.play-mini-futoshiki {
  grid-template-columns: minmax(0, 1fr) 0.42fr minmax(0, 1fr) 0.42fr minmax(0, 1fr) 0.42fr minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 0.42fr minmax(0, 1fr) 0.42fr minmax(0, 1fr) 0.42fr minmax(0, 1fr);
}
.play-mini-kakuro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.play-mini-codebreaker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 92px;
  min-height: 56px;
  padding: 6px;
}
.play-mini-codebreaker .play-mini-cell {
  width: 16px;
  height: 20px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "zero" 0;
  font-size: 11px;
}
.cb-mini-dots { display: flex; gap: 3px; width: 100%; }
.cb-mini-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-sizing: border-box;
}
.cb-mini-dot.is-exact { background: var(--matcha); }
.cb-mini-dot.is-misplaced { border: 1.5px solid var(--cta); }
.mini-board.codebreaker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 8px;
}
.mini-board.codebreaker::before,
.mini-board.codebreaker::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--matcha);
  grid-column: 1;
}
.mini-board.codebreaker::after {
  background: transparent;
  border: 1.5px solid var(--cta);
  grid-column: 2;
}
.play-mini-kakuro-black,
.play-mini-kakuro-clue {
  background: var(--ink);
  color: var(--paper-bright);
  box-shadow: none;
}
.play-mini-kakuro-clue { position: relative; overflow: hidden; }
[data-ds-theme="dark"] .play-mini-kakuro-black,
[data-ds-theme="dark"] .play-mini-kakuro-clue {
  background: color-mix(in srgb, var(--cta-ink) 82%, var(--paper));
  color: var(--ivory);
}
.play-mini-kakuro .kakuro-diag {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom left, transparent calc(50% - 0.4px), currentColor 50%, transparent calc(50% + 0.4px));
  opacity: 0.45;
}
.play-mini-kakuro .kakuro-across {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: auto;
  left: auto;
  font-size: 4px;
  line-height: 1;
}
.play-mini-kakuro .kakuro-down {
  position: absolute;
  bottom: 1px;
  left: 1px;
  top: auto;
  right: auto;
  font-size: 4px;
  line-height: 1;
}
.play-mini-ineq {
  display: grid;
  place-items: center;
  font-size: 0.55em;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.play-mini-ineq-spacer { display: block; }

.play-mini-cell {
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 5px;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
}

.play-mini-sudoku .play-mini-cell:nth-child(3n),
.play-mini-killer .play-mini-cell:nth-child(3n) {
  box-shadow: inset -1.5px 0 0 var(--ink), inset 0 -1px 0 var(--line);
}

.play-mini-sudoku .play-mini-cell:nth-child(n + 19):nth-child(-n + 27),
.play-mini-sudoku .play-mini-cell:nth-child(n + 46):nth-child(-n + 54),
.play-mini-killer .play-mini-cell:nth-child(n + 19):nth-child(-n + 27),
.play-mini-killer .play-mini-cell:nth-child(n + 46):nth-child(-n + 54) {
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1.5px 0 var(--ink);
}

.play-mini-binary .play-mini-cell {
  font-variant-numeric: lining-nums;
  font-feature-settings: "zero" 0;
  font-size: 7px;
}

.play-mini-sum {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}

.play-mini-killer .play-mini-cell {
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ink) 35%, var(--line)), inset 0 -1px 0 color-mix(in srgb, var(--ink) 35%, var(--line));
}
.games > .card p { margin: 0 0 12px; font-size: 0.95rem; }
.games > .card .actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 16px; }

/* —— How-to —— */

.howto-rich {
  padding: 8px 0 24px;
  max-width: 40rem;
}

.howto-rich h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.howto-rich h2 {
  margin: 32px 0 12px;
  padding: 0;
  border: 0;
  font-size: 1.15rem;
}

.howto-rich h2 + p,
.howto-rich h2 + ul {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--accent);
  border-radius: 0;
  padding: 0 0 0 16px;
}

/* —— Continue —— */

.play-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--muted);
  text-decoration: none;
  min-height: 40px;
}

.play-back:hover { color: var(--ink); }

.continue-link,
.continue-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.continue-card h3,
.continue-card strong { margin: 0; font-size: 1.05rem; }
.continue-card .meta { margin: 2px 0 0; color: var(--muted); font-size: 0.86rem; }

.later-note {
  margin-top: 28px;
  padding: 14px 0;
  color: var(--muted);
  font-size: 0.92rem;
  border-top: 1px solid var(--line);
}

/* —— Home split —— */

.home-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0 48px;
}

.home-panel { padding: 0; }

.home-panel + .home-panel {
  padding-left: 48px;
  border-left: 1px solid var(--line);
}

.read-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.read-list a {
  display: block;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.read-list a:hover {
  color: var(--accent);
  background: transparent;
}

/* —— Hero: paper opening —— */

.hero.band {
  padding-top: 28px;
  padding-bottom: 36px;
}

.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(200px, 0.6fr);
  gap: 32px 56px;
  align-items: end;
  min-height: 18rem;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 500;
}

.hero-kicker::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--accent);
}

.hero-greet {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.hero-greet .streak-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-copy .hero-title,
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 13ch;
  margin: 0 0 16px;
}

.hero-title .ink-stroke {
  display: block;
  width: min(200px, 60%);
  height: 14px;
  margin: 12px 0 0;
  background: var(--ink-stroke) 0 50% / contain no-repeat;
  opacity: 0.7;
}

.hero-copy .hero-lead,
.hero-lead {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 34rem;
  color: var(--muted);
}

.hero-copy .hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.hero-visual {
  position: relative;
  min-height: 16rem;
}

.hero-grid {
  width: min(100%, 240px);
  aspect-ratio: 1;
  margin-left: auto;
  border: 1px solid var(--ink);
  border-radius: 0;
  background-color: transparent;
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 33.33%, 33.33% 100%, 100% 11.11%, 11.11% 100%;
  box-shadow: none;
  position: relative;
}

.hero-digit {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 2.2rem;
  color: var(--ink-strong);
  line-height: 1;
  font-weight: 400;
}

.hero-digit:nth-child(1) { top: 10%; left: 12%; }
.hero-digit:nth-child(2) { top: 38%; left: 42%; color: var(--accent); }
.hero-digit:nth-child(3) { top: 66%; left: 70%; }
.hero-digit:nth-child(4) { top: 14%; left: 70%; color: var(--muted); font-size: 1.2rem; }

.hero-grid-cap {
  position: absolute;
  right: 0;
  bottom: -1.6rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* —— Mobile: written for a narrow page, not a crushed desktop —— */

@media (max-width: 960px) {
  :root { --page-gutter: 2.5vw; }
  .stat-grid,
  .achv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-list,
  .games,
  .home-split,
  .offer-ink,
  .offer-letter,
  .hero-stage,
  .trio-grid,
  .podium { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-stage { min-height: 0; }
  .dash-profile { grid-template-columns: auto 1fr; }
  .home-panel + .home-panel,
  .games > .card + .card,
  .trio-card + .trio-card,
  .podium-card + .podium-card {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 720px) {
  :root { --page-gutter: 2.5vw; }

  .band { padding-top: 28px; padding-bottom: 28px; }
  .hero.band { padding-top: 12px; padding-bottom: 20px; }
  .daily-trio.band { padding-top: 20px; padding-bottom: 28px; }

  .hero-copy .hero-title,
  .hero-title {
    font-size: clamp(2rem, 10vw, 2.6rem);
    max-width: 12ch;
  }

  .hero-copy .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 20px;
  }

  .hero-actions .btn,
  .hero-actions .btn.primary,
  .hero-actions .btn.lg {
    min-height: 36px;
    padding: 0;
    background: none;
    color: var(--accent);
    border: 0;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .hero-actions .btn.primary::after { content: " →"; font-family: var(--font-mono); }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 14px 12px 14px 0; }
  .stat-card strong { font-size: 1.35rem; }

  .offer-ink,
  .offer-letter { padding: 16px 0; gap: 16px; }
  .offer-ink .price,
  .offer-letter .price { font-size: 1.7rem; }
  .offer-side .btn.primary.lg,
  .offer-side .btn.primary {
    min-height: 36px;
    padding: 0;
    background: none;
    color: var(--accent);
    border: 0;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
  }
  .offer-side .btn.primary::after { content: " →"; }

  .trio-head { margin-bottom: 8px; }
  .trio-ritual { display: none; }

  .trio-card,
  .trio-card + .trio-card {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    align-items: center;
  }

  .trio-card .trio-index {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 0.72rem;
    align-self: center;
  }

  .trio-card .trio-top {
    display: none;
  }

  .trio-card h3 { margin: 0; font-size: 1.12rem; }
  .trio-card .trio-foot {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .trio-card .trio-foot .btn {
    min-height: 36px;
    padding: 0;
  }

  .games > .card {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    border-top: 1px solid var(--line);
  }

  .games > .card .card-head {
    gap: 10px;
  }

  .games > .card .mini-board,
  .games > .card .play-mini {
    grid-row: auto;
    margin: 0;
    width: 48px;
    height: 48px;
  }

  .games > .card .actions { grid-column: 1 / -1; }
  .lib-item,
  .history-list li,
  .continue-card { grid-template-columns: auto 1fr; }
  .lib-cta { justify-items: start; grid-column: 1 / -1; }
  .dash-profile { grid-template-columns: 1fr; padding-bottom: 20px; }
  .achv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .howto-rich { padding: 0 0 16px; }
  .podium-card[data-place="1"],
  .podium-card[data-place="2"],
  .podium-card[data-place="3"] { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .trio-card, .lib-item, .games > .card { transition: none; }
}

/* Shared puzzle identity: intrinsic pseudo width keeps Premium immediately adjacent. */
.lb-board td.times-name { display: table-cell; }
.lb-board .lb-player { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lb-board .lb-identity,
.lb-board .lb-pseudo { flex: 0 1 auto; min-width: 0; }
.lb-board .lb-avatar { flex-shrink: 0; }
.lb-board .times-table-wrap.is-distance .times-table { table-layout: fixed; width: 100%; }
.lb-board .is-distance .times-table :is(th, td):first-child { width: 2.5rem; padding-inline: 4px; }
.lb-board .is-distance .times-table :is(th, td):last-child { width: 3.5rem; min-width: 0; padding-inline: 4px; }
.lb-board .is-distance .times-result {
  width: 5rem;
  padding-inline: 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
/* Number and localized exact/approx label share one line when the cell has room.
   A label that does not fit drops under the number and wraps on spaces. */
.lb-result {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0;
  width: 100%;
  max-width: 100%;
}
.lb-result-value,
.lb-result-label {
  display: inline;
  max-width: 100%;
}
.lb-result-value {
  flex: 0 0 auto;
  white-space: nowrap;
}
.lb-result-label {
  flex: 0 1 auto;
  font-size: .75em;
  color: var(--muted, #6A5638);
  white-space: normal;
  overflow-wrap: break-word;
}
@media (min-width: 390px) {
  .lb-board .is-distance .times-result { width: 9.5rem; }
}
@media (max-width: 430px) {
  .lb-board .is-distance .times-table :is(th, td) { font-size: .78rem; }
  .lb-board .is-distance .lb-country { display: none; }
}
/* Résultat / Result / Ergebnis / Resultado / Risultato is one word. The 5rem
   distance column used to break that header. Keep the word intact; shrink it
   only while the column is 5rem so avatar, pseudo, and time stay in view. */
.lb-board .is-distance th.times-result {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  hyphens: none;
  letter-spacing: 0;
}
@media (max-width: 389px) {
  .lb-board .is-distance th.times-result {
    font-size: 0.62rem;
    line-height: 1.15;
    padding-inline: 1px;
  }
}



/* @import /shared/site-chrome.css */

/* @import /shared/dig-ui.css */
/* Shared amount surface stays pale in both themes; never inherit CTA ink. */
.dig-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--cta, #C88708) 44%, var(--line, #DDBB72));
  border-radius: 999px;
  background: color-mix(in srgb, #FFF9E8 90%, #C88708);
  line-height: 1;
  vertical-align: middle;
}

.dig-compact img {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-bright, #FFF9E8) 80%, #F4D675);
  border: 1px solid color-mix(in srgb, var(--cta, #C88708) 38%, transparent);
  padding: 1px;
}

.dig-compact.dig-compact-framed > .dig-compact-value {
  color: #2B2419 !important;
  -webkit-text-fill-color: #2B2419;
  opacity: 1;
}



/* Canonical DIGIGMA header, overlay, and footer.
   Loaded by homepage, shell pages, and Play. Do not restyle from play.css. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 8px 12px;
  background-color: var(--header-bg, #FFF6E4);
  border-bottom: 1px solid var(--header-line, #E4C98A);
  color: var(--header-ink, var(--ink));
}

.site-header::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--game-sudoku, #3547B3),
    var(--game-binary, #2E8B7A),
    var(--game-codebreaker, #E07A5F),
    var(--game-kakuro, #6B5B95),
    var(--game-futoshiki, #C88708)
  );
  opacity: 0.42;
  pointer-events: none;
}

.site-header.is-nav-open {
  z-index: 50;
}

.site-header .brand,
.site-header .ds-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.site-header .brand h1,
.site-header .ds-logo-word {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink, #2B2419);
  text-shadow: 0 1px 0 color-mix(in srgb, #fff 65%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
}

.site-header .ds-logo-mark,
.site-header .ds-logo-dot {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  /* 26% of 42px ≈ 11px — same ratio as footer and baked brand assets */
  border-radius: 26%;
  background: none;
  object-fit: contain;
  display: block;
}

.site-header .mark { display: none; }

/* Crawlable SSR destinations never expose a second menu or hidden tab stops. */
.site-header > .shell-seo-nav { display: none !important; }
.site-header { box-sizing: border-box; height: 64px; min-height: 64px; max-height: 64px; }

.shell-nav,
.site-header .nav {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 12px;
}

.site-header,
.site-footer {
  --nav-link-color: var(--header-ink, var(--ink));
  --nav-link-hover: #A86E06;
  --nav-link-active: var(--indigo, #3547B3);
  --nav-link-size: 0.86rem;
  --nav-link-weight: 500;
  --nav-link-tracking: 0.01em;
}

.site-footer {
  --nav-link-size: 0.78rem;
  overflow-x: clip;
}

html[data-ds-theme="dark"] .site-header,
html[data-ds-theme="dark"] .site-footer {
  --nav-link-hover: #E0C078;
  --nav-link-active: var(--indigo, #8E9BE8);
}

.shell-nav .shell-logout,
.shell-nav a,
.shell-nav a:link,
.shell-nav a:visited,
.site-header .nav > a,
.site-header .nav > a:link,
.site-header .nav > a:visited,
.footer-links a,
.footer-links a:link,
.footer-links a:visited,
.site-footer .footer-links a,
.site-footer .footer-links a:link,
.site-footer .footer-links a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--nav-link-color);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--nav-link-size);
  font-weight: var(--nav-link-weight);
  letter-spacing: var(--nav-link-tracking);
  text-transform: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.shell-nav .shell-logout:hover,
.shell-nav a:hover,
.site-header .nav > a:hover,
.footer-links a:hover,
.site-footer .footer-links a:hover {
  color: var(--nav-link-hover);
  border-bottom-color: var(--nav-link-hover);
}

.shell-nav a[aria-current="page"],
.site-header .nav > a[aria-current="page"],
.footer-links a[aria-current="page"],
.site-footer .footer-links a[aria-current="page"] {
  color: var(--nav-link-active, var(--indigo, #3547B3));
  border-bottom-color: var(--nav-link-active, var(--indigo, #3547B3));
  font-weight: 600;
}

.shell-nav .shell-logout:focus-visible,
.shell-nav a:focus-visible,
.site-header .nav > a:focus-visible,
.footer-links a:focus-visible,
.site-footer .footer-links a:focus-visible {
  color: var(--nav-link-active, var(--indigo, #3547B3));
  outline: 2px solid var(--nav-link-active, var(--indigo, #3547B3));
  outline-offset: 3px;
  border-bottom-color: transparent;
}

.nav-panel {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  margin-left: 28px;
}

.shell-bar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}

.locale-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
}

.locale-switch .locale-flag,
.locale-switch .player-flag {
  width: 22px;
  height: 16px;
  flex: 0 0 22px;
  pointer-events: none;
}

.locale-switch .locale-flag svg,
.locale-switch .player-flag svg {
  display: block;
  width: 22px;
  height: 16px;
}

.locale-switch-hit {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.locale-switch select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 44px;
  min-width: 44px;
  max-width: none;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 16px;
}

.nav-toggle-bars span {
  display: block;
  height: 1px;
  background: currentColor;
}

.shell-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--sumi, #2B2419) 42%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion, 0.2s) ease;
}

.is-nav-open .shell-overlay,
.site-header.is-nav-open + .shell-overlay,
.shell-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-header.is-nav-open .nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: min(17.5rem, 86vw);
  max-width: 17.5rem;
  height: auto;
  max-height: 100dvh;
  margin: 0;
  padding: 12px 14px max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--paper-bright);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  overflow-y: auto;
}

.site-header.is-nav-open .shell-nav,
.site-header.is-nav-open .nav {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.site-header.is-nav-open .shell-nav .shell-logout,
.site-header.is-nav-open .shell-nav a,
.site-header.is-nav-open .nav > a {
  min-height: 44px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}

.shell-account-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.shell-nav .shell-logout {
  appearance: none;
  width: auto;
  margin: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.shell-nav .shell-logout:disabled { opacity: 0.6; cursor: wait; }

.site-header.is-nav-open .shell-account-group {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 12px 0 0;
  padding: 8px 0 0;
  border-left: 0;
  border-top: 1px solid var(--line);
}

.site-footer {
  margin-top: auto;
  padding: 24px 16px 28px;
  border-top: 1px solid var(--header-line, var(--line));
  background: color-mix(in srgb, var(--header-bg, #FFF6E4) 42%, var(--paper));
  color: var(--muted);
  text-align: center;
}

.site-footer::before {
  content: none;
  display: none;
}

.footer-inner,
.site-footer .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(1120px, 100%);
  max-width: none;
  margin: 0 auto;
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
}

.footer-brand .ds-logo-word {
  display: block;
  line-height: 1;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
}

.footer-brand .mark { display: none; }

.footer-brand .ds-logo-mark,
.footer-brand .ds-logo-dot {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  /* 26% of 32px ≈ 8px — same ratio as the 42px header mark */
  border-radius: 26%;
  background: none;
  object-fit: contain;
  display: block;
}

.footer-links,
.site-footer .footer-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  max-width: 100%;
}

.footer-links a,
.site-footer .footer-links a {
  padding: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.footer-sep {
  color: var(--muted);
  user-select: none;
  flex: 0 0 auto;
}

.footer-copyright {
  margin: 4px 0 0;
  width: 100%;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

@media (max-width: 760px) {
  .site-footer {
    text-align: center;
  }

  .footer-inner,
  .site-footer .footer-inner {
    width: var(--mobile-content-width, 95%);
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }

  .footer-links,
  .site-footer .footer-links {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  /* Keep Help · Privacy · Legal on one row on small phones; tighten type/gap. */
  .site-footer {
    --nav-link-size: 0.72rem;
  }

  .footer-links,
  .site-footer .footer-links {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px 6px;
  }

  .footer-sep {
    display: inline;
    font-size: 0.72rem;
  }
}

.nav-games { display: none; }

.site-header .badge,
.site-header .badge-gold {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  min-height: 22px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--cta, #C88708) 40%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cta, #C88708) 12%, var(--paper-bright));
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.shell-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  text-decoration: none;
}
.shell-auth-signin {
  min-height: 36px;
  min-width: auto;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.78rem;
  box-shadow: none;
}
.shell-auth-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-bright, #fff) 70%, var(--paper));
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  pointer-events: none;
  flex: 0 0 auto;
}
.shell-auth-avatar img,
.shell-auth-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
}
.shell-auth-avatar.is-founder {
  border-color: var(--cta, #C88708);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cta, #C88708) 35%, transparent);
}
#shellAccount.shell-auth-in,
#shellAccountSheet.shell-auth-in {
  min-height: 36px;
  padding: 2px 8px 2px 2px;
  border-radius: var(--radius-pill, 999px);
  box-shadow: none;
}
.shell-auth-label {
  font-size: 0.78rem;
}

@media (max-width: 767px) {
  #shellAccount.shell-auth-signin {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .site-header .ds-logo-word,
  body.home .site-header .ds-logo-word {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }
  .site-header .brand,
  .site-header .ds-logo {
    gap: 6px;
  }
  .site-header { padding: 8px; gap: 6px; }
  .shell-bar-end { gap: 6px; }
  .locale-switch {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .locale-switch select {
    min-height: 36px;
    min-width: 36px;
  }
  .nav-toggle {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 390px) {
  #shellAccount.shell-auth-signin {
    max-width: 5.6rem;
    padding: 4px 8px;
  }
}

@media (max-width: 339px) {
  .site-header { padding: 8px 6px; gap: 4px; }
  .shell-bar-end { gap: 4px; }
  .site-header .ds-logo-word,
  body.home .site-header .ds-logo-word {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
  .site-header .brand,
  .site-header .ds-logo {
    gap: 4px;
  }
}

@media (max-width: 1179px) {
  .site-header .brand,
  .site-header .ds-logo { flex: 0 0 auto; }
  .nav-panel {
    flex: 0 0 0;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

@media (min-width: 1024px) {
  .shell-nav { gap: var(--space-1, 4px) var(--space-4, 16px); }
  .shell-nav { --nav-link-size: 0.92rem; }
}

/* Keep the three-line menu indicator visible for signed-in users at every width. */
@media (min-width: 1180px) {
  .site-header .nav-toggle .shell-menu-wallet { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shell-overlay,
  .site-header .nav-panel { transition: none; }
}


/* Add to Home Screen — mobile/tablet sheet only; on-demand dialog */
.shell-add-home {
  display: none;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--nav-link-color, var(--ink));
  font-family: var(--font-sans);
  font-size: var(--nav-link-size, 0.86rem);
  font-weight: var(--nav-link-weight, 500);
  letter-spacing: var(--nav-link-tracking, 0.01em);
  text-align: left;
  cursor: pointer;
}
.site-header.is-nav-open .shell-add-home {
  display: inline-flex;
}
.shell-add-home:hover,
.shell-add-home:focus-visible {
  color: var(--nav-link-hover, #A86E06);
}
.shell-add-home:focus-visible {
  outline: 2px solid var(--nav-link-active, var(--indigo, #3547B3));
  outline-offset: 3px;
}
@media (min-width: 1180px) {
  .shell-add-home {
    display: none !important;
  }
}

.add-home-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--sumi, #2B2419) 42%, transparent);
}
.add-home-dialog[hidden] {
  display: none !important;
}
.add-home-card {
  width: min(22rem, 100%);
  max-height: min(90dvh, 36rem);
  overflow-y: auto;
  padding: 18px 18px 14px;
  background: var(--paper-bright, #FFF6E4);
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-card, var(--shadow));
  color: var(--ink);
}
.add-home-card h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  line-height: 1.3;
}
.add-home-lead,
.add-home-intro,
.add-home-hint,
.add-home-icon-note {
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.45;
}
.add-home-home {
  margin: 0 0 12px;
}
.add-home-dialog.is-on-home .add-home-home {
  display: none;
}
.add-home-dialog.is-on-home .add-home-body {
  margin-top: 2px;
}
.add-home-home-link {
  color: var(--indigo, #3547B3);
  text-underline-offset: 3px;
}
.add-home-steps {
  margin: 0 0 12px;
  padding-left: 1.2em;
  font-size: 0.98rem;
  line-height: 1.45;
}
.add-home-steps li {
  margin: 0 0 6px;
}
.add-home-icon-note {
  color: var(--muted);
  font-size: 0.9rem;
}
.add-home-close {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 4px 0 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.add-home-close:hover,
.add-home-close:focus-visible {
  color: var(--ink);
}
.add-home-close:focus-visible {
  outline: 2px solid var(--nav-link-active, var(--indigo, #3547B3));
  outline-offset: 3px;
}
@media (max-width: 420px) {
  .add-home-card {
    width: min(95vw, 100%);
    padding: 16px 14px 12px;
  }
}

/* Restore must resolve before guest controls appear. */
#shellBecomeMember[hidden], #shellAccountGroup[hidden], #shellLanguage[hidden], #shellAccount[hidden], #shellAccountSheet[hidden], #shellLogout[hidden] { display: none !important; }
.locale-globe { width: 20px; height: 20px; display: inline-flex; pointer-events: none; }
.locale-globe svg { width: 100%; height: 100%; }
.locale-switch:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Shared drawer trigger at every viewport width. */
@media (min-width: 0px) {
  .site-header .nav-toggle { display: inline-flex; width: auto; min-width: 44px; min-height: 44px; padding: 0 12px; gap: 9px; }
}
.site-header .nav-panel[hidden] { display: none !important; }
.site-header.is-nav-open .nav-panel {
  top: 64px;
  width: min(22rem, 95vw);
  max-width: 95vw;
  max-height: calc(100dvh - 64px);
  height: auto;
  overscroll-behavior: contain;
}
.site-header.is-nav-open .shell-account-group { gap: 12px; }
.site-header .shell-account-group #shellAccount { width: 100%; max-width: none; justify-content: flex-start; }
.site-header .shell-nav .locale-switch { margin-top: 16px; flex-shrink: 0; }
.site-header .nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The trigger remains visible while the drawer overlays a scrolled page. */
.site-header.is-nav-open { position: sticky; top: 0; z-index: 50; }
.site-header.is-nav-open .shell-bar-end { position: relative; z-index: 2; }
.site-header .shell-account-group #shellAccount.shell-auth-signin {
  width: auto; max-width: 100%; align-self: flex-start; justify-content: center;
  min-height: 44px; padding: 8px 16px; border-radius: var(--radius-sm);
}

/* Unread messages are visible even with the navigation closed. */
.message-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.5rem; height:1.5rem; padding:0 .3rem; margin-inline-start:.5rem; border-radius:99px; background:#9b3e28; color:#fff9e8; font:700 .75rem/1 system-ui,sans-serif; }
.message-badge[hidden] { display:none; }
.message-toast-link { color:inherit; font-weight:600; }

/* One compact guest action row; native language options inherit site typography. */
.site-header .shell-auth-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line); }
.site-header .shell-auth-row .shell-account-group { margin:0; padding:0; border:0; flex:1 1 auto; }
.site-header .shell-guest-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.site-header .shell-guest-actions #shellBecomeMember { border:0; padding:0; font-size:.85rem; line-height:1.3; }
.site-header .shell-guest-actions .locale-switch { margin:0; }
.site-header .locale-switch select,.site-header .locale-switch option { font-family:Inter,Arial,sans-serif; font-size:14px; font-weight:400; color:var(--ink); background:var(--paper-bright); }
.site-header .shell-auth-row:has(.shell-guest-actions > [hidden]:first-child) .shell-account-group { width:100%; }

.site-header .shell-guest-actions #shellBecomeMember { white-space:nowrap; }

/* Account and its explicit logout control share one row. */
.site-header .shell-auth-row .shell-account-group { display:flex; flex-direction:row; align-items:center; gap:10px; min-width:0; }
.site-header .shell-account-group #shellAccount { flex:1 1 auto; width:auto; min-width:0; }
.site-header .shell-account-group #shellLogout { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink); }
.site-header #shellLogout:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.site-header .shell-guest-actions:has(> [hidden]:first-child):has(> [hidden]:last-child) { display:none; }

/* Shared action buttons across account, catalogue, dialogs and messages. */
html body :is(.btn,.ds-btn,button.primary) { min-height:44px; padding:10px 16px; border-radius:8px; font-family:var(--font-sans,Inter,Arial,sans-serif); font-size:.95rem; font-weight:600; letter-spacing:0; line-height:1.25; text-align:center; }
html body :is(.btn.primary,.ds-btn-primary,button.primary) { color:var(--cta-ink,#FFF9E8); background-color:var(--cta,#946526); border-color:var(--cta,#946526); }
html body :is(.btn.primary,.ds-btn-primary,button.primary):hover { color:var(--cta-ink,#FFF9E8); background-color:var(--cta-hover,#7E541F); border-color:var(--cta-hover,#7E541F); }

/* Message alert: envelope, sender and a distinct, compact cream card. */
.message-toast-link { display:flex; align-items:center; gap:12px; min-width:0; flex:1; padding:4px; text-decoration:none; }
.message-toast-icon { display:grid; place-items:center; flex:0 0 44px; height:44px; background:#eee5f2; color:#654383; border-radius:12px; }
.message-toast-content { display:flex; flex-direction:column; gap:3px; min-width:0; }
.message-toast-title { font-size:.8rem; font-weight:400; }
.message-toast-content strong { font-size:1rem; overflow-wrap:anywhere; }
.message-toast-link:hover strong { text-decoration:underline; }
.message-toast-link:focus-visible { outline:2px solid #654383; outline-offset:2px; }

/* The account drawer uses a labelled action at every width, never an avatar-only pill. */
.site-header .shell-account-group #shellAccount.shell-auth-in {
  display:flex; align-items:center; gap:10px; min-height:48px; padding:7px 10px;
  border-radius:10px; overflow:visible; white-space:normal;
}
.site-header #shellAccount.shell-auth-in .shell-auth-copy {
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0;
}
.site-header #shellAccount.shell-auth-in .shell-auth-label {
  display:block; min-width:0; font-size:.95rem; line-height:1.25; overflow-wrap:anywhere;
}
.site-header #shellAccount.shell-auth-in .shell-auth-username {
  display:block; max-width:100%; color:var(--muted); font-size:.76rem; line-height:1.2;
  font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.site-header #shellAccount.shell-auth-in .shell-auth-avatar { width:32px; height:32px; flex:0 0 32px; }
.site-header #shellAccount.shell-auth-in .badge { display:none; }

/* Account identity and DIG wallet remain visible while the menu is closed. */
#shellMenuAvatar[hidden], #shellMenuWallet[hidden], #shellMenuLabel[hidden] { display:none !important; }
.shell-menu-avatar { width:30px; height:30px; flex:0 0 30px; overflow:hidden; border-radius:50%; }
.shell-menu-avatar .shell-auth-avatar-img { width:30px; height:30px; object-fit:cover; }
.shell-menu-wallet { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink); }
.shell-menu-wallet img { flex:none; }
@media(max-width:420px) {
  .site-header .nav-toggle { gap:6px; padding-inline:8px; }
  .shell-menu-wallet { gap:3px; font-size:13px; }
  .shell-menu-wallet img { width:22px; height:22px; }
  .shell-menu-avatar, .shell-menu-avatar .shell-auth-avatar-img { width:26px; height:26px; }
  .shell-menu-avatar { flex-basis:26px; }
}


.paywall-resume { display:block; width:fit-content; max-width:100%; box-sizing:border-box; margin:12px 0; padding:12px 16px; border:1px solid currentColor; border-radius:12px; overflow-wrap:anywhere; }

/* First HTML, pending session and reconciled identity share the same geometry. */
.site-header .nav-toggle { width: 160px; flex: 0 0 160px; }
.site-header .nav-toggle-bars { flex: 0 0 16px; }
.site-header .ds-logo-mark {
  background: transparent !important;
}
.shell-menu-wallet img,
.shell-auth-avatar { background-color: var(--line, #e4d8c0); }
.shell-menu-wallet img { border-radius: 50%; }
.site-header .shell-menu-wallet { flex: 0 0 70px; min-width: 0; gap: 3px; padding-inline: 4px; }
.site-header .shell-menu-wallet .dig-compact-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shell-first-paint { pointer-events: none; }
#shellMenuAvatar[hidden], #shellMenuWallet[hidden], #shellMenuLabel[hidden] { display: none !important; }
@media (max-width: 420px) {
  .site-header .nav-toggle { width: 138px; flex-basis: 138px; }
  .site-header .shell-menu-wallet { flex-basis: 66px; }
}
.site-header .shell-menu-wallet img { width: 25px; height: 25px; }
@media (max-width: 420px) {
  .site-header .shell-menu-wallet img { width: 22px; height: 22px; }
}

/* Reserve no extra header space: unread count sits above the menu bars. */
.site-header .nav-toggle { position:relative; }
.site-header .nav-toggle > .message-badge {
  position:absolute; inset-block-start:1px; inset-inline-start:1px;
  margin:0; min-width:16px; height:13px; padding:0 3px;
  box-sizing:border-box; font-size:10px; pointer-events:none;
}
/* Anchor buttons retain their component colours in every link state. */
html body a:is(.btn,.ds-btn):is(:link,:visited,:hover,:active) {
  color:var(--ink); text-decoration:none;
}
html body a:is(.btn.primary,.ds-btn-primary):is(:link,:visited,:hover,:active) { color:var(--cta-ink,#FFF9E8); }
html body a.ds-btn-premium:is(:link,:visited,:hover,:active) { color:var(--premium-ink,#F4D675); }
html body a:is(.btn,.ds-btn):focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
/* Some library renderers wrap the visual button span in the action anchor. */
html body .puzzle-card-actions > a:has(> .btn):is(:link,:visited,:hover,:active) { color:var(--cta-ink,#FFF9E8); text-decoration:none; }

/* QA2: keep the outer slot stable while the guest control stays compact. */
.site-header.is-guest .nav-toggle { width:88px; flex-basis:88px; margin-inline-start:72px; }
.site-header .shell-menu-wallet .dig-compact-value { font-size:16px; font-weight:800; line-height:1.15; font-variant-numeric: tabular-nums; }
.site-header .ds-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.site-header .ds-logo-tagline {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: color-mix(in srgb, var(--ink) 68%, var(--muted));
  text-transform: none;
  max-width: 11rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .site-header .ds-logo-tagline { max-width: 7.5rem; font-size: 0.58rem; }
}
@media (max-width:420px) {
  .site-header.is-guest .nav-toggle { margin-inline-start:50px; }
  .site-header .shell-menu-wallet .dig-compact-value { font-size:16px; }
}
/* Shared purple toast cards supply their own readable foreground. */
#achvToastStack .message-toast-icon { background:transparent; }

/* Outer chrome: avatar + DIG only (no visible username). Legacy nodes stay empty. */
.site-header .shell-header-username { display:none !important; }
.site-header.is-guest :is(.shell-menu-avatar,.shell-menu-wallet) { display:none; }
.site-header:not(.is-guest) .shell-first-menu { display:none; }

.footer-attribution {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  text-decoration: none;
}
.footer-attribution:hover { text-decoration: underline; }
.footer-attribution img { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 18px; }

/* Must follow the unconditional .shell-auth-row padding rule above.
   Otherwise desktop signed-in chrome grows the header past the 64px first-paint box. */
@media (min-width: 1180px) {
  .site-header .shell-auth-row {
    padding-top: 0;
    border-top: 0;
  }
  .site-header .shell-account-group #shellAccount.shell-auth-in {
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* DG-05 / DG-06 — one 12px gap under the sticky header for every game view.
   This file is the header stylesheet (direct link on play, early hub import
   on guide/rules/tutorial), so the gap exists on the first paint. Do not
   hardcode the header height or a game. Later sheets must keep the same gap. */
:root { --crumb-header-gap: 12px; }

/* hub.css gives .page 18px of padding before shell.css (font-gated) zeroes it.
   Lock the shell page box with the header so that padding cannot drop the crumb. */
body.ds-shell > .page {
  padding: 0;
}

html.is-play body > .play-page-hero > .play-breadcrumb,
html.is-play body > .play-page-hero > .lib-breadcrumb,
body.ds-shell .page:has(#howtoGuide) > .lib-breadcrumb,
body.ds-shell[data-v2-page="tutorial"] .page > .lib-breadcrumb,
body.ds-shell[data-game][data-v2-library="1"] > .page > .lib-breadcrumb,
body.home[data-daily-today] > .daily-today-breadcrumb {
  margin-top: var(--crumb-header-gap, 12px);
}



* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  overflow-x: clip;
  max-width: 100%;
}

body {
  background-image:
    radial-gradient(1100px 520px at 8% -12%, var(--paper-wash) 0%, transparent 52%),
    radial-gradient(800px 380px at 108% 8%, var(--paper-shade) 0%, transparent 48%);
}

.page {
  --page-gutter: 28px;
  width: min(1080px, 100%);
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px var(--page-gutter) 48px;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Header/footer chrome: shared/site-chrome.css — do not restyle here. */

.games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.games > .card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.card .glyph {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.card .glyph.sudoku {
  background:
    linear-gradient(var(--gold), var(--gold)) 50% 33% / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 66% / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 33% 50% / 2px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 66% 50% / 2px 18px no-repeat,
    var(--gold-wash);
}

.card .glyph.stars {
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 3.5px),
    radial-gradient(circle at 50% 18%, var(--gold) 0 2px, transparent 2.4px),
    radial-gradient(circle at 50% 82%, var(--gold) 0 2px, transparent 2.4px),
    radial-gradient(circle at 18% 50%, var(--gold) 0 2px, transparent 2.4px),
    radial-gradient(circle at 82% 50%, var(--gold) 0 2px, transparent 2.4px),
    var(--gold-wash);
}


.card .glyph.killer {
  background:
    linear-gradient(var(--gold), var(--gold)) 50% 33% / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 66% / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 33% 50% / 2px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 66% 50% / 2px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 22% 22% / 9px 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 22% 28% / 1.5px 9px no-repeat,
    var(--gold-wash);
}
.card .glyph.binary {
  background:
    linear-gradient(var(--gold), var(--gold)) 50% 22% / 20px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 36% / 20px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 50% / 20px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 64% / 20px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 78% / 20px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 22% 50% / 1px 20px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 36% 50% / 1px 20px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 50% / 1px 20px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 64% 50% / 1px 20px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 78% 50% / 1px 20px no-repeat,
    var(--gold-wash);
}

.card h2 {
  margin: 0 0 6px;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
  font-weight: 600;
}

.card p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.4;
  font-size: 0.98rem;
}

.card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--paper-shade, #FFF6DF);
  color: var(--ink-strong, #2B2419);
  text-decoration: none;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  box-shadow: none;
}

.btn:hover { border-color: var(--cta, #C88708); background: color-mix(in srgb, var(--cta, #C88708) 18%, var(--paper-shade, #FFF6DF)); }

.btn.primary {
  background: var(--cta, #946526);
  color: var(--cta-ink, #FFF9E8);
  border-color: var(--cta, #946526);
  font-weight: 500;
}

.btn.primary:hover { background: var(--cta-hover, #7E541F); border-color: var(--cta-hover, #7E541F); }

.foot {
  margin-top: 32px;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.continue { margin: 0 0 20px; }

.daily-trio {
  margin: 0 0 28px;
}

.trio-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 0 0 12px;
}

.trio-head h2 {
  margin: 0;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.trio-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.trio-count {
  margin-left: 0.6em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 760px) {
  .trio-grid {
    grid-template-columns: 1fr;
  }
}

.continue-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.continue-label { font-weight: 600; }
.continue-sub { color: var(--muted); font-size: 0.95rem; }

.recent { margin-top: 32px; }

.recent-head,
.solved-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 16px;
}

.recent-head h2,
.page-title {
  margin: 0 0 12px;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.page-title {
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 0.08em;
}

.recent-all {
  color: var(--muted);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.recent-all:hover { color: var(--ink); }

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.recent-list a:hover { color: var(--gold); }

.article, .howto { max-width: 40rem; }
.article h1, .howto h1 { font-size: 1.8rem; letter-spacing: 0.03em; margin: 0 0 16px; }
.article h2, .howto h2 { font-size: 1.15rem; letter-spacing: 0.04em; margin: 28px 0 10px; }
.article p, .article li, .howto p, .howto li { font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.article ul, .howto ul { padding-left: 1.2em; }
.article .err, .howto .err { color: var(--bad); }

.history { margin-top: 28px; }
.history h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}

@media (max-width: 760px) {
  .page { --page-gutter: 2.5vw; width: var(--mobile-content-width, 95%); padding: 10px 0 36px; }
  .games {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--ink); }

/* Local account — this machine only. Not a cloud signup. */
.lede {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.45;
}
#names {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
#names button,
#names a {
  font: inherit;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-bright);
  color: var(--ink);
  cursor: pointer;
}
#names [aria-current="true"],
#names .active {
  border-color: var(--gold-border);
  background: var(--gold-fill);
}
#add.name-form {
  max-width: 22rem;
}
.howto-rich { margin-top: 8px; }
.howto-rich h1 { margin-top: 0; }

.howto > .name-form {
  max-width: 22rem;
}
#boards { margin-top: 28px; }
.achv-panel { margin: 20px 0; }
.achv-panel h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.achv-streak,
.achv-freeze { margin: 0 0 12px; color: var(--ink); }
.achv-freeze { color: var(--muted); font-size: 0.95rem; }
.achv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.achv-chips li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.88rem;
  background: var(--paper-bright);
}
.achv-next { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 0.92rem; }
.achv-toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  min-width: min(18rem, 88vw);
  max-width: min(92vw, 420px);
  padding: 14px 36px 14px 16px;
  background: var(--paper-bright, #FFF9E8);
  border: 1px solid var(--cta, #C88708);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(43, 36, 25, 0.12);
  color: var(--ink, #2B2419);
  font-size: 0.92rem;
}
.achv-toast[hidden],
.achv-toast.is-hidden { display: none !important; }
.achv-toast-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta, #C88708);
}
.achv-toast-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}
#boards h2,
#solved h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.seo-daily { max-width: 40rem; }
.seo-daily h1 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.seo-board {
  --n: 8;
  display: grid;
  gap: 0;
  width: min(100%, 22rem);
  margin: 18px 0 12px;
  border: 1px solid var(--line);
  background: var(--paper-bright);
  box-shadow: var(--shadow);
}
.seo-row {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
.seo-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}
.seo-row .seo-cell:last-child { border-right: 0; }
.seo-row:last-child .seo-cell { border-bottom: 0; }
.seo-cell.is-given { font-weight: 600; color: var(--ink); }
.seo-ascii {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-x: auto;
}
.seo-meta { margin: 0 0 16px; color: var(--muted); font-size: 0.95rem; }

.who {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1rem;
}
.who a { color: inherit; text-underline-offset: 3px; }

.name-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.name-actions button,
.name-actions .btn {
  background: transparent;
  color: var(--muted);
}
.name-actions button:hover { color: var(--ink); }

.confirm-pop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 45%, transparent);
  z-index: 20;
  padding: 24px 16px;
}
.confirm-pop[hidden] { display: none !important; }
.confirm-pop .rules-pop-card,
.confirm-card {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  max-width: 22rem;
  width: min(22rem, 100%);
  box-shadow: var(--shadow);
}
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.confirm-actions .danger {
  color: var(--bad);
  border-color: var(--bad);
  background: transparent;
}

.board-list { list-style: none; margin: 0; padding: 0; }
.board-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}
.board-row .band,
.board-row .count { color: var(--muted); }

.games > .card {
  transition: none;
}

.games > .card:hover {
  transform: none;
  box-shadow: none;
}

.article h1, .howto h1 {
  letter-spacing: 0.02em;
}

.auth-card h1 {
  letter-spacing: 0.03em;
}

.times-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.times-table tbody tr {
  border-bottom: 1px solid var(--line);
}

.times-table th,
.times-table td {
  padding: 11px 10px;
  text-align: left;
  vertical-align: middle;
  border: 0;
}

.times-table thead th {
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom-color: var(--gold-border);
}

.times-table th:first-child,
.times-table td:first-child {
  width: 2.1rem;
  padding-left: 2px;
  color: var(--gold);
  font-weight: 600;
}

.times-table th:last-child,
.times-table td:last-child {
  width: 7.2rem;
  text-align: right;
}

.times-table tbody tr:last-child {
  border-bottom: 0;
}

/* Mobile home (≤480). Desktop / tablet homepage stays as-is. */
.home-mobile,
.home-overlay,
.home-sheet {
  display: none;
}

@media (max-width: 480px) {
  body.home {
    --sumi: #2C2C2C;
    --ink-muted: #6B6560;
    --indigo: #3E48AB;
    --vermillon: #CB4B31;
    --matcha: #7B9E5C;
    --gris: #E8E4DD;
    --hairline: rgba(26, 26, 26, 0.12);
    --mark: #C4A574;
    --overlay: rgba(26, 26, 26, 0.40);
    --home-washi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 0 0.30 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(/%23w)'/%3E%3C/svg%3E");
    font-family: var(--font-sans);
  }

  /* Beat product.css `html:not(.is-play) body` (0,1,2). Do not assign a color to --washi. */
  html:not(.is-play):has(body.home),
  html:not(.is-play) body.home,
  html:not(.is-play) body.home .page,
  html:not(.is-play) body.home .home-mobile {
    color-scheme: only light;
    background-color: var(--paper);
    background-image: none;
    color: var(--ink);
  }

  body.home::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: var(--home-washi);
    background-size: 180px 180px;
    opacity: 0.07;
  }

  body.home .page {
    --page-gutter: 16px;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 0 16px;
    overflow-x: clip;
  }

  body.home .home-desk { display: none !important; }
  body.home .home-mobile { display: block; }

  .home-mobile {
    position: relative;
    padding: 0 16px 8px;
  }

  .home-motif {
    position: absolute;
    top: 4px;
    right: -8px;
    width: 168px;
    height: 84px;
    pointer-events: none;
    color: var(--indigo);
    opacity: 0.14;
    z-index: 0;
  }

  .home-motif-seigaiha {
    display: block;
    width: 100%;
    height: 100%;
  }

  .home-motif-seigaiha path {
    stroke: currentColor;
    stroke-width: 1;
    fill: none;
  }

  .home-greet {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    margin: 12px 0 0;
  }

  .home-greet-main { min-width: 0; }

  .home-greet-text {
    margin: 0;
    font-family: var(--font-serif), var(--font-display), serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 26px;
    color: var(--ink);
  }

  .home-greet-kicker {
    margin: 2px 0 0;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .home-ritual {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
  }

  .home-streak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 22px;
    min-width: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vermillon) 14%, var(--paper));
    color: var(--vermillon);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 22px;
    letter-spacing: 0;
  }

  .home-streak::before {
    content: "";
    width: 8px;
    height: 10px;
    background: var(--vermillon);
    clip-path: polygon(50% 0, 78% 38%, 100% 48%, 70% 100%, 50% 78%, 30% 100%, 0 48%, 22% 38%);
  }

  .home-lantern-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--indigo) 10%, var(--paper));
    color: var(--sumi);
  }

  .home-lantern {
    display: block;
    width: 12px;
    height: 14px;
    flex: 0 0 12px;
    color: var(--indigo);
  }

  .home-lantern path,
  .home-lantern ellipse {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .home-trio { position: relative; z-index: 1; margin-top: 14px; }

  .home-today {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 18px;
    margin: 0 0 6px;
    box-sizing: border-box;
  }

  .home-today h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 15px;
    color: var(--ink);
  }

  .home-today-count {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 15px;
    color: var(--sumi);
  }

  #homeTrioRows {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .home-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    height: auto;
    padding: 8px 10px 8px 8px;
    margin: 0;
    border: 1px solid var(--hairline);
    border-left: 2px solid var(--indigo);
    border-radius: 2px;
    box-sizing: border-box;
    background: var(--paper-bright);
    box-shadow: none;
    text-decoration: none;
    color: var(--sumi);
    transition: background-color 80ms linear;
  }

  .home-row[data-game="killer-sudoku"] {
    border-left-color: var(--vermillon);
  }

  .home-row[data-game="binary-puzzle"] {
    border-left-color: var(--matcha);
  }

  .home-row:active { background: var(--gris); }

  .home-row-glyph {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 2px;
  }

  .home-row[data-game="sudoku"] .home-row-glyph {
    background:
      linear-gradient(var(--indigo), var(--indigo)) 50% 33% / 16px 1px no-repeat,
      linear-gradient(var(--indigo), var(--indigo)) 50% 66% / 16px 1px no-repeat,
      linear-gradient(var(--indigo), var(--indigo)) 33% 50% / 1px 16px no-repeat,
      linear-gradient(var(--indigo), var(--indigo)) 66% 50% / 1px 16px no-repeat,
      color-mix(in srgb, var(--indigo) 12%, var(--paper-bright));
  }

  .home-row[data-game="killer-sudoku"] .home-row-glyph {
    background:
      linear-gradient(var(--vermillon), var(--vermillon)) 50% 33% / 16px 1px no-repeat,
      linear-gradient(var(--vermillon), var(--vermillon)) 50% 66% / 16px 1px no-repeat,
      linear-gradient(var(--vermillon), var(--vermillon)) 33% 50% / 1px 16px no-repeat,
      linear-gradient(var(--vermillon), var(--vermillon)) 66% 50% / 1px 16px no-repeat,
      linear-gradient(var(--vermillon), var(--vermillon)) 22% 18% / 9px 1.5px no-repeat,
      linear-gradient(var(--vermillon), var(--vermillon)) 18% 26% / 1.5px 9px no-repeat,
      color-mix(in srgb, var(--vermillon) 12%, var(--paper-bright));
  }

  .home-row[data-game="binary-puzzle"] .home-row-glyph {
    background:
      linear-gradient(var(--matcha), var(--matcha)) 50% 22% / 16px 1px no-repeat,
      linear-gradient(var(--matcha), var(--matcha)) 50% 40% / 16px 1px no-repeat,
      linear-gradient(var(--matcha), var(--matcha)) 50% 58% / 16px 1px no-repeat,
      linear-gradient(var(--matcha), var(--matcha)) 50% 76% / 16px 1px no-repeat,
      linear-gradient(var(--matcha), var(--matcha)) 28% 50% / 1px 16px no-repeat,
      linear-gradient(var(--matcha), var(--matcha)) 50% 50% / 1px 16px no-repeat,
      linear-gradient(var(--matcha), var(--matcha)) 72% 50% / 1px 16px no-repeat,
      color-mix(in srgb, var(--matcha) 14%, var(--paper-bright));
  }

  .home-row-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .home-row-name {
    font-family: var(--font-display), var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    color: var(--ink);
  }

  .home-row-diff {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
  }

  .home-row[data-band="easy"] .home-row-diff { color: var(--indigo); }
  .home-row[data-band="medium"] .home-row-diff { color: var(--matcha); }
  .home-row[data-band="hard"] .home-row-diff { color: var(--vermillon); }

  .home-row-cta {
    flex: 0 0 auto;
    font-family: var(--font-display), var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vermillon);
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
  }

  .home-row-check {
    color: var(--matcha);
    font-size: 12px;
    line-height: 16px;
  }

  .home-row-time {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--sumi);
  }

  .home-row.is-soon,
  .home-row.is-soon .home-row-name,
  .home-row.is-soon .home-row-diff,
  .home-row.is-soon .home-row-cta {
    color: var(--ink-muted);
    pointer-events: none;
  }

  .home-stats {
    display: flex;
    align-items: center;
    height: 28px;
    margin: 10px 0 0;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-muted);
    box-sizing: border-box;
  }

  .home-acc { position: relative; z-index: 1; margin-top: 6px; }

  .home-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: 8px 8px 8px 6px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
  }

  .home-acc-btn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--ink);
  }

  .home-acc-glyph {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }

  .home-acc-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .home-acc-name {
    font-family: var(--font-display), var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: var(--ink);
  }

  .home-acc-meta {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--ink-muted);
  }

  .home-acc-side {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--vermillon);
  }

  .home-acc-fm .home-acc-btn {
    background: color-mix(in srgb, var(--indigo) 7%, var(--paper));
    border-color: color-mix(in srgb, var(--indigo) 18%, var(--gris));
  }

  .home-acc-fm .home-acc-glyph {
    background:
      radial-gradient(circle at 50% 50%, transparent 0 5px, var(--indigo) 5.5px 6.5px, transparent 7px),
      color-mix(in srgb, var(--indigo) 14%, var(--paper));
  }

  .home-acc-explore .home-acc-btn {
    background: color-mix(in srgb, var(--paper-shade) 55%, var(--paper));
    border-color: var(--hairline);
  }

  .home-acc-explore .home-acc-glyph {
    border-radius: 2px;
    background:
      linear-gradient(var(--sumi), var(--sumi)) 50% 33% / 12px 1px no-repeat,
      linear-gradient(var(--sumi), var(--sumi)) 50% 66% / 12px 1px no-repeat,
      linear-gradient(var(--sumi), var(--sumi)) 33% 50% / 1px 12px no-repeat,
      linear-gradient(var(--sumi), var(--sumi)) 66% 50% / 1px 12px no-repeat,
      var(--gris);
  }

  .home-acc-read .home-acc-btn {
    background: color-mix(in srgb, var(--matcha) 8%, var(--paper));
    border-color: color-mix(in srgb, var(--matcha) 20%, var(--gris));
  }

  .home-acc-read .home-acc-glyph {
    background:
      radial-gradient(ellipse 80% 55% at 50% 55%, transparent 0 42%, var(--matcha) 44% 52%, transparent 54%),
      color-mix(in srgb, var(--matcha) 12%, var(--paper));
  }

  .home-acc-chevron {
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1;
  }

  .home-acc-panel {
    padding: 8px 0 0;
  }

  .home-fm-meta {
    margin: 0 0 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-muted);
  }

  .home-fm-list {
    margin: 0 0 8px;
    padding: 0 0 0 1.1em;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--sumi);
  }

  .home-fm-list li { margin: 0 0 4px; }

  .home-text-cta {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-family: var(--font-display), var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--vermillon);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .home-acc-link {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid var(--hairline);
    box-sizing: border-box;
    color: var(--sumi);
    text-decoration: none;
    font-family: var(--font-display), var(--font-sans);
    font-size: 15px;
    font-weight: 500;
  }

  .home-foot {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    padding: 14px 8px 10px;
    border-top: 1px solid var(--hairline);
    min-height: 96px;
    background:
      radial-gradient(120px 40px at 88% 20%, color-mix(in srgb, var(--vermillon) 10%, transparent), transparent 70%);
  }

  .home-foot-motif {
    display: block;
    width: 100%;
    height: 52px;
    margin: 0 0 8px;
    color: var(--sumi);
    opacity: 0.42;
  }

  .home-foot-motif circle {
    fill: var(--vermillon);
    opacity: 0.55;
  }

  .home-foot-motif path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
  }

  .home-foot-note {
    margin: 0 0 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
  }

  .home-support {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0;
  }

  .home-support a {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ink-muted);
    text-decoration: none;
    min-height: 0;
    padding: 0;
  }

  .home-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms linear, visibility 180ms linear;
  }

  .home-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--paper);
    box-shadow: none;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 180ms ease, visibility 180ms linear;
  }

  .home-overlay.is-open,
  .home-sheet.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .home-overlay.is-open { opacity: 1; }
  .home-sheet.is-open { transform: translateX(0); }

  .home-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--hairline);
    box-sizing: border-box;
  }

  .home-sheet-head p {
    margin: 0;
    font-family: var(--font-display), var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .home-sheet-close {
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--sumi);
    font-size: 22px;
    line-height: 1;
  }

  .home-sheet-close:hover {
    background: transparent;
    border: 0;
    color: var(--sumi);
  }

  .home-sheet-nav {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
  }

  .home-sheet-nav a {
    display: flex;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid var(--hairline);
    box-sizing: border-box;
    color: var(--sumi);
    text-decoration: none;
    font-family: var(--font-display), var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    min-height: 0;
    padding: 0;
  }

  body.home .home-row:focus-visible,
  body.home .home-acc-btn:focus-visible,
  body.home .home-text-cta:focus-visible,
  body.home .home-acc-link:focus-visible,
  body.home .home-support a:focus-visible,
  body.home .home-sheet-close:focus-visible,
  body.home .home-sheet-nav a:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .home-overlay,
    .home-sheet,
    .home-row {
      transition: none;
    }
  }
}

/* /shell.css */
/* DIGIGMA global shell — lot 4.
   Imports isolated DS tokens + components. Scoped to body.ds-shell.
   Play pages (sudoku / killer / binary) must not link this file. */


/* @import /fonts/fonts.css */
/* Self-hosted Google Fonts (SEO/perf 2026-11-03): Inter, IBM Plex Mono, JetBrains Mono, Sora.
   latin + latin-ext subsets only (the six site languages). font-display: swap. OFL licensed. */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-4af8cef5.woff2?v=4af8cef5) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-bb87500e.woff2?v=bb87500e) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-3e942f42.woff2?v=3e942f42) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-d32f0e07.woff2?v=d32f0e07) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-e57611a8.woff2?v=e57611a8) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ce9a5ca3.woff2?v=ce9a5ca3) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-15aaeeab.woff2?v=15aaeeab) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-223677cf.woff2?v=223677cf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-cf3eb50f.woff2?v=cf3eb50f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-latin-f11d729b.woff2?v=f11d729b) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-06ad3600.woff2?v=06ad3600) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-4f27206c.woff2?v=4f27206c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-5ad15d91.woff2?v=5ad15d91) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/sora-latin-779e9507.woff2?v=779e9507) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-5ad15d91.woff2?v=5ad15d91) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/sora-latin-779e9507.woff2?v=779e9507) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-5ad15d91.woff2?v=5ad15d91) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/sora-latin-779e9507.woff2?v=779e9507) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* @import /ds/tokens.css */
/* DIGIGMA design system — moodboard tokens.
   Isolated. Live pages keep prototype/shared/tokens.css until a later lot imports this file.
   --washi is a texture URL. Page fill is --paper / --washi-color.
   html.is-play.ds-root beats shared/play.css so play pages inherit this palette.

   Inter/Sora stay the brand faces (the existing Google CSS, display=swap).
   These local faces only scale DejaVu Sans, the Linux system sans this site
   actually falls back to, so the swap keeps the same line breaks. The percentages
   are median advance-width ratios at 16px (DejaVu → Inter/Sora) for weights the
   UI uses. A machine without that local face ignores the family.
   Names are Inter Metric / Sora Metric so they do not override the tutorial's
   separate Inter Fallback / Sora Fallback faces. */

@font-face {
  font-family: "Inter Metric";
  src: local("DejaVu Sans");
  font-weight: 100 449;
  font-style: normal;
  size-adjust: 94.42%;
}
@font-face {
  font-family: "Inter Metric";
  src: local("DejaVu Sans");
  font-weight: 450 599;
  font-style: normal;
  size-adjust: 95.53%;
}
@font-face {
  font-family: "Inter Metric";
  src: local("DejaVu Sans Bold");
  font-weight: 600 649;
  font-style: normal;
  size-adjust: 85.6%;
}
@font-face {
  font-family: "Inter Metric";
  src: local("DejaVu Sans Bold");
  font-weight: 650 799;
  font-style: normal;
  size-adjust: 86.46%;
}
@font-face {
  font-family: "Inter Metric";
  src: local("DejaVu Sans Bold");
  font-weight: 800 900;
  font-style: normal;
  size-adjust: 87.8%;
}
@font-face {
  font-family: "Sora Metric";
  src: local("DejaVu Sans");
  font-weight: 100 599;
  font-style: normal;
  size-adjust: 102.01%;
}
@font-face {
  font-family: "Sora Metric";
  src: local("DejaVu Sans Bold");
  font-weight: 600 649;
  font-style: normal;
  size-adjust: 90.63%;
}
@font-face {
  font-family: "Sora Metric";
  src: local("DejaVu Sans Bold");
  font-weight: 650 900;
  font-style: normal;
  size-adjust: 91.17%;
}

.ds-root,
[data-ds-theme="light"],
html.is-play.ds-root,
html.is-play.ds-root[data-ds-theme="light"] {
  color-scheme: light;

  --washi-color: #FCE9B8;
  --paper: #FCE9B8;
  --paper-bright: #FFF9E8;
  --paper-wash: #F4D4A0;
  --paper-shade: #F8EACC;
  --sumi: #2B2419;
  --ink: #2B2419;
  --ink-strong: #201A12;
  --ink-soft: #FCE9B8;
  --ivory: #FFF9E8;
  --muted: #6A5638;
  --note: #856B42;
  --sand: #DDBB72;

  --gris: #F4D4A0;
  --line: #DDBB72;
  --line-strong: #D28F08;
  --hairline: color-mix(in srgb, var(--ink) 16%, transparent);

  --indigo: #3547B3;
  --indigo-hover: #2A3896;
  --indigo-soft: color-mix(in srgb, #3547B3 16%, var(--paper));
  --indigo-glow: color-mix(in srgb, #3547B3 28%, var(--paper));
  --accent: var(--indigo);
  --accent-soft: var(--indigo-soft);
  --accent-hover: var(--indigo-hover);

  --header-bg: #FFF6E4;
  --header-line: #E4C98A;
  --header-ink: #2B2419;
  --header-theme: #FFF6E4;
  --motif-digits-size: 900px 640px;
  --motif-digits-size-compact: 1100px 780px;

  --game-sudoku: #3547B3;
  --game-killer: #D45E3D;
  --game-binary: #2E8B7A;
  --game-futoshiki: #C88708;
  --game-kakuro: #6B5B95;
  --game-codebreaker: #E07A5F;

  --cta: #946526;
  --cta-hover: #7E541F;
  --cta-ink: #FFF9E8;
  --premium: #62417A;
  --premium-hover: #4E3363;
  --premium-soft: color-mix(in srgb, #62417A 16%, var(--paper));
  --premium-ink: #F4D675;
  --motif-wave: url("/brand/seigaiha.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");
  --motif-digits: url("/brand/digits.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");
  --motif-digits-dark: url("/brand/digits-dark.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");
  /* Warm caramel/chocolate wash + subtle digits (no wave/arcs). */
  --page-motif-warm:
    radial-gradient(1040px 520px at 5% -10%, color-mix(in srgb, #8B5E2E 17%, transparent) 0%, transparent 54%),
    radial-gradient(780px 400px at 108% 6%, color-mix(in srgb, #5C3A18 13%, transparent) 0%, transparent 48%),
    radial-gradient(680px 380px at 50% 112%, color-mix(in srgb, #C88708 11%, transparent) 0%, transparent 50%);
  /* Warm expands to three radial layers; size/repeat must list all four layers
     or a wash gets the digits tile size and paints a visible rectangle seam. */
  --page-motif-image: var(--page-motif-warm), var(--motif-digits);
  --page-motif-repeat: no-repeat, no-repeat, no-repeat, repeat;
  --page-motif-size: auto, auto, auto, var(--motif-digits-size, 900px 640px);

  --matcha: #7F9252;
  --matcha-soft: color-mix(in srgb, #7F9252 16%, var(--paper));
  --ok: var(--matcha);

  --vermillon: #D45E3D;
  --vermillion: #D45E3D;
  --vermillon-soft: color-mix(in srgb, #D45E3D 14%, var(--paper));
  --bad: var(--vermillon);

  --entry: var(--indigo);
  --same: var(--matcha-soft);
  --sel: var(--indigo);
  --sel-bg: var(--indigo-soft);
  --hi: var(--paper-wash);
  --cell: var(--paper-bright);
  --given: var(--ink-strong);

  --washi: url("/brand/washi.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");
  --ink-stroke: url("/brand/ink-stroke.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");

  --font-display: "Sora", "Sora Metric", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", "Inter Metric", "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-digits: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font: var(--font-sans);

  --weight-given: 800;
  --weight-entry: 500;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-board: 2px;

  --shadow-1: 0 1px 1px rgba(45, 36, 27, 0.08);
  --shadow-card: 0 1px 2px rgba(45, 36, 27, 0.08), 0 10px 28px rgba(45, 36, 27, 0.10);
  --shadow-hover: 0 2px 6px rgba(45, 36, 27, 0.10), 0 14px 32px rgba(45, 36, 27, 0.12);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--indigo);

  --motif-opacity: 0.04;
  --motion: 180ms;
  --motion-slow: 280ms;

  /* Mobile-first page measure: ~95% of the viewport, centered. */
  --mobile-content-width: 95%;
  --mobile-gutter: 2.5%;

  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --btn: transparent;
  --btn-hover: var(--paper-wash);
  --gold: var(--indigo);
  --gold-fill: var(--indigo);
  --gold-border: var(--indigo);
  --gold-hover: var(--indigo-hover);

  --board-cell: #FFF6DC;
  --board-cell-hi: color-mix(in srgb, var(--ink) 5%, var(--board-cell));
  --board-cell-same: color-mix(in srgb, #5F8F3E 16%, var(--board-cell));
  --board-cell-same-note: color-mix(in srgb, #5F8F3E 9%, var(--board-cell));
  --board-cell-sel: color-mix(in srgb, var(--play-ring-active) 18%, var(--board-cell));
  --board-cell-hover: var(--paper-wash);
  --board-cell-ok: var(--matcha-soft);
  --board-cell-bad: var(--vermillon-soft);
  --board-line: color-mix(in srgb, var(--ink) 18%, var(--line));
  --board-line-strong: var(--ink);
  --board-frame: var(--ink);
  --board-given: #140F0A;
  --board-given-fill: #D6BE8E;
  --board-entry: #2438C9;
  --board-note: var(--note);
  --board-digit-ok: #3F6A2C;
  --board-digit-bad: var(--vermillon);
  --board-cage: color-mix(in srgb, var(--ink) 36%, var(--line));
  --board-cage-sum: var(--ink-strong);
  --board-cage-a: color-mix(in srgb, var(--indigo) 6%, var(--board-cell));
  --board-cage-b: color-mix(in srgb, var(--vermillon) 5%, var(--board-cell));
  --board-cage-c: color-mix(in srgb, var(--matcha) 6%, var(--board-cell));
  --play-ring-active: #19D65A;
  --play-ring-same: #5F8F3E;
  --play-halo-active: color-mix(in srgb, var(--play-ring-active) 28%, transparent);
  --play-halo-same: color-mix(in srgb, #5F8F3E 20%, transparent);
  --board-bin-0: var(--ink);
  --board-bin-1: var(--indigo);
  --board-bin-warn: var(--vermillon-soft);
  --board-bin-warn-line: var(--vermillon);
  --board-key: var(--paper-bright);
  --board-key-line: var(--line);
  --board-clock: var(--ink);
  --grid-thin: var(--board-line);
  --grid-strong: var(--board-line-strong);
  /* Keypad chrome (--keypad-key-*) is owned by play.css on html.is-play / body.
     Do not redefine here — body.ds-root would shadow the play SSOT. DS demos use
     .ds-keypad local fallbacks in boards.css. */
}

.ds-root[data-ds-theme="dark"],
[data-ds-theme="dark"],
html.is-play.ds-root[data-ds-theme="dark"] {
  color-scheme: dark;

  --washi-color: #241A14;
  --paper: #241A14;
  --paper-bright: #3A2C22;
  --paper-wash: #30241C;
  --paper-shade: #443328;
  --sumi: #241A14;
  --ink: #F3E9D8;
  --ink-strong: #F7F0E2;
  --ink-soft: #241A14;
  --ivory: #F3E9D8;
  --muted: #CDBDA3;
  --note: #B8A88C;
  --sand: #E0C078;

  --gris: #443328;
  --line: #66513E;
  --line-strong: #E0C078;
  --hairline: color-mix(in srgb, var(--ivory) 16%, transparent);

  --indigo: #8E9BE8;
  --indigo-hover: #A4AEEE;
  --indigo-soft: color-mix(in srgb, #8E9BE8 20%, var(--paper));
  --indigo-glow: color-mix(in srgb, #8E9BE8 30%, var(--paper));
  --accent: var(--indigo);
  --accent-soft: var(--indigo-soft);
  --accent-hover: var(--indigo-hover);

  --header-bg: #2A2218;
  --header-line: #5A4A32;
  --header-ink: #F3E9D8;
  --header-theme: #2A2218;
  --motif-digits-size: 900px 640px;
  --motif-digits-size-compact: 1100px 780px;

  --game-sudoku: #8E9BE8;
  --game-killer: #E07A5A;
  --game-binary: #5BA89A;
  --game-futoshiki: #D28F08;
  --game-kakuro: #A890C8;
  --game-codebreaker: #E07A5F;

  --cta: #946526;
  --cta-hover: #7E541F;
  --cta-ink: #FFF9E8;
  --premium: #9B7BB3;
  --premium-hover: #B396C8;
  --premium-soft: color-mix(in srgb, #9B7BB3 22%, var(--paper));
  --premium-ink: #F4D675;
  --motif-digits: url("/brand/digits-dark.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");
  --page-motif-warm:
    radial-gradient(1040px 520px at 5% -10%, color-mix(in srgb, #E0C078 15%, transparent) 0%, transparent 52%),
    radial-gradient(760px 400px at 108% 8%, color-mix(in srgb, #946526 14%, transparent) 0%, transparent 46%),
    radial-gradient(640px 360px at 48% 108%, color-mix(in srgb, #C88708 9%, transparent) 0%, transparent 48%);

  --matcha: #9AAB6A;
  --matcha-soft: color-mix(in srgb, #9AAB6A 18%, var(--paper));
  --ok: var(--matcha);

  --vermillon: #E07A5A;
  --vermillion: #E07A5A;
  --vermillon-soft: color-mix(in srgb, #E07A5A 16%, var(--paper));
  --bad: var(--vermillon);

  --entry: var(--indigo);
  --same: var(--matcha-soft);
  --sel: var(--indigo);
  --sel-bg: var(--indigo-soft);
  --hi: var(--paper-wash);
  --cell: var(--paper-bright);
  --given: var(--ink-strong);

  --shadow-1: 0 1px 1px rgba(18, 10, 6, 0.36);
  --shadow-card: 0 1px 2px rgba(18, 10, 6, 0.36), 0 12px 28px rgba(18, 10, 6, 0.42);
  --shadow-hover: 0 2px 8px rgba(18, 10, 6, 0.40), 0 16px 36px rgba(18, 10, 6, 0.46);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--indigo);

  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --btn-hover: var(--paper-bright);
  --gold: var(--indigo);
  --gold-fill: var(--indigo);
  --gold-border: var(--indigo);
  --gold-hover: var(--indigo-hover);

  --board-cell: #443328;
  --board-cell-hi: color-mix(in srgb, var(--ink) 7%, var(--board-cell));
  --board-cell-same: color-mix(in srgb, #9AAB6A 18%, var(--board-cell));
  --board-cell-same-note: color-mix(in srgb, #9AAB6A 11%, var(--board-cell));
  --board-cell-sel: color-mix(in srgb, var(--play-ring-active) 22%, var(--board-cell));
  --board-cell-hover: var(--paper-wash);
  --board-cell-ok: var(--matcha-soft);
  --board-cell-bad: var(--vermillon-soft);
  --board-line: var(--line);
  --board-line-strong: var(--line-strong);
  --board-frame: var(--line-strong);
  --board-given: #F7F0E2;
  --board-given-fill: #5A4634;
  --board-entry: #9AABF5;
  --board-note: var(--note);
  --board-digit-ok: #C5D88A;
  --board-digit-bad: var(--vermillon);
  --board-cage: color-mix(in srgb, var(--ivory) 38%, var(--line));
  --board-cage-sum: var(--ivory);
  --board-cage-a: color-mix(in srgb, var(--indigo) 12%, var(--board-cell));
  --board-cage-b: color-mix(in srgb, var(--vermillon) 10%, var(--board-cell));
  --board-cage-c: color-mix(in srgb, var(--matcha) 11%, var(--board-cell));
  --play-ring-active: #3EEA72;
  --play-ring-same: #9AAB6A;
  --play-halo-active: color-mix(in srgb, var(--play-ring-active) 32%, transparent);
  --play-halo-same: color-mix(in srgb, #9AAB6A 24%, transparent);
  --board-bin-0: var(--ink);
  --board-bin-1: var(--indigo);
  --board-bin-warn: var(--vermillon-soft);
  --board-bin-warn-line: var(--vermillon);
  --board-key: var(--paper-bright);
  --board-key-line: var(--line);
  --board-clock: var(--ink);
  --grid-thin: var(--board-line);
  --grid-strong: var(--board-line-strong);
}

@media (prefers-reduced-motion: reduce) {
  .ds-root,
  [data-ds-theme="light"],
  [data-ds-theme="dark"] {
    --motion: 0ms;
    --motion-slow: 0ms;
  }
}

/* Warm semantic CTA states; status/difficulty/game identity colors stay separate. */
:root {
  --play-cta-bg: #187B40;
  --play-cta-hover: #146635;
  --play-cta-pressed: #146635;
  --play-cta-disabled: #0F5A2E;
  --play-cta-ink: #FFFFFF;
  --play-cta-secondary-bg: #F8EACC;
  --play-cta-secondary-hover: #F4D4A0;
  --play-cta-secondary-pressed: #DDBB72;
  --play-cta-secondary-ink: #2B2419;
  --play-cta-focus: #187B40;
}



/* @import /ds/components.css */
/* DIGIGMA design system — primitives.
   Scoped to .ds-root. Live home imports this file. Other live pages do not. */

.ds-root {
  box-sizing: border-box;
  min-height: 100%;
  background-color: var(--paper);
  background-image: var(--page-motif-image);
  background-repeat: var(--page-motif-repeat, no-repeat, no-repeat, no-repeat, repeat);
  background-size: var(--page-motif-size);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ds-root *,
.ds-root *::before,
.ds-root *::after { box-sizing: border-box; }

@media (max-width: 760px) {
  .ds-root {
    --page-motif-size: auto, auto, auto, var(--motif-digits-size-compact, 1100px 780px);
  }
}

.ds-root [hidden] { display: none !important; }

.ds-root h1,
.ds-root h2,
.ds-root h3,
.ds-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.ds-kicker,
.ds-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ds-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.ds-logo-word {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ds-logo-mark,
.ds-logo-dot {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: block;
  border-radius: 26%;
  object-fit: contain;
  background: none;
}

.ds-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
}

.ds-nav a,
.ds-nav a:link,
.ds-nav a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
}

.ds-nav a:hover,
.ds-nav a:focus-visible,
.ds-nav a[aria-current="page"] {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition:
    background var(--motion) ease,
    border-color var(--motion) ease,
    color var(--motion) ease,
    box-shadow var(--motion) ease,
    transform var(--motion) ease;
}

.ds-btn:hover {
  background: var(--btn-hover);
  box-shadow: var(--shadow-hover);
}

.ds-btn:active { transform: translateY(1px); }

.ds-btn-primary {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--cta-ink);
  box-shadow: var(--shadow-1);
}

.ds-btn-primary:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: var(--cta-ink);
}

.ds-btn-ghost,
.ds-btn-secondary {
  background: var(--paper-shade);
  border-color: var(--line-strong);
  color: var(--ink-strong);
  box-shadow: var(--shadow-1);
}

.ds-btn-ghost:hover,
.ds-btn-secondary:hover {
  background: color-mix(in srgb, var(--cta) 18%, var(--paper-shade));
  border-color: var(--cta);
  color: var(--ink-strong);
  box-shadow: var(--shadow-1);
}

.ds-btn-danger {
  background: var(--vermillon);
  border-color: var(--vermillon);
  color: var(--ivory);
}

.ds-btn-success {
  background: var(--matcha);
  border-color: var(--matcha);
  color: var(--ivory);
}

.ds-root :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ds-field input,
.ds-field select,
.ds-field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: 8px 12px;
  box-shadow: var(--shadow-1);
}

.ds-card,
.ds-cartouche {
  position: relative;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition: box-shadow var(--motion) ease, transform var(--motion) ease;
}

.ds-card:hover,
.ds-cartouche:hover { box-shadow: var(--shadow-hover); }

.ds-panel {
  position: relative;
  margin: 16px 0 24px;
  padding: 16px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-bright);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.ds-card-accent { border-top: 2px solid var(--indigo); }

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  color: var(--ink);
  font-size: 0.82rem;
}

.ds-chip-indigo {
  background: var(--indigo-soft);
  border-color: color-mix(in srgb, var(--indigo) 35%, var(--line));
  color: var(--indigo);
}

.ds-chip-matcha {
  background: var(--matcha-soft);
  border-color: color-mix(in srgb, var(--matcha) 35%, var(--line));
  color: var(--matcha);
}

.ds-chip-vermillon {
  background: var(--vermillon-soft);
  border-color: color-mix(in srgb, var(--vermillon) 35%, var(--line));
  color: var(--vermillon);
}

.ds-badge,
.ds-soon {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ds-soon {
  color: var(--muted);
  border-style: dashed;
}

.ds-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ds-motif {
  pointer-events: none;
  opacity: var(--motif-opacity);
}

.ds-host {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 72px;
}

.ds-host.is-soon,
.ds-host[aria-disabled="true"] {
  opacity: 0.72;
}

.ds-host.is-soon .ds-host-body,
.ds-host[aria-disabled="true"] .ds-host-body {
  filter: grayscale(0.15);
}

.ds-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
}

.ds-streak strong {
  font-family: var(--font-mono);
  font-weight: 600;
}

.ds-xp {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ds-xp-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gris);
  overflow: hidden;
}

.ds-xp-track > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--indigo);
}

.ds-badge-hex {
  width: 72px;
  height: 80px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--paper-wash);
  border: 0;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
  padding: 10px;
}

.ds-badge-hex.is-locked {
  box-shadow: inset 0 0 0 1px var(--line);
}

.ds-offer {
  display: grid;
  gap: var(--space-4);
}

.ds-offer .ds-price {
  font-family: var(--font-mono);
  font-size: 2rem;
  letter-spacing: -0.03em;
  margin: 0;
}

.ds-share {
  display: grid;
  gap: var(--space-3);
  min-height: 140px;
}

.ds-share-grid {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--ink) 1px, transparent 1px) 0 0 / 33.33% 33.33%,
    linear-gradient(90deg, var(--ink) 1px, transparent 1px) 0 0 / 33.33% 33.33%,
    var(--paper-wash);
  opacity: 0.35;
}

.ds-mode {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  gap: 2px;
}

.ds-mode button {
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.ds-mode button[aria-pressed="true"] {
  background: var(--indigo);
  color: var(--ivory);
}

.ds-pulse-ok {
  animation: ds-pulse-ok var(--motion-slow) ease;
}

.ds-shake-bad {
  animation: ds-shake-bad 240ms ease;
}

@keyframes ds-pulse-ok {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--matcha) 0%, transparent); }
  40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--matcha) 28%, transparent); }
  100% { box-shadow: var(--shadow-1); }
}

@keyframes ds-shake-bad {
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-pulse-ok,
  .ds-shake-bad { animation: none; }
}

/* Mobile-first: main surfaces use ~95% width and stay centered.
   Keep a narrower measure only when type, a board, or a modal needs it. */
@media (max-width: 760px) {
  .ds-root .ds-card,
  .ds-root .ds-cartouche,
  .ds-root .ds-panel,
  .ds-root .ds-form,
  .ds-root .ds-list,
  .ds-root .ds-offer,
  .ds-root .ds-share {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .ds-root .ds-field input,
  .ds-root .ds-field select,
  .ds-root .ds-field textarea {
    width: 100%;
    max-width: none;
  }

  .ds-root .ds-actions,
  .ds-root .ds-hero-actions,
  .ds-root .ds-keypad {
    width: var(--mobile-content-width, 95%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .ds-root .ds-actions:has(> :nth-child(-n+3):last-child),
  .ds-root .ds-hero-actions:has(> :nth-child(-n+3):last-child),
  .ds-root .ds-keypad:has(> :nth-child(-n+3):last-child) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ds-root .ds-actions:has(> :nth-child(-n+3):last-child) > *,
  .ds-root .ds-hero-actions:has(> :nth-child(-n+3):last-child) > *,
  .ds-root .ds-keypad:has(> :nth-child(-n+3):last-child) > * {
    width: 100%;
    min-width: 0;
    min-height: 52px;
  }
}



/* @import /shared/site-chrome.css */

/* @import /shared/dig-ui.css */
/* Shared amount surface stays pale in both themes; never inherit CTA ink. */
.dig-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--cta, #C88708) 44%, var(--line, #DDBB72));
  border-radius: 999px;
  background: color-mix(in srgb, #FFF9E8 90%, #C88708);
  line-height: 1;
  vertical-align: middle;
}

.dig-compact img {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-bright, #FFF9E8) 80%, #F4D675);
  border: 1px solid color-mix(in srgb, var(--cta, #C88708) 38%, transparent);
  padding: 1px;
}

.dig-compact.dig-compact-framed > .dig-compact-value {
  color: #2B2419 !important;
  -webkit-text-fill-color: #2B2419;
  opacity: 1;
}



/* Canonical DIGIGMA header, overlay, and footer.
   Loaded by homepage, shell pages, and Play. Do not restyle from play.css. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 8px 12px;
  background-color: var(--header-bg, #FFF6E4);
  border-bottom: 1px solid var(--header-line, #E4C98A);
  color: var(--header-ink, var(--ink));
}

.site-header::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--game-sudoku, #3547B3),
    var(--game-binary, #2E8B7A),
    var(--game-codebreaker, #E07A5F),
    var(--game-kakuro, #6B5B95),
    var(--game-futoshiki, #C88708)
  );
  opacity: 0.42;
  pointer-events: none;
}

.site-header.is-nav-open {
  z-index: 50;
}

.site-header .brand,
.site-header .ds-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.site-header .brand h1,
.site-header .ds-logo-word {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink, #2B2419);
  text-shadow: 0 1px 0 color-mix(in srgb, #fff 65%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
}

.site-header .ds-logo-mark,
.site-header .ds-logo-dot {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  /* 26% of 42px ≈ 11px — same ratio as footer and baked brand assets */
  border-radius: 26%;
  background: none;
  object-fit: contain;
  display: block;
}

.site-header .mark { display: none; }

/* Crawlable SSR destinations never expose a second menu or hidden tab stops. */
.site-header > .shell-seo-nav { display: none !important; }
.site-header { box-sizing: border-box; height: 64px; min-height: 64px; max-height: 64px; }

.shell-nav,
.site-header .nav {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 12px;
}

.site-header,
.site-footer {
  --nav-link-color: var(--header-ink, var(--ink));
  --nav-link-hover: #A86E06;
  --nav-link-active: var(--indigo, #3547B3);
  --nav-link-size: 0.86rem;
  --nav-link-weight: 500;
  --nav-link-tracking: 0.01em;
}

.site-footer {
  --nav-link-size: 0.78rem;
  overflow-x: clip;
}

html[data-ds-theme="dark"] .site-header,
html[data-ds-theme="dark"] .site-footer {
  --nav-link-hover: #E0C078;
  --nav-link-active: var(--indigo, #8E9BE8);
}

.shell-nav .shell-logout,
.shell-nav a,
.shell-nav a:link,
.shell-nav a:visited,
.site-header .nav > a,
.site-header .nav > a:link,
.site-header .nav > a:visited,
.footer-links a,
.footer-links a:link,
.footer-links a:visited,
.site-footer .footer-links a,
.site-footer .footer-links a:link,
.site-footer .footer-links a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--nav-link-color);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--nav-link-size);
  font-weight: var(--nav-link-weight);
  letter-spacing: var(--nav-link-tracking);
  text-transform: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.shell-nav .shell-logout:hover,
.shell-nav a:hover,
.site-header .nav > a:hover,
.footer-links a:hover,
.site-footer .footer-links a:hover {
  color: var(--nav-link-hover);
  border-bottom-color: var(--nav-link-hover);
}

.shell-nav a[aria-current="page"],
.site-header .nav > a[aria-current="page"],
.footer-links a[aria-current="page"],
.site-footer .footer-links a[aria-current="page"] {
  color: var(--nav-link-active, var(--indigo, #3547B3));
  border-bottom-color: var(--nav-link-active, var(--indigo, #3547B3));
  font-weight: 600;
}

.shell-nav .shell-logout:focus-visible,
.shell-nav a:focus-visible,
.site-header .nav > a:focus-visible,
.footer-links a:focus-visible,
.site-footer .footer-links a:focus-visible {
  color: var(--nav-link-active, var(--indigo, #3547B3));
  outline: 2px solid var(--nav-link-active, var(--indigo, #3547B3));
  outline-offset: 3px;
  border-bottom-color: transparent;
}

.nav-panel {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  margin-left: 28px;
}

.shell-bar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}

.locale-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
}

.locale-switch .locale-flag,
.locale-switch .player-flag {
  width: 22px;
  height: 16px;
  flex: 0 0 22px;
  pointer-events: none;
}

.locale-switch .locale-flag svg,
.locale-switch .player-flag svg {
  display: block;
  width: 22px;
  height: 16px;
}

.locale-switch-hit {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.locale-switch select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 44px;
  min-width: 44px;
  max-width: none;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 16px;
}

.nav-toggle-bars span {
  display: block;
  height: 1px;
  background: currentColor;
}

.shell-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--sumi, #2B2419) 42%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion, 0.2s) ease;
}

.is-nav-open .shell-overlay,
.site-header.is-nav-open + .shell-overlay,
.shell-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-header.is-nav-open .nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: min(17.5rem, 86vw);
  max-width: 17.5rem;
  height: auto;
  max-height: 100dvh;
  margin: 0;
  padding: 12px 14px max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--paper-bright);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  overflow-y: auto;
}

.site-header.is-nav-open .shell-nav,
.site-header.is-nav-open .nav {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.site-header.is-nav-open .shell-nav .shell-logout,
.site-header.is-nav-open .shell-nav a,
.site-header.is-nav-open .nav > a {
  min-height: 44px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}

.shell-account-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.shell-nav .shell-logout {
  appearance: none;
  width: auto;
  margin: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.shell-nav .shell-logout:disabled { opacity: 0.6; cursor: wait; }

.site-header.is-nav-open .shell-account-group {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 12px 0 0;
  padding: 8px 0 0;
  border-left: 0;
  border-top: 1px solid var(--line);
}

.site-footer {
  margin-top: auto;
  padding: 24px 16px 28px;
  border-top: 1px solid var(--header-line, var(--line));
  background: color-mix(in srgb, var(--header-bg, #FFF6E4) 42%, var(--paper));
  color: var(--muted);
  text-align: center;
}

.site-footer::before {
  content: none;
  display: none;
}

.footer-inner,
.site-footer .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(1120px, 100%);
  max-width: none;
  margin: 0 auto;
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
}

.footer-brand .ds-logo-word {
  display: block;
  line-height: 1;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
}

.footer-brand .mark { display: none; }

.footer-brand .ds-logo-mark,
.footer-brand .ds-logo-dot {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  /* 26% of 32px ≈ 8px — same ratio as the 42px header mark */
  border-radius: 26%;
  background: none;
  object-fit: contain;
  display: block;
}

.footer-links,
.site-footer .footer-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  max-width: 100%;
}

.footer-links a,
.site-footer .footer-links a {
  padding: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.footer-sep {
  color: var(--muted);
  user-select: none;
  flex: 0 0 auto;
}

.footer-copyright {
  margin: 4px 0 0;
  width: 100%;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

@media (max-width: 760px) {
  .site-footer {
    text-align: center;
  }

  .footer-inner,
  .site-footer .footer-inner {
    width: var(--mobile-content-width, 95%);
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }

  .footer-links,
  .site-footer .footer-links {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  /* Keep Help · Privacy · Legal on one row on small phones; tighten type/gap. */
  .site-footer {
    --nav-link-size: 0.72rem;
  }

  .footer-links,
  .site-footer .footer-links {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px 6px;
  }

  .footer-sep {
    display: inline;
    font-size: 0.72rem;
  }
}

.nav-games { display: none; }

.site-header .badge,
.site-header .badge-gold {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  min-height: 22px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--cta, #C88708) 40%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cta, #C88708) 12%, var(--paper-bright));
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.shell-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  text-decoration: none;
}
.shell-auth-signin {
  min-height: 36px;
  min-width: auto;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.78rem;
  box-shadow: none;
}
.shell-auth-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-bright, #fff) 70%, var(--paper));
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  pointer-events: none;
  flex: 0 0 auto;
}
.shell-auth-avatar img,
.shell-auth-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
}
.shell-auth-avatar.is-founder {
  border-color: var(--cta, #C88708);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cta, #C88708) 35%, transparent);
}
#shellAccount.shell-auth-in,
#shellAccountSheet.shell-auth-in {
  min-height: 36px;
  padding: 2px 8px 2px 2px;
  border-radius: var(--radius-pill, 999px);
  box-shadow: none;
}
.shell-auth-label {
  font-size: 0.78rem;
}

@media (max-width: 767px) {
  #shellAccount.shell-auth-signin {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .site-header .ds-logo-word,
  body.home .site-header .ds-logo-word {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }
  .site-header .brand,
  .site-header .ds-logo {
    gap: 6px;
  }
  .site-header { padding: 8px; gap: 6px; }
  .shell-bar-end { gap: 6px; }
  .locale-switch {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .locale-switch select {
    min-height: 36px;
    min-width: 36px;
  }
  .nav-toggle {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 390px) {
  #shellAccount.shell-auth-signin {
    max-width: 5.6rem;
    padding: 4px 8px;
  }
}

@media (max-width: 339px) {
  .site-header { padding: 8px 6px; gap: 4px; }
  .shell-bar-end { gap: 4px; }
  .site-header .ds-logo-word,
  body.home .site-header .ds-logo-word {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
  .site-header .brand,
  .site-header .ds-logo {
    gap: 4px;
  }
}

@media (max-width: 1179px) {
  .site-header .brand,
  .site-header .ds-logo { flex: 0 0 auto; }
  .nav-panel {
    flex: 0 0 0;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

@media (min-width: 1024px) {
  .shell-nav { gap: var(--space-1, 4px) var(--space-4, 16px); }
  .shell-nav { --nav-link-size: 0.92rem; }
}

/* Keep the three-line menu indicator visible for signed-in users at every width. */
@media (min-width: 1180px) {
  .site-header .nav-toggle .shell-menu-wallet { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shell-overlay,
  .site-header .nav-panel { transition: none; }
}


/* Add to Home Screen — mobile/tablet sheet only; on-demand dialog */
.shell-add-home {
  display: none;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--nav-link-color, var(--ink));
  font-family: var(--font-sans);
  font-size: var(--nav-link-size, 0.86rem);
  font-weight: var(--nav-link-weight, 500);
  letter-spacing: var(--nav-link-tracking, 0.01em);
  text-align: left;
  cursor: pointer;
}
.site-header.is-nav-open .shell-add-home {
  display: inline-flex;
}
.shell-add-home:hover,
.shell-add-home:focus-visible {
  color: var(--nav-link-hover, #A86E06);
}
.shell-add-home:focus-visible {
  outline: 2px solid var(--nav-link-active, var(--indigo, #3547B3));
  outline-offset: 3px;
}
@media (min-width: 1180px) {
  .shell-add-home {
    display: none !important;
  }
}

.add-home-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--sumi, #2B2419) 42%, transparent);
}
.add-home-dialog[hidden] {
  display: none !important;
}
.add-home-card {
  width: min(22rem, 100%);
  max-height: min(90dvh, 36rem);
  overflow-y: auto;
  padding: 18px 18px 14px;
  background: var(--paper-bright, #FFF6E4);
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-card, var(--shadow));
  color: var(--ink);
}
.add-home-card h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  line-height: 1.3;
}
.add-home-lead,
.add-home-intro,
.add-home-hint,
.add-home-icon-note {
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.45;
}
.add-home-home {
  margin: 0 0 12px;
}
.add-home-dialog.is-on-home .add-home-home {
  display: none;
}
.add-home-dialog.is-on-home .add-home-body {
  margin-top: 2px;
}
.add-home-home-link {
  color: var(--indigo, #3547B3);
  text-underline-offset: 3px;
}
.add-home-steps {
  margin: 0 0 12px;
  padding-left: 1.2em;
  font-size: 0.98rem;
  line-height: 1.45;
}
.add-home-steps li {
  margin: 0 0 6px;
}
.add-home-icon-note {
  color: var(--muted);
  font-size: 0.9rem;
}
.add-home-close {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 4px 0 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.add-home-close:hover,
.add-home-close:focus-visible {
  color: var(--ink);
}
.add-home-close:focus-visible {
  outline: 2px solid var(--nav-link-active, var(--indigo, #3547B3));
  outline-offset: 3px;
}
@media (max-width: 420px) {
  .add-home-card {
    width: min(95vw, 100%);
    padding: 16px 14px 12px;
  }
}

/* Restore must resolve before guest controls appear. */
#shellBecomeMember[hidden], #shellAccountGroup[hidden], #shellLanguage[hidden], #shellAccount[hidden], #shellAccountSheet[hidden], #shellLogout[hidden] { display: none !important; }
.locale-globe { width: 20px; height: 20px; display: inline-flex; pointer-events: none; }
.locale-globe svg { width: 100%; height: 100%; }
.locale-switch:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Shared drawer trigger at every viewport width. */
@media (min-width: 0px) {
  .site-header .nav-toggle { display: inline-flex; width: auto; min-width: 44px; min-height: 44px; padding: 0 12px; gap: 9px; }
}
.site-header .nav-panel[hidden] { display: none !important; }
.site-header.is-nav-open .nav-panel {
  top: 64px;
  width: min(22rem, 95vw);
  max-width: 95vw;
  max-height: calc(100dvh - 64px);
  height: auto;
  overscroll-behavior: contain;
}
.site-header.is-nav-open .shell-account-group { gap: 12px; }
.site-header .shell-account-group #shellAccount { width: 100%; max-width: none; justify-content: flex-start; }
.site-header .shell-nav .locale-switch { margin-top: 16px; flex-shrink: 0; }
.site-header .nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The trigger remains visible while the drawer overlays a scrolled page. */
.site-header.is-nav-open { position: sticky; top: 0; z-index: 50; }
.site-header.is-nav-open .shell-bar-end { position: relative; z-index: 2; }
.site-header .shell-account-group #shellAccount.shell-auth-signin {
  width: auto; max-width: 100%; align-self: flex-start; justify-content: center;
  min-height: 44px; padding: 8px 16px; border-radius: var(--radius-sm);
}

/* Unread messages are visible even with the navigation closed. */
.message-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.5rem; height:1.5rem; padding:0 .3rem; margin-inline-start:.5rem; border-radius:99px; background:#9b3e28; color:#fff9e8; font:700 .75rem/1 system-ui,sans-serif; }
.message-badge[hidden] { display:none; }
.message-toast-link { color:inherit; font-weight:600; }

/* One compact guest action row; native language options inherit site typography. */
.site-header .shell-auth-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line); }
.site-header .shell-auth-row .shell-account-group { margin:0; padding:0; border:0; flex:1 1 auto; }
.site-header .shell-guest-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.site-header .shell-guest-actions #shellBecomeMember { border:0; padding:0; font-size:.85rem; line-height:1.3; }
.site-header .shell-guest-actions .locale-switch { margin:0; }
.site-header .locale-switch select,.site-header .locale-switch option { font-family:Inter,Arial,sans-serif; font-size:14px; font-weight:400; color:var(--ink); background:var(--paper-bright); }
.site-header .shell-auth-row:has(.shell-guest-actions > [hidden]:first-child) .shell-account-group { width:100%; }

.site-header .shell-guest-actions #shellBecomeMember { white-space:nowrap; }

/* Account and its explicit logout control share one row. */
.site-header .shell-auth-row .shell-account-group { display:flex; flex-direction:row; align-items:center; gap:10px; min-width:0; }
.site-header .shell-account-group #shellAccount { flex:1 1 auto; width:auto; min-width:0; }
.site-header .shell-account-group #shellLogout { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink); }
.site-header #shellLogout:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.site-header .shell-guest-actions:has(> [hidden]:first-child):has(> [hidden]:last-child) { display:none; }

/* Shared action buttons across account, catalogue, dialogs and messages. */
html body :is(.btn,.ds-btn,button.primary) { min-height:44px; padding:10px 16px; border-radius:8px; font-family:var(--font-sans,Inter,Arial,sans-serif); font-size:.95rem; font-weight:600; letter-spacing:0; line-height:1.25; text-align:center; }
html body :is(.btn.primary,.ds-btn-primary,button.primary) { color:var(--cta-ink,#FFF9E8); background-color:var(--cta,#946526); border-color:var(--cta,#946526); }
html body :is(.btn.primary,.ds-btn-primary,button.primary):hover { color:var(--cta-ink,#FFF9E8); background-color:var(--cta-hover,#7E541F); border-color:var(--cta-hover,#7E541F); }

/* Message alert: envelope, sender and a distinct, compact cream card. */
.message-toast-link { display:flex; align-items:center; gap:12px; min-width:0; flex:1; padding:4px; text-decoration:none; }
.message-toast-icon { display:grid; place-items:center; flex:0 0 44px; height:44px; background:#eee5f2; color:#654383; border-radius:12px; }
.message-toast-content { display:flex; flex-direction:column; gap:3px; min-width:0; }
.message-toast-title { font-size:.8rem; font-weight:400; }
.message-toast-content strong { font-size:1rem; overflow-wrap:anywhere; }
.message-toast-link:hover strong { text-decoration:underline; }
.message-toast-link:focus-visible { outline:2px solid #654383; outline-offset:2px; }

/* The account drawer uses a labelled action at every width, never an avatar-only pill. */
.site-header .shell-account-group #shellAccount.shell-auth-in {
  display:flex; align-items:center; gap:10px; min-height:48px; padding:7px 10px;
  border-radius:10px; overflow:visible; white-space:normal;
}
.site-header #shellAccount.shell-auth-in .shell-auth-copy {
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0;
}
.site-header #shellAccount.shell-auth-in .shell-auth-label {
  display:block; min-width:0; font-size:.95rem; line-height:1.25; overflow-wrap:anywhere;
}
.site-header #shellAccount.shell-auth-in .shell-auth-username {
  display:block; max-width:100%; color:var(--muted); font-size:.76rem; line-height:1.2;
  font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.site-header #shellAccount.shell-auth-in .shell-auth-avatar { width:32px; height:32px; flex:0 0 32px; }
.site-header #shellAccount.shell-auth-in .badge { display:none; }

/* Account identity and DIG wallet remain visible while the menu is closed. */
#shellMenuAvatar[hidden], #shellMenuWallet[hidden], #shellMenuLabel[hidden] { display:none !important; }
.shell-menu-avatar { width:30px; height:30px; flex:0 0 30px; overflow:hidden; border-radius:50%; }
.shell-menu-avatar .shell-auth-avatar-img { width:30px; height:30px; object-fit:cover; }
.shell-menu-wallet { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink); }
.shell-menu-wallet img { flex:none; }
@media(max-width:420px) {
  .site-header .nav-toggle { gap:6px; padding-inline:8px; }
  .shell-menu-wallet { gap:3px; font-size:13px; }
  .shell-menu-wallet img { width:22px; height:22px; }
  .shell-menu-avatar, .shell-menu-avatar .shell-auth-avatar-img { width:26px; height:26px; }
  .shell-menu-avatar { flex-basis:26px; }
}


.paywall-resume { display:block; width:fit-content; max-width:100%; box-sizing:border-box; margin:12px 0; padding:12px 16px; border:1px solid currentColor; border-radius:12px; overflow-wrap:anywhere; }

/* First HTML, pending session and reconciled identity share the same geometry. */
.site-header .nav-toggle { width: 160px; flex: 0 0 160px; }
.site-header .nav-toggle-bars { flex: 0 0 16px; }
.site-header .ds-logo-mark {
  background: transparent !important;
}
.shell-menu-wallet img,
.shell-auth-avatar { background-color: var(--line, #e4d8c0); }
.shell-menu-wallet img { border-radius: 50%; }
.site-header .shell-menu-wallet { flex: 0 0 70px; min-width: 0; gap: 3px; padding-inline: 4px; }
.site-header .shell-menu-wallet .dig-compact-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shell-first-paint { pointer-events: none; }
#shellMenuAvatar[hidden], #shellMenuWallet[hidden], #shellMenuLabel[hidden] { display: none !important; }
@media (max-width: 420px) {
  .site-header .nav-toggle { width: 138px; flex-basis: 138px; }
  .site-header .shell-menu-wallet { flex-basis: 66px; }
}
.site-header .shell-menu-wallet img { width: 25px; height: 25px; }
@media (max-width: 420px) {
  .site-header .shell-menu-wallet img { width: 22px; height: 22px; }
}

/* Reserve no extra header space: unread count sits above the menu bars. */
.site-header .nav-toggle { position:relative; }
.site-header .nav-toggle > .message-badge {
  position:absolute; inset-block-start:1px; inset-inline-start:1px;
  margin:0; min-width:16px; height:13px; padding:0 3px;
  box-sizing:border-box; font-size:10px; pointer-events:none;
}
/* Anchor buttons retain their component colours in every link state. */
html body a:is(.btn,.ds-btn):is(:link,:visited,:hover,:active) {
  color:var(--ink); text-decoration:none;
}
html body a:is(.btn.primary,.ds-btn-primary):is(:link,:visited,:hover,:active) { color:var(--cta-ink,#FFF9E8); }
html body a.ds-btn-premium:is(:link,:visited,:hover,:active) { color:var(--premium-ink,#F4D675); }
html body a:is(.btn,.ds-btn):focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
/* Some library renderers wrap the visual button span in the action anchor. */
html body .puzzle-card-actions > a:has(> .btn):is(:link,:visited,:hover,:active) { color:var(--cta-ink,#FFF9E8); text-decoration:none; }

/* QA2: keep the outer slot stable while the guest control stays compact. */
.site-header.is-guest .nav-toggle { width:88px; flex-basis:88px; margin-inline-start:72px; }
.site-header .shell-menu-wallet .dig-compact-value { font-size:16px; font-weight:800; line-height:1.15; font-variant-numeric: tabular-nums; }
.site-header .ds-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.site-header .ds-logo-tagline {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: color-mix(in srgb, var(--ink) 68%, var(--muted));
  text-transform: none;
  max-width: 11rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .site-header .ds-logo-tagline { max-width: 7.5rem; font-size: 0.58rem; }
}
@media (max-width:420px) {
  .site-header.is-guest .nav-toggle { margin-inline-start:50px; }
  .site-header .shell-menu-wallet .dig-compact-value { font-size:16px; }
}
/* Shared purple toast cards supply their own readable foreground. */
#achvToastStack .message-toast-icon { background:transparent; }

/* Outer chrome: avatar + DIG only (no visible username). Legacy nodes stay empty. */
.site-header .shell-header-username { display:none !important; }
.site-header.is-guest :is(.shell-menu-avatar,.shell-menu-wallet) { display:none; }
.site-header:not(.is-guest) .shell-first-menu { display:none; }

.footer-attribution {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  text-decoration: none;
}
.footer-attribution:hover { text-decoration: underline; }
.footer-attribution img { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 18px; }

/* Must follow the unconditional .shell-auth-row padding rule above.
   Otherwise desktop signed-in chrome grows the header past the 64px first-paint box. */
@media (min-width: 1180px) {
  .site-header .shell-auth-row {
    padding-top: 0;
    border-top: 0;
  }
  .site-header .shell-account-group #shellAccount.shell-auth-in {
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* DG-05 / DG-06 — one 12px gap under the sticky header for every game view.
   This file is the header stylesheet (direct link on play, early hub import
   on guide/rules/tutorial), so the gap exists on the first paint. Do not
   hardcode the header height or a game. Later sheets must keep the same gap. */
:root { --crumb-header-gap: 12px; }

/* hub.css gives .page 18px of padding before shell.css (font-gated) zeroes it.
   Lock the shell page box with the header so that padding cannot drop the crumb. */
body.ds-shell > .page {
  padding: 0;
}

html.is-play body > .play-page-hero > .play-breadcrumb,
html.is-play body > .play-page-hero > .lib-breadcrumb,
body.ds-shell .page:has(#howtoGuide) > .lib-breadcrumb,
body.ds-shell[data-v2-page="tutorial"] .page > .lib-breadcrumb,
body.ds-shell[data-game][data-v2-library="1"] > .page > .lib-breadcrumb,
body.home[data-daily-today] > .daily-today-breadcrumb {
  margin-top: var(--crumb-header-gap, 12px);
}



/* @import /shared/breadcrumbs.css */
/* Shared games navigation: full labels, compact rows and visible keyboard focus. */
/* Match the V2 library's existing 12px header inset and 14px card gap.
   Archive heroes live inside padded #playMain; daily heroes precede it.
   Own both cases here, without changing tutorial or library card layouts. */
html.is-play body #playMain:has(> .play-page-hero) {
  padding-top: 0;
}
.play-context.play-page-hero {
  row-gap: 14px;
}
/* 12px is also set in site-chrome.css so the first paint (header stylesheet)
   already has this gap. Keep the same value; do not switch it to padding. */
.play-page-hero > .play-breadcrumb,
.play-page-hero > .lib-breadcrumb {
  margin-block: var(--crumb-header-gap, 12px) 0;
}
/* The row sits within about 1px of wrapping at 320px (Italian "Campo minato › Griglia n°2").
   Median Inter metrics in ds/tokens.css still leave DejaVu a hair wider here, so the
   last crumb drops a line and the gate below jumps. This face is slightly narrower
   than that median and is used only on the crumb, before Inter replaces it. */
@font-face {
  font-family: "Inter Crumb Fallback";
  src: local("DejaVu Sans");
  font-weight: 100 599;
  font-style: normal;
  size-adjust: 93.22%;
}
@font-face {
  font-family: "Inter Crumb Fallback";
  src: local("DejaVu Sans Bold");
  font-weight: 600 900;
  font-style: normal;
  size-adjust: 84.98%;
}
:is(.play-breadcrumb, .lib-breadcrumb) {
  font-family: Inter, "Inter Crumb Fallback", "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 0 0 8px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--paper-bright);
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.35;
}
/* Roundup breadcrumb uses the same medium radius as game-library cards,
   rather than the 4px compact-radius reserved for tiny controls. */
body.home[data-daily-today] > .lib-breadcrumb.daily-today-breadcrumb {
  border-radius: var(--radius, 8px);
}
:is(.play-breadcrumb, .lib-breadcrumb) a,
:is(.play-breadcrumb, .lib-breadcrumb) [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  min-width: 24px;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(.play-breadcrumb, .lib-breadcrumb) [aria-current="page"] {
  font-weight: 600;
  text-decoration: none;
}
:is(.play-breadcrumb, .lib-breadcrumb) a:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Direct-child › separators only (not decorative spans inside links or icons). */
:is(.play-breadcrumb, .lib-breadcrumb) > span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  line-height: 1;
  min-height: 28px;
  padding-block: 0;
}

/* Keep the SSR location; size the breadcrumb itself across all game views.
   Specificity also covers the library and tutorial's later local styles. */
/* V2 game libraries use --library-v2-content-width in catalogue-library.css only. */
html body.ds-shell[data-game]:not([data-v2-library="1"]) .page .lib-breadcrumb,
html body.ds-shell .page:has(#howtoGuide) .lib-breadcrumb,
html body.ds-shell[data-v2-page="tutorial"] .page > .lib-breadcrumb,
html.is-play body .play-page-hero > .play-breadcrumb,
html.is-play body .play-page-hero > .lib-breadcrumb {
  box-sizing: border-box;
  width: var(--teaching-content-width, min(1400px, calc(100vw - 2 * clamp(16px, 2vw, 28px))));
  max-width: none;
  margin-inline: auto;
}
/* Center within legacy library bands that still wrap the crumb (not tutorial/guide). */
html body.ds-shell[data-game]:not([data-v2-library="1"]):not([data-v2-page="tutorial"]) .page .lib-breadcrumb,
html body.ds-shell .page:has(#howtoGuide) .lib-breadcrumb {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-inline: 0;
}
@media (max-width: 767px) {
  html body.ds-shell[data-game]:not([data-v2-library="1"]) .page .lib-breadcrumb,
  html body.ds-shell .page:has(#howtoGuide) .lib-breadcrumb,
  html body.ds-shell[data-v2-page="tutorial"] .page > .lib-breadcrumb,
  html.is-play body .play-page-hero > .play-breadcrumb,
  html.is-play body .play-page-hero > .lib-breadcrumb {
    width: 95vw;
  }
  html.is-play body .play-page-hero > .play-breadcrumb,
  html.is-play body .play-page-hero > .lib-breadcrumb {
    margin-inline: calc((var(--play-content-width) - 95vw) / 2);
  }
}

/* #350 item 5: on touch screens the breadcrumb links are real tap targets, 44px tall. Fine
   pointers (mouse) keep the compact 28px row. Wider coarse viewports keep 44px; phones
   override below with a stacked-row cap so two-line crumbs stay ≤~70px total. */
@media (pointer: coarse) {
  :is(.play-breadcrumb, .lib-breadcrumb) a,
  :is(.play-breadcrumb, .lib-breadcrumb) [aria-current="page"] {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  :is(.play-breadcrumb, .lib-breadcrumb) > span[aria-hidden="true"] {
    min-height: 44px;
  }
}

/* Narrow phones: wrapped crumbs must not stack 44px flex lines (≈88px+). Keep .85rem
   labels, focus-visible rings, and ≥24px hit boxes (WCAG 2.5.8); institutional news
   crumbs share .lib-breadcrumb and inherit this block. */
@media (max-width: 767px) and (pointer: coarse) {
  :is(.play-breadcrumb, .lib-breadcrumb) {
    row-gap: 0;
    padding-block: 2px;
    align-items: flex-start;
  }
  :is(.play-breadcrumb, .lib-breadcrumb) a,
  :is(.play-breadcrumb, .lib-breadcrumb) [aria-current="page"] {
    min-height: 32px;
    min-width: 0;
    justify-content: flex-start;
    align-self: flex-start;
    padding-block: 1px;
  }
  :is(.play-breadcrumb, .lib-breadcrumb) > span[aria-hidden="true"] {
    min-height: 32px;
    align-self: center;
  }
}



/* Digits motif: one fixed paint layer on body.ds-shell::before (align with play
   and home). Single surface — no html+body double SVG (#113). Motif visible on
   desktop and mobile; keep desktop tile size on phones (no denser compact).
   Play boards do not load this file. */
html.ds-root:has(body.ds-shell),
html[data-ds-theme]:has(body.ds-shell),
html.ds-root[data-ds-theme="dark"]:has(body.ds-shell),
html[data-ds-theme="dark"]:has(body.ds-shell),
body.ds-shell.ds-root,
html.ds-root body.ds-shell,
html:not(.is-play) body.ds-shell {
  background-image: none;
  background-color: var(--paper);
}

html:not(.is-play) body.ds-shell,
body.ds-shell {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-sans);
  isolation: isolate;
}

body.ds-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image: var(--page-motif-image);
  background-repeat: var(--page-motif-repeat, no-repeat, no-repeat, no-repeat, repeat);
  background-size: var(--page-motif-size);
}

html.ds-root body.ds-shell .page,
body.ds-shell .page {
  --page-gutter: 0px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
}

body.ds-shell :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

body.ds-shell .band {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: clamp(20px, 4vw, 40px) 0 8px;
}

body.ds-shell .band-inner,
body.ds-shell .auth-shell,
body.ds-shell .games,
body.ds-shell .times-table,
body.ds-shell .board-panel,
body.ds-shell .read-page,
body.ds-shell .article,
body.ds-shell .howto,
body.ds-shell .settings-panel,
body.ds-shell #cloud,
body.ds-shell .section {
  width: min(1120px, calc(100% - 32px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  body.ds-shell .band-inner,
  body.ds-shell .auth-shell,
  body.ds-shell .games,
  body.ds-shell .times-table,
  body.ds-shell .board-panel,
  body.ds-shell .read-page,
  body.ds-shell .article,
  body.ds-shell .howto,
  body.ds-shell .settings-panel,
  body.ds-shell #cloud,
  body.ds-shell .section {
    width: var(--mobile-content-width, 95%);
  }
}

body.ds-shell .section-kicker,
body.ds-shell .page-title + .lede-tight {
  color: var(--muted);
}

body.ds-shell .section-kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.ds-shell .page-title,
body.ds-shell h1,
body.ds-shell h2 {
  font-family: var(--font-display);
  color: var(--ink);
}

body.ds-shell .page-title {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

body.ds-shell .lede-tight {
  color: var(--muted);
}

body.ds-shell .card,
body.ds-shell .games > .card,
body.ds-shell .auth-card,
body.ds-shell .offer-letter,
body.ds-shell .article,
body.ds-shell .howto,
body.ds-shell .settings-panel,
body.ds-shell .lib-row,
body.ds-shell .lib-item,
body.ds-shell .stat-card,
body.ds-shell .dash-profile,
body.ds-shell .podium-card,
body.ds-shell .achv-card {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  color: var(--ink);
}

body.ds-shell .games {
  display: grid;
  gap: 14px;
  padding: 16px 0 48px;
}

body.ds-shell .card h2 { margin: 0 0 8px; }

body.ds-shell .card-sudoku,
body.ds-shell .games > .card-sudoku {
  border-top: 2px solid var(--indigo);
  background: color-mix(in srgb, var(--indigo) 6%, var(--paper-bright));
}

body.ds-shell .card-killer-sudoku,
body.ds-shell .games > .card-killer-sudoku {
  border-top: 2px solid var(--vermillon);
  background: color-mix(in srgb, var(--vermillon) 6%, var(--paper-bright));
}

body.ds-shell .card-binary-puzzle,
body.ds-shell .games > .card-binary-puzzle {
  border-top: 2px solid var(--matcha);
  background: color-mix(in srgb, var(--matcha) 6%, var(--paper-bright));
}

body.ds-shell .lib-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}

body.ds-shell .lib-list {
  gap: 10px;
}

body.ds-shell .dash-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 20px;
  align-items: center;
  margin: 24px 0;
}

body.ds-shell .dash-profile .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

body.ds-shell .section-kicker {
  overflow: visible;
  white-space: normal;
  max-width: 100%;
}

body.ds-shell .identity-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--indigo);
  background: var(--indigo-soft);
  color: var(--indigo);
  font-family: var(--font-display);
}

body.ds-shell .achv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.ds-shell .achv-card {
  text-align: center;
  padding: 16px 12px;
}

body.ds-shell .podium {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 24px;
}

body.ds-shell .podium-card .rank,
body.ds-shell .medal {
  color: var(--indigo);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.ds-shell .name-form {
  display: grid;
  gap: 14px;
}

body.ds-shell .auth-lead,
body.ds-shell .later-note,
body.ds-shell .price-meta {
  color: var(--muted);
}

body.ds-shell .offer-benefits {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

body.ds-shell .offer-benefits li {
  padding-left: 1.1em;
  position: relative;
}

body.ds-shell .offer-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--indigo);
}

body.ds-shell .history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body.ds-shell .history-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

body.ds-shell .btn,
body.ds-shell .text-cta,
body.ds-shell button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  color: var(--ink);
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}

body.ds-shell .btn,
body.ds-shell button.btn,
body.ds-shell .games > .card .actions .btn:not(.primary) {
  background: var(--paper-shade);
  border: 1px solid var(--line-strong);
  color: var(--ink-strong);
  padding: 10px 18px;
  min-height: 44px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.95rem;
}

body.ds-shell .btn:hover,
body.ds-shell button.btn:hover,
body.ds-shell .games > .card .actions .btn:not(.primary):hover {
  background: color-mix(in srgb, var(--cta) 18%, var(--paper-shade));
  border-color: var(--cta);
  color: var(--ink-strong);
}

body.ds-shell .btn.primary,
body.ds-shell .text-cta,
body.ds-shell button.btn.primary,
body.ds-shell .games > .card .actions .btn.primary,
body.ds-shell .hero-actions .btn.primary,
body.ds-shell .offer-side .btn.primary {
  background: var(--cta);
  border: 1px solid var(--cta);
  color: var(--cta-ink);
  padding: 10px 18px;
  min-height: 44px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.95rem;
}

body.ds-shell .btn.primary:hover,
body.ds-shell .text-cta:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: var(--cta-ink);
}

body.ds-shell .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.ds-shell .field,
body.ds-shell .name-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}

body.ds-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.ds-shell select,
body.ds-shell textarea {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
}

body.ds-shell .lib-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 20px;
}

body.ds-shell .seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.ds-shell .seg button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  color: var(--ink);
  cursor: pointer;
}

body.ds-shell .seg button.is-on {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--ivory);
}

body.ds-shell .board-panel {
  margin-bottom: 48px;
  padding: 20px 20px 8px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

body.ds-shell .board-dailies,
body.ds-shell .board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

body.ds-shell .board-daily {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}

body.ds-shell .board-daily.is-on,
body.ds-shell .board-daily[aria-selected="true"] {
  border-color: #C88708;
  color: #201A12;
  background: color-mix(in srgb, #C88708 14%, var(--paper-bright));
}

body.ds-shell .board-daily:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, #C88708 45%, transparent));
}

body.ds-shell .lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.ds-shell .lb-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  grid-template-areas:
    "rank who time"
    ". xp xp";
  column-gap: 10px;
  row-gap: 2px;
  align-items: baseline;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
}

body.ds-shell .lb-row.is-you {
  background: color-mix(in srgb, #C88708 8%, var(--paper-bright));
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 6px;
}

body.ds-shell .lb-rank {
  grid-area: rank;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.92rem;
}

body.ds-shell .lb-row.is-first .lb-rank,
body.ds-shell .lb-row.is-second .lb-rank,
body.ds-shell .lb-row.is-third .lb-rank {
  color: var(--ink);
}

body.ds-shell .lb-who {
  grid-area: who;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.ds-shell .lb-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 550;
}

body.ds-shell .lb-time {
  grid-area: time;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

body.ds-shell .lb-xp {
  grid-area: xp;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

body.ds-shell .lb-more {
  margin: 12px 0 16px;
}

body.ds-shell .player-flag {
  display: inline-flex;
  width: 20px;
  height: 14px;
  flex: 0 0 20px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}

body.ds-shell .player-flag svg {
  display: block;
  width: 20px;
  height: 14px;
}

body.ds-shell .board-tabs button {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}

body.ds-shell .board-tabs button[aria-selected="true"] {
  border-color: #C88708;
  color: #C88708;
  background: color-mix(in srgb, #C88708 12%, var(--paper-bright));
}

body.ds-shell .board-panel .lib-toolbar {
  width: 100%;
  padding: 0 0 16px;
}

body.ds-shell .board-panel .times-table {
  width: 100%;
  margin: 0 0 12px;
}

body.ds-shell .board-empty {
  padding: 8px 0 20px;
}

body.ds-shell .board-empty .empty-state {
  margin: 0;
}

body.ds-shell .times-table {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 48px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

body.ds-shell .times-table tbody tr {
  border-bottom: 1px solid var(--line);
}

body.ds-shell .times-table th,
body.ds-shell .times-table td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
  border: 0;
}

body.ds-shell .times-table th {
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.ds-shell .offer-letter {
  display: grid;
  gap: 20px;
}

body.ds-shell .price,
body.ds-shell .ds-price {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

body.ds-shell .badge,
body.ds-shell .badge-gold {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--indigo) 35%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--indigo-soft);
  color: var(--indigo);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.ds-shell .progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gris);
  overflow: hidden;
}

body.ds-shell .progress > i {
  display: block;
  height: 100%;
  background: var(--indigo);
}

body.ds-shell .err {
  color: var(--vermillon);
  border: 1px solid var(--vermillon);
  border-radius: var(--radius-sm);
  background: var(--vermillon-soft);
  padding: 8px 12px;
}

body.ds-shell .err[hidden] {
  display: none;
}

body.ds-shell .auth-shell {
  display: grid;
  place-items: center;
  padding: 28px 0 64px;
}

body.ds-shell .auth-card {
  width: min(400px, calc(100% - 8px));
  padding: 28px 28px 24px;
}

body.ds-shell .auth-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

body.ds-shell .auth-alt a {
  color: var(--ink);
}

body.ds-shell .auth-google {
  width: 100%;
  margin-top: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 390px) {
  body.ds-shell .auth-card {
    padding: 20px 16px 18px;
  }
}

body.ds-shell .article,
body.ds-shell .howto {
  margin: 16px auto 64px;
  max-width: 44rem;
  width: min(44rem, calc(100% - 32px));
}

@media (max-width: 767px) {
  body.ds-shell .article,
  body.ds-shell .howto,
  body.ds-shell .article.howto,
  body.ds-shell article.article,
  body.ds-shell .howto-rich {
    width: var(--mobile-content-width, 95%);
    max-width: none;
  }
}

body.ds-shell .article.howto,
body.ds-shell article.article {
  width: min(720px, calc(100% - 32px));
}

body.ds-shell .howto-rich {
  width: min(720px, calc(100% - 32px));
}

body.ds-shell .howto-rich[data-v2-rules="true"] {
  width: min(960px, calc(100% - 32px));
  max-width: 960px;
}

body.ds-shell .article ol,
body.ds-shell .howto ol {
  padding-left: 1.2em;
}

body.ds-shell .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

body.ds-shell .section-head h2 { margin: 0; }

body.ds-shell .article a,
body.ds-shell .howto a {
  color: var(--indigo);
}

body.ds-shell .article a.btn,
body.ds-shell .howto a.btn {
  color: var(--ink-strong);
}

body.ds-shell .article a.btn.primary,
body.ds-shell .howto a.btn.primary {
  color: var(--cta-ink);
}

body.ds-shell .lib-list {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0 0 48px;
}

body.ds-shell .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.ds-shell .mini-board {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 2px;
  opacity: 0.4;
  background:
    linear-gradient(var(--ink) 1px, transparent 1px) 0 0 / 33.33% 33.33%,
    linear-gradient(90deg, var(--ink) 1px, transparent 1px) 0 0 / 33.33% 33.33%,
    var(--paper-wash);
}

body.ds-shell .shell-foot-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  body.ds-shell .games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ds-shell .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.ds-shell .offer-letter { grid-template-columns: 1fr auto; align-items: center; }
  body.ds-shell .shell-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ds-shell .achv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.ds-shell .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ds-shell .dash-profile {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (min-width: 960px) {
  body.ds-shell .dash-profile {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  body.ds-shell .dash-profile .hero-actions { width: auto; }
}

@media (min-width: 768px) {
  body.ds-shell .band-inner,
  body.ds-shell .games,
  body.ds-shell .section,
  body.ds-shell .times-table { width: min(1120px, calc(100% - 48px)); }
}

@media (min-width: 1024px) {
  body.ds-shell .band-inner,
  body.ds-shell .games,
  body.ds-shell .section,
  body.ds-shell .times-table { width: min(1120px, calc(100% - 64px)); }
}

@media (min-width: 1440px) {
  body.ds-shell .band-inner,
  body.ds-shell .games,
  body.ds-shell .section,
  body.ds-shell .times-table { width: min(1180px, calc(100% - 80px)); }
}

@media (max-height: 500px) and (orientation: landscape) {
  body.ds-shell .page-title { font-size: 1.6rem; }
}


.puzzle-cached-stats { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: .78rem; color: var(--muted); line-height: 1.4; min-width: 0; }

/* Per-grid provenance is quiet metadata and wraps even long identifiers. */
.generation-provenance { margin: .35rem 0; font-size: .75rem; color: var(--muted, #666); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }

/* Guide and hierarchy chrome follow the normal play-content outer column. */
body.ds-shell {
  --teaching-content-width: min(1400px, calc(100vw - 2 * clamp(16px, 2vw, 28px)));
}
html body.ds-shell .page #howtoGuide.howto-rich {
  box-sizing: border-box;
  width: var(--teaching-content-width);
  max-width: none;
  margin-inline: auto;
}
@media (max-width: 767px) {
  html body.ds-shell .page #howtoGuide.howto-rich {
    width: var(--mobile-content-width, 95%);
  }
}
/* A stale hierarchy strip nested below a library listing stays hidden: the hub carries its
   own visible navigation in .lib-hero-actions. */
body.ds-shell[data-v2-library="1"] .page nav[data-game-views]:not(.view-nav) { display: none; }
/* Guide and rules: the one visible bar of the other four views, in the same column as the
   guide. Wraps, never scrolls sideways, 44px targets. */
body.ds-shell .page nav.view-nav[data-game-views] {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 10px;
  box-sizing: border-box; min-width: 0;
  width: var(--teaching-content-width);
  margin: 12px auto 0;
}
@media (max-width: 767px) {
  body.ds-shell .page nav.view-nav[data-game-views] { width: var(--mobile-content-width, 95%); }
}
body.ds-shell .page :is(nav.view-nav, .lib-hero-actions)[data-game-views] > :is(a, span).btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; min-width: 0; box-sizing: border-box; padding: 8px 14px; margin-left: 0;
  border-radius: var(--game-action-radius, 10px); font-size: .85rem; font-weight: 600; line-height: 1.25;
  white-space: normal; overflow-wrap: anywhere; text-decoration: none;
}
/* Daily grid slot without a published grid: visibly a state, not a link, still readable. */
body.ds-shell .page [data-game-views] > .view-unavailable {
  flex-direction: column; gap: 2px; cursor: default; user-select: none;
  background: transparent; border: 1px dashed var(--line, #c9c2b5); color: var(--muted, #5e5a52);
  box-shadow: none;
}
body.ds-shell .page [data-game-views] > .view-unavailable > small { font-size: .72rem; font-weight: 500; line-height: 1.25; }

/* /how-to/howto.css */
.howto-rich {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 8px 0 72px;
  color: var(--ink);
}

.howto-rich[data-v2-rules="true"] {
  width: min(960px, calc(100% - 32px));
  max-width: 960px;
}

.teaching-page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.teaching-page-title-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.teaching-page-title-icon .game-icon,
.teaching-page-title-icon .home-thumb-svg {
  width: 40px;
  height: 40px;
}

.teaching-page-title-text {
  min-width: 0;
}

@media (max-width: 760px) {
  .howto-rich {
    width: var(--mobile-content-width, 95%);
  }
}

.howto-kicker {
  margin: 0 0 8px;
  color: var(--accent, #956300);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.howto-rich h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.howto-intro,
.howto-rich p,
.howto-rich li {
  line-height: 1.6;
  color: var(--muted);
}

.howto-rich p { margin: 0 0 12px; }

.howto-rich h2 {
  margin: 36px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
}

.howto-rich h3 {
  margin: 20px 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.howto-rich ul,
.howto-rich ol {
  margin: 0 0 14px;
  padding-left: 1.2em;
}

.howto-rich strong { color: var(--ink); }

.howto-rich code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
  color: var(--ink);
}

.howto-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 8px 0 28px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.howto-toc a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
}

.howto-toc a:hover { color: var(--accent, #956300); }

.howto-callout {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #C88708) 40%, var(--line));
  background: color-mix(in srgb, var(--paper) 82%, #F3D38A);
}

.howto-callout-kicker {
  margin: 0 0 4px !important;
  color: var(--accent, #956300) !important;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.howto-example {
  margin: 16px 0 20px;
}

.howto-example figcaption {
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 600;
}

.howto-example-note {
  margin: 8px 0 0 !important;
  font-size: 0.92rem;
}

.howto-mini {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(28px, 36px));
  gap: 3px;
  width: max-content;
  max-width: 100%;
}

.howto-mini-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.95rem;
  font-weight: 600;
}

[data-game="binary-puzzle"] .howto-example .howto-mini-cell {
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
  font-family: var(--font-sans, Inter, "Segoe UI", sans-serif);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "zero" 0, "lnum" 1, "tnum" 1, "ss01" 0;
}

.howto-mini-cell.is-empty { background: color-mix(in srgb, var(--paper) 88%, #eee6d4); }

.howto-mini-cell.is-clue {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper-bright);
  border-color: var(--ink);
}
[data-ds-theme="dark"] .howto-mini-cell.is-clue {
  background: color-mix(in srgb, var(--cta-ink) 78%, var(--paper));
  color: var(--ivory);
  border-color: color-mix(in srgb, var(--cta-ink) 78%, var(--paper));
}
.howto-mini-cell.is-clue .kakuro-diag {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom left, transparent calc(50% - 0.5px), currentColor 50%, transparent calc(50% + 0.5px));
  opacity: 0.45;
}
.howto-mini-cell.is-clue .kakuro-across {
  position: absolute;
  top: 3px;
  right: 4px;
  bottom: auto;
  left: auto;
  font-size: 0.62rem;
  line-height: 1;
}
.howto-mini-cell.is-clue .kakuro-down {
  position: absolute;
  bottom: 3px;
  left: 4px;
  top: auto;
  right: auto;
  font-size: 0.62rem;
  line-height: 1;
}
.howto-mini-cell.is-focus {
  border-color: var(--accent, #C88708);
  background: color-mix(in srgb, var(--paper) 70%, #F3D38A);
}
.howto-mini-cell.is-user { color: #956300; font-weight: 600; }
.howto-mini-cell.is-given { color: #201A12; font-weight: 700; }
.howto-mini-cell.is-ineq {
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 1.05rem;
}

.howto-mini-mark {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted);
}

.howto-table-wrap { overflow-x: auto; margin: 12px 0 18px; }

.howto-table-caption {
  margin: 0 0 6px !important;
  color: var(--ink) !important;
  font-weight: 600;
}

.howto-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.howto-table th,
.howto-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.howto-table th {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.howto-faq dt {
  margin: 16px 0 4px;
  color: var(--ink);
  font-weight: 600;
}

.howto-faq dd {
  margin: 0 0 8px;
  color: var(--muted);
}

.howto-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 32px 0 8px;
}

html[data-ds-theme="dark"] .howto-callout,
[data-ds-theme="dark"] .howto-callout {
  background: color-mix(in srgb, var(--paper) 78%, #5a4218);
}

html[data-ds-theme="dark"] .howto-mini-cell.is-given,
[data-ds-theme="dark"] .howto-mini-cell.is-given {
  color: #F7F0E2;
}

html[data-ds-theme="dark"] .howto-mini-cell.is-user,
[data-ds-theme="dark"] .howto-mini-cell.is-user {
  color: #E0C078;
}

@media (max-width: 390px) {
  .howto-rich { width: var(--mobile-content-width, 95%); }
  .howto-mini { grid-template-columns: repeat(var(--cols, 3), minmax(26px, 32px)); }
}

.howto-infos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 4px 0 24px;
}

.howto-info-card,
.howto-info-card:link,
.howto-info-card:visited {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--paper-bright);
  color: var(--ink);
  text-decoration: none;
}

.howto-info-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
}

.howto-info-card:hover {
  border-color: var(--cta, #C88708);
  color: var(--ink);
  background: color-mix(in srgb, var(--cta, #C88708) 10%, var(--paper-bright));
}

.howto-info-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--paper), 0 0 0 4px var(--indigo, #3d4a7a));
}

@media (min-width: 640px) {
  .howto-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* SEO 2026-11-03: the title row is a wrapper; the real <h1> inherits its type styles. */
.teaching-page-title > h1.teaching-page-title-text {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-transform: inherit;
}

/* /how-to/tutorial/tutorial.css */

/* @import /shared/number-games/boards.css */
/**
 * Shared DOM/CSS contract for prototype/shared/number-games/boards.js.
 * Used by how-to extended tutorials and future product play shells.
 */
.extended-board {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: 100%;
  outline: none;
}

.extended-board .board {
  --ng-cell: clamp(44px, calc(min(92vw, 24rem) / var(--n)), 56px);
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  width: min(100%, calc(var(--ng-cell) * var(--n)));
  margin: 0 auto;
  touch-action: manipulation;
  box-sizing: border-box;
  border: 2px solid var(--board-line-strong, var(--ink));
  background: var(--board-cell, var(--paper-bright));
  gap: 0;
}

.extended-board .board[style*="--rows"] {
  aspect-ratio: calc(var(--n) / var(--rows));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
}

.extended-board .board-calcudoku,
.extended-board .board:not(.board-cross):not(.board-sky) {
  aspect-ratio: calc(var(--n) / var(--rows, var(--n)));
}

.extended-board .board-cross {
  --ng-cell: clamp(
    44px,
    calc((min(100%, min(92vw, 22rem)) - (var(--n) - 1) * 2px) / var(--n)),
    48px
  );
  width: min(100%, calc(var(--ng-cell) * var(--n) + (var(--n) - 1) * 2px));
  aspect-ratio: auto;
  gap: 2px;
  grid-template-columns: repeat(var(--n), minmax(44px, 1fr));
  grid-template-rows: repeat(var(--n), minmax(44px, auto));
}

.extended-board .board.is-draw,
.extended-board .board.is-draw .cell {
  touch-action: none;
  user-select: none;
}

.extended-board .board .cell,
.extended-board .board .cross-num {
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--board-line, color-mix(in srgb, var(--ink) 18%, var(--line)));
  border-left: 1px solid var(--board-line, color-mix(in srgb, var(--ink) 18%, var(--line)));
  background: var(--board-cell, var(--paper-bright));
  font-family: var(--font-digits, inherit);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(0.9rem, 3.8vw, 1.3rem);
  line-height: 1;
  color: var(--board-entry, #2438c9);
  font-weight: var(--weight-entry, 500);
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
}

.extended-board .board .cell .digit {
  line-height: 1;
}

.extended-board .board .cell.is-given,
.extended-board .board .cell.is-given .digit {
  color: var(--board-given, #140f0a);
  font-weight: var(--weight-given, 800);
}

.extended-board .board .cell.is-player,
.extended-board .board .cell.is-player .digit {
  color: var(--board-entry, #2438c9);
  font-weight: var(--weight-entry, 500);
}

.extended-board .board .cell.is-selected,
.extended-board .board .cross-num.is-selected {
  z-index: 2;
  background-color: var(--board-cell-sel, color-mix(in srgb, var(--paper) 55%, var(--board-cell)));
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19d65a);
  outline: none;
}

.extended-board .board .cell.is-conflict,
.extended-board .board .cross-num.is-conflict {
  background-color: var(
    --board-cell-bad,
    color-mix(in srgb, var(--board-digit-bad, var(--vermillon)) 16%, var(--board-cell))
  );
  box-shadow: inset 0 -3px 0 0 var(--board-digit-bad, var(--vermillon));
}

.extended-board .board .cell.is-selected.is-conflict,
.extended-board .board .cross-num.is-selected.is-conflict {
  box-shadow:
    inset 0 0 0 2.5px var(--play-ring-active, #19d65a),
    inset 0 -3px 0 0 var(--board-digit-bad, var(--vermillon));
}

.extended-board .board .cell.is-black {
  background: var(--ink);
  border-color: var(--ink);
  cursor: default;
}

/* Calcudoku / suguru-style cage walls (strong only on boundaries). */
.extended-board .board .cell.wall-n,
.extended-board .board .cell.wall-e,
.extended-board .board .cell.wall-s,
.extended-board .board .cell.wall-w {
  --ng-wall-size: 2px;
  background-image:
    var(--ng-wall-n, linear-gradient(transparent, transparent)),
    var(--ng-wall-e, linear-gradient(transparent, transparent)),
    var(--ng-wall-s, linear-gradient(transparent, transparent)),
    var(--ng-wall-w, linear-gradient(transparent, transparent));
  background-position: top, right, bottom, left;
  background-size:
    100% var(--ng-wall-size),
    var(--ng-wall-size) 100%,
    100% var(--ng-wall-size),
    var(--ng-wall-size) 100%;
  background-repeat: no-repeat;
}

.extended-board .board .cell.wall-n {
  --ng-wall-n: linear-gradient(var(--board-line-strong, var(--ink)), var(--board-line-strong, var(--ink)));
}
.extended-board .board .cell.wall-e {
  --ng-wall-e: linear-gradient(var(--board-line-strong, var(--ink)), var(--board-line-strong, var(--ink)));
}
.extended-board .board .cell.wall-s {
  --ng-wall-s: linear-gradient(var(--board-line-strong, var(--ink)), var(--board-line-strong, var(--ink)));
}
.extended-board .board .cell.wall-w {
  --ng-wall-w: linear-gradient(var(--board-line-strong, var(--ink)), var(--board-line-strong, var(--ink)));
}

.extended-board .board .cage-label {
  position: absolute;
  top: clamp(1px, 4%, 3px);
  left: clamp(2px, 5%, 4px);
  font-size: clamp(0.62rem, calc(min(92vw, 28rem) / var(--n, 6) * 0.22), 1.05rem);
  font-weight: 700;
  line-height: 1.05;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  pointer-events: none;
  z-index: 1;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.extended-board .board .cell.has-cage-label .digit,
.extended-board .board .cell .digit {
  padding-top: 0.35em;
}

.extended-board .board .cell-notes {
  position: absolute;
  inset: auto 2px 2px 2px;
  top: 38%;
  font-size: 0.58rem;
  line-height: 1.15;
  text-align: center;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* Crossmath chrome */
.extended-board .board .op,
.extended-board .board .result,
.extended-board .board .pad,
.extended-board .board .clue {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 2.25rem;
  font-size: clamp(0.72rem, 2.8vw, 0.95rem);
  overflow-wrap: anywhere;
}

.extended-board .board .op,
.extended-board .board .pad {
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  font-weight: 700;
  background: transparent;
  border: none;
}

.extended-board .board .result {
  color: var(--ink);
  font-weight: 800;
  background: color-mix(in srgb, var(--board-cell) 88%, var(--paper));
  border-radius: var(--radius-sm, 6px);
}

.extended-board .board-cross .op,
.extended-board .board-cross .pad,
.extended-board .board-cross .result {
  min-height: 0;
  padding: 0 1px;
  font-size: clamp(0.62rem, 2.2vw, 0.82rem);
  line-height: 1.05;
}

.extended-board .board-cross .cross-num {
  min-width: 44px;
  min-height: 44px;
}

/* Shade games */
.extended-board .board .shade-cell.is-ink {
  background: var(--ink);
  color: var(--paper-bright);
}

.extended-board .board .shade-cell.is-light {
  background: var(--board-cell, var(--paper-bright));
  box-shadow: inset 0 0 0 2px var(--board-line-strong, var(--ink));
}

.extended-board .board .shade-cell.is-unknown {
  background: var(--board-cell, var(--paper-bright));
}

.extended-board .board .shade-cell .digit {
  color: var(--board-given, #140f0a);
  font-weight: var(--weight-given, 800);
}

.extended-board .board .shade-cell.is-ink .digit {
  color: var(--paper-bright);
}

.extended-board .board .shade-cell.is-clue.is-unknown .digit,
.extended-board .board .shade-cell.is-clue.is-light .digit {
  color: var(--board-given, #140f0a);
  font-weight: var(--weight-given, 800);
}

/* Numberlink: full card width, square cells via aspect-ratio (page scroll for tall boards). */
.extended-board .board.board-numberlink {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  aspect-ratio: var(--n) / var(--rows, var(--n));
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, var(--n)), minmax(0, 1fr));
}
.extended-board .board.board-numberlink .cell,
.extended-board .board.board-numberlink .path-cell {
  min-width: 0;
  min-height: 0;
}

/* Numberlink */
.extended-board .board .path-cell {
  position: relative;
}

.extended-board .board .path-cell.path-1 {
  color: #c45c9a;
  background: color-mix(in srgb, #c45c9a 22%, var(--board-cell, var(--paper-bright)));
}
.extended-board .board .path-cell.path-2 {
  color: #3d7ea6;
  background: color-mix(in srgb, #3d7ea6 22%, var(--board-cell, var(--paper-bright)));
}
.extended-board .board .path-cell.path-3 {
  color: #c88708;
  background: color-mix(in srgb, #c88708 22%, var(--board-cell, var(--paper-bright)));
}
.extended-board .board .path-cell.path-4 {
  color: #2e8b7a;
  background: color-mix(in srgb, #2e8b7a 22%, var(--board-cell, var(--paper-bright)));
}
.extended-board .board .path-cell.path-5 {
  color: #d45e3d;
  background: color-mix(in srgb, #d45e3d 22%, var(--board-cell, var(--paper-bright)));
}
.extended-board .board .path-cell.path-6 {
  color: #6b5b95;
  background: color-mix(in srgb, #6b5b95 22%, var(--board-cell, var(--paper-bright)));
}
.extended-board .board .path-cell.path-7 {
  color: #8a5a2b;
  background: color-mix(in srgb, #8a5a2b 22%, var(--board-cell, var(--paper-bright)));
}
.extended-board .board .path-cell.path-8 {
  color: #4a7c59;
  background: color-mix(in srgb, #4a7c59 22%, var(--board-cell, var(--paper-bright)));
}
.extended-board .board .path-cell.path-9 { color: #5c4033; background: color-mix(in srgb, #5c4033 22%, var(--board-cell, var(--paper-bright))); }
.extended-board .board .path-cell.path-10 { color: #7b2cbf; background: color-mix(in srgb, #7b2cbf 22%, var(--board-cell, var(--paper-bright))); }
.extended-board .board .path-cell.path-11 { color: #0077b6; background: color-mix(in srgb, #0077b6 22%, var(--board-cell, var(--paper-bright))); }
.extended-board .board .path-cell.path-12 { color: #bc6c25; background: color-mix(in srgb, #bc6c25 22%, var(--board-cell, var(--paper-bright))); }
.extended-board .board .path-cell.path-13 { color: #588157; background: color-mix(in srgb, #588157 22%, var(--board-cell, var(--paper-bright))); }
.extended-board .board .path-cell.path-14 { color: #9d4edd; background: color-mix(in srgb, #9d4edd 22%, var(--board-cell, var(--paper-bright))); }
.extended-board .board .path-cell.path-15 { color: #e76f51; background: color-mix(in srgb, #e76f51 22%, var(--board-cell, var(--paper-bright))); }
.extended-board .board .path-cell.path-16 { color: #2a9d8f; background: color-mix(in srgb, #2a9d8f 22%, var(--board-cell, var(--paper-bright))); }
.extended-board .board .path-cell.path-17 { color: #6d597a; background: color-mix(in srgb, #6d597a 22%, var(--board-cell, var(--paper-bright))); }

.extended-board .board .path-cell .digit {
  position: relative;
  z-index: 1;
  font-weight: var(--weight-given, 800);
  color: var(--board-given, #140f0a);
}

.extended-board .board .path-cell.is-given .digit,
.extended-board .board .path-cell.is-player .digit {
  font-weight: var(--weight-given, 800);
}

.extended-board .board .path-cell::before,
.extended-board .board .path-cell::after {
  content: "";
  position: absolute;
  background: currentColor;
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  z-index: 0;
}

.extended-board .board .path-cell::before {
  height: 26%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
}

.extended-board .board .path-cell.pipe-e::before,
.extended-board .board .path-cell.pipe-w::before {
  opacity: 1;
}
.extended-board .board .path-cell.pipe-e:not(.pipe-w)::before {
  left: 50%;
}
.extended-board .board .path-cell.pipe-w:not(.pipe-e)::before {
  right: 50%;
}

.extended-board .board .path-cell::after {
  width: 26%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
}

.extended-board .board .path-cell.pipe-n::after,
.extended-board .board .path-cell.pipe-s::after {
  opacity: 1;
}
.extended-board .board .path-cell.pipe-s:not(.pipe-n)::after {
  top: 50%;
}
.extended-board .board .path-cell.pipe-n:not(.pipe-s)::after {
  bottom: 50%;
}

.extended-board .board .path-cell.is-selected {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19d65a);
}

/* Tutorial-only focus ring from step engine */
.extended-board .board .cell.is-tutorial-focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--play-ring-active, #19d65a) 65%, var(--ink));
}

.extended-board .board .cell.is-selected.is-tutorial-focus {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19d65a);
}

/* Controls */
.extended-board .extended-controls {
  display: grid;
  gap: 12px;
  width: min(100%, 320px);
  margin-top: 4px;
  justify-items: center;
}

.extended-board .extended-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.extended-board .extended-keypad[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.extended-board .extended-keypad .btn.extended-key {
  min-height: 52px;
  min-width: 44px;
  padding: 8px 6px;
  font: inherit;
  font-size: 1.15rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--board-key-line, var(--line));
  background: var(--board-key, var(--paper-bright));
  color: var(--ink);
}

.extended-board .extended-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.extended-board .extended-actions .btn {
  min-height: 44px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.extended-board .extended-actions .btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--indigo, #3547b3) 12%, var(--paper-bright));
  border-color: var(--indigo, #3547b3);
}

.extended-board .extended-controls > p {
  margin: 0;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  text-align: center;
  max-width: 36rem;
}

/* How-to phone stack: stretch the grid area so board width calc has a real containing block. */
.howto-tutorial-board .extended-board {
  justify-items: stretch;
  width: 100%;
}

.howto-tutorial-board .extended-board > :first-child {
  width: 100%;
}

@media (min-width: 761px) {
  .howto-tutorial-board .extended-board {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
    align-items: start;
    justify-items: stretch;
    width: 100%;
  }

  .howto-tutorial-board .extended-board .board {
    justify-self: center;
  }

  .howto-tutorial-board .extended-board .extended-controls {
    margin-top: 0;
    width: 100%;
  }
}



/* @import /ds/boards.css */
/* DIGIGMA design system — first-class grids.
   Demo grids plus the shared production numeric-cell contract below. */

.ds-play {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 768px) {
  .ds-play { grid-template-columns: minmax(0, 360px) 200px; }
}

.ds-board-wrap {
  min-width: 0;
  width: min(100%, 360px);
}

.ds-board {
  --n: 9;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  background: var(--board-cell);
  border: 2px solid var(--board-frame);
  border-radius: var(--radius-board);
  overflow: hidden;
}

.ds-board[data-size="6"] { --n: 6; }

.ds-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--board-cell);
  color: var(--board-given);
  font-family: var(--font-digits);
  font-size: clamp(0.95rem, 3.6vw, 1.35rem);
  font-weight: var(--weight-entry);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset -1px 0 0 var(--board-line),
    inset 0 -1px 0 var(--board-line);
}

.ds-cell:nth-child(9n),
.ds-board[data-size="6"] .ds-cell:nth-child(6n) {
  box-shadow: inset 0 -1px 0 var(--board-line);
}

.ds-cell:nth-child(n + 73),
.ds-board[data-size="6"] .ds-cell:nth-child(n + 31) {
  box-shadow: inset -1px 0 0 var(--board-line);
}

.ds-cell:nth-child(9n):nth-child(n + 73),
.ds-board[data-size="6"] .ds-cell:nth-child(6n):nth-child(n + 31) {
  box-shadow: none;
}

.ds-board:not([data-size="6"]) .ds-cell:nth-child(3n):not(:nth-child(9n)) {
  box-shadow:
    inset -2px 0 0 var(--board-line-strong),
    inset 0 -1px 0 var(--board-line);
}

.ds-board:not([data-size="6"]) .ds-cell:nth-child(n + 19):nth-child(-n + 27),
.ds-board:not([data-size="6"]) .ds-cell:nth-child(n + 46):nth-child(-n + 54) {
  box-shadow:
    inset -1px 0 0 var(--board-line),
    inset 0 -2px 0 var(--board-line-strong);
}

.ds-board:not([data-size="6"]) .ds-cell:nth-child(3n):not(:nth-child(9n)):nth-child(n + 19):nth-child(-n + 27),
.ds-board:not([data-size="6"]) .ds-cell:nth-child(3n):not(:nth-child(9n)):nth-child(n + 46):nth-child(-n + 54) {
  box-shadow:
    inset -2px 0 0 var(--board-line-strong),
    inset 0 -2px 0 var(--board-line-strong);
}

.ds-cell.is-given {
  color: var(--board-given);
  font-weight: var(--weight-given);
}

.ds-cell.is-entry {
  color: var(--board-entry);
  font-weight: var(--weight-entry);
}

.ds-cell.is-hi { background: var(--board-cell-hi); }
.ds-cell.is-same { background: var(--board-cell-same); }
.ds-cell.is-ok { background: var(--board-cell-ok); color: var(--board-digit-ok); }
.ds-cell.is-bad {
  background: var(--board-cell-bad);
  color: var(--board-digit-bad);
  font-weight: var(--weight-given);
}

.ds-cell.is-sel {
  background: var(--board-cell-sel);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 2px #C88708,
    inset -1px 0 0 var(--board-line),
    inset 0 -1px 0 var(--board-line);
  z-index: 2;
}

.ds-cell:hover:not(.is-sel) { background: var(--board-cell-hover); }

.ds-cell:focus-visible {
  outline: none;
  z-index: 3;
  box-shadow:
    inset 0 0 0 2px #C88708,
    0 0 0 2px var(--paper);
}

.ds-notes {
  position: absolute;
  inset: 3px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-size: 0.52em;
  font-weight: 500;
  color: var(--board-note);
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
}

.ds-notes span { display: grid; place-items: center; min-width: 0; min-height: 0; }

@media (max-width: 760px) {
  .ds-notes { font-size: 0.64em; }
}

.ds-cell[data-cage="a"] { background: var(--board-cage-a); }
.ds-cell[data-cage="b"] { background: var(--board-cage-b); }
.ds-cell[data-cage="c"] { background: var(--board-cage-c); }
.ds-cell[data-cage].is-hi { filter: saturate(1.05); }
.ds-cell[data-cage].is-sel { background: var(--board-cell-sel); }

.ds-cage-sum {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: clamp(0.48rem, 1.6vw, 0.62rem);
  font-weight: 600;
  color: var(--board-cage-sum);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.ds-cage-wall {
  position: absolute;
  background: transparent;
  border-color: var(--board-cage);
  border-style: dotted;
  pointer-events: none;
  z-index: 1;
}

.ds-cage-wall.n { top: 2px; left: 2px; right: 2px; height: 0; border-top-width: 1.5px; border-top-style: dotted; }
.ds-cage-wall.s { bottom: 2px; left: 2px; right: 2px; height: 0; border-bottom-width: 1.5px; border-bottom-style: dotted; }
.ds-cage-wall.w { top: 2px; bottom: 2px; left: 2px; width: 0; border-left-width: 1.5px; border-left-style: dotted; }
.ds-cage-wall.e { top: 2px; bottom: 2px; right: 2px; width: 0; border-right-width: 1.5px; border-right-style: dotted; }

.ds-cell.is-bin-0 { color: var(--board-bin-0); font-weight: var(--weight-given); }
.ds-cell.is-bin-1 { color: var(--board-bin-1); font-weight: var(--weight-entry); }
.ds-cell.is-warn {
  background: var(--board-bin-warn);
  box-shadow: inset 0 0 0 1.5px var(--board-bin-warn-line);
  color: var(--board-digit-bad);
}

.ds-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-clock {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-digits);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  color: var(--board-clock);
}

.ds-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Local demo fallbacks when play.css is not loaded; play pages use play.css SSOT. */
.ds-keypad {
  --keypad-key-honey: #C49A4A;
  --keypad-key-paper: color-mix(in srgb, var(--paper-wash) 62%, var(--paper-bright));
  --keypad-key-bg: color-mix(in srgb, var(--keypad-key-honey) 10%, var(--keypad-key-paper));
  --keypad-key-ink: var(--ink-strong, var(--ink));
  --keypad-key-border: color-mix(in srgb, var(--ink) 22%, var(--line));
  --keypad-key-hover: color-mix(in srgb, var(--ink) 8%, var(--keypad-key-bg));
  --keypad-key-hover-border: color-mix(in srgb, var(--indigo) 40%, var(--keypad-key-border));
  --keypad-digit-radius: 11px;
}

.ds-keypad button {
  min-height: 44px;
  background: var(--keypad-key-bg, var(--board-key));
  border: 1px solid var(--keypad-key-border, var(--board-key-line));
  border-radius: var(--keypad-digit-radius, var(--radius-sm));
  color: var(--keypad-key-ink, var(--ink));
  font-family: var(--font-digits);
  font-size: 1.15rem;
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.ds-keypad button:hover {
  background: var(--keypad-key-hover, var(--keypad-key-bg, var(--board-key)));
  border-color: var(--keypad-key-hover-border, var(--indigo));
}
.ds-keypad button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ds-play-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ds-legend {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Production numeric values. Keep this in the render-blocking DS sheet,
   mirrored in design-system/boards.css. Givens and entered digits share one
   size, about 70% of the cell. Div cells are the query container (the glyph
   is a child, so cqw is the cell). Button cells cannot be size containers:
   Chrome collapses their cqw, so those glyphs use the board's cqw divided by
   the column count (--n, and --numeric-rows when the square board is not a
   square grid). Three-digit clues opt into --numeric-cell-wide-ratio. Notes,
   cage sums, inequalities, Kakuro clue triangles, operators, skyscraper
   towers and region fills are untouched. Font family stays inherited. */
html.is-play {
  --numeric-cell-ratio: 0.7;
  --numeric-cell-wide-ratio: 0.42;
  --numeric-cell-max: 4.8rem;
  --numeric-given-weight: 800;
  --numeric-entry-weight: 500;
}
html.is-play body:is(.ds-sudoku, .ds-killer, .ds-binary, .ds-futoshiki, .ds-kakuro, .ds-yakazu, .ds-suguru) #board {
  --numeric-given-ink: var(--board-given);
  --numeric-entry-ink: var(--board-entry);
}
/* The existing dark entry token falls below 4.5:1 on selected cells. */
html.is-play[data-ds-theme="dark"] body:is(.ds-sudoku, .ds-killer, .ds-binary, .ds-futoshiki, .ds-kakuro, .ds-yakazu, .ds-suguru) #board {
  --numeric-entry-ink: #C2CEFF;
}
html.is-play body #board > :is(.cell, .result):not(button):has(> :is(.digit, .cell-numeral, .clue):not(:empty)) {
  container-type: inline-size;
}
html.is-play body #board:has(> button.cell > :is(.digit, .cell-numeral, .clue):not(:empty)) {
  container-type: inline-size;
}
html.is-play body #board > :is(.cell, .result):not(button) > :is(.digit, .cell-numeral, .clue):not(:empty) {
  font-size: min(calc(var(--numeric-cell-ratio, 0.7) * 100cqw), var(--numeric-cell-max, 4.8rem));
  line-height: 1;
  font-weight: inherit;
}
html.is-play body #board > button.cell > :is(.digit, .cell-numeral, .clue):not(:empty) {
  font-size: min(
    calc(var(--numeric-cell-ratio, 0.7) * 100cqw / var(--n, 9)),
    calc(var(--numeric-cell-ratio, 0.7) * 100cqw / var(--numeric-rows, var(--n, 9))),
    var(--numeric-cell-max, 4.8rem)
  );
  line-height: 1;
  font-weight: inherit;
}
html.is-play body #board > :is(.cell, .result):not(button) > :is(.digit, .cell-numeral, .clue).cell-numeral-wide:not(:empty) {
  font-size: min(calc(var(--numeric-cell-wide-ratio, 0.42) * 100cqw), 3.2rem);
}
html.is-play body #board > button.cell > :is(.digit, .cell-numeral, .clue).cell-numeral-wide:not(:empty) {
  font-size: min(
    calc(var(--numeric-cell-wide-ratio, 0.42) * 100cqw / var(--n, 9)),
    calc(var(--numeric-cell-wide-ratio, 0.42) * 100cqw / var(--numeric-rows, var(--n, 9))),
    3.2rem
  );
}
html.is-play body:is(.ds-sudoku, .ds-killer, .ds-binary, .ds-futoshiki, .ds-yakazu, .ds-suguru) #board .cell:is(.given, .is-given) {
  color: var(--numeric-given-ink);
  font-weight: var(--numeric-given-weight);
}
/* Error ink stays owned by existing error rules; selection/hint backgrounds and
   rings remain intact. Theme tokens provide indigo on warm light/dark surfaces. */
html.is-play body:is(.ds-sudoku, .ds-killer, .ds-binary, .ds-futoshiki, .ds-kakuro, .ds-yakazu, .ds-suguru) #board .cell.entry:where(:not(.bad, .conflict, .mismatch, .is-conflict)) {
  color: var(--numeric-entry-ink);
  font-weight: var(--numeric-entry-weight);
}



.howto-tutorial {
  margin-top: 12px;
}

.howto-tutorial-intro {
  margin-bottom: 16px;
}

.howto-tutorial-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  padding: 16px;
  background: var(--bg-2, rgba(255, 255, 255, 0.4));
}

.howto-tutorial-head {
  margin-bottom: 12px;
}

.howto-tutorial-progress {
  margin: 0 0 6px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #956300);
}

.howto-tutorial-instruction {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.howto-tutorial-error {
  margin: 8px 0 0;
  color: var(--bad, #b42318);
  font-size: 0.92rem;
}

.howto-tutorial-binary,
.howto-tutorial-play {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: 100%;
  align-items: center;
}

.howto-tutorial-binary-grid,
.howto-tutorial-kakuro-grid,
.howto-tutorial-futoshiki-grid {
  display: grid;
  width: min(100%, 280px);
  aspect-ratio: 1;
  gap: 0;
  border: 3px solid var(--grid-strong, #3a2d22);
  border-radius: 6px;
  background: var(--grid-strong, #3a2d22);
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.howto-tutorial-futoshiki-grid {
  aspect-ratio: auto;
  min-height: 200px;
}

.howto-tutorial-cell.clue {
  position: relative;
  background: var(--cell, #fff9e8);
  cursor: default;
  padding: 0;
  overflow: hidden;
}

.howto-tutorial-cell.clue .kakuro-diag {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--grid-thin, rgba(0, 0, 0, 0.2)) calc(50% - 0.5px),
    var(--grid-thin, rgba(0, 0, 0, 0.2)) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  pointer-events: none;
}

.howto-tutorial-cell.clue .kakuro-down {
  position: absolute;
  left: 4px;
  bottom: 2px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ink-strong, #241a14);
  line-height: 1;
}

.howto-tutorial-cell.clue .kakuro-across {
  position: absolute;
  right: 3px;
  top: 2px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ink-strong, #241a14);
  line-height: 1;
}

.howto-tutorial-cell.black {
  background: var(--grid-strong, #3a2d22);
  cursor: default;
  border-color: transparent;
}

.howto-tutorial-ineq {
  display: grid;
  place-items: center;
  font-size: clamp(0.72rem, 3.4vw, 1rem);
  font-weight: 700;
  color: var(--game-futoshiki, var(--cta, #c88708));
  pointer-events: none;
  user-select: none;
}

.howto-tutorial-cell {
  display: grid;
  place-items: center;
  background: var(--cell, #fff9e8);
  border-right: 1px solid var(--grid-thin, rgba(0, 0, 0, 0.12));
  border-bottom: 1px solid var(--grid-thin, rgba(0, 0, 0, 0.12));
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  font-weight: 600;
  color: var(--entry, #1d4ed8);
  cursor: pointer;
  user-select: none;
  min-height: 44px;
}

.howto-tutorial-cell.is-given {
  color: var(--ink-strong, #241a14);
  font-weight: 700;
  cursor: default;
}

.howto-tutorial-binary .howto-tutorial-binary-grid .howto-tutorial-cell {
  place-items: center;
  align-content: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "zero" 0, "lnum" 1, "tnum" 1;
}

.howto-tutorial-binary .howto-tutorial-cell.is-selected {
  box-shadow: inset 0 0 0 2px var(--sel, #956300);
  background: var(--sel-bg, rgba(149, 99, 0, 0.12));
}

.howto-tutorial-cell.is-focus {
  box-shadow: inset 0 0 0 2px var(--gold, var(--accent));
}

.howto-tutorial-binary .howto-tutorial-cell.is-highlight:not(.is-selected) {
  background: var(--gold-wash, color-mix(in srgb, var(--gold, var(--accent)) 16%, transparent));
}

.howto-tutorial-cell.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.howto-tutorial-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 280px);
}

/* Same keypad surface as the Binary play board (--board-key), not a second button system. */
.howto-tutorial-keypad button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 6px;
  font: inherit;
  font-size: 1.15rem;
  font-variant-numeric: lining-nums;
  line-height: 1.2;
  white-space: normal;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--board-key-line, var(--line));
  background: var(--board-key, var(--paper-bright));
  color: var(--ink);
  box-shadow: var(--shadow-1, none);
  cursor: pointer;
}

.howto-tutorial-keypad button:hover {
  border-color: var(--cta, #c88708);
}

.howto-tutorial-keypad button.ghost {
  font-size: 0.85rem;
}

.howto-tutorial-keypad.is-digits [data-digit="clear"] {
  grid-column: 1 / -1;
}

/* Sudoku and Killer reuse the Binary keypad surface and the same board tokens. */
.howto-tutorial-digits {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: 100%;
  align-items: center;
}

.howto-tutorial-digits-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  width: min(100%, 320px);
  aspect-ratio: 1;
  gap: 0;
  border: 3px solid var(--grid-strong, var(--board-line-strong, #3a2d22));
  border-radius: 6px;
  background: var(--grid-strong, var(--board-line-strong, #3a2d22));
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.howto-tutorial-digits .howto-tutorial-cell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-digits, inherit);
  font-size: clamp(0.72rem, 2.5vw, 1.05rem);
  font-variant-numeric: lining-nums;
  font-weight: var(--weight-entry, 600);
  color: var(--entry, var(--board-digit, #1d4ed8));
}

.howto-tutorial-digits-grid .howto-tutorial-cell:nth-child(3n) {
  border-right: 3px solid var(--grid-strong, var(--board-line-strong, #3a2d22));
}

.howto-tutorial-digits-grid .howto-tutorial-cell:nth-child(9n) {
  border-right: none;
}

.howto-tutorial-digits-grid .howto-tutorial-cell:nth-child(n + 19):nth-child(-n + 27),
.howto-tutorial-digits-grid .howto-tutorial-cell:nth-child(n + 46):nth-child(-n + 54) {
  border-bottom: 3px solid var(--grid-strong, var(--board-line-strong, #3a2d22));
}

.howto-tutorial-digits-grid .howto-tutorial-cell:nth-child(n + 73) {
  border-bottom: none;
}

.howto-tutorial-cell.is-conflict {
  background-color: var(--board-cell-bad, rgba(180, 35, 24, 0.14));
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--board-digit-bad, var(--bad, #b42318)) 16%, transparent) 3px,
    color-mix(in srgb, var(--board-digit-bad, var(--bad, #b42318)) 16%, transparent) 5px
  );
  color: var(--board-digit-bad, var(--bad, #b42318));
  box-shadow: inset 0 -3px 0 0 var(--board-digit-bad, var(--bad, #b42318));
}

.howto-tutorial-cell.is-selected.is-conflict {
  outline: 2px solid var(--sel, #956300);
  outline-offset: -4px;
}

/* Killer cages: same pastel fills and dotted walls as live play. */
.howto-tutorial-killer .howto-tutorial-cell[data-cage="a"] { --cage-hue: var(--indigo); }
.howto-tutorial-killer .howto-tutorial-cell[data-cage="b"] { --cage-hue: var(--vermillon); }
.howto-tutorial-killer .howto-tutorial-cell[data-cage="c"] { --cage-hue: var(--matcha); }
.howto-tutorial-killer .howto-tutorial-cell[data-cage="d"] { --cage-hue: #B47A19; }
.howto-tutorial-killer .howto-tutorial-cell[data-cage="e"] { --cage-hue: #8D5BB0; }
.howto-tutorial-killer .howto-tutorial-cell[data-cage="f"] { --cage-hue: #238F96; }

.howto-tutorial-killer .howto-tutorial-cell[data-cage] {
  --cage-color: color-mix(in srgb, var(--cage-hue) 14%, var(--board-cell, var(--cell, #fff9e8)));
  --cage-border: color-mix(in srgb, var(--cage-hue) 48%, var(--line));
  background-color: var(--cage-color);
  overflow: visible;
}

.howto-tutorial-killer .howto-tutorial-cell.is-highlight:not(.is-selected):not(.is-conflict) {
  background-color: color-mix(in srgb, var(--gold, #c9a227) 22%, var(--cage-color, var(--cell, #fff9e8)));
  background-image: none;
}

.howto-tutorial-killer .howto-tutorial-cell.is-selected:not(.is-conflict) {
  background-color: var(--board-cell-sel, var(--sel-bg, rgba(149, 99, 0, 0.12)));
  background-image: none;
}

.howto-tutorial-killer .howto-tutorial-cell.is-conflict {
  background-color: var(--board-cell-bad, rgba(180, 35, 24, 0.14));
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--board-digit-bad, var(--bad, #b42318)) 16%, transparent) 3px,
    color-mix(in srgb, var(--board-digit-bad, var(--bad, #b42318)) 16%, transparent) 5px
  );
  color: var(--board-digit-bad, var(--bad, #b42318));
  box-shadow: inset 0 -3px 0 0 var(--board-digit-bad, var(--bad, #b42318));
}

.howto-tutorial-killer .cage-sum {
  position: absolute;
  top: 1px;
  left: 2px;
  z-index: 5;
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--board-cell, var(--cell, #fff9e8)) 88%, transparent);
  color: var(--board-cage-sum, var(--ink-strong, #241a14));
  font-family: var(--font-digits, inherit);
  font-size: clamp(0.5rem, 1.6vw, 0.68rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

.howto-tutorial-killer .howto-tutorial-cell.has-cage-sum .digit {
  padding-top: 0.45em;
}

.howto-tutorial-killer .cw {
  position: absolute;
  z-index: 1;
  background: transparent;
  border-color: var(--cage-border, var(--board-cage, var(--ink-strong, #241a14)));
  border-style: dotted;
  pointer-events: none;
}

.howto-tutorial-killer .cw.n {
  top: 2px;
  left: 2px;
  right: 2px;
  height: 0;
  width: auto;
  border-top-width: 1px;
  border-top-style: dotted;
}

.howto-tutorial-killer .cw.s {
  bottom: 2px;
  left: 2px;
  right: 2px;
  height: 0;
  width: auto;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
}

.howto-tutorial-killer .cw.w {
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 0;
  height: auto;
  border-left-width: 1px;
  border-left-style: dotted;
}

.howto-tutorial-killer .cw.e {
  top: 2px;
  bottom: 2px;
  right: 2px;
  width: 0;
  height: auto;
  border-right-width: 1px;
  border-right-style: dotted;
}

.howto-tutorial-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.howto-tutorial-actions .tutorial-next-btn {
  min-height: 48px;
  min-width: min(100%, 14rem);
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 700;
  justify-content: center;
}

.howto-tutorial-cell.is-given.is-locked {
  opacity: 0.38;
  color: color-mix(in srgb, var(--entry, var(--board-digit, #1d4ed8)) 55%, var(--muted));
}

.howto-tutorial-complete {
  margin: 0 0 12px;
  color: var(--muted);
}

.howto-tutorial-done .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* Tablet and up: keypad sits beside the board, same split as Binary play from 761px. */
@media (min-width: 761px) {
  .howto-tutorial-binary,
  .howto-tutorial-play,
  .howto-tutorial-suguru,
  .howto-tutorial-digits {
    grid-template-columns: minmax(0, 320px) minmax(168px, 220px);
    justify-content: center;
    justify-items: stretch;
    align-items: center;
  }

  .howto-tutorial-binary-grid,
  .howto-tutorial-kakuro-grid,
  .howto-tutorial-futoshiki-grid,
  .howto-tutorial-suguru-grid,
  .howto-tutorial-digits-grid,
  .howto-tutorial-sky-grid,
  .howto-tutorial-yakazu-grid,
  .howto-tutorial-keypad,
  .howto-tutorial-binary .howto-tutorial-keypad,
  .howto-tutorial-suguru .howto-tutorial-keypad {
    width: 100%;
  }
}

/* Phone stack. Columns may shrink so a long Clear label does not overflow. */
@media (max-width: 760px) {
  .howto-tutorial-shell {
    padding: 12px;
  }

  .howto-tutorial-binary,
  .howto-tutorial-play,
  .howto-tutorial-suguru,
  .howto-tutorial-digits {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .howto-tutorial-binary-grid,
  .howto-tutorial-kakuro-grid,
  .howto-tutorial-futoshiki-grid,
  .howto-tutorial-suguru-grid,
  .howto-tutorial-digits-grid,
  .howto-tutorial-sky-grid,
  .howto-tutorial-yakazu-grid,
  .howto-tutorial-keypad,
  .howto-tutorial-binary .howto-tutorial-keypad,
  .howto-tutorial-suguru .howto-tutorial-keypad {
    width: min(100%, 360px);
  }

  .howto-tutorial-actions {
    justify-content: stretch;
  }

  .howto-tutorial-actions .btn,
  .howto-tutorial-done .btn {
    width: 100%;
  }
}
/* Codebreaker teaching board. Same tokens as live play (board cell, entry ink,
   exact/misplaced marks, digit face). Scoped here because play-shell.css is
   bound to body.ds-codebreaker and is not loaded on how-to pages. */
.howto-tutorial-codebreaker {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.howto-tutorial-codebreaker-play {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: 100%;
  align-items: center;
}

.howto-tutorial-codebreaker-board {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: min(100%, 360px);
  padding: 14px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  background: color-mix(in srgb, var(--game-codebreaker, #E07A5F) 7%, var(--board-cell, var(--paper-bright)));
}

.howto-tutorial-codebreaker .cb-label {
  margin: 0 0 0.35rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, var(--paper));
}

.howto-tutorial-codebreaker .cb-slots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.howto-tutorial-codebreaker .cb-slot {
  width: clamp(2.2rem, 11vw, 3rem);
  height: clamp(2.5rem, 12vw, 3.3rem);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--board-line-strong, var(--ink));
  border-radius: var(--radius-sm, 8px);
  background: var(--board-cell, var(--paper-bright));
  color: var(--board-entry, var(--ink));
  font-family: var(--font-digits);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "zero" 0;
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.howto-tutorial-codebreaker .cb-slot-hidden {
  background: color-mix(in srgb, var(--paper) 70%, var(--paper-bright));
  color: color-mix(in srgb, var(--ink) 42%, var(--paper));
  border-style: dashed;
  cursor: default;
  min-height: 36px;
}

.howto-tutorial-codebreaker .cb-slot.is-next,
.howto-tutorial-codebreaker .cb-slot.is-focus,
.howto-tutorial-codebreaker .cb-slot[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2.5px var(--cta);
  background: color-mix(in srgb, var(--cta) 20%, var(--board-cell, var(--paper-bright)));
  border-color: var(--cta);
}

.howto-tutorial-codebreaker .cb-slot.is-highlight:not(.is-next) {
  background: color-mix(in srgb, var(--cta) 16%, var(--board-cell, var(--paper-bright)));
}

.howto-tutorial-codebreaker .cb-slot.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.howto-tutorial-codebreaker .howto-tutorial-keypad button {
  font-family: var(--font-digits);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "zero" 0;
  touch-action: manipulation;
}

.howto-tutorial-codebreaker .howto-tutorial-keypad button.is-backspace {
  grid-column: span 2;
  font-family: inherit;
  font-feature-settings: normal;
  font-size: 0.85rem;
}

.howto-tutorial-codebreaker .howto-tutorial-keypad button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.howto-tutorial-codebreaker .howto-tutorial-keypad button.is-highlight {
  box-shadow: inset 0 0 0 2px var(--gold, #c9a227);
  background: var(--gold-wash, rgba(201, 162, 39, 0.16));
}

.howto-tutorial-codebreaker .howto-tutorial-keypad button.is-highlight:disabled {
  opacity: 1;
  color: color-mix(in srgb, var(--ink) 48%, var(--paper));
  cursor: not-allowed;
}

.howto-tutorial-codebreaker .howto-tutorial-keypad button.is-press {
  background: color-mix(in srgb, var(--cta) 16%, var(--paper-bright, var(--board-cell)));
}

.howto-tutorial-codebreaker .cb-legend {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 68%, var(--paper));
}

.howto-tutorial-codebreaker .cb-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.howto-tutorial-codebreaker .cb-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3rem 0.45rem;
  min-width: 0;
  font-family: var(--font-digits);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "zero" 0;
}

.howto-tutorial-codebreaker .cb-ord {
  flex: 0 0 auto;
  width: 1.15rem;
  color: color-mix(in srgb, var(--ink) 55%, var(--paper));
  font-size: 0.75rem;
}

.howto-tutorial-codebreaker .cb-digits {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  white-space: nowrap;
}

.howto-tutorial-codebreaker .cb-dots {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.16rem;
}

.howto-tutorial-codebreaker .cb-dot {
  width: 0.72rem;
  height: 0.72rem;
  flex: 0 0 auto;
  border-radius: 50%;
  box-sizing: border-box;
}

.howto-tutorial-codebreaker .cb-dot.is-exact {
  background: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.howto-tutorial-codebreaker .cb-dot.is-misplaced {
  background: color-mix(in srgb, var(--cta) 28%, var(--paper-bright));
  border: 2.5px solid var(--cta);
}

.howto-tutorial-codebreaker .is-region-highlight {
  background: color-mix(in srgb, var(--cta) 12%, transparent);
  border-radius: var(--radius-sm, 8px);
}

.howto-tutorial-codebreaker .is-region-focus {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 8px);
}

@media (min-width: 761px) {
  .howto-tutorial-codebreaker-play {
    grid-template-columns: minmax(0, 1fr) minmax(168px, 220px);
    justify-content: center;
    justify-items: stretch;
  }

  .howto-tutorial-codebreaker-board,
  .howto-tutorial-codebreaker .howto-tutorial-keypad {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .howto-tutorial-codebreaker .cb-slot {
    width: clamp(1.9rem, 9.5vw, 2.6rem);
    height: clamp(2.1rem, 10vw, 2.8rem);
    font-size: clamp(1rem, 4vw, 1.28rem);
  }

  .howto-tutorial-codebreaker .cb-digits {
    letter-spacing: 0.05em;
    font-size: 0.88rem;
  }

  .howto-tutorial-codebreaker .cb-dot {
    width: 0.62rem;
    height: 0.62rem;
  }

  .howto-tutorial-codebreaker .cb-legend {
    font-size: 0.75rem;
    line-height: 1.25;
  }
}
/* Shikaku — same region tones and edge geometry as prototype/shikaku/styles.css. */
.howto-tutorial-shikaku {
  display: grid;
  justify-items: center;
  width: 100%;
}

.howto-tutorial-shikaku-grid {
  display: grid;
  width: min(100%, 320px);
  aspect-ratio: 1;
  touch-action: none;
  border: 3px solid var(--board-line-strong, var(--ink));
  background: var(--board-cell, var(--cell));
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.howto-tutorial-shikaku .howto-tutorial-cell {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--board-line, var(--line)) 62%, transparent);
  background-color: var(--board-cell, var(--cell));
  color: var(--ink);
  font-weight: 800;
  min-height: 44px;
}

.howto-tutorial-shikaku .howto-tutorial-cell .clue {
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 800;
  color: var(--ink);
}

.howto-tutorial-shikaku .howto-tutorial-cell.region-tone-0 { background-color: color-mix(in srgb, #D96557 30%, var(--board-cell, var(--cell))); }
.howto-tutorial-shikaku .howto-tutorial-cell.region-tone-1 { background-color: color-mix(in srgb, #D7A11E 31%, var(--board-cell, var(--cell))); }
.howto-tutorial-shikaku .howto-tutorial-cell.region-tone-2 { background-color: color-mix(in srgb, #6C9F45 30%, var(--board-cell, var(--cell))); }
.howto-tutorial-shikaku .howto-tutorial-cell.region-tone-3 { background-color: color-mix(in srgb, #319A8D 30%, var(--board-cell, var(--cell))); }
.howto-tutorial-shikaku .howto-tutorial-cell.region-tone-4 { background-color: color-mix(in srgb, #4F7DC2 30%, var(--board-cell, var(--cell))); }
.howto-tutorial-shikaku .howto-tutorial-cell.region-tone-5 { background-color: color-mix(in srgb, #6E62B5 30%, var(--board-cell, var(--cell))); }
.howto-tutorial-shikaku .howto-tutorial-cell.region-tone-6 { background-color: color-mix(in srgb, #A15AB1 30%, var(--board-cell, var(--cell))); }
.howto-tutorial-shikaku .howto-tutorial-cell.region-tone-7 { background-color: color-mix(in srgb, #C65386 30%, var(--board-cell, var(--cell))); }

.howto-tutorial-shikaku .howto-tutorial-cell.region-edge-top { border-top: 3px solid var(--board-line-strong, var(--ink)); }
.howto-tutorial-shikaku .howto-tutorial-cell.region-edge-left { border-left: 3px solid var(--board-line-strong, var(--ink)); }

.howto-tutorial-shikaku .howto-tutorial-cell.is-drag,
.howto-tutorial-shikaku .howto-tutorial-cell.is-anchor {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  background-color: var(--board-cell-sel, var(--cell));
}

.howto-tutorial-shikaku .howto-tutorial-cell.is-conflict {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    color-mix(in srgb, var(--bad, #b42318) 28%, transparent) 2px,
    color-mix(in srgb, var(--bad, #b42318) 28%, transparent) 5px
  );
}
.howto-tutorial-shikaku .howto-tutorial-cell.is-area-mismatch {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, color-mix(in srgb, var(--bad, #b42318) 30%, transparent) 3px, color-mix(in srgb, var(--bad, #b42318) 30%, transparent) 6px);
}

/* Suguru — same tints and four-sided walls as prototype/suguru/styles.css. */
.howto-tutorial-suguru {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: 100%;
  align-items: center;
}

.howto-tutorial-suguru-grid {
  display: grid;
  width: min(100%, 280px);
  aspect-ratio: 1;
  border: 2px solid var(--board-line-strong, var(--ink));
  background: var(--board-cell, var(--cell));
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.howto-tutorial-suguru .howto-tutorial-cell {
  position: relative;
  font-weight: 650;
  color: var(--ink);
  background-color: var(--board-cell, var(--cell));
  background-image:
    var(--suguru-wall-n, linear-gradient(transparent, transparent)),
    var(--suguru-wall-e, linear-gradient(transparent, transparent)),
    var(--suguru-wall-s, linear-gradient(transparent, transparent)),
    var(--suguru-wall-w, linear-gradient(transparent, transparent));
  background-position: top, right, bottom, left;
  background-size:
    100% var(--suguru-wall-size, 2px),
    var(--suguru-wall-size, 2px) 100%,
    100% var(--suguru-wall-size, 2px),
    var(--suguru-wall-size, 2px) 100%;
  background-repeat: no-repeat;
  border: 0;
  border-top: 1px solid var(--board-line, var(--line));
  border-left: 1px solid var(--board-line, var(--line));
  padding: 0;
  font-family: inherit;
  font-size: clamp(1.05rem, 4vw, 1.45rem);
  min-height: 44px;
}

.howto-tutorial-suguru .howto-tutorial-cell.is-given {
  font-weight: 800;
  color: var(--board-given, var(--ink));
  cursor: default;
}

.howto-tutorial-suguru .howto-tutorial-cell.tint-1 { background-color: color-mix(in srgb, #D45E3D 10%, var(--board-cell, var(--cell))); }
.howto-tutorial-suguru .howto-tutorial-cell.tint-2 { background-color: color-mix(in srgb, #C88708 10%, var(--board-cell, var(--cell))); }
.howto-tutorial-suguru .howto-tutorial-cell.tint-3 { background-color: color-mix(in srgb, #2E8B7A 10%, var(--board-cell, var(--cell))); }
.howto-tutorial-suguru .howto-tutorial-cell.tint-4 { background-color: color-mix(in srgb, #3547B3 10%, var(--board-cell, var(--cell))); }
.howto-tutorial-suguru .howto-tutorial-cell.tint-5 { background-color: color-mix(in srgb, #6B5B95 10%, var(--board-cell, var(--cell))); }
.howto-tutorial-suguru .howto-tutorial-cell.tint-6 { background-color: color-mix(in srgb, #E07A5F 10%, var(--board-cell, var(--cell))); }

.howto-tutorial-suguru .howto-tutorial-cell.wall-n { --suguru-wall-n: linear-gradient(var(--board-line-strong, var(--ink)), var(--board-line-strong, var(--ink))); }
.howto-tutorial-suguru .howto-tutorial-cell.wall-e { --suguru-wall-e: linear-gradient(var(--board-line-strong, var(--ink)), var(--board-line-strong, var(--ink))); }
.howto-tutorial-suguru .howto-tutorial-cell.wall-s { --suguru-wall-s: linear-gradient(var(--board-line-strong, var(--ink)), var(--board-line-strong, var(--ink))); }
.howto-tutorial-suguru .howto-tutorial-cell.wall-w { --suguru-wall-w: linear-gradient(var(--board-line-strong, var(--ink)), var(--board-line-strong, var(--ink))); }

.howto-tutorial-suguru .howto-tutorial-keypad {
  grid-template-columns: repeat(2, minmax(44px, 1fr));
}

.howto-tutorial-suguru .howto-tutorial-keypad button.ghost {
  grid-column: 1 / -1;
}

.howto-tutorial-shikaku .howto-tutorial-cell.is-highlight,
.howto-tutorial-suguru .howto-tutorial-cell.is-highlight {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold, var(--accent)) 75%, transparent);
}

.howto-tutorial-shikaku .howto-tutorial-cell.is-focus,
.howto-tutorial-suguru .howto-tutorial-cell.is-focus {
  box-shadow: none;
  outline: 2px solid var(--gold, var(--accent));
  outline-offset: -4px;
}

.howto-tutorial-shikaku .howto-tutorial-cell.is-selected,
.howto-tutorial-suguru .howto-tutorial-cell.is-selected {
  outline: none;
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  background-color: var(--board-cell-sel, var(--cell));
  z-index: 1;
}

.howto-tutorial-cell.is-constraint {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

.howto-tutorial-suguru .howto-tutorial-cell.is-conflict {
  color: var(--bad, #b42318);
  box-shadow: inset 0 -3px 0 0 var(--bad, #b42318);
}

.howto-tutorial-suguru .howto-tutorial-cell.is-selected.is-conflict {
  box-shadow:
    inset 0 0 0 2.5px var(--play-ring-active, #19D65A),
    inset 0 -3px 0 0 var(--bad, #b42318);
}

.howto-tutorial-shikaku .howto-tutorial-cell.is-drag,
.howto-tutorial-shikaku .howto-tutorial-cell.is-anchor {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  background-color: var(--board-cell-sel, var(--cell));
}

.howto-tutorial-sky-grid,
.howto-tutorial-yakazu-grid {
  display: grid;
  width: min(100%, 320px);
  aspect-ratio: 1;
  gap: 0;
  border: 3px solid var(--grid-strong, #3a2d22);
  border-radius: 6px;
  background: var(--grid-strong, #3a2d22);
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.howto-tutorial-sky-corner,
.howto-tutorial-sky-clue {
  display: grid;
  place-items: center;
  min-height: 44px;
  min-width: 44px;
  background: var(--paper, var(--bg, #fffaf2));
  color: var(--ink-strong, #241a14);
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(0.75rem, 3vw, 1rem);
}

.howto-tutorial-sky-clue.is-highlight {
  outline: 2px solid var(--gold, var(--accent));
  outline-offset: -3px;
  background: var(--gold-wash, color-mix(in srgb, var(--gold, var(--accent)) 18%, var(--paper, #fffaf2)));
}

.howto-tutorial-sky .howto-tutorial-cell,
.howto-tutorial-yakazu .howto-tutorial-cell {
  font-variant-numeric: lining-nums tabular-nums;
  background: var(--board-cell, var(--cell, #fffaf0));
  color: var(--board-entry, var(--entry, #1d4ed8));
}

.howto-tutorial-sky .howto-tutorial-cell.is-given,
.howto-tutorial-yakazu .howto-tutorial-cell.is-given {
  color: var(--board-given, var(--ink-strong, #241a14));
  font-weight: 800;
}

.howto-tutorial-sky .howto-tutorial-cell.is-selected,
.howto-tutorial-yakazu .howto-tutorial-cell.is-selected {
  outline: none;
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
  background-color: var(--board-cell-sel, var(--cell));
  z-index: 1;
}

.howto-tutorial-sky .howto-tutorial-cell.is-conflict,
.howto-tutorial-yakazu .howto-tutorial-cell.is-conflict {
  box-shadow: inset 0 -3px 0 0 var(--bad, #b42318);
}

.howto-tutorial-sky .howto-tutorial-cell.is-selected.is-conflict,
.howto-tutorial-yakazu .howto-tutorial-cell.is-selected.is-conflict {
  box-shadow:
    inset 0 0 0 2.5px var(--play-ring-active, #19D65A),
    inset 0 -3px 0 0 var(--bad, #b42318);
}

.howto-tutorial-yakazu .howto-tutorial-cell.is-black {
  background: #241a14;
  cursor: default;
  box-shadow: none;
}

.howto-tutorial-sky .howto-tutorial-keypad button.ghost,
.howto-tutorial-yakazu .howto-tutorial-keypad button.ghost {
  grid-column: 1 / -1;
}

/* One shared column for the intro and exercise, independent of library flex chrome. */
/* Top gap is the shared 12px crumb margin (site-chrome.css). Do not add band padding-top. */
body.ds-shell[data-v2-page="tutorial"] .page > .band { padding: 0; background: transparent; }
body.ds-shell[data-v2-page="tutorial"] .page > :is(.lib-breadcrumb, nav.view-nav[data-game-views], .band, .section) {
  box-sizing: border-box;
  width: var(--teaching-content-width, min(1400px, calc(100vw - 2 * clamp(16px, 2vw, 28px))));
  max-width: none;
  margin-inline: auto;
}
@media (max-width: 767px) {
  body.ds-shell[data-v2-page="tutorial"] .page > :is(.lib-breadcrumb, nav.view-nav[data-game-views], .band, .section) {
    width: var(--mobile-content-width, 95%);
  }
}
/* Per-game play-shell.css sets `.actions { order: 3 }` for mobile play controls; tutorial view nav also uses `.actions`. */
body.ds-shell[data-v2-page="tutorial"] .page > nav.view-nav[data-game-views] { order: 0 !important; }
body.ds-shell[data-v2-page="tutorial"] .band .lib-hero {
  display: block;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  min-height: 0;
  padding: 16px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
}
body.ds-shell[data-v2-page="tutorial"] .lib-hero-copy { width: 100%; min-width: 0; }
body.ds-shell[data-v2-page="tutorial"] :is(.page-title, .teaching-page-title) {
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 8px;
}
body.ds-shell[data-v2-page="tutorial"] .lib-hero-copy .lede-tight {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
  margin: 0;
  line-height: 1.5;
  color: var(--ink);
}
body.ds-shell[data-v2-page="tutorial"] .page > .section {
  padding: 12px 0 32px;
}
body.ds-shell[data-v2-page="tutorial"] .lib-hero-actions { display: none !important; }
body.ds-shell[data-v2-page="tutorial"] :is(.howto-tutorial-mount, .howto-tutorial-shell) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.tutorial-grid-gate { position: relative; }
.tutorial-grid-gate > .howto-tutorial-idle {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 8px;
  background: color-mix(in srgb, var(--paper-bright, #fff8e7) 55%, transparent);
  border-radius: inherit;
}
.howto-tutorial-idle .btn { max-width: 100%; white-space: normal; text-align: center; }
.howto-tutorial-reset-row { display: flex; justify-content: center; }
.howto-tutorial-reset-row .btn { flex: 0 1 auto; min-height: 44px; margin-top: 12px; }
[data-tutorial-reset][hidden] { display: none !important; }
.howto-tutorial-shell.is-idle [data-tutorial-gate-inert] { pointer-events: none; }
.howto-tutorial-shell, .howto-tutorial-mount > details {
  background: var(--paper-bright);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  padding: 16px;
}
.howto-tutorial-mount > details { margin-top: 12px; }
.howto-tutorial-mount summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-weight: 600; }
.howto-tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}
.howto-tutorial-actions .btn,
.howto-tutorial-idle .btn,
.howto-tutorial-done .btn,
.tutorial-bravo-actions .btn {
  min-height: 44px;
  min-width: 44px;
}
[data-tutorial-reset] { margin-top: 12px; }

.howto-tutorial-idle[hidden],
.howto-tutorial-done[hidden],
[data-tutorial-prompt][hidden],
[data-tutorial-actions][hidden],
[data-tutorial-free-note][hidden],
[data-tutorial-easy-fallback][hidden],
.tutorial-bravo[hidden] { display: none !important; }
.howto-tutorial-prompt,
.howto-tutorial-head { margin-bottom: 12px; }
.howto-tutorial-instruction {
  min-height: var(--tutorial-instruction-min, auto);
  max-height: var(--tutorial-instruction-max, none);
  overflow-y: auto;
  overflow-wrap: anywhere;
}
.howto-tutorial-done {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.howto-tutorial-free-note,
.tutorial-easy-fallback {
  flex: 1 0 100%;
  margin: 0;
  line-height: 1.45;
}
.tutorial-bravo {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  background: #24170fb3;
  box-sizing: border-box;
}
.tutorial-bravo[hidden] { display: none !important; }
.tutorial-bravo-card {
  position: relative;
  width: min(100%, 420px);
  padding: 26px 20px 20px;
  border: 1px solid #bc8d40;
  border-radius: var(--radius-md, 12px);
  background: radial-gradient(ellipse at 0 0, #eebf5540, transparent 65%), var(--paper-bright, #fff8e7);
  color: var(--ink, #24170f);
  box-shadow: 0 24px 80px #35200d66;
  overflow: hidden;
}
.tutorial-bravo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #956222, #ffe4a0, #c59438);
}
.tutorial-bravo-card h2 {
  margin: 8px 40px 12px 0;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.tutorial-bravo-card p { margin: 0 0 16px; line-height: 1.5; }
.tutorial-bravo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tutorial-bravo-actions .btn { flex: 1 1 160px; }
.tutorial-bravo-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper-bright, #fff8e7) 82%, transparent);
  font-size: 0;
}
.tutorial-bravo-close::after { content: "×"; font-size: 28px; line-height: 1; color: var(--ink, #24170f); }
.tutorial-bravo .win-sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tutorial-bravo .win-sparkles i {
  position: absolute;
  top: 0;
  left: calc(7% * var(--i));
  color: #d9940d;
  font-style: normal;
  font-size: 18px;
  animation: tutorial-bravo-sparkle 1100ms ease-out both;
  animation-delay: calc(var(--i) * 16ms);
}
.tutorial-bravo .win-sparkles i:nth-child(3n) { color: #b8812d; }
.tutorial-bravo .win-sparkles i:nth-child(3n + 1) { color: #f6d78a; }
@keyframes tutorial-bravo-sparkle {
  from { opacity: 0; transform: translateY(-10px) rotate(0); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translateY(150px) rotate(150deg); }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .tutorial-bravo .win-sparkles { display: none !important; }
}
@media (max-width: 760px) {
  .howto-tutorial-actions .btn,
  .howto-tutorial-done .btn,
  .tutorial-bravo-actions .btn { flex: 1 1 140px; }
}
/* Non-pedagogical play chrome on every activated tutorial, not on new games. */
:is(body[data-v2-page="tutorial"], .howto-tutorial-mount) .tutorial-play-surface :is(
  .toolbar, #meta, .meta, .clock, #timer, #pause, #pauseOverlay,
  .play-premium-slot, #win, #debug, #debugToggle, #startGate, .board-loading,
  .play-breadcrumb, .play-hero-card, #playContext, #newGame, #restart,
  #clearSession, #confirmDrafts, #bandField, #sizeField, #band, #size, #bandPill, #scorePill
) {
  display: none !important;
}
.howto-tutorial-futoshiki .board {
  width: min(100%, 360px);
  aspect-ratio: 1;
  min-height: 0;
}
.howto-tutorial-futoshiki .cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.howto-tutorial-futoshiki .is-focus { outline: 2px solid var(--play-ring-active); outline-offset: -2px; }
.howto-tutorial-futoshiki .howto-tutorial-keypad {
  width: min(100%, 360px);
  grid-template-columns: repeat(4, minmax(44px, 1fr));
}
.howto-tutorial-futoshiki .howto-tutorial-keypad button {
  min-height: 44px;
  background: var(--keypad-key-bg, var(--paper-wash));
  border: 1px solid var(--keypad-key-border, var(--line));
  color: var(--ink);
  border-radius: var(--radius-sm, 8px);
  font-family: var(--font-digits);
}
.howto-tutorial-futoshiki .howto-tutorial-keypad .ghost { grid-column: 1 / -1; }
.howto-tutorial button:focus-visible { outline: 2px solid var(--play-ring-active); outline-offset: 2px; }
/* Locked teaching cells remain readable and keep identical SSR/attached geometry. */
.howto-tutorial-futoshiki .cell.is-locked { opacity: 1; }
body[data-v2-page="tutorial"] .lib-hero-actions { margin-bottom: 0; }
body[data-v2-page="tutorial"] .lib-hero .lede-tight { font-size: .95rem; }
body[data-v2-page="tutorial"] #libList > nav {
  padding: 12px 16px;
  border-radius: var(--radius-md, 12px);
  background: var(--paper-bright);
  border: 1px solid var(--line);
}
body[data-v2-page="tutorial"] #libList > nav a { color: var(--ink); min-height: 44px; align-content: center; }

/* All tutorial title marks are icons, never full-size play boards. */
body.ds-shell[data-v2-page="tutorial"] .teaching-page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body.ds-shell[data-v2-page="tutorial"] .teaching-page-title-icon {
  display: inline-flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.ds-shell[data-v2-page="tutorial"] .teaching-page-title-icon svg,
body.ds-shell[data-v2-page="tutorial"] .teaching-page-title-icon .game-icon {
  display: block;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px;
}
body.ds-shell[data-v2-page="tutorial"] .teaching-page-title-text {
  min-width: 0;
}
body.ds-shell[data-v2-page="tutorial"] .lib-hero-copy .lede-tight,
body.ds-shell[data-v2-page="tutorial"] .lib-hero-copy [data-ssr="v2-lede"] {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  max-height: none;
}
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-shell,
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-mount,
body.ds-shell[data-v2-page="tutorial"] .tutorial-play-surface[data-tutorial-pedagogy="board"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-active,
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-board {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}
.howto-tutorial-mount .tutorial-play-surface #playMain.puzzle-page-shell {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.howto-tutorial-mount .tutorial-play-surface #playMain.puzzle-page-shell .play {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 12px !important;
}
.howto-tutorial-mount .tutorial-play-surface :is(
  .toolbar, #meta, .meta, .clock, .cb-head, .play-premium-slot, #win, #pauseOverlay,
  #debug, #debugToggle, .board-legend, .cb-legend, #startGate, .board-loading,
  .play-breadcrumb, .play-hero-card, #playContext, #newGame, #restart, #undoBtn,
  #notesBtn, #clearSession, #confirmDrafts, #bandField, #sizeField
) {
  display: none !important;
}
.howto-tutorial-mount .tutorial-play-surface #playMain .play > .board-wrap,
.howto-tutorial-mount .tutorial-play-surface #playMain .play > .side,
.howto-tutorial-mount .tutorial-play-surface #playMain .play-keypad-stack,
.howto-tutorial-mount .tutorial-play-surface #playMain .keypad {
  box-sizing: border-box !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: min(100%, var(--tutorial-board-width, 480px)) !important;
  max-width: var(--tutorial-board-width, 480px) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  order: 0 !important;
}
.howto-tutorial-mount .tutorial-play-surface #playMain .board-wrap {
  padding: 8px !important;
  height: auto !important;
}
.howto-tutorial-mount .tutorial-play-surface #playMain .board-wrap > .board {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-inline: auto !important;
}
body[data-v2-page="tutorial"][data-game="binary-puzzle"] .tutorial-play-surface[data-tutorial-pedagogy="board"] #keypad.is-binary-keypad {
  grid-template-columns: repeat(3, minmax(44px, 1fr)) !important;
}
body[data-v2-page="tutorial"][data-game="binary-puzzle"] .tutorial-play-surface[data-tutorial-pedagogy="board"] #board .cell {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 !important;
  min-width: 0;
  min-height: 0;
  text-align: center;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "zero" 0, "lnum" 1, "tnum" 1;
}
body[data-v2-page="tutorial"][data-game="binary-puzzle"] .tutorial-play-surface[data-tutorial-pedagogy="board"] #board .cell > .cell-numeral {
  display: grid !important;
  place-items: center !important;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  line-height: 1 !important;
  text-align: center;
  font-size: min(calc(0.62 * 100cqi), 2.25rem) !important;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "zero" 0, "lnum" 1, "tnum" 1;
}
body[data-v2-page="tutorial"][data-game="binary-puzzle"] .tutorial-play-surface[data-tutorial-pedagogy="board"] #keypad .keypad-digit {
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "zero" 0, "lnum" 1, "tnum" 1;
}
body[data-v2-page="tutorial"][data-game="binary-puzzle"] .tutorial-play-surface[data-tutorial-pedagogy="board"] #board .cell.is-tutorial-focus {
  box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A);
}
body[data-v2-page="tutorial"][data-game="binary-puzzle"] .tutorial-play-surface[data-tutorial-pedagogy="board"] #board .cell.is-tutorial-locked {
  cursor: not-allowed;
}
body[data-v2-page="tutorial"][data-game="binary-puzzle"] .tutorial-play-surface[data-tutorial-pedagogy="board"] #board .cell.given {
  cursor: default;
}

/* A small Binary teaching grid retains its established cell scale. */
.howto-tutorial-shell[data-tutorial-game="binary-puzzle"] { --tutorial-board-width: 280px; }

/* A stable, bounded live rule slot: errors never move the board. */
.howto-tutorial-error {
  box-sizing: border-box;
  height: 2.7em;
  line-height: 1.35;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
.howto-tutorial-head > .tutorial-next-btn { margin-top: 8px; min-height: 44px; }
.howto-tutorial-actions { display: flex; justify-content: center; gap: 12px; }
.howto-tutorial-actions [data-tutorial-back] { order: -1; }
.howto-tutorial-actions > button { min-height: 44px; }
.tutorial-daily-link { display: block; margin-top: 16px; text-align: center; }

body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-actions,
.howto-tutorial-shell .howto-tutorial-actions { flex-wrap: nowrap; align-items: stretch; gap: 12px; }
.howto-tutorial-shell .howto-tutorial-actions > .btn {
  flex: 0 0 auto; width: min(140px, calc((100% - 12px) / 2)); min-width: 0; margin-top: 0;
  box-sizing: border-box; height: 44px; padding: 4px 6px;
  font-size: .9rem; line-height: 1.15; white-space: normal;
}

/* The runner locks this to the tallest instruction in the current language. */
.howto-tutorial-instruction {
  min-height: var(--tutorial-instruction-min, auto);
  max-height: var(--tutorial-instruction-max, none);
  overflow-y: auto;
  overflow-wrap: anywhere;
}
.howto-tutorial-head > .tutorial-next-btn.is-tutorial-reserved {
  visibility: hidden;
  pointer-events: none;
}
.howto-tutorial-head { margin-bottom: clamp(8px, 2vw, 16px); }
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-shell .tutorial-daily-link {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: min(140px, calc((100% - 12px) / 2)); max-width: 100%; min-height: 44px;
  margin: 12px auto 0; padding: 4px 6px; font-size: .9rem; line-height: 1.15;
}
.tutorial-bravo-actions { justify-content: center; }
.tutorial-bravo-actions .btn { flex: 0 1 140px; }

body.ds-shell[data-v2-page="tutorial"] .tutorial-bravo-actions .btn {
  box-sizing: border-box; width: 140px; flex: 0 1 140px;
  min-height: 44px; padding: 4px 6px; font-size: .9rem; line-height: 1.15;
}

/* Shared warm CTA palette: primary Play vs neutral browse/restart destinations. */
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-shell :is([data-tutorial-play], .tutorial-daily-link, [data-tutorial-restart-end], [data-tutorial-reset]) {
  --tutorial-cta-bg: var(--play-cta-bg);
  --tutorial-cta-hover: var(--play-cta-hover);
  --tutorial-cta-pressed: var(--play-cta-pressed);
  --tutorial-cta-ink: var(--play-cta-ink);
  background: var(--tutorial-cta-bg);
  color: var(--tutorial-cta-ink);
  border-color: var(--play-cta-bg);
}
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-shell :is([data-tutorial-play]:not(.primary), .tutorial-daily-link, [data-tutorial-restart-end], [data-tutorial-reset]) {
  --tutorial-cta-bg: var(--play-cta-secondary-bg);
  --tutorial-cta-hover: var(--play-cta-secondary-hover);
  --tutorial-cta-pressed: var(--play-cta-secondary-pressed);
  --tutorial-cta-ink: var(--play-cta-secondary-ink);
}
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-shell :is([data-tutorial-play], .tutorial-daily-link, [data-tutorial-restart-end], [data-tutorial-reset]):hover {
  background: var(--tutorial-cta-hover);
  color: var(--tutorial-cta-ink);
  border-color: var(--play-cta-hover);
}
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-shell :is([data-tutorial-play], .tutorial-daily-link, [data-tutorial-restart-end], [data-tutorial-reset]):active {
  background: var(--tutorial-cta-pressed);
  color: var(--tutorial-cta-ink);
  border-color: var(--play-cta-pressed);
}
body.ds-shell[data-v2-page="tutorial"] .howto-tutorial-shell :is([data-tutorial-play], .tutorial-daily-link, [data-tutorial-restart-end], [data-tutorial-reset]):focus-visible {
  outline: 3px solid var(--play-cta-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--play-cta-ink);
}

/* Select-this-cell cue. Inset outline and background do not change cell size. */
@keyframes tutorial-target-pulse {
  0%, 100% {
    background-color: color-mix(in srgb, #f5c542 14%, transparent);
    outline-color: #b58116;
  }
  50% {
    background-color: color-mix(in srgb, #f5c542 48%, transparent);
    outline-color: #6a4300;
  }
}
:is(.cell, .howto-tutorial-cell, .cb-slot).is-tutorial-target-pulse {
  outline: 3px solid #b58116;
  outline-offset: -3px;
  animation: tutorial-target-pulse 1.05s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  :is(.cell, .howto-tutorial-cell, .cb-slot).is-tutorial-target-pulse {
    animation: none !important;
    outline: 3px solid #6a4300 !important;
    outline-offset: -3px !important;
    background-color: color-mix(in srgb, #f5c542 42%, transparent) !important;
  }
}

/* Higher or Lower lesson only. The live game stylesheet is not edited. */
[data-tutorial-game="higher-lower-number"] .board-higher-lower-number {
  aspect-ratio: auto;
  width: 100%;
  max-width: 28rem;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}
[data-tutorial-game="higher-lower-number"] .hl-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
[data-tutorial-game="higher-lower-number"] .hl-keypad .hl-key {
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  font-size: 1.1rem;
}
[data-tutorial-game="higher-lower-number"] .hl-keypad [data-hl-key="submit"] {
  grid-column: 1 / -1;
}

/* Le bon compte lesson only. The live game stylesheet is not edited. */
[data-tutorial-game="target-number"] .board-target-number {
  display: flex;
  flex-direction: column;
  gap: 8px;
  aspect-ratio: auto;
  width: 100%;
  max-width: 28rem;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
}
[data-tutorial-game="target-number"] .tn-tray,
[data-tutorial-game="target-number"] .tn-ops,
[data-tutorial-game="target-number"] .tn-actions {
  display: grid;
  gap: 8px;
  width: 100%;
}
[data-tutorial-game="target-number"] .tn-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-tutorial-game="target-number"] .tn-ops { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-tutorial-game="target-number"] .tn-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-tutorial-game="target-number"] #board button {
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 1.05rem;
}
[data-tutorial-game="target-number"] #tnCalculate { width: 100%; }
[data-tutorial-game="target-number"] .tn-target,
[data-tutorial-game="target-number"] .tn-selection,
[data-tutorial-game="target-number"] #tnHistory {
  overflow-wrap: anywhere;
  text-align: center;
}
[data-tutorial-game="target-number"] #tnHistory { text-align: start; }
[data-tutorial-game="target-number"] [data-tn-region].is-tutorial-focus {
  outline: 3px solid #b58116;
  outline-offset: 2px;
}

/* Tents lesson only. The live tents stylesheet is not edited. */
[data-tutorial-game="tents"] {
  --tents-grass: #fbf6ea;
  --tents-tree-ground: #e3f3dc;
  --tents-tent-ground: #fde4d2;
  --tents-line: #c9b494;
  --tents-canopy: #1e7a38;
  --tents-canopy-deep: #145c28;
  --tents-trunk: #6a3e22;
  --tents-canvas: #c4512a;
  --tents-canvas-deep: #9a3818;
  --tents-door: #5c2412;
}
[data-tutorial-game="tents"] #playMain {
  padding-inline: 8px;
  max-width: 100%;
}
[data-tutorial-game="tents"] #board.board-tents,
html.is-play body.ds-tents [data-tutorial-game="tents"] #board.board-tents {
  display: block;
  aspect-ratio: auto;
  width: 100%;
  max-width: 28rem;
  height: auto;
  max-height: none;
  min-height: 0;
  margin-inline: auto;
  overflow: visible;
  background: transparent;
}
[data-tutorial-game="tents"] .tents-lesson {
  display: grid;
  grid-template-columns: minmax(1.75rem, auto) repeat(4, minmax(44px, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
[data-tutorial-game="tents"] .tents-clue,
[data-tutorial-game="tents"] .tents-cell {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
[data-tutorial-game="tents"] .tents-clue {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2b2419;
}
[data-tutorial-game="tents"] .tents-cell {
  padding: 0;
  border: 1px solid var(--tents-line);
  border-radius: 6px;
  background: var(--tents-grass);
  color: inherit;
  cursor: pointer;
  position: relative;
}
[data-tutorial-game="tents"] .tents-cell.is-tree { background: var(--tents-tree-ground); cursor: default; }
[data-tutorial-game="tents"] .tents-cell.is-tent { background: var(--tents-tent-ground); }
[data-tutorial-game="tents"] .tents-cell.is-selected { box-shadow: inset 0 0 0 2px #3547b3; }
[data-tutorial-game="tents"] .tents-cell.is-tutorial-focus,
[data-tutorial-game="tents"] .tents-lesson.is-tutorial-focus,
[data-tutorial-game="tents"] .tents-clue.is-tutorial-focus {
  outline: 3px solid #b58116;
  outline-offset: 1px;
}
[data-tutorial-game="tents"] .tents-mark {
  width: 70%;
  height: 70%;
  display: block;
  pointer-events: none;
}
[data-tutorial-game="tents"] .tents-canopy { fill: var(--tents-canopy); }
[data-tutorial-game="tents"] .tents-canopy-deep { fill: var(--tents-canopy-deep); }
[data-tutorial-game="tents"] .tents-trunk { fill: var(--tents-trunk); }
[data-tutorial-game="tents"] .tents-canvas { fill: var(--tents-canvas); }
[data-tutorial-game="tents"] .tents-canvas-shade { fill: var(--tents-canvas-deep); }
[data-tutorial-game="tents"] .tents-door { fill: var(--tents-door); }
[data-tutorial-game="tents"] .tents-pole {
  fill: none;
  stroke: var(--tents-door);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Minesweeper lesson only. The live minesweeper stylesheet is not edited. */
[data-tutorial-game="minesweeper"] #board.board-minesweeper,
html.is-play body.ds-minesweeper [data-tutorial-game="minesweeper"] #board.board-minesweeper {
  display: block;
  aspect-ratio: auto;
  width: 100%;
  max-width: 22rem;
  height: auto;
  max-height: none;
  min-height: 0;
  margin-inline: auto;
  overflow: visible;
  background: transparent;
}
[data-tutorial-game="minesweeper"] .ms-mine-count {
  margin: 0 auto 8px;
  text-align: center;
  font-weight: 700;
}
[data-tutorial-game="minesweeper"] .ms-lesson {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
[data-tutorial-game="minesweeper"] .ms-cell {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  touch-action: manipulation;
  border: 1px solid #8aa37a;
  border-radius: 6px;
  background: #c5ddb4;
  color: #1c2430;
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
}
[data-tutorial-game="minesweeper"] .ms-cell.is-open { background: #f7f4ec; }
[data-tutorial-game="minesweeper"] .ms-cell.is-flag { background: #f6e3c4; }
[data-tutorial-game="minesweeper"] .ms-cell.is-boom { background: #f4c7c3; }
[data-tutorial-game="minesweeper"] .ms-cell.is-selected { box-shadow: inset 0 0 0 2px #3547b3; }
[data-tutorial-game="minesweeper"] .ms-lesson-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 8px 0 0;
  box-sizing: border-box;
}
[data-tutorial-game="minesweeper"] .ms-lesson-actions button {
  min-height: 44px;
  min-width: 0;
}
[data-tutorial-game="minesweeper"] .ms-cell.is-tutorial-focus,
[data-tutorial-game="minesweeper"] .ms-lesson.is-tutorial-focus {
  outline: 3px solid #b58116;
  outline-offset: 1px;
}
[data-tutorial-game="minesweeper"] .ms-flag {
  width: 58%;
  height: 58%;
  display: block;
  pointer-events: none;
}
[data-tutorial-game="minesweeper"] .ms-flag-pole {
  fill: none;
  stroke: #5c4030;
  stroke-width: 4;
  stroke-linecap: round;
}
[data-tutorial-game="minesweeper"] .ms-flag-fly { fill: #c0392b; }

/* Web-font swap must not move the lesson (CLS).
   Measured: with the web fonts blocked the French lessons shift 0.0000 at 320/390/1440; with
   them, the crumb, title, lede and the four-link bar re-wrap when Inter/Sora replace the
   system fallback (up to ~0.26 at 390). Where the fallback is DejaVu Sans (the default sans
   on Linux, wider than Inter), these faces scale it to Inter/Sora advance widths, so the
   lines wrap the same before and after the swap. Machines with Segoe UI, SF, Roboto or
   Helvetica never match a face below and keep the stack that follows. No text is clipped,
   no height is reserved, so no blank space is added after the swap. */
@font-face {
  font-family: "Inter Fallback";
  src: local("DejaVu Sans");
  font-weight: 100 599;
  size-adjust: 94%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("DejaVu Sans Bold");
  font-weight: 600 900;
  size-adjust: 85.5%;
}
@font-face {
  font-family: "Sora Fallback";
  src: local("DejaVu Sans");
  font-weight: 100 599;
  size-adjust: 100.5%;
}
@font-face {
  font-family: "Sora Fallback";
  src: local("DejaVu Sans Bold");
  font-weight: 600 900;
  size-adjust: 89.7%;
}
body.ds-shell[data-v2-page="tutorial"] {
  --font-sans: "Inter", "Inter Fallback", "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Sora", "Sora Fallback", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

/* Keep the public 4×4 lesson's existing touch targets when play CSS is loaded. */
html.is-play body.ds-minesweeper [data-tutorial-game="minesweeper"] #playMain.puzzle-page-shell #board .ms-cell {
  width: 100%;
  height: 44px;
  min-height: 44px;
}

/* SEO 2026-11-03: the title row is a wrapper; the real <h1> inherits its type styles. */
.teaching-page-title > h1.teaching-page-title-text {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-transform: inherit;
}