:root{
  --bg:#eaf4ff;
  --bg2:#f8fcff;
  --surface:rgba(255,255,255,.72);
  --surface-strong:#ffffff;
  --card:#f5fbff;
  --line:#bfdcff;
  --line-strong:#80bfff;
  --text:#13325f;
  --muted:#5577a6;
  --primary:#0f5ed7;
  --primary-2:#1aa7ff;
  --accent:#73efff;
  --shadow:0 20px 60px rgba(41,91,165,.18);
  --portal1:rgba(7,94,215,.95);
  --portal2:rgba(72,214,255,.92);
  --page-max:1200px;
}
body.dark{
  --bg:#071225;
  --bg2:#0b1930;
  --surface:rgba(10,24,48,.78);
  --surface-strong:#0d1b32;
  --card:#0e1f3c;
  --line:#214a7c;
  --line-strong:#2d73cc;
  --text:#ebf6ff;
  --muted:#a8c5eb;
  --primary:#50acff;
  --primary-2:#6be8ff;
  --accent:#6be8ff;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--page-max),calc(100% - 32px));margin-inline:auto}
.page-bg{position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.68)),url('crystal-cave-original.webp') center/cover no-repeat;filter:saturate(1.08)}
body.dark .page-bg{background:linear-gradient(180deg,rgba(5,8,20,.3),rgba(8,14,28,.82)),url('crystal-cave-original.webp') center/cover no-repeat;filter:saturate(1.15) brightness(.72)}
.bg-glow,.bg-glow::before,.bg-glow::after{position:fixed;border-radius:50%;pointer-events:none;content:"";z-index:-2}
.bg-glow{width:36vw;height:36vw;right:-10vw;top:-8vw;background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.13;filter:blur(10px)}
.bg-glow::before{width:28vw;height:28vw;left:-75vw;top:48vh;background:radial-gradient(circle,#4ab8ff,transparent 70%);opacity:.16}
.bg-glow::after{width:22vw;height:22vw;left:-60vw;top:10vh;background:radial-gradient(circle,#ffffff,transparent 70%);opacity:.26}
.site-header{position:sticky;top:12px;z-index:50;padding:12px 0}
.navbar{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 18px;border:1px solid rgba(255,255,255,.65);border-radius:26px;background:rgba(255,255,255,.5);backdrop-filter: blur(14px);box-shadow:var(--shadow)}
body.dark .navbar{background:rgba(10,24,48,.65);border-color:rgba(107,232,255,.15)}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.brand img{width:46px;height:46px;border-radius:14px;box-shadow:0 10px 20px rgba(12,71,152,.18)}
.brand b{color:var(--primary)}
.navlinks{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.navlinks a,.nav-actions button,.nav-actions a{padding:10px 14px;border-radius:999px;border:1px solid transparent;font-weight:800;color:var(--text);transition:.24s ease}
.navlinks a.active,.navlinks a:hover,.nav-actions button:hover,.nav-actions a:hover{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 10px 24px rgba(15,94,215,.24)}
.nav-actions{display:flex;align-items:center;gap:10px}.icon-btn{background:transparent;cursor:pointer}.disc-btn{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;font-weight:900}
.hero{padding:44px 0 28px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.hero-copy{padding:20px 0}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px);border-radius:999px;font-weight:900;color:var(--primary);box-shadow:var(--shadow)}
.status-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg,var(--accent),var(--primary));box-shadow:0 0 14px var(--accent)}
.hero h1{font-size:clamp(2.6rem,5vw,5.4rem);margin:.48em 0 .1em;line-height:.9;letter-spacing:.02em}.hero h1 span{color:var(--primary)}
.hero h2{margin:.2em 0 .6em;font-size:clamp(1.3rem,2vw,2rem)}
.hero p{font-size:1.08rem;line-height:1.9;color:var(--muted);max-width:60ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 18px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:16px;font-weight:900;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px);box-shadow:var(--shadow);transition:transform .24s ease, box-shadow .24s ease, background .24s ease}.btn:hover{transform:translateY(-2px)}.btn.primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent}.btn.secondary:hover{background:#fff}.btn.small{padding:10px 14px;border-radius:12px;font-size:.95rem}
.proof{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-weight:800}
.hero-visual{position:relative;min-height:620px;display:grid;place-items:center}
.portal-wrap{position:relative;display:grid;place-items:center;width:min(100%,580px);aspect-ratio:1/1}
.portal-outer,.portal-mid,.portal-inner,.portal-runes,.portal-energy{position:absolute;inset:0;border-radius:50%}
.portal-outer{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(113,239,255,.25) 18%, rgba(15,94,215,.34) 38%, rgba(15,94,215,.12) 57%, transparent 69%);filter:drop-shadow(0 0 28px rgba(79,199,255,.42));animation:portalPulse 5.8s ease-in-out infinite}
.portal-mid{inset:8%;border:2px solid rgba(111,224,255,.62);box-shadow:inset 0 0 40px rgba(34,109,255,.18), 0 0 26px rgba(79,199,255,.25);animation:spinSlow 18s linear infinite}
.portal-inner{inset:17%;background:radial-gradient(circle at center, rgba(255,255,255,.9), rgba(229,244,255,.88) 25%, rgba(150,214,255,.3) 55%, rgba(13,54,117,.18) 68%, rgba(13,54,117,.05) 78%, transparent 82%);backdrop-filter:blur(10px)}
.portal-runes{inset:13%;border:1px dashed rgba(15,94,215,.34);animation:spinReverse 24s linear infinite}
.portal-energy{inset:5%;filter:blur(20px);opacity:.7;background:conic-gradient(from 0deg, rgba(115,239,255,.3), rgba(15,94,215,.0), rgba(115,239,255,.4), rgba(15,94,215,.0), rgba(115,239,255,.3));animation:spinSlow 12s linear infinite}
.portal-frame{position:relative;width:82%;border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.6);box-shadow:0 30px 60px rgba(11,54,117,.22)}
.portal-frame img{width:100%;height:auto;transform:scale(1.01);display:block}
.portal-eyes{position:absolute;inset:0;pointer-events:none}
.portal-eye{position:absolute;top:29%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--accent),#fff 35%, transparent 60%);box-shadow:0 0 18px var(--accent),0 0 30px var(--primary)}
.portal-eye.left{left:42%}.portal-eye.right{right:42%}
.portal-chip{position:absolute;padding:10px 16px;border-radius:999px;background:var(--surface);backdrop-filter:blur(12px);border:1px solid var(--line);font-weight:900;box-shadow:var(--shadow)}
.portal-chip.c1{top:8%;right:8%}.portal-chip.c2{bottom:12%;left:7%}.portal-chip.c3{top:58%;right:-1%}
.portal-controls{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.section{padding:34px 0}.section-head{text-align:center;margin-bottom:22px}.eyebrow{display:block;letter-spacing:.14em;color:var(--primary);font-weight:900;font-size:.84rem;margin-bottom:10px}.section-head h2{font-size:clamp(1.8rem,3vw,3rem);margin:0 0 10px}.section-head p{margin:0 auto;color:var(--muted);max-width:70ch;line-height:1.85}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.glass{background:var(--surface);border:1px solid rgba(255,255,255,.72);backdrop-filter:blur(12px);border-radius:24px;box-shadow:var(--shadow)}
.card{padding:24px}.card h3{margin:0 0 10px;font-size:1.16rem}.card p{margin:0;color:var(--muted);line-height:1.75}.card-icon{font-size:1.75rem;margin-bottom:12px;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(180deg,#fff,rgba(107,232,255,.42));box-shadow:inset 0 1px 0 #fff}
.info-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}.panel{padding:26px}.server-ip{padding:16px 20px;border-radius:18px;background:var(--surface-strong);border:2px dashed var(--line-strong);font-size:1.55rem;font-weight:900;text-align:center;letter-spacing:.02em;direction:ltr;color:var(--primary);margin:18px 0}.feedback{min-height:24px;color:var(--primary);font-weight:900}
.status-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.mini{text-align:center;padding:16px}.mini strong{display:block;font-size:1.3rem;margin-top:6px;color:var(--primary)}
.ranks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.rank{padding:22px;position:relative;overflow:hidden}.rank::before{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--rank),transparent)}.rank h3{font-size:2rem;margin:0 0 8px;color:var(--rank)}.rank .price{font-size:1.95rem;font-weight:900;color:var(--text);margin-bottom:10px;direction:ltr}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}.stat-box{padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.46);text-align:center}.stat-box span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:7px}.rank details{margin-top:8px}.rank summary{list-style:none;cursor:pointer;font-weight:900;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.45);border:1px solid var(--line)}.rank summary::-webkit-details-marker{display:none}.rank ul{margin:14px 0 0;padding-right:20px;color:var(--muted);line-height:1.9}.rank .subttl{margin-top:14px;font-weight:900;color:var(--text)}
.rank.vyse{--rank:#2d8df7}.rank.slava{--rank:#7d5bf7}.rank.shadow{--rank:#4a6f97}.rank.venom{--rank:#10a86b}.rank.dragon{--rank:#e48d10}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery-item{overflow:hidden;position:relative}.gallery-item img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .35s ease}.gallery-item:hover img{transform:scale(1.05)}.gallery-item .cap{position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(180deg,transparent,rgba(7,18,37,.78));color:#fff;font-weight:800}
.staff-teaser{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px}.staff-teaser .left{display:flex;gap:18px;align-items:center}.staff-teaser .mark{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff;font-size:1.8rem;box-shadow:var(--shadow)}
.faq details{padding:18px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.42)}.faq details+details{margin-top:12px}.faq summary{cursor:pointer;font-weight:900}.faq p{margin:10px 0 0;color:var(--muted);line-height:1.8}
.player-card-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;align-items:start}.form-col{padding:22px}.field{display:grid;gap:8px;margin-bottom:14px}.field label{font-weight:800}.field input,.field select,.field textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.7);font:inherit;color:var(--text)}body.dark .field input,body.dark .field select,body.dark .field textarea{background:rgba(8,22,42,.72);color:var(--text)}
.player-card-preview{padding:28px;min-height:420px;position:relative;overflow:hidden;background:linear-gradient(145deg, rgba(255,255,255,.85), rgba(222,240,255,.95));border:1px solid rgba(255,255,255,.72)}body.dark .player-card-preview{background:linear-gradient(145deg, rgba(12,26,48,.9), rgba(9,31,60,.96))}
.player-card-preview::before{content:"";position:absolute;inset:-25% -10% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(115,239,255,.35),transparent 70%)}
.pc-header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:1}.pc-server{font-size:.85rem;letter-spacing:.16em;color:var(--primary);font-weight:900}.pc-badge{padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;font-weight:900}
.pc-main{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;margin-top:22px;position:relative;z-index:1}.pc-avatar{width:110px;height:110px;border-radius:28px;background:linear-gradient(180deg,#0d2a4f,#05111e);display:grid;place-items:center;overflow:hidden;box-shadow:0 18px 40px rgba(15,94,215,.25)}.pc-avatar img{width:100%;height:100%;object-fit:cover}.pc-avatar span{font-size:2.6rem;font-weight:900;color:#7ef4ff}
.pc-name{font-size:2.1rem;font-weight:900;line-height:1}.pc-rank{margin-top:8px;font-size:1.12rem;color:var(--primary);font-weight:900}.pc-bio{margin-top:12px;color:var(--muted);line-height:1.8}.pc-footer{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:1}.pill{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.52);font-weight:800}body.dark .pill{background:rgba(8,22,42,.7)}
.rules-list{display:grid;gap:14px}.rule-item{display:flex;gap:14px;align-items:flex-start;padding:18px 20px}.rule-num{min-width:44px;height:44px;border-radius:14px;background:linear-gradient(180deg,var(--primary),var(--primary-2));display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow)}
.apply-form{padding:24px}.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.apply-grid .field.full{grid-column:1/-1}.notice{padding:14px 16px;border-radius:16px;background:rgba(90,204,255,.16);border:1px solid var(--line);color:var(--muted);font-weight:700;line-height:1.8}
.staff-table{overflow:auto}.staff-table table{width:100%;border-collapse:collapse;min-width:760px}.staff-table th,.staff-table td{padding:16px 14px;border-bottom:1px solid rgba(128,191,255,.28);text-align:right}.staff-table th{position:sticky;top:0;background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff}.role-badge{padding:8px 12px;border-radius:999px;background:rgba(15,94,215,.12);border:1px solid rgba(15,94,215,.18);font-weight:900;color:var(--primary);display:inline-block}
.footer{padding:26px 0 60px;text-align:center;color:var(--muted);font-weight:700}
.cursor-energy{position:fixed;inset:0;pointer-events:none;z-index:120}.energy-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff,var(--accent) 40%, transparent 70%);filter:blur(.2px);opacity:.95;animation:particleFade .95s linear forwards}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);padding:14px 18px;border-radius:999px;background:rgba(7,18,37,.88);color:#fff;font-weight:800;opacity:0;pointer-events:none;transition:.25s ease;z-index:160}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.floating-toggle{position:fixed;left:18px;bottom:18px;z-index:80}
.portal-open .portal-outer{animation:portalBurst 1.2s ease}
.portal-open .portal-energy{animation:spinSlow 2s linear 1}
.hero-visual[data-tilt="1"] .portal-wrap,.hero-visual[data-tilt="1"] .portal-frame{will-change:transform}
@keyframes spinSlow{to{transform:rotate(360deg)}}@keyframes spinReverse{to{transform:rotate(-360deg)}}@keyframes portalPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.03);opacity:1}}@keyframes portalBurst{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}@keyframes particleFade{0%{transform:translate(-50%,-50%) scale(1);opacity:.9}100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2);opacity:0}}
@media (max-width:1080px){.hero-grid,.player-card-grid,.info-wrap{grid-template-columns:1fr}.hero-visual{min-height:540px}.grid-4{grid-template-columns:repeat(2,1fr)}.gallery-grid,.grid-3,.ranks-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.site-header{top:0;padding:0}.navbar{border-radius:0;padding:14px 14px 12px;flex-wrap:wrap}.navlinks{order:3;width:100%;justify-content:center;padding-top:8px}.nav-actions{margin-inline-start:auto}.hero{padding-top:24px}.hero h1{font-size:2.7rem}.grid-4,.gallery-grid,.grid-3,.ranks-grid{grid-template-columns:1fr}.portal-frame{width:92%}.portal-eye.left{left:39%}.portal-eye.right{right:39%}.player-card-grid,.apply-grid{grid-template-columns:1fr}.staff-teaser{flex-direction:column;align-items:flex-start}.server-ip{font-size:1.25rem}.hero-visual{min-height:480px}}


/* Performance upgrade: keep the recognizable Warden look without constantly running rings, filters or animations. */
html{scroll-behavior:auto}
.page-bg{background:linear-gradient(180deg,rgba(239,247,255,.94),rgba(242,248,255,.96)),url('crystal-cave-original.webp') center/cover no-repeat;filter:none}
body.dark .page-bg{background:linear-gradient(180deg,rgba(4,14,30,.93),rgba(5,18,36,.96)),url('crystal-cave-original.webp') center/cover no-repeat;filter:none}
.bg-glow{display:none!important}
.navbar,.glass,.kicker,.portal-chip,.btn{backdrop-filter:none;-webkit-backdrop-filter:none}
.navbar{background:var(--surface-strong);box-shadow:0 5px 22px rgba(23,81,159,.10)}
.glass{background:var(--surface-strong);border:1px solid var(--line);box-shadow:0 10px 24px rgba(18,87,159,.09)}
.btn{box-shadow:0 4px 12px rgba(15,94,215,.12)}
.hero-visual{min-height:450px;display:flex;align-items:center;justify-content:center}
.warden-showcase{width:min(100%,480px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;isolation:isolate}
.warden-logo-button{appearance:none;background:transparent;border:0;padding:0;width:min(100%,360px);aspect-ratio:438/418;cursor:pointer;outline-offset:6px;filter:none;transition:transform .18s ease-out;transform:translate3d(0,0,0)}
.warden-logo-button img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:22px;box-shadow:0 12px 32px rgba(15,94,215,.18);background:#dcefff}
.warden-logo-button:focus-visible,.portal-close:focus-visible{outline:3px solid var(--primary)}
.warden-logo-button:hover{box-shadow:none}
.portal-cta{padding-inline:26px}
.warden-portal-dialog{width:min(480px,calc(100vw - 32px));padding:0;margin:auto;border:1px solid var(--line-strong);border-radius:26px;background:var(--surface-strong);color:var(--text);box-shadow:0 18px 50px rgba(2,15,37,.3);overflow:visible;max-height:calc(100dvh - 36px)}
.warden-portal-dialog::backdrop{background:rgba(5,15,38,.72)}
.warden-portal-dialog[open]{animation:portalOpen .32s ease-out both}
.portal-dialog-inner{padding:30px 23px;text-align:center;position:relative;overflow-y:auto;max-height:calc(100dvh - 36px)}
.portal-close{position:absolute;top:12px;left:12px;cursor:pointer;border:1px solid var(--line);color:var(--text);background:var(--surface);width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:17px}
.portal-core{width:94px;height:94px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--accent);box-shadow:0 0 0 8px rgba(17,111,233,.12);background:linear-gradient(145deg,#0d2f69,#081629)}
.portal-core img{width:70px;height:70px}
.portal-dialog-kicker{font-size:.72rem;letter-spacing:.12em;font-weight:900;color:var(--primary)}
.warden-portal-dialog h2{font-size:clamp(1.3rem,4vw,1.9rem);margin:12px 0}
.warden-portal-dialog p{color:var(--muted);font-weight:650;line-height:1.8}
.portal-server-address{padding:14px 10px;border:2px solid var(--line-strong);border-radius:14px;background:var(--card);color:var(--primary);font-size:clamp(1rem,3vw,1.3rem);font-weight:900;white-space:nowrap}
.portal-dialog-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px 0}
.portal-dialog-actions .btn{padding:11px 14px}
.portal-note{font-size:.75rem;margin-bottom:0}
.cursor-energy{contain:layout paint;z-index:60}
.energy-particle{width:5px;height:5px;filter:none;animation:particleFade .65s ease-out forwards}
.section,.staff-teaser{content-visibility:auto;contain-intrinsic-size:auto 650px}
@keyframes portalOpen{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){
 .hero-visual{min-height:360px}
 .warden-showcase{padding:0;gap:12px}
 .warden-logo-button{width:min(100%,270px)}
 .warden-portal-dialog{border-radius:18px}
 .portal-dialog-inner{padding:24px 16px}
 .hero{padding-top:14px}
}
@media(prefers-reduced-motion:reduce){
 .warden-logo-button,.warden-portal-dialog[open],.energy-particle{animation:none!important;transition:none!important}
}

/* Subtle cursor parallax. Only enabled via JS for desktop fine pointers.
   The default light performance mode still has this small transform effect. */
@media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.lc-parallax-active .page-bg { inset:-10px; }
  body.lc-parallax-active .warden-showcase { transform:translate3d(0,0,0); }
  body.lc-parallax-active .hero-copy { transform:translate3d(0,0,0); }
}
@media (prefers-reduced-motion: reduce), (max-width: 899px), (pointer: coarse) {
  .page-bg,.warden-showcase,.hero-copy {transform:none!important;}
}

/* Warden palette for the rank metrics and disclosure controls. */
#ranks {
  --warden-frost: #c9f5ff;
  --warden-cyan: #6ce6ef;
  --warden-blue: #69c8ff;
  --warden-ink: #0a2a43;
  --warden-label: #17476a;
  --warden-glow: #6ce6ef52;
}
#ranks .stat-box,
#ranks .rank summary {
  border-color: var(--warden-cyan);
  background: linear-gradient(142deg, var(--warden-frost), var(--warden-blue));
  color: var(--warden-ink);
  box-shadow: inset 0 1px #effdff, 0 0 9px var(--warden-glow);
}
#ranks .stat-box span {color: var(--warden-label)}
#ranks .rank summary:focus-visible {
  outline: 2px solid var(--warden-blue);
  outline-offset: 3px;
}
#ranks .rank details[open] > summary,
#ranks .rank summary:active {
  border-color: var(--warden-frost);
  background: linear-gradient(142deg, var(--warden-frost), var(--warden-cyan));
}
@media (hover: hover) and (pointer: fine) {
  #ranks :is(.stat-box, .rank summary):hover {border-color: #effdff}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.lc-perf-light) #ranks :is(.stat-box, .rank summary) {
    transition: box-shadow .16s ease, border-color .16s ease;
  }
  body:not(.lc-perf-light) #ranks :is(.stat-box, .rank summary):hover {
    background:
      radial-gradient(circle at var(--rank-pointer-x, 50%) var(--rank-pointer-y, 50%), #f0fdffd9, transparent 68%),
      linear-gradient(142deg, var(--warden-frost), var(--warden-blue));
    box-shadow: inset 0 1px #effdff, 0 0 16px var(--warden-glow);
  }
}