/* =====================================================================
   Alpharium Luxurious Lounge — feuille de style.
   Téléphone en portrait d'abord ; paysage et PC ensuite.
   Or (#d4af37) sur bleu marine (#1a2340), crème (#f5f0e6).
   Zéro animation coûteuse : pas de flou, pas d'ombres animées.
   ===================================================================== */
@font-face { font-family: 'Cinzel'; src: url('/fonts/Cinzel.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/Lora.ttf') format('truetype'); font-display: swap; }

:root {
  --or: #d4af37; --or-clair: #f1d97a; --or-sombre: #9c7a1c;
  --marine: #1a2340; --marine-sombre: #0d1220; --marine-clair: #26345e;
  --creme: #f5f0e6; --creme-sombre: #cfc6b3;
  --rouge: #c0392b;
  --titre: 'Cinzel', Georgia, serif;
  --texte: 'Lora', Georgia, serif;
  --safe-bas: env(safe-area-inset-bottom, 0px);
  --safe-haut: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
#app, .salle, canvas, .hud-haut, .hud-bas, .feuille, .modale, button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
html, body { margin: 0; height: 100%; background: var(--marine-sombre); color: var(--creme); font-family: var(--texte); -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { overflow: hidden; }
#app { position: fixed; inset: 0; }
button, input, select { font-family: inherit; font-size: 1rem; }
button { cursor: pointer; min-height: 40px; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.cache { display: none !important; }
.sprite { background-repeat: no-repeat; }

/* ---------- fond de mire ---------- */
.mire {
  position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(212,175,55,0.16), transparent 60%),
    repeating-linear-gradient(45deg, rgba(212,175,55,0.05) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(-45deg, rgba(212,175,55,0.05) 0 2px, transparent 2px 24px),
    linear-gradient(180deg, #131b36 0%, var(--marine-sombre) 100%);
  display: flex; align-items: center; justify-content: center; padding: 16px; padding-top: calc(16px + var(--safe-haut));
}
.mire-inner { display: flex; gap: 20px; align-items: flex-end; max-width: 720px; width: 100%; }
.carte {
  flex: 1; background: linear-gradient(180deg, #1e2a4d, #151d38);
  border: 2px solid var(--or); border-radius: 12px; padding: 22px 22px 16px; min-width: 0;
  box-shadow: 0 0 0 4px #0d1220, 0 0 0 5px var(--or-sombre), 0 20px 50px rgba(0,0,0,0.5);
}
.carte header { text-align: center; margin-bottom: 14px; }
.ornement { color: var(--or); letter-spacing: 8px; font-size: 0.7rem; margin-bottom: 6px; }
.titre { font-family: var(--titre); color: var(--or); font-size: 2rem; letter-spacing: 4px; margin: 0; line-height: 1.1; text-shadow: 0 2px 0 #5a4410; }
.sous-titre { font-style: italic; color: var(--creme); margin: 2px 0 0; font-size: 1.05rem; letter-spacing: 1px; }
.filet { height: 1px; margin: 10px auto 8px; width: 70%; background: linear-gradient(90deg, transparent, var(--or), transparent); }
.club { font-family: var(--titre); font-size: 0.62rem; letter-spacing: 2.5px; color: var(--or-sombre); text-transform: uppercase; }

.onglets { display: flex; border-bottom: 1px solid var(--or-sombre); margin-bottom: 14px; }
.onglets button { flex: 1; background: none; border: 0; color: var(--creme-sombre); padding: 10px; font-family: var(--titre); letter-spacing: 1px; font-size: 0.85rem; border-bottom: 3px solid transparent; }
.onglets button.actif { color: var(--or); border-bottom-color: var(--or); }
.onglets.petits button { font-family: var(--texte); font-size: 0.85rem; padding: 8px 4px; letter-spacing: 0; }

.champ { display: block; margin-bottom: 10px; }
.champ span { display: block; font-size: 0.8rem; color: var(--creme-sombre); margin-bottom: 4px; }
.champ input, .champ select { width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--marine-clair); background: #0f1629; color: var(--creme); outline: none; font-size: 16px; }
.champ input:focus, .champ select:focus { border-color: var(--or); }
.champ.erreur input { border-color: var(--rouge); }
.ligne { display: flex; gap: 10px; }
.ligne .champ { flex: 1; min-width: 0; }

.btn { display: inline-block; padding: 12px 18px; border-radius: 8px; border: 1px solid var(--or-sombre); background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #2a1f05; font-family: var(--titre); font-weight: 700; letter-spacing: 1px; width: 100%; }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.secondaire { background: transparent; color: var(--or); }
.btn.petit { width: auto; padding: 8px 14px; font-size: 0.8rem; }
.btn.acheter { margin: 4px 0 12px; }
.message { min-height: 1.3em; font-size: 0.9rem; margin: 8px 0 4px; color: #e08a80; }
.message.ok { color: #9ed49e; }
.pied { text-align: center; margin-top: 14px; font-size: 0.72rem; color: var(--creme-sombre); }
.pied .devise { font-style: italic; }

.alphred { width: 150px; text-align: center; flex-shrink: 0; }
.bulle-alphred { background: var(--creme); color: #222; border-radius: 12px; padding: 8px 10px; font-size: 0.8rem; margin-bottom: 10px; position: relative; }
.bulle-alphred::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--creme); border-bottom: 0; }
.alphred .sprite { margin: 0 auto; cursor: pointer; }

@media (max-width: 640px) {
  .mire { align-items: flex-start; }
  .mire-inner { flex-direction: column-reverse; align-items: stretch; }
  .alphred { width: 100%; display: flex; align-items: flex-end; gap: 10px; justify-content: center; }
  .alphred .sprite { margin: 0; }
  .bulle-alphred { margin-bottom: 24px; flex: 1; text-align: left; }
  .bulle-alphred::after { left: auto; right: -8px; bottom: 10px; margin-left: 0; border: 8px solid transparent; border-left-color: var(--creme); border-right: 0; }
  .carte { padding: 16px 14px 12px; }
  .titre { font-size: 1.5rem; }
}

/* ---------- Vestiaire ---------- */
.vestiaire { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #121a33, var(--marine-sombre)); padding-top: var(--safe-haut); }
.vestiaire .barre { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--or-sombre); background: #0f1629; }
.vestiaire .barre h1 { font-family: var(--titre); color: var(--or); font-size: 1rem; margin: 0; flex: 1; letter-spacing: 1px; }
.apercu { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--marine-clair); background: radial-gradient(ellipse at 50% 80%, rgba(212,175,55,0.16), transparent 65%); }
.apercu .cadre { width: 72px; height: 140px; display: flex; align-items: flex-end; justify-content: center; }
.apercu .tourner { background: var(--marine-clair); color: var(--or); border: 1px solid var(--or-sombre); border-radius: 50%; width: 40px; height: 40px; flex-shrink: 0; }
.apercu .infos { margin-left: 8px; min-width: 0; }
.apercu .nom { font-family: var(--titre); color: var(--or); }
.apercu .titre-niveau { font-size: 0.75rem; color: var(--creme-sombre); font-style: italic; }
.apercu .solde { font-size: 0.8rem; color: var(--or-clair); margin-top: 4px; }
.panneaux { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.slots { display: flex; overflow-x: auto; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--marine-clair); scrollbar-width: none; flex-shrink: 0; }
.slots::-webkit-scrollbar { display: none; }
.slots button { flex-shrink: 0; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--creme-sombre); padding: 8px 10px; font-size: 0.9rem; }
.slots button.actif { color: var(--or); border-bottom-color: var(--or); }
.options { flex: 1; overflow-y: auto; padding: 12px; padding-bottom: calc(12px + var(--safe-bas)); -webkit-overflow-scrolling: touch; }
.grille { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.puce { background: #0f1629; border: 1px solid var(--marine-clair); color: var(--creme); border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
.puce.actif { border-color: var(--or); color: var(--or); }
.puce.verrou { color: var(--creme-sombre); }
.puce .prix { font-size: 0.7rem; color: var(--or-clair); background: rgba(212,175,55,0.15); padding: 2px 6px; border-radius: 10px; }
.puce.danger { color: #e08a80; border-color: #7a2f27; }
.nuancier { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nuance { width: 34px; height: 34px; min-height: 34px; border-radius: 50%; border: 2px solid #0d1220; padding: 0; }
.nuance.actif { border-color: var(--or); box-shadow: 0 0 0 2px var(--or-clair); }
.etiquette { font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--creme-sombre); margin: 4px 0 8px; }
.note { font-size: 0.85rem; color: var(--creme-sombre); font-style: italic; }
@media (min-width: 700px) and (orientation: landscape) {
  .vestiaire { flex-direction: row; flex-wrap: wrap; }
  .vestiaire .barre { width: 100%; }
  .apercu { width: 260px; flex-direction: column; border-right: 1px solid var(--marine-clair); border-bottom: 0; }
  .apercu .cadre { width: 100px; height: 180px; }
  .apercu .infos { margin-left: 0; text-align: center; }
  .panneaux { flex: 1; height: calc(100% - 50px); }
}

/* ---------- Salon ---------- */
.salle { position: absolute; inset: 0; }
canvas#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud-haut { position: absolute; top: calc(6px + var(--safe-haut)); left: 6px; right: 6px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.hud-haut > * { pointer-events: auto; }
.badge-joueur { display: flex; align-items: center; gap: 6px; background: rgba(13,18,32,0.85); border: 1px solid var(--or-sombre); border-radius: 22px; padding: 2px 10px 2px 3px; min-width: 0; cursor: pointer; }
.badge-joueur .portrait { width: 40px; height: 36px; background: #0f1629; border-radius: 50%; flex-shrink: 0; }
.badge-textes { min-width: 0; }
.badge-joueur .nom { font-family: var(--titre); color: var(--or); font-size: 0.85rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-joueur .titre-niveau { font-size: 0.65rem; color: var(--creme-sombre); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-boutons { margin-left: auto; display: flex; gap: 6px; }
.rond { background: rgba(13,18,32,0.85); color: var(--or); border: 1px solid var(--or-sombre); border-radius: 22px; min-width: 44px; height: 44px; padding: 0 10px; font-size: 1rem; }
.hud-droite { position: absolute; right: 8px; top: calc(60px + var(--safe-haut)); display: flex; flex-direction: column; gap: 6px; }
.hud-bas { position: absolute; left: 6px; right: 6px; bottom: calc(6px + var(--safe-bas)); display: flex; flex-direction: column; gap: 6px; }
.journal { max-height: 34vh; overflow-y: auto; background: rgba(13,18,32,0.82); border: 1px solid var(--marine-clair); border-radius: 12px; padding: 6px 10px; font-size: 0.85rem; line-height: 1.35; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.journal .l { word-break: break-word; }
.journal .l b { color: var(--or); font-weight: 600; }
.journal .l.sys { color: var(--or-clair); font-style: italic; }
.journal .l.prive { color: #e0a3b0; }
.journal.replie { display: none; }
.saisie { display: flex; gap: 6px; align-items: center; }
.saisie input { flex: 1; padding: 11px 12px; border-radius: 22px; border: 1px solid var(--or-sombre); background: rgba(13,18,32,0.9); color: var(--creme); outline: none; min-width: 0; font-size: 16px; height: 44px; }
.saisie input:focus { border-color: var(--or); }
.saisie .envoyer { background: linear-gradient(180deg, var(--or-clair), var(--or)); border: 1px solid var(--or-sombre); border-radius: 50%; width: 44px; height: 44px; color: #2a1f05; font-weight: 700; padding: 0; }

/* ---------- feuilles (bas en portrait, droite en paysage) ---------- */
.feuille { position: absolute; left: 0; right: 0; bottom: 0; max-height: 62vh; max-height: 62dvh; display: flex; flex-direction: column; background: #151d38; border-top: 2px solid var(--or); border-radius: 16px 16px 0 0; padding-bottom: var(--safe-bas); z-index: 6; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); }
.feuille-barre { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--marine-clair); flex-shrink: 0; }
.feuille-barre strong { font-family: var(--titre); color: var(--or); letter-spacing: 1px; font-size: 0.95rem; }
.feuille-barre h2 { font-family: var(--titre); color: var(--or); margin: 0; font-size: 1rem; flex: 1; }
.feuille-barre .astuce { flex: 1; font-size: 0.75rem; color: var(--creme-sombre); font-style: italic; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fermer { background: none; border: 1px solid var(--marine-clair); color: var(--creme); border-radius: 50%; width: 36px; height: 36px; min-height: 36px; padding: 0; margin-left: auto; }
.feuille-corps { overflow-y: auto; padding: 10px 12px; -webkit-overflow-scrolling: touch; }
.feuille.construction .onglets { margin: 0; flex-shrink: 0; }
.catalogue { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; flex-shrink: 0; }
.article { flex-shrink: 0; width: 84px; height: 92px; background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; color: var(--creme); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 6px 4px; font-size: 0.7rem; }
.article img { max-width: 64px; max-height: 52px; width: auto; height: auto; }
.article.actif { border-color: var(--or); color: var(--or); }
.ligne-outils { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feuille.menu { max-height: 80vh; max-height: 80dvh; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--marine-clair); color: var(--creme); padding: 14px 16px; font-size: 1rem; }
.menu-item.danger { color: #e08a80; }
.menu-zoom { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--marine-clair); }
.menu-zoom .puce { min-width: 48px; justify-content: center; }
.pied-menu { text-align: center; font-family: var(--titre); font-size: 0.62rem; letter-spacing: 2px; color: var(--or-sombre); padding: 12px; text-transform: uppercase; }
@media (min-width: 700px) and (orientation: landscape) {
  .feuille { left: auto; right: 0; top: auto; bottom: 0; width: min(380px, 48vw); max-height: 100dvh; border-top: 0; border-left: 2px solid var(--or); border-radius: 0; }
  .feuille.menu { max-height: 80dvh; border-radius: 16px 0 0 0; }
}

/* ---------- modales ---------- */
.voile { position: absolute; inset: 0; background: rgba(5,8,16,0.6); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 10; }
/* les fenêtres prennent la taille de leur contenu, jamais plus que l'écran */
.modale { background: #151d38; border: 2px solid var(--or); border-radius: 12px; padding: 18px; width: auto; min-width: min(300px, 100%); max-width: min(100%, 380px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modale.large { min-width: min(340px, 100%); max-width: min(100%, 560px); padding: 0 0 12px; }
.modale.large > .grille, .modale.large > .etiquette, .modale.large > .liste-joueurs { margin-left: 12px; margin-right: 12px; }
.modale h2 { font-family: var(--titre); color: var(--or); margin: 0 0 12px; font-size: 1.05rem; }
.modale .actions { display: flex; gap: 8px; margin-top: 8px; }
.modale .actions .btn { flex: 1; }
.liste-joueurs { display: flex; flex-direction: column; gap: 8px; }
.joueur { background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 8px 10px; opacity: 0.7; }
.joueur.en-ligne { opacity: 1; border-color: var(--or-sombre); }
.joueur-nom b { color: var(--or); }
.joueur .meta { font-size: 0.75rem; color: var(--creme-sombre); }
.joueur-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.joueur-actions select { background: #151d38; color: var(--creme); border: 1px solid var(--marine-clair); border-radius: 8px; padding: 6px; }
.joueur-actions .puce { padding: 6px 10px; font-size: 0.8rem; min-height: 34px; }
.toast { position: absolute; top: calc(64px + var(--safe-haut)); left: 50%; transform: translateX(-50%); background: var(--creme); color: #222; padding: 8px 14px; border-radius: 10px; font-size: 0.9rem; z-index: 20; max-width: 92%; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.4); }

/* ---------- mire : pied à trois lignes ---------- */
.pied-mire { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pastille { font-family: var(--titre); font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--or-sombre); border: 1px solid var(--or-sombre); border-radius: 20px; padding: 5px 12px; }
.frequentation { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-style: italic; color: var(--creme-sombre); text-align: center; }
.voyant { width: 10px; height: 10px; border-radius: 50%; background: #7f8c8d; flex-shrink: 0; }
.classement-btn { background: none; border: 0; color: var(--or); font-family: var(--titre); letter-spacing: 1px; font-size: 0.85rem; padding: 6px 10px; }
.lien { background: none; border: 0; color: var(--creme-sombre); text-decoration: underline; font-size: 0.85rem; padding: 8px; width: 100%; min-height: 36px; }

/* ---------- couleurs des noms ---------- */
.or { color: var(--or) !important; }
.bronze { color: #b8792e !important; }
.blanc { color: var(--creme) !important; }
.journal .l b { color: var(--creme); font-weight: 600; }
.journal .l.me { color: var(--or-clair); font-style: italic; }
.journal .l .emote { color: var(--or-clair); }
.puce.or { border-color: var(--or); color: var(--or); }

/* ---------- classement ---------- */
.classement { display: flex; flex-direction: column; gap: 6px; }
.rang { display: flex; align-items: center; gap: 10px; background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 6px 10px; }
.rang.podium { border-color: var(--or-sombre); }
.rang .numero { width: 28px; text-align: center; font-family: var(--titre); color: var(--or); }
.rang .portrait { width: 40px; height: 36px; background-size: 40px 36px; background-repeat: no-repeat; background-color: #151d38; border-radius: 50%; flex-shrink: 0; }
.rang-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rang-textes b { color: var(--creme); }
.rang .meta { font-size: 0.72rem; color: var(--creme-sombre); font-style: italic; }
.rang .xp { font-size: 0.8rem; color: var(--or-clair); }

/* ---------- animations ---------- */
.voile.bas { align-items: flex-end; padding: 0; }
.anims .puce { min-height: 44px; }
textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--marine-clair); background: #0f1629; color: var(--creme); font-size: 16px; resize: vertical; }
textarea:focus { border-color: var(--or); outline: none; }

/* ---------- catalogue de meubles : sous-groupes ---------- */
.sous-groupes { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px; scrollbar-width: none; }
.sous-groupes::-webkit-scrollbar { display: none; }
.sous-groupe { flex-shrink: 0; background: none; border: 1px solid var(--marine-clair); color: var(--creme-sombre); border-radius: 20px; padding: 6px 12px; font-size: 0.8rem; min-height: 34px; }
.sous-groupe.actif { border-color: var(--or); color: var(--or); }

/* ---------- catalogue en grille (défilement vertical) ---------- */
.catalogue-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; padding: 4px 0 12px; }
.catalogue-grille .article { width: auto; height: 96px; position: relative; }
.article .etoile { position: absolute; top: 2px; right: 2px; background: none; border: 0; color: var(--creme-sombre); font-size: 1rem; min-height: 28px; width: 28px; padding: 0; }
.article .etoile.actif { color: var(--or-clair); }
.outils-meuble { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 8px; border-bottom: 1px solid var(--marine-clair); margin-bottom: 8px; }
.outils-titre { display: flex; align-items: center; gap: 8px; }
.outils-titre img.mini { max-width: 40px; max-height: 32px; }
.outils-titre b { color: var(--or); font-size: 0.9rem; }
.outils-meuble .nuancier { margin: 0; }
.sous-groupes.secondaires .sous-groupe { font-size: 0.75rem; padding: 4px 10px; min-height: 30px; }
.feuille.construction { max-height: 66vh; max-height: 66dvh; }
/* on voit le salon à travers la fenêtre de construction */
.feuille.construction { background: rgba(21, 29, 56, 0.72); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.feuille.construction .article { background: rgba(15, 22, 41, 0.55); }
.feuille.construction .fermer.bascule { margin-left: 0; font-size: 1.05rem; }
.feuille.construction .fermer.bascule.actif { border-color: var(--or); color: var(--or); background: rgba(212, 175, 55, 0.18); }
.fermer.petit { width: 32px; height: 32px; min-height: 32px; margin-left: 0; font-size: 1rem; }

/* ---------- bulles d'action sous un meuble ---------- */
.bulles { position: absolute; transform: translate(-50%, 0); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.bulles > * { pointer-events: auto; }
.bulles-titre { font-size: 0.7rem; color: var(--or-clair); background: rgba(13,18,32,0.85); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.bulles-rangee { display: flex; gap: 6px; }
.bulle { width: 42px; height: 42px; min-height: 42px; border-radius: 50%; border: 1px solid var(--or-sombre); background: rgba(13,18,32,0.92); color: var(--creme); font-size: 1.1rem; padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.bulle.actif { border-color: var(--or); background: var(--marine-clair); }
.bulle.danger { color: #e08a80; border-color: #7a2f27; }
.bulles-couleurs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 220px; justify-content: center; background: rgba(13,18,32,0.9); padding: 6px; border-radius: 12px; }
.bulles-couleurs .nuance { width: 28px; height: 28px; min-height: 28px; }

/* ---------- fenêtre des membres ---------- */
.joueur.ligne { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #0f1629; color: var(--creme); }
.joueur.ligne .portrait { width: 40px; height: 36px; background-size: 40px 36px; background-repeat: no-repeat; border-radius: 50%; background-color: #151d38; flex-shrink: 0; }
.joueur.ligne .joueur-nom { flex: 1; min-width: 0; }
.joueur .suivi { color: var(--or); }
.fiche { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; }
.fiche-haut { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.fiche-haut .cadre { width: 70px; height: 140px; display: flex; align-items: flex-end; justify-content: center; }
.fiche-textes { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.select-role { background: #151d38; color: var(--creme); border: 1px solid var(--marine-clair); border-radius: 8px; padding: 8px; min-height: 40px; }
.courrier { white-space: pre-wrap; font-size: 0.85rem; margin: 6px 0; }
.journal-admin { font-size: 0.78rem; display: flex; flex-direction: column; gap: 4px; }
.journal-admin b { color: var(--or); }
.hud-boutons .rond.direction { color: #f1d97a; border-color: var(--or); }
.nuit .hud-haut, .nuit .hud-bas, .nuit .feuille { filter: brightness(0.9); }

/* ---------- stats & badges ---------- */
.stat-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 12px 12px; }
.stat { background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 8px 4px; text-align: center; }
.stat-icone { font-size: 1.2rem; }
.stat-valeur { font-family: var(--titre); color: var(--or); font-size: 0.9rem; margin-top: 2px; }
.stat .meta { font-size: 0.65rem; color: var(--creme-sombre); }
.modale.large > .barre-xp, .modale.large > .meta, .modale.large > .badges { margin-left: 12px; margin-right: 12px; }
.barre-xp { height: 8px; background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 6px; overflow: hidden; }
.barre-xp-plein { height: 100%; background: linear-gradient(90deg, var(--or-sombre), var(--or-clair)); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 8px; }
.badge { background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 8px 4px; text-align: center; opacity: 0.45; display: flex; flex-direction: column; gap: 2px; }
.badge.obtenu { opacity: 1; border-color: var(--or); }
.badge-icone { font-size: 1.4rem; }
.badge-nom { font-size: 0.75rem; color: var(--or); }
.badge .meta { font-size: 0.62rem; color: var(--creme-sombre); }

/* ---------- réactions rapides ---------- */
.journal .l.reagir { cursor: pointer; }
.journal .l.petit { font-size: 0.72rem; opacity: 0.8; }
.reactions { display: flex; gap: 4px; padding: 4px 0 2px; }
.reaction { background: #0f1629; border: 1px solid var(--or-sombre); border-radius: 16px; min-height: 32px; width: 40px; padding: 0; font-size: 1rem; }

/* ---------- photos ---------- */
.photo-apercu { display: block; width: 100%; border: 1px solid var(--or-sombre); border-radius: 8px; margin-bottom: 10px; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 0 12px; }
.album .photo { background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 4px; color: var(--creme); text-align: left; }
.album .photo img { width: 100%; border-radius: 6px; display: block; }
.album .meta { font-size: 0.7rem; color: var(--creme-sombre); padding: 4px 2px 0; }
.album .photo:hover, .album .photo:focus { border-color: var(--or); }

/* ---------- menu : réglages ---------- */
.menu-etiquette { padding: 10px 16px 0; margin: 0; }
.menu-zoom input[type=range] { flex: 1; accent-color: var(--or); }

/* ---------- Vestiaire par-dessus le salon (essayage en direct) ---------- */
.vestiaire.en-jeu { background: transparent; justify-content: flex-end; pointer-events: none; }
.vestiaire.en-jeu > * { pointer-events: auto; }
.vestiaire.en-jeu .barre { border-top: 2px solid var(--or); border-radius: 16px 16px 0 0; background: #151d38; }
.vestiaire.en-jeu .apercu { background: #151d38; padding: 4px 12px; }
.vestiaire.en-jeu .apercu .cadre, .vestiaire.en-jeu .apercu .tourner { display: none; }
.vestiaire.en-jeu .apercu .infos { margin: 0; display: flex; gap: 10px; align-items: baseline; }
.vestiaire.en-jeu .panneaux { flex: 0 0 auto; max-height: 48vh; background: #151d38; }
@media (min-width: 700px) and (orientation: landscape) {
  .vestiaire.en-jeu { flex-direction: column; flex-wrap: nowrap; left: auto; width: 380px; }
  .vestiaire.en-jeu .apercu { width: auto; flex-direction: row; border-right: 0; }
  .vestiaire.en-jeu .panneaux { max-height: 70vh; height: auto; }
}

/* ---------- soirée ---------- */
.soiree .hud-haut .rond, .soiree .saisie input { border-color: #c71585; }

/* ---------- mode photo : viseur ---------- */
.mode-photo .hud-haut, .mode-photo .hud-bas, .mode-photo .hud-droite, .mode-photo .bulles { display: none !important; }
.viseur { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.viseur-cadre { position: absolute; border: 2px dashed var(--or); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(5,8,16,0.45); }
.viseur-cadre::before, .viseur-cadre::after { content: ''; position: absolute; left: 33.3%; top: 0; bottom: 0; width: 33.3%; border-left: 1px solid rgba(212,175,55,0.25); border-right: 1px solid rgba(212,175,55,0.25); }
.viseur-cadre::after { left: 0; top: 33.3%; bottom: auto; width: auto; right: 0; height: 33.3%; border: 0; border-top: 1px solid rgba(212,175,55,0.25); border-bottom: 1px solid rgba(212,175,55,0.25); }
.viseur-barre { position: absolute; left: 6px; right: 6px; bottom: calc(10px + var(--safe-bas)); display: flex; align-items: center; gap: 8px; pointer-events: auto; background: rgba(13,18,32,0.85); border: 1px solid var(--or-sombre); border-radius: 22px; padding: 6px 8px; }
.viseur-barre .astuce { flex: 1; text-align: center; font-size: 0.75rem; color: var(--creme-sombre); font-style: italic; }

/* ---------- chat vocal ---------- */
.rond.actif { border-color: var(--or); background: rgba(212,175,55,0.22); }
.rond.sourdine { color: #e08a80; }

/* ---------- droits : cases à cocher ---------- */
.coches { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.coche { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 0.88rem; color: var(--creme); cursor: pointer; }
.coche input { width: 22px; height: 22px; accent-color: var(--or); margin: 0; flex-shrink: 0; }
.coche.off { opacity: 0.55; }

/* ---------- groupes de meubles : toutes les lignes visibles, rien hors champ ---------- */
.sous-groupes { flex-wrap: wrap; overflow-x: visible; }
.modale .champ input[type=number] { width: 120px; }
.modale .actions { flex-wrap: wrap; }

/* ---------- bandeau d'annonce ---------- */
.bandeau { position: absolute; left: 50%; top: calc(58px + var(--safe-haut)); transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #2a2f45, #151d38); border: 2px solid var(--or); border-radius: 14px; padding: 8px 12px; max-width: min(94vw, 640px); box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
.bandeau-icone { font-size: 1.2rem; }
.bandeau-texte { font-family: var(--titre); color: var(--or-clair); font-size: 0.95rem; letter-spacing: 0.5px; line-height: 1.25; min-width: 0; }
.bandeau-compte { font-family: var(--titre); font-size: 1.4rem; color: var(--creme); background: rgba(13,18,32,0.85); border: 1px solid var(--or-sombre); border-radius: 10px; padding: 2px 10px; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bandeau.fini .bandeau-compte { color: #fff; background: var(--rouge); border-color: #e08a80; }
.bandeau-fermer { background: none; border: 0; color: var(--creme-sombre); min-height: 28px; padding: 0 4px; font-size: 0.9rem; }

/* ---------- jeux & activités ---------- */
.feuille.jeu { max-height: 88vh; max-height: 88dvh; }
.feuille-corps.activite { display: flex; flex-direction: column; gap: 8px; }
.invitation { position: absolute; left: 50%; bottom: calc(120px + var(--safe-bas)); transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 8px; background: #151d38; border: 2px solid var(--or); border-radius: 14px; padding: 8px 12px; max-width: 94vw; }
.puce.petite { padding: 2px 8px; font-size: 0.75rem; min-height: 26px; }
.chrono { font-family: var(--titre); color: var(--or-clair); background: rgba(13,18,32,0.8); border: 1px solid var(--or-sombre); border-radius: 10px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.chrono.urgent { color: #fff; background: var(--rouge); }
.duel { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.duel .actif { color: var(--or); font-weight: 700; }
.duel .score { font-family: var(--titre); font-size: 1.4rem; color: var(--or-clair); }
.morpion { display: grid; grid-template-columns: repeat(3, 72px); gap: 6px; justify-content: center; }
.morpion .case { width: 72px; height: 72px; font-size: 2rem; background: #0f1629; border: 1px solid var(--or-sombre); border-radius: 10px; color: var(--or-clair); }
.morpion .case.pleine { background: #1a2340; }
.jauge { position: relative; height: 26px; background: #0f1629; border: 1px solid var(--or-sombre); border-radius: 13px; overflow: hidden; margin: 6px 0; }
.jauge-zone { position: absolute; left: 41%; width: 18%; top: 0; bottom: 0; background: rgba(47,107,63,0.6); }
.jauge-curseur { position: absolute; top: 2px; bottom: 2px; width: 6px; margin-left: -3px; background: var(--or-clair); border-radius: 3px; }
.btn.tirer { font-size: 1.3rem; padding: 14px; }
.f7-table { display: flex; flex-direction: column; gap: 6px; }
.f7-joueur { background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 6px 8px; }
.f7-joueur.tour { border-color: var(--or); }
.f7-joueur.perdu { opacity: 0.55; }
.cartes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.carte { display: inline-block; min-width: 26px; padding: 3px 5px; text-align: center; background: var(--creme); color: #1b1b1b; border-radius: 5px; font-weight: 700; font-size: 0.85rem; }
.carte.mod { background: var(--or); }
.carte.chance { background: #7fbf7f; }
/* Flip Seven : chaque chiffre a sa couleur (FLIP7_COLORS, en style) ; un liseré détache les couleurs sombres du fond marine */
.carte.f7-n { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); min-width: 28px; }
.carte.f7-n.porte { box-shadow: 0 0 0 2px var(--or-clair); }
.carte.f7-n.maudit { box-shadow: 0 0 0 2px #1b1b1b, 0 0 0 3px #c62828; }
.carte.mod.malus { background: #4a1020; color: #ffd6dc; border: 1px dashed #ff8a9a; }
.carte.mod.mult { background: var(--or-clair); font-style: italic; }
.carte.action { background: #1b1b1b; color: var(--or-clair); border: 1px solid var(--or); font-size: 0.75rem; }
.carte.cliquable { cursor: pointer; border: none; font-family: inherit; outline: 2px dashed var(--or-clair); outline-offset: 1px; }
.carte.cliquable:hover { transform: translateY(-2px); }
.carte.choisie { outline: 3px solid var(--or); outline-offset: 1px; transform: translateY(-3px); }
.f7-variante { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.f7-variante .chrono { margin-left: auto; }
.f7-evenement .carte { vertical-align: middle; }
.f7-joueur.moi { background: #16203a; }
.f7-actions .btn { flex: 1; }
.kc-entete { display: flex; align-items: center; justify-content: space-between; }
.kc-question { font-family: var(--titre); font-size: 1.05rem; color: var(--or-clair); margin: 4px 0 8px; }
.kc-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kc-rep { background: #0f1629; border: 1px solid var(--marine-clair); color: var(--creme); border-radius: 10px; padding: 12px 8px; font-size: 0.9rem; min-height: 52px; }
.kc-rep.mienne { border-color: var(--or); }
.kc-rep.bonne { background: #2f6b3f; border-color: #7fbf7f; }
.kc-rep.fausse { background: #7a2f27; }
.kc-scores { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-compo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.lg-role { background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.lg-role.pris { border-color: var(--or); }
.lg-desc { font-size: 0.72rem; line-height: 1.25; }
.lg-compteur { display: flex; align-items: center; gap: 8px; }
.lg-compteur .puce { min-width: 36px; justify-content: center; padding: 4px 8px; min-height: 30px; }
.lg-n { color: var(--or); }
.lg-entete { display: flex; align-items: center; justify-content: space-between; color: var(--or-clair); font-family: var(--titre); font-size: 0.95rem; }
.lg-carte { background: linear-gradient(180deg, #1a2340, #0f1629); border: 2px solid var(--or); border-radius: 12px; padding: 10px 12px; }
.lg-carte.loups { border-color: #c0392b; }
.lg-carte.solo { border-color: #8e44ad; }
.lg-carte b { color: var(--or-clair); font-family: var(--titre); }
.lg-action { background: rgba(212,175,55,0.08); border: 1px dashed var(--or-sombre); border-radius: 10px; padding: 8px; }
.puce.mort { opacity: 0.45; text-decoration: line-through; }
.lg-chat { background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 6px 8px; }
.lg-lignes { max-height: 120px; overflow-y: auto; font-size: 0.85rem; display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.lg-chat input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--or-sombre); background: #151d38; color: var(--creme); font-size: 16px; }
.lg-journal { font-size: 0.8rem; color: var(--creme-sombre); display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; }
.lecteur { position: absolute; left: 50%; top: calc(60px + var(--safe-haut)); transform: translateX(-50%); width: min(96vw, 720px); z-index: 7; background: #000; border: 2px solid var(--or); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.7); }
.lecteur-barre { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: #151d38; }
.lecteur iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.emojis { display: flex; flex-wrap: wrap; gap: 4px; background: rgba(13,18,32,0.9); border: 1px solid var(--marine-clair); border-radius: 12px; padding: 6px; }
.emoji { background: none; border: 0; font-size: 1.3rem; min-height: 36px; width: 40px; padding: 0; }
.photo-grande { display: block; width: 100%; border-radius: 8px; margin-bottom: 8px; }
.tenues { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--marine-clair); background: #0f1629; }
.tenues .puce { padding: 4px 10px; min-height: 32px; }
.stats-salon { padding: 0 12px; }
.barres { display: flex; align-items: flex-end; gap: 2px; height: 110px; margin-bottom: 14px; }
.barre-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.barre-plein { background: linear-gradient(180deg, var(--or-clair), var(--or-sombre)); border-radius: 3px 3px 0 0; min-height: 2px; }
.barre-plein.top { background: linear-gradient(180deg, #fff, var(--or)); }
.barre-x { position: absolute; bottom: -14px; left: 0; right: 0; text-align: center; font-size: 0.55rem; color: var(--creme-sombre); }
.barres.heures { height: 80px; }

/* ---------- tournoi, lecteur ---------- */
.joueur.mien { border-color: var(--or); }
.lecteur-cadre { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.lecteur-cadre iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- fenêtres flottantes : boutons à gauche, fenêtres déplaçables et redimensionnables ---------- */
/* TOUS les boutons à gauche : le groupe menu / membres / construction / Direction en haut à gauche (menu en premier), les actions en colonne en dessous ; le menu principal sort à gauche, sous son bouton */
.hud-haut { flex-direction: row-reverse; }
.hud-boutons { margin-left: 0; margin-right: auto; }
.hud-droite { right: auto; left: 8px; }
@media (min-width: 700px) and (orientation: landscape) { .feuille.menu.principal { left: 0; right: auto; top: calc(56px + var(--safe-haut)); bottom: auto; width: min(380px, 48vw); max-height: calc(100dvh - 70px); border-radius: 0 0 16px 0; border-left: 0; border-right: 2px solid var(--or); } }
/* la fiche d'un membre / animal se pose au centre de l'écran, jamais hors champ */
.modale.fiche { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(94vw, 420px); max-height: calc(100dvh - 24px); overflow-y: auto; }
.modale.fiche.detachee { transform: none; }
.poignee-deplacer { cursor: move; touch-action: none; user-select: none; }
/* redimensionnement : 4 bords + 4 coins, invisibles mais attrapables au doigt */
.poignee-bord { position: absolute; touch-action: none; z-index: 4; }
.p-n { top: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.p-s { bottom: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.p-w { left: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.p-e { right: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.p-nw { left: 0; top: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.p-ne { right: 0; top: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.p-sw { left: 0; bottom: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.poignee-taille { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; border-right: 3px solid var(--or-sombre); border-bottom: 3px solid var(--or-sombre); border-radius: 0 0 8px 0; opacity: 0.8; }
.modale, .feuille { position: relative; }
.feuille { position: absolute; }
.detachee { position: absolute !important; z-index: 12; box-shadow: 0 12px 40px rgba(0,0,0,0.6); display: flex; flex-direction: column; overflow: hidden; }
.modale.detachee { overflow-y: auto; }
.feuille.detachee { border-radius: 14px; border: 2px solid var(--or); max-height: none; bottom: auto; right: auto; }
/* détachée, la fenêtre a une hauteur fixe : c'est le corps qui défile, pas la fenêtre qui pousse hors de l'écran */
.feuille.detachee .feuille-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* une modale détachée garde sa hauteur : c'est elle qui défile */
.modale.detachee { overflow-y: auto; max-width: none; max-height: none; }
.voile .modale { max-height: calc(100dvh - 24px); }

/* ---------- sondage, défi, chrono vocal, tchat de table ---------- */
.sondage { position: absolute; left: 50%; top: calc(110px + var(--safe-haut)); transform: translateX(-50%); z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #151d38; border: 2px solid var(--or); border-radius: 14px; padding: 8px 12px; max-width: 94vw; }
.lg-chrono-grand { font-family: var(--titre); font-size: 3rem; text-align: center; color: var(--or-clair); padding: 10px; background: rgba(13,18,32,0.7); border-radius: 12px; font-variant-numeric: tabular-nums; }
.lg-chrono-grand.urgent { color: #fff; background: var(--rouge); }
.table-chat { margin-top: 6px; }
.lecteur:fullscreen { border: 0; border-radius: 0; width: 100vw; }
.lecteur:fullscreen .lecteur-cadre { height: calc(100vh - 36px); aspect-ratio: auto; }

/* ---------- carte de visite ---------- */
.carte-visite { border-radius: 14px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); margin-bottom: 10px; }
.carte-int { background: rgba(13,18,32,0.88); border-radius: 11px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.carte-haut { display: flex; align-items: center; gap: 12px; }
.carte-avatar { width: 40px; height: 88px; display: flex; align-items: flex-end; }
.carte-nom { font-family: var(--titre); font-size: 1.1rem; color: var(--creme); letter-spacing: 1px; }
.carte-titre { color: var(--or-clair); font-style: italic; font-size: 0.85rem; }
.carte-devise { color: var(--creme-sombre); font-style: italic; font-size: 0.85rem; }
.carte-bas { display: flex; gap: 12px; font-size: 0.78rem; color: var(--creme-sombre); flex-wrap: wrap; }
.carte-club { font-family: var(--titre); font-size: 0.55rem; letter-spacing: 2px; color: var(--or-sombre); text-transform: uppercase; }
.pastille-cadre { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.4); }
.karaoke { color: #ff6b6b; }
.salle[data-saison="hiver"] .hud-haut .rond { border-color: #a8c4e0; }
.salle[data-saison="ramadan"] .hud-haut .rond { border-color: #f39c12; }
.salle[data-saison="5juillet"] .hud-haut .rond { border-color: #0f7a3c; }

/* ---------- arbre généalogique ---------- */
.arbre-fenetre { max-width: min(100%, 900px); }
.arbre { display: flex; flex-direction: column; gap: 6px; }
.arbre-couple { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.arbre-lien { color: #e0a3b0; font-size: 1.2rem; }
.arbre-rang { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.arbre-rang.petits { margin-top: 4px; padding-left: 12px; border-left: 2px dashed var(--or-sombre); }
.arbre-bloc { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(13,18,32,0.5); border-radius: 10px; padding: 6px; }
.arbre-personne { background: #0f1629; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 6px 10px; text-align: center; min-width: 120px; }
.arbre-personne b { color: var(--creme); font-family: var(--titre); font-size: 0.8rem; }
.arbre-personne.rip { border-color: var(--or-sombre); opacity: 0.85; }
.arbre-carte { width: min(100%, 300px); }
.arbre-carte .carte-visite { margin-bottom: 2px; }

/* ---------- plateaux : échecs, dames, backgammon, dominos, baby-foot ---------- */
.plateau { display: grid; gap: 1px; background: #5c3d2e; padding: 3px; border-radius: 6px; margin: 4px auto; width: fit-content; max-width: 100%; }
.plateau.echecs { grid-template-columns: repeat(8, minmax(28px, 40px)); }
.plateau.dames { grid-template-columns: repeat(10, minmax(24px, 32px)); }
.plateau .case { aspect-ratio: 1; min-height: 0; padding: 0; font-size: 1.4rem; line-height: 1; background: #e9dfc7; border: 0; color: #1b1b1b; display: flex; align-items: center; justify-content: center; }
.plateau.dames .case { font-size: 1.1rem; }
.plateau .case.sombre { background: #8c6d4a; }
.plateau .case.choisie { outline: 3px solid var(--or); outline-offset: -3px; }
.plateau .case.cible { box-shadow: inset 0 0 0 3px #7fbf7f; }
.plateau.backgammon { display: flex; flex-direction: column; gap: 4px; background: #3b2a1a; padding: 6px; width: 100%; }
.bg-rangee { display: flex; gap: 2px; height: 96px; }
.bg-rangee.bas { flex-direction: row; transform: scaleY(-1); }
.bg-rangee.bas .pion, .bg-rangee.bas .meta { transform: scaleY(-1); }
.fleche { flex: 1; min-width: 0; min-height: 0; padding: 2px 0; border: 0; background: linear-gradient(180deg, #d9c48f 0 70%, transparent 70%); clip-path: polygon(0 0, 100% 0, 50% 100%); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fleche.impair { background: linear-gradient(180deg, #8c1d2b 0 70%, transparent 70%); }
.fleche.jouable { outline: 2px solid var(--or); }
.fleche.choisie { filter: brightness(1.3); }
.fleche.cible { outline: 3px solid #7fbf7f; }
.bg-barre { width: 14px; background: #1b1b1b; }
.pion { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #000; }
.pion.blanc { background: #f5f0e6; }
.pion.noir { background: #2b2b2b; }
.chaine { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; background: #2f6b3f; border-radius: 8px; min-height: 40px; align-items: center; }
.domino { display: inline-flex; background: #f5f0e6; color: #1b1b1b; border-radius: 4px; border: 1px solid #000; font-size: 1.1rem; }
.domino .moitie { padding: 2px 4px; }
.domino .moitie + .moitie { border-left: 1px solid #000; }
.main-dominos { display: flex; flex-wrap: wrap; gap: 8px; }
.domino-choix { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.55; }
.domino-choix.jouable { opacity: 1; }
.terrain { position: relative; height: 40px; background: #2f6b3f; border: 2px solid #f5f0e6; border-radius: 6px; margin: 6px 0; }
.terrain .but { position: absolute; top: 8px; bottom: 8px; width: 8px; background: rgba(255,255,255,0.7); }
.terrain .but.gauche { left: 0; } .terrain .but.droite { right: 0; }
.terrain .balle { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #f5f0e6; border: 2px solid #1b1b1b; transition: left 0.4s; }
.bf-choix .btn { flex: 1; min-width: 90px; }
.note.but { color: var(--or-clair); font-weight: 700; }
.arbre-souvenir img { width: 96px; border-radius: 6px; display: block; margin: 4px auto; }
.filtres-album { padding: 0 12px; }

/* ---------- tchat réduit : plus sur toute la largeur, calé à gauche avec les boutons ---------- */
.hud-bas { right: auto; width: min(calc(100% - 12px), 420px); }
.journal { max-height: 28vh; }

/* ---------- vocal : choix du micro et vu-mètre ---------- */
.micro-choix { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 6px; }
.champ-select { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--or-sombre); background: rgba(13,18,32,0.9); color: var(--creme); font-size: 15px; max-width: 100%; }
.vu-metre { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.08); border: 1px solid var(--marine-clair); overflow: hidden; }
.vu-metre .niveau { height: 100%; width: 0; background: linear-gradient(90deg, #2e8b57, #f1d97a 70%, #ff6b35); transition: width 0.08s linear; }

/* ---------- appuyer pour parler, classement Elo ---------- */
.ptt { width: 100%; height: 52px; border-radius: 26px; border: 2px solid var(--or); background: rgba(13,18,32,0.9); color: var(--creme); font-size: 16px; font-weight: 700; touch-action: none; }
.ptt.actif { background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #2a1f05; }
.grille.elo { align-items: flex-start; }
.elo-jeu { flex: 1; min-width: 140px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 8px 10px; }
.elo-jeu ol { margin: 4px 0 0; padding-left: 18px; font-size: 0.9rem; }

/* ---------- vocal : volume par membre, qui parle ; horloge d'échecs ---------- */
.liste-voix { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.voix-membre { display: flex; align-items: center; gap: 8px; }
.voix-membre .puce.parle { box-shadow: 0 0 0 2px var(--or-clair), 0 0 12px var(--or-clair); }
.volume-membre { flex: 1; min-width: 80px; accent-color: var(--or); }
.duel.horloge { font-variant-numeric: tabular-nums; font-size: 1.1rem; }

/* ---------- instruments, diagnostic vocal ---------- */
.clavier { display: flex; gap: 2px; padding: 8px 12px; overflow-x: auto; }
.touche { flex: 0 0 34px; height: 96px; border-radius: 0 0 6px 6px; border: 1px solid #333; background: #f5f0e6; color: #444; font-size: 0.7rem; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; touch-action: manipulation; }
.touche.noire { flex-basis: 24px; height: 60px; margin: 0 -13px; z-index: 2; background: #1b1b1b; border-color: #000; }
.touche.actif { background: var(--or-clair); }
.touche.noire.actif { background: #6a5a1a; }
.frettes { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; padding: 8px 12px; }
.frette { height: 44px; border-radius: 6px; border: 1px solid var(--or-sombre); background: #5c3d2e; color: var(--creme); font-size: 0.75rem; touch-action: manipulation; }
.frette.repere { border-color: var(--or); }
.frette.actif { background: var(--or); color: #2a1f05; }
.pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px 12px; }
.pad { height: 84px; border-radius: 50%; border: 3px solid var(--or); background: radial-gradient(circle, #d9bf94, #8c6d4a); color: #2a1f05; font-weight: 700; font-size: 1.1rem; touch-action: manipulation; }
.pad.actif { background: radial-gradient(circle, #fff, #d4af37); }
.diag-voix { padding: 0 12px; }
.note.alerte { color: #ffb4a2; }

/* ---------- menu principal : jamais hors champ, contenu qui défile ---------- */
.feuille.menu.principal { max-height: calc(100dvh - 8px - var(--safe-haut)); }
.menu-corps { overflow-y: auto; min-height: 0; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.menu-corps .menu-item { width: 100%; }


/* =====================================================================
   FAMILLE TCG — la table de cartes. Tout tient dans la fenêtre de jeu
   (flottante et redimensionnable comme les autres) ; sur téléphone la
   table défile, les cartes restent lisibles au pouce.
   ===================================================================== */
.feuille.jeu.tcg-fenetre { max-height: 92dvh; }
@media (min-width: 700px) { .feuille.jeu.tcg-fenetre { width: min(760px, 92vw); } }
.tcg { display: flex; flex-direction: column; gap: 6px; position: relative; }
.tcg-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--marine-clair); padding-bottom: 6px; }
.tcg-tour { font-family: var(--titre); font-size: 0.85rem; color: var(--creme-sombre); }
.tcg-tour.actif { color: var(--or-clair); }
.tcg-mana-txt { margin-left: auto; color: #8fc7ff; font-size: 0.85rem; }

.tcg-hero { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #101830; border: 1px solid var(--marine-clair); border-radius: 10px; padding: 6px 8px; position: relative; }
.tcg-hero.moi { border-color: var(--or-sombre); }
.tcg-hero.ciblable { border-color: var(--rouge); box-shadow: 0 0 0 2px rgba(192,57,43,0.4); cursor: pointer; }
.tcg-hero-nom { font-family: var(--titre); color: var(--or); font-size: 0.85rem; flex: 1; min-width: 80px; }
.tcg-badge { font-size: 0.72rem; padding: 2px 7px; border-radius: 10px; background: #0b1224; border: 1px solid var(--marine-clair); white-space: nowrap; }
.tcg-badge.hp { color: #ff9e9e; }
.tcg-badge.mana { color: #8fc7ff; }
.tcg-badge.deck { color: var(--creme-sombre); }
.tcg-badge.deck.fini { color: #9be0a8; border-color: #2f6b3f; }

.tcg-board { display: flex; gap: 5px; min-height: calc(var(--cw-plateau) * 1.5 + 8px); padding: 4px; border-radius: 10px; background: rgba(255,255,255,0.02); overflow-x: auto; align-items: flex-start; }
.tcg-board.opp { border-top: 2px solid rgba(192,57,43,0.35); }
.tcg-board.moi { border-bottom: 2px solid rgba(212,175,55,0.35); }
.tcg-board .note { margin: auto; }
.tcg-terrains { display: flex; gap: 6px; align-items: center; }
.tcg-terrain { flex: 1; min-width: 0; }
.tcg-terrain.vide { font-size: 0.7rem; color: var(--creme-sombre); font-style: italic; text-align: center; padding: 4px; border: 1px dashed var(--marine-clair); border-radius: 8px; }
.tcg-sep { width: 1px; align-self: stretch; background: var(--marine-clair); }
.tcg-main { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 8px; -webkit-overflow-scrolling: touch; }
.tcg-ligne { display: flex; gap: 4px; overflow-x: auto; }
.tcg-revele { border: 1px dashed var(--or-sombre); border-radius: 8px; padding: 4px; }
.tcg-ciblage { background: rgba(192,57,43,0.18); border: 1px solid var(--rouge); border-radius: 8px; padding: 6px 8px; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.tcg-actions .puce.injouable { opacity: 0.45; }
.tcg-journal { max-height: 90px; overflow-y: auto; font-size: 0.75rem; color: var(--creme-sombre); border-top: 1px solid var(--marine-clair); padding-top: 4px; }
.tcg-places { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tcg-place.pris { color: var(--creme); }
.tcg-select { width: 100%; background: #0f1629; color: var(--creme); border: 1px solid var(--marine-clair); border-radius: 8px; padding: 8px; font-family: var(--texte); margin-bottom: 10px; }

/* --- la carte ---
   Tout est en em : la police de base de la carte vaut un dixième de sa largeur (--cw),
   si bien qu'une carte plus grande grossit d'un bloc, texte compris. Le texte trop long
   est ajusté par ui/tcg.ts (ajusterCarte) : il ne déborde jamais.
   Chaque famille a sa couleur, loin des autres sur le cercle des couleurs, un bandeau
   en haut et un badge avec son signe (◆ ● ▲ ■ ★ ⌂ ✦) pour qui voit mal les couleurs. */
.tcg { --cw-plateau: 100px; --cw-main: 110px; --cw-petite: 90px; }
@media (min-width: 700px) { .tcg { --cw-plateau: 116px; --cw-main: 124px; --cw-petite: 100px; } .tcg-2v2 { --cw-plateau: 100px; } }
.tcg-board .tcgc { --cw: var(--cw-plateau); }
.tcg-main .tcgc { --cw: var(--cw-main); }
.tcgc { --cw: 100px; --fam: #9aa3b2; --fam-haut: #4a4f5c; --fam-bas: #1c1f26; --encre: #f5f0e6; --encre-nom: #fff4d6; --ombre: 0 1px 2px rgba(0,0,0,0.9); --panneau: rgba(0,0,0,0.42);
  position: relative; width: var(--cw); min-width: var(--cw); height: calc(var(--cw) * 1.5); flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 0.6em 0.35em 0.35em;
  border-radius: 0.8em; border: 2px solid var(--marine-clair); background: linear-gradient(180deg, var(--fam-haut), var(--fam-bas));
  font-size: calc(var(--cw) / 10); line-height: 1.15; color: var(--encre); overflow: hidden; cursor: pointer; }
.tcgc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0.32em; background: var(--fam); }
.tcgc.petite { --cw: var(--cw-petite, 90px); }
.tcgc.r-commune { border-color: #8a94a6; }
.tcgc.r-rare { border-color: #5aa0e6; }
.tcgc.r-epique { border-color: #b98af0; }
.tcgc.r-legendaire { border-color: var(--or); box-shadow: inset 0 0 1.2em rgba(241,217,122,0.35); }
/* Kerkache rouge, Belgacemi orange, Kaddour parchemin clair, Meridja vert,
   Terrain turquoise rayé, Marouf bleu, Sort violet (Neutre, les jetons, reste gris) */
.tcgc.f-Kerkache { --fam: #ef5467; --fam-haut: #a3192f; --fam-bas: #410812; }
.tcgc.f-Belgacemi { --fam: #ff9838; --fam-haut: #b8560f; --fam-bas: #4a1e04; }
.tcgc.f-Kaddour { --fam: #b8901c; --fam-haut: #f6ead0; --fam-bas: #d8bf80; --encre: #2b1f08; --encre-nom: #3a2605; --ombre: none; --panneau: rgba(255,255,255,0.55); }
.tcgc.f-Meridja { --fam: #45cc6f; --fam-haut: #187a3a; --fam-bas: #082e15; }
.tcgc.f-Terrain { --fam: #3fd6d0; --fam-haut: #0f6f74; --fam-bas: #052b2e; }
.tcgc.f-Terrain { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 0.35em, transparent 0.35em 0.9em), linear-gradient(180deg, var(--fam-haut), var(--fam-bas)); }
.tcgc.f-Marouf { --fam: #4f94ff; --fam-haut: #1d4bb0; --fam-bas: #0a1b47; }
.tcgc.f-Sort { --fam: #c27cff; --fam-haut: #6a2aa0; --fam-bas: #260d3d; }
.tcgc-cout { position: absolute; left: 0.25em; top: 0.5em; font-size: 1.05em; width: 1.6em; height: 1.6em; border-radius: 50%; background: #1b4a82; border: 1px solid #8fc7ff; color: #eaf5ff; display: flex; align-items: center; justify-content: center; font-weight: bold; z-index: 1; }
.tcgc-cout.change { background: #7a4a12; border-color: var(--or-clair); color: var(--or-clair); }
.tcgc-pouvoir { position: absolute; right: 0.3em; top: 0.55em; font-size: 0.95em; }
.tcgc-nom { font-family: var(--titre); font-weight: 700; font-size: 0.95em; padding: 0 2px; color: var(--encre-nom); text-shadow: var(--ombre); text-align: center; margin: 0 calc(var(--cw) * 0.19 - 2px); line-height: 1.08; height: calc(var(--cw) * 0.22); flex: 0 0 auto; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; overflow: hidden; }
.tcgc-nom > span { margin: auto 0; }
.tcgc-art { font-size: 2.3em; line-height: 1.1; flex: 0 0 auto; }
.tcgc.serre .tcgc-art { font-size: 1.45em; }
.tcgc.tres-serre .tcgc-art { display: none; }
.tcgc-fam { font-size: 0.62em; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; background: var(--fam); color: #10131c; border-radius: 1em; padding: 0.05em 0.6em; white-space: nowrap; max-width: 100%; overflow: hidden; flex: 0 0 auto; }
.tcgc-txt { flex: 1 1 0; min-height: 0; width: 100%; font-size: 0.92em; line-height: 1.16; text-align: center; overflow: hidden; color: var(--encre);
  background: var(--panneau); border-radius: 0.45em; padding: 0.2em 0.25em; display: flex; flex-direction: column; overflow-wrap: break-word; hyphens: auto; }
/* centré quand il est court, collé en haut s'il remplit tout (les marges auto ne débordent pas) */
.tcgc-txt > span { margin: auto 0; }
.tcgc-mots { display: flex; gap: 0.2em; flex-wrap: wrap; justify-content: center; flex: 0 0 auto; }
.tcgc-mots i { font-style: normal; font-size: 0.62em; background: rgba(0,0,0,0.5); border: 1px solid var(--or-sombre); color: var(--or-clair); border-radius: 0.6em; padding: 0 0.4em; }
.tcgc-pied { display: flex; align-items: center; justify-content: space-between; width: 100%; flex: 0 0 auto; }
.tcgc-pied i { font-style: normal; font-weight: bold; font-size: 1.15em; min-width: 1.6em; line-height: 1.5; text-align: center; border-radius: 0.8em; background: rgba(0,0,0,0.6); padding: 0 0.25em; }
.tcgc-pied .atk { color: #ffcf8a; }
.tcgc-pied .atk.buff { color: #9be0a8; }
.tcgc-pied .pv { color: #ff9e9e; }
.tcgc-pied .pv.blesse { color: #ff5a4a; }
.tcgc-pied .pv.buff { color: #9be0a8; }
.tcgc-pied .type { color: var(--or-clair); font-size: 0.72em; letter-spacing: 0.08em; margin: 0 auto; }
.tcgc-qty { position: absolute; right: 0.3em; bottom: 0.3em; font-size: 0.7em; color: var(--creme); background: rgba(0,0,0,0.6); border-radius: 0.6em; padding: 0 0.4em; }
.tcgc-deck { position: absolute; left: 0; right: 0; bottom: 0; font-size: 0.7em; text-align: center; background: rgba(13,18,32,0.85); color: var(--or-clair); }
.tcgc.jouable { box-shadow: 0 0 0 2px rgba(155,224,168,0.55); }
.tcgc.injouable { opacity: 0.5; }
.tcgc.pret { box-shadow: 0 0 0 2px rgba(155,224,168,0.6); }
.tcgc.epuise { opacity: 0.55; }
.tcgc.gelee { filter: saturate(0.4) brightness(1.1); box-shadow: inset 0 0 12px rgba(140,200,255,0.5); }
.tcgc.silencieuse { filter: grayscale(0.6); }
.tcgc.selection { outline: 2px solid var(--or); outline-offset: 1px; }
.tcgc.ciblable { box-shadow: 0 0 0 2px rgba(192,57,43,0.8); }
.tcgc.rejetee { opacity: 0.35; transform: translateY(6px) rotate(-3deg); }
.tcgc.epuisee { opacity: 0.4; }
.tcgc.retournee { background: repeating-linear-gradient(45deg, #17203a, #17203a 6px, #1d2a4a 6px, #1d2a4a 12px); }
.tcgc.retournee > *, .tcgc.retournee::before { visibility: hidden; }
.tcgc.secoue { animation: tcg-secoue 0.3s; }
@keyframes tcg-secoue { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.tcg-fx { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: bold; font-size: 0.95rem; pointer-events: none; animation: tcg-monte 1.05s ease-out forwards; z-index: 5; text-shadow: 0 1px 2px #000; }
.tcg-fx.degat { color: #ff7a6a; }
.tcg-fx.soin { color: #9be0a8; }
.tcg-fx.buff { color: var(--or-clair); }
@keyframes tcg-monte { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -26px); } }
.tcg-annonce { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); background: rgba(13,18,32,0.92); border: 1px solid var(--or); color: var(--or-clair); border-radius: 10px; padding: 8px 14px; font-family: var(--titre); z-index: 9; pointer-events: none; animation: tcg-annonce 1.6s ease-out forwards; }
@keyframes tcg-annonce { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); } 15%,70% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -10px) scale(1.05); } }

/* --- collection, decks, boosters --- */
.tcg-collection .feuille-corps { max-height: 78dvh; overflow-y: auto; }
.tcg-grille { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; }
.tcg-decks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tcg-deck { display: flex; align-items: center; gap: 4px; border: 1px solid var(--marine-clair); border-radius: 8px; padding: 2px 4px; }
.tcg-deck.actif { border-color: var(--or); }
.tcg-deck-nom { background: none; border: 0; color: var(--creme); font-family: var(--texte); font-size: 0.85rem; padding: 6px; }
.tcg-deck-liste { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.tcg-mini { background: #0f1629; border: 1px solid var(--marine-clair); border-left-width: 4px; color: var(--creme); border-radius: 6px; padding: 5px 8px; font-size: 0.78rem; }
.tcg-mini.r-commune { border-left-color: #6d7a90; }
.tcg-mini.r-rare { border-left-color: #4a8fd0; }
.tcg-mini.r-epique { border-left-color: #9a6fd0; }
.tcg-mini.r-legendaire { border-left-color: var(--or); }

/* la carte en grand (appui long) : tout le texte, lisible */
.voile.tcg-zoom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 40; }
.tcgc.grande { --cw: min(250px, 66vw); cursor: default; }
.tcgc.grande .tcgc-txt { font-size: 0.66em; line-height: 1.28; padding: 0.4em 0.5em; }
.tcgc.grande .tcgc-mots i { font-size: 0.5em; }
.tcgc.grande .tcgc-fam { font-size: 0.5em; }

/* --- la boutique d'Alphred --- */
.boutique .feuille-corps { max-height: 76dvh; overflow-y: auto; }
.alphred-dit { font-style: italic; color: var(--or-clair); border-left: 3px solid var(--or-sombre); padding-left: 10px; margin: 0 0 10px; }
.boutique-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--marine-clair); }
.boutique-ligne.indispo { opacity: 0.5; }
.boutique-icone { font-size: 1.5rem; width: 30px; text-align: center; flex: 0 0 auto; }
.boutique-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.boutique-texte b { color: var(--creme); font-size: 0.9rem; }
.boutique-texte .meta { font-size: 0.75rem; color: var(--creme-sombre); font-style: italic; }
.boutique-ligne .puce { flex: 0 0 auto; white-space: nowrap; }

/* anniversaire : le jour au clavier, le mois dans une liste */
.champ-anniv { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.champ-anniv .champ { flex: 0 0 96px; margin: 0; }
.champ-anniv .select-role { flex: 1; min-width: 0; }
.champ-anniv input.faux { border-color: var(--rouge); color: #e08a80; }

/* --- le sac : gros boutons, lisibles au pouce comme à la souris --- */
.sac .feuille-corps { max-height: 76dvh; overflow-y: auto; }
.sac-bourse { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sac-monnaie { font-family: var(--titre); font-size: 0.95rem; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--marine-clair); background: #0f1629; }
.sac-monnaie.kc { color: var(--or-clair); border-color: var(--or-sombre); }
.sac-monnaie.jetons { color: #8fc7ff; border-color: #2e5d8c; }
.sac-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sac-objet { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  background: linear-gradient(180deg, #16203c, #0d1424); border: 2px solid var(--marine-clair); border-radius: 12px;
  padding: 12px 8px 10px; color: var(--creme); font-family: var(--texte); min-height: 132px; }
.sac-objet.actif { border-color: var(--or); box-shadow: inset 0 0 14px rgba(212,175,55,0.22); }
.sac-icone { font-size: 2rem; line-height: 1.1; }
.sac-nom { font-family: var(--titre); color: var(--or-clair); font-size: 0.85rem; }
.sac-n { position: absolute; top: 6px; right: 8px; font-size: 0.75rem; color: var(--creme-sombre); background: rgba(0,0,0,0.45); border-radius: 8px; padding: 0 6px; }
.sac-desc { font-size: 0.7rem; color: var(--creme-sombre); font-style: italic; line-height: 1.15; }
.sac-quoi { margin-top: auto; font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--or); }

/* --- l'arme en main --- */
.arme-barre { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--safe-bas)); z-index: 7;
  display: flex; align-items: center; gap: 10px; background: rgba(13,18,32,0.92); border: 1px solid var(--or-sombre);
  border-radius: 12px; padding: 7px 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
.arme-barre.cache { display: none; }
.arme-nom { font-family: var(--titre); color: var(--or-clair); font-size: 0.85rem; white-space: nowrap; }
.arme-balles { font-family: var(--titre); font-size: 1rem; color: var(--creme); min-width: 66px; text-align: center; }
.arme-balles.vide { color: var(--rouge); }
@media (max-width: 560px) { .arme-nom { display: none; } .arme-barre { gap: 6px; padding: 6px 8px; } }

/* --- garnir un cadeau : un champ de Kc lisible au pouce --- */
.champ-kc { width: 100%; box-sizing: border-box; font-family: var(--titre); font-size: 1.1rem; text-align: center;
  padding: 10px; border-radius: 10px; border: 2px solid var(--marine-clair); background: #0f1629; color: var(--or-clair); }
.champ-kc:focus { outline: none; border-color: var(--or); }

/* ---------- troc ---------- */
.troc-plateau { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.troc-col { border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 8px; padding: 6px 8px; min-height: 64px; }
.troc-col.valide { border-color: #7fbf7f; box-shadow: 0 0 0 1px #7fbf7f inset; }
.troc-ligne { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 0; }
.troc-kc { display: flex; gap: 6px; margin: 6px 0; }
.troc-kc input { flex: 1; min-width: 0; }

/* ---------- comptoir des jetons (chez Alphred) ---------- */
.comptoir { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 8px; }
.comptoir-article { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 6px 8px; border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 8px; }
.comptoir-article.possede { opacity: 0.75; }
.comptoir-article b { font-size: 0.9em; }
.comptoir-apercu { display: block; width: 100%; height: 28px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.2); }
.comptoir-rayon { margin: 6px 0 2px; }

/* ---------- casino (0.9) : animations seulement dans la fenêtre, jamais dans le salon ---------- */
.casino-bourse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-bottom: 8px; color: var(--or-clair); }
.casino-mises { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.casino-mises .puce { min-height: 34px; padding: 2px 10px; }
.casino-verdict { text-align: center; font-family: var(--titre); font-size: 1.15rem; margin: 6px 0; min-height: 1.4em; }
.casino-verdict.gagne { color: var(--or-clair); }
.casino-bareme summary { cursor: pointer; color: var(--creme-sombre); margin-top: 6px; }
.casino-bareme div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bandit-rouleaux { display: flex; justify-content: center; gap: 8px; margin: 10px 0 4px; }
.bandit-rouleau { width: 64px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: var(--creme); border: 3px solid var(--or); border-radius: 10px; box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.35); }
.bandit-rouleau.tourne { transform: translateY(2px); opacity: 0.85; }
.roue-cadre { position: relative; width: 240px; height: 240px; margin: 14px auto 4px; }
.roue { width: 240px; height: 240px; border-radius: 50%; border: 5px solid var(--or); position: relative; }
.roue-case { position: absolute; left: 50%; top: 0; height: 50%; transform-origin: 50% 100%; margin-left: -12px; width: 24px; text-align: center; padding-top: 10px; font-weight: bold; color: var(--creme); font-size: 0.85rem; }
.roue-case.sombre { color: #1a2340; }
.roue-fleche { position: absolute; left: 50%; top: -10px; margin-left: -10px; z-index: 1; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid var(--or-clair); }
.roulette-etat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.roulette-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--titre); font-size: 1.2rem; border: 2px solid var(--or); }
.roulette-num.rouge, .rcase.rouge, .roulette-mini.rouge { background: #b3122e; color: #fff; }
.roulette-num.noir, .rcase.noir, .roulette-mini.noir { background: #1e1e1e; color: #fff; }
.roulette-num.vert, .rcase.vert, .roulette-mini.vert { background: #0b6b3f; color: #fff; }
.roulette-num.tourne { animation: roulette-tourne 0.6s linear infinite; }
@keyframes roulette-tourne { to { transform: rotate(360deg); } }
.roulette-histo { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.roulette-mini { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.roulette-tapis { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; background: #0b5d3b; padding: 4px; border-radius: 6px; border: 2px solid var(--or-sombre); }
.roulette-tapis .zero { grid-column: 1 / -1; }
.rcase { position: relative; min-height: 30px; padding: 0; font-size: 0.8rem; border: 1px solid rgba(245, 240, 230, 0.4); border-radius: 3px; }
.rcase:disabled { opacity: 0.7; }
.rcase.misee { outline: 2px solid var(--or-clair); }
.rcase i { position: absolute; right: -3px; top: -6px; background: var(--or); color: #1a2340; font-style: normal; font-size: 0.65rem; border-radius: 8px; padding: 0 4px; }
.roulette-simples { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: 2px; }
.rcase.simple { background: #0b5d3b; color: var(--creme); }
.rcase.simple.rouge { background: #b3122e; }
.rcase.simple.noir { background: #1e1e1e; }
.pachinko { position: relative; margin: 8px auto; background: linear-gradient(180deg, #26345e, #1a2340); border: 3px solid var(--or); border-radius: 10px; }
.clou { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--or-clair); }
.pachinko-case { position: absolute; height: 26px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; background: rgba(245, 240, 230, 0.12); border-radius: 4px; margin-left: 1px; }
.pachinko-case.haut { background: rgba(212, 175, 55, 0.5); color: #fff; font-weight: bold; }
.pachinko-case.bas { color: var(--creme-sombre); }
.bille { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #a9b4bc 60%, #4a545c); transition: left 0.13s ease-in, top 0.13s ease-in; }
.adresse-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin-bottom: 6px; }
.adresse-joueur { display: flex; flex-direction: column; padding: 4px 8px; border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 8px; }
.adresse-joueur.tour { border-color: var(--or-clair); box-shadow: 0 0 0 1px var(--or-clair) inset; }
.adresse-score { font-family: var(--titre); font-size: 1.4rem; color: var(--or-clair); }
.flechettes-cadre { display: flex; justify-content: center; margin: 6px 0; }
canvas.flechettes { width: 240px; height: 240px; touch-action: none; border-radius: 50%; }
.quilles { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; margin: 8px 0; }
.quilles div { display: flex; gap: 10px; }
.quille { width: 12px; height: 20px; border-radius: 6px 6px 4px 4px; background: #fff; border-top: 4px solid #c0392b; }
.quille.tombee { opacity: 0.15; }
.piste { position: relative; height: 26px; background: linear-gradient(90deg, #1e1e1e 0 6%, #d9b98a 6% 94%, #1e1e1e 94%); border-radius: 6px; margin: 6px 0; }
.piste-visee { position: absolute; top: 3px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #c0392b; border: 2px solid #fff; }
.jauge { position: relative; height: 14px; background: rgba(245, 240, 230, 0.15); border-radius: 7px; overflow: hidden; }
.jauge-plein { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2e7d32, #f1d97a, #c0392b); }
.jauge-ideal { position: absolute; left: 76%; width: 12%; top: 0; bottom: 0; border: 2px solid var(--or-clair); border-radius: 4px; }
.pcartes { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.pcarte { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 54px; background: #fdfbf5; color: #1b1b1b; border-radius: 5px; border: 1px solid #999; font-weight: bold; font-size: 1rem; }
.pcarte.rouge { color: #c0392b; }
.pcarte.dos { background: repeating-linear-gradient(45deg, #8c1d2b 0 4px, #6a1420 4px 8px); border-color: var(--or); }
.pcarte.vide { background: transparent; border: 1px dashed rgba(245, 240, 230, 0.3); }
.pcartes.petites .pcarte { width: 28px; height: 40px; font-size: 0.8rem; }
.bj-croupier { text-align: center; padding: 6px; background: #0b5d3b; border-radius: 8px; border: 2px solid var(--or-sombre); }
.bj-croupier .pcartes { justify-content: center; }
.bj-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin: 8px 0; }
.bj-siege { padding: 6px; border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 8px; }
.bj-siege.vide { opacity: 0.4; text-align: center; }
.bj-siege.moi { border-color: var(--or-clair); }
.bj-main { margin-top: 4px; padding: 2px 4px; border-radius: 6px; }
.bj-main.active { background: rgba(212, 175, 55, 0.18); }
.bj-resultat { display: inline-block; margin-left: 4px; font-weight: bold; }
.bj-resultat.gagne { color: var(--or-clair); }
.pk-tapis { text-align: center; padding: 8px; background: radial-gradient(ellipse at center, #127a4f, #0b5d3b 70%); border-radius: 50px; border: 4px solid #6b4a2b; }
.pk-tapis .pcartes { justify-content: center; }
.pk-pot { display: block; color: var(--or-clair); }
.pk-sieges { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin: 8px 0; }
.pk-siege { padding: 6px; border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.pk-siege.moi { border-color: var(--or-clair); }
.pk-siege.parle { box-shadow: 0 0 0 2px var(--or-clair) inset; }
.pk-siege.couche { opacity: 0.5; }
.pk-bouton { display: inline-block; margin-left: 6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #1a2340; font-size: 0.7rem; text-align: center; line-height: 18px; font-weight: bold; }
.pk-geste { font-size: 0.8rem; color: var(--or-clair); font-style: italic; }
.pk-relance { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pk-relance input { flex: 1; min-width: 0; }

/* ---------- So Clover! ---------- */
.sc-plateau { display: grid; grid-template-columns: 26px auto auto 26px; grid-template-rows: 26px auto auto 26px; gap: 4px; justify-content: center; margin: 8px auto; }
.sc-indice { display: flex; align-items: center; justify-content: center; background: #1f6b3a; color: #f5f0e6; border-radius: 13px; font-family: var(--titre); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.sc-indice i { font-style: normal; }
.sc-indice.haut { grid-column: 2 / 4; grid-row: 1; }
.sc-indice.bas { grid-column: 2 / 4; grid-row: 4; }
.sc-indice.droite { grid-column: 4; grid-row: 2 / 4; }
.sc-indice.gauche { grid-column: 1; grid-row: 2 / 4; }
.sc-indice.droite i { writing-mode: vertical-rl; }
.sc-indice.gauche i { writing-mode: vertical-rl; transform: rotate(180deg); }
.sc-plateau .e0 { grid-column: 2; grid-row: 2; }
.sc-plateau .e1 { grid-column: 3; grid-row: 2; }
.sc-plateau .e2 { grid-column: 3; grid-row: 3; }
.sc-plateau .e3 { grid-column: 2; grid-row: 3; }
.sc-carte, .sc-vide { position: relative; width: 112px; height: 112px; min-height: 0; padding: 0; border-radius: 10px; }
.sc-carte { background: #fdfbf5; color: #6f6a5c; border: 2px solid #2e7d32; font-family: var(--texte); }
.sc-carte.libre { color: #1b1b1b; }
.sc-carte.sel { border-color: var(--or); box-shadow: 0 0 0 3px var(--or-clair); }
.sc-carte.verrou { border-color: #1f6b3a; background: #e3f3e3; }
.sc-carte.verrou::after { content: '🔒'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1rem; }
.sc-vide { background: rgba(245, 240, 230, 0.08); border: 2px dashed rgba(245, 240, 230, 0.4); color: var(--creme-sombre); font-size: 1.4rem; }
.sc-vide.cible { border-color: var(--or-clair); color: var(--or-clair); }
.sc-m { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 10.5px; line-height: 1; white-space: nowrap; }
.sc-m i { font-style: normal; }
.sc-m.ext { color: #14401f; font-weight: bold; }
.sc-m.h { top: 4px; left: 0; right: 0; }
.sc-m.b { bottom: 4px; left: 0; right: 0; }
.sc-m.d { right: 4px; top: 0; bottom: 0; }
.sc-m.g { left: 4px; top: 0; bottom: 0; }
.sc-m.d i { writing-mode: vertical-rl; }
.sc-m.g i { writing-mode: vertical-rl; transform: rotate(180deg); }
.sc-reserve { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.sc-duo { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.sc-duo input { text-transform: uppercase; }
.sc-reglage { margin: 4px 0; }
.sc-gestes .btn { flex: 1; }
.sc-appreciation { text-align: center; font-family: var(--titre); font-size: 1.1rem; color: var(--or-clair); margin: 4px 0 10px; }
.sc-legendes, .sc-regles { margin: 8px 0; }
.sc-legendes summary, .sc-regles summary { cursor: pointer; color: var(--creme-sombre); }

/* ---------- appareils du salon (portable, tablette) et Nassim's Playground ---------- */
.appareil-voile { position: absolute; inset: 0; z-index: 40; background: rgba(5, 8, 16, 0.72); display: flex; align-items: center; justify-content: center; padding: 12px; }
.appareil { width: min(960px, 100%); height: min(680px, 100%); display: flex; flex-direction: column; background: #0d1220; overflow: hidden; }
.appareil.portable { border: 6px solid #b8bec8; border-bottom-width: 14px; border-radius: 12px 12px 6px 6px; }
.appareil.tablette { border: 10px solid #1b1b1b; border-radius: 22px; }
.appareil.telephone { width: min(420px, 100%); border: 10px solid #151515; border-radius: 34px; }
.appareil.grand, .appareil:fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; z-index: 60; }
.appareil-barre { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: #1a2340; border-bottom: 1px solid rgba(212, 175, 55, 0.4); }
.appareil-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--titre); color: var(--or-clair); font-size: 0.95rem; }
.appareil-ecran { flex: 1; min-height: 0; position: relative; overflow: auto; -webkit-overflow-scrolling: touch; }
.appareil-ecran.accueil { display: flex; flex-direction: column; align-items: center; padding: 24px 16px; background: radial-gradient(circle at 50% 20%, #26345e, #0d1220 75%); }
.appareil-heure { font-family: var(--titre); font-size: 3rem; color: var(--creme); }
.appareil-salut { color: var(--creme-sombre); margin: 0 0 24px; }
.appareil-applis { display: grid; grid-template-columns: repeat(auto-fit, 96px); justify-content: center; gap: 14px; width: 100%; max-width: 520px; }
.appli { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--creme); padding: 4px; }
.appli-icone { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; border-radius: 18px; background: linear-gradient(135deg, #6a4c93, #d4af37); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.appli-nom { font-size: 0.8rem; text-align: center; }
.appli { position: relative; }
.appli.bientot .appli-icone { filter: grayscale(0.8); opacity: 0.55; }
.appli-badge { position: absolute; top: 0; right: 4px; font-size: 0.6rem; background: var(--or); color: #1a1405; border-radius: 8px; padding: 1px 6px; }
.appareil-ecran.web { display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px; background: radial-gradient(circle at 50% 10%, #26345e, #0d1220 70%); }
.web-boite { width: 100%; max-width: 440px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.web-logo { font-size: 3rem; }
.web-boite h2 { margin: 0; font-family: var(--titre); color: var(--or-clair); }
.web-champ { width: 100%; padding: 12px 16px; border-radius: 24px; border: 1px solid rgba(212, 175, 55, 0.5); background: rgba(13, 18, 32, 0.9); color: var(--creme); font: inherit; font-size: 1rem; }
.web-go { text-align: center; }
.pg-lobbies { margin-bottom: 12px; }
.pg-lobbies h3 { margin: 0 0 6px; font-family: var(--titre); color: var(--or-clair); font-size: 1rem; }
.pg-lobby { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(46, 204, 113, 0.6); background: rgba(16, 60, 40, 0.55); color: var(--creme); text-align: left; }
.pg-lobby-ico { font-size: 1.8rem; }
.pg-lobby-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pg-lobby-txt small { color: var(--creme-sombre); }
.pg-lobby-go { color: #7dffb0; font-weight: bold; white-space: nowrap; }
.appareil-ecran.pg { padding: 12px; background: linear-gradient(180deg, #2a1f4a, #0d1220 220px); }
.pg-entete h2 { margin: 0; font-family: var(--titre); color: var(--or-clair); }
.pg-entete p { margin: 2px 0 10px; }
.pg-vide { text-align: center; padding: 40px 10px; color: var(--creme-sombre); font-size: 1.1rem; }
.pg-recherche { width: 100%; margin: 4px 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(13, 18, 32, 0.9); color: var(--creme); font: inherit; }
.pg-recherche::placeholder { color: var(--creme-sombre); }
.pg-reprendre { width: 100%; margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--or); background: rgba(212, 175, 55, 0.15); color: var(--or-clair); text-align: left; }
.pg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pg-jeu { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 0 0 8px; text-align: left; border-radius: 14px; border: 1px solid rgba(212, 175, 55, 0.3); background: rgba(20, 28, 54, 0.9); color: var(--creme); overflow: hidden; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.pg-jeu:hover { transform: translateY(-2px); border-color: var(--or-clair); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.pg-jeu:active { transform: scale(0.98); border-color: var(--or-clair); }
.pg-fond { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 0.8; background: linear-gradient(150deg, #26345e, #6a4c93); overflow: hidden; }
.pg-fond::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 12px); pointer-events: none; }
.pg-icone { font-size: 3.6rem; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.pg-vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.pg-genre { position: absolute; top: 6px; right: 6px; z-index: 1; font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; background: rgba(0, 0, 0, 0.45); color: var(--creme); }
.pg-puce { position: absolute; left: 6px; bottom: 6px; z-index: 1; font-size: 0.7rem; padding: 2px 7px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); color: var(--or-clair); }
.pg-titre { font-weight: bold; padding: 0 9px; font-family: var(--titre); font-size: 0.95rem; line-height: 1.15; }
.pg-desc { padding: 0 9px; font-size: 0.74rem; color: var(--creme-sombre); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pg-puces { display: flex; gap: 6px; margin: 2px 0 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pg-puces::-webkit-scrollbar { display: none; }
.pg-puce-filtre { flex: none; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(20, 28, 54, 0.9); color: var(--creme); border-radius: 14px; padding: 4px 11px; font-size: 0.8rem; }
.pg-puce-filtre.actif { background: var(--or); color: #1a1405; border-color: var(--or); }
.appareil-ecran.jeu { overflow: hidden; background: #000; }
.pg-cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* borne d'arcade : on joue tout de suite, sous un fronton néon */
.appareil.arcade { border: 10px solid #1a1030; border-radius: 16px; box-shadow: 0 0 0 2px #ff2e93, 0 0 26px rgba(255, 46, 147, 0.55), 0 0 60px rgba(0, 229, 255, 0.25); background: #070510; }
.appareil.arcade .appareil-barre { background: linear-gradient(90deg, #2a0a4a, #0a2a4a); border-bottom: 2px solid #ff2e93; }
.appareil.arcade .appareil-titre { color: #7df9ff; text-shadow: 0 0 8px rgba(0, 229, 255, 0.8); letter-spacing: 0.06em; }
.appareil.arcade .appareil-ecran.pg { background: linear-gradient(180deg, #1c0b3a, #070510 260px); }
.appareil.arcade .pg-entete h2 { color: #ff6cb8; text-shadow: 0 0 10px rgba(255, 46, 147, 0.7); }
.appareil.arcade .pg-jeu { border-color: rgba(0, 229, 255, 0.4); }
.appareil.arcade .pg-jeu:hover { border-color: #ff6cb8; box-shadow: 0 0 16px rgba(255, 46, 147, 0.5); }
.appareil.arcade .appareil-ecran::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px); }
.appareil.arcade .appareil-ecran.jeu::before { display: none; }
@media (max-width: 640px) {
  .appareil-voile { padding: 0; }
  .appareil.arcade { box-shadow: none; }
  .appareil, .appareil.portable, .appareil.tablette, .appareil.telephone, .appareil.arcade { width: 100%; height: 100%; border-width: 0; border-radius: 0; padding-top: var(--safe-haut); padding-bottom: var(--safe-bas); }
}