:root {
  --bg: #07060a;
  --ink: #efe6d8;
  --muted: #8f8374;
  --gold: #d9b46a;
  --red: #ff2b2b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); }
body { font-family: 'Cormorant Garamond', Georgia, serif; -webkit-font-smoothing: antialiased; }

/* ---------- Décor ---------- */
.world {
  position: fixed;
  inset: -80px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 80% 55% at 50% 108%, rgba(150, 28, 26, .5), transparent 70%),
    radial-gradient(ellipse 55% 40% at 50% 45%, rgba(217, 180, 106, .07), transparent 70%),
    var(--bg);
  will-change: transform;
}
.world::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .88) 100%);
}

.dial {
  position: absolute;
  width: min(94vmin, 860px);
  aspect-ratio: 1;
  color: var(--gold);
  opacity: .16;
  animation: spin 300s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Contenu ---------- */
.stage { position: relative; z-index: 1; text-align: center; padding: 0 16px; }

.eyebrow {
  font-family: 'Cinzel', serif;
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: .5em;
  padding-left: .5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2vh;
}

h1 {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(24px, 4.4vw, 56px);
  letter-spacing: .08em;
  margin-bottom: 5vh;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .8);
}

.clock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2px, 1.2vw, 16px);
}
.unit { display: flex; flex-direction: column; align-items: center; }

.num {
  display: block;
  width: 1.5em;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(54px, 14.5vw, 190px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(217, 180, 106, .18), 0 4px 24px rgba(0, 0, 0, .9);
  transition: color .4s ease;
}

.sep {
  font-family: 'Cinzel', serif;
  font-size: clamp(40px, 10vw, 140px);
  line-height: 1;
  color: var(--gold);
  opacity: .55;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: .15; } }

.lbl {
  font-family: 'Cinzel', serif;
  font-size: clamp(9px, 1.2vw, 14px);
  letter-spacing: .4em;
  padding-left: .4em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.6vh;
}

.when {
  margin-top: 6vh;
  font-style: italic;
  font-size: clamp(16px, 2.1vw, 24px);
  color: var(--muted);
}

/* ---------- 10 dernières secondes ---------- */
body.final .num { color: #ffb08a; }
body.final .num.thump { animation: thump .9s ease-out; }
@keyframes thump {
  0% { transform: scale(1.12); text-shadow: 0 0 50px rgba(255, 90, 60, .7); }
  100% { transform: scale(1); }
}

/* ---------- L'heure est passée ---------- */
body.ended { background: #0d0405; }
body.ended .world {
  background:
    radial-gradient(ellipse 95% 70% at 50% 105%, rgba(210, 12, 12, .6), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 45%, rgba(255, 30, 30, .12), transparent 70%),
    #0d0405;
}
body.ended .num,
body.ended .sep {
  color: var(--red);
  text-shadow: 0 0 18px rgba(255, 43, 43, .8), 0 0 70px rgba(255, 0, 0, .5);
}
body.ended .sep { animation: none; opacity: 1; }
body.ended .eyebrow { color: #ff6b5e; }
body.ended h1 { color: #ffd9d2; }
body.ended .dial { color: var(--red); opacity: .3; animation-duration: 8s; }
body.ended .num { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { text-shadow: 0 0 30px rgba(255, 43, 43, 1), 0 0 110px rgba(255, 0, 0, .7); } }

/* ---------- Destruction ---------- */
body.destroying { background: #000; }

.cracks {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.cracks path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cracks .glow path { stroke: rgba(255, 45, 30, .42); }
.cracks .core path { stroke: #ffe4d8; }
.cracks .glow { animation: crackGlow 1.6s ease-in-out infinite; }
@keyframes crackGlow { 50% { opacity: .5; } }

body.shattering .num,
body.shattering .cracks .glow { animation: none; }

.debris { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.shard { position: fixed; overflow: hidden; will-change: transform; pointer-events: none; }

.dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.flash { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; }
.flash.go { animation: flash 1.1s ease-out; }
.flash.hit { animation: hit .6s ease-out; }
@keyframes flash {
  0% { opacity: .9; background: #fff; }
  15% { opacity: .7; background: #ff1a1a; }
  100% { opacity: 0; background: #ff1a1a; }
}
@keyframes hit {
  0% { opacity: .45; background: #ff2a1a; }
  100% { opacity: 0; background: #ff2a1a; }
}

/* ---------- Mention parodie ---------- */
.disclaimer {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 6;
  max-width: calc(100% - 150px);
  font-style: italic;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  opacity: .85;
  transition: opacity 3s ease;
}
body.void .disclaimer { opacity: .35; }

/* ---------- Écran d'entrée (nécessaire pour lancer le son) ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 16px;
  background: rgba(4, 3, 6, .9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.gate.gone { opacity: 0; visibility: hidden; }

.enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 48px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(217, 180, 106, .55);
  cursor: pointer;
  font: inherit;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.enter:hover, .enter:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(217, 180, 106, .25), inset 0 0 30px rgba(217, 180, 106, .08);
  transform: translateY(-2px);
}
.enter-label {
  font-family: 'Cinzel', serif;
  font-size: clamp(26px, 5vw, 42px);
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
}
.enter-hint { font-style: italic; font-size: clamp(15px, 2vw, 19px); color: var(--muted); }
.gate-note {
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  padding-bottom: 8px;
}

/* ---------- Bouton son ---------- */
.mute {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  padding: 8px 14px;
  background: rgba(0, 0, 0, .35);
  color: var(--muted);
  border: 1px solid rgba(143, 131, 116, .4);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: .15em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s, color .2s, border-color .2s;
}
body.live .mute { opacity: .8; pointer-events: auto; }
body.void .mute { opacity: 0; pointer-events: none; transition: opacity 3s; }
.mute:hover { color: var(--ink); border-color: var(--gold); }