/* ════════════════════════════════════════════════════════════════
   UTGARD — PREMIUM CINEMATIC LAYER
   Loaded after the base stylesheet. Owns an atmospheric, physically-
   believable environment: a dark textured stage, volumetric fog,
   soft moving light, glass surfaces with chrome edges, and quiet
   micro-interactions. Restraint is the point — it should read as
   expensive engineering, never as a sci-fi template.

   Everything is additive and fails safe: if premium.js never runs,
   no content is hidden and no layout breaks.
   ════════════════════════════════════════════════════════════════ */

:root{
  --fx-red:#e5484d;
  --fx-crimson:#7a1020;
  --fx-ember:#ff6a3d;
  --fx-chrome-top:rgba(255,255,255,.16);
  --fx-chrome-bot:rgba(255,255,255,.03);
  /* unitless scroll offset, set by premium.js each frame */
  --sy:0;
  /* smoothed global pointer (px) */
  --mx:50vw; --my:40vh;
}

/* Content sits above the atmosphere */
#login-view,#app{position:relative;z-index:1;}

/* ════════════════ BACKGROUND — layered atmosphere ════════════
   L1 dark textured surface · L6 animated gradients · L3 lighting */
#fx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(150% 120% at 50% -20%, #101016 0%, #0a0a0d 46%, #050507 100%);}
/* subtle brushed texture on the base surface — data-uri, no network */
#fx-bg::after{content:'';position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:180px 180px;}
/* slow, wide atmospheric light — two masses, very low contrast */
#fx-bg::before{content:'';position:absolute;inset:-20%;
  background:
    radial-gradient(680px 600px at 16% 6%, rgba(180,42,52,.10), transparent 62%),
    radial-gradient(760px 680px at 86% 14%, rgba(96,14,26,.13), transparent 64%),
    radial-gradient(820px 760px at 40% 108%, rgba(150,30,42,.08), transparent 66%);
  animation:fx-drift 46s ease-in-out infinite alternate;will-change:transform;}
@keyframes fx-drift{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-2.5%,-3%,0) scale(1.06);}}

/* L2 volumetric fog — soft blurred masses drifting behind everything */
#fx-fog{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  transition:transform .1s linear;}
#fx-fog i{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform;}
#fx-fog i:nth-child(1){width:58vw;height:36vh;left:-14%;top:6%;opacity:.42;
  background:radial-gradient(closest-side, rgba(110,16,30,.5), transparent);
  animation:fx-fog-a 52s ease-in-out infinite alternate;}
#fx-fog i:nth-child(2){width:50vw;height:32vh;right:-12%;top:44%;opacity:.4;
  background:radial-gradient(closest-side, rgba(58,10,18,.55), transparent);
  animation:fx-fog-b 44s ease-in-out infinite alternate;}
#fx-fog i:nth-child(3){width:64vw;height:28vh;left:14%;bottom:-10%;opacity:.3;
  background:radial-gradient(closest-side, rgba(180,40,50,.22), transparent);
  animation:fx-fog-a 60s ease-in-out infinite alternate-reverse;}
@keyframes fx-fog-a{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(6%,3%,0) scale(1.12);}}
@keyframes fx-fog-b{from{transform:translate3d(0,0,0) scale(1.04);}to{transform:translate3d(-5%,-4%,0) scale(1);}}

/* L4 very subtle floating dust — CSS motes on transform/opacity only,
   so nothing repaints behind the glass panels */
#fx-dust{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#fx-dust b{position:absolute;width:var(--sz,2px);height:var(--sz,2px);border-radius:50%;
  background:var(--c,rgba(210,214,230,1));opacity:var(--o,.2);
  box-shadow:0 0 6px var(--c,rgba(210,214,230,.8));
  animation:fx-mote var(--d,22s) linear var(--dl,0s) infinite;will-change:transform,opacity;}
@keyframes fx-mote{
  0%{transform:translateY(8vh) translateX(0);opacity:0;}
  12%{opacity:var(--o,.2);}
  88%{opacity:var(--o,.2);}
  100%{transform:translateY(-24vh) translateX(2vw);opacity:0;}}

/* L3 mouse-reactive atmospheric light — a soft moving glow, not a spotlight */
#fx-spot{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(600px 600px at var(--mx) var(--my),
    rgba(226,96,102,.05), rgba(229,72,77,.014) 42%, transparent 70%);}

/* L5 depth blur + vignette + a faint reflection at the base of the stage */
#fx-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 10%),
    radial-gradient(130% 100% at 50% 38%, transparent 52%, rgba(0,0,0,.55) 100%),
    linear-gradient(0deg, rgba(120,20,30,.05), transparent 22%);}

/* ════════════════ LOADING SEQUENCE ══════════════════════════ */
#loading{background:#050507;flex-direction:column;gap:26px;}
#loading::before{content:'UTGARD';font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.18em;
  letter-spacing:.52em;text-indent:.52em;color:var(--text);
  text-shadow:0 0 20px rgba(229,72,77,.4);
  animation:fx-boot-mark 1.5s var(--ease-out) both;}
#loading::after{content:'';width:150px;height:1px;border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(229,72,77,.9), transparent);
  background-size:55% 100%;background-repeat:no-repeat;
  animation:fx-boot-bar 1.15s ease-in-out infinite;}
@keyframes fx-boot-mark{from{opacity:0;letter-spacing:.85em;filter:blur(5px);}to{opacity:1;letter-spacing:.52em;filter:blur(0);}}
@keyframes fx-boot-bar{0%{background-position:-110% 0;}100%{background-position:210% 0;}}
#loading .loader{display:none;}

/* ════════════════ TILT + LIGHT ENGINE (driven by premium.js) ═
   Cards become physical objects that tilt gently toward the cursor
   (never past 3°) and catch a soft light where the pointer is. */
.fx-tilt{
  transform:perspective(1200px)
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
    translateY(var(--lift,0px)) scale(var(--sc,1)) !important;
  transform-style:preserve-3d;
  transition:box-shadow .4s var(--ease),border-color .35s var(--ease),background .35s var(--ease) !important;
  will-change:transform;}
.fx-light{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:4;
  opacity:var(--lo,0);transition:opacity .45s var(--ease);
  background:
    radial-gradient(340px 280px at var(--px,50%) var(--py,50%), rgba(255,255,255,.05), transparent 60%),
    radial-gradient(560px 460px at var(--px,50%) var(--py,50%), rgba(229,72,77,.05), transparent 66%);}
/* pointer-tracked specular band across the top edge — a glass highlight */
.fx-light::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.05) 44%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 56%, transparent);
  transform:translateX(var(--sweep,-120%)) skewX(-14deg);
  transition:transform .8s var(--ease-out);}

/* ════════════════ GLASS CARD LANGUAGE ═══════════════════════
   Smoked glass body, a bright top chrome edge fading to a dark
   bottom edge, layered ambient-occlusion shadows underneath.

   PERFORMANCE: real backdrop-filter blur is reserved for the few
   large chrome/hero panels (below). The many small cards use an
   opaque smoked-glass fill instead — visually near-identical over
   this dark stage, but with none of the per-frame blur-recompute
   cost that would otherwise melt the compositor on card-heavy views. */
.hero-main,.pp,.stat,.mod,.activity,.pub-tier,.pub-faq-item,.pub-how-step,
.locked-view,.lsec,.pub-stats,.case-card{
  position:relative;
  background:
    linear-gradient(158deg, rgba(26,26,32,.92), rgba(12,12,16,.94)) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,   /* top chrome edge */
    0 -1px 0 rgba(0,0,0,.4) inset,          /* bottom dark edge */
    0 2px 5px rgba(0,0,0,.34),
    0 20px 46px -26px rgba(0,0,0,.72) !important;
  -webkit-backdrop-filter:none;backdrop-filter:none;}
/* Only these large, few panels carry true glass blur */
.hero-main,.pp,.pub-stats{
  background:linear-gradient(158deg, rgba(28,28,34,.64), rgba(14,14,18,.7)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);}
.stat:hover,.mod:hover,.pub-tier:hover,.pub-how-step:hover,.case-card:hover{
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 -1px 0 rgba(0,0,0,.4) inset,
    0 10px 22px rgba(0,0,0,.4),
    0 40px 84px -30px rgba(0,0,0,.82),
    0 22px 60px -30px rgba(229,72,77,.22) !important;}

/* ════════════════ LANDING ═══════════════════════════════════ */
.pub-nav{background:rgba(7,7,10,.55) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  border-bottom:1px solid rgba(255,255,255,.06);}

.pub-hero{min-height:90vh;isolation:isolate;}
/* mount for the glass sphere — sits behind the title, dark and quiet */
.fx-hero3d{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.fx-hero3d canvas{display:block;width:100%;height:100%;}
/* a soft contact-light under the sphere so it feels seated in the fog */
.fx-hero3d::after{content:'';position:absolute;left:50%;top:52%;
  width:min(80vmin,820px);height:min(80vmin,820px);transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(140,26,36,.12), rgba(90,14,24,.05) 52%, transparent 70%);
  filter:blur(6px);}

.pub-hero-title{font-size:clamp(42px,6vw,82px);letter-spacing:-.045em;line-height:1.05;
  text-shadow:0 6px 44px rgba(0,0,0,.7);
  transform:translateY(calc(var(--sy) * -0.05px));will-change:transform;}
.pub-hero-title .accent{
  background:linear-gradient(122deg, #ffb0ad 0%, var(--fx-red) 46%, #a8232c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(229,72,77,.28));}
.pub-hero-sub{font-size:clamp(15px,1.3vw,18px);max-width:600px;
  transform:translateY(calc(var(--sy) * -0.025px));will-change:transform;}
.pub-hero-eyebrow{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  background:rgba(229,72,77,.06);border:1px solid rgba(229,72,77,.2);border-radius:999px;
  padding:7px 14px;box-shadow:0 0 20px -8px rgba(229,72,77,.3), inset 0 1px 0 rgba(255,255,255,.07);}

/* stats strip: single glass monolith */
.pub-stats{border-radius:18px;overflow:hidden;}
.pub-stat{position:relative;transition:background .3s var(--ease);}
.pub-stat:hover{background:rgba(229,72,77,.035);}
.pub-stat-val{font-size:32px;}

.pub-how-step{border-radius:14px;transition:border-color .35s var(--ease),box-shadow .35s var(--ease);}
.pub-how-num{color:var(--red-text);}

/* ── Tier cards: each tier carries its own quiet accent temperature ── */
.pub-tier{border-radius:18px;overflow:hidden;isolation:isolate;}
.pub-tier::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;
  background:radial-gradient(120% 66% at 50% -18%, var(--tier-glow, rgba(229,72,77,.12)), transparent 58%);}
.pub-tier::after{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg, transparent, var(--tier-line, rgba(229,72,77,.5)), transparent);}
.pub-tiers .pub-tier:nth-child(1){--tier-glow:rgba(229,72,77,.12);--tier-line:rgba(229,72,77,.5);}
.pub-tiers .pub-tier:nth-child(2){--tier-glow:rgba(96,84,255,.12);--tier-line:rgba(124,156,255,.5);}
.pub-tiers .pub-tier:nth-child(3){--tier-glow:rgba(255,178,36,.11);--tier-line:rgba(255,196,84,.48);}
.pub-tiers .pub-tier:nth-child(2):hover{box-shadow:
  0 1px 0 rgba(255,255,255,.1) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 10px 22px rgba(0,0,0,.4),
  0 40px 84px -30px rgba(0,0,0,.82),0 22px 60px -30px rgba(96,84,255,.26) !important;}
.pub-tiers .pub-tier:nth-child(3):hover{box-shadow:
  0 1px 0 rgba(255,255,255,.1) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 10px 22px rgba(0,0,0,.4),
  0 40px 84px -30px rgba(0,0,0,.82),0 22px 60px -30px rgba(255,178,36,.22) !important;}
.pub-tier-price{text-shadow:0 0 24px rgba(255,255,255,.1);}

.pub-faq-item{border-radius:14px;}
.pub-cta-title{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.04em;}

/* ════════════════ BUTTONS — physical, metallic ══════════════ */
.btn,.pub-discord-btn,.pub-nav-btn,.locked-enroll-btn{position:relative;overflow:hidden;}
.btn-primary,.pub-discord-btn,.pub-nav-btn,.locked-enroll-btn{
  transform:translate3d(var(--magx,0px),var(--magy,0px),0) !important;
  transition:transform .32s var(--spring),box-shadow .3s var(--ease),background .2s var(--ease) !important;
  will-change:transform;}
.btn-primary{
  background:linear-gradient(180deg, #f0595e 0%, var(--fx-red) 48%, #c23036 100%) !important;
  border:1px solid rgba(255,170,174,.4) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -6px 12px rgba(0,0,0,.28) inset,
    0 8px 22px -6px rgba(229,72,77,.5),
    0 2px 4px rgba(0,0,0,.4) !important;}
.btn-primary:hover,.locked-enroll-btn:hover{
  transform:translate3d(var(--magx,0px),calc(var(--magy,0px) - 2px),0) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -6px 12px rgba(0,0,0,.28) inset,
    0 14px 32px -8px rgba(229,72,77,.6),
    0 2px 6px rgba(0,0,0,.4) !important;}
.btn-primary:active,.pub-discord-btn:active,.pub-nav-btn:active,.locked-enroll-btn:active{
  transform:translate3d(var(--magx,0px),calc(var(--magy,0px) + 1px),0) scale(.975) !important;
  transition-duration:.09s !important;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -3px 8px rgba(0,0,0,.3) inset,0 4px 12px -4px rgba(229,72,77,.4) !important;}
/* single reflection sweep on hover — restrained, one pass */
.btn-primary::after,.pub-discord-btn::after,.locked-enroll-btn::after{
  content:'';position:absolute;top:-40%;bottom:-40%;left:-70%;width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-16deg);opacity:0;pointer-events:none;}
.btn-primary:hover::after,.pub-discord-btn:hover::after,.locked-enroll-btn:hover::after{
  opacity:1;animation:fx-sheen 1s var(--ease-out);}
@keyframes fx-sheen{from{left:-70%;}to{left:150%;}}
.btn-secondary{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;}

/* ════════════════ SIDEBAR — floating glass panel ════════════ */
.sb{background:linear-gradient(180deg, rgba(18,18,24,.66), rgba(9,9,13,.78)) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);
  border-right:1px solid rgba(255,255,255,.065);
  box-shadow:1px 0 0 rgba(0,0,0,.5), 26px 0 78px -42px rgba(0,0,0,.8);}
/* cursor-reactive inner glow, tied to the global pointer position */
.sb::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:radial-gradient(320px 320px at var(--mx) var(--my), rgba(229,72,77,.05), transparent 60%);
  mask-image:linear-gradient(#000,#000);}
.sb-nav,.sb-head,.sb-foot{position:relative;z-index:1;}
.sb-item{border-radius:10px;position:relative;}
.sb-item i{transition:transform .35s var(--spring),color .22s var(--ease),filter .3s var(--ease);}
.sb-item:hover i{transform:rotate(-6deg) scale(1.12);color:var(--red-text);
  filter:drop-shadow(0 0 6px rgba(229,72,77,.45));}
.sb-item.on{
  background:linear-gradient(110deg, rgba(229,72,77,.24), rgba(229,72,77,.06) 48%, rgba(229,72,77,.16) 88%) !important;
  background-size:220% 100% !important;
  animation:fx-active-flow 6s ease-in-out infinite alternate;
  box-shadow:inset 0 0 0 1px rgba(229,72,77,.26), inset 0 1px 0 rgba(255,255,255,.07),
    0 8px 24px -12px rgba(229,72,77,.5) !important;}
@keyframes fx-active-flow{from{background-position:0% 0;}to{background-position:100% 0;}}
.sb-item.on i{color:#ffb0b0;filter:drop-shadow(0 0 8px rgba(229,72,77,.55));}
.sb-mark{box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 6px 20px rgba(229,72,77,.42) !important;}
.top{background:rgba(7,7,10,.5) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35);}

/* ════════════════ DASHBOARD ═════════════════════════════════ */
.hero-main{isolation:isolate;}
.hero-main .fx-hero3d{opacity:.55;z-index:0;}
.hero-content,.hero-meta{position:relative;z-index:2;}
.hero-title{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.04em;}
.hero-title .accent{
  background:linear-gradient(122deg, #ffb0ad, var(--fx-red) 50%, #a8232c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(229,72,77,.28));}
.hero-meta-item{transition:transform .35s var(--spring);}
.hero-meta-item:hover{transform:translateY(-2px);}

.stat{border-radius:16px;}
.stat-icon{box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 4px 12px -4px rgba(0,0,0,.6);}
.stat-icon i{transition:transform .35s var(--spring),color .2s var(--ease);}
.stat:hover .stat-icon i{transform:rotate(-8deg) scale(1.08);}
.stat:hover .stat-icon{box-shadow:0 0 18px -4px rgba(229,72,77,.45), 0 0 0 1px rgba(229,72,77,.32);}

.mod{border-radius:16px;}
.mod-prog{overflow:hidden;}
.mod-prog-fill{position:relative;transition:width 1.1s var(--ease-out);}
.mod-prog-fill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  background-size:200% 100%;animation:fx-bar-sheen 3s linear infinite;}
@keyframes fx-bar-sheen{from{background-position:200% 0;}to{background-position:-200% 0;}}

.activity{border-radius:16px;}
.act-row{transition:background .22s var(--ease),transform .28s var(--ease-out);}
.act-row:hover{background:rgba(255,255,255,.03);transform:translateX(3px);}

/* ════════════════ IDENTITY MODULE (profile) ═════════════════
   Glass panel · metal-ringed glass avatar · a single slow light
   sweep · a metallic progress bar. No radar, no HUD. */
.pp{border-radius:18px;overflow:hidden;}
.pp-avatar{z-index:2;}
.pp-avatar-img{position:relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 0 0 3px rgba(20,20,24,.9),
    0 0 0 4px rgba(229,72,77,.3),
    0 6px 18px -6px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.18);}
/* one quiet light sweep across the whole identity card */
.pp::after{content:'';position:absolute;top:0;bottom:0;left:-80%;width:45%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.04) 46%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 54%, transparent);
  transform:skewX(-14deg);animation:fx-id-sweep 9s ease-in-out infinite;}
@keyframes fx-id-sweep{0%,60%{left:-80%;}88%,100%{left:170%;}}
/* metallic, chrome-and-glass progress bar */
.pp-level-fill{
  background:linear-gradient(180deg, #ff9a9a 0%, var(--fx-red) 40%, #931821 100%) !important;
  box-shadow:0 0 12px rgba(229,72,77,.42), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.4);}
.pp-level-fill::after{
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.65) 12%, transparent 26%) !important;
  background-size:220% 100% !important;opacity:.7;
  animation:fx-metal 4s var(--ease) infinite;}
@keyframes fx-metal{0%{background-position:170% 0;}60%,100%{background-position:-70% 0;}}
.pp-rank{box-shadow:0 0 16px -6px rgba(229,72,77,.4);}

/* ════════════════ PAGE / SECTION TRANSITIONS ════════════════ */
.pg.on .hero,.pg.on .stats,.pg.on .sec,.pg.on .mods,.pg.on .activity,
.pg.on .pg-head,.pg.on .labs-grid,.pg.on .locked-view{
  animation:fx-page-in .6s var(--ease-out) both;}
.pg.on .stats,.pg.on > *:nth-child(2){animation-delay:.06s;}
.pg.on .sec{animation-delay:.11s;}
.pg.on .mods,.pg.on > *:nth-child(3){animation-delay:.15s;}
.pg.on .activity{animation-delay:.2s;}
@keyframes fx-page-in{
  from{opacity:0;transform:translateY(18px) scale(.99);filter:blur(5px);}
  to{opacity:1;transform:none;filter:blur(0);}}

/* landing scroll-reveal: momentum curve + slight blur */
body.reveal-armed .reveal{transform:translateY(36px) scale(.985);filter:blur(6px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out);}
body.reveal-armed .reveal.in{filter:blur(0);transform:none;}

/* ════════════════ TYPOGRAPHY / DETAILS ══════════════════════ */
.pg-title{letter-spacing:-.04em;}
.pub-section-title{font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;}
:focus-visible{outline:2px solid rgba(229,72,77,.65) !important;outline-offset:2px;
  box-shadow:0 0 0 4px rgba(229,72,77,.15) !important;}
.pub-stat-val,.stat-val,.hero-meta-val,.pp-stat-val{font-variant-numeric:tabular-nums;}

/* ════════════════ MOBILE / REDUCED-MOTION GUARDS ════════════ */
@media (max-width:768px){
  #fx-fog{display:none;}
  .fx-hero3d{opacity:.5;}
  .pub-hero{min-height:74vh;}
}
@media (prefers-reduced-motion: reduce){
  #fx-bg::before,#fx-fog i,.sb-item.on,.pp::after,.pp-level-fill::after,.mod-prog-fill::after{
    animation:none !important;}
  .fx-tilt{transform:none !important;}
  .pg.on .hero,.pg.on .stats,.pg.on .sec,.pg.on .mods,.pg.on .activity,
  .pg.on .pg-head,.pg.on .labs-grid,.pg.on .locked-view{animation:none !important;}
}

/* ════════════════ OWNER INLINE CONTENT EDITING ═══════════════
   Purely cosmetic feedback for the click-to-edit lesson-text flow in
   index.html — the toggle stays display:none for everyone except a
   verified Owner (rank 4), set directly by applyLoggedInState(). */
#owner-edit-toggle.active{color:var(--red-text) !important;
  background:rgba(229,72,77,.14) !important;border-color:rgba(229,72,77,.35) !important;
  box-shadow:0 0 14px -4px rgba(229,72,77,.5) !important;}
body.owner-edit-on [data-edit-key]{border-radius:4px;cursor:text;transition:outline-color .15s var(--ease),background .15s var(--ease);
  outline:1px dashed rgba(229,72,77,.32);outline-offset:2px;}
body.owner-edit-on [data-edit-key]:hover{outline-color:rgba(229,72,77,.7);background:rgba(229,72,77,.06);}
[data-edit-key].editing{outline:2px solid var(--fx-red) !important;outline-offset:2px;
  background:rgba(229,72,77,.08) !important;cursor:text;}
[data-edit-key].saving{opacity:.55;pointer-events:none;}
#edit-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);z-index:400;
  padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text);
  background:rgba(20,20,24,.92);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease-out);}
#edit-toast.show{opacity:1;transform:translate(-50%,0);}