/* ───────────────────────────────────────────────────────────────────────────── */
/* 1) FONTS & RESET                                                           */
/* ───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'VT323', monospace;
  background-color: #545454;
  transition: background-color 2s ease-in-out;
}

/* Twitch embed background video */
#bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* link reset */
a {
  color: #fff;
  text-decoration: none;
}

/* ───────────────────────────────────────────────────────────────────────────── */
/* 2) RARITY COLOR MODES                                                      */
/* ───────────────────────────────────────────────────────────────────────────── */
body.rarity-shitty    { background-color: #843b00; }
body.rarity-common    { background-color: #ffffff; }
body.rarity-uncommon  { background-color: #7ed957; }
body.rarity-rare      { background-color: #2954e8; }
body.rarity-epic      { background-color: #8c52ff; }
body.rarity-legendary { background-color: #ff8888; }

/* ───────────────────────────────────────────────────────────────────────────── */
/* 3) LAYOUT CONTAINERS & RESPONSIVE                                          */
/* ───────────────────────────────────────────────────────────────────────────── */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

@media (max-width: 800px) {
  .container { padding: 4px; }
}

/* ───────────────────────────────────────────────────────────────────────────── */
/* 4) MENU BUTTONS                                                             */
/* ───────────────────────────────────────────────────────────────────────────── */
.menu-item {
  font-size: 26px;
  padding: 10px 20px;
  margin-bottom: 10px;
  border: 3px solid #ff69b4;
  border-radius: 8px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  cursor: pointer;
  transition: background-color .3s, transform .2s;
}

.menu-item:hover {
  background: rgba(255,255,255,0.4);
  transform: scale(1.05);
  font-weight: bold;
}

@media (max-width: 800px) {
  .menu-item {
    font-size: 18px;
    padding: 8px 0;
    width: 96vw;
    justify-content: center;
  }
}

/* ───────────────────────────────────────────────────────────────────────────── */
/* 5) PROFILE WRAPPER + OFFLINE STATE                                          */
/* ───────────────────────────────────────────────────────────────────────────── */
.profile-wrapper {
  position: relative;
  display: inline-block;
  border: 4px solid #ff69b4;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.offline img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: rgba(255,255,255,0.2);
  border-radius: 0 0 10px 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

.overlay p {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #fff;
  letter-spacing: .1em;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.overlay h2 {
  font-size: 2rem;
  color: #ff69b4;
  letter-spacing: .2em;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* ───────────────────────────────────────────────────────────────────────────── */
/* 6) LIVE EMBED (ONLINE STATE)                                                */
/* ───────────────────────────────────────────────────────────────────────────── */
.online {
  display: none;
}

#twitch-embed {
  aspect-ratio: 16 / 9;
  margin-bottom: 0;
}

/* force embed to fill its container */
#twitch-embed iframe {
  width: 100% !important;
  height: 100% !important;
}

/* make the live embed twice as wide as the default profile */
.online #twitch-embed {
  width: 600px !important;  /* fixed width double of typical photo width */
  max-width: none !important;
  margin-bottom: -5px !important;
}