/* ============================================================
   SI-THEME (Shadow Isles) - final override layer.
   Loads AFTER ilta.css and theme.css.
   ============================================================ */

:root {
  --t-bg: #040907;
  --t-panel: rgba(9, 20, 17, .84);
  --t-gold: #6ee7b7;
  --t-gold-bright: #eafff6;
  --t-emerald: #34d399;
  --t-line: rgba(94, 234, 176, .22);
  --t-line-strong: rgba(94, 234, 176, .48);
}

/* ---------------- backdrop: the Mist itself ---------------- */
body {
  background:
    linear-gradient(180deg, rgba(3, 9, 7, .58) 0%, rgba(4, 8, 7, .86) 44%, #050607 100%),
    url("/static/img/si/si_09.png") top center / cover no-repeat,
    #05070a;
  background-attachment: fixed;
}
body::before {
  box-shadow:
    inset 0 0 240px rgba(0, 0, 0, .78),
    inset 0 -140px 190px rgba(4, 32, 24, .35);
}

/* ---------------- typography ---------------- */
h1, h2, h3, .page-title {
  color: var(--t-gold-bright);
  text-shadow: 0 2px 22px rgba(52, 211, 153, .18);
}
.page-title::after,
hr.rule { background: linear-gradient(90deg, var(--t-emerald), transparent); }

/* ---------------- navbar: mist glass ---------------- */
.topnav {
  background: linear-gradient(180deg, rgba(5, 13, 11, .92), rgba(6, 14, 12, .74)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid var(--t-line) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
}
.topnav .nav-links a:hover,
.topnav .nav-links summary:hover { color: var(--t-emerald); }
.topnav .nav-links a.active {
  color: var(--t-emerald);
  text-shadow: 0 0 16px rgba(52, 211, 153, .55);
}
.nav-menu {
  background: rgba(6, 15, 13, .97) !important;
  border-color: var(--t-line) !important;
}

/* ---------------- buttons: spectral gradient ---------------- */
.btn-gold,
.btn-primary,
button.primary {
  background: linear-gradient(180deg, #43ecb2, #10a377 58%, #0b7a5a) !important;
  border: 1px solid rgba(110, 231, 183, .68) !important;
  color: #04130d !important;
  text-shadow: none !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, .30);
}
.btn-gold:hover,
.btn-primary:hover { filter: brightness(1.09) saturate(1.05); }

.btn-outline {
  border-color: var(--t-line-strong) !important;
  color: var(--emerald-soft, #6ee7b7) !important;
}
.btn-outline:hover {
  background: rgba(52, 211, 153, .10) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .10);
}

/* ---------------- panels / cards / tiles ---------------- */
.panel,
.modal-card,
.shop-item,
.pass-tier,
.house-card,
.stat-box {
  background: linear-gradient(165deg, rgba(10, 22, 19, .93), rgba(7, 14, 12, .96)) !important;
  border: 1px solid var(--t-line) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
.card-tile {
  border-radius: 10px;
  transition: transform .22s ease, box-shadow .22s ease;
}

/* ---------------- tables & rows ---------------- */
table th {
  color: var(--t-emerald);
  border-bottom-color: var(--t-line-strong) !important;
}
tr:hover td { background: rgba(52, 211, 153, .05); }

/* ---------------- inputs ---------------- */
input, select, textarea {
  background: rgba(6, 15, 13, .85) !important;
  border: 1px solid var(--t-line) !important;
  color: #dff3ea !important;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--t-emerald) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .13);
}

/* ---------------- scrollbars & selection ---------------- */
::-webkit-scrollbar-track { background: #07100e; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #14523f, #0c352b); }
::-webkit-scrollbar-thumb:hover { background: #1a6b53; }
::selection { background: rgba(52, 211, 153, .38); color: #eafff6; }

/* ---------------- footer ---------------- */
.footer {
  border-top: 1px solid var(--t-line);
  background: linear-gradient(180deg, transparent, rgba(4, 26, 20, .55));
}

/* ---------------- ranked / duel accents ---------------- */
.rank-badge, .duel-rank {
  text-shadow: 0 0 18px rgba(52, 211, 153, .45);
}

/* ---------------- progress bars ---------------- */
.progress > div,
.bar > div,
progress::-webkit-progress-value {
  background: linear-gradient(90deg, #10a377, #3ee6b2) !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, .45);
}

/* ---------------- nav stacking guarantee ---------------- */
.topnav { position: sticky; top: 0; z-index: 500; }

/* ---------------- profile hero card (wardrobe) ---------------- */
.prof-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--t-line-strong);
  background-size: cover !important;
  background-position: center 25% !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.prof-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(92deg, rgba(4, 11, 9, .93) 22%, rgba(5, 13, 11, .55) 62%, rgba(6, 16, 13, .35) 100%),
    linear-gradient(0deg, rgba(5, 8, 7, .88) 4%, transparent 42%);
}
.prof-hero.has-bg { min-height: 240px; }
.prof-hero-in {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 26px;
  padding: 30px 34px;
}
.prof-ava-wrap {
  position: relative; width: 128px; height: 128px; flex: 0 0 auto;
}
.prof-ava-wrap .profile-avatar {
  width: 128px; height: 128px; border-radius: 50%;
  object-fit: cover; border: 3px solid rgba(110, 231, 183, .65);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .6),
              0 0 26px rgba(52, 211, 153, .35);
}
.prof-frame {
  position: absolute; inset: -14px; width: calc(100% + 28px);
  height: calc(100% + 28px); pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6));
}
.profile-id { flex: 1; min-width: 0; }
.prof-wardrobe { white-space: nowrap; align-self: flex-start; }

@media (max-width: 720px) {
  .prof-hero-in { flex-direction: column; text-align: center; }
  .profile-id .xp-bar { margin-inline: auto; }
}

/* ============================================================
   FX PACK v3 - mist, glow, shimmer, pulse
   ============================================================ */

body::after {
  content: ""; position: fixed; inset: -20%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 30% at 18% 32%, rgba(52, 211, 153, .075), transparent 70%),
    radial-gradient(38% 26% at 78% 68%, rgba(45, 212, 191, .065), transparent 70%),
    radial-gradient(30% 22% at 55% 12%, rgba(110, 231, 183, .05), transparent 70%);
  animation: si-mist 26s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes si-mist {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .8; }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(-1%, 1%, 0) scale(1.02); opacity: .85; }
}

h1, .page-title, .bp-title {
  background: linear-gradient(100deg, #eafff6 20%, #6ee7b7 40%,
              #eafff6 55%, #34d399 72%, #eafff6 88%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: si-shimmer 7s linear infinite;
}
@keyframes si-shimmer {
  to { background-position: 220% center; }
}

.panel, .modal-card, .shop-item, .pass-tier, .bp-side {
  animation: si-panel-glow 6s ease-in-out infinite;
}
@keyframes si-panel-glow {
  0%, 100% { box-shadow: 0 18px 46px rgba(0, 0, 0, .45),
             inset 0 1px 0 rgba(255, 255, 255, .04),
             0 0 0 rgba(52, 211, 153, 0); }
  50%      { box-shadow: 0 18px 46px rgba(0, 0, 0, .45),
             inset 0 1px 0 rgba(255, 255, 255, .05),
             0 0 26px rgba(52, 211, 153, .12); }
}

.btn-gold, .btn-primary, .bp-upgrade, .cos-btn.buy {
  transition: filter .2s ease, box-shadow .25s ease, transform .15s ease;
}
.btn-gold:hover, .btn-primary:hover, .bp-upgrade:hover {
  animation: si-btn-pulse 1.6s ease-in-out infinite;
  transform: translateY(-1px);
}
@keyframes si-btn-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(16, 185, 129, .30),
             0 0 0 0 rgba(52, 211, 153, .35); }
  50%      { box-shadow: 0 6px 26px rgba(16, 185, 129, .45),
             0 0 0 9px rgba(52, 211, 153, 0); }
}

.nav-menu {
  transform-origin: top left;
  animation: si-menu-in .18s ease both;
}
@keyframes si-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.bp-cell {
  transition: transform .2s ease, box-shadow .25s ease,
              border-color .25s ease;
}
.bp-cell:hover { transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5),
              0 0 18px rgba(52, 211, 153, .25); }
.bp-cell.claimable {
  border-color: var(--t-emerald) !important;
  animation: si-claimable 1.8s ease-in-out infinite;
}
@keyframes si-claimable {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); }
  50%      { box-shadow: 0 0 18px 3px rgba(52, 211, 153, .30); }
}
.bp-cell .cell-check { text-shadow: 0 0 10px rgba(52, 211, 153, .8); }

.lvl-diamond.lvl-current, .lvl-node.now {
  box-shadow: 0 0 24px rgba(52, 211, 153, .5),
              inset 0 0 14px rgba(52, 211, 153, .25) !important;
  animation: si-diamond 3s ease-in-out infinite;
}
@keyframes si-diamond {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.22); }
}

.card-tile { position: relative; overflow: hidden; }
.card-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%,
              rgba(110, 231, 183, .16) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.card-tile:hover::after { transform: translateX(120%); }

main a:not(.btn-gold):not(.btn-outline):not(.btn-primary) {
  transition: color .2s ease, text-shadow .25s ease;
}
main a:hover { text-shadow: 0 0 12px rgba(52, 211, 153, .55); }

.cos-card.equipped {
  animation: si-equipped 3.2s ease-in-out infinite;
}
@keyframes si-equipped {
  0%, 100% { box-shadow: 0 0 0 1px var(--t-emerald),
             0 12px 34px rgba(16, 185, 129, .22); }
  50%      { box-shadow: 0 0 0 1px var(--t-emerald),
             0 14px 44px rgba(16, 185, 129, .40); }
}

@media (prefers-reduced-motion: reduce) {
  body::after, .panel, .modal-card, .shop-item, .pass-tier, .bp-side,
  h1, .page-title, .bp-title, .bp-cell.claimable,
  .lvl-diamond.lvl-current, .lvl-node.now, .cos-card.equipped {
    animation: none !important;
  }
}