/* Recess · Rivals: intro card, result card and "challenger approaching" overlay. Everything is scoped under .rv- */
.rv-ov{--c:#ff5fb8;--rvsans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;position:fixed;inset:0;z-index:2147482000;overflow:hidden;color:#fbefe0;font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 background:radial-gradient(120% 90% at 30% 40%,color-mix(in srgb,var(--c) 22%,#1a0a24) 0,#0d0614 60%,#05020a 100%);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;animation:rvIn .18s ease-out}
.rv-ov.out{animation:rvOut .32s ease-in forwards;pointer-events:none}
@keyframes rvIn{from{opacity:0}}
@keyframes rvOut{to{opacity:0;transform:scale(1.04)}}
.rv-ov:focus{outline:none}
.rv-lines{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.9}
.rv-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:rvFlash .5s ease-out}
@keyframes rvFlash{0%{opacity:.85}100%{opacity:0}}
.rv-slash{position:absolute;left:-30%;right:-30%;top:58%;height:34%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 70%,transparent) 30%,var(--c) 50%,color-mix(in srgb,var(--c) 70%,transparent) 70%,transparent);transform:rotate(-9deg) translateX(-110%);opacity:.32;filter:blur(1px);animation:rvSlash .7s cubic-bezier(.2,.8,.2,1) .25s forwards}
.rv-slash.b{top:64%;height:7%;opacity:.8;animation-delay:.36s;background:linear-gradient(90deg,transparent,#fff 50%,transparent)}
@keyframes rvSlash{to{transform:rotate(-9deg) translateX(0)}}
.rv-ghost{position:absolute;left:0;right:0;top:4%;white-space:nowrap;font:italic 900 clamp(70px,17vw,210px)/1 Impact,"Arial Black","Helvetica Neue",sans-serif;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--c) 45%,transparent);opacity:.55;animation:rvGhost 9s linear infinite}
@keyframes rvGhost{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* portrait with a layered rise and fall */
.rv-por{position:absolute;left:0;bottom:0;width:min(56vw,calc(100vh * .75));height:100%;transform:translateX(-60%);opacity:0;animation:rvPor .55s cubic-bezier(.15,.9,.25,1.05) .05s forwards;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent),linear-gradient(#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 70%,transparent),linear-gradient(#000 78%,transparent);mask-composite:intersect}
@keyframes rvPor{to{transform:none;opacity:1}}
.rv-por i,.rv-breathe i{position:absolute;inset:0;background:center 18%/cover no-repeat;will-change:transform}
.rv-por .l1,.rv-breathe .l1{transform-origin:50% 100%;animation:rvBreath 5.2s ease-in-out infinite}
.rv-por .l2,.rv-breathe .l2{-webkit-mask-image:radial-gradient(42% 30% at 50% 26%,#000 55%,transparent 100%);mask-image:radial-gradient(42% 30% at 50% 26%,#000 55%,transparent 100%);animation:rvHead 5.2s ease-in-out -.35s infinite}
.rv-por .glow,.rv-breathe .glow{position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 30%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%);mix-blend-mode:screen;animation:rvGlow 5.2s ease-in-out infinite}
@keyframes rvBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.006,1.016)}}
@keyframes rvHead{0%,100%{transform:translateY(0)}50%{transform:translateY(-.9%)}}
@keyframes rvGlow{0%,100%{opacity:.55}50%{opacity:.95}}
/* name plate */
.rv-plate{position:absolute;right:max(4vw,18px);top:50%;width:min(48vw,620px);transform:translateY(-50%);text-align:left}
.rv-tag{display:inline-flex;gap:8px;align-items:center;padding:4px 12px 4px 10px;background:var(--c);color:#14081c;font:800 12px/1.2 var(--rvsans);letter-spacing:.22em;text-transform:uppercase;transform:skewX(-14deg) translateX(40px);opacity:0;animation:rvTag .35s ease-out .45s forwards}
.rv-tag b{display:inline-block;transform:skewX(14deg)}
@keyframes rvTag{to{opacity:1;transform:skewX(-14deg)}}
.rv-name{margin:10px 0 0;font:italic 900 clamp(40px,7.2vw,96px)/.9 Impact,"Arial Black","Helvetica Neue",sans-serif;letter-spacing:.005em;text-transform:uppercase;color:#fff;text-shadow:3px 3px 0 var(--c),0 0 26px color-mix(in srgb,var(--c) 70%,transparent),0 6px 30px rgba(0,0,0,.8);transform:scale(2.4) translateX(10%);opacity:0;animation:rvSlam .32s cubic-bezier(.3,1.6,.5,1) .62s forwards}
@keyframes rvSlam{60%{opacity:1}to{opacity:1;transform:none}}
.rv-nick{margin:8px 0 0;font:italic 600 clamp(24px,3.6vw,42px)/1.05 "Cormorant Garamond",Georgia,serif;color:var(--c);text-shadow:0 0 18px color-mix(in srgb,var(--c) 55%,transparent),0 2px 12px #000;opacity:0;transform:translateX(-24px);animation:rvRise .4s ease-out .95s forwards}
.rv-sig{display:flex;gap:10px;align-items:baseline;margin-top:14px;padding:8px 12px;border-left:3px solid var(--c);background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.1));opacity:0;transform:translateX(-24px);animation:rvRise .4s ease-out 1.2s forwards}
.rv-sig small{flex:none;font:700 10.5px/1 var(--rvsans);letter-spacing:.22em;text-transform:uppercase;color:#cbb6cf}
.rv-sig b{font:800 clamp(15px,1.8vw,19px)/1.2 var(--rvsans);color:#fff}
.rv-sig span{display:block;font-size:13px;color:#d8c2d6;margin-top:2px}
.rv-taunt{margin:16px 0 0;font:italic 500 clamp(19px,2.3vw,26px)/1.3 "Cormorant Garamond",Georgia,serif;color:#fff6ec;text-shadow:0 2px 12px #000;min-height:2.6em;opacity:0;animation:rvRise .3s ease-out 1.45s forwards}
.rv-taunt::before{content:'“'}.rv-taunt.done::after{content:'”'}
@keyframes rvRise{to{opacity:1;transform:none}}
.rv-hint{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;font:700 11px/1 var(--rvsans);letter-spacing:.3em;text-transform:uppercase;color:rgba(251,239,224,.6);animation:rvBlink 1.6s ease-in-out infinite}
@keyframes rvBlink{50%{opacity:.35}}
.rv-boss .rv-name{color:#fff7e0;text-shadow:3px 3px 0 #8a5cff,0 0 30px #c9a2ff,0 0 60px rgba(255,215,120,.5)}
.rv-boss .rv-tag{background:linear-gradient(90deg,#ffd77a,#c9a2ff)}
/* phone / tall layout: portrait on top, plate underneath */
@media (max-aspect-ratio:4/5){
 .rv-por{left:0;right:0;width:auto;height:66%;top:0;bottom:auto;transform:translateY(-30%);-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
 .rv-plate{left:20px;right:20px;width:auto;top:auto;bottom:calc(44px + env(safe-area-inset-bottom));transform:none}
 .rv-slash{top:44%;height:26%}.rv-slash.b{top:52%}
 .rv-ghost{top:auto;bottom:38%}
 .rv-name{font-size:clamp(38px,12vw,64px)}
 .rv-taunt{min-height:3.9em}
}
/* ---------- result card ---------- */
.rv-res{display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));cursor:default;overflow-y:auto}
.rv-card{position:relative;width:min(760px,100%);display:grid;grid-template-columns:minmax(0,38%) 1fr;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,rgba(52,20,64,.94),rgba(18,8,28,.96));border:1px solid color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 0 50px color-mix(in srgb,var(--c) 28%,transparent),0 20px 50px rgba(0,0,0,.6);animation:rvCard .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes rvCard{from{opacity:0;transform:translateY(20px) scale(.96)}}
.rv-card .rv-breathe{position:relative;min-height:320px;overflow:hidden}
.rv-card .rv-breathe::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(18,8,28,.95))}
.rv-lose .rv-breathe{filter:none}.rv-win .rv-breathe i{filter:saturate(.7) brightness(.85)}
.rv-stamp{position:absolute;left:50%;top:44%;z-index:2;padding:6px 14px;border:4px solid #ff4a5a;border-radius:6px;color:#ff4a5a;font:italic 900 clamp(26px,5vw,40px)/1 Impact,"Arial Black",sans-serif;letter-spacing:.08em;text-transform:uppercase;background:rgba(20,6,14,.35);transform:translate(-50%,-50%) rotate(-14deg) scale(2.6);opacity:0;animation:rvStamp .35s cubic-bezier(.4,1.6,.6,1) .35s forwards;text-shadow:0 0 12px rgba(255,74,90,.6);box-shadow:0 0 18px rgba(255,74,90,.35)}
@keyframes rvStamp{to{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
.rv-body{padding:22px 22px 18px}
.rv-res .rv-tag{animation-delay:.1s}
.rv-head{margin:10px 0 0;font:italic 900 clamp(28px,4.4vw,46px)/.95 Impact,"Arial Black",sans-serif;text-transform:uppercase;color:#fff;text-shadow:2px 2px 0 var(--c),0 0 22px color-mix(in srgb,var(--c) 50%,transparent)}
.rv-sub{margin:6px 0 0;color:#d8c2d6;font-size:13.5px}
.rv-q{margin:14px 0 0;font:italic 500 21px/1.3 "Cormorant Garamond",Georgia,serif;color:#fff6ec}
.rv-q cite{display:block;margin-top:4px;font:600 11px/1 var(--rvsans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.rv-take{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,220,240,.12);font-size:13.5px;color:#e9dcea}
.rv-take b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#43e6d8;margin-bottom:3px}
.rv-next{position:relative;display:flex;gap:12px;align-items:center;margin:14px 0 0;padding:10px 12px;border-radius:12px;overflow:hidden;background:#1a0710;border:1px solid rgba(255,90,78,.5);cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%}
.rv-next::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(-45deg,#ffcf3a 0 10px,#14081c 10px 20px);animation:rvTape 1s linear infinite}
.rv-next::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(-45deg,#ffcf3a 0 10px,#14081c 10px 20px);animation:rvTape 1s linear infinite reverse}
@keyframes rvTape{to{background-position:28.28px 0}}
.rv-next .sil{position:relative;flex:none;width:54px;height:72px;border-radius:8px;overflow:hidden;outline:1px solid color-mix(in srgb,var(--nc,#ff5a4e) 60%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--nc,#ff5a4e) 40%,transparent)}.rv-next .sil::before{content:"";position:absolute;inset:-6px;background:inherit;background-image:var(--im);background-position:center 15%;background-size:cover;filter:blur(3px) brightness(.5) saturate(.3) contrast(1.3)}.rv-next .sil::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:italic 900 30px/1 Impact,"Arial Black",sans-serif;color:var(--nc,#ff5a4e);text-shadow:0 0 10px var(--nc,#ff5a4e)}
.rv-next em{display:block;font:italic 900 15px/1.1 Impact,"Arial Black",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ff6a5e;animation:rvBlink 1.1s ease-in-out infinite}
.rv-next span{display:block;font:italic 600 20px/1.1 "Cormorant Garamond",Georgia,serif;color:#fff6ec;margin-top:3px}
.rv-next small{display:block;color:#c9b3c9;font-size:12px;margin-top:2px}
.rv-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rv-btns button{min-height:44px;padding:10px 16px;border-radius:99px;border:1px solid rgba(255,220,240,.25);background:rgba(255,255,255,.06);color:#fbefe0;font:700 14px/1 var(--rvsans);cursor:pointer;touch-action:manipulation}
.rv-btns button:hover,.rv-btns button:focus-visible{border-color:#ffb84d;outline:none}
.rv-btns button.pri{background:linear-gradient(135deg,var(--c),#ff9f4d);color:#1a0a22;border-color:transparent}
@media (max-width:620px){.rv-card{grid-template-columns:1fr}.rv-card .rv-breathe{min-height:0;height:40vh;max-height:330px}.rv-card .rv-breathe::after{background:linear-gradient(transparent 55%,rgba(18,8,28,.98))}.rv-body{padding:4px 18px 18px}.rv-head{font-size:32px}}
/* ---------- challenger approaching ---------- */
.rv-ch{background:#0a0208;display:grid;place-items:center}
.rv-ch .tape{position:absolute;left:-10%;right:-10%;height:46px;background:repeating-linear-gradient(-45deg,#ffcf3a 0 26px,#14081c 26px 52px);box-shadow:0 0 30px rgba(255,207,58,.35);animation:rvTape2 .9s linear infinite}
.rv-ch .tape.t{top:5%;transform:rotate(-4deg)}.rv-ch .tape.b{bottom:5%;transform:rotate(-4deg);animation-direction:reverse}
@keyframes rvTape2{to{background-position:73.5px 0}}
.rv-ch .pulse{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,40,60,.5),transparent 65%);animation:rvPulse .9s ease-in-out infinite}
@keyframes rvPulse{50%{opacity:.25}}
.rv-ch .warn{position:relative;z-index:2;text-align:center;padding:0 16px}
.rv-ch .warn h2{margin:0;font:italic 900 clamp(34px,8vw,92px)/.92 Impact,"Arial Black",sans-serif;text-transform:uppercase;color:#fff;letter-spacing:.02em;text-shadow:4px 4px 0 #ff2a44,0 0 30px rgba(255,42,68,.7);animation:rvShake .12s linear 6}
@keyframes rvShake{25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,2px)}}
.rv-ch .silh{position:relative;width:min(46vw,250px,calc(36vh * .75));aspect-ratio:3/4;margin:14px auto 10px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 70%,transparent),0 0 40px color-mix(in srgb,var(--c) 45%,transparent)}.rv-ch .silh i{position:absolute;inset:-10px;background:center 15%/cover no-repeat;filter:blur(7px) brightness(.5) saturate(.3) contrast(1.3);transition:filter 1.1s ease}.rv-ch .silh::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:italic 900 clamp(70px,16vw,120px)/1 Impact,"Arial Black",sans-serif;color:var(--c);text-shadow:0 0 24px var(--c);transition:opacity .6s}.rv-ch.reveal .silh::after{opacity:0}
.rv-ch.reveal .silh i{filter:none}
.rv-ch .rv-who{font:italic 600 clamp(22px,4vw,34px)/1.1 "Cormorant Garamond",Georgia,serif;color:var(--c);text-shadow:0 0 18px color-mix(in srgb,var(--c) 60%,transparent);opacity:0;transition:opacity .6s .3s}
.rv-ch .rv-who small{display:block;margin-top:4px;font:700 11px/1 -apple-system,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#d8c2d6}
.rv-ch.named .rv-who{opacity:1}
@media (prefers-reduced-motion:reduce){.rv-ov *,.rv-ov{animation-duration:.01s!important;animation-iteration-count:1!important;animation-delay:0s!important}.rv-por .l1,.rv-por .l2,.rv-por .glow,.rv-breathe i,.rv-ghost{animation:none!important}}