body {
  font-family: 'Inter', sans-serif;
  background-color: #1a1b26;
  color: #c0c0c0;
  background-image: url('https://royaledleunlimited.com/assets/images/background.Cy4_ydsm.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.font-cinzel {
  font-family: 'Cinzel', serif;
}
.main-content {
   background-color: rgba(36, 37, 53, 0.85);
   border: 3px solid #a88a4c;
   padding: 1.5rem;
   border-radius: 0.5rem;
   box-shadow: inset 0 0 0 3px #3a3d52, 0 0 15px rgba(241, 196, 15, 0.3);
}
.main-content h3 {
  color: #f1c40f;
}
.header-game-extend .control-btn {
  background: #3a3c4a;
  color: #c0c0c0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
}
.header-game-extend .control-btn:hover {
  background-color: #f1c40f;
  color: #1a1b26;
}
/* Theater Mode Styles */
body.theater-mode {
  overflow: hidden;
}
body.theater-mode .hide-in-theater {
  display: none;
}
body.theater-mode #game-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #1a1b26;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
body.theater-mode #game-wrapper > .main-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}
body.theater-mode #game-container {
   width: 100%;
   flex-grow: 1;
   aspect-ratio: auto;
}
body.theater-mode .header-game {
  width: 100%;
  flex-shrink: 0;
  padding: 0.5rem 1rem;
}
/* Language Dropdown */
.lang-dropdown-content {
  background-color: #2c2e3a;
  border: 1px solid #4a4c5a;
}
.lang-option {
  transition: background-color 0.2s;
}
.lang-option:hover {
  background-color: #4a4c5a;
}
.lang-option .fa-check {
  color: #f1c40f;
}
/* Share Icons */
.share-icon-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid #a88a4c;
  border-radius: 0.5rem;
  color: #c0c0c0;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}
.share-icon-link:hover {
  background-color: #a88a4c;
  color: #1a1b26;
  transform: scale(1.1);
}