/* === PANEL COLORS & TEXT SIZING RESTORE =================================== */

/* Keep one set of dynamic viewport vars (others removed for clarity) */
:root{
    --viewport-h: 100vh;
    --top-fixed-h: 0px;
    --bottom-fixed-h: 0px;
}

/* Fixed middle area between top & (optional) bottom – NO hard height */
#MiddleArea{
    position: fixed;
    top: var(--top-fixed-h);
    bottom: var(--bottom-fixed-h);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    width:100%;
    box-sizing:border-box;
    min-height: calc(100dvh - var(--top-fixed-h) - var(--bottom-fixed-h));
    min-height: calc(var(--viewport-h) - var(--top-fixed-h) - var(--bottom-fixed-h));
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        var(--bg-image, url("/img/pooltable1.jpg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Dark mode must not override the background image; slightly stronger gradient */
body.dark-mode #MiddleArea{
    background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        var(--bg-image, url("/img/pooltable1.jpg")) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Panel base */
.pane{
    flex:0 0 50%;
    max-width:50%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    position:relative;
    box-sizing:border-box;
    padding:1.25rem .75rem 2.75rem; /* leave space for score-controls */
    overflow:hidden;
}

/* Light mode (default) pane colors */
.pane.left  { background:#c62828; }
.pane.right { background:#1565c0; }

/* Dark mode: clear pane backgrounds so the page background shows through */
body.dark-mode .pane.left,
body.dark-mode .pane.right {
    background: transparent !important; /* override any previous dark-mode color */
    /* optional: transition for smoother toggle */
    transition: background .2s ease;
}

/* Corner cue ball icons */
.corner-icon{
    position:absolute;
    top:.65rem;
    height:42px;
    width:auto;
    z-index:4;
    pointer-events:none;
}
.corner-left{ left:.65rem; }
.corner-right{ right:.65rem; }

/* Score container fills pane (not absolutely positioned) */
.score-fill{
    width:100%;
    flex:1 1 auto;
    display:flex;
    justify-content:center;
    position:relative;
    z-index:1;
    pointer-events:none;
}

/* Text – JS will override font-size; give safe fallback */
.score-text{
    font-weight:800;
    line-height:1;
    color:#fff;
    font-size:clamp(80px,35vh,340px);
    transition:font-size .15s;
    white-space:nowrap;
}
.score-text-set{
    font-weight:800;
    line-height:1;
    color:#fff;
    font-size:clamp(32px,12vh,120px);
    transition:font-size .15s;
    white-space:nowrap;
}
.score-chip{
    display:inline-block;
    padding:.75rem 1rem;
    background:rgba(0,0,0,.45);
    border-radius:6px;
}

.team-name{
    font-size:clamp(20px,3vh,42px);
    font-weight:600;
    margin:0 0 .25rem;
    letter-spacing:.04em;
    z-index:2;
}
.player-name{
    font-size:clamp(28px,5vh,56px);
    font-weight:800;
    margin:0 0 .75rem;
    z-index:3;
    position:relative;
}

/* Edit pencil */
.edit-icon{
    position:relative;
    z-index:4;
    cursor:pointer;
    margin-left:.35rem;
}

/* Score controls sit near bottom of pane */
.score-controls{
    position:absolute;
    left:0;
    right:0;
    bottom:.9rem;
    display:flex;
    justify-content:center;
    gap:1.25rem;
    z-index:5;
}
.score-ctrl{
    width:clamp(40px,8vh,70px);
    height:clamp(40px,8vh,70px);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(18px,3vh,28px);
    line-height:1;
}

/* Floating match clock bottom-right (keep just below holding overlay) */
.match-clock-floating{
    position: fixed;
    bottom: 70px;
    right: 10px;
    width: 30vw;
    max-width: 300px;
    min-width: 250px;
    background: #000;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    z-index: 999; /* holding overlay is 4000 */
}
.match-clock-floating .btn-group .btn{
    /* keep buttons readable on dark background */
    font-weight:600;
}

/* Portrait stack */
@media (orientation:portrait){
    #MiddleArea{ flex-direction:column; }
    .pane{ flex:0 0 50%; max-width:100%; width:100%; }
}

/* Safe areas */
#TopDiv{ padding-top:env(safe-area-inset-top); }
.safe-bottom-bar{ padding-bottom:env(safe-area-inset-bottom); }

/* Pseudo fullscreen fallback (unchanged) */
html.fs-pseudo, body.fs-pseudo{
    position:fixed; inset:0; width:100%; height:100dvh;
    overflow:hidden; background:#000;
}

/* Toast z-index (unchanged) */
.blazored-toast-container,
.toast-container,
.toast,
.rz-notification,
.mud-snackbar-container{
    z-index:20050 !important;
}

/* Allow center flex child to actually shrink */
#TopDiv .flex-fill {
    min-width: 0;
}

/* Responsive logo: cap height, keep aspect, never overflow parent width */
.topbar-logo-wrap {
    display: inline-block;
    max-width: 100%;
}

.topbar-logo {
    max-height: 30px; /* previous fixed height becomes a cap */
    height: auto; /* keep aspect ratio from height cap */
    max-width: 100%; /* shrink with parent width */
    width: auto; /* don't upscale past natural width */
    object-fit: contain; /* safe scaling in very narrow cases */
}