/* page layout */
body {
  margin: 0; padding: 0; display: flex; flex-direction: column;
  min-height: 100vh; background-color: #000000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #ffffff;
}

/* header */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; background-color: #111111;
  border-bottom: 2px solid #222222; position: relative; 
  height: 60px; z-index: 100;
}
.logo { width: 220px; height: auto; margin-right: 10px; }

.left-nav, .right-nav { display: flex; align-items: center; gap: 10px; }

/* buttons */
.nav-button {
  background-color: #333333; color: #ffffff; text-decoration: none;
  padding: 8px 15px; border-radius: 5px; font-size: 14px; font-weight: bold;
  transition: all 0.2s; border: 1px solid #444; cursor: pointer;
}
.nav-button:hover { background-color: #555555; }

/* pressed button state */
.nav-button.active-btn {
  background-color: #000000;
  border-color: #222;
  color: #888;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.8); /* Makes it look pressed */
}

/* guide buttons */
.host-btn { background: linear-gradient(135deg, #0055ff, #002288); border-color: #0055ff; }
.host-btn:hover { background: linear-gradient(135deg, #3377ff, #0033bb); }

.streamer-btn { background: linear-gradient(135deg, #009933, #004411); border-color: #009933; }
.streamer-btn:hover { background: linear-gradient(135deg, #00bb44, #006622); }
.admin-btn { background: linear-gradient(135deg, #cc0000, #660000); border-color: #cc0000; }
.admin-btn:hover { background: linear-gradient(135deg, #ff1a1a, #990000); }

/* video grid*/
#wrapper {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 4px; flex-grow: 1; padding: 4px; height: calc(100vh - 80px); 
}
.video-container {
  position: relative; width: 100%; height: 100%;
  background: #1a1a1a url('offline.png') center/contain no-repeat;
}
iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: none; opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 1;
}
.player-label {
  position: absolute; top: 10px; left: 10px; z-index: 10;
  background: rgba(0,0,0,0.7); color: white; padding: 5px 10px;
  border-radius: 4px; font-weight: bold; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease;
}
.video-container:hover .player-label { opacity: 1; }

/* individual player */
.single-view { display: none; flex-direction: column; width: 100%; height: calc(100vh - 80px); }
#single-title {
  text-align: center; font-size: 22px; font-weight: bold;
  margin: 10px 0; letter-spacing: 2px; color: #aaaaaa;
}
.single-iframe-wrapper {
  position: relative; flex-grow: 1; width: 100%;
  background: #1a1a1a url('offline.png') center/contain no-repeat;
}

/* showcase video container */
.showcase-video {
  width: 95%;
  max-width: 1650px;
  margin: 40px auto; 
  border-radius: 8px;
  overflow: hidden; 
  box-shadow: 0px 10px 25px rgba(0,0,0,0.5); 
  font-size: 0;
}

/* guide page styling */
.guide-container { max-width: 800px; margin: 40px auto; padding: 0 20px; }
.guide-container h1 { text-align: center; font-size: 36px; margin-bottom: 10px; }
.subtitle { text-align: center; color: #aaaaaa; font-size: 18px; margin-bottom: 40px; }
.guide-section {
  background-color: #111111; padding: 25px; border-radius: 8px;
  margin-bottom: 25px; border: 1px solid #333;
}
.guide-section h2 { margin-top: 0; border-bottom: 1px solid #333; padding-bottom: 10px; color: #4da6ff; }
.split-instructions { display: flex; gap: 20px; margin-top: 20px; }
.instruction-box {
  flex: 1; background-color: #1a1a1a; padding: 15px;
  border-radius: 6px; border: 1px solid #333;
}
.instruction-box h3 { margin-top: 0; text-align: center; font-size: 18px; }
.instruction-box ul { padding-left: 20px; line-height: 1.6; }
.apply-text { text-align: center; font-weight: bold; margin-top: 25px; font-size: 18px; color: #4da6ff; }
code { background-color: #000; padding: 4px 8px; border-radius: 4px; color: #ff9d00; font-family: monospace; word-break: break-all; }

/* =========================================
   Mobile support (LMAO WHY AM I DOING THIS)
   ========================================= */
@media (max-width: 768px) {
  header {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 15px 10px !important;
    height: auto !important;
  }
  
  .left-nav, .right-nav {
    display: contents !important;
  }
  
  .logo {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 240px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  header .nav-button {
    font-size: 10px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #btn-game1 { grid-column: 1; grid-row: 2; }
  #btn-game2 { grid-column: 2; grid-row: 2; }
  #btn-game3 { grid-column: 3; grid-row: 2; }
  #btn-game4 { grid-column: 4; grid-row: 2; }
  
  #btn-grid { grid-column: 1; grid-row: 3; }
  .streamer-btn { grid-column: 2; grid-row: 3; }
  .host-btn { grid-column: 3; grid-row: 3; }
  .admin-btn { grid-column: 4; grid-row: 3; }

  #wrapper { 
    display: flex; 
    flex-direction: column !important; 
    height: auto !important; 
    padding-bottom: 20px !important; 
  }
  
  .video-container, .single-iframe-wrapper { 
    width: 100% !important; 
    aspect-ratio: 16 / 9 !important; 
    height: auto !important; 
  }
  
  .guide-container { margin: 20px 10px !important; }
  .guide-container h1 { font-size: 24px !important; }
  .split-instructions { flex-direction: column !important; gap: 15px !important; }
  #single-title { font-size: 18px !important; }
}