/* styles/views/daily.css — chrono dot-matrix in-game + écran de fin
 * Daily Challenge. */

/* ================================================================
 *  Chrono in-game : panneau LED authentique — chaque digit est une
 *  grille 5×7 de points. Les points éteints restent visibles en très
 *  faible opacité (comme un vrai panneau RATP/SIEL/CBTC), seuls les
 *  points "on" s'allument en orange vif avec halo.
 *
 *  Tokens réglables en un endroit (--dt-dot, --dt-gap, --dt-col). */
.daily-timer{
  --dt-dot: clamp(1.5px, .2vw, 2.5px); /* diamètre d'un point */
  --dt-gap: calc(var(--dt-dot) * .4);  /* gap inter-points */
  --dt-col: #ff9a1f;                   /* couleur LED allumée */

  position:fixed;
  top:max(10px, env(safe-area-inset-top, 0));
  left:50%;
  transform:translateX(-50%);
  z-index:90;

  display:flex;
  gap:calc(var(--dt-dot) * 1.4);       /* espace entre digits */
  padding:clamp(4px, .5vw, 7px) clamp(6px, .65vw, 10px);
  background:#070809;
  border:1.5px solid rgba(255, 255, 255, .06);
  border-radius:10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 36px rgba(255, 154, 31, .06),
    0 8px 28px rgba(0, 0, 0, .7);
  pointer-events:none;
  user-select:none;
}

/* Un digit = grille 5 colonnes × 7 lignes de points. */
.daily-timer .dt-digit{
  display:grid;
  grid-template-columns:repeat(5, var(--dt-dot));
  grid-template-rows:   repeat(7, var(--dt-dot));
  gap:var(--dt-gap);
}

/* Chaque point : cercle. Eteint = très faible (silhouette du panneau).
 * Allumé = plein orange + halo de lumière qui baigne légèrement ses
 * voisins via box-shadow multiple. */
.daily-timer .dt-dot{
  width:var(--dt-dot);
  height:var(--dt-dot);
  border-radius:50%;
  background:rgba(255, 255, 255, .035);
  box-shadow:inset 0 0 1px rgba(0, 0, 0, .4);
  /* Allumage/extinction instantané (vrai LED) : pas de transition. */
}
.daily-timer .dt-dot.on{
  background:var(--dt-col);
  box-shadow:
    0 0 2px var(--dt-col),
    0 0 6px color-mix(in srgb, var(--dt-col) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--dt-col) 40%, transparent);
}

/* styles/views/daily.css — écran de fin Daily Challenge.
 * Overlay plein écran, carte centrée avec : stats cumulées, détail
 * des 5 manches, saisie pseudo + soumission, leaderboard du jour.
 * Le conteneur #dailyEnd est toujours présent dans le DOM (vide),
 * c'est ui/daily.js qui pousse le markup au moment d'afficher. */

.daily-end{
  position:fixed; inset:0;
  z-index:120;
  display:none;
  align-items:center; justify-content:center;
  padding:clamp(12px, 3vw, 32px);
  background:rgba(8, 10, 14, .72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity .25s ease;
}
.daily-end[hidden]{ display:none !important; }
.daily-end.show{
  display:flex;
  opacity:1;
}

.daily-modal{
  position:relative;
  width:min(620px, 94vw);
  max-height:min(92vh, 860px);
  overflow-y:auto;
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(18px, 3vw, 28px) clamp(20px, 3vw, 32px);
  background:var(--panel, #fbf7ec);
  color:var(--fg, #14141c);
  border:1.5px solid var(--border-strong, rgba(0,0,0,.22));
  border-radius:14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 64px rgba(0,0,0,.48);
  font-family:var(--sans, 'Barlow', sans-serif);
}

.daily-head{
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(0,0,0,.16);
}
.daily-badge{
  font-family:var(--mono, monospace);
  font-size:10px; letter-spacing:.32em;
  color:var(--muted, rgba(0,0,0,.55));
  text-transform:uppercase;
}
.daily-title{
  margin:0;
  font-size:clamp(18px, 2.2vw, 24px);
  font-weight:800;
  letter-spacing:.02em;
  text-align:center;
}

/* Stats cumulées — 3 tuiles (legacy multi-manches) ou 2 tuiles (daily
 * actuel, 1 seul trajet : trajet priorité + temps). */
.daily-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.daily-stats-duo{
  grid-template-columns: 1.3fr 1fr;
}
.daily-stat-lead{
  /* Le trajet est le critère principal du classement — mis en valeur. */
  background:color-mix(in srgb, var(--accent, #00ffc8) 10%, rgba(0,0,0,.05));
  border-color:color-mix(in srgb, var(--accent, #00ffc8) 28%, rgba(0,0,0,.14));
}
.daily-stat-lead .daily-stat-v{ font-size:28px; }
.daily-stat-v-time{
  /* Temps en dot-matrix pour être cohérent avec le chrono in-game. */
  font-family:'Share Tech Mono', 'VT323', monospace;
  color:#ff9a1f;
  text-shadow:0 0 3px rgba(255, 154, 31, .45);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.daily-stat{
  padding:10px 12px;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  text-align:center;
}
.daily-stat-k{
  font-family:var(--mono, monospace);
  font-size:9px; letter-spacing:.24em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:4px;
}
.daily-stat-v{
  font-size:22px; font-weight:800;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.daily-stat-v.ok{ color:#2d7a3e; }

/* RANG EN HERO + écart au #1 (rempli après soumission / board) */
.daily-rank-hero{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  background:color-mix(in srgb, var(--accent, #0a62c8) 8%, rgba(0,0,0,.04));
  border:1.5px solid color-mix(in srgb, var(--accent, #0a62c8) 28%, rgba(0,0,0,.14));
  border-radius:10px;
}
.daily-rank-hero[hidden]{ display:none; }
.drh-rank{ display:flex; flex-direction:column; gap:2px; }
.drh-rank-k{
  font-family:var(--mono, monospace);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.drh-rank-v{
  font-size:34px; font-weight:800; line-height:.95;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.drh-rank-tot{ font-size:16px; font-weight:600; color:var(--muted); }
.drh-meta{ text-align:right; }
.drh-gap{
  font-size:13px; color:var(--fg-dim, rgba(0,0,0,.6));
}
.drh-gap b{ color:var(--fg); }
.drh-gap-lead{ color:#2d7a3e; font-weight:700; }

/* Détail des manches — lignes compactes */
.daily-rounds{
  display:flex; flex-direction:column;
  gap:4px;
  padding:8px 10px;
  background:rgba(0,0,0,.03);
  border:1px dashed rgba(0,0,0,.14);
  border-radius:6px;
}
.daily-rounds-title{
  font-family:var(--mono, monospace);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.daily-round-row{
  display:grid;
  grid-template-columns:40px 1fr 80px;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.daily-round-row.perfect{ color:#2d7a3e; font-weight:700; }
.drr-idx{ font-family:var(--mono, monospace); color:var(--muted); font-size:11px; }
.drr-delta{ font-weight:700; text-align:left; }
.drr-time{ text-align:right; color:var(--muted); }

/* Soumission : pseudo + bouton */
.daily-submit-wrap{
  display:flex; flex-direction:column; gap:6px;
  padding:12px;
  background:color-mix(in srgb, var(--accent, #00ffc8) 4%, transparent);
  border:1.5px solid color-mix(in srgb, var(--accent, #00ffc8) 25%, rgba(0,0,0,.12));
  border-radius:8px;
}
.daily-pseudo-label{
  font-family:var(--mono, monospace);
  font-size:10px; letter-spacing:.24em;
  color:var(--muted);
  text-transform:uppercase;
}
.daily-pseudo-row{
  display:flex; gap:8px; align-items:stretch;
}
.daily-pseudo-row input{
  flex:1;
  padding:8px 10px;
  font-size:15px; font-weight:600;
  font-family:var(--sans, 'Barlow', sans-serif);
  letter-spacing:.04em;
  text-transform:uppercase;
  background:#fff;
  color:var(--fg);
  border:1.5px solid rgba(0,0,0,.24);
  border-radius:6px;
  outline:none;
}
.daily-pseudo-row input:focus{
  border-color:var(--accent, #0a62c8);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent, #0a62c8) 25%, transparent);
}
.daily-btn{
  padding:8px 16px;
  font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background:#fff;
  color:var(--fg);
  border:1.5px solid rgba(0,0,0,.22);
  border-radius:6px;
  cursor:pointer;
  transition:background .15s, transform .1s;
}
.daily-btn:hover:not(:disabled){ background:rgba(0,0,0,.04); }
.daily-btn:active{ transform:translateY(1px); }
.daily-btn:disabled{ opacity:.55; cursor:not-allowed; }
.daily-btn-primary{
  background:#003f7a;
  color:#fff;
  border-color:#002a52;
}
.daily-btn-primary:hover:not(:disabled){
  background:#0a62c8;
}
.daily-btn-ghost{
  background:transparent;
  border-style:dashed;
}

.daily-err{
  margin-top:4px;
  padding:6px 10px;
  font-size:12px;
  color:#c23e3e;
  background:rgba(194,62,62,.08);
  border-radius:4px;
}

.daily-rank-info{
  text-align:center;
  padding:10px;
  font-size:15px;
  background:rgba(45,122,62,.1);
  color:#2d7a3e;
  border:1px solid rgba(45,122,62,.22);
  border-radius:6px;
}
.daily-rank-info b{ font-size:18px; }

/* Leaderboard */
.daily-lb-title{
  margin-top:4px;
  font-family:var(--mono, monospace);
  font-size:11px; letter-spacing:.24em;
  color:var(--muted);
  text-transform:uppercase;
  text-align:center;
}
.daily-lb{
  display:flex; flex-direction:column;
  border:1px solid rgba(0,0,0,.14);
  border-radius:6px;
  overflow:hidden;
  max-height:260px;
  overflow-y:auto;
}
.daily-lb-loader,
.daily-lb-empty{
  padding:16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  font-style:italic;
}
.daily-lb-header,
.daily-lb-row{
  display:grid;
  grid-template-columns:50px 1fr 80px 72px;
  gap:10px;
  padding:6px 10px;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  align-items:center;
}
.daily-lb-header{
  background:rgba(0,0,0,.06);
  font-family:var(--mono, monospace);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--muted);
  text-transform:uppercase;
  border-bottom:1px solid rgba(0,0,0,.14);
}
.daily-lb-row{
  border-top:1px solid rgba(0,0,0,.06);
}
.daily-lb-row:first-child{ border-top:none; }
.daily-lb-row.me{
  background:color-mix(in srgb, var(--accent, #0a62c8) 12%, transparent);
  font-weight:700;
}
.daily-lb-row.first .dlb-rank{ color:#c18b27; font-weight:800; }
.dlb-rank{ color:var(--muted); font-family:var(--mono, monospace); }
.dlb-pseudo{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dlb-delta{ text-align:right; font-weight:700; }
.dlb-delta.ok{ color:#2d7a3e; }
.dlb-time{ text-align:right; color:var(--muted); }

/* Actions bas */
.daily-actions{
  display:flex; gap:10px; justify-content:center;
  padding-top:4px;
}

/* Dark mode coherence : piloté par le choix EXPLICITE du joueur
   (data-theme), pas par la préférence du navigateur. */
html[data-theme="dark"] .daily-end{ background:rgba(2, 4, 8, .82); }

/* Indicateur discret du code secret — un bullet par touche tapée,
 * affiché en coin bas du modal. Disparaît tout seul après quelques
 * secondes via l'anim pulse. Ne divulgue pas le code, juste un feedback
 * visuel au joueur qui sait ce qu'il tape. */
.daily-cheat-hint{
  position:absolute;
  right:12px; bottom:8px;
  font-family:'Share Tech Mono','JetBrains Mono',monospace;
  font-size:14px;
  letter-spacing:.25em;
  color:rgba(255, 154, 31, .55);
  pointer-events:none;
  opacity:0;
}
.daily-cheat-hint.pulse{
  animation:daily-cheat-pulse 2.2s ease-out forwards;
}
@keyframes daily-cheat-pulse{
  0%   { opacity:0;   transform:translateY(2px); }
  15%  { opacity:.85; transform:translateY(0); }
  75%  { opacity:.85; }
  100% { opacity:0; }
}

/* Responsive */
@media (max-width: 560px){
  .daily-modal{ padding:16px; gap:10px; }
  .daily-stats{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
  /* Le variant duo (2 tuiles) doit rester en 2 colonnes — sans ce
   * re-scope, la règle ci-dessus l'écrase et laisse une 3e colonne
   * vide sur mobile. */
  .daily-stats-duo{ grid-template-columns:1fr 1fr; }
  .daily-stat{ padding:6px 8px; }
  .daily-stat-v{ font-size:18px; }
  .daily-pseudo-row{ flex-direction:column; }
  .daily-lb-header,
  .daily-lb-row{
    grid-template-columns:36px 1fr 64px 58px;
    gap:6px;
    padding:5px 8px;
  }
}