/* ===== Theme ===== */
:root{
  --bg:#0a0e14;
  --panel:#161b22;
  --panel-2:#0e131a;
  --text:#f3efe2;
  --muted:#b9b4a0;
  --gold:#c8a448;
  --gold-light:#e7c36b;
  --blue:#2f6db5;
  --blue-light:#5c8fd1;
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.18);
  --ascend-glow:rgba(64,128,255,.40);
  --ascend-border:rgba(120,160,255,.5);
  --btn-primary-text:#2b2205;
  --btn-secondary-text:#061a35;
  --card-shadow:rgba(0,0,0,.25);
  --panel-glow:transparent;
  --bg-gradient1:#1b2430;
  --bg-gradient2:#0b2a5a;
}
html,body{height:100%;min-height:100%}
html{
  background:
    radial-gradient(ellipse 150% 100% at 10% -10%,var(--bg-gradient1) 0%,transparent 70%),
    radial-gradient(ellipse 150% 100% at 90% 110%,var(--bg-gradient2) 0%,transparent 75%),
    var(--bg);
  background-attachment:fixed;
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--text);
  background:transparent;
}
.container{max-width:1200px;margin:0 auto;padding:16px}

/* ---------- Titlebar ---------- */
.titlebar{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
  flex-wrap:wrap;
}
.title-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.title-left h1{
  margin:0; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:clamp(180px, 40vw, 520px);
  padding-bottom:2px;
}
.toolbar{ margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* ---------- Shared text ---------- */
.h2{margin:0 0 4px}
.h3{margin:10px 0 6px}
.small{font-size:.9rem;color:var(--muted)}
.block{display:block}

/* ---------- Stats / cards ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:16px; padding:14px;
  box-shadow:0 10px 30px var(--card-shadow), 0 0 20px var(--panel-glow);
}
/* Set a minimal height for stat cards to ensure consistent sizing while
   avoiding excessive blank space. The Ascension card (without button) naturally
   needs ~150px for its content (title, value, bonus, renown, progress, bar).
   This matches the compact appearance in the reference design. */
.stats .card{
  min-height:100px;
}
.stat-title{font-size:.82rem;color:var(--muted);margin-bottom:6px}
.stat-value{font-size:1.3rem;font-weight:700}
.grid{
  display:grid;
  /* Use equal column widths so that the Guildhall and Upgrades panels align
     nicely next to one another. */
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
  /* Change from stretch to start so each column only takes its natural height.
     This prevents the Guildhall panel from stretching to match the Upgrades
     column when the latter contains more content. */
  align-items:start;
}

/* Add extra spacing below the Guildhall and Upgrades headings to separate them from
   the first row. */
.grid h2.h2{ margin-bottom:8px; }

/* ---------- Controls bar ---------- */
.controls-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:14px 0 12px; padding:10px 12px;
  border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
}
.controls-left,.controls-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.controls-left button,.controls-right button{ margin:0 !important; }
#btn-ascend-bar{ margin-left:0 !important; margin-right:0 !important; }

/* Allow the controls bar to scroll away with the page on all screen sizes.
   Some players prefer the interface to remain static relative to the
   content so that the action bar doesn’t stay pinned at the top.  The
   controls bar will therefore occupy its normal position in the flow and
   scroll out of view like other elements. */
@media (min-width:900px){
  .controls-bar{
    position:static;
  }
}

/* ---------- Buttons ---------- */
.btn{
  appearance:none;border:none;border-radius:12px;
  padding:12px 16px;font-weight:700;cursor:pointer;
  transition:transform .04s ease,opacity .2s,filter .2s;
  min-width:88px;height:38px;display:inline-flex;align-items:center;justify-content:center;
}
.btn.small{padding:6px 10px;font-size:.9rem;border-radius:10px}
.btn:active{transform:translateY(1px) scale(.995)}
.btn.primary{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:var(--btn-primary-text);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn.secondary{background:linear-gradient(180deg,var(--blue-light),var(--blue));color:var(--btn-secondary-text)}
.btn.warn{background:linear-gradient(180deg,var(--btn-warn-light),var(--btn-warn));color:var(--btn-warn-text)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border-2)}
.btn:disabled{opacity:.55;cursor:not-allowed}

select{background:#0b1220;color:var(--text);border:1px solid var(--border-2);border-radius:10px;padding:8px 10px}

/* ——— Themed action buttons (left bar) ——— */
.btn.action{
  background:linear-gradient(180deg,#161b22,#0e131a);
  color:#f3efe2;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 16px;
  font-weight:600;
}

/* ——— Ascend look + “available” flair ——— */
.btn.ascend{ position:relative; overflow:hidden; }
.btn.ascend.is-available{
  border-color:var(--ascend-border);
  box-shadow:0 0 0 2px var(--ascend-glow), 0 0 18px var(--ascend-glow);
  animation:ascendGlow 1.6s ease-in-out infinite;
}
.btn.ascend.is-available::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%);
  transform:translateX(-150%); animation:ascendShimmer 2.8s linear infinite; pointer-events:none;
}
/* “New” pulse (e.g., Rename unlocked) */
.btn.is-new{ position:relative; }
.btn.is-new::before{
  content:""; position:absolute; inset:-4px; border-radius:14px;
  border:2px solid rgba(255,215,128,.65); animation:newPing 1.2s ease-out infinite; pointer-events:none;
}

/* ---------- Shop / Upgrades ---------- */
.shop{display:flex;flex-direction:column;gap:10px}
.shop-row{
  display:grid;
  /* New grid for unit rows: icon | name/desc | owned+cost (no button column) */
  grid-template-columns:36px 1fr 170px;
  gap:8px;
  /* Vertically center content within each row.  Equalised heights from
     the alignment script will create even padding above and below the
     content instead of leaving all extra space at the bottom. */
  align-items:center;
  padding:8px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  cursor:pointer;
  transition:filter .15s ease, transform .08s ease, border-color .15s ease;
  /* Prevent text selection when rapidly clicking to purchase units */
  user-select:none;
}
.shop-row:hover{
  filter:brightness(1.08);
  border-color:var(--border-2);
}
.shop-row:active{
  transform:translateY(1px) scale(.995);
}
.shop-row.unaffordable{
  opacity:.55;
  cursor:not-allowed;
}
.shop-row.unaffordable:hover{
  filter:brightness(.95);
}
.shop-row.maxed{
  opacity:.65;
  cursor:not-allowed;
}
.shop-row.maxed:hover{
  filter:brightness(1);
  transform:none;
}
.shop-row.upg{
  display:grid;
  /* Align upgrade rows with unit rows: icon, name/desc, cost (no button column) */
  /* Match the column widths of unit rows (icon | name | cost) so
     that the Guildhall and Upgrades lists align perfectly when displayed
     side by side. */
  grid-template-columns:36px 1fr 170px;
  gap:8px;
  /* Vertically center upgrade content within its row.  This creates
     balanced space above and below the text when rows are equalised by
     the alignment script. */
  align-items:center;
  padding:8px;
  /* Match the minimum height of unit rows to align corresponding
     entries across the two columns. */
  /* No minimum height.  Let the content determine natural height and
     allow the alignment script to equalise rows. */
  /* Prevent text selection when rapidly clicking to purchase upgrades */
  user-select:none;
}
@media (max-width:1200px){
  .shop-row.upg{
    grid-template-columns:36px minmax(180px,1fr) 170px;
  }
}
.upg-text,.upg-title{min-width:0}
/* Ensure upgrade fonts align with unit fonts */
.upg-title{
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  /* Prevent upgrade names from being cut off by giving them enough space */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.upg-title .owned{ color:var(--muted); font-weight:600 }
.upg-desc{
  margin-top:2px;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.25;
}
.upg-cost{ justify-self:end; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#upgrades{min-height:320px}

/* Make the owned count for upgrade rows appear on its own line and use
   the same font styling as the Guildhall owned values. */
.upg-owned{
  font-size:.9rem;
  color:var(--muted);
  line-height:1.2;
}

.icon{
  width:28px;height:28px;border-radius:6px;background:#0e131a;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:18px
}
.shop-title{
  font-weight:700;
  /* Match the font size of upgrade titles so rows align nicely */
  font-size:1rem;
  line-height:1.2;
}
.shop-meta{
  /* Match meta font size with upgrade descriptions for consistent alignment */
  font-size:.9rem;
  color:var(--muted);
  /* Reduce the margin between the unit name and its effects line to
     minimise overall row height.  A smaller gap keeps units and
     upgrades visually aligned without excessive padding. */
  margin-top:2px;
}

/* Container for Owned and Cost values in the Guildhall list.  Stacks
   both values vertically and aligns them to the right. */
.shop-count{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
}

/* Owned and cost lines in the Guildhall list.  Inherit the same font
   styling as other meta text. */
.shop-owned,.shop-cost{
  font-size:.9rem;
  color:var(--muted);
}
.shop-cost{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.howto{margin-bottom:10px}
.sep{border-color:var(--border)}

/* ---------- Help buttons ---------- */
.icon-btn.help{
  width:20px;height:20px;border-radius:50%;
  border:1px solid var(--border-2);background:#0b1220;color:#f3efe2;
  font-size:12px;line-height:1;margin-left:8px;cursor:pointer
}
.icon-btn.help:hover{filter:brightness(1.2)}

/* ---------- Generic bars ---------- */
.bar-wrap{margin-top:8px;height:10px;background:#1b2430;border-radius:6px;overflow:hidden;border:1px solid var(--border-2)}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--gold))}

/* ---------- Footer ---------- */
footer.footer{
  text-align:center;color:var(--muted);font-size:.9rem;line-height:1.6;
  margin-top:60px;padding:20px 16px 35px;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 100%);
  border-top:1px solid var(--border)
}
footer.footer p{margin:4px 0}
footer.footer .copyright{margin-top:6px;font-size:.85rem;color:var(--muted);opacity:.9}

/* ---------- Unlock tree layout ---------- */
/*
  The unlock tree is arranged into three rows: the top row contains the
  advanced class unlocks, the middle row contains Warlock and Death Knight,
  and the bottom row contains the Guild Charter rename.  Each row centers
  its items and allows them to wrap gracefully on smaller screens.  We avoid
  clipping by constraining the widths of each bubble and by centering the
  text within.
*/
.unlock-tree{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  position:relative;
}
.unlock-row{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  position:relative;
  width:100%;
  gap:24px;
  flex-wrap:wrap;
}
/* Top row (advanced classes) */
.unlock-row.row-0 .unlock-item{
  /* Top row (advanced classes): allocate a third of the row so all three
     bubbles can sit side by side on larger screens.  Use slightly
     narrower max width so they fit within a widened modal. */
  flex:1 1 30%;
  max-width:250px;
  min-width:200px;
}
/* Middle row (Warlock & Death Knight) */
.unlock-row.row-1 .unlock-item{
  /* Middle row (Warlock & Death Knight): slightly wider bubbles */
  flex:1 1 40%;
  max-width:280px;
  min-width:220px;
}
/* Bottom row (Guild rename) */
.unlock-row.row-2 .unlock-item{
  /* Bottom row (Guild rename): full width bubble so the description fits comfortably */
  flex:1 1 60%;
  max-width:320px;
  min-width:240px;
}

/* Styling for each unlock bubble */
.unlock-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:16px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:linear-gradient(180deg,#0f151f,#0b111a);
  box-sizing:border-box;
  gap:4px;
}
.unlock-item .unlock-name{
  font-weight:600;
  font-size:1rem;
  line-height:1.25;
}
.unlock-item .unlock-desc{
  font-size:.82rem;
  color:var(--muted);
}
.unlock-item .unlock-cost{
  font-size:.88rem;
  color:var(--muted);
  font-weight:600;
}
.unlock-item .buy-btn{
  margin-top:8px;
}
.unlock-item .unlock-name{
  font-weight:600;
  font-size:1.0rem;
}
.unlock-item .unlock-desc{
  font-size:.82rem;
  color:#b9b4a0;
}
.unlock-item .unlock-cost{
  font-size:.88rem;
  color:#b9b4a0;
  font-weight:600;
}
.unlock-item .buy-btn{
  margin-top:8px;
}

/* ---------- Upgrades grouping header ---------- */
.upg-header{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid var(--border);
  color:var(--muted);
}
.upg-header .upg-title{
  font-size:.95rem;
  font-weight:700;
  color:var(--muted);
  margin-bottom:4px;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Level badge ---------- */
.level-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; min-width:44px; padding:0 8px;
  border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#0e131a,#0b1016);
  color:#e9e6dc; font-weight:800; font-size:.92rem; letter-spacing:.2px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  user-select:none;
}
.level-badge.tier-0{}
.level-badge.tier-1{
  border-color:rgba(120,160,255,.35);
  box-shadow:0 0 12px rgba(80,140,255,.25) inset, 0 0 6px rgba(80,140,255,.25);
}
.level-badge.tier-2{
  border-color:rgba(200,180,80,.45);
  background:linear-gradient(180deg,#141a24,#1a1f2a);
  box-shadow:0 0 14px rgba(220,190,90,.25) inset, 0 0 8px rgba(220,190,90,.25);
}
.level-badge.tier-3{
  border-color:rgba(160,230,140,.45);
  background:linear-gradient(180deg,#132016,#0f1b12);
  box-shadow:0 0 16px rgba(140,220,160,.25) inset, 0 0 10px rgba(140,220,160,.25);
}
.level-badge.tier-4{
  border-color:rgba(255,150,120,.5);
  background:linear-gradient(180deg,#201316,#1a1f12);
  box-shadow:0 0 18px rgba(255,150,120,.28) inset, 0 0 12px rgba(255,150,120,.28);
}
.level-badge.tier-5{
  border-color:rgba(255,220,140,.6);
  background:linear-gradient(180deg,#221c0e,#1b160c);
  box-shadow:0 0 22px rgba(255,220,140,.32) inset, 0 0 14px rgba(255,220,140,.32);
}
.level-badge.tier-6{
  border-color:rgba(255,255,255,.7);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg,#1e2230,#131826);
  box-shadow:0 0 28px rgba(255,255,255,.3) inset, 0 0 22px rgba(140,180,255,.45), 0 0 12px rgba(255,255,255,.22);
}
.level-badge.pop{ animation:badgePop .9s ease; }
@keyframes badgePop{
  0%{transform:scale(1);filter:brightness(1)}
  25%{transform:scale(1.08);filter:brightness(1.25)}
  60%{transform:scale(1.02)}
  100%{transform:scale(1);filter:brightness(1)}
}

/* ---------- Guild header (name + badge + XP bar) ---------- */
#guild-level-group.level-group{
  display:inline-flex; flex-direction:column; gap:6px;
}
#guild-level-group .guild-line{
  display:inline-flex; align-items:center; gap:10px;
}

/* Embossed title */
.guild-title{
  margin:0; line-height:1.1; font-weight:900; letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
}

/* Title colour per tier */
.level-group.tier-0 .guild-title{ color:#e9e6dc; }
.level-group.tier-1 .guild-title{ color:#86aaff; text-shadow:0 0 8px rgba(120,160,255,.25); }
.level-group.tier-2 .guild-title{ color:#e9c85c; text-shadow:0 0 8px rgba(220,190,90,.25); }
.level-group.tier-3 .guild-title{ color:#8fe09b; text-shadow:0 0 8px rgba(140,220,160,.25); }
.level-group.tier-4 .guild-title{ color:#ffb199; text-shadow:0 0 8px rgba(255,150,120,.28); }
.level-group.tier-5 .guild-title{ color:#ffe2a3; text-shadow:0 0 10px rgba(255,220,140,.32); }
.level-group.tier-6 .guild-title{ color:#ffffff; text-shadow:0 0 12px rgba(180,210,255,.45); }

/* XP bar under the name (JS sets width to match title) */
.level-xp{
  position:relative;
  width:auto;
  min-width:10ch;
  max-width:min(80vw,1000px);
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.65);
  overflow:visible; /* keep tooltip visible */
}
.level-xp-bar{
  position:absolute; inset:0 auto 0 0; width:0%;
  border-radius:999px; z-index:1;
  background:linear-gradient(90deg,var(--blue),var(--gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  transition:width .25s ease;
  overflow:hidden;
}

/* Goal STAR at the right end (precise 5-point via clip-path) */
.level-xp-pointer{
  position:absolute;
  top:50%; right:-4px;
  transform:translate(50%,-50%);
  width:16px; height:16px; z-index:3; pointer-events:none;
  background:radial-gradient(circle at 45% 40%, #ffffff 0 38%, #bcd6ff 39% 100%);
  filter:drop-shadow(0 0 8px rgba(130,175,255,.75)) drop-shadow(0 0 16px rgba(130,175,255,.45));
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 72%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.level-xp-pointer::before,
.level-xp-pointer::after{content:none !important;}
.level-xp.near-level .level-xp-pointer{ animation: starTwinkle 1.6s ease-in-out infinite; }
@keyframes starTwinkle{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(130,175,255,.7)) drop-shadow(0 0 15px rgba(130,175,255,.4)); }
  50%    { filter:drop-shadow(0 0 14px rgba(160,200,255,.95)) drop-shadow(0 0 25px rgba(160,200,255,.6)); }
}

/* Tooltip */
.tip{ position:relative; }
.tip[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute; left:0; right:0; bottom:calc(100% + 8px); margin:0 auto;
  max-width:520px; background:rgba(20,24,32,.98);
  border:1px solid rgba(255,255,255,.14); border-radius:10px;
  padding:8px 10px; font-size:12.5px; color:#f3efe2; text-align:center;
  pointer-events:none; white-space:nowrap; box-shadow:0 6px 26px rgba(0,0,0,.5);
}
.tip[data-tip]:hover::before{
  content:""; position:absolute; bottom:calc(100% + 2px); left:50%;
  transform:translateX(-50%); border:6px solid transparent; border-top-color:rgba(255,255,255,.14);
}

/* ---------- Keyframes (buttons) ---------- */
@keyframes ascendGlow{
  0%,100%{ box-shadow:0 0 0 2px var(--ascend-glow), 0 0 10px var(--ascend-glow); }
  50%    { box-shadow:0 0 0 2px var(--ascend-glow), 0 0 22px var(--ascend-glow); }
}
@keyframes ascendShimmer{ 0%{transform:translateX(-160%)} 100%{transform:translateX(160%)} }
@keyframes newPing{ 0%{opacity:.9;transform:scale(1)} 100%{opacity:0;transform:scale(1.12)} }

/* Mana flow animation (legacy, safe to keep) */
@keyframes manaFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.mana-visual { transition: opacity 0.3s ease; }
.mana-visual.inactive { opacity: 0.3; }
.mana-flow { animation-play-state: running; }
.mana-visual.inactive .mana-flow { animation-play-state: paused; }

/* === Resource value shimmer (Gold, Mana, Energy, Legendary) === */

/* Base shimmer behavior with a gentle fallback pulse */
.shimmer {
  position: relative;
  display: inline-block;
  animation: shimmerPulse 4s ease-in-out infinite;
}

/* Fallback solid colors for each resource (when clip isn't supported) */
.shimmer-gold { color: #f1d26a; }     /* warm, readable gold */
.shimmer-mana { color: #aecdff; }     /* soft light blue */
.shimmer-energy { color: #ffc680; }   /* gentle orange for readability */
.shimmer-legendary { color: #dfeaff; }/* pale fallback */

/* Preferred: gradient clipped to text */
@supports (-webkit-background-clip: text) {
  .shimmer {
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 4.5s linear infinite;
  }
  .shimmer-gold {
    background-image: linear-gradient(
      90deg,
      #d9b64b 0%,
      #ffd970 18%,
      #d9b64b 36%,
      #fff0a8 50%,
      #d9b64b 64%,
      #ffd970 82%,
      #d9b64b 100%
    );
  }
  .shimmer-mana {
    background-image: linear-gradient(
      90deg,
      #8dbaff 0%,
      #c7ddff 18%,
      #8dbaff 36%,
      #e6f0ff 50%,
      #8dbaff 64%,
      #c7ddff 82%,
      #8dbaff 100%
    );
  }
  .shimmer-energy {
    /* warm orange with light passes for contrast on dark bg */
    background-image: linear-gradient(
      90deg,
      #ffa95e 0%,
      #ffd7a3 20%,
      #ffb36b 40%,
      #ffe9c6 50%,
      #ffb36b 60%,
      #ffd7a3 80%,
      #ffa95e 100%
    );
  }

  /* Legendary: sweeping blue highlight over yellow base */
  .shimmer-legendary {
    background-image: 
      linear-gradient(
        90deg,
        rgba(120, 180, 255, 0) 0%,
        rgba(120, 180, 255, 0) 20%,
        rgba(120, 180, 255, 0.8) 50%,
        rgba(120, 180, 255, 0) 80%,
        rgba(120, 180, 255, 0) 100%
      ),
      linear-gradient(90deg, #ffd970, #ffd970);
    background-size: 200% 100%, 100% 100%;
    background-position: 0% 0%, 0% 0%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 4.5s linear infinite;
  }
}

@supports (background-clip: text) and (not (-webkit-background-clip: text)) {
  .shimmer {
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    animation: textShimmer 4.5s linear infinite;
  }
  .shimmer-gold {
    background-image: linear-gradient(
      90deg,
      #d9b64b 0%,
      #ffd970 18%,
      #d9b64b 36%,
      #fff0a8 50%,
      #d9b64b 64%,
      #ffd970 82%,
      #d9b64b 100%
    );
  }
  .shimmer-mana {
    background-image: linear-gradient(
      90deg,
      #8dbaff 0%,
      #c7ddff 18%,
      #8dbaff 36%,
      #e6f0ff 50%,
      #8dbaff 64%,
      #c7ddff 82%,
      #8dbaff 100%
    );
  }
  .shimmer-energy {
    background-image: linear-gradient(
      90deg,
      #ffa95e 0%,
      #ffd7a3 20%,
      #ffb36b 40%,
      #ffe9c6 50%,
      #ffb36b 60%,
      #ffd7a3 80%,
      #ffa95e 100%
    );
  }

  /* Legendary: sweeping blue highlight over yellow base */
  .shimmer-legendary {
    background-image: 
      linear-gradient(
        90deg,
        rgba(120, 180, 255, 0) 0%,
        rgba(120, 180, 255, 0) 20%,
        rgba(120, 180, 255, 0.8) 50%,
        rgba(120, 180, 255, 0) 80%,
        rgba(120, 180, 255, 0) 100%
      ),
      linear-gradient(90deg, #ffd970, #ffd970);
    background-size: 200% 100%, 100% 100%;
    background-position: 0% 0%, 0% 0%;
    background-clip: text;
    color: transparent;
    animation: textShimmer 4.5s linear infinite;
  }
}

/* Animations: moving gradient (gold/mana/energy) */
@keyframes textShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Fallback pulsing glow */
@keyframes shimmerPulse {
  0%, 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  50%      { text-shadow:
               0 0 4px rgba(255, 255, 255, 0.12),
               0 0 8px rgba(255, 255, 255, 0.08); }
}
/* ---------- Help Modal Tabs ---------- */
.help-tab {
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.08);
  transition: all .2s ease;
  font-size: 0.95rem;
}

.help-tab:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: rgba(255,255,255,.15);
}

.help-tab.active {
  background: linear-gradient(180deg, #5c8fd1, var(--blue));
  color: #061a35;
  border-color: transparent;
  font-weight: 700;
}

.help-section details {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
}

.help-section details summary {
  user-select: none;
  transition: background .2s ease;
}

.help-section details summary:hover {
  background: rgba(255,255,255,.08);
}

.help-section details[open] summary {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Styled scrollbar for modals */
.styled-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.styled-scrollbar::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.styled-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(200,164,72,0.5);
  border-radius: 4px;
}

.styled-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(200,164,72,0.7);
}

/* For Firefox */
.styled-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,164,72,0.5) rgba(0,0,0,0.2);
}

/* ---------- Statistics Grid ---------- */
.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-grid .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  transition: background 0.2s ease;
}

.stats-grid .stat-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.stats-grid .stat-label {
  color: #d4d0c0;
  font-size: 0.95rem;
}

.stats-grid .stat-value {
  color: #e7c36b;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: right;
}

/* ---------- Sidebar Ads ---------- */
.sidebar-ad {
  position: fixed;
  top: 80px;
  width: 160px;
  min-height: 600px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(22, 27, 34, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 8px;
}

.sidebar-ad-left {
  left: 20px;
}

.sidebar-ad-right {
  right: 20px;
}

/* Hide sidebar ads on screens smaller than 1400px to prevent overlap */
@media (max-width: 1400px) {
  .sidebar-ad {
    display: none;
  }
}

/* Additional responsive breakpoint for very wide screens */
@media (min-width: 1600px) {
  .sidebar-ad {
    width: 180px;
  }
  
  .sidebar-ad-left {
    left: 40px;
  }
  
  .sidebar-ad-right {
    right: 40px;
  }
}

/* Save comparison modal shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ===== Page Navigation Menu Styles ===== */
.page-nav {
  margin-bottom: 24px;
  padding: 12px;
  background: linear-gradient(180deg, #161b22, #0e131a);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Navigation menu buttons */
.page-nav .btn {
  text-decoration: none;
  margin: 0;
  padding: 8px 14px;
  height: auto;
  min-width: auto;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

/* Back to Game button with subtle shimmer */
.page-nav .btn-back {
  background: linear-gradient(180deg, #161b22, #0e131a);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}

.page-nav .btn-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 50%, transparent 100%);
  transform: translateX(-150%);
  animation: subtleShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

.page-nav .btn-back:hover {
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(180deg, #1a1f26, #12171e);
}

/* Regular navigation buttons */
.page-nav .btn-nav {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.12);
}

.page-nav .btn-nav:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
  color: var(--text);
}

/* Active/current page button */
.page-nav .btn-nav.active {
  background: rgba(200,164,72,.15);
  border-color: rgba(200,164,72,.4);
  color: var(--gold-light);
  cursor: default;
  pointer-events: none;
}

/* Subtle shimmer animation for Back to Game button */
@keyframes subtleShimmer {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}