/* ===================== GRIFFOPHONE 3D — habillage =====================
   Les couleurs sont celles du Griffophone (vert profond, menthe, corail, jaune,
   ciel) et les mêmes polices : on doit reconnaître la famille au premier coup
   d'œil. Ce qui change, c'est l'atelier — un vrai studio sombre, parce qu'un
   trait de couleur dans le vide ne se voit que sur du noir. */
:root{
  --paper:#0B4A32;
  --paper-alt:#0F5A3F;
  --card-bg:rgba(9,54,39,.55);
  --ink:#F3FFF8;
  --ink-soft:rgba(243,255,248,.74);
  --primary:#00E39B;
  --primary-dark:#049966;
  --coral:#FF4F81;
  --yellow:#FFC93C;
  --sky:#3FD1FF;
  --violet:#B98BFF;
  --border-soft:rgba(255,255,255,.22);
  --shadow: 0 20px 45px rgba(0,0,0,.4);
  --shadow-sm: 0 8px 20px rgba(0,0,0,.3);
  --radius: 26px;
  --radius-sm: 16px;
  --studio:#07100D;
  --font-display:'Baloo 2', ui-rounded, 'Nunito', sans-serif;
  --font-body:'Nunito', system-ui, -apple-system, sans-serif;
  --font-mono:'Space Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:#0B4A32;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(0,227,155,.35) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(63,209,255,.25) 0%, transparent 45%),
    linear-gradient(135deg, #062A20 0%, #0A4A34 45%, #0E8F5B 100%);
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment:fixed;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

/* ------------------------------- écrans ------------------------------- */
.ecran{display:none; max-width:820px; margin:0 auto; padding:18px 16px 40px;}
.ecran.active{display:block; animation:apparait .28s ease both;}
.ecran-plein.active{
  display:flex; flex-direction:column; max-width:none; width:100%;
  height:100dvh; padding:0; margin:0; overflow:hidden;
}
@keyframes apparait{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ------------------------------- entête ------------------------------- */
.entete{text-align:center; padding:16px 0 22px;}
.logo{
  font-family:var(--font-display); font-weight:800; font-size:clamp(34px,9vw,58px);
  margin:0; letter-spacing:1px; line-height:1;
  text-shadow:0 4px 0 rgba(0,0,0,.35);
}
.logo-3d{
  color:var(--paper); background:linear-gradient(135deg,var(--primary),var(--sky));
  padding:0 12px; border-radius:14px; display:inline-block;
  transform:perspective(300px) rotateY(-16deg) rotateX(6deg);
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
}
.accroche{color:var(--ink-soft); margin:14px auto 0; max-width:520px; line-height:1.5;}

/* ------------------------------- cartes ------------------------------- */
.carte{
  background:var(--card-bg); border:2px solid var(--border-soft); border-radius:var(--radius);
  padding:20px; margin:0 0 16px; box-shadow:var(--shadow-sm); backdrop-filter:blur(6px);
}
.titre-griffe{
  font-family:var(--font-display); font-size:22px; margin:0 0 14px; display:flex;
  align-items:center; gap:10px;
}
.titre-griffe::before{
  content:""; width:22px; height:22px; flex:none;
  background:
    linear-gradient(115deg, transparent 42%, var(--primary) 42%, var(--primary) 52%, transparent 52%),
    linear-gradient(115deg, transparent 62%, var(--coral) 62%, var(--coral) 72%, transparent 72%),
    linear-gradient(115deg, transparent 82%, var(--yellow) 82%, var(--yellow) 92%, transparent 92%);
}
.titre-gros{font-size:30px; justify-content:center;}
.sous-titre{text-align:center; color:var(--ink-soft); margin:-6px 0 18px;}
.compte{margin-left:auto; font-family:var(--font-mono); font-size:14px; color:var(--ink-soft);}
.etiq{display:block; font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-soft); margin:0 0 6px;}

/* ------------------------------- champs ------------------------------- */
.champ{
  width:100%; padding:13px 16px; border-radius:var(--radius-sm);
  border:2px solid var(--border-soft); background:rgba(0,0,0,.28); color:var(--ink);
  font-family:var(--font-body); font-size:16px; font-weight:700; outline:none;
}
.champ:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(0,227,155,.18);}
.champ::placeholder{color:rgba(243,255,248,.35); font-weight:400;}
select.champ{appearance:none; cursor:pointer;}
.champ-code{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.28em; text-align:center;}
.rangee{display:flex; gap:10px; align-items:center; margin-top:12px;}
.rangee-centre{justify-content:center; flex-wrap:wrap;}
.separateur{display:flex; align-items:center; gap:12px; margin:16px 0 4px; color:var(--ink-soft); font-size:13px;}
.separateur::before,.separateur::after{content:""; flex:1; height:2px; background:var(--border-soft);}
.erreur{color:var(--coral); font-weight:700; min-height:20px; margin:10px 0 0; font-size:14px;}
.info{color:var(--ink-soft); font-size:14px; line-height:1.5;}
.info-centre{text-align:center;}

/* ------------------------------- boutons ------------------------------ */
.btn{
  font-family:var(--font-display); font-weight:700; font-size:17px; cursor:pointer;
  padding:12px 20px; border-radius:var(--radius-sm); border:2px solid var(--border-soft);
  background:rgba(255,255,255,.09); color:var(--ink); transition:transform .12s, filter .12s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{filter:brightness(1.15);}
.btn:active{transform:translateY(2px);}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn-primaire{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#06301F; border-color:transparent; box-shadow:0 5px 0 #036B47;
}
.btn-primaire:active{box-shadow:0 2px 0 #036B47;}
.btn-large{width:100%; padding:16px; font-size:20px; margin-top:6px;}
.btn-petit{padding:8px 13px; font-size:14px;}
.btn-icone{padding:10px 13px; font-size:18px; line-height:1;}
.btn-fantome{background:transparent; color:var(--ink-soft);}

/* ------------------------------ avatars ------------------------------ */
.avatars{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px;
  max-height:168px; overflow-y:auto; padding:8px; margin-bottom:16px;
  background:rgba(0,0,0,.2); border-radius:var(--radius-sm); border:2px solid var(--border-soft);
}
.avatar-choix{
  aspect-ratio:1; border-radius:12px; border:2px solid transparent; background:rgba(255,255,255,.07);
  cursor:pointer; padding:3px; overflow:hidden;
}
.avatar-choix img{width:100%; height:100%; object-fit:contain; display:block;}
.avatar-choix.choisi{border-color:var(--primary); background:rgba(0,227,155,.2); transform:scale(1.06);}

/* ---------------------------- cartes de mode ---------------------------- */
.cartes-mode{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:6px;}
.carte-mode{
  display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer;
  background:rgba(0,0,0,.25); border:2px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:16px; color:var(--ink); font-family:var(--font-body);
}
.carte-mode:hover{border-color:var(--primary); transform:translateY(-2px);}
.carte-mode b{font-family:var(--font-display); font-size:18px;}
.cm-emo{font-size:26px;}
.cm-txt{color:var(--ink-soft); font-size:13px; line-height:1.45;}
.pied{text-align:center; color:var(--ink-soft); font-size:13px; margin-top:22px;}
.pied a{color:var(--primary);}

/* -------------------------------- salon -------------------------------- */
.salon-haut{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px;}
.code-bloc{background:rgba(0,0,0,.3); border:2px dashed var(--primary); border-radius:var(--radius-sm); padding:12px 18px;}
.code-valeur{font-family:var(--font-mono); font-size:34px; letter-spacing:.22em; color:var(--primary); line-height:1.2;}
.joueurs{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px;}
.joueur-carte{
  display:flex; align-items:center; gap:9px; background:rgba(0,0,0,.25);
  border:2px solid var(--border-soft); border-radius:var(--radius-sm); padding:8px 10px; position:relative;
}
.joueur-carte.absent{opacity:.45;}
.joueur-avatar{width:34px; height:34px; object-fit:contain; flex:none;}
.joueur-nom{font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.joueur-nom i{color:var(--ink-soft); font-weight:400; font-size:13px;}
.etiq-hote{background:var(--yellow); color:#3A2B00; font-size:11px; font-weight:900; padding:2px 7px; border-radius:999px;}
.btn-virer{margin-left:auto; background:none; border:none; color:var(--coral); font-size:16px; cursor:pointer;}
.reglage{margin-bottom:16px;}
.reglage label{display:block; font-weight:700; margin-bottom:7px; font-size:15px;}
.reglage label b{color:var(--primary); font-family:var(--font-mono);}
input[type=range]{width:100%; accent-color:var(--primary);}
#salon-reglages.verrouille{opacity:.72;}

/* --------------------------- barre de jeu --------------------------- */
.barre-jeu{
  display:flex; align-items:center; gap:10px; padding:10px 14px; flex:none;
  background:rgba(0,0,0,.4); border-bottom:2px solid var(--border-soft);
}
.bj-gauche,.bj-droite{display:flex; align-items:center; gap:8px;}
.bj-droite{margin-left:auto;}
.pastille{
  background:rgba(255,255,255,.12); border-radius:999px; padding:6px 13px;
  font-family:var(--font-display); font-weight:700; font-size:14px; white-space:nowrap;
}
.pastille-douce{background:rgba(0,0,0,.3); color:var(--ink-soft); font-family:var(--font-mono); font-size:13px;}
.chrono{
  margin:0 auto; font-family:var(--font-mono); font-size:22px; font-weight:700;
  color:var(--primary); min-width:64px; text-align:center;
}
.chrono.urgent{color:var(--coral); animation:pulse .8s infinite;}
@keyframes pulse{50%{opacity:.45;}}
.consigne{
  padding:10px 16px; text-align:center; font-family:var(--font-display); font-size:17px;
  color:var(--ink-soft); flex:none;
}

/* Sur les écrans où l'on glisse le doigt pour sculpter ou tourner, la sélection
   de texte du navigateur ne fait que gêner : un geste raté surligne la moitié de
   la page. Les champs de saisie, eux, gardent leur comportement normal. */
#ecran-jeu, #ecran-revelation, #ecran-atelier, #ecran-passe{
  user-select:none; -webkit-user-select:none;
}
#ecran-jeu input, #ecran-revelation input{user-select:text; -webkit-user-select:text;}

/* ------------------------------- phases ------------------------------- */
.phase{display:none; flex:1; min-height:0; flex-direction:column; padding:0 14px 14px;}
.phase.active{display:flex;}
.source-bulle{
  background:linear-gradient(135deg, rgba(255,201,60,.22), rgba(255,79,129,.18));
  border:2px solid var(--yellow); border-radius:var(--radius-sm); padding:14px 18px;
  font-family:var(--font-display); font-size:clamp(17px,4.4vw,23px); text-align:center;
  margin:0 0 12px; flex:none; max-height:24vh; overflow:auto;
}
.source-bulle:empty{display:none;}
.saisie{display:flex; gap:8px; align-items:center; flex:none; padding-top:12px;}
.saisie .champ{flex:1;}
.viewer-hote{flex:1; min-height:0; border-radius:var(--radius-sm); overflow:hidden; position:relative;}
.atelier-hote{flex:1; min-height:0; position:relative; display:flex;}
.atelier-hote-plein{padding:0;}
.btn-valider-flottant{flex:none; margin-top:10px;}

/* ------------------------- le bloc atelier 3D ------------------------- */
.at-bloc{display:flex; flex-direction:column; width:100%; height:100%; gap:8px; min-height:0;}
.at-vue{
  flex:1; min-height:0; position:relative; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--studio); border:2px solid var(--border-soft); touch-action:none; cursor:crosshair;
}
.at-vue canvas{display:block; width:100%; height:100%;}
.at-vue.mode-tourner{cursor:grab;}
.at-vue.mode-tourner:active{cursor:grabbing;}
.at-aide{
  position:absolute; left:10px; bottom:10px; font-size:12px; color:rgba(255,255,255,.45);
  pointer-events:none; font-family:var(--font-mono); line-height:1.5;
}
.at-barre{display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:none;}
/* flex-wrap est indispensable : sur un téléphone, les 12 pastilles de couleur
   font plus large que l'écran et les dernières sortaient du cadre. */
.at-groupe{display:flex; flex-wrap:wrap; gap:4px; background:rgba(0,0,0,.35); padding:5px;
  border-radius:14px; border:2px solid var(--border-soft); max-width:100%;}
.at-btn{
  width:38px; height:38px; border-radius:10px; border:2px solid transparent; cursor:pointer;
  background:rgba(255,255,255,.08); color:var(--ink); font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
}
.at-btn:hover{background:rgba(255,255,255,.18);}
.at-btn.actif{border-color:var(--primary); background:rgba(0,227,155,.24);}
.at-coul{width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.3); cursor:pointer;}
.at-coul.actif{border-color:#fff; transform:scale(1.22); box-shadow:0 0 0 3px rgba(0,227,155,.5);}
.at-taille{display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; border:2px solid transparent; background:rgba(255,255,255,.08); cursor:pointer;}
.at-taille i{background:currentColor; border-radius:50%; display:block;}
.at-taille.actif{border-color:var(--primary); background:rgba(0,227,155,.24);}
.at-profondeur{display:flex; align-items:center; gap:8px; flex:1; min-width:150px;
  background:rgba(0,0,0,.35); border:2px solid var(--border-soft); border-radius:14px; padding:6px 12px;}
.at-profondeur span{font-size:12px; color:var(--ink-soft); white-space:nowrap; font-family:var(--font-mono);}
.at-profondeur input{flex:1;}

/* ------------------------------- attente ------------------------------- */
.attente{display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px;}
.attente.active{display:flex;}
.spin{width:54px; height:54px; border-radius:50%; border:6px solid rgba(255,255,255,.15);
  border-top-color:var(--primary); animation:tourne 1s linear infinite;}
@keyframes tourne{to{transform:rotate(360deg);}}
.attente p{font-family:var(--font-display); font-size:20px; margin:0; text-align:center;}
.attente-joueurs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:520px;}
.att-j{display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.3); border-radius:999px;
  padding:5px 12px 5px 5px; font-size:13px; font-weight:700; opacity:.4;}
.att-j img{width:26px; height:26px; object-fit:contain;}
.att-j.fini{opacity:1; background:rgba(0,227,155,.22);}

/* ---------------------------- passe l'appareil ---------------------------- */
#ecran-passe.active{display:flex; align-items:center; justify-content:center; min-height:100dvh;}
.passe-carte{
  text-align:center; background:var(--card-bg); border:2px solid var(--border-soft);
  border-radius:var(--radius); padding:34px 26px; box-shadow:var(--shadow); max-width:420px;
}
.passe-avatar{width:110px; height:110px; object-fit:contain;}
.passe-intro{color:var(--ink-soft); margin:6px 0 0;}
.passe-nom{font-family:var(--font-display); font-size:38px; margin:2px 0 10px; color:var(--primary);}
.passe-consigne{color:var(--ink-soft); line-height:1.5; margin-bottom:20px;}
.passe-avert{color:var(--yellow); font-size:13px; margin:14px 0 0;}

/* ----------------------------- révélation ----------------------------- */
.rev-entete{display:flex; align-items:center; gap:12px; padding:12px 16px; flex:none;
  background:rgba(0,0,0,.35); border-bottom:2px solid var(--border-soft);}
.rev-auteur{color:var(--ink-soft); font-size:14px; margin-left:auto;}
.rev-auteur b{color:var(--ink);}
.rev-scene{flex:1; min-height:0; margin:12px 16px 0; border-radius:var(--radius-sm); overflow:hidden; position:relative;}
.rev-scene:empty{display:none;}
.rev-texte{
  margin:12px 16px 0; padding:16px 20px; border-radius:var(--radius-sm); flex:none;
  font-family:var(--font-display); font-size:clamp(18px,5vw,26px); text-align:center;
  background:linear-gradient(135deg, rgba(0,227,155,.2), rgba(63,209,255,.14));
  border:2px solid var(--primary);
}
.rev-texte:empty{display:none;}
/* Une étape « texte » n'a pas de scène 3D : sans ça, la phrase resterait collée
   en haut d'un grand vide. On la centre dans ce qui reste. */
#ecran-revelation.sans-scene .rev-texte{margin:auto 16px;}
.rev-texte .rev-qui{display:block; font-family:var(--font-body); font-size:13px;
  color:var(--ink-soft); font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em;}
.rev-fil{display:flex; gap:6px; justify-content:center; padding:12px 16px 0; flex:none;}
.rev-pas{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2);}
.rev-pas.vu{background:var(--primary);}
.rev-nav{display:flex; gap:10px; justify-content:center; align-items:center; padding:12px 16px; flex:none;}

/* -------------------------------- mur -------------------------------- */
.mur-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:20px;}
.mur-carnet{background:rgba(0,0,0,.28); border:2px solid var(--border-soft); border-radius:var(--radius-sm); padding:12px;}
.mur-carnet h3{font-family:var(--font-display); font-size:16px; margin:0 0 10px; color:var(--yellow);}
.mur-etape{display:flex; gap:10px; align-items:center; margin-bottom:8px; font-size:14px;}
.mur-etape img{width:104px; height:104px; border-radius:10px; background:var(--studio); flex:none; object-fit:cover;}
.mur-etape span{line-height:1.35;}
.mur-etape em{display:block; color:var(--ink-soft); font-size:11px; font-style:normal; text-transform:uppercase; letter-spacing:.05em;}

/* ------------------------------- modales ------------------------------- */
.modale{
  display:none; position:fixed; inset:0; background:rgba(3,20,14,.82); z-index:60;
  align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(4px);
}
.modale.visible{display:flex;}
.modale-boite{
  background:var(--paper-alt); border:2px solid var(--border-soft); border-radius:var(--radius);
  padding:24px; max-width:520px; width:100%; box-shadow:var(--shadow); max-height:88dvh; overflow:auto;
}
.regles{padding-left:22px; line-height:1.6;}
.regles li{margin-bottom:10px;}
.regles-note{color:var(--ink-soft); font-size:14px; line-height:1.55; border-left:3px solid var(--primary); padding-left:12px;}
.local-liste{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0;}
.local-j{display:flex; align-items:center; gap:7px; background:rgba(0,0,0,.3); border-radius:999px; padding:5px 8px 5px 5px;}
.local-j img{width:28px; height:28px; object-fit:contain;}
.local-j b{font-size:14px;}
.local-j button{background:none; border:none; color:var(--coral); cursor:pointer; font-size:15px;}

/* -------------------------- toast & connexion -------------------------- */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:90;
  background:#06251A; border:2px solid var(--primary); color:var(--ink);
  padding:12px 20px; border-radius:999px; font-weight:700; opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s; box-shadow:var(--shadow-sm); max-width:90vw; text-align:center;
}
#toast.visible{opacity:1; transform:translate(-50%,0);}
#conn-banner{
  position:fixed; top:0; left:0; right:0; z-index:95; background:var(--coral); color:#fff;
  text-align:center; padding:8px; font-weight:700; transform:translateY(-100%); transition:transform .25s;
}
#conn-banner.visible{transform:none;}

@media (max-width:560px){
  .ecran{padding:12px 12px 30px;}
  .carte{padding:16px; border-radius:20px;}
  .salon-haut{flex-direction:column;}
  .code-valeur{font-size:28px;}
  .at-btn,.at-taille{width:34px; height:34px; font-size:15px;}
  .at-coul{width:24px; height:24px;}
  .at-aide{font-size:11px; bottom:6px; left:8px;}
  .rev-scene{margin:8px 10px 0;}
  .rev-texte{margin:8px 10px 0; padding:12px;}
}