/* ============================================================================
   RATE MY INVENTORY — dark split hero, lavender card stack
   ========================================================================== */

:root{
  --bg:#101115;
  --ink:#F7F4EF;
  --ink-2:#8B8D93;
  --ink-3:#6E7076;
  --accent:#FF585A;
  --card-main:#B9AFE1;
  --card-back-1:#859FC0;
  --card-back-2:#D97663;
  --card-ink:#1C1A22;
  --card-ink-soft:rgba(28,26,34,.62);
  --card-ink-chip:rgba(28,26,34,.72);
  --card-chip-edge:rgba(28,26,34,.28);
  --btn-face:#F2F1ED;
  --like:#3BC97F;

  --edge-line:rgba(247,244,239,.08);
  --seg-idle:rgba(247,244,239,.16);

  --r-card:22px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-mech:cubic-bezier(.32,.72,0,1);

  --t-quick:160ms;
  --t-base:300ms;
  --t-slow:520ms;

  /* kept from the pre-redesign sheet: the reel and result screens still use these */
  --edge:#1E2836;
  --edge-hi:#2C3A4D;
  --purple-2:#A78BFA;
  --r-panel:14px;
  --r-badge:8px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{min-height:100%}

body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
main{position:relative;z-index:1}

/* ------------------------------------------------------------------ top -- */
.top{
  position:relative;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  min-height:8dvh;
  padding:clamp(10px,1.6vw,16px) clamp(16px,3.4vw,40px);
}
.top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--edge-line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo{display:block;flex:0 0 26px}
.brand-word{
  font-size:clamp(17px,1.3vw,18px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
}
.top-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:500;color:var(--ink-2);
  text-decoration:none;
  transition:color var(--t-quick) ease;
}
.top-link svg{display:block;opacity:.8}
@media (hover:hover){
  .top-link:hover{color:var(--ink)}
}

/* --------------------------------------------------------------- layout -- */
.swipe-scene{
  position:relative;
  min-height:calc(100dvh - 8dvh);
  display:grid;
  grid-template-columns:44% 50%;
  column-gap:6%;
  align-items:stretch;
  padding:clamp(20px,4vh,48px) clamp(18px,3.4vw,44px) clamp(18px,3.4vh,36px) clamp(20px,4.4vw,58px);
  overflow:hidden;
}

/* soft blurred blobs behind the stack, never figures */
.scene-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.glow{position:absolute;display:block;border-radius:50%;filter:blur(90px)}
.glow-a{
  width:clamp(260px,30vw,460px);aspect-ratio:1;
  right:4%;top:20%;
  background:rgba(120,40,55,.14);
}
.glow-b{
  width:clamp(240px,27vw,420px);aspect-ratio:1;
  right:26%;bottom:12%;
  background:rgba(80,50,110,.10);
}

/* ---------------------------------------------------------------- copy --- */
.swipe-copy{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(10px,3vh,30px) 0;
  /* ref: the headline block sits slightly below the optical centre */
  transform:translateY(3.4%);
}
.swipe-title{
  display:flex;flex-direction:column;
  font-size:clamp(60px,13vw,182px);
  font-weight:900;
  font-variation-settings:'wdth' 88;
  line-height:.9;
  letter-spacing:-.022em;
  text-transform:uppercase;
}
.swipe-title .line{display:block;color:var(--ink)}
.swipe-title .line-accent{color:var(--accent)}
.swipe-title .dot{color:var(--accent)}
.swipe-sub{
  margin-top:26px;
  font-size:clamp(14px,1.45vw,19px);
  line-height:1.55;
  color:var(--ink-2);
}
.microtag{
  margin-top:auto;
  padding-top:clamp(16px,4vh,40px);
  display:flex;align-items:center;gap:10px;
  font-size:clamp(10px,.86vw,12px);font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--ink-3);
}
.microtag-bar{
  display:block;width:2px;height:12px;flex:0 0 2px;
  background:var(--accent);
}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.swipe-title .line,.swipe-sub{animation:riseIn var(--t-slow) var(--ease-out) backwards}
.swipe-title .line:nth-child(1){animation-delay:40ms}
.swipe-title .line:nth-child(2){animation-delay:110ms}
.swipe-title .line:nth-child(3){animation-delay:180ms}
.swipe-sub{animation-delay:250ms}

/* ---------------------------------------------------------- right side --- */
.stack-side{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:0;
  /* ref: stack centre sits at 70.7% of the viewport, not in the middle of the column */
  padding-right:5.2vw;
  transform:translateY(-2.1%);
}
.progress-row{
  display:flex;align-items:center;gap:14px;
  margin-bottom:clamp(14px,2.6vh,26px);
}
.progress-counter{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.08em;
  color:var(--ink-2);
}
.progress-segments{display:inline-flex;gap:4px}
.progress-segments .seg{
  display:block;width:14px;height:3px;border-radius:2px;
  background:var(--seg-idle);
}
.progress-segments .seg.is-on{background:var(--accent)}

/* ---------------------------------------------------------------- stack -- */
.stack-wrap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
  padding:8px 0;
}
.card-stack{
  position:relative;
  width:clamp(240px,28.6vw,392px);
  aspect-ratio:.79;
  perspective:1200px;
}

.tcard{
  --rar:#8847FF;
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:var(--card-main);
  border-radius:var(--r-card);
  box-shadow:0 28px 56px -24px rgba(0,0,0,.55);
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform var(--t-base) var(--ease-out),
             opacity var(--t-base) var(--ease-out),
             filter var(--t-base) var(--ease-out);
}

.tcard.pos-top{opacity:1;z-index:3;cursor:pointer;transform:none}
.tcard.pos-2{
  opacity:1;z-index:2;
  background:var(--card-back-1);
  transform:translateX(-32%) rotate(-7deg) scale(.95);
  filter:brightness(.94);
}
.tcard.pos-3{
  opacity:1;z-index:1;
  background:var(--card-back-2);
  transform:translateX(32%) rotate(7deg) scale(.95);
  filter:brightness(.94);
}
/* a back card is a FULL card — same art block and caption; the top card simply
   covers most of it, so the visible strip reads as a real card, not a backdrop */
/* ref: the back cards show a whole item in the strip that stays visible,
   not a random slice of the one hidden behind the top card */
.tcard.pos-2 .t-art,
.tcard.pos-3 .t-art{flex:1 1 auto;height:100%;min-height:0;padding:0;place-items:center}
/* <picture> is a layout no-op: the img must stay the direct child of the grid */
.t-art picture,.m-art picture,.final-art picture{display:contents}
.tcard.pos-2 .t-art img,
.tcard.pos-3 .t-art img{
  max-width:none;max-height:none;
  /* 58% of the card height, spelled out: percentage heights do not resolve
     against a flex item with an indefinite height */
  width:auto;height:clamp(140px,16.5vw,226px);
  transform-origin:center;
}
/* ref: a back card shows a whole item at natural size, the top card simply
   crops part of it — no zoomed-in texture, no miniature parked in the strip */
.tcard.pos-2 .t-art img{transform:translateX(-30%) rotate(-66deg)}
.tcard.pos-3 .t-art img{transform:translateX(30%) rotate(66deg)}
/* long items (knives, rifles) are turned to run top-to-bottom in the strip */
.tcard.pos-2[data-kind*="Knife"] .t-art img{transform:translateX(-30%) rotate(-58deg)}
.tcard.pos-3[data-kind*="Knife"] .t-art img{transform:translateX(30%) rotate(58deg)}
.tcard.pos-2::after,
.tcard.pos-3::after{opacity:0}

.tcard.is-top{touch-action:none;-webkit-user-select:none;user-select:none}
.tcard.is-mid,.tcard.is-back{touch-action:auto}

.tcard.is-idle{animation:cardFloat 4s ease-in-out infinite}
@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}

@media (hover:hover) and (pointer:fine){
  .tcard.is-hoverable.pos-top:hover{scale:1.015}
}

/* rarity: thin accent strip at the bottom of the card */
.tcard::after{
  content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;z-index:6;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--rar) 55%,transparent),transparent);
  opacity:.5;
}

/* card content */
.t-art{
  flex:0 0 68%;
  display:grid;place-items:center;
  padding:10px 8px 0;
  min-height:0;
}
.t-art img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(20,14,30,.35));
  pointer-events:none;
}
.t-info{
  flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:4px;
  padding:0 18px 18px;
}
.t-name{
  font-size:clamp(26px,2.9vw,40px);font-weight:800;color:var(--card-ink);
  letter-spacing:-.01em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.t-gun{
  font-size:clamp(13px,1.2vw,16px);font-weight:600;color:var(--card-ink-soft);
  line-height:1.3;
}
.t-tags{
  display:flex;gap:6px;margin-top:8px;
}
.t-kind,.t-cond{
  display:inline-flex;align-items:center;height:22px;padding:0 12px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--card-ink) 22%,transparent);
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--card-ink-chip);
  white-space:nowrap;
}

/* drag state: no transitions, no idle float */
.tcard.is-dragging{
  transition:none;
  animation:none;
  cursor:grabbing;
}
/* spring return to center */
.tcard.is-returning{
  transition:transform 300ms var(--ease-spring);
}

/* direction overlay while dragging (kept: left like, right pass) */
.t-ovl{
  position:absolute;inset:0;z-index:5;
  pointer-events:none;
  opacity:0;
}

/* stamp overlay */
.t-stamp{
  position:absolute;z-index:7;
  top:16%;left:50%;
  transform:translateX(-50%) rotate(var(--rot,-12deg)) scale(1.3);
  padding:8px 18px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:clamp(24px,3vw,32px);font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stamp,var(--accent));
  border:4px solid currentColor;
  border-radius:8px;
  opacity:0;
  pointer-events:none;
  transition:none;
}
.tcard.is-stamped .t-stamp{opacity:.9;transform:translateX(-50%) rotate(var(--rot,-12deg)) scale(1)}
.t-stamp .t-stamp-ico{display:block;line-height:0}
.t-stamp .t-stamp-ico svg{width:44px;height:44px;display:block}

/* hover nudge from buttons */
.tcard.nudge-pass{transform:translateX(-10px) rotate(-3deg)}
.tcard.nudge-like{transform:translateX(10px) rotate(3deg)}

/* -------------------------------------------------------------- actions -- */
.swipe-actions{
  display:flex;align-items:flex-start;justify-content:center;gap:clamp(20px,3.1vw,42px);
  margin-top:clamp(14px,2vh,20px);
}
.act-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.act-btn{
  width:clamp(56px,6.2vw,84px);height:clamp(56px,6.2vw,84px);border-radius:50%;
  display:grid;place-items:center;
  background:var(--btn-face);
  border:none;
  box-shadow:0 10px 22px rgba(0,0,0,.45);
  cursor:pointer;
  transition:transform var(--t-quick) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out);
}
.act-btn svg{display:block;width:42%;height:42%}
.act-pass svg{width:40%;height:40%}
.act-like svg{width:46%;height:46%}
.act-btn:active{transform:scale(.92)}
.act-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.act-btn,.claim-cta,.gate-steam-btn,.gate-close,.doc-close,.foot-link,.lang-option{touch-action:manipulation}
.act-label{
  font-size:clamp(9px,.78vw,11px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
}
.swipe-hint{
  margin-top:16px;
  font-size:clamp(11px,.95vw,13px);color:var(--ink-3);
  text-align:center;
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:899px){
  .swipe-scene{
    grid-template-columns:1fr;
    grid-auto-rows:min-content;
    justify-items:center;
    text-align:center;
    padding:clamp(18px,4vh,32px) 20px;
  }
  .swipe-copy{
    align-items:center;
    padding:clamp(8px,2vh,20px) 0 0;
    transform:none;                 /* desktop optical shift would overlap the counter */
  }
  .swipe-title{font-size:clamp(38px,11vw,64px)}
  .swipe-sub{margin-top:14px;font-size:clamp(13px,3.6vw,15px)}
  .microtag{display:none}
  .stack-side{width:100%;padding-right:0;transform:none}
  .progress-row{margin-bottom:12px}
  .stack-wrap{padding:0}
  .card-stack{width:clamp(196px,56vw,260px)}
  .tcard.pos-2{transform:translateX(-26%) rotate(-7deg) scale(.94)}
  .tcard.pos-3{transform:translateX(26%) rotate(7deg) scale(.94)}
  .tcard.pos-2 .t-art img,
  .tcard.pos-3 .t-art img{height:clamp(104px,26vw,150px)}
  .t-name{font-size:clamp(20px,5.4vw,26px)}
  .t-gun{font-size:clamp(12px,3.2vw,14px)}
  .swipe-actions{margin-top:14px}
  .act-btn{width:clamp(52px,14vw,62px);height:clamp(52px,14vw,62px)}
  .swipe-hint{margin-top:10px}
  .glow-a{right:auto;left:50%;translate:-50% 0;top:26%}
  .glow-b{right:8%;left:auto}
}

/* ---------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion:reduce){
  .tcard.is-idle{animation:none}
  .swipe-title .line,.swipe-sub{animation:none}
  .glow{animation:none}
}

/* restored from the pre-redesign sheet: shared layout for the match/result scenes
   (the first screen now has its own grid above, these two still rely on the old flow) */
.match-scene,.result-scene{
  position:relative;
  min-height:calc(100dvh - 56px);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:0 20px;
  overflow:hidden;
}
.match-copy{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  padding-top:clamp(10px,3vh,36px);
}
.match-scene h1,.result-scene .final-h1{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,6vw,44px);
  line-height:1.05;letter-spacing:-.005em;
  text-wrap:balance;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% 40%,rgba(139,92,246,0.05) 0%,transparent 70%),
    radial-gradient(140% 100% at 50% 45%,transparent 55%,#05070b 100%);
}

/* ---------------------------------------------------------------- match -- */
.match-copy{padding-top:clamp(20px,5vh,56px)}
.match-status{
  margin-top:14px;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);min-height:16px;
}
.match-status.is-live{color:var(--accent);animation:glowBreath 1.4s ease-in-out infinite}
@keyframes glowBreath{0%,100%{opacity:.55}50%{opacity:1}}
/* scene hand-off: reel dissolves before the result rises */
.match-scene{transition:opacity 620ms ease}
.match-scene.is-leaving{opacity:0}
/* ref: reel occupies ~71% of the width; side fields are clean dark (arches removed below) */
.match-stage{
  position:relative;flex:0 0 auto;width:min(912px,71vw);
  display:grid;place-items:center;
  margin:calc(20px + .76*clamp(180px,26vh,250px)) 0 44px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 95.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 1.5%,#000 95.5%,transparent 100%);
}
/* soft neutral wash behind the reel, no violet */
.match-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38% 46% at 50% 50%,rgba(247,244,239,.05),transparent 72%);
}
/* soft red glow below the reel, centred under the winning card (dating accent) */
/* reel centre = window centre (owner, 11.09 v21: frame was burning right of centre) */
.match-stage::after{
  content:"";position:absolute;left:50%;
  top:calc(50% + clamp(90px,13vh,125px) + 54px);
  translate:-50%;
  width:clamp(230px,30vw,300px);height:96px;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,88,90,.16),
    rgba(255,88,90,.08) 45%,
    transparent 72%);
  filter:blur(18px);
  pointer-events:none;z-index:0;
}
.match-lane{
  position:relative;width:100%;height:clamp(180px,26vh,250px);
  display:flex;align-items:stretch;gap:12px;
  will-change:transform;
}

/* two halves of a heart standing at the edges of the reel; when the reel settles
   they glide inwards and almost close around the winning card */
.match-arch{
  --arch-rest:calc(min(912px,71vw) / 2 - 86px);   /* parked at the reel edge, fully on screen */
  --arch-s:.82;
  --arch-close:1px;                               /* almost touching: the halves close into one heart */
  --arch-x:var(--arch-rest);
  position:absolute;top:55%; /* JS pins the halves to the reel centre on scene enter */
  height:calc(clamp(180px,26vh,250px) * 1.62);
  width:auto;aspect-ratio:48/86;
  left:50%;
  translate:0 -50%;
  pointer-events:none;z-index:2;
  transition:transform 540ms cubic-bezier(.22,1,.36,1),opacity 420ms ease;
}
.match-scene{--card-half:calc(clamp(180px,26vh,250px) * 1.02 * .75 / 2);}
.match-arch .arch-line{
  fill:none;
  stroke-width:3.4;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.9;
}
/* pen-draw: nothing is on screen until the reel starts, then the left half is
   drawn, then the right one — pathLength=100 normalises both contours */
.match-arch .arch-line,
.match-arch .arch-ink{stroke-dasharray:100;stroke-dashoffset:100}
@keyframes penDraw{to{stroke-dashoffset:0}}
.match-scene.is-drawing .match-arch--left .arch-line{animation:penDraw 620ms cubic-bezier(.35,.1,.2,1) 40ms forwards}
.match-scene.is-drawing .match-arch--left .arch-ink{animation:penDraw 300ms ease-out 560ms forwards}
.match-scene.is-drawing .match-arch--right .arch-line{animation:penDraw 620ms cubic-bezier(.35,.1,.2,1) 700ms forwards}
.match-scene.is-drawing .match-arch--right .arch-ink{animation:penDraw 300ms ease-out 1220ms forwards}
/* second, thinner pass — the contour reads as drawn by hand, not plotted */
.match-arch .arch-ink{
  fill:none;
  stroke:#FFE6E8;
  stroke-width:1.4;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.62;
}
.match-arch--left .arch-line{stroke:url(#heartL)}
.match-arch--right .arch-line{stroke:url(#heartR)}
/* halves are deliberately off: the right one sits higher, larger and tilted,
   so the heart closes like a sketch, not like two mirrored vectors */
.match-arch--left{--arch-tilt:-5deg;--arch-y:4px;--arch-k:1}
.match-arch--right{--arch-tilt:3.5deg;--arch-y:-7px;--arch-k:1.07}
.match-arch--left{transform:translateX(calc(-100% - var(--arch-x))) translateY(var(--arch-y)) rotate(var(--arch-tilt)) scale(calc(var(--arch-s) * var(--arch-k)))}
.match-arch--right{transform:translateX(var(--arch-x)) translateY(var(--arch-y)) rotate(var(--arch-tilt)) scale(calc(var(--arch-s) * var(--arch-k)))}
.match-scene.is-settled .match-arch{--arch-x:var(--arch-close);--arch-s:1}
.match-scene.is-settled .match-arch .arch-line{
  opacity:1;
  transition:opacity 420ms ease;
}
.match-scene.is-settled .match-arch{animation:heartBreath 1.6s ease-in-out 560ms infinite}
@keyframes heartBreath{
  0%,100%{filter:drop-shadow(0 0 9px rgba(255,88,90,.45))}
  50%{filter:drop-shadow(0 0 18px rgba(255,88,90,.75))}
}
@media (max-width:900px){
  .match-arch{height:calc(clamp(180px,26vh,250px) * 1.34);--arch-rest:calc(71vw / 2 - 6px);}
}
@media (prefers-reduced-motion:reduce){
  .match-arch{transition-duration:180ms}
  .match-scene.is-settled .match-arch{animation:none}
  .match-arch .arch-line,
  .match-arch .arch-ink{stroke-dashoffset:0}
  .match-scene.is-drawing .match-arch--left .arch-line,
  .match-scene.is-drawing .match-arch--left .arch-ink,
  .match-scene.is-drawing .match-arch--right .arch-line,
  .match-scene.is-drawing .match-arch--right .arch-ink{animation:none}
}

/* highlight frame hugging the winning card edge-to-edge: light rim + red glow */
.match-frame{
  position:absolute;left:50%;top:50%;
  translate:-50% -50%;
  /* frame hugs the lane card: same 3:4 proportion, plus the 1.02 hit-scale */
  height:calc(clamp(180px,26vh,250px) * 1.02);
  aspect-ratio:3/4;width:auto;
  border:2px solid rgba(247,244,239,.9);
  border-radius:18px;
  box-shadow:0 0 26px -4px rgba(255,88,90,.55),
             0 0 70px -8px rgba(255,88,90,.30);
  pointer-events:none;z-index:4;
}

/* accent triangles growing INTO the frame from its edges (ref: base sits on the card edge) */
.match-pointer{
  position:absolute;left:50%;
  width:16px;height:22px;
  translate:-50%;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.75)) drop-shadow(0 0 7px rgba(255,88,90,.28));
  pointer-events:none;z-index:6;
}
.match-pointer path{fill:#1C1A22;stroke:var(--accent)}
.match-pointer path+path{stroke:rgba(255,255,255,.75)}
/* triangle base lies on the frame edge, apex points to the reel */
.match-pointer--top{top:calc(50% - clamp(90px,13vh,125px) - 2px)}
.match-pointer--bottom{top:calc(50% + clamp(90px,13vh,125px) - 20px)}

/* full-screen pause after like: "Good pick. Let's find your match" */
.match-veil{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#06090F;
  opacity:0;transition:opacity 1200ms cubic-bezier(.33,0,.15,1);
  pointer-events:none;
}
.match-veil[hidden]{display:none}
.match-veil.is-on{opacity:1}
.veil-line{
  margin:0;
  font-size:clamp(20px,3.4vw,34px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  color:var(--ink);
  animation:veilIn 1000ms var(--ease-out) both;
}
.veil-line-2{color:var(--accent);animation-delay:180ms}
@keyframes veilIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* loader under the veil lines: three dots, highlight runs in a loop (V1) */
.veil-dots{
  display:flex;align-items:center;gap:14px;
  margin-top:clamp(18px,3.2vh,34px);
  animation:veilIn 1000ms var(--ease-out) both;
  animation-delay:360ms;
}
.veil-dots span{
  position:relative;width:8px;height:8px;border-radius:50%;
  background:rgba(247,244,239,.28);
  animation:veilDotScaleA 2700ms linear infinite;
}
.veil-dots span::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--accent);opacity:0;
  animation:veilDotInkA 2700ms linear infinite;
}
.veil-dots span:nth-child(2){animation-name:veilDotScaleB}
.veil-dots span:nth-child(2)::after{animation-name:veilDotInkB}
.veil-dots span:nth-child(3){animation-name:veilDotScaleC}
.veil-dots span:nth-child(3)::after{animation-name:veilDotInkC}
@keyframes veilDotScaleA{
  0%{transform:scale(1.25)}
  33.33%{transform:scale(1.25);animation-timing-function:ease-out}
  42.96%{transform:scale(1)}
  90.37%{transform:scale(1);animation-timing-function:ease-out}
  100%{transform:scale(1.25)}
}
@keyframes veilDotInkA{
  0%{opacity:1}
  33.33%{opacity:1;animation-timing-function:ease-out}
  42.96%{opacity:0}
  90.37%{opacity:0;animation-timing-function:ease-out}
  100%{opacity:1}
}
@keyframes veilDotScaleB{
  0%{transform:scale(1)}
  33.33%{transform:scale(1);animation-timing-function:ease-out}
  42.96%{transform:scale(1.25)}
  66.67%{transform:scale(1.25);animation-timing-function:ease-out}
  76.3%{transform:scale(1)}
  100%{transform:scale(1)}
}
@keyframes veilDotInkB{
  0%{opacity:0}
  33.33%{opacity:0;animation-timing-function:ease-out}
  42.96%{opacity:1}
  66.67%{opacity:1;animation-timing-function:ease-out}
  76.3%{opacity:0}
  100%{opacity:0}
}
@keyframes veilDotScaleC{
  0%{transform:scale(1)}
  66.67%{transform:scale(1);animation-timing-function:ease-out}
  76.3%{transform:scale(1.25)}
  90.37%{transform:scale(1.25);animation-timing-function:ease-out}
  100%{transform:scale(1)}
}
@keyframes veilDotInkC{
  0%{opacity:0}
  66.67%{opacity:0;animation-timing-function:ease-out}
  76.3%{opacity:1}
  90.37%{opacity:1;animation-timing-function:ease-out}
  100%{opacity:0}
}

/* compact lane card: light "profile" cards matching the first screen */
.m-item{
  --rar:#8847FF;
  flex:0 0 auto;
  /* card proportions match the swipe screen: height drives the width */
  height:100%;width:auto;
  aspect-ratio:3/4;
  display:flex;flex-direction:column;
  background:var(--card-main);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.55);
}
.m-item:nth-child(3n+1){background:var(--card-main)}
.m-item:nth-child(3n+2){background:var(--card-back-1)}
.m-item:nth-child(3n){background:var(--card-back-2)}
.m-item .m-art{
  flex:0 0 72%;
  display:grid;place-items:center;
  padding:10px 8px;
  min-height:0;
}
.m-item .m-art img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(28,26,34,.35));
  pointer-events:none;
}
/* name is a plain caption on the light card; rarity survives as a thin bottom strip */
.m-item .m-name{
  flex:1;
  display:flex;align-items:center;justify-content:flex-start;
  padding:10px 10px 12px;
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--card-ink);
  background:transparent;
  position:relative;
}
.m-item .m-name::after{
  content:"";position:absolute;left:10px;right:10px;bottom:6px;
  height:2px;
  background:var(--rar);
  opacity:.5;
}

/* final hit state */
.m-item.is-hit{
  box-shadow:0 0 34px -6px rgba(255,88,90,.55),
             0 18px 40px -18px #000d;
}
.m-item.is-hit{animation:mHit 320ms var(--ease-out)}
@keyframes mHit{0%{transform:scale(1)}55%{transform:scale(1.05)}100%{transform:scale(1.02)}}

/* settle: everything except the hit card fades back */
.match-lane.is-settled .m-item:not(.is-hit){
  filter:blur(3px);
  opacity:.25;
  transition:filter 420ms ease,opacity 420ms ease;
}

/* ---------- ФИНАЛЬНЫЙ ЭКРАН ---------- */

.result-scene {
  min-height: 100vh;
  text-align: left;
  background: var(--bg);
  display: flex;
  align-items: center;
  /* по эталону: текст начинается на 2.9% ширины, карточка стоит выше центра */
  padding: clamp(16px,2vh,28px) clamp(20px,5.7vw,86px) clamp(28px,5vh,60px) clamp(18px,2.9vw,44px);
  box-sizing: border-box;
}

.result-grid {
  width: 100%;
  /* эталон использует всю ширину: текст от 2.9%, карточка до 94.3% */
  max-width: none;
  margin: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 72px);
}

/* левая колонка */
.result-left {
  flex: 0 0 46%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.result-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.result-h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.02em;
  font-size: clamp(60px, 13vw, 182px);
  font-variation-settings: 'wdth' 88;
}

.result-h1 .l1,
.result-h1 .l2 {
  color: var(--ink);
}

.result-h1 .l3 {
  color: var(--accent);
}

.result-sub {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: 400;
  color: var(--ink-2);
}

.claim-cta {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 62px;
  padding: 0 38px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #FFF;
  font-family: inherit;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(255, 88, 90, .6);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.claim-cta:hover {
  background: #ff6f71;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -12px rgba(255, 88, 90, .65);
}

.claim-cta:active {
  transform: scale(.98);
}

.claim-arrow {
  font-size: .9em;
  line-height: 1;
}

.claim-sub {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}

.result-foot {
  margin-top: clamp(32px, 6vh, 80px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.foot-bar {
  width: 2px;
  height: 12px;
  background: var(--accent);
  flex: none;
}

.foot-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-3);
}

/* правая колонка */
.result-right {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.final-card {
  position: relative;
  /* по эталону: карточка занимает 75% высоты экрана, пропорция 0.91 */
  height: clamp(380px, 75vh, 680px);
  width: auto;
  aspect-ratio: .91;
  border-radius: 26px;
  background: #E1A9AC;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.final-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px 0 8px;
  border-radius: 999px;
  background: #F8F3EC;
}

.badge-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3BC97F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.badge-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1C1A22;
}

.final-art {
  height: 66%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 22px 0;
  box-sizing: border-box;
}

.final-art img,
.final-art svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .22));
}

.final-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 22px;
}

.final-item {
  font-size: clamp(26px, 2.9vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  color: #1C1A22;
}

.final-gun {
  margin-top: 4px;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 600;
  color: rgba(28, 26, 34, .62);
}

.final-chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.final-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(28, 26, 34, .28);
  font-size: 12px;
  font-weight: 600;
  color: rgba(28, 26, 34, .72);
  white-space: nowrap;
}

/* адаптив финального экрана */
@media (max-width: 899px) {
  .result-scene {
    align-items: flex-start;
    padding: 18px 18px 32px;
  }

  .result-grid {
    flex-direction: column-reverse;
    gap: 22px;
  }

  /* карточка не должна выталкивать кнопку за сгиб */
  .final-card {
    height: clamp(280px, 42vh, 380px);
    margin: 0 auto;
  }
  .result-h1 {
    font-size: clamp(40px, 13vw, 62px);
  }
  .claim-cta {
    width: 100%;
  }

  .result-left,
  .result-right {
    flex: none;
    width: 100%;
  }

  .result-right {
    justify-content: center;
  }

  .result-copy {
    align-items: stretch;
  }

  .result-h1 {
    font-size: clamp(54px, 16vw, 110px);
  }

  .claim-cta {
    width: 100%;
    margin-top: 26px;
  }

  .result-foot {
    display: none;
  }
}

/* ---------- МОДАЛКА ---------- */

.signin-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.signin-modal[hidden] {
  display: none;
}

.sm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 15, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}

.sm-window {
  position: relative;
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 26px;
  background: #111419;
  border: 1px solid rgba(247, 244, 239, .10);
  box-shadow: 0 40px 100px -30px #000;
  padding: 28px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: transform .3s cubic-bezier(.34, 1.2, .5, 1), opacity .3s ease;
}

.signin-modal.is-open .sm-backdrop {
  opacity: 1;
}

.signin-modal.is-open .sm-window {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sm-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}

.sm-close:hover {
  color: var(--ink);
  background: rgba(247, 244, 239, .06);
}

.sm-body {
  display: flex;
  align-items: center;
  gap: 34px;
}

.sm-media {
  flex: 0 0 44%;
  min-width: 0;
}

.sm-card {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #B9AFE1;
  overflow: hidden;
}

.sm-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
  box-sizing: border-box;
}

.sm-art img,
.sm-art svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sm-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: 20px;
}

.sm-title {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variation-settings: 'wdth' 88;
  /* на эталоне заголовок стоит в одну строку */
  white-space: nowrap;
}

.sm-text {
  margin: 14px 0 0;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.45;
  color: var(--ink-2);
}

.sm-bonus {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  padding: 0 34px;
  border-radius: 14px;
  background: #B3AFE6;
  color: #15131C;
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}

.sm-claim {
  margin-top: 18px;
  width: 100%;
  height: 66px;
  border: 0;
  border-radius: 14px;
  background: #E6756D;
  color: #FFF;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}

.sm-claim:hover {
  background: #ec8a83;
}

.sm-claim:active {
  transform: scale(.99);
}

/* адаптив модалки */
@media (max-width: 819px) {
  .sm-title{white-space:normal}
  .sm-window {
    padding: 20px;
  }

  .sm-body {
    flex-direction: column;
    gap: 22px;
  }

  .sm-media {
    flex: none;
    width: 100%;
  }

  .sm-card {
    aspect-ratio: auto;
    height: 240px;
  }

  .sm-content {
    padding-right: 0;
    padding-bottom: 8px;
  }

  .sm-title {
    font-size: clamp(24px, 6.4vw, 32px);
  }

  .sm-text {
    font-size: 14px;
  }

  .sm-bonus {
    height: 54px;
    font-size: 20px;
    padding: 0 24px;
  }

  .sm-claim {
    height: 58px;
    font-size: 19px;
  }

  .sm-close {
    top: 14px;
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-backdrop,
  .sm-window {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .claim-cta,
  .sm-claim,
  .sm-close {
    transition: none;
  }
}

/* ----------------------------------------------------------------- gate -- */
.gate-modal{
  position:fixed;inset:0;z-index:70;
  display:grid;place-items:center;
  padding:20px;
  background:#05070bcc;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-base) ease;
}
.gate-modal.is-shown{opacity:1;pointer-events:auto}
.gate-panel{
  position:relative;
  width:min(400px,100%);
  padding:26px 24px 20px;
  background:linear-gradient(180deg,#131a26,#0e141e);
  border:1px solid var(--edge-hi);
  border-radius:var(--r-panel);
  box-shadow:0 34px 70px -24px #000;
  transform:translateY(12px) scale(.97);
  transition:transform var(--t-base) var(--ease-out);
}
.gate-modal.is-shown .gate-panel{transform:none}
.gate-title{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:.02em}
.gate-steam-ico{width:22px;height:22px;flex:0 0 auto}
.gate-form{margin-top:20px;display:flex;flex-direction:column;gap:14px}
/* steam login button — real redirect, no fake form */
.gate-steam-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:50px;
  padding:13px 18px;
  font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,#1b2838,#171d25);
  border:1px solid #2a475e;
  border-radius:var(--r-badge);
  cursor:pointer;
  box-shadow:0 14px 28px -12px #000c,inset 0 1px 0 #ffffff1a;
  transition:transform 150ms var(--ease-out),border-color 200ms ease,box-shadow 200ms ease,filter 200ms ease;
}
.gate-steam-logo{width:24px;height:24px;flex:0 0 auto;fill:#c7d5e0}
@media (hover:hover) and (pointer:fine){
  .gate-steam-btn:hover{
    filter:brightness(1.08);
    border-color:#3d6a8a;
    box-shadow:0 14px 32px -12px #000d,0 0 24px -6px #1999ff59,inset 0 1px 0 #ffffff26;
  }
}
.gate-steam-btn:active{transform:scale(.98)}
.gate-steam-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.gate-close{
  position:absolute;top:10px;right:12px;
  width:34px;height:34px;
  display:grid;place-items:center;
  font-size:22px;line-height:1;color:var(--ink-3);
  background:transparent;border:0;border-radius:50%;cursor:pointer;
  transition:color 150ms ease;
}
@media (hover:hover) and (pointer:fine){.gate-close:hover{color:var(--ink)}}
.gate-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* --------------------------------------------------------------- footer -- */
.foot{
  position:relative;z-index:2;
  border-top:1px solid #131c25;
  padding:14px clamp(16px,3.4vw,40px) calc(18px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--ink-3);font-size:11.5px;line-height:1.6;text-align:center;
}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px}
.foot-lang{display:inline-flex;gap:4px}
.lang-option{
  font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  color:var(--ink-3);
  padding:4px 9px;
  background:transparent;border:1px solid transparent;cursor:default;
}
.lang-option.is-active{color:var(--ink-2);border-color:var(--edge)}
.foot-link{
  font-family:inherit;font-size:11.5px;
  color:var(--ink-2);
  background:transparent;border:0;border-bottom:1px solid #2a3844;
  padding:1px 0;cursor:pointer;
  transition:color 150ms ease,border-color 150ms ease;
}
@media (hover:hover) and (pointer:fine){
  .foot-link:hover{color:var(--ink);border-color:var(--ink-3)}
}
.foot-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.foot-age{
  display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;
  border:1px solid #2a3844;border-radius:var(--r-badge);
  color:var(--ink-2);font-weight:600;font-size:11px;
}
.foot-steam{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px}
.foot-steam-link{
  font-size:11.5px;font-weight:600;color:var(--ink-2);
  text-decoration:none;border-bottom:1px solid #2a3844;
  transition:color 150ms ease,border-color 150ms ease;
}
.foot-steam-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .foot-steam-link:hover{color:var(--ink);border-color:var(--ink-3)}
}
.foot-steam-note{font-size:11px;color:var(--ink-3)}
.foot-copy{font-size:11px}

/* ----------------------------------------------------------------- docs -- */
.doc-modal{
  position:fixed;inset:0;z-index:70;
  display:grid;place-items:center;
  padding:20px;
  background:#05070bcc;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-base) ease;
}
.doc-modal.is-shown{opacity:1;pointer-events:auto}
.doc-panel{
  width:min(620px,100%);
  max-height:min(78vh,640px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#131a26,#0e141e);
  border:1px solid var(--edge-hi);
  border-radius:var(--r-panel);
  box-shadow:0 34px 70px -24px #000;
  transform:translateY(12px) scale(.97);
  transition:transform var(--t-base) var(--ease-out);
}
.doc-modal.is-shown .doc-panel{transform:none}
.doc-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--edge);
}
.doc-title{font-size:16px;font-weight:600;letter-spacing:.04em}
.doc-close{
  width:34px;height:34px;flex:0 0 auto;
  display:grid;place-items:center;
  font-size:22px;line-height:1;color:var(--ink-3);
  background:transparent;border:0;border-radius:50%;cursor:pointer;
  transition:color 150ms ease;
}
@media (hover:hover) and (pointer:fine){.doc-close:hover{color:var(--ink)}}
.doc-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.doc-body{
  padding:16px 20px 22px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);
  text-align:left;
}
.doc-body details{border:1px solid var(--edge);border-radius:var(--r-badge);padding:10px 14px;background:#0c1119}
.doc-body summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:13px;letter-spacing:.02em}
.doc-body details p{margin-top:8px}

/* ------------------------------------------------------------- movement -- */
@media (max-width:900px){
  .top-host{font-size:11px}
  .card-stack{width:min(320px,86vw)}
  .swipe-actions{gap:44px}
}
@media (max-width:900px) and (max-height:740px){
  .swipe-scene h1{font-size:clamp(20px,5.4vw,26px)}
  .stack-wrap{margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  :root{--t-quick:110ms;--t-base:200ms;--t-slow:260ms}
  .match-veil{transition-duration:220ms}
  .veil-line{animation-duration:220ms}
  .veil-dots{animation-duration:220ms}
  .veil-dots span,
  .veil-dots span::after{animation:none}
  .veil-dots span:nth-child(2){transform:scale(1.25)}
  .veil-dots span:nth-child(2)::after{opacity:1}
  .tcard.is-idle{animation:none}
  .tcard.is-idle.pos-top{translate:0 0}
  .tcard.nudge-pass,.tcard.nudge-like{transform:none !important}
  .tcard.is-returning{transition:transform 120ms linear,box-shadow 120ms linear}
  .match-status.is-live{animation:none}
  .m-item.is-hit{animation-duration:180ms}
  .final-card{animation:riseIn 260ms var(--ease-out) backwards}
  .final-card::before{animation:riseIn 260ms var(--ease-out) backwards}
  *{scroll-behavior:auto}
}

/* scene switching: author display rules must not defeat the hidden attribute
   (last rule on purpose — every scene/modal class sets display above) */
[hidden]{display:none}