
/* =====================================================
   The Misfits Revolt V61 Animated Website Shell
   - Unified navigation across every page
   - Dimmer obsidian / ember fantasy theme
   - Animated ember particles + flare streaks
   ===================================================== */
:root{
  --tmr-bg:#040204;
  --tmr-bg-2:#0b0509;
  --tmr-panel:rgba(19,9,12,.84);
  --tmr-panel-2:rgba(29,13,17,.76);
  --tmr-border:rgba(246,199,122,.20);
  --tmr-border-strong:rgba(229,122,82,.28);
  --tmr-gold:#f6c77a;
  --tmr-ember:#e57a52;
  --tmr-red:#8e2d3b;
  --tmr-plum:#6a355f;
  --tmr-text:#fff8ee;
  --tmr-muted:#cfbfac;
  --tmr-shadow:0 20px 64px rgba(0,0,0,.52);
  --tmr-nav-height:64px;
}
html{scroll-behavior:smooth;background:var(--tmr-bg);}
body{
  min-height:100vh;
  color:var(--tmr-text);
  background:
    radial-gradient(circle at 18% 5%, rgba(106,53,95,.18), transparent 32%),
    radial-gradient(circle at 82% 0%, rgba(229,122,82,.11), transparent 24%),
    radial-gradient(circle at 50% 105%, rgba(246,199,122,.06), transparent 30%),
    linear-gradient(180deg,#050205 0%,#0d0408 44%,#040204 100%) !important;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 54%, rgba(0,0,0,.18) 100%),
    linear-gradient(90deg, rgba(0,0,0,.36), transparent 18%, transparent 82%, rgba(0,0,0,.36));
}
a{color:inherit;}
#ambient-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  filter:saturate(.92) brightness(.96);
}
body > *:not(#ambient-canvas):not(.loading-splash):not(.tmr-site-header):not(.tmr-mobile-panel){position:relative; z-index:1;}
body.tmr-shell-ready{padding-top:var(--tmr-nav-height);}
.tmr-site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--tmr-nav-height);
  z-index:9500;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,rgba(7,3,5,.95),rgba(10,4,7,.84));
  border-bottom:1px solid var(--tmr-border);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 36px rgba(0,0,0,.34);
}
.tmr-nav-wrap{
  width:min(1220px,calc(100% - 28px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.tmr-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width:0;
}
.tmr-brand img{
  width:42px;
  height:42px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(229,122,82,.22));
}
.tmr-brand span{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1rem;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tmr-text);
  white-space:nowrap;
}
.tmr-brand b{color:var(--tmr-gold); font-weight:700;}
.tmr-nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}
.tmr-nav-links a,
.tmr-discord,
.tmr-menu-toggle{
  border:1px solid transparent;
  border-radius:999px;
  text-decoration:none;
  font:800 .72rem/1.1 Inter,system-ui,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--tmr-muted);
  padding:10px 12px;
  transition:transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tmr-nav-links a:hover,
.tmr-nav-links a.active{
  color:var(--tmr-text);
  border-color:var(--tmr-border);
  background:rgba(229,122,82,.08);
  box-shadow:0 0 16px rgba(229,122,82,.10);
  transform:translateY(-1px);
}
.tmr-discord{
  color:#ffe6c1 !important;
  background:linear-gradient(135deg,rgba(110,39,55,.92),rgba(229,122,82,.34));
  border-color:rgba(246,199,122,.28) !important;
}
.tmr-menu-toggle{
  display:none;
  background:rgba(255,255,255,.04);
  color:var(--tmr-text);
  cursor:pointer;
  width:42px;
  height:42px;
  padding:0;
  place-items:center;
  font-size:1.1rem;
}
.tmr-mobile-panel{
  position:fixed;
  top:calc(var(--tmr-nav-height) + 8px);
  right:14px;
  width:min(330px,calc(100vw - 28px));
  z-index:9490;
  display:none;
  flex-direction:column;
  gap:8px;
  padding:14px;
  background:rgba(12,5,8,.96);
  border:1px solid var(--tmr-border);
  border-radius:20px;
  box-shadow:var(--tmr-shadow);
  backdrop-filter:blur(18px);
}
.tmr-mobile-panel.open{display:flex; animation:tmrSlideDown .22s ease both;}
.tmr-mobile-panel a{
  text-decoration:none;
  color:var(--tmr-muted);
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  text-transform:uppercase;
  letter-spacing:.08em;
  font:800 .8rem Inter,system-ui,sans-serif;
}
.tmr-mobile-panel a.active,
.tmr-mobile-panel a:hover{color:var(--tmr-text); border-color:var(--tmr-border-strong); background:rgba(229,122,82,.09);}
@keyframes tmrSlideDown{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:translateY(0)}}
main, .container, .dashboard-container, .tmr-econ-page, .page-shell, .hs-main, .v57-about-wrap{
  position:relative;
  z-index:1;
}
.tmr-econ-page, .v57-about-wrap, .dashboard-container, .page-shell{padding-top:32px;}
/* Hide older generated nav elements if any remain */
nav#navbar:not(.tmr-keep), .tmr-final-nav:not(.tmr-keep), #stickyTop, .site-header{display:none!important;}
/* Main content cards feel unified without destroying existing layouts */
.section-card, .tmr-econ-panel, .tmr-econ-card, .card, .rank-card, .v57-about-card, .table-card, .dashboard-card{
  border-color:var(--tmr-border)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28)!important;
  background:linear-gradient(180deg, rgba(28,12,16,.78), rgba(9,4,6,.72))!important;
}
.section-card:hover, .tmr-econ-panel:hover, .tmr-econ-card:hover, .card:hover, .rank-card:hover, .v57-about-card:hover, .table-card:hover, .dashboard-card:hover{
  box-shadow:0 22px 66px rgba(0,0,0,.34), 0 0 24px rgba(229,122,82,.07)!important;
}
footer, #site-footer{
  border-top:1px solid var(--tmr-border)!important;
  background:linear-gradient(180deg,rgba(11,4,7,.72),rgba(5,2,4,.94))!important;
}
.loading-splash{
  position:fixed!important;
  inset:0!important;
  z-index:99999!important;
  display:grid!important;
  place-items:center!important;
  background:
    radial-gradient(circle at 50% 20%, rgba(106,53,95,.20), transparent 36%),
    radial-gradient(circle at 50% 16%, rgba(229,122,82,.10), transparent 22%),
    linear-gradient(180deg,#080205,#12050a 48%,#040203)!important;
  transition:opacity .65s ease, visibility .65s ease!important;
}
.loading-splash.splash-hidden, body.splash-complete .loading-splash{opacity:0!important; visibility:hidden!important; pointer-events:none!important;}
.splash-card{
  width:min(520px,92vw)!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:24px!important;
}
.splash-card img{width:min(240px,66vw)!important; max-height:240px!important; object-fit:contain!important; display:block!important; margin:0 auto!important; filter:drop-shadow(0 0 22px rgba(229,122,82,.24))!important;}
.splash-title{font-family:Georgia,'Times New Roman',serif!important; letter-spacing:.11em!important; text-transform:uppercase!important; color:#fff4e5!important; text-shadow:0 0 14px rgba(229,122,82,.28)!important; font-size:clamp(1.45rem,5vw,2.45rem)!important; margin:0!important;}
.splash-note{color:var(--tmr-muted)!important; margin:0!important;}
.splash-loader{width:min(320px,72vw)!important; height:8px!important; border-radius:999px!important; overflow:hidden!important; background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.08)!important;}
.splash-loader span{display:block!important; height:100%!important; width:46%!important; border-radius:inherit!important; background:linear-gradient(90deg,transparent,var(--tmr-ember),var(--tmr-gold),transparent)!important; animation:tmrLoadBar 1.2s ease-in-out infinite!important;}
@keyframes tmrLoadBar{0%{transform:translateX(-105%)}100%{transform:translateX(230%)}}
/* Slightly darken overly bright legacy hero backgrounds */
.hero::before, .page-hero::before, .event-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(6,3,5,.18), rgba(6,3,5,.28));
}
@media(max-width:980px){
  .tmr-nav-links{display:none;}
  .tmr-menu-toggle{display:grid;}
  .tmr-brand span{font-size:.82rem; letter-spacing:.08em;}
  .tmr-brand img{width:38px;height:38px;}
}
@media(max-width:520px){
  :root{--tmr-nav-height:58px;}
  .tmr-nav-wrap{width:calc(100% - 18px);}
  .tmr-brand span{max-width:190px; overflow:hidden; text-overflow:ellipsis;}
  .splash-card img{width:min(190px,58vw)!important;}
}
@media(prefers-reduced-motion:reduce){
  #ambient-canvas{display:none;}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important;}
}


/* =====================================================
   V62 About Page Rebuild
   ===================================================== */
.tmr-about-page{
  font-family:Inter, system-ui, -apple-system, Segoe UI, sans-serif;
}

.tmr-about-shell{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:clamp(32px, 5vw, 72px) 0 80px;
}

.tmr-about-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(280px, .65fr);
  gap:clamp(22px, 4vw, 42px);
  align-items:center;
  min-height:calc(100vh - 140px);
  padding:clamp(36px, 7vw, 90px) 0 clamp(28px, 5vw, 70px);
}

.tmr-about-kicker{
  margin:0 0 14px;
  color:var(--tmr-gold);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:900;
  font-size:.74rem;
}

.tmr-about-hero h1,
.tmr-about-section h2,
.tmr-about-join h2{
  margin:0;
  font-family:Cinzel, Georgia, serif;
  color:var(--tmr-text);
  letter-spacing:.04em;
  line-height:.98;
  text-transform:uppercase;
  text-shadow:0 0 20px rgba(229,122,82,.16);
}

.tmr-about-hero h1{
  font-size:clamp(2.6rem, 8vw, 6.5rem);
  max-width:920px;
}

.tmr-about-lead{
  max-width:840px;
  margin:22px 0 0;
  color:var(--tmr-muted);
  font-size:clamp(1rem, 1.6vw, 1.18rem);
  line-height:1.85;
}

.tmr-about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.tmr-about-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:13px 18px;
  border-radius:999px;
  border:1px solid var(--tmr-border);
  background:rgba(255,255,255,.035);
  color:var(--tmr-text);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.tmr-about-btn:hover{
  transform:translateY(-2px);
  border-color:var(--tmr-border-strong);
  background:rgba(229,122,82,.08);
  box-shadow:0 0 28px rgba(229,122,82,.10);
}

.tmr-about-btn.primary{
  color:#ffe9c7;
  background:linear-gradient(135deg, rgba(110,39,55,.95), rgba(229,122,82,.38));
  border-color:rgba(246,199,122,.34);
}

.tmr-about-crest-card{
  position:relative;
  overflow:hidden;
  padding:24px;
  border-radius:28px;
  border:1px solid var(--tmr-border);
  background:
    radial-gradient(circle at 50% 0%, rgba(229,122,82,.11), transparent 50%),
    linear-gradient(180deg, rgba(28,12,16,.78), rgba(9,4,6,.78));
  box-shadow:var(--tmr-shadow);
}

.tmr-about-crest-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(246,199,122,.10), transparent 34%, rgba(106,53,95,.08));
}

.tmr-about-crest-card img{
  position:relative;
  display:block;
  width:min(260px, 80%);
  margin:0 auto 22px;
  filter:drop-shadow(0 0 22px rgba(229,122,82,.18));
}

.tmr-about-crest-card div{
  position:relative;
  padding:16px 0;
  border-top:1px solid rgba(246,199,122,.14);
}

.tmr-about-crest-card span{
  display:block;
  color:var(--tmr-gold);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  margin-bottom:7px;
}

.tmr-about-crest-card strong{
  font-family:Cinzel, Georgia, serif;
  font-size:2rem;
  color:var(--tmr-text);
}

.tmr-about-crest-card p{
  margin:0;
  color:var(--tmr-muted);
  line-height:1.65;
}

.tmr-about-section{
  padding:clamp(36px, 6vw, 72px) 0;
  border-top:1px solid rgba(246,199,122,.10);
}

.tmr-about-section-head{
  max-width:890px;
  margin:0 0 24px;
}

.tmr-about-section h2,
.tmr-about-join h2{
  font-size:clamp(2rem, 4vw, 4.2rem);
}

.tmr-about-section-head p:not(.tmr-about-kicker),
.tmr-about-section > p,
.tmr-about-join p{
  color:var(--tmr-muted);
  line-height:1.78;
  font-size:1rem;
}

.tmr-about-grid{
  display:grid;
  gap:16px;
}

.tmr-about-grid.two{grid-template-columns:repeat(2, minmax(0, 1fr));}
.tmr-about-grid.three{grid-template-columns:repeat(3, minmax(0, 1fr));}
.tmr-about-grid.four{grid-template-columns:repeat(4, minmax(0, 1fr));}

.tmr-about-card,
.tmr-about-question-card,
.tmr-rule-card{
  border:1px solid var(--tmr-border);
  border-radius:24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(229,122,82,.07), transparent 42%),
    linear-gradient(180deg, rgba(28,12,16,.78), rgba(9,4,6,.72));
  box-shadow:0 18px 55px rgba(0,0,0,.26);
  padding:22px;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.tmr-about-card:hover,
.tmr-about-question-card:hover,
.tmr-rule-card:hover{
  transform:translateY(-2px);
  border-color:var(--tmr-border-strong);
  box-shadow:0 24px 70px rgba(0,0,0,.36), 0 0 28px rgba(229,122,82,.08);
}

.tmr-about-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:var(--tmr-gold);
  background:rgba(246,199,122,.08);
  border:1px solid rgba(246,199,122,.18);
  margin-bottom:16px;
  font-size:1.2rem;
}

.tmr-about-card h3,
.tmr-about-question-card h3,
.tmr-rule-card h3{
  margin:0 0 10px;
  font-family:Cinzel, Georgia, serif;
  letter-spacing:.06em;
  color:var(--tmr-text);
  text-transform:uppercase;
}

.tmr-about-card p,
.tmr-about-question-card li,
.tmr-rule-card p{
  color:var(--tmr-muted);
  line-height:1.72;
}

.tmr-about-card p,
.tmr-rule-card p{margin:0;}

.tmr-about-pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.tmr-about-pill-grid span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 14px;
  border-radius:999px;
  color:#ffe9c7;
  background:rgba(246,199,122,.07);
  border:1px solid rgba(246,199,122,.17);
  font-weight:800;
}

.tmr-about-pill-grid i{color:var(--tmr-gold);}

.tmr-about-question-card ul{
  margin:14px 0 0;
  padding-left:18px;
}

.tmr-about-question-card li + li{margin-top:10px;}

.tmr-rule-card{
  position:relative;
  padding-left:86px;
  min-height:150px;
}

.tmr-rule-card strong{
  position:absolute;
  left:22px;
  top:24px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:15px;
  font-family:Cinzel, Georgia, serif;
  color:var(--tmr-gold);
  border:1px solid rgba(246,199,122,.20);
  background:rgba(246,199,122,.07);
}

.tmr-about-join{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(26px, 5vw, 44px);
  border:1px solid rgba(246,199,122,.20);
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(229,122,82,.11), transparent 38%),
    linear-gradient(135deg, rgba(28,12,16,.82), rgba(9,4,6,.72));
  box-shadow:var(--tmr-shadow);
}

.tmr-about-join p{
  max-width:760px;
  margin:14px 0 0;
}

.tmr-about-footer{
  position:relative;
  z-index:1;
  width:min(1180px, calc(100% - 32px));
  margin:0 auto 30px;
  padding:22px 0 0;
  border-top:1px solid rgba(246,199,122,.12);
  color:var(--tmr-muted);
  text-align:center;
}

@media(max-width:980px){
  .tmr-about-hero{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .tmr-about-grid.four,
  .tmr-about-grid.three{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .tmr-about-crest-card{
    max-width:620px;
  }
}

@media(max-width:680px){
  .tmr-about-shell{
    width:min(100% - 24px, 1180px);
    padding-top:24px;
  }
  .tmr-about-hero{
    padding-top:34px;
  }
  .tmr-about-grid.two,
  .tmr-about-grid.three,
  .tmr-about-grid.four{
    grid-template-columns:1fr;
  }
  .tmr-about-actions,
  .tmr-about-join{
    align-items:stretch;
    flex-direction:column;
  }
  .tmr-about-btn{
    width:100%;
  }
  .tmr-rule-card{
    padding-left:22px;
    padding-top:82px;
  }
}


/* =====================================================
   V63 Live Update Status
   ===================================================== */
#tmr-live-status{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9300;
  display:inline-flex;
  align-items:center;
  gap:9px;
  max-width:min(310px, calc(100vw - 32px));
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(246,199,122,.22);
  background:rgba(8,3,6,.78);
  color:var(--tmr-muted);
  box-shadow:0 14px 46px rgba(0,0,0,.36);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font:800 .72rem/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .22s ease, opacity .22s ease, border-color .22s ease, background .22s ease;
}
#tmr-live-status:hover{
  transform:translateY(-2px);
  border-color:rgba(246,199,122,.36);
  background:rgba(20,7,10,.88);
}
#tmr-live-status .dot{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--tmr-gold);
  box-shadow:0 0 14px rgba(246,199,122,.42);
}
#tmr-live-status.running .dot{
  background:var(--tmr-ember);
  animation:tmrLivePulse 1s ease-in-out infinite;
}
#tmr-live-status.ok .dot{background:#77e6a7;box-shadow:0 0 14px rgba(119,230,167,.32);}
#tmr-live-status.warn .dot{background:#f6c77a;}
#tmr-live-status.error .dot{background:#ff6b6b;}
@keyframes tmrLivePulse{50%{transform:scale(1.45);opacity:.55}}
@media(max-width:680px){
  #tmr-live-status{
    right:10px;
    bottom:10px;
    max-width:calc(100vw - 20px);
    min-height:38px;
    padding:9px 11px;
    font-size:.62rem;
  }
}


/* V64 Economy readability fixes */
.tmr-econ-item,
#recentDrops b,
#topPlayers b,
.economy-card b{
  word-break:break-word;
}
.tmr-econ-table td,
.tmr-econ-row{
  line-height:1.38;
}
.tmr-econ-muted{
  display:block;
  margin-top:4px;
  opacity:.72;
}
.v50-econ-untradeable,
.v50-econ-untradeable-row{
  color:#d7b98b!important;
}
