/* =====================================================================================================
   DESIGN SYSTEM « ANTIQUE » — UNE seule peau pour TOUTES les interfaces (Simon 2026-10-21 : « finir toutes les
   nouvelles interfaces avec le design antique : boutique, paramètres, etc. Boutons, éléments, notifications… »
   puis « les coffres, coffres mystères, loots mystères… et les pop-up “ouvrir l'écran des matchs” n'ont pas le
   nouveau design »).
   -----------------------------------------------------------------------------------------------------
   Chargée TOUT EN DERNIER (après css/cite-engloutie.css, dont elle réutilise les jetons --gc-* : marbre ivoire,
   méandre doré, bronze patiné, polices Cinzel / Pixelify Sans). Elle ÉTEND la peau « cité engloutie » (accueil,
   boutique, écran de mort) à tout le reste : options, HUD (classement, barre d'XP, compteurs, boutons système,
   améliorations, mini-carte, grande carte), atelier #atj-up, quêtes, notifications / popups (famille --pn-*),
   bulles d'interaction (écran des matchs, armateur), coffres / caisses « ? », écran de chargement.
   Rien n'est retiré : seuls les COULEURS, contours, rayons, ombres et polices changent (ids / handlers intacts).

   SOMMAIRE
     1. JETONS  (--an-* ; remappe --ar-* et --pn-* pour que les 10 couches arcade héritent de la peau antique)
     2. COMPOSANTS réutilisables .an-* : bouton (primaire / ori / secondaire / icône), onglet, carte, panneau,
        champ, interrupteur, badge, barre de progression, infobulle, bannière/toast
     3. ADOPTION : chaque interface existante est rattachée à ces composants (listes de sélecteurs)
     4. Accessibilité (focus visible, cibles ≥ 44 px, reduced-motion) et petits écrans

   Contrastes (WCAG AA ≥ 4,5:1) : encre #2f2619 sur marbre #fbf7ee 14:1 ; #5a4a36 sur marbre 7:1 ; blanc sur
   bronze #2b7a6e 5,2:1 ; blanc sur corail #a8321f 6,8:1 ; encre #3b2a00 sur orichalque #e3b85a 8:1 ;
   or sombre #7a4e00 sur marbre 6,6:1 ; vert-de-gris #1f6a5e sur marbre 6,3:1 ; vert #2d6b2a sur marbre 6:1.
   ===================================================================================================== */

/* ---------- 1. JETONS ---------- */
html body.ui-arcade {
  --an-marble: var(--gc-card);           /* plaque de marbre lisse */
  --an-marble-2: var(--gc-card-2);       /* pilules, onglets au repos */
  --an-ink: var(--gc-text);              /* texte gravé */
  --an-ink-dim: var(--gc-text-dim);      /* texte secondaire */
  --an-line: var(--gc-ink);              /* contours */
  --an-ori: #e3b85a;                     /* orichalque pastel (fonds de bouton / pastille) */
  --an-ori-ink: #3b2a00;                 /* encre sur orichalque */
  --an-ori-d: #7a4e00;                   /* orichalque sombre (TEXTE et filets sur marbre) */
  --an-teal: var(--gc-btn);              /* bronze patiné (bouton principal) */
  --an-teal-d: var(--gc-btn-d);
  --an-teal-text: #1f6a5e;               /* texte vert-de-gris sur marbre */
  --an-coral: #a8321f;                   /* corail / terre cuite (danger, fermer) */
  --an-coral-d: #5e1b10;
  --an-sage: #3f7f3a;                    /* vert-de-gris végétal (ok) */
  --an-sage-d: #1f4a1d;
  --an-sage-text: #2d6b2a;
  --an-r: 3px;                           /* pierre taillée : angles vifs */
  --an-r-lg: 4px;
  --an-bw: 3px;
  --an-shadow: 0 3px 0 rgba(58, 47, 34, .65), 0 8px 14px rgba(6, 26, 30, .26);
  --an-shadow-lg: 0 5px 0 rgba(58, 47, 34, .7), 0 16px 32px rgba(6, 26, 30, .38);
  --an-plate: var(--gc-marble) 0 0 / 360px 180px, var(--gc-polish);                       /* marbre veiné */
  --an-plate-m: var(--gc-meander) bottom left / 12px 12px repeat-x, var(--gc-marble) 0 0 / 360px 180px, var(--gc-polish); /* + méandre fin en bas */
  --an-window: var(--gc-meander) top left / 18px 18px repeat-x, var(--gc-meander) bottom left / 18px 18px repeat-x, var(--gc-marble) 0 0 / 360px 180px, var(--gc-polish);
  --an-font-title: var(--gc-title);      /* Cinzel : titres gravés */
  --an-font-num: var(--gc-pixel);        /* Pixelify Sans : chiffres */
  --an-focus: 3px solid #0f4f8a;

  /* les couches arcade lisent --ar-* : on les remappe sur l'antique, pour TOUT le jeu (comme déjà fait dans #menu / boutique / mort) */
  --ar-cream: var(--an-marble);
  --ar-ink: var(--an-line);
  --ar-ink-2: var(--an-ori-ink);
  --ar-yellow: var(--an-ori);
  --ar-orange: #a8431f; --ar-orange-d: #5e2410;
  --ar-blue: var(--an-teal); --ar-blue-d: var(--an-teal-d);
  --ar-green: var(--an-sage); --ar-green-d: var(--an-sage-d);
  --ar-red: var(--an-coral);

  /* famille de notifications (css/popup-queue.css) : marbre ivoire au lieu de la carte marine */
  --pn-bg: var(--an-marble);
  --pn-ink: var(--an-line);
  --pn-text: var(--an-ink);
  --pn-dim: var(--an-ink-dim);
  --pn-info: var(--an-teal-text);
  --pn-gain: var(--an-ori-d);
  --pn-warn: var(--an-coral);
  --pn-ok: var(--an-sage-text);
  --pn-r: var(--an-r); --pn-r-lg: var(--an-r-lg);
  --pn-shadow: var(--an-shadow); --pn-shadow-lg: var(--an-shadow-lg);
  --pn-btn-bg: var(--an-ori); --pn-btn-ink: var(--an-ori-ink);
}

/* ---------- 2. COMPOSANTS (classes réutilisables pour tout futur écran) ---------- */
/* bouton primaire : bronze patiné qui s'enfonce */
.an-btn, .an-btn--ori, .an-btn--ghost, .an-btn--icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-height: 44px; min-width: 44px; padding: 8px 18px; margin: 0; cursor: pointer;
  border: var(--an-bw) solid var(--an-line); border-radius: var(--an-r); font-family: var(--an-font-title); font-weight: 900; letter-spacing: .05em;
  font-size: 15px; line-height: 1.15; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: var(--an-teal); color: #fff; box-shadow: var(--gc-bevel), 0 4px 0 var(--an-teal-d); text-shadow: 0 2px 0 var(--an-teal-d);
  transition: transform .08s, box-shadow .08s;
}
.an-btn:active, .an-btn--ori:active, .an-btn--icon:active { transform: translateY(3px); box-shadow: var(--gc-bevel), 0 1px 0 var(--an-teal-d); }
.an-btn--ori { background: var(--an-ori); color: var(--an-ori-ink); text-shadow: none; box-shadow: var(--gc-bevel), 0 4px 0 var(--an-ori-d); }
.an-btn--ori:active { box-shadow: var(--gc-bevel), 0 1px 0 var(--an-ori-d); }
.an-btn--ghost { background: var(--an-marble-2); color: var(--an-ink); text-shadow: none; box-shadow: var(--gc-carved), 0 3px 0 var(--an-line); }
.an-btn--ghost:active { transform: translateY(2px); box-shadow: var(--gc-carved), 0 1px 0 var(--an-line); }
.an-btn--icon { padding: 0; width: 44px; height: 44px; font-size: 20px; letter-spacing: 0; }
.an-btn[disabled], .an-btn--ori[disabled], .an-btn--ghost[disabled] { opacity: .5; cursor: default; }
/* onglet */
.an-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 16px; box-sizing: border-box; cursor: pointer;
  background: var(--an-marble-2); color: var(--an-ink); border: var(--an-bw) solid var(--an-line); border-radius: var(--an-r);
  box-shadow: var(--gc-carved), 0 3px 0 var(--an-line); font-family: var(--an-font-title); font-weight: 900; letter-spacing: .05em; font-size: 14px; }
.an-tab.is-active, .an-tab[aria-selected="true"] { background: var(--an-teal); color: #fff; text-shadow: 0 2px 0 var(--an-teal-d); box-shadow: var(--gc-bevel), 0 3px 0 var(--an-teal-d); }
/* carte (plaque de marbre) / panneau (fenêtre à méandres haut + bas) */
.an-card { background: var(--an-plate-m); color: var(--an-ink); border: var(--an-bw) solid var(--an-line); border-radius: var(--an-r); box-shadow: var(--an-shadow); padding: 10px 12px 14px; }
.an-panel { background: var(--an-window); color: var(--an-ink); border: 4px solid var(--an-line); border-radius: var(--an-r-lg); box-shadow: var(--an-shadow-lg); padding: 24px 18px; }
/* champ de saisie / liste */
.an-field { box-sizing: border-box; min-height: 44px; padding: 8px 12px; color: var(--an-ink); background: #fffdf6; border: var(--an-bw) solid var(--an-line); border-radius: var(--an-r);
  box-shadow: inset 0 3px 0 rgba(58, 47, 34, .12); font: 700 15px/1.2 var(--ar-font, system-ui, sans-serif); }
/* interrupteur : rail de pierre + galet */
.an-switch { position: relative; display: inline-block; width: 56px; height: 32px; box-sizing: border-box; vertical-align: middle; background: #e9d3c8; border: var(--an-bw) solid var(--an-line); border-radius: var(--an-r); cursor: pointer; }
.an-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--an-marble); border: 3px solid var(--an-line); border-radius: 2px; transition: left .15s; box-sizing: border-box; }
.an-switch.is-on { background: var(--an-sage); }
.an-switch.is-on::before { left: 26px; }
/* badge / pastille */
.an-badge { display: inline-block; padding: 1px 8px; background: var(--an-ori); color: var(--an-ori-ink); border: 2px solid var(--an-ori-ink); border-radius: var(--an-r);
  font: 700 11px/1.5 var(--an-font-num); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.an-badge--coral { background: var(--an-coral); color: #fff; border-color: var(--an-coral-d); }
.an-badge--teal { background: var(--an-teal); color: #fff; border-color: var(--an-teal-d); }
/* barre de progression : rail creusé + remplissage orichalque segmenté */
.an-progress { position: relative; height: 22px; box-sizing: border-box; overflow: hidden; background: #e2d6bd; border: var(--an-bw) solid var(--an-line); border-radius: var(--an-r); box-shadow: inset 0 3px 0 rgba(58, 47, 34, .18); }
.an-progress__fill { height: 100%; background: var(--an-ori); background-image: repeating-linear-gradient(90deg, transparent 0 11px, rgba(122, 78, 0, .32) 11px 13px), linear-gradient(180deg, rgba(255, 255, 255, .5) 0 30%, transparent 30%); }
/* infobulle + bannière */
.an-tip, .an-toast { background: var(--an-plate-m); color: var(--an-ink); border: var(--an-bw) solid var(--an-line); border-radius: var(--an-r); box-shadow: var(--an-shadow); padding: 8px 12px 12px; font: 700 14px/1.3 var(--ar-font, system-ui, sans-serif); }
.an-toast { border-left: 6px solid var(--an-teal); }

/* ---------- 3. ADOPTION — notifications / popups (famille --pn-*) ---------- */
/* Les jetons --pn-* sont déjà remappés : on ajoute la matière (marbre veiné + méandre fin) et les angles de pierre. */
html body.ui-arcade :is(#hud #boss-banner, #hud #heli-notice, #hud #gardien-radio, #quest-toast, #gps-toasts .gps-toast,
  #onboard-tip, #ob-welcome, #ob-spot-text, #mob-settings-coach, #rotate-hint, #tc-hint, #guide-pointer, #flash-mission, #dov-cap-toast,
  #pq-quests .oog-box, #pq-quests #eg-hud > div, .event-card, .event-journal) {
  background: var(--an-plate-m) !important; color: var(--an-ink) !important; border-radius: var(--an-r) !important;
  padding-bottom: 18px !important;
}
html body.ui-arcade :is(#chest-reward .chest-reward-card, #gift-card, #map2-grad-toast, #derelict-offer .do-box, #totem-prompt #totem-prompt-box, #big-announce .ba-card) {
  background: var(--an-window) !important; color: var(--an-ink) !important; border-radius: var(--an-r-lg) !important;
  border: 4px solid var(--an-line) !important; border-top: 4px solid var(--an-line) !important; box-shadow: var(--an-shadow-lg) !important;
  padding-top: 26px !important; padding-bottom: 26px !important;
}
html body.ui-arcade :is(#chest-reward .chest-reward-head, #gift-card h2, #totem-prompt h2, #derelict-offer .do-title) {
  font-family: var(--an-font-title) !important; color: var(--an-ink) !important; letter-spacing: .06em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(0, 0, 0, .22) !important;
}
html body.ui-arcade :is(#chest-reward .chest-reward-list li, #gift-card li, #derelict-offer .do-chip, #ob-welcome .obw-v) {
  background: var(--an-marble-2) !important; color: var(--an-ink) !important; border: 2px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  box-shadow: var(--gc-carved) !important;
}
html body.ui-arcade :is(#derelict-offer .do-chip b) { color: var(--an-teal-text) !important; }
html body.ui-arcade :is(#derelict-offer .do-ship) { background: var(--an-marble-2) !important; border: 2px solid var(--an-line) !important; }
html body.ui-arcade :is(#derelict-offer, #totem-prompt) { background: rgba(20, 38, 40, .45) !important; }
/* boutons des notifications : orichalque (confirmer) / pierre (refuser), angles vifs, Cinzel */
html body.ui-arcade :is(#onboard-tip .ob-ok, #ob-welcome .obw-ok, #mob-settings-coach .msc-ok, #map2-grad-cta, #gift-card button, #derelict-offer .do-accept, #totem-prompt .totem-accept, #privacy-notice .pn-btn--primary) {
  min-height: 44px !important; min-width: 44px !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  background: var(--an-ori) !important; color: var(--an-ori-ink) !important; font-family: var(--an-font-title) !important; letter-spacing: .05em !important;
  box-shadow: var(--gc-bevel), 0 4px 0 var(--an-ori-d) !important;
}
html body.ui-arcade :is(#ob-welcome .obw-off, #derelict-offer .do-refuse, #totem-prompt .totem-decline, #privacy-notice .pn-btn--ghost) {
  min-height: 44px !important; min-width: 44px !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  background: var(--an-marble-2) !important; color: var(--an-ink) !important; font-family: var(--an-font-title) !important; letter-spacing: .04em !important;
  box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important;
}
/* pastilles d'accent qui étaient des FONDS jaunes : orichalque pastel + encre brune (lisible) */
html body.ui-arcade :is(#quest-toast .qt-xp, #onboard-tip .ob-emblem) { background: var(--an-ori) !important; color: var(--an-ori-ink) !important; border-color: var(--an-ori-ink) !important; border-radius: var(--an-r) !important; }
html body.ui-arcade #hud #killfeed .feed-msg {
  background: var(--an-marble) !important; background-image: none !important; color: var(--an-ink) !important; border: 2px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  box-shadow: 0 2px 0 rgba(58, 47, 34, .55) !important;
}
html body.ui-arcade #hud #killfeed .feed-msg * { color: inherit !important; }
html body.ui-arcade :is(.event-card .ev-title, .event-journal .ev-title, .event-card .ev-text, .event-journal .ev-text, .event-card, .event-journal) { color: var(--an-ink) !important; text-shadow: none !important; }
html body.ui-arcade :is(.event-card .ev-gain) { color: var(--an-ori-d) !important; }
html body.ui-arcade :is(#flash-mission .fm-count) { color: var(--an-teal-text) !important; }
html body.ui-arcade :is(#flash-mission .fm-reward) { color: var(--an-sage-text) !important; }
html body.ui-arcade :is(#pq-quests .oog-box .oog-t, #pq-quests .oog-box .oog-arrow) { color: var(--an-sage-text) !important; }
html body.ui-arcade #ob-welcome .obw-h { color: var(--an-ori-d) !important; font-family: var(--an-font-title) !important; }
html body.ui-arcade #ob-welcome .obw-k { color: var(--an-sage-text) !important; }
html body.ui-arcade #guide-pointer .gp-arrowwrap { background: var(--an-marble-2) !important; color: var(--an-teal-text) !important; }
html body.ui-arcade #guide-pointer.act .gp-arrowwrap { background: var(--an-ori) !important; color: var(--an-ori-ink) !important; }
html body.ui-arcade #privacy-notice {
  background: var(--an-plate-m) !important; color: var(--an-ink) !important; border-top: 4px solid var(--an-line) !important; border-radius: 0 !important;
}
html body.ui-arcade #privacy-notice :is(.pn-text, .pn-text span, p) { color: var(--an-ink) !important; }
html body.ui-arcade #privacy-notice .pn-text b { color: var(--an-ori-d) !important; }
html body.ui-arcade #privacy-notice .pn-ic { color: var(--an-teal-text) !important; }

/* ---------- 3. ADOPTION — bulles d'interaction (écran des matchs, armateur, objets) ---------- */
html body.ui-arcade .ship-interact {
  min-height: 44px; padding: 12px 26px 16px !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  background: var(--gc-meander) bottom left / 12px 12px repeat-x, var(--an-ori) !important; color: var(--an-ori-ink) !important;
  font-family: var(--an-font-title) !important; font-weight: 900 !important; letter-spacing: .04em !important; text-shadow: none !important;
  box-shadow: var(--gc-bevel), 0 5px 0 var(--an-ori-d), 0 12px 22px rgba(6, 26, 30, .35) !important;
}
html body.ui-arcade .ship-interact:hover { background: var(--gc-meander) bottom left / 12px 12px repeat-x, #f0c872 !important; border-color: var(--an-line) !important; }
html body.ui-arcade .ship-interact::before { box-shadow: 0 0 0 5px rgba(227, 184, 90, .5) !important; border-radius: var(--an-r) !important; }
html body.ui-arcade #rc-bubble {
  background: var(--an-plate-m) !important; color: var(--an-ink) !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  box-shadow: var(--an-shadow) !important; padding: 8px 10px 14px !important; font-family: var(--ar-font, system-ui, sans-serif) !important;
}
html body.ui-arcade #rc-bubble > div:first-child { color: var(--an-ori-d) !important; font-family: var(--an-font-title) !important; letter-spacing: .05em !important; }
html body.ui-arcade #rc-bubble button {
  min-height: 44px !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  background: var(--an-marble-2) !important; color: var(--an-ink) !important; box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important; font-weight: 800 !important;
}
html body.ui-arcade #rc-bubble button:last-of-type:not(:first-of-type) { background: var(--an-teal) !important; color: #fff !important; box-shadow: var(--gc-bevel), 0 3px 0 var(--an-teal-d) !important; }
html body.ui-arcade #rc-bubble button:active { transform: translateY(2px) !important; }
html body.ui-arcade #rc-bubble > div:last-child { color: var(--an-ink-dim) !important; }

/* ---------- 3. ADOPTION — HUD : plaques de marbre (au lieu des pastilles marine / textes cernés) ---------- */
html body.ui-arcade :is(#hud #btn-hud-menu, #hud #btn-mute, #hud #pearl-hud, #hud #team-scores, #hud .mob-toggle, #hud #arm-tip,
  #hud #weapon-chip, #hud #quest-chip, #hud #power-chip, #hud #boost-hud > *, #hud #boost-dock .boost-dock-btn, #hud #arm-slots .arm-slot) {
  background: var(--an-plate) !important; color: var(--an-ink) !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important;
}
html body.ui-arcade :is(#hud #btn-hud-menu, #hud #btn-mute, #hud .mob-toggle) { min-width: 44px !important; min-height: 44px !important; }
html body.ui-arcade :is(#hud #btn-hud-menu, #hud #btn-mute):active { transform: translateY(3px) !important; box-shadow: var(--gc-carved), 0 0 0 var(--an-line) !important; }
html body.ui-arcade #hud #arm-slots .arm-slot.selected, html body.ui-arcade #hud #arm-slots .arm-slot.active, html body.ui-arcade #hud #arm-slots .arm-slot.sel {
  background: var(--an-ori) !important; border-color: var(--an-line) !important; box-shadow: var(--gc-bevel), 0 3px 0 var(--an-ori-d) !important;
}
html body.ui-arcade #hud #arm-slots .arm-n { border-radius: var(--an-r) !important; background: var(--an-coral) !important; border-color: var(--an-coral-d) !important; }
html body.ui-arcade #hud #hud-menu {
  background: var(--an-window) !important; border: 4px solid var(--an-line) !important; border-radius: var(--an-r-lg) !important; box-shadow: var(--an-shadow-lg) !important;
  padding: 24px 6px 24px !important;
}
html body.ui-arcade #hud #hud-menu button { border-radius: var(--an-r) !important; font-family: var(--an-font-title) !important; letter-spacing: .04em !important; min-height: 44px !important; }
html body.ui-arcade #hud #hud-menu button:hover, html body.ui-arcade #hud #hud-menu button:focus-visible { background: rgba(43, 122, 110, .18) !important; }
html body.ui-arcade #hud #hud-menu .hm-ic { border-radius: var(--an-r) !important; }
html body.ui-arcade #hud #hud-menu kbd { background: var(--an-marble) !important; border-radius: 2px !important; }
html body.ui-arcade #hud #hud-menu .hm-danger { color: var(--an-coral) !important; }
html body.ui-arcade #hud #hud-menu .hm-danger .hm-ic { border-color: var(--an-coral-d) !important; }

/* classement : plaques de marbre en colonne, ta ligne en orichalque */
html body.ui-arcade #hud #leaderboard h3 {
  color: var(--an-ink) !important; -webkit-text-stroke: 0 !important; paint-order: normal !important; text-shadow: none !important;
  font-family: var(--an-font-title) !important; letter-spacing: .08em !important; background: var(--an-plate) !important; border: 3px solid var(--an-line) !important;
  border-radius: var(--an-r) !important; padding: 3px 8px !important; text-align: center !important; box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important;
}
html body.ui-arcade #hud #leaderboard #lb-count { color: var(--an-ink-dim) !important; opacity: 1 !important; font-family: var(--an-font-num) !important; }
html body.ui-arcade #hud #leaderboard .lb-top5-badge { background: var(--an-ori) !important; color: var(--an-ori-ink) !important; border: 2px solid var(--an-ori-ink) !important; border-radius: var(--an-r) !important; }
html body.ui-arcade #hud #lb-list li {
  background: var(--an-plate) !important; color: var(--an-ink) !important; border: 2px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  box-shadow: 0 2px 0 rgba(58, 47, 34, .55) !important; font-family: var(--an-font-num) !important;
}
html body.ui-arcade #hud #lb-list li::before { border-radius: 2px !important; background: var(--an-marble-2) !important; color: var(--an-ink) !important; border: 1px solid var(--an-line) !important; font-family: var(--an-font-num) !important; }
html body.ui-arcade #hud #lb-list li.rank1::before { background: var(--an-ori) !important; color: var(--an-ori-ink) !important; }
html body.ui-arcade #hud #lb-list li.rank2::before { background: #dfe6e4 !important; color: var(--an-ink) !important; }
html body.ui-arcade #hud #lb-list li.rank3::before { background: #d89a6a !important; color: #3b1c08 !important; }
html body.ui-arcade #hud #lb-list li.me { background: var(--an-ori) !important; color: var(--an-ori-ink) !important; box-shadow: 0 2px 0 var(--an-ori-d) !important; border-color: var(--an-ori-ink) !important; }
html body.ui-arcade #hud #lb-list li.me::before { background: var(--an-ori-ink) !important; color: var(--an-ori) !important; }
html body.ui-arcade #hud #lb-list li.lb-sep { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--an-ink) !important; text-shadow: 0 1px 0 #fff !important; }
html body.ui-arcade #hud #lb-list .lb-arrow.up { color: var(--an-sage-text) !important; }
html body.ui-arcade #hud #lb-list .lb-arrow.down { color: var(--an-coral) !important; }
html body.ui-arcade #hud #lb-list li.me .lb-arrow.up { color: var(--an-sage-d) !important; }

/* barre d'XP / niveau / score : rail de pierre + remplissage d'orichalque segmenté */
html body.ui-arcade #hud #xpbar-name {
  color: var(--an-ink) !important; -webkit-text-stroke: 0 !important; paint-order: normal !important; font-family: var(--an-font-title) !important; letter-spacing: .06em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 2px 3px rgba(255, 255, 255, .6) !important;
  background: var(--an-plate) !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important; padding: 0 14px !important; box-shadow: 0 3px 0 var(--an-line) !important;
}
html body.ui-arcade #hud #xpbar {
  background: #e2d6bd !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important;
  box-shadow: inset 0 3px 0 rgba(58, 47, 34, .2), 0 3px 0 var(--an-line) !important;
}
html body.ui-arcade #hud #xpbar-fill {
  background: var(--an-ori) !important;
  background-image: repeating-linear-gradient(90deg, transparent 0 13px, rgba(122, 78, 0, .3) 13px 15px), linear-gradient(180deg, rgba(255, 255, 255, .5) 0 30%, transparent 30%) !important;
  border-radius: 0 !important;
}
html body.ui-arcade #hud #xpbar-label { color: var(--an-ink) !important; -webkit-text-stroke: 0 !important; paint-order: normal !important; font-family: var(--an-font-num) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .8) !important; }
html body.ui-arcade :is(#hud #xpbar-mult, #hud #points-label) { background: var(--an-coral) !important; color: #fff !important; border: 2px solid var(--an-coral-d) !important; border-radius: var(--an-r) !important; box-shadow: 0 3px 0 var(--an-coral-d) !important; font-family: var(--an-font-num) !important; }
html body.ui-arcade #hud #pearl-hud b { font-family: var(--an-font-num) !important; }

/* améliorations (stats façon diep) */
html body.ui-arcade #hud #stats-panel { background: var(--an-plate) !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important; box-shadow: var(--an-shadow) !important; }
html body.ui-arcade #hud #stats-panel h3 { color: var(--an-ink) !important; -webkit-text-stroke: 0 !important; paint-order: normal !important; font-family: var(--an-font-title) !important; letter-spacing: .06em !important; }
html body.ui-arcade #hud #stats-panel #stat-quota { background: var(--an-ori) !important; color: var(--an-ori-ink) !important; border-color: var(--an-ori-ink) !important; border-radius: var(--an-r) !important; font-family: var(--an-font-num) !important; }
html body.ui-arcade #hud #stats-panel .stat-bar { background: #e2d6bd !important; border: 2px solid var(--an-line) !important; border-radius: var(--an-r) !important; box-shadow: inset 0 2px 0 rgba(58, 47, 34, .18) !important; }
html body.ui-arcade #hud #stats-panel .stat-fill { border-radius: 0 !important; }
html body.ui-arcade #hud #stats-panel .stat-name { color: var(--an-ink) !important; -webkit-text-stroke: 0 !important; paint-order: normal !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .7) !important; font-family: var(--an-font-num) !important; }
html body.ui-arcade #hud #stats-panel .stat-key { background: var(--an-marble) !important; color: var(--an-ink) !important; border: 1px solid var(--an-line) !important; border-radius: 2px !important; font-family: var(--an-font-num) !important; }
html body.ui-arcade #hud #stats-panel .stat-plus { min-width: 28px !important; width: 28px !important; height: 28px !important; border-radius: var(--an-r) !important; background: var(--an-teal) !important; color: #fff !important; border: 2px solid var(--an-line) !important; box-shadow: 0 3px 0 var(--an-teal-d) !important; -webkit-text-stroke: 0 !important; paint-order: normal !important; line-height: 22px !important; }
html body.ui-arcade #hud #stat-pts-badge { color: var(--an-ori-d) !important; -webkit-text-stroke: 0 !important; paint-order: normal !important; text-shadow: 0 1px 0 #fff, 0 0 6px #fff !important; font-family: var(--an-font-num) !important; }

/* mini-carte : médaillon rond cerclé d'orichalque ; grande carte : fenêtre de marbre */
html body.ui-arcade #minimap { border: 4px solid var(--an-ori-d) !important; box-shadow: 0 0 0 3px var(--an-line), 0 6px 0 3px var(--an-line), 0 12px 18px rgba(6, 26, 30, .28) !important; }
html body.ui-arcade #minimap:hover { border-color: var(--an-ori) !important; }
html body.ui-arcade.vtouch #minimap { box-shadow: 0 0 0 2px var(--an-line), 0 4px 0 2px var(--an-line) !important; }
html body.ui-arcade #minimap-modal { background: rgba(20, 38, 40, .55) !important; }
html body.ui-arcade #minimap-modal #minimap-big-wrap { background: var(--an-window) !important; border: 4px solid var(--an-line) !important; border-radius: var(--an-r-lg) !important; box-shadow: var(--an-shadow-lg) !important; padding: 24px 14px !important; }
html body.ui-arcade #minimap-modal #minimap-big { border: 4px solid var(--an-line) !important; border-radius: var(--an-r) !important; box-shadow: 0 4px 0 var(--an-line) !important; }
html body.ui-arcade #minimap-modal .mm-tab { background: var(--an-marble-2) !important; color: var(--an-ink) !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important; box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important; font-family: var(--an-font-title) !important; letter-spacing: .05em !important; min-height: 44px !important; }
html body.ui-arcade #minimap-modal .mm-tab.selected { background: var(--an-teal) !important; color: #fff !important; border-color: var(--an-line) !important; box-shadow: var(--gc-bevel), 0 3px 0 var(--an-teal-d) !important; text-shadow: 0 2px 0 var(--an-teal-d) !important; }
html body.ui-arcade #minimap-modal .panel-x { background: var(--an-coral) !important; border-color: var(--an-coral-d) !important; border-radius: var(--an-r) !important; box-shadow: 0 3px 0 var(--an-coral-d) !important; min-width: 44px !important; min-height: 44px !important; }
html body.ui-arcade #minimap-modal button:not(.mm-tab):not(.panel-x) { background: var(--an-ori) !important; color: var(--an-ori-ink) !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important; box-shadow: var(--gc-bevel), 0 3px 0 var(--an-ori-d) !important; font-family: var(--an-font-title) !important; min-height: 44px !important; }
html body.ui-arcade #minimap-modal .mm-gps-btn.is-accept { background: var(--an-sage) !important; color: #fff !important; border-color: var(--an-line) !important; box-shadow: var(--gc-bevel), 0 3px 0 var(--an-sage-d) !important; }
html body.ui-arcade #minimap-modal .mm-gps-btn.is-stop { background: var(--an-coral) !important; color: #fff !important; border-color: var(--an-line) !important; box-shadow: var(--gc-bevel), 0 3px 0 var(--an-coral-d) !important; }

/* ---------- 3. ADOPTION — options / paramètres ---------- */
html body.ui-arcade #options-panel {
  background: var(--an-window) !important; border: 4px solid var(--an-line) !important; border-radius: var(--an-r-lg) !important;
  box-shadow: var(--an-shadow-lg), 0 0 0 100vmax rgba(20, 38, 40, .5) !important; color: var(--an-ink) !important;
  padding: 30px 22px 28px !important;
}
html body.ui-arcade #options-panel #opt-title {
  font-family: var(--an-font-title) !important; font-size: 26px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--an-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(0, 0, 0, .22) !important; padding-right: 56px !important;
}
html body.ui-arcade #options-panel > .panel-x {
  top: 24px !important; right: 14px !important; width: 44px !important; height: 44px !important; border-radius: var(--an-r) !important;
  background: var(--an-coral) !important; border: 3px solid var(--an-coral-d) !important; box-shadow: 0 4px 0 var(--an-coral-d) !important;
}
html body.ui-arcade #options-panel > .panel-x:active { box-shadow: 0 1px 0 var(--an-coral-d) !important; }
html body.ui-arcade #options-panel #opt-tabs .opt-tab {
  min-height: 44px !important; border-radius: var(--an-r) !important; background: var(--an-marble-2) !important; color: var(--an-ink) !important;
  font-family: var(--an-font-title) !important; letter-spacing: .05em !important; font-weight: 900 !important; font-size: 14px !important;
  box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important;
}
html body.ui-arcade #options-panel #opt-tabs .opt-tab.selected { background: var(--an-teal) !important; color: #fff !important; text-shadow: 0 2px 0 var(--an-teal-d) !important; box-shadow: var(--gc-bevel), 0 3px 0 var(--an-teal-d) !important; }
html body.ui-arcade #options-panel .opt-row { background: var(--an-plate) !important; border-radius: var(--an-r) !important; box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important; margin-bottom: 3px !important; }
html body.ui-arcade #options-panel .opt-row--sub { background: var(--an-marble-2) !important; }
html body.ui-arcade #options-panel .opt-row-lbl small, html body.ui-arcade #options-panel .opt-pane > .opt-note, html body.ui-arcade #options-panel #opt-install-hint,
html body.ui-arcade #options-panel #opt-version, html body.ui-arcade #options-panel #dev-access .dev-toggle, html body.ui-arcade #options-panel #dev-access .dev-status { color: var(--an-ink-dim) !important; }
/* interrupteur : rail de pierre carré + galet de marbre */
html body.ui-arcade #options-panel :is(.opt-row input[type="checkbox"], .opt-row .opt-sw) { border-radius: var(--an-r) !important; background: #e9d3c8 !important; }
html body.ui-arcade #options-panel :is(.opt-row input[type="checkbox"], .opt-row .opt-sw)::before { border-radius: 2px !important; background: var(--an-marble) !important; }
html body.ui-arcade #options-panel :is(.opt-row input[type="checkbox"]:checked, .opt-row--btn.on .opt-sw) { background: var(--an-sage) !important; }
html body.ui-arcade #options-panel :is(.opt-row input[type="checkbox"], .opt-row .opt-sw) { min-height: 32px !important; }
/* curseur : rail creusé + bouton de pierre */
html body.ui-arcade #options-panel .opt-row input[type="range"] { background: #e2d6bd !important; border-radius: var(--an-r) !important; accent-color: var(--an-teal); }
html body.ui-arcade #options-panel .opt-row input[type="range"]::-webkit-slider-thumb { border-radius: 2px !important; background: var(--an-marble) !important; }
html body.ui-arcade #options-panel .opt-row input[type="range"]::-moz-range-thumb { border-radius: 2px !important; background: var(--an-marble) !important; }
html body.ui-arcade #options-panel .opt-row input[type="range"]::-moz-range-progress { background: var(--an-teal) !important; border-radius: 0 !important; }
/* listes déroulantes + boutons */
html body.ui-arcade #options-panel :is(.opt-row select, #opt-lang-host #i18n-opt select, .opt-row .opt-pick) {
  border-radius: var(--an-r) !important; background-color: var(--an-marble-2) !important; min-height: 44px !important; font-family: var(--an-font-title) !important; letter-spacing: .03em !important;
  box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important;
}
html body.ui-arcade #options-panel .opt-row select option { background: var(--an-marble) !important; color: var(--an-ink) !important; }
html body.ui-arcade #options-panel .opt-row .opt-btn { border-radius: var(--an-r) !important; min-height: 44px !important; background: var(--an-teal) !important; border-color: var(--an-line) !important; box-shadow: var(--gc-bevel), 0 3px 0 var(--an-teal-d) !important; font-family: var(--an-font-title) !important; letter-spacing: .04em !important; }
html body.ui-arcade #options-panel .opt-foot { border-top: 2px dashed rgba(58, 47, 34, .3) !important; }
html body.ui-arcade #options-panel .opt-foot .opt-link { color: var(--an-teal-text) !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
html body.ui-arcade #options-panel #dev-access .dev-pass { background: #fffdf6 !important; border-radius: var(--an-r) !important; }

/* ---------- 3. ADOPTION — boutique d'escale (#shop-bar, Armateur ambulant / Arsenal et flotte) ---------- */
html body.ui-arcade #hud #shop-bar { background: var(--an-window) !important; border: 4px solid var(--an-line) !important; border-radius: var(--an-r-lg) !important; box-shadow: var(--an-shadow-lg) !important; color: var(--an-ink) !important; }
html body.ui-arcade #hud #shop-bar #shop-bar-title { color: var(--an-ink) !important; font-family: var(--an-font-title) !important; letter-spacing: .06em !important; -webkit-text-stroke: 0 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .75) !important; }
html body.ui-arcade #hud #shop-bar .shop-card { background: var(--an-plate-m) !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important; box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important; padding-bottom: 16px !important; }
html body.ui-arcade #hud #shop-bar .shop-card .shop-cat { border-radius: var(--an-r) !important; background: var(--an-teal) !important; color: #fff !important; font-family: var(--an-font-num) !important; }
html body.ui-arcade #hud #shop-bar .shop-card--action .shop-cat { background: var(--an-coral) !important; }
html body.ui-arcade #hud #shop-bar .shop-card .shop-starter { border-radius: var(--an-r) !important; }
html body.ui-arcade #hud #shop-bar .shop-card.is-max { background: var(--an-marble-2) !important; border-color: var(--an-line) !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy { border-radius: var(--an-r) !important; min-height: 44px !important; font-family: var(--an-font-title) !important; letter-spacing: .04em !important; }
html body.ui-arcade #hud #shop-bar :is(.shop-bar-x, #shop-bar-dock) { border-radius: var(--an-r) !important; }
html body.ui-arcade #hud #shop-bar .shop-bar-x { min-width: 44px !important; min-height: 44px !important; background: var(--an-coral) !important; border-color: var(--an-coral-d) !important; }
html body.ui-arcade #hud #shop-bar #shop-bar-dock.dock-warn { background: var(--an-coral) !important; border-color: var(--an-coral-d) !important; }

/* flotte / évolution de coque */
html body.ui-arcade #hud #fleet-panel .fleet-row { background: var(--an-plate) !important; border: 3px solid var(--an-line) !important; border-radius: var(--an-r) !important; box-shadow: var(--gc-carved) !important; }
html body.ui-arcade #hud #shipyard-bar .sy-card { border-radius: var(--an-r) !important; }
html body.ui-arcade #hud .mob-panel-close { border-radius: var(--an-r) !important; min-width: 44px !important; min-height: 44px !important; }

/* ---------- 3. ADOPTION — atelier du navire / arbre d'amélioration (#atj-up) ---------- */
/* Les cartes restent lisibles SANS survol (nom + badge de catégorie) ; l'aperçu au survol est inchangé (JS). */
html body.ui-arcade #atj-up { font-family: var(--ar-font, system-ui, sans-serif); }
html body.ui-arcade #atj-up .atj-title {
  color: var(--an-ink); font-family: var(--an-font-title); letter-spacing: .08em; text-transform: uppercase; text-shadow: none;
  background: var(--an-plate); border: 3px solid var(--an-line); border-radius: var(--an-r); padding: 4px 18px; box-shadow: var(--gc-carved), 0 3px 0 var(--an-line);
}
html body.ui-arcade #atj-up .atj-n { color: var(--an-ori-d); font-family: var(--an-font-num); }
html body.ui-arcade #atj-up .atj-tile {
  background: var(--an-plate); border: 3px solid var(--an-line); border-radius: var(--an-r); box-shadow: var(--gc-carved), inset 0 -5px 0 var(--sc, var(--an-ori)), 0 3px 0 var(--an-line);
}
html body.ui-arcade #atj-up .atj-tile:hover, html body.ui-arcade #atj-up .atj-tile.on { background: var(--an-plate); transform: translateY(-3px); }
html body.ui-arcade #atj-up .atj-tile.on { outline: 3px solid var(--an-teal-d); outline-offset: 1px; }
html body.ui-arcade #atj-up .atj-tile svg { filter: none; }
html body.ui-arcade #atj-up .atj-tier { background: var(--an-ink); color: #fff; border-radius: 2px; text-shadow: none; font-family: var(--an-font-num); }
html body.ui-arcade #atj-up .atj-fnt { background: var(--an-marble-2); }
html body.ui-arcade #atj-up .atj-hullc { background: var(--an-plate); border: 3px solid var(--an-line); box-shadow: var(--gc-carved), inset 0 -5px 0 var(--an-ori), 0 3px 0 var(--an-line); }
html body.ui-arcade #atj-up .atj-hullc .atj-glow { background: radial-gradient(ellipse at center, rgba(227, 184, 90, .5), rgba(227, 184, 90, 0) 70%); }
html body.ui-arcade #atj-up :is(.atj-hn, .atj-nm) { color: var(--an-ink); text-shadow: none; }
html body.ui-arcade #atj-up .atj-hp { color: var(--an-ori-d); }
html body.ui-arcade #atj-up .atj-bar { color: var(--an-ink); }
html body.ui-arcade #atj-up .atj-bar > span { background: #e2d6bd; border-radius: 1px; }
html body.ui-arcade #atj-up .atj-bar b { background: var(--an-ori); border-radius: 0; }
html body.ui-arcade #atj-up .atj-bar i.up { color: var(--an-sage-text); } html body.ui-arcade #atj-up .atj-bar i.dn { color: var(--an-coral); }
html body.ui-arcade #atj-up .atj-info { background: var(--an-plate-m); color: var(--an-ink); border: 3px solid var(--an-line); border-radius: var(--an-r); box-shadow: var(--an-shadow); padding: 8px 12px 14px; text-shadow: none; }
html body.ui-arcade #atj-up .atj-info b { font-family: var(--an-font-title); letter-spacing: .04em; }
html body.ui-arcade #atj-up .atj-d { color: var(--an-ink); }
html body.ui-arcade #atj-up .atj-r { color: var(--an-coral); }
html body.ui-arcade #atj-up .atj-hint { color: var(--an-ink); background: var(--an-plate); padding: 3px 10px; border: 2px solid var(--an-line); border-radius: var(--an-r); }
html body.ui-arcade #atj-up .atj-syn { color: var(--an-sage-text); }
html body.ui-arcade #atj-up .atj-mini { background: var(--an-marble-2); border-radius: 2px; }
/* badges de catégorie : texte encre sur pastel de pierre (contraste ≥ 4,5:1) */
html body.ui-arcade #atj-up .atj-bdg { border-radius: 2px; color: var(--an-ori-ink); font-family: var(--an-font-num); background: var(--an-ori); border: 1px solid var(--an-ori-ink); }
html body.ui-arcade #atj-up .atj-bdg[data-b="Dégâts"] { background: #f0a592; } html body.ui-arcade #atj-up .atj-bdg[data-b="Contrôle"] { background: #d3c0f4; }
html body.ui-arcade #atj-up .atj-bdg[data-b="Mobilité"] { background: #a8dcb4; } html body.ui-arcade #atj-up .atj-bdg[data-b="Soutien"] { background: #a9d2ee; }
html body.ui-arcade #atj-up .atj-bdg[data-b="Économie"] { background: var(--an-ori); }
html body.ui-arcade #atj-up .atj-tile:focus-visible { outline: 3px solid var(--an-teal-d); outline-offset: 2px; }

/* ---------- 3. ADOPTION — coffres, caisses « ? » (emplacement d'objet) ---------- */
html body.ui-arcade #item-slot {
  background: var(--an-plate); border: 3px solid var(--an-line); border-radius: var(--an-r); min-width: 58px; min-height: 58px;
  box-shadow: var(--gc-carved), 0 4px 0 var(--an-line), 0 8px 14px rgba(6, 26, 30, .25);
}
html body.ui-arcade #item-slot .is-key { background: var(--an-ori); color: var(--an-ori-ink); border: 2px solid var(--an-ori-ink); border-radius: 2px; font-family: var(--an-font-num); }
html body.ui-arcade #item-slot.is-empty { opacity: .8; border-color: var(--an-line); }
html body.ui-arcade #item-slot.is-empty .is-ico::before { color: var(--an-ori-d); font-family: var(--an-font-title); }
html body.ui-arcade #item-slot.is-roll { border-color: var(--an-ori-d); }
html body.ui-arcade #item-slot.is-ready { border-color: var(--an-ori-d); box-shadow: var(--gc-carved), 0 4px 0 var(--an-ori-d), 0 0 0 4px rgba(227, 184, 90, .6); }
html body.ui-arcade #chest-reward .chest-reward-glow { display: none !important; }
html body.ui-arcade #chest-reward .chest-reward-head { font-size: 20px !important; text-transform: uppercase !important; }
html body.ui-arcade #chest-reward .chest-reward-list li { font-family: var(--an-font-num) !important; }

/* ---------- 3. ÉCRAN DE CHARGEMENT — habillé dans css/boot-splash.css (cité engloutie, autonome) ---------- */

/* ---------- 4. ACCESSIBILITÉ + PETITS ÉCRANS ---------- */
html body.ui-arcade :is(#hud button, #hud [tabindex], #options-panel button, #options-panel select, #options-panel input, #options-panel [tabindex], #minimap-modal button, #item-slot, #rc-bubble button, #atj-up [tabindex], .ship-interact, .an-btn, .an-btn--ori, .an-btn--ghost, .an-btn--icon, .an-tab):focus-visible {
  outline: var(--an-focus) !important; outline-offset: 2px !important;
}
@media (max-width: 480px) {
  html body.ui-arcade #options-panel { padding: 26px 12px 22px !important; }
  html body.ui-arcade #options-panel #opt-title { font-size: 21px !important; }
  html body.ui-arcade #options-panel > .panel-x { top: 20px !important; right: 8px !important; width: 44px !important; height: 44px !important; }
  html body.ui-arcade #options-panel #opt-tabs .opt-tab { padding: 6px 10px !important; font-size: 13px !important; }
  html body.ui-arcade #hud #lb-list li { font-size: 12px !important; }
}
@media (max-height: 460px) {
  html body.ui-arcade #options-panel { padding-top: 20px !important; padding-bottom: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .an-btn, .an-btn--ori, .an-btn--icon, .an-switch::before { transition: none; }
  html body.ui-arcade .ship-interact, html body.ui-arcade .ship-interact::before, html body.ui-arcade #item-slot.is-roll { animation: none !important; }
}

/* cartes d'événement / journal : libellés (dt), valeurs (dd), pied et croix lisibles sur marbre */
html body.ui-arcade :is(.event-card, .event-journal) :is(dt, .ev-foot, .ev-sub, small) { color: var(--an-ink-dim) !important; opacity: 1 !important; text-shadow: none !important; }
html body.ui-arcade :is(.event-card, .event-journal) :is(dd, .ev-ic) { color: var(--an-ink) !important; text-shadow: none !important; }
html body.ui-arcade .event-card .ev-gain { color: var(--an-ori-d) !important; }
html body.ui-arcade :is(.event-card, .event-journal) .ev-close { color: var(--an-ink) !important; min-width: 44px; min-height: 44px; }

/* atelier : la catégorie colorée inline (pastel clair) est remplacée par l'encre (contraste ≥ 4,5:1) */
html body.ui-arcade #atj-up .atj-meta { color: var(--an-ink-dim) !important; }
html body.ui-arcade #hud #shop-bar :is(#shop-bar-bal, #shop-bar-more, .shop-coin, .sc-buy, .shop-section-ic) { border-radius: var(--an-r) !important; }

/* ---------- 3. ADOPTION — commandes tactiles (sticks, boutons d'action, aides mobiles) ---------- */
html body.ui-arcade :is(.tc-btn, #tc-ability, #tc-context, #tc-turbo, #mob-aids-dock .mob-aid-btn, .mob-aid-status) {
  background: var(--an-plate) !important; color: var(--an-ink) !important; border: 3px solid var(--an-line) !important; border-radius: 8px !important;
  box-shadow: var(--gc-carved), 0 3px 0 var(--an-line) !important; font-family: var(--an-font-title) !important; font-weight: 900 !important; letter-spacing: .04em !important;
}
html body.ui-arcade :is(.tc-btn.tc-on, #tc-ability.tc-on, #mob-aids-dock .mob-aid-btn.aid-on) { background: var(--an-teal) !important; color: #fff !important; border-color: var(--an-line) !important; box-shadow: var(--gc-bevel), 0 2px 0 var(--an-teal-d) !important; }
html body.ui-arcade .mob-aid-status.status-flee { background: var(--an-coral) !important; color: #fff !important; }
html body.ui-arcade .tc-stick .tc-base { background: rgba(251, 247, 238, .28) !important; border: 3px solid var(--an-line) !important; }
html body.ui-arcade .tc-stick .tc-knob { background: var(--an-plate) !important; border: 3px solid var(--an-line) !important; box-shadow: 0 3px 0 var(--an-line) !important; }
html body.ui-arcade :is(.tc-guide-lbl, .tc-edit-lbl) { color: var(--an-ink) !important; }
html body.ui-arcade #options-panel { padding-bottom: 36px !important; }
/* MARCHÉ OBSCUR (2026-10-21) : la bulle du marchand du cimetière garde son habillage sombre, verdâtre (js/rencontres.js) */
html body.ui-arcade #rc-bubble { background: #10161a !important; color: #cfe8d6 !important; border-color: #6fbf8a !important; box-shadow: 0 0 14px rgba(120, 255, 160, .35), 0 4px 0 rgba(0, 0, 0, .5) !important; }
html body.ui-arcade #rc-bubble > div:first-child { color: #9fe0b4 !important; }
html body.ui-arcade #rc-bubble button { border-color: #0b0f10 !important; color: #0b0f10 !important; box-shadow: 0 3px 0 #0b0f10 !important; }
html body.ui-arcade #rc-bubble button:last-of-type:not(:first-of-type) { background: #1d3a2c !important; color: #d6ffe0 !important; border-color: #6fbf8a !important; box-shadow: 0 3px 0 #0b0f10 !important; }
html body.ui-arcade #rc-bubble > div:last-child { color: #7f9a8a !important; }