/* Deepverse 2.0 · L'HABILLAGE DES JEUX, style « Technicolor marin » (dessin animé des années 1930) — agent C, 27/10/2026.
   Traits d'encre noirs épais, couleurs passées (crème, corail, bleu canard, rouge brique, or), ombres décalées pleines (jamais de lueur),
   lettres de cinéma (Erica One) pour les titres, police ronde très grasse pour le reste, rebond élastique au toucher.
   Ce fichier ne change AUCUNE règle de jeu, aucune difficulté, aucun calcul de récompense : seulement le look.
     A. jeu.html (l'écran du jeu « hub ») ............ html.dv body.hub-page
     B. l'arène des Profondeurs : le cadre commun des 21 jeux (barre du haut, consignes, décompte, descente, écran de fin)
     C. les 21 jeux : leurs plateaux, boutons et compteurs (une section par jeu)
   Chargé par jeu.html (<link>) et, sur la page des Profondeurs, par les jeux eux-mêmes (jeu-*.js l'ajoutent s'il manque).
   Demande au coordinateur / à l'agent D : <link rel="stylesheet" href="dv/jeux30.css?v=60"> en fin de <head> de profondeurs.html. */

:root {
  --j-encre: var(--dv-encre, #1E1712);
  --j-creme: var(--dv-creme, #F1E2BF);
  --j-papier: #FBF4E2;
  --j-papier-2: var(--dv-papier, #F4E7C8);
  --j-papier-f: var(--dv-papier-f, #EAD7AF);
  --j-or: var(--dv-jaune, #D6A84B);       --j-or-f: var(--dv-jaune-f, #A47A2C);
  --j-corail: var(--dv-corail, #C8664A);  --j-corail-f: #9A4A33;
  --j-brique: var(--dv-rouge, #B04A34);   --j-brique-f: #823322;
  --j-canard: var(--dv-cyan, #5F8F96);    --j-canard-f: var(--dv-cyan-f, #416B71);
  --j-algue: var(--dv-vert, #7F8F50);     --j-algue-f: var(--dv-vert-f, #5A673A);
  --j-rose: var(--dv-rose, #D58D78);      --j-rose-f: var(--dv-rose-f, #A8604F);
  --j-nuit: var(--dv-nuit, #223739);
  --j-rond: var(--dv-rond, ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Nunito', system-ui, sans-serif);
  --j-titre: var(--dv-titre, 'Erica One', 'Cooper Black', 'Rockwell Extra Bold', 'Arial Black', sans-serif);
  --j-ombre: 4px 5px 0 var(--j-encre);
  --j-ombre-p: 2px 3px 0 var(--j-encre);
  --j-ressort: var(--dv-ressort, cubic-bezier(.3, 1.9, .45, 1));
}

/* =====================================================================================================================
   A. jeu.html — l'écran du jeu : la mer aquarelle, des médaillons de papier crème, des étiquettes à l'encre
   ===================================================================================================================== */
html.dv:has(body.hub-page) { background: var(--dv-mer-3, #6E9692); }
html.dv body.hub-page { background: transparent !important; }
/* le fond : la mer aquarelle de habillage.css (html.dv::before) ; l'ancienne scène de nuit (étoiles, nuages, rayons bleus) est rangée,
   la scène de l'Océan interdit reste, très légère, comme un lavis d'encre sur l'eau */
html.dv body.hub-page #hub { background: transparent; color: var(--j-encre); }
html.dv body.hub-page #hub::before { background: transparent !important; }   /* (le ciel de nuit de l'Océan interdit, ocean-portail.js) */
html.dv body.hub-page #hub::after { background: radial-gradient(130% 60% at 50% 100%, rgba(60, 40, 18, .16), transparent 70%); }
html.dv body.hub-page #hub .ac-scene { display: none; }
html.dv body.hub-page #hub .oc-p-cv { opacity: .18; mix-blend-mode: multiply; filter: grayscale(.6) sepia(.4); }

/* en haut : toi (un médaillon crème, l'anneau d'XP en corail), tes perles (une étiquette crème), les réglages */
html.dv body.hub-page .hub-moi { padding: 3px 14px 3px 3px; border: 3px solid var(--j-encre); background: var(--j-papier); box-shadow: var(--j-ombre-p); transition: transform .42s var(--j-ressort); }
html.dv body.hub-page .hub-moi:active { transform: translate(2px, 2px) scale(.96); transition-duration: .07s; }
html.dv body.hub-page .hub-anneau .fond { stroke: rgba(30, 23, 18, .18); }
html.dv body.hub-page .hub-anneau .xp { stroke: var(--j-corail); filter: none; }
html.dv body.hub-page .hub-av-in { background: var(--j-papier-f); box-shadow: inset 0 0 0 2px var(--j-encre); }
html.dv body.hub-page .hub-niv { border: 2px solid var(--j-encre); background: linear-gradient(180deg, #E8C36E 0%, var(--j-or) 60%, var(--j-or-f) 60.5%); color: var(--j-encre); text-shadow: none; box-shadow: 1px 2px 0 var(--j-encre); font-family: var(--j-rond); font-weight: 900; }
html.dv body.hub-page .hub-moi-txt b { font: 900 1.05rem/1.1 var(--j-rond); color: var(--j-encre); text-shadow: none; }
html.dv body.hub-page .hub-moi-txt em { font: 800 .75rem/1.3 var(--j-rond); color: var(--dv-encre-2, #3F3224); }
html.dv body.hub-page .hub-rang { color: var(--j-brique-f); }
html.dv body.hub-page .hub-pieces { border: 3px solid var(--j-encre); background: linear-gradient(180deg, var(--j-papier) 0 62%, var(--j-papier-f) 62.5%); color: var(--j-encre); box-shadow: var(--j-ombre-p);
  -webkit-backdrop-filter: none; backdrop-filter: none; font-family: var(--j-rond); font-weight: 900; transition: transform .42s var(--j-ressort); }
html.dv body.hub-page .hub-pieces b { color: var(--j-encre); font-weight: 900; }
html.dv body.hub-page .hub-boutique { border-left: 2px solid rgba(30, 23, 18, .35); }
html.dv body.hub-page .hub-rond { width: 48px; height: 48px; border: 3px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); box-shadow: var(--j-ombre-p);
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .42s var(--j-ressort); }
html.dv body.hub-page .hub-rond svg { width: 26px; height: 26px; stroke-width: 2.2; }
html.dv body.hub-page :is(.hub-pieces, .hub-rond):active { transform: translate(2px, 2px) scale(.92); transition-duration: .07s; }

/* l'événement (« L'Océan interdit ») : un ruban rouge brique, le mot en crème bordé d'encre */
html.dv body.hub-page .hub-ev { height: 46px; padding: 0 .7rem 0 .8rem; border: 3px solid var(--j-encre); border-radius: 12px; background: linear-gradient(180deg, var(--j-brique) 0 62%, var(--j-brique-f) 62.5%);
  color: var(--j-creme); font: 900 .78rem/1 var(--j-rond); letter-spacing: .1em; text-transform: uppercase; box-shadow: var(--j-ombre-p); -webkit-backdrop-filter: none; backdrop-filter: none; transform: rotate(-1.5deg); }
html.dv body.hub-page .hub-ev #hub-ev-txt { -webkit-text-stroke: 2.5px var(--j-encre); paint-order: stroke fill; text-shadow: 1.5px 1.5px 0 var(--j-encre); }
html.dv body.hub-page .hub-ev:active { transform: rotate(-1.5deg) translate(2px, 2px) scale(.96); border-color: var(--j-encre); background: linear-gradient(180deg, var(--j-brique) 0 62%, var(--j-brique-f) 62.5%); }
html.dv body.hub-page .hub-ev svg { stroke-width: 3; }

/* le nom du site : un carton de cinéma (crème, contour d'encre, ombre décalée) ; la devise à l'encre */
html.dv body.hub-page #hub .nom { font-family: var(--j-titre) !important; font-weight: 900; color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--j-brique), 6px 6px 0 var(--j-encre); letter-spacing: .02em; }
html.dv body.hub-page #hub .nom .l { color: inherit; }
html.dv body.hub-page .hub-tete .sur { color: var(--j-encre); text-shadow: none; font-family: var(--j-rond); font-weight: 900; }
html.dv body.hub-page .hub-devise { font: 800 clamp(.95rem, 2.2dvh, 1.08rem)/1.35 var(--j-rond); }
html.dv body.hub-page #hub .devise, html.dv body.hub-page #hub .hub-devise .oc-p-msg { color: var(--j-encre); text-shadow: none; font: inherit; }

/* « Comment tu te sens ? » : six billes peintes, cerclées d'encre ; le mot à l'encre */
html.dv body.hub-page .hl-t { font: 900 clamp(1.05rem, 2.4dvh, 1.25rem)/1.1 var(--j-rond); color: var(--j-encre); text-shadow: none; }
html.dv body.hub-page .hl-humeur { color: var(--j-encre); font: 800 .7rem/1.1 var(--j-rond); letter-spacing: -.01em; }
html.dv body.hub-page .hl-humeur > span:last-child { text-shadow: none; }
html.dv body.hub-page .hl-humeur .bille { border: 2.5px solid var(--j-encre); box-shadow: 2px 3px 0 var(--j-encre); transition: transform .42s var(--j-ressort); background: radial-gradient(circle at 34% 28%, rgba(251, 244, 226, .55) 0 18%, transparent 19%), var(--h, var(--c2)); }
html.dv body.hub-page .hl-humeur:active { transform: none; }
html.dv body.hub-page .hl-humeur:active .bille { transform: translate(2px, 2px) scale(.9); transition-duration: .07s; }
html.dv body.hub-page .hl-humeur:focus-visible { outline: 3px solid var(--j-encre); }
html.dv body.hub-page .hl-humeur[data-vers="tristesse"] { --h: #6E8FA0; }
html.dv body.hub-page .hl-humeur[data-vers="amour"] { --h: #D58D78; }
html.dv body.hub-page .hl-humeur[data-vers="fatigue"] { --h: #9C92B4; }
html.dv body.hub-page .hl-humeur[data-vers="nostalgie"] { --h: #D9AE7E; }
html.dv body.hub-page .hl-humeur[data-vers="espoir"] { --h: #D6A84B; }
html.dv body.hub-page .hl-humeur[data-vers="joie"] { --h: #8FA26A; }

/* le poème du jour : une carte de papier crème, la plume dans un médaillon corail */
html.dv body.hub-page .hub-poeme { border: 3px solid var(--j-encre); border-radius: 18px; background: linear-gradient(180deg, var(--j-papier), var(--j-papier-2)); color: var(--j-encre);
  box-shadow: inset 0 0 0 3px var(--j-papier), inset 0 0 0 5px color-mix(in srgb, var(--j-corail) 75%, var(--j-encre)), var(--j-ombre-p); transition: transform .42s var(--j-ressort); }
html.dv body.hub-page .hub-poeme:active { transform: translate(2px, 2px) scale(.98); border-color: var(--j-encre); transition-duration: .07s; }
html.dv body.hub-page .hub-plume { border: 2.5px solid var(--j-encre); background: var(--j-papier-f); box-shadow: 1px 2px 0 var(--j-encre); }
html.dv body.hub-page .hub-plume .dv-ic { width: 30px; height: 30px; }
html.dv body.hub-page .hub-plume svg:not(.dv-ic) { stroke: var(--j-encre); }
html.dv body.hub-page .hub-poeme-txt small { color: var(--j-corail-f); font: 900 .72rem/1.35 var(--j-rond); }
html.dv body.hub-page .hub-poeme-txt b { font: 800 1.02rem/1.2 var(--dv-poeme, Georgia, serif); font-style: italic; color: var(--j-encre); }
html.dv body.hub-page .hub-poeme-fl { stroke: var(--j-encre); }

/* PLONGER (le bouton de laiton de habillage.css) : le casque de scaphandre dans un hublot ; le jeu du moment sur une étiquette */
html.dv body.hub-page .hub-plonger::before, html.dv body.hub-page .hub-plonger::after { content: none; }
html.dv body.hub-page .hub-plonger { transition: transform .42s var(--j-ressort); }
html.dv body.hub-page .hub-plonger:active { transform: translate(3px, 4px) scale(.97, .94); filter: none; transition-duration: .07s; }
html.dv body.hub-page .hp-goutte { border: 3px solid var(--j-encre); background: radial-gradient(circle at 50% 45%, #FBF4E2 0 55%, var(--j-papier-f) 56%); box-shadow: inset 0 0 0 3px var(--j-or-f), 1px 2px 0 var(--j-encre); }
html.dv body.hub-page .hp-goutte .dv-ic { width: 80%; height: 80%; }
html.dv body.hub-page .hp-fl { stroke: var(--j-encre); stroke-width: 3; opacity: 1; }
html.dv body.hub-page .hub-jeu { align-self: center; padding: 3px 10px; border: 2px solid var(--j-encre); border-radius: 8px; background: var(--j-papier); color: var(--j-encre); font: 900 .72rem/1.2 var(--j-rond);
  letter-spacing: .1em; text-shadow: none; box-shadow: 1px 2px 0 var(--j-encre); transform: rotate(-1.5deg); }
html.dv body.hub-page .hub-jeu:empty { display: none; }

/* les trois portes (Classement, Trésor, Mini-jeux) et le Bestiaire : des médaillons de papier crème, logos à l'encre */
html.dv body.hub-page .hub-med { background: radial-gradient(circle at 50% 42%, var(--j-papier) 0 58%, var(--j-papier-f) 59%); border: 3px solid var(--j-encre);
  box-shadow: inset 0 0 0 3px var(--j-papier), inset 0 0 0 5.5px color-mix(in srgb, var(--halo30, var(--j-or)) 80%, var(--j-encre)), var(--j-ombre); -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .42s var(--j-ressort), box-shadow .2s ease; }
html.dv body.hub-page .hub-med svg { filter: none; }
html.dv body.hub-page .hub-med .dv-ic { width: 70%; height: 70%; }
html.dv body.hub-page .hub-porte:active .hub-med { transform: translate(3px, 4px) scale(.92, .88); box-shadow: inset 0 0 0 3px var(--j-papier), inset 0 0 0 5.5px color-mix(in srgb, var(--halo30, var(--j-or)) 80%, var(--j-encre)), 1px 1px 0 var(--j-encre); transition-duration: .07s; }
html.dv body.hub-page .hub-porte:focus-visible .hub-med { outline: 3px solid var(--j-encre); }
html.dv body.hub-page .hub-porte .hub-lib { font: 900 clamp(.8rem, 1.9dvh, .92rem)/1.1 var(--j-rond); color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--j-encre); }
html.dv body.hub-page .hp-classement { --halo30: var(--j-or); }
html.dv body.hub-page .hp-coffres { --halo30: var(--j-corail); }
html.dv body.hub-page .hp-mini { --halo30: var(--j-canard); }
html.dv body.hub-page .hp-bestiaire { --halo30: var(--j-algue); }
html.dv body.hub-page .hub-bdg { border: 2px solid var(--j-encre); background: var(--j-brique); color: var(--j-creme); box-shadow: 1px 2px 0 var(--j-encre); font-family: var(--j-rond); font-weight: 900; }
html.dv body.hub-page .hub-lien { border: 3px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); box-shadow: var(--j-ombre-p); -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .42s var(--j-ressort); }
html.dv body.hub-page .hub-lien:active { transform: translate(2px, 2px) scale(.96); border-color: var(--j-encre); transition-duration: .07s; }
html.dv body.hub-page .hub-lien .hub-med { border-width: 2px; box-shadow: none; background: var(--j-papier-f); }
html.dv body.hub-page .hub-lien .hub-lib { font: 900 .86rem/1.1 var(--j-rond); color: var(--j-encre); }

/* les petits écrans (iPhone SE, 568 à 640 px de haut) : tout resserré pour que les trois portes et leurs noms restent au-dessus de la barre
   (avant le style années 30 déjà, leurs noms passaient sous la barre et le Bestiaire était caché) */
@media (max-height: 640px) {
  html.dv body.hub-page .hub-ev { height: 36px; font-size: .7rem; }
  html.dv body.hub-page #hub .nom { font-size: clamp(1.7rem, 5.4dvh, 2.2rem); -webkit-text-stroke-width: 2.5px; text-shadow: 2px 2px 0 var(--j-brique), 4px 4px 0 var(--j-encre); }
  html.dv body.hub-page .hl-t { font-size: .95rem; }
  html.dv body.hub-page .hl-humeur .bille { width: 32px; height: 32px; }
  html.dv body.hub-page .hub-plonger { min-height: 62px; }
  html.dv body.hub-page .hp-goutte { width: 44px; }
  html.dv body.hub-page .hub-porte { --m: 50px; gap: .2rem; }
  html.dv body.hub-page .hub-portes { margin-top: .3rem; }
  html.dv body.hub-page .hub-second { margin-top: .25rem; }
  html.dv body.hub-page .hub-lien { min-height: 40px; }
  html.dv body.hub-page .hub-lien .hub-med { width: 30px; height: 30px; }
}
/* (568 px de haut : le Bestiaire ne tient plus ; il était déjà caché sous la barre — on le range proprement, il reste dans le Monde) */
@media (max-height: 600px) { html.dv body.hub-page .hub-second { display: none; } }

/* les panneaux qui montent du bas (« Lire aujourd'hui », l'Océan interdit) : une page de papier crème, le texte à l'encre */
html.dv body.hub-page .hub-voile { background: rgba(30, 23, 18, .45); }
html.dv body.hub-page .hub-panneau {
  --fond: var(--j-papier-2); --surface: var(--j-papier); --papier: var(--j-papier); --encre: #1E1712; --brume: #3F3224; --trait: rgba(30, 23, 18, .26);
  --rose: var(--j-corail-f); --rose-voile: rgba(200, 102, 74, .14); --sur-rose: var(--j-creme); --heure: var(--j-or-f); --plume: var(--j-canard-f);
  --dv-texte: #1E1712; --dv-texte-2: #3F3224; --dv-texte-3: #5E4D3A; --dv-trait: rgba(30, 23, 18, .26);
  color-scheme: light; color: var(--j-encre); background: linear-gradient(180deg, var(--j-papier-2), var(--j-papier-f)) !important;
  border: 3px solid var(--j-encre); border-bottom: 0; box-shadow: inset 0 5px 0 color-mix(in srgb, var(--j-or) 70%, transparent), 0 -16px 40px -18px rgba(30, 23, 18, .6); }
html.dv body.hub-page .hp-poignee { background: rgba(30, 23, 18, .35); }
html.dv body.hub-page .hp-tete h2 { font: 900 clamp(22px, 6.4vw, 28px)/1.1 var(--j-titre) !important; color: var(--j-creme); -webkit-text-stroke: 2px var(--j-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--j-encre); }
html.dv body.hub-page .hp-x { width: 48px; height: 48px; border: 3px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); box-shadow: var(--j-ombre-p); }
html.dv body.hub-page .hp-biblio { border: 3px solid var(--j-encre); background: var(--j-papier); box-shadow: var(--j-ombre-p); }
html.dv body.hub-page .hp-biblio b { font: 900 1.08rem/1.2 var(--j-rond); }
html.dv body.hub-page .hp-x:focus-visible, html.dv body.hub-page .hub-plonger:focus-visible, html.dv body.hub-page .hub-poeme:focus-visible, html.dv body.hub-page .hub-lien:focus-visible { outline: 3px solid var(--j-encre); outline-offset: 3px; }
/* dans « Lire aujourd'hui » : le courant du jour (maree-du-jour.js) et la carte du Monde deviennent des cartes de papier / une affiche peinte */
html.dv body.hub-page .hp-lire .mj { border: 3px solid var(--j-encre); background: linear-gradient(180deg, var(--j-papier), var(--j-papier-2)); color: var(--j-encre); box-shadow: inset 0 0 0 3px var(--j-papier), inset 0 0 0 5px rgba(95, 143, 150, .7), var(--j-ombre-p); }
html.dv body.hub-page .hp-lire .mj :is(h2, h3) { color: var(--j-encre); font-family: var(--j-rond); font-weight: 900; }
html.dv body.hub-page .hp-lire .mj-tete span, html.dv body.hub-page .hp-lire .mj-chapo, html.dv body.hub-page .hp-lire .mj-l em { color: var(--dv-encre-2, #3F3224); }
html.dv body.hub-page .hp-lire .mj-l { border-top: 2px dashed rgba(30, 23, 18, .25); }
html.dv body.hub-page .hp-lire .mj-l small { color: var(--j-corail-f); font-family: var(--j-rond); font-weight: 900; }
html.dv body.hub-page .hp-lire .mj-l b { color: var(--j-encre); font-family: var(--j-rond); font-weight: 900; }
html.dv body.hub-page .hp-lire .mj-l i { color: var(--j-encre); }
html.dv body.hub-page .hp-lire .mj-trace { stroke: var(--j-encre); stroke-width: 2.2; }
html.dv body.hub-page .hp-lire .monde-carte { border: 3px solid var(--j-encre); box-shadow: var(--j-ombre); }
html.dv body.hub-page .hp-lire .monde-carte canvas { filter: sepia(.5) saturate(.6) hue-rotate(-8deg) brightness(1.15); }
html.dv body.hub-page .hp-lire .monde-carte::after { background: linear-gradient(180deg, rgba(30, 23, 18, 0) 25%, rgba(30, 23, 18, .78) 100%); }
html.dv body.hub-page .hp-lire .monde-sur { color: var(--j-or); font-family: var(--j-rond); font-weight: 900; }
html.dv body.hub-page .hp-lire .monde-desc { color: #F4E9CF; }
html.dv body.hub-page .hp-lire .monde-go { border: 3px solid var(--j-encre); border-radius: 16px; background: linear-gradient(180deg, var(--j-or) 0 63%, var(--j-or-f) 63.5%); color: var(--j-creme); font: 900 .95rem/1 var(--j-rond);
  text-transform: uppercase; -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--j-encre); box-shadow: var(--j-ombre-p); }
html.dv body.hub-page .hp-lire .monde-pct { border: 2px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); }
html.dv body.hub-page .hp-ocean { background: linear-gradient(180deg, #34504F, var(--j-nuit) 75%) !important; color: #F4E9CF;
  --encre: #F4E9CF; --brume: #E4D0A6; --dv-texte: #F4E9CF; --dv-texte-2: #E4D0A6; --trait: rgba(241, 226, 191, .28); }
html.dv body.hub-page .hp-ocean .hp-tete h2 { color: var(--j-creme); }
html.dv body.hub-page .hp-ocean-sous { color: #E4D0A6; }
html.dv body.hub-page .hp-ocean .oc-p-bloc .oc-p-cta { border: 3px solid var(--j-encre); border-radius: 18px; background: linear-gradient(180deg, var(--j-or) 0 63%, var(--j-or-f) 63.5%); color: var(--j-creme);
  font: 900 1rem/1 var(--j-rond); text-transform: uppercase; -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--j-encre); box-shadow: var(--j-ombre); }
html.dv body.hub-page .hp-ocean :is(.oc-p-mini a, .oc-p-mini button, .hp-corps > a) { color: #E4D0A6; text-decoration-color: var(--j-or); }
html.dv body.hub-page .hp-ocean .oc-p-retour { border: 2.5px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); box-shadow: var(--j-ombre-p); font-weight: 800; }

/* =====================================================================================================================
   B. L'ARÈNE DES PROFONDEURS : le cadre commun des 21 jeux
   ===================================================================================================================== */
/* la mer de la profondeur, passée comme une vieille pellicule couleur (la profondeur garde sa teinte, plus sombre en bas) */
.pf-arene .pf-fond { filter: sepia(.5) saturate(.6) hue-rotate(-8deg) contrast(.96); }
.pf-arene.enfer .pf-fond, .pf-arene.niv-9 .pf-fond, .pf-arene.niv-10 .pf-fond { filter: sepia(.35) saturate(.8) contrast(.98); }

/* la barre du haut : × et le son en médaillons crème, le jeu et sa profondeur sur une étiquette de papier, la mise en pastille de laiton */
.pf-arene .pf-rond { width: 48px; height: 48px; border: 3px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); font: 900 24px/1 var(--j-rond); box-shadow: var(--j-ombre-p);
  display: grid; place-items: center; padding: 0; transition: transform .42s var(--j-ressort); }
.pf-arene .pf-rond:active { transform: translate(2px, 2px) scale(.9); background: var(--j-papier-f); transition-duration: .07s; }
.pf-arene .pf-rond:focus-visible { outline: 3px solid var(--j-creme); outline-offset: 2px; }
.pf-arene .pf-quitter-vite { box-shadow: var(--j-ombre-p); }
.pf-arene .pf-haut .pf-chip { border: 2.5px solid var(--j-encre); background: linear-gradient(180deg, var(--j-papier) 0 62%, var(--j-papier-f) 62.5%); color: var(--j-encre); box-shadow: var(--j-ombre-p);
  font: 900 .84rem/1.1 var(--j-rond); padding: .2rem .7rem .2rem .25rem; min-height: 44px; transition: transform .42s var(--j-ressort); }
.pf-arene .pf-chip-prof:active { transform: translate(2px, 2px) scale(.96); background: var(--j-papier-f); transition-duration: .07s; }
.pf-arene .pf-chip .bete { filter: drop-shadow(1px 1px 0 var(--j-encre)); }
.pf-arene .pf-mise { border: 2.5px solid var(--j-encre); background: linear-gradient(180deg, #E8C36E 0%, var(--j-or) 60%, var(--j-or-f) 60.5%); color: var(--j-encre); box-shadow: var(--j-ombre-p);
  font: 900 .86rem/1 var(--j-rond); display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; }
/* contre l'ordinateur / à deux : deux onglets de papier */
.pf-arene .pf-mode { padding: 3px; border: 2.5px solid var(--j-encre); background: var(--j-papier-f); box-shadow: var(--j-ombre-p); }
.pf-arene .pf-mode button { color: var(--j-encre); font: 800 .86rem/1.1 var(--j-rond); }
.pf-arene .pf-mode button[aria-pressed="true"] { background: var(--j-or); color: var(--j-encre); box-shadow: inset 0 0 0 2.5px var(--j-encre); font-weight: 900; }
/* l'adversaire : son nom sur un ruban ; ce qu'il dit dans une bulle de bande dessinée */
.pf-arene .pf-advnom { border: 2.5px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); box-shadow: var(--j-ombre-p); font: 900 .76rem/1.2 var(--j-rond); letter-spacing: .06em; }
.pf-arene.boss .pf-advnom, .pf-arene .boss .pf-advnom, .pf-arene.chef .pf-advnom { background: linear-gradient(180deg, var(--j-brique) 0 62%, var(--j-brique-f) 62.5%); color: var(--j-creme); box-shadow: var(--j-ombre-p); text-shadow: 1.5px 1.5px 0 var(--j-encre); }
.pf-arene .pf-advnom small { color: var(--j-creme); opacity: .9; }
.pf-arene .pf-bulle { border: 2.5px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); box-shadow: var(--j-ombre-p); font: 800 .86rem/1.3 var(--j-rond); }
.pf-arene.chef .pf-bulle { border: 2.5px solid var(--j-encre); background: #2A1D17; color: #F4E9CF; box-shadow: inset 0 0 0 2px var(--j-brique), var(--j-ombre-p); }
/* à deux sur ce téléphone : Joueur 1 / Joueur 2 sur deux étiquettes de papier ; « À toi, Joueur 1 » en lettres crème bordées d'encre */
.pf-arene .pf-deux-j { border: 2.5px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); font: 900 .95rem var(--j-rond); box-shadow: var(--j-ombre-p); opacity: .6; }
.pf-arene .pf-deux-j i { box-shadow: inset 0 0 0 2px var(--j-encre) !important; }
.pf-arene .pf-deux-j.j1 i { background: radial-gradient(circle at 34% 30%, #F4CDBF 0 16%, var(--j-rose) 18% 64%, var(--j-rose-f) 66%); }
.pf-arene .pf-deux-j.j2 i { background: radial-gradient(circle at 34% 30%, #D8E6E3 0 16%, #7FAFB0 18% 64%, var(--j-canard-f) 66%); }
.pf-arene.jeu-othello .pf-deux-j.j1 i, .pf-arene .jeu-othello .pf-deux-j.j1 i { background: radial-gradient(circle at 34% 30%, #6A5E52 0 14%, #2A211A 16%); }
.pf-arene.jeu-othello .pf-deux-j.j2 i, .pf-arene .jeu-othello .pf-deux-j.j2 i { background: radial-gradient(circle at 34% 30%, #FFFFFF 0 14%, var(--j-papier) 16% 60%, #D9C9A8); }
.pf-arene .pf-deux-j.actif { opacity: 1; box-shadow: 0 0 0 3px var(--j-or), var(--j-ombre-p); }
.pf-arene .pf-deux-j.j1.actif { background: linear-gradient(180deg, #F6DCD2 0 64%, #EDBFAF 64.5%); }
.pf-arene .pf-deux-j.j2.actif { background: linear-gradient(180deg, #DCEAE7 0 64%, #BCD5D2 64.5%); }
.pf-arene .pf-deux-tour { font: 900 1.35rem/1.15 var(--j-titre); color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--j-encre); letter-spacing: .01em; }
.pf-arene .pf-deux-tour.j1 { color: #F6DCD2; } .pf-arene .pf-deux-tour.j2 { color: #DCEAE7; }
/* la consigne : des lettres crème bordées d'encre (comme les cartons d'un vieux dessin animé), lisibles sur toutes les mers */
.pf-arene .pf-info { color: var(--j-creme); font: 900 .96rem/1.25 var(--j-rond); letter-spacing: .01em; -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--j-encre); }
/* (une consigne de deux lignes ne se laisse plus écraser par le plateau : avant, sa 2e ligne passait sous les pièces de la Bataille navale) */
.pf-arene .pf-zone > .pf-info { flex-shrink: 0; }
/* le décompte : l'amorce d'une vieille pellicule (le cercle et sa croix), le chiffre en lettres de cinéma */
.pf-arene .pf-decompte { font: 900 clamp(4.6rem, 26vw, 8rem)/1 var(--j-titre); color: var(--j-creme); text-shadow: none; }
.pf-arene .pf-decompte span { display: grid; place-items: center; width: min(64vw, 16rem); aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--j-encre);
  background: linear-gradient(transparent calc(50% - 1.5px), rgba(30, 23, 18, .55) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(90deg, transparent calc(50% - 1.5px), rgba(30, 23, 18, .55) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    radial-gradient(circle, rgba(251, 244, 226, .92) 0 54%, rgba(234, 215, 175, .92) 55%);
  box-shadow: inset 0 0 0 10px rgba(251, 244, 226, .9), inset 0 0 0 13px var(--j-encre), 6px 7px 0 var(--j-encre);
  -webkit-text-stroke: 5px var(--j-encre); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--j-corail), 8px 8px 0 var(--j-encre); letter-spacing: .02em; }
/* la descente : la mer passée, les mots en lettres de cinéma */
.pf-arene .pf-descente { filter: sepia(.45) saturate(.65) contrast(.97); }
.pf-arene .pf-descente .txt { text-shadow: none; }
.pf-arene .pf-descente small { font: 900 .82rem/1.2 var(--j-rond); letter-spacing: .24em; color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--j-encre); opacity: 1; }
.pf-arene .pf-descente .m { font: 900 clamp(2.8rem, 14vw, 4.6rem)/1 var(--j-titre); color: var(--j-creme); -webkit-text-stroke: 4px var(--j-encre); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--j-canard-f), 7px 7px 0 var(--j-encre); letter-spacing: .01em; }
.pf-arene .pf-descente em { font: italic 600 1.3rem/1.2 var(--dv-poeme, Georgia, serif); color: var(--j-creme); text-shadow: 2px 2px 0 var(--j-encre), -1px -1px 0 var(--j-encre), 1px -1px 0 var(--j-encre), -1px 1px 0 var(--j-encre); }
.pf-arene .pf-descente .bulles i { border: 2px solid rgba(30, 23, 18, .6); background: radial-gradient(circle at 35% 30%, #FBF4E2 0 22%, rgba(244, 231, 200, .4) 30%, transparent 75%); }

/* l'écran de fin (hors grande victoire contre un boss, qui a son propre écran) : un carton de titre d'encre de mer,
   « Victoire ! » en or et « Perdu… » en crème, en lettres de cinéma ; REJOUER énorme ; le reste en petits boutons de papier */
.pf-arene .pf-fin { background: rgba(30, 23, 18, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pf-arene .pf-fin:not(.vb) .boite { border: 3px solid var(--j-encre); border-radius: 26px; color: #F4E9CF;
  background: radial-gradient(120% 60% at 50% 0%, rgba(95, 143, 150, .22), transparent 60%), linear-gradient(180deg, #3A5556 0%, #2E4749 55%, #1C2E30 100%);
  box-shadow: inset 0 0 0 3px rgba(95, 143, 150, .5), 6px 7px 0 var(--j-encre);
  --dv-texte: #F4E9CF; --dv-texte-2: #E4D0A6; --dv-texte-3: #C9B48A; --dv-trait: rgba(241, 226, 191, .28); }
.pf-arene .pf-fin:not(.vb) .boite.gagne { background: radial-gradient(120% 60% at 50% 0%, rgba(214, 168, 75, .3), transparent 60%), linear-gradient(180deg, #3A5556 0%, #2E4749 55%, #1C2E30 100%);
  box-shadow: inset 0 0 0 3px rgba(214, 168, 75, .7), 6px 7px 0 var(--j-encre); }
.pf-arene .pf-fin:not(.vb) .boite > .bete { filter: drop-shadow(2px 3px 0 var(--j-encre)); }
.pf-arene .pf-fin:not(.vb) h2 { margin: .3rem 0 .35rem; font: 900 clamp(2.3rem, 11vw, 3.1rem)/1.02 var(--j-titre) !important; color: var(--j-creme) !important; background: none !important;
  -webkit-text-fill-color: currentColor; -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--j-brique), 6px 6px 0 var(--j-encre) !important; letter-spacing: .01em; overflow-wrap: anywhere; }
.pf-arene .pf-fin:not(.vb) .gagne h2 { color: var(--j-or) !important; text-shadow: 3px 3px 0 var(--j-or-f), 6px 6px 0 var(--j-encre) !important; }
.pf-arene .pf-fin:not(.vb) .boite > p { font: 800 1rem/1.4 var(--j-rond); color: #EFE2C0; }
.pf-arene .pf-fin:not(.vb) .tentative { font: 800 .82rem var(--j-rond); color: #C9B48A; opacity: 1; }
.pf-arene .pf-fin:not(.vb) ul { font: 800 .95rem/1.35 var(--j-rond); }
.pf-arene .pf-fin:not(.vb) .pf-vainqueur { font-family: var(--j-rond); font-weight: 800; color: #E4D0A6; }
.pf-arene .pf-fin:not(.vb) .pf-stats div { background: rgba(251, 244, 226, .08); box-shadow: inset 0 0 0 2px rgba(214, 168, 75, .45); border-radius: 12px; }
.pf-arene .pf-fin:not(.vb) .pf-stats b { font: 900 1rem/1.1 var(--j-rond); color: var(--j-or); }
.pf-arene .pf-fin:not(.vb) .pf-stats small { font-family: var(--j-rond); font-weight: 800; color: #E4D0A6; opacity: 1; }
.pf-arene .pf-fin:not(.vb) .fin-tag { font-family: var(--j-rond); font-weight: 900; }
/* la profondeur écrite à l'encre (maree/fin-partie.js) : en lettres de cinéma crème bordées d'encre */
.pf-arene .pf-fin:not(.vb) .mfp-score.sombre .mfp-n { font: 900 clamp(30px, 9.6vw, 44px)/1.06 var(--j-titre); letter-spacing: .01em; background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--j-creme); color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: none; filter: drop-shadow(3px 3px 0 var(--j-encre)); }
.pf-arene .pf-fin:not(.vb) .mfp-score.sombre .mfp-n.ecrit { animation-name: jx-plume; filter: blur(3px) drop-shadow(3px 3px 0 var(--j-encre)); }
@keyframes jx-plume { 0% { clip-path: inset(-10% 100% -10% 0); filter: blur(3px) drop-shadow(3px 3px 0 #1E1712); } 100% { clip-path: inset(-10% -5% -10% 0); filter: blur(0) drop-shadow(3px 3px 0 #1E1712); } }
@media (prefers-reduced-motion: reduce) { .pf-arene .pf-fin:not(.vb) .mfp-score.sombre .mfp-n.ecrit { animation: none; clip-path: none; filter: drop-shadow(3px 3px 0 var(--j-encre)); } }
html.mvt-reduit .pf-arene .pf-fin:not(.vb) .mfp-score.sombre .mfp-n.ecrit { animation: none; clip-path: none; filter: drop-shadow(3px 3px 0 var(--j-encre)); }
.pf-arene .pf-fin:not(.vb) .mfp-score.sombre .mfp-sous { font: 900 12.5px/1.3 var(--j-rond); color: #E4D0A6; }
.pf-arene .pf-fin:not(.vb) .mfp-trait { height: 3px; background: linear-gradient(90deg, transparent, var(--j-or), transparent); }
.pf-arene .pf-fin:not(.vb) .mfp-defi { font-family: var(--j-rond); font-weight: 800; background: rgba(95, 143, 150, .12); box-shadow: inset 0 0 0 2px rgba(95, 143, 150, .45); color: #F4E9CF; }
.pf-arene .pf-fin:not(.vb) .mfp-defi b { font: 900 20px/1.15 var(--j-rond); }
.pf-arene .pf-fin:not(.vb) .mfp-defi.battu { background: rgba(214, 168, 75, .14); box-shadow: inset 0 0 0 2px rgba(214, 168, 75, .6); }
.pf-arene .pf-fin:not(.vb) .fil-poeme { border: 2.5px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); box-shadow: var(--j-ombre-p); }
.pf-arene .pf-fin:not(.vb) .fil-poeme small { color: var(--j-corail-f); }
/* les boutons : de petits boutons de papier crème (mot à l'encre) ; « Descendre plus bas » en corail ; REJOUER énorme, en laiton */
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions { gap: .6rem; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions .btn { min-height: 48px; border: 2.5px solid var(--j-encre) !important; border-radius: 16px; background: var(--j-papier) !important; color: var(--j-encre) !important;
  font: 800 15px/1.15 var(--j-rond) !important; text-transform: none; letter-spacing: 0; -webkit-text-stroke: 0; text-shadow: none !important; box-shadow: 3px 4px 0 var(--j-encre) !important; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions > .btn[data-a="suivant"] { min-height: 62px; border: 3px solid var(--j-encre) !important; border-radius: 20px; background: linear-gradient(180deg, var(--j-corail) 0 63%, var(--j-corail-f) 63.5%) !important;
  color: var(--j-creme) !important; font: 900 clamp(17px, 5vw, 20px)/1.05 var(--j-rond) !important; text-transform: uppercase; letter-spacing: .03em; -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--j-encre) !important; box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), var(--j-ombre) !important; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions > .btn.noir[data-a="suivant"] { background: linear-gradient(180deg, #3A3532 0 63%, #1E1712 63.5%) !important; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions > .btn.feu[data-a="suivant"] { background: linear-gradient(180deg, var(--j-brique) 0 63%, var(--j-brique-f) 63.5%) !important; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .mfp-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .mfp-trois > :last-child:nth-child(2) { grid-column: 1 / -1; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .mfp-trois > .btn[data-a="rejouer"] { grid-column: 1 / -1; min-height: 80px; border: 4px solid var(--j-encre) !important; border-radius: 24px;
  background: linear-gradient(180deg, var(--j-or) 0%, var(--j-or) 62%, var(--j-or-f) 62.5%, var(--j-or-f) 100%) !important; color: var(--j-creme) !important;
  font: 900 clamp(28px, 8.6vw, 37px)/1 var(--j-titre) !important; letter-spacing: .06em; text-transform: uppercase; -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--j-encre) !important;
  box-shadow: inset 0 0 0 3px rgba(250, 240, 214, .35), 6px 7px 0 var(--j-encre) !important; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions .btn:active { transform: translate(3px, 4px) scale(.98, .95) !important; box-shadow: 1px 1px 0 var(--j-encre) !important; transition-duration: .07s; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions .btn:disabled { opacity: .7; }
:root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions .btn:focus-visible { outline: 3px solid var(--j-creme); outline-offset: 3px; }
@media (max-width: 340px) { :root .pf-arene.pf-arene.pf-arene .pf-fin:not(.vb) .actions .btn { font-size: 14px !important; } }
/* le petit « Salon » (dv/jeux30.js) : un lien discret sous les boutons, à l'encre crème, souligné d'or */
.pf-arene .pf-fin .jx-bas { display: flex; justify-content: center; margin-top: .55rem; }
.pf-arene .pf-fin .jx-salon { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 14px; color: #E4D0A6; font: 900 15px/1 var(--j-rond);
  text-decoration: underline; text-decoration-color: var(--j-or); text-decoration-thickness: 2px; text-underline-offset: 5px; -webkit-tap-highlight-color: transparent; }
.pf-arene .pf-fin .jx-salon svg { width: 22px; height: 22px; flex: none; }
.pf-arene .pf-fin .jx-salon:active { transform: translateY(2px); }
.pf-arene .pf-fin .jx-salon:focus-visible { outline: 3px solid var(--j-creme); outline-offset: 3px; }

/* les petits textes et étiquettes que les jeux posent souvent (communs) */
.pf-arene .pf-zone :is(button, .btn) { font-family: var(--j-rond); }

/* =====================================================================================================================
   C. LES 21 JEUX : plateaux, boutons, compteurs (les couleurs qui disent QUI joue restent les mêmes familles :
   toi = rose passé, l'adversaire = sa couleur ou le bleu canard, le boss = rouge brique)
   ===================================================================================================================== */
/* --- les pièces communes : (1) les étiquettes de papier (scores, chronos, objectifs) ; (2) les lettres crème bordées d'encre
   posées sur la mer (petites consignes, compteurs) ; (3) les plateaux « encre de mer » (un carton sombre, trait d'encre, filet) --- */
.pf-arene .pf-zone :is(.pa-score span, .ec-haut span, .mo-essais, .mo-adv, .gf-score, .gf-adv, .tq-adv, .ot-j, .dm-chip, .bo-but, .bl-sc, .to-et, .fi-ok, .rd-tour, .bn-flotte span, .mm-liste span, .pe-hud) {
  border: 2.5px solid var(--j-encre); background: linear-gradient(180deg, var(--j-papier) 0 64%, var(--j-papier-f) 64.5%); color: var(--j-encre); text-shadow: none;
  box-shadow: var(--j-ombre-p); -webkit-backdrop-filter: none; backdrop-filter: none; font-family: var(--j-rond); font-weight: 900; }
.pf-arene .pf-zone :is(.bf-stats, .cn-dist, .md-haut, .hp-haut, .bc-course .l span, .bc-course .l b, .dm-ligne, .bo-tps, .bo-pts, .bl-tps, .fi-tps, .ec-vies, .bc-vies, .tq-info, .gf-info, .mo-info, .ec-info, .bc-info, .ot-info, .dm-info, .bn-txt, .mo-charge, .to-combo, .mm-score, .gf-chaine em) {
  color: var(--j-creme); font-family: var(--j-rond); font-weight: 900; -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 1.5px 1.5px 0 var(--j-encre); }
.pf-arene .pf-zone :is(.p4-plateau, .ot-plateau, .dm-grille, .gf-plateau, .tq-plateau, .ec-grille, .bc-cadre, .bn-g, .cn-bassin, .pe-toile) {
  border: 3px solid var(--j-encre); -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(130% 80% at 50% 0%, rgba(95, 143, 150, .3), transparent 65%), linear-gradient(180deg, #3A5556 0%, #2E4749 55%, #22383A 100%);
  box-shadow: inset 0 0 0 3px rgba(95, 143, 150, .45), 5px 6px 0 var(--j-encre); }
.pf-arene.boss .pf-zone :is(.p4-plateau, .ot-plateau, .dm-grille, .gf-plateau, .tq-plateau, .ec-grille, .bc-cadre, .bn-g, .cn-bassin, .pe-toile),
.pf-arene .pf-zone :is(.gf-plateau.boss, .tq-plateau.boss) {
  background: radial-gradient(130% 80% at 50% 0%, rgba(176, 74, 52, .3), transparent 65%), linear-gradient(180deg, #4A2A24 0%, #36201B 55%, #261612 100%);
  box-shadow: inset 0 0 0 3px rgba(176, 74, 52, .55), 5px 6px 0 var(--j-encre); }
.pf-arene .pf-zone :is(.gf-plateau.chef, .tq-plateau.chef), .pf-arene.chef-niv .pf-zone :is(.ot-plateau, .dm-grille) {
  background: radial-gradient(130% 80% at 50% 0%, rgba(140, 100, 120, .25), transparent 65%), linear-gradient(180deg, #3A3240 0%, #2A2430 55%, #1E1A22 100%); }
.pf-arene .pf-zone :is(.gf-plateau.gagne, .tq-plateau.gagne) { box-shadow: inset 0 0 0 3px var(--j-or), 0 0 0 4px var(--j-or), 5px 6px 0 var(--j-encre); }
/* les reflets bleus qui couraient sur les plateaux (Othello, Démineur) : rangés (une eau d'encre ne miroite pas) */
.pf-arene .pf-zone :is(.ot-plateau, .dm-grille)::before { opacity: .35; filter: grayscale(1); }
/* les toiles dessinées (Pêche aux perles, Harpon, Méduses, Bocal, Récif à blocs, Tour, Fioles, Banc) : cadre d'encre, couleurs passées */
.pf-arene .pf-zone :is(.hp-c, .md-c, .bo-c, .to-c, .bl-c, .pe-toile, .bc-cadre canvas) { filter: sepia(.32) saturate(.78) contrast(.97); }
.pf-arene .pf-zone :is(.hp-c, .md-c, .bo-c, .to-c) { border: 3px solid var(--j-encre); box-shadow: 5px 6px 0 var(--j-encre); }
.pf-arene .pf-zone .fi-c { filter: sepia(.22) saturate(.85); }
.pf-arene .pf-zone .bo-c { filter: sepia(.45) saturate(.62) hue-rotate(-6deg) contrast(.97); }
.pf-arene .pf-zone .bl-c { border-radius: 16px; }
/* les petites jauges : un tube de papier bordé d'encre */
.pf-arene .pf-zone :is(.bf-barre, .pe-duel, .ec-piste, .md-barre, .dm-barre, .bc-course .b, .bl-jauge, .ec-tempo, .bc-chrono) { border: 2.5px solid var(--j-encre); background-color: var(--j-papier-f); box-shadow: 1px 2px 0 var(--j-encre); }
.pf-arene .pf-zone :is(.ec-piste .f, .md-barre b, .bl-jauge i, .ec-tempo i, .bc-chrono i) { box-shadow: none; }
.pf-arene .pf-zone .ec-piste .f { background: linear-gradient(90deg, var(--j-canard), var(--j-rose)); }
.pf-arene .pf-zone .md-barre b { background: linear-gradient(90deg, var(--j-rose), var(--j-or)); }
.pf-arene .pf-zone .bl-jauge i { background: linear-gradient(90deg, var(--j-canard), var(--j-or)); }
.pf-arene .pf-zone :is(.ec-tempo i, .bc-chrono i) { background: var(--j-or); }
.pf-arene .pf-zone .bc-chrono i.presse { background: var(--j-brique); box-shadow: none; }
.pf-arene .pf-zone :is(.bf-barre i, .ec-piste .m, .md-barre s) { background: var(--j-encre); box-shadow: 0 0 0 2px var(--j-creme); }
/* les chronos : à l'encre, en chiffres ronds ; pressés : rouge brique qui bat (pas de lueur) */
.pf-arene .pf-zone :is(.gf-clock, .tq-clock, .mo-chrono, .pe-tps) { color: var(--j-encre); text-shadow: none; font-family: var(--j-rond); font-weight: 900; }
.pf-arene .pf-zone .mo-chrono { color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; text-shadow: 1.5px 1.5px 0 var(--j-encre); }
.pf-arene .pf-zone :is(.gf-clock.presse, .tq-clock.presse, .pe-tps.urgent) { color: var(--j-brique); text-shadow: none; }
.pf-arene .pf-zone :is(.mo-chrono.presse, .bo-tps.presse, .bl-tps.presse, .fi-tps.presse) { color: #F0B4A0; }
/* les gros boutons des jeux : couleur passée pleine + bande d'ombre, trait d'encre épais, mot crème bordé d'encre, ombre décalée */
.pf-arene .pf-zone :is(.bf-bouton, .cn-btns button, .dm-mode, .ec-depart button) {
  border: 3.5px solid var(--j-encre); color: var(--j-creme); font-family: var(--j-rond); font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  -webkit-text-stroke: 3.5px var(--j-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--j-encre);
  background: linear-gradient(180deg, var(--j-rose) 0%, var(--j-rose) 62%, var(--j-rose-f) 62.5%, var(--j-rose-f) 100%); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 5px 7px 0 var(--j-encre); }

/* (le reflet bleu que le navigateur pose sur une case touchée : rangé, le jeu montre déjà le coup joué) */
.pf-arene .pf-zone :is(.p4-col, .ot-c, .dm-c, .bn-c, .rd-g button, .mo-k, .pa-c, .mm-grille, .gf-plateau, .tq-plateau, .tq-p, .ec-pad, .fi-c, .bo-c, .to-c, .bl-c, .hp-c, .md-c) { -webkit-tap-highlight-color: transparent; }

/* --- Puissance 4 : un plateau de bois peint bleu canard, des trous cerclés d'encre, des pions d'encre --- */
.pf-arene .pf-zone .p4-plateau { background: linear-gradient(180deg, var(--j-canard) 0 70%, var(--j-canard-f) 70.5%); box-shadow: inset 0 0 0 3px rgba(250, 240, 214, .25), 5px 6px 0 var(--j-encre); }
.pf-arene.boss .pf-zone .p4-plateau { background: linear-gradient(180deg, var(--j-brique) 0 70%, var(--j-brique-f) 70.5%); }
.pf-arene .pf-zone .p4-case { background: #1F2E30; box-shadow: inset 0 0 0 2.5px var(--j-encre), inset 3px 4px 0 rgba(0, 0, 0, .45); }
.pf-arene .pf-zone .p4-col:hover { background: rgba(251, 244, 226, .12); }
.pf-arene .pf-zone .p4-pion { box-shadow: inset 0 0 0 2.5px var(--j-encre); }
.pf-arene .pf-zone .p4-pion.j { background: radial-gradient(circle at 34% 30%, #F4CDBF 0 16%, var(--j-rose) 18% 64%, var(--j-rose-f) 66%); }
.pf-arene .pf-zone .p4-deux .p4-pion.a { background: radial-gradient(circle at 34% 30%, #D8E6E3 0 16%, #7FAFB0 18% 64%, var(--j-canard-f) 66%); }
.pf-arene .pf-zone .p4-pion.gagne { box-shadow: inset 0 0 0 2.5px var(--j-encre), 0 0 0 3px var(--j-or); }

/* --- Bras de fer : la table et les bras gardent leur dessin ; le gros bouton devient un bouton de dessin animé --- */
.pf-arene .pf-zone .bf-barre { background: linear-gradient(90deg, var(--j-rose) 0 50%, var(--j-canard) 50% 100%); }
.pf-arene .pf-zone .bf-bouton { border-radius: 50%; font-size: 1.75rem; }
.pf-arene .pf-zone .bf-bouton.appui { transform: translate(3px, 5px); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 1px 2px 0 var(--j-encre); }
.pf-arene .pf-zone .bf-bouton.double { background: linear-gradient(180deg, var(--j-or) 0 62%, var(--j-or-f) 62.5%); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .35), 0 0 0 4px var(--j-creme), 5px 7px 0 var(--j-encre); }
.pf-arene .pf-zone .bf-bouton.double.appui { box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 0 0 0 4px var(--j-creme), 1px 2px 0 var(--j-encre); }
.pf-arene .pf-zone .bf-bouton:disabled { filter: grayscale(.5); opacity: .75; }
.pf-arene .pf-zone .bf-stats { gap: .8rem; font-size: .9rem; opacity: 1; }

/* --- Mots mêlés : une feuille de papier, les lettres à l'encre --- */
.pf-arene .pf-zone .mm-grille { border: 3px solid var(--j-encre); background: linear-gradient(180deg, var(--j-papier), var(--j-papier-2)); color: var(--j-encre); box-shadow: inset 0 0 0 4px var(--j-papier), inset 0 0 0 6px rgba(95, 143, 150, .7), 5px 6px 0 var(--j-encre); }
.pf-arene.boss .pf-zone .mm-grille { box-shadow: inset 0 0 0 4px var(--j-papier), inset 0 0 0 6px rgba(176, 74, 52, .75), 5px 6px 0 var(--j-encre); }
.pf-arene .pf-zone .mm-l { font-family: var(--j-rond); font-weight: 900; }
.pf-arene .pf-zone .mm-l.sel { background: rgba(213, 141, 120, .5); box-shadow: inset 0 0 0 2px var(--j-encre); }
.pf-arene .pf-zone .mm-score .moi { color: #F2B7A6; }
.pf-arene .pf-zone .mm-liste span.moi { background: var(--j-rose); color: var(--j-encre); }

/* --- Les paires : des cartes de papier (dos bleu canard à motif), un trait d'encre --- */
.pf-arene .pf-zone .pa-score span.tour { background: linear-gradient(180deg, #F2C9BB 0 64%, var(--j-rose) 64.5%); box-shadow: 0 0 0 2px var(--j-creme), var(--j-ombre-p); }
.pf-arene .pf-zone .pa-score span.lui.tour { background: linear-gradient(180deg, #C9DCDA 0 64%, #8FB2B3 64.5%); }
.pf-arene.boss .pf-zone .pa-score span.lui.tour { background: linear-gradient(180deg, #E5B3A5 0 64%, var(--j-brique) 64.5%); }
.pf-arene .pf-zone .pa-f { border: 2.5px solid var(--j-encre); box-shadow: 2px 3px 0 var(--j-encre); }
.pf-arene .pf-zone .pa-dos { background: radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(251, 244, 226, .2) 23% 27%, transparent 28%), repeating-linear-gradient(45deg, rgba(251, 244, 226, .14) 0 4px, transparent 4px 10px), linear-gradient(180deg, var(--j-canard), var(--j-canard-f)); border: 2.5px solid var(--j-encre); }
.pf-arene.boss .pf-zone .pa-dos { background: radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(251, 244, 226, .2) 23% 27%, transparent 28%), repeating-linear-gradient(45deg, rgba(251, 244, 226, .12) 0 4px, transparent 4px 10px), linear-gradient(180deg, var(--j-brique), var(--j-brique-f)); }
.pf-arene .pf-zone .pa-dos::after { opacity: .25; }
.pf-arene .pf-zone .pa-face { border: 2.5px solid var(--j-encre); }
.pf-arene .pf-zone .pa-c.prise.moi .pa-face { box-shadow: 0 0 0 3px var(--j-rose), 2px 3px 0 var(--j-encre); }
.pf-arene .pf-zone .pa-c.prise.lui .pa-face { box-shadow: 0 0 0 3px var(--j-canard), 2px 3px 0 var(--j-encre); }
.pf-arene.boss .pf-zone .pa-c.prise.lui .pa-face { box-shadow: 0 0 0 3px var(--j-brique), 2px 3px 0 var(--j-encre); }

/* --- Course de nage : le bassin d'encre de mer, les deux gros boutons Gauche / Droite --- */
.pf-arene .pf-zone .cn-bassin { border-radius: 18px; }
.pf-arene .pf-zone .cn-ligne { background: repeating-linear-gradient(90deg, var(--j-rose) 0 10px, var(--j-creme) 10px 20px); opacity: .7; }
.pf-arene .pf-zone .cn-arrivee { background: repeating-linear-gradient(180deg, var(--j-creme) 0 8px, var(--j-encre) 8px 16px); box-shadow: 0 0 0 1.5px var(--j-encre); }
.pf-arene .pf-zone .cn-btns button { border-radius: 24px; font-size: 1.25rem; }
.pf-arene .pf-zone .cn-btns button.d { background: linear-gradient(180deg, var(--j-canard) 0%, var(--j-canard) 62%, var(--j-canard-f) 62.5%, var(--j-canard-f) 100%); }
.pf-arene .pf-zone .cn-btns button:active, .pf-arene .pf-zone .cn-btns button.appui, .pf-arene .pf-zone .cn-btns button.d.appui { transform: translate(3px, 5px); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 1px 2px 0 var(--j-encre); }
.pf-arene .pf-zone .cn-btns button.attendu { outline: 4px solid var(--j-creme); outline-offset: 2px; }
.pf-arene .cn-double .pf-zone .cn-btns button, .pf-arene .pf-zone.cn-double .cn-btns button, .pf-arene .cn-double .cn-btns button { box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .35), 0 0 0 4px var(--j-or), 5px 7px 0 var(--j-encre); }

/* --- Pêche aux perles : la barre des scores en étiquette de papier --- */
.pf-arene .pf-zone .pe-hud .qui.moi b { color: var(--j-rose-f); }
.pf-arene .pf-zone .pe-hud .qui .nom { opacity: 1; font-weight: 800; color: var(--dv-encre-2, #3F3224); }
.pf-arene .pf-zone .pe-hud .qui img { box-shadow: 0 0 0 2.5px var(--j-encre); }
.pf-arene .pf-zone .pe-vies i { filter: none; }
.pf-arene .pf-zone .pe-duel .dm { background: linear-gradient(90deg, var(--j-rose), #E9B3A3); }

/* --- Bataille navale : grilles d'encre de mer, bateaux de métal peint, les deux boutons qui tiennent dans l'écran --- */
.pf-arene .pf-zone .bn-g { border-radius: 12px; }
.pf-arene .pf-zone .bn-c { background: rgba(251, 244, 226, .12); box-shadow: inset 0 0 0 1px rgba(30, 23, 18, .5); font-family: var(--j-rond); font-weight: 900; }
.pf-arene .pf-zone .bn-c.bateau { background: linear-gradient(180deg, #D9CFB8 0 55%, #A89C82 56%); box-shadow: inset 0 0 0 1.5px var(--j-encre); }
.pf-arene .pf-zone .bn-c.touche { background: radial-gradient(circle, #F1D58A 0 22%, var(--j-corail) 24% 62%, var(--j-brique-f) 64%); box-shadow: inset 0 0 0 1.5px var(--j-encre); }
.pf-arene .pf-zone .bn-c.coule { background: linear-gradient(180deg, #4A2A24, #2A1612); box-shadow: inset 0 0 0 2px var(--j-brique); }
.pf-arene .pf-zone .bn-c.eau::after { background: var(--j-creme); box-shadow: 0 0 0 1.5px var(--j-encre); }
.pf-arene .pf-zone .bn-bas { max-width: 100%; }
.pf-arene .pf-zone .bn-bas > div:last-child { min-width: 0; }
.pf-arene .pf-zone .bn-bas > div:last-child > div { flex-wrap: wrap; }
:root .pf-arene.pf-arene.pf-arene .pf-zone.pf-zone .bn-bas .btn { min-height: 48px; padding: 0 .75rem; font-size: 14.5px !important; border-radius: 14px !important; }
.pf-arene .pf-zone .bn-txt { font-size: .8rem; -webkit-text-stroke-width: 2.5px; }

/* --- Le harpon : les manches en pastilles cerclées d'encre --- */
.pf-arene .pf-zone .hp-rang i { background: rgba(251, 244, 226, .25); box-shadow: inset 0 0 0 2px var(--j-encre); width: .9rem; height: .9rem; }
.pf-arene .pf-zone .hp-rang i.ok { background: var(--j-or); box-shadow: inset 0 0 0 2px var(--j-encre); }
.pf-arene .pf-zone .hp-rang i.non { background: var(--j-brique); }
.pf-arene .pf-zone .hp-rang.lui i.ok { background: var(--j-canard); box-shadow: inset 0 0 0 2px var(--j-encre); }
.pf-arene.boss .pf-zone .hp-rang.lui i.ok { background: var(--j-brique); box-shadow: inset 0 0 0 2px var(--j-encre); }

/* --- Mot mystère : des tuiles de papier, le clavier en touches de machine à écrire --- */
.pf-arene .pf-zone .mo { font-family: var(--j-rond); }
.pf-arene .pf-zone .mo-essais b { color: var(--j-canard-f); }
.pf-arene .pf-zone .mo-adv .nom { font-weight: 900; color: var(--j-encre); }
.pf-arene .pf-zone .mo-adv.trouve { box-shadow: 0 0 0 3px var(--j-or), var(--j-ombre-p); }
.pf-arene .pf-zone .mo-mini i { background: rgba(30, 23, 18, .15); }
.pf-arene .pf-zone .mo-mini i.b { background: var(--j-algue); box-shadow: none; }
.pf-arene .pf-zone .mo-mini i.p { background: var(--j-or); }
.pf-arene .pf-zone .mo-mini i.a { background: rgba(30, 23, 18, .4); }
.pf-arene .pf-zone .mo-l { border: 2.5px solid var(--j-encre); background: rgba(251, 244, 226, .92); color: var(--j-encre); font-family: var(--j-rond); font-weight: 900; box-shadow: 2px 3px 0 var(--j-encre); }
.pf-arene .pf-zone .mo-l.tape { border-color: var(--j-encre); background: var(--j-papier); }
.pf-arene .pf-zone .mo-l.fixe { border-color: var(--j-encre); color: var(--j-canard-f); }
.pf-arene .pf-zone .mo-l.fantome { color: rgba(30, 23, 18, .3); }
.pf-arene .pf-zone .mo-l.b { background: var(--j-algue); border-color: var(--j-encre); color: var(--j-creme); box-shadow: 2px 3px 0 var(--j-encre); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; }
.pf-arene .pf-zone .mo-l.p { background: var(--j-or); border-color: var(--j-encre); color: var(--j-encre); }
.pf-arene .pf-zone .mo-l.a { background: #6E6458; border-color: var(--j-encre); color: rgba(251, 244, 226, .6); }
.pf-arene .pf-zone .mo-r.cur .mo-l { border-color: var(--j-encre); box-shadow: 2px 3px 0 var(--j-encre), 0 0 0 2px var(--j-or); }
.pf-arene .pf-zone .mo-k { border: 2px solid var(--j-encre); background: var(--j-papier); color: var(--j-encre); font-family: var(--j-rond); font-weight: 900; box-shadow: 0 3px 0 var(--j-encre); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pf-arene .pf-zone .mo-k.appui { background: var(--j-papier-f); color: var(--j-encre); box-shadow: 0 1px 0 var(--j-encre); }
.pf-arene .pf-zone .mo-k.ok { background: var(--j-rose); color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; }
.pf-arene .pf-zone .mo-k.b { background: var(--j-algue); color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; }
.pf-arene .pf-zone .mo-k.p { background: var(--j-or); color: var(--j-encre); }
.pf-arene .pf-zone .mo-k.a { background: #6E6458; color: rgba(251, 244, 226, .55); }
.pf-arene.chef-niv .pf-zone .mo-l, .pf-arene .chef-niv .mo-l { background: rgba(234, 215, 175, .9); }
.pf-arene.boss .pf-zone .mo-l.fixe { color: var(--j-brique); }
.pf-arene.boss .pf-zone .mo-k, .pf-arene.chef-niv .pf-zone .mo-k { background: #E9D2C2; }
.pf-arene.boss .pf-zone .mo-k.ok, .pf-arene.chef-niv .pf-zone .mo-k.ok { background: var(--j-brique); }
.pf-arene .pf-zone .mo-info.err { color: #F0B4A0; }
.pf-arene .pf-zone .mo-info.gagne { color: var(--j-or); }

/* --- L'écho de l'orque : quatre tampons peints, cerclés d'encre --- */
.pf-arene .pf-zone .ec-haut b { color: var(--j-encre); }
.pf-arene .pf-zone .ec-haut .moi, .pf-arene .pf-zone .ec-haut .lui { color: var(--j-encre); }
.pf-arene .pf-zone .ec-pad .coeur { border: 3px solid var(--j-encre); background: radial-gradient(circle at 50% 35%, rgba(251, 244, 226, .14), rgba(0, 0, 0, .2)), color-mix(in srgb, var(--c) 22%, #2E4749); box-shadow: 3px 4px 0 var(--j-encre); }
.pf-arene .pf-zone .ec-pad svg { filter: saturate(.75) sepia(.15) drop-shadow(2px 2px 0 var(--j-encre)); opacity: .92; }
.pf-arene .pf-zone .ec-pad.on .coeur { background: radial-gradient(circle at 50% 40%, var(--j-papier) 0 18%, var(--c) 40%, color-mix(in srgb, var(--c) 60%, var(--j-encre)) 100%); box-shadow: 0 0 0 4px var(--j-creme), 3px 4px 0 var(--j-encre); }
.pf-arene .pf-zone .ec-pad.on svg { filter: drop-shadow(2px 2px 0 var(--j-encre)); }
.pf-arene .pf-zone .ec-pad.on::after { border-color: var(--j-creme); }
.pf-arene .pf-zone .ec-pad.faux .coeur { background: radial-gradient(circle, var(--j-brique), var(--j-brique-f)); box-shadow: 3px 4px 0 var(--j-encre); }
.pf-arene .pf-zone .ec-depart { background: rgba(30, 23, 18, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pf-arene .pf-zone .ec-depart button { border-radius: 18px; font-size: 1.05rem; animation: none; }
.pf-arene .pf-zone .ec-info.chante { color: #BFE0DC; }
.pf-arene .pf-zone .ec-info.atoi { color: var(--j-or); }

/* --- La grande fusion : les tuiles en jetons peints cerclés d'encre --- */
.pf-arene .pf-zone .gf-score { color: var(--j-encre); }
.pf-arene .pf-zone .gf-score small { color: var(--j-canard-f); font-weight: 900; }
.pf-arene .pf-zone :is(.gf-av, .tq-av) { box-shadow: 0 0 0 2.5px var(--j-encre); background: var(--j-papier-f); }
.pf-arene .pf-zone :is(.gf-adv, .tq-adv) b { font-weight: 900; }
.pf-arene .pf-zone :is(.gf-adv, .tq-adv) small { font-weight: 800; opacity: 1; color: var(--dv-encre-2, #3F3224); }
.pf-arene .pf-zone :is(.gf-barre, .tq-barre) { background: rgba(30, 23, 18, .15); height: 5px; }
.pf-arene .pf-zone :is(.gf-barre, .tq-barre) i { background: linear-gradient(90deg, var(--j-canard), var(--j-rose)); }
.pf-arene.boss .pf-zone :is(.gf-barre, .tq-barre) i { background: linear-gradient(90deg, var(--j-brique), var(--j-corail)); }
.pf-arene .pf-zone .gf-case { background: rgba(251, 244, 226, .08); box-shadow: inset 0 0 0 1.5px rgba(30, 23, 18, .45); }
.pf-arene .pf-zone .gf-t { box-shadow: inset 0 0 0 2.5px var(--j-encre), 2px 3px 0 var(--j-encre); }
.pf-arene .pf-zone .gf-t .bete { filter: drop-shadow(1.5px 1.5px 0 rgba(30, 23, 18, .6)); }
.pf-arene .pf-zone .gf-t .gf-nom { font-family: var(--j-rond); font-weight: 900; }
.pf-arene .pf-zone .gf-t.p9 { box-shadow: inset 0 0 0 2.5px var(--j-encre), 0 0 0 2.5px var(--j-brique), 2px 3px 0 var(--j-encre); }
.pf-arene .pf-zone .gf-t.p10 { box-shadow: inset 0 0 0 2.5px var(--j-encre), 0 0 0 3px var(--j-or), 2px 3px 0 var(--j-encre); animation: none; }
.pf-arene .pf-zone .gf-roc { background: #4A443C; box-shadow: inset 0 0 0 2.5px var(--j-encre), inset 0 4px 0 rgba(251, 244, 226, .1); }
.pf-arene .pf-zone .gf-chaine span { background: rgba(251, 244, 226, .2); box-shadow: inset 0 0 0 1.5px var(--j-encre); }
.pf-arene .pf-zone .gf-chaine span.but { box-shadow: inset 0 0 0 1.5px var(--j-encre), 0 0 0 2.5px var(--j-or); }
.pf-arene .pf-zone .gf-chaine span.adv { box-shadow: inset 0 0 0 1.5px var(--j-encre), 0 0 0 2.5px var(--j-canard); }
.pf-arene.boss .pf-zone .gf-chaine span.adv { box-shadow: inset 0 0 0 1.5px var(--j-encre), 0 0 0 2.5px var(--j-brique); }

/* --- La nuée de méduses : les vies en cœurs cerclés --- */
.pf-arene .pf-zone .md-vies i { background: var(--j-rose); filter: drop-shadow(1px 0 0 var(--j-encre)) drop-shadow(-1px 0 0 var(--j-encre)) drop-shadow(0 1px 0 var(--j-encre)) drop-shadow(0 -1px 0 var(--j-encre)); }
.pf-arene .pf-zone .md-vies i.perdu { background: rgba(251, 244, 226, .35); }

/* --- Taquin : le plateau d'encre, les pièces cerclées, le modèle dans un cadre de papier --- */
.pf-arene .pf-zone .tq-clock { color: var(--j-encre); }
.pf-arene .pf-zone .tq-modele { border: 2.5px solid var(--j-encre); box-shadow: var(--j-ombre-p); background-color: var(--j-papier-f); color: var(--j-encre); }
.pf-arene .pf-zone .tq-p { box-shadow: inset 0 0 0 2px var(--j-encre), 2px 3px 0 rgba(30, 23, 18, .7); }
.pf-arene .pf-zone .tq-p.ok { box-shadow: inset 0 0 0 2px var(--j-encre), inset 0 0 0 4px rgba(127, 143, 80, .8), 2px 3px 0 rgba(30, 23, 18, .7); }
.pf-arene .pf-zone .tq-p i { background: var(--j-papier); color: var(--j-encre); box-shadow: 0 0 0 1.5px var(--j-encre); font-family: var(--j-rond); font-weight: 900; }
.pf-arene .pf-zone .tq-trou { background: rgba(30, 23, 18, .45); box-shadow: inset 3px 4px 0 rgba(0, 0, 0, .35); }

/* --- Le radar : la carte au trésor, en papier ; la case trouvée en coffre d'or --- */
.pf-arene .pf-zone .rd-g { border: 3px solid var(--j-encre); background: linear-gradient(180deg, #EAD7AF, #D9BF8C); box-shadow: inset 0 0 0 4px rgba(251, 244, 226, .6), 5px 6px 0 var(--j-encre); }
.pf-arene.boss .pf-zone .rd-g { background: linear-gradient(180deg, #8A6E58, #5E4A3A); }
.pf-arene .pf-zone .rd-g button { background: rgba(251, 244, 226, .55); box-shadow: inset 0 0 0 1.5px rgba(30, 23, 18, .55), inset 0 -3px 0 rgba(30, 23, 18, .15); color: var(--j-encre); font-family: var(--j-rond); font-weight: 900; }
.pf-arene .pf-zone .rd-g button.t { color: var(--j-creme); -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; box-shadow: inset 0 0 0 2px var(--j-encre), inset 0 -3px 0 rgba(30, 23, 18, .2); }
.pf-arene .pf-zone .rd-mini i.t { color: var(--j-creme); }
.pf-arene .pf-zone .rd-g button.ok { background: radial-gradient(circle, #F6E7B8, var(--j-or)); box-shadow: inset 0 0 0 2.5px var(--j-encre); }
.pf-arene .pf-zone .rd-g button.ok::after { background: #8C5A33; box-shadow: inset 0 3px 0 var(--j-or), 0 0 0 1.5px var(--j-encre); }
.pf-arene .pf-zone .rd-tour.moi { background: linear-gradient(180deg, #F2C9BB 0 64%, var(--j-rose) 64.5%); box-shadow: 0 0 0 2px var(--j-creme), var(--j-ombre-p); }
.pf-arene .pf-zone .rd-mini { border: 2px solid var(--j-encre); background: #2E4749; }
.pf-arene .pf-zone .rd-lui { color: var(--j-creme); font-family: var(--j-rond); font-weight: 900; -webkit-text-stroke: 3px var(--j-encre); paint-order: stroke fill; }
.pf-arene .pf-zone .rd-lui :is(.rd-mini, .rd-tour) { -webkit-text-stroke: 0; }

/* --- Othello : un plateau d'encre de mer, des pions d'encre et de nacre cerclés --- */
.pf-arene .pf-zone .ot-j { color: var(--j-encre); font-weight: 900; }
.pf-arene .pf-zone .ot-j .av { box-shadow: 0 0 0 2px var(--j-encre); background: var(--j-papier-f); }
.pf-arene .pf-zone .ot-j .pion { box-shadow: 0 0 0 2px var(--j-encre) !important; }
.pf-arene .pf-zone .ot-j.moi .pion { background: radial-gradient(circle at 34% 30%, #6A5E52 0 14%, #2A211A 16%); }
.pf-arene .pf-zone .ot-j.lui .pion { background: radial-gradient(circle at 34% 30%, #FFFFFF 0 14%, var(--j-papier) 16% 60%, #D9C9A8); }
.pf-arene .pf-zone .ot-j.actif { box-shadow: 0 0 0 3px var(--j-or), var(--j-ombre-p); }
.pf-arene.boss .pf-zone .ot-j.actif { box-shadow: 0 0 0 3px var(--j-brique), var(--j-ombre-p); }
.pf-arene .pf-zone .ot-c { background: rgba(251, 244, 226, .08); box-shadow: inset 0 0 0 1.5px rgba(30, 23, 18, .5); }
.pf-arene .pf-zone .ot-c.ok::after { background: var(--j-or); box-shadow: 0 0 0 2px var(--j-encre); }
.pf-arene.boss .pf-zone .ot-c.ok::after { background: var(--j-rose); box-shadow: 0 0 0 2px var(--j-encre); }
.pf-arene .pf-zone .ot-c.dernier::before { box-shadow: 0 0 0 2.5px var(--j-or); }
.pf-arene .pf-zone .ot-d .f1 { background: radial-gradient(circle at 34% 30%, #6A5E52 0 12%, #2A211A 14% 100%); box-shadow: inset 0 0 0 2px var(--j-encre), 1px 2px 0 rgba(0, 0, 0, .6); }
.pf-arene .pf-zone .ot-d .f2 { background: radial-gradient(circle at 34% 30%, #FFFFFF 0 12%, var(--j-papier) 14% 62%, #D9C9A8 100%); box-shadow: inset 0 0 0 2px var(--j-encre), 1px 2px 0 rgba(0, 0, 0, .55); }
.pf-arene .pf-zone .ot-d .f2::after { opacity: .5; }
.pf-arene .pf-zone .ot-bulle { border-color: var(--j-creme); }

/* --- Démineur des abysses : les cases de papier sombre, les chiffres en couleurs passées, le bouton Sonder / Bouée --- */
.pf-arene .pf-zone .dm-ligne .av { box-shadow: 0 0 0 2px var(--j-encre); background: var(--j-papier-f); }
.pf-arene .pf-zone .dm-ligne.moi .dm-barre i { background: linear-gradient(90deg, var(--j-canard), #8FB2B3); box-shadow: none; }
.pf-arene .pf-zone .dm-ligne.lui .dm-barre i { background: linear-gradient(90deg, var(--j-or), var(--j-corail)); box-shadow: none; }
.pf-arene.boss .pf-zone .dm-ligne.lui .dm-barre i { background: linear-gradient(90deg, var(--j-brique), var(--j-rose)); }
.pf-arene .pf-zone .dm-c { background: #3F5B5C; box-shadow: inset 0 0 0 1.5px var(--j-encre), inset 0 3px 0 rgba(251, 244, 226, .14), inset 0 -3px 0 rgba(0, 0, 0, .3); font-family: var(--j-rond); font-weight: 900; }
.pf-arene .pf-zone .dm-c.r { background: #E9DCC0; box-shadow: inset 0 0 0 1px rgba(30, 23, 18, .35); }
.pf-arene.boss .pf-zone .dm-c.r { background: #E7CDBF; }
.pf-arene .pf-zone .dm-c[data-n] { text-shadow: none !important; }
.pf-arene .pf-zone .dm-c[data-n="1"] { color: #3F6E78; }
.pf-arene .pf-zone .dm-c[data-n="2"] { color: #5A673A; }
.pf-arene .pf-zone .dm-c[data-n="3"] { color: #B04A34; }
.pf-arene .pf-zone .dm-c[data-n="4"] { color: #5A3F7A; }
.pf-arene .pf-zone .dm-c[data-n="5"] { color: #823322; }
.pf-arene .pf-zone :is(.dm-c[data-n="6"], .dm-c[data-n="7"], .dm-c[data-n="8"]) { color: #1E1712; }
.pf-arene .pf-zone .dm-c.f { background: #E6B9A6; box-shadow: inset 0 0 0 1.5px var(--j-encre); }
.pf-arene .pf-zone .dm-c.m { background: #4A2A24; }
.pf-arene .pf-zone .dm-c.boum { background: radial-gradient(circle, #F6E7B8, var(--j-or) 30%, var(--j-brique) 60%, var(--j-brique-f)); }
.pf-arene .pf-zone .dm-chip { color: var(--j-encre); }
.pf-arene .pf-zone .dm-mode { height: 3rem; border-radius: 16px; font-size: .95rem; background: linear-gradient(180deg, var(--j-canard) 0%, var(--j-canard) 62%, var(--j-canard-f) 62.5%, var(--j-canard-f) 100%); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 3px 4px 0 var(--j-encre); }
.pf-arene .pf-zone .dm-mode.drapeau { background: linear-gradient(180deg, var(--j-rose) 0%, var(--j-rose) 62%, var(--j-rose-f) 62.5%, var(--j-rose-f) 100%); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 3px 4px 0 var(--j-encre); }
.pf-arene .pf-zone .dm-mode:active, .pf-arene .pf-zone .dm-mode.drapeau:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--j-encre); }
.pf-arene .pf-zone .dm-mode span { -webkit-text-stroke: 0; }

/* --- Le banc fantôme : la course en tubes de papier --- */
.pf-arene .pf-zone .bc-course .moi i { background: linear-gradient(90deg, var(--j-canard), var(--j-rose)); box-shadow: none; }
.pf-arene .pf-zone .bc-course .lui i { box-shadow: none; }
.pf-arene .pf-zone .bc-cadre.ok { animation: jx-bc-ok .45s; }
.pf-arene .pf-zone .bc-cadre.ko { animation: jx-bc-ko .45s; }
@keyframes jx-bc-ok { 30% { box-shadow: inset 0 0 0 3px var(--j-algue), 0 0 0 5px var(--j-algue), 5px 6px 0 var(--j-encre); } }
@keyframes jx-bc-ko { 30% { box-shadow: inset 0 0 0 3px var(--j-brique), 0 0 0 5px var(--j-brique), 5px 6px 0 var(--j-encre); } }

/* --- Le grand bocal, le récif à blocs, la tour de corail, les fioles : les étiquettes du haut, le bouton Retour --- */
.pf-arene .pf-zone .bo-but svg { filter: drop-shadow(1px 1px 0 var(--j-encre)); }
.pf-arene .pf-zone .to-et b, .pf-arene .pf-zone .bl-sc b, .pf-arene .pf-zone .fi-ok b { color: var(--j-encre); }
.pf-arene .pf-zone .to-combo { color: var(--j-or); }
.pf-arene .pf-zone .fi-bas button { min-height: 44px; padding: 0 1rem; border: 2.5px solid var(--j-encre); border-radius: 14px; background: var(--j-papier); color: var(--j-encre); font: 900 .9rem var(--j-rond); box-shadow: var(--j-ombre-p); }
.pf-arene .pf-zone .fi-bas button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--j-encre); }
.pf-arene .pf-zone .fi-bas button:disabled { opacity: .45; }