/* Généré par tools/salon_css.py, ne pas modifier : relancer le script. Les règles des feuilles des jeux qui
   servent aussi au salon, à l'accueil ou à la page Règles (dessins des cartes du salon, couleurs), recopiées
   à l'identique mais limitées aux écrans hors jeu (SCOPE). Les originaux restent dans la feuille de chaque jeu. */

/* ---------------------------------------------------------------- table.css */
:where(body > :not(.screen.play):not(#tb-sheet)) [data-game] { --felt-hi: color-mix(in oklab, var(--bg), white 22%); --felt-mid: color-mix(in oklab, var(--bg), white 9%); --felt-lo: color-mix(in oklab, var(--bg), black 22%); }

/* ---------------------------------------------------------------- jeux/kems.css */
:where(body > :not(.screen.play):not(#tb-sheet)) [data-game="kems"], :where(body > :not(.screen.play):not(#tb-sheet)) [data-theme="light"][data-game="kems"] {
  --bg: oklch(0.2 0.06 18); --surface: oklch(0.26 0.065 18); --surface-2: oklch(0.31 0.068 18); --line: oklch(0.43 0.07 20 / .6);
  --ink: oklch(0.97 0.012 80); --ink-2: oklch(0.87 0.03 60); --mute: oklch(0.78 0.04 45);
  --acc: oklch(0.86 0.15 85); --acc-soft: oklch(0.91 0.1 88); --on-acc: oklch(0.25 0.06 60);
  --neg: oklch(0.56 0.21 27); --pos: oklch(0.83 0.14 150); --gold: oklch(0.86 0.15 85); --glow: .14;
  --t0: oklch(0.78 0.15 18); --t1: oklch(0.84 0.075 240);                         
  --glass-tint: oklch(0.24 0.06 18 / .5); --glass-tint-thick: oklch(0.2 0.06 18 / .78);
  --glass-hi: rgba(255, 255, 255, .3); --glass-rim: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .35);
  --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-field: rgba(255, 255, 255, .1);
  --felt-hi: oklch(0.47 0.15 20); --felt-mid: oklch(0.33 0.11 19); --felt-lo: oklch(0.15 0.045 18);
  --tb-back: oklch(0.42 0.14 20);
}

/* ---------------------------------------------------------------- jeux/bataille.css */
:where(body > :not(.screen.play):not(#tb-sheet)) [data-game="bataille"], :where(body > :not(.screen.play):not(#tb-sheet)) [data-theme="light"][data-game="bataille"] {
  --bg: oklch(0.2 0.045 22); --surface: oklch(0.27 0.05 22); --surface-2: oklch(0.31 0.055 22); --line: oklch(0.45 0.05 22 / .6);
  --ink: oklch(0.97 0.012 70); --ink-2: oklch(0.87 0.03 50); --mute: oklch(0.79 0.035 40);
  --acc: oklch(0.86 0.15 88); --acc-soft: oklch(0.92 0.09 92); --on-acc: oklch(0.25 0.06 75); --neg: oklch(0.7 0.19 38); --pos: oklch(0.83 0.14 150);
  --gold: oklch(0.86 0.15 88); --glow: 0.1;
  --glass-tint: oklch(0.24 0.045 22 / .5); --glass-tint-thick: oklch(0.2 0.045 22 / .76);
  --glass-hi: rgba(255, 255, 255, .3); --glass-rim: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .35);
  --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-field: rgba(255, 255, 255, .1);
  --felt-hi: oklch(0.46 0.13 26); --felt-mid: oklch(0.33 0.1 24); --felt-lo: oklch(0.16 0.045 22);
  --tb-back: oklch(0.42 0.12 258);   
}

/* ---------------------------------------------------------------- jeux/douze.css */
:where(body > :not(.screen.play):not(#tb-sheet)) [data-game="douze"], :where(body > :not(.screen.play):not(#tb-sheet)) [data-theme="light"][data-game="douze"] {
  --bg: oklch(0.2 0.035 256); --surface: oklch(0.26 0.04 256); --surface-2: oklch(0.31 0.045 256); --line: oklch(0.44 0.04 256 / .6);
  --ink: oklch(0.97 0.01 250); --ink-2: oklch(0.87 0.025 250); --mute: oklch(0.78 0.03 250);
  --acc: oklch(0.86 0.17 92); --acc-soft: oklch(0.92 0.1 95); --on-acc: oklch(0.25 0.06 75); --neg: oklch(0.68 0.19 27); --pos: oklch(0.83 0.14 150);
  --gold: oklch(0.86 0.17 92);
  --glass-tint: oklch(0.24 0.04 256 / .5); --glass-tint-thick: oklch(0.2 0.035 256 / .78);
  --glass-hi: rgba(255, 255, 255, .3); --glass-rim: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .35);
  --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-field: rgba(255, 255, 255, .1);
  --felt-hi: oklch(0.46 0.085 238); --felt-mid: oklch(0.3 0.06 250); --felt-lo: oklch(0.15 0.03 260);
  
  --dzx-n: oklch(0.43 0.17 268); --dzx-z: oklch(0.77 0.11 222); --dzx-g: oklch(0.66 0.17 150); --dzx-y: oklch(0.86 0.16 90); --dzx-r: oklch(0.6 0.21 27);
  --dzx-back: oklch(0.34 0.1 258); --dzx-cyan: oklch(0.86 0.12 210); --dzx-dark: oklch(0.25 0.06 258);
}

/* ---------------------------------------------------------------- jeux/solitaire.css */
:where(body > :not(.screen.play):not(#tb-sheet)) [data-game="solitaire"], :where(body > :not(.screen.play):not(#tb-sheet)) [data-theme="light"][data-game="solitaire"] {
  --bg: oklch(0.215 0.042 212); --surface: oklch(0.27 0.048 210); --surface-2: oklch(0.31 0.052 210); --line: oklch(0.44 0.05 208 / .6);
  --ink: oklch(0.975 0.01 200); --ink-2: oklch(0.87 0.028 205); --mute: oklch(0.79 0.035 205);
  --acc: oklch(0.87 0.13 86); --acc-soft: oklch(0.93 0.08 90); --on-acc: oklch(0.26 0.05 70); --neg: oklch(0.66 0.2 27); --pos: oklch(0.84 0.13 160);
  --glass-tint: oklch(0.24 0.042 212 / .5); --glass-tint-thick: oklch(0.2 0.042 214 / .78);
  --glass-hi: rgba(255, 255, 255, .3); --glass-rim: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .35);
  --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-field: rgba(255, 255, 255, .1);
  --felt-hi: oklch(0.53 0.085 198); --felt-mid: oklch(0.375 0.072 204); --felt-lo: oklch(0.175 0.04 214);
  --tb-back: oklch(0.43 0.15 22);
  --font-d: var(--font);
}

/* ---------------------------------------------------------------- jeux/naufrages.css */
:where(body > :not(.screen.play):not(#tb-sheet)) [data-game="naufrages"], :where(body > :not(.screen.play):not(#tb-sheet)) [data-theme="light"][data-game="naufrages"] {
  --bg: oklch(0.24 0.05 215); --surface: oklch(0.29 0.055 212); --surface-2: oklch(0.33 0.055 210); --line: oklch(0.45 0.05 205 / .6);
  --ink: oklch(0.97 0.015 95); --ink-2: oklch(0.86 0.03 150); --mute: oklch(0.78 0.035 180);
  --acc: oklch(0.85 0.15 80); --acc-soft: oklch(0.9 0.09 80); --on-acc: oklch(0.25 0.06 60); --neg: oklch(0.68 0.19 30); --pos: oklch(0.82 0.14 150);
  --felt-hi: oklch(0.62 0.11 205); --felt-mid: oklch(0.42 0.09 210); --felt-lo: oklch(0.2 0.05 220);
  --glass-tint: oklch(0.24 0.05 215 / .5); --glass-tint-thick: oklch(0.2 0.05 218 / .78); --glass-ink: var(--ink); --glass-ink-2: var(--ink-2);
  --glass-hi: rgba(255, 255, 255, .3); --glass-rim: rgba(255, 255, 255, .14); --glass-edge: rgba(0, 0, 0, .3); --glass-field: rgba(255, 255, 255, .1);
}

/* ---------------------------------------------------------------- unseulindice.css */
:where(body > :not(.screen.play):not(#tb-sheet)) .usi-art { position: relative; width: 54px; height: 54px; display: block; }
:where(body > :not(.screen.play):not(#tb-sheet)) .usi-art i { position: absolute; left: 13px; top: 2px; width: 28px; height: 34px; border-radius: 6px; display: grid; place-items: center; font: 800 20px/1 var(--font); font-style: normal;
  background: oklch(0.85 0.15 78); color: oklch(0.28 0.07 60); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); transform: rotate(-6deg); }
:where(body > :not(.screen.play):not(#tb-sheet)) .usi-art b { position: absolute; bottom: 3px; width: 15px; height: 11px; border-radius: 3px; background: oklch(0.97 0.018 90); box-shadow: inset 0 0 0 1.5px oklch(0.75 0.05 320), 0 2px 3px rgba(0, 0, 0, .25); }
:where(body > :not(.screen.play):not(#tb-sheet)) .usi-art b:nth-of-type(1) { left: 2px; transform: rotate(-8deg); }
:where(body > :not(.screen.play):not(#tb-sheet)) .usi-art b:nth-of-type(2) { left: 20px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .usi-art b:nth-of-type(3) { left: 38px; transform: rotate(8deg); }

/* ---------------------------------------------------------------- jeux/menteur.css */
:root {
  --mtx-ivory: oklch(0.97 0.015 85); --mtx-ivory-2: oklch(0.88 0.03 80); --mtx-pip: oklch(0.22 0.02 40);
  --mtx-gold: oklch(0.84 0.14 84); --mtx-gold-2: oklch(0.68 0.13 70); --mtx-paco: oklch(0.42 0.16 28);
  --mtx-cup: oklch(0.42 0.09 45); --mtx-cup-2: oklch(0.27 0.06 40); --mtx-stitch: oklch(0.8 0.07 75 / .75);
}
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die { --d: 30px; position: relative; width: var(--d); height: var(--d); flex: none; display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: calc(var(--d) * .13); border-radius: 22%;
  background: linear-gradient(150deg, #fff, var(--mtx-ivory) 45%, var(--mtx-ivory-2));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .14), inset 0 1px 0 #fff, 0 3px 7px rgba(0, 0, 0, .4); vertical-align: middle; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die i { width: 78%; aspect-ratio: 1; border-radius: 50%; place-self: center; background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--mtx-pip), white 25%), var(--mtx-pip)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die .p1 { grid-area: 1 / 1; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die .p3 { grid-area: 1 / 3; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die .p5 { grid-area: 2 / 2; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die .p7 { grid-area: 3 / 1; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die .p9 { grid-area: 3 / 3; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die.f1 { background: linear-gradient(150deg, oklch(0.93 0.1 90), var(--mtx-gold) 45%, var(--mtx-gold-2)); }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-die.f1 .p5 { width: 112%; background: radial-gradient(circle at 40% 35%, oklch(0.6 0.19 28), var(--mtx-paco)); }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-cup { --c: 54px; position: relative; display: inline-block; width: var(--c); height: calc(var(--c) * 1.05); flex: none; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-cup > i { position: absolute; inset: 0; clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); border-radius: 6px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, .08) 7px 8px),
    linear-gradient(180deg, transparent 0 16%, var(--mtx-stitch) 16% 18%, transparent 18% 80%, var(--mtx-stitch) 80% 82%, transparent 82%),
    linear-gradient(90deg, var(--mtx-cup-2), var(--mtx-cup) 35%, color-mix(in oklab, var(--mtx-cup), white 18%) 50%, var(--mtx-cup) 65%, var(--mtx-cup-2)); }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-cup::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -3px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(2px); z-index: -1; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-art { position: relative; display: block; width: 54px; height: 54px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-art .mtx-cup { --c: 30px; position: absolute; left: 4px; top: 6px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-art .mtx-die { --d: 18px; position: absolute; }
:where(body > :not(.screen.play):not(#tb-sheet)) .mtx-art .mtx-die:nth-of-type(2) { right: 2px; bottom: 6px; transform: rotate(-8deg); }

/* ---------------------------------------------------------------- jeux/ordre.css */
:root { --odx-card: oklch(0.97 0.018 85); --odx-card-hi: oklch(0.995 0.01 85); --odx-ink: oklch(0.27 0.03 60); --odx-good: oklch(0.78 0.16 150); --odx-bad: oklch(0.68 0.19 25); }
:where(body > :not(.screen.play):not(#tb-sheet)) .odx-art { position: relative; display: block; width: 54px; height: 54px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .odx-art i { position: absolute; left: 6px; right: 6px; height: 12px; border-radius: 4px; background: var(--odx-card); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
:where(body > :not(.screen.play):not(#tb-sheet)) .odx-art i:nth-child(1) { top: 8px; box-shadow: inset 4px 0 0 var(--odx-good), 0 2px 3px rgba(0, 0, 0, .35); }
:where(body > :not(.screen.play):not(#tb-sheet)) .odx-art i:nth-child(2) { top: 21px; left: 10px; box-shadow: inset 4px 0 0 var(--odx-good), 0 2px 3px rgba(0, 0, 0, .35); }
:where(body > :not(.screen.play):not(#tb-sheet)) .odx-art i:nth-child(3) { top: 34px; right: 10px; box-shadow: inset 4px 0 0 var(--odx-bad), 0 2px 3px rgba(0, 0, 0, .35); }

/* ---------------------------------------------------------------- jeux/drapeaux.css */
:root { --drx-pole: oklch(0.82 0.05 85); --drx-pole-2: oklch(0.55 0.05 70); --drx-good: oklch(0.72 0.16 150); --drx-bad: oklch(0.6 0.2 27); }
:where(body > :not(.screen.play):not(#tb-sheet)) .drx-art { position: relative; display: block; width: 54px; height: 54px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .drx-art::before { content: ""; position: absolute; left: 10px; top: 5px; bottom: 4px; width: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--drx-pole-2), var(--drx-pole)); }
:where(body > :not(.screen.play):not(#tb-sheet)) .drx-art i { position: absolute; left: 14px; top: 8px; width: 32px; height: 24px; border-radius: 2px 4px 4px 2px; overflow: hidden; transform: skewY(-6deg); transform-origin: 0 50%;
  background: linear-gradient(90deg, oklch(0.5 0.16 255) 0 33.3%, oklch(0.96 0.01 95) 33.3% 66.6%, oklch(0.6 0.21 27) 66.6%); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
:where(body > :not(.screen.play):not(#tb-sheet)) .drx-art i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .25) 40%, rgba(0, 0, 0, .15) 75%); }
:where(body > :not(.screen.play):not(#tb-sheet)) .drx-art b { position: absolute; left: 7px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, oklch(0.97 0.05 90), oklch(0.85 0.15 92) 50%, oklch(0.6 0.12 80)); }

/* ---------------------------------------------------------------- jeux/rail.css */
:root { --glx-paper: oklch(0.93 0.035 88); --glx-paper-2: oklch(0.88 0.045 80); --glx-paper-ink: oklch(0.3 0.045 45); --glx-paper-red: oklch(0.52 0.17 28); --glx-paper-ok: oklch(0.48 0.13 150); }
:where(body > :not(.screen.play):not(#tb-sheet)) .glx-art { position: relative; display: block; width: 46px; height: 30px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .glx-art i { position: absolute; top: 12px; width: 11px; height: 6px; border-radius: 1.5px; background: #d8423a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
:where(body > :not(.screen.play):not(#tb-sheet)) .glx-art i:nth-child(1) { left: 7px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .glx-art i:nth-child(2) { left: 18px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .glx-art i:nth-child(3) { left: 29px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .glx-art::before, :where(body > :not(.screen.play):not(#tb-sheet)) .glx-art::after { content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: #f6efdf; box-shadow: 0 0 0 2px #3a2a1c; }
:where(body > :not(.screen.play):not(#tb-sheet)) .glx-art::before { left: -3px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .glx-art::after { right: -3px; }

/* ---------------------------------------------------------------- jeux/huisclos.css */
:root { --hcx-uv: #b693ff; --hcx-paper: #efe6cf; --hcx-paper-ink: #2d2618; }
:where(body > :not(.screen.play):not(#tb-sheet)) .hcx-art-card { position: relative; display: block; width: 54px; height: 54px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .hcx-art-card i { position: absolute; left: 12px; right: 12px; top: 24px; bottom: 8px; border-radius: 7px; background: linear-gradient(180deg, #ffcf86, #d98a1e); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
:where(body > :not(.screen.play):not(#tb-sheet)) .hcx-art-card b { position: absolute; left: 18px; right: 18px; top: 9px; height: 22px; border: 4px solid #c9d2d6; border-bottom: 0; border-radius: 12px 12px 0 0; }
:where(body > :not(.screen.play):not(#tb-sheet)) .hcx-art-card em { position: absolute; left: 25px; top: 33px; width: 4px; height: 9px; border-radius: 2px; background: #5a3410; }

/* ---------------------------------------------------------------- jeux/navale.css */
:root {
  --nvx-sea: oklch(0.42 0.1 235); --nvx-sea-2: oklch(0.32 0.09 240); --nvx-gridline: rgba(255, 255, 255, .13);
  --nvx-hull: oklch(0.72 0.02 240); --nvx-hull-2: oklch(0.48 0.025 245); --nvx-deck: oklch(0.6 0.02 240);
  --nvx-hit: oklch(0.63 0.22 30); --nvx-foam: oklch(0.97 0.01 220);
}
:where(body > :not(.screen.play):not(#tb-sheet)) .nvx-art { position: relative; display: block; width: 50px; height: 50px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px) 0 0 / 10px 10px, var(--nvx-sea); }
:where(body > :not(.screen.play):not(#tb-sheet)) .nvx-art i { position: absolute; left: 6px; top: 18px; width: 34px; height: 11px; border-radius: 40% 999px 999px 40%; background: linear-gradient(180deg, color-mix(in oklab, var(--nvx-hull), white 25%), var(--nvx-hull-2)); }
:where(body > :not(.screen.play):not(#tb-sheet)) .nvx-art b { position: absolute; left: 27px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--nvx-hit); box-shadow: 0 0 8px var(--nvx-hit); }

/* ---------------------------------------------------------------- jeux/coinche.css */
:where(body > :not(.screen.play):not(#tb-sheet)) .cox-art { position: relative; display: block; width: 54px; height: 54px; }
:where(body > :not(.screen.play):not(#tb-sheet)) .cox-art i { position: absolute; top: 6px; width: 28px; height: 40px; border-radius: 4px; background: oklch(0.975 0.012 90); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .3);
  font: 700 13px/1 var(--font); font-style: normal; color: oklch(0.55 0.21 25); padding: 4px; box-sizing: border-box; }
:where(body > :not(.screen.play):not(#tb-sheet)) .cox-art i:nth-child(1) { left: 6px; transform: rotate(-10deg); color: oklch(0.22 0.02 260); }
:where(body > :not(.screen.play):not(#tb-sheet)) .cox-art i:nth-child(2) { left: 20px; transform: rotate(8deg); }

/* ---------------------------------------------------------------- jeux/dames.css */
:root {
  --dmx-light: oklch(0.87 0.05 75); --dmx-dark: oklch(0.45 0.09 40); --dmx-frame: oklch(0.3 0.05 35);
  --dmx-ivory: oklch(0.95 0.02 85); --dmx-ivory-2: oklch(0.8 0.035 75); --dmx-ebony: oklch(0.3 0.025 40); --dmx-ebony-2: oklch(0.17 0.02 40);
  --dmx-crown: oklch(0.82 0.15 85); --dmx-last: oklch(0.85 0.15 100 / .4);
}
:where(body > :not(.screen.play):not(#tb-sheet)) .dmx-art { position: relative; display: block; width: 54px; height: 54px; border-radius: 10px; overflow: hidden;
  background: conic-gradient(var(--dmx-dark) 25%, var(--dmx-light) 0 50%, var(--dmx-dark) 0 75%, var(--dmx-light) 0) 0 0 / 50% 50%; box-shadow: inset 0 0 0 2px var(--dmx-frame); }
:where(body > :not(.screen.play):not(#tb-sheet)) .dmx-art i { position: absolute; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
:where(body > :not(.screen.play):not(#tb-sheet)) .dmx-art i:nth-child(1) { left: 4px; top: 4px; background: radial-gradient(circle at 35% 30%, #fff, var(--dmx-ivory) 45%, var(--dmx-ivory-2)); }
:where(body > :not(.screen.play):not(#tb-sheet)) .dmx-art i:nth-child(2) { right: 4px; top: 4px; background: radial-gradient(circle at 35% 30%, #777, var(--dmx-ebony) 45%, var(--dmx-ebony-2)); }
:where(body > :not(.screen.play):not(#tb-sheet)) .dmx-art i:nth-child(3) { right: 4px; bottom: 4px; background: radial-gradient(circle at 35% 30%, #777, var(--dmx-ebony) 45%, var(--dmx-ebony-2)); box-shadow: 0 -2px 0 -1px var(--dmx-crown), 0 2px 3px rgba(0, 0, 0, .5); }

/* ---------------------------------------------------------------- jeux/echecs.css */
:root {
  --ecx-light: oklch(0.88 0.05 80); --ecx-dark: oklch(0.6 0.075 55); --ecx-frame: oklch(0.33 0.05 45);
  --ecx-ivory: oklch(0.97 0.015 90); --ecx-ebony: oklch(0.24 0.02 50); --ecx-last: oklch(0.85 0.15 100 / .55); --ecx-check: oklch(0.62 0.23 27);
}
:where(body > :not(.screen.play):not(#tb-sheet)) .ecx-art { position: relative; display: block; width: 54px; height: 54px; border-radius: 10px; overflow: hidden;
  background: conic-gradient(var(--ecx-dark) 25%, var(--ecx-light) 0 50%, var(--ecx-dark) 0 75%, var(--ecx-light) 0) 0 0 / 50% 50%; box-shadow: inset 0 0 0 2px var(--ecx-frame); }
:where(body > :not(.screen.play):not(#tb-sheet)) .ecx-art svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); fill: var(--ecx-ivory); stroke: oklch(0.22 0.02 50); stroke-width: 3.5; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }