/*
============================================================
 SKIBATTLEZ
 HOMEPAGE POLISH V2

 MOCKUP DIRECTION
 PRESENTATION ONLY
 EXISTING SITE TYPOGRAPHY RETAINED
============================================================
*/


/* =========================================================
   HOMEPAGE ENVIRONMENT
========================================================= */

body:has(.home-dashboard) {
  background:
    linear-gradient(
      rgba(3,5,6,.64),
      rgba(3,5,6,.74)
    ),
    url(
      "/assets/homepage-v2/homepage-wallpaper.png?v=1"
    )
    center top
    /
    cover
    fixed
    no-repeat,
    #050708 !important;
}


body:has(.home-dashboard) header {
  position:relative;
  z-index:20;

  min-height:124px !important;

  border-bottom:
    1px solid
    rgba(218,166,35,.38) !important;

  background:
    linear-gradient(
      90deg,
      rgba(5,8,9,.985),
      rgba(8,11,12,.92),
      rgba(5,8,9,.985)
    ) !important;

  box-shadow:
    0 10px 35px
    rgba(0,0,0,.30);
}


body:has(.home-dashboard) main {
  width:
    min(
      1180px,
      calc(100% - 34px)
    ) !important;

  margin:
    34px
    auto
    55px !important;
}


/* =========================================================
   LOGO
========================================================= */

body:has(.home-dashboard)
.site-logo-link {
  width:275px !important;
  height:110px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:flex-start !important;

  overflow:hidden !important;

  flex:
    0
    0
    275px !important;
}


body:has(.home-dashboard)
.site-logo-image,
body:has(.home-dashboard)
.logo img {
  display:block !important;

  width:275px !important;
  height:110px !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;
  object-position:center !important;

  transform:
    scale(1.62) !important;

  transform-origin:
    center center !important;

  filter:
    drop-shadow(
      0 5px 12px
      rgba(0,0,0,.55)
    )
    drop-shadow(
      0 0 7px
      rgba(218,166,35,.10)
    );
}


/* =========================================================
   NAV
========================================================= */

body:has(.home-dashboard)
.desktop-nav a {
  font-weight:700;

  transition:
    color .16s ease,
    text-shadow .16s ease;
}


body:has(.home-dashboard)
.desktop-nav a:hover {
  color:var(--gold);

  text-shadow:
    0 0 10px
    rgba(241,194,50,.22);
}


/* =========================================================
   DASHBOARD
========================================================= */

.home-dashboard {
  gap:18px !important;
}


.home-top-grid {
  grid-template-columns:
    minmax(0,1.68fr)
    minmax(315px,.90fr) !important;

  gap:16px !important;

  align-items:stretch;
}


.home-bottom-grid {
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:16px !important;

  align-items:stretch;
}


/* =========================================================
   CARD LANGUAGE
========================================================= */

.home-panel,
.home-current-battle,
.home-battle-card {
  border:
    1px solid
    rgba(220,167,34,.58) !important;

  border-radius:11px !important;

  background-color:
    rgba(5,8,9,.89) !important;

  box-shadow:
    0 12px 34px
      rgba(0,0,0,.36),
    inset 0 0 28px
      rgba(255,195,48,.018),
    0 0 14px
      rgba(225,171,35,.035) !important;
}


.home-panel {
  position:relative;

  overflow:hidden;
}


.home-panel::before {
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      #dba72a,
      rgba(219,167,42,.28),
      transparent 74%
    );
}


/* =========================================================
   HEADINGS
   NO FONT OVERRIDE — USE EXISTING SITE FONT
========================================================= */

.home-section-heading {
  position:relative;

  margin-bottom:15px !important;

  padding-bottom:13px;

  border-bottom:
    1px solid
    rgba(218,166,35,.20);
}


.home-section-heading h2 {
  display:flex;

  align-items:center;

  gap:10px;

  margin:0;

  line-height:1;

  letter-spacing:0;
}


.home-section-heading h2::after {
  content:"";

  width:40px;
  height:3px;

  margin-left:3px;

  background:
    linear-gradient(
      90deg,
      #e0aa2b,
      #f0c34a
    );

  transform:
    skewX(-18deg);

  box-shadow:
    0 0 10px
    rgba(225,170,38,.16);
}


.home-heading-icon {
  width:38px;
  height:38px;

  flex:
    0
    0
    38px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(229,175,38,.58);

  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      rgba(226,171,36,.18),
      rgba(226,171,36,.035)
    );

  color:#e0aa2b;

  box-shadow:
    inset 0 0 16px
      rgba(235,183,42,.06),
    0 0 10px
      rgba(221,167,35,.06);

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    sans-serif;

  font-size:18px;
}


.home-section-heading > a {
  margin-left:auto;

  font-size:11px;
  font-weight:800;

  letter-spacing:.08em;

  text-decoration:none;

  text-transform:uppercase;

  transition:
    color .16s ease;
}


.home-section-heading > a:hover {
  color:var(--gold);
}


/* =========================================================
   CURRENT BATTLE — REAL IMAGE
========================================================= */

.home-current-battle {
  position:relative;

  overflow:hidden;

  min-height:340px;

  display:flex;

  flex-direction:column;
  justify-content:center;

  padding:
    36px
    38px !important;

  border-color:
    rgba(236,182,42,.86) !important;

  background:
    linear-gradient(
      90deg,
      rgba(4,7,8,.98) 0%,
      rgba(5,8,9,.94) 43%,
      rgba(5,7,8,.45) 72%,
      rgba(4,6,7,.20) 100%
    ),
    url(
      "/assets/homepage-v2/battle-visual-01-turntable.png?v=1"
    )
    76% center
    /
    cover
    no-repeat !important;

  box-shadow:
    0 16px 42px
      rgba(0,0,0,.42),
    inset 0 0 45px
      rgba(242,186,41,.028),
    0 0 18px
      rgba(231,177,40,.09) !important;
}


.home-current-battle::before {
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      #efbd3d,
      #c88d11,
      rgba(207,151,22,.12),
      transparent
    );
}


.home-current-battle::after {
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 72% 52%,
      transparent 0%,
      transparent 18%,
      rgba(4,6,7,.10) 38%,
      rgba(4,6,7,.36) 70%,
      rgba(4,6,7,.62) 100%
    );
}


.home-current-battle > * {
  position:relative;

  z-index:2;
}


.home-current-battle
> .gold:first-child {
  display:inline-flex;

  align-items:center;

  align-self:flex-start;

  padding:
    6px
    12px;

  border:
    1px solid
    rgba(232,179,42,.68);

  border-radius:8px;

  background:
    rgba(28,22,5,.60);

  color:#efbd3d;

  font-size:11px;
}


.home-current-battle
> .gold:first-child::before {
  content:"●";

  margin-right:8px;

  color:#f4c54a;

  font-size:8px;

  text-shadow:
    0 0 7px
    #f0b933;
}


.home-current-battle h1 {
  max-width:590px;

  margin:
    20px
    0
    8px !important;

  line-height:.98;

  letter-spacing:-1px;

  text-shadow:
    0 4px 20px
    rgba(0,0,0,.72);
}


.home-current-battle > p {
  max-width:630px;

  text-shadow:
    0 3px 12px
    rgba(0,0,0,.82);
}


.home-current-meta {
  margin-top:20px !important;
}


.home-actions {
  margin-top:24px !important;
}


/* =========================================================
   BUTTONS — MOCKUP STYLE
========================================================= */

.home-dashboard
.button:not(.secondary) {
  border:
    1px solid
    #e6ae2f !important;

  background:
    linear-gradient(
      180deg,
      #f3c74f,
      #dda31f
    ) !important;

  color:#100d05 !important;

  font-weight:900;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.35),
    0 0 18px
      rgba(232,177,39,.16);

  text-shadow:none;
}


.home-dashboard
.button:not(.secondary):hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.06);
}


.home-dashboard
.button.secondary {
  border:
    1px solid
    rgba(225,173,41,.30);

  background:
    rgba(7,10,11,.72);

  color:#e9ecec;
}


/* =========================================================
   COMMUNITY PULSE
========================================================= */

.home-topic {
  margin:
    8px
    0;

  padding:
    13px
    14px !important;

  border:
    1px solid
    rgba(255,255,255,.075) !important;

  border-radius:8px;

  background:
    rgba(7,10,11,.70);

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}


.home-topic:first-of-type {
  padding-top:13px !important;
}


.home-topic:last-of-type {
  padding-bottom:13px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.075) !important;
}


.home-topic:hover {
  transform:
    translateX(2px);

  border-color:
    rgba(224,171,39,.55) !important;

  background:
    rgba(15,14,9,.78);
}


/* =========================================================
   LATEST BATTLES — IMAGE CARDS
========================================================= */

.home-battle-grid {
  gap:12px !important;
}


.home-battle-card {
  position:relative;

  overflow:hidden;

  min-height:205px;

  padding:22px !important;

  background-position:
    center !important;

  background-size:
    cover !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}


.home-battle-card::before {
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(4,7,8,.40),
      rgba(4,7,8,.74) 55%,
      rgba(4,7,8,.94)
    );

  z-index:0;
}


.home-battle-card::after {
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      #e0aa2b,
      rgba(224,170,43,.24),
      transparent
    );

  z-index:1;
}


.home-battle-card > * {
  position:relative;

  z-index:2;
}


.home-battle-card:hover {
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(237,183,43,.85) !important;

  box-shadow:
    0 16px 36px
      rgba(0,0,0,.45),
    0 0 15px
      rgba(228,174,40,.08) !important;
}


/* =========================================================
   ANNOUNCEMENTS
========================================================= */

.home-news-item {
  margin:
    8px
    0;

  padding:
    14px
    15px !important;

  border:
    1px solid
    rgba(255,255,255,.075) !important;

  border-left:
    3px solid
    #dfa729 !important;

  border-radius:8px;

  background:
    linear-gradient(
      90deg,
      rgba(221,164,30,.055),
      rgba(6,9,10,.72) 30%
    );
}


.home-news-item:first-of-type {
  padding-top:14px !important;
}


.home-news-item:last-of-type {
  padding-bottom:14px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.075) !important;
}


.home-news-item p {
  color:#c2c8ca;

  line-height:1.48;
}


/* =========================================================
   TOP PRODUCERS
========================================================= */

.home-ranking-box {
  position:relative;

  overflow:hidden;

  min-height:280px !important;

  justify-content:center !important;

  background:
    linear-gradient(
      90deg,
      rgba(5,8,9,.96),
      rgba(6,9,10,.80),
      rgba(4,6,7,.42)
    ),
    url(
      "/assets/homepage-v2/battle-visual-04-trophy.png?v=1"
    )
    78% center
    /
    cover
    no-repeat !important;

  border-color:
    rgba(226,172,38,.78) !important;
}


.home-ranking-box::after {
  content:"👑";

  position:absolute;

  right:20px;
  top:16px;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    sans-serif;

  font-size:58px;

  opacity:.46;

  transform:
    rotate(7deg);

  filter:
    drop-shadow(
      0 0 10px
      rgba(235,181,42,.18)
    );
}


.home-ranking-box > * {
  position:relative;

  z-index:2;
}


.home-ranking-number {
  color:#e9b037 !important;

  opacity:.92 !important;
}


/* =========================================================
   SERVICE TICKER
========================================================= */

.service-ticker {
  border-color:
    rgba(229,174,38,.75) !important;

  background:
    rgba(7,9,10,.91) !important;

  box-shadow:
    0 0 18px
    rgba(224,170,38,.07) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:960px) {

  body:has(.home-dashboard) header {
    min-height:104px !important;
  }

  body:has(.home-dashboard)
  .site-logo-link {
    width:215px !important;
    height:90px !important;

    flex-basis:
      215px !important;
  }

  body:has(.home-dashboard)
  .site-logo-image,
  body:has(.home-dashboard)
  .logo img {
    width:215px !important;
    height:90px !important;

    transform:
      scale(1.55) !important;
  }

  .home-top-grid,
  .home-bottom-grid {
    grid-template-columns:
      1fr !important;
  }

}


@media(max-width:700px) {

  body:has(.home-dashboard) header {
    min-height:82px !important;
  }

  body:has(.home-dashboard)
  .site-logo-link {
    width:145px !important;
    height:68px !important;

    flex-basis:
      145px !important;
  }

  body:has(.home-dashboard)
  .site-logo-image,
  body:has(.home-dashboard)
  .logo img {
    width:145px !important;
    height:68px !important;

    transform:
      scale(1.55) !important;
  }

  .home-current-battle {
    min-height:300px;

    padding:
      27px
      22px !important;

    background-position:
      68% center !important;
  }

}


@media(max-width:600px) {

  body:has(.home-dashboard) main {
    width:
      min(
        100% - 22px,
        1180px
      ) !important;

    margin-top:
      20px !important;
  }

  .home-dashboard {
    gap:14px !important;
  }

  .home-current-battle {
    min-height:270px;
  }

  .home-section-heading h2::after {
    width:26px;
  }

  .home-heading-icon {
    width:32px;
    height:32px;

    flex-basis:32px;

    font-size:15px;
  }

  .home-panel,
  .home-battle-card {
    padding:
      18px !important;
  }

}