/* === Nonogrammes - pages de jeu (solo, multi, défi, classement) === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(135deg, #1e1b4b, #312e81, #1e1b4b);
  color: #e0e0e0;
  padding: 16px;
  touch-action: manipulation;
}

#app {
  position: relative; z-index: 1;
  background: rgba(20, 20, 35, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 24px 20px 20px;
  max-width: 95vw;
  width: fit-content;
  min-width: min(340px, 92vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.container { width: 100%; max-width: 900px; margin: 0 auto; }

.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.back-link { font-size: 0.85rem; color: #a5b4fc; text-decoration: none; font-weight: 600; transition: color 0.2s; white-space: nowrap; }
.back-link:hover { color: #c7d2fe; }

h1 {
  font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(90deg, #a5b4fc, #818cf8, #6366f1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.diff-label {
  font-size: 0.72rem; font-weight: 700; color: #a5b4fc;
  background: rgba(99, 102, 241, 0.14); padding: 4px 10px; border-radius: 8px; white-space: nowrap;
}

/* Blocs latéraux masqués pendant le jeu */
body.nono-en-jeu .bandeau-infos-wrap,
body.nono-en-jeu .bloc-jeux-une-wrap { display: none !important; }

/* --- Boutons / champs --- */
.btn {
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700;
  padding: 10px 22px; border: none; border-radius: 10px; cursor: pointer; color: #fff;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); }
.btn-secondary { background: linear-gradient(135deg, #64748b, #475569); box-shadow: 0 4px 15px rgba(100, 116, 139, 0.3); }
.btn-full { width: 100%; margin-top: 10px; }
.btn-petit { padding: 7px 14px; font-size: 0.8rem; }

.input-field {
  width: 100%; padding: 11px 14px; margin-top: 6px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px; color: #e0e0e0; font-family: 'Inter', sans-serif; font-size: 0.95rem;
}
.input-field:focus { outline: none; border-color: rgba(99, 102, 241, 0.6); }
select.input-field { cursor: pointer; }

/* --- Setup / cartes de difficulté --- */
.setup-screen { padding: 8px 0 4px; }
.setup-title { font-size: 1.15rem; font-weight: 800; color: #c7d2fe; margin-bottom: 4px; }
.setup-sub { font-size: 0.82rem; color: #94a3b8; margin-bottom: 18px; max-width: 460px; margin-left: auto; margin-right: auto; }

.diff-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; }
.nono-diff-carte, .nd-carte {
  font-family: 'Inter', sans-serif;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); color: #cbd5e1; cursor: pointer; transition: all 0.2s;
}
.nono-diff-carte:hover, .nd-carte:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(99, 102, 241, 0.4); transform: translateY(-2px); }
.nono-diff-carte .diff-emoji, .nd-carte .diff-emoji { font-size: 1.7rem; }
.nono-diff-carte .diff-nom, .nd-carte .diff-nom { font-size: 0.92rem; font-weight: 700; color: #c7d2fe; }
.nono-diff-carte .diff-meta, .nd-carte .diff-meta { font-size: 0.68rem; color: #94a3b8; }
.nd-carte .nd-etat { margin-top: 6px; font-size: 0.72rem; font-weight: 700; color: #a5b4fc; }
.nd-carte .nd-etat.nd-ok { color: #34d399; }
.nd-carte.fait { opacity: 0.75; cursor: default; border-color: rgba(52, 211, 153, 0.4); }
.nd-carte.encours { border-color: rgba(250, 204, 21, 0.5); }

@media (max-width: 620px) { .diff-cards { grid-template-columns: repeat(2, 1fr); } }

/* --- Barre d'info en jeu --- */
.info-bar {
  display: flex; justify-content: center; align-items: center; margin-bottom: 12px;
  padding: 10px 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; gap: 14px; flex-wrap: wrap;
}
.info-item { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 700; color: #c7d2fe; }
.info-icon { font-size: 1.05rem; }

.outils { display: inline-flex; gap: 6px; }
.outil-btn {
  font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: #cbd5e1; transition: all 0.15s;
}
.outil-btn.actif { background: rgba(99, 102, 241, 0.28); border-color: rgba(99, 102, 241, 0.6); color: #e0e7ff; }

.plateau-wrap { max-width: 100%; overflow: auto; padding: 4px; margin: 0 auto 12px; }
.hint-text { color: #94a3b8; font-size: 0.8rem; margin-bottom: 10px; max-width: 520px; margin-left: auto; margin-right: auto; }

/* --- Le plateau de nonogramme --- */
.nono-plateau {
  --nono-cell: 26px;
  display: grid;
  grid-template-columns: calc(var(--nono-maxlig) * var(--nono-cell)) calc(var(--nono-cols) * var(--nono-cell));
  grid-template-rows: calc(var(--nono-maxcol) * var(--nono-cell)) calc(var(--nono-rows) * var(--nono-cell));
  width: fit-content; margin: 0 auto; user-select: none; -webkit-user-select: none;
}
.nono-coin { grid-column: 1; grid-row: 1; }

.nono-indices-col {
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-columns: repeat(var(--nono-cols), var(--nono-cell));
}
.nono-idx-col {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: 3px; gap: 1px; color: #c7d2fe;
  font-size: calc(var(--nono-cell) * 0.48); line-height: 1.05; font-weight: 700;
}
.nono-indices-lig {
  grid-column: 1; grid-row: 2;
  display: grid; grid-template-rows: repeat(var(--nono-rows), var(--nono-cell));
}
.nono-idx-lig {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
  padding-right: 5px; gap: 4px; color: #c7d2fe;
  font-size: calc(var(--nono-cell) * 0.48); line-height: 1; font-weight: 700;
}
.nono-idx-col.fait, .nono-idx-lig.fait { opacity: 0.3; }
.idx-zero { opacity: 0.4; }

.nono-grille {
  grid-column: 2; grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--nono-cols), var(--nono-cell));
  grid-template-rows: repeat(var(--nono-rows), var(--nono-cell));
  touch-action: none; background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(165, 180, 252, 0.5);
}
.nono-case {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  position: relative; cursor: pointer;
}
.nono-case.bloc-droite { border-right: 2px solid rgba(165, 180, 252, 0.5); }
.nono-case.bloc-bas { border-bottom: 2px solid rgba(165, 180, 252, 0.5); }
.nono-idx-col.bloc-droite { box-shadow: inset -2px 0 0 rgba(165, 180, 252, 0.25); }
.nono-idx-lig.bloc-bas { box-shadow: inset 0 -2px 0 rgba(165, 180, 252, 0.25); }

.nono-case.rempli { background: linear-gradient(145deg, #818cf8, #4338ca); }
.nono-case.croix::after,
.nono-case.erreur::after {
  content: '✕'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--nono-cell) * 0.62); font-weight: 700;
}
.nono-case.croix::after { color: #64748b; }
.nono-case.erreur { background: rgba(239, 68, 68, 0.16); }
.nono-case.erreur::after { color: #f87171; }
.nono-case.flash-erreur { animation: nono-flash 0.4s ease; }
@keyframes nono-flash {
  0% { background: rgba(239, 68, 68, 0.85); }
  100% { background: rgba(239, 68, 68, 0.16); }
}

/* --- Overlay fin --- */
.overlay {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.68);
  z-index: 100; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 24px 16px;
}
.overlay.actif { display: flex; }
.overlay-box {
  margin: auto; background: rgba(30, 27, 75, 0.97); border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px; padding: 28px 24px; text-align: center; max-width: 440px; width: 100%;
}
.overlay-box h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; color: #c7d2fe; }
.overlay-box .score-final { font-size: 2.2rem; font-weight: 900; color: #34d399; margin: 4px 0; }
.overlay-box p { color: #94a3b8; font-size: 0.9rem; margin-bottom: 10px; }
.nono-ok { color: #34d399 !important; font-weight: 600; }
.nono-invite { color: #a5b4fc !important; }

/* --- Multijoueur : lobby --- */
.mp-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
@media (max-width: 680px) { .mp-colonnes { grid-template-columns: 1fr; } }
.mp-carte {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; padding: 20px;
}
.mp-carte h2 { font-size: 1.1rem; color: #c7d2fe; margin-bottom: 10px; }
.mp-label { display: block; font-size: 0.78rem; color: #94a3b8; margin-top: 10px; font-weight: 600; }
.mp-check { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #cbd5e1; margin: 12px 0; }
.mp-publiques-titre { font-size: 0.92rem; color: #a5b4fc; margin: 16px 0 8px; }
.nm-vide { color: #94a3b8; font-size: 0.85rem; text-align: center; padding: 8px 0; }
.nm-partie-publique {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; background: rgba(255, 255, 255, 0.04); border-radius: 10px; margin-bottom: 6px; font-size: 0.85rem;
}
.nono-btn { font-family: 'Inter', sans-serif; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; color: #fff; background: linear-gradient(135deg, #6366f1, #4338ca); padding: 8px 14px; }
.nono-btn-petit { padding: 6px 12px; font-size: 0.78rem; }

/* Multijoueur : salle */
.mp-salle { max-width: 440px; margin: 0 auto; text-align: center; }
.mp-code-ligne { color: #94a3b8; font-size: 0.9rem; margin: 8px 0; }
.mp-code { font-weight: 900; letter-spacing: 4px; color: #a5b4fc; font-size: 1.4rem; }
.mp-joueurs { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.nm-joueur { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; font-weight: 600; }
.nm-pastille { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.mp-attente { color: #94a3b8; font-size: 0.85rem; }

/* Multijoueur : course */
.mp-course-flex { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.nm-classement-panel { min-width: 220px; max-width: 300px; text-align: left; }
.nm-classement-panel h3 { font-size: 0.95rem; color: #a5b4fc; margin-bottom: 8px; }
.nm-cl-ligne { display: grid; grid-template-columns: 16px 1fr 60px auto; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; font-size: 0.8rem; }
.nm-cl-ligne.moi { background: rgba(99, 102, 241, 0.15); }
.nm-cl-pseudo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-cl-barre { position: relative; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; }
.nm-cl-barre span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width 0.4s; }
.nm-cl-etat { font-size: 0.75rem; font-weight: 700; text-align: right; white-space: nowrap; }
.nm-mon-resultat { background: rgba(99, 102, 241, 0.14); border-radius: 10px; padding: 10px; margin-bottom: 12px; font-size: 0.9rem; }
.nm-countdown {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; font-weight: 900; color: #fff; background: rgba(0, 0, 0, 0.5); z-index: 90;
  text-shadow: 0 4px 20px rgba(99, 102, 241, 0.8);
}
.nm-podium { list-style: none; text-align: left; margin: 12px 0; }
.nm-podium li { padding: 6px 8px; border-radius: 8px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.nm-podium li.moi { background: rgba(99, 102, 241, 0.15); }
.nm-pen { color: #94a3b8; font-size: 0.8rem; }

/* --- Défi : classement du jour --- */
.nd-cl-titre, .ncl-info { text-align: center; }
.nd-cl-titre { font-size: 1.15rem; color: #c7d2fe; margin: 22px 0 10px; }
.nd-cl-tabs, .ncl-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.nd-cl-tab, .ncl-tab {
  font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 700; padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); color: #cbd5e1; transition: all 0.15s;
}
.nd-cl-tab.actif, .ncl-tab.actif { background: rgba(99, 102, 241, 0.28); border-color: rgba(99, 102, 241, 0.6); color: #e0e7ff; }
.ncl-info { color: #94a3b8; font-size: 0.8rem; margin-bottom: 14px; }

.nd-cl-ol, .ncl-ol { list-style: none; max-width: 480px; margin: 0 auto; text-align: left; }
.nd-cl-ol li, .ncl-ol li {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; margin-bottom: 5px; background: rgba(255, 255, 255, 0.04); font-size: 0.9rem;
}
.nd-rang, .ncl-rang { font-weight: 800; color: #a5b4fc; text-align: center; }
.nd-temps, .ncl-temps { font-weight: 700; color: #34d399; white-space: nowrap; }
.nd-temps em { color: #94a3b8; font-style: normal; font-size: 0.78rem; }
.ncl-ol li.podium.p1 { background: rgba(250, 204, 21, 0.14); }
.ncl-ol li.podium.p2 { background: rgba(203, 213, 225, 0.12); }
.ncl-ol li.podium.p3 { background: rgba(217, 119, 6, 0.14); }
.ncl-moi { text-align: center; color: #a5b4fc; margin-top: 12px; font-size: 0.88rem; }

footer { font-size: 0.78rem; color: #64748b; margin-top: 16px; text-align: center; }
footer a { color: #a5b4fc; text-decoration: none; }
footer a:hover { color: #c7d2fe; }

@media (max-width: 480px) {
  #app { padding: 16px 10px 14px; border-radius: 18px; }
  h1 { font-size: 1.25rem; }
  .info-bar { padding: 8px 10px; gap: 8px; }
  .info-item { font-size: 0.8rem; }
}