/* General body styling */
body {
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
  }
  
  /* Control Panel link styling - maximized for mobile */
  .control-panel-link {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    font-size: clamp(24px, 6vw, 40px);
    background-color: rgba(0, 0, 0, 0.7);
    padding: clamp(6px, 1vw, 12px) clamp(12px, 2vw, 20px);
    border-radius: clamp(6px, 1vw, 12px);
    border: 0.1vw solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    white-space: nowrap;
    z-index: 10;
  }
  
  /* Red outer square/ring - maximized for mobile */
  .square {
    width: min(95vw, 95vh);
    height: min(95vw, 95vh);
    background-color: red;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 0.5vw;
    box-shadow: 0 0 2vw rgba(255, 0, 0, 0.5);
    /* Make it responsive while maintaining aspect ratio */
    aspect-ratio: 1;
  }
  
  /* Blue inner square - exactly 8x8 units */
  .square::before {
    content: '';
    position: absolute;
    width: 80%; /* 8 units out of 10 total = 80% */
    height: 80%; /* 8 units out of 10 total = 80% */
    background-color: blue;
    border-radius: 0.1em;
    box-shadow: inset 0 0 0.3em rgba(0, 0, 255, 0.3);
  }
  
  /* Red rectangles - 1x2 units (vertical), positioned symmetrically */
  .rectangle-left, .rectangle-right {
    position: absolute;
    width: 10%; /* 1 unit out of 10 total = 10% */
    height: 20%; /* 2 units out of 10 total = 20% */
    background-color: red;
    border-radius: 0.05em;
    box-shadow: 0 0 0.2em rgba(255, 0, 0, 0.5);
    top: 50%; /* 5 units from top = 50% of 10 units */
    transform: translate(-50%, -50%);
  }
  
  /* Left rectangle at (3.5,5) coordinates */
  .rectangle-left {
    left: 35%; /* 3.5 units from left = 35% of 10 units */
  }
  
  /* Right rectangle at (6.5,5) coordinates */
  .rectangle-right {
    left: 65%; /* 6.5 units from left = 65% of 10 units */
  }
  
  a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
  }
  
  a:hover {
    text-decoration: underline;
    transform: scale(1.05);
  }
  
  .main-scoreboard {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%) translateY(0%);
    font-size: clamp(20px, 5vw, 32px);
    background-color: rgba(0, 0, 0, 0.7);
    padding: clamp(6px, 1vw, 12px) clamp(12px, 2vw, 20px);
    border-radius: clamp(6px, 1vw, 12px);
    border: 0.1vw solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    z-index: 5;
  }
  
  .referee-link {
    position: absolute;
    font-size: clamp(16px, 3.5vw, 28px);
    background-color: rgba(0, 0, 0, 0.7);
    padding: clamp(6px, 1vw, 12px) clamp(12px, 2vw, 20px);
    border-radius: clamp(6px, 1vw, 12px);
    border: 0.1vw solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
  }
  
  .referee1 {
    top: clamp(8px, 2vw, 16px);
    left: clamp(8px, 2vw, 16px);
  }
  
  .referee2 {
    top: clamp(8px, 2vw, 16px);
    right: clamp(8px, 2vw, 16px);
  }
  
  .referee3 {
    bottom: clamp(8px, 2vw, 16px);
    right: clamp(8px, 2vw, 16px);
  }
  
  .referee4 {
    bottom: clamp(8px, 2vw, 16px);
    left: clamp(8px, 2vw, 16px);
  }