/* /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=493bb7d4bf6eb8f546bcab4404b6156e42277c4c");
  --ink-stroke: url("/brand/ink-stroke.svg?v=493bb7d4bf6eb8f546bcab4404b6156e42277c4c");

  --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=493bb7d4bf6eb8f546bcab4404b6156e42277c4c");
  --motif-digits: url("/brand/digits.svg?v=493bb7d4bf6eb8f546bcab4404b6156e42277c4c");
  --motif-digits-dark: url("/brand/digits-dark.svg?v=493bb7d4bf6eb8f546bcab4404b6156e42277c4c");
  /* 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=493bb7d4bf6eb8f546bcab4404b6156e42277c4c");
  --ink-stroke: url("/brand/ink-stroke.svg?v=493bb7d4bf6eb8f546bcab4404b6156e42277c4c");

  --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=493bb7d4bf6eb8f546bcab4404b6156e42277c4c");
  --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; }