:root{
  --purple:#9b45df;
  --purple-bright:#d28bff;
  --gold:#d8b86f;
  --ink:#0a0908;
  --panel:#17130f;
  --text:#eadfc9;
}
*{box-sizing:border-box}
html{background:#040404;color-scheme:dark}
body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  background:#040404;
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
}
a{color:inherit}
button,input{font:inherit}
body.is-leaving{opacity:.01;transition:opacity .15s ease}

.home-stage{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:
    radial-gradient(circle at 50% 22%,rgba(71,34,92,.12),transparent 42%),
    #030403;
}
.artboard{
  position:relative;
  width:min(100vw,calc(100vh * 1.5));
  aspect-ratio:3/2;
  background:url("assets/homepage-master.png") center/100% 100% no-repeat;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 0 70px rgba(0,0,0,.9);
}
.artboard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(circle at 4.2% 14%,rgba(164,64,255,.10),transparent 5.5%),
    radial-gradient(circle at 95.3% 14%,rgba(164,64,255,.10),transparent 5.5%);
  animation:crystal-breathe 3.2s ease-in-out infinite alternate;
}
@keyframes crystal-breathe{
  from{opacity:.35}
  to{opacity:.82}
}

.hit{
  position:absolute;
  z-index:10;
  display:block;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  text-decoration:none;
  outline:none;
  overflow:hidden;
  border-radius:3px;
  -webkit-tap-highlight-color:transparent;
}
.hit::before{
  content:"";
  position:absolute;
  inset:var(--glow-inset,4px);
  border:0;
  border-radius:var(--glow-radius,3px);
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(193,92,255,.20) 0%,
      rgba(158,61,222,.13) 44%,
      rgba(124,43,181,.07) 72%,
      rgba(124,43,181,.03) 100%
    );
  box-shadow:
    inset 0 0 12px rgba(161,67,221,.15);
  transition:opacity .13s ease, transform .09s ease;
}
.hit:hover::before,
.hit:focus-visible::before{
  opacity:1;
}
.hit:active::before{
  transform:scale(.985);
  opacity:1;
}
.hit.spark::after{
  content:"";
  position:absolute;
  left:var(--spark-x,50%);
  top:var(--spark-y,50%);
  width:8%;
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,235,255,.95),rgba(188,87,255,.56) 28%,transparent 68%);
  animation:spark .34s ease-out forwards;
}
@keyframes spark{
  0%{transform:translate(-50%,-50%) scale(.1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(5.2);opacity:0}
}

/* Precisely aligned hotspot geometry for the FINAL 1536x1024 master.
   Every hover glow is centered inside the exact visible control and clipped
   before it reaches neighbouring buttons, gems or panel borders. */

/* Top navigation
   Full stone tab stays clickable, but the glow is narrowed to the word area only. */
.nav-home     {left:11.32812%;top:24.90234%;width:8.59375%;height:4.68750%;--glow-inset:9px 33px 9px 33px;--glow-radius:14px;}
.nav-play     {left:19.92188%;top:24.90234%;width:10.87240%;height:4.68750%;--glow-inset:9px 28px 9px 28px;--glow-radius:14px;}
.nav-forums   {left:30.79427%;top:24.90234%;width:10.02604%;height:4.68750%;--glow-inset:9px 26px 9px 26px;--glow-radius:14px;}
.nav-store    {left:40.82031%;top:24.90234%;width:9.89583%;height:4.68750%;--glow-inset:9px 30px 9px 30px;--glow-radius:14px;}
.nav-vote     {left:50.71615%;top:24.90234%;width:9.63542%;height:4.68750%;--glow-inset:9px 31px 9px 31px;--glow-radius:14px;}
.nav-hiscores {left:60.35156%;top:24.90234%;width:11.97917%;height:4.68750%;--glow-inset:9px 32px 9px 32px;--glow-radius:14px;}
.nav-guides   {left:72.33073%;top:24.90234%;width:9.89583%;height:4.68750%;--glow-inset:9px 28px 9px 28px;--glow-radius:14px;}
.nav-discord  {left:82.22656%;top:24.90234%;width:9.04948%;height:4.68750%;--glow-inset:9px 20px 9px 20px;--glow-radius:14px;}

/* Latest News stays static; only VIEW NEWS is interactive. */
.view-news    {left:8.20312%;top:75.58594%;width:21.41927%;height:3.90625%;--glow-inset:3px 7px;}

/* Main Play panel remains clickable without a glow; only the plaque glows. */
.play-panel   {left:35.87240%;top:33.10547%;width:28.25521%;height:46.09375%;}
.play-panel::before { display:none; }
.play-button  {left:38.80208%;top:67.18750%;width:22.85156%;height:8.88672%;--glow-inset:5px 8px;--glow-radius:8px;}

/* Hiscores icon buttons */
.hs-overall   {left:69.40104%;top:40.72266%;width:5.07812%;height:6.93359%;--glow-inset:3px;--glow-radius:6px;}
.hs-xp        {left:75.00000%;top:40.72266%;width:5.14323%;height:6.93359%;--glow-inset:3px;--glow-radius:6px;}
.hs-pvm       {left:80.59896%;top:40.72266%;width:5.20833%;height:6.93359%;--glow-inset:3px;--glow-radius:6px;}
.hs-achieve   {left:86.26302%;top:40.72266%;width:5.20833%;height:6.93359%;--glow-inset:3px;--glow-radius:6px;}
.view-hiscores{left:69.14062%;top:72.36328%;width:22.20052%;height:4.29688%;--glow-inset:3px 7px;}

/* Bottom feature cards */
.feature-community{left:3.77604%;top:81.73828%;width:22.78646%;height:16.11328%;--glow-inset:8px 10px;--glow-radius:7px;}
.feature-vote     {left:27.47396%;top:81.73828%;width:21.35417%;height:16.11328%;--glow-inset:8px 10px;--glow-radius:7px;}
.feature-store    {left:49.73958%;top:81.73828%;width:20.83333%;height:16.11328%;--glow-inset:8px 10px;--glow-radius:7px;}
.feature-guides   {left:71.48438%;top:81.73828%;width:23.43750%;height:16.11328%;--glow-inset:8px 10px;--glow-radius:7px;}


/* TOP NAV — soft word-background hover.
   The full stone tab remains clickable, but only a narrow faded strip behind
   the complete label is illuminated. No circular halo and no spillover. */
.nav-home::before,
.nav-play::before,
.nav-forums::before,
.nav-store::before,
.nav-vote::before,
.nav-hiscores::before,
.nav-guides::before,
.nav-discord::before{
  border-radius:4px;
  background:
    linear-gradient(
      90deg,
      rgba(128,44,181,.025) 0%,
      rgba(151,57,210,.105) 13%,
      rgba(175,73,232,.155) 34%,
      rgba(182,78,239,.17) 50%,
      rgba(175,73,232,.155) 66%,
      rgba(151,57,210,.105) 87%,
      rgba(128,44,181,.025) 100%
    );
  box-shadow:
    inset 0 0 7px rgba(171,73,225,.115);
}

/* Insets are measured against the FINAL approved artwork.
   Values are: top right bottom left. */
.nav-home     {--glow-inset:12px 27px 11px 26px;--glow-radius:4px;}
.nav-play     {--glow-inset:12px 1px 11px 39px;--glow-radius:4px;}
.nav-forums   {--glow-inset:12px 0px 11px 54px;--glow-radius:4px;}
.nav-store    {--glow-inset:12px 9px 11px 59px;--glow-radius:4px;}
.nav-vote     {--glow-inset:11px 21px 11px 56px;--glow-radius:4px;}
.nav-hiscores {--glow-inset:11px 23px 11px 39px;--glow-radius:4px;}
.nav-guides   {--glow-inset:11px 30px 11px 28px;--glow-radius:4px;}
.nav-discord  {--glow-inset:12px 0px 11px 12px;--glow-radius:4px;}


/* TOP NAV FINAL HOVER STYLE
   Shapeless, feathered colour behind the complete word.
   No box, no circle, no visible edge. */
.nav-home::before,
.nav-play::before,
.nav-forums::before,
.nav-store::before,
.nav-vote::before,
.nav-hiscores::before,
.nav-guides::before,
.nav-discord::before{
  border:0;
  border-radius:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(183,77,239,.17) 0%,
      rgba(170,67,226,.145) 28%,
      rgba(151,56,205,.10) 52%,
      rgba(128,43,180,.045) 72%,
      rgba(128,43,180,0) 100%
    );
  box-shadow:none;
  filter:blur(5px);
  transform:scale(1.03, .92);
}

/* Individually measured so the aura covers each COMPLETE word evenly. */
.nav-home     {--glow-inset:10px 20px 10px 20px;}
.nav-play     {--glow-inset:29% 0.8% 27% 27.2%;}
.nav-forums   {--glow-inset:29% -1.95% 27% 32.70%;}
.nav-store    {--glow-inset:10px 18px 10px 18px;}
.nav-vote     {--glow-inset:10px 22px 10px 22px;}
.nav-hiscores {--glow-inset:10px 18px 10px 18px;}
.nav-guides   {--glow-inset:10px 18px 10px 18px;}
.nav-discord  {--glow-inset:10px 14px 10px 14px;}

.nav-home:active::before,
.nav-play:active::before,
.nav-forums:active::before,
.nav-store:active::before,
.nav-vote:active::before,
.nav-hiscores:active::before,
.nav-guides:active::before,
.nav-discord:active::before{
  transform:scale(1.00, .90);
}


/* PLAY NOW fine-tune: slightly brighter than V15, same shapeless fade. */
.nav-play::before{
  background:
    radial-gradient(
      ellipse at center,
      rgba(192,84,247,.205) 0%,
      rgba(178,73,234,.172) 28%,
      rgba(158,62,214,.118) 52%,
      rgba(134,47,187,.052) 72%,
      rgba(128,43,180,0) 100%
    );
}


/* STORE positioning v24 — move the aura 25px right without changing its style. */
.nav-store::before{
  inset:10px 20px 10px 18px;
  transform:translateX(25px) scale(1.03,.92);
}
.nav-store:active::before{
  transform:translateX(25px) scale(1.00,.90);
}


/* VOTE positioning v26 — 20px right from the original position. */
.nav-vote::before{
  transform:translateX(20px) scale(1.03,.92);
}
.nav-vote:active::before{
  transform:translateX(20px) scale(1.00,.90);
}


/* HISCORES positioning v27 — move the aura 10px right without changing its style. */
.nav-hiscores::before{
  transform:translateX(10px) scale(1.03,.92);
}
.nav-hiscores:active::before{
  transform:translateX(10px) scale(1.00,.90);
}


/* V28 — unify all applicable homepage hover effects with the same
   soft, shapeless blurred purple aura used by the top navigation. */

.view-news::before,
.play-button::before,
.hs-overall::before,
.hs-xp::before,
.hs-pvm::before,
.hs-achieve::before,
.view-hiscores::before,
.feature-community::before,
.feature-vote::before,
.feature-store::before,
.feature-guides::before{
  border:0;
  border-radius:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(183,77,239,.17) 0%,
      rgba(170,67,226,.145) 28%,
      rgba(151,56,205,.10) 52%,
      rgba(128,43,180,.045) 72%,
      rgba(128,43,180,0) 100%
    );
  box-shadow:none;
  filter:blur(5px);
  transform:scale(1.03,.92);
}

/* Keep the aura neatly inside each visible control. */
.view-news{
  --glow-inset:6px 18px;
}
.play-button{
  --glow-inset:12px 28px;
}
.view-hiscores{
  --glow-inset:6px 18px;
}

.hs-overall,
.hs-xp,
.hs-pvm,
.hs-achieve{
  --glow-inset:8px;
}

.feature-community,
.feature-vote,
.feature-store,
.feature-guides{
  --glow-inset:18px 26px;
}

/* Preserve the same soft press response without introducing hard shapes. */
.view-news:active::before,
.play-button:active::before,
.hs-overall:active::before,
.hs-xp:active::before,
.hs-pvm:active::before,
.hs-achieve:active::before,
.view-hiscores:active::before,
.feature-community:active::before,
.feature-vote:active::before,
.feature-store:active::before,
.feature-guides:active::before{
  transform:scale(1.00,.90);
}

/* Mobile fallback: keep the artwork intact, but add genuinely usable controls below it. */
.mobile-menu{
  display:none;
  width:min(680px,calc(100% - 24px));
  margin:14px auto 30px;
  padding:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.mobile-menu a{
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  border:1px solid #5e4d35;
  background:
    linear-gradient(rgba(35,29,22,.96),rgba(15,13,11,.98));
  box-shadow:inset 0 0 0 1px #15110e,0 4px 14px rgba(0,0,0,.28);
  color:#dfc688;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible{
  border-color:#9a62bc;
  box-shadow:inset 0 0 16px rgba(122,41,167,.2),0 0 14px rgba(122,41,167,.18);
}
@media(max-width:760px){
  .artboard{
    width:100vw;
  }
  .artboard .hit{display:none}
  .mobile-menu{display:grid}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ------------------ Inner-page shell ------------------ */
.inner-page{
  min-height:100vh;
  background:
    linear-gradient(rgba(4,5,4,.86),rgba(4,5,4,.93)),
    url("../assets/homepage-master.png") top center/cover fixed no-repeat;
}
.site-topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px clamp(16px,4vw,54px);
  background:rgba(8,7,6,.92);
  border-bottom:1px solid #51432f;
  backdrop-filter:blur(8px);
}
.site-topbar .brand{
  font-size:clamp(22px,3vw,34px);
  color:#e4c475;
  text-decoration:none;
  text-shadow:0 2px 10px #000;
}
.site-topbar nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.site-topbar nav a,
.action-button{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border:1px solid #594830;
  background:linear-gradient(#2c251c,#15120f);
  color:#d9c190;
  text-decoration:none;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px #0b0907;
}
.site-topbar nav a:hover,
.action-button:hover{
  border-color:#9b5bc4;
  box-shadow:inset 0 0 15px rgba(137,55,185,.18),0 0 12px rgba(137,55,185,.16);
}
.page-wrap{
  width:min(1100px,calc(100% - 28px));
  margin:48px auto;
}
.page-card{
  border:1px solid #5b4b35;
  background:rgba(17,14,12,.94);
  box-shadow:inset 0 0 0 2px #090807,0 18px 50px rgba(0,0,0,.46);
  padding:clamp(22px,4vw,48px);
}
.page-card h1{
  margin:0 0 12px;
  color:#e2c276;
  font-size:clamp(34px,6vw,64px);
  font-weight:500;
}
.page-card p{line-height:1.6;color:#d1c6b0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.action-button.primary{
  border-color:#7f489f;
  color:#f0d9ff;
  background:linear-gradient(#4b215f,#211127);
}
.notice{
  margin-top:22px;
  padding:14px 16px;
  border-left:3px solid #79479b;
  background:rgba(93,45,121,.12);
  color:#d7c8de;
}

/* Mock hiscores/news lists – ready to be replaced by API data later. */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.tabs button{min-width:120px}
.table-wrap{overflow:auto}
.ranking-table{width:100%;border-collapse:collapse;background:#b98650;color:#24150b}
.ranking-table th,.ranking-table td{padding:12px;border-bottom:1px solid rgba(73,43,18,.28);text-align:left}
.ranking-table th{background:#9d6c3c}
.news-list{display:grid;gap:14px;margin-top:24px}
.news-item{padding:18px;border:1px solid #4e402f;background:#17130f}
.news-item h2{margin:0 0 8px;color:#dfbd71;font-size:22px}
.news-item time{color:#a98b61;font-size:14px}


/* =========================================================
   HISCORES — integration-ready inner page
   ========================================================= */
.hiscores-shell{
  overflow:hidden;
}
.hiscores-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,330px);
  gap:28px;
  align-items:end;
  padding-bottom:24px;
  border-bottom:1px solid rgba(103,83,55,.46);
}
.eyebrow{
  margin:0 0 6px;
  color:#a674c4!important;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
}
.hiscores-intro{
  max-width:720px;
  margin:0!important;
}
.player-search label{
  display:block;
  margin-bottom:7px;
  color:#c7ab75;
  font-size:14px;
}
.search-row{
  display:flex;
  gap:8px;
}
.search-row input{
  min-width:0;
  flex:1;
  min-height:42px;
  padding:9px 12px;
  border:1px solid #5c4b34;
  outline:none;
  background:#0d0b09;
  color:#eadfc9;
}
.search-row input:focus{
  border-color:#8752a6;
  box-shadow:0 0 0 2px rgba(135,82,166,.14);
}

.hiscores-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:26px 0;
}
.hiscore-tab{
  min-width:0;
  min-height:78px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #594830;
  background:linear-gradient(#292219,#15120f);
  color:#d4c3a2;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px #0d0b08;
}
.hiscore-tab:hover,
.hiscore-tab:focus-visible{
  border-color:#8252a0;
  box-shadow:
    inset 0 0 16px rgba(132,54,177,.15),
    0 0 13px rgba(132,54,177,.12);
}
.hiscore-tab.active{
  border-color:#9962b9;
  background:linear-gradient(#34263a,#181216);
  box-shadow:
    inset 0 0 20px rgba(141,60,188,.19),
    0 0 13px rgba(141,60,188,.11);
}
.hiscore-tab strong,
.hiscore-tab small{
  display:block;
}
.hiscore-tab strong{
  color:#e2c77f;
  font-size:15px;
}
.hiscore-tab small{
  margin-top:3px;
  color:#9f927e;
  font-size:12px;
}
.hiscore-tab-icon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:#a47a3c;
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  filter:drop-shadow(0 2px 2px #000);
}
.skull-icon{font-size:30px}
.leaf-icon{
  color:#718b46;
  font-size:36px;
  transform:rotate(-12deg);
}
.bars-icon{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  transform:none;
}
.bars-icon .bar{
  display:block;
  width:5px;
  border:1px solid #b18745;
  background:linear-gradient(180deg,#c89a4f,#76501f);
  box-shadow:
    inset 0 1px 0 rgba(255,225,159,.16),
    0 1px 2px rgba(0,0,0,.55);
}
.bars-icon .bar-1{height:12px;}
.bars-icon .bar-2{height:20px;}
.bars-icon .bar-3{height:29px;}

.ranking-status{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:8px 0 12px;
}
.ranking-status h2{
  margin:0;
  color:#e1c176;
  font-size:25px;
  font-weight:500;
}
.ranking-status p{
  margin:4px 0 0;
  color:#a89c89;
  font-size:14px;
}
.source-badge{
  flex:0 0 auto;
  padding:5px 9px;
  border:1px solid #496448;
  background:rgba(55,91,54,.15);
  color:#a9c5a2;
  font-size:12px;
}
.source-badge.mock{
  border-color:#705937;
  background:rgba(112,89,55,.12);
  color:#c5a978;
}

.hiscores-table-wrap{
  border:1px solid #59462e;
  background:#ad7845;
}
.hiscores-table{
  margin:0;
  min-width:650px;
}
.hiscores-table thead th{
  position:sticky;
  top:0;
  background:#8f6034;
  color:#2a180c;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.hiscores-table tbody tr:nth-child(even){
  background:rgba(255,220,157,.075);
}
.hiscores-table tbody tr:hover{
  background:rgba(255,225,163,.14);
}
.hiscores-table .player-name{
  font-weight:700;
}
.ranking-empty{
  padding:24px;
  margin:0;
  border:1px solid #59462e;
  background:#1a1510;
  color:#b7aa94;
  text-align:center;
}
.hiscores-footnote{
  margin-top:18px;
  padding:13px 15px;
  border-left:3px solid #6d4687;
  background:rgba(87,48,108,.11);
  color:#bfb2c6;
  font-size:13px;
  line-height:1.55;
}
.hiscores-footnote code{
  color:#ddc7e8;
}

.site-topbar nav a.current{
  border-color:#8752a6;
  color:#e2c5f0;
  box-shadow:inset 0 0 14px rgba(131,57,174,.16);
}

@media(max-width:850px){
  .hiscores-heading{
    grid-template-columns:1fr;
    align-items:start;
  }
  .hiscores-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px){
  .hiscores-tabs{grid-template-columns:1fr}
  .search-row{flex-direction:column}
  .ranking-status{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   V30 — Ornate stone border treatment for inner-page UI
   Replaces flat line borders with layered carved-stone framing.
   ========================================================= */

.page-card,
.search-row input,
.action-button,
.hiscore-tab,
.source-badge,
.hiscores-table-wrap,
.ranking-empty,
.hiscores-footnote{
  position:relative;
}

.page-card{
  border:1px solid #4a3a28;
  background:
    linear-gradient(180deg, rgba(25,20,16,.94), rgba(14,11,9,.96)),
    linear-gradient(180deg, #73614c, #2a2119);
  box-shadow:
    inset 0 0 0 1px rgba(129,106,78,.46),
    inset 0 0 0 3px rgba(34,28,22,.88),
    inset 0 0 0 5px rgba(107,90,69,.28),
    0 14px 38px rgba(0,0,0,.42);
}

.page-card::before{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  border:1px solid rgba(120,98,72,.30);
  box-shadow:
    inset 0 0 0 1px rgba(20,16,13,.78),
    inset 0 0 18px rgba(255,220,169,.03);
}

.search-row input{
  border:1px solid #4f402f;
  background:
    linear-gradient(180deg, rgba(16,12,10,.95), rgba(9,7,6,.97));
  box-shadow:
    inset 0 0 0 1px rgba(121,97,70,.26),
    inset 0 0 0 3px rgba(28,22,18,.90),
    0 1px 0 rgba(201,167,111,.05);
}

.search-row input:focus{
  border-color:#6c527f;
  box-shadow:
    inset 0 0 0 1px rgba(121,97,70,.26),
    inset 0 0 0 3px rgba(28,22,18,.90),
    0 0 0 2px rgba(120,79,151,.12),
    0 0 16px rgba(120,79,151,.10);
}

.action-button{
  border:1px solid #5a4630;
  background:
    linear-gradient(180deg, #3a2f25, #211a14);
  box-shadow:
    inset 0 0 0 1px rgba(142,118,84,.35),
    inset 0 0 0 3px rgba(24,19,15,.90),
    inset 0 1px 0 rgba(239,214,162,.08),
    0 6px 16px rgba(0,0,0,.26);
}
.action-button:hover,
.action-button:focus-visible{
  border-color:#74587d;
  box-shadow:
    inset 0 0 0 1px rgba(142,118,84,.35),
    inset 0 0 0 3px rgba(24,19,15,.90),
    inset 0 1px 0 rgba(239,214,162,.08),
    0 0 14px rgba(129,76,163,.13);
}

.hiscore-tab{
  border:1px solid #54412e;
  background:
    linear-gradient(180deg, rgba(42,35,28,.96), rgba(18,15,13,.98)),
    linear-gradient(180deg, #6e5c47, #241d18);
  box-shadow:
    inset 0 0 0 1px rgba(129,105,78,.32),
    inset 0 0 0 3px rgba(23,18,15,.92),
    inset 0 1px 0 rgba(232,208,167,.05),
    0 8px 20px rgba(0,0,0,.25);
}
.hiscore-tab::before{
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  border:1px solid rgba(116,95,70,.22);
  box-shadow:inset 0 0 0 1px rgba(17,13,10,.72);
}
.hiscore-tab:hover,
.hiscore-tab:focus-visible{
  border-color:#6f587d;
  box-shadow:
    inset 0 0 0 1px rgba(129,105,78,.32),
    inset 0 0 0 3px rgba(23,18,15,.92),
    0 0 18px rgba(129,76,163,.14),
    0 8px 20px rgba(0,0,0,.25);
}
.hiscore-tab.active{
  border-color:#7f6392;
  background:
    linear-gradient(180deg, rgba(54,42,58,.96), rgba(21,17,18,.98)),
    linear-gradient(180deg, #79685c, #241d18);
  box-shadow:
    inset 0 0 0 1px rgba(145,121,95,.35),
    inset 0 0 0 3px rgba(23,18,15,.92),
    inset 0 0 22px rgba(121,63,160,.12),
    0 0 18px rgba(129,76,163,.10),
    0 8px 20px rgba(0,0,0,.25);
}

.source-badge{
  border:1px solid #524231;
  background:
    linear-gradient(180deg, rgba(31,24,18,.96), rgba(16,12,10,.98));
  box-shadow:
    inset 0 0 0 1px rgba(129,105,78,.22),
    inset 0 0 0 3px rgba(21,16,13,.90);
}
.source-badge.mock{
  border-color:#614834;
}

.hiscores-table-wrap{
  border:1px solid #5a4732;
  background:
    linear-gradient(180deg, #6f563c, #3f2f22);
  box-shadow:
    inset 0 0 0 1px rgba(148,122,92,.30),
    inset 0 0 0 4px rgba(28,22,18,.86),
    0 12px 28px rgba(0,0,0,.24);
  padding:8px;
}
.hiscores-table{
  border:1px solid #4a3119;
}
.hiscores-table thead th{
  background:
    linear-gradient(180deg, #9a7040, #7b542d);
  box-shadow:
    inset 0 1px 0 rgba(252,234,198,.10),
    inset 0 -1px 0 rgba(58,36,16,.45);
}
.hiscores-table tbody tr{
  background:#b07b48;
}
.hiscores-table tbody tr:nth-child(even){
  background:#a97443;
}
.hiscores-table tbody tr:hover{
  background:#ba8754;
}

.ranking-empty{
  border:1px solid #584430;
  background:
    linear-gradient(180deg, rgba(26,21,16,.96), rgba(15,12,10,.98));
  box-shadow:
    inset 0 0 0 1px rgba(129,105,78,.22),
    inset 0 0 0 4px rgba(24,19,15,.90);
}

.hiscores-footnote{
  border:1px solid #5c4634;
  border-left:0;
  background:
    linear-gradient(180deg, rgba(33,23,38,.88), rgba(20,15,20,.92));
  box-shadow:
    inset 0 0 0 1px rgba(123,96,142,.17),
    inset 0 0 0 4px rgba(20,15,18,.88);
}
.hiscores-footnote::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background:
    linear-gradient(180deg, #8a5bb0, #55326d);
  box-shadow:
    inset -1px 0 0 rgba(236,214,255,.08),
    inset 1px 0 0 rgba(39,22,52,.65);
}


/* =========================================================
   V31 — VISIBLE carved-stone frames
   Intentionally chunky and obvious, closer to the homepage UI.
   ========================================================= */

:root{
  --stone-light:#847a69;
  --stone-mid:#5f574b;
  --stone-dark:#2c2822;
  --stone-black:#11100d;
  --stone-inner:#191611;
}

/* Large outer frame */
.page-card{
  border:8px solid var(--stone-mid);
  border-top-color:#8d8372;
  border-left-color:#746b5e;
  border-right-color:#373229;
  border-bottom-color:#26231d;
  background:
    linear-gradient(180deg, rgba(24,20,16,.97), rgba(12,10,8,.98));
  box-shadow:
    inset 0 0 0 2px #1d1a15,
    inset 0 0 0 5px rgba(113,102,85,.35),
    inset 0 0 24px rgba(0,0,0,.55),
    0 0 0 2px #0b0a08,
    0 18px 44px rgba(0,0,0,.48);
}
.page-card::before{
  inset:12px;
  border:2px solid rgba(126,113,92,.38);
  box-shadow:
    inset 0 0 0 2px rgba(15,13,11,.9),
    inset 0 0 18px rgba(255,235,194,.025);
}

/* Chunky stone tabs */
.hiscore-tab{
  border:5px solid var(--stone-mid);
  border-top-color:#877d6c;
  border-left-color:#72695c;
  border-right-color:#343028;
  border-bottom-color:#25221d;
  background:
    linear-gradient(180deg, #2b251f 0%, #18140f 100%);
  box-shadow:
    inset 0 0 0 2px #17130f,
    inset 0 0 0 4px rgba(112,100,80,.22),
    0 4px 0 #0d0b09,
    0 8px 18px rgba(0,0,0,.28);
}
.hiscore-tab::before{
  inset:5px;
  border:1px solid rgba(138,124,101,.28);
  box-shadow:
    inset 0 0 0 1px #15120e;
}
.hiscore-tab.active{
  border-top-color:#958a78;
  border-left-color:#7c7262;
  border-right-color:#3e3740;
  border-bottom-color:#2a242d;
  background:linear-gradient(180deg,#342b37,#191417);
}
.hiscore-tab:hover,
.hiscore-tab:focus-visible{
  border-top-color:#968a79;
  border-left-color:#7f7464;
  border-right-color:#413846;
  border-bottom-color:#2b252f;
}

/* Stone-framed search control */
.search-row input{
  border:4px solid #5d5549;
  border-top-color:#7d7465;
  border-left-color:#6b6256;
  border-right-color:#332f28;
  border-bottom-color:#25221d;
  background:#0c0a08;
  box-shadow:
    inset 0 0 0 2px #17130f,
    0 3px 0 #0b0907;
}

/* Stone buttons */
.action-button{
  border:4px solid #5f574b;
  border-top-color:#857b6a;
  border-left-color:#6f6659;
  border-right-color:#343028;
  border-bottom-color:#27231e;
  background:linear-gradient(#352e26,#1b1712);
  box-shadow:
    inset 0 0 0 2px #17130f,
    0 4px 0 #0c0a08,
    0 8px 16px rgba(0,0,0,.25);
}
.action-button.primary{
  border-top-color:#8a7d90;
  border-left-color:#74677b;
  border-right-color:#3d3344;
  border-bottom-color:#2a222f;
}

/* Status badge gets a small stone plaque */
.source-badge,
.source-badge.mock{
  border:4px solid #5d5549;
  border-top-color:#7d7465;
  border-left-color:#6a6154;
  border-right-color:#332f28;
  border-bottom-color:#26221d;
  background:#16120e;
  box-shadow:
    inset 0 0 0 2px #0f0d0a,
    0 3px 0 #0b0907;
}

/* Main ranking table gets a proper stone surround */
.hiscores-table-wrap{
  border:8px solid #5f574b;
  border-top-color:#8a806e;
  border-left-color:#736a5d;
  border-right-color:#353028;
  border-bottom-color:#27231e;
  padding:10px;
  background:#221c16;
  box-shadow:
    inset 0 0 0 2px #16120f,
    inset 0 0 0 5px rgba(117,104,84,.24),
    0 5px 0 #0b0907,
    0 14px 26px rgba(0,0,0,.28);
}
.hiscores-table{
  border:2px solid #362817;
}

/* Empty state / footer note */
.ranking-empty,
.hiscores-footnote{
  border:6px solid #5d5549;
  border-top-color:#817665;
  border-left-color:#6c6356;
  border-right-color:#342f28;
  border-bottom-color:#26221d;
  box-shadow:
    inset 0 0 0 2px #15110e,
    inset 0 0 0 4px rgba(115,101,81,.18),
    0 4px 0 #0b0907;
}
.hiscores-footnote::before{
  left:7px;
  top:7px;
  bottom:7px;
  width:5px;
}

/* Add subtle chipped/stone texture to the obvious frames */
.page-card,
.hiscore-tab,
.action-button,
.source-badge,
.hiscores-table-wrap,
.ranking-empty,
.hiscores-footnote{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.06)),
    repeating-linear-gradient(
      93deg,
      rgba(255,255,255,.018) 0 2px,
      transparent 2px 11px,
      rgba(0,0,0,.018) 11px 13px
    );
  background-blend-mode:overlay,normal;
}


/* =========================================================
   V32 — use the supplied stone strip image as the main page border
   ========================================================= */

.page-card{
  position:relative;
  padding-left:82px;
  padding-right:82px;
  border:0;
  background:
    linear-gradient(180deg, rgba(18,15,12,.97), rgba(11,9,8,.98));
  box-shadow:
    inset 0 0 0 2px #191611,
    inset 0 0 0 6px rgba(92,81,68,.22),
    0 0 0 2px #0a0908,
    0 18px 44px rgba(0,0,0,.48);
  overflow:hidden;
}

/* Use the supplied stone strip image itself as the vertical side borders. */
.page-card::before,
.page-card::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:56px;
  pointer-events:none;
  z-index:0;
  background-image:url("assets/stone-side-border.png");
  background-repeat:repeat-y;
  background-size:56px auto;
  background-position:center top;
  opacity:.98;
}
.page-card::before{
  left:0;
}
.page-card::after{
  right:0;
  transform:scaleX(-1);
}

/* Add top and bottom carved stone rails so the image-strip sides feel intentional. */
.page-card{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06)),
    linear-gradient(180deg, rgba(90,78,62,.95), rgba(46,39,31,.96) 24px, rgba(19,15,12,.0) 24px, rgba(19,15,12,.0) calc(100% - 24px), rgba(37,31,25,.96) calc(100% - 24px), rgba(20,17,14,.98) 100%),
    linear-gradient(180deg, rgba(18,15,12,.97), rgba(11,9,8,.98));
  background-repeat:no-repeat;
}

/* Keep all direct card content above the image borders. */
.page-card > *{
  position:relative;
  z-index:1;
}

/* The old bulky fake-stone frames should be toned down now that the real side border is present. */
.hiscore-tab{
  border-width:3px;
}
.hiscores-table-wrap{
  border-width:5px;
}
.ranking-empty,
.hiscores-footnote{
  border-width:4px;
}
.action-button,
.source-badge,
.search-row input{
  border-width:3px;
}

@media(max-width:900px){
  .page-card{
    padding-left:68px;
    padding-right:68px;
  }
  .page-card::before,
  .page-card::after{
    width:46px;
    background-size:46px auto;
  }
}

@media(max-width:640px){
  .page-card{
    padding-left:24px;
    padding-right:24px;
  }
  .page-card::before,
  .page-card::after{
    display:none;
  }
}

/* =========================================================
   V33 — cleaner supplied stone border strip
   ========================================================= */
.page-card{
  padding-left:72px;
  padding-right:72px;
}

.page-card::before,
.page-card::after{
  width:52px;
  background-image:url("assets/stone-side-border.png");
  background-repeat:repeat-y;
  background-size:52px auto;
  background-position:center top;
  opacity:1;
}

.page-card::before{ left:0; }
.page-card::after{
  right:0;
  transform:scaleX(-1);
}

@media(max-width:900px){
  .page-card{
    padding-left:62px;
    padding-right:62px;
  }
  .page-card::before,
  .page-card::after{
    width:44px;
    background-size:44px auto;
  }
}


/* =========================================================
   V34 — full image-based carved-stone border
   Uses the same supplied stone artwork on all four edges.
   ========================================================= */

.page-card{
  position:relative;
  padding:74px 76px;
  border:0;
  background:
    linear-gradient(180deg, rgba(18,15,12,.975), rgba(10,8,7,.985));
  box-shadow:
    inset 0 0 0 2px #15120f,
    0 18px 44px rgba(0,0,0,.48);
  overflow:hidden;
}

/* Side rails */
.page-card::before,
.page-card::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:54px;
  pointer-events:none;
  z-index:0;
  background-image:url("assets/stone-border-vertical.png");
  background-repeat:repeat-y;
  background-size:54px auto;
  background-position:center top;
  opacity:1;
}
.page-card::before{ left:0; }
.page-card::after{
  right:0;
  transform:scaleX(-1);
}

/* Top and bottom rails use the exact same stone strip rotated horizontally. */
.hiscores-shell::before,
.hiscores-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:54px;
  pointer-events:none;
  z-index:0;
  background-image:url("assets/stone-border-horizontal.png");
  background-repeat:repeat-x;
  background-size:auto 54px;
  background-position:left center;
  opacity:1;
}
.hiscores-shell::before{ top:0; }
.hiscores-shell::after{
  bottom:0;
  transform:scaleY(-1);
}

/* Ensure the page content stays above all four stone rails. */
.hiscores-shell > *{
  position:relative;
  z-index:1;
}

/* Dark corner backing so the overlapping rails read as a continuous carved frame. */
.hiscores-shell{
  isolation:isolate;
}
.hiscores-shell .hiscores-heading{
  margin-top:0;
}

@media(max-width:900px){
  .page-card{
    padding:64px 64px;
  }
  .page-card::before,
  .page-card::after{
    width:46px;
    background-size:46px auto;
  }
  .hiscores-shell::before,
  .hiscores-shell::after{
    height:46px;
    background-size:auto 46px;
  }
}

@media(max-width:640px){
  .page-card{
    padding:28px 22px;
  }
  .page-card::before,
  .page-card::after,
  .hiscores-shell::before,
  .hiscores-shell::after{
    display:none;
  }
}


/* =========================================================
   V35 — WORKING four-sided image frame
   Uses four real rail elements (not competing pseudo-elements).
   ========================================================= */

.page-card{
  position:relative;
  padding:72px 78px;
  border:0;
  overflow:hidden;
}

/* Disable older pseudo-element frame attempts so they cannot conflict. */
.page-card::before,
.page-card::after,
.hiscores-shell::before,
.hiscores-shell::after{
  display:none !important;
  content:none !important;
}

.stone-frame-rail{
  position:absolute;
  display:block;
  pointer-events:none;
  z-index:0;
  opacity:1;
  background-repeat:repeat;
  background-position:center;
}

.rail-left,
.rail-right{
  top:0;
  bottom:0;
  width:56px;
  background-image:url("assets/stone-frame-vertical.png");
  background-repeat:repeat-y;
  background-size:56px auto;
  background-position:center top;
}
.rail-left{ left:0; }
.rail-right{
  right:0;
  transform:scaleX(-1);
}

.rail-top,
.rail-bottom{
  left:0;
  right:0;
  height:56px;
  background-image:url("assets/stone-frame-horizontal.png");
  background-repeat:repeat-x;
  background-size:auto 56px;
  background-position:left center;
}
.rail-top{ top:0; }
.rail-bottom{
  bottom:0;
  transform:scaleY(-1);
}

/* Corner masks merge the overlapping rails into one continuous dark-stone frame. */
.hiscores-shell{
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(18,15,12,.975), rgba(10,8,7,.985));
  box-shadow:
    inset 0 0 0 2px #15120f,
    0 18px 44px rgba(0,0,0,.48);
}

.hiscores-shell > *:not(.stone-frame-rail){
  position:relative;
  z-index:1;
}

@media(max-width:900px){
  .page-card{
    padding:62px 66px;
  }
  .rail-left,
  .rail-right{
    width:46px;
    background-size:46px auto;
  }
  .rail-top,
  .rail-bottom{
    height:46px;
    background-size:auto 46px;
  }
}

@media(max-width:640px){
  .page-card{
    padding:28px 22px;
  }
  .stone-frame-rail{
    display:none;
  }
}


/* =========================================================
   V36 — blended dark stone frame
   The border artwork has been re-graded to remove the harsh
   white/silver lines and blend into the Eternal 317 dungeon.
   ========================================================= */

.stone-frame-rail{
  opacity:.92;
  filter:
    brightness(.82)
    contrast(.96)
    saturate(.88);
}

/* Add a soft inward shadow so the frame merges into the content instead
   of looking pasted on top. */
.hiscores-shell{
  box-shadow:
    inset 0 0 0 2px #15120f,
    inset 0 0 38px rgba(0,0,0,.52),
    0 18px 44px rgba(0,0,0,.48);
}

/* Darken the meeting point between frame and content. */
.hiscores-shell::selection{
  background:rgba(109,64,137,.34);
}


/* =========================================================
   V37 — seamless stone frame
   Removes straight seam lines between the stone artwork and content.
   ========================================================= */

.page-card,
.hiscores-shell{
  border:0 !important;
}

/* Remove the thin inset outline that was visible next to the stone rails. */
.hiscores-shell{
  box-shadow:
    0 18px 44px rgba(0,0,0,.46) !important;
}

/* Slight overlap + feathered artwork removes the hard join line. */
.rail-left{
  left:-3px;
  width:62px;
  background-size:62px auto;
}
.rail-right{
  right:-3px;
  width:62px;
  background-size:62px auto;
}
.rail-top{
  top:-3px;
  height:62px;
  background-size:auto 62px;
}
.rail-bottom{
  bottom:-3px;
  height:62px;
  background-size:auto 62px;
}

.stone-frame-rail{
  opacity:.95;
  filter:
    brightness(.80)
    contrast(.94)
    saturate(.86);
}

/* Soft inner falloff instead of a straight border line. */
.hiscores-shell{
  background:
    radial-gradient(ellipse at center,
      rgba(18,15,12,.985) 0%,
      rgba(16,13,11,.985) 72%,
      rgba(10,8,7,.99) 100%);
}

@media(max-width:900px){
  .rail-left,
  .rail-right{
    width:52px;
    background-size:52px auto;
  }
  .rail-top,
  .rail-bottom{
    height:52px;
    background-size:auto 52px;
  }
}


/* =========================================================
   NEWS & UPDATES — integration-ready inner page
   ========================================================= */

.news-shell{
  position:relative;
  isolation:isolate;
}
.news-shell > *:not(.stone-frame-rail){
  position:relative;
  z-index:1;
}
.news-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,330px);
  gap:28px;
  align-items:end;
  padding-bottom:24px;
  border-bottom:1px solid rgba(103,83,55,.34);
}
.news-heading > div > p:last-child{
  max-width:650px;
  margin-bottom:0;
}
.news-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0 16px;
}
.news-filter{
  min-height:42px;
  padding:8px 15px;
  border:3px solid #5a5145;
  border-top-color:#7d7364;
  border-left-color:#6a6154;
  border-right-color:#342f28;
  border-bottom-color:#25221d;
  background:linear-gradient(#2a241d,#17130f);
  color:#cdbb98;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px #16120e,0 3px 0 #0b0907;
}
.news-filter:hover,
.news-filter:focus-visible{
  border-top-color:#8a7b8f;
  color:#ead9f2;
}
.news-filter.active{
  border-top-color:#8e7b96;
  border-left-color:#74677c;
  background:linear-gradient(#35293a,#191417);
  color:#e4c9ef;
}
.news-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:34px;
  margin-bottom:10px;
  color:#a89b87;
  font-size:14px;
}
.news-feed{
  display:grid;
  gap:14px;
}
.news-article{
  position:relative;
  padding:22px 24px;
  border:5px solid #5b5347;
  border-top-color:#807665;
  border-left-color:#6c6356;
  border-right-color:#342f28;
  border-bottom-color:#26221d;
  background:
    linear-gradient(180deg,rgba(28,23,18,.98),rgba(15,12,10,.99));
  box-shadow:
    inset 0 0 0 2px #15110e,
    inset 0 0 0 4px rgba(113,100,80,.14),
    0 6px 0 #0b0907,
    0 12px 24px rgba(0,0,0,.20);
}
.news-article-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#9e8c73;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.news-category{
  color:#ad7dc5;
}
.news-article h2{
  margin:9px 0 7px;
  color:#e0be70;
  font-size:clamp(23px,3vw,31px);
  font-weight:500;
}
.news-summary{
  margin:0;
  color:#cbbda5!important;
}
.news-article details{
  margin-top:14px;
  border-top:1px solid rgba(109,88,61,.26);
  padding-top:11px;
}
.news-article summary{
  display:inline-block;
  cursor:pointer;
  color:#d7bd82;
  user-select:none;
}
.news-body{
  padding-top:8px;
}
.news-body p{
  margin:8px 0!important;
}
.news-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:24px 0 2px;
}
.news-pagination .action-button:disabled{
  opacity:.38;
  cursor:not-allowed;
}
@media(max-width:850px){
  .news-heading{
    grid-template-columns:1fr;
    align-items:start;
  }
}


/* =========================================================
   ACCOUNT — integration-ready authentication frontend
   ========================================================= */

.account-shell{
  position:relative;
  isolation:isolate;
}
.account-shell > *:not(.stone-frame-rail){
  position:relative;
  z-index:1;
}
.account-heading{
  padding-bottom:22px;
  border-bottom:1px solid rgba(103,83,55,.34);
}
.account-heading h1{
  margin-bottom:8px;
}
.account-heading p:last-child{
  margin:0;
}
.account-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0;
}
.account-tab{
  min-height:44px;
  padding:9px 18px;
  border:3px solid #5a5145;
  border-top-color:#7d7364;
  border-left-color:#6a6154;
  border-right-color:#342f28;
  border-bottom-color:#25221d;
  background:linear-gradient(#2a241d,#17130f);
  color:#cdbb98;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px #16120e,0 3px 0 #0b0907;
}
.account-tab:hover,
.account-tab:focus-visible{
  border-top-color:#8a7b8f;
  color:#ead9f2;
}
.account-tab.active{
  border-top-color:#8e7b96;
  border-left-color:#74677c;
  background:linear-gradient(#35293a,#191417);
  color:#e4c9ef;
}

.account-panel{
  display:none;
}
.account-panel.active{
  display:block;
}
.reset-panel[hidden]{
  display:none;
}

.auth-card{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);
  gap:32px;
  padding:26px;
  border:5px solid #5b5347;
  border-top-color:#807665;
  border-left-color:#6c6356;
  border-right-color:#342f28;
  border-bottom-color:#26221d;
  background:linear-gradient(180deg,rgba(28,23,18,.98),rgba(15,12,10,.99));
  box-shadow:
    inset 0 0 0 2px #15110e,
    inset 0 0 0 4px rgba(113,100,80,.14),
    0 6px 0 #0b0907,
    0 12px 24px rgba(0,0,0,.20);
}
.auth-copy h2,
.dashboard-hero h2,
.dashboard-card h3{
  color:#e0be70;
  font-weight:500;
}
.auth-copy h2{
  margin:0 0 8px;
  font-size:30px;
}
.auth-copy p{
  margin:0!important;
}
.auth-form{
  display:grid;
  gap:16px;
}
.auth-form.compact{
  gap:12px;
}
.auth-form label{
  display:grid;
  gap:7px;
  color:#ccb786;
  font-size:14px;
}
.auth-form label small{
  color:#8e826f;
  font-size:12px;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="search"]{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:3px solid #5d5549;
  border-top-color:#7d7465;
  border-left-color:#6b6256;
  border-right-color:#332f28;
  border-bottom-color:#25221d;
  background:#0c0a08;
  color:#eadfc9;
  outline:none;
  box-shadow:inset 0 0 0 2px #17130f,0 3px 0 #0b0907;
}
.auth-form input:focus{
  border-top-color:#89778f;
  border-left-color:#74657a;
  box-shadow:
    inset 0 0 0 2px #17130f,
    0 0 12px rgba(128,74,161,.14);
}
.password-field{
  position:relative;
  display:block;
}
.password-field input{
  padding-right:64px!important;
}
.password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#bfa479;
  cursor:pointer;
}
.auth-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.text-button{
  border:0;
  background:transparent;
  color:#b998ca;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.agreement-row{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:flex-start;
  gap:10px!important;
  color:#bcb09d!important;
}
.agreement-row input{
  margin-top:3px;
}

.account-message{
  margin:0 0 18px;
  padding:12px 14px;
  border:3px solid #5a5145;
  background:#17130f;
  color:#c8baa2;
}
.account-message[data-type="success"]{
  border-color:#4d6645;
  color:#b9d1ad;
}
.account-message[data-type="error"]{
  border-color:#764842;
  color:#d7aca5;
}

.dashboard-content{
  display:grid;
  gap:18px;
}
.dashboard-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px;
  border:5px solid #5b5347;
  border-top-color:#807665;
  border-left-color:#6c6356;
  border-right-color:#342f28;
  border-bottom-color:#26221d;
  background:linear-gradient(180deg,rgba(28,23,18,.98),rgba(15,12,10,.99));
  box-shadow:inset 0 0 0 2px #15110e,0 6px 0 #0b0907;
}
.dashboard-hero h2{
  margin:4px 0 4px;
  font-size:32px;
}
.dashboard-hero p{
  margin:0!important;
}
.account-status{
  padding:7px 11px;
  border:3px solid #4f6846;
  background:#141b12;
  color:#b6d3ad;
}
.account-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.account-stat,
.dashboard-card{
  padding:18px;
  border:4px solid #5a5145;
  border-top-color:#7b7162;
  border-left-color:#675f53;
  border-right-color:#332e28;
  border-bottom-color:#25211c;
  background:linear-gradient(#251f19,#14110e);
  box-shadow:inset 0 0 0 2px #15110e,0 4px 0 #0b0907;
}
.account-stat span{
  display:block;
  color:#998b75;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.account-stat strong{
  display:block;
  margin-top:6px;
  color:#dfbf78;
  font-size:24px;
  font-weight:500;
}
.dashboard-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.dashboard-card h3{
  margin:0 0 12px;
  font-size:22px;
}
.action-button.danger{
  border-top-color:#75514c;
  border-left-color:#654440;
  background:linear-gradient(#3b211e,#1b1110);
  color:#d8aaa4;
}

@media(max-width:850px){
  .auth-card{
    grid-template-columns:1fr;
  }
  .account-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-columns{
    grid-template-columns:1fr;
  }
}
@media(max-width:520px){
  .account-tabs{
    display:grid;
    grid-template-columns:1fr;
  }
  .account-stat-grid{
    grid-template-columns:1fr;
  }
  .dashboard-hero{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   PLAY / DOWNLOAD — integration-ready frontend
   ========================================================= */

.play-shell{
  position:relative;
  isolation:isolate;
}
.play-shell > *:not(.stone-frame-rail){
  position:relative;
  z-index:1;
}
.play-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(103,83,55,.34);
}
.play-heading h1{
  margin-bottom:8px;
}
.play-heading p:last-child{
  margin:0;
  max-width:650px;
}
.play-heading-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.play-status-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:16px;
  margin:26px 0;
}
.server-status-card,
.download-card,
.play-step{
  border:5px solid #5b5347;
  border-top-color:#807665;
  border-left-color:#6c6356;
  border-right-color:#342f28;
  border-bottom-color:#26221d;
  background:linear-gradient(180deg,rgba(28,23,18,.98),rgba(15,12,10,.99));
  box-shadow:
    inset 0 0 0 2px #15110e,
    inset 0 0 0 4px rgba(113,100,80,.14),
    0 6px 0 #0b0907,
    0 12px 24px rgba(0,0,0,.20);
}
.server-status-card{
  padding:22px;
}
.status-card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:15px;
  border-bottom:1px solid rgba(111,89,62,.25);
  color:#d8c69f;
}
.status-card-heading > div{
  display:flex;
  align-items:center;
  gap:9px;
}
.status-light{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#6c6256;
  box-shadow:0 0 8px rgba(108,98,86,.20);
}
.status-light.online{
  background:#6e9f5d;
  box-shadow:0 0 10px rgba(110,159,93,.35);
}
.status-light.offline{
  background:#9d554e;
  box-shadow:0 0 10px rgba(157,85,78,.30);
}
.status-refresh{
  border:0;
  background:transparent;
  color:#a886ba;
  cursor:pointer;
}
.status-refresh:disabled{
  opacity:.5;
  cursor:wait;
}
.server-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.server-stat-grid > div{
  padding:13px;
  border:3px solid #50483d;
  background:#17130f;
  box-shadow:inset 0 0 0 1px #0e0c09;
}
.server-stat-grid span{
  display:block;
  color:#918471;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.server-stat-grid strong{
  display:block;
  margin-top:5px;
  color:#dfbf78;
  font-size:20px;
  font-weight:500;
}
.status-updated{
  margin:14px 0 0!important;
  color:#7f7567!important;
  font-size:12px;
}

.download-card{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:20px;
  padding:22px;
}
.download-icon{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border:5px solid #5b5347;
  border-top-color:#827667;
  border-left-color:#6e6356;
  border-right-color:#342f28;
  border-bottom-color:#26221d;
  background:#17130f;
  color:#a479bd;
  font-size:48px;
  line-height:1;
  box-shadow:inset 0 0 0 2px #0f0d0a;
}
.download-copy h2{
  margin:3px 0 6px;
  color:#dfbf78;
  font-size:28px;
  font-weight:500;
}
.download-copy > p:not(.eyebrow):not(.download-note){
  margin:0!important;
}
.client-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 18px;
  margin:18px 0;
}
.client-meta div{
  min-width:0;
}
.client-meta dt{
  color:#8f826e;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.client-meta dd{
  margin:4px 0 0;
  color:#cdbb99;
  overflow-wrap:anywhere;
}
.download-actions{
  display:flex;
}
.download-client-button.disabled{
  opacity:.48;
  cursor:not-allowed;
}
.download-note{
  margin:10px 0 0!important;
  color:#807568!important;
  font-size:12px;
}

.getting-started{
  margin:28px 0;
}
.section-title-row h2{
  margin:3px 0 12px;
  color:#dfbf78;
  font-size:28px;
  font-weight:500;
}
.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.play-step{
  position:relative;
  padding:20px;
}
.step-number{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:3px solid #665646;
  background:#15110e;
  color:#b894c9;
  font-weight:700;
}
.play-step h3{
  margin:14px 0 7px;
  color:#d9ba74;
  font-size:20px;
  font-weight:500;
}
.play-step p{
  margin:0 0 12px!important;
}
.text-link{
  color:#b993c9;
  text-underline-offset:3px;
}

.play-message{
  margin:0 0 18px;
  padding:12px 14px;
  border:3px solid #5a5145;
  background:#17130f;
  color:#c8baa2;
}

@media(max-width:850px){
  .play-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .play-heading-actions{
    justify-content:flex-start;
  }
  .play-status-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .download-card{
    grid-template-columns:1fr;
  }
  .steps-grid{
    grid-template-columns:1fr;
  }
  .client-meta{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   GUIDES & HELP — fleshed-out functional page
   ========================================================= */

.guides-shell{
  position:relative;
  isolation:isolate;
}
.guides-shell > *:not(.stone-frame-rail){
  position:relative;
  z-index:1;
}
.guides-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,330px);
  gap:28px;
  align-items:end;
  padding-bottom:24px;
  border-bottom:1px solid rgba(103,83,55,.34);
}
.guides-heading p:last-child{
  margin-bottom:0;
  max-width:700px;
}
.guides-layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:18px;
  margin-top:24px;
}
.guides-sidebar{
  align-self:start;
  display:grid;
  gap:8px;
}
#guideCategoryList{
  display:grid;
  gap:8px;
}
.guide-category{
  width:100%;
  min-height:44px;
  padding:9px 12px;
  border:3px solid #544b3f;
  border-top-color:#766c5d;
  border-left-color:#635b50;
  border-right-color:#312d27;
  border-bottom-color:#24211c;
  background:linear-gradient(#28221b,#15120f);
  color:#c6b591;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px #13100d,0 3px 0 #0b0907;
}
.guide-category:hover,
.guide-category:focus-visible{
  color:#ead8ef;
  border-top-color:#87788f;
}
.guide-category.active{
  color:#e6cbed;
  border-top-color:#8a7894;
  border-left-color:#73647c;
  background:linear-gradient(#332839,#181418);
}
.guides-help-box{
  margin-top:8px;
  padding:15px;
  border:4px solid #51483c;
  border-top-color:#74695a;
  border-left-color:#60584c;
  border-right-color:#302b25;
  border-bottom-color:#231f1b;
  background:#17130f;
  box-shadow:inset 0 0 0 2px #0f0d0a;
}
.guides-help-box p:last-child{
  margin:0!important;
  font-size:13px;
}

.guides-main{
  min-width:0;
}
.guide-index-topline{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.guide-index-topline h2,
.faq-section h2,
.guide-article-heading h2{
  margin:0;
  color:#dfbf78;
  font-weight:500;
}
.guide-index-topline h2{
  font-size:28px;
}
.guide-index-topline p{
  margin:4px 0 0!important;
  color:#8f8371!important;
  font-size:13px;
}

.featured-guides{
  margin-bottom:22px;
}
.featured-guide-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.featured-guide-card{
  min-width:0;
  min-height:150px;
  padding:17px;
  border:4px solid #5a5145;
  border-top-color:#7a7061;
  border-left-color:#675e52;
  border-right-color:#332e28;
  border-bottom-color:#25211c;
  background:linear-gradient(#282119,#15110e);
  color:#c8b99e;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px #14110e,0 4px 0 #0b0907;
}
.featured-guide-card:hover,
.featured-guide-card:focus-visible{
  border-top-color:#887792;
  box-shadow:
    inset 0 0 0 2px #14110e,
    inset 0 0 18px rgba(126,70,156,.10),
    0 4px 0 #0b0907;
}
.featured-guide-card span{
  color:#a878bd;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.featured-guide-card strong{
  display:block;
  margin:7px 0;
  color:#dfbf78;
  font-size:19px;
  font-weight:500;
}
.featured-guide-card small{
  display:block;
  color:#a89c89;
  line-height:1.45;
}

.guide-card-list{
  display:grid;
  gap:10px;
}
.guide-list-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border:4px solid #554c40;
  border-top-color:#786e5f;
  border-left-color:#645c50;
  border-right-color:#312d27;
  border-bottom-color:#24201c;
  background:linear-gradient(#251f19,#14110e);
  box-shadow:inset 0 0 0 2px #13100d,0 4px 0 #0b0907;
}
.guide-card-copy{
  min-width:0;
}
.guide-card-category{
  color:#a879bd;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.guide-list-card h3{
  margin:5px 0 5px;
  color:#dbbb75;
  font-size:20px;
  font-weight:500;
}
.guide-list-card p{
  margin:0!important;
}
.guide-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}
.guide-tags span{
  padding:3px 6px;
  border:1px solid #4c4032;
  background:#100d0a;
  color:#8e816e;
  font-size:10px;
}
.guide-open-button{
  flex:0 0 auto;
}

.faq-section{
  margin-top:30px;
}
.faq-section h2{
  font-size:26px;
}
.faq-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.faq-item{
  border:4px solid #51483d;
  border-top-color:#746a5a;
  border-left-color:#61584d;
  border-right-color:#302c26;
  border-bottom-color:#231f1b;
  background:#17130f;
  box-shadow:inset 0 0 0 2px #0f0d0a;
}
.faq-item summary{
  padding:13px 15px;
  color:#d2b87d;
  cursor:pointer;
}
.faq-item p{
  margin:0!important;
  padding:0 15px 15px;
}

.guide-article-view{
  max-width:820px;
  margin:0 auto;
}
.guide-back-button{
  margin-bottom:18px;
}
.guide-article-heading{
  padding-bottom:20px;
  border-bottom:1px solid rgba(103,83,55,.28);
}
.guide-article-heading h2{
  font-size:clamp(30px,5vw,46px);
}
.guide-article-heading p:last-child{
  margin-bottom:0;
}
.guide-article-section{
  padding:22px 0;
  border-bottom:1px solid rgba(103,83,55,.22);
}
.guide-article-section:last-child{
  border-bottom:0;
}
.guide-article-section h3{
  margin:0 0 10px;
  color:#d8b974;
  font-size:23px;
  font-weight:500;
}
.guide-article-section p{
  margin:9px 0!important;
}
.guide-article-section ul{
  margin:10px 0 0;
  padding-left:22px;
  color:#c9bda8;
  line-height:1.65;
}
.guide-article-section li + li{
  margin-top:5px;
}

@media(max-width:900px){
  .guides-heading{
    grid-template-columns:1fr;
    align-items:start;
  }
  .guides-layout{
    grid-template-columns:1fr;
  }
  .guides-sidebar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #guideCategoryList{
    display:contents;
  }
  .guides-help-box{
    grid-column:1/-1;
  }
}
@media(max-width:720px){
  .featured-guide-grid{
    grid-template-columns:1fr;
  }
  .guide-list-card{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(max-width:520px){
  .guides-sidebar{
    grid-template-columns:1fr;
  }
  .guide-index-topline{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   V43 — LIVE HOMEPAGE HISCORES
   Weekly XP is the default; the four icon buttons swap top 5
   without leaving the homepage.
   ========================================================= */

.home-hiscores-widget{
  position:absolute;
  left:68.75%;
  top:48.828125%;
  width:23.372396%;
  height:22.949219%;
  z-index:8;
  pointer-events:none;
  container-type:inline-size;
}

.home-hiscores-table{
  width:100%;
  height:100%;
  color:#261608;
  font-family:Georgia,"Times New Roman",serif;
  background:url("assets/homepage-hiscores-parchment-clean.png") center/100% 100% no-repeat;
  text-shadow:0 1px 0 rgba(255,224,166,.18);
  overflow:hidden;
}

.home-hiscores-head,
.home-hiscores-list li{
  display:grid;
  grid-template-columns:13% 55% 32%;
  align-items:center;
}

.home-hiscores-head{
  height:16%;
  padding:0 4.4%;
  font-size:3.45cqw;
  font-weight:700;
  line-height:1;
  border-bottom:1px solid rgba(69,42,18,.33);
}

.home-hiscores-head span:last-child,
.home-value{
  text-align:right;
}

.home-hiscores-list{
  list-style:none;
  margin:0;
  padding:0;
  height:84%;
  transition:opacity .10s ease;
}

.home-hiscores-list.loading{
  opacity:.45;
}

.home-hiscores-list li{
  height:20%;
  padding:0 4.4%;
  font-size:4.9cqw;
  line-height:1;
  border-bottom:1px solid rgba(70,42,18,.30);
}

.home-hiscores-list li:last-child{
  border-bottom:0;
}

.home-rank{
  padding-left:2px;
}

.home-player{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding-right:5px;
}

.home-value{
  white-space:nowrap;
  font-size:.88em;
}

.home-hiscores-empty{
  grid-template-columns:1fr!important;
  height:100%!important;
  place-items:center;
  text-align:center;
}

/* Category icons remain the same exact homepage controls, but now they are buttons. */
.home-hiscore-tab{
  appearance:none;
  -webkit-appearance:none;
}

/* A selected category receives only a faint retained aura, matching the homepage language. */
.home-hiscore-tab.active::before{
  opacity:.46;
}

/* Keep the four icon controls above the live table layer. */
.hs-overall,
.hs-xp,
.hs-pvm,
.hs-achieve{
  z-index:11;
}


/* =========================================================
   V57 — exact approved Weekly XP leaderboard artwork
   ========================================================= */

.home-hiscores-widget{
  overflow:visible;
}

.home-weekly-exact,
.home-weekly-names{
  display:none;
}

.home-hiscores-widget.weekly-mode .home-weekly-exact{
  display:block;
  position:absolute;
  inset:0;
  background-image:url("assets/homepage-weekly-leaderboard-exact.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  pointer-events:none;
}

.home-hiscores-widget.weekly-mode .home-weekly-names{
  display:block;
  position:absolute;
  inset:0;
  list-style:none;
  margin:0;
  padding:0;
  pointer-events:none;
  color:#171008;
  font-family:Georgia,"Times New Roman",serif;
  z-index:1;
}

.home-weekly-names li{
  position:absolute;
  left:14.2%;
  top:calc(22.2% + (var(--row) * 15.8%));
  width:47%;
  height:11%;
  display:flex;
  align-items:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:5.1cqw;
  line-height:1;
  text-shadow:0 1px 0 rgba(255,218,151,.10);
}

.home-hiscores-widget.weekly-mode .home-hiscores-table{
  display:none;
}

.home-hiscores-widget.dynamic-mode .home-weekly-exact,
.home-hiscores-widget.dynamic-mode .home-weekly-names{
  display:none;
}

.home-hiscores-widget.dynamic-mode .home-hiscores-table{
  display:block;
}


/* =========================================================
   V58 — homepage Hiscores expanded 30px on all sides
   and all four categories now share the same exact style.
   ========================================================= */

.home-hiscores-widget{
  position:absolute;
  left:calc(68.75% + 2px);
  top:calc(48.828125% - 1px);
  width:calc(23.372396% - 4px);
  height:calc(22.949219% + 2px);
  z-index:8;
  pointer-events:none;
  container-type:inline-size;
  overflow:visible;
}

.home-hiscores-card{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

.home-hiscores-base{
  position:absolute;
  inset:0;
  background:url("assets/homepage-weekly-leaderboard-exact.png") center/100% 100% no-repeat;
  pointer-events:none;
}

/* Always render the live player names in the blank middle column. */
.home-exact-names{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  list-style:none;
  pointer-events:none;
  z-index:2;
  color:#1b1209;
  font-family:Georgia,"Times New Roman",serif;
  text-shadow:0 1px 0 rgba(255,221,157,.08);
}

.home-exact-names li{
  position:absolute;
  left:16.2%;
  top:calc(20.7% + (var(--row) * 16.1%));
  width:44%;
  height:11.5%;
  display:flex;
  align-items:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:5cqw;
  line-height:1;
}

/* For overall / token modes, patch over the baked Weekly XP label and values
   so the other three categories use the same visual treatment. */
.home-exact-metric-patch,
.home-exact-values{
  display:none;
}

.home-hiscores-widget.dynamic-mode .home-exact-metric-patch{
  display:block;
  position:absolute;
  right:2.7%;
  top:4.3%;
  width:30.5%;
  height:11%;
  background:rgba(151,118,71,.84);
  filter:blur(1.35px);
  border-radius:2px;
  z-index:1;
}

.home-hiscores-widget.dynamic-mode .home-exact-metric{
  display:flex;
  position:absolute;
  right:4.7%;
  top:4.5%;
  width:27%;
  height:10%;
  align-items:center;
  justify-content:flex-end;
  color:#1b1209;
  font-family:Georgia,"Times New Roman",serif;
  font-size:4.6cqw;
  font-weight:700;
  line-height:1;
  text-align:right;
  white-space:nowrap;
  z-index:3;
  text-shadow:0 1px 0 rgba(255,221,157,.08);
}

.home-hiscores-widget.weekly-mode .home-exact-metric{
  display:none;
}

.home-hiscores-widget.dynamic-mode .home-exact-values{
  display:block;
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  list-style:none;
  pointer-events:none;
  z-index:2;
}

.home-exact-values li{
  position:absolute;
  right:4.3%;
  top:calc(20.9% + (var(--row) * 16.1%));
  width:29%;
  height:11.5%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.home-exact-value-patch{
  position:absolute;
  inset:0 0 0 0;
  background:rgba(151,118,71,.84);
  filter:blur(1.55px);
  border-radius:2px;
  z-index:0;
}

.home-exact-value-text{
  position:relative;
  z-index:1;
  color:#1b1209;
  font-family:Georgia,"Times New Roman",serif;
  font-size:4.55cqw;
  line-height:1;
  text-align:right;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,221,157,.08);
}

/* Hide the old dynamic table layer entirely. */
.home-hiscores-table,
.home-weekly-exact,
.home-weekly-names{
  display:none !important;
}


/* V59 — reduce homepage Hiscores expansion to 10px on each side
   and normalize all four homepage Hiscores icon controls. */
.home-hiscore-tab::before,
.home-hiscore-tab.active::before,
.home-hiscore-tab:hover::before,
.home-hiscore-tab:focus-visible::before{
  background:
    radial-gradient(
      ellipse at center,
      rgba(183,77,239,.17) 0%,
      rgba(170,67,226,.145) 28%,
      rgba(151,56,205,.10) 52%,
      rgba(128,43,180,.045) 72%,
      rgba(128,43,180,0) 100%
    );
}
.hs-overall::before,
.hs-xp::before,
.hs-pvm::before,
.hs-achieve::before{
  opacity:0;
}
.hs-overall.active::before,
.hs-xp.active::before,
.hs-pvm.active::before,
.hs-achieve.active::before{
  opacity:.46;
}


/* V60 — restore original homepage Hiscores size and keep exact design.
   All four homepage Hiscores modes now use the exact same overlay colour treatment. */
.home-hiscores-card{
  left:0;
  top:0;
  width:100%;
  height:100%;
}

.home-hiscores-widget.dynamic-mode .home-exact-metric-patch,
.home-exact-value-patch{
  background: rgba(159, 124, 76, 0.88);
  filter: blur(1.1px);
}

.home-hiscores-widget.dynamic-mode .home-exact-metric,
.home-exact-value-text,
.home-exact-names li{
  color:#1b1209;
  text-shadow:0 1px 0 rgba(255,221,157,.08);
}


/* V61 — use the exact user-approved swatch colour across all 4 homepage hiscores pages.
   Design remains unchanged; only the overlay colour is updated. */
.home-hiscores-widget.dynamic-mode .home-exact-metric-patch,
.home-exact-value-patch{
  background: rgb(155, 121, 74) !important;
  filter: blur(1.1px);
}


/* =========================================================
   V62 — ACTUALLY FUNCTIONAL homepage Hiscores
   Same original size. Same exact colour in all 4 categories.
   All visible rank/name/value text is real HTML.
   ========================================================= */

.home-hiscores-widget{
  position:absolute;
  left:calc(68.75% + 3px);
  top:48.828125%;
  width:calc(23.372396% - 6px);
  height:22.949219%;
  z-index:8;
  pointer-events:none;
  container-type:inline-size;
  overflow:visible;
}



.home-live-board{
  position:absolute;
  inset:0;
  color:#1b1209;
  font-family:Georgia,"Times New Roman",serif;
  text-shadow:0 1px 0 rgba(255,221,157,.08);
}

.home-live-board-fill{
  position:absolute;
  inset:0;
  background:rgb(155,121,74);
  z-index:0;
}

/* Exact approved parchment edge design, but without any baked text/data. */
.home-live-board-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  z-index:1;
}

.home-live-head,
.home-live-list{
  position:relative;
  z-index:2;
}

.home-live-head,
.home-live-list li{
  display:grid;
  grid-template-columns:13% 55% 32%;
  align-items:center;
}

.home-live-head{
  height:16.2%;
  padding:0 4.4%;
  font-size:3.45cqw;
  font-weight:700;
  line-height:1;
  border-bottom:1px solid rgba(62,39,19,.28);
}

.home-live-head span:last-child,
.home-live-value{
  text-align:right;
}

.home-live-list{
  list-style:none;
  margin:0;
  padding:0;
  height:83.8%;
  transition:opacity .08s ease;
}

.home-live-list.loading{
  opacity:.58;
}

.home-live-list li{
  height:20%;
  padding:0 4.4%;
  font-size:4.9cqw;
  line-height:1;
  border-bottom:1px solid rgba(62,39,19,.26);
}

.home-live-list li:last-child{
  border-bottom:0;
}

.home-live-rank{
  padding-left:2px;
}

.home-live-player{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding-right:5px;
}

.home-live-value{
  white-space:nowrap;
  font-size:.86em;
}

.home-live-empty{
  grid-template-columns:1fr!important;
  place-items:center;
  text-align:center;
}

/* All 4 homepage Hiscores buttons use the exact same selected/hover aura. */
.home-hiscore-tab::before,
.home-hiscore-tab:hover::before,
.home-hiscore-tab:focus-visible::before,
.home-hiscore-tab.active::before{
  background:
    radial-gradient(
      ellipse at center,
      rgba(183,77,239,.17) 0%,
      rgba(170,67,226,.145) 28%,
      rgba(151,56,205,.10) 52%,
      rgba(128,43,180,.045) 72%,
      rgba(128,43,180,0) 100%
    );
}

.home-hiscore-tab::before{
  opacity:0;
}

.home-hiscore-tab:hover::before,
.home-hiscore-tab:focus-visible::before{
  opacity:.60;
}

.home-hiscore-tab.active::before{
  opacity:.46;
}

/* Disable all obsolete image-based leaderboard layers from older versions. */
.home-hiscores-card,
.home-hiscores-base,
.home-weekly-exact,
.home-weekly-names,
.home-exact-names,
.home-exact-values,
.home-exact-metric,
.home-exact-metric-patch,
.home-hiscores-table{
  display:none!important;
}


/* V64 — remove only the decorative outer edge from the homepage Hiscores. */
.home-live-board-frame{
  display:none !important;
}


/* =========================================================
   COMMUNITY FORUM — shared Eternal 317 stone chamber
   ========================================================= */

.forum-shell{
  position:relative;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(18,15,12,.975),rgba(10,8,7,.985));
  box-shadow:0 18px 44px rgba(0,0,0,.46)!important;
}
.forum-shell > *:not(.stone-frame-rail){
  position:relative;
  z-index:1;
}
.forum-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(103,83,55,.34);
}
.forum-heading h1{
  margin:2px 0 8px;
}
.forum-heading p:last-child{
  max-width:720px;
  margin:0;
}
.forum-columns{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(270px,.75fr);
  gap:24px;
  margin-top:26px;
}
.forum-section-title,
.forum-topic-heading h2{
  margin:0 0 12px;
  color:#e0be70;
  font-weight:500;
}
.forum-section-title{
  padding:12px 16px;
  border:4px solid #554d42;
  border-top-color:#756b5c;
  border-left-color:#675e51;
  border-right-color:#302b25;
  border-bottom-color:#25211c;
  background:linear-gradient(180deg,#29231c,#17130f);
  box-shadow:inset 0 0 0 1px #120f0c,0 3px 0 #090806;
  text-align:center;
  font-size:20px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.forum-board-list,
.forum-recent-list,
.forum-post-list{
  display:grid;
  gap:10px;
}
.forum-board{
  display:grid;
  grid-template-columns:24px minmax(0,1.25fr) minmax(110px,.38fr) minmax(180px,.75fr);
  align-items:center;
  gap:14px;
  min-height:92px;
  padding:14px 16px;
  border:4px solid #544c41;
  border-top-color:#756a5b;
  border-left-color:#675d50;
  border-right-color:#302b25;
  border-bottom-color:#24201b;
  background:
    radial-gradient(circle at 8% 50%,rgba(111,65,138,.10),transparent 22%),
    linear-gradient(180deg,rgba(32,27,21,.98),rgba(18,15,12,.99));
  box-shadow:inset 0 0 0 2px #12100d,0 4px 0 #090806;
}
.forum-gem{
  width:14px;
  height:14px;
  transform:rotate(45deg);
  border:2px solid #a98755;
  background:linear-gradient(135deg,#bc66df,#47105d 58%,#18051e);
  box-shadow:0 0 9px rgba(174,76,221,.27),inset 0 0 0 1px #2c0c39;
}
.forum-board h3{
  margin:0 0 4px;
  color:#d8b867;
  font-size:19px;
  font-weight:500;
}
.forum-board p{
  margin:0;
  color:#a99e8c;
  font-size:14px;
  line-height:1.45;
}
.forum-board-counts{
  display:grid;
  gap:4px;
  color:#958976;
  font-size:12px;
  text-transform:uppercase;
}
.forum-board-counts strong{
  color:#d5bd83;
}
.forum-last-topic{
  min-width:0;
  color:#8e826f;
  font-size:13px;
}
.forum-topic-link{
  display:grid;
  width:100%;
  min-width:0;
  padding:10px 12px;
  border:3px solid #50483d;
  border-top-color:#6c6254;
  border-left-color:#62584c;
  border-right-color:#2e2923;
  border-bottom-color:#211e19;
  background:linear-gradient(180deg,#211c17,#13100d);
  color:#c9b684;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px #100d0b,0 2px 0 #090706;
}
.forum-topic-link:hover,
.forum-topic-link:focus-visible{
  border-top-color:#8a7790;
  border-left-color:#74647a;
  color:#ead8f2;
  box-shadow:inset 0 0 0 1px #100d0b,0 0 12px rgba(153,70,196,.16);
  outline:none;
}
.forum-topic-link strong{
  overflow:hidden;
  color:inherit;
  font-size:14px;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.forum-topic-link span{
  overflow:hidden;
  margin-top:3px;
  color:#8f8370;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.forum-empty,
.forum-signin-notice{
  margin:0!important;
  padding:16px;
  border:3px solid #4f473d;
  background:#15110e;
  color:#9f927e!important;
  text-align:center;
}
.forum-composer{
  margin-top:24px;
  border:4px solid #554d42;
  background:#15110e;
  box-shadow:inset 0 0 0 1px #0d0b09,0 4px 0 #090806;
}
.forum-composer summary{
  padding:14px 18px;
  color:#dfc078;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.forum-composer form{
  padding:0 18px 20px;
}
.forum-shell textarea,
.forum-shell select{
  width:100%;
  padding:10px 12px;
  border:3px solid #5d5549;
  border-top-color:#7d7465;
  border-left-color:#6b6256;
  border-right-color:#332f28;
  border-bottom-color:#25221d;
  background:#0c0a08;
  color:#eadfc9;
  outline:none;
  box-shadow:inset 0 0 0 2px #17130f,0 3px 0 #0b0907;
  resize:vertical;
}
.forum-shell textarea:focus,
.forum-shell select:focus{
  border-top-color:#89778f;
  border-left-color:#74657a;
  box-shadow:inset 0 0 0 2px #17130f,0 0 12px rgba(128,74,161,.14);
}
.forum-topic{
  margin-top:24px;
}
.forum-back{
  margin-bottom:16px;
}
.forum-topic-heading{
  padding:18px 20px;
  border:4px solid #554d42;
  background:linear-gradient(180deg,#28221c,#15120f);
  box-shadow:inset 0 0 0 1px #110e0c,0 4px 0 #090806;
}
.forum-topic-heading .eyebrow{
  margin:0 0 5px;
}
.forum-topic-heading h2{
  margin:0;
  font-size:30px;
}
.forum-post-list{
  margin-top:14px;
}
.forum-post{
  border:4px solid #554d42;
  border-top-color:#756b5c;
  border-left-color:#675e51;
  border-right-color:#302b25;
  border-bottom-color:#25211c;
  background:linear-gradient(180deg,rgba(29,24,19,.985),rgba(15,12,10,.995));
  box-shadow:inset 0 0 0 1px #110e0c,0 4px 0 #090806;
}
.forum-post header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 16px;
  border-bottom:1px solid rgba(112,91,61,.35);
  background:rgba(92,73,47,.11);
  color:#9b8f7b;
  font-size:12px;
}
.forum-post header div{
  display:flex;
  align-items:baseline;
  gap:9px;
}
.forum-post header strong{
  color:#dbbd76;
  font-size:15px;
  font-weight:500;
}
.forum-post header small{
  color:#af75c6;
  font-size:10px;
  letter-spacing:.08em;
}
.forum-post > p{
  min-height:72px;
  margin:0!important;
  padding:18px;
  color:#d2c5ae!important;
  overflow-wrap:anywhere;
}
.forum-reply{
  margin-top:18px;
  padding:18px;
  border:4px solid #554d42;
  background:#15110e;
  box-shadow:inset 0 0 0 1px #0d0b09,0 4px 0 #090806;
}
.forum-signin-notice:empty{
  display:none;
}

@media(max-width:980px){
  .forum-columns{
    grid-template-columns:1fr;
  }
  .forum-board{
    grid-template-columns:24px minmax(0,1fr) minmax(105px,.28fr);
  }
  .forum-last-topic{
    grid-column:2 / -1;
  }
}

@media(max-width:700px){
  .forum-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .forum-board{
    grid-template-columns:20px minmax(0,1fr);
  }
  .forum-board-counts,
  .forum-last-topic{
    grid-column:2;
  }
  .forum-post header{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
}