/* 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). */
  background: #339205 url(../img/ui_page_bg.png) top left 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;
}
/* Boutons centrés dans la banderole (native y 82..119, centre 100) et répartis sur
   toute sa largeur : mesuré sur l'original, marge latérale ~21px et écarts ~36px,
   ce que `space-between` reproduit exactement (900 - 42 - 638 de boutons)/6 = 36,7. */
#menu {
  position: absolute;
  left: 0; top: 91px;
  width: 900px;
  height: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 21px;
}
#menu a { display: block; height: 18px; }
#menu a img { display: block; border: 0; }

/* 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);
}
#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 {
  margin-left: 4px; padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.25);
  color: #cfe3ff; text-decoration: none; font-weight: bold;
}
#admin-link:hover { color: #fff; text-decoration: underline; }

/* ===== 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;
}

#footer {
  text-align: center;
  color: #b6e77e;
  padding: 14px 0 30px 0;
  font-size: 10px;
}
#footer a { color: #d8ffa8; }

/* ===== 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; }
/* 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; }
/* 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; }

/* ===== 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 =====
   Grille 4 colonnes reprise de l'original : case de 189px (zone carte 145 + bande
   d'objectif 44), écart de 5px — les 840px utiles du contenu donnent pile 4 colonnes. */
.quest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 6px 0;
}
.quest-cell {
  height: 189px;
  background: #4b9e12;
  display: flex; flex-direction: column;
}
.quest-cell.empty { background: #cdcdca; }
.q-card {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.q-card img { width: 86px; height: 124px; image-rendering: pixelated; }
.q-desc {
  height: 44px;
  background: #8fc92a;
  color: #fff; font-weight: bold; font-size: 11px; letter-spacing: .5px; line-height: 1.35;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 6px;
}
/* quête réussie : la carte s'efface derrière le message, l'objectif est atténué */
.quest-cell.done .q-card img { opacity: .2; }
.quest-cell.done .q-desc { color: #cbe8a2; }
.q-success {
  position: absolute; left: 0; right: 0; text-align: center;
  color: #ff553f; font-weight: bold; font-size: 17px;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #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; }

/* 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; }
.admin-scroll { max-width: 100%; overflow-x: auto; }
.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;
}
.admin-table td {
  font: 16px/16px 'SnakeNokia', Verdana, sans-serif;
  color: #fff; padding: 4px 3px; vertical-align: middle;
  border-bottom: 1px solid #88CF26;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-table tr:hover td { background: #88CF26; }
.admin-table .c-uid  { width: 42px; }
.admin-table .c-name { width: 96px; }
.admin-table .c-num  { text-align: right; }
.admin-table .c-jet, .admin-table .c-rec { width: 84px; }
.admin-table .c-par { width: 66px; }
.admin-table .c-car { width: 60px; }
.admin-table .c-fru { width: 54px; }
.admin-table .c-que { width: 64px; }
.admin-table .tok { color: #FFC000; }
/* 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; }

/* 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; }

#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; }

/* ===== 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;
}