/* =========================================================================
   ═══  KYDOS — INTERFACE  ═══
   Refonte complète de l'habillage : coque d'application, bibliothèque, profil.

   Le principe : Kydos n'est pas un site web, c'est un logiciel. Il en prend
   donc les codes — une barre latérale permanente à gauche, une colonne
   d'informations à droite, et au milieu le contenu qui change. On sait
   toujours où l'on est et comment revenir ailleurs, sans jamais chercher.

   La couleur suit la même règle qu'un bon tableau de bord : un fond bleu nuit
   qui ne fatigue pas, des panneaux légèrement plus clairs pour poser les
   contenus, et UNE couleur d'action — le bleu électrique — réservée à ce sur
   quoi on peut cliquer. Le vert dit « en ligne », l'or dit « jetons », le
   rouge dit « attention ». Rien d'autre n'a le droit d'être coloré.

   Ce fichier est chargé APRÈS styles.css et prend le dessus : les anciennes
   couches accumulées au fil des versions n'ont plus à être démêlées.
   ========================================================================= */

:root{
  /* les fonds, du plus profond au plus clair */
  --ui-bg:#0b1020;
  --ui-bg2:#0f1526;
  --ui-side:#080d1a;
  --ui-card:#141c30;
  --ui-card2:#1a2439;
  --ui-hover:#202c47;

  /* les traits */
  --ui-line:rgba(255,255,255,.07);
  --ui-line2:rgba(255,255,255,.13);

  /* le texte */
  --ui-ink:#eaf0fb;
  --ui-ink2:#a9b6cf;
  --ui-ink3:#71809d;

  /* les accents — un seul pour l'action */
  --ui-acc:#4d7dff;
  --ui-acc2:#7c5cff;
  --ui-accSoft:rgba(77,125,255,.14);
  --ui-green:#2ed37f;
  --ui-gold:#f7b955;
  --ui-red:#ff5f6d;

  --ui-r:16px;
  --ui-r2:12px;
  --ui-sh:0 12px 32px rgba(0,0,0,.42);
  --ui-sh2:0 4px 14px rgba(0,0,0,.3);
}

html,body{background:var(--ui-bg)!important}
body{
  font-family:'Manrope','Inter',system-ui,sans-serif!important;
  color:var(--ui-ink)!important;
  background:
    radial-gradient(1100px 620px at 78% -12%,rgba(77,125,255,.13) 0,transparent 62%),
    radial-gradient(900px 560px at 4% 108%,rgba(124,92,255,.11) 0,transparent 58%),
    linear-gradient(180deg,var(--ui-bg) 0,var(--ui-bg2) 100%)!important;
}
::selection{background:rgba(77,125,255,.32)}

/* barres de défilement : fines, discrètes, jamais blanches */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:20px;
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:content-box}

/* =========================================================================
   1. LA COQUE
   Barre latérale fixe + contenu. Les écrans « application » (accueil, amis,
   profil, casino, admin) partagent exactement la même ossature, pour qu'on
   ne perde jamais ses repères en passant de l'un à l'autre.
   ========================================================================= */
#screen-hub.active,#screen-friends.active,#screen-profil.active,
#screen-casino.active,#screen-admin.active{
  display:grid!important;
  grid-template-columns:246px minmax(0,1fr);
  grid-template-rows:100%;
  align-items:stretch!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
}

/* On neutralise d'abord l'ancienne coque : elle plaçait la barre en absolu et
   compensait avec une marge sur le contenu. Deux mécanismes de mise en page
   superposés, ça finit toujours par un trou au milieu de l'écran. */
#screen-hub,#screen-friends,#screen-profil,#screen-casino,#screen-admin{
  background-image:none!important;overflow:hidden!important;
}
#screen-hub>.topbar,#screen-friends>.topbar,#screen-profil>.topbar,
#screen-casino>.topbar,#screen-admin>.topbar{
  position:relative!important;inset:auto!important;width:auto!important;
  min-height:0!important;backdrop-filter:none!important;
}
#screen-hub .hub-body,#screen-friends .friends-page,#screen-casino .casino-layout,
#screen-profil .prof-body,#screen-profil .profile-shell,#screen-admin .admin-body{
  width:auto!important;max-width:none!important;margin:0!important;height:auto!important;
}
#screen-hub .library-head{display:flex!important}

/* --- la barre latérale --- */
#screen-hub>.topbar,#screen-friends>.topbar,#screen-profil>.topbar,
#screen-casino>.topbar,#screen-admin>.topbar{
  grid-row:1;grid-column:1;
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;gap:0!important;
  height:100%!important;min-height:0!important;padding:20px 14px 14px!important;
  background:linear-gradient(180deg,var(--ui-side),#060a15)!important;
  border:none!important;border-right:1px solid var(--ui-line)!important;
  overflow:hidden auto!important;
}
/* ATTENTION : ces règles ne valent QUE pour les écrans « application ».
   Les écrans de jeu (échecs, cartes, plateaux) ont leur propre en-tête —
   leur appliquer la mise en forme d'une barre latérale y faisait flotter un
   bloc « Kydos / PLAY TOGETHER » en plein milieu du plateau. */
#screen-hub>.topbar .logo,#screen-friends>.topbar .logo,#screen-profil>.topbar .logo,
#screen-casino>.topbar .logo,#screen-admin>.topbar .logo{
  order:0;margin:0 8px 22px!important;padding:0!important;
  font-family:'Manrope',sans-serif!important;font-weight:800!important;
  font-size:21px!important;letter-spacing:-.3px!important;line-height:1.05!important;
  color:var(--ui-ink)!important;text-shadow:none!important;text-align:left!important;
}
#screen-hub>.topbar .logo::first-letter,#screen-friends>.topbar .logo::first-letter,
#screen-profil>.topbar .logo::first-letter,#screen-casino>.topbar .logo::first-letter,
#screen-admin>.topbar .logo::first-letter{color:var(--ui-acc)}
#screen-hub>.topbar .logo::after,#screen-friends>.topbar .logo::after,
#screen-profil>.topbar .logo::after,#screen-casino>.topbar .logo::after,
#screen-admin>.topbar .logo::after{
  content:"PLAY TOGETHER";display:block;margin-top:5px;
  font-size:8.5px;font-weight:800;letter-spacing:2.6px;color:var(--ui-ink3);
}

/* le menu principal */
.app-nav{order:1;display:flex!important;flex-direction:column!important;gap:3px!important;
  margin:0 0 auto!important;padding:0!important;background:none!important;border:none!important}
.app-nav button{
  display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;
  padding:11px 12px!important;border:1px solid transparent!important;border-radius:11px!important;
  background:transparent!important;color:var(--ui-ink2)!important;
  font-family:inherit!important;font-size:14px!important;font-weight:600!important;
  text-align:left!important;cursor:pointer;transition:.15s ease;position:relative;
}
.app-nav button:hover{background:rgba(255,255,255,.05)!important;color:var(--ui-ink)!important}
.app-nav button.active{
  background:var(--ui-accSoft)!important;color:#fff!important;font-weight:700!important;
  border-color:rgba(77,125,255,.3)!important;
}
.app-nav button.active::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--ui-acc);
}
.app-nav-mark{
  display:grid!important;place-items:center!important;
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  border-radius:9px!important;background:rgba(255,255,255,.06)!important;
  color:var(--ui-ink2)!important;font-size:12px!important;font-weight:800!important;
  border:1px solid var(--ui-line)!important;transition:.15s;
}
.app-nav button.active .app-nav-mark{
  background:linear-gradient(150deg,var(--ui-acc),var(--ui-acc2))!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 4px 14px rgba(77,125,255,.45)!important;
}

/* Le pied de la barre : les jetons, puis le compte. Le bloc du compte va d'un
   bord à l'autre — c'est le socle de la colonne, pas une carte posée dessus. */
#screen-hub>.topbar .topbar-mid,#screen-friends>.topbar .topbar-mid,
#screen-profil>.topbar .topbar-mid,#screen-casino>.topbar .topbar-mid,
#screen-admin>.topbar .topbar-mid{display:none!important}
.hub-actions{order:3}
.hub-actions{
  display:flex!important;flex-direction:column!important;gap:8px!important;
  margin:14px -14px -14px!important;padding:12px 0 0!important;
  border-top:1px solid var(--ui-line)!important;background:rgba(0,0,0,.32)!important;
}
.hub-actions>*{order:2;margin-left:14px!important;margin-right:14px!important}

/* Les anciennes versions verrouillaient ce pied de colonne avec des sélecteurs
   très appuyés (#screen-hub>.topbar>.hub-actions>…). On répond avec la même
   précision plutôt qu'en empilant des !important qui ne servent à rien. */
#screen-hub>.topbar>.hub-actions,#screen-friends>.topbar>.hub-actions,
#screen-profil>.topbar>.hub-actions,#screen-casino>.topbar>.hub-actions,
#screen-admin>.topbar>.hub-actions{
  display:flex!important;flex-direction:column!important;
  width:calc(100% + 28px)!important;margin:auto -14px -14px!important;
  padding:12px 0 0!important;gap:8px!important;
  border-top:1px solid var(--ui-line)!important;background:rgba(0,0,0,.32)!important;
}
#screen-hub>.topbar>.hub-actions>#hub-wallet,#screen-friends>.topbar>.hub-actions>#hub-wallet,
#screen-profil>.topbar>.hub-actions>#hub-wallet,#screen-casino>.topbar>.hub-actions>#hub-wallet,
#screen-admin>.topbar>.hub-actions>#hub-wallet{
  display:flex!important;order:1;width:auto!important;margin:0 14px!important;
}
/* Le bloc du compte ferme la colonne : d'un bord à l'autre, sans retrait. */
#screen-hub>.topbar>.hub-actions>#hub-profil,#screen-friends>.topbar>.hub-actions>#hub-profil,
#screen-profil>.topbar>.hub-actions>#hub-profil,#screen-casino>.topbar>.hub-actions>#hub-profil,
#screen-admin>.topbar>.hub-actions>#hub-profil{
  display:flex!important;order:9;width:100%!important;
  margin:6px 0 0!important;padding:13px 14px!important;
  min-height:66px!important;border:none!important;
  border-top:1px solid var(--ui-line)!important;border-radius:0!important;
  background:transparent!important;color:var(--ui-ink)!important;
}
.chip-rank,#ver-chip{display:none!important}

/* Le compte, ancré tout en bas de la barre. L'ancienne coque le débordait de
   36 pixels pour compenser un autre rembourrage : on recale sur le nôtre. */
#hub-profil{
  width:100%!important;margin:6px 0 0!important;padding:13px 14px!important;
  height:auto!important;min-height:66px!important;
  border:none!important;border-top:1px solid var(--ui-line)!important;border-radius:0!important;
  background:transparent!important;
}
#hub-profil:hover,#hub-profil[aria-expanded="true"]{background:rgba(255,255,255,.05)!important}
#hub-profil .me-txt i{background:var(--ui-accSoft)!important;color:#a9c4ff!important}
.account-menu{left:10px!important;bottom:84px!important;width:238px!important;
  background:var(--ui-card2)!important;border:1px solid var(--ui-line2)!important;
  border-radius:14px!important}
.account-menu::after{background:var(--ui-card2)!important;border-color:var(--ui-line2)!important}
.account-menu button{color:var(--ui-ink2)!important;border-radius:9px!important}
.account-menu button:hover{background:rgba(255,255,255,.06)!important;color:var(--ui-ink)!important}

/* Les jetons restent visibles : c'est la monnaie du jeu, pas un détail de
   réglage. L'ancienne coque les cachait dans un menu. */
#screen-hub .hub-actions>#hub-wallet,
#screen-friends .hub-actions>#hub-wallet,
#screen-profil .hub-actions>#hub-wallet{display:flex!important}

/* la pastille du joueur, en bas de la barre */
.chip-me{
  display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;
  padding:9px 10px!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;
  background:var(--ui-card)!important;color:var(--ui-ink)!important;text-align:left!important;
  cursor:pointer;transition:.15s;
}
.chip-me:hover{background:var(--ui-card2)!important;border-color:var(--ui-line2)!important}
.chip-me .me-txt b{font-size:13px!important;color:var(--ui-ink)!important}
.chip-me .me-txt i{font-size:10.5px!important;color:var(--ui-ink3)!important}

.chip-wallet{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  width:100%!important;padding:10px 12px!important;border-radius:12px!important;
  border:1px solid rgba(247,185,85,.26)!important;
  background:linear-gradient(120deg,rgba(247,185,85,.14),rgba(247,185,85,.04))!important;
  color:var(--ui-ink2)!important;font-size:11.5px!important;font-weight:700!important;
  letter-spacing:.4px;text-transform:uppercase;
}
.chip-wallet b{color:var(--ui-gold)!important;font-size:15px!important;letter-spacing:0}
#screen-hub>.topbar .chip-btn,#screen-friends>.topbar .chip-btn,
#screen-profil>.topbar .chip-btn,#screen-casino>.topbar .chip-btn,
#screen-admin>.topbar .chip-btn{
  width:100%!important;padding:9px 12px!important;border-radius:11px!important;
  border:1px solid var(--ui-line)!important;background:transparent!important;
  color:var(--ui-ink2)!important;font-size:12.5px!important;font-weight:600!important;text-align:left!important;
}
#screen-hub>.topbar .chip-btn:hover,#screen-friends>.topbar .chip-btn:hover,
#screen-profil>.topbar .chip-btn:hover,#screen-casino>.topbar .chip-btn:hover,
#screen-admin>.topbar .chip-btn:hover{background:rgba(255,255,255,.05)!important;
  color:var(--ui-ink)!important;border-color:var(--ui-line2)!important}
#btn-update{border-color:rgba(247,185,85,.4)!important;color:var(--ui-gold)!important;
  background:rgba(247,185,85,.08)!important}

/* =========================================================================
   2. LE CONTENU
   ========================================================================= */
.hub-body,.friends-page,.profile-shell,#screen-admin .admin-body,.casino-layout,
#screen-profil .prof-body,#screen-profil .profile-content{
  grid-row:1;grid-column:2;min-width:0;min-height:0;
}
.hub-body.ky-dashboard{
  display:grid!important;grid-template-columns:minmax(0,1fr) 300px;gap:0!important;
  height:100%!important;overflow:hidden!important;background:transparent!important;
}
.hub-center{min-width:0;overflow:hidden auto;padding:26px clamp(18px,2.6vw,34px) 46px!important}
.hub-welcome{display:none!important}

/* --- la colonne de droite --- */
.hub-social{
  border-left:1px solid var(--ui-line)!important;background:rgba(6,10,21,.5)!important;
  padding:22px 18px 34px!important;overflow:hidden auto!important;min-width:0;
}

/* =========================================================================
   3. LA BIBLIOTHÈQUE
   Un rayonnage : une sélection en haut, puis les familles de jeux. Chaque
   jeu est une jaquette dessinée — pas une photo qui met deux secondes à
   arriver, ou qui n'arrive jamais.
   ========================================================================= */
.library-shell{display:block!important;background:none!important;border:none!important;
  padding:0!important;box-shadow:none!important}

.library-head{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
  gap:22px!important;flex-wrap:wrap;margin:0 0 22px!important;padding:0!important;
  background:none!important;border:none!important;
}
.library-kicker{font-size:10px!important;font-weight:800!important;letter-spacing:2.2px!important;
  text-transform:uppercase!important;color:var(--ui-acc)!important;margin-bottom:7px!important}
.library-title{font-size:clamp(24px,2.8vw,32px)!important;font-weight:800!important;
  color:var(--ui-ink)!important;letter-spacing:-.6px!important;line-height:1.1!important}
.library-sub{font-size:13.5px!important;color:var(--ui-ink3)!important;margin-top:6px!important}
.library-head-actions{display:flex!important;align-items:flex-end!important;gap:10px!important}
.library-join-inline{display:flex;flex-direction:column;gap:6px}
.library-join-inline label{font-size:9.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ui-ink3)}
.library-join-inline>div{display:flex;gap:7px}
.library-join-inline input{
  width:110px;height:40px;padding:0 12px;border-radius:11px;
  border:1px solid var(--ui-line2)!important;background:var(--ui-card)!important;
  color:var(--ui-ink)!important;font-family:inherit;font-weight:800;letter-spacing:3px;
  text-align:center;text-transform:uppercase;outline:none;
}
.library-join-inline input:focus{border-color:var(--ui-acc)!important;
  box-shadow:0 0 0 3px var(--ui-accSoft)!important}

/* --- la barre de filtres --- */
.library-controls{
  display:grid!important;grid-template-columns:minmax(220px,1fr) auto auto auto;
  gap:10px!important;align-items:center!important;
  margin:0 0 26px!important;padding:10px!important;
  background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-r)!important;box-shadow:var(--ui-sh2)!important;
}
.library-search{position:relative;display:flex!important;align-items:center!important}
.library-search>span{display:none!important}
.library-search input{
  width:100%;height:40px;padding:0 34px 0 14px;border-radius:11px;
  border:1px solid transparent!important;background:rgba(255,255,255,.045)!important;
  color:var(--ui-ink)!important;font-family:inherit;font-size:13.5px;outline:none;
}
.library-search input::placeholder{color:var(--ui-ink3)}
.library-search input:focus{border-color:var(--ui-acc)!important;background:rgba(255,255,255,.06)!important}
.library-search button{position:absolute;right:8px;display:none;width:22px;height:22px;
  border:none;border-radius:50%;background:rgba(255,255,255,.1);color:var(--ui-ink2);cursor:pointer}
.library-search button.show{display:block}

.library-categories{display:flex!important;gap:4px!important;flex-wrap:wrap}
.library-categories button{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;
  border:1px solid transparent!important;border-radius:11px;background:transparent!important;
  color:var(--ui-ink2)!important;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.15s;
}
.library-categories button:hover{background:rgba(255,255,255,.05)!important;color:var(--ui-ink)!important}
.library-categories button.on{background:var(--ui-accSoft)!important;color:#fff!important;
  border-color:rgba(77,125,255,.34)!important}
.library-categories button b{font-size:10px;font-weight:800;color:var(--ui-ink3);
  background:rgba(255,255,255,.07);border-radius:20px;padding:2px 6px}
.library-categories button.on b{color:#cfe0ff;background:rgba(77,125,255,.28)}

.library-select{display:flex!important;flex-direction:column!important;gap:0!important}
.library-select>span{display:none!important}
.library-select select{
  height:40px;min-width:150px;padding:0 12px;border-radius:11px;
  border:1px solid var(--ui-line)!important;background:rgba(255,255,255,.045)!important;
  color:var(--ui-ink)!important;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;outline:none;
}
.library-select select option{background:#121a2c;color:var(--ui-ink)}

.library-result-head{display:flex!important;align-items:baseline!important;gap:10px!important;
  margin:0 0 14px!important;padding:0!important;border:none!important;background:none!important}
.library-result-head strong{font-size:16px!important;color:var(--ui-ink)!important;font-weight:800!important}
.library-result-head span{font-size:12px!important;color:var(--ui-ink3)!important}
.library-grid.by-shelf ~ .library-result-head,
.library-grid.by-shelf{margin-top:0}
/* en mode rayonnage, le compteur global n'apporte rien : chaque rayon a son titre */
.library-grid.by-shelf{display:block!important}
.library-shell:has(.library-grid.by-shelf) .library-result-head{display:none!important}

/* --- un rayon --- */
.shelf{margin-bottom:34px}
.shelf-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.shelf-head h3{margin:0;font-size:17px;font-weight:800;color:var(--ui-ink);letter-spacing:-.2px}
.shelf-head span{font-size:12.5px;color:var(--ui-ink3)}
.shelf-all{margin-left:auto;border:none;background:none;color:var(--ui-acc);
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 2px}
.shelf-all:hover{text-decoration:underline}
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px}
.shelf-grid.feat{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1080px){.shelf-grid.feat{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.library-grid:not(.by-shelf){display:block!important}

/* --- la jaquette d'un jeu --- */
.gcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ui-card)!important;border:1px solid var(--ui-line);border-radius:var(--ui-r);
  box-shadow:var(--ui-sh2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.gcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--game) 45%,transparent);
  box-shadow:0 18px 40px rgba(0,0,0,.5)}
.gcard-hit{position:absolute;inset:0;z-index:2;border:none;background:none;cursor:pointer}
.gcard-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0d1424}
.gcard-art .gart{width:100%;height:100%;display:block;transition:transform .35s ease}
.gcard:hover .gcard-art .gart{transform:scale(1.06)}
.gcard-tag{
  position:absolute;left:10px;top:10px;z-index:1;
  padding:4px 9px;border-radius:20px;background:rgba(6,10,20,.66);backdrop-filter:blur(6px);
  color:#dce6fb;font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);
}
.gcard-live{
  position:absolute;right:10px;top:10px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:20px;background:rgba(46,211,127,.16);
  border:1px solid rgba(46,211,127,.4);color:#8df0bd;font-size:9.5px;font-weight:800;
}
.gcard-live i{width:6px;height:6px;border-radius:50%;background:var(--ui-green);
  box-shadow:0 0 8px var(--ui-green);animation:uiPulse 1.6s ease-in-out infinite}
@keyframes uiPulse{0%,100%{opacity:1}50%{opacity:.35}}

.gcard-body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.gcard-top{display:flex;align-items:baseline;gap:8px}
.gcard-title{font-size:15px;font-weight:800;color:var(--ui-ink);letter-spacing:-.2px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard-cat{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--game);opacity:.85;white-space:nowrap}
.gcard-rule{font-size:11px;color:var(--ui-ink3);line-height:1.4}
.gcard-desc{font-size:12.5px;color:var(--ui-ink2);line-height:1.5;margin-top:2px}
.gcard-modes{display:flex;gap:6px;margin-top:auto;padding-top:10px;position:relative;z-index:3}
.gcard-modes button{
  flex:1;height:34px;border-radius:9px;border:1px solid var(--ui-line2);
  background:rgba(255,255,255,.04);color:var(--ui-ink2);
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;
}
.gcard-modes button:hover{background:rgba(255,255,255,.09);color:var(--ui-ink)}
.gcard-modes button.primary{
  background:linear-gradient(135deg,var(--ui-acc),var(--ui-acc2));border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(77,125,255,.35);
}
.gcard-modes button.primary:hover{filter:brightness(1.08)}
.gcard-lg .gcard-art{aspect-ratio:16/8}
.gcard-lg .gcard-title{font-size:18px}
.gcard-lg .gcard-body{padding:15px 16px 16px}

.library-empty{display:none!important;padding:40px 0!important;text-align:center!important;
  color:var(--ui-ink3)!important;background:none!important;border:none!important}
.library-empty.show{display:block!important}
.library-empty b{display:block;color:var(--ui-ink);font-size:16px;margin-bottom:5px}
.library-empty button{margin-top:14px;height:38px;padding:0 18px;border-radius:11px;
  border:1px solid var(--ui-line2);background:transparent;color:var(--ui-ink2);
  font-family:inherit;font-weight:700;cursor:pointer}

/* =========================================================================
   4. LA COLONNE DE DROITE
   Mise à jour, amis en ligne, activité. Ce qui vit pendant qu'on choisit.
   ========================================================================= */
.hub-social>*{margin-bottom:18px}
.hub-social h2,.hub-social h3,.social-title,.hub-social .social-heading{
  font-size:11px!important;font-weight:800!important;letter-spacing:1.8px!important;
  text-transform:uppercase!important;color:var(--ui-ink3)!important;margin:0 0 10px!important;
}
.hub-social .card,.hub-social section,.hub-social .social-card,.hub-social .panel{
  background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-r2)!important;padding:14px!important;box-shadow:none!important;
}
.hub-social .social-empty,.hub-social p,.hub-social small{color:var(--ui-ink3)!important;font-size:12px!important}
.hub-social a,.hub-social .link{color:var(--ui-acc)!important;font-weight:700}

/* =========================================================================
   5. LES BOUTONS, PARTOUT
   ========================================================================= */
.btn{border-radius:var(--ui-r2)!important;font-family:inherit!important;font-weight:700!important;
  letter-spacing:0!important;text-transform:none!important;transition:.15s!important}
.btn-gold{
  background:linear-gradient(135deg,var(--ui-acc),var(--ui-acc2))!important;color:#fff!important;
  box-shadow:0 6px 18px rgba(77,125,255,.35)!important;border:none!important;
}
.btn-gold:hover{filter:brightness(1.08)!important}
.btn-outline{background:rgba(255,255,255,.04)!important;border:1px solid var(--ui-line2)!important;
  color:var(--ui-ink)!important}
.btn-outline:hover{background:rgba(255,255,255,.09)!important;border-color:var(--ui-acc)!important;
  color:#fff!important}
.btn-ghost{background:transparent!important;color:var(--ui-ink3)!important;border:none!important}
.btn-ghost:hover{color:var(--ui-ink)!important}
.btn-red{background:linear-gradient(135deg,#ff5f6d,#d92b3f)!important;color:#fff!important;
  box-shadow:0 6px 18px rgba(217,43,63,.32)!important}
.mini{border-radius:9px!important;border:1px solid var(--ui-line2)!important;
  background:rgba(255,255,255,.04)!important;color:var(--ui-ink2)!important;
  font-family:inherit!important;font-weight:700!important}
.mini:hover:not(:disabled){background:rgba(255,255,255,.09)!important;color:var(--ui-ink)!important}
.mini.gold{background:linear-gradient(135deg,var(--ui-acc),var(--ui-acc2))!important;
  border-color:transparent!important;color:#fff!important}

/* champs de saisie génériques */
.field span{color:var(--ui-ink3)!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.6px!important;text-transform:uppercase!important}
.field input,.code-input,.join-row input{
  background:rgba(255,255,255,.045)!important;border:1px solid var(--ui-line2)!important;
  color:var(--ui-ink)!important;border-radius:var(--ui-r2)!important;
}
.field input:focus,.code-input:focus{border-color:var(--ui-acc)!important;
  box-shadow:0 0 0 3px var(--ui-accSoft)!important}
.field input::placeholder{color:var(--ui-ink3)!important}

/* =========================================================================
   6. LA CONNEXION
   Première impression : elle doit déjà ressembler au logiciel qu'on ouvre.
   ========================================================================= */
#screen-login{background:
  radial-gradient(900px 520px at 50% -10%,rgba(77,125,255,.2) 0,transparent 62%),
  linear-gradient(180deg,var(--ui-bg),#070b16)!important}
.auth-card{
  background:linear-gradient(165deg,var(--ui-card),#0f1626)!important;
  border:1px solid var(--ui-line2)!important;border-radius:22px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.6)!important;padding:38px 34px!important;
}
.auth-card .logo{
  font-family:'Manrope',sans-serif!important;font-size:30px!important;font-weight:800!important;
  letter-spacing:-.6px!important;color:var(--ui-ink)!important;text-shadow:none!important;
}
.auth-card .logo::first-letter{color:var(--ui-acc)}
/* L'ancienne feuille collait un second slogan « JEUX ENTRE AMIS » sous le nom,
   au ras des lettres, juste au-dessus d'une phrase qui disait déjà la même
   chose. Deux slogans qui se répètent et se touchent : on n'en garde qu'un. */
.auth-card .logo::after{content:none!important}
.auth-card .tagline{color:var(--ui-ink3)!important;font-size:13px!important;margin-top:8px!important}
.auth-tabs{background:rgba(255,255,255,.04)!important;border:1px solid var(--ui-line)!important;
  border-radius:12px!important;padding:4px!important;gap:4px!important}
.auth-tabs .tab{border-radius:9px!important;color:var(--ui-ink2)!important;font-weight:700!important;
  background:transparent!important;border:none!important}
.auth-tabs .tab.active{background:linear-gradient(135deg,var(--ui-acc),var(--ui-acc2))!important;
  color:#fff!important;box-shadow:0 4px 14px rgba(77,125,255,.35)!important}
.auth-card .check{color:var(--ui-ink3)!important}
.auth-card .check input{accent-color:var(--ui-acc)}
.auth-card .home-foot{color:var(--ui-ink3)!important;font-size:11.5px!important}
.auth-err{color:var(--ui-red)!important;font-size:12.5px!important;font-weight:700!important}
.auth-note{color:var(--ui-ink2)!important}

/* =========================================================================
   7. LE PROFIL
   Une fiche de joueur : la photo et le niveau à gauche, les chiffres à
   droite, et en dessous ce qu'on a débloqué.
   ========================================================================= */
.profile-shell,#screen-profil .profile-content{
  padding:26px clamp(18px,2.6vw,34px) 46px!important;overflow:hidden auto!important;
  background:transparent!important;
}
.prof-body{padding:26px clamp(18px,2.6vw,34px) 46px!important;max-width:1240px!important;
  overflow:hidden auto!important}

.prof-card{
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:clamp(16px,2.4vw,32px)!important;align-items:center!important;
  background:linear-gradient(150deg,var(--ui-card),#0f1728)!important;
  border:1px solid var(--ui-line)!important;border-radius:20px!important;
  padding:24px clamp(16px,2.4vw,28px)!important;margin-bottom:22px!important;
  box-shadow:var(--ui-sh)!important;
}
.pc-name{font-family:'Manrope',sans-serif!important;font-size:clamp(24px,2.6vw,32px)!important;
  font-weight:800!important;color:var(--ui-ink)!important;letter-spacing:-.6px!important;
  text-shadow:none!important}
.pc-bar{height:9px!important;border-radius:20px!important;background:rgba(255,255,255,.07)!important;
  border:none!important;box-shadow:none!important;overflow:hidden}
.pc-bar::after{display:none!important}
.pc-bar i{background:linear-gradient(90deg,var(--ui-acc),var(--ui-acc2))!important;
  box-shadow:0 0 14px rgba(77,125,255,.5)!important}
.pc-xp{color:var(--ui-ink3)!important;font-size:12.5px!important}
.pc-xp b,.pc-stat b{color:var(--ui-ink)!important}
.pc-next{color:var(--ui-ink3)!important}
.pc-next b{color:var(--ui-acc)!important}
.pc-stat{background:rgba(255,255,255,.04)!important;border:1px solid var(--ui-line)!important;
  border-radius:11px!important}
.pc-stat span{color:var(--ui-ink3)!important}
.pc-day{color:var(--ui-ink3)!important}
.pc-left .mini{border-radius:20px!important}

/* le niveau, en médaillon autour de la photo */
.av{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 8px 22px rgba(0,0,0,.45)!important}
.av.fr-or{box-shadow:0 0 0 3px var(--ui-gold),0 0 24px rgba(247,185,85,.4)!important}
.av.fr-noir{box-shadow:0 0 0 3px #0a0f1c,0 0 0 5px var(--ui-acc),0 0 24px rgba(77,125,255,.4)!important}
.av.fr-filet{box-shadow:0 0 0 2px var(--ui-line2)!important}
.av.fr-double{box-shadow:0 0 0 2px var(--ui-acc),0 0 0 5px #0b1020,0 0 0 7px rgba(77,125,255,.4)!important}
.av.fr-laurier{box-shadow:0 0 0 3px #4fbf8b,0 0 0 6px #0b1020,0 0 0 8px rgba(79,191,139,.4)!important}

.grade-pill{background:linear-gradient(135deg,var(--g),color-mix(in srgb,var(--g) 68%,#000))!important;
  box-shadow:0 3px 10px rgba(0,0,0,.35)!important}
.ttl{color:var(--ui-acc)!important}

/* les onglets */
.prof-tabs{background:rgba(255,255,255,.04)!important;border:1px solid var(--ui-line)!important;
  border-radius:13px!important;padding:4px!important;gap:3px!important}
.prof-tabs .tab{border-radius:10px!important;color:var(--ui-ink2)!important;font-weight:700!important;
  font-size:13.5px!important;background:transparent!important;border:none!important;padding:9px 20px!important}
.prof-tabs .tab:hover{color:var(--ui-ink)!important}
.prof-tabs .tab.active{background:linear-gradient(135deg,var(--ui-acc),var(--ui-acc2))!important;
  color:#fff!important;box-shadow:0 4px 14px rgba(77,125,255,.35)!important}

/* le parcours */
.pi-txt h3,.vest-head h3{color:var(--ui-ink)!important;font-family:'Manrope',sans-serif!important;
  font-weight:800!important;letter-spacing:-.3px!important}
.pi-txt h3::after,.vest-head h3::after{background:linear-gradient(90deg,var(--ui-acc),transparent)!important}
.pi-txt p,.vest-head span,.pr-desc,.pr-xp,.vc-desc{color:var(--ui-ink3)!important}
.pi-tab{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-r)!important;box-shadow:none!important}
.pi-tab>div{border-bottom-color:var(--ui-line)!important;color:var(--ui-ink3)!important}
.pi-tab b{color:var(--ui-ink)!important}
.pi-next{background:linear-gradient(140deg,var(--ui-accSoft),rgba(0,0,0,.2))!important;
  border:1px solid rgba(77,125,255,.3)!important;border-radius:var(--ui-r)!important;
  box-shadow:none!important}
.pi-next .pn-lvl{background:linear-gradient(150deg,var(--ui-acc),var(--ui-acc2))!important;
  color:#fff!important;box-shadow:0 4px 14px rgba(77,125,255,.4)!important}
.pi-next .pn-lbl{color:var(--ui-acc)!important}
.pi-next .pn-name{color:var(--ui-ink)!important}
.pi-next .pn-sub{color:var(--ui-ink3)!important}

.parc-track{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-r)!important;box-shadow:none!important}
.parc-row{border-bottom-color:var(--ui-line)!important}
.parc-row:hover{background:rgba(255,255,255,.035)!important}
.pr-lvl b{background:rgba(255,255,255,.05)!important;border:1px solid var(--ui-line2)!important;
  color:var(--ui-ink3)!important}
.parc-row.done .pr-lvl b{background:rgba(77,125,255,.18)!important;color:#bcd2ff!important;
  border-color:rgba(77,125,255,.35)!important}
.parc-row.now{background:var(--ui-accSoft)!important;box-shadow:inset 3px 0 0 var(--ui-acc)!important}
.parc-row.now .pr-lvl b{background:linear-gradient(150deg,var(--ui-acc),var(--ui-acc2))!important;
  color:#fff!important;border-color:transparent!important;box-shadow:0 0 18px rgba(77,125,255,.5)!important}
.pr-chips{color:var(--ui-gold)!important}
.pr-item{color:var(--ui-ink)!important}

/* le vestiaire */
.vest-card{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:14px!important;box-shadow:none!important}
.vest-card:hover{border-color:var(--ui-line2)!important;transform:translateY(-3px)}
.vest-card.on{border-color:var(--ui-acc)!important;
  background:linear-gradient(155deg,var(--ui-accSoft),var(--ui-card))!important;
  box-shadow:0 8px 22px rgba(77,125,255,.2)!important}
.vc-name{color:var(--ui-ink)!important}
.vc-on{color:var(--ui-acc)!important}
.vc-lock{color:var(--ui-ink3)!important}
.vest-card .mini{border-radius:20px!important}

/* le compte */
.cpt-card{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-r)!important;box-shadow:none!important}
.cpt-card h3{color:var(--ui-ink)!important;font-family:'Manrope',sans-serif!important;font-weight:800!important}
.cpt-card p{color:var(--ui-ink3)!important}
.cpt-card .field input{background:rgba(255,255,255,.045)!important}
.cpt-msg{color:var(--ui-acc)!important}

/* =========================================================================
   8. LA SALLE DE JEU (casino / société)
   La salle garde son organisation : une barre de jeux horizontale sous
   l'en-tête, puis le panneau. On ne touche qu'à l'habillage — reconstruire
   la mise en page casserait un écran qui fonctionne déjà.
   ========================================================================= */
#screen-casino{background:transparent!important}
#screen-casino::before,#screen-casino::after{display:none!important}
#screen-casino .casino-layout{background:transparent!important}

/* la barre des jeux, horizontale */
#screen-casino .cas-rail{
  background:rgba(6,10,21,.72)!important;border-bottom:1px solid var(--ui-line)!important;
  border-right:none!important;box-shadow:none!important;
}
#screen-casino .rail-title,#screen-casino .gamebar-title span{color:var(--ui-ink3)!important}
#screen-casino .gamebar-title b{color:var(--ui-ink)!important}
#screen-casino .cnav{color:var(--ui-ink2)!important;background:transparent!important;
  border-color:transparent!important;box-shadow:none!important;font-weight:600!important}
#screen-casino .cnav:hover{color:var(--ui-ink)!important}
#screen-casino .cnav.on{color:#fff!important;background:transparent!important}
#screen-casino .cnav.on::after{background:var(--ui-acc)!important}
#screen-casino .cnav-emo{color:var(--game,#8fb0ff)!important}

#screen-casino .cas-main{background:transparent!important}
#screen-casino .cas-hero-card,#screen-casino .cas-head{
  background:linear-gradient(150deg,var(--ui-card),#0f1728)!important;
  border:1px solid var(--ui-line)!important;border-radius:var(--ui-r)!important;
}
#screen-casino .cas-game-title,#screen-casino h2,#screen-casino h3{color:var(--ui-ink)!important}
#screen-casino .cas-game-desc,#screen-casino .cas-empty{color:var(--ui-ink3)!important}
#screen-casino .cas-modes{background:rgba(255,255,255,.04)!important;
  border:1px solid var(--ui-line)!important;border-radius:12px!important}
#screen-casino .cmode{border-radius:9px!important;color:var(--ui-ink2)!important;
  font-weight:700!important;box-shadow:none!important}
#screen-casino .cmode.on{background:linear-gradient(135deg,var(--ui-acc),var(--ui-acc2))!important;
  color:#fff!important;box-shadow:0 4px 12px rgba(77,125,255,.35)!important}
#screen-casino .cas-note{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-r2)!important;color:var(--ui-ink3)!important}
#screen-casino .cas-note b{color:var(--ui-ink)!important}

/* la liste des tables */
#screen-casino .ctable,#screen-casino .table-row,#screen-casino .cas-list>*{
  border-color:var(--ui-line)!important;
}
#screen-casino .ctable:hover,#screen-casino .table-row:hover{background:rgba(255,255,255,.04)!important}
#screen-casino .ct-name{color:var(--ui-ink)!important}
#screen-casino .ct-stakes,#screen-casino .ct-seats{color:var(--ui-ink3)!important}
#screen-casino .ct-cta{color:var(--ui-acc)!important}
#screen-casino .stk{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:12px!important;color:var(--ui-ink2)!important;box-shadow:none!important}
#screen-casino .stk.on{border-color:var(--ui-acc)!important;background:var(--ui-accSoft)!important}
#screen-casino .stk-name{color:var(--ui-ink)!important}
#screen-casino .stk-amt,#screen-casino .stk-note{color:var(--ui-ink3)!important}
#screen-casino .grant{background:linear-gradient(140deg,rgba(247,185,85,.14),rgba(0,0,0,.2))!important;
  border:1px solid rgba(247,185,85,.3)!important;border-radius:12px!important}
.cas-rules{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-r)!important;box-shadow:none!important}
.cr-title{background:rgba(255,255,255,.03)!important;border-bottom:1px solid var(--ui-line)!important;
  color:var(--ui-ink3)!important}
.cr-row{border-bottom-color:var(--ui-line)!important;color:var(--ui-ink3)!important}
.cr-row b{color:var(--ui-ink)!important}

/* =========================================================================
   9. AMIS, ADMIN, DIVERS
   ========================================================================= */
.friends-page{padding:26px clamp(18px,2.6vw,34px) 46px!important;overflow:hidden auto!important}
.friends-page-head h1,#screen-admin h2{color:var(--ui-ink)!important;
  font-family:'Manrope',sans-serif!important;font-weight:800!important;letter-spacing:-.5px!important}
.friends-page-head p{color:var(--ui-ink3)!important}
.section-kicker{color:var(--ui-acc)!important;font-size:10px!important;font-weight:800!important;
  letter-spacing:2.2px!important;text-transform:uppercase!important}
.friends-column,.friend-discovery{background:var(--ui-card)!important;
  border:1px solid var(--ui-line)!important;border-radius:var(--ui-r)!important;box-shadow:none!important}
.friends-section-head h2{color:var(--ui-ink)!important;font-size:14px!important}
.friends-section-head span{background:rgba(255,255,255,.07)!important;color:var(--ui-ink2)!important;
  border-radius:20px!important}
.friend-search input{background:rgba(255,255,255,.045)!important;border:1px solid var(--ui-line2)!important;
  color:var(--ui-ink)!important;border-radius:var(--ui-r2)!important}
.social-empty{color:var(--ui-ink3)!important}

#screen-admin .admin-body{padding:26px clamp(18px,2.6vw,34px) 46px!important;overflow:hidden auto!important}
.admin-row{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:12px!important;color:var(--ui-ink2)!important}
.admin-row.head{background:transparent!important;border:none!important;color:var(--ui-ink3)!important}
.au-name{color:var(--ui-ink)!important}

/* les fenêtres */
.modal{background:rgba(5,8,16,.72)!important;backdrop-filter:blur(8px)!important}
.modal-box{background:linear-gradient(165deg,var(--ui-card),#0e1626)!important;
  border:1px solid var(--ui-line2)!important;border-radius:20px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.62)!important;color:var(--ui-ink)!important}
.modal-box h3{color:var(--ui-ink)!important}
.modal-close{color:var(--ui-ink3)!important}
.modal-close:hover{color:var(--ui-ink)!important}
.level-box{background:linear-gradient(165deg,#1b2545,#0e1626)!important;
  border:1px solid rgba(77,125,255,.4)!important}
.lvl-halo{background:radial-gradient(58% 100% at 50% 100%,rgba(77,125,255,.55) 0,transparent 72%)!important}
.lvl-num{color:#dfe8ff!important;text-shadow:0 0 34px rgba(77,125,255,.75)!important}
.lvl-say{color:var(--ui-ink3)!important}
.lvl-rewards{background:rgba(0,0,0,.28)!important;border:1px solid var(--ui-line)!important}
.lvl-rewards .lr{border-bottom-color:var(--ui-line)!important}
.lvl-rewards .lr b{color:var(--ui-ink)!important}
.lvl-rewards .lr i{color:var(--ui-ink3)!important}

/* les bulles d'information */
.toast{background:var(--ui-card2)!important;border:1px solid var(--ui-line2)!important;
  color:var(--ui-ink)!important;border-radius:12px!important;box-shadow:var(--ui-sh)!important}

/* =========================================================================
   10. PETITS ÉCRANS
   La barre latérale devient une barre du bas : sur un téléphone, le pouce
   est en bas, pas à gauche.
   ========================================================================= */
@media(max-width:1180px){
  .hub-body.ky-dashboard{grid-template-columns:minmax(0,1fr)}
  .hub-social{display:none!important}
}
@media(max-width:900px){
  #screen-hub.active,#screen-friends.active,#screen-profil.active,
  #screen-casino.active,#screen-admin.active{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
  }
  #screen-hub>.topbar,#screen-friends>.topbar,#screen-profil>.topbar,
  #screen-casino>.topbar,#screen-admin>.topbar{
    grid-row:2!important;grid-column:1!important;
    flex-direction:row!important;align-items:center!important;
    height:auto!important;padding:8px!important;overflow:auto hidden!important;
    border-right:none!important;border-top:1px solid var(--ui-line)!important;
  }
  .topbar .logo,.hub-actions{display:none!important}
  .app-nav{flex-direction:row!important;margin:0!important;gap:2px!important}
  .app-nav button{flex-direction:column!important;gap:4px!important;padding:7px 10px!important;
    font-size:10px!important;min-width:64px}
  .app-nav button.active::before{display:none}
  .hub-body,.friends-page,.profile-shell,.casino-layout,#screen-admin .admin-body{
    grid-row:1!important;grid-column:1!important}

  .library-controls{grid-template-columns:minmax(0,1fr)!important}
  .prof-card{grid-template-columns:minmax(0,1fr)!important;text-align:center;justify-items:center}
}

/* la bannière du jeu, dans la salle */
#screen-casino .cas-hero-card{position:relative;overflow:hidden;
  min-height:210px!important;background:var(--ui-card)!important}
#screen-casino .cas-hero-art{position:absolute;inset:0;z-index:0;pointer-events:none}
#screen-casino .cas-hero-art .gart{width:100%;height:100%;object-fit:cover;opacity:.5}
#screen-casino .cas-hero-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,#0d1424 0,rgba(13,20,36,.86) 46%,rgba(13,20,36,.28) 100%);
}
#screen-casino .cas-head-left,#screen-casino .cas-hero-mode{position:relative;z-index:2}

/* =========================================================================
   ═══  LE PROFIL, VERSION TABLEAU DE BORD  ═══
   Trois colonnes : qui tu es à gauche, où tu en es au centre, ce que tu
   portes à droite. C'est la disposition d'une fiche de joueur — on lit les
   chiffres sans avoir à faire défiler quoi que ce soit.
   ========================================================================= */
#screen-profil .prof-body.profile-workspace{
  display:grid!important;grid-template-columns:244px minmax(0,1fr)!important;
  gap:16px!important;align-items:start!important;
  padding:24px clamp(16px,2.4vw,30px) 46px!important;max-width:none!important;
}
.profile-identity{position:sticky;top:0;display:flex;flex-direction:column;gap:14px}
.profile-content{min-width:0}
.profile-page-title{margin-bottom:16px}
.profile-page-title h1{margin:4px 0 0;font-size:26px;font-weight:800;color:var(--ui-ink);letter-spacing:-.5px}

/* --- la fiche d'identité --- */
#screen-profil .prof-card{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:0!important;text-align:center!important;padding:22px 18px 18px!important;
  background:linear-gradient(165deg,var(--ui-card),#0f1728)!important;
  border:1px solid var(--ui-line)!important;border-radius:18px!important;
  box-shadow:var(--ui-sh)!important;margin:0!important;
}
.idc-photo{position:relative;margin-bottom:14px}
.idc-photo .av{width:94px!important;height:94px!important}
.idc-photo .av i{font-size:34px!important}
.idc-lvl{
  position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;
  min-width:32px;height:32px;padding:0 8px;border-radius:20px;
  background:linear-gradient(150deg,var(--ui-acc),var(--ui-acc2));
  color:#fff;font-size:14px;font-weight:800;
  border:3px solid #101827;box-shadow:0 4px 14px rgba(77,125,255,.5);
}
.idc-name{font-size:21px;font-weight:800;color:var(--ui-ink);letter-spacing:-.3px;line-height:1.15}
.idc-grade{
  margin-top:7px;padding:4px 12px;border-radius:20px;font-size:10px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--g),color-mix(in srgb,var(--g) 66%,#000));color:var(--gi);
}
.idc-title{margin-top:6px;font-size:12px;font-weight:700;color:var(--ui-acc)}
#screen-profil .prof-card .mini{margin-top:14px;border-radius:20px!important;font-size:11px!important}
.idc-stats{width:100%;margin-top:16px;border-top:1px solid var(--ui-line);padding-top:6px}
.idc-stats>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 2px;border-bottom:1px solid var(--ui-line)}
.idc-stats>div:last-child{border-bottom:none}
.idc-stats span{font-size:11.5px;color:var(--ui-ink3);font-weight:600}
.idc-stats b{font-size:16px;color:var(--ui-ink);font-weight:800}
.idc-day{margin-top:10px;font-size:10px;color:var(--ui-ink3);line-height:1.45}

/* --- le tableau de bord --- */
.dash{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:16px;align-items:start}
.dash-main,.dash-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.dcard{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:16px;
  padding:18px;box-shadow:var(--ui-sh2)}
.dcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.dcard-head h3{margin:3px 0 0;font-size:16.5px;font-weight:800;color:var(--ui-ink);letter-spacing:-.2px}
.dcard-kicker{font-size:9.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--ui-acc)}
.dcard-note{font-size:11px;color:var(--ui-ink3);font-weight:700;white-space:nowrap}
.dcard-foot{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--ui-ink3)}

/* la barre de rang */
.rank-card{background:linear-gradient(140deg,rgba(77,125,255,.13),var(--ui-card) 62%)!important;
  border-color:rgba(77,125,255,.24)!important}
.rank-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.rank-head h3{margin:3px 0 0;font-size:21px;font-weight:800;color:var(--ui-ink);letter-spacing:-.4px}
.rank-right{text-align:right;white-space:nowrap}
.rank-right b{font-size:19px;color:var(--ui-ink);font-weight:800}
.rank-right span{font-size:11.5px;color:var(--ui-ink3);margin-left:4px}
.rank-bar{height:10px;border-radius:20px;background:rgba(0,0,0,.34);overflow:hidden;
  border:1px solid var(--ui-line)}
.rank-bar i{display:block;height:100%;border-radius:20px;transition:width .6s cubic-bezier(.3,1,.4,1);
  background:linear-gradient(90deg,var(--ui-acc),var(--ui-acc2));box-shadow:0 0 16px rgba(77,125,255,.55)}
.rank-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:10px;
  font-size:12px;color:var(--ui-ink3)}
.rank-foot b{color:var(--ui-ink)}

/* les tuiles de chiffres */
.dtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.dtile{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:14px;
  padding:14px 16px;box-shadow:var(--ui-sh2)}
.dtile span{display:block;font-size:10px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--ui-ink3);margin-bottom:6px}
.dtile b{font-size:24px;font-weight:800;color:var(--ui-ink);letter-spacing:-.5px}

/* le détail par jeu */
.grows{display:flex;flex-direction:column}
/* Le nom du jeu passe avant tout le reste : une ligne qui affiche « É… » ne
   sert à rien. Les chiffres se regroupent à droite et se replient si la
   colonne est étroite. */
.grow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 2px;border-bottom:1px solid var(--ui-line)}
.grow:last-child{border-bottom:none}
.grow-name{flex:1 1 120px;min-width:0}
.grow-nums{display:flex;align-items:center;gap:18px;margin-left:auto}
.grow .dbtn{flex:0 0 auto}
.grow-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-size:11px;font-weight:800;
  background:color-mix(in srgb,var(--game) 22%,transparent);color:var(--game);
  border:1px solid color-mix(in srgb,var(--game) 38%,transparent)}
.grow-name{font-size:14px;font-weight:700;color:var(--ui-ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1 1 120px}
.grow-num,.grow-rate{text-align:right;min-width:44px}
.grow-num b,.grow-rate b{display:block;font-size:15px;font-weight:800;color:var(--ui-ink)}
.grow-rate b{color:var(--ui-green)}
.grow-num i,.grow-rate i{font-style:normal;font-size:9.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--ui-ink3);font-weight:700}
.dbtn{height:32px;padding:0 16px;border-radius:9px;border:1px solid var(--ui-line2);
  background:rgba(255,255,255,.05);color:var(--ui-ink2);
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.dbtn:hover{background:linear-gradient(135deg,var(--ui-acc),var(--ui-acc2));color:#fff;border-color:transparent}
.dbtn.wide{width:100%;margin-top:14px;height:38px}
.dempty{padding:22px 4px;text-align:center;color:var(--ui-ink3);font-size:13px}
.dempty span{display:block;margin-top:5px;font-size:11.5px;opacity:.8}

/* le médaillon de niveau */
.lvl-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.lvl-ring{
  --pct:0;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ui-acc) calc(var(--pct)*1%),rgba(255,255,255,.07) 0);
  margin-bottom:14px;
}
.lvl-ring-in{width:106px;height:106px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(165deg,#18223a,#101827);border:1px solid var(--ui-line)}
.lvl-ring-in b{font-size:38px;font-weight:800;color:var(--ui-ink);line-height:1}
.lvl-ring-in span{font-size:9px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ui-ink3);margin-top:2px}
.lvl-grade-pill{padding:5px 14px;border-radius:20px;font-size:10px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--g),color-mix(in srgb,var(--g) 66%,#000));color:var(--gi)}
.lvl-chips{width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--ui-line)}
.lvl-chips span{display:block;font-size:10px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--ui-ink3)}
.lvl-chips b{font-size:24px;font-weight:800;color:var(--ui-gold);letter-spacing:-.5px}
.lvl-chips i{font-style:normal;font-size:11px;color:var(--ui-ink3);margin-left:4px}

.next-card{background:linear-gradient(140deg,rgba(124,92,255,.16),var(--ui-card) 66%)!important;
  border-color:rgba(124,92,255,.28)!important}
.next-lvl{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:linear-gradient(150deg,var(--ui-acc),var(--ui-acc2));color:#fff;
  font-size:15px;font-weight:800;box-shadow:0 4px 14px rgba(77,125,255,.45)}

/* les listes clé / valeur */
.dlist>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--ui-line);font-size:12.5px;color:var(--ui-ink3)}
.dlist>div:last-child{border-bottom:none}
.dlist b{color:var(--ui-ink);font-weight:800;text-align:right}

#screen-profil .parc-track{border-radius:12px!important;max-height:min(46vh,470px)!important}

@media(max-width:1240px){
  .dash{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  #screen-profil .prof-body.profile-workspace{grid-template-columns:minmax(0,1fr)!important}
  .profile-identity{position:static}

}

/* =========================================================================
   ═══  LA SALLE DE JEU, REFAITE  ═══
   Même grammaire que l'accueil : une bannière, puis des rayons de cartes.
   L'ancienne version empilait un tableau, un encadré et une bande de mises
   dans trois mises en page différentes ; ici tout obéit à la même règle.
   ========================================================================= */
#screen-casino .cas-main{padding:0 clamp(16px,2.4vw,32px) 44px!important}
#screen-casino .cas-head{background:none!important;border:none!important;padding:22px 0 0!important;
  margin:0 0 20px!important;border-radius:0!important}

/* --- la bannière --- */
.rhero{
  position:relative;overflow:hidden;border-radius:18px;
  min-height:176px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding:22px 24px;border:1px solid var(--ui-line);background:var(--ui-card);
  box-shadow:var(--ui-sh);
}
.rhero-art{position:absolute;inset:0;z-index:0}
.rhero-art .gart{width:100%;height:100%;opacity:.55}
.rhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,#0c1322 0,rgba(12,19,34,.9) 44%,rgba(12,19,34,.2) 100%)}
.rhero-txt{position:relative;z-index:2;flex:1;min-width:220px}
.rhero-over{font-size:9.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--game,var(--ui-acc))}
.rhero-txt h2{margin:7px 0 0;font-size:clamp(26px,3vw,36px);font-weight:800;
  color:var(--ui-ink);letter-spacing:-.8px;line-height:1.05}
.rhero-txt p{margin:8px 0 0;font-size:13px;color:var(--ui-ink2);max-width:56ch;line-height:1.5}
.rhero-modes{position:relative;z-index:2}
.rhero-modes .cas-modes{background:rgba(6,10,20,.6)!important;backdrop-filter:blur(8px);
  border:1px solid var(--ui-line2)!important;border-radius:12px!important;padding:4px!important}

/* --- un rayon dans la salle --- */
.rshelf{margin-bottom:26px}
.rshelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:13px}
.rshelf-head h3{margin:0;font-size:17px;font-weight:800;color:var(--ui-ink);letter-spacing:-.2px}
.rshelf-head span{font-size:12.5px;color:var(--ui-ink3)}
.rlive{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;
  background:rgba(46,211,127,.14);border:1px solid rgba(46,211,127,.34);
  color:#8df0bd!important;font-size:10px!important;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.rlive i{width:6px;height:6px;border-radius:50%;background:var(--ui-green);box-shadow:0 0 8px var(--ui-green)}
.rlive.private{background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.36);color:#c3b4ff!important}
.rlive.private i{background:var(--ui-acc2);box-shadow:0 0 8px var(--ui-acc2)}

/* --- les tables, en cartes --- */
.rtables{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:12px}
.rtable{
  display:flex;flex-direction:column;gap:7px;text-align:left;cursor:pointer;
  padding:15px 16px;border-radius:15px;border:1px solid var(--ui-line);
  background:var(--ui-card);font-family:inherit;transition:.16s ease;box-shadow:var(--ui-sh2);
}
.rtable:hover{transform:translateY(-3px);border-color:var(--tc,var(--ui-acc));
  box-shadow:0 16px 34px rgba(0,0,0,.44)}
.rtable.locked{opacity:.45;cursor:not-allowed}
.rtable.locked:hover{transform:none;border-color:var(--ui-line)}
.rt-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rt-tier{font-size:9.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--tc)}
.rt-seats{font-size:15px;font-weight:800;color:var(--ui-ink)}
.rt-seats i{font-style:normal;font-size:11px;color:var(--ui-ink3);font-weight:700}
.rt-stakes{font-size:15.5px;font-weight:800;color:var(--ui-ink);letter-spacing:-.2px}
.rt-buyin{font-size:11.5px;color:var(--ui-ink3)}
.rt-buyin b{color:var(--ui-ink2)}
.rt-gauge{display:block;height:4px;border-radius:20px;background:rgba(255,255,255,.07);overflow:hidden}
.rt-gauge i{display:block;height:100%;border-radius:20px;background:var(--tc,var(--ui-acc))}
.rt-cta{margin-top:2px;font-size:12px;font-weight:800;color:var(--tc,var(--ui-acc))}
.rtable.locked .rt-cta{color:var(--ui-ink3)}

/* --- créer / rejoindre --- */
.ractions{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.raction{
  position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:left;
  border-radius:16px;border:1px solid var(--ui-line);background:var(--ui-card);
  font-family:inherit;box-shadow:var(--ui-sh2);transition:.16s ease;
}
.raction.create{cursor:pointer}
.raction.create:hover{transform:translateY(-3px);border-color:var(--game,var(--ui-acc));
  box-shadow:0 16px 34px rgba(0,0,0,.44)}
.ra-art{display:block;height:104px;overflow:hidden;position:relative}
.ra-art .gart{width:100%;height:100%;opacity:.7}
.ra-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,19,34,.1),var(--ui-card))}
.ra-body{display:block;padding:16px 18px 18px}
.ra-kicker{display:block;font-size:9.5px;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--ui-acc);margin-bottom:6px}
.ra-body b{display:block;font-size:17px;font-weight:800;color:var(--ui-ink);letter-spacing:-.3px}
.ra-body small{display:block;margin-top:6px;font-size:12.5px;color:var(--ui-ink3);line-height:1.5}
.ra-cta{display:inline-block;margin-top:14px;font-size:13px;font-weight:800;color:var(--ui-acc)}
.raction .cas-join{display:flex;gap:8px;margin-top:14px}
.raction .cas-join input{
  flex:1;height:42px;padding:0 14px;border-radius:11px;
  border:1px solid var(--ui-line2)!important;background:rgba(255,255,255,.05)!important;
  color:var(--ui-ink)!important;font-family:inherit;font-weight:800;letter-spacing:4px;
  text-align:center;text-transform:uppercase;outline:none;
}
.raction .cas-join input:focus{border-color:var(--ui-acc)!important;box-shadow:0 0 0 3px var(--ui-accSoft)!important}
.raction .cas-join .btn{height:42px;padding:0 20px}

/* --- les mises --- */
.rstakes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.rstake{
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  padding:14px 12px;border-radius:13px;border:1px solid var(--ui-line);
  background:var(--ui-card);font-family:inherit;transition:.15s;
}
.rstake:hover:not(:disabled){border-color:var(--ui-line2);transform:translateY(-2px)}
.rstake b{font-size:14px;font-weight:800;color:var(--ui-ink)}
.rstake span{font-size:11.5px;color:var(--ui-ink3)}
.rstake.on{border-color:var(--ui-acc);background:var(--ui-accSoft);
  box-shadow:0 6px 18px rgba(77,125,255,.2)}
.rstake.on span{color:var(--ui-acc)}
.rstake:disabled{opacity:.35;cursor:not-allowed}

/* --- les deux encarts du bas --- */
.rgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start}
.rcard{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:16px;padding:18px}
.rcard-kicker{display:block;font-size:9.5px;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--ui-acc);margin-bottom:6px}
.rcard h4{margin:0;font-size:16px;font-weight:800;color:var(--ui-ink);letter-spacing:-.2px}
.rcard p{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--ui-ink3)}
#screen-casino .cas-rules{margin-top:0!important}

@media(max-width:820px){
  .rhero{min-height:0}
  .rhero-modes{width:100%}
}

/* Les anciennes règles contraignaient la largeur de l'en-tête et laissaient
   la carte des règles sans fond. On reprend la main sur les deux. */
#screen-casino #cas-head,#screen-casino .cas-head{display:block!important;width:100%!important;
  max-width:none!important;flex:none!important}
#screen-casino .rhero{width:100%!important;box-sizing:border-box}
#screen-casino #cas-panel,#screen-casino .cas-panel{display:block!important;width:100%!important;
  max-width:none!important}
#screen-casino .cas-rules{background:var(--ui-card)!important;border:1px solid var(--ui-line)!important;
  border-radius:16px!important;padding:0!important;overflow:hidden}
#screen-casino .cas-rules .cr-title,#screen-casino .cas-rules>summary,
#screen-casino .cas-rules>button:first-child{
  padding:16px 18px!important;background:transparent!important;color:var(--ui-ink)!important;
  font-size:16px!important;font-weight:800!important;letter-spacing:-.2px!important;
  text-transform:none!important;border-bottom:1px solid var(--ui-line)!important;
}
#screen-casino .cas-rules .cr-grid,#screen-casino .cas-rules .cr-body{padding:6px 18px 14px!important}
#screen-casino .cas-rules .cr-row{border-bottom-color:var(--ui-line)!important;color:var(--ui-ink3)!important}
#screen-casino .cas-rules .cr-row b{color:var(--ui-ink)!important}

/* la barre des jeux : de vrais onglets, alignés sur le contenu */
#screen-casino .cas-rail{padding:0 clamp(16px,2.4vw,32px)!important;
  display:flex!important;align-items:center!important;gap:26px!important}
#screen-casino .lounge-games{display:flex!important;align-items:center!important;
  gap:22px!important;overflow:auto hidden!important}
#screen-casino .cnav{position:relative!important;flex:0 0 auto!important;padding:0!important;
  height:68px!important;display:flex!important;flex-direction:column!important;
  justify-content:center!important;align-items:flex-start!important;gap:2px!important;
  border:none!important;background:none!important;border-radius:0!important}
#screen-casino .cnav.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--ui-acc)}
#screen-casino .cnav-emo{display:none!important}
#screen-casino .cnav-mood{display:block!important;font-size:10px!important;color:var(--ui-ink3)!important;
  font-weight:600!important}
#screen-casino .cnav.on .cnav-txt{color:#fff!important}
#screen-casino .cnav-txt{font-size:13.5px!important;font-weight:700!important}

/* la dotation ne flotte plus au-dessus du contenu */
#screen-casino .cas-grants{position:static!important;margin-left:auto!important;flex:0 0 auto!important}
#screen-casino .cas-grants .grant{display:flex!important;align-items:center!important;gap:12px!important;
  padding:8px 10px 8px 14px!important;border-radius:12px!important;margin:0!important}
#screen-casino .cas-grants .grant .btn{height:34px!important;padding:0 16px!important;font-size:12.5px!important}

/* --- la mise à jour, quand elle est disponible ---
   Elle ne s'applique JAMAIS toute seule : le joueur reste sur sa version tant
   qu'il n'a pas cliqué. Le bouton doit donc se voir, sinon personne ne met
   jamais à jour. */
#btn-update{
  display:none;align-items:center;gap:8px;
  border:1px solid rgba(247,185,85,.45)!important;
  background:linear-gradient(120deg,rgba(247,185,85,.2),rgba(247,185,85,.06))!important;
  color:var(--ui-gold)!important;font-weight:800!important;
  animation:majPulse 2.4s ease-in-out infinite;
}
#btn-update::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ui-gold);box-shadow:0 0 10px var(--ui-gold)}
@keyframes majPulse{0%,100%{box-shadow:0 0 0 0 rgba(247,185,85,0)}
  50%{box-shadow:0 0 0 4px rgba(247,185,85,.12)}}
#btn-update:hover{background:rgba(247,185,85,.26)!important;color:#ffdca3!important}
.hub-social #social-update-btn{width:100%;margin-top:10px}

/* =========================================================================
   LES ÉCRANS DE JEU
   Ils gardent leur propre en-tête : un bandeau haut, pas une colonne.
   ========================================================================= */
#screen-chess>.topbar,#screen-poker>.topbar,#screen-bj>.topbar,
#screen-classic>.topbar,#screen-social>.topbar,#screen-game>.topbar,#screen-slots>.topbar{
  position:relative!important;display:flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:space-between!important;gap:14px!important;
  height:auto!important;padding:10px 18px!important;
  background:rgba(6,10,21,.86)!important;backdrop-filter:blur(10px);
  border:none!important;border-bottom:1px solid var(--ui-line)!important;
}
#screen-chess>.topbar .logo,#screen-poker>.topbar .logo,#screen-bj>.topbar .logo,
#screen-classic>.topbar .logo,#screen-social>.topbar .logo,#screen-game>.topbar .logo,
#screen-slots>.topbar .logo{
  margin:0!important;font-family:'Manrope',sans-serif!important;font-weight:800!important;
  font-size:17px!important;letter-spacing:-.3px!important;color:var(--ui-ink)!important;
  text-shadow:none!important;
}
#screen-chess>.topbar .logo::after,#screen-poker>.topbar .logo::after,
#screen-bj>.topbar .logo::after,#screen-classic>.topbar .logo::after,
#screen-social>.topbar .logo::after,#screen-game>.topbar .logo::after,
#screen-slots>.topbar .logo::after{content:none!important;display:none!important}

/* Les écrans de jeu s'empilent de haut en bas : bandeau, puis plateau.
   Sans cette règle, le bandeau devenait un élément centré au milieu de
   l'écran — c'est ce qui faisait flotter un bloc « Reversi / Quitter »
   en plein milieu du plateau. */
#screen-classic.active,#screen-social.active,#screen-chess.active,
#screen-poker.active,#screen-bj.active,#screen-slots.active{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;justify-content:flex-start!important;padding:0!important;
}
#screen-classic>.topbar,#screen-social>.topbar,#screen-chess>.topbar,
#screen-poker>.topbar,#screen-bj>.topbar,#screen-slots>.topbar{flex:0 0 auto!important}

/* Le bandeau d'un écran de jeu : tout sur une ligne, rien qui s'étire. */
#screen-classic>.topbar .topbar-mid,#screen-social>.topbar .topbar-mid,
#screen-chess>.topbar .topbar-mid,#screen-poker>.topbar .topbar-mid,
#screen-bj>.topbar .topbar-mid,#screen-game>.topbar .topbar-mid,
#screen-slots>.topbar .topbar-mid{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:8px!important;flex:0 1 auto!important;width:auto!important;
}
#screen-classic>.topbar .chip,#screen-social>.topbar .chip,#screen-chess>.topbar .chip,
#screen-poker>.topbar .chip,#screen-bj>.topbar .chip,#screen-game>.topbar .chip,
#screen-slots>.topbar .chip{
  width:auto!important;padding:7px 13px!important;border-radius:20px!important;
  background:rgba(255,255,255,.05)!important;border:1px solid var(--ui-line)!important;
  color:var(--ui-ink2)!important;font-size:12.5px!important;font-weight:700!important;
  white-space:nowrap;
}
#screen-classic>.topbar .chip-btn:hover,#screen-social>.topbar .chip-btn:hover,
#screen-chess>.topbar .chip-btn:hover,#screen-poker>.topbar .chip-btn:hover,
#screen-bj>.topbar .chip-btn:hover,#screen-game>.topbar .chip-btn:hover{
  background:rgba(255,255,255,.1)!important;color:var(--ui-ink)!important;
  border-color:var(--ui-line2)!important;
}

/* =========================================================================
   LES CARTES DESSINÉES
   =========================================================================
   Le conteneur ne peint plus rien : c'est le SVG qui EST la carte. On ne
   garde du conteneur que sa place dans la mise en page et son ombre portée,
   qui suit le contour arrondi au lieu d'un rectangle.
   ========================================================================= */
.pk-card.card52,.social-card.card52{
  background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;overflow:visible!important;position:relative;
  display:inline-block!important;line-height:0!important;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.42));
}
.pk-card.card52::before,.pk-card.card52::after,
.social-card.card52::before,.social-card.card52::after{content:none!important;}
.card52>svg,.dobsym{display:block}
.social-card.card52{width:auto!important;height:auto!important;aspect-ratio:auto!important;}
.pk-card.card52{width:auto!important;height:auto!important;}
/* la carte gagnante d'un abattage : un halo doré autour de la découpe */
.pk-card.card52.win{filter:drop-shadow(0 0 0 var(--ui-gold)) drop-shadow(0 0 7px var(--ui-gold));}
/* la carte qui vole vers sa place garde la taille imposée par le script */
.pk-card.card52.pk-flying>svg,.pk-card.card52.bj-flying>svg{width:100%;height:100%}

/* la grille du jeu de cartes chiffrées : les cartes suivent la case */
.skyjo-grid button>.social-card.card52>svg{width:100%;height:auto}
.skyjo-grid button{display:block;line-height:0}
.skyjo-grid button>.social-card.card52{display:block;width:100%!important}

/* main du joueur : les cartes se chevauchent légèrement, comme en éventail */
.social-hand .social-card-button{margin-right:-14px}
.social-hand .social-card-button:last-child{margin-right:0}
.social-hand .social-card-button:not(:disabled):hover{z-index:5;position:relative}

/* =========================================================================
   LE JEU DES SYMBOLES : une vraie carte ronde
   =========================================================================
   Les symboles ne sont plus rangés en colonnes : ils sont éparpillés,
   inclinés et de tailles différentes, comme sur le carton d'origine. C'est
   ce désordre qui crée la recherche — et le plaisir de trouver.
   ========================================================================= */
.dobble-card{
  position:relative!important;display:block!important;padding:0!important;
  background:radial-gradient(circle at 34% 28%,#fffdf7,#efe8d8 70%,#ded4bd)!important;
  border:5px solid #fff!important;
  box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 0 0 2px rgba(0,0,0,.07)!important;
}
.dobble-card .dobsym-btn{
  position:absolute;transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--z));
  background:none;border:0;padding:2px;line-height:0;border-radius:12px;
  transition:transform .16s ease,filter .16s ease;
}
.dobble-card .dobsym-btn:not(:disabled){cursor:pointer}
.dobble-card .dobsym-btn:not(:disabled):hover{
  transform:translate(-50%,-50%) rotate(var(--r)) scale(calc(var(--z) * 1.22));
  filter:drop-shadow(0 0 6px rgba(255,255,255,.95));
}
.dobble-card .dobsym-btn:disabled{opacity:1}
.dobble-card.own{box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 3px var(--ui-gold)!important}

/* le memory : un dessin par paire, pas un caractère */
.memory-face{display:grid;place-items:center;line-height:0}
.memory-face>svg{width:76%;height:auto}

/* la bataille : deux vraies cartes face à face */
.war-card{background:none!important;border:0!important;box-shadow:none!important;
  display:grid!important;place-items:center;font-size:0!important}
.war-card .card52{filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}

/* le choix de couleur du joker */
.social-color-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social-color-pick>span{color:var(--ui-ink2);font-size:13px;font-weight:700}
.social-color-pick .swatch{width:38px;height:38px;border-radius:10px;border:2px solid rgba(255,255,255,.5);cursor:pointer}
.swatch.red{background:#d8342f}.swatch.yellow{background:#f0b41c}
.swatch.green{background:#2fa04c}.swatch.blue{background:#2472c8}

/* Le talon et le sabot doivent montrer LE MÊME dos que les cartes en jeu.
   Avant, le talon était rouge rayé et les cartes retournées bleu marine : on
   avait visiblement deux jeux différents sur la même table.
   Le sabot, lui, reste un coffret de bois — c'est ce qu'il est vraiment — mais
   la tranche des cartes qu'on y voit prend la couleur du dos. */
.pk-deck{
  background:
    linear-gradient(135deg,rgba(255,255,255,.1),transparent),
    repeating-linear-gradient(45deg,#1d3a6b 0 5px,#254880 5px 10px)!important;
  border:2px solid #e8edf7!important;
  box-shadow:0 12px 28px rgba(0,0,0,.45),5px 4px 0 #e8edf7,6px 5px 0 #1d3a6b,
             11px 9px 0 #e8edf7,12px 10px 0 #1d3a6b!important;
}
.pk-deck::after{border-color:rgba(143,176,255,.6)!important}
.bj-shoebox::after{
  background:repeating-linear-gradient(45deg,#1d3a6b 0 4px,#2b5391 4px 8px)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.3)!important;
}

/* =========================================================================
   LA TABLE DE JEU
   =========================================================================
   Un jeu de cartes se joue sur un tapis, pas sur un rectangle gris. Les jeux
   de cartes reçoivent donc un vrai drap vert avec sa lumière au centre et son
   filet doré ; les jeux de plateau et de déduction gardent une surface neutre,
   parce qu'un tapis de casino sous un Cluedo n'aurait aucun sens.
   ========================================================================= */
.social-table.game-hearts,.social-table.game-skat,.social-table.game-uno,
.social-table.game-skyjo,.social-table.game-dobble{
  background:
    radial-gradient(ellipse 70% 60% at 50% 32%,rgba(255,255,255,.09),transparent 70%),
    radial-gradient(ellipse at 50% 40%,#1d6b47,#144f34 56%,#0b3a26 100%)!important;
  background-color:#0e4630!important;
  border:1px solid rgba(240,200,110,.3)!important;border-radius:20px!important;
  box-shadow:inset 0 0 100px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.45)!important;
}
.social-table.game-mastermind,.social-table.game-cluedo,
.social-table.game-werewolves,.social-table.game-quoridor{
  background:linear-gradient(180deg,#161d2e,#111726)!important;
  border:1px solid var(--ui-line)!important;border-radius:18px!important;
  box-shadow:inset 0 0 70px rgba(0,0,0,.4),0 20px 46px rgba(0,0,0,.4)!important;
}
.social-hand-wrap{border-top:1px solid var(--ui-line)!important}

/* le pli : les cartes ne sont pas rangées en ligne droite, elles tombent les
   unes sur les autres avec un léger débattement */
.hearts-table,.skat-table{width:min(880px,100%)!important}
.hearts-state{gap:18px;flex-wrap:wrap;color:#cfe6da!important;font-size:13px}
.hearts-state b{color:#f6e3a8}
.trick-table,.skat-trick{gap:10px!important}
.trick-table>div,.skat-trick>div{transition:transform .18s ease}
.trick-table>div:nth-child(1),.skat-trick>div:nth-child(1){transform:rotate(-6deg)}
.trick-table>div:nth-child(2),.skat-trick>div:nth-child(2){transform:rotate(3deg) translateY(-6px)}
.trick-table>div:nth-child(3),.skat-trick>div:nth-child(3){transform:rotate(-2deg) translateY(4px)}
.trick-table>div:nth-child(4),.skat-trick>div:nth-child(4){transform:rotate(7deg)}
.trick-table>div>small,.skat-trick>div>small{
  color:#bfe0cf;font-weight:700;letter-spacing:.2px;
  background:rgba(0,0,0,.34);padding:2px 8px;border-radius:99px;
}
.trick-table>span,.skat-trick>span{color:rgba(220,240,228,.45);font-style:italic}
.uno-table{width:min(820px,100%)!important}
.uno-direction,.uno-color{color:#cfe6da!important}
.uno-color b{color:#f6e3a8;font-size:15px}
.uno-pile>div>small,.skyjo-piles>div>small{color:#bfe0cf!important}
.skyjo-opponent{color:#cfe6da!important}

/* =========================================================================
   LE MEMORY
   =========================================================================
   Une carte retournée doit ressembler au dos d'une carte — pas à une case
   grise avec un filigrane. On reprend le motif exact du paquet, et la face
   révélée devient un carton clair sur lequel le dessin ressort.
   ========================================================================= */
.classic-board.game-memory .classic-cell{
  border:2px solid #e8edf7!important;border-radius:9px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.1),transparent),
    repeating-linear-gradient(45deg,#1d3a6b 0 5px,#254880 5px 10px)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.4)!important;
}
.classic-board.game-memory .classic-cell.hidden::before{content:none!important}
.classic-board.game-memory .classic-cell.hidden::after{
  content:"";position:absolute;inset:6px;border-radius:5px;
  border:1.5px solid rgba(143,176,255,.5);
}
.classic-board.game-memory .classic-cell:not(:disabled):hover{
  transform:translateY(-4px);box-shadow:0 12px 22px rgba(0,0,0,.5)!important;
}
.classic-board.game-memory .classic-cell.revealed,
.classic-board.game-memory .classic-cell.matched,
.classic-board.game-memory .classic-cell.mismatch{
  background:#fbf9f4!important;border-color:rgba(0,0,0,.24)!important;
}
.classic-board.game-memory .classic-cell.matched{
  border-color:#2ed37f!important;box-shadow:0 0 0 2px rgba(46,211,127,.45)!important;
}
.classic-board.game-memory .classic-cell.mismatch{border-color:#e0645a!important}
.classic-board.game-memory .classic-cell.revealed::after,
.classic-board.game-memory .classic-cell.matched::after,
.classic-board.game-memory .classic-cell.mismatch::after{content:none!important}
.memory-face>svg{width:60%;height:auto;max-width:52px}

/* =========================================================================
   LA MAIN DU JOUEUR
   =========================================================================
   Une carte injouable ne doit pas devenir grise : elle reste une vraie carte,
   simplement en retrait. Ce sont les cartes JOUABLES qu'on met en avant.
   ========================================================================= */
.social-hand .social-card-button:disabled{opacity:.66!important;filter:saturate(.9) brightness(.86)}
.social-hand .social-card-button:not(:disabled){filter:drop-shadow(0 0 9px rgba(80,220,150,.45))}
.social-hand .social-card-button.selected{filter:drop-shadow(0 0 12px var(--ui-gold))}

/* la grille du Skyjo : douze cartes qui tiennent à l'écran */
.skyjo-grid.mine{grid-template-columns:repeat(4,62px)!important;grid-template-rows:repeat(3,86px)!important}
.skyjo-grid{grid-template-columns:repeat(4,40px);grid-template-rows:repeat(3,55px)}

/* =========================================================================
   L'ÉCHIQUIER
   =========================================================================
   Un damier de tournoi est en bois : les cases ont un fil, la lumière ne les
   frappe pas toutes pareil, et le cadre est un vrai bord épais qui porte
   l'ombre du plateau. Deux dégradés très fins suffisent à donner ce grain
   sans alourdir l'affichage.
   ========================================================================= */
.chess-board{
  border-width:14px!important;
  border-radius:10px!important;
  box-shadow:0 26px 60px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.25)!important;
}
.sqr::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(94deg,rgba(0,0,0,.05) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(88deg,rgba(255,255,255,.05) 0 1px,transparent 1px 9px);
  opacity:.85;
}
.sqr.dark::before{opacity:.62}
.sqr>.pc{position:relative;z-index:2}
.sqr>.coord{position:relative;z-index:3}
/* la case d'où l'on part, celle où l'on va, l'échec : lisibles sur du bois */
.sqr.sel{box-shadow:inset 0 0 0 4px rgba(247,185,85,.9)}
.sqr.check{box-shadow:inset 0 0 0 4px rgba(224,90,80,.95)}

/* =========================================================================
   LE JEU DE DÉDUCTION (Mastermind)
   =========================================================================
   Dans la vraie vie, c'est une planche percée : les pions sont des demi-boules
   de plastique brillant enfoncées dans des trous, et le verdict est un carré
   de quatre picots — pas une phrase. C'est ce qu'on reproduit ici.
   ========================================================================= */
.master-board{
  width:min(680px,100%)!important;
  background:linear-gradient(180deg,#1a2233,#131a29)!important;
  border:1px solid var(--ui-line)!important;border-radius:16px!important;
  padding:14px!important;gap:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 36px rgba(0,0,0,.4)!important;
}
.master-row{
  grid-template-columns:30px 1fr 62px!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  border-radius:10px;
}
.master-row:hover{background:rgba(255,255,255,.03)}
.master-row>span{color:var(--ui-ink3);font-size:12px;font-weight:800}
/* les pions : une demi-boule, lumière en haut à gauche, ombre portée dans le trou */
.master-row i,.master-secret i,.master-draft i{
  width:30px!important;height:30px!important;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.75),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 68% 82%,rgba(0,0,0,.45),rgba(0,0,0,0) 52%),
    var(--peg)!important;
  box-shadow:0 3px 6px rgba(0,0,0,.55),inset 0 -2px 4px rgba(0,0,0,.35)!important;
  border:1px solid rgba(0,0,0,.35);
}
/* un emplacement vide, c'est un trou percé, pas un rond gris */
.master-draft i[style*="#343b37"]{
  background:radial-gradient(circle at 50% 34%,#0a0e17,#161d2c)!important;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07)!important;
}
.master-keys{
  display:grid;grid-template-columns:repeat(2,11px);grid-auto-rows:11px;gap:4px;
  justify-content:center;align-content:center;
  padding:5px;border-radius:7px;background:rgba(0,0,0,.35);
}
.master-keys i{width:11px;height:11px;border-radius:50%}
.master-keys .k-noir{background:radial-gradient(circle at 34% 28%,#5a6472,#0c1017);box-shadow:0 1px 2px rgba(0,0,0,.7)}
.master-keys .k-blanc{background:radial-gradient(circle at 34% 28%,#fff,#c3cad6);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.master-keys .k-vide{background:radial-gradient(circle at 50% 34%,#0a0e17,#141a27);box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.master-secret{
  background:linear-gradient(180deg,#0d1220,#0a0e18)!important;
  border:1px solid var(--ui-line)!important;border-radius:12px!important;margin-bottom:10px;
}
.master-secret.hidden{color:var(--ui-ink3)!important}
.master-empty{color:var(--ui-ink3)!important}
.code-peg{
  width:42px!important;height:42px!important;border:2px solid rgba(255,255,255,.55)!important;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.75),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 68% 82%,rgba(0,0,0,.4),rgba(0,0,0,0) 52%),
    var(--peg)!important;
  box-shadow:0 4px 9px rgba(0,0,0,.5)!important;cursor:pointer;transition:transform .14s ease;
}
.code-peg:hover{transform:translateY(-4px) scale(1.06)}

/* =========================================================================
   PUISSANCE 4
   =========================================================================
   Le vrai jeu, c'est une grille de plastique bleu montée sur pied : la
   lumière glisse sur la face avant, chaque trou est percé (donc creux, donc
   plus sombre au bord), et les jetons sont brillants. Sans ces trois choses,
   on regarde un tableur bleu.
   ========================================================================= */
.classic-board.game-connect4{
  background:
    linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,0) 44%),
    linear-gradient(180deg,#2a7fc9,#12558f 62%,#0d4275)!important;
  border-radius:18px 18px 8px 8px!important;
  padding:18px!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.35),
    0 30px 70px rgba(0,0,0,.5)!important;
}
.classic-board.game-connect4 .classic-cell{
  background:radial-gradient(circle at 50% 40%,#070c14,#0d1420)!important;
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,.9),inset 0 -3px 5px rgba(255,255,255,.09),
    0 1px 0 rgba(255,255,255,.16)!important;
}
.connect-disc{
  background-image:
    radial-gradient(circle at 33% 27%,rgba(255,255,255,.6),rgba(255,255,255,0) 48%),
    radial-gradient(circle at 70% 80%,rgba(0,0,0,.4),rgba(0,0,0,0) 55%)!important;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),0 3px 7px rgba(0,0,0,.5)!important;
}
.connect-disc.side-1{background-color:#e0433f!important}
.connect-disc.side-2{background-color:#f2c231!important}
/* la colonne survolée montre où le jeton va tomber */
.classic-board.game-connect4 .classic-cell.legal::after{
  background:rgba(255,255,255,.5)!important;box-shadow:0 0 10px rgba(255,255,255,.5)!important;
}

/* =========================================================================
   LES PIONS, PIERRES ET DAMES
   =========================================================================
   Une dame de jeu, une pierre de go, un pion de Quoridor : ce sont tous des
   objets tournés, avec une arête biseautée, une lumière en haut à gauche et
   une ombre portée sur le plateau. Un disque de couleur unie ne rend rien de
   ça. On ajoute donc partout la même recette : dégradé radial + arête + ombre.
   ========================================================================= */

/* les dames : bois tourné, avec la gorge concentrique du plateau */
.draught{
  background-image:
    radial-gradient(circle at 34% 27%,rgba(255,255,255,.55),rgba(255,255,255,0) 50%),
    radial-gradient(circle at 68% 82%,rgba(0,0,0,.4),rgba(0,0,0,0) 58%)!important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.12),
    inset 0 0 0 5px rgba(0,0,0,.14),
    inset 0 -3px 5px rgba(0,0,0,.3),
    0 5px 10px rgba(0,0,0,.5)!important;
}
.draught::before{
  content:"";position:absolute;inset:22%;border-radius:50%;
  border:1px solid rgba(0,0,0,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.draught{position:relative}
.draught.white{background-color:#f2eee3!important}
.draught.black{background-color:#1a1d1b!important}
.draught.king{
  box-shadow:
    inset 0 0 0 3px rgba(247,185,85,.85),
    inset 0 -3px 5px rgba(0,0,0,.3),
    0 0 0 2px rgba(247,185,85,.4),0 5px 10px rgba(0,0,0,.5)!important;
}
.draught i{color:#f7b955!important;font-size:52%!important}

/* les pierres : verre bombé pour le reversi, bois pour le gomoku et le pente */
.stone{
  background-image:
    radial-gradient(circle at 33% 26%,rgba(255,255,255,.62),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 70% 80%,rgba(0,0,0,.42),rgba(0,0,0,0) 56%)!important;
  box-shadow:0 5px 11px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.2)!important;
}
.stone.side-1{background-color:#14181a!important}
.stone.side-2{background-color:#f4f1e8!important}
.classic-board.game-hex .stone.side-1{background-color:#d24d44!important}
.classic-board.game-hex .stone.side-2{background-color:#4a86c8!important}

/* les graines de l'awalé et du mancala : de vraies graines dans un creux */
.seed-count{position:relative}
.seed-count>i{
  background-image:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 48%)!important;
  box-shadow:0 3px 6px rgba(0,0,0,.45)!important;
}

/* le Quoridor : plateau de bois, pions tournés, barrières en tranche */
.q-pawn{
  background-image:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.55),rgba(255,255,255,0) 48%),
    radial-gradient(circle at 68% 84%,rgba(0,0,0,.4),rgba(0,0,0,0) 56%)!important;
  box-shadow:0 6px 11px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.25)!important;
}
.quoridor-cell{
  background:linear-gradient(150deg,#e0c391,#cba871)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.18)!important;
}
.q-wall{
  background:linear-gradient(180deg,#f0cf62,#c39a2c)!important;border-radius:3px;
  box-shadow:0 4px 9px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.5)!important;
}
.quoridor-board{
  background:linear-gradient(160deg,#6b4630,#4a3121)!important;
  border-radius:12px!important;box-shadow:0 26px 56px rgba(0,0,0,.5)!important;
}

/* le morpion : un tracé à la main plutôt que deux lettres */
.tt-mark{font-weight:800!important}
.classic-board.game-tictactoe{
  background:linear-gradient(180deg,#18202f,#121826)!important;border-radius:16px!important;
  box-shadow:0 22px 50px rgba(0,0,0,.45)!important;
}
.classic-board.game-tictactoe .classic-cell{
  background:rgba(255,255,255,.045)!important;border-radius:12px!important;
}
.classic-board.game-tictactoe .classic-cell:not(:disabled):hover{background:rgba(255,255,255,.09)!important}

/* =========================================================================
   L'OTHELLO
   =========================================================================
   Le plateau officiel est un carton vert bordé de noir, avec un quadrillage
   fin et QUATRE points de repère aux intersections d3/d6/f3/f6 — les
   « étoiles ». C'est ce détail qui fait qu'on reconnaît le jeu du premier
   coup d'œil, et il manquait complètement.
   ========================================================================= */
.classic-board.game-reversi{
  position:relative;
  background-color:#166a45!important;
  background-image:
    /* les quatre étoiles, aux intersections d3 · f3 · d6 · f6 */
    radial-gradient(circle 5px at 25% 25%,rgba(0,0,0,.62),transparent 100%),
    radial-gradient(circle 5px at 75% 25%,rgba(0,0,0,.62),transparent 100%),
    radial-gradient(circle 5px at 25% 75%,rgba(0,0,0,.62),transparent 100%),
    radial-gradient(circle 5px at 75% 75%,rgba(0,0,0,.62),transparent 100%),
    radial-gradient(ellipse 80% 70% at 50% 34%,rgba(255,255,255,.08),transparent 72%),
    linear-gradient(160deg,#1c7a4d,#125a39)!important;
  border:12px solid #14181a!important;border-radius:8px!important;
  box-shadow:0 26px 58px rgba(0,0,0,.5),inset 0 0 60px rgba(0,0,0,.28)!important;
}
.classic-board.game-reversi .classic-cell{border-color:rgba(0,0,0,.42)!important}

/* le gomoku et le pente : un vrai goban, avec le fil du bois et les hoshi */
.classic-board.game-gomoku,.classic-board.game-pente{
  box-shadow:0 26px 58px rgba(0,0,0,.5),inset 0 0 70px rgba(120,70,20,.28)!important;
  border-radius:6px!important;
}

/* le mancala et l'awalé : des godets creusés dans une planche */
.classic-board.game-mancala .classic-cell,.classic-board.game-awale .classic-cell{
  box-shadow:inset 0 6px 12px rgba(0,0,0,.55),inset 0 -3px 5px rgba(255,255,255,.12),
             0 1px 0 rgba(255,255,255,.14)!important;
}

/* =========================================================================
   LE JETON DE CASINO
   =========================================================================
   Le jeton est dessiné (js/deck.js) : encoches de tranche, anneau pointillé,
   pastille centrale. Le conteneur ne peint donc plus rien — il ne garde que sa
   place et son ombre. Les anciennes règles .bj-chip.k0..k4 sont neutralisées
   ici, sinon leur dégradé passe DEVANT le dessin.
   ========================================================================= */
.bj-chip.chipdraw,.bj-tokenchip.chipdraw,.pk-bet.chipdraw{
  background:none!important;background-image:none!important;
  border:0!important;padding:0!important;width:auto!important;height:auto!important;
  line-height:0!important;color:transparent!important;text-shadow:none!important;
  box-shadow:none!important;border-radius:50%!important;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.6));
  transition:transform .16s ease,filter .16s ease;
}
.bj-chip.chipdraw::before,.bj-chip.chipdraw::after,
.bj-tokenchip.chipdraw::before,.bj-tokenchip.chipdraw::after,
.pk-bet.chipdraw::before,.pk-bet.chipdraw::after{content:none!important}
.bj-chip.chipdraw{cursor:pointer}
.bj-chip.chipdraw:hover:not(:disabled){transform:translateY(-7px) scale(1.08)}
.bj-chip.chipdraw:disabled{filter:grayscale(.7) brightness(.55);cursor:not-allowed}
.chipsvg{display:block}

/* la chaise libre : une vraie chaise dessinée, plus le mot « SEAT » en anglais */
.chair-icon{filter:none!important;display:grid;place-items:center;color:rgba(255,216,115,.8)}
.chair-icon>svg{display:block}
.seat-chair:hover .chair-icon{color:var(--ui-gold);transform:scale(1.1)}

/* =========================================================================
   LES GODETS DE L'AWALÉ ET DU MANCALA
   =========================================================================
   Une graine par graine, dessinée à sa place. Le compte reste affiché en
   petit — mais il n'est plus la seule information : on voit le tas.
   ========================================================================= */
.seed-count{position:relative!important;width:100%;height:100%;display:block!important}
.seed-count>i{
  position:absolute!important;width:15%!important;height:15%!important;
  min-width:7px;min-height:7px;border-radius:50% 50% 48% 52%!important;
  box-shadow:0 2px 3px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.6)!important;
}
.seed-count>b{
  position:absolute!important;left:50%;bottom:4%;transform:translateX(-50%);
  z-index:3;min-width:22px;padding:1px 6px;border-radius:99px;
  background:rgba(12,9,6,.82);color:#f3e6c8;font-size:11px;font-weight:800;
}
.seed-count.vide::after{
  content:"";position:absolute;inset:34%;border-radius:50%;
  background:rgba(0,0,0,.25);
}

/* =========================================================================
   LE HEX
   =========================================================================
   Sans bords colorés, impossible de savoir quel joueur doit relier quels
   côtés : c'était la première question que se posait n'importe qui devant ce
   plateau. Les deux paires de bords portent maintenant la couleur du camp.
   ========================================================================= */
.classic-board.game-hex .classic-cell{
  background:linear-gradient(150deg,#e6d6ab,#cdb887)!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
/* le plateau fait 11 × 11 : la première et la dernière RANGÉE appartiennent au
   camp rouge, la première et la dernière COLONNE au camp bleu. On teinte donc
   ces hexagones-là, exactement comme sur un plateau imprimé. */
.classic-board.game-hex .classic-cell:nth-child(-n+11),
.classic-board.game-hex .classic-cell:nth-last-child(-n+11){
  background:linear-gradient(150deg,#eda9a1,#d4796f)!important;
}
.classic-board.game-hex .classic-cell:nth-child(11n+1),
.classic-board.game-hex .classic-cell:nth-child(11n){
  background:linear-gradient(150deg,#a8c6ea,#7ea4d2)!important;
}
.classic-board.game-hex .classic-cell.legal::after{opacity:.55}

/* les repères de coup jouable, plus discrets sur les damiers de bois :
   ils indiquaient les coups possibles en criant, ce qui saturait le plateau */
.classic-board.game-gomoku .classic-cell.legal::after,
.classic-board.game-pente .classic-cell.legal::after{
  background:rgba(38,125,87,.42)!important;
}
.classic-board.game-gomoku .classic-cell.legal:hover::after,
.classic-board.game-pente .classic-cell.legal:hover::after{
  background:#2ed37f!important;box-shadow:0 0 8px rgba(46,211,127,.8)!important;
}

/* le pente : le plateau de tournoi a bien un quadrillage — il manquait */
.classic-board.game-pente{
  background-image:
    linear-gradient(rgba(72,45,20,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,45,20,.5) 1px,transparent 1px)!important;
  background-size:calc(100% / 19) calc(100% / 19)!important;
}

/* =========================================================================
   L'ENQUÊTE
   =========================================================================
   Chaque indice devient une carte avec son image et sa couleur. On lit sa
   main d'un coup d'œil au lieu d'épeler six libellés.
   ========================================================================= */
.cluedo-clues{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.clue-chip{
  display:grid!important;justify-items:center;gap:4px;
  border:0!important;background:none!important;padding:0!important;
  max-width:96px;text-align:center;
}
.clue-img{line-height:0;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.clue-chip>b{font-size:11.5px;color:var(--ui-ink);line-height:1.25}
.clue-chip>small{font-size:10px;color:var(--ui-ink3)}
.cluedo-mansion{gap:10px}
.cluedo-room{
  background:linear-gradient(160deg,#efe6d2,#ddd0b4)!important;
  border:2px solid rgba(0,0,0,.22)!important;border-radius:10px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px rgba(0,0,0,.35)!important;
  color:#2a231a!important;
}
.cluedo-room.legal{border-color:var(--ui-green)!important;box-shadow:0 0 0 2px rgba(46,211,127,.4),0 6px 14px rgba(0,0,0,.35)!important}
.cluedo-room.mine{border-color:var(--ui-gold)!important;box-shadow:0 0 0 3px rgba(247,185,85,.45),0 6px 14px rgba(0,0,0,.35)!important}
.cluedo-room>span{color:#5f5343!important}

/* =========================================================================
   LE MORPION
   =========================================================================
   Le vrai morpion, c'est un dièse tracé à main levée — pas neuf boîtes. On
   dessine les quatre traits et on laisse les cases transparentes.
   ========================================================================= */
.classic-board.game-tictactoe{
  position:relative;background:transparent!important;box-shadow:none!important;
  gap:0!important;padding:0!important;
}
.classic-board.game-tictactoe::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(to right,transparent calc(33.33% - 3px),rgba(214,226,255,.5) calc(33.33% - 3px) calc(33.33% + 3px),transparent calc(33.33% + 3px)),
    linear-gradient(to right,transparent calc(66.66% - 3px),rgba(214,226,255,.5) calc(66.66% - 3px) calc(66.66% + 3px),transparent calc(66.66% + 3px)),
    linear-gradient(to bottom,transparent calc(33.33% - 3px),rgba(214,226,255,.5) calc(33.33% - 3px) calc(33.33% + 3px),transparent calc(33.33% + 3px)),
    linear-gradient(to bottom,transparent calc(66.66% - 3px),rgba(214,226,255,.5) calc(66.66% - 3px) calc(66.66% + 3px),transparent calc(66.66% + 3px));
  border-radius:6px;
}
.classic-board.game-tictactoe .classic-cell{
  background:transparent!important;border:0!important;border-radius:0!important;position:relative;z-index:1;
}
.classic-board.game-tictactoe .classic-cell:not(:disabled):hover{background:rgba(255,255,255,.06)!important}
.classic-board.game-tictactoe .classic-cell.legal::after{
  width:9px!important;background:rgba(120,200,170,.35)!important;box-shadow:none!important;
}
.tt-mark{font-size:clamp(46px,9vh,96px)!important;font-weight:300!important}

/* la main : une carte injouable reste lisible, elle n'est pas éteinte */
.social-hand .social-card-button:disabled{opacity:.84!important;filter:none!important}

/* =========================================================================
   LA BARRE DE FILTRES DE LA BIBLIOTHÈQUE
   =========================================================================
   Deux feuilles de style se disputaient ces boutons : l'ancienne imposait
   `border-radius:0`, une hauteur de 34 px et un soulignement ; la nouvelle
   imposait un fond et une bordure en `!important`. Le résultat visible :
   « Tous » ressortait en rectangle à angles vifs, plus haut que ses voisins,
   pendant que les autres restaient plats. Une seule règle décide désormais,
   et elle est écrite avec assez de poids pour ne plus jamais être contredite.

   Le principe : un contrôle segmenté. Un rail creusé, et le segment actif
   posé dessus en relief — la même mécanique qu'un sélecteur d'onglets de
   système. Tout ce qui est sur cette ligne fait 40 px de haut.
   ========================================================================= */
/* Deux rangées plutôt qu'une : la recherche et les deux listes en haut, le
   rail de catégories en dessous sur toute la largeur. Sur une seule ligne,
   tout se tassait — la recherche était rognée à « Nom, ambiance ou ty… » et
   les pastilles passaient à la ligne n'importe comment. */
#screen-hub .library-controls{
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) auto auto!important;
  gap:9px 10px!important;
  align-items:center!important;
  padding:9px!important;
}
#screen-hub .library-controls .library-search{grid-column:1;grid-row:1}
#screen-hub .library-controls .library-select:nth-of-type(1){grid-column:2;grid-row:1}
#screen-hub .library-controls .library-select:nth-of-type(2){grid-column:3;grid-row:1}
#screen-hub .library-controls .library-categories{
  grid-column:1 / -1;grid-row:2;
  height:auto!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start;
  gap:2px!important;
  padding:4px!important;
  border-radius:13px!important;
  background:rgba(0,0,0,.28)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45)!important;
  overflow-x:auto;
  scrollbar-width:none;
}
#screen-hub .library-controls .library-categories::-webkit-scrollbar{display:none}
#screen-hub .library-controls .library-categories button{
  flex:0 0 auto;
  min-width:0!important;
  height:32px!important;
  padding:0 13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--ui-ink2)!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
#screen-hub .library-controls .library-categories button:hover{
  background:rgba(255,255,255,.06)!important;
  color:var(--ui-ink)!important;
}
/* le segment actif : posé en relief sur le rail, jamais un cadre rapporté */
#screen-hub .library-controls .library-categories button.on{
  background:linear-gradient(180deg,#3f4d6e,#313c58)!important;
  color:#fff!important;
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
#screen-hub .library-controls .library-categories button b{
  min-width:18px;
  padding:1px 5px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.07)!important;
  color:var(--ui-ink3)!important;
  font-size:10px!important;
  font-weight:800!important;
  text-align:center;
}
#screen-hub .library-controls .library-categories button.on b{
  background:rgba(255,255,255,.16)!important;
  color:#eaf0ff!important;
}

/* la recherche et les deux listes s'alignent sur la même hauteur de 40 px */
#screen-hub .library-controls .library-search input,
#screen-hub .library-controls .library-select select{
  height:40px!important;
  border-radius:11px!important;
  font-size:13px!important;
  font-weight:600!important;
}
#screen-hub .library-controls .library-search input{padding:0 34px 0 14px!important}
#screen-hub .library-controls #hub-search-clear{
  top:50%!important;bottom:auto!important;right:7px!important;
  transform:translateY(-50%);
  width:24px!important;height:24px!important;border-radius:50%!important;
}

/* sur écran étroit, les deux listes passent sous la recherche */
@media(max-width:820px){
  #screen-hub .library-controls{grid-template-columns:1fr 1fr!important}
  #screen-hub .library-controls .library-search{grid-column:1 / -1}
  #screen-hub .library-controls .library-select:nth-of-type(1){grid-column:1;grid-row:2}
  #screen-hub .library-controls .library-select:nth-of-type(2){grid-column:2;grid-row:2}
  #screen-hub .library-controls .library-categories{grid-row:3}
}

/* =========================================================================
   L'ÉCRAN D'UN JEU
   =========================================================================
   Il commençait par la liste complète des jeux de la famille, étalée en
   bandeau horizontal — douze onglets qui débordaient de l'écran. On lisait
   l'inventaire du programme avant de voir le jeu qu'on venait d'ouvrir.

   À la place : un fil d'Ariane sur une seule ligne (d'où l'on vient, où l'on
   est), le jeu en grand, ses actions, et le choix d'un autre jeu relégué en
   bas sous forme de cartes — les mêmes qu'à l'accueil.
   ========================================================================= */
#screen-casino .cas-rail{
  padding:0 clamp(16px,2.4vw,32px)!important;
  display:block!important;
  background:transparent!important;
  border-bottom:1px solid var(--ui-line)!important;
}
#screen-casino .cas-fil{
  display:flex;align-items:center;gap:9px;
  height:52px;
  font-size:13px;
}
#screen-casino .cas-fil button{
  border:0;background:none;padding:0;
  color:var(--ui-ink3);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:color .14s ease;
}
#screen-casino .cas-fil button:hover{color:var(--ui-acc)}
#screen-casino .cas-fil .fil-sep{color:var(--ui-ink3);opacity:.5}
#screen-casino .cas-fil .fil-ici{color:var(--ui-ink);font-weight:800}
#screen-casino .cas-fil .fil-switch{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 13px!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.05)!important;
  color:var(--ui-ink2)!important;
}
#screen-casino .cas-fil .fil-switch:hover{background:rgba(255,255,255,.09)!important;color:var(--ui-ink)!important}
#screen-casino .cas-fil .fil-switch b{
  padding:1px 6px;border-radius:20px;
  background:rgba(255,255,255,.09);color:var(--ui-ink3);font-size:10.5px;font-weight:800;
}
/* le titre et les anciens onglets n'ont plus lieu d'être */
#screen-casino .gamebar-title,#screen-casino .lounge-games,#screen-casino .rail-title{display:none!important}

/* le rayon du bas reprend exactement les cartes de la bibliothèque */
#screen-casino .cas-autres{margin-top:38px;padding-top:26px;border-top:1px solid var(--ui-line)}
#screen-casino .cas-autres .shelf-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
#screen-casino .cas-autres .shelf-head h3{margin:0;font-size:17px;font-weight:800;color:var(--ui-ink)}
#screen-casino .cas-autres .shelf-head span{font-size:13px;color:var(--ui-ink3)}
#screen-casino .cas-autres .shelf-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}

/* le pli complet, souligné le temps qu'on le lise */
.trick-table.pli-fini>div,.skat-trick.pli-fini>div{opacity:.55;transition:opacity .2s ease}
.trick-table.pli-fini>div.gagne,.skat-trick.pli-fini>div.gagne{
  opacity:1;transform:translateY(-8px) scale(1.06);
  filter:drop-shadow(0 0 14px rgba(247,185,85,.65));
}
.pli-tag{
  display:block;margin-top:6px;font-style:normal;font-size:10.5px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;color:var(--ui-gold);
}

/* =========================================================================
   LES DÉCORS DÉBLOCABLES
   =========================================================================
   Chaque plateau lit ses couleurs dans des variables posées par le client
   (js/classic.js). Quand rien n'est équipé, la valeur de repli est celle du
   décor d'origine — le jeu ne dépend jamais d'un déblocage pour s'afficher.
   ========================================================================= */
.classic-board.game-checkers{
  background:var(--sq-l,#d8c9aa)!important;
  border-color:var(--sq-edge,#332b23)!important;
}
.classic-board.game-checkers .classic-cell.light{background:var(--sq-l,#d6c7a7)!important}
.classic-board.game-checkers .classic-cell.dark{background:var(--sq-d,#476552)!important}
.draught.white{background-color:var(--pion-w,#f2eee3)!important}
.draught.black{background-color:var(--pion-b,#1a1d1b)!important}

.classic-board.game-reversi{
  background-color:var(--felt,#166a45)!important;
  border-color:var(--felt-edge,#14181a)!important;
}
.classic-board.game-gomoku,.classic-board.game-pente{
  background-color:var(--wood,#d7ad6f)!important;
  border-color:var(--wood-edge,#7d5630)!important;
}
.classic-board.game-gomoku{
  background-image:
    linear-gradient(var(--wood-line,rgba(79,51,24,.5)) 1px,transparent 1px),
    linear-gradient(90deg,var(--wood-line,rgba(79,51,24,.5)) 1px,transparent 1px)!important;
}
.classic-board.game-pente{
  background-image:
    linear-gradient(var(--wood-line,rgba(72,45,20,.5)) 1px,transparent 1px),
    linear-gradient(90deg,var(--wood-line,rgba(72,45,20,.5)) 1px,transparent 1px)!important;
}

/* =========================================================================
   LES BORDURES DE PROFIL ANIMÉES
   =========================================================================
   C'est le seul endroit de l'interface où l'on s'autorise un mouvement qui ne
   s'arrête jamais : une bordure est une signature, elle doit se remarquer.
   Partout ailleurs, une animation en boucle finit par fatiguer et on l'évite.

   COMMENT C'EST BÂTI
   Un seul anneau, en `::before`, posé derrière la photo. C'est lui seul qui
   bouge : le portrait ne bouge jamais, sinon on ne verrait plus le visage, et
   c'est le visage qu'on est venu regarder.

   L'anneau est DÉCOUPÉ EN COURONNE par un masque radial. C'est le point
   important : `.av` est un contexte d'empilement (`isolation:isolate`), donc un
   enfant en `z-index:-1` se peint AU-DESSUS du fond de l'avatar, pas derrière.
   Sans découpe, le disque de l'anneau recouvre la pastille de couleur de ceux
   qui n'ont pas mis de photo — leurs initiales se retrouvent sur un rond noir.
   La couronne évite ça sans rien boucher : il n'y a plus de disque du tout.

   Chaque bordure règle son épaisseur avec `--fr-ep`, et le masque suit :
   inutile de retoucher deux valeurs qui doivent rester d'accord.

   DEUX RÈGLES VENUES DE L'USAGE
   • Deux anneaux visibles en même temps ne tournent jamais à la même vitesse.
     Synchronisés, ils donnent l'impression d'un bug ; décalés, celle du vivant.
   • Plus une bordure est chère, plus elle est LENTE. C'est contre-intuitif,
     mais c'est la vitesse qui fatigue : ce qu'on porte tous les jours ne doit
     pas clignoter. Le mythique se remarque par sa richesse, pas par son rythme.
   ========================================================================= */
.av{position:relative;isolation:isolate}
/* L'avatar découpe normalement son contenu (`overflow:hidden`, pour garder la
   photo ronde). Cette découpe rognait aussi l'anneau : tout ce qui dépassait
   n'était jamais peint, et la bordure se dessinait DANS la photo au lieu
   d'être autour. On laisse donc déborder les avatars qui portent une bordure,
   et c'est la photo elle-même qui prend le rayon — elle reste ronde sans
   qu'on ait besoin de la découper. */
.av[class*="fr-"]{
  overflow:visible;
  --fr-ep:5px;                                   /* épaisseur de l'anneau principal */
  --fr-ep2:3px;                                  /* celle du second, s'il y en a un */
  --fr-k:1;                                      /* facteur lié à la taille de l'avatar */
  --fr-e:calc(var(--fr-ep) * var(--fr-k));
  --fr-e2:calc(var(--fr-ep2) * var(--fr-k));
}
.av img{border-radius:inherit}
/* L'anneau suit la taille de l'avatar. Une épaisseur fixe donnerait un collier
   de 9 px autour d'une pastille de 30 px dans une liste d'amis — elle en
   deviendrait illisible — et un fil invisible autour d'un portrait de 116 px.
   Chaque bordure ne règle donc qu'une épaisseur de référence (`--fr-ep`), et
   le facteur de taille fait le reste. */
.av-sm[class*="fr-"]{--fr-k:.6}
.av-lg[class*="fr-"]{--fr-k:1.3}
.av-xl[class*="fr-"]{--fr-k:1.6}
/* Les bordures à deux anneaux posent le second dans `::after`. Il reçoit la
   même découpe en couronne que le premier — sans quoi il boucherait le
   portrait — mais son épaisseur est réglée à part par `--fr-ep2`, parce qu'un
   anneau intérieur aussi épais que l'extérieur ne se lit plus comme deux
   anneaux, juste comme un gros.

   Le `::after` existe pour TOUTES les bordures mais reste sans fond : il ne
   coûte rien tant qu'une bordure ne lui en donne pas un, et ça évite de
   recopier le découpage dans chacune. */
.av[class*="fr-"]::after{
  content:"";position:absolute;inset:calc(-1 * var(--fr-e2));
  background:none;
  border-radius:inherit;z-index:-1;pointer-events:none;
  -webkit-mask:radial-gradient(closest-side,#0000 calc(100% - var(--fr-e2)),
                               #000 calc(100% - var(--fr-e2) + 1px));
          mask:radial-gradient(closest-side,#0000 calc(100% - var(--fr-e2)),
                               #000 calc(100% - var(--fr-e2) + 1px));
}
.av[class*="fr-"]::before{
  content:"";position:absolute;inset:calc(-1 * var(--fr-e));
  border-radius:inherit;z-index:-1;pointer-events:none;
  -webkit-mask:radial-gradient(closest-side,#0000 calc(100% - var(--fr-e)),
                               #000 calc(100% - var(--fr-e) + 1px));
          mask:radial-gradient(closest-side,#0000 calc(100% - var(--fr-e)),
                               #000 calc(100% - var(--fr-e) + 1px));
}
/* Les lueurs ne sont pas des anneaux nets : elles doivent se diffuser vers
   l'extérieur. Elles gardent donc une découpe, mais à bord doux — le vide part
   du bord de l'avatar et la lumière monte progressivement jusqu'au dehors.
   Sans découpe du tout, le disque de lumière recouvrirait le visage : c'est
   une lueur AUTOUR du portrait, pas un filtre POSÉ DESSUS. */
.av.fr-pulse::before,.av.fr-halo::before,.av.fr-braise::before{
  -webkit-mask:radial-gradient(closest-side,#0000 calc(100% - var(--fr-e)),#000 100%);
          mask:radial-gradient(closest-side,#0000 calc(100% - var(--fr-e)),#000 100%);
}

@keyframes frTourne{to{transform:rotate(1turn)}}
@keyframes frTourneInverse{to{transform:rotate(-1turn)}}
@keyframes frGlisse{to{background-position:300% 0}}
@keyframes frScintille{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes frMonte{to{background-position:0 -300%}}

/* ---------- les lueurs ---------- */

/* Battement : un halo qui respire. Lent, régulier — une présence, pas un signal. */
.av.fr-pulse{--fr-ep:8px;box-shadow:0 0 0 2px rgba(77,125,255,.75)!important}
.av.fr-pulse::before{
  background:radial-gradient(circle,rgba(77,125,255,.6),transparent 68%);
  animation:frPulse 2.8s ease-in-out infinite;
}
@keyframes frPulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.16);opacity:.95}
}

/* Halo (niveau 46) : une lueur chaude, plus large et plus lente que le
   Battement — les deux ne doivent pas se confondre à table. */
.av.fr-halo{--fr-ep:11px;box-shadow:0 0 0 2px rgba(255,224,170,.5)!important}
.av.fr-halo::before{
  background:radial-gradient(circle,rgba(255,232,180,.95) 62%,rgba(255,214,140,.55) 82%,transparent 98%);
  animation:frHalo 4.6s ease-in-out infinite;
}
@keyframes frHalo{
  0%,100%{opacity:.4;transform:scale(.97)}
  50%{opacity:.9;transform:scale(1.12)}
}

/* Braise : un feu couvert. L'irrégularité compte — une flamme régulière n'a
   jamais l'air d'une flamme. D'où deux durées qui ne retombent pas en phase. */
.av.fr-braise{--fr-ep:9px;box-shadow:0 0 0 2px #2a1206!important}
.av.fr-braise::before{
  background:radial-gradient(circle at 50% 58%,#ffc061 46%,#ff7a1a 64%,#d43a10 82%,transparent 98%);
  animation:frBraise 1.9s ease-in-out infinite,frVacille 2.3s ease-in-out infinite;
}
@keyframes frBraise{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes frVacille{
  0%,100%{transform:scale(1) translateY(0)}
  35%{transform:scale(1.08) translateY(-1px)}
  70%{transform:scale(.97) translateY(1px)}
}

/* ---------- les anneaux ---------- */

/* Étincelle (niveau 35) : un seul éclat qui fait le tour. La plus sobre du
   lot — c'est la première bordure animée qu'on obtient sans payer. */
.av.fr-etincelle{--fr-ep:5px;box-shadow:0 0 0 2px rgba(198,210,232,.45)!important}
.av.fr-etincelle::before{
  background:conic-gradient(from 0deg,transparent 0 74%,#fff 87%,transparent 96%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
  animation:frTourne 3.2s linear infinite;
}

/* Orbite : un point qui tourne, patiemment. */
.av.fr-orbite{--fr-ep:7px;box-shadow:0 0 0 2px rgba(77,125,255,.5)!important}
.av.fr-orbite::before{
  background:radial-gradient(circle calc(var(--fr-e) + 3px) at 50% 4%,
              #f2f6ff 0 38%,#8fb2ff 70%,rgba(120,160,255,.45) 88%,transparent 100%);
  filter:drop-shadow(0 0 7px rgba(140,180,255,.95));
  animation:frTourne 3.4s linear infinite;
}

/* Radar : un balayage avec sa traîne. C'est la traîne qui donne le sens de
   rotation ; sans elle, on ne sait pas dans quel sens ça tourne. */
.av.fr-radar{--fr-ep:6px;box-shadow:0 0 0 2px rgba(46,160,110,.55)!important}
.av.fr-radar::before{
  background:conic-gradient(from 0deg,#4de89c,rgba(77,232,156,.12) 34%,transparent 42%);
  animation:frTourne 2.6s linear infinite;
}

/* Givre : des aiguilles de glace. Rotation très lente, scintillement plus
   rapide — c'est le décalage entre les deux qui fait le cristal. */
.av.fr-givre{--fr-ep:6px;box-shadow:0 0 0 2px rgba(186,222,255,.45)!important}
.av.fr-givre::before{
  background:repeating-conic-gradient(from 0deg,#dcefff 0 2.5deg,#5b86ad 2.5deg 5deg,
              #b9dcff 5deg 8deg,#2f4f6d 8deg 12deg);
  animation:frTourne 15s linear infinite,frScintille 3.1s ease-in-out infinite;
}

/* 33 tours : les sillons sont concentriques, donc invisibles en rotation.
   C'est le reflet qui tourne — exactement ce qu'on voit sur un vrai disque. */
.av.fr-vinyle{--fr-ep:6px;box-shadow:0 0 0 2px #15161a!important}
.av.fr-vinyle::before{
  background:
    conic-gradient(from 0deg,rgba(255,255,255,.75) 0 4%,transparent 14% 48%,
                   rgba(255,255,255,.32) 53%,transparent 63%),
    repeating-radial-gradient(circle,#20222a 0 2px,#33363f 2px 3px);
  animation:frTourne 2.4s linear infinite;
}

/* Anneau tournant : un dégradé qui fait le tour, sans fin. */
.av.fr-rotatif{--fr-ep:6px;box-shadow:0 0 0 2px rgba(0,0,0,.55)!important}
.av.fr-rotatif::before{
  background:conic-gradient(from 0deg,var(--ui-acc),var(--ui-acc2),var(--ui-gold),var(--ui-acc));
  animation:frTourne 4.5s linear infinite;
}

/* Les quatre couleurs : rouge et noir en quadrants, comme un jeu posé en
   éventail. Rien d'autre — la sobriété fait la référence. */
.av.fr-cartes{--fr-ep:6px;box-shadow:0 0 0 2px #0d0f14!important}
.av.fr-cartes::before{
  background:conic-gradient(from 0deg,#5a6377 0 25%,#e04a68 25% 50%,#5a6377 50% 75%,#e04a68 75%);
  animation:frTourne 5s linear infinite;
}

/* Ronde de jetons : quatre couleurs de jeton et leurs encoches blanches. Les
   encoches sont ce qui fait reconnaître un jeton plutôt qu'un disque. */
.av.fr-jetons{--fr-ep:7px;box-shadow:0 0 0 2px #0b0e13!important}
.av.fr-jetons::before{
  background:
    repeating-conic-gradient(from 0deg,rgba(255,255,255,.95) 0 2.5deg,transparent 2.5deg 15deg),
    conic-gradient(from 0deg,#d4405c 0 25%,#3f83e8 25% 50%,#37bd83 50% 75%,#efc253 75%);
  animation:frTourne 6s linear infinite;
}

/* Néon : deux couleurs qui glissent l'une dans l'autre, avec la diffusion d'un
   vrai tube — c'est le halo qui fait le néon, pas le trait. */
.av.fr-neon{--fr-ep:6px;box-shadow:0 0 0 2px #0a0f1c!important}
.av.fr-neon::before{
  background:linear-gradient(90deg,#4d7dff,#e05ad0,#4de0ff,#4d7dff);
  background-size:300% 100%;
  filter:saturate(1.4) drop-shadow(0 0 6px rgba(120,160,255,.85));
  animation:frGlisse 3.6s linear infinite;
}

/* Cerisier : des pétales sur un fond rose, très lents. Le scintillement est
   long : c'est censé reposer, pas alerter. */
.av.fr-sakura{--fr-ep:7px;box-shadow:0 0 0 2px rgba(255,183,205,.5)!important}
.av.fr-sakura::before{
  background:
    radial-gradient(circle at 22% 14%,#fff0f5 0 7%,transparent 8%),
    radial-gradient(circle at 79% 28%,#ffe3ec 0 6%,transparent 7%),
    radial-gradient(circle at 63% 84%,#fff5f8 0 7%,transparent 8%),
    radial-gradient(circle at 24% 74%,#ffe9f0 0 5%,transparent 6%),
    conic-gradient(from 0deg,#ffb8cd,#f07fa4,#ffd9e4,#ffb8cd);
  animation:frTourne 11s linear infinite,frScintille 4.3s ease-in-out infinite;
}

/* Spectre : deux voiles flous qui passent. Le flou est indispensable — sans
   lui ce sont deux traits, et ça ne ressemble plus à rien. */
.av.fr-spectre{--fr-ep:8px;box-shadow:0 0 0 2px rgba(180,160,255,.4)!important}
.av.fr-spectre::before{
  background:conic-gradient(from 0deg,transparent 0 16%,#cbc1ff 33%,
              transparent 47% 66%,#a0dcff 83%,transparent 95%);
  filter:blur(3px);
  animation:frTourne 7.5s linear infinite,frScintille 3.7s ease-in-out infinite;
}

/* Arc électrique : trois arcs rapides, et une coupure franche à intervalles
   irréguliers. `steps(1,end)` donne la coupure nette d'un vrai arc — une
   transition douce ferait « lampe », pas « électricité ». */
.av.fr-eclair{--fr-ep:6px;box-shadow:0 0 0 2px #0a1420!important}
.av.fr-eclair::before{
  background:conic-gradient(from 0deg,transparent 0 6%,#a6f0ff 10%,transparent 14% 38%,
              #ffffff 43%,transparent 47% 70%,#a6f0ff 75%,transparent 80%);
  filter:drop-shadow(0 0 6px #4dd2ff);
  animation:frTourne 1.6s linear infinite,frClaque 2.9s steps(1,end) infinite;
}
@keyframes frClaque{0%,42%,46%,72%,76%,100%{opacity:1}44%,74%{opacity:.12}}

/* Aurore : des voiles qui MONTENT, pas qui tournent. C'est le seul mouvement
   vertical du catalogue, et c'est ce qui la distingue de tout le reste. */
.av.fr-aurore{--fr-ep:7px;box-shadow:0 0 0 2px #0a1a18!important}
.av.fr-aurore::before{
  background:linear-gradient(180deg,#38f5b0,#2fd6ff,#a45cff,#38f5b0);
  background-size:100% 300%;
  filter:saturate(1.35) drop-shadow(0 0 5px rgba(60,220,180,.6));
  animation:frMonte 5.5s linear infinite;
}

/* Tempête : deux anneaux, sens opposés, durées premières entre elles. Le
   `::after` porte le second anneau et reçoit le même découpage. */
.av.fr-tempete{--fr-ep:8px;--fr-ep2:4px;box-shadow:0 0 0 2px #12131b!important}
.av.fr-tempete::before{
  background:conic-gradient(from 0deg,transparent 0 12%,#aab3d8 28%,transparent 42% 60%,
              #8574d6 76%,transparent 92%);
  filter:blur(1.5px);
  animation:frTourne 4.2s linear infinite;
}
.av.fr-tempete::after{
  background:conic-gradient(from 140deg,transparent 0 18%,#d6dcf5 32%,transparent 46% 72%,
              #6f60b8 86%,transparent 96%);
  filter:blur(1.4px);
  animation:frTourneInverse 6.8s linear infinite;
}

/* Cosmos : un ciel. Les étoiles sont des points fixes du dégradé — c'est tout
   le ciel qui tourne, comme le vrai, et très lentement. */
.av.fr-cosmos{--fr-ep:7px;box-shadow:0 0 0 2px #05070f!important}
.av.fr-cosmos::before{
  background:
    radial-gradient(circle at 16% 20%,#fff 0 4%,transparent 5%),
    radial-gradient(circle at 74% 14%,#dbe8ff 0 3%,transparent 4%),
    radial-gradient(circle at 88% 60%,#fff 0 3.5%,transparent 4.5%),
    radial-gradient(circle at 30% 86%,#efe2ff 0 3%,transparent 4%),
    radial-gradient(circle at 55% 96%,#fff 0 2.5%,transparent 3.5%),
    radial-gradient(circle at 6% 55%,#cfe0ff 0 2.5%,transparent 3.5%),
    conic-gradient(from 0deg,#5a34b0,#241a5c,#7b3dbe,#2c1f74,#5a34b0);
  animation:frTourne 16s linear infinite;
}

/* Or liquide : du métal qui coule et qui chauffe. Deux animations, l'une
   horizontale, l'autre sur la chaleur — le métal ne refroidit jamais. */
.av.fr-orliquide{--fr-ep:7px;box-shadow:0 0 0 2px #2a1c05!important}
.av.fr-orliquide::before{
  background:linear-gradient(90deg,#a86f16,#ffdc7a,#fffaf0,#e8ae35,#a86f16);
  background-size:300% 100%;
  animation:frGlisse 4.2s linear infinite,frChauffe 3.3s ease-in-out infinite;
}
@keyframes frChauffe{
  0%,100%{filter:saturate(1.15) brightness(1) drop-shadow(0 0 4px rgba(255,200,90,.5))}
  50%{filter:saturate(1.45) brightness(1.18) drop-shadow(0 0 9px rgba(255,210,110,.85))}
}

/* Prisme : toutes les couleurs, en rotation lente. */
.av.fr-prisme{--fr-ep:7px;box-shadow:0 0 0 2px rgba(0,0,0,.6)!important}
.av.fr-prisme::before{
  background:conic-gradient(from 0deg,#ff4d6d,#ffb84d,#4dff9e,#4dd2ff,#a24dff,#ff4d6d);
  filter:saturate(1.2);
  animation:frTourne 9s linear infinite;
}

/* Couronne (mythique) : des pointes d'or et un éclat qui balaie. Volontairement
   lente : c'est la plus chère du catalogue, elle se porte tous les jours. */
.av.fr-couronne{--fr-ep:8px;
  box-shadow:0 0 0 2px #3a2a08,0 0 18px rgba(247,185,85,.4)!important}
.av.fr-couronne::before{
  background:
    conic-gradient(from 0deg,rgba(255,255,255,.9) 0 3%,transparent 12% 100%),
    repeating-conic-gradient(from 0deg,#ffe09a 0 4deg,#c08d1e 4deg 9deg,#6b4a08 9deg 18deg);
  filter:drop-shadow(0 0 7px rgba(255,200,90,.6));
  animation:frTourne 8s linear infinite;
}

/* Vortex (mythique) : deux anneaux, sens opposés, quatre couleurs. La plus
   voyante — et la seule où les deux anneaux sont franchement colorés. */
.av.fr-vortex{--fr-ep:9px;--fr-ep2:4.5px;
  box-shadow:0 0 0 2px #0a0616,0 0 20px rgba(162,77,255,.35)!important}
.av.fr-vortex::before{
  background:conic-gradient(from 0deg,transparent 0 9%,#ff4d9d 22%,transparent 34% 54%,
              #4dd2ff 67%,transparent 79%);
  filter:blur(1.5px);
  animation:frTourne 3.1s linear infinite;
}
.av.fr-vortex::after{
  background:conic-gradient(from 180deg,transparent 0 15%,#a24dff 30%,transparent 44% 66%,
              #ffd166 81%,transparent 94%);
  filter:blur(1.2px);
  animation:frTourneInverse 5.4s linear infinite;
}

/* =========================================================================
   DEUXIÈME VAGUE
   =========================================================================
   Celles-ci se composent à plusieurs couches : une matière au fond, un anneau
   qui tourne dessus, parfois un second à contresens. Elles coûtent plus cher
   parce qu'elles se remarquent de plus loin — pas parce qu'elles vont plus
   vite. La règle tient toujours : plus c'est cher, plus c'est lent.
   ========================================================================= */

/* Ondes : deux cercles qui s'écartent, décalés d'une demi-période. Le
   découpage en couronne suit l'agrandissement, donc l'anneau lui-même s'élargit
   en s'éloignant — c'est exactement ce que fait une ride sur l'eau. */
.av.fr-ondes{--fr-ep:4px;box-shadow:0 0 0 2px rgba(90,190,255,.5)!important}
.av.fr-ondes::before{
  background:#5ec2ff;
  animation:frOnde 2.6s ease-out infinite;
}
.av.fr-ondes::after{
  --fr-ep2:4px;
  background:#5ec2ff;
  animation:frOnde 2.6s ease-out infinite 1.3s;
}
@keyframes frOnde{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(1.5);opacity:0}
}

/* Horloge : l'aiguille avance par à-coups (`steps`), les index restent fixes.
   Une aiguille qui glisse ferait « chronomètre » ; c'est le tic qui fait
   l'horloge. */
.av.fr-horloge{--fr-ep:5px;--fr-ep2:5px;box-shadow:0 0 0 2px #2b303a!important}
.av.fr-horloge::before{
  background:conic-gradient(from 0deg,#ffe3a4 0 2.5%,rgba(255,227,164,.25) 6%,transparent 10%);
  filter:drop-shadow(0 0 5px rgba(255,220,150,.8));
  animation:frTourne 12s steps(12) infinite;
  z-index:-1;
}
.av.fr-horloge::after{
  background:repeating-conic-gradient(from 0deg,#8e97a6 0 1.4deg,transparent 1.4deg 30deg);
  z-index:-2;
}

/* Serpent : une tête vive et une traîne qui s'éteint. Sans la traîne on ne
   voit qu'un point ; c'est elle qui donne la longueur de la bête. */
.av.fr-serpent{--fr-ep:6px;box-shadow:0 0 0 2px #0c1a12!important}
.av.fr-serpent::before{
  background:conic-gradient(from 0deg,#c9ffd8 0 2%,#4ee88a 8%,rgba(78,232,138,.45) 22%,
              rgba(78,232,138,.12) 36%,transparent 48%);
  filter:drop-shadow(0 0 6px rgba(78,232,138,.75));
  animation:frTourne 2.2s linear infinite;
}

/* Vitrail : les plombs et les verres ne bougent pas, c'est le jour qui passe
   derrière. Deux couches, donc : la verrière fixe, la lumière qui tourne. */
.av.fr-vitrail{--fr-ep:7px;--fr-ep2:7px;box-shadow:0 0 0 2px #14161c!important}
.av.fr-vitrail::before{
  background:conic-gradient(from 0deg,rgba(255,255,255,.55) 0 6%,transparent 18% 100%);
  filter:blur(2px);
  animation:frTourne 6.5s linear infinite;
}
.av.fr-vitrail::after{
  background:
    repeating-conic-gradient(from 0deg,#12141a 0 1.6deg,transparent 1.6deg 45deg),
    conic-gradient(from 0deg,#d94f5c,#e8a33c,#f2e06a,#4fbf7a,#3f8fd6,#8156c9,#d94f5c);
  z-index:-2;
}

/* Abysse : presque noir, et des lueurs qui s'allument par-dessous. Les points
   ne tournent pas à la même vitesse que le fond, sinon ce serait un décor peint
   plutôt que quelque chose de vivant. */
.av.fr-abysse{--fr-ep:7px;--fr-ep2:7px;box-shadow:0 0 0 2px #04121c!important}
.av.fr-abysse::before{
  background:
    radial-gradient(circle at 50% 2%,#6ff2ff 0 3%,transparent 4%),
    radial-gradient(circle at 96% 62%,#4fd6c8 0 2.5%,transparent 3.5%),
    radial-gradient(circle at 14% 76%,#8ae9ff 0 3%,transparent 4%);
  filter:drop-shadow(0 0 5px rgba(110,235,255,.85));
  animation:frTourne 9s linear infinite,frScintille 2.4s ease-in-out infinite;
}
.av.fr-abysse::after{
  background:conic-gradient(from 0deg,#062634,#0a3d52,#04141d,#0b4a63,#062634);
  animation:frTourneInverse 22s linear infinite;
  z-index:-2;
}

/* Mercure : du chrome. Ce sont les sauts brutaux entre clair et sombre qui
   font le métal poli — un dégradé doux donnerait du plastique. */
.av.fr-mercure{--fr-ep:7px;box-shadow:0 0 0 2px #23272e!important}
.av.fr-mercure::before{
  background:conic-gradient(from 0deg,#fbfdff,#5a6472,#e8eff7,#2b323c,#cdd8e4,#6f7a88,#ffffff,#404853,#fbfdff);
  animation:frTourne 5.5s linear infinite;
}

/* Lucioles : quatre points, deux couches, deux sens, deux vitesses. Le
   désordre est le sujet — s'ils étaient synchronisés, ce serait un collier. */
.av.fr-lucioles{--fr-ep:7px;--fr-ep2:7px;box-shadow:0 0 0 2px #101a12!important}
.av.fr-lucioles::before{
  background:
    radial-gradient(circle calc(var(--fr-e) + 1px) at 50% 2%,#fff6c2 0 40%,rgba(255,224,120,.5) 72%,transparent 100%),
    radial-gradient(circle calc(var(--fr-e) + 1px) at 12% 82%,#fff0a8 0 40%,rgba(255,214,100,.45) 72%,transparent 100%);
  filter:drop-shadow(0 0 6px rgba(255,224,130,.9));
  animation:frTourne 5.2s linear infinite,frScintille 1.9s ease-in-out infinite;
}
.av.fr-lucioles::after{
  background:
    radial-gradient(circle calc(var(--fr-e2)) at 88% 82%,#eaffd0 0 40%,rgba(190,255,150,.45) 74%,transparent 100%),
    radial-gradient(circle calc(var(--fr-e2)) at 50% 98%,#fff8d0 0 40%,rgba(255,235,150,.4) 74%,transparent 100%);
  filter:drop-shadow(0 0 5px rgba(210,255,160,.85));
  animation:frTourneInverse 7.7s linear infinite,frScintille 2.7s ease-in-out infinite;
}

/* Magma : une croûte noire fendue, et le feu qui respire dessous. La croûte est
   fixe ; c'est la chaleur qui monte et redescend. */
.av.fr-magma{--fr-ep:8px;--fr-ep2:8px;box-shadow:0 0 0 2px #1a0b05!important}
.av.fr-magma::before{
  background:repeating-conic-gradient(from 0deg,
    #17100c 0 7deg,transparent 7deg 9deg,#211611 9deg 17deg,transparent 17deg 19deg);
  animation:frTourne 26s linear infinite;
}
.av.fr-magma::after{
  background:conic-gradient(from 0deg,#ff8a25,#c22f0a,#ffb45c,#8f1e05,#ff8a25);
  filter:blur(1px);
  animation:frTourneInverse 13s linear infinite,frChauffe 2.6s ease-in-out infinite;
  z-index:-2;
}

/* Sceau royal : pourpre et or, à contresens. Deux anneaux nets, aucun flou —
   c'est censé faire cachet de cire, pas nébuleuse. */
.av.fr-royal{--fr-ep:8px;--fr-ep2:4px;
  box-shadow:0 0 0 2px #1c0f28,0 0 16px rgba(160,92,255,.35)!important}
.av.fr-royal::before{
  background:conic-gradient(from 0deg,#4a1d7a,#8b4cc8,#2d0f4d,#a86fe0,#4a1d7a);
  animation:frTourne 7.4s linear infinite;
}
.av.fr-royal::after{
  background:repeating-conic-gradient(from 0deg,#ffd97a 0 3deg,#a2751c 3deg 7deg);
  animation:frTourneInverse 11s linear infinite;
}

/* Diamant : des facettes dures, et un éclat qui passe dessus. Les arêtes
   franches valent mieux qu'un dégradé : une pierre taillée ne fond pas. */
.av.fr-diamant{--fr-ep:7px;--fr-ep2:7px;
  box-shadow:0 0 0 2px #16202b,0 0 18px rgba(150,220,255,.35)!important}
.av.fr-diamant::before{
  background:conic-gradient(from 0deg,rgba(255,255,255,.95) 0 3%,transparent 12% 100%);
  filter:blur(1px) drop-shadow(0 0 7px rgba(200,240,255,.9));
  animation:frTourne 3.8s linear infinite;
}
.av.fr-diamant::after{
  background:repeating-conic-gradient(from 0deg,
    #ffffff 0 6deg,#a9d6f0 6deg 11deg,#5f92b8 11deg 17deg,#dff1ff 17deg 22deg);
  animation:frTourne 19s linear infinite;
  z-index:-2;
}

/* Galaxie : deux bras spiraux, un fond profond, et beaucoup de temps. La plus
   lente du catalogue — un tour prend une demi-minute. */
.av.fr-galaxie{--fr-ep:8px;--fr-ep2:8px;
  box-shadow:0 0 0 2px #060312,0 0 20px rgba(120,90,255,.3)!important}
.av.fr-galaxie::before{
  background:
    radial-gradient(circle at 50% 1%,#fff 0 2.5%,transparent 3.5%),
    radial-gradient(circle at 86% 30%,#dcd0ff 0 2%,transparent 3%),
    radial-gradient(circle at 20% 70%,#fff 0 2%,transparent 3%),
    conic-gradient(from 0deg,transparent 0 6%,rgba(190,170,255,.85) 16%,transparent 30% 56%,
                   rgba(255,200,235,.8) 66%,transparent 80%);
  filter:blur(1.4px);
  animation:frTourne 28s linear infinite;
}
.av.fr-galaxie::after{
  background:conic-gradient(from 0deg,#180b3a,#2e1560,#0d0722,#3b1a72,#180b3a);
  animation:frTourneInverse 44s linear infinite;
  z-index:-2;
}

/* Phénix (mythique) : deux ailes de feu, opposées, qui battent. Le battement
   est un agrandissement — la couronne s'élargit et se resserre, comme une aile
   qui s'ouvre. Sous les ailes, une braise qui tourne à l'envers. */
.av.fr-phenix{--fr-ep:9px;--fr-ep2:5px;
  box-shadow:0 0 0 2px #2a0d02,0 0 24px rgba(255,120,30,.4)!important}
.av.fr-phenix::before{
  background:conic-gradient(from 0deg,
    #fff2c4 0 3%,#ffab2e 11%,#ef5a12 20%,transparent 34% 50%,
    #fff2c4 53%,#ffab2e 61%,#ef5a12 70%,transparent 84%);
  filter:blur(1.2px) drop-shadow(0 0 9px rgba(255,150,50,.85));
  animation:frTourne 6.4s linear infinite,frBat 1.7s ease-in-out infinite;
}
.av.fr-phenix::after{
  background:conic-gradient(from 90deg,#7a1f02,#ff7a1a,#3d0d01,#ffb347,#7a1f02);
  animation:frTourneInverse 9.3s linear infinite,frChauffe 2.2s ease-in-out infinite;
}
@keyframes frBat{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.07)}
}

/* Le réglage système est respecté pour toutes, y compris celles dont le second
   anneau vit dans `::after`. */
@media(prefers-reduced-motion:reduce){
  .av[class*="fr-"]::before,.av[class*="fr-"]::after{animation:none!important}
}


/* =========================================================================
   LE VESTIAIRE ET LA BOUTIQUE
   =========================================================================
   Le vestiaire s'ouvre sur ce qu'on porte, la boutique sur ce qu'on peut
   prendre. Deux onglets, un solde toujours visible : on ne veut jamais avoir
   à quitter l'écran pour savoir si on a de quoi payer.
   ========================================================================= */
.vest-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;padding:9px;
  background:var(--ui-card);border:1px solid var(--ui-line);border-radius:var(--ui-r);
}
.vest-tabs{display:inline-flex;gap:2px;padding:4px;border-radius:13px;
  background:rgba(0,0,0,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.vest-tabs button{
  height:32px;padding:0 15px;border:0;border-radius:9px;background:transparent;
  color:var(--ui-ink2);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.vest-tabs button:hover{background:rgba(255,255,255,.06);color:var(--ui-ink)}
.vest-tabs button.on{
  background:linear-gradient(180deg,#3f4d6e,#313c58);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
}
.vest-solde{margin-left:auto;font-size:13px;color:var(--ui-ink3);font-weight:700}
.vest-solde b{color:var(--ui-gold);font-size:15px;margin-left:6px}
.vest-intro{margin:0 0 20px;color:var(--ui-ink3);font-size:13.5px;line-height:1.6;max-width:70ch}
.vest-reste{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--ui-ink3);
  padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.05)}
.vest-head{display:flex;align-items:baseline;gap:12px}

/* la carte d'un objet */
.vest-card.shop.acquis{border-color:rgba(46,211,127,.4)!important}
.vest-card.shop.cher{opacity:.72}
.vc-manque{margin-top:6px;font-size:10.5px;color:var(--ui-ink3)}
.vc-glyph{font-size:34px;color:var(--ui-ink2);line-height:1}
.vc-pions{display:flex;gap:8px;align-items:center;justify-content:center}
.vc-pions i{
  width:28px;height:28px;border-radius:50%;
  background-image:
    radial-gradient(circle at 34% 27%,rgba(255,255,255,.55),rgba(255,255,255,0) 50%),
    radial-gradient(circle at 68% 82%,rgba(0,0,0,.4),rgba(0,0,0,0) 58%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 3px 6px rgba(0,0,0,.5);
}
.vc-tapis{
  display:block;width:74px;height:48px;border-radius:6px;
  background:
    linear-gradient(var(--b) 1px,transparent 1px) 0 0/16px 16px,
    linear-gradient(90deg,var(--b) 1px,transparent 1px) 0 0/16px 16px,
    var(--a);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.4);
}
/* un coin de plateau MAGNAT : la bande de couleur qui coiffe un quartier */
.vc-magnat{display:flex;gap:4px;align-items:flex-end;height:48px}
.vc-magnat i{
  width:19px;height:40px;border-radius:3px;
  background:linear-gradient(180deg,var(--a) 0 32%,#f2ede2 32%);
  box-shadow:0 3px 7px rgba(0,0,0,.45);
}
.vc-magnat i:nth-child(2){height:46px;background:linear-gradient(180deg,var(--b) 0 32%,#f2ede2 32%)}
.vc-magnat i:nth-child(3){height:36px;opacity:.85}

/* ============================================================================
   LA MARQUE — monogramme Kydos
   ----------------------------------------------------------------------------
   Le jeton se pose à gauche du mot, à la même hauteur d'œil. Sa taille est en
   `em` : elle suit donc automatiquement le `font-size` du `.logo` qui l'héberge,
   qu'on soit sur l'écran de connexion (34 px), dans la barre latérale (19 px)
   ou sur le voile de chargement (42 px). Aucune valeur à retoucher ailleurs.

   `.logo-row` est un conteneur *interne* : les `::after` qui ajoutent les
   baselines (« JEUX ENTRE AMIS », « PLAY TOGETHER ») restent des blocs posés
   sous la ligne, comme avant.
   ========================================================================== */
.logo-row{
  display:inline-flex;align-items:center;gap:.36em;
  vertical-align:middle;line-height:1;
}
.logo-mark{
  flex:0 0 auto;display:block;
  width:1.08em;height:1.08em;
  border-radius:.25em;
  /* Une ombre courte : le jeton se décolle du fond sans briller. */
  filter:drop-shadow(0 2px 6px rgba(6,10,24,.55));
}
.logo-mot{display:inline-block}

/* Écran de connexion : le monogramme est la première chose qu'on voit,
   on lui laisse un peu plus de place et on centre l'ensemble. */
.home-card.auth-card .logo .logo-row{gap:.32em}
.home-card.auth-card .logo .logo-mark{width:1.24em;height:1.24em}

/* Barre latérale : la ligne est serrée, le jeton reste discret. */
#screen-hub>.topbar>.logo .logo-mark,
#screen-friends>.topbar>.logo .logo-mark,
#screen-profil>.topbar>.logo .logo-mark,
#screen-admin>.topbar>.logo .logo-mark{width:1.35em;height:1.35em}

/* Voile de chargement : le jeton respire au même rythme que le reste. */
.veil-logo .logo-mark{width:1.1em;height:1.1em}

@media (prefers-reduced-motion:reduce){
  .logo-mark{filter:none}
}

/* =========================================================================
   LA BOUTIQUE — RARETÉS, SÉLECTION DE LA SEMAINE
   =========================================================================
   La rareté doit se lire AVANT le nom et avant le prix. Elle passe donc par la
   couleur du liseré et par une lueur d'angle, pas par une étiquette qu'il
   faudrait aller chercher. L'étiquette écrite est là pour confirmer, pas pour
   informer.

   Les deux raretés hautes ont en plus un reflet qui balaie la carte. C'est le
   seul mouvement qu'on s'autorise dans une grille : au-delà, dix cartes qui
   bougent en même temps donnent le tournis et on ne regarde plus rien.
   ========================================================================= */
.vest-card.shop{position:relative;overflow:hidden}
.vest-card.shop::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -20%,var(--rar-lueur,transparent),transparent 62%);
}
.vest-card.rar-commun{--rar:#8d949c;--rar-lueur:rgba(141,148,156,.10)}
.vest-card.rar-rare{--rar:#4d9dff;--rar-lueur:rgba(77,157,255,.18)}
.vest-card.rar-epique{--rar:#a05cff;--rar-lueur:rgba(160,92,255,.22)}
.vest-card.rar-legendaire{--rar:#f7b955;--rar-lueur:rgba(247,185,85,.24)}
.vest-card.rar-mythique{--rar:#ff4d6d;--rar-lueur:rgba(255,77,109,.26)}
.vest-card.shop{border-color:color-mix(in srgb,var(--rar,#8d949c) 32%,var(--ui-line))!important}
.vest-card.shop:hover{border-color:var(--rar,var(--ui-line2))!important}

/* Le reflet des deux raretés hautes. `mask` le limite au bord de la carte pour
   qu'il n'efface pas l'aperçu au passage. */
.vest-card.rar-legendaire::before,
.vest-card.rar-mythique::before{
  content:"";position:absolute;top:0;bottom:0;width:45%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  animation:shopReflet 4.6s ease-in-out infinite;
}
.vest-card.rar-mythique::before{animation-duration:3.4s}
@keyframes shopReflet{
  0%{transform:translateX(-160%)}
  55%,100%{transform:translateX(320%)}
}
@media(prefers-reduced-motion:reduce){
  .vest-card.rar-legendaire::before,.vest-card.rar-mythique::before{animation:none;opacity:0}
}

/* Les étiquettes du haut de carte : rareté, « animé », remise. */
.vc-tags{
  position:absolute;top:8px;left:8px;right:8px;z-index:2;
  display:flex;gap:5px;flex-wrap:wrap;align-items:center;
  font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.vc-rar{
  padding:2.5px 7px;border-radius:20px;
  color:var(--rar,#8d949c);
  background:color-mix(in srgb,var(--rar,#8d949c) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--rar,#8d949c) 40%,transparent);
}
.vc-anime{
  padding:2.5px 7px;border-radius:20px;color:#cfd6e2;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.vc-promo{
  margin-left:auto;padding:2.5px 7px;border-radius:20px;
  color:#08210f;background:#2ed37f;border:1px solid #2ed37f;
}
/* L'aperçu descend pour laisser la place aux étiquettes. */
.vest-card.shop .vc-top{margin-top:20px}
/* Le prix d'avant remise, barré, au-dessus du bouton. */
.vc-avant{
  margin:0;color:var(--ui-ink3);font-size:10.5px;font-weight:700;
  text-decoration:line-through;text-decoration-thickness:1px;
}
/* Un prix ne se rogne jamais : le bouton s'élargit au contenu, et la grille
   lui laisse la place plutôt que l'inverse. */
.vest-card.shop .mini{
  max-width:100%;white-space:nowrap;
  padding-left:12px!important;padding-right:12px!important;
  font-variant-numeric:tabular-nums;
}
.shop-grid-une{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))!important}

/* ---------- la sélection de la semaine ---------- */
.shop-une{
  margin:0 0 26px;padding:16px;
  border:1px solid color-mix(in srgb,var(--ui-gold) 26%,var(--ui-line));
  border-radius:var(--ui-r);
  background:
    radial-gradient(90% 120% at 12% -10%,rgba(247,185,85,.12),transparent 58%),
    var(--ui-card);
}
.shop-une-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 14px;
}
.shop-une-head h3{
  margin:4px 0 0;color:var(--ui-ink);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:19px;
}
.shop-timer{
  display:flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:20px;
  border:1px solid color-mix(in srgb,var(--ui-gold) 32%,transparent);
  background:rgba(247,185,85,.08);
}
.shop-timer span{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ui-ink3)}
.shop-timer b{font-size:13px;color:var(--ui-gold);font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .shop-une-head{flex-direction:column;align-items:flex-start}
}

/* =========================================================================
   ADMINISTRATION — ONGLETS ET PANNEAU BOUTIQUE
   =========================================================================
   Une ligne par article, dense, lisible en diagonale. On règle une boutique en
   parcourant vite : le nom et la rareté à gauche, le prix au milieu, les deux
   interrupteurs à droite, toujours à la même place. Rien ne se déplace d'une
   ligne à l'autre, sinon l'œil doit rechercher la colonne à chaque fois.
   ========================================================================= */
.admin-tabs{display:inline-flex;gap:2px;padding:4px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid var(--ui-line)}
.admin-tabs button{
  padding:8px 18px;border:0;border-radius:10px;background:transparent;
  color:var(--ui-ink3);font-family:'Manrope',sans-serif;font-weight:800;font-size:12px;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.admin-tabs button:hover{color:var(--ui-ink2)}
.admin-tabs button.on{background:var(--ui-acc);color:#fff}
.admin-pane[hidden]{display:none!important}
.admin-titre{
  margin:0 0 16px;color:var(--ui-ink);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;
}

.ash-reglages{
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin:0 0 12px;padding:14px 16px;
  border:1px solid var(--ui-line);border-radius:var(--ui-r);background:var(--ui-card);
}
.ash-reglages label{
  display:flex;flex-direction:column;gap:5px;
  color:var(--ui-ink3);font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.ash-reglages input{
  width:110px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--ui-line2);background:rgba(255,255,255,.045);
  color:var(--ui-ink);font-size:14px;font-variant-numeric:tabular-nums;
}
.ash-semaine{margin-left:auto;text-align:right;line-height:1.5}
.ash-semaine b{display:block;color:var(--ui-gold);font-size:13px}
.ash-semaine span{color:var(--ui-ink3);font-size:11px}
.ash-note{margin:0 0 20px;color:var(--ui-ink3);font-size:11.5px;line-height:1.6}
.ash-note b{color:var(--ui-ink2)}

.ash-bloc{margin:0 0 22px}
.ash-bloc-head{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;flex-wrap:wrap}
.ash-bloc-head h3{margin:0;color:var(--ui-ink);font-family:'Manrope',sans-serif;font-weight:800;font-size:14px}
.ash-bloc-head span{color:var(--ui-ink3);font-size:11px}

.ash-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;
  align-items:center;gap:14px;
  padding:9px 14px;margin-bottom:5px;
  border:1px solid var(--ui-line);border-left:3px solid var(--rar,var(--ui-line2));
  border-radius:10px;background:var(--ui-card);
}
.ash-row.rar-commun{--rar:#8d949c}
.ash-row.rar-rare{--rar:#4d9dff}
.ash-row.rar-epique{--rar:#a05cff}
.ash-row.rar-legendaire{--rar:#f7b955}
.ash-row.rar-mythique{--rar:#ff4d6d}
.ash-row.off{opacity:.45}
.ash-row.une{background:linear-gradient(90deg,rgba(247,185,85,.09),var(--ui-card) 46%)}

.ash-ap{display:flex;align-items:center;justify-content:center}
.ash-sw{display:inline-flex;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ash-sw i{display:block;width:17px;height:26px}
.ash-glyph{font-size:21px;color:var(--ui-ink2);line-height:1}
.ash-vide{color:var(--ui-ink3);font-size:14px}

.ash-id{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.ash-id b{color:var(--ui-ink);font-size:13px;font-weight:800}
.ash-id em{
  flex-basis:100%;font-style:normal;color:var(--ui-ink3);font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ash-id .vc-rar,.ash-id .vc-anime{position:static;font-size:8.5px}
.ash-une{
  padding:2.5px 7px;border-radius:20px;font-size:8.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  color:#2a1d05;background:var(--ui-gold);
}
.ash-niv{
  padding:2.5px 7px;border-radius:20px;font-size:8.5px;font-weight:800;
  color:var(--ui-ink3);background:rgba(255,255,255,.05);border:1px solid var(--ui-line);
}

.ash-prix{display:flex;align-items:center;gap:7px}
.ash-prix input{
  width:120px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--ui-line2);background:rgba(255,255,255,.045);
  color:var(--ui-ink);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right;
}
.ash-prix input::placeholder{color:var(--ui-ink3);font-style:italic}

.ash-actes{display:flex;align-items:center;gap:14px}
.ash-check{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  color:var(--ui-ink3);font-size:10.5px;font-weight:700;white-space:nowrap}
.ash-check input{width:15px;height:15px;accent-color:var(--ui-acc);cursor:pointer}
.ash-check input:disabled{cursor:not-allowed;opacity:.4}
.ash-check input:disabled+span{opacity:.4}

@media(max-width:900px){
  .ash-row{grid-template-columns:40px minmax(0,1fr);row-gap:9px}
  .ash-prix,.ash-actes{grid-column:2}
  .ash-semaine{margin-left:0;text-align:left}
}

/* La ligne qui annonce le renouvellement. Elle sépare la vitrine des rayons et
   explique pourquoi il n'y a « que » cinq articles par rayon — en parlant du
   moment où ça change, pas de ce qui manque. */
.shop-reserve{
  margin:0 0 22px;padding:12px 16px;
  border:1px dashed color-mix(in srgb,var(--ui-acc) 30%,var(--ui-line));
  border-radius:var(--ui-r);
  background:color-mix(in srgb,var(--ui-acc) 5%,transparent);
  color:var(--ui-ink3);font-size:12px;line-height:1.6;
}
.shop-reserve b{color:var(--ui-ink2)}

/* Les prochaines vitrines, dans le panneau admin. */
.ash-apercu{
  margin:0 0 22px;padding:13px 16px;
  border:1px solid var(--ui-line);border-radius:var(--ui-r);background:var(--ui-card);
}
.ash-apercu h4{
  margin:0 0 9px;color:var(--ui-ink3);
  font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.ash-apercu-l{display:flex;gap:12px;padding:5px 0;font-size:11.5px;line-height:1.5}
.ash-apercu-l + .ash-apercu-l{border-top:1px solid var(--ui-line)}
.ash-apercu-l b{flex:0 0 108px;color:var(--ui-gold);font-weight:800}
.ash-apercu-l span{color:var(--ui-ink3);min-width:0}

/* Ce qui dort en réserve reste lisible mais s'efface : la ligne existe, on
   peut la régler, mais elle ne réclame pas l'attention comme un article en
   rayon. Un `off` complet (article retiré de la vente) est encore plus pâle. */
.ash-row.reserve{opacity:.66}
.ash-rayon{
  padding:2.5px 7px;border-radius:20px;font-size:8.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  color:#7ee0a8;background:rgba(46,211,127,.12);border:1px solid rgba(46,211,127,.35);
}
.ash-reserve{
  padding:2.5px 7px;border-radius:20px;font-size:8.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ui-ink3);background:rgba(255,255,255,.04);border:1px solid var(--ui-line);
}
.ash-actes{gap:11px}
@media(max-width:1200px){
  .ash-actes{flex-wrap:wrap;gap:8px 11px}
}

/* Le compte à rebours posé sur chaque en-tête de rayon. Discret : c'est une
   information de contexte, pas un chronomètre qu'on vient regarder. */
.vest-tick{
  margin-left:auto;padding:3px 10px;border-radius:20px;
  font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--ui-ink3);
  background:rgba(255,255,255,.04);border:1px solid var(--ui-line);
}
.vest-tick b{color:var(--ui-gold);font-variant-numeric:tabular-nums}
.shop-reserve .vest-tick{margin-left:6px;display:inline-block;vertical-align:middle}

/* =========================================================================
   LES DÉCORATIONS DE PROFIL
   =========================================================================
   Une bordure est un anneau ; une décoration est un OBJET. Elle a une
   silhouette, elle dépasse du cercle, et elle se compose de pièces qui bougent
   à des rythmes différents.

   Le calque fait 1,2 fois l'avatar — `inset:-10%` de chaque côté. C'est la
   proportion retenue par Discord pour ses décorations, et elle est juste :
   assez de marge pour qu'une couronne dépasse franchement, pas assez pour
   qu'elle avale le visage.

   Deux calques, parce qu'un même SVG ne peut pas être à la fois devant et
   derrière la photo : `av-deco-fond` passe dessous (les ailes, une lueur),
   `av-deco-dessus` par-dessus (la couronne, les cartes, les dés).
   ========================================================================= */
.av-deco{
  position:absolute;inset:calc((1 - var(--deco-r,1.2)) * 50%);
  display:block;pointer-events:none;
  /* le SVG dépasse volontairement de son cadre : rien ne doit le rogner */
  overflow:visible;
}
.av-deco svg{width:100%;height:100%;display:block;overflow:visible}
/* Le calque du dessous est percé en son centre, exactement à la taille de
   l'avatar. Sans cette découpe, il se peindrait PAR-DESSUS la photo : `.av` est
   un contexte d'empilement, et un enfant en `z-index:-1` y passe au-dessus du
   fond de l'élément, pas derrière. Percé, il ne reste que ce qui dépasse — et
   les ailes ont enfin l'air de sortir de derrière les épaules.

   83,3 % : le calque fait 1,2 fois l'avatar, donc le rayon de l'avatar vaut
   50/60 de son demi-côté. */
.av-deco-fond{
  z-index:-1;
  -webkit-mask:radial-gradient(closest-side,#0000 calc(100% / var(--deco-r,1.2) - .5px),#000 calc(100% / var(--deco-r,1.2)));
          mask:radial-gradient(closest-side,#0000 calc(100% / var(--deco-r,1.2) - .5px),#000 calc(100% / var(--deco-r,1.2)));
}
.av-deco-dessus{z-index:2}
/* Un avatar décoré ne découpe plus son contenu, sinon la décoration serait
   coupée net au bord du disque. */
.av:has(.av-deco){overflow:visible}

/* Le repère des transformations est celui du DESSIN (le viewBox), pas la boîte
   de chaque forme : c'est ce qui permet d'écrire des origines en coordonnées du
   dessin, comme « 60px 60px » pour le centre.

   Attention à la spécificité : cette règle vaut `0,2,0` (une classe + un
   sélecteur d'attribut). Toute règle particulière qui doit la contredire est
   donc écrite `.av-deco .d-xxx` — sinon la générale gagne, et une pièce censée
   tourner sur elle-même part en orbite autour du dessin entier. */
.av-deco [class^="d-"],.av-deco [class*=" d-"]{transform-box:view-box}

@media(prefers-reduced-motion:reduce){
  .av-deco *{animation:none!important}
}

@keyframes dTour{to{transform:rotate(1turn)}}
@keyframes dContre{to{transform:rotate(-1turn)}}

/* ---- Diadème : la couronne se pose, les pierres s'allument, l'or brille ---- */
.av-deco .d-couronne{transform-origin:60px 30px;animation:dPose 4.4s ease-in-out infinite}
@keyframes dPose{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.av-deco .d-couronne>g{filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.av-deco .d-gemmes circle{transform-box:fill-box;transform-origin:center;
  animation:dGemme 2.7s ease-in-out infinite}
.av-deco .d-gemmes circle:nth-child(2){animation-delay:.9s}
.av-deco .d-gemmes circle:nth-child(3){animation-delay:1.8s}
@keyframes dGemme{0%,100%{opacity:.78}50%{opacity:1;filter:brightness(1.6)}}
.av-deco .d-lueur{transform-origin:60px 42px;animation:dLueur 4.4s ease-in-out infinite}
@keyframes dLueur{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
/* L'éclat traverse l'or, marque un temps d'arrêt, puis repart. Un balayage
   continu ferait « chargement en cours » plutôt que « métal ». */
.av-deco .d-eclat{animation:dEclat 5s ease-in-out infinite}
@keyframes dEclat{0%,55%{transform:translateX(0)}100%{transform:translateX(190px)}}

/* ---- Acier forgé et roulette : un reflet qui fait le tour de l'anneau ---- */
.av-deco .d-acier,.av-deco .d-roulette{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.av-deco .d-brillance{transform-origin:60px 60px;animation:dTour 6.5s linear infinite}
/* La bille court à contresens du cylindre, et plus vite. Dans le même sens,
   une roulette n'est qu'une roue de vélo. */
.av-deco .d-bille{transform-origin:60px 60px;animation:dContre 2.4s linear infinite}

/* ---- Ailes : un battement large et lent. Rapide, ça fait insecte. ---- */
.av-deco .d-ailes{filter:drop-shadow(0 5px 11px rgba(0,0,0,.5))}
.av-deco .d-aileD{transform-origin:100px 105px;animation:dAileD 3.6s ease-in-out infinite}
.av-deco .d-aileG{transform-origin:90px 105px;animation:dAileG 3.6s ease-in-out infinite}
@keyframes dAileD{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes dAileG{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}

/* Chaque décoration garde un liseré assorti. Ça sert à deux choses : dans une
   liste d'amis à 30 px le dessin devient illisible, mais le liseré reste — on
   voit qu'il se passe quelque chose ; et sur un grand avatar, il raccroche
   l'objet au portrait au lieu de le laisser flotter autour. */
.av.fr-acier{box-shadow:0 0 0 2px #1a2029,0 0 16px rgba(150,170,200,.3)!important}
.av.fr-roulette{box-shadow:0 0 0 2px #6d5218,0 0 16px rgba(200,150,60,.3)!important}
.av.fr-ailes{box-shadow:0 0 0 2px #cfd9ea,0 0 20px rgba(190,210,240,.4)!important}
.av.fr-diademe{box-shadow:0 0 0 2px #a87a1c,0 0 22px rgba(247,201,90,.45)!important}
/* Les décorations n'ont pas d'anneau tournant : leur `::before` resterait un
   disque vide qui mangerait le liseré. */
.av.fr-acier::before,.av.fr-roulette::before,
.av.fr-ailes::before,.av.fr-diademe::before{display:none}

/* =========================================================================
   QUORIDOR — le plateau doit tenir dans ce qui reste, pas dans la fenêtre
   =========================================================================
   Le plateau se calait sur `70vh` : 70 % de la hauteur de la FENÊTRE. Or il ne
   dispose pas de la fenêtre entière — au-dessus il y a le titre de la partie et
   la marge de la table, en dessous la main du joueur. Sur un écran bas, il
   débordait donc par le bas de plusieurs dizaines de pixels, et les dernières
   rangées passaient sous le pli.

   On le borne par trois choses à la fois : la hauteur réellement disponible, la
   largeur du conteneur, et un maximum absolu. `border-box` est indispensable —
   sans lui, le cadre de 8 px et le rembourrage de 13 px s'ajoutent à la largeur
   calculée et le compte est faux de 42 px.
   ========================================================================= */
.quoridor-board{
  box-sizing:border-box!important;
  width:min(54vh,680px,100%)!important;
  max-width:100%!important;
  max-height:100%!important;
}
@media(max-height:700px){
  .quoridor-board{width:min(50vh,680px,100%)!important}
}

/* =========================================================================
   ADMINISTRATION — LE SITE PUBLIC
   =========================================================================
   L'état du verrou doit se lire avant de lire quoi que ce soit d'autre : une
   pastille de couleur et une phrase, en haut. Un panneau où il faut chercher
   si le site est ouvert ou fermé est un panneau raté.
   ========================================================================= */
.asite-etat{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:0 0 14px;padding:18px 20px;
  border:1px solid var(--ui-line);border-radius:var(--ui-r);background:var(--ui-card);
}
.asite-etat.ferme{border-color:rgba(247,185,85,.45);
  background:linear-gradient(90deg,rgba(247,185,85,.09),var(--ui-card) 55%)}
.asite-etat.ouvert{border-color:rgba(46,211,127,.4);
  background:linear-gradient(90deg,rgba(46,211,127,.08),var(--ui-card) 55%)}
.asite-pastille{
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  background:var(--ui-gold);box-shadow:0 0 0 4px rgba(247,185,85,.18);
}
.asite-etat.ouvert .asite-pastille{background:#2ed37f;box-shadow:0 0 0 4px rgba(46,211,127,.18);
  animation:asitePouls 2.6s ease-in-out infinite}
@keyframes asitePouls{
  0%,100%{box-shadow:0 0 0 4px rgba(46,211,127,.18)}
  50%{box-shadow:0 0 0 8px rgba(46,211,127,.06)}
}
.asite-etat b{display:block;color:var(--ui-ink);font-size:15px}
.asite-etat span{color:var(--ui-ink3);font-size:12.5px}
.asite-etat .btn{margin-left:auto}

.asite-hotes{
  margin:18px 0 0;padding:15px 18px;
  border:1px dashed var(--ui-line2);border-radius:var(--ui-r);
  background:rgba(255,255,255,.02);
}
.asite-hotes b{display:block;color:var(--ui-ink2);font-size:11px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.asite-hotes span{display:block;margin:6px 0 8px;color:var(--ui-acc);
  font-size:13.5px;font-weight:700;font-family:ui-monospace,Menlo,monospace}
.asite-hotes em{display:block;font-style:normal;color:var(--ui-ink3);font-size:11.5px;line-height:1.6}
.asite-hotes code{padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.06);
  color:var(--ui-ink2);font-size:11px}
/* Le champ du message hérite sinon de la largeur des champs numériques (110 px)
   et on ne lit plus que les dix premiers caractères de sa propre phrase. */
#asite-message{width:100%!important;min-width:240px;text-align:left}
#asite-mot{width:190px}