/* Control Panel Body */
.control-panel-body {
  background-color: #f0f0f0;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
  padding: 0;
}


/* Scale down referee modal content to 25% for control panel viewfinder */
.control-panel-body .referee-modal-body {
  transform: scale(0.25);
  transform-origin: center center;
  width: 400%; /* 4x width to compensate for 25% scaling */
  height: 400%; /* 4x height to compensate for 25% scaling */
  min-height: 100vh; /* Ensure it fills the viewfinder height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Ensure the modal overlay still covers the entire viewfinder */
.control-panel-body .referee-modal-overlay {
  display: none;
  position: absolute;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  animation: fadeIn 0.3s ease;
}

.control-panel-body .referee-modal-content {
  background-color: transparent;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Hide content that extends beyond viewfinder */
}

/* Ensure single and split displays fill the viewfinder height */
.control-panel-body .single-team-display {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.control-panel-body .split-team-display {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* Viewer Window */
#viewer-window {
  position: absolute;
  top: 20px;
  right: 20px;
  width: calc(50% - 30px);
  height: calc(50vh - 30px);
  background-color: black;
  overflow: hidden;
  border: 5px solid #333;
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

#viewer-content {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
  position: relative;
  overflow: hidden;
}

/* Override fixed positioning for control panel viewer */
.control-panel-body #timer-section {
  position: absolute !important;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.control-panel-body #country-flags {
  position: absolute !important;
  top: 0.5em;
  left: 0;
  right: 0;
  z-index: 20;
  justify-content: space-between !important;
}

.control-panel-body #warning-rectangles {
  position: absolute !important;
  top: calc(70% + 80px);
  left: 0;
  right: 0;
  z-index: 5;
}

.control-panel-body #main-content {
  position: absolute !important;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Swap red and blue positions in viewfinder */
.control-panel-body .left-flag {
  order: 2 !important;
}

.control-panel-body .right-flag {
  order: 1 !important;
}

.control-panel-body #overall-score {
  flex-direction: row-reverse !important;
}


.control-panel-body .blue-warnings-side {
  order: 2 !important;
  justify-content: flex-end !important; /* Blue warnings go from outside to inside (right to left) */
  flex-direction: row-reverse !important;
}

.control-panel-body .red-warnings-side {
  order: 1 !important;
  justify-content: flex-end !important; /* Red warnings go from outside to inside (right to left) */
  flex-direction: row !important;
}

/* Move triangles to inside corners in viewfinder */
.control-panel-body .red-triangle {
  left: 0 !important;
  right: auto !important;
}

.control-panel-body .blue-triangle {
  right: 0 !important;
  left: auto !important;
}

/* Left Side Draw Controls Area */
#upper-control-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(50% - 30px);
  height: calc(100vh - 40px);
  background-color: #d3d3d3;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 100;
  box-sizing: border-box;
  overflow: hidden;
}

#upper-control-panel h2 {
  color: #333;
  text-align: center;
  margin: 0 0 15px 0;
  font-size: 1.5em;
  font-weight: bold;
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 2px solid #e0e0e0;
}

#upper-control-buttons {
  display: flex;
  flex-direction: row;
  gap: 15px;
  height: 100%;
}

/* Athlete Control Area - Left side of Draw Controls */
#athlete-control-area {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border: 2px solid #e9ecef;
  width: 45%;
  height: 220px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 80px;
  left: 20px;
}

#athlete-control-area h3 {
  color: #495057;
  margin: 0 0 8px 0;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border: 1px solid #dee2e6;
}

.athlete-control-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.athlete-control-content p {
  color: #6c757d;
  font-size: 0.8em;
  line-height: 1.3;
  margin: 0;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef;
}

/* Athlete Labels Container */
.athlete-labels-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  margin-bottom: 6px;
}

.athlete-label-left,
.athlete-label-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  position: relative;
  height: 100%;
}

.athlete-label-text {
  font-weight: bold;
  font-size: 0.9em;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

.athlete-dropdown {
  padding: 6px 10px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 0.8em;
  color: #495057;
  cursor: pointer;
  transition: border-color 0.2s ease;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

.athlete-name-input {
  padding: 6px 10px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 0.8em;
  color: #495057;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  transition: border-color 0.2s ease;
}

.athlete-name-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.athlete-name-input::placeholder {
  color: #adb5bd;
  font-style: italic;
}

.athlete-confirm-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.athlete-confirm-btn:hover {
  background-color: #0056b3;
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

.athlete-confirm-btn:active {
  transform: translateX(-50%) translateY(0);
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.athlete-label-left .athlete-label-text {
  color: #dc3545; /* Red color for red athlete */
}

.athlete-label-right .athlete-label-text {
  color: #007bff; /* Blue color for blue athlete */
}

.athlete-separator {
  width: 2px;
  height: 120px;
  background-color: #dee2e6;
  margin: 0 10px;
  border-radius: 1px;
}

.athlete-dropdown {
  width: 100%;
  padding: 6px 10px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 0.8em;
  color: #495057;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.athlete-dropdown:hover {
  border-color: #adb5bd;
}

.athlete-dropdown:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.quick-timer-group, .quick-score-group {
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex: 1;
  min-height: fit-content;
}

.quick-timer-group h3, .quick-score-group h3 {
  color: #333;
  margin: 0 0 8px 0;
  font-size: 0.9em;
  text-align: center;
}

.quick-timer-group button {
  padding: 8px 16px;
  margin: 2px;
  border: none;
  border-radius: 4px;
  background-color: #2196F3;
  color: white;
  cursor: pointer;
  font-size: 0.8em;
  width: 100%;
}

.quick-timer-group button:hover {
  background-color: #1976D2;
}

.quick-score-controls {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.quick-score-control {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quick-score-control label {
  font-size: 0.7em;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.quick-score-control button {
  padding: 4px 8px;
  margin: 1px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.7em;
  min-width: 30px;
}

.quick-score-control button[data-color="blue"] {
  background-color: #2196F3;
  color: white;
}

.quick-score-control button[data-color="red"] {
  background-color: #f44336;
  color: white;
}

.quick-score-control button:hover {
  opacity: 0.8;
}

/* Control Panel Area - Bottom Right Quadrant */
#control-panel {
  position: absolute;
  top: calc(50vh + 10px);
  right: 20px;
  width: calc(50% - 30px);
  height: calc(50vh - 30px);
  background-color: #d3d3d3;
  padding: 10px 20px;
  border-radius: 15px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

#control-panel h2 {
  color: #333;
  text-align: center;
  margin: 0 0 10px 0;
  font-size: 1.5em;
  font-weight: bold;
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 2px solid #e0e0e0;
}

#control-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
  height: 100%;
  position: relative;
}

.control-group {
  background-color: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex: 0 0 auto;
  min-height: fit-content;
  height: auto;
  overflow: visible;
}

.control-group h3 {
  color: #333;
  margin: 0 0 10px 0;
  font-size: 0.9em;
  text-align: center;
}

/* Athletes section removed */

/* Timer Group - 25% */
.timer-group {
  flex: 0 0 auto;
  max-width: 150px;
  position: absolute;
  left: 25%;
  top: 5%;
  transform: translateX(-50%);
}

/* Score Group - 75% */
.score-group {
  flex: 0 0 auto; /* Don't take up remaining space */
  background-color: white !important;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  min-height: fit-content;
  height: auto;
  overflow: visible;
  width: 400px; /* Fixed width for scores section */
  max-width: none;
  position: absolute;
  left: 75%;
  top: 5%;
  transform: translateX(-50%);
  max-height: calc(100% - 20px);
}

/* All athlete-related CSS removed */

.confirm-btn:hover {
  background-color: #218838;
  transform: scale(1.05);
}

.confirm-btn:active {
  transform: scale(0.95);
}

/* Score Controls */
.score-controls-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: relative;
}

.left-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}

.right-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}

.score-controls {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.score-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.score-control label {
  font-size: 0.8em;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.score-btn-row {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
}

.score-btn {
  padding: 4px 8px;
  font-size: 0.7em;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 35px;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-btn[data-color="blue"] {
  background-color: #2196F3;
  color: white;
}

.score-btn[data-color="red"] {
  background-color: #f44336;
  color: white;
}

.score-btn:hover {
  opacity: 0.8;
}

.kick-btn, .sweep-btn {
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.btn-text {
  font-size: 0.8em;
  font-weight: bold;
  line-height: 1;
}

.btn-subtext {
  font-size: 0.6em;
  font-weight: bold;
  line-height: 1;
  margin-top: 3px;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Button Click Animation */
@keyframes buttonDepress {
  0% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(0.95);
  }
  100% { 
    transform: scale(1);
  }
}

.button-clicked {
  animation: buttonDepress 0.15s ease-in-out;
}

/* Senchu Controls */
.senchu-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: transparent;
}

.senchu-controls h4 {
  font-size: 0.8em;
  font-weight: bold;
  color: #333;
  margin: 0;
  text-align: center;
}

.senchu-btn-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
}

.senchu-btn-row button {
  padding: 6px 12px;
  font-size: 0.7em;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: lightgray;
  color: black;
  min-width: 80px;
}

.senchu-btn-row button:hover {
  background-color: #45a049;
}

/* Warning Controls */
.warning-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: transparent;
}

.warning-controls h4 {
  font-size: 0.8em;
  font-weight: bold;
  color: #333;
  margin: 0;
  text-align: center;
}

.warning-control {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.warning-control label {
  font-size: 0.7em;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.warning-btn-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
}

.warning-btn-row button {
  padding: 6px 12px;
  font-size: 0.7em;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #6c757d;
  color: white;
  min-width: 40px;
}

.warning-btn-row button:hover {
  background-color: #5a6268;
}

/* Reset Controls - Bottom Right Quadrant */
.reset-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: transparent;
}


/* Lower Control Panel Styling */
#lower-control-panel {
  padding: 8px;
  margin-top: 10px;
}


#lower-control-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.control-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

/* Timer Control Area */
#timer-control-area {
  background-color: #f8f9fa;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border: 2px solid #e9ecef;
  width: 35%;
  height: 209px;
  display: flex;
  flex-direction: column;
}

#timer-control-area h3 {
  color: #495057;
  margin: 0 0 5px 0;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border: 1px solid #dee2e6;
}

.timer-control-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.timer-controls-container {
  display: flex;
  flex: 1;
  justify-content: center;
}

.timer-control-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 10px;
}


.timer-btn-row {
  display: flex;
  gap: 25px;
  margin-bottom: 8px;
}

.timer-btn {
  padding: 13px 21px;
  border: none;
  border-radius: 4px;
  font-size: 1.43em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.timer-btn.primary-btn {
  background-color: #27ae60;
  color: white;
}

.timer-btn.primary-btn:hover {
  background-color: #229954;
}

.timer-btn.secondary-btn {
  background-color: #e74c3c;
  color: white;
}

.timer-btn.secondary-btn:hover {
  background-color: #c0392b;
}

.timer-btn.tertiary-btn {
  background-color: #3498db;
  color: white;
}

.timer-btn.tertiary-btn:hover {
  background-color: #2980b9;
}


/* Score Control Area */
#score-control-area {
  background-color: #f8f9fa;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border: 2px solid #e9ecef;
  width: 60%;
  height: 209px;
  display: flex;
  flex-direction: column;
}

/* Video Review Area */
#video-review-area {
  background-color: #f8f9fa;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border: 2px solid #e9ecef;
  width: 100%;
  height: 70px;
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

#score-control-area h3 {
  color: #495057;
  margin: 0 0 3px 0;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border: 1px solid #dee2e6;
}

#video-review-area h3 {
  color: #495057;
  margin: 0 0 5px 0;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border: 1px solid #dee2e6;
}

.video-review-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.video-review-sections {
  display: flex;
  gap: 6px;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 8px;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.video-review-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border-radius: 4px;
  padding: 4px;
  border: none;
}

.video-review-section.red-section {
  border-left: 3px solid #e74c3c;
  background-color: rgba(231, 76, 60, 0.05);
  border-radius: 4px;
}

.video-review-section.blue-section {
  border-left: 3px solid #3498db;
  background-color: rgba(52, 152, 219, 0.05);
  border-radius: 4px;
}

.section-header {
  text-align: center;
  font-weight: bold;
  font-size: 0.7em;
  color: #2c3e50;
  margin-bottom: 2px;
  padding: 1px 0;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.video-review-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  flex: 1;
}

.video-review-btn {
  padding: 3px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.6em;
  font-weight: bold;
  transition: all 0.2s ease;
  min-width: 45px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.video-review-btn:hover {
  transform: scale(1.05);
}

.video-review-btn:active {
  transform: scale(0.95);
}

.video-review-btn.primary-btn {
  background-color: #27ae60;
  color: white;
  grid-column: 1 / -1;
}

.video-review-btn.toggle-btn {
  background-color: #9b59b6;
  color: white;
  grid-column: 3;
  grid-row: 3;
}

.video-review-btn.primary-btn:hover {
  background-color: #229954;
}

.video-review-btn.toggle-btn:hover {
  background-color: #8e44ad;
}

.video-review-btn.point-btn {
  background-color: #f39c12;
  color: white;
}

.video-review-btn.point-btn:hover {
  background-color: #e67e22;
}

.video-review-btn.confirm-btn {
  background-color: #27ae60;
  color: white;
}

.video-review-btn.confirm-btn:hover {
  background-color: #229954;
}

.video-review-btn.deny-btn {
  background-color: #e74c3c;
  color: white;
}

.video-review-btn.deny-btn:hover {
  background-color: #c0392b;
}

.video-review-status {
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-indicator {
  background-color: #ecf0f1;
  color: #2c3e50;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: bold;
  border: 1px solid #bdc3c7;
}

.vr-banner {
  background-color: #cc6600; /* Dark orange */
  color: white;
  font-weight: bold;
  font-size: 0.1em; /* Even smaller font to ensure it fits within the banner */
  padding: 0;
  border-radius: 0 0 10px 10px; /* Rounded bottom corners */
  width: 100%;
  height: 20%; /* Take up exactly 20% of the small square height */
  text-align: center;
  position: absolute;
  bottom: 0;
  display: flex; /* Always visible when small square is visible */
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensure text doesn't overflow the banner */
  box-sizing: border-box; /* Include padding in the height calculation */
}

/* VR card color states */
.small-square.hidden {
  background-color: #000000 !important; /* Black background to blend with page */
}

.red-small-square.hidden {
  background-color: #000000 !important; /* Black background to blend with page */
}

.blue-small-square.hidden {
  background-color: #000000 !important; /* Black background to blend with page */
}

.small-square.hidden .vr-banner {
  background-color: #000000 !important; /* Black VR banner to blend with background */
  color: #000000 !important; /* Black text to make it invisible */
}

/* VR Modal Overlay Styles */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 25%; /* Start at 25% from left */
  top: 25%; /* Start at 25% from top */
  width: 50%; /* Take up 50% of width */
  height: 50%; /* Take up 50% of height */
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
  border: 3px solid #333;
  border-radius: 15px;
  animation: fadeIn 0.3s ease;
}

.modal-overlay .modal-content {
  background-color: transparent;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
  box-shadow: none;
  animation: none;
  display: flex;
  flex-direction: column;
}

.modal-overlay .modal-header {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  color: white;
  padding: 15px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-overlay .modal-header h2 {
  margin: 0;
  font-size: 1.2em;
  font-weight: bold;
}

.modal-overlay .close {
  color: white;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-overlay .close:hover {
  color: #ff6b6b;
}

.modal-overlay .modal-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.modal-overlay .modal-body.red-theme {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.8) 0%, rgba(238, 90, 36, 0.8) 100%);
  color: white;
}

.modal-overlay .modal-body.blue-theme {
  background: linear-gradient(135deg, rgba(116, 185, 255, 0.8) 0%, rgba(9, 132, 227, 0.8) 100%);
  color: white;
}

.modal-overlay #modal-athlete-info {
  text-align: center;
  margin-bottom: 20px;
}

.modal-overlay .athlete-display .flag-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.modal-overlay .athlete-display .flag {
  width: 50px;
  height: 35px;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  border: 2px solid #333;
}

.modal-overlay .athlete-display .country-code {
  font-size: 1em;
  font-weight: bold;
}

.modal-overlay .athlete-display .last-name {
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
}

/* Viewfinder VR Modal Styles - Match Scoreboard Modal */
.viewfinder-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.viewfinder-modal-content {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  background-color: transparent;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  z-index: 1001;
}

.viewfinder-modal-body {
  padding: 15px 15px 30px 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
}

.viewfinder-modal-body.red-theme {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.8) 0%, rgba(238, 90, 36, 0.8) 100%);
  color: white;
}

.viewfinder-modal-body.blue-theme {
  background: linear-gradient(135deg, rgba(116, 185, 255, 0.8) 0%, rgba(9, 132, 227, 0.8) 100%);
  color: white;
}

.viewfinder-modal-title {
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  margin: 0 0 15px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
}

.viewfinder-athlete-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.viewfinder-athlete-flag {
  width: 120px;
  height: 80px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: none;
}

.viewfinder-number-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 4px solid rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.viewfinder-number-bubble span {
  font-size: 4em;
  font-weight: bold;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.viewfinder-number-bubble.confirm {
  background-color: rgba(76, 175, 80, 0.3);
}

.viewfinder-number-bubble.deny {
  background-color: rgba(244, 67, 54, 0.3);
}

.viewfinder-number-bubble.confirm::after {
  content: "✓";
  position: absolute;
  font-size: 4em;
  color: rgba(76, 175, 80, 0.9);
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 1;
  font-family: Arial, sans-serif;
}

.viewfinder-number-bubble.deny::after {
  content: "✕";
  position: absolute;
  font-size: 4em;
  color: rgba(244, 67, 54, 0.9);
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 1;
  font-family: Arial, sans-serif;
}

.viewfinder-feedback-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.8em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  z-index: 10;
}

.viewfinder-feedback-text.yes {
  color: #4CAF50;
}

.viewfinder-feedback-text.no {
  color: #F44336;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.score-control-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.score-controls-container {
  display: flex;
  flex: 1;
  gap: 10px;
}

.score-control-left, .score-control-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
}

.warning-controls {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.warning-label-text {
  font-size: 0.8em;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 2px;
  text-align: center;
}

.warning-btn-row {
  display: flex;
  gap: 5px;
}

.warning-decrement, .warning-increment {
  padding: 4px 8px;
  font-size: 0.7em;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 35px;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warning-decrement {
  background-color: #e74c3c;
  color: white;
}

.warning-decrement:hover {
  background-color: #c0392b;
  opacity: 0.8;
}

.warning-increment {
  background-color: #f39c12;
  color: white;
}

.warning-increment:hover {
  background-color: #e67e22;
  opacity: 0.8;
}

.score-label-text {
  font-size: 0.9em;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
  text-align: center;
}

.score-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  width: 100%;
}

.score-separator {
  width: 2px;
  background-color: #bdc3c7;
  margin: 0 5px;
}



/* Control Panel Header */
.control-panel-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 8px;
}

.control-panel-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5em;
  font-weight: bold;
  flex: 1;
  text-align: left;
}

.reset-btn {
  flex: 1;
  max-width: 50%;
  padding: 18px 24px;
  border: 3px solid #d35400;
  border-radius: 12px;
  font-size: 1.8em;
  font-weight: bold;
  cursor: pointer;
  background: linear-gradient(145deg, #e67e22, #d35400);
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.reset-btn:hover {
  background: linear-gradient(145deg, #d35400, #c0392b);
  border-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.reset-btn:active {
  transform: translateY(0px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.2);
}