/* Game identities. Each released game owns a deliberate visual profile.
 * Layout, touch targets, puzzle colors and game rules stay with their components.
 * These tokens are shared by menus, setup, playing chrome and results. */

/* Region mosaic */
:root:is([data-game="queens"], [data-social-game="queens"]) {
  --id-name: "Region mosaic"; --id-accent-light: #7350ac; --id-accent-dark: #d2b7ff;
  --id-day: #f3eef9; --id-night: #211a2c; --id-radius: 22px; --id-control: 12px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(125deg,#382654,#62438b); --id-feature-ink: #fff6ff;
  --id-art: url("/assets/catalog/queens-board.svg"); --id-art-pose: rotate(-6deg);
  --id-texture: repeating-conic-gradient(from 0deg,#ffffff0b 0 25%,transparent 0 50%) 0 0 / 80px 80px; --id-shadow: 0 4px 0 var(--id-line);
}

/* Day and night */
:root:is([data-game="tango"], [data-social-game="tango"]) {
  --id-name: "Day and night"; --id-accent-light: #a54c22; --id-accent-dark: #ffc290;
  --id-day: #fff5e4; --id-night: #291e28; --id-radius: 32px; --id-control: 24px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: radial-gradient(circle at 90% 30%,#7499c6 0 23%,transparent 23.3%),linear-gradient(110deg,#ffe9af,#f5ca7c); --id-feature-ink: #453021;
  --id-art: url("/assets/catalog/tango-board.svg"); --id-art-pose: rotate(8deg);
  --id-texture: radial-gradient(circle at 86% 25%,#f4ba6030,transparent 42%); --id-shadow: 0 5px 0 var(--id-line);
}

/* Route map */
:root:is([data-game="zip"], [data-social-game="zip"]) {
  --id-name: "Route map"; --id-accent-light: #185658; --id-accent-dark: #91dcce;
  --id-day: #edf6f2; --id-night: #142c2c; --id-radius: 10px; --id-control: 8px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(110deg,#143e40,#236b67); --id-feature-ink: #e8fff7;
  --id-art: url("/assets/catalog/zip-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: repeating-linear-gradient(0deg,transparent 0 31px,#ffffff0b 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,#ffffff0b 31px 32px); --id-shadow: 3px 3px 0 var(--id-line);
}

/* Patchwork studio */
:root:is([data-game="patches"], [data-social-game="patches"]) {
  --id-name: "Patchwork studio"; --id-accent-light: #b34b36; --id-accent-dark: #ffb4a0;
  --id-day: #fbefe6; --id-night: #302021; --id-radius: 18px 4px 18px 4px; --id-control: 9px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(105deg,#a44336 0 65%,#d58261 65% 81%,#e6b56c 81%); --id-feature-ink: #fff9ed;
  --id-art: url("/assets/catalog/patches-board.svg"); --id-art-pose: rotate(-4deg);
  --id-texture: repeating-linear-gradient(90deg,transparent 0 19px,#bd705113 19px 20px); --id-shadow: 0 4px 0 var(--id-line);
}

/* Number notebook */
:root:is([data-game="mini-sudoku"], [data-social-game="mini-sudoku"]) {
  --id-name: "Number notebook"; --id-accent-light: #426044; --id-accent-dark: #bbd3a6;
  --id-day: #f4f3e8; --id-night: #202b24; --id-radius: 5px; --id-control: 5px;
  --id-display: Georgia,"Times New Roman",serif; --id-feature: linear-gradient(115deg,#e9ead6,#cad8bd); --id-feature-ink: #263f2e;
  --id-art: url("/assets/catalog/mini-sudoku-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: repeating-linear-gradient(0deg,transparent 0 27px,#627c5517 27px 28px); --id-shadow: 2px 3px 0 var(--id-line);
}

/* Light atelier */
:root:is([data-game="akari"], [data-social-game="akari"]) {
  --id-name: "Light atelier"; --id-accent-light: #91631b; --id-accent-dark: #f3ce87;
  --id-day: #fbf6e9; --id-night: #232522; --id-radius: 22px; --id-control: 12px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: radial-gradient(circle at 78% 45%,#eeca7370,transparent 36%),linear-gradient(115deg,#293d37,#47554a); --id-feature-ink: #fff7dc;
  --id-art: url("/assets/catalog/akari-board.svg?v=2"); --id-art-pose: rotate(0deg);
  --id-texture: radial-gradient(ellipse at 100% 0,#e8b75121,transparent 65%); --id-shadow: 0 8px 26px #9b70131a;
}

/* Field instrument */
:root:is([data-game="minesweeper"], [data-social-game="minesweeper"]) {
  --id-name: "Field instrument"; --id-accent-light: #526032; --id-accent-dark: #ccd69a;
  --id-day: #edf0e6; --id-night: #21291f; --id-radius: 6px; --id-control: 4px;
  --id-display: "SFMono-Regular",Consolas,monospace; --id-feature: linear-gradient(115deg,#293b32,#495b39); --id-feature-ink: #eef7d8;
  --id-art: url("/assets/catalog/minesweeper-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: repeating-linear-gradient(0deg,transparent 0 7px,#78915508 7px 8px); --id-shadow: 0 3px 0 var(--id-line);
}

/* Letterpress */
:root:is([data-game="wordle"], [data-social-game="wordle"]) {
  --id-name: "Letterpress"; --id-accent-light: #3d6748; --id-accent-dark: #a7d4aa;
  --id-day: #f3f2e9; --id-night: #202a22; --id-radius: 8px; --id-control: 6px;
  --id-display: Georgia,"Times New Roman",serif; --id-feature: linear-gradient(105deg,#e3e9d9,#f4edda); --id-feature-ink: #254632;
  --id-art: url("/assets/catalog/wordle-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: repeating-linear-gradient(90deg,transparent 0 49px,#5684500b 49px 50px); --id-shadow: 0 3px 0 var(--id-line);
}

/* Sunday paper */
:root:is([data-game="cryptic"], [data-social-game="cryptic"]) {
  --id-name: "Sunday paper"; --id-accent-light: #8a412e; --id-accent-dark: #efbb9e;
  --id-day: #f7f2e8; --id-night: #2b2621; --id-radius: 2px; --id-control: 3px;
  --id-display: Georgia,"Times New Roman",serif; --id-feature: linear-gradient(110deg,#f5ecd9,#e9dec7); --id-feature-ink: #3e3028;
  --id-art: url("/assets/catalog/cryptic-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: repeating-linear-gradient(0deg,transparent 0 23px,#7960440a 23px 24px); --id-shadow: 3px 3px 0 var(--id-line);
}

/* Pixel studio */
:root:is([data-game="nonogram"], [data-social-game="nonogram"]) {
  --id-name: "Pixel studio"; --id-accent-light: #365ab0; --id-accent-dark: #b3c5ff;
  --id-day: #edf1fc; --id-night: #20263c; --id-radius: 8px; --id-control: 6px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(115deg,#263f88,#627ac3); --id-feature-ink: #f4f7ff;
  --id-art: url("/assets/catalog/nonogram-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: radial-gradient(#617fca1c 1px,transparent 1px) 0 0 / 12px 12px; --id-shadow: 4px 4px 0 var(--id-line);
}

/* Sliding tile tray */
:root:is([data-game="fifteen"], [data-social-game="fifteen"]) {
  --id-name: "Sliding tile tray"; --id-accent-light: #76522e; --id-accent-dark: #e4c69a;
  --id-day: #f6efe3; --id-night: #292621; --id-radius: 15px; --id-control: 9px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(120deg,#2b4053,#52667a); --id-feature-ink: #fff2da;
  --id-art: url("/assets/catalog/fifteen-board.svg"); --id-art-pose: rotate(-5deg);
  --id-texture: repeating-linear-gradient(0deg,transparent 0 4px,#a07a4910 4px 5px); --id-shadow: 0 5px 0 var(--id-line);
}

/* Shape gallery */
:root:is([data-game="set"], [data-social-game="set"]) {
  --id-name: "Shape gallery"; --id-accent-light: #74418e; --id-accent-dark: #dfb5f0;
  --id-day: #f5f0f7; --id-night: #2d2233; --id-radius: 16px; --id-control: 9px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(110deg,#eadef4,#f4e4df); --id-feature-ink: #51286b;
  --id-art: url("/assets/catalog/set-board.svg"); --id-art-pose: rotate(7deg);
  --id-texture: radial-gradient(ellipse at 0 0,#be75c310,transparent 65%); --id-shadow: 0 5px 18px #54236310;
}

/* Sea of ideas */
:root:is([data-game="krillion"], [data-social-game="krillion"]) {
  --id-name: "Sea of ideas"; --id-accent-light: #176e75; --id-accent-dark: #95dfe3;
  --id-day: #eaf7f4; --id-night: #182c30; --id-radius: 28px 28px 8px 28px; --id-control: 18px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: radial-gradient(ellipse at 85% 100%,#66b8b6 0 29%,transparent 29.3%),linear-gradient(115deg,#174e5b,#257d89); --id-feature-ink: #ecfffa;
  --id-art: url("/assets/catalog/krillion-board.svg"); --id-art-pose: rotate(7deg);
  --id-texture: radial-gradient(ellipse at 90% 10%,#4bbfca18,transparent 65%); --id-shadow: 0 5px 0 var(--id-line);
}

/* Speed lab */
:root:is([data-game="mental-math"], [data-social-game="mental-math"]) {
  --id-name: "Speed lab"; --id-accent-light: #335cb5; --id-accent-dark: #b3caff;
  --id-day: #edf2fc; --id-night: #1c2940; --id-radius: 10px; --id-control: 8px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(115deg,#1b3164,#385dc1); --id-feature-ink: #f0f5ff;
  --id-art: url("/assets/catalog/mental-math-board.svg"); --id-art-pose: rotate(-5deg);
  --id-texture: repeating-linear-gradient(90deg,transparent 0 31px,#4e78cf0d 31px 32px); --id-shadow: 0 4px 0 var(--id-line);
}
:root:is([data-game="reaction"], [data-social-game="reaction"]) {
  --id-name: "Reflex studio"; --id-accent-light: #087b70; --id-accent-dark: #78dfcb;
  --id-day: #eaf6f1; --id-night: #122f29; --id-radius: 10px; --id-control: 8px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(115deg,#103e35,#267d6b); --id-feature-ink: #f0fff8;
  --id-art: url("/assets/catalog/reaction-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: repeating-linear-gradient(90deg,transparent 0 31px,#239c7a0d 31px 32px); --id-shadow: 0 4px 0 var(--id-line);
}

/* Green room */
:root:is([data-game="poker"], [data-social-game="poker"]) {
  --id-name: "Green room"; --id-accent-light: #24604c; --id-accent-dark: #a8d6bd;
  --id-day: #edf2e9; --id-night: #182c24; --id-radius: 20px; --id-control: 10px;
  --id-display: Georgia,"Times New Roman",serif; --id-feature: radial-gradient(ellipse at 65% 20%,#35735a,#153e30); --id-feature-ink: #fff2d3;
  --id-art: url("/assets/catalog/poker-board.svg"); --id-art-pose: rotate(-9deg);
  --id-texture: repeating-linear-gradient(0deg,transparent 0 3px,#bca66b0b 3px 4px); --id-shadow: 0 4px 0 var(--id-line);
}

/* Jade pavilion */
:root:is([data-game="mahjong"], [data-social-game="mahjong"]) {
  --id-name: "Jade pavilion"; --id-accent-light: #287067; --id-accent-dark: #a2d9ce;
  --id-day: #eaf3ea; --id-night: #18302d; --id-radius: 12px; --id-control: 8px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: linear-gradient(115deg,#144741,#36766a); --id-feature-ink: #f5f2d5;
  --id-art: url("/assets/catalog/mahjong-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: repeating-linear-gradient(90deg,transparent 0 5px,#5183770a 5px 6px); --id-shadow: 0 5px 0 var(--id-line);
}

/* Copper deck */
:root:is([data-game="durak"], [data-social-game="durak"]) {
  --id-name: "Copper deck"; --id-accent-light: #8d3d32; --id-accent-dark: #efb8a1;
  --id-day: #f8eee5; --id-night: #31201d; --id-radius: 14px; --id-control: 8px;
  --id-display: Georgia,"Times New Roman",serif; --id-feature: linear-gradient(120deg,#512522,#974f38); --id-feature-ink: #fff0d3;
  --id-art: url("/assets/catalog/durak-board.svg?v=2"); --id-art-pose: rotate(-12deg);
  --id-texture: repeating-linear-gradient(45deg,transparent 0 9px,#a3695210 9px 10px); --id-shadow: 0 4px 0 var(--id-line);
}

/* Dream gallery */
:root:is([data-game="dixit"], [data-social-game="dixit"]) {
  --id-name: "Dream gallery"; --id-accent-light: #745285; --id-accent-dark: #dcbbef;
  --id-day: #f7eff8; --id-night: #2b2036; --id-radius: 32px 32px 12px 12px; --id-control: 18px;
  --id-display: Georgia,"Times New Roman",serif; --id-feature: radial-gradient(ellipse at 90% 0,#b58fa8,transparent 55%),linear-gradient(115deg,#443459,#725983); --id-feature-ink: #fff1dc;
  --id-art: url("/assets/dixit/dream-12.webp"); --id-art-pose: rotate(6deg);
  --id-texture: radial-gradient(ellipse at 0 0,#be92d422,transparent 60%); --id-shadow: 0 8px 30px #8255a018;
}

/* Island atlas */
:root:is([data-game="catan"], [data-social-game="catan"]) {
  --id-name: "Island atlas"; --id-accent-light: #9a5027; --id-accent-dark: #edc29e;
  --id-day: #f7efde; --id-night: #30251c; --id-radius: 12px; --id-control: 7px;
  --id-display: Georgia,"Times New Roman",serif; --id-feature: linear-gradient(110deg,#744127,#ac743c); --id-feature-ink: #fff4d7;
  --id-art: url("/assets/catalog/catan-board.svg?v=2"); --id-art-pose: rotate(-5deg);
  --id-texture: repeating-linear-gradient(30deg,transparent 0 39px,#ad844e0c 39px 40px); --id-shadow: 0 4px 0 var(--id-line);
}

/* Case files */
:root:is([data-game="codenames"], [data-social-game="codenames"]) {
  --id-name: "Case files"; --id-accent-light: #2a5878; --id-accent-dark: #aed0eb;
  --id-day: #eff2f0; --id-night: #1e2a33; --id-radius: 4px; --id-control: 4px;
  --id-display: "SFMono-Regular",Consolas,monospace; --id-feature: linear-gradient(110deg,#243f55 0 70%,#934337 70%); --id-feature-ink: #f3f0df;
  --id-art: url("/assets/catalog/codenames-board.svg"); --id-art-pose: rotate(-3deg);
  --id-texture: repeating-linear-gradient(0deg,transparent 0 29px,#486a8110 29px 30px); --id-shadow: 2px 3px 0 var(--id-line);
}

/* Court theatre */
:root:is([data-game="coup"], [data-social-game="coup"]) {
  --id-name: "Court theatre"; --id-accent-light: #79445f; --id-accent-dark: #e3b7cf;
  --id-day: #f6eef0; --id-night: #30202c; --id-radius: 18px 18px 4px 4px; --id-control: 7px;
  --id-display: Georgia,"Times New Roman",serif; --id-feature: linear-gradient(115deg,#402539,#785069); --id-feature-ink: #fff0cd;
  --id-art: url("/assets/catalog/coup-board.svg?v=2"); --id-art-pose: rotate(-7deg);
  --id-texture: repeating-linear-gradient(90deg,transparent 0 12px,#ac7d8b0a 12px 13px); --id-shadow: 0 5px 0 var(--id-line);
}

/* Tuning room */
:root:is([data-game="wavelength"], [data-social-game="wavelength"]) {
  --id-name: "Tuning room"; --id-accent-light: #a34932; --id-accent-dark: #f5bbaa;
  --id-day: #fcf0e1; --id-night: #302722; --id-radius: 30px; --id-control: 22px;
  --id-display: "Outfit",Arial,sans-serif; --id-feature: radial-gradient(circle at 85% 125%,#edb052 0 36%,#c66a44 36.3% 41%,#416d70 41.3% 46%,transparent 46.3%),#f5dec0; --id-feature-ink: #4b332d;
  --id-art: url("/assets/catalog/wavelength-board.svg"); --id-art-pose: rotate(0deg);
  --id-texture: repeating-linear-gradient(0deg,transparent 0 4px,#be98750b 4px 5px); --id-shadow: 0 5px 0 var(--id-line);
}

/* One semantic mapping for both app shells. Separate design tokens avoid
 * coupling menu materials to a game's semantic board/player colors. */
:root:is([data-game], [data-social-game]),
:root:is([data-game], [data-social-game]) body {
  --id-bg: var(--id-day); --id-surface: color-mix(in srgb, var(--id-day), white 76%);
  --id-soft: color-mix(in srgb, var(--id-accent-light) 9%, var(--id-day));
  --id-ink: color-mix(in srgb, var(--id-night), black 15%);
  --id-muted: color-mix(in srgb, var(--id-night) 74%, var(--id-day));
  --id-line: color-mix(in srgb, var(--id-accent-light) 24%, var(--id-day));
  --id-accent: var(--id-accent-light); --id-on-accent: #fff;
  --ui-bg: var(--id-bg); --ui-surface: var(--id-surface); --ui-soft: var(--id-soft);
  --ui-ink: var(--id-ink); --ui-muted: var(--id-muted); --ui-line: var(--id-line);
  --ui-accent: var(--id-accent); --ui-on-accent: var(--id-on-accent);
  --ui-game-light: var(--id-accent-light); --ui-game-dark: var(--id-accent-dark);
  --ui-display-font: var(--id-display);
  --playroom-bg: var(--id-bg); --playroom-surface: var(--id-surface); --playroom-soft: var(--id-soft);
  --playroom-ink: var(--id-ink); --playroom-muted: var(--id-muted); --playroom-line: var(--id-line);
  --pr-bg: var(--id-bg); --pr-surface: var(--id-surface); --pr-soft: var(--id-soft);
  --pr-ink: var(--id-ink); --pr-muted: var(--id-muted); --pr-line: var(--id-line);
  --pr-accent: var(--id-accent); --pr-on-accent: var(--id-on-accent); --pr-shadow: var(--id-shadow);
  --game-scene-tint: 3%; --game-pattern-opacity: .045;
}
:root[data-theme="dark"]:is([data-game], [data-social-game]),
:root[data-theme="dark"]:is([data-game], [data-social-game]) body {
  --id-bg: color-mix(in srgb, var(--id-night), black 28%);
  --id-surface: var(--id-night);
  --id-soft: color-mix(in srgb, var(--id-accent-dark) 10%, var(--id-night));
  --id-ink: color-mix(in srgb, var(--id-day), white 30%);
  --id-muted: color-mix(in srgb, var(--id-day) 76%, var(--id-night));
  --id-line: color-mix(in srgb, var(--id-accent-dark) 25%, var(--id-night));
  --id-accent: var(--id-accent-dark); --id-on-accent: var(--id-night);
  --game-pattern-opacity: .055;
}
:root:is([data-game], [data-social-game]) body { font-family: "Manrope",Arial,sans-serif; }
:root:is([data-game], [data-social-game]) body :is(.page-heading h1,.panel-title,.table-feature h1,.table-result h2,.g-title,.l-num) {
  font-family: var(--id-display); letter-spacing: -.035em;
}
:root body[data-game] :is(#view-practice,#view-random,#view-play,#view-duel,#view-rush,#view-daily,#view-stats) :is(.day-card:not(.any-day),.random-panel,.duel-panel,.rush-panel,.stats-card),
:root[data-social-game] body :is(.table-directory,.table-lobby,.table-result,.math-practice-setup) .panel {
  border-radius: var(--id-radius); box-shadow: var(--id-shadow);
  background-image: var(--id-texture);
}
:root body[data-game] :is(#view-practice,#view-random,#view-play,#view-duel,#view-rush,#view-daily,#view-stats) :is(.btn,.btn-outline),
:root[data-social-game] body :is(.table-directory,.table-lobby,.table-result,.math-practice-setup) :is(.button,input,select),
:root body[data-game] #view-game :is(.pill-btn,.start-btn) { border-radius: var(--id-control); }

/* A proper illustrated introduction, using the same artwork as the catalog.
 * Artwork is decorative and in a reserved column: no text overlap or layout
 * changes when an image finishes loading. */
:root body[data-game] #view-practice > .page-heading { display: flex; flex-wrap: wrap; gap: 18px; }
:root body[data-game] #view-practice .practice-intro {
  flex: 1 0 100%; width: 100%; display: grid; grid-template-columns: minmax(0,1fr) 230px;
  position: relative; isolation: isolate; overflow: hidden; align-items: center; gap: 24px;
  padding: 28px 34px; border-radius: var(--id-radius); border: 1px solid var(--id-line);
  background: var(--id-feature); color: var(--id-feature-ink); min-height: 226px;
  box-shadow: var(--id-shadow);
}
.practice-intro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--id-feature-ink); opacity: .08;
  mask: var(--game-motif) center / 220px 185px repeat;
  -webkit-mask: var(--game-motif) center / 220px 185px repeat;
}
:root body[data-game] #view-practice .practice-intro :is(h1,.page-eyebrow,.sub) { color: inherit; }
:root body[data-game] #view-practice .practice-intro h1 { font-family: var(--id-display); font-size: clamp(34px,4vw,50px); margin: 8px 0; }
:root body[data-game] #view-practice .practice-intro .sub { max-width: 48ch; margin-top: 12px; }
.game-identity-art {
  width: 210px; aspect-ratio: 1.25; justify-self: center; pointer-events: none;
  background: var(--id-art) center / contain no-repeat; transform: var(--id-art-pose);
  filter: drop-shadow(0 8px 8px #10182030);
}
:root body[data-game] #view-practice .practice-nav { flex: 1 1 500px; width: auto; }
:root body[data-game] #view-practice .practice-nav-action {
  border: 1px solid var(--id-line); border-radius: var(--id-control);
  background: var(--id-surface); box-shadow: 0 2px 0 var(--id-line);
}
:root body[data-game] #view-practice .heading-badge { margin: 0; }
:root body[data-game] #view-random .random-panel-head {
  background: var(--id-feature); color: var(--id-feature-ink); border-bottom: 1px solid var(--id-line); border-radius: var(--id-radius);
}
:root body[data-game] #view-random .random-visual {
  background: var(--id-art) center / contain no-repeat; width: min(100%,160px); height: 140px;
  border: 0; box-shadow: none; transform: var(--id-art-pose); border-radius: 0;
}
:root body[data-game] #view-random .random-visual > * { visibility: hidden; }
:root body[data-game] #view-random .random-panel-head :is(h2,.random-section-label) { color: inherit; }
/* Play stays calm: materials surround the board; region and clue colors are
 * never recolored. Shadows consume no viewport or pointer-input space. */
:root body[data-game] #view-game .g-header { border-bottom-color: var(--id-line); }
:root body[data-game] #view-game .g-timer { font-variant-numeric: tabular-nums; }
:root body[data-game] #view-game .board-holder { box-shadow: 0 0 0 4px var(--id-soft), 0 10px 28px #10182012; }
/* Launch panels own a paired foreground/background palette. Do not mix the
 * page's day/night text tokens with their always-dark game-hero surfaces. */

/* Table games reuse the room components, with their own feature composition,
 * panel materials and result framing. No gameplay geometry changes here. */
:root[data-social-game] body .table-feature {
  background: var(--id-feature); color: var(--id-feature-ink);
  border-color: var(--id-line); border-radius: var(--id-radius); box-shadow: var(--id-shadow);
}
:root[data-social-game] body .table-feature::after { display: none; }
:root[data-social-game] body .table-feature::before { background: var(--id-feature-ink); opacity: .085; }
:root[data-social-game] body .table-feature :is(.table-feature-label,.table-feature-description) { color: inherit; }
:root[data-social-game] body .table-feature-actions .button {
  color: inherit; border-color: currentColor; background: transparent; border-radius: var(--id-control);
}
:root[data-social-game] body .table-game-art img { transform: var(--id-art-pose); border-radius: var(--id-control); }
:root[data-social-game] body :is(.table-result,.join-card) { border-radius: var(--id-radius); }
:root[data-social-game] body .table-result { background: var(--id-texture),var(--id-surface); box-shadow: var(--id-shadow); }
:root[data-social-game] body .table-seating { background: var(--id-texture),var(--id-surface); }
:root[data-social-game] body .table-lobby .invite-code { border-radius: var(--id-control); }

/* Hand-finished details: each motif follows the game's pieces and premise. */
:root[data-game="queens"] body #view-practice .practice-intro { border-radius: 24px 24px 6px 24px; }
:root[data-game="queens"] body #view-practice .practice-nav-icon { border-radius: 7px 7px 2px 7px; }
:root[data-game="tango"] body #view-practice .game-identity-art { border-radius: 50%; background-color: #fff8d985; box-shadow: 0 0 0 12px #fff7d02b; }
:root[data-game="zip"] body :is(.random-panel,.day-card) { border-top: 3px solid var(--id-accent); }
:root[data-game="patches"] body :is(.random-panel,.day-card) { outline: 1px dashed var(--id-line); outline-offset: -7px; }
:root[data-game="mini-sudoku"] body :is(.section-heading,.random-panel-head) { border-bottom: 3px double var(--id-line); }
:root[data-game="akari"] body #view-game .board-holder { box-shadow: 0 0 0 5px var(--id-soft), 0 0 45px #e4bd502b; }
:root[data-game="akari"] body #view-game .board-holder:has(> #board[data-akari-tall]) { box-shadow: none; }
:root[data-game="minesweeper"] body :is(.g-timer,.g-diff,.random-section-label) { font-family: var(--ui-mono-font); letter-spacing: .035em; }
:root[data-game="wordle"] body #view-practice .practice-intro { border-top: 5px solid #5c805b; }
:root[data-game="cryptic"] body :is(.cryptic-practice-heading,.cryptic-section-heading) { border-block: 3px double var(--id-line); padding-block: 16px; }
:root[data-game="cryptic"] body :is(.cryptic-card h2,.cryptic-active-clue) { font-family: Georgia,serif; }
:root[data-game="nonogram"] body #view-practice .game-identity-art { filter: drop-shadow(5px 5px 0 #10182038); }
:root[data-game="fifteen"] body #view-game .g-subhead { border-bottom: 3px double var(--id-line); }
:root[data-game="set"] body #view-practice .practice-intro { border-top: 4px solid #ae5f9f; border-bottom: 4px solid #72a895; }
:root[data-game="krillion"] body #view-game .launch { border-radius: 24px 24px 8px 24px; }
:root[data-social-game="mental-math"] body :is(.math-question,.math-countdown,.math-timer) { font-family: var(--ui-mono-font); }
:root[data-social-game="mental-math"] body .math-practice-setup .panel { border-top: 4px solid var(--id-accent); }
:root[data-social-game="poker"] body .table-feature { outline: 1px solid #d0b57380; outline-offset: -8px; }
:root[data-social-game="poker"] body .table-result { border-top-color: #bd9855; }
:root[data-social-game="mahjong"] body .table-lobby .lobby-seat { border-radius: 8px; box-shadow: 0 4px 0 var(--id-line); }
:root[data-social-game="durak"] body .table-feature { outline: 1px dashed #f4caa36b; outline-offset: -9px; }
:root[data-social-game="dixit"] body .table-game-art--feature { border: 6px solid #edce9999; border-radius: 50% 50% 10px 10px; background: #edce99; overflow: hidden; }
:root[data-social-game="dixit"] body .table-game-art--feature img { transform: none; border-radius: 50% 50% 4px 4px; }
:root[data-social-game="catan"] body .table-feature { border-bottom: 5px solid #cba366; }
:root[data-social-game="codenames"] body .table-lobby .invite-code { border: 1px dashed var(--id-accent); }
:root[data-social-game="codenames"] body :is(.directory-heading,.table-panel-heading) { border-bottom: 1px solid var(--id-line); padding-bottom: 14px; }
:root[data-social-game="coup"] body .table-feature { border-block: 3px double #c7a270; }
:root[data-social-game="wavelength"] body .table-feature { border: 1px solid #c5a17d; box-shadow: 0 6px 0 color-mix(in srgb,#a37851 40%,var(--id-line)); }
:root[data-social-game="wavelength"] body .wavelength-stage { background: var(--id-texture),var(--id-surface); border: 2px solid var(--id-line); border-radius: 28px; }

@media (max-width: 680px) {
  :root body[data-game] #view-random .random-visual { width: 80px; height: 74px; }
  :root body[data-game] #view-practice .practice-intro { grid-template-columns: minmax(0,1fr) 96px; gap: 12px; padding: 22px 20px; min-height: 174px; }
  :root body[data-game] #view-practice .practice-intro h1 { font-size: 32px; }
  :root body[data-game] #view-practice .practice-intro .sub { font-size: 12px; line-height: 1.5; }
  .game-identity-art { width: 94px; }
  :root body[data-game] #view-practice > .page-heading { gap: 14px; }
  :root body[data-game] #view-practice .practice-nav { flex-basis: 100%; }
}
@media (max-width: 360px) {
  :root body[data-game] #view-practice .practice-intro { grid-template-columns: minmax(0,1fr) 68px; padding: 18px 16px; }
  .game-identity-art { width: 66px; }
}
@media (forced-colors: active) {
  :root:is([data-game], [data-social-game]) body { --id-shadow: none; --id-texture: none; --id-feature: Canvas; --id-feature-ink: CanvasText; }
  .practice-intro::before { display: none; }
  :root body[data-game] #view-game .board-holder { box-shadow: none; }
}

/* Newspaper folios and file tabs use crisp edges; dream cards stay soft. */
:root body[data-game="cryptic"] #view-practice :is(.cryptic-card,.cryptic-grid-card) { border-radius: 3px; box-shadow: 2px 3px 0 var(--id-line); background: var(--id-texture),var(--id-surface); }
:root body[data-game="cryptic"] #view-practice .cryptic-practice-heading { padding-block: 20px; border-top: 4px double var(--id-line); border-bottom: 1px solid var(--id-line); }
:root[data-social-game="codenames"] body .table-lobby .lobby-seat { border-radius: 3px; border-top: 3px solid var(--seat-color,var(--id-line)); }
:root[data-social-game="mental-math"] body .game-page .math-practice-setup .panel { border-radius: var(--id-radius); }