/* =====================================================================
   THE BIRTHDAY RITUAL — main.css
   BLOOD, BLACK & CHAOS
   ===================================================================== */
@font-face { font-family: 'Metal Mania'; src: url('../assets/fonts/MetalMania-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Pirata One'; src: url('../assets/fonts/PirataOne-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; src: url('../assets/fonts/BarlowCondensed-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; src: url('../assets/fonts/BarlowCondensed-700.woff2') format('woff2'); font-display: swap; }

:root {
  --bg: #050505;
  --bg2: #0D0D0D;
  --blood: #A00000;
  --ember: #FF1717;
  --bone: #E8E1D6;
  --steel: #575757;
  --f-metal: 'Metal Mania', 'Pirata One', 'UnifrakturCook', Impact, 'Arial Black', fantasy;
  --f-ind: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Oswald, Impact, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --shake-x: 0px; --shake-y: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--bone); overflow: hidden; }
body {
  font-family: var(--f-ind); font-weight: 500; font-size: 18px; letter-spacing: .04em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
body.is-loading #main { opacity: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--blood); color: var(--bone); padding: 10px 16px; transition: top .2s; }
.skip-link:focus { top: 8px; }
[hidden] { display: none !important; }

/* ---------- couches de rendu ---------- */
#bg { position: fixed; inset: 0; z-index: 0; background:
  radial-gradient(120% 90% at 50% 110%, #2a0000 0%, #0d0000 38%, var(--bg) 70%); }
.bg-fog { position: absolute; inset: -20%; opacity: .0; background:
  radial-gradient(40% 30% at 30% 60%, rgba(160,0,0,.5), transparent 70%),
  radial-gradient(35% 28% at 72% 40%, rgba(255,23,23,.25), transparent 70%); filter: blur(30px); }
body.no-webgl .bg-fog { opacity: 1; animation: fogdrift 26s ease-in-out infinite alternate; }
body.no-webgl .bg-fog.f2 { animation-duration: 34s; animation-direction: alternate-reverse; opacity: .8; }
#embers2d, #gl, #fx, #flash2d { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#embers2d { z-index: 1; pointer-events: none; }
#gl { z-index: 2; touch-action: none; }
#fx { z-index: 6; pointer-events: none; }
#flash2d { z-index: 7; pointer-events: none; background: radial-gradient(circle at 50% 45%, #ffb3a8, var(--ember) 45%, var(--blood)); opacity: 0; mix-blend-mode: screen; }
body.has-webgl #embers2d { display: none; }
body.no-webgl #gl { display: none; }

/* ---------- actes ---------- */
#main { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.act {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(64px + var(--safe-t)) 20px calc(40px + var(--safe-b)); text-align: center; pointer-events: none;
}
.act button, .act a { pointer-events: auto; }

.kicker { font-family: var(--f-ind); font-weight: 700; font-size: clamp(14px, 2.2vw, 20px); letter-spacing: .6em; text-indent: .6em; color: var(--steel); margin: 0 0 18px; text-transform: uppercase; }
.hint { color: var(--steel); font-size: clamp(13px, 1.6vw, 16px); letter-spacing: .3em; text-transform: uppercase; margin: 22px 0 0; min-height: 1.4em; }

.whisper {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%);
  font-family: var(--f-ind); font-weight: 700; font-size: clamp(20px, 4.6vw, 54px);
  letter-spacing: .5em; text-indent: .5em; color: var(--bone); text-transform: uppercase; opacity: 0;
  text-shadow: 0 0 22px rgba(255,23,23,.55); padding: 0 16px;
}

/* ---------- logos SVG ---------- */
.logo-wrap { position: relative; width: min(94vw, 1500px); max-width: 100%; line-height: 0; opacity: 0; }
.logo-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-huge { width: min(96vw, 1600px); }
.logo-title { width: min(92vw, 1300px); margin-top: -.5vw; }
.hfb { font-family: var(--f-metal); margin: 0; font-size: clamp(22px, 5.8vw, 92px); line-height: 1; letter-spacing: .04em; color: var(--bone);
  text-shadow: 0 0 18px rgba(255,23,23,.7), 0 3px 0 #000, 0 0 3px var(--blood); opacity: 0; }
.hfb .ch { display: inline-block; will-change: transform, opacity, filter; }
.title-block { display: flex; flex-direction: column; align-items: center; width: 100%; }
.secret { position: absolute; left: 0; right: 0; bottom: calc(86px + var(--safe-b)); margin: 0; padding: 0 20px; font-weight: 700; font-size: clamp(14px, 2vw, 22px); letter-spacing: .25em; color: var(--ember); text-transform: uppercase; opacity: 0; text-shadow: 0 0 14px rgba(255,23,23,.8); }

/* ---------- acte II ---------- */
#act2 { justify-content: center; }
#seal-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
body.no-webgl #seal-fallback { display: flex; }
#seal-fallback canvas { position: absolute; width: min(86vw, 80vh); height: min(86vw, 80vh); mix-blend-mode: screen; }
#summon { margin-top: 0; }

/* ---------- boutons : cadre brisé, pas de carte ---------- */
.btn {
  position: relative; font-family: var(--f-metal); font-size: clamp(16px, 2.6vw, 28px); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone); background: linear-gradient(180deg, #1b0000, #070000 60%); border: 0; padding: 18px 34px 16px; min-height: 52px; cursor: pointer;
  clip-path: polygon(0 12%, 6% 0, 20% 8%, 38% 0, 62% 6%, 80% 0, 94% 8%, 100% 0, 100% 88%, 94% 100%, 76% 92%, 56% 100%, 34% 94%, 16% 100%, 5% 90%, 0 100%);
  filter: drop-shadow(0 0 14px rgba(255,23,23,.55)); transition: transform .15s, filter .2s, color .2s; max-width: min(92vw, 560px);
}
.btn::before { content: ''; position: absolute; inset: 3px; z-index: -1; background: var(--bg2);
  clip-path: polygon(0 12%, 6% 0, 20% 8%, 38% 0, 62% 6%, 80% 0, 94% 8%, 100% 0, 100% 88%, 94% 100%, 76% 92%, 56% 100%, 34% 94%, 16% 100%, 5% 90%, 0 100%); }
.btn { background: linear-gradient(180deg, var(--ember), var(--blood) 70%); z-index: 0; isolation: isolate; }
.btn::before { background: linear-gradient(180deg, #1a0303, #050505); }
.btn-label { position: relative; display: block; text-shadow: 0 0 10px rgba(255,23,23,.9), 0 2px 0 #000; }
.btn:hover, .btn:focus-visible { color: #fff; transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 0 26px rgba(255,23,23,.95)); outline: none; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-main { animation: btnpulse 2.2s ease-in-out infinite; }
.btn-ghost { font-size: clamp(13px, 1.9vw, 18px); padding: 12px 22px 10px; min-height: 44px; filter: drop-shadow(0 0 8px rgba(255,23,23,.3)); background: linear-gradient(180deg, var(--steel), #222); }
.btn-ghost .btn-label { text-shadow: 0 1px 0 #000; }
.btn[disabled] { opacity: .45; cursor: default; animation: none; }
.cake-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 12px; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }

/* ---------- HUD ---------- */
.hud { position: fixed; z-index: 20; top: calc(12px + var(--safe-t)); right: 12px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hud-bottom { top: auto; right: auto; left: 12px; bottom: calc(12px + var(--safe-b)); }
.hud-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; font-family: var(--f-ind); font-weight: 700; font-size: 14px; letter-spacing: .22em;
  color: var(--bone); background: rgba(5,5,5,.72); border: 1px solid var(--steel); cursor: pointer; text-transform: uppercase; backdrop-filter: blur(4px);
  transition: border-color .2s, color .2s, background .2s;
}
.hud-btn:hover, .hud-btn:focus-visible { border-color: var(--ember); color: #fff; }
.hud-btn[aria-pressed="true"] { border-color: var(--ember); color: var(--ember); }
.hud-chaos { opacity: .55; border-style: dashed; font-size: 12px; transition: opacity .3s, border-color .2s; }
.hud-chaos:hover, .hud-chaos:focus-visible, .hud-chaos[aria-pressed="true"] { opacity: 1; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { display: block; width: 3px; height: 4px; background: var(--steel); }
#sound[aria-pressed="true"] .bars i { background: var(--ember); animation: eq .9s ease-in-out infinite; }
#sound[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: .15s; } #sound[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: .3s; } #sound[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: .45s; }
body:not([data-act="1"]) #skip { display: none; }
.sigil { position: fixed; z-index: 19; right: 14px; bottom: calc(10px + var(--safe-b)); min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; font-family: var(--f-metal); font-size: 12px; color: #1a1a1a; cursor: pointer; transition: color .4s; }
.sigil:hover, .sigil:focus-visible { color: var(--blood); }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.vignette { background: radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.85) 100%); z-index: 8; }
.scan { z-index: 9; opacity: .22; background: repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.grain { z-index: 11; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1s steps(6) infinite; }

/* ---------- curseur incandescent ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 60; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.cursor i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, var(--ember) 30%, rgba(160,0,0,.0) 72%); box-shadow: 0 0 18px 4px rgba(255,23,23,.7); transition: transform .2s cubic-bezier(.2,.9,.3,1), background .2s, box-shadow .2s; }
body.has-cursor { cursor: none; }
body.has-cursor * { cursor: none !important; }
body.has-cursor .cursor { opacity: 1; }
body.cursor-hover .cursor i { transform: scale(2.4); background: radial-gradient(circle, transparent 0 40%, var(--bone) 42% 52%, rgba(255,23,23,.25) 56%); box-shadow: 0 0 28px 8px rgba(255,23,23,.9); }
body.cursor-down .cursor i { transform: scale(.7); }

/* ---------- acte V ---------- */
#act5 { overflow-y: auto; justify-content: flex-start; pointer-events: auto; }
.final { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 1200px; padding: 4vh 0; }
.final-line { margin: 0; font-family: var(--f-metal); font-size: clamp(26px, 7.4vw, 104px); line-height: 1.02; color: var(--bone); text-transform: uppercase; opacity: 0;
  text-shadow: 0 0 24px rgba(255,23,23,.55), 0 4px 0 #000; }
.final-line[data-i="1"] { color: var(--ember); }
.final-line[data-i="2"] { font-size: clamp(22px, 6.2vw, 88px); }
.long-live { margin: 3vh 0 0; font-family: var(--f-metal); font-weight: 400; font-size: clamp(34px, 10.5vw, 170px); line-height: .95; letter-spacing: .02em; text-transform: uppercase; opacity: 0;
  color: var(--bone); text-shadow: 0 0 30px var(--ember), 0 0 80px var(--blood), 0 5px 0 #000; }
.msg-en { margin: 3vh 0 0; max-width: 34ch; font-weight: 700; font-size: clamp(18px, 2.8vw, 34px); line-height: 1.2; letter-spacing: .06em; color: var(--bone); opacity: 0; }
.msg-fr { margin: 1.2vh 0 0; max-width: 40ch; font-size: clamp(15px, 2vw, 24px); line-height: 1.3; color: var(--steel); opacity: 0; font-style: italic; letter-spacing: .05em; }
.signature { margin: 5vh 0 12px; font-weight: 700; font-size: clamp(12px, 1.6vw, 17px); letter-spacing: .4em; text-indent: .4em; color: var(--steel); text-transform: uppercase; opacity: 0; }
.signature a { color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--blood); pointer-events: auto; padding: 8px 2px; }
.signature a:hover, .signature a:focus-visible { color: #fff; border-color: var(--ember); text-shadow: 0 0 12px var(--ember); }
#replay { opacity: 0; margin-top: 8px; }

/* ---------- gâteau de secours (sans WebGL) ---------- */
#cake-svg { display: none; width: min(78vw, 46vh, 420px); height: auto; margin-bottom: 6px; filter: drop-shadow(0 0 24px rgba(255,23,23,.45)); }
body.no-webgl #cake-svg { display: block; }
#cake-svg .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: flame .35s ease-in-out infinite alternate; }
#cake-svg .fl:nth-child(2n) { animation-duration: .27s; }
#cake-svg.out .fl { animation: none; opacity: 0; transition: opacity .8s; }
#cake-svg.out .cake-smoke { opacity: .8; animation: smoke 3s ease-out forwards; }

/* ---------- avertissements ---------- */
.noscript { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; padding: 24px; background: var(--bg); color: var(--ember); font-family: var(--f-metal); font-size: clamp(20px, 5vw, 40px); }

/* ---------- mode chaos ---------- */
body.chaos { --shake-x: 0px; }
body.chaos .hfb, body.chaos .final-line, body.chaos .long-live { animation: chaostext .12s steps(2) infinite; }
body.chaos .vignette { background: radial-gradient(120% 100% at 50% 50%, rgba(160,0,0,.15) 30%, rgba(0,0,0,.9) 100%); }
body.chaos .hud-chaos { color: var(--ember); }

/* ---------- visibilité contextuelle ---------- */
#act3 { justify-content: flex-end; }
body[data-act="0"] .hud-bottom, body[data-act="1"] .hud-bottom { display: none; }

#act4 { justify-content: flex-end; }
#act4 #cake-svg { margin-bottom: auto; margin-top: 4vh; }

.msg-en, .msg-fr, .signature { text-shadow: 0 0 14px #000, 0 2px 4px #000; }
#act5 { scrollbar-width: none; } #act5::-webkit-scrollbar { display: none; }

/* =================== DA AFFICHE PHOTOCOPIEE =================== */
.frame { position: fixed; inset: 0; z-index: 12; pointer-events: none; font-family: var(--f-ind); text-transform: uppercase; }
.cm { position: absolute; width: 26px; height: 26px; border: 0 solid var(--bone); opacity: .8; }
.cm.tl { left: 10px; top: 46px; border-width: 2px 0 0 2px; } .cm.tr { right: 10px; top: 46px; border-width: 2px 2px 0 0; }
.cm.bl { left: 10px; bottom: 10px; border-width: 0 0 2px 2px; } .cm.br { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; }
.ticker { position: absolute; left: 0; right: 0; top: 0; height: 30px; overflow: hidden; background: var(--bone); color: #050505; border-bottom: 3px solid var(--ember); display: flex; align-items: center; }
.ticker-track { display: flex; white-space: nowrap; animation: tick 28s linear infinite; font-weight: 700; font-size: 14px; letter-spacing: .2em; }
@keyframes tick { to { transform: translateX(-50%); } }
.actnum { position: absolute; left: 18px; top: 52px; display: flex; align-items: baseline; gap: 6px; color: var(--bone); mix-blend-mode: difference; }
.actnum b { font-family: var(--f-metal); font-weight: 400; font-size: clamp(54px, 9vw, 120px); line-height: .8; letter-spacing: -.02em; }
.actnum span { font-weight: 700; font-size: 18px; color: var(--ember); }
.actnum em { font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .3em; margin-left: 10px; writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-end; color: var(--bone); }
.rec { position: absolute; left: 18px; bottom: 16px; font-weight: 700; font-size: 12px; letter-spacing: .24em; color: var(--bone); display: none; align-items: center; gap: 8px; }
.rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hud { top: calc(40px + var(--safe-t)); }
.hud-bottom { left: auto; right: 18px; bottom: 46px; }
.sigil { right: auto; left: 14px; bottom: 36px; }
body[data-act="1"] .rec { display: flex; left: auto; right: 22px; bottom: 16px; }

.btn { clip-path: none; filter: none; background: var(--bone); color: #050505; border: 3px solid #050505; padding: 20px 38px 18px; min-height: 64px;
  box-shadow: 7px 7px 0 var(--ember), 7px 7px 0 3px #050505; transform: rotate(-1.6deg); font-size: clamp(20px, 3.2vw, 38px); letter-spacing: .06em; transition: transform .12s, box-shadow .12s, background .12s, color .12s; }
.btn::before { display: none; }
.btn-label { text-shadow: none; }
.btn:hover, .btn:focus-visible { filter: none; color: var(--bone); background: var(--ember); transform: rotate(1deg) translate(-3px,-3px); box-shadow: 11px 11px 0 #050505, 11px 11px 0 3px var(--bone); }
.btn:active { transform: rotate(0) translate(4px,4px); box-shadow: 2px 2px 0 var(--ember); }
.btn-main { animation: none; }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--bone); box-shadow: 5px 5px 0 var(--blood); min-height: 48px; font-size: clamp(14px, 2vw, 20px); padding: 12px 22px 10px; transform: rotate(1deg); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--bone); color: #050505; }
.kicker { color: var(--bone); background: #050505; border: 2px solid var(--bone); padding: 6px 14px 4px; font-size: clamp(13px, 1.6vw, 18px); letter-spacing: .5em; }
.hint { color: var(--bone); background: rgba(5,5,5,.7); padding: 4px 10px; }
.whisper { font-family: var(--f-metal); font-size: clamp(22px, 5.4vw, 70px); letter-spacing: .12em; text-indent: .12em; text-shadow: 0 0 30px rgba(255,23,23,.8), 4px 4px 0 var(--blood); }
.hud-btn { border-radius: 0; border: 2px solid var(--bone); background: #050505; }
@media (max-width: 640px) { .whisper { font-size: clamp(22px, 8vw, 40px); letter-spacing: .06em; } .actnum b { font-size: 46px; } .actnum em { display: none; } .ticker-track { font-size: 12px; } .btn { font-size: clamp(18px, 6vw, 26px); } .hud-bottom { right: 10px; bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { .ticker-track, .rec i { animation: none; } }

.hud.hud-bottom { top: auto; }

.logo-title { width: min(92vw, 1300px, 165vh); }
.hfb { font-size: clamp(20px, min(5.8vw, 8.5vh), 92px); }