/* Snake (muxxu) — chrome du site, reconstruit depuis www/img */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  /* Colonne de 120px reprise du bord de bar.gif, répétée horizontalement à l'infini :
     vert clair du header -> barre de séparation -> vert foncé du contenu.
     La couleur de fin (#329102) prend le relais sous les 120px.
     Couleur ET image dans UNE seule déclaration (un `background-color` déclaré
     séparément après le raccourci `background` est écrasé par celui-ci). */
  /* décalé de 30px : la barre Twinoid (30px, bordure comprise) occupe le haut de la page,
     le bandeau commence dessous — le fond doit suivre */
  background: #339205 url(../img/ui_page_bg.png) left 30px repeat-x;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  color: #333;
}
img { image-rendering: pixelated; }
a { color: #5faf1e; }

#all { width: 900px; margin: 0 auto; }

/* ===== Bannière + menu ===== */
#head {
  width: 900px; height: 120px;
  background: url(../img/bar.gif) no-repeat;
  position: relative;
}
/* ===== Menu (texte + pastilles de fruit) =====
   Boutons centrés dans la banderole (native y 82..119, centre 100), marge gauche 21px.
   Cotes relevées sur les gifs d'origine menu_N_0.gif (18px de haut) : pastille de fruit 16px de large,
   cadre de 14px (y 2..15) = texte 04b03 16px (glyphes 10px de haut, y 4..13) + 2px
   de marge en haut/bas et à gauche (l'avance de la police fournit les 2px de droite).
   Couleurs des 3 états : rouge #D63434, page courante vert #319202, survol orange #FF8800.
   Le cadre lui-même est fabriqué par text-shadow, voir .lbl ci-dessous. */
#menu {
  position: absolute;
  left: 0; top: 91px;
  width: 900px;
  height: 18px;
  display: flex;
  align-items: center;
  padding: 0 21px;
}
/* Écarts entiers : l'original répartissait les boutons en space-between, mais du texte
   à une position fractionnaire serait flouté, on fige donc des marges arrondies.
   Boutons (ico 16 + gl + 2 + texte + gr) : 70+74+144+116+76+72+58 = 610 ;
   (858 - 610) / 6 = 41,33 -> 41/42 alternés. */
#menu a { display: flex; align-items: center; height: 18px; text-decoration: none; }
#menu a:nth-child(2) { margin-left: 41px; }
#menu a:nth-child(3) { margin-left: 42px; }
#menu a:nth-child(4) { margin-left: 41px; }
#menu a:nth-child(5) { margin-left: 42px; }
#menu a:nth-child(6) { margin-left: 41px; }
#menu a:nth-child(7) { margin-left: 41px; }
/* libellés anglais (ARENA… HELP) : 72+76+144+92+70+72+58 = 584, (858-584)/6 = 45,67 */
#menu.en a:nth-child(2) { margin-left: 40px; }
#menu.en a:nth-child(3) { margin-left: 40px; }
#menu.en a:nth-child(4) { margin-left: 39px; }
#menu.en a:nth-child(5) { margin-left: 40px; }
#menu.en a:nth-child(6) { margin-left: 40px; }
#menu.en a:nth-child(7) { margin-left: 39px; }
#login-box .lg-lang { margin-top: 8px; font: 12px Verdana, sans-serif; }
#login-box .lg-lang a { color: #5faf1e; }
#menu .ico { display: block; width: 16px; height: 18px; background-repeat: no-repeat; background-position: 0 0; }
/* Le « cadre » rouge des gifs n'est pas un rectangle : c'est le texte lui-même
   dilaté d'un pixel natif (2px écran) en carré, d'où les crans aux angles et les
   trous sous le Q ou dans le creux des C. On le reproduit avec 24 ombres portées
   sur la grille -2..+2px : contours nets, sans flou. */
#menu .lbl {
  display: block; height: 14px; padding: 0 0 0 2px;
  font: 16px/14px 'Snake04b03', Verdana, sans-serif;
  color: #fff;
  -webkit-font-smoothing: none; font-smooth: never;
  text-shadow: -2px -2px #D63434, -2px -1px #D63434, -2px 0px #D63434, -2px 1px #D63434, -2px 2px #D63434, -1px -2px #D63434, -1px -1px #D63434, -1px 0px #D63434, -1px 1px #D63434, -1px 2px #D63434, 0px -2px #D63434, 0px -1px #D63434, 0px 1px #D63434, 0px 2px #D63434, 1px -2px #D63434, 1px -1px #D63434, 1px 0px #D63434, 1px 1px #D63434, 1px 2px #D63434, 2px -2px #D63434, 2px -1px #D63434, 2px 0px #D63434, 2px 1px #D63434, 2px 2px #D63434;
}
#menu a.on .lbl { text-shadow: -2px -2px #319202, -2px -1px #319202, -2px 0px #319202, -2px 1px #319202, -2px 2px #319202, -1px -2px #319202, -1px -1px #319202, -1px 0px #319202, -1px 1px #319202, -1px 2px #319202, 0px -2px #319202, 0px -1px #319202, 0px 1px #319202, 0px 2px #319202, 1px -2px #319202, 1px -1px #319202, 1px 0px #319202, 1px 1px #319202, 1px 2px #319202, 2px -2px #319202, 2px -1px #319202, 2px 0px #319202, 2px 1px #319202, 2px 2px #319202; }
#menu a:hover .lbl { text-shadow: -2px -2px #FF8800, -2px -1px #FF8800, -2px 0px #FF8800, -2px 1px #FF8800, -2px 2px #FF8800, -1px -2px #FF8800, -1px -1px #FF8800, -1px 0px #FF8800, -1px 1px #FF8800, -1px 2px #FF8800, 0px -2px #FF8800, 0px -1px #FF8800, 0px 1px #FF8800, 0px 2px #FF8800, 1px -2px #FF8800, 1px -1px #FF8800, 1px 0px #FF8800, 1px 1px #FF8800, 1px 2px #FF8800, 2px -2px #FF8800, 2px -1px #FF8800, 2px 0px #FF8800, 2px 1px #FF8800, 2px 2px #FF8800; }

/* compteur de jetons : petite étiquette sombre accrochée en haut à droite du bandeau */
#tokens-badge {
  position: absolute;
  top: 0; right: 26px;
  z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 7px;
  background: #1a1e26;
  color: #fff;
  font-size: 12px; font-weight: bold;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* le display:flex ci-dessus l'emporterait sur l'attribut hidden : le badge doit rester
   invisible tant qu'on n'est pas connecté (setTokens le révèle après /me) */
#tokens-badge[hidden] { display: none; }
#tokens-badge img { display: block; width: 12px; height: 12px; }
/* lien d'administration, séparé par un trait comme le « Aller sur Muxxu » d'origine */
#admin-link {
  color: #cfe3ff; text-decoration: none; font-weight: bold;
}
#admin-link:hover { color: #fff; text-decoration: underline; }
#admin-link.on { color: #FFE24A; }   /* page courante */

/* ===== Cadre principal ===== */
/* le cadre du contenu démarre à y=131 dans l'original ; le header fait 120px */
#main-top { width: 900px; height: 12px; margin-top: 11px; background: url(../img/main_top.gif) no-repeat; }
#main-bot { width: 900px; height: 12px; background: url(../img/main_bot.gif) no-repeat; }
#main-mid {
  width: 900px;
  background: url(../img/main_mid.gif) repeat-y;
  padding: 6px 30px 14px 30px;
  min-height: 300px;
}

/* Bandeau de pied du site muxxu : même dessin que sur Fever — filet clair, trait
   sombre, corps plein — mais décliné dans la teinte du jeu. La texture est
   produite par tools_tint_footer.mjs à partir de celle de Fever. */
#footer {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 900px;                 /* jamais plus court que la page, même sur mobile */
  background: #2f710e url(../img/bottom_bg.png) repeat-x;
  color: #cdeaa8;
  font-size: 10px;
}
#footer p { margin: 0; }
#footer a { color: #eaffb8; }

/* ===== Zone de jeu =====
   Les cartes sont posées DANS la zone de jeu (comme le Flash, où elles sont des
   sprites du canvas), aux positions de Game.getCardPos() x2 : colonne gauche
   x=12, colonne droite x=702, lignes y=12/148/284, carte 86x124. */
#game-wrap {
  position: relative;
  width: 800px; height: 420px;
  margin: 6px auto 0;
  /* fond du panneau de jeu : vert moyen du jeu d'origine (#4B9E12, relevé au
     pipette), derrière le canvas, les cartes et le HUD */
  background: #4b9e12;
}
#game-wrap canvas { display: block; width: 800px; height: 420px; image-rendering: pixelated; cursor: default; }
.canvas-wrap { position: relative; width: 800px; height: 420px; }
/* bandeau du mode replay : posé sous le canvas, indique le joueur/score rejoué */
#replay-banner {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px;
  font-family: SnakeNokia, monospace; font-size: 15px; color: #2b5c0f;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#replay-banner .rb-rec { color: #c00; font-weight: bold; }
#replay-banner b { color: #1b3d08; }
#replay-banner a { margin-left: auto; color: #2b5c0f; text-decoration: underline; }
/* mode souris : le curseur natif est masqué, remplacé par les grelots dessinés sur le
   canvas (!important pour battre la règle ID #game-wrap canvas { cursor: default }) */
.canvas-wrap.mouse-hidden, .canvas-wrap.mouse-hidden * { cursor: none !important; }
/* la couche des cartes recouvre tout le canvas : elle doit laisser passer la souris,
   sinon le canvas ne reçoit plus mousemove/mousedown et le serpent devient incontrôlable.
   Seules les cartes elles-mêmes restent cliquables. */
#cards-layer { position: absolute; inset: 0; pointer-events: none; }
.game-card { position: absolute; width: 86px; height: 124px; cursor: pointer; pointer-events: auto; perspective: 600px; }
.game-card .cardface { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .3s ease; }
.game-card.flipped .cardface { transform: rotateY(180deg); }
.cf-front, .cf-back { position: absolute; inset: 0; backface-visibility: hidden; }
.cf-front img { display: block; width: 86px; height: 124px; image-rendering: pixelated; }
.cf-back { transform: rotateY(180deg); background: url(../img/ui_card_back.png) 0 0 / 86px 124px no-repeat; image-rendering: pixelated; }
.game-card img { display: block; width: 86px; height: 124px; image-rendering: pixelated; }
/* masque de recharge (Card.majDark) : voile noir qui recouvre le HAUT de la carte,
   sa hauteur = fraction du cooldown restant, il remonte pour disparaître */
.game-card .cd-mask { position: absolute; left: 0; top: 0; width: 86px; height: 0; background: rgba(0,0,0,.7); pointer-events: none; z-index: 2; }
/* Drapeau : points restants à marquer, affichés au centre de la carte pendant le pari */
.game-card .flag-score {
  position: absolute; left: 0; right: 0; top: 46px; z-index: 4; text-align: center;
  color: #fff; font: 16px/1 'SnakeNokia', Verdana, sans-serif;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  pointer-events: none;
}
/* touche d'activation : pastille ronde du jeu (main.png « round_key »), en bas à
   droite de la carte — centre natif (38, 56) sur une carte de 43x62, donc x2 ici */
.game-card .key {
  position: absolute; left: 60px; top: 96px; z-index: 3;
  width: 32px; height: 32px;
  background: url(../img/ui_round_key.png) 0 0 / 32px 32px no-repeat;
  image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center;
  color: #550000; font: 15px/1 'SnakeNokia', Verdana, sans-serif; padding-bottom: 2px;
}
#hud-layer { position: absolute; inset: 0; pointer-events: none; }
.hud-score {
  position: absolute; left: 114px; top: 8px; color: #fff; font-weight: bold; font-size: 15px;
  font-family: "Courier New", monospace; letter-spacing: 1px;
  text-shadow: 1px 1px 0 #004400, -1px -1px 0 #004400, 1px -1px 0 #004400, -1px 1px 0 #004400;
}
.hud-timer {
  position: absolute; right: 112px; top: 9px; color: #fff; font-size: 12px;
  font-family: "Courier New", monospace;
  text-shadow: 1px 1px 0 #004400, -1px -1px 0 #004400, 1px -1px 0 #004400, -1px 1px 0 #004400;
}

/* ===== Écran de sélection des cartes (browser) =====
   Reproduit la scène Flash : browser.png est UNE image de fond de 400x210 affichée
   en x2 (800x420) ; les zones sont posées PAR-DESSUS en absolu, aux coordonnées du
   source Haxe multipliées par 2 :
     Nav.HEIGHT = 72       -> catalogue           : natif y 0..72    -> 0..144
     bande de description  : natif y 72..94       -> 144..188
     getHandY() = 109      -> main + boîte mojo   : natif y 109..171 -> 218..342
   Carte = 43x62 natif -> 86x124. Boîte mojo = 76x62 natif -> 152x124. */
.browser-box {
  position: relative;
  width: 800px; height: 420px;
  margin: 6px auto 0;
  background: url(../gfx/browser.png) 0 0 / 800px 420px no-repeat;
  image-rendering: pixelated;
  overflow: hidden;
}

/* décor : le feuillage du bas passe SOUS les cartes, celui du haut PAR-DESSUS
   (ordre de profondeur du Flash : bgf2 en DP_FG, cartes en DP_CARDS, bgf en DP_INTER) */
.scene-front, .leaves-top { position: absolute; left: 0; width: 800px; pointer-events: none; }
.scene-front { top: 144px; height: 276px; background: url(../img/ui_browser_front.png) 0 -144px / 800px 420px no-repeat; z-index: 1; }
.leaves-top  { top: 0;     height: 144px; background: url(../img/ui_browser_front.png) 0 0 / 800px 420px no-repeat; z-index: 3; }

/* catalogue des cartes possédées : une seule rangée qui défile horizontalement */
.cat-strip {
  position: absolute; left: 0; top: 10px; width: 800px; height: 124px;
  display: flex; justify-content: safe center;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  z-index: 2;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-inner { display: flex; gap: 6px; flex: 0 0 auto; padding: 0 46px; }

/* bande verte claire : description de la carte survolée.
   Police du jeu (nokia 8, affichée x2 = 16px) + ombre portée green_1, comme
   Browser.displayHint (Cs.getField blanc 8 nokia, DropShadowFilter green_1). */
.desc-band {
  position: absolute; left: 0; top: 144px; width: 800px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  font: 16px/1.15 'SnakeNokia', Verdana, sans-serif;
  padding: 0 24px;
  text-shadow: 0 2px 0 #52b31e;
}
/* largeur limitée + pre-line : chaque phrase (séparée par <br/> -> \n) va sur sa ligne,
   et une phrase trop longue continue de se replier ; l'ensemble reste centré */
.desc-band .desc-txt { display: inline-block; max-width: 600px; white-space: pre-line; }
/* carte épuisée : message « ...utilisable à minuit » atténué (displayHint alpha 0.2) */
.desc-band.dim { color: #cfe8a8; opacity: .5; text-shadow: none; }

/* boîte mojo puis cartes de la main, centrées ensemble (cf. MojoBox.majPos) */
.play-row {
  position: absolute; left: 0; top: 218px; width: 800px; height: 124px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.hand-row { display: flex; gap: 6px; }
.hand-card { cursor: pointer; }

/* cartes volantes : clone animé qui glisse (sélection -> main, main -> arène) */
.fly-card { position: absolute; width: 86px; height: 124px; z-index: 6; pointer-events: none; perspective: 600px; }
.fly-card img { display: block; width: 86px; height: 124px; image-rendering: pixelated; }
.fly-card .cardface { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .65s ease; }
.fly-card.toback .cardface { transform: rotateY(180deg); }
/* fondu du fond vers green_1 au lancement (Browser.updateFade) */
.browser-fade { position: absolute; inset: 0; background: #52b31e; opacity: 0; transition: opacity .7s ease; z-index: 4; pointer-events: none; }

.mojo-box {
  width: 152px; height: 124px; flex: 0 0 auto;
  background: url(../img/ui_mojo_off.png) 0 0 / 152px 124px no-repeat;
  cursor: default;
}
.mojo-box.ready { background-image: url(../img/ui_mojo_on.png); cursor: pointer; }
/* survol du bouton prêt : éclaircissement + lueur blanche (MojoBox.update :
   blendMode ADD, alpha 0.6, Filt.glow blanc) */
.mojo-box.ready:hover { filter: brightness(1.35) drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(255,255,255,.7)); }
.mojo-canvas { display: block; width: 152px; height: 124px; image-rendering: pixelated; }

.card-item { width: 86px; height: 124px; flex: 0 0 auto; position: relative; cursor: pointer; }
.card-item img.art { display: block; width: 86px; height: 124px; }
/* survol : le liseré BLANC du cadre est REMPLACÉ par du jaune-vert 0xAAFF00
   (Card.fxOver) via un overlay qui recouvre pile les pixels du liseré */
.browser-box .card-item::before {
  content: ''; position: absolute; inset: 0; z-index: 2; opacity: 0;
  background: url(../img/ui_card_hover_border.png) 0 0 / 86px 124px no-repeat;
  image-rendering: pixelated; pointer-events: none;
}
.browser-box .card-item:hover:not(.unavailable)::before { opacity: 1; }
/* compteur d'exemplaires « xN » (GfxCard.displayCopies) : nokia 8 (affiché x2 = 16px),
   blanc + contour noir, centré à native (31.5, 41) = bas-droite de l'illustration */
.card-item .cnt {
  position: absolute; left: 63px; top: 83px; transform: translateX(-50%);
  color: #fff; font: 16px/1 'SnakeNokia', Verdana, sans-serif; white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
/* carte épuisée pour la journée : masque sombre verdâtre (Card.displayChrono :
   Col.setPercentColor(gfx, 0.75, 0x004400)) */
.card-item.unavailable { cursor: default; }
.card-item.unavailable img.art { filter: brightness(.45) saturate(.5); }
.card-item.unavailable::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(0, 42, 0, .55);
}

/* grille de cartes générique réutilisée sur les autres pages (collection, quêtes...) */
.card-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 6px 0; }
.card-grid .card-item { width: 86px; }
.card-grid .card-item img.art { width: 86px; height: 124px; }

.play-btn {
  margin-top: 8px; padding: 8px 30px; background: #92d930; border: 2px solid #5faf1e;
  color: #fff; font-weight: bold; font-size: 13px; cursor: pointer; border-radius: 3px;
}
.loading { text-align: center; padding: 40px; color: #666; }

/* (le débriefing de fin de partie est désormais rendu dans le canvas, comme le Flash :
   fruits qui tombent en fond + panneau aux polices d'origine — cf. js/game/debriefing.js) */

/* ===== Titres / blocs génériques ===== */
h1.pagetitle {
  font-size: 16px; color: #319202;
  padding: 8px 0 6px 0;
  letter-spacing: 1px;
}
/* (le compteur de jetons vit maintenant dans #tokens-badge, en haut du bandeau) */

/* ===== Login ===== */
/* fond de la page connexion/inscription : décor de l'arène/tournoi (browser.png), la
   bande noire du haut remplacée par du vert uni #6AB108 (ui_login_bg.png) */
.login-bg {
  width: 800px; max-width: 100%; min-height: 420px; margin: 0 auto;
  background: #52b31e url(../img/ui_login_bg.png) top center / 800px 420px no-repeat;
  image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center;
}
#login-box {
  width: 340px;
  background: #f4ffe8;
  border: 2px solid #92d930;
  padding: 20px;
  text-align: center;
}
/* titre : police nokia (comme les titres « Bonus » / « Progression » du débriefing) */
#login-box h2 { color: #319202; margin-bottom: 12px; font: normal 24px 'SnakeNokia', Verdana, sans-serif; }
/* texte d'intro : police 04b03 (comme les libellés « temps de jeu »… du débriefing) */
#login-box p { font: 16px/1.3 'Snake04b03', 'SnakeNokia', Verdana, sans-serif; }
#login-box input {
  display: block; width: 100%; margin: 6px 0;
  padding: 6px; border: 1px solid #aaa; font-size: 12px;
}
/* les deux boutons : même largeur, centrés l'un au-dessus de l'autre ; police nokia */
#login-box button {
  display: block; width: 220px; margin: 10px auto 0; padding: 6px 0;
  background: #92d930; color: #fff; border: 1px solid #5faf1e;
  cursor: pointer; font: normal 16px 'SnakeNokia', Verdana, sans-serif;
}
/* bouton d'inscription : vrai bouton, vert un peu plus foncé que « entrer dans l'arène » */
#login-box .lg-alt {
  margin-top: 8px;
  background: #5faf1e; border-color: #3d7a13;
}
#login-box .lg-alt:hover { background: #4f9418; }
#login-box .err { color: #c00; margin-top: 8px; min-height: 14px; }

/* ===== Page Aide =====
   Panneaux clairs sur le cadre du site, mêmes teintes que la boîte de connexion :
   fond #f4ffe8, liseré green_0 #92d930, titres green_2 #319202 en nokia. Les pastilles
   de fruits des titres sont découpées dans les gifs du menu (16px de gauche). */
.aide-wrap { max-width: 700px; margin: 10px auto 16px; }
.aide-panel {
  background: #f4ffe8;
  border: 2px solid #92d930;
  padding: 14px 18px 12px;
  margin-bottom: 14px;
}
.aide-panel h2 {
  color: #319202;
  font: normal 20px 'SnakeNokia', Verdana, sans-serif;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.aide-panel h2 .fruit {
  display: inline-block; width: 16px; height: 18px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.aide-panel p { margin: 0 0 8px; line-height: 1.5; }
.aide-panel p:last-child { margin-bottom: 0; }
.aide-panel b { color: #319202; }
.aide-panel .num { color: #d63434; font-weight: bold; }
.aide-table { border-collapse: collapse; width: 100%; margin: 4px 0 6px; }
.aide-table th, .aide-table td { border: 1px solid #b6e37e; padding: 4px 8px; text-align: left; }
.aide-table th { background: #daf5b4; color: #319202; }
.aide-table kbd {
  display: inline-block; padding: 0 5px; border: 1px solid #92d930; border-radius: 3px;
  background: #fff; font: 11px Verdana, sans-serif; color: #319202; font-weight: bold;
}
.aide-credits {
  background: #319202;
  border: 2px solid #52b31e;
  color: #eaffd0;
  padding: 12px 18px;
}
.aide-credits a { color: #C4FF62; }
.aide-credits p { margin: 0 0 6px; }
.aide-credits p:last-child { margin-bottom: 0; }

/* ===== Encyclopéfruit =====
   Le client d'origine fait 440x212 (affiché x2 = 880) ; la zone de contenu n'offrant
   que 840px, on déborde symétriquement sur le padding. */
.encyclo-wrap { width: 880px; margin: 6px -20px 0; }
.encyclo-wrap canvas { display: block; width: 880px; height: 424px; image-rendering: pixelated; }

/* ===== Encyclopéfruit (ancienne grille HTML, conservée pour d'autres usages) ===== */
.fruit-grid { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 10px 0; }
.fruit-cell {
  width: 96px; height: 118px;
  background: #eef7e2;
  border: 1px solid #cde6ae;
  text-align: center;
  padding: 4px;
  position: relative;
}
.fruit-cell img { margin-top: 4px; width: 32px; height: 32px; }
.fruit-cell .nm { font-weight: bold; color: #4a8a12; font-size: 10px; overflow: hidden; height: 22px; }
.fruit-cell .stats { font-size: 9px; color: #777; }
.fruit-cell .tags { font-size: 8px; color: #999; }
.fruit-cell.unknown { color: #bbb; }
.fruit-cell .lvl { position: absolute; top: 2px; right: 3px; font-size: 8px; color: #92d930; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 8px 0; }
.pager .pg { font-weight: bold; color: #319202; }
.pager a { cursor: pointer; }
.progress-encyclo { text-align: center; color: #666; padding-bottom: 6px; }

/* ===== Quêtes (quest/src/Main.hx) =====
   Grille 4x2 de vignettes 102x94 rendues x2 (204x188), marge de 2px (x2 = 4px) sur fond
   blanc. Le fond de vignette vient de l'atlas d'origine quest_vig.png (204x94 = 2 frames :
   0 = quête visible [zone carte verte + bande d'objectif vert clair, liserés compris],
   1 = case verrouillée grise), affiché x2 en pixel art. */
.quest-grid {
  display: grid;
  grid-template-columns: repeat(4, 204px);
  gap: 4px;
  justify-content: center;
  background: #fff;
  padding: 4px;
  width: max-content;
  margin: 4px auto 0;
}
.quest-cell {
  position: relative;
  width: 204px; height: 188px;
  background: url(../img/quest_vig.png) 0 0 / 408px 188px no-repeat;   /* frame « visible » */
  image-rendering: pixelated;
}
.quest-cell.locked { background-position: -204px 0; }                 /* frame « verrouillée » */
/* carte : GfxCard coef 0.25 = 43x62 (x2 = 86x124), centrée en (51,36) natif -> (102,72) */
.quest-cell .q-card {
  position: absolute; left: 59px; top: 10px;
  width: 86px; height: 124px;
  image-rendering: pixelated;
}
/* objectif : police 04b03 taille 8 (x2 = 16px), blanc. align = -1 (LEFT) dans le source :
   les LIGNES sont alignées à gauche, mais le BLOC (dimensionné à la ligne la plus longue)
   est centré horizontalement (f.x). Les retours à la ligne sont posés en <br> par le JS,
   donc le span se dimensionne à sa plus longue ligne (max-content) et flex le centre. */
.quest-cell .q-desc {
  position: absolute; left: 0; right: 0; top: 146px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
.quest-cell .q-desc span {
  flex: none; text-align: left;
  font: 16px/1.15 'Snake04b03', Verdana, sans-serif; color: #fff;
}
/* jetons gagnés avec la quête : étiquette sombre en bas à gauche de la zone verte
   (au pied de la carte, au-dessus du bandeau de l'objectif), même dessin que le
   compteur du bandeau (#tokens-badge) */
.quest-cell .q-tokens {
  position: absolute; left: 6px; top: 116px;
  display: flex; align-items: center; gap: 4px;
  padding: 2px 7px 3px;
  background: #1a1e26;
  color: #fff;
  font: bold 12px Verdana, sans-serif;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.quest-cell .q-tokens img { display: block; width: 12px; height: 12px; }
.quest-cell.done .q-tokens { opacity: .5; }

/* Vig : quête réussie -> carte estompée (blend LAYER alpha .25), objectif à 50% et
   label « Quête réussie! » en nokia rouge (0xFF4444) avec halo blanc, posé sur la carte */
.quest-cell.done .q-card { opacity: .25; }
.quest-cell.done .q-desc { opacity: .5; }
.quest-cell .q-success {
  position: absolute; left: 0; right: 0; top: 2px; height: 140px;   /* centré à ~72px = milieu de la zone verte (native 1..71) */
  display: flex; align-items: center; justify-content: center;
  font: 16px/1 'SnakeNokia', Verdana, sans-serif; color: #ff4444;
  /* GlowFilter(0xFFFFFF, strength 100, blur 2) : halo blanc épais = contour solide + flou */
  text-shadow:
    1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
    1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff,
    0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff;
}

/* ===== Cartes / collection =====
   Cadre 400x208 du client d'origine, affiché x2 (800x416) ; menu latéral de 52px
   (104px à l'écran) et zone de module à droite. Les sections encore en HTML
   (boutique, tombola, bazar) se posent exactement sur cette zone de module. */
.collection-wrap { position: relative; width: 800px; height: 416px; margin: 6px auto 0; }
.collection-wrap canvas { display: block; width: 800px; height: 416px; image-rendering: pixelated; }
#col-panel {
  position: absolute; left: 104px; top: 0; width: 696px; height: 416px;
  overflow: auto; padding: 10px 12px;
  display: none;
}
#col-panel #shop-result { text-align: center; padding: 8px; color: #fff; font-weight: bold; }

/* Info-bulle de la Collection : carte survolée (nom, rareté, mojo, effet). Palette du
   cadre : green_2 #319202 (fond), green_1 #52B31E (liseré), brighten(green_0,+50)
   #C4FF62 (titre) ; texte en nokia 16px blanc ombré green_1 comme la bande de
   description de l'arène. Ne capte pas la souris (le canvas garde le survol). */
.col-tip {
  position: absolute; z-index: 6;
  max-width: 300px;
  padding: 8px 10px 9px;
  background: #319202;
  border: 2px solid #52B31E;
  box-shadow: 0 0 0 2px #1f6b00, 0 3px 6px rgba(0,0,0,.35);
  color: #fff;
  font: 16px/1.2 'SnakeNokia', Verdana, sans-serif;
  text-shadow: 0 2px 0 #236d02;
  pointer-events: none;
  image-rendering: pixelated;
}
.col-tip[hidden] { display: none; }
.col-tip .tip-name { color: #C4FF62; margin-bottom: 2px; display: flex; justify-content: space-between; gap: 16px; }
.col-tip .tip-qty { color: #fff; }
.col-tip .tip-meta { color: #dfffb0; margin-bottom: 6px; }
/* rareté : commune gris clair, normale vert clair, rare rouge */
.col-tip .tip-rar.c { color: #d8d8d8; }
.col-tip .tip-rar.u { color: #C4FF62; }
.col-tip .tip-rar.r { color: #ff5c5c; }
.col-tip .tip-none { color: #ffb0b0; }
.col-tip .tip-desc { white-space: pre-line; }

/* NB : .card-grid / .card-item sont définis une seule fois, plus haut (section
   « Écran de sélection des cartes »). Un second jeu de règles se trouvait ici et
   écrasait silencieusement les tailles de cartes par cascade — ne pas le réintroduire. */
/* (la Boutique est désormais rendue dans le canvas, cf. js/pages/cartes.js) */

/* ===== Classement =====
   Client d'origine en 440x210, affiché x2 (880x420) ; comme l'encyclopédie, il
   déborde un peu des 840px utiles du contenu. */
.score-wrap { width: 880px; margin: 6px -20px 0; }
.score-wrap canvas { display: block; width: 880px; height: 420px; image-rendering: pixelated; }

/* onglets (utilisés par d'autres écrans HTML) */
.col-tabs { display: flex; gap: 6px; padding: 8px 0; justify-content: center; }
.col-tabs a {
  padding: 4px 16px; background: #92d930; color: #fff;
  text-decoration: none; font-weight: bold; cursor: pointer;
}
.col-tabs a.on { background: #319202; }

/* ===== Dialogue (bazar) ===== */
.bazar-box { width: 480px; margin: 20px auto; background: #eef7e2; border: 1px solid #cde6ae; padding: 18px; }
.bazar-box .say { font-style: italic; color: #555; min-height: 40px; }
.bazar-box .actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.bazar-box button { padding: 5px 14px; background: #92d930; border: 1px solid #5faf1e; color: #fff; font-weight: bold; cursor: pointer; }
.bazar-card { text-align: center; margin: 10px 0; }
.bazar-card img { width: 86px; height: 124px; image-rendering: pixelated; }

/* ===== Polices pixel du jeu, converties en TTF (make_pixel_ttf.py) =====
   04b03 = police des titres de cartes ; nokia = texte des libellés de la Boutique.
   Générées avec 128 unités/pixel sur 1024 upem : à font-size 16px un pixel de la
   fonte vaut exactement 2px écran, les arêtes tombent sur la grille et restent nettes. */
@font-face {
  font-family: 'Snake04b03';
  src: url(../font/04b03.ttf) format('truetype');
  font-display: block;
}
@font-face {
  font-family: 'SnakeNokia';
  src: url(../font/nokia.ttf) format('truetype');
  font-display: block;
}

/* ===== Administration (uid 0) =====
   Couleurs reprises de l'onglet Collection de la page Cartes :
   green_0 #92D930 (fond), green_1 #52B31E (barre d'info), green_2 #319202 (ombre),
   brighten(green_0,+50) #C4FF62 (texte de la barre), brighten(green_0,-10) #88CF26.
   Colonnes dimensionnées sur la chasse réelle des polices -> 784px sur les 840 dispo. */
.admin-denied { padding: 20px; color: #c00; }
/* galerie des cartes non sorties, sous le tableau des joueurs */
.admin-subtitle { color: #319202; margin: 22px 0 10px; font: normal 22px 'SnakeNokia', Verdana, sans-serif; }
/* « Liste des joueurs » : même police que les sous-titres, sans la marge haute */
.admin-title { margin-top: 8px; }
.admin-unreleased { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 10px; }
.unr-card { text-align: center; }
.unr-card img { display: block; width: 86px; height: 124px; image-rendering: pixelated; }
.unr-id { margin-top: 5px; color: #fff; font: 14px 'SnakeNokia', Verdana, sans-serif; }
/* propositions d'illustration : cartes montées, assez grandes pour être jugées */
.prop-note {
  margin: 2px 0 10px; color: #DFFFA8;
  font: 14px/17px 'SnakeNokia', Verdana, sans-serif;
}
.admin-props { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 12px; }
.prop-card { text-align: center; width: 129px; }
.prop-card img {
  display: block; width: 129px; height: 186px; image-rendering: pixelated;
}
.prop-key {
  margin-top: 5px; color: #C4FF62;
  font: 18px 'Snake04b03', 'SnakeNokia', Verdana, sans-serif;
}
.prop-label { color: #fff; font: 13px/15px 'SnakeNokia', Verdana, sans-serif; }
/* proposition retenue : liseré pour la repérer parmi les pistes conservées */
.prop-card.kept img { outline: 2px solid #C4FF62; outline-offset: 2px; }
.prop-card.kept .prop-key { color: #FFE45C; }
/* overflow visible pour que le dropdown « Actions » ne soit pas rogné (le tableau est
   assez étroit sans la colonne uid pour tenir dans les 840px) */
.admin-scroll { max-width: 100%; }
.admin-table {
  width: 100%; border-collapse: collapse; margin: 8px 0;
  table-layout: fixed; background: #92D930;
  -webkit-font-smoothing: none; font-smooth: never;
}
.admin-table th {
  /* 04b03 n'a aucune lettre accentuée (le SWF n'y met qu'un glyphe de remplissage,
     écarté à la conversion) : nokia prend le relais pour ces caractères. */
  font: 16px/16px 'Snake04b03', 'SnakeNokia', Verdana, sans-serif;
  background: #52B31E; color: #C4FF62;
  padding: 5px 3px; text-align: left; white-space: nowrap;
  border: 1px solid #52B31E;
}
.admin-table td {
  font: 16px/16px 'SnakeNokia', Verdana, sans-serif;
  color: #fff; padding: 4px 5px; vertical-align: middle;
  /* bordures de séparation, couleur du header, sur les colonnes ET les lignes */
  border: 1px solid #52B31E;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-table tr:hover td { background: #88CF26; }
/* la colonne joueur absorbe l'espace restant (nom non tronqué) */
.admin-table .c-act  { width: 116px; }
.admin-table .c-num  { text-align: right; }
.admin-table .c-jet  { width: 104px; }
.admin-table .c-rec  { width: 100px; }
.admin-table .c-par { width: 66px; }
.admin-table .c-car { width: 60px; }
.admin-table .c-fru { width: 54px; }
.admin-table .c-que { width: 64px; }
/* la cellule action ne doit PAS rogner (sinon le dropdown est coupé) */
.admin-table .c-act, .admin-table .act { overflow: visible; }
/* les jetons ressortent en jaune franc sur le vert du tableau */
.admin-table .tok { color: #FFE24A; font-weight: bold; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.admin-table .tok-ico { width: 12px; height: 12px; margin-left: 5px; vertical-align: -2px; image-rendering: pixelated; }
/* recherche + pagination de la liste (la pagination n'apparaît qu'au-delà d'une page) */
.admin-search { display: flex; gap: 10px; align-items: center; margin: 8px 0 0; }
.admin-search input {
  font: 16px/18px 'SnakeNokia', Verdana, sans-serif;
  width: 220px; padding: 4px 6px;
  background: #fff; color: #319202; border: 0; box-shadow: inset 0 2px 0 #52B31E;
}
.admin-search span { font: 16px/16px 'SnakeNokia', Verdana, sans-serif; color: #2b5c0f; }
.admin-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 8px; }
.admin-pager span { font: 16px/16px 'SnakeNokia', Verdana, sans-serif; color: #2b5c0f; }
.admin-pager button {
  font: 16px/16px 'SnakeNokia', Verdana, sans-serif;
  padding: 3px 12px; background: #52B31E; color: #fff; border: 0;
  box-shadow: 0 2px 0 #319202; cursor: pointer;
}
.admin-pager button:disabled { opacity: .45; cursor: default; }
/* 4 actions par ligne : on les laisse passer sur deux niveaux plutôt que
   d'élargir la colonne au-delà des 840px du contenu */
.admin-table .act { white-space: normal; }

/* réglages du jeu : petits groupes de champs centrés, mêmes couleurs que le tableau */
.admin-settings { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; }
.admin-settings fieldset {
  margin: 0; padding: 6px 10px 8px; border: 1px solid #52B31E; background: #92D930;
}
.admin-settings legend {
  font: 16px/16px 'Snake04b03', 'SnakeNokia', Verdana, sans-serif;
  color: #C4FF62; background: #52B31E; padding: 2px 6px;
}
.admin-settings label {
  display: block; margin: 4px 0;
  font: 16px/18px 'SnakeNokia', Verdana, sans-serif; color: #fff;
}
.admin-settings input[type=number] {
  font: 16px/18px 'SnakeNokia', Verdana, sans-serif;
  width: 70px; padding: 2px 4px; margin-left: 4px;
  background: #fff; color: #319202; border: 0; box-shadow: inset 0 2px 0 #52B31E;
}
.admin-settings input[type=checkbox] { vertical-align: -2px; margin-right: 4px; }
.admin-set-act { width: 100%; }
.admin-set-act button {
  font: 16px/16px 'SnakeNokia', Verdana, sans-serif;
  padding: 4px 14px; background: #52B31E; color: #fff; border: 0;
  box-shadow: 0 2px 0 #319202; cursor: pointer;
}
.admin-set-act button:hover:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.admin-set-act button:disabled { opacity: .55; cursor: default; }
/* jetons par quête : deux lignes de quatre, n° dans l'ordre d'affichage */
.admin-set-quests { display: grid; grid-template-columns: repeat(4, max-content); column-gap: 14px; }
/* retour d'enregistrement, en ligne à côté du bouton */
.admin-set-msg {
  display: inline-block; margin-left: 10px; padding: 5px 10px; vertical-align: middle;
  font: 16px/16px 'SnakeNokia', Verdana, sans-serif;
  color: #C4FF62; background: #52B31E;
  opacity: 0; transition: opacity .35s ease;
  -webkit-font-smoothing: none; font-smooth: never;
}
.admin-set-msg.on { opacity: 1; }

/* boutons calqués sur « acheter » de la Boutique : fond green_1, filet green_2
   dessous, contenu abaissé d'1px de design (2px à l'écran) au survol */
.admin-table .act button, .modal-act button {
  font: 16px/16px 'SnakeNokia', Verdana, sans-serif;
  padding: 3px 6px; margin: 0 4px 3px 0;
  background: #52B31E; color: #fff; border: 0;
  box-shadow: 0 2px 0 #319202;
  cursor: pointer; vertical-align: middle;
  -webkit-font-smoothing: none; font-smooth: never;
}
.admin-table .act button:hover:not(:disabled), .modal-act button:hover {
  transform: translateY(2px); box-shadow: none;
}
.admin-table .act button:disabled { opacity: .55; cursor: default; }
/* dropdown « Actions » : le menu s'ouvre sous le bouton, replié par défaut */
.admin-table .act-dd { position: relative; display: inline-block; }
/* « Actions ▾ » sur une seule ligne : la flèche passait à la ligne dans les colonnes étroites */
.admin-table .act-toggle { white-space: nowrap; }
.admin-table .act-menu {
  position: absolute; top: 100%; right: 0; z-index: 30; display: none;
  background: #52B31E; border: 1px solid #319202; padding: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35); min-width: 122px;
}
.admin-table .act-dd.open .act-menu { display: block; }
/* nokia est une police pixel : 8px = son gabarit natif (16px en est le double),
   donc pas de flou en réduisant les entrées du menu à cette taille */
.admin-table .act-menu button {
  display: block; width: 100%; margin: 0;
  font: 8px/8px 'SnakeNokia', Verdana, sans-serif;
  padding: 6px 8px; text-align: left; white-space: nowrap;
  border-radius: 0; border-bottom: 1px solid #319202;   /* bord à bord dans le menu */
}
.admin-table .act-menu button:last-child { border-bottom: 0; }
/* survol dans le menu : un vert un peu plus clair, sans l'effet d'enfoncement */
.admin-table .act-menu button:hover:not(:disabled) { background: #6cc93a; transform: none; }

#admin-msg {
  font: 16px/16px 'SnakeNokia', Verdana, sans-serif;
  color: #C4FF62; background: #52B31E;
  padding: 7px 8px; margin-top: 2px; min-height: 16px;
  opacity: 0; transition: opacity .35s ease;
  -webkit-font-smoothing: none; font-smooth: never;
}
#admin-msg.on { opacity: 1; }

/* ===== Petit modal de saisie (page admin) ===== */
.modal-back {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  width: 300px; padding: 16px 18px;
  background: #92D930; border: 2px solid #319202;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  text-align: center;
  -webkit-font-smoothing: none; font-smooth: never;
}
.modal-box h2 {
  font: 16px/16px 'Snake04b03', 'SnakeNokia', Verdana, sans-serif;
  color: #C4FF62; background: #52B31E;
  margin: -16px -18px 12px; padding: 8px;
}
.modal-sub { font: 16px/18px 'SnakeNokia', Verdana, sans-serif; color: #fff; margin-bottom: 10px; }
.modal-sub b { color: #FFC000; font-weight: normal; }
.modal-box input {
  font: 16px/18px 'SnakeNokia', Verdana, sans-serif;
  display: block; width: 100%; padding: 5px;
  background: #fff; color: #319202;
  border: 0; box-shadow: inset 0 2px 0 #52B31E; text-align: center;
}
.modal-box input.bad { background: #FFD9D9; color: #C20F0F; box-shadow: inset 0 2px 0 #F12727; }
.modal-hint { font: 16px/16px 'SnakeNokia', Verdana, sans-serif; color: #C4FF62; margin: 8px 0 14px; }
.modal-act { display: flex; gap: 10px; justify-content: center; }
.modal-act button { margin-right: 0; }
.modal-act button.alt { background: #7a7a7a; box-shadow: 0 2px 0 #4a4a4a; }
/* confirmation du reset : plus large, avec la liste de ce qui va être effacé */
.modal-box.wide { width: 380px; }
.modal-list {
  font: 16px/19px 'SnakeNokia', Verdana, sans-serif; color: #fff;
  list-style: none; text-align: left; margin: 0 0 10px;
}
.modal-list li { padding-left: 14px; text-indent: -14px; margin-bottom: 5px; }
.modal-list li::before { content: '- '; color: #C4FF62; }

/* ===== Tournoi (browser/Draft.hx) =====
   Cadre natif 400x210 rendu x2, comme les autres écrans Browser. */
.draft-wrap { width: 800px; margin: 6px auto 0; }
.draft-wrap canvas {
  display: block; width: 800px; height: 420px;
  image-rendering: pixelated;
}

/* ===== Barre Twinoid (commune aux trois jeux — même bloc dans chaque CSS) =====
   Bandeau gris sombre pleine largeur en haut de page, comme la barre Twinoid de
   l'époque : dégradé anthracite, filet clair en haut, menus déroulants sombres. */
#tidbar {
  position: relative; z-index: 50;
  height: 30px;
  /* même règle que le pied de page : la barre ne doit jamais être plus courte que
     la page (900 px), sinon elle s'arrête au bord de l'écran dès qu'on fait
     défiler horizontalement sur mobile */
  min-width: 900px;
  background: linear-gradient(#4b4b4b, #2c2c2c);
  border-bottom: 1px solid #111;
  box-shadow: inset 0 1px 0 #6a6a6a, 0 1px 3px rgba(0,0,0,.4);
  font: bold 12px/30px Arial, Helvetica, sans-serif;
  color: #ddd;
  image-rendering: auto;
}
#tidbar .tid-in { display: flex; justify-content: space-between; padding: 0 8px; }
#tidbar .tid-right { display: flex; }
#tidbar .tid-menu { position: relative; }
#tidbar .tid-btn {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  color: #eee; text-decoration: none; white-space: nowrap;
  border-left: 1px solid #222; border-right: 1px solid #5c5c5c;
  cursor: pointer;
}
#tidbar .tid-btn:hover, #tidbar .tid-menu.open .tid-btn {
  background: linear-gradient(#606060, #383838); color: #fff;
}
#tidbar .caret {
  width: 0; height: 0; margin-top: 2px;
  border: 4px solid transparent; border-top-color: #bbb; border-bottom: 0;
}
#tidbar .tid-drop {
  display: none; position: absolute; top: 30px; left: 0; min-width: 150px;
  background: #2b2b2b; border: 1px solid #111; border-top: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.55);
}
#tidbar .tid-user .tid-drop { left: auto; right: 0; }
#tidbar .tid-menu.open .tid-drop { display: block; }
#tidbar .tid-drop a, #tidbar .tid-drop span {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; line-height: 28px;
  color: #cfcfcf; font-weight: normal; text-decoration: none;
  border-top: 1px solid #3a3a3a; border-bottom: 1px solid #1a1a1a;
}
#tidbar .tid-drop img { width: 16px; height: 16px; image-rendering: auto; }
#tidbar .tid-drop a:hover { background: #454545; color: #fff; }
/* jeu courant : mis en avant, et pas un lien (on y est déjà) */
#tidbar .tid-drop span.on {
  color: #fff; font-weight: bold; background: #3a3a3a; cursor: default;
  box-shadow: inset 3px 0 0 #e8a317;
}
#tidbar .tid-drop a.off { color: #777; cursor: default; }
#tidbar .tid-drop a.off:hover { background: none; color: #777; }
#tidbar .tid-tokens {
  display: flex; align-items: center; gap: 5px; padding: 0 12px;
  color: #f4d35e; border-left: 1px solid #222; border-right: 1px solid #5c5c5c;
}
#tidbar .tid-tokens img { width: 12px; height: 12px; image-rendering: pixelated; }
#tidbar .tid-avatar { width: 20px; height: 20px; border: 1px solid #777; background: transparent; object-fit: cover; }
#tidbar [hidden] { display: none !important; }

/* modale « Paramètres du compte » (barre Twinoid) */
#tid-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
#tid-modal .tid-box { position: relative; width: 440px; max-width: 94vw; background: #2b2b2b; border: 1px solid #111; box-shadow: 0 0 0 1px #555 inset, 0 8px 24px rgba(0,0,0,.6); padding: 18px 22px 20px; color: #ddd; font: 13px/1.5 Arial, Helvetica, sans-serif; text-align: left; }
#tid-modal h2 { margin: 0 0 12px; font: bold 16px Arial, sans-serif; color: #fff; border-bottom: 1px solid #444; padding-bottom: 8px; }
#tid-modal h3 { margin: 0 0 6px; font: bold 13px Arial, sans-serif; color: #f08a8a; }
#tid-modal .tid-x { position: absolute; top: 8px; right: 12px; color: #999; text-decoration: none; font-size: 16px; }
#tid-modal .tid-x:hover { color: #fff; }
#tid-modal .tid-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
#tid-modal .tid-row label { width: 96px; color: #999; }
#tid-modal .tid-val { flex: 1; color: #fff; font-weight: bold; }
#tid-modal .tid-edit { display: flex; gap: 6px; margin: 0 0 8px 106px; }
#tid-modal .tid-edit[hidden], #tid-modal [hidden] { display: none; }
#tid-modal input { flex: 1; min-width: 0; padding: 5px 7px; background: #1c1c1c; border: 1px solid #555; color: #fff; font: 13px Arial, sans-serif; }
#tid-modal .tid-b { padding: 4px 10px; background: linear-gradient(#5a5a5a, #3a3a3a); border: 1px solid #222; color: #eee; font: bold 12px Arial, sans-serif; cursor: pointer; }
#tid-modal .tid-b:hover { background: linear-gradient(#6a6a6a, #444); }
#tid-modal .tid-b:disabled { opacity: .45; cursor: default; }
#tid-modal .tid-b.alt { background: #333; font-weight: normal; }
#tid-modal .tid-b.danger { background: linear-gradient(#9a3030, #6a1e1e); border-color: #4a1010; }
#tid-modal .tid-b.danger:hover { background: linear-gradient(#b03838, #7a2424); }
/* compte portant au moins un droit : le bouton « Droits » vire au doré */
#tid-modal .tid-b.gold { background: linear-gradient(#d4a72c, #96721a); border-color: #5f4a0d; color: #fffbe8; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
#tid-modal .tid-b.gold:hover { background: linear-gradient(#eabd3c, #ab8320); }
#tid-modal .tid-msg { min-height: 18px; margin: 6px 0; color: #9ad46b; }
#tid-modal .tid-msg.err { color: #f08a8a; }
#tid-modal .tid-danger { margin-top: 14px; padding-top: 12px; border-top: 1px solid #444; }
#tid-modal .tid-danger p { margin: 0 0 8px; color: #bbb; }
#tid-modal #del-confirm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#tid-modal #del-confirm[hidden] { display: none; }
#tid-modal #del-confirm p { width: 100%; }
#tid-modal #del-confirm input { width: 100%; flex: none; }
#tid-modal .tid-avrow { align-items: flex-start; }
#tid-modal .tid-avbig { width: 54px; height: 54px; border: 1px solid #666; background: transparent; object-fit: cover; }
#tid-modal .tid-avbtns { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 1; }
#tid-modal .tid-edit-pw { flex-direction: column; align-items: stretch; }
#tid-modal .tid-edit-pw span { display: flex; gap: 6px; }

/* ===== barre : bouton et modale « Administration » (admins globaux) ===== */
#tidbar .tid-left { display: flex; }
#tid-modal .tid-adm-box { width: 640px; }
#tid-modal .tid-adm-top { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
#tid-modal .tid-adm-top h3 { margin: 0; color: #ddd; }
#tid-modal .tid-adm-top input { flex: 1; }
#tid-modal .tid-adm-count { color: #999; }
#tid-modal .tid-adm-list { max-height: 52vh; overflow-y: auto; border-top: 1px solid #444; }
#tid-modal .tid-adm-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid #3a3a3a; }
#tid-modal .tid-adm-login { width: 140px; font-weight: bold; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tid-modal .tid-adm-login i { color: #f0c05a; font-style: normal; }
#tid-modal .tid-adm-email { flex: 1; color: #bbb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tid-modal .tid-adm-email i { color: #777; }
#tid-modal .tid-adm-acts { display: flex; gap: 4px; flex: none; }
#tid-modal .tid-adm-perma { color: #f0c05a; font-style: italic; }
#tid-modal .tid-adm-edit { display: flex; align-items: center; gap: 6px; padding: 8px 2px 10px; border-bottom: 1px solid #3a3a3a; background: #242424; }
#tid-modal .tid-adm-edit p { margin: 0; flex: 1; color: #bbb; }
#tid-modal .tid-adm-rights { flex-wrap: wrap; }
#tid-modal .tid-adm-rights label { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; color: #ddd; }
#tid-modal .tid-adm-rights input { flex: none; }
#tid-modal .tid-adm-none { color: #999; padding: 10px 0; }

/* blocs de page par langue (pages Aide statiques) : html[lang] est posé par tidbar.js */
html[lang="en"] [data-lang="fr"], html[lang="fr"] [data-lang="en"] { display: none !important; }