:root{
  --bg1:#040c18;
  --glass: rgba(14, 22, 36, 0.6);
  --glass-stroke: rgba(50, 90, 140, 0.35);
  --accent:#35d0ff;
  --danger:#ff6b6b;
  --text:#e7edf3;
  --muted:#96abc3;
  --panel:#0f1d31;
  --panel-stroke:#224062;
  --elev: 0 12px 28px rgba(0,0,0,.45), inset 0 2px 6px rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body.matrix-bg{
  margin:0; color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
  background: radial-gradient(1200px 800px at 70% 120%, #0b1f3a 0%, #03070e 70%, #01040a 100%);
}

/* Fond métaverse */
#matrixBg{
  position: fixed; inset: 0; width:100vw; height:100vh; z-index:0;
  background: radial-gradient(1200px 800px at 70% 110%, rgba(0,60,130,.25), rgba(0,0,0,0));
}

/* Header / Navigation */
.nav{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 16px; background:rgba(214, 214, 214, 0.178); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255, 255, 255, 0.925);
}
.nav-left,.nav-right{display:flex; align-items:center; gap:10px}
.nav-center{display:flex; justify-content:center; flex:1}
.brand{display:flex; align-items:center; gap:10px; opacity:.95}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(53,208,255,.8)}
.brand-name{font-weight:700; letter-spacing:.3px}

.nav-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--panel); border:1px solid var(--panel-stroke); color:var(--text);
  box-shadow: var(--elev); border-radius:12px; cursor:pointer; font-weight:600;
}
.nav-btn.accent{ border-color:#296a8c; background:linear-gradient(145deg,#16304a,#10233a); }
.nav-btn.danger{ border-color:#7a2b2b; background:linear-gradient(145deg,#2a0d0d,#1a0a0a); color:#ffdede; }

/* Scène A-Frame SOUS le header, cachée tant qu’aucune scène */
a-scene{
  position: fixed; inset: 0; top:58px; z-index: 5;
}

/* HUD / MOYA (à droite, sans bulle) */
#hud{ position: fixed; inset: auto 0 18px auto; z-index: 15; pointer-events:none }
.agent{
  position:fixed; right:18px; bottom:18px; width:96px; height:96px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center; pointer-events:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.agent img{width:74px; height:74px; object-fit:contain; transform-origin:50% 70%}
.agent.speaking img{animation: talk .22s infinite}
@keyframes talk{ 0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)} }

/* Panneau chat (gauche) */
.panel{
  position: fixed; left:18px; bottom:18px; width:360px; max-width:92vw; background:var(--panel);
  border:1px solid var(--panel-stroke); border-radius:14px; box-shadow: var(--elev); z-index: 15;
}
.panel .panel-toggle{ position:absolute; top:6px; right:6px; background:transparent; color:var(--muted); border:none; cursor:pointer; font-size:18px; }
.panel .panel-body{ padding:16px 14px 14px 14px; left: 50%; display: none; }
.panel .row{ display:flex; gap:8px; }
.panel input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid #294a73; background:#0a1526; color:var(--text); }
.panel button{ padding:10px 12px; border-radius:10px; border:1px solid #294a73; background:#0e1a2d; color:var(--text); cursor:pointer; }
.panel .sceneTag{ margin-top:8px; color:var(--muted); }
.panel.minimized .panel-body{ display:none; }
.panel .panel-mini{ display:none; }
.panel.minimized .panel-mini{ display:flex; justify-content:flex-end; padding:6px; }
.panel-pill{ background:#0f1d31; color:var(--text); border:1px solid var(--panel-stroke); border-radius:999px; padding:6px 10px; cursor:pointer; }

/* Explorateur */
.explorer{ position:fixed; inset:64px 24px 24px 24px; background:rgba(158, 159, 160, 0.103); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.08); border-radius:18px; z-index: 12}
.explorer.hidden{display:none}
.explorer-inner{display:flex; flex-direction:column; height:100%}
.explorer-header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06)}
.explainer{padding:10px 16px; opacity:.85}
.scene-map{position:relative; flex:1; margin:10px 16px; border:1px dashed rgba(53,208,255,.35); border-radius:12px; background:rgba(255,255,255,.03)}
.scene-dot{position:absolute; transform:translate(-50%,-50%); width:20px; height:20px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; box-shadow:0 0 0 6px rgba(53,208,255,.12)}
.scene-dot .label{position:absolute; top:-28px; left:50%; transform:translateX(-50%); background:rgba(10,15,26,.88); color:#e7edf3; padding:3px 6px; border-radius:6px; white-space:nowrap; font-size:12.5px; border:1px solid #22324a;}
.scene-list{padding:10px 16px; display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.scene-card{padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.05)}
.scene-card .ghost{margin-top:8px}

/* Finish + Modals */
.finish, .modal{ position:fixed; inset:64px 24px 24px 24px; z-index:14; background:rgba(1,6,14,.72); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.08); border-radius:18px }
.finish.hidden, .modal.hidden{ display:none; }
.finish-inner, .modal-inner{ padding:16px }
.finish-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 }
.btn, .ghost{
  padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16); color:var(--text); cursor:pointer; text-decoration:none
}
.ghost{ background:transparent }

/* Modal large pour Dames */
.modal-lg{ width: min(980px, 95vw); }

/* Jeu de Dames */
.minigame{padding:14px}
.ck-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ck-title{ font-weight:700 }
.ck-aid{ font-size:13px; opacity:.9 }
.ck-wrap{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.ck-side{ min-width:160px; font-size:13px }
.ck-info{ font-size:13px; opacity:.9; padding:8px 10px; border:1px dashed rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.04); }
.ck-legend{ margin:8px 0 0; padding-left:18px; font-size:12px; opacity:.85; }
.ck-board{ border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden; background:#0b1126; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35); }

/* Bouton flottant Jeu de Dames (centré à droite) */
.float-game{
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 16;
  width: 58px; height: 58px; border-radius: 50%; font-size: 28px;
  border:1px solid #2a4f7a; background: linear-gradient(145deg, #16304a, #10233a);
  color:#eaf4ff; box-shadow: var(--elev); cursor:pointer;
}

/* Responsive sérieux */
@media (max-width: 960px){
  .panel{ left:12px; right:12px; width:auto }
  .agent{ right:12px; bottom:12px }
  .explorer, .finish, .modal{ inset:64px 12px 12px 12px }
}
@media (max-width: 520px){
  .nav-btn span{ display:none } /* icônes seules sur mobile */
  .ck-wrap{ flex-direction:column }
}



/* == Toolbelt (composant) == */
.toolbelt{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: rgba(3, 3, 3, 0.54);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 8px 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  z-index: 6;
}
.toolbelt .btn{
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #d7ecff; cursor: pointer;
  padding: 0 10px; font-weight: 600; user-select: none;
}
.toolbelt .btn:hover{ filter: brightness(1.08); }
.toolbelt .btn.tog.on{ background: rgba(53,208,255,.2); border-color: rgba(53,208,255,.45); }
.toolbelt .sep{ width: 1px; height: 24px; background: rgba(255,255,255,.14); margin: 0 4px; }
.toolbelt .zoom-box{ display: inline-flex; align-items: center; gap: 6px; }
.toolbelt input[type="range"]{ width: 130px; accent-color: #35d0ff; }

@media (max-width: 640px){
  .toolbelt{ gap: 8px; padding: 6px 8px; bottom: 10px; }
  .toolbelt .btn{ min-width: 36px; height: 36px; }
  .toolbelt input[type="range"]{ width: 110px; }
}




/* empecher la sélections de texte  */
/* Réduit les menus contextuels mobiles (iOS/Android) */
html, body {
  -webkit-touch-callout: none;  /* iOS Safari: pas de menu au tap long */
}

/* Si tu veux aussi éviter la sélection de texte (optionnel) : */
body {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}