body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 20px;
    color: #ffffff;
    background-image: url('https://global.divhunt.com/8133f8d1eb278905b3f5cd7fbb8c65ef_105019.avif');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #121212; 
}

/* Desktop Layout */
.master-layout { display: flex; gap: 40px; height: 95vh; align-items: center; position: relative; }
.master-glass-panel { flex: 1; height: 100%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; padding: 20px; display: flex; gap: 20px; box-sizing: border-box; }
.field-column { flex: 1; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; padding-right: 15px; }
.subs-column { flex: 1; display: flex; flex-direction: column; gap: 15px; padding-right: 5px; }
.transparent-box { background: transparent; padding: 10px 5px; border-radius: 8px; transition: background 0.2s; }
.inner-glass-box { background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px; transition: background 0.2s; display: flex; flex-direction: column; }
.drag-over { background: rgba(255, 255, 255, 0.2) !important; }
.bench-box { flex: 2; overflow-y: auto; }
.injured-box { flex: 1; }

/* Centered Clock & Buttons */
.timing-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.main-timer-display { font-size: clamp(150px, 24vw, 400px); font-family: 'Bebas Neue', sans-serif; font-weight: normal; color: #cccccc; transition: color 0.1s; margin: 0; line-height: 0.85; cursor: pointer; user-select: none; text-shadow: 2px 4px 15px rgba(0,0,0,0.4); letter-spacing: 5px; }
.main-timer-display:active { opacity: 0.8; }
.clock-running { color: #ffffff !important; }

.clock-controls { display: flex; flex-direction: row; width: 100%; max-width: 380px; gap: 15px; margin-top: 20px; justify-content: center; }
.btn-green, .btn-red { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; padding: 15px; border-radius: 8px; font-weight: bold; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 15px; color: white; transition: 0.2s; white-space: nowrap; }
.btn-green { background: #4CAF50; }
.btn-red { background: #333; }
.btn-red:hover { background: #ff5252; }

/* Headers & Inputs */
.zone-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 5px; }
.zone-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.sub-time-control { display: flex; align-items: center; gap: 5px; color: #ddd; font-size: 14px; }
.sub-time-input { background: transparent; border: none; color: #fff; width: 30px; font-size: 14px; text-align: right; cursor: pointer; font-family: 'Montserrat', sans-serif; }
.sub-time-input:focus { outline: none; border-bottom: 1px solid #fff; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Player Cards (With scaling fonts) */
.player-item { padding: 8px 5px; margin-bottom: 2px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; z-index: 2; border-radius: 6px; transition: all 0.1s; }
.player-item:hover { background: rgba(255, 255, 255, 0.1); }
.selected-player { background: rgba(76, 175, 80, 0.2) !important; outline: 2px solid #4CAF50; }
.player-info { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.shirt-num { color: #ffffff; font-weight: bold; width: auto; min-width: 18px; border-left: 3px solid #ff5252; border-radius: 2px 0 0 2px; padding-left: 6px; transition: border-left-color 0.2s; font-size: clamp(12px, 1.5vw, 16px); }
.player-name { font-size: clamp(12px, 1.8vw, 18px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name-short { display: none; }

/* Times & Indicators */
.player-time { font-family: 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; font-size: 14px; color: #ddd; padding: 2px 6px; border-radius: 4px; }
.bg-red { background: #ff5252; color: #fff; font-weight: bold; border-radius: 4px; }
.bg-orange { background: #ff9800; color: #fff; font-weight: bold; border-radius: 4px; }
.chip-field { border-left-color: #ff5252 !important; }
.chip-bench-resting { border-left-color: #ff9800 !important; }
.chip-bench-ready { border-left-color: #4CAF50 !important; }
.status-injured .shirt-num { display: none !important; }
.status-injured .player-time { display: none !important; }

/* Buttons */
.button-row { display: flex; gap: 10px; margin-top: auto; }
.manage-team-btn { background: #fff; color: #000; border: none; padding: 15px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; font-family: 'Montserrat', sans-serif; flex-grow: 1; }
.manage-team-btn:hover { background: #eee; }
.btn-reset-game { background: #333; color: white; border: 1px solid #555; border-radius: 8px; padding: 0 15px; font-size: 20px; cursor: pointer; transition: 0.2s;}
.btn-reset-game:hover { background: #ff5252; border-color: #ff5252;}

/* Swap Group Styling */
.swap-group { background: rgba(0, 0, 0, 0.6); padding: 15px 70px 15px 15px; margin: 15px 0 15px 15px; border-radius: 12px; display: flex; align-items: center; position: relative; border: 1px dashed rgba(255,255,255,0.4); }
.stacked-cards { flex-grow: 1; display: flex; flex-direction: column; gap: 5px; }
.swap-group .player-item { padding: 0; margin: 0; pointer-events: none; }
.swap-group .player-item:hover { background: transparent; }
.btn-confirm-sub { background: #4CAF50; color: white; border: none; border-radius: 50%; width: 75px; height: 75px; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.4); transition: 0.2s; z-index: 20; }
.btn-confirm-sub:hover { transform: translateY(-50%) scale(1.05); }
.btn-confirm-sub .material-symbols-outlined { font-size: 40px !important; }
.btn-cancel-sub { position: absolute; top: -12px; left: -12px; background: #ff5252; color: white; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-weight: bold; z-index: 10; display:flex; justify-content:center; align-items:center; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }

/* Swap Typography & Arrows */
.swap-off-row .player-name { font-size: 24px; font-weight: bold; color: #fff; }
.swap-off-row .shirt-num { font-size: 24px; width: auto; border: none; padding-left: 0; margin-right: 5px; color: #fff; }
.swap-on-row .player-name { font-size: 14px; color: #aaa; }
.swap-on-row .shirt-num { font-size: 14px; width: auto; border: none; padding-left: 0; margin-right: 5px; color: #aaa; }
.swap-icon { font-size: 28px !important; margin-right: 8px; font-weight: bold; }
.icon-on { color: #4CAF50; } 
.icon-off { color: #ff5252; transform: rotate(180deg); }

/* Modals */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 100; align-items: center; justify-content: center; }
.modal-content { background: #1e1e1e; border-radius: 12px; padding: 25px; width: 90%; max-width: 400px; border: 1px solid #333; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2 { margin: 0; font-size: 20px; }
.form-group { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;}
.form-group input[type="text"], .form-group input[type="number"] { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid #444; background: #2a2a2a; color: white; font-family: 'Montserrat', sans-serif; box-sizing: border-box; }
.form-group select { background: #2a2a2a; color: white; border: 1px solid #444; padding: 8px; border-radius: 6px; font-family: 'Montserrat', sans-serif; }
.btn-add { background: #4CAF50; color: white; border: none; padding: 12px; width: 100%; border-radius: 6px; font-weight: bold; cursor: pointer; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; }
.roster-list { max-height: 250px; overflow-y: auto; border-top: 1px solid #333; padding-top: 15px; display: flex; flex-direction: column; gap: 8px;}
.roster-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #2a2a2a; border-radius: 6px; }
.roster-actions { display: flex; gap: 8px; }
.icon-btn { border: none; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; }
.icon-btn:hover { transform: scale(1.1); }
.btn-edit { background: #2196F3; } 
.btn-delete-roster { background: #ff5252; }
.close-btn { background: transparent; border: none; color: #ffffff; cursor: pointer; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: 0.2s; padding: 0; }
.close-btn:hover { opacity: 1; transform: scale(1.1); }
.close-btn .material-symbols-outlined { font-size: 32px; font-weight: bold; }
.motivation-toast { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; color: white; display: none; justify-content: center; align-items: center; font-size: 6vw; font-weight: bold; font-family: 'Bebas Neue', sans-serif; z-index: 1000; text-align: center; padding: 40px;}
body.hide-layer-timers .sub-time-control { display: none !important; }






/* --- GLOBAL CONTAINMENT --- */
html, body {
    overflow-x: hidden; 
    width: 100%;
    max-width: 100vw;
}

*, *:before, *:after {
    box-sizing: border-box;
}

/* --- TABLET (Landscape) --- */
/* Safely isolated: Won't touch desktop (>1180) or mobile (<950) */
@media (max-width: 1180px) and (min-width: 951px) {
    body {
        padding: 10px; 
    }
    
    /* 1. Force a strict 50/50 split between the left panel and the clock */
    .master-layout {
        gap: 15px; 
    }
    .master-glass-panel, .timing-panel {
        flex: 0 0 calc(50% - 7.5px) !important;
        max-width: calc(50% - 7.5px) !important;
    }

    /* 2. Slightly shrink the inner padding of the left panel to give content more room */
    .master-glass-panel {
        padding: 10px !important;
        gap: 10px !important;
    }

    /* 3. Scale down the text and buttons on the left side to fit beautifully */
    .player-name {
        font-size: 12px !important; 
    }
    .shirt-num {
        font-size: 12px !important;
        min-width: 16px !important;
        padding-left: 4px !important;
    }
    .player-time {
        font-size: 11px !important;
        padding: 2px 4px !important;
    }
    .zone-header h3 {
        font-size: 14px !important;
    }
    .sub-time-control {
        font-size: 12px !important;
    }
    .manage-team-btn {
        font-size: 11px !important;
        padding: 10px 5px !important;
    }
    .btn-reset-game {
        padding: 0 10px !important;
    }
    .btn-reset-game .material-symbols-outlined {
        font-size: 20px !important;
    }

    /* 4. Keep the clock looking sharp in its half */
    .main-timer-display {
        font-size: clamp(80px, 16vw, 220px); 
    }
}






/* --- MOBILE --- */
@media (max-width: 950px) {
    body {
        padding: 5px;
        background-position: top left;
        background-size: auto 100%;
    }

    #fullscreen-btn {
        display: none !important;
    }

    .master-layout { 
        display: grid;
        grid-template-areas:
            "field timing"
            "field subs";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 
        grid-template-rows: auto 1fr;
        gap: 6px; 
        align-items: stretch;
    }
    
    .master-glass-panel { 
        display: contents;
    }

    .field-column { 
        grid-area: field;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 12px;
        padding: 8px;
        overflow-y: auto;
    }

    .subs-column { 
        grid-area: subs;
        padding-top: 0; 
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 12px;
        padding: 8px;
    }
    
    .timing-panel {
        grid-area: timing;
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        background: rgba(0,0,0,0.7);
        padding: 12px;
        border-radius: 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center; /* Ensures content centers properly */
    }

    /* Scales the clock up nicely to fit the container */
    .main-timer-display { 
        font-size: clamp(50px, 14vw, 75px); 
        text-align: center; 
        line-height: 1; 
    }
    
    .clock-controls {
        flex-direction: row;
        margin-top: 10px;
        gap: 15px; /* Adds space between the two round buttons */
        width: 100%;
        justify-content: center;
    }

    /* Hides the text spans inside the buttons on mobile */
    .clock-controls .btn-text {
        display: none;
    }

    /* Forces buttons to be round and icon-only */
    .btn-green, .btn-red {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        padding: 0;
        flex: none; /* Stops them from stretching into ovals */
    }

    .button-row { 
        flex-direction: column; 
        gap: 5px; 
        margin-top: 10px;
    }
    
    .manage-team-btn, .btn-reset-game { 
        padding: 10px; 
        font-size: 12px; 
        width: 100%; 
        height: auto;
    }

    .inner-glass-box, .transparent-box { 
        padding: 6px; 
        border-radius: 6px; 
        flex: none !important; 
        height: auto !important; 
        min-height: 40px; 
    }

    .player-item { padding: 4px; margin-bottom: 1px; }
    .player-name { font-size: 16px; font-weight: 600; }
    .player-time { font-size: 10px; padding: 1px 4px; }
    .zone-header h3 { font-size: 13px; }
    .sub-time-control { font-size: 11px; }

    /* Completely removes the shirt number box to recover horizontal space */
    .shirt-num { display: none !important; }
    
    .name-full { display: none; }
    .name-short { display: inline; }
    
    /* Shrink the black box padding and margin */
    .swap-group {
        padding: 6px; 
        margin: 5px 0; 
    }

    /* Red Cross - Top Left Inside */
    .btn-cancel-sub {
        top: 4px;
        left: 4px;
        width: 28px;
        height: 28px;
    }

    /* Green Tick - Top Right Inside */
    .btn-confirm-sub {
        top: 4px;
        right: 4px;
        transform: none; /* Stops it from centering vertically like desktop */
        width: 28px;
        height: 28px;
    }
    
    /* Shrink the green tick icon to fit the smaller button */
    .btn-confirm-sub .material-symbols-outlined {
        font-size: 18px !important; 
    }

    /* Shrink player names to match normal mobile size */
    .swap-off-row .player-name, 
    .swap-on-row .player-name {
        font-size: 11px;
        font-weight: 600;
    }

    /* Shrink the red and green arrows */
    .swap-icon {
        font-size: 16px !important;
        margin-right: 4px;
    }

    /* Push the text inwards so the corner buttons don't completely cover it */
    .stacked-cards {
        margin: 0 25px; 
    }

    /* Push the modal down to avoid the address bar and keep it scrollable */
    .modal-content {
        margin-top: 40px;
        max-height: 85vh;
        overflow-y: auto;
    }
}