@font-face {
    font-family: 'Mgchalkwalk';
    src: url('../fonts/Mgchalkwalk.woff2') format('woff2'),
        url('../fonts/Mgchalkwalk.woff') format('woff'),
        url('../fonts/Mgchalkwalk.ttf') format('truetype');
}

@font-face {
    font-family: 'Coburn';
    src: url('../fonts/Coburn.woff2') format('woff2'),
        url('../fonts/Coburn.woff') format('woff'),
        url('../fonts/Coburn.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.modal-backdrop {
    opacity: 0.5 !important;
}

/* ----- Create Match Modal ----- */

/* ==== CREATE MATCH — match Select theme ==== */
#createMatchModal .modal-content.neon-create {
  background: radial-gradient(1200px 800px at 20% -10%, #0f2238 0%, transparent 60%), radial-gradient(1200px 800px at 120% 10%, #0b1b2e 0%, transparent 55%), linear-gradient(200deg, #0a1320 0%, #13050e 100%);
  border: none;
  border-radius: 24px;
  color: #dfe9ff;
  box-shadow: 0 10px 48px #001a441f;
  padding: 18px 22px 26px 22px;
  font-family: var(--ui-font, "Rajdhani", system-ui, sans-serif);
}

#createMatchModal .modal-title {
  font-family: var(--title-font, "Orbitron", system-ui, sans-serif);
  font-weight: 800;
  color: var(--neon-cyan, #66bfff);
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
  font-size: 2.2rem;
  letter-spacing: 2px;
}

/* Week + First throw text */
#createMatchModal #active-week-label,
#createMatchModal #first-throw-info {
  font-family: var(--title-font, "Orbitron", system-ui, sans-serif);
  color: var(--neon-green, #00f00f);
  font-size: 1.3rem;
  text-shadow: 0 8px 18px rgba(0,0,0,.6);
}

/* 3-column grid: TEAM | VS | TEAM */
#createMatchModal .create-grid {
  display: grid;
  grid-template-columns: 1.4fr 80px 1.4fr;
  align-items: start;
  gap: 14px;
}

/* Team “card” around label + select + slots — matches Select row cards */
#createMatchModal .team-card {
  background: rgba(15, 24, 40, .9);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
  padding: 14px 16px;
}

/* Label + select restyle to match your Select theme */
#createMatchModal .form-label {
  color: #9dd1ff !important;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 8px;
  text-shadow: 0 6px 12px rgba(0,0,0,.6);
}
#createMatchModal .form-select {
  color: #e9f4ff !important;
  background: #142040 !important;
  border: 1.5px solid #1f3f67 !important;
  font-size: 1.12rem;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px #0b1422, 0 5px 20px 0 #000;
}
#createMatchModal .form-select:focus {
  border-color: #34d2ff !important;
  box-shadow: 0 0 0 2px #00c3ff55 !important;
}

/* VS badge (reuse across both modals) */
#createMatchModal .vs-badge {
  font-family: var(--title-font, "Orbitron", system-ui, sans-serif);
  color: var(--neon-mint, #42ffd9);
  font-size: 2.1rem;
  letter-spacing: 3px;
  text-shadow: 0 8px 16px rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}

/* Switch button */
#createMatchModal #switchTeamsBtn {
  border-radius: 12px;
  border: 1.5px solid #1f3f67;
  background: #172133;
  color: #dff2ff;
  box-shadow: inset 0 0 0 1px #0b1422, 0 4px 14px rgba(0,0,0,.4);
}

/* Team slots (player rows) already use .team-slot-card — keep, but soften spacing */
#createMatchModal #team1Slots .team-slot-card,
#createMatchModal #team2Slots .team-slot-card {
  margin-bottom: 12px;
}

/* Footer: START button to match “Start” style used in Select */
#createMatchModal .start-match-btn,
#createMatchModal button[type="submit"] {
  font-family: var(--ui-font, "Rajdhani", system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: .5px;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1f7c5e 0%, #114535 100%);
  border: none;
  color: #eafff6;
  text-shadow: 0 8px 18px rgba(0,0,0,.6);
}
#createMatchModal button[type="submit"]:hover {
  filter: brightness(1.05);
}

/* Responsive */
@media (max-width: 820px) {
  #createMatchModal .create-grid {
    grid-template-columns: 1fr 56px 1fr;
    gap: 10px;
  }
}


@media (max-width: 900px) {
    #createMatchModal .modal-dialog {
        max-width: 420px;
        margin: 0 auto;
    }

    #createMatchModal .modal-content {
        width: 99vw;
        /* padding: 1.2rem 5rem 0.7rem 5rem; */
    }

    #createMatchModal .col-md-5,
    #createMatchModal .col-md-2 {
        flex: 1 1 0 !important;
        max-width: 100% !important;
    }

    #createMatchModal .form-select,
    #createMatchModal .form-control {
        max-width: 98vw !important;
    }
}

/* Make sure columns stay side by side on tablets and above */
@media (min-width: 680px) {
    #createMatchModal .row.g-3 {
        flex-wrap: nowrap !important;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    #createMatchModal .col-md-5 {
        flex: 0 0 42%;
        max-width: 45%;
        min-width: 22vh;
    }

    #createMatchModal .col-md-2 {
        flex: 0 0 13%;
        max-width: 13%;
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Hide modal scrollbars unless absolutely needed */
#createMatchModal .modal-dialog {
    overflow: visible !important;
    margin-top: 2vh !important;
    margin-bottom: 2vh !important;
    margin-left: 2vh !important;
    margin-right: 2vh !important;
}

.team-slot-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #2a5282;
    color: #fff;
    font-size: 1.35em;
    border-radius: 17px;
    margin-bottom: 16px;
    min-height: 72px;
    box-shadow: 0 5px 20px 0 #000;
    cursor: pointer;
    padding: 0 18px;
    transition: background 0.13s;
    border: 3px solid transparent;
    gap: 1em;
    font-weight: bold;
}

.team-slot-card .slot-icon {
    font-size: 1.5em;
}

.team-slot-card.slot-cap {
    background: #cab357;
    color: #191919;
    border: 2px solid #ffda3a;
    box-shadow: 0 5px 20px 0 #000;
}

.team-slot-card.slot-sub {
    background: #205080;
    color: #fff;
    border-color: #4dcfff;
}

.team-slot-card.slot-bot {
    background: #1e6442;
    color: #fff;
    border-color: #2ef09b;
}

.team-slot-card:active,
.team-slot-card:focus {
    background: #40445e;
}


#createMatchModal label {
    color: #9dd1ff;
    letter-spacing: 0.5px;
}

.modal-backdrop {
    opacity: 0.5 !important;
}

#createMatchModal {
    z-index: 2000;
}

body {
    background-color: black;
    color: white;
    font-family: sans-serif;
}

body.modal-open .options-tab {
    display: none !important;
}


.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(white -1000%, #111216);
    gap: 0;
}

#scoreboard {
    flex-shrink: 0;
}

.keypad-button,
.keypad-button1,
.keypad-button2 {
    width: 76px;
    height: 72px;
    padding: 0;
    margin: 4px;
    font-size: 2rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}



.keypad-button i {
    font-size: 2rem;
    /* Big icons, but not bigger than button */
    pointer-events: none;
    /* So click always goes to button, not icon */
}


.history-table {
    width: 100%;
}

.card {
    background-color: #222c38;
    border: none;
    border-radius: 18px;
}

.card-header {
    background-color: #007bff;
    color: white;
    font-size: 1.35rem;
    font-weight: 700;
    border-radius: 18px 18px 0 0;
}

.table {
    color: white;
}

.table th,
.table td {
    vertical-align: middle;
}

.btn-sm {
    padding: 5px 10px;
}

/* ==== Desktop Mode Improvements ====
@media (min-width: 1025px) {
    body {
        background: linear-gradient(135deg, #0a0e1a 0%, #1a1a2e 50%, #16213e 100%);
    }

    .container {
        background: transparent;
        padding-bottom: 0;
    }

    #scoreboard .row {
        align-items: stretch;
    }

    .scoreboard-teambox {
        background: rgba(35, 41, 60, 0.8);
        border: 2px solid rgba(102, 191, 255, 0.3);
        box-shadow: 0 8px 32px rgba(0, 26, 68, 0.4);
        transition: all 0.3s ease;
    }

    .scoreboard-teambox:hover {
        border-color: rgba(102, 191, 255, 0.6);
        box-shadow: 0 12px 40px rgba(0, 26, 68, 0.6);
    }

    .scoreboard-teambox.highlight {
        background: rgba(65, 235, 0, 0.15);
        border-color: #41eb00;
        box-shadow: 0 0 30px rgba(65, 235, 0, 0.4);
    }

    .leg-label a {
        color: #6fd2ff;
        font-weight: 700;
        text-decoration: none;
        font-family: var(--title-font);
    }

    .leg-score-box {
        background: rgba(35, 41, 60, 0.6);
        border-radius: 12px;
        padding: 8px 16px;
        border: 1px solid rgba(102, 191, 255, 0.3);
        font-weight: 800;
        color: #fff;
    }

    #history-container {
        border: 2px solid rgba(102, 191, 255, 0.2);
    }

    .history-table {
        background: transparent;
    }

    .visible-score {
        background: rgba(35, 41, 60, 0.8);
        border: 1px solid rgba(102, 191, 255, 0.2);
        transition: all 0.2s ease;
    }

    .visible-score:hover {
        background: rgba(35, 41, 60, 1);
        border-color: rgba(102, 191, 255, 0.5);
    }

    #keypad {
        border: 2px solid rgba(102, 191, 255, 0.3);
    }

    .keypad-button, .keypad-button1, .keypad-button2 {
        background: linear-gradient(145deg, #23293c 0%, #1a1f2e 100%);
        border: 2px solid rgba(102, 191, 255, 0.3);
        color: #fff;
        transition: all 0.2s ease;
    }

    .keypad-button:hover, .keypad-button1:hover, .keypad-button2:hover {
        background: linear-gradient(145deg, #2a3248 0%, #1f2435 100%);
        border-color: rgba(102, 191, 255, 0.6);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 26, 68, 0.4);
    }

    #score-preview {
        background: rgba(25, 31, 38, 0.9) !important;
        border: 2px solid #00ff40 !important;
        box-shadow: 0 0 20px rgba(0, 255, 64, 0.3) !important;
    }

    .options-tab-button {
        background: rgba(35, 41, 60, 0.9);
        border: 2px solid rgba(102, 191, 255, 0.4);
        transition: all 0.2s ease;
    }

    .options-tab-button:hover {
        background: rgba(35, 41, 60, 1);
        border-color: rgba(102, 191, 255, 0.8);
        transform: scale(1.05);
    }

    .keypad-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .keypad-row {
        margin-bottom: 15px;
    }

    .keypad-row:last-child {
        margin-bottom: 0;
    }
}

/* ==== Responsive TABLET Mode ==== */
@media (max-width: 1024px) {

    html,
    body {
        font-size: 14px;
    }

    .container {
        max-width: 100vw !important;
        height: 100vh;
    }

    #scoreboard {
        padding: 0 !important;
    }

    .team h2,
    .team h1 {
        font-size: 2.1rem;
    }

    .keypad-row {
        margin-bottom: 0px;
    }
}

/* Medium tablet/small laptop responsive styles */
@media (max-width: 768px) {
    #keypad {
        min-height: 260px;
    }

    .keypad-button, .keypad-button1, .keypad-button2 {
        height: 60px;
        font-size: 1.8rem;
    }
}

/* Scoreboard styles */
.team {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* not center! */
    justify-content: flex-start;
    height: 100%;
}

.team h2,
.team h1 {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team h1 {
    font-size: 8rem;
}

.team ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 2rem;
}

/* Highlighted team */
#team1-scoreboard.highlight h2 {
    background: linear-gradient(to bottom, #41eb00, #207201);
    color: #181a1c;
    border-radius: 10px 10px 0 0px;
    text-shadow: 1px 5px 20px rgba(41, 41, 41, 0.6);
    letter-spacing: 3px;
}

#team2-scoreboard.highlight h2 {
    background: linear-gradient(to bottom, #ff0000, #810000);
    color: #181a1c;
    border-radius: 10px 10px 0 0px;
    text-shadow: 1px 5px 20px rgba(41, 41, 41, 0.6);
    letter-spacing: 3px;
}

#team1-scoreboard.highlight h1,
#team2-scoreboard.highlight h1 {
    background: linear-gradient(to bottom, #ffffff, #7b7b7b);
    color: #000000;
    border-radius: 0 0 10px 10px;
    text-shadow: 1px 5px 10px rgba(41, 41, 41, 0.4);
}

.history-table td {
    /* border-left: 3px solid #f3f3f3;
    border-right: 3px solid #f3f3f3; */
    text-align: center;
    vertical-align: top;
    background: none;
}

.history-table tr td:first-child,
.history-table tr td:last-child {
    border-left: none;
    border-right: none;
    border-bottom: none;
    text-shadow: -5px 9px 10px rgb(0, 0, 0);
}

#team1-history-list,
#team2-history-list {
    flex: 1 1 0%;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    /* display: flex; */
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: 0 4px;
    list-style: none;
}

#counter-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 70px;
    height: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    z-index: 0;
}

.turn-counter-num {
    font-size: 2rem;
    font-weight: bold;
    color: #00ffe1;
    background: none;
    text-align: center;
}

/* Make sure the history table columns stay the same width */
#score-history-body td.visible-score {
    min-width: 280px;
    width: 350px;
    /* Adjust to taste for your font-size */
    text-align: center;
    vertical-align: middle;
    transition: width 0.15s;
    /* optionally: white-space: nowrap; */
}

.waiting-player {
    font-size: 4rem;
    letter-spacing: 0.5px;
    /* text-shadow: 0px 0px 20px lime; */
    color: lime;
    font-weight: initial;
}

@media (max-width: 1024px) {
    .turn-counter-num {
        font-size: 2.1rem;
    }
}


.visible-score {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 2px 0;
    /* padding: 5px 0 3px 0; */
    text-shadow: 2px 2px 8px #252525;
    letter-spacing: 1.5px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.17s;
}

/* ONLY history lists get the blue background for the newest item */
#team1-history-list .visible-score:last-child,
#team2-history-list .visible-score:last-child {
    background: #275a87;
}


.visible-score.editing {
    background: #ffe062 !important;
    color: #242831 !important;
}

/* Editable input for history */
.editable-score input {
    font-size: 1.25em;
    border-radius: 7px;
    text-align: center;
    background: #151f2a;
    color: #f8f8f8;
    border: 1.5px solid #007bff;
    width: 80px;
}

.editable-score input:focus {
    outline: 2px solid #22b5ff;
    background: #242e4a;
}

.editable-score {
    font-size: 2em;
    letter-spacing: 0.5rem;
}

#score-history-table {
    border-spacing: 0 18px;
    /* horizontal vertical */
}


/* Keypad */
#keypad {
    padding: 0px 0px 5px 0px;
    min-height: 280px;
}

.keypad-row {
    width: 100%;
    display: flex;
    justify-content: center;
    /* margin-bottom: 9px; */
}

.keypad-button {
    flex: 1 1 25%;
    margin: 4px 2px;
    font-size: 2rem;
    height: 65px;
    border-radius: 11px;
    min-width: 95px !important;
    max-width: 160px;
    background: linear-gradient(to bottom, #000, #131313b8);
    color: #fff;
    border: 1.5px solid #2c3848 !important;
    transition: background 0.14s;
    font-family: 'Coburn', sans-serif;
    text-shadow: -3px 6px 12px rgb(0, 0, 0);
}

.keypad-button1,
.keypad-button2 {
    flex: 1 1 20%;
    margin: 4px 2px;
    font-size: 2.5rem;
    height: 65px;
    border-radius: 11px;
    min-width: 95px !important;
    max-width: 160px;
    color: #fff;
    /* border: 1.5px solid #2c3848 !important; */
    transition: background 0.14s;
    font-family: 'Coburn', sans-serif;
    text-shadow: -3px 6px 12px rgb(0, 0, 0);
    --bs-btn-border-color: none;
}

.keypad-button:active,
.keypad-button1:active,
.keypad-button2:active {
    background: #185bbb;
}

#button-enter {
    background: linear-gradient(to bottom, #47ff0085, #0000);
    color: #ffffff;
    font-weight: 700;
    border: 2px solid #72fc68;
}

#button-miss {
    background: linear-gradient(to bottom, #ff00009e, #00000073);
    color: #fff;
    font-weight: 700;
    border: 2px solid #ff5b5b;
}

#button-back {
    background: linear-gradient(to bottom, #ff00009e, #00000073);
    color: #fff;
    font-weight: 700;
    border: 2px solid #ff5b5b;
}

#button-return1 {
    background: linear-gradient(to bottom, #ffe30078, #655a0000);
    color: #ffffff;
    letter-spacing: 0px;
    border: 2px solid #ffe064;
}

#button-add {
    color: #25ff42;
    font-size: 5.0rem;
    border: 2px solid #2dff6c;
}

.modal.show~.options-tab {
    display: none !important;
}


/* Modals, Options, Admin styles, Table, etc. */
.options-tab {
    position: fixed;
    bottom: 32px;
    right: 36px;
    z-index: 50; /* Increased z-index to be above most content but below keypad */
}

/* Ensure options tab doesn't interfere with keypad on mobile */
@media (max-width: 600px) {
    .options-tab {
        bottom: 280px; /* Position above the keypad area */
        right: 16px;
        z-index: 1050; /* Above keypad but below modals */
    }
}

.options-tab-button {
    padding: 2px 10px;
    font-size: 2rem;
    border-radius: 15px;
}

.options-dropdown {
    position: absolute;
    top: 56px;
    /* space below gear button */
    left: 0;
    background-color: #222e44;
    border-radius: 12px;
    box-shadow: 0 8px 40px #0008;
    padding: 16px 18px 12px 18px;
    display: none;
    min-width: 175px;
    z-index: 0;
}

.options-dropdown .GM a {
    color: #65ff6e;
    font-size: 1.3rem;
    text-align: center;
    display: block;
    margin-bottom: 6px;
}

.options-dropdown button {
    font-size: 1.3rem;
    margin: 6px 0;
    width: 100%;
    border-radius: 9px;
}


.modal-content {
    background: #182642;
    color: #fff;
    border-radius: 24px;
    border: none;
}

.close {
    color: #aaa;
    font-size: 1.5rem;
}

.close:hover,
.close:focus {
    color: white;
}

/* Input, Table, Dropdowns */
.input-group-text,
.form-control,
.form-select {
    color: #fff !important;
    background: #182033 !important;
    border: 1px solid #2c3848 !important;
}

.input-group-text {
    font-weight: 600;
    background: #142040 !important;
    color: #77bfff !important;
}

.table> :not(caption)>*>* {
    /* padding: 0.5rem 0.5rem; */
    color: #d6eaff;
    background-color: #19203800;
    border-bottom-width: inherit;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, #0f0f1b00));
    line-height: 60px;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.badge.bg-warning.text-dark {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* --- Modal styles for tablet --- */
.matchup-modal-content {
    max-width: 740px;
    margin: 0 auto;
    border-radius: 22px;
    background: #151c2b;
    color: #fff;
}

@media (max-width: 1024px) {
    .modal-dialog {
        max-width: 97vw !important;
        margin: 0 auto;
    }

    .matchup-modal-content {
        width: 99vw;
        min-height: 70vh;
        font-size: 1.07em;
    }

    .modal-body {
        padding: 4rem 0rem !important;
    }

    .modal-header,
    .modal-footer {
        padding-left: 8.5rem !important;
        padding-right: 8.5rem !important;
        margin-bottom: 3rem;
    }

    .vs-label {
        font-size: 2em;
        color: #42ffd9;
        letter-spacing: 5px;
        border-radius: 8px;
        padding: 8px 19px;
        background: #181f29;
        box-shadow: 0 2px 9px #007bff21;
        margin: 0 0.4em;
        min-width: 54px;
        text-align: center;
    }

    #team1Players,
    #team2Players {
        min-height: 146px;
    }
}

/* On very small screens, stack columns vertically */
@media (max-width: 680px) {
    .modal-dialog {
        max-width: 99vw !important;
    }

    .vs-label {
        font-size: 1.4em;
        padding: 7px 7px;
        margin: 8px 0;
    }
}

/* Controls for better touch spacing */
.input-group.mb-1,
.input-group.mb-2 {
    margin-bottom: 0.8rem !important;
}

input[type="checkbox"].form-check-input {
    width: 1.55em;
    height: 1.55em;
}

.form-control,
.form-select {
    font-size: 1.5em !important;
    /* min-height: 2.3em; */
}

/* Status badge fixes */
table .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

table .badge.bg-warning.text-dark {
    background-color: #ffc107 !important;
    color: #212529 !important;

    border-radius: 16px !important;
    padding: 2px 20px;
}

#score-preview {
    color: #fff !important;
    background: #191f26 !important;
    border: 1px solid #00ff4080 !important;
    font-size: 4rem !important;
    /* Big font */
    font-weight: bold !important;
    border-radius: 12px !important;
    text-align: center !important;
    letter-spacing: 2px !important;
    box-shadow: 0 0 6px #007bff44 !important;
    min-width: 135px !important;
    max-width: 350px !important;
    margin: 0 7px !important;

    /* Box size: */
    height: 74px !important;
    /* Adjust as you want */
    line-height: 74px !important;
    /* Vertically center the text */
    padding: 0 10px !important;
    /* Remove top/bottom padding, keep side padding */

    /* Force override any .form-control min-height: */
    min-height: 0 !important;
    box-sizing: border-box !important;
}


.input-group-text {
    font-size: 1.06em;
    border-radius: 14px 0 0 14px;
    padding: 7px 15px;
}

/* Make sub/bot/cap options a little more spaced for touch */
.input-group>.form-check-input {
    margin-right: 12px;
}

.score-win-num {
    background: #111a30;
    border-radius: 8px;
    padding: 3px 13px;
    font-size: 2.0rem;
    min-width: 38px;
    display: inline-block;
    text-align: center;
    color: #ffe87c;
    box-shadow: 0 2px 10px #0a102288;
    margin: 1px 0;
}

.score-win-dash {
    font-size: 2.1rem;
    font-weight: 700;
    color: #fff;
}

#current-leg {
    font-size: 1.3rem;
    color: #65d4fd;
    letter-spacing: 1.5px;
}

@media (max-width: 1024px) {
    .score-win-num {
        font-size: 1.7rem;
        min-width: 30px;
    }

    .score-win-dash {
        font-size: 1.7rem;
    }

    #current-leg {
        font-size: 2rem;
    }
}

#mid-leg-score {
    min-width: 90px;
    max-width: 120px;
}

@media (max-width: 900px) {
    #mid-leg-score .leg-label {
        font-size: 1.05rem;
    }

    #mid-leg-score .leg-score-box {
        font-size: 1.12rem;
    }
}


.scoreboard-teambox {
    border-radius: 16px;
    margin-bottom: 3px;
    min-height: 136px;
    transition: background 0.15s, box-shadow 0.15s;
}

.scoreboard-teambox .scoreboard-score {
    font-size: 4.2rem;
    line-height: 1.08;
    font-family: 'Coburn', 'Mgchalkwalk', monospace;
    margin: 0;
    padding: 0px 0 0px 0;
    font-weight: 900;
    color: #fff;
    text-shadow: 1px 4px 18px #003a77b7;
}

/* .scoreboard-teambox.highlight {
    background: linear-gradient(145deg, #43f745 0%, #c7f5db 100%);
    box-shadow: 0 6px 28px #0fa1403a;
} */
.scoreboard-teambox.lowlight {
    opacity: 0.86;
}

.scoreboard-teambox h2 {
    color: #c8e0ff;
    font-size: 1.25rem;
    margin: 0;
    font-family: 'Coburn', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    background: none;
}


body.modal-open .options-tab {
    display: none !important;
}


.rounded-circle {
    border-radius: 30% !important;
}

#history-container {
    /* min-height: 220px; */
    /* height: 46%; */
    /* max-height: 60vh; */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    margin: 0px -5px 0px -5px;
    font-family: 'Coburn', sans-serif;
}

#score-history-table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
}

#score-history-table,
#score-history-table tbody {
    width: 100%;
    height: 100%;
}


#score-history-table tr {
    display: block;
}

#score-history-table td {
    display: table-cell;
}

#score-history-table td {
    vertical-align: middle;
    text-align: center;
    /* Don't set font-size here, let .visible-score control it */
}

/* Always keep columns same width */
#score-history-table td {
    width: 33.33%;
}

.visible-score.waiting-player {
    font-size: 1.6rem !important;
    font-weight: 500;
    color: #91c9ff;
    opacity: 0.95;
    letter-spacing: 0.4px;
    background: transparent !important;
    text-shadow: none !important;
    padding: 0.4em 0 0.3em 0 !important;
}

@keyframes bustFade {
    from {
        text-shadow: 0px 0px 80px rgb(255, 0, 0);
    }

    to {
        text-shadow: 0px 0px 40px rgba(255, 0, 0, 0.288);
    }
}

@keyframes missFade {
    from {
        text-shadow: 0px 0px 80px rgb(255, 102, 0);
    }

    to {
        text-shadow: 0px 0px 40px rgba(255, 102, 0, 0.247);
    }
}

.bust-cell {
    animation: bustFade 2s cubic-bezier(0.23, 1, 0.32, 1);
    text-shadow: 0px 0px 40px rgba(255, 0, 0, 0.288) !important;
    background: rgba(255, 0, 0, 0.08);
    /* subtle highlight */
    border-radius: 14px;
    color: #c1121f;
    font-weight: bold;
    font-size: 2rem;
}

.bust-text {
    color: #c1121f !important;
    font-weight: bold;
    font-size: 2.5rem;
    letter-spacing: 1px;
}

.miss-cell {
    animation: missFade 5s;
    text-shadow: 0px 0px 40px rgba(255, 102, 0, 0.247) !important;
    border-radius: 14px;
}

.miss-text {
    color: #ff8800 !important;
    font-weight: bold;
    font-size: 2.5rem;
    letter-spacing: 1px;
}
.modal-disabled {
  pointer-events: none;
  opacity: 0.5;
  user-select: none;
}

@keyframes popInGlow {
  0% {
    transform: scale(0.82);

    opacity: 0.65;
    text-shadow: 0 0 10px #fff, 0 0 0px #42ffd9;
  }
  50% {
    transform: scale(1.22);

    opacity: 1;
    text-shadow: 0 0 18px #fff, 0 0 16px #42ffd9;
  }
  82% {
    transform: scale(0.96);

    text-shadow: 0 0 4px #42ffd9;
  }
  100% {
    transform: scale(1);
    box-shadow: none;
    opacity: 1;
    text-shadow: none;
  }
}

.pop-in-glow {
  animation: popInGlow 2.0s cubic-bezier(.46,1.48,.64,1);

  will-change: transform, box-shadow, background, opacity, text-shadow;
}

@keyframes waitingPulse {
  0% { 
    transform: scale(0.98); 
    opacity: 0.7; 
    text-shadow: 0 0 0px #116c1d; /* dark green */
  }
  50% { 
    transform: scale(3.08); 
    opacity: 1; 
    text-shadow: 0 0 32px #22f14a, 0 0 16px #116c1d; /* bright + dark green */
  }
  100% { 
    transform: scale(0.98); 
    opacity: 0.7; 
    text-shadow: 0 0 0px #116c1d; /* dark green */
  }
}
.waiting-player.animate {
  animation: waitingPulse 8.0s cubic-bezier(.46,1.48,.64,1) infinite;
}



.editable-score, .pop-in-glow {
  display: inline-block;
}


@media (max-width: 600px) {
  #scoreboard {
    position: sticky;
    top: 0;
    background: #191f2b;
    z-index: 1051;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 40px #001a4412;
  }
  #keypad {
    width: 100vw;
    left: 0;
    bottom: 0;
    padding: 0 0 5px 0;
    box-shadow: 0 -6px 40px #001a4455;
    /* Ensure keypad stays visible on very small screens */
    min-height: 240px;
  }
  .keypad-row {
    flex-wrap: wrap;
    gap: 2px; /* Add small gap to prevent button overflow */
    margin-bottom: 2px;
    justify-content: center; /* Center buttons in row */
  }
  .keypad-button, .keypad-button1, .keypad-button2 {
    font-size: 1.5rem;
    min-width: 55px !important;
    max-width: 100vw;
    width: calc(20% - 4px) !important; /* Better width calculation with gap */
    height: 56px;
    margin: 2px 1px; /* Reduced margin to fit better */
    border-radius: 12px;
    padding: 0;
    /* Ensure buttons don't get too small */
    flex-shrink: 0;
  }
  #score-preview {
    font-size: 2.5rem !important;
    min-width: 85px !important;
    max-width: 90vw !important;
    height: 54px !important;
    line-height: 54px !important;
    margin: 0 3px !important;
  }
  .visible-score {
    font-size: 1.35rem !important;
    padding: 2px 0;
  }
  .scoreboard-teambox .scoreboard-score {
    font-size: 2.2rem;
    padding: 2px 0 2px 0;
  }
}

/* iPhone Pro Max and similar tall narrow screens (428x926 range) */
@media (max-width: 430px) and (min-width: 410px) and (max-height: 950px) {
  .keypad-button, .keypad-button1, .keypad-button2 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: calc(20% - 4px) !important;
    min-width: 55px !important;
    height: 70px !important;
    font-size: 1.2rem;
    padding: 4px 0 !important;
    text-align: center;
  }

  .keypad-button i, .keypad-button1 i, .keypad-button2 i {
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 1.4rem !important;
  }

  #keypad {
    min-height: 300px;
  }

  .keypad-row {
    margin-bottom: 4px;
  }
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
  .keypad-button, .keypad-button1, .keypad-button2 {
    width: calc(25% - 3px) !important; /* 4 buttons per row on very small screens */
    min-width: 45px !important;
    font-size: 1.3rem;
    height: 50px;
  }

  #keypad {
    min-height: 220px;
  }

  .keypad-row {
    margin-bottom: 1px;
  }
}

/* Landscape orientation fixes */
@media (max-height: 500px) and (orientation: landscape) {
  #keypad {
    min-height: 200px;
    padding-bottom: 1px;
  }

  .keypad-button, .keypad-button1, .keypad-button2 {
    height: 48px;
    font-size: 1.4rem;
  }

  .container {
    padding-bottom: 80px;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #keypad {
    /* Ensure crisp edges on high DPI displays */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* League Context Bar Styles */
.league-context-bar {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-bottom: 2px solid #aaff00;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 100;
}

.league-context-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 12px 20px;
  min-height: 60px;
}

.league-context-label {
  font-weight: 600;
  color: #aaff00;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.current-league-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(170, 255, 0, 0.1);
  border: 1px solid rgba(170, 255, 0, 0.3);
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 200px;
  justify-content: center;
}

#leagueContextIcon {
  font-size: 1.2rem;
}

#leagueContextName {
  font-weight: 600;
  color: #ffffff;
  font-size: 1rem;
}

.change-league-btn {
  background: rgba(170, 255, 0, 0.1);
  border: 1px solid rgba(170, 255, 0, 0.5);
  color: #aaff00;
  font-weight: 600;
  transition: all 0.2s ease;
}

.change-league-btn:hover {
  background: rgba(170, 255, 0, 0.2);
  border-color: #aaff00;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Mobile responsive for league context bar */
@media (max-width: 768px) {
  .league-context-content {
    flex-direction: column;
    gap: 10px;
    padding: 10px 15px;
  }

  .current-league-display {
    min-width: 180px;
    padding: 6px 12px;
  }

  .league-context-label {
    font-size: 1rem;
  }

  #leagueContextName {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .league-context-content {
    padding: 8px 10px;
  }

  .current-league-display {
    min-width: 160px;
    padding: 5px 10px;
  }

  .change-league-btn {
    font-size: 0.85rem;
    padding: 4px 12px;
  }
}

/* ===== PHASE 1: Error Handling & Validation Styles ===== */

/* Error Toast Notifications */
.error-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    max-width: 500px;
}

.error-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #dc3545;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-weight: 500;
}

.error-content i {
    font-size: 1.2rem;
}

.error-content button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.error-content button:hover {
    opacity: 1;
}

/* Field Validation Errors */
.field-errors {
    margin-top: 4px;
}

.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #dc3545;
    font-size: 0.875rem;
    margin-bottom: 4px;
}

.field-error i {
    font-size: 0.8rem;
}

.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

.loading-text {
    color: #6c757d;
    font-size: 0.9rem;
}

/* Score Display Component */
.score-display {
    text-align: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.score-value {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 4px;
}

.score-label {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Player Card Component */
.player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    transition: transform 0.2s, box-shadow 0.2s;
}

.player-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.player-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.player-score {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
}

.player-stats {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 8px;
}

/* Score History Component */
.score-history {
    max-height: 300px;
    overflow-y: auto;
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.score-turn {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Enhanced Button Sizes */
.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-large {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
}

/* Alert Styles */
.alert {
    position: relative;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

.alert-success {
    color: #0f5132;
    background-color: #d1edff;
    border-color: #badbcc;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.numpad-modal-bg {
  background: linear-gradient(white -1000%, #111216);
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.23);
}

.numpad-entry-label {
  font-family: var(--title-font, "Orbitron", sans-serif);
  font-weight: 800;
  color: var(--neon-cyan, #66bfff);
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
  font-size: 2.2rem;
  letter-spacing: 2px;
}

.numpad-new-value {
  font-size: 2.6em !important;
  font-weight: 900 !important;
  letter-spacing: 1px;
  background: transparent;
  color: lime !important;
  border: none;
  box-shadow: none;
}

.numpad-btn {
  width: 72px !important;
  height: 60px !important;
  font-size: 2em !important;
  font-weight: 800;
  border-radius: 12px !important;
  margin: 0 8px 8px 0;
  background: #23272b !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.13);
  transition: background 0.18s;
}
.numpad-btn:active, .numpad-btn:focus {
  background: #444 !important;
}
#editScoreNumpadPad {
  margin-bottom: 0.6em;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.418);
    font-size: 30px;
}

.modal-header1 {
    text-align: center;
}

#summaryModal .modal-dialog { max-width: 1200px; }
#summaryModal .modal-body   { max-height: 80vh; overflow: auto; }
#summaryModal .modal-title  { font-size: 3rem; }

/* ==== SELECT MATCH (theme to match the sample) ==== */
#selectMatchModal .modal-backdrop,
.modal-backdrop { opacity: .85 !important; }

#selectMatchModal .modal-dialog { max-width: 980px; }

#selectMatchModal .modal-content.neon-select {
  background: radial-gradient(1200px 800px at 20% -10%, #0f2238 0%, transparent 60%), radial-gradient(1200px 800px at 120% 10%, #0b1b2e 0%, transparent 55%), linear-gradient(200deg, #0a1320 0%, #13050e 100%);
  border: none;
  border-radius: 24px;
  color: #dfe9ff;
  box-shadow: 0 10px 48px #001a441f;
  padding: 18px 22px 26px 22px;
  font-family: var(--ui-font);
}

#selectMatchModal .modal-title {
  font-family: var(--title-font);
  font-weight: 800;
  color: var(--neon-cyan);
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
  font-size: 2.2rem;
}

#selectMatchModal .week-header {
  display: flex;
  justify-content: center;
  margin: 10px 0 16px;
}
#selectMatchModal #active-week-label-select {
  font-family: var(--title-font);
  color: var(--neon-green);
  font-size: 1.9rem;
  text-shadow: 0 8px 18px rgba(0,0,0,.6);
}

/* Grid header + rows aligned */
#selectMatchModal .sched-grid {
  display: grid;
  grid-template-columns: 1.4fr 80px 1.4fr 140px 120px; /* HOME | VS | AWAY | Status | Action */
  align-items: center;
  gap: 12px;
}

#selectMatchModal .sched-head {
  background: rgba(12, 19, 33, .65);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #a9c7ff;
  margin-bottom: 12px;
}

#selectMatchModal .sched-head > div { text-transform: uppercase; }
#selectMatchModal .sched-head .vs-col { text-align: center; }
#selectMatchModal .sched-head .status-col { text-align: center; }
#selectMatchModal .sched-head .action-col { text-align: center; }

/* List container */
#selectMatchModal .sched-list { display: grid; gap: 14px; }

/* Row card */
#selectMatchModal .sched-row {
  display: contents; /* lets children align to the same grid columns as header */
}

/* Actual columns stacked above the card via grid */
#selectMatchModal .col-team1,
#selectMatchModal .col-team2,
#selectMatchModal .col-vs,
#selectMatchModal .col-status,
#selectMatchModal .col-action {
  padding: 0px;
}
#selectMatchModal .col-team1 { grid-column: 1; }
#selectMatchModal .col-vs    { grid-column: 2; text-align:center; }
#selectMatchModal .col-team2 { grid-column: 3; }
#selectMatchModal .col-status{ grid-column: 4; display:flex; justify-content:center; }
#selectMatchModal .col-action{ grid-column: 5; display:flex; justify-content:center; }

/* Team name pill */
#selectMatchModal .team-name {
  display: inline-flex; align-items: center;
  background: #142e5e63;
  border: none;
  box-shadow: inset 0 0 0 1px #0b1422, 0 4px 14px rgba(0,0,0,.4);
  color: #dff2ff;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 100%;
  width: 120px;
}

/* VS badge */
#selectMatchModal .vs-badge {
  font-family: var(--title-font);
  color: var(--neon-mint);
  font-size: 1.8rem;
  letter-spacing: 3px;
  text-shadow: 0 8px 16px rgba(0,0,0,.7);
}

/* Status chips */
.badge-upcoming {
  background: #1e824f;
  border: none;
  color: #eafff6;
  font-weight: 800;
  border-radius: 10px;
  padding: 12px 12px;
}
.badge-final {
  background: #7a1f29;
  border: none;
  color: #ffe5e7;
  font-weight: 800;
  border-radius: 10px;
  padding: 8px 12px;
}
.badge-live {
  background: #1d3f7a;
  border: none;
  color: #e7f0ff;
  font-weight: 800;
  border-radius: 10px;
  padding: 8px 12px;
}

/* Start button */
#selectMatchModal .start-btn {
  font-family: var(--ui-font);
  font-weight: 800;
  letter-spacing: .5px;
  padding: 10px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1f7c5e 0%, #114535 100%);
  border: none;
  color: #eafff6;
  text-shadow: 0 8px 18px rgba(0,0,0,.6);
}
#selectMatchModal .start-btn:disabled {
  opacity: .5; filter: grayscale(.3);
}

/* Responsive: collapse spacing but keep columns aligned */
@media (max-width: 820px) {
  #selectMatchModal .modal-dialog { max-width: 96vw; }
  #selectMatchModal .sched-grid {
    grid-template-columns: 1fr 56px 1fr 110px 100px;
    gap: 10px;
  }
  #selectMatchModal .team-name { font-size: 1.05rem; padding: 9px 12px; }
  #selectMatchModal .vs-badge { font-size: 1.4rem; }
}

/* ==== SETTINGS MODAL THEME ==== */
/* General neon-settings styling for all modals */
.neon-settings {
  background: radial-gradient(1200px 800px at 20% -10%, #0f2238 0%, transparent 60%), radial-gradient(1200px 800px at 120% 10%, #0b1b2e 0%, transparent 55%), linear-gradient(200deg, #0a1320 0%, #13050e 100%);
  border: none;
  border-radius: 24px;
  color: #dfe9ff;
  box-shadow: 0 10px 48px #001a441f;
  padding: 24px 28px 26px 28px;
  font-family: var(--ui-font, "Rajdhani", sans-serif);
}

#settingsModal .modal-content.neon-settings {
  background: radial-gradient(1200px 800px at 20% -10%, #0f2238 0%, transparent 60%), radial-gradient(1200px 800px at 120% 10%, #0b1b2e 0%, transparent 55%), linear-gradient(200deg, #0a1320 0%, #13050e 100%);
  border: none;
  border-radius: 24px;
  color: #dfe9ff;
  box-shadow: 0 10px 48px #001a441f;
  padding: 24px 28px 26px 28px;
  font-family: var(--ui-font, "Rajdhani", sans-serif);
}

/* General neon modal title styling for all neon-settings modals */
.neon-settings .modal-title {
  font-family: var(--title-font, "Orbitron", sans-serif);
  font-weight: 800;
  color: var(--neon-cyan, #66bfff);
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
  font-size: 2.2rem;
  letter-spacing: 2px;
}

#settingsModal .modal-title {
  font-family: var(--title-font, "Orbitron", sans-serif);
  font-weight: 800;
  color: var(--neon-cyan, #66bfff);
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
  font-size: 2.2rem;
  letter-spacing: 2px;
}

#settingsModal .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 24px;
}

/* Button base */
#settingsModal .settings-btn {
  width: 80%;
  max-width: 380px;
  font-family: var(--ui-font, "Rajdhani", sans-serif);
  font-weight: 800;
  letter-spacing: .5px;
  padding: 16px 20px;
  border-radius: 14px;
  font-size: 1.6rem;
  text-shadow: 0 8px 18px rgba(0,0,0,.6);
  border: 1px solid transparent;
  transition: all 0.18s;
}

/* Variants */
#settingsModal .btn-resume {
  background: linear-gradient(180deg, #1f7c5e 0%, #114535 100%);
  border-color: #25d3a0;
  color: #eafff6;
}

#settingsModal .btn-fullscreen {
  background: linear-gradient(180deg, #19507c 0%, #112b45 100%);
  border-color: #34d2ff;
  color: #d6f1ff;
}

#settingsModal .btn-exit {
  background: linear-gradient(180deg, #7a1f29 0%, #431016 100%);
  border-color: #ff5e6c;
  color: #ffe5e7;
  margin-top: auto; /* push to bottom */
  text-align: center;
}

/* Hover effect */
#settingsModal .settings-btn:hover {
  filter: brightness(1.1);
}

/* Status badge fixes - ensure orange pills work correctly */
.badge.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

.badge.bg-warning.text-dark {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

/* Floating Settings Button */
.options-tab {
    position: fixed !important;
    bottom: 375px !important;
    left: 5px !important;
    z-index: 1000 !important;
}

.options-tab-button {
    width: 50px !important;
    height: 50px !important;
    background: rgba(25, 31, 43, 0.9) !important;
    color: #4dcfff !important;
    box-shadow: 0 4px 20px rgba(0, 26, 68, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

.options-tab-button:hover {
    background: rgba(77, 207, 255, 0.2) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(77, 207, 255, 0.4) !important;
}

/* Hide settings button when modal is open */
body.modal-open .options-tab {
    display: none !important;
}

@media (max-width: 768px) {
    .options-tab {
        bottom: 375px !important;
        left: 5px !important;
    }
    
    .options-tab-button {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
    }
}