:root {
    --team-a-bg: #0047AB; /* Cobalt Blue */
    --team-b-bg: #C41E3A; /* Cardinal Red */
    --text-color: #FFFFFF;
    --error-color: #FFDD57; /* Yellow */
    --button-bg: #4CAF50; /* Green */
    --button-text: #FFFFFF;
    --disabled-button-bg: #cccccc;
    --disabled-button-text: #666666;
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --score-font-size-factor: 1; /* Default factor for score font size scaling */
}

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

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevent scrolling */
    font-family: var(--font-family);
    background-color: #333; /* Fallback background */
}

#app {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen {
    display: none; /* Hidden by default */
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    position: relative; /* Needed for absolute positioning of controls */
}

.screen.active {
    display: flex; /* Show active screen */
}

/* Start Screen Styles */
#start-screen {
    background-color: #f0f0f0;
}

#start-screen h1 {
    margin-bottom: 20px;
    color: #333;
}

.input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Make items stretch to container width */
    width: 80%; /* Control overall width */
    max-width: 400px; /* Max width for larger screens */
    margin-bottom: 15px;
}

.input-group {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    margin-bottom: 15px; /* Space between input groups */
    text-align: left; /* Align labels to the left */
}

.input-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

#hostname-input,
#match-id-input {
    padding: 15px;
    font-size: 1.1em; /* Slightly smaller than button */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* Make inputs take full width of their container */
    /* Prevent zooming on focus in iOS */
    font-size: 16px;
}

/* Remove spinners from number input */
#match-id-input::-webkit-outer-spin-button,
#match-id-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#match-id-input[type=number] {
  -moz-appearance: textfield;
}


#load-match-button {
    padding: 15px 20px;
    font-size: 1.2em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--button-bg);
    color: var(--button-text);
    width: 80%; /* Match input container width */
    max-width: 400px;
    margin-bottom: 10px; /* Add space below load button */
    /* Prevent zooming on focus in iOS */
    font-size: 16px;
}

#load-match-button:disabled {
    background-color: var(--disabled-button-bg);
    color: var(--disabled-button-text);
    cursor: not-allowed;
}

/* Scoreboard Screen Styles */
#scoreboard-screen {
    position: relative; /* For absolute positioning of children */
    background-color: #000; /* Default background */
    color: var(--text-color);
    justify-content: stretch; /* Stretch children vertically */
    align-items: stretch; /* Stretch children horizontally */
    padding: 0; /* Remove padding to allow panels full bleed */
}

.scoreboard-container {
    display: flex;
    flex-grow: 1; /* Take available space */
    width: 100%;
    height: 100%; /* Take full height */
}

.team-panel {
    flex: 1; /* Each panel takes half the width */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden; /* Prevent content overflow */
}

#team-a {
    background-color: var(--team-a-bg);
}

#team-b {
    background-color: var(--team-b-bg);
}

.score {
    /* Use calc() to multiply the base clamp value by the factor */
    font-size: calc(clamp(10vw, 25vh, 300px) * var(--score-font-size-factor));
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.1em;
    transition: font-size 0.2s ease-in-out; /* Re-added transition */
}

.team-name {
    font-size: clamp(3vw, 6vh, 60px); /* Responsive font size */
    font-weight: normal;
    word-break: break-word; /* Wrap long names */
}

/* Shared button styles */
.reload-button,
#reset-button {
    padding: 10px 15px;
    font-size: 1em;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
}

/* Start screen reload button positioning */
#reload-button-start {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

/* Start screen version display positioning */
#version-display {
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 0.8em;
    color: #666;
    z-index: 10;
}


/* Scoreboard screen bottom controls */
.controls-bottom-left {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: flex;
    gap: 10px; /* Space between buttons */
    z-index: 10;
}

.controls-bottom-right {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 10px; /* Space between buttons */
    z-index: 10;
}


.font-adjust-button {
    padding: 8px 12px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    min-width: 40px; /* Ensure buttons have a decent size */
    text-align: center;
    touch-action: manipulation; /* Prevent double-tap zoom */
}

.error-message {
    color: var(--error-color);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-weight: bold;
    position: absolute; /* Position error messages */
    bottom: 60px; /* Above reset/font/reload buttons */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: none; /* Hidden by default */
}
#start-screen .error-message {
    position: static; /* Normal position on start screen */
    transform: none;
    background-color: transparent;
    color: red;
    margin-top: 10px; /* Add some space above button */
}

/* Landscape adjustments (optional, Flexbox handles basic layout) */
@media (orientation: landscape) {
    .score {
       /* Adjust font size if needed for landscape - base clamp handles this */
       /* font-size: calc(clamp(10vh, 25vw, 300px) * var(--score-font-size-factor)); */
    }
    .team-name {
       /* Adjust font size if needed for landscape */
       font-size: clamp(3vh, 6vw, 60px);
    }
}