/* ==========================================================================
   Endzone Attack Scoreboard - Modern Dark Stadium Design System
   ========================================================================== */

/* Font & Color Token Declarations */
:root {
    --bg-main: radial-gradient(circle at center, #1b1e26 0%, #0b0c0f 100%);
    --bg-card: rgba(14, 16, 22, 0.8);
    --border-card: rgba(255, 255, 255, 0.08);
    
    /* Neon Glow Themes */
    --color-blue: #0003E0;
    --color-blue-glow: rgba(0, 3, 224, 0.4);
    --color-blue-bg: rgba(0, 3, 224, 0.15);
    
    --color-red: #FF0000;
    --color-red-glow: rgba(255, 0, 0, 0.4);
    --color-red-bg: rgba(255, 0, 0, 0.15);
    
    --color-scrimmage: #49A2FF;
    --color-scrimmage-glow: rgba(73, 162, 255, 0.4);
    
    --color-yellow: #ffb700;
    --color-yellow-glow: rgba(255, 183, 0, 0.4);
    
    --text-primary: #ffffff;
    --text-muted: #8e9297;
    --font-digital: 'Orbitron', 'Chakra Petch', monospace;
    --font-ui: 'Outfit', sans-serif;
    
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Reset & Mobile Enhancements */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-ui);
    background: #07080a;
    color: var(--text-primary);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* App Wrapper */
.app-container {
    background: var(--bg-main);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
}

/* ==========================================================================
   Forced 16:9 Aspect Ratio Container
   ========================================================================== */

.scoreboard-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%; /* Spans full height of the app frame */
    overflow: hidden;
    container-type: size;
    container-name: scoreboard-container;
}

.scoreboard {
    /* Enforce 16:9 landscape aspect ratio */
    aspect-ratio: 16 / 9;
    
    /* Calculate size dynamically so it fits in the screen (letterboxes or pillarboxes) */
    width: min(100%, calc((100cqh) * 16 / 9));
    height: min(calc(100cqw * 9 / 16), 100cqh);
    
    display: grid;
    /* Use fr units to prevent grid tracks from expanding beyond 100% due to gaps */
    grid-template-columns: 2.2fr 5.6fr 2.2fr;
    grid-template-rows: auto 1fr; /* Row 1: Header/Scores/Stats fits contents, Row 2: Bottom Field Tracker fills remaining space */
    gap: 1.2cqw; /* Slightly tighter gap to fit everything perfectly inside the 16:9 box */
    padding: 1.2cqw;
    
    position: relative; /* Anchor for absolute overlays and modals */
    container-type: size;
    container-name: scoreboard;
    margin: auto;
    background: var(--bg-card);
    border: 1.5px solid var(--border-card);
    border-radius: 2cqw;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}

.team-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Shift score containers up */
    gap: 1.2cqw; /* Tighten gap between name and score */
    height: 100%;
}

.center-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Shift stats containers up */
    align-items: center;
    gap: 1.2cqw; /* Tighten gap between logo header and stats row */
    height: 100%;
}

/* ==========================================================================
   Possession Areas (Football Token Card)
   ========================================================================== */

.possession-area {
    position: relative; /* Ensure relative for handles */
    width: var(--width-possession, 6cqw);
    height: var(--height-possession, 10.4cqw);
    margin: 0; /* Margin handled by center row flex gaps */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 1.2cqw;
    border: 1.5px dashed rgba(255, 255, 255, 0.05);
    transition: var(--transition-smooth);
}

.center-header-row {
    display: flex;
    align-items: center; /* Vertically align possession markers and logo */
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.5cqw; /* Align nicely with team columns */
    margin-top: 0.5cqw; /* Align with team header top margin */
    margin-bottom: auto; /* Push header row to the top */
}

.possession-area:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.football-wrap {
    width: 4.8cqw; /* Matches vertical aspect ratio of PossesionMarker.png */
    height: 9.6cqw;
    opacity: 0.025;
    transform: scale(0.85);
    transition: var(--transition-bounce);
    display: flex;
    align-items: center;
    justify-content: center;
}

.possession-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Active possession styles */
.possession-active .football-wrap {
    opacity: 1;
}

.possession-active.possession-area {
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
}

#possession-home-area.possession-active .football-wrap {
    filter: drop-shadow(0 0 1.5cqw var(--color-blue-glow)) drop-shadow(0 0.4cqw 0.6cqw rgba(0, 0, 0, 0.5));
    transform: scale(1.15) rotate(-6deg);
}

#possession-away-area.possession-active .football-wrap {
    filter: drop-shadow(0 0 1.5cqw var(--color-red-glow)) drop-shadow(0 0.4cqw 0.6cqw rgba(0, 0, 0, 0.5));
    transform: scale(1.15) rotate(6deg);
}

/* ==========================================================================
   Team Headers
   ========================================================================== */

.team-header {
    border-radius: 0.8cqw;
    overflow: hidden;
    box-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.3);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    margin: 0.5cqw 0;
}

.home-header {
    background: linear-gradient(135deg, #0044bb 0%, #002288 100%);
    box-shadow: 0 0 1.5cqw rgba(0, 68, 187, 0.3), inset 0 0.1cqw 0 rgba(255, 255, 255, 0.2);
}

.away-header {
    background: linear-gradient(135deg, #cc2222 0%, #990000 100%);
    box-shadow: 0 0 1.5cqw rgba(204, 34, 34, 0.3), inset 0 0.1cqw 0 rgba(255, 255, 255, 0.2);
}

.team-name-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 2.2cqw;
    font-weight: 800;
    text-align: center;
    padding: 0.6cqw 0.4cqw;
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.2cqw;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.team-name-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    cursor: text;
}

/* ==========================================================================
   Logo & Title Banner (Line of Scrimmage Format)
   ========================================================================== */

.logo-header {
    margin-bottom: 0.5cqw;
    text-align: center;
}

.logo-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.95;
}

.logo-top {
    font-family: 'Teko', 'Impact', sans-serif;
    font-size: 5cqw;
    font-weight: 900;
    color: var(--color-blue); /* Solid Blue letter fill */
    letter-spacing: 0.1cqw;
    text-shadow: 
        -0.05cqw -0.05cqw 0 #ffffff,  
         0.05cqw -0.05cqw 0 #ffffff,  
        -0.05cqw  0.05cqw 0 #ffffff,  
         0.05cqw  0.05cqw 0 #ffffff,  
         0 0 0.8cqw var(--color-blue-glow);
}

.logo-bottom {
    font-family: 'Teko', 'Impact', sans-serif;
    font-size: 5cqw;
    font-weight: 900;
    color: var(--color-red); /* Solid Red letter fill */
    letter-spacing: 0.1cqw;
    text-shadow: 
        -0.05cqw -0.05cqw 0 #ffffff,  
         0.05cqw -0.05cqw 0 #ffffff,  
        -0.05cqw  0.05cqw 0 #ffffff,  
         0.05cqw  0.05cqw 0 #ffffff,  
         0 0 0.8cqw var(--color-red-glow);
}

/* Blue Scrimmage Line directly between top and bottom logos */
.scrimmage-line {
    width: 26cqw;
    height: 0.35cqw;
    background: var(--color-scrimmage);
    box-shadow: 0 0 0.6cqw var(--color-scrimmage-glow), 0 0 1.2cqw var(--color-scrimmage-glow);
    margin: 0.5cqw 0;
    border-radius: 0.2cqw;
}

/* ==========================================================================
   Football Field Visualizer (Utilizing center space)
   ========================================================================== */

.field-visualizer {
    grid-column: 1 / -1; /* Spans full width of grid at the bottom! */
    width: 100%;
    height: 100% !important; /* Force it to always fill 100% of the 1fr bottom row! */
    background: rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.2cqw;
    padding: 0.3cqw;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: inset 0 0.5cqw 1cqw rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3);
}

.field-visualizer:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.field-turf {
    width: 100%;
    height: 100%;
    background: #133124; /* Solid dark green base */
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.8cqw;
    display: flex;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.endzone {
    width: 8%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Teko', 'Impact', sans-serif; /* Bold sports typography */
    font-size: calc(8px + 1.5cqw); /* Much larger responsive sizing */
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9); /* Shines brighter */
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    text-shadow: 0 0.2cqw 0.4cqw rgba(0,0,0,0.8);
    letter-spacing: 0.1cqw;
    box-sizing: border-box;
}

.home-endzone {
    background: linear-gradient(90deg, #002288 0%, #0044bb 100%);
    border-right: 1.5px solid rgba(255, 255, 255, 0.4);
}

.away-endzone {
    background: linear-gradient(90deg, #990000 0%, #cc2222 100%);
    border-left: 1.5px solid rgba(255, 255, 255, 0.4);
    writing-mode: vertical-lr;
    transform: rotate(0deg);
}

.field-grid {
    width: 84%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    /* Grid-aligned 5-yard grass turf stripes */
    background: repeating-linear-gradient(
        90deg,
        #133124,
        #133124 5%,
        #173c2c 5%,
        #173c2c 10%
    );
}

.yardline {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 1;
}

.line-50 {
    background: rgba(255, 255, 255, 0.55);
    width: 2px;
}

.goal-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
}

.home-goal {
    left: 0;
}

.away-goal {
    right: 0;
}

.hash-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%; /* 5-yard lines run the full height of the field */
    background: rgba(255, 255, 255, 0.08); /* More subtle opacity than 10-yard lines */
    transform: translateX(-50%);
    z-index: 1;
}

.yard-num {
    position: absolute;
    top: 6%;
    font-size: calc(7px + 1.1cqw); /* Significantly larger responsive size */
    font-weight: 800;
    color: rgba(255, 255, 255, 0.75); /* Higher visibility */
    font-family: var(--font-digital);
    transform: scaleY(0.9);
}

.yardline::after {
    position: absolute;
    bottom: 6%;
    font-size: calc(7px + 1.1cqw); /* Significantly larger responsive size */
    font-weight: 800;
    color: rgba(255, 255, 255, 0.75); /* Higher visibility */
    font-family: var(--font-digital);
    transform: scaleY(0.9) rotate(180deg); /* Bottom numbers upside down like real fields! */
}

.line-10::after { content: '10'; }
.line-20::after { content: '20'; }
.line-30::after { content: '30'; }
.line-40::after { content: '40'; }
.line-50::after { content: '50'; }
.line-60::after { content: '40'; }
.line-70::after { content: '30'; }
.line-80::after { content: '20'; }
.line-90::after { content: '10'; }

.field-ball-tracker {
    position: absolute;
    top: 0;
    left: 8%; /* Starts after home endzone */
    width: 84%; /* Spans only the grid */
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
}

/* Glowing blue line of scrimmage */
.field-scrimmage-line {
    position: absolute;
    top: 0;
    left: 20%; /* Dynamically updated */
    width: 3px;
    height: 100%;
    background: var(--color-scrimmage);
    box-shadow: 0 0 0.5cqw var(--color-scrimmage-glow), 0 0 1cqw var(--color-scrimmage-glow);
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateX(-50%);
    z-index: 2;
}

/* Glowing yellow first down line (line to gain) */
.field-firstdown-line {
    position: absolute;
    top: 0;
    left: 30%; /* Dynamically updated */
    width: 3px;
    height: 100%;
    background: var(--color-yellow);
    box-shadow: 0 0 0.5cqw var(--color-yellow-glow), 0 0 1cqw var(--color-yellow-glow);
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateX(-50%);
    z-index: 2;
}

/* Glowing football marker */
.tracker-football-img {
    position: absolute;
    top: 50%;
    left: 20%; /* Dynamically updated */
    width: calc(40px + 1.2cqw); /* Proportional to vertical aspect ratio of PossesionMarker.png */
    height: calc(80px + 2.4cqw);
    transform: translate(-50%, -50%) rotate(75deg); /* Rotated to lay horizontally on the turf */
    filter: drop-shadow(0 0 0.5cqw #ffb700) drop-shadow(0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.7));
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 3;
    object-fit: contain;
}

/* ==========================================================================
   Display Boxes (Score and Stats)
   ========================================================================== */

.display-box {
    background: var(--bg-card);
    border: 1.5px solid var(--border-card);
    border-radius: 1.5cqw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2cqw;
    position: relative;
    box-shadow: inset 0 0.1cqw 0.1cqw rgba(255, 255, 255, 0.05), 0 0.8cqw 2.4cqw rgba(0,0,0,0.5);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.display-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    pointer-events: none;
}

.display-box:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-0.2cqw);
    box-shadow: inset 0 0.1cqw 0.1cqw rgba(255, 255, 255, 0.05), 0 1.2cqw 3cqw rgba(0,0,0,0.6);
}

.box-label {
    font-size: 1.1cqw;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.2cqw;
    text-align: center;
    margin-bottom: 0.5cqw;
}

/* Scores (Large displays) */
.score-box {
    position: relative; /* Ensure relative for handles */
    height: var(--height-score-box, 14.5cqw); /* Dynamic resizable height (taller default) */
}

.score-box .box-value {
    font-size: 8.5cqw; /* Scaled down score text to fit perfectly inside smaller box */
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    font-family: var(--font-digital);
    line-height: 1;
}

.home-score-box {
    border-color: rgba(0, 136, 255, 0.2);
    box-shadow: inset 0 0.1cqw 0.1cqw rgba(255,255,255,0.05), 0 0 1.5cqw rgba(0, 136, 255, 0.05);
}

.home-score-box:hover {
    border-color: rgba(0, 136, 255, 0.5);
    box-shadow: inset 0 0.1cqw 0.1cqw rgba(255,255,255,0.05), 0 0 2.5cqw rgba(0, 136, 255, 0.15);
}

.away-score-box {
    border-color: rgba(255, 53, 53, 0.2);
    box-shadow: inset 0 0.1cqw 0.1cqw rgba(255,255,255,0.05), 0 0 1.5cqw rgba(255, 53, 53, 0.05);
}

.away-score-box:hover {
    border-color: rgba(255, 53, 53, 0.5);
    box-shadow: inset 0 0.1cqw 0.1cqw rgba(255,255,255,0.05), 0 0 2.5cqw rgba(255, 53, 53, 0.15);
}

/* LED Digital Glow Fonts */
.digital-text {
    font-family: var(--font-digital);
    font-weight: 700;
}

.text-glow-blue {
    color: #3bf;
    text-shadow: 0 0 1.5cqw var(--color-blue-glow), 0 0 0.3cqw rgba(0, 136, 255, 0.5);
}

.text-glow-red {
    color: #ff4d4d;
    text-shadow: 0 0 1.5cqw var(--color-red-glow), 0 0 0.3cqw rgba(255, 53, 53, 0.5);
}

.text-glow-yellow {
    color: #ffc800;
    text-shadow: 0 0 1.5cqw var(--color-yellow-glow), 0 0 0.3cqw rgba(255, 183, 0, 0.5);
}

/* ==========================================================================
   Center Stats Row
   ========================================================================== */

.stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 0.5cqw; /* Pushed close to the bottom/field border */
    gap: 0.5cqw;
}

.stat-box {
    width: 11cqw;
    height: 11cqw; /* Compact stat box height (aligns bottom with 14.5cqw score box) */
    padding: 0.5cqw;
    border-color: rgba(255, 255, 255, 0.08);
}

.stat-box:hover {
    border-color: rgba(255, 183, 0, 0.4);
    box-shadow: inset 0 0.1cqw 0.1cqw rgba(255,255,255,0.05), 0 0 1.5cqw rgba(255, 183, 0, 0.1);
}

.stat-box .box-value {
    font-size: calc(14px + 3.2cqw); /* Significantly larger and bolder stat numbers */
    color: #ffea00;
    font-family: var(--font-digital);
    font-weight: 700;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-shadow: 0 0 1cqw rgba(255, 234, 0, 0.3);
}

/* Custom dimensions for Ball On (Needs to be wider) */
.ballon-box {
    width: 15cqw;
}

.ballon-box .box-value {
    font-size: calc(12px + 2.5cqw); /* Keep proportional but fit digital text */
}

/* Ampersand in "Down & To Go" */
.ampersand {
    font-family: var(--font-digital);
    font-size: 3cqw;
    font-weight: 900;
    color: var(--text-muted);
    padding: 0 0.5cqw;
    text-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.5);
    margin-top: 2cqw;
}

/* ==========================================================================
   Quick Adjust Buttons (Hover/Tap overlay)
   ========================================================================== */

.quick-adjust-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Show adjustment overlay on hover (or touch device active) */
.display-box:hover .quick-adjust-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* For mobile devices that don't support hover: make overlays always slightly touch-activatable */
@media (hover: none) {
    .quick-adjust-overlay {
        opacity: 0.15;
        pointer-events: auto;
    }
}

.btn-adj {
    height: 4.5cqw;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5cqw;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    backdrop-filter: blur(2px);
}

.btn-adj:active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.adj-plus {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
}

.adj-minus {
    border-top: 0.5px solid rgba(255, 255, 255, 0.05);
    margin-top: auto;
}

/* Adjust size for score boxes adjustments (they shouldn't cover whole huge box) */
.score-box .quick-adjust-overlay {
    width: 6cqw;
    left: auto;
    right: 0;
    height: 100%;
}

.score-box .btn-adj {
    height: 50%;
    width: 6cqw;
    font-size: calc(8px + 0.9cqw); /* Larger, more readable quick-adjust text */
    font-family: 'Teko', 'Impact', var(--font-ui);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9); /* Higher contrast color */
}

.score-box .adj-plus {
    border-left: 1px solid rgba(255,255,255,0.05);
    border-bottom: 0.5px solid rgba(255,255,255,0.05);
    border-top-right-radius: 1.5cqw;
}

.score-box .adj-minus {
    border-left: 1px solid rgba(255,255,255,0.05);
    border-top: 0.5px solid rgba(255,255,255,0.05);
    border-bottom-right-radius: 1.5cqw;
}

/* ==========================================================================
   Utility Bar (Footer)
   ========================================================================== */

.utility-bar {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

.util-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.util-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.util-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.icon-svg {
    width: 22px;
    height: 22px;
    fill: var(--text-primary);
}

.hidden {
    display: none !important;
}

.text-btn {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    letter-spacing: 1.5px;
}

.btn-reset {
    color: var(--color-red);
    border-color: var(--color-red-bg);
}

.btn-reset:hover {
    background: var(--color-red-bg);
    border-color: var(--color-red-glow);
    color: #ffffff;
    box-shadow: 0 0 10px var(--color-red-bg);
}

/* ==========================================================================
   Modals & Bottom Sheet Drawers
   ========================================================================== */

.overlay-modal {
    position: absolute; /* Constrained inside the 16:9 scoreboard card */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 7, 10, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center; /* Centered vertically! */
    justify-content: center; /* Centered horizontally! */
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* Prevent closed modals from blocking clicks */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 2.4cqw; /* Match scoreboard container radius */
}

/* Modal Open State */
.overlay-modal.modal-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.modal-sheet {
    background: #0f1118;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.6cqw;
    width: 90%;
    max-width: 48cqw; /* Constrain width relative to scoreboard width */
    max-height: 90%; /* Constrain height relative to scoreboard height */
    box-shadow: 0 0.5cqw 2.5cqw rgba(0, 0, 0, 0.85);
    padding: 1.8cqw;
    transform: scale(0.85); /* Modern scaling animation */
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.overlay-modal.modal-open .modal-sheet {
    transform: scale(1);
    opacity: 1;
}

/* Custom transparent non-blur overlay for the Ball On modal */
#ballon-modal {
    background: rgba(0, 0, 0, 0.2); /* Very light background overlay */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none; /* Clicks pass through to drag on the main field! */
}

#ballon-modal.modal-open .modal-sheet {
    pointer-events: auto; /* Active only when modal is open! */
}

#ballon-modal .modal-sheet {
    background: rgba(15, 17, 24, 0.96);
    box-shadow: 0 0.5cqw 2.5cqw rgba(0, 0, 0, 0.9);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1cqw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.6cqw;
}

.modal-header span {
    font-family: 'Teko', 'Impact', sans-serif;
    font-size: calc(11px + 1cqw); /* Scaled readable font size */
    color: #ffffff;
    letter-spacing: 0.08cqw;
}

.close-modal {
    background: none;
    border: none;
    color: #8e9297;
    font-size: calc(13px + 1.2cqw); /* Scaled readable font size */
    cursor: pointer;
    line-height: 1;
    transition: var(--transition-smooth);
}

.close-modal:hover {
    color: #ffffff;
}

/* ==========================================================================
   Quick Score Operations (3-Row Finger-Sized Grid)
   ========================================================================== */

.quick-score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2cqw;
}

.btn-score-op {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8cqw 0.5cqw;
    border-radius: 0.8cqw;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1.5px solid rgba(255, 255, 255, 0.05);
    height: 7.2cqw; /* Finger-sized target scaling */
    box-sizing: border-box;
}

.btn-score-op:active {
    transform: scale(0.96);
}

/* Row 1: Positive Adds */
.pos-op {
    background: rgba(0, 255, 102, 0.03);
    border-color: rgba(0, 255, 102, 0.15);
}
.pos-op:hover {
    background: rgba(0, 255, 102, 0.08);
    border-color: rgba(0, 255, 102, 0.35);
    box-shadow: 0 0 1cqw rgba(0, 255, 102, 0.15);
}
.pos-op .op-num {
    color: #00ff66;
    font-size: calc(14px + 1.8cqw); /* Scaled readable font size */
    font-family: 'Teko', 'Impact', sans-serif;
    line-height: 1;
}
.pos-op .op-lbl {
    color: #a0ffa0;
    font-size: calc(8px + 0.5cqw); /* Scaled readable font size */
    font-weight: 800;
    margin-top: 0.2cqw;
}

/* Row 2: Negative Subtracts */
.neg-op {
    background: rgba(255, 0, 0, 0.03);
    border-color: var(--color-red-bg);
}
.neg-op:hover {
    background: rgba(255, 0, 0, 0.08);
    border-color: var(--color-red-glow);
    box-shadow: 0 0 1cqw rgba(255, 0, 0, 0.15);
}
.neg-op .op-num {
    color: var(--color-red);
    font-size: calc(14px + 1.8cqw); /* Scaled readable font size */
    font-family: 'Teko', 'Impact', sans-serif;
    line-height: 1;
}
.neg-op .op-lbl {
    color: #ffa0a0;
    font-size: calc(8px + 0.5cqw); /* Scaled readable font size */
    font-weight: 800;
    margin-top: 0.2cqw;
}

/* Row 3: Action Buttons */
.reset-op {
    grid-column: span 2;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.15);
}
.reset-op:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}
.reset-op .op-lbl {
    color: #ffffff;
    font-size: 1.3cqw;
    font-weight: 800;
    letter-spacing: 0.05cqw;
}

.cancel-op {
    grid-column: span 1;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
.cancel-op:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}
.cancel-op .op-lbl {
    color: #dddddd;
    font-size: 1.3cqw;
    font-weight: 800;
}

.sub-op {
    border-color: rgba(255, 255, 255, 0.03);
}
.sub-op:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}
.sub-op .op-num {
    color: var(--text-muted);
}
.sub-op:hover .op-num {
    color: #ffffff;
}

/* ==========================================================================
   Ball On / Spotter Styles
   ========================================================================== */

.spot-selector-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    padding: 0.5rem 0;
}

.yardline-current-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.yardline-current-display span.digital-text {
    font-size: 4rem;
    line-height: 1;
}

.yardline-detail {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.slider-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.03);
}

.side-lbl {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.home-lbl { color: var(--color-blue); }
.away-lbl { color: var(--color-red); }

/* Custom input range styling */
.spot-slider {
    flex-grow: 1;
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    background: #252830;
    outline: none;
    cursor: pointer;
}

.spot-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--color-yellow);
    box-shadow: 0 0 10px var(--color-yellow-glow);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.spot-slider::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

.yard-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    width: 100%;
}

.btn-yard-quick {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.6rem 0;
    font-family: var(--font-digital);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-yard-quick:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-yellow);
}

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

.fine-tune-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    width: 100%;
}

.btn-fine-tune {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    color: var(--text-muted);
    padding: 0.6rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-fine-tune:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}

/* ==========================================================================
   Help Modal body
   ========================================================================== */

.text-body {
    max-height: 40cqh; /* Relative to grid height */
    overflow-y: auto;
    padding-right: 0.5cqw;
}

.text-body h3 {
    margin-bottom: 0.6cqw;
    font-size: calc(10px + 0.8cqw); /* Scaled readable font size */
    color: var(--color-yellow);
}

.text-body h4 {
    margin: 1cqw 0 0.4cqw 0;
    font-size: calc(9px + 0.7cqw); /* Scaled readable font size */
    color: #ffffff;
    border-left: 0.25cqw solid var(--color-blue);
    padding-left: 0.6cqw;
}

.text-body p {
    font-size: calc(8px + 0.5cqw); /* Scaled readable font size */
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 0.4cqw;
}

.text-body ul {
    list-style: none;
    margin-bottom: 0.8cqw;
}

.text-body li {
    font-size: calc(8px + 0.5cqw); /* Scaled readable font size */
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 0.3cqw;
    position: relative;
    padding-left: 1.2cqw;
}

.text-body li::before {
    content: '▪';
    position: absolute;
    left: 0.2cqw;
    color: var(--color-yellow);
}

/* Custom Scrollbar for Help */
.text-body::-webkit-scrollbar {
    width: 6px;
}

.text-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.text-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* ==========================================================================
   Layout Editing Mode & Resize Handles
   ========================================================================== */

.layout-edit-header {
    position: absolute;
    top: 1.5cqw;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 17, 24, 0.95);
    border: 1.5px solid var(--color-blue);
    box-shadow: 0 0 1.5cqw var(--color-blue-glow), 0 10px 30px rgba(0, 0, 0, 0.8);
    border-radius: 1cqw;
    padding: 0.6cqw 1.2cqw;
    display: flex;
    align-items: center;
    gap: 1.5cqw;
    z-index: 1000;
    transition: var(--transition-smooth);
}

.layout-edit-header.hidden {
    display: none !important;
}

.edit-mode-title {
    font-family: 'Teko', 'Impact', sans-serif;
    font-size: 1.3cqw;
    color: var(--color-blue);
    letter-spacing: 0.1cqw;
    text-shadow: 0 0 0.8cqw var(--color-blue-glow);
}

.edit-mode-actions {
    display: flex;
    gap: 0.8cqw;
}

.btn-edit-action {
    font-family: var(--font-ui);
    font-size: 1.1cqw;
    font-weight: 800;
    padding: 0.4cqw 1cqw;
    border-radius: 0.5cqw;
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-save-layout {
    background: #00ff66;
    color: #05070a;
}

.btn-save-layout:hover {
    box-shadow: 0 0 1cqw rgba(0, 255, 102, 0.4);
    transform: translateY(-0.1cqw);
}

.btn-cancel-layout {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-cancel-layout:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Guidelines when editing is active */
.editing-mode-active .possession-area,
.editing-mode-active .score-box,
.editing-mode-active .field-visualizer {
    border: 1.5px dashed var(--color-blue) !important;
    box-shadow: 0 0 1.5cqw var(--color-blue-bg) !important;
}

/* Prevent pointer events on buttons/inputs when editing layout */
.editing-mode-active .scoreboard input,
.editing-mode-active .scoreboard button,
.editing-mode-active .scoreboard .quick-adjust-overlay {
    pointer-events: none !important;
}

/* Resize Handles styling */
.resize-handle {
    position: absolute;
    background: var(--color-blue);
    border: 1px solid #ffffff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 110;
    display: none; /* Hidden unless editing mode active */
}

.editing-mode-active .resize-handle {
    display: block;
}

/* Both width and height resize handle (bottom-right corner) */
.resize-both {
    width: 1cqw;
    height: 1cqw;
    right: 2px;
    bottom: 2px;
    cursor: nwse-resize;
    border-radius: 2px;
}

/* Height-only resize handle (bottom edge) */
.resize-y {
    width: 4cqw;
    height: 0.6cqw;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
    border-radius: 3px;
}

/* Field Top Height resize handle (top edge) */
.resize-y-top {
    width: 6cqw;
    height: 0.6cqw;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
    border-radius: 3px;
}

.text-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Logo Popup Menu Styles
   ========================================================================== */

.logo-menu-sheet {
    max-width: 32cqw; /* Scaled relative to scoreboard container query */
    background: rgba(15, 17, 24, 0.98);
}

.logo-menu-body {
    display: flex;
    flex-direction: column;
    gap: 1cqw;
    padding: 0.5cqw 0;
}

.menu-item-btn {
    display: flex;
    align-items: center;
    gap: 1.5cqw;
    width: 100%;
    height: calc(26px + 2.4cqw); /* Scaled finger-sized height! */
    padding: 0 1.8cqw;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.8cqw;
    cursor: pointer;
    transition: var(--transition-smooth);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: calc(9px + 0.7cqw); /* Scaled readable font size */
    font-weight: 700;
}

.menu-item-btn:hover {
    background: rgba(0, 136, 255, 0.1);
    border-color: rgba(0, 136, 255, 0.3);
    transform: translateX(0.4cqw);
}

.menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2cqw;
    height: 2.2cqw;
}

.menu-item-icon svg {
    width: 100%;
    height: 100%;
    fill: #8e9297;
    transition: var(--transition-smooth);
}

.menu-item-btn:hover .menu-item-icon svg {
    fill: var(--color-blue);
}

.menu-item-text {
    flex-grow: 1;
    text-align: left;
}

/* Color-coded broadcast style BALL ON arrows */
.ballon-arrow {
    display: inline-block;
    margin-right: 0.3cqw;
    font-family: sans-serif; /* Keep triangle shapes sharp and consistent */
    line-height: 1;
}

.arrow-home {
    color: var(--color-scrimmage); /* Match the light blue line of scrimmage */
    text-shadow: 0 0 0.5cqw var(--color-scrimmage-glow);
}

.arrow-away {
    color: var(--color-red); /* Match the pure red away color */
    text-shadow: 0 0 0.5cqw var(--color-red-glow);
}