/* ============================================================
   HABBOKILL V10 — DESIGN SYSTEM « MAFIA ROUGE & OR »
   Thème AAA : fond nuit profonde, rouge sang, or, verre fumé.
   Un seul fichier, aucune dépendance externe (hors Google Fonts).
   ============================================================ */

/* ⚡ 10.2.0 : les polices Google sont chargées par <link> dans pageco.php / pagede.php
   (un @import ici bloquait la lecture de toute la feuille jusqu'à la réponse de Google). */

/* ------------------------------------------------------------
   1. VARIABLES / TOKENS
   ------------------------------------------------------------ */
:root{
  /* Fonds */
  --bg-0:#080407;
  --bg-1:#0f0810;
  --bg-2:#160b12;
  --panel:rgba(24,12,18,.82);
  --panel-2:rgba(34,17,25,.72);
  --panel-3:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(230,57,70,.28);

  /* Couleurs principales */
  --blood:#e63946;
  --blood-2:#ff4d5e;
  --blood-3:#a4161a;
  --blood-dark:#5c0e18;
  --gold:#e8b64c;
  --gold-2:#f7d488;
  --gold-3:#a8792a;

  /* Textes */
  --ink:#f3e9e2;
  --ink-soft:#cbb8ba;
  --muted:#93808a;

  /* États */
  --ok:#43d17c;
  --ok-bg:rgba(67,209,124,.12);
  --warn:#ffc648;
  --warn-bg:rgba(255,198,72,.12);
  --bad:#ff5468;
  --bad-bg:rgba(255,84,104,.12);
  --info:#5aa9ff;
  --info-bg:rgba(90,169,255,.12);
  --vip:#b98bff;
  --vip-bg:rgba(185,139,255,.14);

  /* Rareté objets */
  --rar-commun:#9aa5b1;
  --rar-peu_commun:#7ecb2f;
  --rar-mythique:#ff5468;
  --rar-rare:#5aa9ff;
  --rar-epique:#b98bff;
  --rar-legendaire:#e8b64c;

  /* Typo */
  --f-display:'Cinzel',serif;
  --f-head:'Rajdhani',sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-pixel:'Press Start 2P',monospace;

  /* Divers */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --shadow-1:0 6px 24px rgba(0,0,0,.45);
  --shadow-2:0 10px 40px rgba(0,0,0,.6);
  --glow-blood:0 0 18px rgba(230,57,70,.45);
  --glow-gold:0 0 18px rgba(232,182,76,.4);

  /* 🎭 10.3.5 — LES TEINTES QUE LES THÈMES D'ÉVÉNEMENT REMPLACENT.
     Les rouges et ors « en dur » de la feuille (rgba(230,57,70,…), rgba(232,182,76,…))
     passent par ces deux triplets ; les fonds du menu, des héros et du panneau de
     notifications par les jetons ci-dessous. Un thème (body.hk-theme-…) n'a plus qu'à
     redéfinir ces variables pour rhabiller tout le site — aucune règle à dupliquer. */
  --blood-rgb:230,57,70;
  --gold-rgb:232,182,76;
  --blood-btn:#c62a38;   /* bouton .blood (contraste AA, cf. section 10.2.4) */
  --blood-btn-2:#d0303f; /* … au survol */
  --blood-btn-3:#8f1216;
  --nav-1:rgba(34,15,22,.92);
  --nav-2:rgba(18,8,13,.92);
  --hero-1:#2a1019;
  --hero-2:#160a10;
  --hero-3:#0f070c;
  --menu-1:#1d0e15;
  --menu-2:#120810;
  --bg-glow-1:rgba(230,57,70,.14);
  --bg-glow-2:rgba(232,182,76,.05);
  --bg-glow-3:rgba(92,14,24,.18);
}

/* ------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -100px, var(--bg-glow-1), transparent 60%),
    radial-gradient(900px 420px at 85% 15%, var(--bg-glow-2), transparent 55%),
    radial-gradient(800px 600px at 10% 90%, var(--bg-glow-3), transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0) 480px);
  background-attachment:fixed;
}
/* Trame subtile façon feutre */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
img{max-width:100%;}
a{color:var(--gold);text-decoration:none;transition:color .18s ease, text-shadow .18s ease;}
a:hover{color:var(--gold-2);text-shadow:0 0 12px rgba(var(--gold-rgb),.5);}
h1,h2,h3,h4{font-family:var(--f-head);letter-spacing:.4px;margin:0 0 .5em;color:var(--ink);}
::selection{background:rgba(var(--blood-rgb),.55);color:#fff;}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--blood-3) rgba(255,255,255,.05);}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.04);}
*::-webkit-scrollbar-thumb{background:linear-gradient(var(--blood-3),var(--blood-dark));border-radius:8px;}
*::-webkit-scrollbar-thumb:hover{background:var(--blood);}

/* ------------------------------------------------------------
   3. STRUCTURE GÉNÉRALE (layout 3 colonnes)
   ------------------------------------------------------------ */
/* MAJ 10.1.3 : site élargi (1340 → 1600px) + colonnes latérales plus
   larges → la colonne centrale gagne ~200px et les pseudos tiennent
   sur une seule ligne dans les listes. */
.hk-shell{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:0 14px 40px;}
.hk-grid{
  display:grid;
  grid-template-columns:265px minmax(0,1fr) 300px;
  gap:18px;
  align-items:start;
  margin-top:16px;
}
/* Fix MAJ1 : la colonne centrale ne doit JAMAIS déborder sur les colonnes
   latérales (bug « Derniers inscrits » qui glissait derrière le chat). */
.hk-main{min-width:0;overflow-x:clip;position:relative;z-index:1;}
/* Fix MAJ1b : les colonnes latérales ne sont PLUS collantes (sticky).
   Le sticky les faisait « suivre » le défilement et donnait l'impression
   que les blocs de droite se décalaient / passaient sous le contenu.
   Elles restent désormais sagement alignées en haut de leur colonne. */
.hk-side{display:flex;flex-direction:column;gap:16px;position:static;min-width:0;z-index:2;}
.hk-side>*{width:100%;min-width:0;}
@media(max-width:1180px){
  .hk-grid{grid-template-columns:240px minmax(0,1fr);}
  .hk-side-right{grid-column:1 / -1;position:static;flex-direction:row;flex-wrap:wrap;}
  .hk-side-right>*{flex:1 1 300px;}
}
@media(max-width:820px){
  .hk-grid{grid-template-columns:1fr;}
  .hk-side{position:static;flex-direction:row;flex-wrap:wrap;}
  .hk-side>*{flex:1 1 260px;}
  /* Vitrine visiteurs : sur mobile, la présentation (héros) passe AVANT
     les colonnes recrues/chat — l'ordre 3 colonnes est gardé sur desktop. */
  .hk-grid-vitrine .hk-main{order:1;}
  .hk-grid-vitrine .hk-side-left{order:2;}
  .hk-grid-vitrine .hk-side-right{order:3;}
  /* 📱 10.1.62 : même logique pour les pages CONNECTÉES — le CONTENU de la
     page d'abord, le chat/les missions/le butin ensuite. Avant, chaque page
     mobile commençait par ~3 écrans de colonne latérale avant d'arriver au
     vrai contenu (Règles, Casino, etc.) : c'était ça, le « trop compliqué ». */
  .hk-grid .hk-main{order:1;}
  .hk-grid .hk-side-left{order:2;}
  .hk-grid .hk-side-right{order:3;}
}

/* ------------------------------------------------------------
   4. HEADER / LOGO / NAV
   ------------------------------------------------------------ */
.hk-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 4px 0;
}
.hk-logo{display:flex;align-items:center;gap:14px;user-select:none;}
.hk-logo-skull{
  width:52px;height:52px;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%, #2a1219, #12060b 70%);
  border:1px solid var(--line-2);
  border-radius:14px;
  font-size:28px;
  box-shadow:var(--glow-blood), inset 0 0 14px rgba(var(--blood-rgb),.25);
  animation:skullPulse 4s ease-in-out infinite;
}
@keyframes skullPulse{
  0%,100%{box-shadow:0 0 14px rgba(var(--blood-rgb),.35), inset 0 0 12px rgba(var(--blood-rgb),.2);}
  50%{box-shadow:0 0 26px rgba(var(--blood-rgb),.6), inset 0 0 18px rgba(var(--blood-rgb),.35);}
}
.hk-logo-text{line-height:1;}
.hk-logo-title{
  font-family:var(--f-display);
  font-weight:900;
  font-size:30px;
  letter-spacing:2px;
  background:linear-gradient(180deg,#fff 5%,var(--gold-2) 38%,var(--gold) 55%,var(--gold-3) 90%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));
}
.hk-logo-title .k{color:transparent;background:linear-gradient(180deg,var(--blood-2),var(--blood) 45%,var(--blood-3));-webkit-background-clip:text;background-clip:text;}
.hk-logo-sub{
  font-family:var(--f-pixel);
  font-size:7px;
  color:var(--muted);
  letter-spacing:1px;
  margin-top:6px;
}
.hk-topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

/* Chip d'état de partie */
.hk-party{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(8px);
  font-family:var(--f-head);font-weight:700;font-size:13px;letter-spacing:.6px;
}
.hk-party .dot{width:9px;height:9px;border-radius:50%;}
.hk-party.on .dot{background:var(--ok);box-shadow:0 0 10px var(--ok);animation:blink 1.6s infinite;}
.hk-party.off .dot{background:var(--muted);}
@keyframes blink{50%{opacity:.35;}}
.hk-party .motkill{
  font-family:var(--f-pixel);font-size:9px;color:var(--gold);
  text-shadow:0 0 10px rgba(var(--gold-rgb),.6);
  animation:goldFlicker 3s infinite;
}
@keyframes goldFlicker{0%,92%,100%{opacity:1;}94%{opacity:.55;}96%{opacity:1;}98%{opacity:.7;}}

/* NAVIGATION */
.hk-nav{
  margin-top:14px;
  display:flex;align-items:stretch;gap:4px;
  padding:6px;
  background:linear-gradient(180deg,var(--nav-1),var(--nav-2)); /* 🎭 10.3.5 : teintes du thème */
  border:1px solid var(--line);
  border-bottom:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.05);
  overflow-x:auto;
  scrollbar-width:none;
  position:relative;
}
.hk-nav::-webkit-scrollbar{display:none;}
.hk-nav a{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:74px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--ink-soft);
  font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.5px;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:all .18s ease;
  white-space:nowrap;
}
.hk-nav a .ic{font-size:17px;filter:grayscale(.35);transition:all .18s ease;}
.hk-nav a:hover{color:#fff;background:rgba(var(--blood-rgb),.12);border-color:rgba(var(--blood-rgb),.25);text-shadow:none;transform:translateY(-1px);}
.hk-nav a:hover .ic{filter:none;transform:scale(1.15);}
.hk-nav a.active{
  color:#fff;
  background:linear-gradient(180deg,var(--blood),var(--blood-3));
  border-color:var(--blood-2);
  box-shadow:0 4px 16px rgba(var(--blood-rgb),.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.hk-nav a.active .ic{filter:none;}

/* 🎨 10.1.91 (demande de Jonas) — L'ONGLET ACTIF PREND LA COULEUR DE SON GROUPE.
   Les quatre groupes du menu ont chacun leur couleur (or pour 👤 Joueur, rouge
   pour 🔪 Killeurs, bleu pour ⚖️ Justiciers, vert pour 💰 Boutique) — mais
   l'onglet sélectionné était TOUJOURS rouge. Dans le groupe doré, la case
   active jurait avec son propre cadre.
   Chaque groupe porte déjà sa teinte dans --grp : la case active n'a qu'à s'en
   servir. Une seule règle, et les quatre couleurs suivent — y compris celles
   qu'on ajoutera plus tard.
   `color-mix` assombrit la teinte pour le bas du dégradé, sans avoir à écrire
   quatre variantes à la main ; le repli plus bas couvre les vieux navigateurs. */
.hk-nav-grp a.active{
  background:linear-gradient(180deg, var(--grp), color-mix(in srgb, var(--grp) 72%, #000));
  border-color:color-mix(in srgb, var(--grp) 80%, #fff);
  box-shadow:0 4px 16px color-mix(in srgb, var(--grp) 45%, transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
}
/* L'or et le vert sont clairs : du texte blanc dessus se lit mal. */
.hk-nav-grp.g-or a.active, .hk-nav-grp.g-vert a.active{color:#1c1206; text-shadow:none;}
.hk-nav-grp.g-or a.active .ic, .hk-nav-grp.g-vert a.active .ic{filter:none;}
/* Repli pour les navigateurs sans color-mix : la teinte pleine, sans dégradé. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .hk-nav-grp a.active{background:var(--grp); border-color:var(--grp); box-shadow:none;}
}
.hk-nav-grp a:hover{background:color-mix(in srgb, var(--grp) 14%, transparent);
                    border-color:color-mix(in srgb, var(--grp) 32%, transparent);}
.hk-nav a .notif-pill{
  position:absolute;transform:translate(16px,-4px);
  background:var(--gold);color:#221000;font-size:10px;font-weight:800;
  min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:9px;padding:0 4px;
  box-shadow:0 0 8px rgba(var(--gold-rgb),.8);
}

/* ------------------------------------------------------------
   5. HUD JOUEUR
   ------------------------------------------------------------ */
.hk-hud{
  margin-top:14px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-1);
  /* Fix MAJ1 : le HUD (et donc le menu de notifications qu'il contient)
     doit peindre AU-DESSUS des colonnes sticky qui suivent dans le DOM. */
  position:relative;
  z-index:80;
}
.hk-hud-id{display:flex;align-items:center;gap:12px;min-width:220px;}
.hk-hud-avatar{
  width:56px;height:56px;border-radius:12px;overflow:hidden;flex:0 0 auto;
  background:radial-gradient(circle at 50% 30%,#331722,#140910);
  border:1px solid var(--line-2);
  box-shadow:inset 0 0 12px rgba(0,0,0,.6);
  display:grid;place-items:center;
}
.hk-hud-avatar img{width:54px;height:54px;object-fit:cover;image-rendering:pixelated;}
.hk-hud-name{font-family:var(--f-head);font-weight:700;font-size:17px;letter-spacing:.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hk-hud-title{font-size:11px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;}
.hk-hud-level{flex:1 1 190px;min-width:170px;}
.hk-level-row{display:flex;justify-content:space-between;font-family:var(--f-head);font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
.hk-level-row b{color:var(--gold);}
.hk-xpbar{height:9px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.06);}
.hk-xpbar>i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--gold-3),var(--gold),var(--gold-2));
  box-shadow:0 0 10px rgba(var(--gold-rgb),.7);
  border-radius:6px;
  transition:width .6s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
}
.hk-xpbar>i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:xpShine 3.2s infinite;
}
@keyframes xpShine{60%{transform:translateX(100%);}100%{transform:translateX(100%);}}
.hk-hud-stats{display:flex;gap:8px;flex-wrap:wrap;}
.hk-res{
  display:flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:10px;
  background:var(--panel-3);
  border:1px solid var(--line);
  font-family:var(--f-head);font-weight:700;font-size:14px;
  transition:all .18s ease;cursor:default;
}
.hk-res:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.4);}
a.hk-res{color:inherit;cursor:pointer;} a.hk-res.gold{color:var(--gold);} a.hk-res.blood{color:var(--blood-2);} /* 10.2.0 : compteurs cliquables */
.hk-res .lbl{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.hk-res.gold{color:var(--gold);}
.hk-res.blood{color:var(--blood-2);}
.hk-hud-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}

/* Cloche notifications */
.hk-bell{position:relative;}
.hk-bell>button{
  width:42px;height:42px;border-radius:11px;cursor:pointer;
  background:var(--panel-3);border:1px solid var(--line);
  font-size:18px;color:var(--ink);
  transition:all .18s ease;
}
.hk-bell>button:hover{border-color:var(--gold);box-shadow:var(--glow-gold);transform:translateY(-1px);}
.hk-bell .count{
  position:absolute;top:-6px;right:-6px;
  background:linear-gradient(180deg,var(--blood-2),var(--blood-3));
  color:#fff;font-size:10px;font-weight:800;
  min-width:18px;height:18px;line-height:18px;text-align:center;
  border-radius:10px;padding:0 4px;
  border:2px solid var(--bg-1);
  animation:bellPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bellPop{from{transform:scale(0);}to{transform:scale(1);}}
/* Fix MAJ1b : le menu de notifications est en position:FIXED avec un
   z-index massif, et le JS le déplace à la racine du <body> (portail).
   Résultat : AUCUN empilement (colonnes, cartes, filtres, transforms)
   ne peut plus passer devant ni le couper — sur toutes les pages. */
.hk-bell-menu{
  position:fixed;right:14px;top:72px; /* repositionné précisément par le JS */
  width:min(330px, calc(100vw - 28px));
  max-height:min(420px, 70vh);
  overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(180deg,var(--menu-1),var(--menu-2)); /* 🎭 10.3.5 */
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
  z-index:99999;display:none;
  overscroll-behavior:contain;
}
.hk-bell-menu.open{display:block;animation:menuIn .22s ease;}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.hk-bell-menu .head{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:11px 14px;border-bottom:1px solid var(--line);
  font-family:var(--f-head);font-weight:700;
  position:sticky;top:0;background:var(--menu-1);z-index:2;
}
.hk-bell-menu .fermer{
  cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--muted);border-radius:8px;font-size:12px;line-height:1;padding:5px 8px;
}
.hk-bell-menu .fermer:hover{color:#fff;border-color:var(--line-2);}
/* Mobile : panneau pleine largeur */
@media(max-width:640px){
  .hk-bell-menu{
    left:12px !important;right:12px !important;top:64px;width:auto;
    max-height:calc(100vh - 90px);
  }
}
.hk-notif{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px;color:var(--ink-soft);}
.hk-notif.unread{background:rgba(var(--blood-rgb),.07);border-left:3px solid var(--blood);}
.hk-notif .t{font-size:10.5px;color:var(--muted);margin-top:2px;}
.hk-notif .ic{font-size:16px;}

/* ------------------------------------------------------------
   6. CARTES / PANNEAUX
   ------------------------------------------------------------ */
.hk-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  backdrop-filter:blur(8px);
  padding:16px;
  margin-bottom:16px;
  animation:cardIn .4s ease both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.hk-card-title{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-weight:700;font-size:16px;letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.hk-card-title::after{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:72px;
  background:linear-gradient(90deg,var(--blood),transparent);
}
.hk-card-title .right{margin-left:auto;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--f-body);font-weight:500;}

/* Bandeau héro de page */
.hk-hero{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(var(--blood-rgb),.32), transparent 60%),
    radial-gradient(500px 220px at 85% 100%, rgba(var(--gold-rgb),.14), transparent 60%),
    linear-gradient(160deg,var(--hero-1) 0%,var(--hero-2) 55%,var(--hero-3) 100%); /* 🎭 10.3.5 */
  padding:26px 24px;
  margin-bottom:18px;
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.06);
}
.hk-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.05) 50%,transparent 58%);
  transform:translateX(-100%);
  animation:heroSweep 6s ease-in-out infinite;
}
@keyframes heroSweep{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}
.hk-hero h1{
  font-family:var(--f-display);font-weight:900;font-size:26px;letter-spacing:1.5px;
  margin:0 0 4px;
  display:flex;align-items:center;gap:12px;
  text-shadow:0 3px 14px rgba(0,0,0,.7);
}
.hk-hero h1 .ic{filter:drop-shadow(0 0 10px rgba(var(--blood-rgb),.7));}
.hk-hero p{margin:0;color:var(--ink-soft);font-size:13.5px;max-width:640px;}
.hk-hero .hero-stats{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}

/* Petites stats (tuiles) */
.hk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 16px;}
.hk-stat{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:13px 12px;text-align:center;
  transition:all .2s ease;position:relative;overflow:hidden;
}
.hk-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blood),transparent);opacity:0;transition:opacity .2s;}
.hk-stat:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 8px 22px rgba(0,0,0,.45);}
.hk-stat:hover::before{opacity:1;}
.hk-stat .ic{font-size:21px;margin-bottom:4px;}
.hk-stat .val{font-family:var(--f-head);font-weight:700;font-size:21px;color:var(--gold);line-height:1.1;text-shadow:0 0 14px rgba(var(--gold-rgb),.35);}
.hk-stat .val.blood{color:var(--blood-2);text-shadow:0 0 14px rgba(var(--blood-rgb),.4);}
.hk-stat .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px;}

/* ------------------------------------------------------------
   7. BOUTONS
   ------------------------------------------------------------ */
.hk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;
  border-radius:11px;
  border:1px solid transparent;
  font-family:var(--f-head);font-weight:700;font-size:13px;letter-spacing:.8px;text-transform:uppercase;
  cursor:pointer;user-select:none;
  transition:all .18s ease;
  text-decoration:none;
  position:relative;overflow:hidden;
}
.hk-btn::after{ /* reflet au survol */
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .5s ease;
}
.hk-btn:hover::after{transform:translateX(120%);}
.hk-btn:active{transform:translateY(1px) scale(.99);}
.hk-btn.blood{
  background:linear-gradient(180deg,var(--blood-2),var(--blood-3));
  color:#fff;border-color:rgba(255,255,255,.14);
  box-shadow:0 5px 18px rgba(var(--blood-rgb),.4), inset 0 1px 0 rgba(255,255,255,.28);
}
.hk-btn.blood:hover{box-shadow:0 8px 26px rgba(var(--blood-rgb),.6);transform:translateY(-2px);color:#fff;text-shadow:none;}
.hk-btn.gold{
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));
  color:#241300;border-color:rgba(255,255,255,.2);
  box-shadow:0 5px 18px rgba(var(--gold-rgb),.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.hk-btn.gold:hover{box-shadow:0 8px 26px rgba(var(--gold-rgb),.55);transform:translateY(-2px);color:#241300;text-shadow:none;}
.hk-btn.ghost{
  background:var(--panel-3);color:var(--ink);border-color:var(--line);
}
.hk-btn.ghost:hover{border-color:var(--line-2);background:rgba(var(--blood-rgb),.1);color:#fff;text-shadow:none;transform:translateY(-1px);}
.hk-btn.ok{background:linear-gradient(180deg,#4fe08d,#1e9d55);color:#04240f;box-shadow:0 5px 16px rgba(67,209,124,.3);}
.hk-btn.ok:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(67,209,124,.5);color:#04240f;}
.hk-btn.sm{padding:6px 12px;font-size:11px;border-radius:8px;}
.hk-btn.xs{padding:4px 9px;font-size:10px;border-radius:7px;letter-spacing:.4px;}
.hk-btn.block{width:100%;}
.hk-btn:disabled,.hk-btn.disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6);}
.hk-btn:disabled:hover,.hk-btn.disabled:hover{transform:none;box-shadow:none;}

/* ------------------------------------------------------------
   8. FORMULAIRES
   ------------------------------------------------------------ */
.hk-input,.hk-select,.hk-textarea{
  width:100%;
  padding:11px 13px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--f-body);font-size:13px;
  transition:all .18s ease;
}
.hk-input::placeholder,.hk-textarea::placeholder{color:var(--muted);}
.hk-input:focus,.hk-select:focus,.hk-textarea:focus{
  outline:none;border-color:var(--blood);
  box-shadow:0 0 0 3px rgba(var(--blood-rgb),.18), var(--glow-blood);
  background:rgba(255,255,255,.07);
}
.hk-select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;}
.hk-select option{background:#1c0e15;color:var(--ink);}
.hk-textarea{min-height:96px;resize:vertical;}
.hk-label{display:block;font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);margin:0 0 6px;}
.hk-field{margin-bottom:14px;}
.hk-help{font-size:11px;color:var(--muted);margin-top:5px;}

/* ------------------------------------------------------------
   9. ALERTES / BADGES / TAGS
   ------------------------------------------------------------ */
.hk-alert{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r-md);
  font-size:13px;margin:0 0 14px;
  border:1px solid;
  animation:cardIn .3s ease;
}
.hk-alert.ok{background:var(--ok-bg);border-color:rgba(67,209,124,.35);color:var(--ok);}
.hk-alert.bad{background:var(--bad-bg);border-color:rgba(255,84,104,.35);color:var(--bad);}
.hk-alert.warn{background:var(--warn-bg);border-color:rgba(255,198,72,.35);color:var(--warn);}
.hk-alert.info{background:var(--info-bg);border-color:rgba(90,169,255,.35);color:var(--info);}

.hk-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:999px;
  font-family:var(--f-head);font-weight:700;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;
  border:1px solid;
  vertical-align:middle;
}
.hk-badge.admin{background:rgba(var(--blood-rgb),.16);border-color:rgba(var(--blood-rgb),.5);color:#ff8391;}
.hk-badge.arbitre{background:var(--warn-bg);border-color:rgba(255,198,72,.5);color:var(--warn);}
.hk-badge.vip{background:var(--vip-bg);border-color:rgba(185,139,255,.5);color:var(--vip);}
.hk-badge.membre{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--ink-soft);}
.hk-badge.ok{background:var(--ok-bg);border-color:rgba(67,209,124,.5);color:var(--ok);}
.hk-badge.bad{background:var(--bad-bg);border-color:rgba(255,84,104,.5);color:var(--bad);}
.hk-badge.warn{background:var(--warn-bg);border-color:rgba(255,198,72,.5);color:var(--warn);}
.hk-badge.info{background:var(--info-bg);border-color:rgba(90,169,255,.5);color:var(--info);}
.hk-badge.gold{background:rgba(var(--gold-rgb),.14);border-color:rgba(var(--gold-rgb),.55);color:var(--gold);}
.hk-badge.gang{background:rgba(var(--blood-rgb),.1);border-color:var(--line-2);color:var(--blood-2);}

/* --- MAJ1 : badges de rangs configurables (couleur via --rang) --- */
.hk-badge.rang{
  background:color-mix(in srgb, var(--rang, #999) 14%, transparent);
  border-color:color-mix(in srgb, var(--rang, #999) 55%, transparent);
  color:var(--rang, #ccc);
}
/* Infobulle des badges (attribut data-tip) */
[data-tip]{position:relative;cursor:help;}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) scale(.94);
  background:#1a0d14;color:var(--ink);border:1px solid var(--line-2);
  padding:7px 11px;border-radius:9px;
  font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;
  white-space:normal;width:max-content;max-width:230px;text-align:center;line-height:1.4;
  box-shadow:var(--shadow-2);
  opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease;
  z-index:150;
}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%) scale(1);}

/* --- MAJ1 : VIP (indépendant du rang) --- */
.hk-badge.vip-glow{animation:vipGlow 2.6s ease-in-out infinite;}
@keyframes vipGlow{
  0%,100%{box-shadow:0 0 4px rgba(var(--gold-rgb),.25);}
  50%{box-shadow:0 0 14px rgba(var(--gold-rgb),.65);}
}
.hk-vip-mini{
  color:var(--gold);font-size:12px;vertical-align:middle;
  text-shadow:0 0 8px rgba(var(--gold-rgb),.7);
  animation:vipGlow 2.6s ease-in-out infinite;border-radius:6px;
}
.hk-nom-vip{
  color:var(--gold) !important;
  text-shadow:0 0 10px rgba(var(--gold-rgb),.35);
  font-weight:700;
}
/* Cadre de profil exclusif VIP (discret, thème mafia) */
.hk-profile-cover.vip{
  border-color:rgba(var(--gold-rgb),.55);
  box-shadow:var(--glow-gold), var(--shadow-1), inset 0 1px 0 rgba(var(--gold-rgb),.25);
}
.hk-profile-cover.vip::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px 160px at 50% 0%, rgba(var(--gold-rgb),.12), transparent 70%);
}

/* Vie / états joueurs */
.pv-0{color:var(--bad);}
.pv-1{color:var(--warn);}
.pv-2{color:var(--ok);}
.pv-3{color:var(--muted);}

/* Rareté boutique */
.rar-commun{--rar:var(--rar-commun);}
.rar-peu_commun{--rar:var(--rar-peu_commun);} /* 🎖️ 10.1.69 */
.rar-rare{--rar:var(--rar-rare);}
.rar-epique{--rar:var(--rar-epique);}
.rar-mythique{--rar:var(--rar-mythique);} /* 🎖️ 10.1.69 */
.rar-legendaire{--rar:var(--rar-legendaire);}

/* ------------------------------------------------------------
   10. TABLEAUX / LISTES
   ------------------------------------------------------------ */
.hk-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.hk-table th{
  text-align:left;padding:10px 12px;
  font-family:var(--f-head);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line-2);
  background:rgba(255,255,255,.02);
}
.hk-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);}
/* 📱 10.2.3 : un tableau large défile DANS SON CADRE au lieu de pousser toute la
   page de côté sur un téléphone. À poser autour de n'importe quel .hk-table. */
.hk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.hk-table tbody tr{transition:background .15s ease, transform .15s ease;}
.hk-table tbody tr:hover{background:rgba(var(--blood-rgb),.07);}

.hk-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;margin:8px 0;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-left:3px solid transparent;
  border-radius:var(--r-md);
  transition:all .18s ease;
}
.hk-row:hover{border-left-color:var(--blood);background:rgba(var(--blood-rgb),.08);transform:translateX(4px);}
.hk-row .grow{flex:1;min-width:0;}
.hk-row .meta{font-size:11px;color:var(--muted);margin-top:2px;}

/* Avatars */
.hk-ava{border-radius:9px;background:radial-gradient(circle at 50% 25%,#30151f,#120810);border:1px solid var(--line);flex:0 0 auto;object-fit:cover;image-rendering:pixelated;}
.hk-ava.s24{width:26px;height:26px;}
.hk-ava.s32{width:34px;height:34px;}
.hk-ava.s48{width:48px;height:48px;}
.hk-ava.s64{width:64px;height:64px;}
.hk-ava.ring-gold{border-color:var(--gold);box-shadow:0 0 10px rgba(var(--gold-rgb),.4);}
.hk-ava.ring-blood{border-color:var(--blood);box-shadow:0 0 10px rgba(var(--blood-rgb),.4);}

/* Podium classement */
.hk-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;align-items:end;margin-bottom:18px;}
.hk-podium .step{
  text-align:center;padding:16px 10px 14px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--panel-2);
  position:relative;overflow:hidden;
  transition:transform .2s ease;
}
.hk-podium .step:hover{transform:translateY(-4px);}
.hk-podium .step .medal{font-size:26px;}
.hk-podium .step .name{font-family:var(--f-head);font-weight:700;font-size:15px;margin-top:6px;}
.hk-podium .step .score{font-size:12px;color:var(--muted);}
.hk-podium .p1{border-color:rgba(var(--gold-rgb),.65);background:linear-gradient(180deg,rgba(var(--gold-rgb),.16),var(--panel-2) 70%);box-shadow:var(--glow-gold);}
.hk-podium .p2{border-color:rgba(200,205,215,.4);background:linear-gradient(180deg,rgba(200,205,215,.1),var(--panel-2) 70%);}
.hk-podium .p3{border-color:rgba(205,127,50,.45);background:linear-gradient(180deg,rgba(205,127,50,.12),var(--panel-2) 70%);}
@media(max-width:640px){.hk-podium{grid-template-columns:1fr;}}

/* ------------------------------------------------------------
   11. ONGLETS / PAGINATION
   ------------------------------------------------------------ */
.hk-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hk-tab{
  padding:9px 16px;border-radius:10px;
  background:var(--panel-3);border:1px solid var(--line);
  color:var(--ink-soft);
  font-family:var(--f-head);font-weight:700;font-size:12px;letter-spacing:.6px;text-transform:uppercase;
  cursor:pointer;transition:all .18s ease;text-decoration:none;
}
.hk-tab:hover{border-color:var(--line-2);color:#fff;transform:translateY(-1px);text-shadow:none;}
.hk-tab.active{
  background:linear-gradient(180deg,var(--blood),var(--blood-3));
  border-color:var(--blood-2);color:#fff;
  box-shadow:0 4px 14px rgba(var(--blood-rgb),.4);
}
.hk-pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px;}
.hk-pagination .cur{font-family:var(--f-head);font-weight:700;color:var(--gold);}

/* ------------------------------------------------------------
   12. BARRES DE PROGRESSION / MISSIONS
   ------------------------------------------------------------ */
.hk-progress{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.05);}
.hk-progress>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blood-3),var(--blood),var(--blood-2));box-shadow:0 0 10px rgba(var(--blood-rgb),.5);transition:width .5s ease;}
.hk-progress.gold>i{background:linear-gradient(90deg,var(--gold-3),var(--gold),var(--gold-2));box-shadow:0 0 10px rgba(var(--gold-rgb),.5);}
.hk-progress.ok>i{background:linear-gradient(90deg,#1e9d55,var(--ok));box-shadow:0 0 10px rgba(67,209,124,.5);}

.hk-mission{
  display:flex;align-items:center;gap:12px;
  padding:12px;margin:8px 0;
  border-radius:var(--r-md);
  background:var(--panel-3);border:1px solid var(--line);
  transition:all .18s ease;
}
.hk-mission:hover{border-color:var(--line-2);}
.hk-mission .ic{font-size:22px;width:40px;height:40px;display:grid;place-items:center;background:rgba(var(--blood-rgb),.1);border:1px solid var(--line-2);border-radius:10px;flex:0 0 auto;}
.hk-mission.done .ic{background:var(--ok-bg);border-color:rgba(67,209,124,.4);}
.hk-mission .grow{flex:1;min-width:0;}
.hk-mission .name{font-family:var(--f-head);font-weight:700;font-size:13.5px;}
.hk-mission .rew{font-size:11px;color:var(--gold);}

/* ------------------------------------------------------------
   13. CHAT
   ------------------------------------------------------------ */
.hk-chat{display:flex;flex-direction:column;height:560px;} /* 10.1.44 : chat rallongé */
.hk-chat-log{
  flex:1;overflow-y:auto;
  padding:10px;
  background:rgba(0,0,0,.28);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  font-size:12.5px;
  scroll-behavior:smooth;
}
/* --- MAJ1 : messages façon Habbo (tête + badges + pseudo + texte) --- */
.hk-chat-msg{
  display:flex;align-items:flex-start;gap:7px;
  margin:0 0 7px;line-height:1.4;
  animation:chatIn .25s ease;
  min-width:0;
}
@keyframes chatIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.hk-chat-msg .tete{
  width:26px;height:26px;flex:0 0 auto;
  border-radius:7px;object-fit:cover;object-position:top;
  image-rendering:pixelated;
  background:radial-gradient(circle at 50% 30%,#30151f,#120810);
  border:1px solid var(--line);
  margin-top:1px;
}
.hk-chat-msg .corps{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word;}
/* Fix MAJ1b — COULEURS DES PSEUDOS DU CHAT (lisibles sur fond sombre).
   Les !important écrasent aussi les vieux styles inline « color:black »
   qu'un ancien chat.js encore en cache pourrait injecter.
   Priorité : rang du staff > VIP > blanc (membre). */
.hk-chat-msg .p{font-weight:700;cursor:pointer;color:#ffffff !important;} /* Membre : BLANC */
.hk-chat-msg .p:hover{text-decoration:underline;}
/* 🛡️ 10.1.55 — Le bouclier des Responsables des jeux, discret et net. */
.hk-ic-resp{font-size:.92em;line-height:1;vertical-align:baseline;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}
.hk-chat-msg .p.grade-Membre{color:#ffffff !important;}
.hk-chat-msg .p.grade-Fondateur{color:#e8b64c !important;text-shadow:0 0 8px rgba(var(--gold-rgb),.4);}   /* Fondateur : OR */
.hk-chat-msg .p.grade-Responsable{color:#5aa9ff !important;text-shadow:0 0 8px rgba(90,169,255,.35);} /* Responsable des jeux : BLEU */
.hk-chat-msg .p.grade-Admin{color:#ff5468 !important;text-shadow:0 0 8px rgba(var(--blood-rgb),.4);}      /* Admin : ROUGE */
.hk-chat-msg .p.grade-Moderateur,
.hk-chat-msg .p.grade-Modérateur{color:#5aa9ff !important;text-shadow:0 0 8px rgba(90,169,255,.35);} /* Modo : BLEU */
.hk-chat-msg .p.grade-Arbitre{color:#ffb648 !important;text-shadow:0 0 8px rgba(255,182,72,.35);}   /* Arbitre : ORANGE */
.hk-chat-msg .p.vip,
.hk-chat-msg .p.grade-VIP{color:var(--gold) !important;text-shadow:0 0 8px rgba(var(--gold-rgb),.4);}    /* VIP : DORÉ */
/* Ceinture + bretelles : tout lien/gras écrit en noir par un vieux script
   dans la zone de chat repasse en blanc. */
.hk-chat-log a,.hk-chat-log b{color:#fff !important;}
.hk-chat-log a.grade-Admin,.hk-chat-log b.grade-Admin{color:#ff5468 !important;}
.hk-chat-msg .bg{font-size:11px;margin-right:3px;vertical-align:middle;cursor:help;}
.hk-chat-msg .bg.vip{color:var(--gold);text-shadow:0 0 8px rgba(var(--gold-rgb),.8);}
.hk-chat-msg .h{color:var(--muted);font-size:9.5px;margin-left:6px;white-space:nowrap;}
.hk-chat-msg .del{color:var(--muted);cursor:pointer;font-size:10px;margin-left:6px;opacity:0;transition:opacity .15s;}
.hk-chat-msg:hover .del{opacity:1;}
.hk-chat-msg .del:hover{color:var(--bad);}
.hk-chat-msg.sys .corps{color:var(--muted);font-style:italic;}
/* 💬 10.1.29 — actions au survol (↩ répondre, 🤫 murmurer, ✏️ modifier, ✖ supprimer) */
.hk-chat-msg .acts{display:inline-flex;gap:5px;margin-left:6px;vertical-align:middle;}
.hk-chat-msg .act{color:var(--muted);cursor:pointer;font-size:11px;opacity:0;transition:opacity .15s,color .15s;}
.hk-chat-msg:hover .act{opacity:.85;}
.hk-chat-msg .act:hover{color:var(--gold);opacity:1;}
.hk-chat-msg .act.del:hover{color:var(--bad);}
@media (hover:none){ .hk-chat-msg .act,.hk-chat-msg .del{opacity:.55;} }
.hk-chat-msg .rep-quote{font-size:10.5px;color:var(--muted);border-left:2px solid var(--line);padding:1px 0 1px 7px;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hk-chat-msg .rep-quote .rq-p{color:var(--gold);font-weight:700;}
.hk-chat-msg.murmure .corps{background:rgba(150,90,220,.12);border:1px dashed rgba(170,120,230,.45);border-radius:8px;padding:4px 8px;}
.hk-chat-msg .mur-tag{color:#c39bff;font-weight:700;font-size:10.5px;}
.hk-chat-msg .edited{color:var(--muted);font-size:9.5px;font-style:italic;}
.hk-chat-reply{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(var(--gold-rgb),.10);border:1px solid rgba(var(--gold-rgb),.35);border-radius:8px;padding:5px 10px;margin:6px 0 0;font-size:11.5px;color:var(--txt);}
.hk-chat-reply .x{cursor:pointer;color:var(--muted);font-weight:700;}
.hk-chat-reply .x:hover{color:var(--bad);}
.hk-chat-reply[hidden]{display:none !important;} /* 10.1.44 : la barre de réponse ne laisse plus de bulle vide */
.hk-chat-astuce{font-size:10px;color:var(--muted);margin-top:6px;line-height:1.5;}
.hk-chat-astuce b{color:var(--gold);}
.hk-chat-astuce code{background:var(--panel-3);padding:0 4px;border-radius:4px;color:#c39bff;}
.hk-chat-form{display:flex;gap:8px;margin-top:9px;}
.hk-chat-form .hk-input{flex:1;padding:9px 12px;font-size:12.5px;min-width:0;}
/* Onglets de salons (public / VIP) */
.hk-chat-salons{display:flex;gap:6px;margin-bottom:8px;}
.hk-chat-salons button{
  flex:1;padding:6px 8px;border-radius:9px;cursor:pointer;
  background:var(--panel-3);border:1px solid var(--line);color:var(--ink-soft);
  font-family:var(--f-head);font-weight:700;font-size:11px;letter-spacing:.5px;
  transition:all .15s ease;
}
.hk-chat-salons button.actif{background:linear-gradient(180deg,var(--blood),var(--blood-3));border-color:var(--blood-2);color:#fff;}
.hk-chat-salons button.vip.actif{background:linear-gradient(180deg,var(--gold-2),var(--gold-3));border-color:var(--gold);color:#241300;}

/* ------------------------------------------------------------
   14. MODALE / LIGHTBOX
   ------------------------------------------------------------ */
.hk-modal-back{
  position:fixed;inset:0;z-index:90;
  background:rgba(5,2,4,.82);backdrop-filter:blur(5px);
  display:none;place-items:center;padding:20px;
}
.hk-modal-back.open{display:grid;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.hk-modal{
  width:min(560px,96vw);max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,#22101a,#130a10);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2), var(--glow-blood);
  padding:20px;
  animation:modalIn .28s cubic-bezier(.34,1.4,.64,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(14px);}to{opacity:1;transform:none;}}
.hk-lightbox-img{max-width:min(1200px,96vw);max-height:90vh;border-radius:12px;border:1px solid var(--line-2);box-shadow:var(--shadow-2);image-rendering:auto;}
/* Miniature du screen de kill : cliquable pour agrandir (lightbox) */
.hk-screen-thumb{max-height:170px;max-width:100%;border-radius:10px;border:1px solid var(--line-2);background:var(--panel-3);cursor:zoom-in;display:block;transition:transform .12s ease, box-shadow .12s ease;}
.hk-screen-thumb:hover{transform:scale(1.02);box-shadow:0 0 0 2px var(--gold), 0 10px 24px rgba(0,0,0,.55);}
.hk-modal-back.open{cursor:zoom-out;}

/* ------------------------------------------------------------
   14b. VISIONNEUSE DE SCREENS (10.1.32) — zoom, déplacement,
        taille réelle 100% (qualité maximale du fichier).
   ------------------------------------------------------------ */
.hk-lb-back{position:fixed;inset:0;z-index:95;display:none;flex-direction:column;background:rgba(4,2,3,.93);backdrop-filter:blur(6px);}
.hk-lb-back.open{display:flex;animation:fadeIn .18s ease;}
.hk-lb-bar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 14px;background:linear-gradient(180deg,rgba(22,9,15,.95),rgba(22,9,15,.55));border-bottom:1px solid var(--line);}
.hk-lb-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;transition:border-color .12s ease, transform .12s ease;}
.hk-lb-btn:hover{border-color:var(--gold);transform:translateY(-1px);color:var(--ink);}
.hk-lb-close{border-color:rgba(255,84,104,.5);}
.hk-lb-close:hover{border-color:var(--bad);color:var(--bad);}
.hk-lb-pct{min-width:58px;text-align:center;font-family:var(--f-head);font-weight:800;color:var(--gold);font-size:14px;}
.hk-lb-sep{width:1px;height:22px;background:var(--line);}
.hk-lb-vp{flex:1;overflow:hidden;position:relative;cursor:grab;touch-action:none;}
.hk-lb-vp.drag{cursor:grabbing;}
.hk-lb-img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;max-height:none;user-select:none;-webkit-user-drag:none;image-rendering:auto;box-shadow:0 14px 44px rgba(0,0,0,.65);border-radius:4px;}
.hk-lb-hint{padding:8px 12px;text-align:center;font-size:12px;color:var(--ink-mut);background:linear-gradient(0deg,rgba(22,9,15,.95),rgba(22,9,15,.4));border-top:1px solid var(--line);}
@media (max-width:640px){.hk-lb-hint{display:none;}.hk-lb-btn{font-size:12px;padding:6px 9px;}}

/* ------------------------------------------------------------
   15. TICKER ANNONCE
   ------------------------------------------------------------ */
.hk-ticker{
  display:flex;align-items:center;gap:12px;
  margin-top:12px;
  border:1px solid rgba(var(--gold-rgb),.35);
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.12),rgba(var(--gold-rgb),.04) 40%,rgba(var(--gold-rgb),.12));
  border-radius:11px;
  padding:8px 14px;
  overflow:hidden;
  font-size:13px;
}
.hk-ticker .tag{
  flex:0 0 auto;
  font-family:var(--f-head);font-weight:700;font-size:11px;letter-spacing:1px;
  color:#241300;background:linear-gradient(180deg,var(--gold-2),var(--gold-3));
  padding:3px 10px;border-radius:999px;
}
.hk-ticker .txt{white-space:nowrap;overflow:hidden;position:relative;flex:1;}
.hk-ticker .txt>span{display:inline-block;padding-left:100%;animation:tick 26s linear infinite;}
.hk-ticker .txt>span:hover{animation-play-state:paused;}
@keyframes tick{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* ------------------------------------------------------------
   16. WANTED (mises à prix)
   ------------------------------------------------------------ */
.hk-wanted{
  position:relative;
  border-radius:var(--r-md);
  border:1px solid rgba(var(--gold-rgb),.4);
  background:
    radial-gradient(220px 120px at 50% 0%, rgba(var(--gold-rgb),.14), transparent 70%),
    linear-gradient(180deg,#241017,#150a10);
  padding:16px 14px 14px;
  text-align:center;
  transition:all .2s ease;
  overflow:hidden;
}
.hk-wanted:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--glow-gold),var(--shadow-1);}
.hk-wanted .wanted-word{
  font-family:var(--f-display);font-weight:900;letter-spacing:5px;font-size:15px;
  color:var(--gold);text-shadow:0 0 12px rgba(var(--gold-rgb),.5);
}
.hk-wanted .prize{
  font-family:var(--f-head);font-weight:700;font-size:20px;color:var(--gold-2);
  text-shadow:0 0 16px rgba(var(--gold-rgb),.6);
}
.hk-wanted .dead-stamp{
  position:absolute;top:38%;left:50%;
  transform:translate(-50%,-50%) rotate(-16deg);
  font-family:var(--f-display);font-weight:900;font-size:26px;letter-spacing:4px;
  color:var(--blood);border:3px solid var(--blood);border-radius:8px;padding:2px 14px;
  opacity:.85;text-shadow:none;pointer-events:none;
  background:rgba(10,4,6,.55);
}

/* ------------------------------------------------------------
   17. BOUTIQUE
   ------------------------------------------------------------ */
.hk-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.hk-item{
  position:relative;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  border-top:2px solid var(--rar,var(--line));
  background:var(--panel-2);
  padding:16px 12px 13px;
  text-align:center;
  transition:all .2s ease;
  overflow:hidden;
}
.hk-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:64px;
  background:radial-gradient(140px 60px at 50% 0%,color-mix(in srgb,var(--rar,#fff) 22%,transparent),transparent 75%);
  pointer-events:none;
}
.hk-item:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.5);border-color:var(--rar,var(--line-2));}
.hk-item .ic{font-size:38px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));position:relative;}
.hk-item .nm{font-family:var(--f-head);font-weight:700;font-size:14.5px;margin-top:6px;}
.hk-item .rar{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--rar,var(--muted));font-weight:700;}
.hk-item .pr{font-family:var(--f-head);font-weight:700;font-size:18px;color:var(--gold);margin:7px 0 2px;}
.hk-item .ds{font-size:11px;color:var(--muted);line-height:1.45;min-height:46px;margin-bottom:9px;}

/* ------------------------------------------------------------
   18. CASINO
   ------------------------------------------------------------ */
.hk-casino-table{
  border-radius:var(--r-lg);
  border:1px solid rgba(var(--gold-rgb),.3);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(21,84,45,.5), transparent 70%),
    linear-gradient(180deg,#132b1c,#0c1810 70%);
  padding:18px;
}
.hk-slot-reels{display:flex;justify-content:center;gap:10px;margin:14px 0;}
.hk-reel{
  width:74px;height:74px;
  font-size:38px;
  background:linear-gradient(180deg,#241222,#120a12);
  border:2px solid var(--gold-3);
  border-radius:12px;
  box-shadow:inset 0 4px 14px rgba(0,0,0,.7), 0 0 12px rgba(var(--gold-rgb),.2);
  overflow:hidden;position:relative;
}
/* MAJ1 : vrai rouleau vertical — une bande de symboles défile dans la fenêtre */
.hk-reel .bande{
  display:flex;flex-direction:column;align-items:center;
  will-change:transform;
}
.hk-reel .bande>span{
  height:70px;display:grid;place-items:center;flex:0 0 auto;width:70px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.hk-reel.tourne .bande{animation:bandeDefile .38s linear infinite;filter:blur(1.5px);}
@keyframes bandeDefile{from{transform:translateY(0);}to{transform:translateY(-350px);}} /* 5 symboles ×70px */
.hk-reel.stop .bande{transition:transform .45s cubic-bezier(.22,1.1,.36,1);filter:none;}
.hk-reel.stop{animation:reelClac .3s ease;}
@keyframes reelClac{0%{transform:translateY(-4px);}55%{transform:translateY(2px);}100%{transform:none;}}
/* Ligne de gain qui clignote */
.hk-slot-reels.gagne .hk-reel{animation:reelWin 1s ease 2;border-color:var(--gold);}
@keyframes reelWin{
  0%,100%{box-shadow:inset 0 4px 14px rgba(0,0,0,.7), 0 0 12px rgba(var(--gold-rgb),.2);}
  50%{box-shadow:inset 0 4px 14px rgba(0,0,0,.7), 0 0 26px rgba(var(--gold-rgb),.85);}
}
/* Jackpot : secousse + flash doré sur toute la machine */
.hk-casino-table.jackpot{animation:jackpotShake .7s ease 2;}
@keyframes jackpotShake{
  0%,100%{transform:none;}
  20%{transform:translate(-3px,1px) rotate(-.4deg);}
  40%{transform:translate(3px,-1px) rotate(.4deg);}
  60%{transform:translate(-2px,1px);}
  80%{transform:translate(2px,-1px);}
}
/* Pluie de pièces (jackpot) */
.hk-piece-pluie{
  position:absolute;top:-20px;font-size:20px;pointer-events:none;z-index:5;
  animation:pieceTombe 1.4s ease-in forwards;
}
@keyframes pieceTombe{
  from{transform:translateY(0) rotate(0);opacity:1;}
  to{transform:translateY(320px) rotate(540deg);opacity:0;}
}
.hk-slot-resultat[hidden]{display:none;}
.hk-reel.spin{animation:reelSpinLegacy .12s linear infinite;} /* héritage */
@keyframes reelSpinLegacy{from{transform:translateY(-3px);filter:blur(2px);}to{transform:translateY(3px);filter:blur(2px);}}
.hk-coin-flip{font-size:64px;display:inline-block;}
.hk-coin-flip.flip{animation:coinFlip 1s cubic-bezier(.3,.7,.4,1);}
@keyframes coinFlip{0%{transform:rotateY(0);}100%{transform:rotateY(1080deg);}}
.hk-revolver{font-size:60px;display:inline-block;transition:transform .3s;}
.hk-revolver.spin{animation:barrelSpin 1s cubic-bezier(.2,.8,.3,1);}
@keyframes barrelSpin{from{transform:rotate(0);}to{transform:rotate(1440deg);}}

/* ------------------------------------------------------------
   19. DUELS
   ------------------------------------------------------------ */
.hk-duel-vs{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:14px;border-radius:var(--r-md);
  background:var(--panel-2);border:1px solid var(--line);
  margin:10px 0;transition:all .2s ease;
}
.hk-duel-vs:hover{border-color:var(--line-2);}
.hk-duel-vs .fighter{display:flex;align-items:center;gap:10px;min-width:0;}
.hk-duel-vs .fighter.right{flex-direction:row-reverse;text-align:right;}
.hk-duel-vs .vs{
  font-family:var(--f-display);font-weight:900;font-size:22px;
  color:var(--blood);text-shadow:0 0 14px rgba(var(--blood-rgb),.6);
  animation:vsPulse 2s ease-in-out infinite;
}
@keyframes vsPulse{50%{text-shadow:0 0 26px rgba(var(--blood-rgb),.95);transform:scale(1.08);}}
.hk-duel-pot{
  text-align:center;font-family:var(--f-head);font-weight:700;color:var(--gold);
}

/* ------------------------------------------------------------
   20. SUCCÈS
   ------------------------------------------------------------ */
.hk-succes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;}
.hk-succes{
  display:flex;gap:12px;align-items:center;
  padding:13px;border-radius:var(--r-md);
  background:var(--panel-2);border:1px solid var(--line);
  transition:all .2s ease;
}
.hk-succes .ic{
  width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;font-size:23px;
  border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.hk-succes.unlocked{border-color:rgba(var(--gold-rgb),.45);background:linear-gradient(180deg,rgba(var(--gold-rgb),.1),var(--panel-2) 80%);}
.hk-succes.unlocked .ic{background:rgba(var(--gold-rgb),.15);border-color:var(--gold-3);box-shadow:var(--glow-gold);}
.hk-succes.locked{opacity:.62;filter:grayscale(.5);}
.hk-succes .nm{font-family:var(--f-head);font-weight:700;font-size:13px;}
.hk-succes .ds{font-size:11px;color:var(--muted);}

/* ------------------------------------------------------------
   21. FICHE JOUEUR
   ------------------------------------------------------------ */
.hk-profile-cover{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:
    radial-gradient(560px 240px at 50% -40px, rgba(var(--blood-rgb),.35), transparent 65%),
    linear-gradient(165deg,#2c1019,#150a10 60%);
  padding:14px 16px 12px; /* 📉 10.1.69 (Jonas) : en-tête de profil réduit pour tous */
  text-align:center;
  margin-bottom:16px;
}
.hk-profile-cover .full-ava{
  height:100px;image-rendering:pixelated;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.7));
}
.hk-profile-name{
  font-family:var(--f-display);font-weight:900;font-size:20px;letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:5px;
}
.hk-profile-name .hk-badge{font-size:10px;padding:2px 8px;}
.hk-profile-badges{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:8px;}
.hk-profile-badges .hk-badge{font-size:10px;padding:2px 8px;}
/* 🧍 10.1.71 : états à gauche, avatar centré et agrandi */
.hk-profile-haut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:4px;}
.hk-profile-etats{display:flex;flex-direction:column;align-items:flex-start;gap:6px;justify-self:start;text-align:left;}
.hk-profile-etats .hk-badge{font-size:10px;}
/* 🎖️ 10.1.71 : collection plus grande, mieux espacée, description en infobulle */
.hk-profile-titres{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:14px 0 6px;}
.hk-profile-titres img{filter:drop-shadow(0 5px 11px rgba(0,0,0,.55));transition:transform .15s ease;}
.hk-profile-titres span{cursor:help;}
.hk-profile-titres span:hover img{transform:translateY(-4px) scale(1.07);}
@media (max-width:640px){
  .hk-profile-titres{gap:8px;margin:10px 0 4px;}
  .hk-profile-titres img{width:56px;height:56px;}
  .hk-profile-haut{gap:6px;}
  .hk-profile-etats .hk-badge{font-size:9px;padding:2px 6px;}
  .hk-profile-cover .full-ava{height:112px !important;}
}
.hk-profile-title{color:var(--gold);font-family:var(--f-head);font-weight:600;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;}
.hk-profile-cover .hk-mt{margin-top:6px;}

/* ------------------------------------------------------------
   22. UTILITAIRES
   ------------------------------------------------------------ */
.hk-flex{display:flex;gap:10px;align-items:center;}
.hk-flex.wrap{flex-wrap:wrap;}
.hk-flex.between{justify-content:space-between;}
.hk-flex.center{justify-content:center;}
/* Fix MAJ1 : minmax(0,1fr) empêche une colonne au contenu large de faire
   déborder la grille hors de sa carte (bug page Killeurs). */
.hk-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.hk-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.hk-grid-2>*,.hk-grid-3>*{min-width:0;}
@media(max-width:1240px){.hk-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.hk-grid-2,.hk-grid-3{grid-template-columns:1fr;}}
.hk-card{min-width:0;}
/* MAJ 10.1.3 : fini l'empilement de lettres — les pseudos ne se coupent
   JAMAIS au milieu d'un mot. S'ils manquent vraiment de place, ils se
   terminent proprement par « … » sur UNE seule ligne. */
.hk-row .grow{overflow-wrap:break-word;}
.hk-row .grow a,.player-name a{
  display:inline-block;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  vertical-align:bottom;
  font-size:13.5px;font-weight:600;
  word-break:normal;overflow-wrap:normal;
}
/* Les métas (« ⚔️ 2 kills », « Inscrit il y a 1 h ») restent sur UNE ligne */
.hk-row .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;}
/* 10.1.21 : sur les cartes de TEXTE (reglement), les explications se deploient
   sur plusieurs lignes au lieu d'etre coupees par le « … ». */
.hk-rows-texte .hk-row .meta{white-space:normal;overflow:visible;text-overflow:clip;}
.hk-center{text-align:center;}
.hk-muted{color:var(--muted);}
.hk-gold{color:var(--gold);}
.hk-blood{color:var(--blood-2);}
.hk-ok{color:var(--ok);}
.hk-small{font-size:11.5px;}
.hk-mt{margin-top:14px;}
.hk-mb0{margin-bottom:0;}
.hk-empty{
  text-align:center;padding:36px 16px;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.015);
}
.hk-empty .big{font-size:44px;margin-bottom:8px;filter:grayscale(.3);}
.hk-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);border:0;margin:16px 0;}
.hk-kbd{font-family:var(--f-pixel);font-size:9px;background:rgba(255,255,255,.07);padding:3px 7px;border-radius:6px;border:1px solid var(--line);}

/* Toasts */
#hk-toasts{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:8px;}
.hk-toast{
  min-width:240px;max-width:340px;
  padding:12px 15px;border-radius:12px;
  background:linear-gradient(180deg,#241119,#140a10);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-2);
  font-size:13px;
  animation:toastIn .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes toastIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:none;}}
.hk-toast.out{opacity:0;transform:translateX(40px);transition:all .3s ease;}

/* Compteur (countdown) */
.hk-countdown{display:flex;gap:8px;justify-content:center;}
.hk-countdown .unit{
  min-width:58px;padding:8px 6px;text-align:center;
  background:rgba(0,0,0,.35);border:1px solid var(--line-2);border-radius:10px;
}
.hk-countdown .unit b{display:block;font-family:var(--f-head);font-weight:700;font-size:22px;color:var(--gold);}
.hk-countdown .unit span{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);}

/* Footer */
.hk-footer{
  margin-top:26px;padding:18px 8px 6px;
  border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:11.5px;line-height:1.8;
}
.hk-footer .fan{color:var(--ink-soft);}

/* ============================================================
   🔤 10.1.29 — ANNUAIRE DES MEMBRES PAR LETTRE (repliable)
   ============================================================ */
.hk-az-index{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 12px;}
.hk-az-btn{min-width:30px;padding:5px 8px;border-radius:8px;cursor:pointer;font-weight:700;
  background:var(--panel-2);color:var(--txt);border:1px solid var(--line);font-family:var(--f-head);
  transition:background .15s,color .15s,border-color .15s;}
.hk-az-btn:hover{background:var(--gold);color:#12080c;border-color:var(--gold);}
.hk-az-btn.all{color:var(--gold);}
.hk-letter-group{margin-bottom:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);}
.hk-letter-head{width:100%;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;
  padding:11px 14px;background:var(--panel-2);color:var(--txt);border:0;font-family:var(--f-head);font-size:15px;}
.hk-letter-head:hover{background:var(--panel-3);}
.hk-letter-head .lt{font-weight:800;color:var(--gold);min-width:20px;}
.hk-letter-head .n{color:var(--muted);font-size:12px;font-family:var(--f-body);font-weight:400;}
.hk-letter-head .chev{margin-left:auto;color:var(--muted);transition:transform .18s;}
.hk-letter-group.ouvert .hk-letter-head .chev{transform:rotate(90deg);}
.hk-letter-body{padding:12px;}
.hk-members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}

/* ============================================================
   🔎 10.1.29 — AUTOCOMPLÉTION DES PSEUDOS (liste déroulante)
   ============================================================ */
.hk-ac-list{position:fixed;z-index:200;max-height:230px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.45);}
.hk-ac-item{display:flex;align-items:center;gap:9px;padding:7px 11px;cursor:pointer;font-size:13px;}
.hk-ac-item:hover,.hk-ac-item.actif{background:var(--panel-3);}
.hk-ac-item img{width:24px;height:24px;border-radius:6px;object-fit:cover;object-position:top;image-rendering:pixelated;border:1px solid var(--line);}
.hk-ac-item .lvl{margin-left:auto;color:var(--muted);font-size:11px;}

/* ------------------------------------------------------------
   23. CASINO ANIMÉ (10.1.33) — la roue qui tourne & les dés 3D
   ------------------------------------------------------------ */
/* 🎡 La roue de la roulette */
.hk-roue-wrap{position:relative;width:220px;height:228px;margin:12px auto 4px;}
.hk-roue-pointeur{position:absolute;top:-4px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:17px;z-index:3;text-shadow:0 2px 6px rgba(0,0,0,.65);}
.hk-roue-disque{position:absolute;left:0;top:8px;width:220px;height:220px;will-change:transform;}
.hk-roue-disque.spin{transition:transform 4.2s cubic-bezier(.12,.62,.06,1);}
.hk-roue-svg{display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));}
.hk-roue-bille{position:absolute;left:0;top:8px;width:220px;height:220px;pointer-events:none;z-index:2;will-change:transform;}
.hk-roue-bille.spin{transition:transform 4.2s cubic-bezier(.12,.62,.06,1);}
.hk-roue-bille .dot{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff,#cfd3da 60%,#8f96a3);box-shadow:0 1px 4px rgba(0,0,0,.7);transform:translateY(-96px);transition:transform .95s ease-out 3.3s;}
.hk-roue-bille.spin .dot{transform:translateY(-72px);}   /* la bille glisse dans les cases en fin de course */
.hk-roue-bille.pose .dot{transform:translateY(-72px);transition-delay:0s;}
.hk-roue-numres{display:inline-block;min-width:46px;padding:9px 13px;border-radius:50%;border:3px solid var(--gold);color:#fff;font-family:var(--f-head);font-weight:800;font-size:20px;box-shadow:0 6px 16px rgba(0,0,0,.45);}
/* Résultat révélé à la fin de l'animation */
.hk-anim-res{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;text-align:center;margin:6px 0 2px;}
.hk-anim-res.show{opacity:1;transform:none;}
/* 🎲 Les dés 3D */
.hk-des-scene{display:flex;gap:30px;justify-content:center;align-items:center;height:98px;margin:10px 0 4px;perspective:560px;}
.hk-de{width:54px;height:54px;position:relative;transform-style:preserve-3d;transform:rotateX(24deg) rotateY(-34deg);will-change:transform;}
.hk-de.roll{transition:transform 1.75s cubic-bezier(.18,.8,.22,1);}
.hk-de-face{position:absolute;inset:0;background:linear-gradient(145deg,#f7efe7,#e3d4c7);border:1px solid #c9b6a8;border-radius:9px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:7px;box-shadow:inset 0 0 10px rgba(0,0,0,.14);}
.hk-de .f1{transform:rotateY(0deg) translateZ(27px);}
.hk-de .f2{transform:rotateY(90deg) translateZ(27px);}
.hk-de .f3{transform:rotateX(90deg) translateZ(27px);}
.hk-de .f4{transform:rotateX(-90deg) translateZ(27px);}
.hk-de .f5{transform:rotateY(-90deg) translateZ(27px);}
.hk-de .f6{transform:rotateY(180deg) translateZ(27px);}
.hk-de-face .pip{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a2a35,#160a10);align-self:center;justify-self:center;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);}
.hk-de-face .p1{grid-area:1/1;}.hk-de-face .p2{grid-area:1/2;}.hk-de-face .p3{grid-area:1/3;}
.hk-de-face .p4{grid-area:2/1;}.hk-de-face .p5{grid-area:2/2;}.hk-de-face .p6{grid-area:2/3;}
.hk-de-face .p7{grid-area:3/1;}.hk-de-face .p8{grid-area:3/2;}.hk-de-face .p9{grid-area:3/3;}
/* Accessibilité : animations coupées si le joueur préfère */
@media (prefers-reduced-motion: reduce){
  .hk-roue-disque.spin,.hk-roue-bille.spin,.hk-roue-bille .dot,.hk-de.roll{transition:none!important;}
}

/* ------------------------------------------------------------
   25. ALERTE STAFF (10.1.44) — contrats en attente de verdict
   ------------------------------------------------------------ */
.hk-alerte-staff{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;background:linear-gradient(90deg,rgba(var(--blood-rgb),.22),rgba(var(--gold-rgb),.22),rgba(var(--blood-rgb),.22));border:2px solid var(--gold);border-radius:12px;padding:10px 16px;margin:0 0 14px;font-size:14px;animation:staffPulse 2.2s ease-in-out infinite;}
@keyframes staffPulse{0%,100%{box-shadow:0 0 6px rgba(var(--gold-rgb),.35);}50%{box-shadow:0 0 24px rgba(var(--gold-rgb),.8);border-color:#ffd76a;}}
@media (prefers-reduced-motion: reduce){.hk-alerte-staff{animation:none;}}

/* ------------------------------------------------------------
   24. HIPPODROME CLANDESTIN (10.1.38) — courses de lévriers
   ------------------------------------------------------------ */
.hk-course-piste{position:relative;border:1px solid rgba(var(--gold-rgb),.3);border-radius:12px;padding:6px 10px;margin:10px 0 12px;background:linear-gradient(180deg,#182a12,#0d1a0a 75%);overflow:hidden;}
.hk-course-piste::before{content:'';position:absolute;right:34px;top:0;bottom:0;width:3px;background:repeating-linear-gradient(180deg,#e8b64c 0 8px,transparent 8px 16px);opacity:.45;}
.hk-lane{position:relative;height:42px;border-bottom:1px dashed rgba(255,255,255,.09);}
.hk-lane:last-child{border-bottom:0;}
.hk-lane .dep{position:absolute;left:2px;top:12px;font-family:var(--f-head);font-weight:800;font-size:11px;color:var(--muted);}
.hk-lane .hk-lev{position:absolute;left:16px;top:6px;font-size:24px;transform:scaleX(-1);will-change:transform;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));z-index:2;}
.hk-lane .hk-lev.run{transition:transform var(--dur,4s) cubic-bezier(.24,.72,.42,1);}
.hk-lane .tag{position:absolute;left:52px;top:13px;font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 130px);}
.hk-lane .fin{position:absolute;right:8px;top:9px;font-size:16px;opacity:.65;}
.hk-lane.win{background:rgba(var(--gold-rgb),.10);border-radius:8px;}
@media (prefers-reduced-motion: reduce){ .hk-lane .hk-lev.run{transition:none!important;} }

/* 📌 Épingle « lis les règles » du tchat (10.1.38) */
.hk-chat-regles{display:block;background:rgba(var(--gold-rgb),.10);border:1px solid rgba(var(--gold-rgb),.4);border-radius:8px;padding:5px 10px;margin:6px 0 0;font-size:11px;color:var(--ink-soft);line-height:1.5;}

/* ------------------------------------------------------------
   26. MENU PAR FAMILLES (10.1.46) — encadrés or/rouge/bleu/vert
   (le style des onglets ne change PAS : on ne fait qu'encadrer)
   ------------------------------------------------------------ */
.hk-nav{padding-top:15px;gap:9px 9px;flex-wrap:wrap;} /* 🧭 10.2.0 (audit) : le menu passe sur DEUX lignes au lieu de déborder — à 1366 px, Boutique/Banque/Casino étaient hors écran (1 614 px de large pour 1 336 visibles) */
.hk-nav-grp{margin-top:6px;} /* place pour le libellé du groupe quand il y a deux rangées */
.hk-nav-grp{position:relative;display:flex;align-items:stretch;gap:4px;flex:0 0 auto;border:1.5px solid var(--grp,#666);border-radius:12px;padding:5px 6px;}
.hk-nav-grp .lbl{position:absolute;top:-10px;left:9px;font-size:8.5px;font-family:var(--f-head);font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--grp);background:var(--menu-1);border:1px solid var(--grp);padding:1px 7px;border-radius:8px;white-space:nowrap;line-height:1.6;z-index:2;}
.hk-nav-grp.g-or{--grp:#e8b64c;background:rgba(var(--gold-rgb),.05);}
.hk-nav-grp.g-rouge{--grp:#ff5468;background:rgba(255,84,104,.05);}
.hk-nav-grp.g-bleu{--grp:#5aa9ff;background:rgba(90,169,255,.06);}
.hk-nav-grp.g-vert{--grp:#43d17c;background:rgba(67,209,124,.05);}
@media (max-width:640px){.hk-nav-grp .lbl{font-size:8px;padding:0 5px;}}
/* 🖥️ 10.2.1 (demande de Jonas) — SUR PC, LA BARRE TIENT SUR UNE SEULE LIGNE.
   La 10.2.0 la faisait passer sur deux rangées dès qu'elle débordait ; Jonas la
   veut d'un seul tenant sur ordinateur. Solution : au-dessus de 1100 px, plus de
   retour à la ligne, et des onglets qui se SERRENT (padding et police calés sur
   la largeur de l'écran, plus de largeur minimale) puis s'ÉTIRENT pour remplir
   la barre (flex:1). En dessous de 1100 px (tablette, portable étroit) on garde
   les deux rangées de la 10.2.0.
   ⚠️ Ce bloc doit rester APRÈS la règle `.hk-nav-grp{…flex:0 0 auto…}` ci-dessus,
   sinon elle le recouvre (même poids, dernière écrite gagne). */
@media (min-width:1100px){
  .hk-nav{flex-wrap:nowrap;overflow-x:auto;gap:5px;padding:13px 5px 5px;}
  .hk-nav-grp{flex:1 1 auto;padding:3px 4px;gap:2px;margin-top:4px;min-width:0;}
  .hk-nav-grp>a,.hk-nav>a{flex:1 1 auto;min-width:0;padding:6px clamp(2px,.4vw,10px);font-size:clamp(8.5px,.72vw,12px);letter-spacing:clamp(0px,.03vw,.5px);gap:2px;}
  .hk-nav a .ic{font-size:clamp(13px,1vw,17px);}
  .hk-nav a .hk-badge{padding:0 4px!important;font-size:9px;}
  .hk-nav-grp .lbl{font-size:8px;top:-9px;left:7px;padding:0 6px;}
  .hk-nav>a[style]{align-self:stretch!important;justify-content:center;margin-top:4px;} /* l’onglet Admin s’aligne sur les cadres */
}

/* 🖼️ 27. DUO DE TÊTES DES ASSASSINATS (10.1.46) */
.hk-duo-tetes{display:flex;align-items:center;gap:2px;flex:0 0 auto;}
.hk-duo-tetes .tete{width:58px;height:58px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));}
.hk-duo-tetes .tete.mort{filter:grayscale(1) drop-shadow(0 3px 6px rgba(0,0,0,.6));opacity:.75;}
.hk-duo-tetes .fleche{font-size:15px;opacity:.9;}
@media (max-width:640px){.hk-duo-tetes .tete{width:44px;height:44px;}}

/* 🔤 28. ANNUAIRE A→Z (10.1.46) */
.hk-az{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:0 0 12px;}
.hk-az a{display:inline-block;min-width:27px;text-align:center;padding:3px 7px;border:1px solid var(--line);border-radius:7px;font-family:var(--f-head);font-weight:700;font-size:12px;color:var(--ink-soft);text-decoration:none;background:var(--panel-3);}
.hk-az a:hover{border-color:var(--gold);color:var(--gold);}
.hk-az a.actif{background:var(--gold);border-color:var(--gold);color:#1a1206;}
.hk-az a.vide{opacity:.28;pointer-events:none;}

/* 🎒 29. INVENTAIRE REPLIABLE & MUR (10.1.47) */
.hk-inv>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hk-inv>summary::-webkit-details-marker{display:none;}
.hk-inv>summary .resume{margin-left:auto;}
.hk-inv>summary .chev{transition:transform .2s ease;color:var(--muted);}
.hk-inv[open]>summary .chev{transform:rotate(180deg);}
.hk-inv[open]>summary .resume{opacity:.5;}

/* 🧭 30. NAVIGATION RAPIDE DU PROFIL (10.1.48) */
.hk-profil-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:8px 10px;background:linear-gradient(180deg,rgba(34,15,22,.92),rgba(18,8,13,.92));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);}
.hk-profil-nav a{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel-3);color:var(--ink-soft);text-decoration:none;font-size:12px;font-family:var(--f-head);font-weight:700;transition:all .16s ease;}
.hk-profil-nav a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);}
@media (max-width:640px){.hk-profil-nav{gap:4px;padding:6px;}.hk-profil-nav a{font-size:11px;padding:4px 8px;}}

/* 📊 31. STATS COMPACTES (10.1.49) — tout tient sur une ligne */
.hk-stats.compacte{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.hk-stats.compacte::-webkit-scrollbar{display:none;}
.hk-stats.compacte .hk-stat{flex:1 1 0;min-width:74px;padding:7px 6px;border-radius:10px;}
.hk-stats.compacte .hk-stat .ic{font-size:15px;margin-bottom:1px;}
.hk-stats.compacte .hk-stat .val{font-size:15px;line-height:1.2;}
.hk-stats.compacte .hk-stat .lbl{font-size:8.5px;letter-spacing:.2px;line-height:1.25;}
@media (max-width:640px){.hk-stats.compacte .hk-stat{min-width:66px;padding:6px 4px;}.hk-stats.compacte .hk-stat .val{font-size:13px;}}

/* Impression / anciens navigateurs : fallback simple */
@media print{body{background:#fff;color:#000;}}

/* ============================================================
   📱 32. MOBILE (10.1.62) — demande de Jonas : « parfait sur PC,
   trop compliqué sur téléphone ». TOUT est scopé ≤640px : zéro
   changement sur ordinateur. Objectifs : plus AUCUN débordement
   horizontal, un menu compact qui se fait comprendre, des onglets
   en grille tapables (Règles & co), des tableaux qui glissent,
   des boutons faits pour le pouce.
   ============================================================ */
@media (max-width:640px){

  /* ---- Coquille : marges resserrées, jamais de scroll latéral ---- */
  html,body{overflow-x:hidden;}
  .hk-shell{padding:0 8px 30px;}
  .hk-card{padding:12px;margin-bottom:12px;}
  .hk-card-title{font-size:14px;letter-spacing:.5px;}

  /* ---- Topbar : le logo au-dessus, l'état de partie + horloge en
     dessous sur UNE ligne qui tient (fini le chip coupé hors écran) ---- */
  .hk-topbar{flex-direction:column;align-items:stretch;gap:8px;padding-top:8px;}
  .hk-logo{justify-content:center;gap:10px;}
  .hk-logo-skull{width:40px;height:40px;font-size:22px;border-radius:11px;}
  .hk-logo-title{font-size:24px;letter-spacing:1.2px;}
  .hk-logo-sub{font-size:6px;margin-top:4px;}
  .hk-topbar-right{width:100%;flex-wrap:nowrap;justify-content:center;gap:6px;min-width:0;}
  .hk-topbar-right>*{min-width:0;}
  .hk-party{padding:5px 10px;font-size:10.5px;gap:6px;letter-spacing:.3px;flex:0 1 auto;overflow:hidden;}
  .hk-party .motkill{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* ---- Menu : items compacts, défilement fluide + fin liseré de
     scroll visible (on comprend qu'il y a la suite à droite) ---- */
  .hk-nav{gap:6px;padding:12px 6px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(var(--gold-rgb),.4) transparent;}
  .hk-nav::-webkit-scrollbar{height:4px;}
  .hk-nav::-webkit-scrollbar-thumb{background:rgba(var(--gold-rgb),.35);border-radius:4px;}
  .hk-nav-grp{padding:4px;gap:2px;border-width:1px;scroll-snap-align:start;}
  /* 📱 10.2.0 (audit) : le menu passe sur plusieurs rangées, TOUT est visible (avant : 14 entrées hors écran à 9 px) */
  .hk-nav{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none;}
  /* 🔴 10.2.2 (8e expertise) — la 10.2.0 ne tenait pas sa promesse : chaque CADRE gardait
     « flex:0 0 auto » (jamais plus étroit que son contenu, 517 px pour « Le jeu ») et le corps
     de page coupe le débordement horizontal → Suggestions, Duels, Salles et Saisons étaient
     hors écran et inatteignables au doigt sous 480 px. Le cadre prend maintenant toute la
     largeur et ses onglets passent à la ligne DEDANS. */
  .hk-nav-grp{flex:1 1 100%;min-width:0;max-width:100%;flex-wrap:wrap;margin-top:8px;justify-content:center;}
  .hk-nav>a{flex:1 1 auto;min-width:0;}
  .hk-nav a{min-width:60px;min-height:40px;padding:6px 6px;font-size:10.5px;letter-spacing:.2px;gap:2px;border-radius:8px;}
  .hk-nav a .ic{font-size:15px;}

  /* ---- HUD compact ---- */
  .hk-hud{gap:10px;padding:10px;}
  .hk-hud-stats{gap:6px;}

  /* ---- Annonce : le bandeau respire ---- */
  .hk-ticker .tag{font-size:10px;padding:3px 8px;}
  .hk-ticker .txt{white-space:normal;overflow:visible;} .hk-ticker .txt>span{animation:none;padding-left:0;display:inline;} /* 📱 10.2.0 (audit) : bandeau LISIBLE et lien tapable — plus de défilement sur mobile */

  /* ---- Héros de page ---- */
  .hk-hero{padding:16px 14px;}
  .hk-hero h1{font-size:19px;letter-spacing:.8px;gap:8px;}
  .hk-hero p{font-size:12.5px;}

  /* ---- Onglets → GRILLE 2 colonnes, gros et tapables (la page
     Règles et ses 8 onglets deviennent enfin lisibles au pouce) ---- */
  .hk-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
  .hk-tab{display:flex;align-items:center;justify-content:center;text-align:center;
    padding:10px 6px;font-size:11px;letter-spacing:.3px;min-height:40px;white-space:normal;line-height:1.25;}

  /* ---- Tableaux : ils GLISSENT au lieu de casser la page ---- */
  .hk-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;scrollbar-width:thin;}
  .hk-table th,.hk-table td{padding:8px 9px;}

  /* ---- Boutons : taille pouce ---- */
  .hk-btn{min-height:40px;padding:9px 14px;font-size:12.5px;}
  .hk-btn.sm{min-height:36px;}
  .hk-btn.xs{min-height:40px;padding:8px 11px;font-size:11.5px;} /* 📱 10.2.0 : 40 px = taille pouce (avant 32) */
  /* 📱 10.2.0 (audit) : le chat est REPLIÉ sur mobile (il ajoutait 230 px + colonnes sous CHAQUE page — Casino : 16 écrans). Le titre l'ouvre. */
  .hk-c-chat:not(.open)>*:not(.hk-card-title){display:none;}
  .hk-c-chat>.hk-card-title{cursor:pointer;} .hk-c-chat:not(.open)>.hk-card-title::after{content:'▾ ouvrir';font-size:10px;margin-left:auto;opacity:.7;} .hk-c-chat.open>.hk-card-title::after{content:'▴ replier';font-size:10px;margin-left:auto;opacity:.7;}
  .hk-az a{min-width:40px;min-height:40px;line-height:32px;} /* 📱 10.2.0 : lettres A-Z tapables */
  .hk-chat-salons button{min-height:40px;padding:8px 10px;} /* 📱 10.2.0 */

  /* ---- Formulaires : champs pleine largeur confortables ---- */
  .hk-input,.hk-select,textarea.hk-input{font-size:16px;} /* 16px = pas de zoom auto iOS */

  /* ---- Fiches : couverture plus douce ---- */
  .hk-profile-name{font-size:19px;}

  /* ---- Filtres (annuaire Membres) : boutons tapables ---- */
  .hk-fbtn{min-height:32px;}
}

/* Tablette (641-820px) : onglets en 3 colonnes, le reste suit déjà. */
@media (min-width:641px) and (max-width:820px){
  .hk-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
  .hk-tab{display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;}
}

/* ============================================================
   📱 33. MOBILE COMPACT (10.1.64) — demande de Jonas : « réduire
   encore les cases, deux petites colonnes, garder les emojis,
   plus fluide, moins de scroll ». TOUT est scopé ≤640px : zéro
   changement sur ordinateur. Trois leviers :
   1) tout est plus dense (cartes, titres, tuiles, boutons) ;
   2) les colonnes latérales passent en GRILLE 2 colonnes
      (.hk-m-demi = demi-carte) et l'accueil masque ses cartes
      latérales en DOUBLON (partie/butin/missions/contrats/news/
      wanted existent déjà dans la page) ;
   3) l'emoji porte l'info : libellés secondaires masqués
      (.hk-m-cache, ressources du HUD, descriptions Discord).
   ============================================================ */
@media (max-width:640px){

  /* ---- utilitaire : masqué sur mobile uniquement ---- */
  .hk-m-cache{display:none !important;}

  /* ---- cartes & textes : un cran plus dense que la 10.1.62 ---- */
  .hk-card{padding:10px;margin-bottom:10px;border-radius:12px;}
  .hk-card-title{font-size:12.5px;letter-spacing:.4px;margin-bottom:8px;gap:6px;}
  .hk-card-title .right{font-size:10px;}
  .hk-divider{margin:8px 0;}
  .hk-empty{padding:14px 10px;font-size:12px;}
  .hk-empty .big{font-size:26px;}
  .hk-help{font-size:10px;line-height:1.45;}
  .hk-alert{padding:8px 10px;font-size:11.5px;}
  .hk-alerte-staff{padding:8px 10px;font-size:11.5px;}
  .hk-footer{font-size:10px;}
  .hk-grid-2,.hk-grid-3{gap:8px;}
  .hk-btn{min-height:38px;padding:8px 12px;font-size:12px;}
  .hk-btn.sm{min-height:34px;font-size:11.5px;}
  .hk-field{margin-bottom:8px;}
  .hk-label{font-size:10.5px;}
  .hk-table th,.hk-table td{padding:6px 7px;font-size:11px;}
  .hk-tab{min-height:36px;padding:8px 5px;font-size:10.5px;}

  /* ---- HUD joueur : 3 lignes serrées — identité + actions,
     barre de niveau, ressources en emojis (💰 12 · 🔫 4) ---- */
  .hk-hud{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:8px 10px;}
  .hk-hud-id{grid-area:1/1;min-width:0;gap:8px;}
  .hk-hud-actions{grid-area:1/2;margin-left:0;justify-self:end;align-self:center;}
  .hk-hud-level{grid-area:2/1/3/3;min-width:0;}
  .hk-hud-stats{grid-area:3/1/4/3;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .hk-hud-stats::-webkit-scrollbar{display:none;}
  .hk-hud-avatar img{width:40px;height:40px;}
  .hk-hud-name{font-size:14px;gap:5px;}
  .hk-hud-name .hk-badge{font-size:8.5px;padding:2px 6px;}
  .hk-hud-title{font-size:9px;}
  .hk-res{padding:5px 9px;font-size:13px;gap:5px;}
  .hk-res .lbl{display:none;} /* l'emoji suffit : 💰 12 · 🔫 4 · 🔪 1 */

  /* ---- héros de page + compte à rebours compacts ---- */
  .hk-hero{padding:12px;}
  .hk-hero h1{font-size:17px;gap:7px;}
  .hk-hero p{font-size:12px;}
  .hk-hero .hero-stats{gap:6px;margin-top:10px;}
  .hk-countdown{gap:5px;flex-wrap:wrap;}
  .hk-countdown .unit{min-width:46px;padding:5px 6px;border-radius:8px;}
  .hk-countdown .unit b{font-size:16px;}
  .hk-countdown .unit span{font-size:7.5px;letter-spacing:1px;}

  /* ---- tuiles de stats : 2 petites colonnes ---- */
  .hk-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px;}
  .hk-stat{padding:8px 6px;}
  .hk-stat .ic{font-size:15px;margin-bottom:2px;}
  .hk-stat .val{font-size:15px;}
  .hk-stat .lbl{font-size:8px;letter-spacing:.4px;}

  /* ---- podium « Top de la semaine » : 3 mini-colonnes sur UNE
     rangée (fini les 3 écrans de podium empilé) ---- */
  .hk-podium{grid-template-columns:1fr 1.1fr 1fr;gap:6px;margin-bottom:10px;}
  .hk-podium .step{padding:8px 4px 9px;}
  .hk-podium .step .medal{font-size:18px;}
  .hk-podium .step .name{font-size:11px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hk-podium .step .score{font-size:9.5px;}
  .hk-podium .step .score .sem{display:none;} /* « cette semaine » implicite */
  .hk-podium .hk-ava.s64{width:44px;height:44px;}
  .hk-podium .hk-ava.s48{width:38px;height:38px;}

  /* ---- affiches WANTED resserrées ---- */
  .hk-wanted{padding:10px 8px 9px;}
  .hk-wanted .wanted-word{font-size:13px;letter-spacing:4px;}
  .hk-wanted .prize{font-size:16px;}
  .hk-wanted .hk-ava.s64{width:46px;height:46px;}

  /* ---- listes / flux : lignes denses ---- */
  .hk-row{gap:8px;padding:6px 0;}
  .hk-row .meta{font-size:10px;}
  .hk-feed-l{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px !important;}
  .hk-feed-l .txt{min-width:0;}
  .hk-feed-l .quand{display:inline !important;flex:0 0 auto;font-size:9px !important;}

  /* ---- colonnes latérales : GRILLE 2 colonnes. Par défaut une
     carte prend toute la largeur ; .hk-m-demi = demi-carte ---- */
  .hk-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .hk-side>*{grid-column:1 / -1;margin:0 !important;}
  .hk-side>.hk-m-demi{grid-column:auto;}
  .hk-m-demi{padding:9px 6px;}
  .hk-m-demi .hk-card-title{font-size:11px;justify-content:center;}
  .hk-m-demi .hk-btn{font-size:10.5px;padding:7px 8px;min-height:34px;}
  .hk-m-demi .hk-countdown .unit{min-width:40px;padding:4px 4px;}
  .hk-m-demi .hk-countdown .unit b{font-size:14px;}

  /* ---- accueil : les cartes latérales en DOUBLON de la page
     disparaissent (l'info est déjà dans l'accueil lui-même) ---- */
  .hk-pg-accueil .hk-c-partie,.hk-pg-accueil .hk-c-butin,
  .hk-pg-accueil .hk-c-missions,.hk-pg-accueil .hk-c-contrats,
  .hk-pg-accueil .hk-c-news,.hk-pg-accueil .hk-c-wanted{display:none;}

  /* ---- chat : log un peu plus court, aides réduites ---- */
  .hk-chat-log{height:230px;}
  .hk-chat-regles{font-size:10px;padding:6px 8px;}
  .hk-chat-salons button{padding:5px 8px;font-size:10.5px;}

  /* ---- succès : 2 colonnes de badges ---- */
  .hk-succes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .hk-succes{padding:8px;gap:8px;}
  .hk-succes .ic{width:36px;height:36px;font-size:18px;border-radius:9px;}

  /* ---- casino : tables de jeu resserrées, roue réduite,
     descriptions d'ambiance masquées (l'emoji + le titre suffisent) ---- */
  .hk-casino-table{padding:11px;}
  .hk-casino-table h3{font-size:14px;}
  .hk-casino-table>.hk-small.hk-muted.hk-center{display:none;}
  .hk-roue-svg{width:170px;height:170px;}
  .hk-slot-reels{gap:7px;margin:10px 0;}

  /* ---- boutique : rayons en 2 colonnes, articles denses ---- */
  .hk-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .hk-item{padding:10px 8px 9px;}
  .hk-item .ic{font-size:26px;}
  .hk-item .nm{font-size:12.5px;margin-top:4px;}
  .hk-item .ds{display:none;} /* le descriptif d'ambiance, pas les infos d'achat */
  .hk-item .hk-btn{font-size:10.5px;padding:7px 6px;min-height:32px;}
  .hk-vip-promo{flex-wrap:wrap;justify-content:center;text-align:center;gap:8px;}
  .hk-vip-promo>span:first-child{font-size:24px;}
  .hk-vip-promo .hk-btn{flex:1 1 100% !important;}
}

/* ============================================================
   💬 34bis. PANNEAUX REPLIABLES (10.1.68 — demande de Jonas) :
   « éviter d'avoir beaucoup de choses ». Deux composants :
   ▸ .hk-chat-aide : les astuces du chat dans un petit onglet
   ▸ .hk-discords  : TOUS les Discords dans UNE carte réduite
   Fermés par défaut, PC et mobile.
   ============================================================ */
.hk-chat-aide{margin-top:8px;}
.hk-chat-aide summary{
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:var(--muted);
  padding:4px 9px;border:1px dashed var(--line);border-radius:9px;
  list-style:none;user-select:none;transition:all .15s ease;
}
.hk-chat-aide summary::-webkit-details-marker{display:none;}
.hk-chat-aide summary::after{content:'▾';font-size:10px;transition:transform .15s ease;}
.hk-chat-aide[open] summary::after{transform:rotate(180deg);}
.hk-chat-aide summary:hover{color:var(--ink-soft);border-color:var(--line-2);}
.hk-chat-aide .hk-chat-astuce{margin-top:7px;}

.hk-discords summary{
  cursor:pointer;display:flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-weight:700;font-size:15px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--ink);
  list-style:none;user-select:none;
}
.hk-discords summary::-webkit-details-marker{display:none;}
.hk-discords summary .nb{
  font-size:10.5px;font-family:var(--f-body,inherit);letter-spacing:0;
  background:rgba(88,101,242,.18);color:#8b9bff;
  border:1px solid rgba(88,101,242,.4);border-radius:999px;padding:1px 8px;
}
.hk-discords summary::after{
  content:'▾';margin-left:auto;font-size:12px;color:var(--muted);
  transition:transform .15s ease;
}
.hk-discords[open] summary::after{transform:rotate(180deg);}
.hk-discord-row{
  display:flex;align-items:center;gap:9px;
  margin-top:8px;padding:8px 9px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hk-discord-row:first-of-type{margin-top:11px;}
.hk-discord-row:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.35);}
.hk-discord-row img{width:26px;height:26px;border-radius:7px;object-fit:contain;flex:0 0 auto;}
.hk-discord-row .em{font-size:17px;flex:0 0 auto;}
.hk-discord-row .t{
  flex:1;min-width:0;font-family:var(--f-head);font-weight:700;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hk-discord-row .go{
  flex:0 0 auto;font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:3px 8px;
}
.hk-discord-row:hover .go{color:var(--ink-soft);border-color:var(--line-2);}

/* 🧍 avatars corps entiers (podium des légendes, 10.1.68) */
.hk-ava-corps{height:96px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));}
.hk-ava-corps.p1{height:114px;}

/* 🔫 scène d'assassinat (10.1.68) : les deux corps de profil, le killeur
   derrière, un pistolet superposé dans sa main pointé vers le dos de la
   victime. Tout est décoratif : si une image manque, la scène reste propre. */
.hk-scene-kill{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:26px;padding:6px 0 2px;}
.hk-scene-kill img.perso{height:104px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));}
.hk-scene-kill .victime img.perso{filter:grayscale(.65) brightness(.8) drop-shadow(0 6px 10px rgba(0,0,0,.55));}
.hk-scene-kill .tireur,.hk-scene-kill .victime{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;}
.hk-scene-kill .arme{
  position:absolute;right:-28px;top:40%;width:40px;height:auto;z-index:2;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));
  pointer-events:none;
  transform:scaleX(-1); /* 🔧 10.1.69 (Jonas) : le canon vise à DROITE, vers le dos de la victime */
}
.hk-scene-kill .arme.emoji{transform:none;}
.hk-scene-kill .arme.menottes{transform:none;width:32px;right:-24px;}
.hk-scene-kill .arme.emoji{width:auto;font-size:20px;right:-24px;}
.hk-scene-kill .nom{font-size:10.5px;font-weight:700;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:640px){
  .hk-scene-kill{gap:18px;}
  .hk-scene-kill img.perso{height:84px;}
  .hk-scene-kill .arme{width:34px;right:-24px;top:36px;}
}

/* 🖼️ icônes d'objets (10.1.68 — images fournies par Jonas) */
.hk-ic-obj{vertical-align:middle;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}

/* 🔗 liens postés dans le chat : jamais de débordement */
.hk-chat-msg .corps a{overflow-wrap:anywhere;}

/* ============================================================
   🎰 36. CASINO « VRAI TAPIS EN LIGNE » (10.1.69 — demande de
   Jonas) : tables plus immersives, jetons de mise rapides,
   tickets à gratter, paires de cartes compactes.
   ============================================================ */
.hk-casino-table{
  border-width:2px;
  box-shadow:inset 0 0 46px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
  position:relative;
}
.hk-casino-table>h3{
  font-family:var(--f-display);letter-spacing:1.2px;font-size:17px;
  color:#ffd76e;text-shadow:0 0 16px rgba(var(--gold-rgb),.45);
}
.hk-casino-table::after{
  content:'';position:absolute;inset:5px;border:1px dashed rgba(var(--gold-rgb),.14);
  border-radius:12px;pointer-events:none;
}
.hk-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.hk-chip{
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:4px dashed rgba(255,255,255,.55);
  font-family:var(--f-head);font-weight:800;font-size:10px;color:#fff;
  display:grid;place-items:center;line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.35);
  transition:transform .12s ease;
}
.hk-chip:hover{transform:translateY(-2px);}
.hk-chip:active{transform:scale(.92);}
.chip-5{background:radial-gradient(circle at 35% 30%, #b9c2cc, #6f7a86 70%);}
.chip-10{background:radial-gradient(circle at 35% 30%, #ff7b8a, #b3202e 70%);}
.chip-25{background:radial-gradient(circle at 35% 30%, #63d68f, #1c7a44 70%);}
.chip-50{background:radial-gradient(circle at 35% 30%, #6db3ff, #1d5fae 70%);}
.chip-100{background:radial-gradient(circle at 35% 30%, #4a4f5a, #15181e 70%);border-color:rgba(var(--gold-rgb),.7);color:var(--gold);}
.hk-chip.chip-max{background:radial-gradient(circle at 35% 30%, #ffd76e, #a87b17 70%);color:#1a1206;border-color:rgba(255,255,255,.7);font-size:8.5px;}
.hk-ticket-case{
  display:inline-grid;place-items:center;width:52px;height:52px;margin:0 4px;
  border-radius:10px;font-size:24px;font-family:var(--f-head);font-weight:800;color:var(--gold);
  background:repeating-linear-gradient(45deg, #2a2030, #2a2030 6px, #241a2a 6px, #241a2a 12px);
  border:2px solid rgba(var(--gold-rgb),.4);
  box-shadow:inset 0 0 12px rgba(0,0,0,.5);
}
/* ⚔️ 10.1.71 — cartes à jouer de La Bataille */
.hk-carte-bat{
  display:inline-grid;place-items:center;min-width:46px;height:64px;padding:0 8px;
  border-radius:9px;background:linear-gradient(160deg,#f7f2e7,#d8cfc0);
  color:#7d1424;font-family:var(--f-display);font-weight:900;font-size:22px;
  border:2px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 0 0 2px rgba(125,20,36,.25);
}
.hk-carte-bat.croupier{color:#10131c;box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 0 0 2px rgba(16,19,28,.3);}

/* paires compactes (banque+investir) : tout un cran plus petit et lisible */
.hk-casino-duo .hk-card-title{font-size:13.5px;}
.hk-casino-duo .hk-table th,.hk-casino-duo .hk-table td{padding:5px 7px;font-size:11px;}
.hk-casino-duo .hk-help{font-size:10.5px;}
.hk-casino-duo .hk-stat .val{font-size:16px;}
@media (max-width:640px){
  /* 📱 10.2.2 : les jetons restent à 40 px (cible tactile) — voir §46. */
  .hk-ticket-case{width:44px;height:44px;font-size:20px;}
}

/* ============================================================
   🎯🤺 38. PRIMES & DUELS AU PROPRE (10.1.71 — demande de Jonas)
   ▸ Le mur des affiches devient un vrai mur : punaise, papier
     vieilli, affiches légèrement de travers, prime bien en vue.
   ▸ Les duels deviennent des cartes d'arène : coin rouge / coin
     bleu, VS lumineux, pot en médaille dorée.
   ============================================================ */
.hk-wanted{border-width:2px;}
.hk-wanted::before{
  content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f2e3b0, #8a6a1f 70%);
  box-shadow:0 2px 4px rgba(0,0,0,.6);
  z-index:2;
}
.hk-wanted .wanted-word{margin-top:8px;}
.hk-wanted:nth-child(odd){transform:rotate(-.7deg);}
.hk-wanted:nth-child(even){transform:rotate(.6deg);}
.hk-wanted:hover{transform:translateY(-4px) rotate(0deg) !important;}
.hk-wanted .prize{
  display:inline-block;margin-top:4px;padding:3px 12px;border-radius:999px;
  background:rgba(var(--gold-rgb),.14);border:1px dashed rgba(var(--gold-rgb),.55);
}
.hk-duel-vs{
  position:relative;overflow:hidden;
  background:
    linear-gradient(100deg, rgba(var(--blood-rgb),.10) 0%, transparent 38%),
    linear-gradient(-100deg, rgba(90,169,255,.10) 0%, transparent 38%),
    var(--panel-2);
  border-width:2px;
}
.hk-duel-vs .fighter img{box-shadow:0 5px 12px rgba(0,0,0,.5);border-radius:12px;}
.hk-duel-vs .vs{font-size:24px;}
.hk-duel-pot{
  display:inline-block;margin-top:3px;padding:2px 11px;border-radius:999px;
  font-family:var(--f-head);font-weight:800;font-size:12px;color:var(--gold);
  background:rgba(var(--gold-rgb),.13);border:1px solid rgba(var(--gold-rgb),.5);
  box-shadow:0 0 12px rgba(var(--gold-rgb),.18);
}

/* ============================================================
   💬 37. FORUM AU PROPRE (10.1.70/71 — demande de Jonas) : messages
   en vraies bulles, premier message doré (l'auteur du topic),
   lignes de topics plus nettes.
   ============================================================ */
.hk-post{
  background:linear-gradient(180deg, var(--panel-2), var(--panel) 85%);
  border-left:3px solid var(--line-2);
  padding:13px 14px;
  transition:border-color .15s ease;
}
.hk-post:hover{border-left-color:rgba(var(--gold-rgb),.45);}
.hk-post-op{
  border-left-color:var(--gold);
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.07), var(--panel) 70%);
}
.hk-post-pin{
  border-left-color:var(--gold);
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.10), var(--panel) 75%);
  box-shadow:var(--glow-gold), var(--shadow-1);
}
.hk-post-op::before{
  content:'✍️ Auteur du topic';
  display:inline-block;
  font-size:9px;font-family:var(--f-head);font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--gold);background:rgba(var(--gold-rgb),.12);
  border:1px solid rgba(var(--gold-rgb),.35);border-radius:999px;
  padding:2px 9px;margin-bottom:8px;
}
.hk-post .hk-ava.s48{border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.4);}
.hk-post .hk-flex.wrap.between{border-bottom:1px dashed var(--line);padding-bottom:6px;margin-bottom:8px;}
/* les lignes de topics : élévation douce + compteur réponses en pastille */
.hk-card .hk-row a[href*="view=topic"]{font-size:13.5px;}
.hk-row{transition:background .15s ease;}
.hk-row:hover{background:rgba(255,255,255,.025);border-radius:10px;}
/* 🧭 10.1.71 : cartes de catégories qui respirent */
.hk-forum-cat{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.hk-forum-cat .ic{
  width:52px;height:52px;margin:0 auto 4px;display:grid;place-items:center;font-size:26px;
  border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  box-shadow:inset 0 0 14px rgba(0,0,0,.35);
}
a.hk-forum-cat:hover{transform:translateY(-3px);border-color:rgba(var(--gold-rgb),.5);box-shadow:var(--glow-gold), var(--shadow-1);}
/* lignes de topics : mini-cartes */
.hk-topic-row{
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;
  padding:9px 11px;margin:7px 0;
  transition:transform .15s ease, border-color .15s ease;
}
.hk-topic-row:hover{transform:translateX(3px);border-color:var(--line-2);background:var(--panel-2);}
.hk-topic-row.epingle{border-left:3px solid var(--gold);background:linear-gradient(90deg, rgba(var(--gold-rgb),.06), var(--panel-2) 45%);}
.hk-topic-row .meta{margin-top:2px;}
/* 🧭 fil d'Ariane */
.hk-forum-ariane{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12px;margin-bottom:10px;color:var(--muted);
  background:var(--panel-3);border:1px solid var(--line);border-radius:10px;padding:7px 12px;
}
.hk-forum-ariane span{opacity:.5;}
.hk-forum-ariane b{color:var(--ink-soft);}

/* ============================================================
   📱 34. FINITIONS MOBILES (10.1.65) — suite du « moins de
   scroll » : bouton retour-en-haut (tap → menu) + défilement
   fluide. Le bouton n'existe QUE sur mobile : display:none par
   défaut, le PC ne le voit jamais.
   ============================================================ */
.hk-m-top{display:none;}
@media (max-width:640px){
  html{scroll-behavior:smooth;}
  .hk-m-top{
    display:grid;place-items:center;
    position:fixed;right:12px;bottom:14px;z-index:60;
    width:42px;height:42px;border-radius:50%;
    background:rgba(20,12,16,.92);
    border:1px solid rgba(var(--gold-rgb),.5);
    box-shadow:0 6px 18px rgba(0,0,0,.55);
    font-size:19px;font-weight:700;color:var(--gold);text-decoration:none;line-height:1;
  }
  .hk-m-top:active{transform:scale(.94);}
}

/* ============================================================
   🎰🤵 39. LES VRAIS VISUELS DU CASINO (10.1.71 — demande de
   Jonas) : croupiers en face du joueur, barillet de roulette
   russe qui tourne, pièce 3D, duel de chifoumi, ticket à
   gratter RÉEL (canvas), cartes de Bataille qui se retournent,
   tables de blackjack habillées.
   ============================================================ */

/* --- 🤵 le croupier derrière sa table --- */
.hk-croupier{display:flex;flex-direction:column;align-items:center;gap:4px;margin:2px auto 8px;}
.hk-croupier-buste{
  position:relative;width:62px;height:74px;overflow:hidden;
  border-radius:31px 31px 12px 12px;
  background:radial-gradient(ellipse at 50% 18%, #3d3145, #171021 72%);
  border:2px solid rgba(var(--gold-rgb),.45);
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 -16px 18px rgba(0,0,0,.55);
}
.hk-croupier-buste img{
  position:absolute;left:50%;top:-4px;transform:translateX(-50%);
  width:64px;height:auto;image-rendering:pixelated;
}
.hk-croupier-buste .emo-face{display:none;}
.hk-croupier-buste.emo .emo-face{
  display:flex;position:absolute;inset:0;align-items:center;justify-content:center;font-size:32px;
}
.hk-croupier-plaque{
  font-family:var(--f-head);font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--gold);text-align:center;
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.16), rgba(var(--gold-rgb),.05));
  border:1px solid rgba(var(--gold-rgb),.4);border-radius:12px;padding:3px 11px;
}
.hk-croupier-plaque i{
  display:block;font-style:italic;font-weight:400;font-size:9px;color:var(--muted);
  text-transform:none;letter-spacing:.2px;max-width:190px;
}

/* --- 🔫 roulette russe : le barillet --- */
.hk-rr-scene{position:relative;width:126px;margin:4px auto 6px;padding-top:16px;}
.hk-rr-marteau{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-size:15px;line-height:1;color:var(--gold);text-shadow:0 2px 4px rgba(0,0,0,.6);z-index:2;
}
.hk-rr-barillet{
  position:relative;width:110px;height:110px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4d4756, #221d2b 68%);
  border:3px solid #5b5366;
  box-shadow:inset 0 0 20px rgba(0,0,0,.75), 0 8px 16px rgba(0,0,0,.5);
}
.hk-rr-barillet.spin{transition:transform 1.35s cubic-bezier(.16,.7,.22,1);}
.hk-rr-barillet .ch{
  position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%, #14101a, #030204 75%);
  border:2px solid #6e6579;box-shadow:inset 0 2px 5px rgba(0,0,0,.9);
}
.hk-rr-barillet .axe{
  position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%, #837a90, #453e52 75%);
  border:2px solid #2c2636;
}
/* la balle n'apparaît dans sa chambre QUE pendant une partie */
.hk-rr-scene.rrjoue .ch.balle{
  background:radial-gradient(circle at 38% 30%, #ffdf9e, #b98a2e 55%, #6d4c12 90%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.5);
}
.hk-rr-flash{
  position:absolute;inset:6px 0 0;display:grid;place-items:center;font-size:44px;
  opacity:0;pointer-events:none;z-index:3;
}
.hk-rr-scene.bang .hk-rr-flash{animation:rrFlash .7s ease-out .05s 1;}
.hk-rr-scene.bang .hk-rr-barillet{border-color:#d11d3a;box-shadow:inset 0 0 20px rgba(0,0,0,.75), 0 0 22px rgba(209,29,58,.55);}
@keyframes rrFlash{
  0%{opacity:0;transform:scale(.4);}
  18%{opacity:1;transform:scale(1.25);}
  60%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.05);}
}
.hk-rr-fumee{position:absolute;top:6px;right:2px;font-size:20px;opacity:0;pointer-events:none;}
.hk-rr-scene.safe .hk-rr-fumee{animation:rrFumee 1.4s ease-out .1s 1 forwards;}
@keyframes rrFumee{
  0%{opacity:0;transform:translateY(6px);}
  30%{opacity:.95;}
  100%{opacity:0;transform:translateY(-16px);}
}

/* --- 🪙 pile ou face : la pièce 3D --- */
.hk-pf-scene{display:flex;flex-direction:column;align-items:center;margin:4px 0 2px;perspective:700px;}
.hk-piece3d{position:relative;width:76px;height:76px;transform-style:preserve-3d;}
.hk-piece3d.vole{transition:transform 1.6s cubic-bezier(.24,.65,.24,1);}
.hk-piece3d .fa,.hk-piece3d .fb{
  position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  font-size:26px;line-height:1.1;font-family:var(--f-head);font-weight:800;
}
.hk-piece3d .fa{
  background:radial-gradient(circle at 35% 28%, #ffeaa9, #e8b64c 55%, #8a6420 95%);
  border:3px solid #c39a3f;color:#5c4413;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.18), 0 6px 14px rgba(0,0,0,.45);
}
.hk-piece3d .fb{
  transform:rotateY(180deg);
  background:radial-gradient(circle at 35% 28%, #dcd7e4, #948da1 55%, #423c50 95%);
  border:3px solid #6f6880;color:#221d2c;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.14), 0 6px 14px rgba(0,0,0,.45);
}
.hk-piece3d i{font-style:normal;font-size:10px;letter-spacing:2px;}
.hk-pf-ombre{width:52px;height:8px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(3px);margin-top:7px;}

/* --- ✂️ chifoumi : le duel des poings --- */
.hk-pfc-scene{display:flex;align-items:flex-end;justify-content:center;gap:16px;margin:6px 0 4px;}
.hk-pfc-scene .cote{display:flex;flex-direction:column;align-items:center;gap:3px;}
.hk-pfc-scene .cote b{
  font-family:var(--f-head);font-size:9px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;
}
.hk-pfc-scene .vs{
  font-family:var(--f-head);font-weight:800;font-size:12px;color:var(--gold);
  padding-bottom:22px;letter-spacing:1px;
}
.hk-pfc-scene .main{
  font-size:46px;line-height:1;display:inline-block;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.45));
  transition:transform .25s ease, opacity .25s ease, filter .25s ease;
}
.hk-pfc-scene .cote.lui .main{transform:scaleX(-1);}
.hk-pfc-scene.shake .main{animation:pfcPompe .3s ease-in-out 3;}
@keyframes pfcPompe{0%,100%{translate:0 0;}50%{translate:0 -15px;}}
.hk-pfc-scene .main.gagne{transform:scale(1.22);filter:drop-shadow(0 0 12px rgba(var(--gold-rgb),.85));}
.hk-pfc-scene .cote.lui .main.gagne{transform:scaleX(-1) scale(1.22);}
.hk-pfc-scene .main.perd{opacity:.4;filter:grayscale(.75);}

/* --- 🎫 le ticket à gratter RÉEL --- */
.hk-ticket{
  max-width:288px;margin:4px auto 2px;
  background:linear-gradient(160deg, #f6e8c6, #eccf96);
  border:2px dashed #a9803c;border-radius:12px;padding:9px 12px 9px;color:#4a3413;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
}
.hk-ticket-tete{
  display:flex;justify-content:space-between;gap:8px;
  font-family:var(--f-head);font-weight:800;font-size:10px;letter-spacing:.6px;color:#7c5a1e;
}
.hk-ticket-zone{position:relative;display:flex;gap:8px;justify-content:center;padding:8px 0 2px;}
.hk-ticket .hk-ticket-case{
  background:#fdf6e4;border:2px solid #c8a35c;color:#8a1d2c;
  box-shadow:inset 0 0 10px rgba(169,128,60,.25);
}
.hk-ticket-zone.vierge .hk-ticket-case{color:#b39355;}
.hk-ticket-zone canvas{
  position:absolute;inset:0;width:100%;height:100%;border-radius:10px;
  touch-action:none;cursor:crosshair;transition:opacity .6s ease;z-index:2;
}
.hk-ticket-zone.fini canvas{opacity:0;pointer-events:none;}
/* ♿ 10.1.95 (audit) : #7c5a1e mesuré à 4,17:1 sur son fond, sous le seuil de 4,5:1. */
.hk-ticket-pied{text-align:center;font-size:10px;color:#6b4d17;margin-top:5px;font-style:italic;}

/* --- ⚔️ bataille : cartes qui se retournent --- */
.hk-bat-scene{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 4px;perspective:700px;}
.hk-bat-scene .vs{font-size:18px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.hk-bat-flip{
  position:relative;width:64px;height:78px;display:inline-block;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.35,.7,.3,1);
}
.hk-bat-flip .dos,.hk-bat-flip .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:9px;}
.hk-bat-flip .dos{
  background:repeating-linear-gradient(45deg, #8e1f2f, #8e1f2f 6px, #5a1420 6px, #5a1420 12px);
  border:2px solid #b8324a;box-shadow:0 6px 14px rgba(0,0,0,.5);
  display:grid;place-items:center;
}
.hk-bat-flip .dos::after{
  content:'HK';font-family:var(--f-head);font-weight:800;font-size:13px;color:rgba(var(--gold-rgb),.85);
  border:1px solid rgba(var(--gold-rgb),.5);border-radius:50%;padding:6px 5px;
}
.hk-bat-flip .face{transform:rotateY(180deg);width:100%;height:100%;min-width:0;padding:0;}
.hk-bat-flip.tourne{transform:rotateY(180deg);}
/* ⚠️ pas de filter/opacity sur .hk-bat-flip : ça APLATIRAIT le preserve-3d
   (la carte resterait bloquée côté dos) — le verdict s'applique aux faces. */
.hk-bat-flip.gagne .face{box-shadow:0 0 16px rgba(var(--gold-rgb),.8), 0 6px 14px rgba(0,0,0,.5);border:2px solid var(--gold);}
.hk-bat-flip.perd .face{opacity:.55;}

/* --- 🃏 blackjack : arc de table + cartes distribuées --- */
.hk-bj-arc{
  max-width:330px;margin:0 auto 8px;padding:2px 0 6px;
  border-bottom:2px solid rgba(var(--gold-rgb),.35);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  text-align:center;font-family:var(--f-head);font-size:9px;font-weight:700;
  letter-spacing:1.4px;color:rgba(var(--gold-rgb),.8);text-transform:uppercase;
}
.hk-bj-cartes .bj-carte{animation:bjDeal .5s cubic-bezier(.2,.85,.3,1) backwards;}
.hk-bj-cartes .bj-carte:nth-child(1){animation-delay:.05s;}
.hk-bj-cartes .bj-carte:nth-child(2){animation-delay:.16s;}
.hk-bj-cartes .bj-carte:nth-child(3){animation-delay:.27s;}
.hk-bj-cartes .bj-carte:nth-child(4){animation-delay:.38s;}
.hk-bj-cartes .bj-carte:nth-child(5){animation-delay:.49s;}
.hk-bj-cartes .bj-carte:nth-child(6){animation-delay:.6s;}
.hk-bj-cartes .bj-carte:nth-child(7){animation-delay:.71s;}
.hk-bj-cartes .bj-carte:nth-child(n+8){animation-delay:.82s;}
@keyframes bjDeal{
  from{opacity:0;transform:translateY(-24px) rotate(-7deg);}
  to{opacity:1;transform:none;}
}

/* --- accessibilité + mobile --- */
@media (prefers-reduced-motion: reduce){
  .hk-bj-cartes .bj-carte{animation:none;}
  .hk-pfc-scene.shake .main{animation:none;}
  .hk-rr-scene.bang .hk-rr-flash{animation:none;opacity:1;}
  .hk-rr-scene.safe .hk-rr-fumee{animation:none;opacity:.9;}
  .hk-bat-flip,.hk-piece3d.vole,.hk-rr-barillet.spin{transition:none;}
}
@media (max-width:640px){
  .hk-pfc-scene .main{font-size:40px;}
  .hk-piece3d{width:68px;height:68px;}
  .hk-croupier-plaque i{max-width:160px;}
}

/* ============================================================
   🧰 40. LES 16 OBJETS (10.1.72) — habillage
   ============================================================ */
.hk-anonyme{
  font-family:var(--f-head);font-weight:800;color:#b8aecb;letter-spacing:.4px;
  border-bottom:1px dashed rgba(184,174,203,.5);cursor:help;
}
.hk-scene-anonyme{
  display:inline-grid;place-items:center;
  background:linear-gradient(180deg,#241c2e,#140f1c);
  border:1px solid rgba(184,174,203,.35);border-radius:10px;
  font-size:22px;color:#b8aecb;
}

/* 🎒📊 10.1.73 — Stats & Inventaire : bulles JUMELLES (demande de Jonas).
   Plus d'accordéon : les deux cartes s'étirent à la même hauteur et les
   tuiles passent à la ligne au lieu de défiler — tout rentre dans la case. */
.hk-stats.compacte.bulle{flex-wrap:wrap;overflow:visible;align-content:flex-start;}
.hk-stats.compacte.bulle .hk-stat{flex:1 1 88px;min-width:82px;max-width:100%;}
.hk-stats.compacte.bulle .hk-stat .val{font-size:16px;}
.hk-stats.compacte.bulle .hk-stat .lbl{font-size:9px;letter-spacing:.6px;}
@media (max-width:640px){
  .hk-stats.compacte.bulle .hk-stat{flex:1 1 30%;min-width:29%;}
}

/* 🎖️⚙️ 10.1.73 — le choix de la vitrine de badges (fiche, demande de Jonas) */
.hk-badges-choix{max-width:520px;margin:6px auto 0;text-align:center;}
.hk-badges-choix summary{
  cursor:pointer;list-style:none;display:inline-block;
  font-family:var(--f-head);font-size:10.5px;font-weight:700;letter-spacing:.5px;
  color:var(--muted);border:1px dashed var(--line);border-radius:99px;padding:4px 13px;
  transition:color .2s,border-color .2s;
}
.hk-badges-choix summary::-webkit-details-marker{display:none;}
.hk-badges-choix summary:hover{color:var(--gold);border-color:rgba(var(--gold-rgb),.5);}
.hk-badges-choix[open] summary{color:var(--gold);border-color:rgba(var(--gold-rgb),.5);}
.hk-badges-choix .grille{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0;
}
.hk-badges-choix .grille label{
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  width:86px;padding:8px 4px 6px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2);transition:border-color .2s,opacity .2s;
}
.hk-badges-choix .grille label:has(input:checked){border-color:rgba(var(--gold-rgb),.55);box-shadow:0 0 10px rgba(var(--gold-rgb),.18);}
.hk-badges-choix .grille label:has(input:not(:checked)){opacity:.55;filter:grayscale(.5);}
.hk-badges-choix .grille .nm{font-size:9px;color:var(--muted);line-height:1.2;}
.hk-badges-choix .grille input{accent-color:var(--gold);}

/* ============================================================
   🎓 41. LA MISSION UNIQUE — DIPLÔME DE LA RUE (10.1.74)
   ============================================================ */
.hk-quiz, .hk-quiz-lecture{
  border-color:rgba(var(--gold-rgb),.45);
  background:linear-gradient(160deg, rgba(var(--gold-rgb),.06), transparent 60%), var(--panel);
  box-shadow:0 0 22px rgba(var(--gold-rgb),.10);
}
.hk-quiz-vu{font-size:11px;filter:drop-shadow(0 0 5px rgba(90,220,140,.5));}
.hk-quiz-coeur{font-size:15px;line-height:1;}
.hk-quiz-coeur.perdu{opacity:.55;}
.hk-quiz-question{
  font-family:var(--f-head);font-weight:800;font-size:16.5px;line-height:1.45;
  text-align:center;color:var(--ink);margin:14px auto 12px;max-width:660px;
  padding:12px 14px;border-radius:12px;
  background:var(--panel-3);border:1px solid var(--line);
}
.hk-quiz-reponses{max-width:620px;margin:0 auto;display:grid;gap:8px;}
.hk-quiz-reponses .hk-btn{
  padding:11px 14px;font-size:13px;line-height:1.4;white-space:normal;height:auto;
  border-color:var(--line-2);
}
.hk-quiz-reponses .hk-btn:hover{border-color:rgba(var(--gold-rgb),.6);color:var(--gold);}
.hk-quiz-reponses .lettre{
  display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;
  border-radius:50%;background:rgba(var(--gold-rgb),.15);border:1px solid rgba(var(--gold-rgb),.45);
  font-family:var(--f-head);font-weight:800;font-size:11px;color:var(--gold);flex:0 0 auto;
}
@media (max-width:640px){
  .hk-quiz-question{font-size:14.5px;padding:10px 11px;}
  .hk-quiz-reponses .hk-btn{font-size:12.5px;padding:10px 11px;}
}

/* ============================================================
   §42 — 10.1.78 : LE NIVEAU VISIBLE + ACCESSIBILITÉ (audit)
   ------------------------------------------------------------
   L'audit relevait deux systèmes de progression qui ne se
   croisaient jamais : le rang (kills) s'affichait partout, le
   niveau XP nulle part. L'étiquette ci-dessous porte le niveau
   ET sa barre de progression vers le suivant, en une seule
   pastille assez petite pour tenir sous le pseudo du HUD.
   ============================================================ */
.hk-niveau{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px 3px; border-radius:999px;
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.16), rgba(var(--gold-rgb),.06));
  border:1px solid rgba(var(--gold-rgb),.34);
  font-family:var(--f-head); font-size:11px; letter-spacing:.4px;
  color:var(--gold); white-space:nowrap; position:relative; overflow:hidden;
}
.hk-niveau b{font-weight:800; font-size:11px; line-height:1;}
/* la barre de progression = un simple <i> dont la largeur porte le % */
.hk-niveau i{
  display:block; height:3px; min-width:2px; max-width:34px; flex:0 0 34px;
  border-radius:999px; background:rgba(var(--gold-rgb),.85);
  box-shadow:0 0 6px rgba(var(--gold-rgb),.5);
  transition:width .4s ease;
}
.hk-niveau::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.05);
}
.hk-profile-niveau{margin-top:6px; text-align:center;}
.hk-profile-suite{margin-top:4px; text-align:center;}
.hk-hud-title + .hk-niveau{margin-top:5px;}

/* ------------------------------------------------------------
   ♿ ACCESSIBILITÉ (audit : « contrastes, navigation au clavier
   et lecteurs d'écran n'ont pas été mesurés »).
   ------------------------------------------------------------ */

/* 1. Le focus clavier était invisible : on ne pouvait pas naviguer
      au Tab sans perdre sa place. Anneau doré net sur TOUT ce qui
      se focalise, y compris les liens en ligne.

   ⌨️ 10.1.82 (audit) — L'ANNEAU EXISTAIT MAIS ARRIVAIT TROP TARD.
   Symptôme mesuré : sur 50 tabulations × 3 pages (boutique, banque,
   missions), 71 arrêts sur 150 (47%) n'affichaient AUCUN anneau à
   l'instant du Tab — tous des <a> de navigation ou de pied de page.
   Cause : `.hk-btn`, `.hk-nav a` et compagnie portent `transition:
   all .18s ease`, qui anime AUSSI `outline-width`. L'anneau grossissait
   donc de 0 à 3px en 180 ms : qui enchaîne les tabulations ne voyait
   jamais de contour complet, seulement un halo qui n'a pas le temps
   de naître. On exclut donc l'anneau (outline + box-shadow) de toute
   transition : il doit être là AU MOMENT où le focus arrive, pas après.

   🎨 Contraste (WCAG 1.4.11 : 3:1 minimum pour un élément d'interface).
   L'or #e8b64c donne 10,6:1 sur les fonds sombres du site (#0f0810) —
   parfait — mais seulement 1,7:1 sur les panneaux clairs (le ticket à
   gratter du casino, #fdf6e4, et les cartes à jouer blanches) : sur
   ceux-là l'anneau doré disparaissait dans le fond. D'où l'anneau à
   DEUX tons : l'or au centre, cerné d'un liseré sombre qui, lui, fait
   17:1 sur le clair. Quel que soit le fond, un des deux tons ressort.

   Le `border-radius:6px` d'origine est retiré : il carrait les boutons
   arrondis au moment du focus (l'anneau épouse déjà le rayon de
   l'élément tout seul). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
label:focus-visible,
audio:focus-visible,
video:focus-visible,
iframe:focus-visible,
area:focus-visible,
[href]:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:focus-visible,
/* ⌨️ 10.1.82 : les champs de saisie étaient les grands oubliés. `.hk-input:focus`
   (une classe + une pseudo-classe) l'emporte sur `input:focus-visible` (un élément
   + une pseudo-classe) QUEL QUE SOIT l'ordre dans le fichier : les champs
   n'avaient donc jamais l'anneau doré, seulement un halo rouge à 18% d'opacité —
   presque rien sur un fond déjà sombre. On monte au même poids pour reprendre la
   main, et le champ signale enfin son focus comme tout le reste du site. */
.hk-input:focus-visible,
.hk-select:focus-visible,
.hk-textarea:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  /* liseré sombre à l'extérieur de l'or : lisible sur fond clair */
  box-shadow:0 0 0 6px rgba(8,4,7,.92);
  /* l'anneau ne s'anime pas — le reste du style de focus, si. */
  transition-property:color,background-color,border-color,transform,opacity,filter;
}
/* Les navigateurs anciens n'ont pas :focus-visible — repli sûr.
   L'ancien repli ne faisait que RECOLORER le contour : sans style ni
   épaisseur, il n'y avait toujours rien à voir. On dessine donc
   l'anneau en entier — mais UNIQUEMENT là où :focus-visible n'existe
   pas, sinon le simple clic à la souris se mettrait à encadrer les
   boutons partout (c'est précisément ce que :focus-visible évite). */
@supports not selector(:focus-visible){
  a:focus, button:focus, summary:focus, [tabindex]:focus,
  input:focus, select:focus, textarea:focus{
    outline:3px solid var(--gold);
    outline-offset:2px;
    box-shadow:0 0 0 6px rgba(8,4,7,.92);
  }
}

/* 2. Lien d'évitement : au premier Tab, on saute droit au contenu
      sans traverser tout le menu. Invisible à la souris. */
.hk-skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--gold); color:#1a1206; font-family:var(--f-head);
  font-weight:800; padding:10px 18px; border-radius:0 0 10px 0;
  text-decoration:none;
}
.hk-skip:focus{left:0;}

/* 3. Contrastes : le texte « muted » descendait sous le seuil
      lisible sur les panneaux sombres. Remonté au niveau AA. */
.hk-muted{color:#a7a3b3;}
.hk-help{color:#b2aebd;}

/* 4. Réservé aux lecteurs d'écran (libellés des icônes seules). */
.hk-sr{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 5. Respect de « réduire les animations » du système : on coupe
      tout mouvement pour qui en souffre (le casino en est plein). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ♿ 10.1.78 — CONTRASTE DU ROUGE, MESURÉ.
   Le rouge de marque (#e63946) tombait à 4,33 sur les panneaux sombres :
   juste sous le seuil WCAG AA du texte courant (4,5). Il reste identique
   pour les APLATS (boutons, bordures, fonds), où le contraste ne se juge
   pas de la même façon ; seul le rouge du TEXTE est remonté à #ea4a56,
   soit 4,82 — la nuance est invisible à l'œil, la lecture ne l'est pas.
   Mesures faites sur la vraie palette, pas à l'estime :
     texte principal 14,62 (AAA) · secondaire 7,33 (AAA) · aide 8,31 (AAA)
     or 9,64 (AAA) · vert 9,14 (AAA) · rouge texte 4,82 (AA). */
.hk-blood, a.hk-blood, .hk-alert.bad, .meta .hk-blood{ color:#ea4a56; }

/* ============================================================
   §43 — 10.1.79 : COMPTES LIÉS (Habbo & Discord)
   ------------------------------------------------------------
   Deux tuiles côte à côte sur le profil, et la fenêtre de
   vérification Habbo reprise de la maquette de Jonas : trois
   étapes, le code en gros avec son bouton copier, le compte à
   rebours, les instructions, puis les deux boutons.
   ============================================================ */
.hk-liens{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin-top:12px;
}
.hk-lien{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:13px 14px;
}
.hk-lien.ok{border-color:rgba(67,209,124,.45); background:rgba(67,209,124,.06);}
.hk-lien-tete{display:flex; align-items:center; gap:11px;}
.hk-lien-tete .ic{font-size:26px; flex:0 0 auto; line-height:1;}
.hk-lien-tete .grow{flex:1; min-width:0;}
.hk-lien-tete b{display:block; font-family:var(--f-head); font-size:14.5px;}
/* 🔒 10.1.83 : remplace le bouton « Détacher ». Un lien vérifié est définitif. */
.hk-lien-fixe{
  margin-top:10px; padding:7px 10px; border-radius:8px; font-size:12.5px;
  color:#7fd8a3; background:rgba(67,209,124,.09); border:1px solid rgba(67,209,124,.28);
}

/* ---------- 🔗 10.1.80 : LA PASTILLE « COMPTE VÉRIFIÉ » ----------
   Elle suit le pseudo partout : profil, annuaire, barre du joueur.
   C'est la seule récompense VISIBLE de la liaison une fois la prime
   touchée — sans elle, lier son compte ne se voyait nulle part.
   Volontairement discrète : elle accompagne le pseudo, elle ne lui
   vole pas la vedette. Taille relative pour qu'elle reste juste et
   au bon endroit aussi bien dans le gros titre du profil que dans
   une carte d'annuaire. */
.hk-ic-verif{
  display:inline-block; vertical-align:baseline;
  font-size:.68em; line-height:1;
  margin-left:.15em; cursor:help;
}
.hk-profile-name .hk-ic-verif{font-size:.40em; vertical-align:.75em; margin-left:0;}

/* ---------- la fenêtre de vérification ---------- */
.hk-verif{
  margin-top:14px; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; background:var(--panel-2);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.hk-verif-tete{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:var(--panel-3);
  border-bottom:1px solid var(--line);
}
.hk-verif-tete b{font-family:var(--f-head); font-size:16px; flex:1;}
.hk-verif-x{
  color:var(--muted); text-decoration:none; font-size:17px; line-height:1;
  padding:4px 7px; border-radius:7px;
}
.hk-verif-x:hover{color:var(--txt); background:rgba(255,255,255,.07);}
.hk-verif-corps{padding:18px 16px 16px;}

/* les trois étapes
   🔧 10.1.83 : la pastille était le conteneur — un rond de 30px en
   `place-items:center` — et depuis la 10.1.80 elle contient DEUX enfants :
   le numéro et son intitulé. L'intitulé débordait donc du rond et venait
   se poser SUR la phrase du dessous (constaté en vrai par Jonas).
   La pastille est maintenant le <b> ; le <i> est une légende sous le rond,
   et le .e n'est plus qu'une colonne transparente. */
.hk-etapes{display:flex; align-items:flex-start; justify-content:center; gap:0; margin-bottom:18px;}
.hk-etapes .e{
  flex:0 0 auto; width:104px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center;
}
.hk-etapes .e b{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-family:var(--f-head);
  font-size:13px; font-weight:800;
  background:var(--panel-3); color:var(--muted); border:1px solid var(--line);
}
.hk-etapes .e i{
  font-style:normal; font-size:11.5px; line-height:1.3; color:var(--muted);
  text-wrap:balance;
}
.hk-etapes .e.fait b{background:#43d17c; color:#0d2417; border-color:#43d17c;}
.hk-etapes .e.fait i{color:#7fd8a3;}
.hk-etapes .e.cur b{background:#4b7bec; color:#fff; border-color:#4b7bec;}
.hk-etapes .e.cur i{color:var(--txt); font-weight:700;}
/* le trait relie les CENTRES des pastilles : 30px de rond ⇒ 15px, moins la
   moitié de son épaisseur, il faut donc le descendre de 13-14px. */
.hk-etapes .trait{width:46px; height:3px; border-radius:2px; background:var(--line); display:block; margin-top:14px;}
.hk-etapes .trait.fait{background:#43d17c;}

.hk-verif-txt{text-align:center; margin:0 0 14px; font-size:14.5px;}

/* le code, en gros */
.hk-verif-code{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, rgba(75,123,236,.20), rgba(140,90,220,.18));
  border:1px solid rgba(120,140,240,.45); border-radius:12px;
  padding:16px 14px 16px 18px;
}
.hk-verif-code span{
  flex:1; text-align:center; font-family:var(--f-head);
  font-size:clamp(20px,5vw,27px); font-weight:900; letter-spacing:.16em;
  color:#fff; word-break:break-all;
}
.hk-verif-copie{
  flex:0 0 auto; width:38px; height:38px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  color:#fff; font-size:15px; line-height:1;
}
.hk-verif-copie:hover{background:rgba(255,255,255,.18);}
.hk-verif-exp{text-align:center; margin-top:9px; font-size:13px; color:var(--muted);}
.hk-verif-exp b{color:var(--gold); font-variant-numeric:tabular-nums;}
.hk-verif-exp.fini b{color:var(--blood);}

.hk-verif-inst{
  margin-top:16px; background:var(--panel-3); border:1px solid var(--line);
  border-radius:11px; padding:13px 15px; font-size:14px;
}
.hk-verif-inst ol{margin:8px 0 0; padding-left:20px; line-height:1.9;}
.hk-verif-inst b{color:var(--gold);}

.hk-verif-actions{display:flex; gap:10px; margin-top:15px; align-items:stretch;}
.hk-verif-actions .hk-btn{display:grid; place-items:center;}

@media (max-width:520px){
  .hk-etapes .e{width:86px;}
  .hk-etapes .e i{font-size:10.5px;}
  .hk-etapes .trait{width:22px;}
  .hk-verif-actions{flex-direction:column;}
}

/* ============================================================
   🏆 LES TROPHÉES DE SAISON (10.1.91, demande de Jonas)
   Le 1er de chaque catégorie du classement en reçoit un, daté,
   et décide lui-même s'il l'affiche sur son profil.
   ============================================================ */
.hk-trophees{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.hk-trophee-l{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-3); border:1px solid rgba(var(--gold-rgb),.35);
  border-radius:11px; padding:9px 12px;
}
/* Masqué : on le voit encore, mais éteint — il reste acquis. */
.hk-trophee-l.off{border-color:var(--line); opacity:.55;}
.hk-trophee{display:flex; align-items:center; gap:10px; min-width:0;}
.hk-trophee .ic{
  font-size:22px; line-height:1; flex:0 0 auto;
  width:40px; height:40px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(160deg, rgba(var(--gold-rgb),.28), rgba(var(--gold-rgb),.08));
  border:1px solid rgba(var(--gold-rgb),.45);
}
.hk-trophee .txt{display:flex; flex-direction:column; min-width:0;}
.hk-trophee .txt b{font-family:var(--f-head); font-size:13.5px; color:var(--gold); line-height:1.25;}
.hk-trophee .txt i{font-style:normal; font-size:11.5px; color:var(--muted);}
.hk-trophee.petit .ic{width:28px; height:28px; font-size:15px; border-radius:8px;}
.hk-trophee.petit .txt b{font-size:12px;}
.hk-trophee.petit .txt i{font-size:10.5px;}

/* Le bandeau « trophée à gagner » en tête d'une catégorie du classement. */
.hk-troph-enjeu{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(var(--gold-rgb),.14), rgba(var(--gold-rgb),.04));
  border:1px solid rgba(var(--gold-rgb),.4); border-radius:12px;
  padding:11px 14px; margin-bottom:12px;
}
.hk-troph-enjeu .gros{font-size:26px; line-height:1;}
.hk-troph-enjeu .d{flex:1; min-width:190px; font-size:13.5px;}
.hk-troph-enjeu .d b{color:var(--gold);}
.hk-troph-enjeu .tenant{font-size:12.5px; color:var(--muted); white-space:nowrap;}

@media (max-width:520px){
  .hk-trophee-l{flex-direction:column; align-items:flex-start;}
  .hk-troph-enjeu{gap:8px;}
}

/* ==================================================================
   🏆 CARTE « TOP JOUEURS » — MÊME GABARIT QUE SES VOISINES (10.1.92)
   ------------------------------------------------------------------
   Demande de Jonas : « à mettre comme ceux d'à côté, même taille,
   propre et lisible ».
   MESURÉ AVANT : ligne de 106 px ici contre 63 px dans « En ligne » et
   « Derniers inscrits » — la ligne s'empilait sur QUATRE lignes (icône
   de camp seule, pseudo coupé, 🏨 seul, puis le détail) parce que deux
   éléments de plus (rang à gauche, total à droite) et leurs écarts de
   12 px ne laissaient plus assez de place au pseudo.
   ================================================================== */

/* Le pseudo et ce qui le suit (🏨 Habbo, 🎭 RolePlay) forment UNE ligne
   qui ne se casse jamais en deux : le pseudo rétrécit, les icônes
   restent collées à lui. C'est ce qui garantit 2 lignes, donc la même
   hauteur que les cartes voisines. */
.hk-ligne-nom{display:flex; align-items:center; gap:4px; min-width:0;}
.hk-ligne-nom > a{min-width:0;}          /* autorise l'ellipse dans un flex */
.hk-ligne-nom > *:not(a){flex:0 0 auto;} /* les icônes ne se compriment pas */

/* Écart resserré : c'est la largeur rendue au pseudo. */
.hk-top-row{gap:8px;}

/* Le rang se pose SUR l'avatar plutôt que dans une colonne à lui : la
   colonne + son écart coûtaient 28 px de pseudo (mesuré), et c'est
   exactement ce qui manquait aux pseudos les plus longs. L'avatar étant
   toujours le premier élément de la ligne, les rangs restent alignés
   verticalement : on lit toujours le classement de haut en bas. */
/* Taille FIXE, verrouillée sur .hk-ava.s32 : un avatar qui ne charge pas
   (serveur d'images de Habbo en panne) affiche son texte de remplacement,
   et sans cette largeur imposée ce texte élargissait la colonne — 93 px
   au lieu de 34 px, mesuré — en écrasant le pseudo juste à côté. */
.hk-ava-rang{position:relative; flex:0 0 34px; width:34px; height:34px; line-height:0;}
.hk-ava-rang > .hk-ava{display:block;}
.hk-ava-rang > b{
  position:absolute; left:-4px; bottom:-4px;
  min-width:16px; height:16px; padding:0 3px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--panel); border:1px solid var(--line);
  font-family:var(--f-head); font-weight:700; font-size:9.5px; line-height:1;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.hk-ava-rang.podium > b{
  font-size:12px; padding:0 2px;
  background:var(--panel); border-color:rgba(var(--gold-rgb),.55);
}

/* Le total : pastille dorée compacte, chiffres alignés en colonne. */
.hk-top-score{
  flex:0 0 auto; align-self:center;
  padding:2px 7px; border-radius:999px;
  background:rgba(var(--gold-rgb),.14); border:1px solid rgba(var(--gold-rgb),.55);
  font-family:var(--f-head); font-weight:700; font-size:12px;
  color:var(--gold); font-variant-numeric:tabular-nums; line-height:1.5;
  min-width:30px; text-align:center;   /* la colonne des totaux reste droite */
}

/* Le camp passe dans la barre de gauche : zéro largeur consommée.
   Il reste lisible sans la couleur — le détail dessous garde ses ⚔️/🚔. */
.hk-top-row.mafia{border-left-color:rgba(var(--blood-rgb),.6);}
.hk-top-row.justice{border-left-color:rgba(90,169,255,.6);}
.hk-top-row.mafia:hover{border-left-color:var(--blood);}
.hk-top-row.justice:hover{border-left-color:var(--info);}
.hk-top-row.justice:hover{background:rgba(90,169,255,.08);}

/* ==================================================================
   📱 MOBILE — LES MÉTADONNÉES NE SE COUPENT PLUS (10.1.94, audit)
   ------------------------------------------------------------------
   `.hk-row .meta` était en `nowrap` + `text-overflow:ellipsis`, et
   `.hk-main` en `overflow-x:clip` : le texte coupé devenait donc
   totalement inatteignable, sans même un défilement. Mesuré à 390 px,
   largeur manquante :
     assassinats  331 px  (issue du contrat + arbitre invisibles)
     casino       365 px  (date d'expiration, jours restants, dividendes)
     gangs        218 px  (le nom du chef disparaît entièrement)
     forum         19 px  (l'horodatage saute)
   Sur mobile, mieux vaut deux lignes qu'une information perdue.
   ================================================================== */
@media (max-width:640px){
  .hk-row .meta{
    white-space:normal; overflow:visible; text-overflow:clip;
    overflow-wrap:anywhere;
  }
  /* Un prix coupé sur son propre bouton d'achat (mesuré : 31 px sur
     « 📦 Pack ×6 — 255 💰 »). `.hk-btn` est un `inline-flex` avec
     `overflow:hidden` : sans `flex-wrap`, l'étiquette est rognée au lieu de
     passer à la ligne. Il faut les deux. */
  .hk-btn{white-space:normal; flex-wrap:wrap; overflow:visible; flex-shrink:0;}
  .hk-btn::after{display:none;} /* le reflet au survol n'a pas de sens au doigt */

  /* Et surtout : la RANGÉE de boutons doit passer à la ligne. Mesuré sur
     l'administration à 390 px : trois boutons d'arbitrage côte à côte dans
     une colonne de 390 px étaient écrasés à 20 px de large pour 102 px de
     contenu — « ✅ Valider » devenait un rectangle vide. Ce n'est pas le
     bouton qu'il fallait laisser rétrécir, c'est la rangée qu'il fallait
     laisser se replier. 60 boutons concernés sur la seule page admin. */
  .hk-flex{flex-wrap:wrap;}

  /* Même cause, un cran plus haut. Dans la file d'arbitrage, la colonne
     centrale d'une ligne (`.grow`, en `flex:1; min-width:0`) se retrouvait
     à 0 px de large sur un écran de 390 px : ses voisins fixes prenaient
     tout. Les boutons d'action qu'elle contient devenaient donc des
     rectangles vides. On autorise la ligne à se replier, et on donne à la
     colonne centrale une largeur plancher : elle passe alors dessous, en
     pleine largeur, au lieu d'être écrasée.
     Les listes à deux lignes (Top joueurs, En ligne, Derniers inscrits)
     tiennent déjà dans 390 px : elles ne se replient pas, et gardent leur
     hauteur — vérifié après coup. */
  .hk-row{flex-wrap:wrap;}
  .hk-row > .grow{min-width:min(100%, 170px);}
}

/* ==================================================================
   §46 — 10.2.2 (8e expertise) : ACCUEIL DÉDOUBLONNÉ, CIBLES TACTILES,
   CONTRASTE ET TAILLES DE TEXTE
   ------------------------------------------------------------------
   Cinq constats de l'expertise, tous réglés ici pour ne rien disperser :
   1) l'accueil affichait quatre blocs DEUX fois (colonne latérale +
      page) — 4,8 écrans sur PC ; le mobile masquait déjà les doublons,
      le PC non ;
   2) la règle « boutons à 40 px » de la 10.2.0 ne couvrait que les
      boutons de taille normale : puces du HUD 32 px, 🚪 34 px, .sm
      34 px, liens de pseudo 15-22 px ;
   3) blanc sur bouton rouge : 3,2 à 4,1:1, sous le seuil AA (4,5) ;
   4) des textes porteurs d'information sous 11 px (compteurs, méta,
      libellés du HUD) ;
   5) le mot du justicier tronqué « ARRESTAT… » dans l'en-tête mobile.
   ================================================================== */

/* ---- 1. Accueil : chaque bloc UNE seule fois ----------------------
   Les quatre cartes latérales (butin, derniers contrats, news, WANTED)
   existent déjà, en mieux, DANS la page d'accueil : avatars, gains,
   armes utilisées, extraits de news, trois têtes mises à prix avec leur
   bouton. Ce sont donc les versions compactes de la colonne qui
   s'effacent — sur toutes les largeurs, pas seulement sur mobile (la
   règle ≤ 640 px de la 10.1.64 reste, elle couvre aussi partie et
   missions). Les autres pages gardent leur colonne intacte. */
.hk-pg-accueil .hk-c-butin,
.hk-pg-accueil .hk-c-contrats,
.hk-pg-accueil .hk-c-news,
.hk-pg-accueil .hk-c-wanted{display:none;}

/* ---- 2. Contraste : le rouge des aplats ---------------------------
   Mesuré sur la vraie palette (blanc #fff sur le HAUT du dégradé, le
   point le plus clair, donc le pire cas) :
     avant  #ff4d5e → 3,24:1   (bouton)   ·  #e63946 → 4,17:1 (onglet)
     après  #c62a38 → 5,54:1              ·  #c62a38 → 5,54:1
   Le bas du dégradé (#a4161a) était déjà à 7,75:1. La teinte reste la
   même : c'est le même rouge, un cran plus sombre. */
.hk-btn.blood{
  background:linear-gradient(180deg,var(--blood-btn),var(--blood-3)); /* 🎭 10.3.5 : jetons, pour que les thèmes suivent */
  box-shadow:0 5px 18px rgba(var(--blood-rgb),.35), inset 0 1px 0 rgba(255,255,255,.22);
}
.hk-btn.blood:hover{background:linear-gradient(180deg,var(--blood-btn-2),var(--blood-btn-3));box-shadow:0 8px 26px rgba(var(--blood-rgb),.5);}
.hk-tab.active{background:linear-gradient(180deg,var(--blood-btn),var(--blood-3));border-color:var(--blood-btn);}
/* Le rappel du chat est posé sur un fond teinté or : le rouge du texte
   courant (#ea4a56) y retombait à 4,33:1. Éclairci pour ce fond-là. */
.hk-chat-regles .hk-blood{color:#ff6b76;}

/* ---- 3. Rien d'informatif sous 11 px ------------------------------
   Les étiquettes de groupe du menu (8 px) restent : elles répètent une
   information déjà portée par les onglets eux-mêmes. */
.hk-countdown .unit span{font-size:11px;letter-spacing:1px;}
.hk-res .lbl{font-size:11px;}
.hk-stat .lbl{font-size:11px;}
.hk-notif .t{font-size:11px;}
.hk-chat-msg .h,.hk-chat-msg .edited{font-size:11px;}
.hk-chat-astuce{font-size:11px;}
.hk-item .rar{font-size:11px;letter-spacing:1.2px;}
.hk-party .motkill{font-size:11px;}

@media (max-width:640px){
  /* ---- 4. Cibles tactiles : 40 px partout où l'on tape -------------
     .hk-btn.sm (34 px) et le 🚪 de déconnexion qui en est un, les puces
     du HUD (.hk-res, 32 px), les boutons des tuiles de boutique et des
     demi-cartes, et surtout les LIENS DE PSEUDO des listes (15 à 22 px
     de haut : 76 sur l'annuaire, 91 sur Assassinats). */
  .hk-btn{min-height:40px;}
  .hk-btn.sm{min-height:40px;}
  .hk-btn.xs{min-height:40px;}
  .hk-m-demi .hk-btn{min-height:40px;}
  .hk-item .hk-btn{min-height:40px;}
  .hk-tab{min-height:40px;}
  .hk-res{min-height:40px;padding:6px 10px;}
  .hk-row a:not(.hk-badge),
  .hk-feed-l a,
  .hk-table td a,
  .hk-podium .name a,
  .hk-side .hk-card>.hk-small>a,
  .hk-hud-name a,
  .hk-nom-tuile a,
  .hk-card-title .right a,
  .hk-card .hk-flex.between>a,
  .hk-wanted a:not(.hk-btn){min-height:40px;display:inline-flex;align-items:center;}
  /* Jetons du casino : 66 pastilles de 32 px sur la seule page Casino. */
  .hk-chip{width:40px;height:40px;font-size:11px;}
  /* Les volets dépliants (Discords, inventaire, choix de badges) sont des boutons. */
  .hk-discords summary,.hk-inv>summary,.hk-badges-choix summary,.hk-chat-aide summary{min-height:40px;}

  /* ---- 5. Tailles : les compteurs et la méta redeviennent lisibles */
  .hk-countdown .unit span{font-size:10.5px;letter-spacing:.6px;}
  /* Les badges portent une vraie information (rang, état, camp) : jamais sous
     11 px. Seules les étiquettes de groupe du menu restent à 8 px — elles ne
     font que répéter le nom du cadre qui les entoure. */
  .hk-badge{font-size:11px;}
  .hk-hud-name .hk-badge{font-size:11px;padding:2px 7px;}
  .hk-profile-etats .hk-badge,.hk-profile-name .hk-badge,.hk-profile-badges .hk-badge{font-size:11px;}
  .hk-chip.chip-max{font-size:11px;}
  .hk-podium .score .sem{font-size:11px;}
  .hk-discord-row .go{font-size:11px;}
  .hk-row .meta{font-size:11px;}
  .hk-card-title .right{font-size:11px;}
  .hk-help{font-size:11px;}
  .hk-hud-title{font-size:11px;}
  .hk-feed-l .quand{font-size:10.5px !important;}
  .hk-chat-regles{font-size:11px;}

  /* ---- 6. Le mot du justicier n'est plus coupé --------------------
     « ARRESTATION » ne tenait pas dans 34vw (132 px à 390 px) et sortait
     en « ARRESTAT… », alors que le mafieux lisait le sien en entier. Le
     chip se replie au lieu de couper : le mot est toujours lisible, quel
     que soit le camp et quelle que soit la longueur du mot tiré. */
  .hk-party{flex-wrap:wrap;overflow:visible;}
  .hk-party .motkill{max-width:100%;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;}
}

/* ---- 7. Texte réservé aux lecteurs d'écran (10.2.2) ---------------
   Utilisé là où l'information visible est volontairement illisible
   (aperçu du chat flouté sur la vitrine) : le contenu masqué explique
   pourquoi, plutôt que de laisser un blanc. */
.hk-visuellement-cache{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 📱 10.3.1 — UN TABLEAU QUI DÉBORDE LE DIT.
   Sur téléphone, le détail de la cagnotte tient sur plus large que l'écran :
   il se fait glisser du doigt (.hk-table-wrap le permet déjà), encore
   fallait-il le dire — sinon la colonne « Rendre » semble ne pas exister. */
.hk-table-hint{display:none;}
@media (max-width:760px){ .hk-table-hint{display:block;} }

/* 📜 10.3.2 — L'HISTORIQUE DE LA CAGNOTTE : un séparateur par mois, discret. */
.hk-histo td{vertical-align:middle;}
.hk-histo-mois td{background:rgba(255,255,255,.03);padding:7px 10px;font-size:12px;border-top:1px solid var(--line);}
/* 📱 Sur téléphone, l'historique devient une liste : une fiche par mouvement (date · qui /
   quoi / entré · sorti · solde) au lieu d'un tableau à faire glisser — les montants
   sont ce qu'on vient chercher, ils ne doivent pas être hors écran. */
@media (max-width:700px){
  .hk-histo thead{display:none;}
  .hk-histo,.hk-histo tbody,.hk-histo tr{display:block;width:100%;}
  .hk-histo tr{padding:7px 4px;border-bottom:1px solid var(--line);}
  .hk-histo tr.hk-histo-mois{padding:0;}
  .hk-histo tr.hk-histo-mois td{display:block;}
  .hk-histo td{display:inline-block;width:auto;padding:1px 4px;border:0;text-align:left !important;vertical-align:baseline;}
  .hk-histo td.h-quoi{display:block;padding-left:4px;}
  .hk-histo td:empty{display:none;}
  .hk-histo td.h-entre::before{content:"entré ";font-weight:normal;color:var(--muted);}
  .hk-histo td.h-sorti::before{content:"sorti ";font-weight:normal;color:var(--muted);}
  .hk-histo td.h-solde::before{content:"· solde ";}
}

/* 🪙 10.3.3 — LA PHRASE ET LA BARRE « À QUI SONT CES PIÈCES » */
.hk-cagnotte-phrase{font-family:var(--f-head);font-weight:700;font-size:15px;line-height:1.45;padding:10px 12px;margin:2px 0 8px;
  background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.35);border-radius:10px;color:var(--gold);}
.hk-cagnotte-barre{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:0 0 10px;background:rgba(255,255,255,.06);}
.hk-cagnotte-barre i{display:block;height:100%;min-width:2px;}
.hk-histo-pages .cur{padding:0 6px;}

/* ============================================================
   🎭 10.3.5 — THÈMES D'ÉVÉNEMENT (demande de Jonas)
   Halloween · Noël · Pâques · Jour de l'An.
   Le Fondateur clique un bouton dans Administration → Paramètres ; le
   <body> reçoit la classe hk-theme-<clé> (pages des joueurs ET vitrine)
   et TOUT le site change d'habit : palette (les variables ci-dessous),
   fonds, boutons, menu, héros, décor animé. « Retirer le thème » enlève
   la classe : l'habit classique rouge & or revient tel quel.
   Règle : un thème ne redéfinit QUE des variables et les quelques fonds
   qui restaient en dur — aucun composant n'est réécrit.
   ============================================================ */

/* ---------- 🎃 HALLOWEEN : nuit violette, orange citrouille ---------- */
body.hk-theme-halloween{
  --bg-0:#07030c; --bg-1:#100818; --bg-2:#170b22;
  --panel:rgba(22,11,34,.84); --panel-2:rgba(34,18,48,.74);
  --line-2:rgba(255,122,26,.32);
  --blood:#ff7a1a; --blood-2:#ff9a3c; --blood-3:#c2540a; --blood-dark:#5a2606; --blood-rgb:255,122,26;
  --blood-btn:#c4540a; --blood-btn-2:#d15c0e; --blood-btn-3:#8a3a06;
  --gold:#ffc44d; --gold-2:#ffe08a; --gold-3:#b8842a; --gold-rgb:255,196,77;
  --ink:#f3ecff; --ink-soft:#cbbfd9; --muted:#9a8aa8;
  --nav-1:rgba(30,14,44,.94); --nav-2:rgba(14,6,22,.94);
  --hero-1:#2b1440; --hero-2:#170b25; --hero-3:#0d0615;
  --menu-1:#1e0f2c; --menu-2:#110818;
  --bg-glow-1:rgba(255,122,26,.16); --bg-glow-2:rgba(140,60,220,.16); --bg-glow-3:rgba(80,20,120,.28);
  --glow-blood:0 0 18px rgba(255,122,26,.5); --glow-gold:0 0 18px rgba(255,196,77,.4);
}
body.hk-theme-halloween .hk-logo-skull{background:radial-gradient(circle at 35% 30%,#3a1a52,#160a22 70%);}
body.hk-theme-halloween ::selection{background:rgba(255,122,26,.6);color:#fff;}

/* ---------- 🎄 NOËL : nuit de sapin, rouge et or chaud ---------- */
body.hk-theme-noel{
  --bg-0:#03080d; --bg-1:#071119; --bg-2:#0b1a24;
  --panel:rgba(10,24,34,.84); --panel-2:rgba(16,36,48,.74);
  --line-2:rgba(63,191,107,.32);
  --blood:#e0323c; --blood-2:#ff5560; --blood-3:#a81f27; --blood-dark:#5c1016; --blood-rgb:224,50,60;
  --gold:#f5c542; --gold-2:#ffe38a; --gold-3:#b0862a; --gold-rgb:245,197,66;
  --ink:#eef6f3; --ink-soft:#c3d3cd; --muted:#87a094;
  --ok:#4fe08d;
  --nav-1:rgba(12,36,30,.94); --nav-2:rgba(6,18,16,.94);
  --hero-1:#0f3a2c; --hero-2:#0a2320; --hero-3:#061512;
  --menu-1:#0f2a22; --menu-2:#081713;
  --bg-glow-1:rgba(63,191,107,.16); --bg-glow-2:rgba(245,197,66,.09); --bg-glow-3:rgba(224,50,60,.16);
  --glow-blood:0 0 18px rgba(224,50,60,.45); --glow-gold:0 0 18px rgba(245,197,66,.4);
}
body.hk-theme-noel .hk-shell{padding-top:14px;} /* place pour la guirlande */
body.hk-theme-noel .hk-logo-skull{background:radial-gradient(circle at 35% 30%,#1a4a38,#0a1d18 70%);}
body.hk-theme-noel ::selection{background:rgba(63,191,107,.55);color:#fff;}

/* ---------- 🐣 PÂQUES : printemps sombre, rose et jaune pastel ---------- */
body.hk-theme-paques{
  --bg-0:#0a1210; --bg-1:#10201a; --bg-2:#162a22;
  --panel:rgba(16,34,28,.84); --panel-2:rgba(24,46,38,.74);
  --line-2:rgba(255,111,174,.32);
  --blood:#ff6fae; --blood-2:#ff9ac9; --blood-3:#c9407f; --blood-dark:#6a1e44; --blood-rgb:255,111,174;
  --blood-btn:#c9407f; --blood-btn-2:#d84e90; --blood-btn-3:#a3346a;
  --gold:#ffe066; --gold-2:#fff2a8; --gold-3:#b89a2e; --gold-rgb:255,224,102;
  --ink:#f2fbf6; --ink-soft:#c8dfd2; --muted:#8aa898;
  --nav-1:rgba(20,48,40,.94); --nav-2:rgba(10,26,20,.94);
  --hero-1:#1e4a3a; --hero-2:#12302a; --hero-3:#0b1d18;
  --menu-1:#173a30; --menu-2:#0d221b;
  --bg-glow-1:rgba(255,111,174,.16); --bg-glow-2:rgba(120,220,160,.14); --bg-glow-3:rgba(255,224,102,.12);
  --glow-blood:0 0 18px rgba(255,111,174,.45); --glow-gold:0 0 18px rgba(255,224,102,.4);
}
body.hk-theme-paques .hk-logo-skull{background:radial-gradient(circle at 35% 30%,#2a5a48,#10261e 70%);}
body.hk-theme-paques ::selection{background:rgba(255,111,174,.55);color:#fff;}

/* ---------- 🎆 JOUR DE L'AN : minuit bleu, or champagne ---------- */
body.hk-theme-nouvel_an{
  --bg-0:#04060f; --bg-1:#080c1c; --bg-2:#0d1330;
  --panel:rgba(10,14,36,.84); --panel-2:rgba(18,24,54,.74);
  --line-2:rgba(90,150,255,.34);
  --blood:#4f8dff; --blood-2:#7fb0ff; --blood-3:#2a5bd0; --blood-dark:#132a6a; --blood-rgb:79,141,255;
  --blood-btn:#2f6be0; --blood-btn-2:#3a78f0; --blood-btn-3:#1e46a8;
  --gold:#ffd45c; --gold-2:#fff0a8; --gold-3:#c19a2e; --gold-rgb:255,212,92;
  --ink:#f0f3ff; --ink-soft:#c4cbe6; --muted:#8a92b8;
  --nav-1:rgba(16,22,56,.94); --nav-2:rgba(7,10,28,.94);
  --hero-1:#152252; --hero-2:#0c1433; --hero-3:#070b1e;
  --menu-1:#141c44; --menu-2:#0a0f28;
  --bg-glow-1:rgba(79,141,255,.18); --bg-glow-2:rgba(255,212,92,.1); --bg-glow-3:rgba(120,60,220,.2);
  --glow-blood:0 0 18px rgba(79,141,255,.5); --glow-gold:0 0 18px rgba(255,212,92,.45);
}
body.hk-theme-nouvel_an .hk-logo-skull{background:radial-gradient(circle at 35% 30%,#1c2a66,#0a0f2a 70%);}
body.hk-theme-nouvel_an ::selection{background:rgba(79,141,255,.55);color:#fff;}

/* ---------- Le décor : une couche fixe DERRIÈRE le contenu, jamais cliquable ----------
   z-index 0 : au-dessus du fond et de la trame (body::before), sous .hk-shell (z-index 1).
   On le voit dans les marges, entre les cartes et derrière l'en-tête — jamais par-dessus
   un texte. Tout est en CSS : aucune image, aucun script. */
.hk-decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:layout paint style;}
.hk-decor i,.hk-decor b{font-style:normal;font-weight:normal;display:block;}
.hk-decor .fl{position:absolute;top:-8vh;left:var(--x);font-size:var(--s);opacity:var(--o);line-height:1;
  animation:hkTombe var(--d) linear var(--dl) infinite;will-change:transform;}
@keyframes hkTombe{
  0%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(24px,55vh,0) rotate(180deg);}
  100%{transform:translate3d(-16px,115vh,0) rotate(360deg);}
}
/* 🎄 flocons dessinés en CSS : un rond blanc flou, quelle que soit la police du visiteur */
.hk-decor-noel .fl{width:var(--s);height:var(--s);border-radius:50%;font-size:0;
  background:radial-gradient(circle,#fff 0 38%,rgba(255,255,255,.45) 62%,transparent 72%);}
/* 🎆 confettis : petits rectangles colorés qui tournent en tombant */
.hk-decor-nouvel_an .fl{width:calc(var(--s) * .55);height:calc(var(--s) * .28);border-radius:2px;font-size:0;background:var(--c,#ffd45c);
  box-shadow:0 0 6px var(--c,#ffd45c);}
/* Halloween et Pâques : les fantômes et les œufs MONTENT en flottant, ils ne tombent pas. */
.hk-decor-halloween .fl,.hk-decor-paques .fl{top:auto;bottom:-10vh;animation-name:hkMonte;}
@keyframes hkMonte{
  0%{transform:translate3d(0,0,0) rotate(-6deg);}
  50%{transform:translate3d(-26px,-58vh,0) rotate(8deg);}
  100%{transform:translate3d(18px,-122vh,0) rotate(-6deg);}
}
/* 🎃 toiles aux coins, lune, brume au sol */
.hk-decor .toile{position:absolute;top:-10px;font-size:118px;line-height:1;opacity:.5;filter:brightness(1.35);}
.hk-decor .toile.g{left:-22px;transform:scaleX(-1);}
.hk-decor .toile.d{right:-22px;}
.hk-decor .lune{position:absolute;top:7vh;right:8vw;width:120px;height:120px;border-radius:50%;opacity:.22;
  background:radial-gradient(circle at 38% 35%,#fff5cc,#f2c76a 55%,#b98a3a 100%);box-shadow:0 0 80px 30px rgba(255,200,120,.16);}
.hk-decor .brume{position:absolute;left:-10%;right:-10%;bottom:0;height:36vh;
  background:linear-gradient(180deg,transparent,rgba(150,110,220,.14) 55%,rgba(190,150,255,.24));
  animation:hkBrume 16s ease-in-out infinite alternate;}
@keyframes hkBrume{from{opacity:.55;transform:translateX(-2%);}to{opacity:1;transform:translateX(2%);}}
/* 🎄 guirlande de lampes en haut de l'écran + neige accumulée en bas */
.hk-decor .guirlande{position:absolute;top:0;left:0;right:0;height:18px;
  background:
    radial-gradient(circle at 12px 9px,#ff5560 3.5px,transparent 4.5px) 0 0/96px 18px repeat-x,
    radial-gradient(circle at 36px 13px,#ffd45c 3.5px,transparent 4.5px) 0 0/96px 18px repeat-x,
    radial-gradient(circle at 60px 8px,#4fe08d 3.5px,transparent 4.5px) 0 0/96px 18px repeat-x,
    radial-gradient(circle at 84px 13px,#5aa9ff 3.5px,transparent 4.5px) 0 0/96px 18px repeat-x,
    linear-gradient(180deg,rgba(60,120,80,.95),rgba(60,120,80,.95)) 0 3px/100% 2px repeat-x;
  animation:hkGuirlande 1.8s steps(2,end) infinite;}
@keyframes hkGuirlande{50%{filter:brightness(.5);}}
.hk-decor .neige-sol{position:absolute;left:0;right:0;bottom:0;height:14px;opacity:.3;
  background:radial-gradient(60px 18px at 30px 100%,#fff 60%,transparent 62%) 0 0/120px 14px repeat-x,
             radial-gradient(80px 14px at 90px 100%,#eef6ff 60%,transparent 62%) 0 0/160px 14px repeat-x;}
/* 🐣 halos pastel et prairie de tulipes en bas de page */
.hk-decor .bokeh{position:absolute;width:38vw;height:38vw;max-width:520px;max-height:520px;border-radius:50%;filter:blur(60px);opacity:.26;
  animation:hkBokeh 18s ease-in-out infinite alternate;}
.hk-decor .bokeh.a{left:-10vw;top:-8vh;background:#ff9ac9;}
.hk-decor .bokeh.b{right:-8vw;top:30vh;background:#8ce0b0;animation-delay:-6s;}
.hk-decor .bokeh.c{left:30vw;bottom:-14vh;background:#ffe27a;animation-delay:-12s;}
@keyframes hkBokeh{from{transform:translate(0,0) scale(1);}to{transform:translate(4vw,-3vh) scale(1.15);}}
.hk-decor .prairie{position:absolute;left:0;right:0;bottom:-6px;font-size:26px;line-height:1;letter-spacing:10px;white-space:nowrap;opacity:.6;text-align:center;overflow:hidden;}
/* 🎆 feux d'artifice : douze étincelles en anneau, qui s'ouvrent puis s'éteignent */
.hk-decor .feu{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;opacity:0;transform:scale(.15);
  box-shadow:70px 0 0 0 var(--c),61px 35px 0 0 var(--c),35px 61px 0 0 var(--c),0 70px 0 0 var(--c),
             -35px 61px 0 0 var(--c),-61px 35px 0 0 var(--c),-70px 0 0 0 var(--c),-61px -35px 0 0 var(--c),
             -35px -61px 0 0 var(--c),0 -70px 0 0 var(--c),35px -61px 0 0 var(--c),61px -35px 0 0 var(--c),
             0 0 24px 6px var(--c);
  animation:hkFeu 4.2s ease-out infinite;}
.hk-decor .feu.f0{left:14%;top:18%;--c:#ffd45c;animation-delay:0s;}
.hk-decor .feu.f1{left:78%;top:14%;--c:#7fb0ff;animation-delay:.9s;}
.hk-decor .feu.f2{left:50%;top:9%;--c:#ff8ab8;animation-delay:1.8s;}
.hk-decor .feu.f3{left:30%;top:38%;--c:#8cf0c0;animation-delay:2.6s;}
.hk-decor .feu.f4{left:88%;top:44%;--c:#ffd45c;animation-delay:3.3s;}
.hk-decor .feu.f5{left:62%;top:28%;--c:#c9a8ff;animation-delay:1.3s;}
@keyframes hkFeu{0%{transform:scale(.15);opacity:0;}6%{opacity:1;}42%{transform:scale(1.9);opacity:0;}100%{transform:scale(1.9);opacity:0;}}
/* Téléphone : moitié moins de flocons, décor plus petit — la batterie et la lisibilité d'abord. */
@media (max-width:640px){
  .hk-decor .fl:nth-child(n+13){display:none;}
  .hk-decor .toile{font-size:64px;}
  .hk-decor .lune{width:70px;height:70px;top:9vh;right:6vw;}
  .hk-decor .prairie{font-size:20px;letter-spacing:6px;}
  .hk-decor .feu.f3,.hk-decor .feu.f4{display:none;}
}
/* ♿ Celui qui a demandé moins d'animations garde les couleurs et le décor fixe, sans rien qui bouge. */
@media (prefers-reduced-motion:reduce){
  .hk-decor *{animation:none !important;}
  .hk-decor .fl,.hk-decor .feu{display:none;}
}

/* ---------- La carte « 🎭 Thème d'événement » de l'administration ---------- */
.hk-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:4px 0 6px;}
.hk-theme-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);color:var(--ink);font-family:var(--f-body);
  background:linear-gradient(160deg,var(--t2),var(--t3) 70%);position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.hk-theme-btn::before{content:'';position:absolute;inset:0;background:radial-gradient(260px 120px at 100% 0%,var(--t1a),transparent 70%);pointer-events:none;}
.hk-theme-btn>*{position:relative;}
.hk-theme-btn:hover{transform:translateY(-2px);border-color:var(--t1);box-shadow:0 8px 22px rgba(0,0,0,.4);}
.hk-theme-btn:focus-visible{outline:2px solid var(--t1);outline-offset:2px;}
.hk-theme-btn.on{border-color:var(--t1);box-shadow:0 0 0 2px var(--t1a),0 8px 22px rgba(0,0,0,.4);}
.hk-theme-btn .ic{font-size:30px;line-height:1;}
.hk-theme-btn .nom{font-family:var(--f-head);font-weight:700;font-size:16px;letter-spacing:.6px;text-transform:uppercase;color:var(--t1);}
.hk-theme-btn .desc{font-size:11.5px;color:var(--ink-soft);line-height:1.35;}
.hk-theme-btn .etat{margin-top:4px;font-family:var(--f-head);font-weight:700;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--t1);color:var(--t1);background:rgba(0,0,0,.25);}
.hk-theme-btn.on .etat{background:var(--t1);color:#120a10;}
.hk-theme-btn.th-halloween{--t1:#ff9a3c;--t1a:rgba(255,122,26,.35);--t2:#2b1440;--t3:#120818;}
.hk-theme-btn.th-noel{--t1:#5fe39a;--t1a:rgba(63,191,107,.35);--t2:#0f3a2c;--t3:#08151f;}
.hk-theme-btn.th-paques{--t1:#ff9ac9;--t1a:rgba(255,111,174,.35);--t2:#1e4a3a;--t3:#10201a;}
.hk-theme-btn.th-nouvel_an{--t1:#8ab8ff;--t1a:rgba(79,141,255,.35);--t2:#152252;--t3:#080c1c;}

/* ============================================================
   🎰 10.3.9 — TROIS VRAIS JEUX DE CASINO (demande de Jonas) : le Baccara,
   le Vidéo Poker et la Fuite remplacent le Chifoumi, le Ticket et la Bataille.
   ============================================================ */
/* 🎴 Baccara : deux mains face à face, les cartes arrivent une par une */
.hk-bac-scene{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin:8px 0 6px;}
.hk-bac-main{flex:1 1 0;min-width:0;text-align:center;padding:8px 4px 6px;border-radius:12px;border:1px solid var(--line);background:var(--panel-3);transition:border-color .3s,box-shadow .3s;}
.hk-bac-titre{font-family:var(--f-head);font-weight:700;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px;}
.hk-bac-titre .tot{display:inline-block;min-width:22px;margin-left:4px;padding:0 6px;border-radius:8px;background:rgba(0,0,0,.35);color:var(--gold);font-size:14px;opacity:0;transition:opacity .3s;}
.hk-bac-scene.fini .hk-bac-titre .tot,.hk-bac-scene:not(.course) .hk-bac-titre .tot{opacity:1;}
.hk-bac-cartes{display:flex;justify-content:center;flex-wrap:wrap;gap:0;}
.hk-bac-carte{display:inline-block;opacity:0;transform:translateY(-18px) rotate(-6deg);}
.hk-bac-scene.distribue .hk-bac-carte{animation:hkBacIn .45s ease-out forwards;animation-delay:calc(var(--i) * .42s);}
.hk-bac-scene.fini .hk-bac-carte,.hk-bac-scene:not(.distribue):not(.course) .hk-bac-carte{opacity:1;transform:none;}
@keyframes hkBacIn{to{opacity:1;transform:none;}}
.hk-bac-vs{align-self:center;font-family:var(--f-display);font-weight:900;font-size:13px;color:var(--muted);letter-spacing:1px;}
.hk-bac-scene.fini .hk-bac-main.gagne{border-color:var(--gold);box-shadow:var(--glow-gold);}
/* 🃏 Vidéo poker : cinq cartes cliquables, « GARDER » en surbrillance */
.hk-vp-bareme{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:11px;color:var(--ink-soft);margin:0 0 6px;}
.hk-vp-bareme span{padding:1px 6px;border-radius:6px;border:1px solid transparent;}
.hk-vp-bareme span.touche{border-color:var(--gold);background:rgba(var(--gold-rgb),.14);color:var(--ink);}
.hk-vp-cartes{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:8px 0 4px;}
.hk-vp-carte{position:relative;display:inline-block;cursor:pointer;padding-bottom:16px;transition:transform .15s;animation:hkBacIn .4s ease-out both;animation-delay:calc(var(--i) * .12s);}
.hk-vp-carte input{position:absolute;opacity:0;width:1px;height:1px;}
.hk-vp-carte .bj-carte{min-width:46px !important;}
.hk-vp-carte .tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-style:normal;font-family:var(--f-head);font-weight:800;font-size:8px;letter-spacing:.2px;padding:1px 5px;border-radius:6px;background:rgba(0,0,0,.45);color:var(--muted);opacity:0;transition:opacity .15s;white-space:nowrap;}
.hk-vp-carte:hover .tag{opacity:.7;}
.hk-vp-carte input:checked ~ .tag,.hk-vp-carte.gardee .tag{opacity:1;background:var(--gold);color:#241300;}
.hk-vp-carte input:checked ~ .bj-carte{transform:translateY(-8px);box-shadow:0 0 0 2px var(--gold),0 6px 14px rgba(0,0,0,.5) !important;}
.hk-vp-carte input:focus-visible ~ .bj-carte{outline:2px solid var(--gold);outline-offset:2px;}
.hk-vp-carte.gardee .bj-carte{transform:translateY(-8px);box-shadow:0 0 0 2px var(--gold),0 6px 14px rgba(0,0,0,.5) !important;}
.hk-vp-carte.neuve .tag{opacity:1;background:rgba(90,169,255,.25);color:#8ec7ff;font-size:7.5px;}
.hk-vp-carte.dos{cursor:default;opacity:.7;}
/* 🚔 La Fuite : le compteur, la route, le fourgon et les flics */
.hk-fuite-scene{position:relative;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45));padding:10px 10px 6px;margin:6px 0;overflow:hidden;}
.hk-fuite-compteur{font-family:var(--f-display);font-weight:900;font-size:34px;letter-spacing:1px;text-align:center;color:var(--ink);text-shadow:0 0 14px rgba(var(--gold-rgb),.35);transition:color .2s;font-variant-numeric:tabular-nums;}
.hk-fuite-scene.gagne .hk-fuite-compteur{color:var(--gold);text-shadow:var(--glow-gold);}
.hk-fuite-scene.perdu .hk-fuite-compteur{color:var(--blood-2);text-shadow:var(--glow-blood);animation:hkFuiteSecoue .4s ease-in-out 2;}
@keyframes hkFuiteSecoue{25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.hk-fuite-route{position:relative;height:38px;margin:6px 0 4px;border-radius:8px;background:repeating-linear-gradient(90deg,#3a3140 0 28px,#2a2230 28px 56px);border-top:2px solid rgba(255,255,255,.08);border-bottom:2px solid rgba(255,255,255,.08);}
.hk-fuite-route::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(255,214,92,.75) 0 14px,transparent 14px 28px);}
.hk-fuite-route span{position:absolute;top:50%;transform:translateY(-50%) scaleX(-1);font-size:22px;line-height:1;transition:left .12s linear;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));}
.hk-fuite-fourgon{left:8%;z-index:2;}
.hk-fuite-flics{left:0;z-index:1;animation:hkGyro .5s steps(2) infinite;}
@keyframes hkGyro{50%{filter:drop-shadow(0 0 6px #5aa9ff) drop-shadow(0 2px 3px rgba(0,0,0,.6));}}
.hk-fuite-scene.gagne .hk-fuite-fourgon{animation:hkFuiteSauve .6s ease-out;}
@keyframes hkFuiteSauve{50%{transform:translateY(-70%) scaleX(-1);}}
.hk-fuite-scene.perdu .hk-fuite-flics{animation:none;filter:drop-shadow(0 0 8px #5aa9ff);}
.hk-fuite-verdict{text-align:center;font-family:var(--f-head);font-weight:700;font-size:13px;min-height:18px;opacity:0;transition:opacity .3s;}
.hk-fuite-verdict.show{opacity:1;}
.hk-fuite-bande{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:2px 0 8px;}
.hk-fuite-bande span{font-family:var(--f-head);font-weight:700;font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);background:var(--panel-3);}
.hk-fuite-bande span.bas{color:var(--blood-2);border-color:rgba(var(--blood-rgb),.35);}
.hk-fuite-bande span.moyen{color:var(--gold);border-color:rgba(var(--gold-rgb),.35);}
.hk-fuite-bande span.haut{color:var(--ok);border-color:rgba(67,209,124,.35);}
.hk-fuite-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.hk-fuite-presets .hk-chip{width:auto;height:30px;border-radius:999px;padding:0 12px;font-size:12px;background:linear-gradient(180deg,#3a2c3d,#221820);color:var(--gold);border:1px solid rgba(var(--gold-rgb),.45);box-shadow:none;}
.hk-fuite-presets .hk-chip:hover{border-color:var(--gold);transform:translateY(-1px);}
@media (prefers-reduced-motion:reduce){
  .hk-bac-carte,.hk-vp-carte,.hk-fuite-flics,.hk-fuite-scene.gagne .hk-fuite-fourgon,.hk-fuite-scene.perdu .hk-fuite-compteur{animation:none !important;opacity:1;transform:none;}
}

/* ============================================================
   🏥 10.3.10 — LA MORGUE EN TÊTE DE BOUTIQUE (demande de Jonas)
   Un mort a l'hôpital sous les yeux avant les rayons : la carte
   rouge, le prix (offert la première fois), le bouton. Sur
   téléphone tout s'empile, le bouton prend toute la largeur.
   ============================================================ */
.hk-morgue{border-color:rgba(var(--blood-rgb),.6);background:linear-gradient(180deg,rgba(var(--blood-rgb),.14),var(--panel) 72%);box-shadow:var(--glow-blood);}
.hk-morgue .hk-card-title .right{color:var(--blood-2);}
.hk-morgue-corps{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.hk-morgue-ic{flex:0 0 auto;font-size:44px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));animation:hkMorguePouls 2.4s ease-in-out infinite;}
.hk-morgue-ic img{display:block;}
@keyframes hkMorguePouls{50%{transform:scale(1.06);}}
.hk-morgue-txt{flex:1 1 200px;min-width:0;line-height:1.55;}
.hk-morgue-prix{margin-top:6px;font-family:var(--f-head);font-size:17px;}
.hk-morgue-prix .hk-ok{font-size:20px;letter-spacing:.5px;text-shadow:0 0 12px rgba(67,209,124,.45);}
.hk-morgue-form{flex:0 0 auto;margin:0;}
@media (max-width:640px){
  .hk-morgue-corps{gap:10px;}
  .hk-morgue-form{flex:1 1 100%;}
  .hk-morgue-form .hk-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){ .hk-morgue-ic{animation:none;} }