/* ====================================================================================================
   Boîte à jeux · couche iOS 26 / Liquid Glass (chargée après style.css)
   D'après le skill apple-design (bowen31337) : jetons, verre en couches (teinte + flou + saturation,
   reflet sur l'arête haute, liseré fin, ombre douce), ressorts pour tout ce qui se touche (ios.js).
   Chaque thème a son fond d'écran sous le verre ; chaque jeu garde sa couleur et son dessin.
   Repli opaque si « réduire la transparence », « contraste élevé » ou pas de backdrop-filter.
   ==================================================================================================== */

/* ---------------------------------------------------------------- jetons (repris du skill, accordés aux thèmes) */
:root {
  --text-large-title: 2.125rem; --text-title-1: 1.75rem; --text-title-2: 1.375rem; --text-title-3: 1.25rem;
  --text-headline: 1.0625rem; --text-body: 1.0625rem; --text-subhead: .9375rem; --text-footnote: .8125rem; --text-caption-1: .75rem;
  --tracking-tight: -.022em; --tracking-snug: -.014em; --tracking-wide: .01em;
  --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-capsule: 999px;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --duration-instant: 100ms;

  /* Ambre (sombre, par défaut) */
  --wall-base: oklch(0.17 0.02 50);
  --wall: radial-gradient(70% 42% at 12% 22%, oklch(0.62 0.17 55 / .85), transparent 70%),
          radial-gradient(55% 45% at 98% 46%, oklch(0.52 0.17 25 / .75), transparent 70%),
          radial-gradient(75% 50% at 22% 92%, oklch(0.38 0.12 330 / .9), transparent 72%),
          linear-gradient(180deg, var(--wall-base) 0, var(--wall-base) 70px, oklch(0.2 0.04 40) 40%, oklch(0.14 0.03 340));
  --glass-tint: oklch(0.2 0.025 50 / .5);
  --glass-tint-thick: oklch(0.2 0.025 50 / .72);
  --glass-hi: rgba(255, 255, 255, .34); --glass-rim: rgba(255, 255, 255, .16); --glass-edge: rgba(0, 0, 0, .35);
  --glass-shadow: 0 10px 34px rgba(10, 4, 0, .38);
  --glass-ink: oklch(0.97 0.01 80); --glass-ink-2: oklch(0.88 0.02 70);
  --glass-field: oklch(0.12 0.02 50 / .45);
  --icon-label: #fff; --icon-label-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  --scrim: rgba(10, 6, 2, .42);
}
/* Minuit */
[data-skin="nuit"]:not([data-game]) {
  --wall-base: oklch(0.16 0.04 260);
  --wall: radial-gradient(70% 42% at 14% 20%, oklch(0.62 0.12 180 / .7), transparent 70%),
          radial-gradient(55% 45% at 98% 48%, oklch(0.5 0.16 275 / .75), transparent 70%),
          radial-gradient(75% 50% at 26% 92%, oklch(0.36 0.11 250 / .9), transparent 72%),
          linear-gradient(180deg, var(--wall-base) 0, var(--wall-base) 70px, oklch(0.19 0.05 255) 40%, oklch(0.13 0.04 270));
  --glass-tint: oklch(0.2 0.04 260 / .5); --glass-tint-thick: oklch(0.2 0.04 260 / .74);
  --glass-shadow: 0 10px 34px rgba(0, 4, 20, .45);
  --glass-ink: oklch(0.97 0.01 240); --glass-ink-2: oklch(0.87 0.03 240);
  --glass-field: oklch(0.12 0.04 260 / .5);
  --scrim: rgba(2, 6, 18, .45);
}
/* Crème (clair) */
[data-theme="light"]:not([data-game]) {
  --wall-base: oklch(0.96 0.015 78);
  --wall: radial-gradient(70% 42% at 12% 22%, oklch(0.86 0.1 60 / .9), transparent 70%),
          radial-gradient(55% 45% at 98% 46%, oklch(0.84 0.09 25 / .8), transparent 70%),
          radial-gradient(75% 50% at 24% 92%, oklch(0.88 0.09 95 / .9), transparent 72%),
          linear-gradient(180deg, var(--wall-base) 0, var(--wall-base) 70px, oklch(0.94 0.03 70) 45%, oklch(0.93 0.03 40));
  --glass-tint: rgba(255, 252, 247, .56); --glass-tint-thick: rgba(255, 252, 247, .78);
  --glass-hi: rgba(255, 255, 255, .9); --glass-rim: rgba(255, 255, 255, .55); --glass-edge: rgba(70, 45, 20, .1);
  --glass-shadow: 0 10px 34px rgba(90, 60, 20, .16);
  --glass-ink: oklch(0.24 0.03 60); --glass-ink-2: oklch(0.4 0.03 60);
  --glass-field: rgba(255, 255, 255, .6);
  --icon-label: oklch(0.26 0.03 60); --icon-label-shadow: 0 1px 2px rgba(255, 255, 255, .6);
  --scrim: rgba(60, 40, 15, .22);
}
/* Lavande (clair) */
[data-theme="light"][data-skin="lavande"]:not([data-game]) {
  --wall-base: oklch(0.955 0.022 300);
  --wall: radial-gradient(70% 42% at 12% 22%, oklch(0.84 0.09 300 / .9), transparent 70%),
          radial-gradient(55% 45% at 98% 46%, oklch(0.84 0.1 350 / .8), transparent 70%),
          radial-gradient(75% 50% at 24% 92%, oklch(0.85 0.08 260 / .9), transparent 72%),
          linear-gradient(180deg, var(--wall-base) 0, var(--wall-base) 70px, oklch(0.93 0.03 300) 45%, oklch(0.92 0.035 330));
  --glass-tint: rgba(253, 250, 255, .56); --glass-tint-thick: rgba(253, 250, 255, .78);
  --glass-edge: rgba(60, 30, 90, .1); --glass-shadow: 0 10px 34px rgba(70, 40, 110, .16);
  --glass-ink: oklch(0.25 0.04 300); --glass-ink-2: oklch(0.41 0.04 300);
  --icon-label: oklch(0.27 0.04 300);
  --scrim: rgba(50, 25, 80, .22);
}

/* ---------------------------------------------------------------- le verre (recette complète du skill) */
.glass {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
          backdrop-filter: blur(22px) saturate(185%);
  box-shadow:
    inset 0 1.2px 0 var(--glass-hi),          /* la lumière qui accroche l'arête haute */
    inset 0 -1px 0 rgba(255, 255, 255, .06),  /* un peu de lumière remonte par le bas */
    inset 0 0 0 .5px var(--glass-rim),         /* liseré intérieur */
    0 0 0 .5px var(--glass-edge),              /* liseré extérieur : l'arête se lit sur tout fond */
    var(--glass-shadow);                       /* il flotte au-dessus du fond */
  color: var(--glass-ink);
}
.glass-thick { background: var(--glass-tint-thick); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-thick { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-thick { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); }
  #s-home .ih-wall { background: var(--bg); }
}
@media (prefers-contrast: more) {
  .glass, .glass-thick { background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink); color: var(--ink); }
}

/* ---------------------------------------------------------------- l'accueil, façon écran d'iPhone */
#s-home.ios-home { max-width: 520px; gap: 18px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); animation: none; }
#s-home .ih-wall { position: fixed; inset: 0; z-index: -1; background: var(--wall); background-color: var(--wall-base); }
#s-home ~ * {}
body:has(#s-home:not([hidden])) .grain { display: none; }
body:has(#s-home:not([hidden])) { background: var(--wall-base); }
body:has(#s-home:not([hidden])) .topbar { background: transparent; border-bottom-color: transparent; }
body:has(#s-home:not([hidden])) .topbar .crumb { opacity: 0; }
body:has(#s-home:not([hidden])) .topbar .ic { background: var(--glass-tint); color: var(--glass-ink); border-color: transparent;
  -webkit-backdrop-filter: blur(18px) saturate(185%); backdrop-filter: blur(18px) saturate(185%);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge); border-radius: 50%; width: 40px; height: 40px; }

.ih-head { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; color: var(--icon-label); text-shadow: var(--icon-label-shadow); }
.ih-head .ih-date { font-size: var(--text-subhead); font-weight: 600; letter-spacing: 0; opacity: .85; }
.ih-head h1 { margin: 0; font-size: var(--text-large-title) !important; line-height: 1.05; letter-spacing: var(--tracking-tight) !important; font-weight: 700; }

/* le widget du salon : prénom, créer, rejoindre */
.ih-widget { border-radius: var(--radius-2xl); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ih-widget .ih-wtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ih-widget .ih-wtop b { font-size: var(--text-headline); font-weight: 650; letter-spacing: -.01em; }
.ih-widget .ih-wtop span { font-size: var(--text-footnote); color: var(--glass-ink-2); }
.ih-widget .name-row { display: flex; gap: 8px; }
.ih-widget input, .ih-widget .emo-btn { background: var(--glass-field); border: 0; color: var(--glass-ink); box-shadow: inset 0 0 0 .5px var(--glass-rim); }
.ih-widget input { border-radius: 14px; min-height: 48px; }
.ih-widget input::placeholder { color: var(--glass-ink-2); opacity: .9; }
.ih-widget input:focus { box-shadow: inset 0 0 0 2px var(--acc); }
.ih-widget .emo-btn { border-radius: 14px; width: 52px; min-height: 48px; }
.ih-widget .btn { border-radius: var(--radius-capsule); min-height: 50px; }
.ih-widget .btn.primary { background: var(--acc); color: var(--on-acc); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px -10px color-mix(in oklab, var(--acc) 80%, black); }
.ih-widget .join-row .btn:not(.primary) { background: var(--glass-field); color: var(--glass-ink); border: 0; box-shadow: inset 0 0 0 .5px var(--glass-rim); }
.ih-widget .join-label { display: none; }
.ih-widget #in-code { font-size: 20px; letter-spacing: .3em; }
.ih-widget .err { margin: 0; }
.ih-widget .err:empty { display: none; }
.ih-resume { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--glass-field); box-shadow: inset 0 0 0 .5px var(--glass-rim); }
.ih-resume span { font-size: var(--text-subhead); }
.ih-resume b { letter-spacing: .08em; }
.ih-resume .btn { min-height: 36px; padding: 6px 14px; font-size: 14px; }
#s-home .invite-banner { background: color-mix(in oklab, var(--acc) 22%, transparent); border-color: color-mix(in oklab, var(--acc) 45%, transparent); color: var(--glass-ink); }
#s-home .invite-banner span { color: var(--glass-ink-2); }

/* l'entrée en deux temps : on ne montre que ce qui sert à l'étape en cours */
#f-home[data-step="choice"] [data-show]:not([data-show~="choice"]),
#f-home[data-step="join"] [data-show]:not([data-show~="join"]),
#f-home[data-step="create"] [data-show]:not([data-show~="create"]) { display: none !important; }
.ih-head .ih-sub { margin: 4px 0 0; font-size: var(--text-subhead); font-weight: 500; opacity: .9; }
.ih-choice { display: flex; flex-direction: column; gap: 10px; }
.ih-pick { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 14px 14px 14px 14px;
  border: 0; border-radius: 20px; background: var(--glass-field); color: var(--glass-ink); text-align: left; font: inherit; cursor: pointer;
  box-shadow: inset 0 0 0 .5px var(--glass-rim); transition: background .15s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.ih-pick:hover { background: color-mix(in oklab, var(--glass-field), var(--glass-ink) 6%); }
.ih-pick:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ih-pick-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(165deg, color-mix(in oklab, var(--c) 78%, white), var(--c) 55%, color-mix(in oklab, var(--c) 80%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 4px 10px rgba(0, 0, 0, .22); }
.ih-pick-ic svg { width: 26px; height: 26px; }
.ih-pick-t { display: flex; flex-direction: column; gap: 3px; }
.ih-pick-t b { font-size: var(--text-headline); font-weight: 650; letter-spacing: -.01em; }
.ih-pick-t span { font-size: var(--text-subhead); line-height: 1.35; color: var(--glass-ink-2); }
.ih-pick-go { font-size: 26px; line-height: 1; color: var(--glass-ink-2); padding-right: 2px; }
.ih-step { display: flex; flex-direction: column; gap: 10px; }
.ih-steptop { display: flex; align-items: center; gap: 6px; margin: -4px 0 2px -6px; }
.ih-back { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--glass-ink); font: 600 26px/1 var(--font); cursor: pointer; }
.ih-back:hover { background: var(--glass-field); }
.ih-steptitle { font-size: var(--text-title-3); font-weight: 700; letter-spacing: var(--tracking-snug); }
.ih-codebox { display: flex; flex-direction: column; gap: 6px; }
.ih-codebox > span, .ih-namel { font-size: var(--text-footnote); font-weight: 600; color: var(--glass-ink-2); padding-left: 4px; }
.ih-namel { margin-top: 4px; }
.ih-widget .ih-codebox #in-code { min-height: 64px; font-size: 30px; font-weight: 700; letter-spacing: .42em; text-align: center; padding-left: .42em; text-transform: uppercase; }
.ih-widget .ih-codebox #in-code::placeholder { letter-spacing: .42em; opacity: .4; }
.ih-hint { margin: 0; text-align: center; color: var(--glass-ink-2); font-size: var(--text-footnote); }
#f-home.invited .ih-steptop { display: none; }
#s-home #btn-own { min-height: 44px; color: var(--glass-ink-2); background: none; box-shadow: none; }
/* les trois entrées sans salon : Miroir, les règles, le mode solo */
.ih-grid.ih-more { display: flex; justify-content: center; gap: 22px; margin: 4px 0 0; }
/* PC : le titre et les trois entrées à gauche, l'entrée dans un salon à droite */
@media (min-width: 1100px) {
  #s-home.ios-home { max-width: 1000px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto auto auto; column-gap: 72px; row-gap: 26px;
    align-content: center; min-height: calc(100dvh - var(--bar-h) - 20px); padding: 24px 40px 40px; }
  #s-home .ih-head { grid-column: 1; grid-row: 1; align-self: end; }
  #s-home .ih-head h1 { font-size: 3.5rem !important; }
  #s-home .ih-head .ih-sub { font-size: var(--text-title-3); }
  #s-home .ih-more { grid-column: 1; grid-row: 2; justify-content: flex-start; align-self: start; margin: 0 0 0 -12px; }
  #s-home #f-home { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  #s-home .ih-foot { grid-column: 2; grid-row: 3; align-self: start; }
}

/* la grille d'icônes */
.ih-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 0; justify-items: center; padding: 6px 0 4px; }
.ih-app { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--icon-label); font: 500 11.5px/1.15 var(--font); text-decoration: none; -webkit-touch-callout: none; user-select: none; }
.ih-app .ih-l { width: 76px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--icon-label-shadow); letter-spacing: .005em; }
.ih-app:focus-visible { outline: none; }
.ih-app:focus-visible .ih-ic { outline: 2px solid var(--icon-label); outline-offset: 3px; }
.ih-ic { position: relative; width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; will-change: transform;
  background: linear-gradient(165deg, color-mix(in oklab, var(--c) 78%, white), var(--c) 52%, color-mix(in oklab, var(--c) 80%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 5px 14px rgba(0, 0, 0, .28); }
.ih-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 42%); }
.ih-ic img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .28)); pointer-events: none; }
.ih-ic .ih-art { background: none !important; border: 0 !important; box-shadow: none !important; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; }
.ih-ic .gart { transform: scale(.82); pointer-events: none; }
.ih-ic .ih-glyph { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.ih-ic svg { width: 30px; height: 30px; color: #fff; }

@media (max-width: 380px) {
  .ih-app, .ih-app .ih-l { width: 70px; }
  .ih-ic { width: 56px; height: 56px; border-radius: 13px; }
}

/* thèmes clairs : l'accent est foncé sous un texte blanc, pour tenir l'AA (4,5:1) */
[data-theme="light"] .ih-widget .btn.primary { background: color-mix(in oklab, var(--acc) 66%, black); }

/* ====================================================================================================
   Le fond d'écran commun (accueil, salon) : un seul élément posé par ios.js
   ==================================================================================================== */
.ios-wall { position: fixed; inset: 0; z-index: -1; background: var(--wall); background-color: var(--wall-base); display: none; pointer-events: none; }
#s-home .ih-wall { display: none; }
body:has(#s-home:not([hidden])) .ios-wall, body:has(#s-lobby:not([hidden])) .ios-wall { display: block; }
@media (prefers-reduced-transparency: reduce) { .ios-wall { background: var(--bg); } }

/* ====================================================================================================
   Le salon : la liste des jeux en verre, le code en widget, les réglages dans une carte épaisse
   ==================================================================================================== */
/* le fond d'écran est sous le corps de page : le corps devient transparent, la page prend la teinte du haut */
html:has(body :is(#s-home, #s-lobby):not([hidden])) { background: var(--wall-base); }
body:has(:is(#s-home, #s-lobby):not([hidden])) { background: transparent; }
body:has(:is(#s-home, #s-lobby):not([hidden]))::before { display: none; }
body:has(#s-lobby:not([hidden])) .grain { display: none; }
/* la barre du haut reste UNIE (iOS 26 prélève sa couleur pour la barre d'état) : la teinte du haut du fond d'écran */
body:has(#s-lobby:not([hidden])) .topbar { background: var(--wall-base); border-bottom-color: transparent; }
body:has(:is(#s-lobby, #s-home):not([hidden])) .topbar .ic { background: var(--glass-tint); color: var(--glass-ink); border-color: transparent;
  -webkit-backdrop-filter: blur(18px) saturate(185%); backdrop-filter: blur(18px) saturate(185%);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge); border-radius: 50%; width: 44px; height: 44px; }
body:has(#s-lobby:not([hidden])) .topbar .crumb { color: var(--icon-label); font-weight: 650; }

#s-lobby {
  --ink: var(--glass-ink); --ink-2: var(--glass-ink-2); --mute: var(--glass-ink-2);
  --line: color-mix(in oklab, var(--glass-ink) 13%, transparent);
  --surface: var(--glass-field); --surface-2: var(--glass-field);
  animation: none;
}
/* ce qui est posé directement sur le fond d'écran se lit comme les étiquettes de l'accueil */
#s-lobby .picker .section-title, #s-lobby .gfam, #s-lobby .gsoon, #s-lobby .players-title, #s-lobby #lobby-wait, #s-lobby .opts .fine, #s-lobby .chips legend {
  color: var(--icon-label); text-shadow: var(--icon-label-shadow); }
#s-lobby .picker .section-title { font-size: var(--text-large-title); letter-spacing: var(--tracking-tight); font-weight: 700; }
#s-lobby .gfam { font-size: var(--text-footnote); font-weight: 650; padding: 20px 6px 8px; }

/* le code du salon : un widget en verre */
#s-lobby .code-strip { border-radius: var(--radius-2xl); padding: 16px 18px; gap: 6px; }
#s-lobby .code-strip .eyebrow { color: var(--glass-ink-2); }
#s-lobby .code-strip .code { font-variant-numeric: tabular-nums; }
#s-lobby .code-strip .btn { margin-top: 6px; }
#s-lobby .btn { border-radius: var(--radius-capsule); min-height: 44px; }
#s-lobby .btn:not(.primary) { background: var(--glass-field); color: var(--glass-ink); border: 0; box-shadow: inset 0 0 0 .5px var(--glass-rim); }
#s-lobby .btn.primary { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -12px color-mix(in oklab, var(--acc) 80%, black); }
[data-theme="light"] #s-lobby .btn.primary { background: color-mix(in oklab, var(--acc) 66%, black); color: #fff; }

/* les joueurs : des pastilles de verre */
#s-lobby .chip { background: var(--glass-tint); border: 0; min-height: 44px; padding: 6px 14px 6px 10px; color: var(--glass-ink);
  -webkit-backdrop-filter: blur(18px) saturate(185%); backdrop-filter: blur(18px) saturate(185%);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge); }
#s-lobby .chip i { color: var(--glass-ink-2); }

/* les familles : un contrôle segmenté, la pastille glisse sur ressort (ios.js) */
#s-lobby .gfilters { position: relative; border-radius: var(--radius-capsule); padding: 4px; gap: 0; background: var(--glass-tint); margin: 0 0 4px;
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
  box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge), var(--glass-shadow); }
#s-lobby .gfilter { position: relative; z-index: 1; min-height: 44px; padding: 8px 15px; border-radius: var(--radius-capsule); color: var(--glass-ink); font-weight: 500;
  background: transparent !important; box-shadow: none !important; transition: color .2s var(--ease-out); }
#s-lobby .gfilter[aria-pressed="true"] { font-weight: 650; }
#s-lobby .gfilter:active { transform: none; }
.gf-pill { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); width: 60px; border-radius: var(--radius-capsule); pointer-events: none;
  background: color-mix(in oklab, var(--glass-ink) 16%, transparent); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 2px 8px rgba(0, 0, 0, .18); will-change: transform; }
[data-theme="light"] .gf-pill { background: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(60, 40, 15, .14), 0 0 0 .5px rgba(60, 40, 15, .08); }

/* la liste des jeux : une liste groupée en verre, avec les icônes 3D */
#s-lobby .glist { border: 0; border-radius: var(--radius-xl); }
#games .gcard { min-height: 76px; }
#games .gcard .gart { display: none; }
#games .gcard .ih-ic { grid-row: 1 / 3; grid-column: 1; width: 52px; height: 52px; border-radius: 12px; }
#games .gcard .ih-ic img { width: 94%; height: 94%; }
#games .gcard:active { background: color-mix(in oklab, var(--glass-ink) 8%, transparent); }
#games .gcard[aria-pressed="true"] { background: color-mix(in oklab, var(--acc) 16%, transparent); box-shadow: inset 0 0 0 2px var(--acc); }
#games .gcard .gmeta { font-variant-numeric: tabular-nums; }

/* les réglages */
#s-lobby .field.row { background: var(--glass-tint); border: 0; box-shadow: inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); }
#s-lobby .chips label { background: var(--glass-tint); border: 0; box-shadow: inset 0 0 0 .5px var(--glass-rim); min-height: 40px; }
@media (min-width: 1100px) {
  #s-lobby .lobby-side { background: var(--glass-tint-thick); border-radius: var(--radius-2xl); padding: 22px 22px 18px; color: var(--glass-ink);
    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
    box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge), var(--glass-shadow); }
  /* dans la carte, plus besoin d'ombre portée sur le texte */
  #s-lobby .lobby-side :is(.players-title, .opts .fine, #lobby-wait, .chips legend) { color: var(--glass-ink-2); text-shadow: none; }
  #s-lobby .lobby-side .code-strip { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  #s-lobby .lobby-side .chip { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: .5px solid var(--line); border-radius: 0; }
  #s-lobby .lobby-side .players-title + .chip { border-top: 0; }
  #s-lobby .lobby-side .field.row, #s-lobby .lobby-side .chips label { background: var(--glass-field); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #s-lobby .lobby-side #btn-start { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -12px color-mix(in oklab, var(--acc) 80%, black); }
}
@media (prefers-reduced-transparency: reduce) {
  #s-lobby .chip, #s-lobby .gfilters, #s-lobby .field.row, #s-lobby .lobby-side, .modal .sheet { background: var(--bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ====================================================================================================
   Les feuilles (règles, inviter, joueurs, emoji, confirmer) : verre épais, poignée, ressort (ios.js)
   ==================================================================================================== */
.modal { background: var(--scrim); animation: none; }
/* plus dense que le verre des cartes : du texte long se lit dessus, rien ne doit transparaître */
.modal .sheet { background: linear-gradient(var(--glass-tint-thick), var(--glass-tint-thick)), color-mix(in oklab, var(--wall-base) 62%, transparent); color: var(--glass-ink); border: 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; animation: none; padding-top: 8px;
  --ink: var(--glass-ink); --ink-2: var(--glass-ink-2); --mute: var(--glass-ink-2); --line: color-mix(in oklab, var(--glass-ink) 13%, transparent); --surface: var(--glass-field); --surface-2: var(--glass-field);
  -webkit-backdrop-filter: blur(44px) saturate(180%); backdrop-filter: blur(44px) saturate(180%);
  box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge), 0 -12px 40px rgba(0, 0, 0, .3); }
/* en jeu, la feuille prend la palette du jeu (les jetons de verre ne sont définis que hors jeu) */
[data-game] .modal .sheet { background: color-mix(in oklab, var(--surface) 86%, transparent); color: var(--ink);
  --ink: inherit; --ink-2: inherit; --mute: inherit; --line: inherit; --surface: inherit; --surface-2: inherit; }
.ih-grab { width: 38px; height: 5px; border-radius: 3px; background: currentColor; opacity: .3; margin: 4px auto 14px; flex: none; }
.modal .sheet .ih-grab { margin: 2px auto 6px; }
.modal .sheet-top { min-height: 44px; }
.modal .sheet-top .btn { min-height: 44px; border-radius: var(--radius-capsule); }
.modal .sheet .btn:not(.primary):not(.ghost) { background: var(--glass-field); border: 0; box-shadow: inset 0 0 0 .5px var(--glass-rim); }
[data-theme="light"]:not([data-game]) .modal .sheet .btn.primary { background: color-mix(in oklab, var(--acc) 66%, black); color: #fff; border: 0; }
.modal.ios-closing[hidden] { display: flex !important; pointer-events: none; }
@media (min-width: 760px) { .modal { align-items: center; } .modal .sheet { border-radius: var(--radius-2xl); max-height: 80dvh; } .modal .sheet .ih-grab { display: none; } }
@media (prefers-contrast: more) { .modal .sheet { background: var(--bg); box-shadow: 0 0 0 1.5px var(--ink); } }

/* le verre posé directement sur le fond (téléphone) : le widget du code et les listes de jeux */
#s-lobby .code-strip, #s-lobby .glist { background: var(--glass-tint);
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
  box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge), var(--glass-shadow); }
.modal { background: color-mix(in srgb, var(--scrim) calc(var(--so, 1) * 100%), transparent); }
.modal .sheet-top, .modal .ih-grab { touch-action: none; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-transparency: reduce) { #s-lobby .code-strip, #s-lobby .glist { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ====================================================================================================
   Les écrans de jeu : chaque jeu garde sa palette et ses dessins ; seul le cadre commun passe au verre.
   Les jetons de verre sont recalculés depuis la palette du jeu (fond, surface, encre).
   ==================================================================================================== */
[data-game] {
  --glass-tint: color-mix(in oklab, var(--surface) 72%, transparent);
  --glass-tint-thick: color-mix(in oklab, var(--surface) 88%, transparent);
  --glass-hi: color-mix(in oklab, white 30%, transparent); --glass-rim: color-mix(in oklab, var(--ink) 12%, transparent);
  --glass-edge: color-mix(in oklab, black 22%, transparent);
  --glass-ink: var(--ink); --glass-ink-2: var(--ink-2); --glass-field: color-mix(in oklab, var(--surface-2) 80%, transparent);
  --scrim: color-mix(in oklab, black 42%, transparent);
}
/* la barre du haut reste unie (couleur du jeu), ses boutons deviennent des pastilles de verre rondes */
[data-game] .topbar { border-bottom-color: transparent; }
[data-game] .topbar .ic { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--glass-tint);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 0 0 .5px var(--glass-edge), 0 4px 12px -6px rgba(0, 0, 0, .35); }
/* les boutons des jeux : des capsules, enfoncées dès que le doigt se pose (ressort, ios.js) */
.screen.play .btn, #s-end .btn { border-radius: var(--radius-capsule); min-height: 44px; }
.screen.play .btn.primary, #s-end .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 10px 22px -14px color-mix(in oklab, var(--acc) 80%, black); }
/* le message éphémère : une capsule de verre sombre */
.toast { background: color-mix(in oklab, var(--ink) 84%, transparent); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 22%, transparent), 0 10px 30px -10px rgba(0, 0, 0, .45); }
/* le choix de couleur de Chromo : une feuille de verre */
.ch-picker { background: var(--glass-tint-thick); border-top: 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  box-shadow: inset 0 1.2px 0 var(--glass-hi), inset 0 0 0 .5px var(--glass-rim), 0 -14px 34px rgba(0, 0, 0, .35); }
@media (prefers-reduced-transparency: reduce) {
  .toast { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ch-picker, [data-game] .topbar .ic { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
#f-home.invited .ih-codebox { display: none; }