/* Main container layout */
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

/* Game background */
.game-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.game-background,
.startScreen {
  animation: fadeIn 0.3s ease-in-out;
}

/* Grid overlay */
.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: -1;
}

/* Game sections */
.info-zone {
  flex: 0 0 auto;
  height: calc(40px + var(--sat));
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  position: relative;
  color: var(--light-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--sat);
  padding-left: 35px;
  padding-right: 0;
  justify-content: space-between;
}

.info-zone .greeting-text {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

/* Toolbar styling */
.info-zone .toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-zone .toolbar-button {
  background-color: rgba(50, 50, 50, 0.8);
  color: var(--light-color);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  font-size: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.info-zone .toolbar-button:hover {
  background-color: rgba(80, 80, 80, 0.9);
  transform: scale(1.05);
}

/* WiFi icon in toolbar */
.info-zone .toolbar .rtt-text-indicator {
  position: static; /* Keep it in the toolbar flow */
  width: auto; /* Adjust to content */
  min-width: 45px; /* Minimum width for readability like "123ms" */
  height: auto; /* Adjust to content */
  padding: 4px 6px; /* Add some padding */
  margin: 0 0 0 5px; /* Adjust margin if needed, original was margin: 10px 0 0 0 for wifi-icon */
  top: auto;
  right: auto;
  font-family: 'Orbitron', sans-serif; /* Sci-fi/tech font */
  font-size: 11px;                     /* Small, clear font size */
  font-weight: bold;
  text-align: center;
  border-radius: 3px; /* Slightly rounded corners */
  background-color: rgba(0,0,0,0.3); /* Subtle background to make text pop */
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  cursor: pointer; /* Keep cursor pointer for click to open panel */
  line-height: 1; /* Ensure text is vertically centered if padding is symmetrical */
  display: flex; /* For centering text if needed */
  align-items: center;
  justify-content: center;
}

/* Color states for the RTT text indicator */
.info-zone .toolbar .rtt-text-indicator.good { 
  color: #4CAF50; /* Green text */
  border: 1px solid rgba(76, 175, 80, 0.5); /* Subtle green border */
}
.info-zone .toolbar .rtt-text-indicator.moderate { 
  color: #FFC107; /* Amber text */
  border: 1px solid rgba(255, 193, 7, 0.5); /* Subtle amber border */
}
.info-zone .toolbar .rtt-text-indicator.poor { 
  color: #FF9800; /* Orange text */
  border: 1px solid rgba(255, 152, 0, 0.5); /* Subtle orange border */
}
.info-zone .toolbar .rtt-text-indicator.critical { 
  color: #F44336; /* Red text */
  border: 1px solid rgba(244, 67, 54, 0.7); /* Stronger red border */
  background-color: rgba(50,0,0,0.5); /* Darker background for critical */
}

/* Icon for music button */
#music-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Icon for sound button */
#sound-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Muted states */
#music-button.muted::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4v-1.73L19.73 21 21 19.73 4.27 3zM14 7h4V3h-6v5.18l2 2z'/%3E%3C/svg%3E");
}

#sound-button.muted::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
}

#music-button.loading::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cdefs%3E%3ClinearGradient x1='0%' y1='0%' x2='0%' y2='100%' id='a'%3E%3Cstop stop-color='%23fff' stop-opacity='0' offset='0%'/%3E%3Cstop stop-color='%23fff' stop-opacity='.3' offset='100%'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M36 19c0-9.94-8.06-18-18-18' stroke='white' stroke-width='4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.75s' repeatCount='indefinite' /%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/* Icon for stats button */
#stats-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 9.2h3V19H5V9.2zM10.6 5h2.8v14h-2.8V5zm5.6 8H19v6h-2.8v-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Icon for share button */
#share-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.game-zone {
  position: relative;
  background-color: var(--dark-bg);
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1/1) {
  .game-zone {
    height: 0;
    padding-bottom: 100%;
  }
  
  .game-zone > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.control-zone {
  flex: 1;
  min-height: 120px;
  background-color: rgba(0, 0, 0, 0.29);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1001;
}

/* ==========================================================================
   NETWORK STATUS ELEMENTS - VERTICAL MODE
   ========================================================================== */

/* Hide all network text messages - only show icon */
.network-notification,
.network-warning-message,
#network-notification-container {
  display: none !important;
}

/* NoWifi icon positioning for vertical mode */
#network-wifi-icon {
  position: fixed !important;
  top: 30% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10000 !important;
  width: 120px !important;
  height: 120px !important;
  transition: opacity 0.3s ease !important;
}

/* Blinking animation for poor connection */
#network-wifi-icon.poor-connection {
  animation: blink-icon 1s infinite !important;
}

/* Stable display for critical connection */
#network-wifi-icon.critical-connection {
  animation: none !important;
  opacity: 1 !important;
}

/* Blinking animation keyframes */
@keyframes blink-icon {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}