/* ══════════════════════════════════════════════
   Hub à onglets — connexion + navigation
   (indépendant de .screen, réservé à game.js)
══════════════════════════════════════════════ */

.top-screen { position:fixed; inset:0; display:none; overflow-y:auto; }
.top-screen.active { display:flex; flex-direction:column; }

/* ─── BUREAU VIRTUEL : écran de verrouillage façon session Windows ───
   Seule cette activité est protégée par un code ; le reste du site
   (onglet Accueil, Jeu, Dictée, Tutoriel, Mail) est en accès libre. */
.hub-panel[data-panel="desktop"] { position:relative; }
.hub-panel[data-panel="desktop"].active { display:flex; flex-direction:column; }
.desktop-lock { position:absolute; inset:0; z-index:2; }

.desktop-session-bar {
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; background:var(--bg2); border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.85rem; color:var(--text2);
}
.desktop-session-bar button {
  background:none; border:1px solid rgba(255,255,255,.2); color:var(--text2);
  padding:5px 12px; border-radius:10px; font-size:.8rem; font-family:inherit; cursor:pointer;
}
.desktop-session-bar button:hover { border-color:var(--coral); color:var(--coral); }
#desktop-iframe { flex:1; min-height:0; }

.lock-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at top left, rgba(108,77,224,.35), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(26,158,122,.25), transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
}

.lock-stage {
  position:relative; z-index:1;
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--text); cursor:pointer;
}

.lock-clock { font-family:'Segoe UI', Arial, sans-serif; font-weight:200; font-size:clamp(4rem, 14vw, 8rem); line-height:1; letter-spacing:-2px; }
.lock-date  { font-size:1.2rem; color:var(--text2); text-transform:capitalize; margin-top:4px; }
.lock-hint  { margin-top:60px; font-size:.9rem; color:var(--text2); opacity:.8; animation:lock-pulse 2.4s ease-in-out infinite; }
@keyframes lock-pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }

.lock-stage-signin { cursor:default; }
.lock-user-tile {
  display:flex; flex-direction:column; align-items:center;
  background:var(--card); border:1px solid rgba(255,255,255,.1);
  border-radius:20px; box-shadow:var(--shadow);
  padding:32px 32px 24px; width:min(320px, 88vw);
}
.lock-avatar {
  width:88px; height:88px; border-radius:50%; background:var(--bg2);
  display:flex; align-items:center; justify-content:center; font-size:2.6rem;
  margin-bottom:12px; border:2px solid rgba(255,255,255,.1);
}
.lock-username { font-weight:800; font-size:1.15rem; margin-bottom:16px; }
.lock-name-field { width:100%; margin-bottom:12px; }
.lock-name-field.hidden { display:none; }
.lock-name-input {
  width:100%; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.15);
  background:var(--bg2); color:var(--text); font-size:1rem; font-family:inherit; text-align:center;
}
.lock-pin-row { display:flex; gap:8px; width:100%; }
.lock-pin-input {
  flex:1; padding:11px 14px; border-radius:24px; border:1px solid rgba(255,255,255,.18);
  background:var(--bg2); color:var(--text); font-size:1rem; font-family:inherit;
  text-align:center; letter-spacing:4px;
}
.lock-pin-input:focus, .lock-name-input:focus { outline:none; border-color:var(--purple); }
.lock-pin-go {
  width:42px; height:42px; border-radius:50%; border:none; flex:none;
  background:var(--purple); color:#fff; font-size:1.1rem; cursor:pointer;
}
.lock-pin-go:hover { background:var(--purple-l); color:var(--purple); }
.login-error { min-height:1.2em; color:var(--coral); font-weight:700; margin-top:12px; font-size:.85rem; text-align:center; }
.lock-link {
  margin-top:16px; background:none; border:none; color:var(--text2);
  font-size:.8rem; font-family:inherit; cursor:pointer; text-decoration:underline;
}
.lock-link:hover { color:var(--text); }

.shake { animation:lock-shake .4s; }
@keyframes lock-shake {
  10%,90% { transform:translateX(-2px); }
  20%,80% { transform:translateX(4px); }
  30%,50%,70% { transform:translateX(-8px); }
  40%,60% { transform:translateX(8px); }
}

/* ─── HUB (barre du haut + onglets) — page publique ─── */
#app-hub.active { display:flex; }
.hub-chrome { flex:none; background:var(--bg2); border-bottom:1px solid rgba(255,255,255,.08); }

.hub-tabs { display:flex; gap:6px; overflow-x:auto; padding:12px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.hub-tab {
  flex:none; padding:9px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--card); color:var(--text2); font-family:inherit; font-weight:700;
  font-size:.85rem; white-space:nowrap; cursor:pointer;
}
.hub-tab:hover { border-color:var(--purple); }
.hub-tab.active { background:var(--purple); border-color:var(--purple); color:#fff; }

.hub-panels { flex:1; min-height:0; position:relative; }
.hub-panel { display:none; width:100%; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.hub-panel.active { display:block; }
.hub-iframe { width:100%; height:100%; border:0; display:block; background:var(--bg); }

/* ─── ONGLET ACCUEIL : menu neutre, aucune activité mise en avant ─── */
.menu-wrap { max-width:900px; margin:0 auto; padding:48px 24px; text-align:center; }
.menu-sub { color:var(--text2); margin-bottom:32px; }
.menu-sub-title { font-family:'Fredoka One',cursive; font-size:clamp(1.3rem,3.5vw,1.8rem); color:var(--text); }
.menu-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; }
.menu-card {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:18px;
  padding:24px 16px; cursor:pointer; color:var(--text); font-family:inherit; text-align:center;
}
.menu-card:hover { border-color:var(--purple); transform:translateY(-2px); }
.menu-card-icon { font-size:2.2rem; }
.menu-card-name { font-weight:800; }
.menu-card-desc { font-size:.8rem; color:var(--text2); }

/* ── Responsive ── */
@media (max-width: 480px) {
  .menu-wrap { padding: 28px 16px; }
  .menu-sub-title { margin-bottom: 20px; }
  .hub-tab { padding: 8px 12px; font-size: .8rem; }
  .lock-user-tile { padding: 24px 20px 18px; }
  .lock-hint { margin-top: 36px; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .lock-hint { margin-top: 16px; }
  .lock-clock { font-size: clamp(2.5rem, 10vw, 4rem); }
}

/* L'écran d'accueil du jeu (choix du niveau) reste dans le flux normal du
   panneau "Jeu" au lieu de couvrir tout l'écran, pour que la barre d'onglets
   reste visible tant que la partie n'a pas commencé. Les autres écrans du
   jeu (salles, victoire…) restent en plein écran comme avant. */
.screen.screen-inline { position:relative; inset:auto; width:100%; height:100%; }