/* ==========================================================================
   FluxPing — design system
   Silver / monochrome. No server telemetry, no status dots, no gradients.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:"Qurova";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/qurova-demobold.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/spacegrotesk.ttf") format("truetype");unicode-range:U+0030-0039,U+002B,U+002D,U+002E,U+0025,U+003A,U+002F;}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/vazirmatn-arabic-300-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FDFC,FDFD;}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/vazirmatn-arabic-400-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FDFC,FDFD;}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/vazirmatn-arabic-500-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FDFC,FDFD;}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/vazirmatn-arabic-700-normal.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41,U+FDFC,FDFD;}

/* ---------- tokens ---------- */
:root{
  --bg:#08090B;
  --bg-soft:#0B0D10;
  --s1:#0F1114;
  --s2:#15181D;
  --s3:#1C2026;
  --s4:#242932;

  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.12);
  --line3:rgba(255,255,255,.2);

  --fg:#F1F3F6;
  --fg2:#98A0AB;
  --fg3:#666E79;

  --silver:#E4E8EE;
  --silver-2:#C2CAD4;
  --silver-ink:#0A0B0D;
  --silver-soft:rgba(228,232,238,.08);

  --danger:#FF6B5A;
  --danger-soft:rgba(255,107,90,.12);

  --r1:10px;--r2:14px;--r3:18px;--r4:24px;--r5:32px;

  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;--sp8:64px;--sp9:96px;

  --e1:cubic-bezier(.22,.85,.3,1);
  --t1:.18s;--t2:.3s;

  --font:"Vazirmatn","Segoe UI",Tahoma,sans-serif;
  --font-brand:"Qurova","Vazirmatn","Segoe UI",sans-serif;
  --font-num:"Space Grotesk","Vazirmatn",sans-serif;

  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 18px 44px rgba(0,0,0,.45);
  --shadow-3:0 32px 80px rgba(0,0,0,.6);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  min-height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--silver);outline-offset:3px;border-radius:6px}
::selection{background:var(--silver);color:var(--silver-ink)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- icons ---------- */
.ic{width:20px;height:20px;flex:0 0 auto;stroke-width:1.75;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:16px;height:16px}
.ic-lg{width:22px;height:22px}
.ic-xl{width:26px;height:26px}
.ic-fill{fill:currentColor;stroke:none}

/* ---------- layout ---------- */
.container{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--sp5)}
@media (max-width:640px){.container{padding-inline:var(--sp4)}}
.section{padding-block:var(--sp9)}
@media (max-width:768px){.section{padding-block:var(--sp8)}}
.section-sm{padding-block:var(--sp7)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.display{
  font-family:var(--font-brand);
  font-size:clamp(32px,5.2vw,52px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
}
.h2{font-family:var(--font-brand);font-size:clamp(24px,3.4vw,34px);font-weight:700;line-height:1.3;letter-spacing:-.005em}
.h3{font-size:17px;font-weight:700;line-height:1.5}
.lead{font-size:17px;line-height:1.85;color:var(--fg2)}
.muted{color:var(--fg2)}
.dim{color:var(--fg3)}
.small{font-size:13px;line-height:1.7}
.micro{font-size:12px;line-height:1.6}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.section-head{max-width:640px;margin-bottom:var(--sp6)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .lead{margin-top:var(--sp3)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp2);
  font-size:12px;font-weight:600;color:var(--fg3);
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:var(--sp3);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);
  height:44px;padding-inline:22px;
  border-radius:var(--r2);
  font-size:14px;font-weight:600;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--t1) var(--e1),border-color var(--t1) var(--e1),color var(--t1) var(--e1),transform var(--t1) var(--e1),opacity var(--t1) var(--e1);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--silver);color:var(--silver-ink);font-weight:700}
.btn-primary:hover:not(:disabled){background:#fff}
.btn-secondary{background:var(--s2);color:var(--fg);border-color:var(--line2)}
.btn-secondary:hover:not(:disabled){background:var(--s3);border-color:var(--line3)}
.btn-ghost{color:var(--fg2);border-color:var(--line2)}
.btn-ghost:hover:not(:disabled){color:var(--fg);background:var(--silver-soft);border-color:var(--line3)}
.btn-danger{color:var(--danger);border-color:rgba(255,107,90,.35);background:transparent}
.btn-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)}
.btn-lg{height:52px;padding-inline:30px;font-size:15px;border-radius:var(--r3)}
.btn-sm{height:34px;padding-inline:14px;font-size:13px;border-radius:var(--r1)}
.btn-block{width:100%}

/* ---------- forms ---------- */
.field{margin-bottom:var(--sp4)}
.field:last-child{margin-bottom:0}
.label{display:block;font-size:13px;font-weight:600;color:var(--fg2);margin-bottom:var(--sp2)}
.input-wrap{position:relative;display:flex;align-items:center}
.input{
  width:100%;height:46px;
  padding-inline:14px;
  border-radius:var(--r2);
  background:var(--s1);
  border:1px solid var(--line2);
  color:var(--fg);
  font-size:14px;
  transition:border-color var(--t1) var(--e1),background var(--t1) var(--e1),box-shadow var(--t1) var(--e1);
}
.input::placeholder{color:var(--fg3)}
.input:hover{border-color:var(--line3)}
.input:focus{outline:none;border-color:var(--silver);background:var(--s2);box-shadow:0 0 0 3px var(--silver-soft)}
.input-icon{padding-inline-start:42px}
.input-affix{position:absolute;inset-inline-start:14px;display:flex;color:var(--fg3);pointer-events:none}
.input-affix .ic{width:18px;height:18px}
.input-action{position:absolute;inset-inline-end:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r1);color:var(--fg3);transition:color var(--t1),background var(--t1)}
.input-action:hover{color:var(--fg);background:var(--silver-soft)}
.input-action .ic{width:18px;height:18px}
.input-with-action{padding-inline-end:44px}
.select{
  width:100%;height:46px;padding-inline:14px;
  border-radius:var(--r2);
  background:var(--s1);
  border:1px solid var(--line2);
  color:var(--fg);font-size:14px;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398A0AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 14px center;
  padding-inline-end:40px;
  transition:border-color var(--t1) var(--e1),box-shadow var(--t1) var(--e1);
}
.select:focus{outline:none;border-color:var(--silver);box-shadow:0 0 0 3px var(--silver-soft)}
.select option{background:var(--s2);color:var(--fg)}
.hint{font-size:12px;color:var(--fg3);margin-top:6px}
.error-text{font-size:12px;color:var(--danger);margin-top:6px;display:none}
.field.invalid .input,.field.invalid .select{border-color:var(--danger)}
.field.invalid .error-text{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

/* ---------- surfaces ---------- */
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r3)}
.panel{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r4);padding:var(--sp6)}
@media (max-width:640px){.panel{padding:var(--sp5)}}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding-inline:10px;
  border-radius:7px;
  font-size:11.5px;font-weight:600;
  background:var(--s3);color:var(--fg2);
  border:1px solid var(--line);
  white-space:nowrap;
}
.badge-strong{background:var(--silver-soft);color:var(--silver);border-color:var(--line2)}
.badge-danger{background:var(--danger-soft);color:var(--danger);border-color:rgba(255,107,90,.3)}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(8,9,11,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp5);height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-brand);font-size:21px;font-weight:700;letter-spacing:.01em}
.brand img{width:34px;height:34px;border-radius:9px}
.nav{display:flex;align-items:center;gap:var(--sp5)}
.nav a{font-size:14px;font-weight:500;color:var(--fg2);transition:color var(--t1)}
.nav a:hover{color:var(--fg)}
.header-actions{display:flex;align-items:center;gap:var(--sp2)}
.mobile-toggle{display:none}
@media (max-width:860px){
  .nav{display:none}
  .mobile-toggle{display:inline-flex}
  .header-actions .btn-ghost{display:none}
}
.nav-toggle{display:none;border-top:1px solid var(--line);padding:var(--sp4) var(--sp5);flex-direction:column;gap:var(--sp4)}
.nav-toggle.open{display:flex}
.nav-toggle a{font-size:15px;color:var(--fg2)}
@media (max-width:860px){.nav-toggle{display:flex}}
@media (min-width:861px){.nav-toggle{display:none!important}}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:var(--sp9) var(--sp8);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% 0 auto;height:120%;
  background:radial-gradient(ellipse 60% 50% at 50% 0,rgba(228,232,238,.09),transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp8);align-items:center}
@media (max-width:980px){.hero-inner{grid-template-columns:1fr;gap:var(--sp7)}}
.hero-copy .lead{margin-top:var(--sp4);max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp3);margin-top:var(--sp6)}
.hero-note{margin-top:var(--sp5);font-size:13px;color:var(--fg3);display:flex;align-items:center;gap:var(--sp2)}
.hero-note .ic{width:16px;height:16px}

/* launcher mock (purely decorative — no live data) */
.mock{
  border:1px solid var(--line2);
  border-radius:var(--r4);
  background:linear-gradient(180deg,var(--s2),var(--s1));
  box-shadow:var(--shadow-3);
  overflow:hidden;
}
.mock-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--s1)}
.mock-bar span{width:9px;height:9px;border-radius:50%;background:var(--s4)}
.mock-bar .mock-title{margin-inline-start:auto;font-size:12px;color:var(--fg3)}
.mock-body{padding:var(--sp5);display:grid;gap:var(--sp3)}
.mock-row{display:flex;align-items:center;gap:var(--sp3);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--s1)}
.mock-row .mock-name{flex:1;font-size:13px;font-weight:600}
.mock-tag{font-size:11px;padding:3px 9px;border-radius:6px;background:var(--silver-soft);color:var(--silver);border:1px solid var(--line2)}
.mock-line{height:8px;border-radius:99px;background:var(--s3)}
.mock-line.w60{width:60%}
.mock-line.w40{width:40%}

/* ---------- features ---------- */
.features{background:var(--bg-soft);border-block:1px solid var(--line)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4)}
@media (max-width:980px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.feature-grid{grid-template-columns:1fr}}
.feature{
  background:var(--s1);
  border:1px solid var(--line);
  border-radius:var(--r3);
  padding:var(--sp5);
  transition:border-color var(--t2) var(--e1),transform var(--t2) var(--e1);
}
.feature:hover{border-color:var(--line2);transform:translateY(-3px)}
.feature-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r2);
  background:var(--silver-soft);border:1px solid var(--line2);
  color:var(--silver);margin-bottom:var(--sp4);
}
.feature-icon .ic{width:21px;height:21px}
.feature p{margin-top:var(--sp2);color:var(--fg2);font-size:14px;line-height:1.8}

/* ---------- games ---------- */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp4)}
.game{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r3);
  background:var(--s1);
  transition:border-color var(--t2) var(--e1),transform var(--t2) var(--e1);
}
.game:hover{border-color:var(--line2);transform:translateY(-3px)}
.game-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--s2)}
.game-media img,.game-media video{width:100%;height:100%;object-fit:cover}
.game-media video{position:absolute;inset:0;opacity:0;transition:opacity var(--t2) var(--e1)}
.game:hover .game-media video{opacity:1}
.game-body{padding:14px 16px}
.game-name{font-size:14px;font-weight:600}
.game-more{margin-top:var(--sp5);padding-top:var(--sp5);border-top:1px solid var(--line)}
.game-chips{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-top:var(--sp3)}
.chip{
  display:inline-flex;align-items:center;height:28px;padding-inline:12px;
  border-radius:8px;background:var(--s2);border:1px solid var(--line);
  font-size:12.5px;color:var(--fg2);
}

/* ---------- download ---------- */
.download{text-align:center}
.download .lead{margin:var(--sp4) auto 0;max-width:560px}
.download-actions{display:flex;flex-wrap:wrap;gap:var(--sp3);justify-content:center;margin-top:var(--sp6)}
.download-meta{margin-top:var(--sp4);font-size:13px;color:var(--fg3)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-soft);padding-block:var(--sp7) var(--sp5)}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--sp6)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{display:flex;flex-direction:column;gap:var(--sp3)}
.footer-brand p{font-size:13.5px;color:var(--fg3);max-width:300px;line-height:1.8}
.footer-col h4{font-size:12px;font-weight:700;color:var(--fg3);letter-spacing:.07em;text-transform:uppercase;margin-bottom:var(--sp4)}
.footer-col li+li{margin-top:10px}
.footer-col a{font-size:13.5px;color:var(--fg2);transition:color var(--t1)}
.footer-col a:hover{color:var(--fg)}
.footer-bottom{
  margin-top:var(--sp7);padding-top:var(--sp5);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;
  font-size:12.5px;color:var(--fg3);
}
.footer-social{display:flex;gap:var(--sp2)}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:var(--s2);border:1px solid var(--line);color:var(--fg2);
  transition:color var(--t1),border-color var(--t1),background var(--t1);
}
.footer-social a:hover{color:var(--fg);border-color:var(--line2);background:var(--s3)}

/* ---------- auth ---------- */
.auth-page{display:flex;align-items:center;justify-content:center;padding:var(--sp6) var(--sp4);min-height:100vh}
.auth-wrap{width:100%;max-width:960px;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r4);overflow:hidden;background:var(--s1)}
@media (max-width:880px){.auth-wrap{grid-template-columns:1fr;max-width:440px}}
.auth-side{
  position:relative;padding:var(--sp7);
  background:linear-gradient(160deg,var(--s2),var(--bg-soft));
  border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp7);
}
@media (max-width:880px){.auth-side{display:none}}
.auth-side h2{font-family:var(--font-brand);font-size:26px;line-height:1.4;font-weight:700;margin-top:var(--sp5)}
.auth-list{display:grid;gap:var(--sp3);margin-top:var(--sp6)}
.auth-list li{display:flex;align-items:flex-start;gap:var(--sp3);font-size:14px;color:var(--fg2)}
.auth-list .ic{width:18px;height:18px;color:var(--silver);margin-top:4px}
.auth-form-side{padding:var(--sp7)}
@media (max-width:560px){.auth-form-side{padding:var(--sp5)}}
.auth-head{margin-bottom:var(--sp6)}
.auth-head h1{font-family:var(--font-brand);font-size:26px;font-weight:700;margin-bottom:var(--sp2)}
.auth-head p{color:var(--fg2);font-size:14px}
.auth-alt{margin-top:var(--sp5);padding-top:var(--sp5);border-top:1px solid var(--line);font-size:13.5px;color:var(--fg3);text-align:center}
.auth-alt a{color:var(--silver);font-weight:600}
.auth-alt a:hover{text-decoration:underline}
.auth-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg3);margin-top:var(--sp5);transition:color var(--t1)}
.auth-back:hover{color:var(--fg2)}
.auth-support{margin-top:var(--sp6);display:flex;gap:var(--sp2);justify-content:center}
.auth-support a{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding-inline:12px;
  border-radius:9px;border:1px solid var(--line);background:var(--s2);
  font-size:12.5px;color:var(--fg2);transition:color var(--t1),border-color var(--t1);
}
.auth-support a:hover{color:var(--fg);border-color:var(--line2)}
.pw-meter{display:flex;gap:4px;margin-top:8px}
.pw-meter i{height:3px;flex:1;border-radius:99px;background:var(--s3);transition:background var(--t1)}
.pw-meter.s1 i:nth-child(1){background:var(--danger)}
.pw-meter.s2 i:nth-child(-n+2){background:var(--silver-2)}
.pw-meter.s3 i{background:var(--silver)}

/* ---------- dashboard ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;padding-block:var(--sp7) var(--sp5)}
.page-head h1{font-family:var(--font-brand);font-size:clamp(24px,3.2vw,32px);font-weight:700}
.page-head p{margin-top:6px;color:var(--fg2);font-size:14px}
.account-card{display:flex;align-items:center;gap:var(--sp4);padding:var(--sp5)}
.avatar{
  width:52px;height:52px;border-radius:14px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--silver-soft);border:1px solid var(--line2);
  font-family:var(--font-num);font-size:20px;font-weight:700;color:var(--silver);
}
.account-meta{min-width:0}
.account-meta .email{font-size:15px;font-weight:600;word-break:break-all}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp4)}
.mini-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r3);padding:var(--sp5)}
.mini-card h3{font-size:15px;font-weight:700}
.mini-card p{margin-top:6px;font-size:13.5px;color:var(--fg2);line-height:1.8}
.empty{
  border:1px dashed var(--line2);border-radius:var(--r3);
  padding:var(--sp8) var(--sp5);text-align:center;color:var(--fg3);
}
.empty .ic{width:28px;height:28px;margin:0 auto var(--sp3);color:var(--fg3)}
.empty p{font-size:14px}

/* ---------- toast ---------- */
.toast-host{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:9999;display:flex;flex-direction:column;gap:var(--sp2);pointer-events:none}
.toast{
  display:flex;align-items:center;gap:var(--sp3);
  min-width:240px;max-width:360px;
  padding:12px 16px;
  background:var(--s2);border:1px solid var(--line2);border-radius:var(--r2);
  box-shadow:var(--shadow-2);
  font-size:13.5px;
  transform:translateY(12px);opacity:0;
  transition:transform .28s var(--e1),opacity .28s var(--e1);
}
.toast.show{transform:translateY(0);opacity:1}
.toast .ic{width:18px;height:18px;color:var(--silver)}
.toast.error .ic{color:var(--danger)}
.toast.ok .ic{color:var(--silver)}
@media (max-width:520px){
  .toast-host{inset-inline:16px;inset-block-end:16px}
  .toast{max-width:none}
}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--line);margin-block:var(--sp6)}
.loader{
  width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--s2),var(--s3),var(--s2));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r1)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ==========================================================================
   Glow + Cinema layer
   Monochrome silver. No status colours, no telemetry — pure light & motion.
   ========================================================================== */
:root{
  --glow-1:0 0 0 1px rgba(228,232,238,.10),0 8px 40px rgba(196,204,216,.14);
  --glow-2:0 0 60px rgba(228,232,238,.16),0 0 120px rgba(190,198,212,.10);
  --glow-soft:0 0 24px rgba(228,232,238,.10);
  --halo:radial-gradient(60% 60% at 50% 0,rgba(228,232,238,.14),transparent 72%);
}

/* brand mark glow underline */
.brand{position:relative}
.brand::after{
  content:"";position:absolute;inset-inline:0;block-size:1px;inset-block-end:-2px;
  background:linear-gradient(90deg,transparent,rgba(228,232,238,.5),transparent);
  opacity:0;transition:opacity var(--t2) var(--e1);
}
.brand:hover::after{opacity:1}
.brand img{box-shadow:var(--glow-soft)}

/* section-level ambient halo */
.glow-section{position:relative;overflow:hidden;isolation:isolate}
.glow-section::before{
  content:"";position:absolute;inset:-30% -10% auto;height:80%;z-index:-1;
  background:var(--halo);pointer-events:none;
}

/* lift any surface with an interactive glow */
.glow{
  position:relative;transition:transform var(--t2) var(--e1),border-color var(--t2) var(--e1),box-shadow var(--t2) var(--e1);
}
.glow:hover{transform:translateY(-4px);border-color:var(--line3);box-shadow:var(--glow-2)}

/* sheen sweep on primary buttons */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--e1)}
.btn-primary:hover::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){.btn-primary::after{display:none}}

/* ---------- cinematic scroll video ---------- */
.cinema{
  position:relative;
  min-block-size:88vh;
  display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
  border-block:1px solid var(--line);
  background:var(--bg);
}
.cinema--tall{min-block-size:100vh}
.cinema__video{
  position:absolute;inset:0;z-index:-2;
  inline-size:100%;block-size:100%;object-fit:cover;
  filter:grayscale(.15) contrast(1.05) brightness(.62);
  opacity:0;transition:opacity 1.1s var(--e1);
}
.cinema.is-ready .cinema__video{opacity:1}
.cinema__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,9,11,.72),rgba(8,9,11,.42) 45%,rgba(8,9,11,.92)),
    radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(8,9,11,.7));
}
.cinema__inner{position:relative;z-index:1;inline-size:100%}
.cinema__eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp2);
  font-family:var(--font-num);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg2);margin-bottom:var(--sp4);
}
.cinema__eyebrow::before{content:"";inline-size:26px;block-size:1px;background:linear-gradient(90deg,transparent,var(--silver))}
.cinema__title{
  font-family:var(--font-brand);
  font-size:clamp(34px,6vw,68px);font-weight:700;line-height:1.06;letter-spacing:-.015em;
  max-inline-size:16ch;
  background:linear-gradient(180deg,#fff,var(--silver-2) 70%,var(--fg2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 30px rgba(228,232,238,.18));
}
.cinema__title .accent{
  -webkit-text-fill-color:var(--silver);
  text-shadow:0 0 34px rgba(228,232,238,.45);
}
.cinema__lead{margin-top:var(--sp4);max-inline-size:54ch;font-size:clamp(15px,1.6vw,18px);line-height:1.9;color:var(--fg2)}
.cinema__actions{display:flex;flex-wrap:wrap;gap:var(--sp3);margin-top:var(--sp6)}
.cinema__stats{
  display:flex;flex-wrap:wrap;gap:var(--sp7);margin-top:var(--sp7);
  padding-top:var(--sp5);border-top:1px solid var(--line);
}
.cinema__stat{display:flex;flex-direction:column;gap:2px}
.cinema__stat .k{font-family:var(--font-num);font-size:clamp(24px,3vw,34px);font-weight:700;color:var(--fg);line-height:1}
.cinema__stat .v{font-size:12.5px;color:var(--fg3);letter-spacing:.03em}

/* scroll-reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e1),transform .8s var(--e1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* game spotlight grid (cinema cards) */
.spot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp3)}
.spot{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r3);
  aspect-ratio:16/10;background:var(--s1);
  transition:border-color var(--t2) var(--e1),transform var(--t2) var(--e1),box-shadow var(--t2) var(--e1);
}
.spot:hover{border-color:var(--line3);transform:translateY(-4px);box-shadow:var(--glow-2)}
.spot img,.spot video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.spot video{opacity:0;transition:opacity .5s var(--e1)}
.spot:hover video{opacity:1}
.spot__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,9,11,.9));pointer-events:none}
.spot__body{position:absolute;inset-inline:0;inset-block-end:0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp2)}
.spot__name{font-size:14px;font-weight:600;color:#fff}
.spot__tag{font-family:var(--font-num);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);opacity:0;transform:translateX(-6px);transition:opacity var(--t2) var(--e1),transform var(--t2) var(--e1)}
.spot:hover .spot__tag{opacity:1;transform:none}

/* feature cards — spotlight hover */
.feature{position:relative;overflow:hidden}
.feature::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(200px 200px at var(--mx,50%) var(--my,0%),rgba(228,232,238,.10),transparent 70%);
  opacity:0;transition:opacity var(--t2) var(--e1);
}
.feature:hover::before{opacity:1}
.feature:hover{box-shadow:var(--glow-2)}

/* step timeline */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp5)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:var(--sp6)}
.step__num{
  font-family:var(--font-num);font-size:44px;font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--line3);
}
.step__bar{position:absolute;inset-block-start:0;inset-inline:0;block-size:2px;background:linear-gradient(90deg,var(--silver),transparent)}
.step h3{margin-top:var(--sp3)}
.step p{margin-top:var(--sp2);color:var(--fg2);font-size:14px}

/* marquee ribbon */
.ribbon{border-block:1px solid var(--line);background:var(--bg-soft);overflow:hidden;padding-block:var(--sp5)}
.ribbon__track{display:flex;gap:var(--sp7);width:max-content;animation:ribbon 42s linear infinite}
.ribbon__item{font-family:var(--font-num);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg3);display:flex;align-items:center;gap:var(--sp7)}
.ribbon__item::after{content:"";inline-size:5px;block-size:5px;border-radius:50%;background:var(--line3)}
@keyframes ribbon{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.ribbon__track{animation:none}}

/* glow CTA panel */
.cta-panel{
  position:relative;overflow:hidden;text-align:center;
  border:1px solid var(--line2);border-radius:var(--r4);
  padding:var(--sp9) var(--sp5);
  background:linear-gradient(160deg,var(--s2),var(--bg-soft));
  box-shadow:var(--glow-2);
}
.cta-panel::before{content:"";position:absolute;inset:-40% 0 auto;height:120%;background:var(--halo);pointer-events:none}
.cta-panel .eyebrow{justify-content:center}
.cta-panel .btn{position:relative;z-index:1}