/* Survival mode (ui/survival.js): setup, the run screen, the between-duels VS screen and the end screen parts.
   "Last stand" look (Laith picked it, 19 Oct 2026): a dark cinematic stage whose palette warms from navy and gold at
   8000 LP to ember red as the LP drops (survival.js heat() sets --sv-bg1 / --sv-bg2 / --sv-acc / --sv-acc2 / --sv-haze),
   a heartbeat only under 1000 LP, big serif numerals, a slanted fighting-game life bar (the pale strip is what the last
   duel cost), the next opponent slanted in like a VS screen. Only the survival screens; the duel screen is untouched.
   Phone first; always dark (also in the light theme), Inter + Bodoni Moda like the rest of the site. */
:root{--sv-bg1:#0E1A33;--sv-bg2:#05080F;--sv-acc:#E9B44C;--sv-acc2:#F6D58A;--sv-haze:rgba(233,180,76,.14)}
#survival,.sv-inter,.endscreen.survival-end{
  --bg:#0D1322;--surface:rgba(20,28,46,.72);--surface-2:#1B2539;--ink:#F3EEE4;--muted:#AEB4C0;--faint:#7D8596;--line:rgba(255,255,255,.1);--gold:var(--sv-acc);
  --sv-cream:#FFF4E0;color-scheme:dark}
.survival{position:relative;isolation:isolate;min-height:calc(100dvh - var(--hdr,68px));overflow-x:clip;color:var(--ink);
  background:transparent}
/* the whole page is the stage while the survival screen shows (the header and the online rail sit on it too) */
body.playpage:has(> #survival:not([hidden])){background:radial-gradient(90% 70% at 28% 12%,var(--sv-bg1),var(--sv-bg2) 75%) no-repeat,var(--sv-bg2)}
.survival::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 24% 40%,var(--sv-haze),transparent 70%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.45))}
.sv-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:16px 20px 64px}
.sv-in.sv-setup{max-width:680px}
.survival-mode svg{width:18px;height:18px}
.survival .lb-link{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--ink)}
.survival .eyebrow.gold,.survival .st-eb{color:var(--sv-acc)}
.survival .st-prog{color:var(--muted)}
/* buttons on the stage: the warm "fire" gradient instead of the site blue */
.survival .btn:not(.ghost),.sv-inter .btn:not(.ghost),.endscreen.survival-end .btn:not(.ghost){background:linear-gradient(180deg,var(--sv-acc2),var(--sv-acc));color:#1A0E06;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -12px var(--sv-acc)}
.survival .btn.ghost{background:rgba(255,255,255,.03);color:var(--ink);border-color:rgba(255,255,255,.22)}
/* the heartbeat vignette: only under 1000 LP */
.sv-vig{position:absolute;inset:0;z-index:0;pointer-events:none;box-shadow:inset 0 0 160px 30px rgba(220,40,30,.45);opacity:0}
.sv-crit>.sv-vig{opacity:.8;animation:svThrob 1.15s ease-in-out infinite}
@keyframes svThrob{0%,100%{opacity:.45}12%{opacity:.95}24%{opacity:.6}36%{opacity:.85}}
@keyframes svBeat{0%,100%{transform:none}12%{transform:scale(1.03)}24%{transform:none}36%{transform:scale(1.018)}}

/* ---------- setup ---------- */
.sv-head{margin:18px 0 14px}
.sv-head h1{font:500 clamp(2.6rem,9vw,4rem)/1 var(--serif);margin:6px 0 8px;color:var(--sv-cream)}
.sv-head h1 em{font-style:italic;color:var(--sv-acc)}
.sv-h2{font:700 .66rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}
.sv-rules{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.sv-rules li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sv-rules b{display:block;font:600 .95rem/1.25 var(--font);color:var(--ink)}
.sv-rules small{display:block;margin-top:3px;font-size:.84rem;line-height:1.4;color:var(--muted)}
.sv-ric{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--sv-acc) 16%,transparent);color:var(--sv-acc)}
.sv-ric svg,.sv-best-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sv-best{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:0 0 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--sv-acc) 45%,transparent);background:linear-gradient(140deg,color-mix(in srgb,var(--sv-acc) 14%,transparent),rgba(0,0,0,.25))}
.sv-best>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sv-best small{font:700 .62rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--sv-acc)}
.sv-best b{font:500 1.35rem/1.1 var(--serif);color:var(--ink)}
.sv-best em{font-style:normal;font-size:.8rem;color:var(--muted)}
.sv-best-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--sv-acc2),var(--sv-acc));color:#1A0E06}
.sv-boardlink{display:inline-flex;align-items:center;gap:6px;font:600 .8rem/1 var(--font);color:var(--sv-acc);text-decoration:none;white-space:nowrap}
.sv-boardlink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.survival .st-deck{background:var(--surface);border-color:var(--line);box-shadow:none}
.survival .st-deck select{background:#0B1120;color:var(--ink);border-color:var(--line)}
.sv-go{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:14px 0}
.sv-go .btn{width:100%;justify-content:center}

/* ---------- run screen: HUD (duel diamond + life bar) ---------- */
.sv-runhead{display:flex;align-items:center;gap:20px;margin:16px 0 24px}
.sv-rd{flex:none;display:grid;place-items:center;width:62px;height:62px;margin:0 8px!important;border:1px solid var(--sv-acc);border-radius:6px;transform:rotate(45deg);background:rgba(0,0,0,.3)}
.sv-rd>span{transform:rotate(-45deg);display:flex;flex-direction:column;align-items:center;font:700 .5rem/1 var(--font)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--sv-acc)}
.sv-rd em{display:block;margin-top:3px;font:500 1.55rem/1 var(--serif);font-style:normal;letter-spacing:0;color:var(--sv-cream);font-variant-numeric:lining-nums}
.sv-hbar{flex:1;min-width:0}
.sv-hwho{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font:600 .82rem/1.2 var(--font);color:var(--ink)}
.sv-hwho span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-hwho em{flex:none;font-style:normal;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.sv-life{position:relative;display:block;height:14px;border-radius:2px;background:rgba(255,255,255,.07);transform:skewX(-16deg);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sv-life i{position:absolute;top:0;bottom:0;left:0}
.sv-life .g{background:#F3EEE4;opacity:.7}
.sv-life .f{background:linear-gradient(90deg,var(--sv-acc),var(--sv-acc2));box-shadow:0 0 18px var(--sv-acc)}
.sv-life .t{right:0;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(0,0,0,.45) calc(12.5% - 1px) 12.5%)}

/* layout: you on the left, the next challenger slanted in on the right */
.sv-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"me next" "side next";gap:24px 34px;align-items:start}
.sv-me{grid-area:me}
.sv-side{grid-area:side;min-width:0}

/* the big LP numerals with the mood line */
.sv-lp{position:relative;display:flex;flex-direction:column;align-items:flex-start;color:var(--ink)}
.sv-lp-k{font:700 .68rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--sv-acc)}
.sv-lp-n{display:inline-block;margin-top:10px;font:500 clamp(6rem,13vw,10.5rem)/.82 var(--serif);font-variation-settings:"opsz" 36;font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.04em;color:var(--sv-cream);text-shadow:0 0 50px var(--sv-haze);transform-origin:20% 60%}
.sv-lp-l{display:flex;align-items:center;gap:12px;margin-top:14px;font:italic 500 1.3rem/1 var(--serif);color:var(--sv-acc2)}
.sv-lp-l::before{content:"";width:36px;height:1px;background:var(--sv-acc)}
.sv-lp .sv-life{width:100%;margin-top:16px}
.sv-lp-sub{margin-top:10px;font-size:.84rem;color:var(--muted)}
.sv-crit .sv-lp.big .sv-lp-n,.sv-inter.sv-crit .sv-lp-n,.survival-end .sv-lp.lv-crit .sv-lp-n{animation:svBeat 1.15s ease-in-out infinite}

/* stats as plain facts */
.sv-stats{display:flex;gap:28px;margin:24px 0 6px}
.sv-stats div{min-width:0}
.sv-stats b{display:block;font:500 1.65rem/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums}
.sv-stats small{display:block;margin-top:6px;font:500 .8rem/1.2 var(--font);color:var(--muted)}
.sv-me .sv-go{flex-direction:row;flex-wrap:wrap;align-items:center;margin:20px 0 0}
.sv-me .sv-go .btn{width:auto;min-width:220px}
.sv-wait{margin:0 0 16px;padding:10px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--sv-acc) 55%,transparent);font-size:.86rem;color:var(--muted)}
.sv-wait b{color:var(--ink)}

/* the next challenger: a slanted portrait with a name card */
.sv-next{grid-area:next;position:relative;min-height:520px;min-width:0}
.sv-npic{position:absolute;inset:0;background:#000 center 30%/cover no-repeat;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
.sv-next.char .sv-npic{background-position:50% 22%}
.sv-npic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82)),linear-gradient(90deg,var(--sv-bg2),transparent 30%)}
.sv-seam{position:absolute;top:0;bottom:0;left:0;width:16%;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--sv-acc) 50%,transparent calc(50% + 1px));filter:drop-shadow(0 0 6px var(--sv-acc))}
.sv-ntxt{position:absolute;left:9%;right:0;bottom:26px;padding:0 26px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.sv-ntxt .st-eb{padding:6px 10px;background:rgba(0,0,0,.55);font:700 .64rem/1 var(--font);letter-spacing:.22em;color:var(--sv-acc)}
.sv-ntxt b{margin-top:12px;font:italic 500 clamp(3rem,5.6vw,4.6rem)/.92 var(--serif);letter-spacing:-.02em;color:var(--sv-cream);overflow-wrap:anywhere}
.sv-ntxt p{margin:12px 0 0;max-width:44ch;font-size:.86rem;line-height:1.45;color:rgba(243,238,228,.68)}
.sv-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.sv-chips .dchip{font-style:normal;color:rgba(243,238,228,.85);background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.18)}
.sv-lvl{display:inline-flex;align-items:center;padding:6px 10px;font:800 .62rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;font-style:normal;transform:skewX(-12deg);background:var(--sv-acc);color:#1A0E06}
.sv-lvl.easy{background:#5FC593}
.sv-lvl.hard{background:#F0503C;color:#fff}

/* your deck + the opponents beaten (slanted tiles) */
.sv-deckline{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.sv-deckline .st-dart{width:44px;height:44px;border-color:color-mix(in srgb,var(--sv-acc) 50%,transparent)}
.sv-deckline>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv-deckline small{font:700 .6rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--sv-acc)}
.sv-deckline b{font:600 .98rem/1.2 var(--font);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-deckline em{font-style:normal;font-size:.76rem;color:var(--muted)}
.sv-hist{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sv-hist li{flex:none;width:92px;display:flex;flex-direction:column;gap:6px}
.sv-hpic{display:block;width:92px;height:68px;background:var(--surface-2) center 25%/cover no-repeat;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.sv-hist li.lost .sv-hpic{filter:grayscale(.7) brightness(.7)}
.sv-htxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv-htxt b{font:600 .78rem/1.2 var(--font);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-htxt b i{font-style:normal;color:var(--sv-acc);margin-right:2px}
.sv-htxt small{font-size:.68rem;line-height:1.3;color:var(--faint)}
.sv-hlp{display:flex;align-items:baseline;gap:4px}
.sv-hlp b{font:600 .86rem/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.sv-hlp small{font:600 .56rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sv-hx{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(240,72,62,.2);color:#FF8A80}
.sv-hx svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.sv-side .sv-h2{margin-top:22px}
.sv-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}

/* the last run + share */
.sv-last{margin-top:22px;padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.sv-last h2{font:500 1.8rem/1.1 var(--serif);margin:6px 0 6px;color:var(--ink)}
.sv-last h2 em{font-style:italic;color:var(--sv-acc)}
.sv-share{display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:520px;margin:0 auto 18px}
.sv-share-txt{margin:0!important;padding:12px 14px;border-left:2px solid var(--sv-acc);font-size:.86rem;line-height:1.5;text-align:left;user-select:all;color:rgba(243,238,228,.8)!important;background:rgba(0,0,0,.28)}
.sv-last .sv-share{margin:12px 0 0;max-width:none}
.sv-share .btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px}
.sv-share .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.endscreen .sv-share .btn{align-self:center}

@media (max-width:860px){
  .sv-in{padding:10px 16px 56px}
  .sv-runhead{gap:14px;margin:12px 0 0}
  .sv-rd{width:48px;height:48px;margin:0 4px!important}.sv-rd em{font-size:1.15rem}
  .sv-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"next" "me" "side";gap:18px}
  .sv-next{min-height:0;height:340px;margin:16px -16px 0}
  .sv-npic{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
  .sv-npic::after{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8))}
  .sv-seam{display:none}
  .sv-ntxt{left:0;bottom:46px;padding:0 18px}
  .sv-ntxt b{font-size:3.2rem}
  .sv-ntxt p{display:none}
  .sv-lp-n{font-size:clamp(5.6rem,30vw,7.4rem)}
  .sv-stats{gap:20px;margin-top:18px}
  .sv-me .sv-go .btn{flex:1;min-width:0}
}

/* ---------- between duels: "You survived", then the VS screen ---------- */
.sv-inter{z-index:1180;display:block;padding:0;overflow:hidden;color:#F3EEE4;text-align:center;
  background:radial-gradient(90% 70% at 30% 20%,var(--sv-bg1),var(--sv-bg2) 75%)}
.sv-inter>div{max-width:none}
.sv-p1{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none}
.sv-p1-k{font:700 .7rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--sv-acc)}
.sv-p1 h2{margin:14px 0 0;font:italic 500 clamp(2.2rem,5vw,3.4rem)/1 var(--serif);color:var(--sv-acc2)}
.sv-p1 .sv-lp{align-items:center;margin-top:12px}
.sv-p1 .sv-lp-k{display:none}
.sv-p1 .sv-lp-n{font-size:clamp(7rem,20vw,13rem)}
.sv-p1 .sv-lp-l{display:none}
.sv-p1 .sv-life{width:min(560px,86vw)}
.sv-p1 p{margin:16px 0 0;font-size:.92rem;color:rgba(243,238,228,.7)}
.sv-vs{position:absolute;inset:0;z-index:1}
.sv-vside{position:absolute;top:0;bottom:0;width:58%;background:#000 center 40%/cover no-repeat}
.sv-vside::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%,rgba(0,0,0,.85))}
.sv-vside.l{left:0;clip-path:polygon(0 0,100% 0,72% 100%,0 100%);filter:saturate(.9) brightness(.72)}
.sv-vside.r{right:0;clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
.sv-vside.r.char{background-position:50% 20%}
.sv-vseam{position:absolute;top:0;bottom:0;left:42%;width:16%;z-index:2;background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),var(--sv-acc2) 50%,transparent calc(50% + 1.5px));filter:drop-shadow(0 0 10px var(--sv-acc))}
.sv-vtop{position:absolute;z-index:3;top:26px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.sv-vtop .crest{padding:7px 12px;background:rgba(0,0,0,.5);font:700 .74rem/1 var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--sv-acc)}
.sv-vtop small{font:500 .84rem/1.2 var(--font);color:rgba(243,238,228,.8);text-shadow:0 1px 8px #000}
.sv-mark{position:absolute;z-index:3;left:50%;top:44%;transform:translate(-50%,-50%);font:italic 600 clamp(5rem,11vw,8.5rem)/1 var(--serif);color:var(--sv-cream);text-shadow:0 0 40px var(--sv-acc),0 4px 0 rgba(0,0,0,.4)}
.sv-nc{position:absolute;z-index:3;bottom:9%;max-width:40%;display:flex;flex-direction:column;gap:10px}
.sv-nc.me{left:5%;align-items:flex-start;text-align:left}
.sv-nc.op{right:5%;align-items:flex-end;text-align:right}
.sv-nc small{text-shadow:0 1px 8px #000;font:700 .66rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--sv-acc)}
.sv-nc b{font:italic 500 clamp(2.4rem,4.6vw,4rem)/.95 var(--serif);color:var(--sv-cream);font-variant-numeric:lining-nums;overflow-wrap:anywhere}
.sv-nc span{font:600 .86rem/1.3 var(--font);color:rgba(243,238,228,.82)}
.sv-igo{position:absolute;z-index:5;left:50%;bottom:9%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.sv-ibar{display:block;width:180px;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.sv-ibar i{display:block;height:100%;background:var(--sv-acc);transform-origin:0 50%}
/* timeline (ms): 0..2200 survived + the numerals count down while the palette warms, 2000 the sides slide in,
   2600 VS lands, 2900 name cards, 3500 Duel now, 3900..5900 the auto bar */
.sv-inter.play .sv-p1{animation:svP1 2.2s linear both}
@keyframes svP1{0%{opacity:0;transform:scale(1.04)}12%,82%{opacity:1;transform:none}100%{opacity:0;transform:scale(.96)}}
.sv-inter.play .sv-vside.l{animation:svSlL .55s 2s cubic-bezier(.2,.9,.2,1) both}
.sv-inter.play .sv-vside.r{animation:svSlR .55s 2.1s cubic-bezier(.2,.9,.2,1) both}
@keyframes svSlL{from{opacity:0;transform:translateX(-70%)}}
@keyframes svSlR{from{opacity:0;transform:translateX(70%)}}
.sv-inter.play .sv-vseam{animation:svFade .4s 2.5s both}
@keyframes svFade{from{opacity:0}}
.sv-inter.play .sv-mark{animation:svSlam .45s 2.6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes svSlam{from{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
.sv-inter.play .sv-nc.me{animation:svNcL .5s 2.9s cubic-bezier(.16,1,.3,1) both}
.sv-inter.play .sv-nc.op{animation:svNcR .5s 3s cubic-bezier(.16,1,.3,1) both}
@keyframes svNcL{from{opacity:0;transform:translateX(-24px)}}
@keyframes svNcR{from{opacity:0;transform:translateX(24px)}}
.sv-inter.play .sv-vtop{animation:svFade .5s 3.1s both}
.sv-inter.play .sv-igo{animation:svFade .5s 3.5s both}
.sv-inter.play .sv-ibar i{animation:svFill 2s 3.9s linear both}
@keyframes svFill{from{transform:scaleX(0)}}
.sv-inter.calm .sv-p1{display:none}
@media (max-width:860px){
  .sv-vside.l,.sv-vside.r{left:0;right:0;width:auto;height:56%;filter:none}
  .sv-vside.l{top:0;bottom:auto;clip-path:polygon(0 0,100% 0,100% 74%,0 100%);filter:saturate(.9) brightness(.72)}
  .sv-vside.r{bottom:0;top:auto;clip-path:polygon(0 26%,100% 0,100% 100%,0 100%)}
  .sv-vseam{left:0;right:0;width:auto;top:42%;bottom:auto;height:16%;background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),var(--sv-acc2) 50%,transparent calc(50% + 1.5px))}
  .sv-mark{top:50%;font-size:5.2rem}
  .sv-vtop{top:16px}
  .sv-nc{max-width:84%}
  .sv-nc.me{left:18px;top:92px;bottom:auto}
  .sv-nc.op{right:18px;bottom:calc(9% + 104px)}
  .sv-igo{bottom:max(4%,env(safe-area-inset-bottom,0px))}
  @keyframes svSlL{from{opacity:0;transform:translateY(-70%)}}
  @keyframes svSlR{from{opacity:0;transform:translateY(70%)}}
}
@media (max-height:560px){.sv-p1 .sv-lp-n{font-size:5rem}.sv-nc b{font-size:2rem}}

/* ---------- the end screen (app.js showEnd adds .survival-end + .sv-won / .sv-over) ---------- */
.endscreen.survival-end{overflow-y:auto;background:transparent}
.endscreen.survival-end::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(90% 70% at 30% 20%,var(--sv-bg1),var(--sv-bg2) 75%);opacity:.95}
.endscreen.survival-end .rays{display:none}
.endscreen.survival-end .crest{color:var(--sv-acc)}
.endscreen.survival-end h2 em{background:none;-webkit-text-fill-color:currentColor;color:var(--sv-acc2)}
.endscreen.survival-end .storynote{color:var(--sv-acc2)}
.endscreen.survival-end .st-endpic{border-color:var(--sv-acc);box-shadow:0 0 0 6px color-mix(in srgb,var(--sv-acc) 18%,transparent),0 18px 40px -16px rgba(0,0,0,.8)}
.sv-lp.end{align-items:center;margin:-6px auto 24px;max-width:380px}
.sv-lp.end .sv-lp-n{font-size:clamp(4.6rem,14vw,7rem)}
.sv-lp.end .sv-lp-l::before{display:none}
.sv-newbest{display:inline-flex!important;align-items:center;gap:8px;margin:-8px auto 18px!important;padding:8px 14px;font:800 .7rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#1A0E06!important;background:var(--sv-acc);transform:skewX(-12deg)}
.sv-newbest svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-ostats{display:flex;justify-content:center;gap:30px;margin:0 0 20px}
.sv-ostats b{display:block;font:500 1.7rem/1 var(--serif);color:var(--sv-cream);font-variant-numeric:lining-nums}
.sv-ostats small{display:block;margin-top:6px;font:500 .8rem/1.2 var(--font);color:rgba(243,238,228,.62)}
.sv-trail{margin:0 0 20px}
.sv-trail>small{display:block;margin-bottom:10px;font:700 .64rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,238,228,.55)}
.sv-trail ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sv-trail li span{display:block;width:54px;height:54px;background:#26314A center 25%/cover no-repeat;clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}
.sv-killer{display:none}
/* run over: the one who ended it, desaturated and slanted */
.endscreen.sv-over .st-endpic{position:relative;width:calc(100% + 48px);height:250px;margin:-24px -24px 0;border:0;border-radius:0;box-shadow:none;background-position:50% 22%;
  clip-path:polygon(0 0,100% 0,100% 86%,0 100%);filter:grayscale(.6) brightness(.62) contrast(1.1)}
.endscreen.sv-over .sv-killer{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;margin:-96px 0 34px;font:700 .64rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,238,228,.75)}
.endscreen.sv-over .sv-killer b{font:italic 500 2.6rem/.9 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--sv-cream)}
@media (min-width:900px){
  .endscreen.survival-end.sv-over>div:not(.rays){width:min(1100px,100%);max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:44px;text-align:left;align-items:start}
  .endscreen.sv-over>div>*{grid-column:1}
  .endscreen.sv-over .st-endpic{grid-column:2;grid-row:1/span 9;width:100%;height:min(600px,76dvh);margin:0;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%)}
  .endscreen.sv-over .sv-killer{grid-column:2;grid-row:1/span 9;align-self:end;align-items:flex-start;margin:0;padding:0 16% 34px 16%}
  .endscreen.sv-over .sv-killer b{font-size:3.6rem}
  .endscreen.sv-over h2{margin-top:10px}
  .endscreen.sv-over .row,.endscreen.sv-over .sv-ostats,.endscreen.sv-over .sv-trail ol{justify-content:flex-start}
  .endscreen.sv-over .sv-newbest{margin-left:0!important}
  .endscreen.sv-over .sv-share{margin-left:0}
  .endscreen.sv-over .sv-share .btn{align-self:flex-start}
}

/* calm motion / reduced motion: no heartbeat, no counting, the VS screen at once */
.a11y-calm .sv-vig,.a11y-calm .sv-lp-n{animation:none!important}
.a11y-calm .sv-inter *{animation:none!important}
@media (prefers-reduced-motion:reduce){.sv-vig,.sv-lp-n,.sv-inter *{animation:none!important}}
@media (min-width:700px){.sv-rules{grid-template-columns:repeat(3,1fr)}.sv-rules li{flex-direction:column}}

/* card pictures (not cropped art squares): zoom into the art box */
.sv-npic.scan,.sv-vside.scan,.endscreen.sv-over .st-endpic.scan{background-size:132% auto;background-position:50% 40%}
.sv-hpic.scan,.sv-trail li span.scan{background-size:136% auto;background-position:50% 36%}
.sv-hpic:not([style*="url"]),.sv-trail li span:not([style*="url"]){background-image:linear-gradient(135deg,color-mix(in srgb,var(--sv-acc) 30%,#1B2539),#1B2539)}
@media (min-width:900px){
  .endscreen.sv-over .st-endpic{height:auto;min-height:min(560px,72dvh);align-self:stretch}
  .endscreen.sv-over .sv-killer{position:relative;padding-bottom:40px}
}

/* ---------- rewards ("boons", survival.js): every 2nd win, three face-down cards flip and you take one ----------
   Rarity frames: --rk (the frame colour) and --rk2 (its light edge) per .r-bronze / .r-silver / .r-gold. */
.r-bronze{--rk:#C27C3E;--rk2:#F0B57C;--rkd:#4A2A12}
.r-silver{--rk:#9AA7B6;--rk2:#EEF2F7;--rkd:#2A323D}
.r-gold{--rk:#D9A336;--rk2:#FFE7A3;--rkd:#4A3308}
.sv-boonhow{display:flex;align-items:flex-start;gap:12px;margin:-6px 0 16px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--sv-acc) 45%,transparent);border-radius:14px}
.sv-boonhow b{display:block;font:600 .95rem/1.25 var(--font);color:var(--ink)}
.sv-boonhow small{display:block;margin-top:3px;font-size:.84rem;line-height:1.4;color:var(--muted)}
.sv-boonhow svg,.sv-pickwait svg,.sv-pickbtn svg,.sv-endboon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sv-pickwait{display:flex;align-items:flex-start;gap:10px;border-color:color-mix(in srgb,var(--sv-acc) 55%,transparent)!important;background:color-mix(in srgb,var(--sv-acc) 12%,transparent)!important}
.sv-pickwait>svg{flex:none;color:var(--sv-acc);margin-top:1px}
.sv-pickbtn{gap:10px}
/* the Active strip (run screen, VS screen) */
.sv-active{margin:14px 0 4px}
.sv-active>small{display:block;margin-bottom:8px;font:700 .62rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--sv-acc)}
.sv-active ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sv-active li{display:flex;align-items:center;gap:9px;min-width:0;max-width:100%;padding:7px 12px 7px 7px;border-radius:12px;border:1px solid color-mix(in srgb,var(--rk) 70%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--rk) 26%,transparent),rgba(0,0,0,.35))}
.sv-active li>i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,var(--rk2),var(--rk));color:var(--rkd)}
.sv-active li>i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-active li span{display:flex;flex-direction:column;min-width:0}
.sv-active li b{font:600 .84rem/1.15 var(--font);color:var(--ink)}
.sv-active li em{font-style:normal;font-size:.74rem;line-height:1.25;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sv-active.vs{margin:6px 0 0;text-align:left}
.sv-active.vs>small{display:none}
.sv-active.vs li{padding:5px 10px 5px 5px;background:rgba(0,0,0,.55)}
.sv-active.vs li>i{width:24px;height:24px}
.sv-active.vs li em{display:none}
.sv-cut{display:inline-flex;align-items:center;gap:5px;border-color:color-mix(in srgb,#F0503C 60%,transparent)!important;color:#FFB4A6!important}
.sv-cut svg,.sv-cutvs svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-cutvs{display:inline-flex;align-items:center;gap:6px;font:600 .8rem/1.2 var(--font);font-style:normal;color:#FFB4A6;text-shadow:0 1px 8px #000}
/* history: the rewards taken between the duels */
.sv-hist li.boon .sv-htxt b{color:var(--rk2)}
.sv-hist li.boon .sv-htxt small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv-hist li.boon .sv-hpic.bi{display:grid;place-items:center;background:linear-gradient(160deg,var(--rk2),var(--rk));color:var(--rkd)}
.sv-hist li.boon .sv-hpic.bi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-hist li.boon.skip{--rk:#6B3A3A;--rk2:#C98080;--rkd:#2A0D0D;opacity:.75}
.sv-endboon{display:flex;align-items:center;justify-content:center;gap:8px;margin:-6px auto 14px!important;font:600 .9rem/1.3 var(--font);color:var(--sv-acc2)!important}
.sv-endboon.ahead{margin:6px auto 18px!important;color:var(--sv-acc)!important}

/* the pick screen */
.sv-pick{z-index:1190;display:flex;align-items:center;justify-content:center;padding:18px 16px;overflow-y:auto;color:#F3EEE4;text-align:center;
  background:radial-gradient(90% 70% at 50% 20%,var(--sv-bg1),var(--sv-bg2) 75%);--bg:#0D1322;--ink:#F3EEE4;--muted:#AEB4C0;--line:rgba(255,255,255,.1);color-scheme:dark}
.sv-pick .btn:not(.ghost){background:linear-gradient(180deg,var(--sv-acc2),var(--sv-acc));color:#1A0E06;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -12px var(--sv-acc)}
.sv-pick .btn[disabled]{opacity:.45;box-shadow:none}
.sv-pick>div{max-width:none}
.sv-pk-in{position:relative;z-index:1;width:min(980px,100%);margin:auto;display:flex;flex-direction:column;align-items:center}
.sv-pk-k{font:700 .7rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--sv-acc)}
.sv-pk-in h2{margin:12px 0 6px;font:italic 500 clamp(2rem,5vw,3.2rem)/1.05 var(--serif);color:var(--sv-acc2)}
.sv-pk-lede{margin:0 0 26px;font-size:.95rem;color:rgba(243,238,228,.72)}
.sv-pk-cards{display:flex;justify-content:center;gap:clamp(12px,2.4vw,28px);perspective:1400px;width:100%}
.sv-pk-go{margin-top:28px;display:flex;justify-content:center;width:100%}
.sv-pk-go .btn{min-width:min(320px,100%);justify-content:center}
.sv-bc{position:relative;flex:0 1 250px;min-width:0;aspect-ratio:5/7;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:16px;
  transition:transform .25s cubic-bezier(.2,.9,.2,1),filter .25s}
.sv-bc[disabled]{cursor:default}
.sv-bc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,1.25,.45,1);transform:rotateY(180deg)}
.sv-bc.up .sv-bc-in{transform:none}
.sv-bc-back,.sv-bc-face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.sv-bc-back{transform:rotateY(180deg);display:grid;place-items:center;border:2px solid color-mix(in srgb,var(--sv-acc) 55%,transparent);
  background:repeating-linear-gradient(45deg,rgba(233,180,76,.08) 0 2px,transparent 2px 14px),repeating-linear-gradient(-45deg,rgba(233,180,76,.08) 0 2px,transparent 2px 14px),linear-gradient(160deg,#1A2644,#070B16);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.35),0 22px 40px -18px #000}
.sv-bc-back i{display:grid;place-items:center;width:64px;height:64px;transform:rotate(45deg);border:1px solid var(--sv-acc);background:rgba(0,0,0,.35);color:var(--sv-acc)}
.sv-bc-back i svg{width:30px;height:30px;transform:rotate(-45deg);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.sv-bc-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 18px 28px;text-align:center;
  border:3px solid transparent;background:linear-gradient(170deg,#18213A,#0A0F1C 70%) padding-box,linear-gradient(160deg,var(--rk2),var(--rk) 45%,var(--rkd)) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 46px -20px #000,inset 0 0 40px -10px color-mix(in srgb,var(--rk) 50%,transparent)}
.sv-bc-face::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 50% at 50% 0,color-mix(in srgb,var(--rk) 30%,transparent),transparent 70%)}
.sv-bc-rar{position:absolute;top:18px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 10px;border-radius:999px;font:700 .6rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--rkd);background:linear-gradient(180deg,var(--rk2),var(--rk))}
.sv-bc-ic{position:relative;display:grid;place-items:center;width:clamp(64px,8vw,86px);aspect-ratio:1;margin:10px 0 4px;border-radius:50%;color:var(--rk2);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--rk) 45%,#000),#05070D 75%);box-shadow:0 0 0 2px color-mix(in srgb,var(--rk) 70%,transparent),0 0 30px -4px var(--rk)}
.sv-bc-ic svg{width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sv-bc-face b{position:relative;font:500 clamp(1.3rem,2.2vw,1.65rem)/1.05 var(--serif);color:#FFF4E0}
.sv-bc-face small{position:relative;font-size:.86rem;line-height:1.38;color:rgba(243,238,228,.78)}
.sv-bc.heal .sv-bc-face{background:linear-gradient(170deg,#1A2A2A,#08110F 70%) padding-box,linear-gradient(160deg,var(--rk2),var(--rk) 45%,var(--rkd)) border-box}
.sv-bc.up:hover,.sv-bc.up:focus-visible{transform:translateY(-6px)}
.sv-bc:focus-visible{outline:none}
.sv-bc:focus-visible .sv-bc-face{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--rk),0 24px 46px -20px #000}
.sv-bc[aria-checked="true"]{transform:translateY(-12px) scale(1.03)}
.sv-bc[aria-checked="true"] .sv-bc-face{box-shadow:0 0 0 2px var(--rk2),0 0 46px -4px var(--rk),0 26px 50px -20px #000}
.sv-bc[aria-checked="true"]::after{content:"";position:absolute;top:-10px;right:-10px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:var(--rk2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A0E06' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.sv-pk-cards:has([aria-checked="true"]) .sv-bc:not([aria-checked="true"]){filter:saturate(.55) brightness(.7)}
.sv-pick.out{transition:opacity .28s;opacity:0}
/* the gambit step: the cards of your deck */
.sv-pk-in.gambit h2{font-size:clamp(1.5rem,3.6vw,2.2rem);margin-bottom:20px}
.sv-gb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:100%;max-height:min(56dvh,560px);overflow-y:auto;padding:4px}
.sv-gb{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font:600 .82rem/1.2 var(--font);text-align:left;cursor:pointer}
.sv-gb-pic{flex:none;width:40px;height:40px;border-radius:8px;background:#1B2539 50% 32%/150% auto no-repeat}
.sv-gb[aria-checked="true"]{border-color:var(--sv-acc);background:color-mix(in srgb,var(--sv-acc) 20%,transparent);box-shadow:0 0 0 1px var(--sv-acc)}
.sv-gb:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:640px){
  .sv-pick{align-items:flex-start;padding-top:max(18px,env(safe-area-inset-top,0px))}
  .sv-pk-lede{margin-bottom:16px}
  .sv-pk-cards{flex-direction:column;gap:10px;perspective:900px}
  .sv-bc{flex:none;width:100%;aspect-ratio:auto;height:118px}
  .sv-bc-in{transform:rotateX(180deg)}
  .sv-bc-back{transform:rotateX(180deg)}
  .sv-bc-face{flex-direction:row;align-items:center;gap:12px;padding:10px 14px 10px 12px;text-align:left}
  .sv-bc-face::before{background:radial-gradient(60% 90% at 0 50%,color-mix(in srgb,var(--rk) 30%,transparent),transparent 70%)}
  .sv-bc-rar{top:9px;right:10px;left:auto;transform:none;padding:4px 8px;font-size:.54rem}
  .sv-bc-ic{flex:none;width:62px;margin:0}
  .sv-bc-face b{display:block;font-size:1.25rem;padding-right:84px}
  .sv-bc-face small{display:block;margin-top:3px;font-size:.8rem}
  .sv-bc-face>b,.sv-bc-face>small{grid-column:2}
  .sv-bc-face{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-content:center}
  .sv-bc-ic{grid-row:1/span 2}
  .sv-bc[aria-checked="true"]{transform:scale(1.02)}
  .sv-bc.up:hover,.sv-bc.up:focus-visible{transform:none}
  .sv-bc[aria-checked="true"]::after{top:-8px;right:-6px;width:26px;height:26px}
  .sv-pk-go{position:sticky;bottom:0;margin-top:16px;padding:12px 0 max(4px,env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--sv-bg2) 40%)}
  .sv-pk-go .btn{width:100%}
  .sv-gb-list{grid-template-columns:1fr 1fr;max-height:none}
  .sv-active li{flex:1 1 100%}
  .sv-active.vs li{flex:0 1 auto}
}
/* calm motion: no flip, the faces are up at once */
.sv-pick.calm .sv-bc-in,.a11y-calm .sv-bc-in{transition:none!important}
.sv-pick.calm .sv-bc,.a11y-calm .sv-bc{transition:none!important}
@media (prefers-reduced-motion:reduce){.sv-bc-in,.sv-bc,.sv-pick.out{transition:none!important}}

/* the interstitial around a pick: only the "You survived" beat, then the VS screen without it (2 s earlier) */
.sv-inter.beat .sv-p1{animation-duration:2.3s}
.sv-inter.skip1 .sv-p1{display:none}
.sv-inter.play.skip1 .sv-vside.l{animation-delay:0s}
.sv-inter.play.skip1 .sv-vside.r{animation-delay:.1s}
.sv-inter.play.skip1 .sv-vseam{animation-delay:.5s}
.sv-inter.play.skip1 .sv-mark{animation-delay:.6s}
.sv-inter.play.skip1 .sv-nc.me{animation-delay:.9s}
.sv-inter.play.skip1 .sv-nc.op{animation-delay:1s}
.sv-inter.play.skip1 .sv-vtop{animation-delay:1.1s}
.sv-inter.play.skip1 .sv-igo{animation-delay:1.5s}
.sv-inter.play.skip1 .sv-ibar i{animation-delay:1.9s}
.sv-nc.op .sv-lvl{align-self:flex-end}

/* Iron Will in the duel (app.js ironWillFx): a gold flash and the LP plate glows; calm motion: no flash */
.iw-flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(60% 50% at 50% 70%,rgba(255,224,140,.75),rgba(233,180,76,.25) 45%,transparent 75%);animation:iwFlash 1.4s ease-out both}
@keyframes iwFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.plate.iw-hold{box-shadow:0 0 0 2px #FFE7A3,0 0 28px 4px rgba(233,180,76,.8)!important;animation:iwHold 2.4s ease-out both}
.plate.iw-hold .lp{color:#FFE7A3!important;text-shadow:0 0 14px rgba(233,180,76,.9)}
@keyframes iwHold{0%{transform:scale(1)}10%{transform:scale(1.08)}22%{transform:scale(1)}100%{transform:scale(1)}}
.a11y-calm .plate.iw-hold{animation:none}
@media (prefers-reduced-motion:reduce){.plate.iw-hold,.iw-flash{animation:none}}