/* =============================================================================
   PERSIANTOXIC — "SECTOR"
   -----------------------------------------------------------------------------
   Hairlines instead of shadows, monospace telemetry instead of decoration,
   generated motion instead of photography, and exactly one accent colour.

   Rules the system obeys:
     · No image is ever decorative. Item icons appear only inside kits.
     · Every surface is a 1px hairline plate. No glows, no blur, no gradients
       except the ground wash behind the page.
     · One reveal animation for the entire site.
     · Blue means structure. Orange means live. Nothing else carries colour.

   Sections: 01 tokens · 02 base · 03 type · 04 chrome · 05 surfaces
             06 controls · 07 hero · 08 home · 09 messages · 10 responsive
   ============================================================================= */

/* =============================================================================
   01 · TOKENS
   ========================================================================== */
@font-face{
  font-family:'Syne';
  src:url('../fonts/Syne-Var.woff2') format('woff2-variations'),
      url('../fonts/Syne-Var.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Martian Mono';
  src:url('../fonts/MartianMono-Var.woff2') format('woff2-variations'),
      url('../fonts/MartianMono-Var.woff2') format('woff2');
  font-weight:100 800; font-stretch:75% 112.5%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Changa';
  src:url('../fonts/Changa-Var.woff2') format('woff2-variations'),
      url('../fonts/Changa-Var.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{font-family:'Peyda';src:url('../fonts/Peyda-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Peyda';src:url('../fonts/Peyda-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Peyda';src:url('../fonts/Peyda-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Peyda';src:url('../fonts/Peyda-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* — ground —————————————————————————————————————
     Not pure black: a graphite base with a blue cast reads as depth on a
     display, where #000 just reads as "off". */
  --void:#080a0f;
  --pit:#0c0f16;
  --panel:#10141d;
  --panel-2:#151a25;

  /* — hairlines ————————————————————————————————— */
  --line:#1a2740;
  --line-2:#23375e;
  --line-3:#2d4674;

  /* — the one accent ——————————————————————————— */
  --blue:#1e5bff;
  --blue-hi:#4d84ff;
  --blue-dp:#0a2a7a;
  --blue-wash:#061534;

  /* — live: the only warm value in the system ——————————— */
  --live:#ff7a1a;

  /* — text ————————————————————————————————————— */
  --t1:#e9f0fb;
  --t2:#93aecd;
  --t3:#5a789c;
  --t4:#334b68;

  /* — measure ———————————————————————————————— */
  --shell:73rem;
  --gutter:clamp(1.25rem,4vw,3.25rem);

  /* — motion ————————————————————————————————— */
  /* +1 in LTR, -1 in RTL: lets a transform travel along the inline axis. */
  --dir:1;

  --ease:cubic-bezier(.16,1,.3,1);
  --d1:180ms; --d2:320ms; --d3:700ms;

  /* — type ————————————————————————————————————— */
  --f-display:'Syne',system-ui,sans-serif;
  /* Mid-level headings run in a tighter, blacker face than the display one:
     card titles and question rows need weight at small sizes, where a wide
     display face goes soft. */
  --f-title:'Syne',system-ui,sans-serif;
  --title-weight:800;
  --f-body:'Peyda',system-ui,sans-serif;
  --f-mono:'Martian Mono',ui-monospace,monospace;
  --display-track:-.03em;
  --display-leading:.94;
  --display-case:uppercase;
}

/* Persian swaps the display face and relaxes the metrics the Latin face needs. */
html[dir="rtl"]{--dir:-1}
html[lang="fa"],html[dir="rtl"],body.lang-fa{
  --f-display:'Changa','Syne',system-ui,sans-serif;
  --f-title:'Peyda','Changa',system-ui,sans-serif;
  --title-weight:900;
  --display-track:-.01em;
  --display-leading:1.28;
  --display-case:none;
}

/* =============================================================================
   02 · BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--t1);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
table{border-collapse:collapse;width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:1px}
::selection{background:color-mix(in oklab,var(--blue) 34%,transparent);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:var(--blue-dp)}
html.lang-fa-bootstrap{visibility:hidden!important}

.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =============================================================================
   03 · TYPE
   Three voices, never mixed: display (headlines), body (prose),
   mono (anything measured — coordinates, counts, timers, the connect string).
   ========================================================================== */
.t-display{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:var(--display-track);
  line-height:var(--display-leading);
  text-transform:var(--display-case);
  text-wrap:balance;
}
.t-xl{font-size:clamp(2.5rem,7.4vw,5.75rem)}
.t-lg{font-size:clamp(1.9rem,4.6vw,3.5rem)}
.t-md{font-size:clamp(1.35rem,2.4vw,2rem)}
.t-sm{font-size:clamp(1.05rem,1.6vw,1.3rem)}
/* Anything at t-md or below switches to the title face. */
.t-display.t-md,.t-display.t-sm{
  font-family:var(--f-title);
  font-weight:var(--title-weight);
  letter-spacing:-.015em;
}
html[lang="fa"] .t-display.t-md,html[lang="fa"] .t-display.t-sm,
body.lang-fa .t-display.t-md,body.lang-fa .t-display.t-sm{
  letter-spacing:0;line-height:1.45;
}

.t-mono{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-stretch:85%;
  letter-spacing:-.02em;
}
/* Map annotation. Always Latin, always monospace, never translated — these are
   grid references and sheet labels, the way they are printed on a survey map. */
.t-code{
  font-family:var(--f-mono);
  font-size:.6875rem;
  font-weight:500;
  font-stretch:88%;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--t3);
  direction:ltr;
  unicode-bidi:isolate;
  white-space:nowrap;
}

/* Interface label. Carries real, translated copy, so in Persian it drops the
   monospace voice entirely: wide tracking pulls Arabic-script joins apart and
   an LTR override reorders the words. */
.t-eyebrow{
  font-family:var(--f-mono);
  font-size:.6875rem;
  font-weight:500;
  font-stretch:88%;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--t3);
}
html[lang="fa"] .t-eyebrow,body.lang-fa .t-eyebrow{
  font-family:var(--f-body);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.t-lede{
  color:var(--t2);
  font-size:clamp(1rem,1.25vw,1.125rem);
  line-height:1.95;
  max-width:56ch;
  text-wrap:pretty;
}
.t-num{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-stretch:85%;
  direction:ltr;
  unicode-bidi:isolate;
}

/* Underline that draws itself — used on every inline link. */
.u-line{
  background-image:linear-gradient(var(--blue),var(--blue));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size var(--d2) var(--ease);
}
html[dir="rtl"] .u-line{background-position:100% 100%}
.u-line:hover,.u-line:focus-visible{background-size:100% 1px}

/* =============================================================================
   04 · CHROME — masthead, dock, footer
   ========================================================================== */
.mast{
  position:fixed;top:0;inset-inline:0;z-index:60;
  background:color-mix(in srgb,var(--void) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--d2) linear,background var(--d2) linear;
}
.mast.is-scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--void) 94%,transparent)}
.mast__in{display:flex;align-items:center;gap:1.5rem;height:4.5rem}
@media (min-width:64em){
  /* Three tracks so the nav sits on the page centre line regardless of
     how wide the wordmark or the action group happen to be. */
  .mast__in{display:grid;grid-template-columns:1fr auto 1fr}
  .mark{justify-self:start}
  .pnav{justify-self:center;margin:0}
  .mast__end{justify-self:end;margin:0}
}

/* Wordmark is typographic — the server has no logo mark on the site. */
.mark{display:flex;align-items:center;gap:.55rem;flex:none;direction:ltr}
.mark__logo{
  width:1.6rem;height:1.6rem;flex:none;object-fit:contain;
  transition:transform var(--d3) var(--ease);
}
.mark:hover .mark__logo{transform:rotate(90deg)}
.mark__name{align-self:center}
.mark__name{
  font-family:'Syne',var(--f-display);
  font-weight:800;font-size:1.0625rem;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--t1);
  transition:color var(--d2) var(--ease);
}
.mark:hover .mark__name{color:var(--blue-hi)}
.mark__tag{font-family:var(--f-mono);font-size:.5625rem;font-stretch:85%;letter-spacing:.2em;color:var(--blue);text-transform:uppercase}

.pnav{display:none;align-items:center;gap:.25rem;margin-inline-start:auto}
.pnav__a{
  position:relative;padding:.5rem .75rem;
  font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t3);
  transition:color var(--d2) var(--ease);
}
html[lang="fa"] .pnav__a,body.lang-fa .pnav__a{
  font-family:var(--f-body);font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none;
}
.pnav__a::after{
  content:"";position:absolute;inset-inline:.75rem;bottom:.15rem;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:inline-start;
  transition:transform var(--d2) var(--ease);
}
.pnav__a:hover{color:var(--t1)}
.pnav__a:hover::after,.pnav__a[aria-current="page"]::after{transform:scaleX(1)}
.pnav__a[aria-current="page"]{color:var(--t1)}

/* Always pushed to the far end of the row. (A `.pnav + .mast__end` override
   used to cancel this for the old flex header; under the grid header above it
   only broke the small-screen layout, where the keys sat against the
   wordmark instead of the opposite edge.) */
.mast__end{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}

/* Language switch: two states on one hairline. */
/* -----------------------------------------------------------------------------
   MASTHEAD KEYS
   The two standing controls share one silhouette so the corner reads as a pair
   rather than two unrelated widgets: same height, same hairline, and a blue
   plate that slides in from the leading edge on approach.
   -------------------------------------------------------------------------- */
.hbtn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.5rem;
  height:2.25rem;padding-inline:.8rem;
  border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--t2);white-space:nowrap;
  transition:color var(--d2) var(--ease),border-color var(--d2) var(--ease);
}
.hbtn:hover{color:#fff;border-color:var(--blue)}

/* The plate rides the inline axis, so it enters from the correct side in
   both scripts without a second rule. */
.hbtn__fill{
  position:absolute;inset:0;z-index:-1;
  background:var(--blue-wash);
  transform:translateX(calc(-101% * var(--dir)));
  transition:transform var(--d3) var(--ease);
}
.hbtn:hover .hbtn__fill{transform:none}

/* — dashboard ————————————————————————————————— */
.hbtn--dash{padding-inline-start:.7rem}
.hbtn--dash::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:var(--blue);
  transform:scaleY(.4);transform-origin:center;
  transition:transform var(--d2) var(--ease);
}
.hbtn--dash:hover::before{transform:scaleY(1)}
.hbtn__i{width:.875rem;height:.875rem;flex:none;color:var(--blue-hi);transition:color var(--d2) var(--ease)}
.hbtn--dash:hover .hbtn__i{color:#fff}
html[lang="fa"] .hbtn__t,body.lang-fa .hbtn__t{
  font-family:var(--f-body);font-size:.8125rem;font-weight:600;
  letter-spacing:0;text-transform:none;
}

/* — language ————————————————————————————————— */
.hbtn--lang{gap:0;padding-inline:0;direction:ltr}
.hbtn__lang{
  position:relative;
  padding:.55rem .7rem;
  color:var(--t4);
  transition:color var(--d2) var(--ease);
}
.hbtn__lang::after{
  content:"";position:absolute;inset-inline:.7rem;bottom:.42rem;height:1px;
  background:var(--blue);
  transform:scaleX(0);
  transition:transform var(--d2) var(--ease);
}
.hbtn__rule{width:1px;align-self:stretch;background:var(--line-2)}
.hbtn--lang:hover .hbtn__lang{color:var(--t2)}
body.lang-fa .hbtn__lang[data-lang="fa"],
body.lang-en .hbtn__lang[data-lang="en"]{color:var(--t1)}
body.lang-fa .hbtn__lang[data-lang="fa"]::after,
body.lang-en .hbtn__lang[data-lang="en"]::after{transform:scaleX(1)}

/* =============================================================================
   DOCK — the primary navigation below the fold on small screens.
   Five destinations, one active. Replaces the hamburger entirely: nothing is
   hidden behind a menu, and the thumb never has to reach the top of a phone.
   ========================================================================== */
.dock{
  position:fixed;inset-inline:0;bottom:0;z-index:80;
  display:none;grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb,var(--void) 94%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock__a{
  position:relative;
  display:grid;justify-items:center;align-content:center;gap:.3rem;
  padding:.6rem .25rem .55rem;
  color:var(--t4);
  transition:color var(--d2) var(--ease);
}
.dock__i{display:grid;place-items:center;width:1.375rem;height:1.375rem}
.dock__i svg{width:100%;height:100%}
.dock__l{
  font-family:var(--f-mono);font-size:.5rem;font-stretch:88%;
  letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}
html[lang="fa"] .dock__l,body.lang-fa .dock__l{
  font-family:var(--f-body);font-size:.625rem;font-weight:600;
  letter-spacing:0;text-transform:none;
}
/* The active tab is marked twice: a rule on the top edge and a colour shift,
   so it still reads for anyone who cannot separate the two blues. */
.dock__a::before{
  content:"";position:absolute;inset-block-start:-1px;inset-inline:22%;height:2px;
  background:var(--blue);
  transform:scaleX(0);
  transition:transform var(--d3) var(--ease);
}
.dock__a[aria-current="page"]{color:var(--t1)}
.dock__a[aria-current="page"]::before{transform:scaleX(1)}
.dock__a[aria-current="page"] .dock__i{color:var(--blue-hi)}
.dock__a:active{color:var(--t2)}

@media (max-width:63.99em){
  .dock{display:grid}
  /* Keep the footer clear of the dock. */
  body{padding-bottom:4.25rem}
  .toasts{inset-block-end:5rem}
}

/* — footer ————————————————————————————————————— */
.foot{border-top:1px solid var(--line);margin-top:clamp(3rem,7vw,6rem)}
/* The whole footer is centred, in both languages. */
.foot__top{
  display:grid;gap:2.5rem;
  grid-template-columns:1fr;
  padding-block:clamp(2.5rem,5vw,4rem);
  text-align:center;
}
.foot__mark{
  max-width:40ch;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
}
/* The wordmark, not the logo+tag block, must sit above the blurb centre. So in
   the footer the mark stacks — logo over wordmark — and drops the 10x tag;
   that puts "PERSIANTOXIC" itself dead-centre above the description. */
.foot__mark .mark{flex-direction:column;gap:.5rem}
.foot__mark .mark__logo{width:2rem;height:2rem}
.foot__mark .mark__tag{display:none}
.foot__blurb{margin-top:1rem;color:var(--t3);font-size:.875rem;line-height:1.9}
.foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.5rem}
.foot__cols > :nth-child(3){grid-column:1 / -1;justify-self:center}
.foot__h{margin-bottom:.9rem}
.foot__l{display:block;padding:.28rem 0;color:var(--t2);font-size:.875rem;transition:color var(--d1) linear}
.foot__l:hover{color:var(--blue-hi)}
.foot__social{display:flex;gap:.5rem;margin-top:1.25rem;justify-content:center}
.sico{
  display:grid;place-items:center;
  width:2.5rem;height:2.5rem;
  border:1px solid var(--line-2);color:var(--t3);
  transition:color var(--d2) var(--ease),border-color var(--d2) var(--ease),background var(--d2) var(--ease);
}
.sico svg{width:1.125rem;height:1.125rem}
.sico:hover{color:#fff;border-color:var(--blue);background:var(--blue)}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:center;text-align:center;
  padding-block:1.25rem;border-top:1px solid var(--line);
}

/* =============================================================================
   05 · SURFACES
   One plate treatment, one grid treatment. Nothing else.
   ========================================================================== */
.plate{border:1px solid var(--line);background:var(--panel)}
.plate--flush{background:transparent}

/* Hairline data grid: the 1px gaps ARE the rules. */
.dgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.dgrid > *{background:var(--void);padding:.9rem 1rem}
.dgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dcell__k{display:block}
.dcell__v{
  display:block;margin-top:.6rem;
  font-family:var(--f-mono);font-stretch:82%;font-weight:600;
  font-size:clamp(.8125rem,1.1vw,.9375rem);line-height:1.2;color:var(--t1);
  font-variant-numeric:tabular-nums;direction:ltr;
  white-space:nowrap;
}
html[dir="rtl"] .dcell__v{text-align:end}
.dcell__v--live{color:var(--live)}
/* Some cells hold a phrase, not a measurement: they follow the body font and
   the page's own direction instead of the LTR telemetry voice. */
.dcell__v--text{
  font-family:var(--f-body);font-weight:600;
  font-size:.875rem;line-height:1.5;
  direction:inherit;unicode-bidi:normal;white-space:normal;
  /* The base cell is LTR telemetry aligned to `end` (its right). A prose cell
     runs in the page direction, where `end` would flip to the left — so it
     aligns to `start` and sits on the right in Persian, left in English. */
  text-align:start;
}

/* Section head: a label, a rule that draws itself in, and nothing else. */
.sect{position:relative;padding-block:clamp(2.75rem,5vw,4.5rem);scroll-margin-top:5rem}
.sect__stamp{display:flex;align-items:center;gap:1.25rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.sect__lbl{color:var(--t2);flex:none}
.sect__rule{
  flex:1;height:1px;
  background:linear-gradient(to left,transparent,var(--line-2) 12%,var(--line-2));
  transform:scaleX(0);transform-origin:right center;
  transition:transform 1.1s var(--ease);
}
html[dir="ltr"] .sect__rule{
  background:linear-gradient(to right,transparent,var(--line-2) 12%,var(--line-2));
  transform-origin:left center;
}
.sect__stamp.is-in .sect__rule{transform:scaleX(1)}

/* Live indicator — the only warm colour on the site. */
.live{position:relative;display:inline-flex;width:6px;height:6px;flex:none}
.live::before,.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live)}
.live::before{animation:livePing 2.4s var(--ease) infinite}
.live--off::before{display:none}
.live--off::after{background:var(--t4)}
@keyframes livePing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}

/* The single reveal. Everything on the site enters this way. */
[data-rv]{opacity:0;transform:translate3d(0,18px,0)}
[data-rv].is-in{opacity:1;transform:none;transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease)}

/* Generated SVG strata. Each line sits in its own <g> carrying a depth, and
   the host carries the scroll progress: multiplying the two shears the stack
   apart as the section crosses the screen and closes it again on the way out. */
.lines{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* Mirror the whole field to reading direction. The flip lives on the <svg>,
   not the .lines host: the host carries data-rv, and the reveal rule
   `[data-rv].is-in{transform:none}` would otherwise cancel the mirror. */
.lines svg{width:100%;height:100%;display:block;transform:scaleX(var(--dir))}
/* Strata shear sideways as the section passes. */
.lines g{
  transform:translate3d(calc(var(--sy,0) * var(--d,1) * 95px),
                        calc(var(--sy,0) * var(--d,1) * -18px),0);
  will-change:transform;
}
/* Rings turn instead: each band rotates around the shared centre at its own
   rate and drifts a little, so the stack winds and unwinds on scroll. */
.lines--orbit g{
  transform:rotate(calc(var(--sy,0) * var(--d,1) * 16deg))
            translate(calc(var(--sy,0) * var(--d,1) * 22px),
                      calc(var(--sy,0) * var(--d,1) * 10px));
}
.lines path{
  fill:none;
  stroke:var(--line-2);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.lines path.ix{stroke:var(--blue);stroke-opacity:.55;stroke-width:1.25}
.lines--drawn path{
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.9s var(--ease);
}
.lines--drawn.is-in path{stroke-dashoffset:0}
.lines--soft path{stroke-opacity:.55}
.lines--soft path.ix{stroke-opacity:.4}

/* Hairline bracket: a partial frame that anchors a section's corner. */
.bracket{position:absolute;width:clamp(2.5rem,6vw,5rem);aspect-ratio:1;pointer-events:none}
.bracket::before,.bracket::after{content:"";position:absolute;background:var(--blue)}
.bracket::before{inset-block-start:0;inset-inline-start:0;width:100%;height:1px}
.bracket::after{inset-block-start:0;inset-inline-start:0;width:1px;height:100%}
/* Clear of the fixed masthead, anchored to the viewport edge. */
.bracket--tl{inset-block-start:5.25rem;inset-inline-start:1.25rem}

/* Atmosphere canvas. Sits behind everything, never takes a pointer event, and
   fades out down the page so the field reads as depth behind the hero rather
   than noise behind body copy. */
.fx{
  position:fixed;inset:0;z-index:-1;
  width:100%;height:100%;
  pointer-events:none;
  opacity:.66;
  filter:blur(.7px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.3) 72%,rgba(0,0,0,.14) 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.3) 72%,rgba(0,0,0,.14) 100%);
}

/* Ground: one wide wash of blue at the top of the document, and a vignette
   that keeps the corners quiet. Both sit under the canvas. */
.ground{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% -14%,rgba(23,66,168,.32),transparent 62%),
    radial-gradient(70% 46% at 82% 4%,rgba(0,132,184,.14),transparent 68%),
    radial-gradient(105% 105% at 50% 46%,transparent 52%,rgba(2,3,6,.5) 100%);
}

/* =============================================================================
   06 · CONTROLS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3rem;padding:0 1.5rem;
  border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--t1);white-space:nowrap;
  transition:background var(--d2) var(--ease),border-color var(--d2) var(--ease),color var(--d2) var(--ease);
}
html[lang="fa"] .btn,body.lang-fa .btn{
  font-family:var(--f-body);font-weight:600;font-size:.9375rem;letter-spacing:0;text-transform:none;
}
.btn:hover{border-color:var(--blue);color:#fff;background:var(--blue-wash)}
.btn--solid{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--solid:hover{background:var(--blue-hi);border-color:var(--blue-hi)}
.btn--sm{min-height:2.25rem;padding:0 .9rem;font-size:.625rem}
.btn--block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn svg{width:1rem;height:1rem;flex:none}

/* The connect string is the product, so it gets the largest interaction. */
.copy{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  width:100%;padding:1.15rem 1.35rem;
  border:1px solid var(--line-2);background:var(--pit);
  text-align:start;
  transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease);
}
.copy:hover{border-color:var(--blue);background:var(--blue-wash)}
.copy__v{
  font-family:var(--f-mono);font-weight:600;font-stretch:85%;
  font-size:clamp(.9rem,2.6vw,1.6rem);
  color:var(--t1);direction:ltr;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.copy__v .dim{color:var(--t3);font-weight:400}
.copy__a{flex:none;color:var(--t3);transition:color var(--d2) var(--ease)}
.copy:hover .copy__a{color:var(--blue-hi)}
.copy__hint{margin-top:.7rem;font-size:.8125rem;color:var(--t3)}
.foot__fine{font-size:.8125rem;color:var(--t4)}
.foot__fine .heart{color:var(--live)}

.field{display:block}
.field__l{display:block;margin-bottom:.5rem}
.field input,.field select,.field textarea,.inp{
  width:100%;min-height:3rem;padding:.75rem 1rem;
  border:1px solid var(--line-2);background:var(--pit);color:var(--t1);
  font-family:var(--f-body);font-size:.9375rem;
  transition:border-color var(--d2) var(--ease);
}
.field textarea{min-height:8rem;line-height:1.8;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--t4)}
.field input:focus,.field select:focus,.field textarea:focus,.inp:focus{border-color:var(--blue)}

.tag{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .6rem;border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.625rem;font-stretch:85%;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t2);white-space:nowrap;
}
html[lang="fa"] .tag,body.lang-fa .tag{font-family:var(--f-body);font-size:.8125rem;letter-spacing:0;text-transform:none}
.tag--blue{border-color:var(--blue);color:var(--blue-hi)}
.tag--live{border-color:color-mix(in srgb,var(--live) 55%,transparent);color:var(--live)}

/* =============================================================================
   07 · HERO
   ========================================================================== */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;padding-top:4.5rem}
.hero__in{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding-block:clamp(1.5rem,4vw,2.5rem) clamp(1.5rem,3vw,2rem)}
.hero__strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.hero__push{margin-inline-start:auto}
.hero__live{display:flex;align-items:center;gap:.6rem}
.hero__count{font-size:.6875rem;color:var(--t1)}
.hero__count .dim{color:var(--t3);letter-spacing:.16em;text-transform:uppercase;font-size:.625rem}
.hero__mid{padding-block:clamp(2.5rem,7vw,4.5rem)}
.hero__h{color:var(--t1)}
/* Latin wordmark reveal: each glyph rides up out of its own mask. */
.hero__word{display:flex;flex-wrap:wrap}
.hero__g{display:inline-block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.hero__g > span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--ease)}
.hero.is-lit .hero__g > span{transform:none}
.hero__lede{margin-top:clamp(1.5rem,3vw,2.25rem)}

/* Rotating claims. Lines are stacked in place so the block never reflows;
   the outgoing line rolls up and blurs out as the next rolls in. */
.rota{
  position:relative;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  max-width:56ch;
}
.rota__track{position:relative;display:block;min-height:1.95em}
.rota__l{
  position:absolute;inset-block-start:0;inset-inline:0;
  color:var(--t2);
  font-size:clamp(1rem,1.25vw,1.125rem);
  line-height:1.95;
  opacity:0;
  transform:translateY(.55em);
  filter:blur(7px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease),filter 620ms var(--ease);
  pointer-events:none;
}
.rota__l.is-on{opacity:1;transform:none;filter:none;pointer-events:auto}
.rota__l.is-out{opacity:0;transform:translateY(-.55em);filter:blur(7px)}

/* Position ticks: one dash per claim, the active one runs blue and long. */
.rota__ticks{display:flex;gap:.35rem;margin-top:.9rem}
.rota__ticks i{
  display:block;width:.75rem;height:1px;
  background:var(--line-3);
  transition:width var(--d3) var(--ease),background var(--d3) var(--ease);
}
.rota__ticks i.is-on{width:2.25rem;background:var(--blue)}
.hero__act{display:grid;gap:1rem;align-items:stretch}
.hero__act .copy{height:100%}
.hero__foot{display:flex;align-items:center;gap:.75rem;padding-top:.9rem;border-top:1px solid var(--line)}

/* -----------------------------------------------------------------------------
   HERO CLAIMS
   The strip the hero rests on. Four standing numbers, each centred in its own
   cell, all counting up from zero once the page settles.
   -------------------------------------------------------------------------- */
.claims{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);
  margin-top:auto;
}
.claim{
  display:flex;align-items:baseline;justify-content:center;gap:.5rem;flex-wrap:wrap;
  background:var(--void);
  padding:.95rem .5rem 0;
  text-align:center;
}
.claim__v{
  font-family:var(--f-mono);font-stretch:82%;font-weight:600;
  font-size:clamp(.9375rem,1.5vw,1.1875rem);line-height:1;color:var(--t1);
  font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate;
}
.claim__k{color:var(--t4)}

@media (max-width:47.99em){
  .claims{grid-template-columns:repeat(2,minmax(0,1fr))}
  .claim{padding-block:.7rem}
}

/* =============================================================================
   08 · HOME SECTIONS
   ========================================================================== */
/* — sector cards: the three destinations, typographic only ——————— */
/* Each card carries its own hairline and overlaps its neighbour by exactly
   that hairline, so at rest the row reads as one ruled block. Pull a card out
   on hover and the individual frames separate cleanly. */
.dest{display:grid;--push:.75rem}
.dest__a{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.75rem;
  min-height:13.5rem;padding:1.5rem;
  background:var(--void);overflow:hidden;
  border:1px solid var(--line);
  transition:background var(--d2) var(--ease),
             transform 520ms var(--ease),
             border-color var(--d2) var(--ease);
}
@media (min-width:48em){
  .dest__a + .dest__a{margin-inline-start:-1px}

  /* Siblings step away from whichever card is under the pointer; the middle
     card opens a gap on both sides at once. Each rule lists only the cards
     that are NOT hovered, so nothing here ever fights the lift below. */
  .dest:has(> :nth-child(1):hover) > :nth-child(n+2),
  .dest:has(> :nth-child(2):hover) > :nth-child(3){
    transform:translateX(calc(var(--push) * var(--dir)));
  }
  .dest:has(> :nth-child(3):hover) > :nth-child(-n+2),
  .dest:has(> :nth-child(2):hover) > :nth-child(1){
    transform:translateX(calc(var(--push) * var(--dir) * -1));
  }
  /* The hovered card holds its ground and lifts instead. */
  .dest__a:hover{
    transform:translateY(-.4rem);
    border-color:var(--line-3);
    z-index:2;
  }
}
.dest__a::before{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:inline-start;
  transition:transform var(--d3) var(--ease);
}
.dest__a:hover{background:var(--pit)}
.dest__a:hover::before{transform:scaleX(1)}
.dest__no{font-family:var(--f-mono);font-size:.75rem;font-stretch:88%;color:var(--blue);direction:ltr}
.dest__h{
  margin-top:.75rem;color:var(--t1);
  font-size:clamp(1.15rem,1.9vw,1.6rem);
  overflow-wrap:anywhere;
  hyphens:auto;
}
.dest__d{margin-top:.75rem;color:var(--t3);font-size:.875rem;line-height:1.85;max-width:34ch}
.dest__go{display:flex;align-items:center;gap:.6rem;color:var(--t2);transition:gap var(--d2) var(--ease),color var(--d2) var(--ease)}
.dest__a:hover .dest__go{gap:1rem;color:var(--blue-hi)}
.dest__go svg{width:1.25rem;height:1.25rem}
html[dir="rtl"] .dest__go svg{transform:scaleX(-1)}

/* — manifesto + facts ————————————————————————— */
.about__grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
.about__facts{margin-top:clamp(2rem,4vw,3rem)}

/* — capability modules ————————————————————————— */
.caps{display:grid;gap:1px}
.cap{
  position:relative;isolation:isolate;
  background:var(--void);padding:1.75rem 1.5rem;
  /* A 1px spread reads as a hairline and merges with its neighbours across
     the grid gap, without taking part in layout. */
  box-shadow:0 0 0 1px var(--line);
  transition:background var(--d2) var(--ease),
             transform 480ms var(--ease),
             opacity var(--d2) var(--ease);
}
/* Attention is a zero-sum thing: the module under the pointer comes forward
   while every other one steps back and dims. */
/* Neighbours only ease back a hair — dropping them to 40% opacity turned the
   whole grid muddy the moment the pointer entered it. */
.caps:has(.cap:hover) .cap:not(:hover){transform:scale(.988)}
.cap:hover{
  background:linear-gradient(160deg,var(--blue-wash),var(--pit) 60%);
  transform:translateY(-.3rem);
  z-index:2;
}

/* Two hairline brackets draw into the corners as the module takes focus. */
.cap::before,.cap::after{
  content:"";position:absolute;pointer-events:none;
  border:1px solid var(--blue);
  width:1.4rem;height:1.4rem;
  opacity:0;
  transition:opacity var(--d2) var(--ease),transform 520ms var(--ease);
}
.cap::before{
  inset-block-start:.7rem;inset-inline-start:.7rem;
  border-width:1px 0 0 1px;
  transform:translate(.4rem,.4rem);
}
.cap::after{
  inset-block-end:.7rem;inset-inline-end:.7rem;
  border-width:0 1px 1px 0;
  transform:translate(-.4rem,-.4rem);
}
html[dir="rtl"] .cap::before{border-width:1px 1px 0 0}
html[dir="rtl"] .cap::after{border-width:0 0 1px 1px}
.cap:hover::before,.cap:hover::after{opacity:1;transform:none}

.cap__no,.cap__h,.cap__d{transition:transform 480ms var(--ease),color var(--d2) var(--ease)}
.cap:hover .cap__no{color:var(--blue-hi)}
.cap:hover .cap__h{color:#fff;transform:translateX(calc(.25rem * var(--dir)))}
.cap:hover .cap__d{color:var(--t2)}
.cap__no{font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;color:var(--blue);direction:ltr}
.cap__h{
  margin-top:1rem;color:var(--t1);
  font-family:var(--f-title);font-weight:var(--title-weight);
  font-size:1.0625rem;letter-spacing:-.01em;
}
.cap__d{margin-top:.6rem;color:var(--t3);font-size:.875rem;line-height:1.85}

/* — crew ————————————————————————————————————— */
.crew{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.crew__face{
  position:relative;display:grid;place-items:center;
  width:clamp(7rem,18vw,10rem);aspect-ratio:1;
  border:1px solid var(--line-2);
}
.crew__face::after{
  content:"";position:absolute;inset:-.5rem;border:1px solid var(--line);
  opacity:0;transition:opacity var(--d2) var(--ease),inset var(--d2) var(--ease);
}
.crew:hover .crew__face::after{opacity:1;inset:-.75rem}
.crew__mono{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2rem,5vw,3rem);letter-spacing:-.04em;color:var(--blue);
  direction:ltr;
}
.crew__photo{width:100%;height:100%;object-fit:cover;display:block}
.crew__name{color:var(--t1)}
.crew__role{margin-top:.4rem}
.crew__quote{margin-top:1.25rem;color:var(--t2);font-size:1rem;line-height:1.95;min-height:5.85em}
.crew__nav{display:flex;gap:.5rem;margin-top:1.5rem}
.crew__btn{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border:1px solid var(--line-2);color:var(--t2);
  transition:border-color var(--d2) var(--ease),color var(--d2) var(--ease),background var(--d2) var(--ease);
}
.crew__btn:hover{border-color:var(--blue);color:#fff;background:var(--blue)}
.crew__btn svg{width:1rem;height:1rem}
html[dir="rtl"] .crew__btn svg{transform:scaleX(-1)}

/* — questions ————————————————————————————————— */
.qa{border-top:1px solid var(--line)}
.qa__i{border-bottom:1px solid var(--line)}
.qa__q{
  display:flex;align-items:flex-start;gap:1rem;
  width:100%;padding:1.35rem 0;text-align:start;
  color:var(--t1);
  font-family:var(--f-title);font-weight:var(--title-weight);
  font-size:1rem;line-height:1.7;
  transition:color var(--d2) var(--ease);
}
.qa__q:hover{color:var(--blue-hi)}
.qa__no{font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;color:var(--blue);flex:none;padding-top:.35rem;direction:ltr}
.qa__ico{margin-inline-start:auto;flex:none;width:1rem;height:1rem;position:relative;margin-top:.45rem}
.qa__ico::before,.qa__ico::after{content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:currentColor;transition:transform var(--d2) var(--ease)}
.qa__ico::after{transform:rotate(90deg)}
.qa__i.is-open .qa__ico::after{transform:rotate(0)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d3) var(--ease)}
.qa__i.is-open .qa__a{grid-template-rows:1fr}
.qa__a > div{overflow:hidden}
.qa__a p{padding-bottom:1.35rem;color:var(--t3);font-size:.9375rem;line-height:1.95;max-width:62ch}
.qa__a ul{padding-bottom:1.35rem}
.qa__a li{position:relative;padding-inline-start:1.1rem;color:var(--t3);font-size:.9375rem;line-height:1.9}
.qa__a li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;width:5px;height:1px;background:var(--blue)}
.qa__a a{color:var(--t2)}

/* — closing call ————————————————————————————— */
.join{position:relative;isolation:isolate;text-align:center;padding-block:clamp(4rem,10vw,8rem)}
.join__in{display:grid;justify-items:center;gap:1.75rem;max-width:44rem;margin-inline:auto}
.join .copy{max-width:32rem}

/* =============================================================================
   INNER PAGES
   Every page below the home page opens the same way: a compact head with the
   contour field behind it, then sections on the shared stamp rhythm.
   ========================================================================== */
.phead{position:relative;isolation:isolate;padding-block:clamp(6.5rem,12vw,9rem) clamp(2rem,4vw,3rem)}
.phead__in{display:grid;gap:1.25rem;justify-items:start}
.phead__h{color:var(--t1);max-width:18ch}
.phead__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}

/* Standing principles: numbered, on one hairline row. */
.prins{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:.25rem}
.prin{display:flex;align-items:baseline;gap:.55rem}
.prin__n{font-size:.6875rem;color:var(--blue);font-stretch:88%}
.prin__t{color:var(--t2);font-size:.9375rem;font-weight:600}

/* — rule categories ————————————————————————————— */
.rcats{display:grid;gap:1px}
.rcat{background:var(--void);box-shadow:0 0 0 1px var(--line)}
.rcat__head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:1rem;
  width:100%;padding:1.35rem 1.25rem;text-align:start;
  transition:background var(--d2) var(--ease);
}
.rcat__head:hover{background:var(--pit)}
.rcat__no{
  font-family:var(--f-mono);font-size:.75rem;font-stretch:88%;
  color:var(--blue);align-self:start;padding-top:.35rem;direction:ltr;
}
.rcat__copy{display:grid;gap:.3rem;min-width:0}
.rcat__t{color:var(--t1)}
.rcat__s{color:var(--t3);font-size:.875rem;line-height:1.7}
.rcat__count{
  font-size:.8125rem;font-stretch:82%;font-weight:600;
  color:var(--t2);
  padding:.25rem .5rem;border:1px solid var(--line-2);
  direction:ltr;
}
.rcat__ico{position:relative;width:1rem;height:1rem;flex:none;color:var(--t3)}
.rcat__ico::before,.rcat__ico::after{
  content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:currentColor;
  transition:transform var(--d2) var(--ease);
}
.rcat__ico::after{transform:rotate(90deg)}
.rcat.is-open .rcat__ico::after{transform:rotate(0)}
.rcat.is-open .rcat__ico{color:var(--blue-hi)}

/* Same grid-rows collapse as the question list: animates without a fixed height. */
.rcat__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d3) var(--ease)}
.rcat.is-open .rcat__body{grid-template-rows:1fr}
.rcat__body > div{overflow:hidden}

.rlist{padding:0 1.25rem 1.25rem}
.rule{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;gap:1rem;
  padding:1rem 0;
  border-top:1px solid var(--line);
}
.rule__n{font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;color:var(--t4);padding-top:.25rem;direction:ltr}
.rule__copy{min-width:0}
.rule__t{
  color:var(--t1);
  font-family:var(--f-title);font-weight:var(--title-weight);
  font-size:.9375rem;line-height:1.6;
}
.rule__d{margin-top:.35rem;color:var(--t3);font-size:.875rem;line-height:1.85}
.rule__tag{
  font-family:var(--f-mono);font-size:.625rem;font-stretch:85%;
  color:var(--t4);white-space:nowrap;padding-top:.3rem;direction:ltr;
}

/* — notes ————————————————————————————————————— */
.notes{display:grid;gap:.9rem;max-width:70ch}
.notes li{
  position:relative;padding-inline-start:1.25rem;
  color:var(--t3);font-size:.9375rem;line-height:1.9;
}
.notes li::before{
  content:"";position:absolute;inset-inline-start:0;top:.85em;
  width:6px;height:1px;background:var(--blue);
}

@media (max-width:47.99em){
  .rcat__head{grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;padding:1.1rem}
  .rcat__count{display:none}
  .rule{grid-template-columns:auto minmax(0,1fr);gap:.75rem}
  .rule__tag{grid-column:2;padding-top:.35rem}
  .rlist{padding-inline:1.1rem}
}

/* -----------------------------------------------------------------------------
   STORE
   Rank cards carry no artwork: a monogram set in the display face stands in
   for the rank emblem, which keeps the grid sharp at every size and keeps
   game icons where they belong, inside the kits.
   -------------------------------------------------------------------------- */
.rcards{display:grid;gap:1rem}
.rcard{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:1.25rem;
  padding:1.5rem;
  background:var(--void);
  box-shadow:0 0 0 1px var(--line);
  cursor:pointer;
  transition:background var(--d2) var(--ease),transform 480ms var(--ease),box-shadow var(--d2) var(--ease);
}
.rcards:has(.rcard:hover) .rcard:not(:hover){transform:scale(.99)}
.rcard:hover{
  background:linear-gradient(160deg,var(--blue-wash),var(--pit) 62%);
  box-shadow:0 0 0 1px var(--line-3);
  transform:translateY(-.3rem);
  z-index:2;
}
.rcard__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.rcard__mono{
  display:grid;place-items:center;
  width:3rem;height:3rem;flex:none;
  border:1px solid var(--line-2);
  font-family:'Syne',var(--f-display);
  font-weight:800;font-size:1.125rem;letter-spacing:-.04em;
  color:var(--blue-hi);
  direction:ltr;
  transition:border-color var(--d2) var(--ease),color var(--d2) var(--ease);
}
.rcard:hover .rcard__mono{border-color:var(--blue);color:#fff}
.rcard__dur{
  padding:.2rem .5rem;
  border:1px solid var(--line-2);
  color:var(--t2);
}
.rcard__mid{flex:1}
/* Rank names are Latin product names: isolate them so "Vip+" does not come
   out as "+Vip" inside the RTL page. */
.rcard__name{color:var(--t1);direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .rcard__name{text-align:right}
.rcard__blurb{margin-top:.6rem;color:var(--t3);font-size:.875rem;line-height:1.8}

.rcard__price{display:flex;align-items:baseline;gap:.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.rankCard__price{
  font-family:var(--f-mono);font-stretch:82%;font-weight:600;
  font-size:1.25rem;line-height:1;color:var(--t1);
  font-variant-numeric:tabular-nums;direction:ltr;
}
.rcard__cur{font-size:.8125rem;color:var(--t3)}
/* pt-discounts.js injects these two when a discount is live. */
.rankCard__priceOld{
  font-family:var(--f-mono);font-size:.8125rem;font-stretch:85%;
  color:var(--t4);text-decoration:line-through;direction:ltr;
}
.rankCard__discBadge{
  margin-inline-start:auto;
  padding:.2rem .45rem;
  border:1px solid color-mix(in srgb,var(--live) 55%,transparent);
  color:var(--live);
  font-family:var(--f-mono);font-size:.625rem;font-stretch:85%;direction:ltr;
}

.rcard__act{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.rcard__more{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .75rem;
  border:1px solid var(--line-2);
  color:var(--blue-hi);
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  transition:color var(--d2) var(--ease),border-color var(--d2) var(--ease),background var(--d2) var(--ease),gap var(--d2) var(--ease);
}
.rcard__more::after{content:"›";font-size:1.1em;line-height:1;transition:transform var(--d2) var(--ease)}
html[dir="rtl"] .rcard__more::after{content:"‹"}
.rcard:hover .rcard__more{color:#fff;border-color:var(--blue);background:var(--blue-wash);gap:.6rem}
.rcard--wide .rcard__mono{color:var(--live);border-color:color-mix(in srgb,var(--live) 45%,transparent)}

.rnote{
  margin-top:1.5rem;max-width:74ch;
  color:var(--t4);font-size:.8125rem;line-height:1.9;
}

/* — rank modal ————————————————————————————————— */
body.modal-open{overflow:hidden}
.rmodal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(.75rem,3vw,2rem)}
.rmodal[hidden]{display:none}
.rmodal__scrim{
  position:absolute;inset:0;
  background:color-mix(in srgb,var(--void) 82%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--d2) var(--ease);
}
.rmodal.is-open .rmodal__scrim{opacity:1}
.rmodal__panel{
  position:relative;
  display:flex;flex-direction:column;
  width:min(46rem,100%);max-height:min(46rem,92vh);
  background:var(--pit);
  border:1px solid var(--line-2);
  opacity:0;transform:translateY(1rem) scale(.99);
  transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease);
}
.rmodal.is-open .rmodal__panel{opacity:1;transform:none}

.rmodal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem;border-bottom:1px solid var(--line)}
.rmodal__id{display:flex;align-items:center;gap:1rem;min-width:0}
.rmodal__icon{
  display:grid;place-items:center;
  width:3.25rem;height:3.25rem;flex:none;
  border:1px solid var(--line-2);
  background-size:70%;background-position:center;background-repeat:no-repeat;
  color:var(--blue-hi);
}
.rmodal__icon svg{width:1.5rem;height:1.5rem}
.rmodal__name{color:var(--t1)}
.rmodal__meta{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.rmodal__meta .t-code{color:var(--t2)}
.rmodal__dot{width:3px;height:3px;background:var(--t4)}
.rmodal__price{font-size:.875rem;font-stretch:85%;color:var(--t2);direction:ltr}
.rmodal__x{
  display:grid;place-items:center;width:2.25rem;height:2.25rem;flex:none;
  border:1px solid var(--line-2);color:var(--t3);
  transition:color var(--d2) var(--ease),border-color var(--d2) var(--ease);
}
.rmodal__x svg{width:1rem;height:1rem}
.rmodal__x:hover{color:#fff;border-color:var(--blue)}

.rmodal__tabs{display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.rmodal__tab{
  flex:1;padding:.85rem 1rem;background:var(--pit);
  font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t3);
  transition:color var(--d2) var(--ease),background var(--d2) var(--ease);
}
html[lang="fa"] .rmodal__tab,body.lang-fa .rmodal__tab{
  font-family:var(--f-body);font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none;
}
.rmodal__tab:hover{color:var(--t1)}
.rmodal__tab.is-active{color:#fff;background:var(--blue-wash);box-shadow:inset 0 -2px 0 var(--blue)}

.rmodal__body{flex:1;overflow-y:auto;padding:1.25rem;display:grid;gap:2rem}
.rmSection__t{margin-bottom:1rem}
.rmCaps{display:grid;gap:.6rem}
.rmCaps__item,.rmCaps__placeholder{
  position:relative;padding-inline-start:1.15rem;
  color:var(--t2);font-size:.9375rem;line-height:1.85;
}
.rmCaps__item::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:6px;height:1px;background:var(--blue)}
.rmCaps__placeholder{color:var(--t4);padding-inline-start:0}

.rmodal__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-top:1px solid var(--line)}
.rmodal__warn{color:var(--t4);font-size:.8125rem}

/* — kits: the one place game item icons appear ————————— */
/* Modelled on the original store: filled cells carry a soft blue wash, the
   inventory and armour grids sit start-aligned and fill from the edge rather
   than floating centred, and a whole kit stays visible without scrolling. */
.rmKit{border:1px solid var(--line);background:var(--pit);margin-bottom:1.75rem}
.rmKit:last-child{margin-bottom:0}
.rmKit__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--line);
  background:var(--blue-wash);
}
.rmKit__name{
  color:var(--t1);font-weight:600;font-size:.9375rem;
  font-family:var(--f-mono);font-stretch:88%;letter-spacing:.02em;direction:ltr;
}
.rmKit__stats{display:flex;gap:.6rem;flex-wrap:wrap}
.rmKit__stat{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .6rem;border:1px solid var(--line-2);
}
.rmKit__statLbl{font-family:var(--f-mono);font-size:.5625rem;font-stretch:88%;letter-spacing:.16em;text-transform:uppercase;color:var(--t4)}
html[lang="fa"] .rmKit__statLbl,body.lang-fa .rmKit__statLbl{font-family:var(--f-body);font-size:.75rem;letter-spacing:0;text-transform:none}
.rmKit__statVal{font-family:var(--f-mono);font-size:.8125rem;font-stretch:85%;font-weight:600;color:var(--blue-hi);direction:ltr}

.rmKit__inv{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.35rem}
.kitGrid{display:grid;gap:7px;--cell:clamp(2.9rem,8vw,3.6rem)}
/* A hairline sets the hotbar apart from the inventory, like the game. */
.kitGrid--armor{margin-top:.35rem;padding-top:.85rem;border-top:1px solid var(--line)}
.kitGrid--inv{grid-template-columns:repeat(6,var(--cell))}
.kitGrid--armor{grid-template-columns:repeat(7,var(--cell))}
.kitCell{
  position:relative;width:var(--cell);height:var(--cell);
  background:color-mix(in srgb,var(--blue) 3%,transparent);
  box-shadow:inset 0 0 0 1px var(--line);
}
.kitCell--has{
  background:linear-gradient(155deg,var(--blue-wash),var(--pit) 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 26%,transparent);
  cursor:help;
  transition:box-shadow var(--d2) var(--ease),transform var(--d2) var(--ease);
}
.kitCell--has:hover{
  box-shadow:inset 0 0 0 1px var(--blue),0 10px 22px -12px var(--blue);
  transform:translateY(-2px);z-index:3;
}
.kitCell__img{position:absolute;inset:13%;width:74%;height:74%;object-fit:contain}
.kitCell__count{
  position:absolute;inset-block-end:1px;inset-inline-end:3px;
  font-family:var(--f-mono);font-size:.5625rem;font-stretch:82%;font-weight:600;
  color:#fff;direction:ltr;text-shadow:0 1px 2px #000;
}

/* Floating item name shown while hovering a filled cell — English only. */
.kittip{
  position:fixed;z-index:120;pointer-events:none;
  padding:.4rem .65rem;
  background:var(--void);border:1px solid var(--line-3);
  box-shadow:0 12px 30px -16px #000;
  font-family:var(--f-mono);font-stretch:85%;font-size:.75rem;letter-spacing:.02em;
  color:var(--t1);white-space:nowrap;direction:ltr;
  opacity:0;transform:translateY(4px);
  transition:opacity var(--d1) linear,transform var(--d1) linear;
}
.kittip.is-on{opacity:1;transform:none}

/* — bundle tiles inside the modal ——————————————————— */
.bndNote{color:var(--t3);font-size:.875rem;line-height:1.85;margin-bottom:1rem}
.bndGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:1px;background:var(--line)}
.bndTile{
  display:grid;justify-items:center;gap:.5rem;
  padding:1rem .75rem;background:var(--pit);
  transition:background var(--d2) var(--ease);
}
.bndTile:hover{background:var(--blue-wash)}
.bndTile__media{display:grid;place-items:center;width:2.5rem;height:2.5rem;color:var(--blue-hi)}
.bndTile__media img{max-width:100%;max-height:100%;object-fit:contain}
.bndTile__name{font-family:var(--f-mono);font-size:.75rem;font-stretch:85%;color:var(--t1);direction:ltr}
.bndTile__hint{font-size:.75rem;color:var(--t4)}
.bndBack{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .7rem;border:1px solid var(--line-2);
  color:var(--t2);font-size:.8125rem;
  transition:border-color var(--d2) var(--ease),color var(--d2) var(--ease);
}
.bndBack:hover{border-color:var(--blue);color:#fff}

@media (min-width:40em){
  .rcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:64em){
  .rcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rcard--wide{grid-column:span 3;flex-direction:row;align-items:center;gap:2rem}
  .rcard--wide .rcard__top{flex-direction:column;align-items:flex-start}
  .rcard--wide .rcard__price{border-top:0;padding-top:0}
}
@media (max-width:47.99em){
  .rmodal__panel{max-height:94vh}
  .rmodal__body{padding:1rem}
}

/* -----------------------------------------------------------------------------
   LEADERBOARD
   The table head and every row are written by leaderboard.js, so the classes
   below match what that script emits: .plH / .plRow / .plRk / .plPlayer / .plC.
   The board keeps its own scroll container because rows load in chunks off an
   IntersectionObserver rooted there.
   -------------------------------------------------------------------------- */
.lbnow{display:flex;align-items:center;gap:.6rem;margin-top:.25rem}

/* — server pulse ——————————————————————————————
   Three headline figures get the large treatment; the remaining totals are
   grouped into Combat / Harvest / Loot panels instead of a flat number wall. */
.pulses{display:grid;grid-template-columns:1fr;gap:1px;margin-bottom:1rem}
.pulse{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:1rem;row-gap:.15rem;align-items:center;
  padding:1.25rem 1.35rem;
  background:var(--void);box-shadow:0 0 0 1px var(--line);
}
.pulse__ico{
  grid-row:1 / 3;display:grid;place-items:center;
  width:2.75rem;height:2.75rem;
  border:1px solid var(--line-2);color:var(--blue-hi);
}
.pulse__ico svg{width:1.35rem;height:1.35rem}
.pulse__v{
  font-family:var(--f-mono);font-stretch:82%;font-weight:600;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1;color:var(--t1);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;align-self:end;
}
html[dir="rtl"] .pulse__v{text-align:right}
.pulse__k{grid-column:2;color:var(--t3);align-self:start}
.pulse--live .pulse__ico{color:var(--live);border-color:color-mix(in srgb,var(--live) 45%,transparent)}
.pulse--live .pulse__v{color:var(--live)}
.pulse__flag{position:absolute;top:.9rem;inset-inline-end:.9rem}

.gcards{display:grid;grid-template-columns:1fr;gap:1px}
.gcard{background:var(--void);box-shadow:0 0 0 1px var(--line);padding:1.1rem 1.25rem}
.gcard__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.gcard__ico{display:grid;place-items:center;width:1.5rem;height:1.5rem;color:var(--blue)}
.gcard__ico svg{width:1.1rem;height:1.1rem}
.gcard__t{color:var(--t2)}
.gcard__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.25rem}
.gcard__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.4rem;margin:0}
.gstat{display:block;border-bottom:1px solid var(--line);padding-bottom:.55rem;min-width:0}
.gstat__k{color:var(--t3);font-size:.75rem;line-height:1.6;margin-bottom:.35rem}
.gstat__v{
  font-family:var(--f-mono);font-stretch:82%;font-weight:600;
  font-size:clamp(.8125rem,1.4vw,1rem);line-height:1;color:var(--t1);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap;
}
html[dir="rtl"] .gstat__v{text-align:right}

/* — controls ————————————————————————————————— */
.lbbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.lbcats{display:flex;gap:1px;background:var(--line);border:1px solid var(--line)}
.lbcat{
  padding:.6rem 1rem;background:var(--void);
  font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t3);
  direction:ltr;
  transition:color var(--d2) var(--ease),background var(--d2) var(--ease);
}
.lbcat:hover{color:var(--t1)}
.lbcat.is-active{color:#fff;background:var(--blue)}

.lbsearch{display:flex;align-items:center;gap:.6rem;min-width:min(18rem,100%);padding:0 .8rem;border:1px solid var(--line-2);transition:border-color var(--d2) var(--ease)}
.lbsearch:focus-within{border-color:var(--blue)}
.lbsearch svg{width:1rem;height:1rem;flex:none;color:var(--t4)}
.lbsearch input{
  flex:1;min-width:0;height:2.5rem;
  background:none;border:0;color:var(--t1);
  font-family:var(--f-body);font-size:.875rem;
}
.lbsearch input::placeholder{color:var(--t4)}
.lbsearch input::-webkit-search-cancel-button{filter:invert(.5)}

.lbmeta{display:flex;align-items:center;gap:.4rem;margin-bottom:.75rem;color:var(--t4)}
.lbmeta__sep{opacity:.6}

/* — the board ————————————————————————————————— */
.lbtable{border:1px solid var(--line);background:var(--void)}
/* One horizontal scroller wraps head + rows so they move together and stay
   aligned. Its child sizes to the table's natural width; on a phone that is
   wider than the screen, so the scroller shows a horizontal bar instead of
   blowing out the page. */
.lbtable__x{overflow:hidden}
.plHead{
  display:grid;gap:.5rem;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--line);
  background:var(--pit);
  position:sticky;top:0;z-index:2;
}
.plH{
  font-family:var(--f-mono);font-size:.625rem;font-stretch:88%;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--t4);text-align:start;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  direction:ltr;
}
.plH--num{display:flex;align-items:center;gap:.25rem;justify-content:flex-end;cursor:pointer;transition:color var(--d2) var(--ease)}
.plH--num:hover{color:var(--t2)}
.plH--num.is-sorted{color:var(--blue-hi)}
.plH__arr{font-size:.75rem;line-height:1}
.plH--rank{text-align:center}
.plH--name{text-align:end}

.plScroll{max-height:min(38rem,70vh);overflow-y:auto;overscroll-behavior:contain}
.plRows{display:flex;flex-direction:column}

.plRow{
  display:grid;gap:.5rem;align-items:center;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
  color:var(--t2);
  transition:background var(--d1) linear,color var(--d1) linear;
}
.plRow:hover{background:var(--pit);color:var(--t1)}
.plRow:last-child{border-bottom:0}

.plRk{
  font-family:var(--f-mono);font-size:.75rem;font-stretch:85%;
  color:var(--t4);text-align:center;direction:ltr;
}
/* The podium is marked with the one warm value in the system, at three
   strengths, rather than three unrelated metal colours. */
.plRk--gold,.plRk--silver,.plRk--bronze{
  display:grid;place-items:center;
  width:1.5rem;height:1.5rem;margin-inline:auto;
  font-weight:600;color:var(--void);
}
.plRk--gold{background:var(--live)}
.plRk--silver{background:color-mix(in srgb,var(--live) 62%,var(--t4))}
.plRk--bronze{background:color-mix(in srgb,var(--live) 34%,var(--t4))}
.plRow--top{color:var(--t1)}

.plPlayer{display:flex;align-items:center;gap:.6rem;min-width:0}
.plAva{
  display:grid;place-items:center;
  width:1.75rem;height:1.75rem;flex:none;
  border:1px solid var(--line-2);
  font-family:'Syne',var(--f-display);font-weight:800;font-size:.75rem;
  color:var(--blue-hi);direction:ltr;
}
.plPlayer__name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.875rem;font-weight:600;direction:ltr;unicode-bidi:isolate;
}
.plC{
  font-family:var(--f-mono);font-size:.8125rem;font-stretch:82%;
  font-variant-numeric:tabular-nums;
  text-align:end;direction:ltr;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.plFoot:empty{display:none}

/* — player modal (an embedded profile page) ————————————— */
body.pmodal-open{overflow:hidden}
.pmodal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(.5rem,3vw,2rem)}
.pmodal[hidden]{display:none}
.pmodal__scrim{
  position:absolute;inset:0;
  background:color-mix(in srgb,var(--void) 84%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.pmodal__panel{
  position:relative;
  width:min(60rem,100%);height:min(46rem,92vh);
  background:var(--pit);border:1px solid var(--line-2);
}
.pmodal__frame{width:100%;height:100%;border:0;display:block}
.pmodal__x{
  position:absolute;z-index:1;top:.65rem;inset-inline-end:.65rem;
  display:grid;place-items:center;width:2.25rem;height:2.25rem;
  border:1px solid var(--line-2);background:var(--void);color:var(--t3);
  transition:color var(--d2) var(--ease),border-color var(--d2) var(--ease);
}
.pmodal__x svg{width:1rem;height:1rem}
.pmodal__x:hover{color:#fff;border-color:var(--blue)}

@media (min-width:48em){
  .pulses{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gcards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:47.99em){
  .lbbar{flex-direction:column;align-items:stretch}
  .lbcats{overflow-x:auto}
  .lbcat{flex:1;padding-inline:.7rem;font-size:.625rem}
  .plHead,.plRow{padding-inline:.4rem;gap:.2rem}
  .plH{font-size:.5rem;letter-spacing:.06em}
  .plC{font-size:.625rem}
  .plPlayer__name{font-size:.6875rem}
  .plAva{display:none}
  .plRk{font-size:.625rem}
  .plRk--gold,.plRk--silver,.plRk--bronze{width:1.1rem;height:1.1rem}
}

/* =============================================================================
   09 · MESSAGES
   ========================================================================== */
.toasts{
  position:fixed;z-index:90;
  inset-block-end:1.5rem;inset-inline-end:1.5rem;
  display:flex;flex-direction:column;gap:.6rem;
  width:min(23rem,calc(100vw - 2rem));
  pointer-events:none;
}
.toast{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;gap:.85rem;
  padding:.95rem 1rem .95rem 1.1rem;
  background:var(--panel);
  border:1px solid var(--line-2);
  box-shadow:0 18px 40px -24px #000;
  pointer-events:auto;overflow:hidden;
  /* Enters from the trailing edge, slightly under-scaled. */
  opacity:0;
  transform:translateX(var(--in,1.5rem)) scale(.97);
  transition:opacity 340ms var(--ease),transform 340ms var(--ease);
}
html[dir="rtl"] .toast{--in:-1.5rem}
.toast.is-in{opacity:1;transform:none}
.toast.is-out{opacity:0;transform:translateX(var(--in,1.5rem)) scale(.97)}

/* The status colour lives on one edge rather than tinting the whole plate. */
.toast__edge{position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--blue)}
.toast--ok .toast__edge{background:var(--live)}
.toast--bad .toast__edge{background:#ff4d5e}

.toast__i{display:grid;place-items:center;width:1.25rem;height:1.25rem;margin-top:.05rem;color:var(--blue-hi)}
.toast__i svg{width:1.25rem;height:1.25rem}
.toast--ok .toast__i{color:var(--live)}
.toast--bad .toast__i{color:#ff4d5e}

.toast__body{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.toast__t{font-size:.9375rem;font-weight:600;color:var(--t1);line-height:1.5}
.toast__m{
  font-size:.75rem;color:var(--t3);
  direction:ltr;unicode-bidi:isolate;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
html[dir="rtl"] .toast__m{text-align:end}

.toast__x{
  display:grid;place-items:center;width:1.5rem;height:1.5rem;
  color:var(--t4);
  transition:color var(--d1) linear,background var(--d1) linear;
}
.toast__x svg{width:1rem;height:1rem}
.toast__x:hover{color:var(--t1);background:var(--line)}

.toast__bar{
  position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--line-3);
  transform-origin:left center;
}
html[dir="rtl"] .toast__bar{transform-origin:right center}

/* Page-load progress + language veil */
#topbar{position:fixed;top:0;inset-inline-start:0;z-index:99;height:1px;width:0;background:var(--blue);opacity:0;transition:width var(--d3) var(--ease),opacity var(--d1) linear}
#topbar.is-active{opacity:1}
#topbar.is-done{width:100%!important;opacity:0;transition:width 160ms linear,opacity 320ms linear 120ms}
body{transition:opacity 160ms linear}
body.is-leaving{opacity:0}
.langSwitchOverlay{
  position:fixed;inset:0;z-index:95;
  display:grid;place-items:center;
  background:var(--void);
  opacity:0;pointer-events:none;
  transition:opacity var(--d2) var(--ease);
}
.langSwitchOverlay.is-show{opacity:1;pointer-events:auto}

.langveil__in{position:relative;display:grid;place-items:center;width:min(22rem,78vw);aspect-ratio:1}

/* Contours sweeping the message, each at its own rate and direction. */
.langveil__arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.langveil__arcs ellipse{
  fill:none;stroke:var(--line-2);stroke-width:1;
  transform-origin:100px 100px;
  transform:rotate(0deg) scale(.6);
  opacity:0;
}
.langveil__arcs ellipse:nth-child(2){stroke:var(--blue);stroke-opacity:.7}
.is-show .langveil__arcs ellipse{
  animation:veilArc 1.6s var(--ease) forwards;
}
.is-show .langveil__arcs ellipse:nth-child(2){animation-duration:1.9s;animation-delay:60ms}
.is-show .langveil__arcs ellipse:nth-child(3){animation-duration:1.4s;animation-delay:120ms}
@keyframes veilArc{
  0%{opacity:0;transform:rotate(-70deg) scale(.55)}
  35%{opacity:1}
  100%{opacity:.75;transform:rotate(115deg) scale(1.25)}
}

.langveil__msg{
  position:relative;z-index:1;
  font-family:var(--f-mono);font-size:.75rem;font-stretch:88%;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--t2);text-align:center;
  transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease),filter var(--d2) var(--ease);
}
html[lang="fa"] .langveil__msg,body.lang-fa .langveil__msg{
  font-family:var(--f-body);font-size:.9375rem;font-weight:600;
  letter-spacing:0;text-transform:none;
}
/* The crossing: the label blurs through as the arcs pass over it. */
.langveil__in .langveil__msg{animation:veilMsg 1.9s var(--ease)}
@keyframes veilMsg{
  0%{opacity:0;transform:translateY(.5rem);filter:blur(6px)}
  22%{opacity:1;transform:none;filter:none}
  46%{opacity:.15;filter:blur(5px)}
  62%{opacity:1;filter:none}
  100%{opacity:1}
}

/* Accent word inside a display headline. */
.hi{color:var(--blue-hi)}

/* Announcement bars injected by pt-marquee.js */
.ptm-bar{background:var(--blue)!important;box-shadow:none!important;height:2rem!important}
.ptm-bar .ptm-track{font-family:var(--f-mono)!important;font-size:.6875rem!important;line-height:2rem!important;letter-spacing:.1em}
.ptm-bar .ptm-close{background:transparent!important;width:2rem!important}

/* =============================================================================
   10 · RESPONSIVE
   ========================================================================== */
@media (min-width:48em){
  .dgrid--m2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dest{grid-template-columns:repeat(3,minmax(0,1fr))}
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__cols > :nth-child(3){grid-column:auto;justify-self:auto}
  .hero__act{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .about__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .crew{grid-template-columns:auto minmax(0,1fr)}
}
@media (min-width:64em){
  .pnav{display:flex}
  .caps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:85em){
  .rail{display:block}
}
@media (max-width:63.99em){
  /* The masthead row has no room for a full-width action group: at 390px the
     wordmark plus the buttons ran ~100px past the viewport, and because the
     page is RTL the excess disappeared off the leading edge rather than
     producing a scrollbar. Shrink the wordmark and reduce the dashboard link
     to its glyph. */
  .mast__in{gap:.6rem}
  .mark__name{font-size:.9375rem;letter-spacing:-.03em}
  .mark__tag{font-size:.5rem;letter-spacing:.14em}
  /* The dock already carries Dashboard on small screens, so the masthead
     drops it rather than repeating the destination. */
  .hbtn--dash{display:none}
}

@media (max-width:47.99em){
  /* At 390px the wordmark alone was still eating 212px of a 350px row. */
  .mast__in{gap:.5rem}
  .mark__name{font-size:.8125rem;letter-spacing:-.02em}
  .mark__tag{display:none}

  .dgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dgrid > *{padding:.7rem .5rem}
  .dcell__v{font-size:.75rem}

  .hero__strip{gap:.35rem .9rem;padding-bottom:.7rem}
  .hero__strip .t-code{font-size:.5625rem;letter-spacing:.16em}
  .hero__push{margin-inline-start:0;width:100%}

  /* Contours read as scribble once squeezed into a phone width. */
  .lines{opacity:.55}
  .bracket{display:none}
  .toasts{inset-block-end:1rem;inset-inline:1rem;width:auto}
}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-rv]{opacity:1!important;transform:none!important}
  .hero__g > span{transform:none!important}
  .contour--drawn path{stroke-dashoffset:0!important}
}

/* =============================================================================
   PLAYER PROFILE
   The leaderboard opens this page directly and inside an iframe modal, so the
   layout has to hold up both full-page and cropped to a narrow panel. Numbers
   are mono, panels are hairline boxes, and the only colour is the one accent
   plus the warm "live" value used to oppose it in the donuts.
   ========================================================================== */
.playerPage{padding-block:clamp(1.5rem,4vw,3rem)}

/* — header card — */
.pp{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
  padding:clamp(1.25rem,3vw,1.9rem);
  border:1px solid var(--line);background:var(--pit);
}
@media (min-width:60em){.pp{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.pp__l{display:flex;align-items:center;gap:1.1rem;min-width:0}
.pp__avatar{
  position:relative;width:4.5rem;height:4.5rem;flex:none;
  display:grid;place-items:center;background:var(--blue-wash);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.pp__avatarImg{width:100%;height:100%;object-fit:cover}
.pp__avatarRing{position:absolute;inset:-3px;border:1px solid var(--line-3);pointer-events:none}
.pp__id{min-width:0}
.pp__name{
  font-family:var(--f-mono);font-stretch:85%;font-weight:600;
  font-size:clamp(1.25rem,3.5vw,1.75rem);color:var(--t1);
  direction:ltr;unicode-bidi:isolate;word-break:break-word;line-height:1.2;
}
html[dir="rtl"] .pp__name{text-align:start}
.pp__tag{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  padding:.25rem .6rem;border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.6875rem;font-stretch:88%;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-hi);
}
.pp__tagDot{width:.4rem;height:.4rem;border-radius:50%;background:var(--blue)}

.pp__meta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.85rem}
.pp__metaCell{min-width:0;border:1px solid var(--line-2);background:var(--void);padding:.5rem .8rem}
.pp__metaK{
  font-family:var(--f-mono);font-size:.5625rem;font-stretch:88%;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t4);
}
html[lang="fa"] .pp__metaK,body.lang-fa .pp__metaK{font-family:var(--f-body);font-size:.75rem;letter-spacing:0;text-transform:none}
.pp__metaV{
  margin-top:.3rem;font-family:var(--f-mono);font-stretch:85%;font-weight:600;
  font-size:1.0625rem;color:var(--t1);direction:ltr;unicode-bidi:isolate;
}
html[dir="rtl"] .pp__metaV{text-align:start}

/* — donuts — */
.pp__donuts{display:flex;gap:clamp(1rem,3vw,2.25rem);flex-wrap:wrap;justify-content:center}
.donut{position:relative;width:11rem;flex:none;text-align:center}
.donut__svg{width:100%;height:auto;transform:rotate(-90deg)}
.donut__track{fill:none;stroke:var(--line);stroke-width:10}
.donut__seg{fill:none;stroke-width:10;stroke-linecap:butt;transition:stroke-width .2s var(--ease)}
.donut__seg:hover{stroke-width:12}
.donut__center{position:absolute;top:0;left:0;right:0;aspect-ratio:1/1;display:grid;place-content:center;pointer-events:none}
.donut__num{font-family:var(--f-mono);font-stretch:82%;font-weight:700;font-size:1.6rem;color:var(--t1);direction:ltr}
.donut__numSm{font-family:var(--f-mono);font-stretch:82%;font-weight:700;font-size:1.15rem;color:var(--t1);direction:ltr}
.donut__lbl{
  margin-top:.15rem;font-family:var(--f-mono);font-size:.5625rem;font-stretch:88%;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t4);
}
.donut__legend{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:.85rem;font-size:.8125rem;color:var(--t2)}
.donut__legend b{font-family:var(--f-mono);font-stretch:85%;color:var(--t1);direction:ltr}
.donut__legend span{display:inline-flex;align-items:center;gap:.35rem}
.donut__legend--grid{display:grid;grid-template-columns:repeat(2,auto);gap:.5rem .9rem;justify-content:center}
.legIco{width:1.1rem;height:1.1rem;object-fit:contain}
.dot{width:.5rem;height:.5rem;border-radius:50%;display:inline-block}
.dot--red{background:var(--live)}
.dot--blue{background:var(--blue)}
.donut__tip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.4rem;white-space:nowrap;z-index:4;
  padding:.35rem .6rem;background:var(--void);border:1px solid var(--line-2);
  font-size:.75rem;color:var(--t1);pointer-events:none;
}
.donut__tipDot{width:.45rem;height:.45rem;border-radius:50%}
.donut__tip[hidden]{display:none!important}
.donut__tipVal{font-family:var(--f-mono);font-stretch:85%;color:var(--blue-hi);direction:ltr}

/* — bottom grid — */
.pgrid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
@media (min-width:64em){.pgrid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

.shotBox,.ltBox{border:1px solid var(--line);background:var(--pit)}
.shotBox__title,.ltBox__title{
  padding:.95rem 1.15rem;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.625rem;font-stretch:88%;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t3);
}
html[lang="fa"] .shotBox__title,html[lang="fa"] .ltBox__title,
body.lang-fa .shotBox__title,body.lang-fa .ltBox__title{font-family:var(--f-body);font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--t1);font-weight:600}
.shotBox__body{padding:1.35rem;display:grid;place-items:center}

/* silhouette + hotspots */
.silh{position:relative;width:min(19rem,100%)}
.silh__img{width:100%;height:auto;opacity:.5;filter:grayscale(1)}
.hot{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.3rem .55rem;background:var(--void);border:1px solid var(--line-2);
  white-space:nowrap;
}
.hot__k{font-family:var(--f-mono);font-size:.5rem;font-stretch:88%;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
html[lang="fa"] .hot__k,body.lang-fa .hot__k{font-family:var(--f-body);font-size:.6875rem;letter-spacing:0;text-transform:none}
.hot__v{font-family:var(--f-mono);font-stretch:85%;font-weight:600;font-size:.9375rem;color:var(--blue-hi);direction:ltr}

/* stat tables */
.lt{border-bottom:1px solid var(--line)}
.lt:last-child{border-bottom:0}
.lt__head{
  padding:.7rem 1.15rem;background:var(--blue-wash);
  font-family:var(--f-mono);font-size:.5625rem;font-stretch:88%;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-hi);
}
html[lang="fa"] .lt__head,body.lang-fa .lt__head{font-family:var(--f-body);font-size:.8125rem;letter-spacing:0;text-transform:none}
.lt__row{display:grid;gap:1px;background:var(--line)}
.lt__row--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.lt__row--6{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:34em){
  .lt__row--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lt__row--6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:64em){.lt__row--6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.lt__cell{padding:.85rem 1rem;background:var(--pit)}
.lt__k{font-size:.75rem;color:var(--t3)}
.lt__v{margin-top:.25rem;font-family:var(--f-mono);font-stretch:85%;font-weight:600;font-size:1rem;color:var(--t1);direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .lt__v{text-align:start}

html[dir="rtl"] :is(.rcard__name,.rmodal__price){text-align:right}

/* — player embed (leaderboard modal): donuts share the top row with the identity — */
html.is-embed .pp{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
html.is-embed .pp__donuts{flex:0 0 auto;margin-inline-start:auto;justify-content:flex-end}
html.is-embed .donut{width:9.75rem}