/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  font-family: "ZCOOL QingKe HuangYou", sans-serif;
  text-align: center;
  color: #000;
  background: url('greensmoke.jpg') center / cover no-repeat fixed;
  padding-bottom: 140px;
}

.layout {
  display: flex;
  justify-content: center;
}

.layout::before {
  content: "";
  flex: 0 0 320px;     /* same width as .hero */
}

.wrapper{ 
  max-width:1100px; 
  flex: 0 1 1100px;
  margin: 0 auto; 
  padding: 0 16px; 
  z-index: 2;
}

.hero {
 position: fixed;
  left: -400px;
  top: 0;
  bottom: 100px;             /* <-- height of your audio bar */
  width: 3000px;
  background: url('hero.png') no-repeat left bottom;
  background-position: left bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 0;                /* behind content, above backdrop                                         /* behind your content*/
}

.hero .smoke {
  position: absolute;
  width: 2000px;         /* size of the smoke gif area */
  height: 600px;
  left: -60px;          /* X offset from hero’s left edge – TUNE THIS */
  bottom: 570px;        /* Y offset from hero’s bottom – TUNE THIS */
  background: url('smoke.gif') center/contain no-repeat;
  opacity: 0.30;        /* transparency – adjust to taste */
  pointer-events: none; /* don’t block clicks */
  mix-blend-mode: screen; /* optional: helps blend with background */
}

@media (max-width: 900px) {
  .hero { display: block; }
  body { padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 480px) {
  h1.site-title { font-size: 9vw; }   /* fluid grow */
  h2            { font-size: 5vw; }
  p, a, li      { font-size: 2.6vw; }
}

/* Laptops */
@media (min-width: 900px) {
  h1.site-title { font-size: 72px; }  /* cap */
  h2            { font-size: 36px; }
  p, a, li      { font-size: 18px; }
}

/* Desktops / big screens */
@media (min-width: 1200px) {
  h1.site-title { font-size: 80px; }  /* final cap */
  h2            { font-size: 42px; }
  p, a, li      { font-size: 20px; }
}

h1{
  font-size: 20px;
  color: #ffffff;
  text-shadow:1px 1px 0px #fff;
  margin-top: 35px;
}

h1.site-title {
  font-family: 'Rubik Vinyl', system-ui;
  font-size: 66px;
  margin-top: 100px;
  margin-bottom: 100px;
    animation:
    glow-pulse 1.5s infinite alternate,
    swayScale 3s cubic-bezier(.37,0,.63,1) infinite alternate;
}

@keyframes glow-pulse {
  from {
    text-shadow: 0 0 5px #000, 0 0 15px #00ccaa, 0 0 30px #00ffea;
  }
  to {
    text-shadow: 0 0 15px #00ffea, 0 0 30px #00ccaa, 0 0 60px #00ffea;
  }
}

@keyframes swayScale {
  0%   { transform: rotate(-2.5deg) scale(0.98); }
  100% { transform: rotate( 2.5deg) scale(1.04); }
}

h2{
  font-size: 42px;
  color: #2921ff;
  text-shadow:1px 1px 0px #fff;
  margin-top: 35px;
}

p{
  font-size:26px;
  margin:10px auto;
  width: 80%;
  color: #ffffff;
}

a {
  font-size:26px;
  margin: 10px auto;
  width: 80%;
}

a {
  color:#ffffff;
  background: linear-gradient(to bottom,#ff5454, #ff0000);
  padding: 3px 8px;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 1px 3px #777;
  transition: all 0.2s ease;
}

a:hover {
  background: linear-gradient(to bottom, #ff0000, #ff5454);
  box-shadow: 0 0 5px #000;
}

ul {
  display: inline-block;
  list-style-type:square;
  padding-left: 0;
  margin-top: 20px;
}

li {
  font-size: 16px;
  margin-bottom: 5px;
  color: #ffffff
}

ol {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
  padding-left: 40px;
}

img {
  max-width: 90%;
  border: 3px solid #88b;
  box-shadow: 00 20px #5588ff;
  margin: 20px auto;
}

.scoreboard {
  background: linear-gradient(bottom, #e0ecff, #b0c8ff);
  border: 3px solid #0044aa;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  padding: 15px 25px;
  display: inline-block;
  margin: 20px auto;
}

.scoreboard h2 {
  font-family: Tahoma, sans-serif;
  font-size: 48px;
  color: #002266;
  margin-top: 0;
  margin-bottom: 10px;
  text-shadow: 1px 1px #fff;
}

.scoreboard h2 {
  background: linear-gradient(to bottom, #5ad, #8cf);
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: inset 0 0 3px #fff, 0 0 5px #77f;
}

.scoreboard h3 {
  font-family: Tahoma, sans-serif;
  font-size: 48px;
  color: #002266;
  margin-top: 0;
  margin-bottom: 10px;
  text-shadow: 1px 1px #fff;
}

.scoreboard h3 {
  background: linear-gradient(to bottom, #5ad, #8cf);
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: inset 0 0 3px #fff, 0 0 5px #77f;
}

.unranked {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  text-align: center;
}

li.unranked {
  font-size:18px;
  color:#666;
  font-style: italic;
}

ol.player-rankings {
  display: inline-block;
  margin: 0 auto;
  padding-left: 40px;          
  text-align: left;
}

ol.player-rankings li {
  font-size: 26px;
  line-height: 1.4;
  margin: 4px 0;
}

.rubik-vinyl-regular {
  font-family: "Rubik Vinyl", system-ui;
  font-weight: 400;
  font-style: normal;
}

.zcool-qingke-huangyou-regular {
  font-family: "ZCOOL QingKe HuangYou", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Fixed audio bar */
.audio-bar {
 position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: linear-gradient(to top, rgba(0,255,128,.6), rgba(0,0,0,.6));
  border-top: 2px solid rgba(0,255,128,.8);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.4),
    0 -6px 18px rgba(0,255,234,.7),
    0 -6px 18px rgba(0,0,0,.5);
  padding: 6px 10px 6px;
}

/* Make sure content clears the fixed bar */
body { padding-bottom: 110px; }           /* match iframe height + padding */

/* Player iframe */
.sc-player { display: block; width: 100%; height: 100px; }