/* ---------- Écran titre : jaquette en panneaux ---------- */
#title { background: #000; }
.cover {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 6px;
  padding: calc(6px + var(--safe-top)) 6px calc(6px + var(--safe-bottom));
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.15fr .85fr auto .85fr 1.15fr;
  grid-template-areas:
    "a b"
    "a c"
    "logo logo"
    "d f"
    "e f";
}
.panel {
  position: relative;
  overflow: hidden;
  background: #120a1e;
  border-radius: 3px;
  opacity: 0;
  transform: scale(1.12);
  animation: panel-in .7s cubic-bezier(.2, .8, .2, 1) forwards;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 -40px 50px -30px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: drift 15s ease-in-out infinite alternate;
}
.p-a { grid-area: a; animation-delay: .05s; }
.p-b { grid-area: b; animation-delay: .18s; }
.p-c { grid-area: c; animation-delay: .31s; }
.p-d { grid-area: d; animation-delay: .44s; }
.p-e { grid-area: e; animation-delay: .57s; }
.p-f { grid-area: f; animation-delay: .7s; }
.p-a img { object-position: 50% 35%; --dx: 3%; --dy: 2%; }
.p-b img { object-position: 50% 45%; animation-delay: -4s; }
.p-c img { object-position: 30% 60%; --dx: -2%; animation-delay: -8s; }
.p-d img { object-position: 60% 50%; animation-delay: -2s; }
.p-e img { object-position: 45% 40%; --dx: 2%; --dy: -2%; animation-delay: -6s; }
.p-f img { object-position: 50% 30%; animation-delay: -10s; }

.logo {
  grid-area: logo;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 14px 12px 16px;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 110%, rgba(255, 62, 165, .35), transparent 70%),
    radial-gradient(ellipse 60% 60% at 50% -20%, rgba(177, 92, 255, .3), transparent 70%),
    #07030f;
  animation-delay: .9s;
}
.logo .edition {
  font: 700 clamp(11px, 3vw, 13px)/1 var(--ui);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #ffd9ec;
  opacity: .9;
}
.logo .neon { font-size: clamp(30px, 9.5vw, 54px); margin-top: 4px; }
.logo .name { font-size: clamp(62px, 22vw, 140px); }
.name.shine {
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%) 0 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #ff5fc1 0%, var(--pink) 30%, var(--orange) 68%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 4.5s 1.6s ease-in-out infinite;
}
@keyframes shine {
  from { background-position: 100% 0, 0 0; }
  45%, to { background-position: 0 0, 0 0; }
}
.cta {
  margin-top: 10px;
  font-size: clamp(17px, 4.8vw, 24px);
  padding: .7em 1.5em;
  animation: pulse-ring 1.6s infinite;
}
.cta:disabled { animation: none; opacity: .65; }
.hint { margin-top: 8px; font: 600 13px var(--ui); color: #d8c8f0; }
.noscript { position: absolute; inset: auto 16px 16px; font: 15px/1.4 var(--ui); text-align: center; }
.noscript a { color: var(--gold); }

#title.leaving { pointer-events: none; }
#title.leaving .panel { animation: panel-out .45s ease-in forwards; }

@media (min-aspect-ratio: 1/1) {
  .cover {
    grid-template-columns: 1fr 1.45fr 1.45fr 1fr;
    grid-template-rows: 1fr 1.25fr 1fr;
    grid-template-areas:
      "a b c f"
      "a logo logo f"
      "d logo logo e";
  }
  .logo .neon { font-size: clamp(28px, 4.2vw, 64px); }
  .logo .name { font-size: clamp(56px, 10vw, 170px); }
}

@keyframes panel-in { to { opacity: 1; transform: none; } }
@keyframes panel-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(.92); }
}
@keyframes drift {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.16) translate(var(--dx, -3%), var(--dy, 2%)); }
}

/* ---------- Écran de chargement ---------- */
#loading { background: #000; animation: fadein .35s ease; }
.loading-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 7s ease-out forwards;
}
.loading-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 25%, transparent 50%, rgba(0, 0, 0, .88));
}
.tip {
  position: absolute;
  left: 16px;
  right: 130px;
  bottom: calc(30px + var(--safe-bottom));
  max-width: 520px;
}
.tip-label {
  font-family: var(--display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hud-yellow);
  font-size: 14px;
}
.tip p { margin-top: 4px; font: 600 clamp(14px, 3.9vw, 17px)/1.38 var(--ui); text-shadow: 0 1px 3px #000; }
.spinner-wrap {
  position: absolute;
  right: 16px;
  bottom: calc(32px + var(--safe-bottom));
  display: flex;
  align-items: center;
  gap: 9px;
  font: 700 12px var(--ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
.loading-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .14); }
.loading-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--orange), var(--gold)); }

@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translateY(-2%); } }
@keyframes spin { to { transform: rotate(360deg); } }