/* screens.css — accueil, pseudo, gate, scène d'annif */

/* ── Accueil ── */
.panel-welcome {
  max-width: 900px;
}

.overtitle {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}

.title-main {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.2;
}

.subtitle {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--muted);
  margin-top: var(--s-3);
}

.panel-welcome .btn {
  margin-top: var(--s-6);
  font-size: 22px;
  padding: var(--s-4) var(--s-8);
}

.warning {
  margin-top: var(--s-6);
  font-size: 14px;
  color: #d9a24a;
  border: 1px dashed rgba(217, 162, 74, 0.45);
  border-radius: 8px;
  padding: var(--s-3) var(--s-4);
  display: inline-block;
}

/* ── Tracker de fins ── */
.endings-summary {
  margin-top: var(--s-6);
}

.endings-count {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.medals {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-3);
  flex-wrap: wrap;
}

.medal {
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
  background: rgba(0, 0, 0, 0.3);
}

.medal.is-unlocked {
  color: var(--gold);
  border-color: rgba(232, 182, 76, 0.55);
  box-shadow: 0 0 18px rgba(232, 182, 76, 0.18);
}

/* ── Scène d'annif ── */
.panel-birthday {
  max-width: 1000px;
  border-color: rgba(232, 182, 76, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(232, 182, 76, 0.12);
}

.title-birthday {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.15;
}

.title-birthday .accent {
  color: var(--gold);
  text-shadow:
    0 1px 0 #6b5220,
    0 2px 0 #59441b,
    0 3px 0 #483716,
    0 6px 2px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(232, 182, 76, 0.5);
}

.birthday-text {
  white-space: pre-line;
  margin-top: var(--s-5);
  color: var(--text);
}

.birthday-lineup {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-6);
}

.birthday-mod {
  width: 132px;
}

.birthday-mod img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 12px;
  border: 2px solid rgba(232, 182, 76, 0.4);
  animation: float-title 5s ease-in-out infinite;
}

.birthday-mod:nth-child(2) img { animation-delay: -1.2s; }
.birthday-mod:nth-child(3) img { animation-delay: -2.4s; }
.birthday-mod:nth-child(4) img { animation-delay: -3.6s; }

.birthday-mod.is-dead img {
  filter: grayscale(1) brightness(0.55);
  border-color: rgba(150, 150, 150, 0.35);
  animation: none;
}

.birthday-mod figcaption {
  font-size: 12px;
  color: var(--muted);
  margin-top: var(--s-2);
  line-height: 1.35;
}

.panel-birthday .btn {
  margin-top: var(--s-6);
}

/* Teinte de la scène selon la fin obtenue */
#screen-birthday[data-ending="a"] .panel-birthday {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(232, 182, 76, 0.10), transparent 70%),
    var(--surface);
}

#screen-birthday[data-ending="b"] .panel-birthday {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(150, 150, 190, 0.10), transparent 70%),
    var(--surface);
}

#screen-birthday[data-ending="c"] .panel-birthday {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(208, 39, 47, 0.12), transparent 70%),
    var(--surface);
}