/* LE MANOIR DES INSOMNIAQUES (niveau 16 du mode Histoire), le tir sur rails : l'écran d'une borne d'arcade qui a pris l'eau. src/story/rail/hud.js */
.rl, .rl-over { position: fixed; inset: 0; pointer-events: none; --u: min(calc(100vw / 640), calc(100vh / 360)); font-family: 'Anton', 'Barlow Condensed', sans-serif; color: #f4ecd8; overflow: hidden; user-select: none; }
.rl { z-index: 5; opacity: 0; transition: opacity .25s; }
.rl.on { opacity: 1; }
.rl-over { z-index: 9; }
body.rl-nocursor, body.rl-nocursor canvas { cursor: none !important; }

.rl-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 56%, rgba(10,0,6,.52) 100%); }
.rl-red { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(160,0,0,.1) 30%, rgba(190,0,10,.82) 100%); --a: 1; }
.rl-red.on { animation: rl-red .55s ease-out; }
@keyframes rl-red { 0% { opacity: var(--a); } 100% { opacity: 0; } }

.rl-blood i { position: absolute; display: block; background-size: contain; background-repeat: no-repeat; opacity: 0; }
.rl-blood i.on { animation: rl-spl 6s ease-in forwards; }
@keyframes rl-spl { 0% { opacity: .96; translate: 0 0; scale: .7; } 5% { scale: 1; } 60% { opacity: .92; } 100% { opacity: 0; translate: 0 22vh; scale: 1 1.25; } }
.rl-warn { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 0 12vw; text-align: center; background: #050304; color: #e8ddc8; font-family: 'Barlow Condensed', sans-serif; z-index: 8; }
.rl-warn.on { display: flex; }
.rl-warn small { font-size: 2.4vh; letter-spacing: .5em; color: #d8262c; }
.rl-warn b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 6.2vh; line-height: 1.15; color: #fff4d8; }
.rl-warn p { font-size: 3.2vh; max-width: 62ch; margin: 0; }
.rl-warn em { font-size: 2.4vh; color: #a89a84; font-style: normal; }
.rl-warn i { font-size: 2.6vh; font-style: normal; color: #ffd23a; animation: rl-warnb 1s steps(2) infinite; }
@keyframes rl-warnb { 50% { opacity: .2; } }

/* le viseur : un rond rouge de cible, quatre traits, qui se resserre sur un ennemi */
.rl-cross { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.rl-cross u { position: absolute; left: calc(var(--u) * -13); top: calc(var(--u) * -13); width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; border: calc(var(--u) * 1.2) solid #ff2a2a; box-shadow: 0 0 calc(var(--u) * 2) rgba(0,0,0,.9), inset 0 0 calc(var(--u) * 1.4) rgba(0,0,0,.7); transition: transform .08s, border-color .08s; box-sizing: border-box; }
.rl-cross i { position: absolute; background: #fff; box-shadow: 0 0 calc(var(--u) * 1) #000; }
.rl-cross i:nth-child(1), .rl-cross i:nth-child(2) { width: calc(var(--u) * 1.2); height: calc(var(--u) * 7); left: calc(var(--u) * -.6); }
.rl-cross i:nth-child(3), .rl-cross i:nth-child(4) { height: calc(var(--u) * 1.2); width: calc(var(--u) * 7); top: calc(var(--u) * -.6); }
.rl-cross i:nth-child(1) { top: calc(var(--u) * -17); } .rl-cross i:nth-child(2) { top: calc(var(--u) * 10); } .rl-cross i:nth-child(3) { left: calc(var(--u) * -17); } .rl-cross i:nth-child(4) { left: calc(var(--u) * 10); }
.rl-cross.hot u { transform: scale(.72); border-color: #ffe23a; }
.rl-cross.off u { border-color: #5ac8ff; transform: scale(1.3); }
.rl-cross.off i { opacity: .35; }
.rl-cross.kick u { animation: rl-kick .12s ease-out; }
@keyframes rl-kick { 0% { scale: 1.5; } 100% { scale: 1; } }


.rl.noaim .rl-cross { display: none; }

/* la touche : quatre traits en croix sur le viseur (blanc, or sur la tête, rouge quand il meurt) */
.rl-cross s { display: none; }
.rl-hm { position: absolute; left: 0; top: 0; opacity: 0; }
.rl-hm a { position: absolute; left: calc(var(--u) * -.8); top: calc(var(--u) * -9); width: calc(var(--u) * 1.6); height: calc(var(--u) * 6); background: #fff; box-shadow: 0 0 calc(var(--u) * 1) #000; transform-origin: 50% calc(var(--u) * 9); }
.rl-hm a:nth-child(1) { transform: rotate(45deg); } .rl-hm a:nth-child(2) { transform: rotate(135deg); } .rl-hm a:nth-child(3) { transform: rotate(225deg); } .rl-hm a:nth-child(4) { transform: rotate(315deg); }
.rl-hm.on { animation: rl-hm .18s ease-out; }
.rl-hm.head a { background: #ffd23a; } .rl-hm.kill a { background: #ff2a2a; height: calc(var(--u) * 8); }
.rl-hm.kill.on { animation: rl-hmk .3s ease-out; }
@keyframes rl-hm { 0% { opacity: 1; scale: .7; } 100% { opacity: 0; scale: 1.25; } }
@keyframes rl-hmk { 0% { opacity: 1; scale: .6; rotate: 0deg; } 40% { opacity: 1; scale: 1.3; } 100% { opacity: 0; scale: 1.6; rotate: 12deg; } }
/* la recharge : une barre sous le viseur */
.rl-rb { position: absolute; left: calc(var(--u) * -20); top: calc(var(--u) * 22); width: calc(var(--u) * 40); height: calc(var(--u) * 3.4); background: rgba(10,6,8,.8); border: calc(var(--u) * .7) solid #ffe6a0; opacity: 0; box-sizing: border-box; }
.rl-rb.on { opacity: 1; }
.rl-rb q { display: block; height: 100%; background: #ffd23a; transform: scaleX(0); transform-origin: left; quotes: none; }
.rl-rb q::before, .rl-rb q::after { content: none; }

/* ce qui arrive sans qu'on le voie : une flèche au bord de l'écran */
.rl-arws i { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform; }
.rl-arws i::before { content: ''; position: absolute; left: calc(var(--u) * -13); top: calc(var(--u) * -11); border-left: calc(var(--u) * 24) solid #ffb030; border-top: calc(var(--u) * 11) solid transparent; border-bottom: calc(var(--u) * 11) solid transparent; filter: drop-shadow(0 0 calc(var(--u) * 2) #000); }
.rl-arws i.on { opacity: 1; }
.rl-arws i.hot::before { border-left-color: #ff2a2a; animation: rl-arw .3s ease-in-out infinite alternate; }
@keyframes rl-arw { from { scale: 1; } to { scale: 1.35; } }

/* d'où vient le coup : un arc rouge du côté qui a frappé */
.rl-from { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transform: rotate(var(--a, 0rad)); }
.rl-from::before { content: ''; position: absolute; left: calc(var(--u) * 110); top: calc(var(--u) * -80); width: calc(var(--u) * 46); height: calc(var(--u) * 160); border-radius: 0 100% 100% 0 / 0 50% 50% 0; background: radial-gradient(ellipse at 100% 50%, rgba(255,20,10,.95), rgba(190,0,0,0) 72%); }
.rl-from.on { animation: rl-from .8s ease-out; }
@keyframes rl-from { 0% { opacity: 1; } 55% { opacity: .9; } 100% { opacity: 0; } }

/* la dernière bougie */
.rl-lowv { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 48%, rgba(170,0,6,.6) 100%); }
.rl-lowv.on { animation: rl-lowv .9s ease-in-out infinite; }
@keyframes rl-lowv { 0%, 100% { opacity: .35; } 18% { opacity: 1; } 34% { opacity: .55; } 48% { opacity: .9; } }

/* le haut de l'écran : les bougies, le score */
.rl-top { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: calc(var(--u) * 12); display: flex; justify-content: space-between; align-items: flex-start; }
.rl-lives { display: flex; gap: calc(var(--u) * 7); }
.rl-lives i { position: relative; width: calc(var(--u) * 8); height: calc(var(--u) * 22); background: linear-gradient(90deg, #d8cdb0, #f7efd8 45%, #b8ac8c); border-radius: calc(var(--u) * 1); margin-top: calc(var(--u) * 12); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0,0,0,.8); }
.rl-lives i u { position: absolute; left: 50%; top: calc(var(--u) * -13); width: calc(var(--u) * 8); height: calc(var(--u) * 13); translate: -50% 0; border-radius: 50% 50% 46% 46% / 66% 66% 34% 34%; background: radial-gradient(ellipse at 50% 75%, #fff8d0 12%, #ffc23a 44%, #ff6a18 72%, rgba(255,60,0,0) 100%); box-shadow: 0 0 calc(var(--u) * 8) #ff9030; opacity: 0; }
.rl-lives i.on u { opacity: 1; animation: rl-flame .5s ease-in-out infinite alternate; }
.rl-lives i:not(.on) { filter: brightness(.42) grayscale(.6); }
@keyframes rl-flame { from { transform: scaleY(1) skewX(-4deg); } to { transform: scaleY(.84) skewX(5deg); } }
.rl-score { text-align: right; line-height: 1; text-shadow: 0 calc(var(--u) * 1) 0 #000, 0 0 calc(var(--u) * 5) #000; }
.rl-score small { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .2em; font-size: calc(var(--u) * 7); color: #ff5a4a; }
.rl-score b { font-weight: 400; font-size: calc(var(--u) * 19); letter-spacing: .06em; color: #fff4c8; font-variant-numeric: tabular-nums; }

.rl-combo { position: absolute; right: calc(var(--u) * 18); top: calc(var(--u) * 56); text-align: right; opacity: 0; line-height: .9; text-shadow: 0 calc(var(--u) * 1) 0 #000, 0 0 calc(var(--u) * 6) #000; }
.rl-combo.on { opacity: 1; }
.rl-combo.kick { animation: rl-cb .2s ease-out; }
@keyframes rl-cb { 0% { scale: 1.45; } 100% { scale: 1; } }
.rl-combo b { display: block; font-family: 'Bangers', 'Anton', sans-serif; font-weight: 400; font-size: calc(var(--u) * 30); color: #ffd23a; }
.rl-combo small { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .2em; font-size: calc(var(--u) * 7); }

/* le bas : l'arme, ses balles */
.rl-ammo { position: absolute; right: calc(var(--u) * 16); bottom: calc(var(--u) * 12); text-align: right; }
.rl-wp { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .14em; font-size: calc(var(--u) * 7.4); color: #ffe6a0; text-shadow: 0 0 calc(var(--u) * 3) #000, 0 calc(var(--u) * .6) 0 #000; margin-bottom: calc(var(--u) * 2); }
.rl-bul { display: flex; gap: calc(var(--u) * 2.4); justify-content: flex-end; align-items: flex-end; }
.rl-bul i { width: calc(var(--u) * 6); height: calc(var(--u) * 18); border-radius: 50% 50% 8% 8% / 34% 34% 4% 4%; background: #2a2428; opacity: .55; box-shadow: 0 0 calc(var(--u) * 1) #000; }
.rl-bul i.on { background: linear-gradient(90deg, #8a5a18, #f4cc5a 40%, #a66e1a); opacity: 1; }
.rl-bul i.pompe { width: calc(var(--u) * 8); border-radius: calc(var(--u) * 1.4); }
.rl-bul i.pompe.on { background: linear-gradient(180deg, #b82a22 62%, #d8a83a 62%); }
.rl-bul .n { font-weight: 400; font-size: calc(var(--u) * 20); color: #e8cf5a; text-shadow: 0 0 calc(var(--u) * 4) #000; }

.rl-rld { position: absolute; left: 50%; top: 66%; translate: -50% 0; text-align: center; font-size: calc(var(--u) * 26); letter-spacing: .06em; color: #ff3a2a; text-shadow: 0 calc(var(--u) * 1.2) 0 #000, 0 0 calc(var(--u) * 10) #000; opacity: 0; line-height: 1; }
.rl-rld small { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: calc(var(--u) * 8); letter-spacing: .08em; color: #fff; margin-top: calc(var(--u) * 2); }
.rl-rld.on { opacity: 1; animation: rl-blink .45s steps(2) infinite; }
@keyframes rl-blink { 50% { opacity: .35; } }

.rl-boss { position: absolute; left: 50%; bottom: calc(var(--u) * 16); translate: -50% 0; width: calc(var(--u) * 240); text-align: center; opacity: 0; transition: opacity .3s; }
.rl-boss.on { opacity: 1; }
.rl-boss span { display: block; font-size: calc(var(--u) * 10); letter-spacing: .1em; color: #ffd8a0; text-shadow: 0 0 calc(var(--u) * 4) #000, 0 calc(var(--u) * .8) 0 #000; margin-bottom: calc(var(--u) * 2); }
.rl-boss i { display: block; height: calc(var(--u) * 7); background: #1a080a; border: calc(var(--u) * 1) solid #e8c070; box-shadow: 0 0 calc(var(--u) * 5) #000; }
.rl-boss u { display: block; height: 100%; background: linear-gradient(180deg, #ff5a3a, #a80c14); transform-origin: left; transition: transform .12s; }

.rl-say { position: absolute; left: 50%; bottom: calc(var(--u) * 30); translate: -50% 0; max-width: calc(var(--u) * 430); text-align: center; opacity: 0; transition: opacity .2s; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: calc(var(--u) * 11); line-height: 1.12; text-shadow: 0 calc(var(--u) * .8) 0 #000, 0 0 calc(var(--u) * 5) #000; }
.rl-say.on { opacity: 1; }
.rl-say b { display: block; color: #ffd23a; font-weight: 700; font-size: calc(var(--u) * 7); letter-spacing: .18em; }
.rl-tip { position: absolute; left: 50%; top: 24%; translate: -50% 0; text-align: center; opacity: 0; transition: opacity .2s; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .03em; font-size: calc(var(--u) * 13); text-shadow: 0 calc(var(--u) * 1) 0 #000, 0 0 calc(var(--u) * 6) #000; color: #fff; }
.rl-tip.on { opacity: 1; }
.rl-tip em { font-style: normal; color: #ffd23a; }

.rl-pop { position: absolute; translate: -50% -50%; opacity: 0; font-family: 'Bangers', 'Anton', sans-serif; font-size: calc(var(--u) * 13); letter-spacing: .04em; color: #fff; text-shadow: 0 calc(var(--u) * .9) 0 #000, 0 0 calc(var(--u) * 4) #000; white-space: nowrap; }
.rl-pop.on { animation: rl-pop .85s ease-out forwards; }
.rl-pop.head { color: #ffd23a; font-size: calc(var(--u) * 20); }
.rl-pop.bad { color: #ff4a3a; font-size: calc(var(--u) * 16); }
.rl-pop.good { color: #7cff9a; font-size: calc(var(--u) * 17); }
.rl-pop.cling { color: #b8c8e0; font-size: calc(var(--u) * 11); }
@keyframes rl-pop { 0% { opacity: 1; transform: translateY(0) scale(1.4); } 18% { transform: translateY(-1vh) scale(1); } 100% { opacity: 0; transform: translateY(-7vh) scale(1); } }

/* le titre d'une zone */
.rl-title { position: absolute; left: 0; right: 0; top: 30%; text-align: center; opacity: 0; line-height: 1; text-shadow: 0 calc(var(--u) * 1.4) 0 #000, 0 0 calc(var(--u) * 14) #000; }
.rl-title.on { animation: rl-title 3.4s ease-out forwards; }
.rl-title small { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .34em; font-size: calc(var(--u) * 9); color: #ff5a4a; }
.rl-title b { display: block; font-family: 'Rubik Dirt', 'Anton', sans-serif; font-weight: 400; font-size: calc(var(--u) * 38); color: #f6ecd6; margin: calc(var(--u) * 3) 0; }
.rl-title em { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 600; font-size: calc(var(--u) * 11); color: #e0d8c8; }
@keyframes rl-title { 0% { opacity: 0; letter-spacing: .2em; } 9% { opacity: 1; letter-spacing: 0; } 82% { opacity: 1; } 100% { opacity: 0; } }

.rl-fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .3s; }
.rl-fade.on { opacity: 1; }

/* LA FICHE DE BOSS : l'image figée, trois lignes en grand */
.rl-fiche { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(120,0,6,.8) 0%, rgba(50,0,4,.5) 42%, rgba(0,0,0,0) 66%); }
.rl-fiche.on { opacity: 1; animation: rl-fiche .18s steps(3); }
@keyframes rl-fiche { 0% { opacity: 0; } 50% { opacity: 1; filter: brightness(2.4); } }
.rl-fi { position: absolute; left: calc(var(--u) * 30); top: 50%; translate: 0 -50%; max-width: calc(var(--u) * 380); }
.rl-fl { opacity: 0; line-height: 1; margin-bottom: calc(var(--u) * 12); text-shadow: 0 calc(var(--u) * 1.4) 0 #000, 0 0 calc(var(--u) * 8) #000; }
.rl-fiche.on .rl-fl { animation: rl-fl .28s ease-out forwards; }
.rl-fl.t { animation-delay: .08s !important; } .rl-fl.n { animation-delay: .75s !important; } .rl-fl.f { animation-delay: 1.8s !important; } .rl-fl.o { animation-delay: 2.7s !important; }
@keyframes rl-fl { 0% { opacity: 0; translate: calc(var(--u) * -30) 0; } 100% { opacity: 1; translate: 0 0; } }
.rl-fl span { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .24em; font-size: calc(var(--u) * 9); color: #ffb0a0; margin-bottom: calc(var(--u) * 2); }
.rl-fl b { font-weight: 400; color: #fff; font-size: calc(var(--u) * 20); }
.rl-fl.n b { font-family: 'Rubik Dirt', 'Anton', sans-serif; font-size: calc(var(--u) * 46); color: #ffe23a; }
.rl-fl.f b { color: #ff5a3a; font-size: calc(var(--u) * 26); }
.rl-fl.o { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 600; font-size: calc(var(--u) * 11); color: #f0e8d8; }

/* CONTINUE ? */
.rl-cont { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(50,0,4,.72), rgba(4,0,2,.95)); transition: opacity .3s; line-height: 1; text-shadow: 0 calc(var(--u) * 1.4) 0 #000; }
.rl-cont.on { opacity: 1; }
.rl-cont small { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .28em; font-size: calc(var(--u) * 9); color: #ff6a5a; }
.rl-cont b { font-family: 'Rubik Dirt', 'Anton', sans-serif; font-weight: 400; font-size: calc(var(--u) * 56); margin: calc(var(--u) * 7) 0 calc(var(--u) * 3); color: #fff; }
.rl-cont u { text-decoration: none; font-size: calc(var(--u) * 80); color: #ffd23a; font-variant-numeric: tabular-nums; }
.rl-cont em { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 600; font-size: calc(var(--u) * 13); margin-top: calc(var(--u) * 10); color: #f0e8d8; }
.rl-cont i { font-family: 'Barlow Condensed', sans-serif; font-style: normal; font-weight: 600; font-size: calc(var(--u) * 8); margin-top: calc(var(--u) * 12); color: rgba(240,232,216,.7); }

/* le classement */
.rl-rank { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; background: linear-gradient(180deg, rgba(8,4,12,.86), rgba(30,4,8,.95)); transition: opacity .4s; line-height: 1; text-shadow: 0 calc(var(--u) * 1) 0 #000; }
.rl-rank.on { opacity: 1; }
.rl-rank > small { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .3em; font-size: calc(var(--u) * 8); color: #ff6a5a; }
.rl-rt { font-family: 'Rubik Dirt', 'Anton', sans-serif; font-weight: 400; font-size: calc(var(--u) * 24); margin: calc(var(--u) * 4) 0 calc(var(--u) * 12); }
.rl-rr, .rl-rs { display: flex; justify-content: space-between; width: calc(var(--u) * 280); font-size: calc(var(--u) * 13); padding: calc(var(--u) * 2) 0; opacity: 0; animation: rl-in .25s forwards; }
.rl-rr span, .rl-rs span { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; color: #e0d8c8; }
.rl-rr b, .rl-rs b { font-weight: 400; font-variant-numeric: tabular-nums; }
.rl-rs { border-top: calc(var(--u) * 1) solid #e8c070; margin-top: calc(var(--u) * 4); padding-top: calc(var(--u) * 6); font-size: calc(var(--u) * 19); color: #ffd23a; }
.rl-rl { font-family: 'Rubik Dirt', 'Anton', sans-serif; font-size: calc(var(--u) * 92); color: #ff3a2a; margin-top: calc(var(--u) * 4); opacity: 0; animation: rl-stamp .32s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.rl-ra { font-size: calc(var(--u) * 15); text-align: center; color: #fff; opacity: 0; animation: rl-in .3s forwards; }
.rl-ra small { display: block; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 600; font-size: calc(var(--u) * 10); color: #e0d8c8; margin-top: calc(var(--u) * 3); }
.rl-rk { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: calc(var(--u) * 8); color: rgba(240,232,216,.7); margin-top: calc(var(--u) * 9); opacity: 0; animation: rl-in .3s forwards; }
@keyframes rl-in { from { opacity: 0; translate: 0 calc(var(--u) * 5); } to { opacity: 1; translate: 0 0; } }
@keyframes rl-stamp { from { opacity: 0; scale: 3; } to { opacity: 1; scale: 1; } }