:root {
    color-scheme: dark;
    --bg: #171719;
    --surface: #242426;
    --surface-2: #2d2d30;
    --border: #444448;
    --gold: #ffd500;
    --gold-hover: #ffe34a;
    --text: #f8f8f8;
    --muted: #bebec5;
    --danger: #c43f3f;
    --success: #31a76a;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at top, #29292d 0, var(--bg) 32rem); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }

.brand { display: flex; align-items: center; gap: .8rem; color: var(--gold); text-decoration: none; }
.brand img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; }
.brand strong { font-size: 1.25rem; }
.auth-brand { justify-content: center; margin-bottom: 1.25rem; }
.auth-brand img { width: 82px; height: 82px; }
.auth-brand strong { display: block; font-size: clamp(1.55rem, 4vw, 2.25rem); }
.auth-brand span { display: block; color: var(--muted); margin-top: .25rem; }

.auth-shell { width: min(900px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.25rem, 4vh, 3rem) 0; }
.auth-card { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: 0 24px 70px #0008; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: #1d1d1f; }
.tab { min-height: 74px; padding: 1rem; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font-size: clamp(1rem, 2.8vw, 1.45rem); font-weight: 800; }
.tab.active { color: var(--gold); background: var(--surface); border-bottom-color: var(--surface); box-shadow: inset 0 3px var(--gold); }
.tab-panel { display: none; padding: clamp(1.25rem, 4vw, 2.4rem); }
.tab-panel.active { display: block; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .65rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { margin-bottom: 1rem; font-size: clamp(1.35rem, 3vw, 1.8rem); }
p, small { color: var(--muted); }

form { margin: 0; }
label { display: grid; gap: .45rem; color: var(--text); font-weight: 700; }
label small { font-weight: 400; }
input, select, textarea { width: 100%; min-height: 48px; padding: .7rem .85rem; border: 1px solid #5a5a60; border-radius: 7px; outline: 0; background: #303034; color: var(--text); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #ffd50025; }
input[type="date"] { color-scheme: dark; }
#sign-in-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: .75rem 1.2rem; border: 0; border-radius: 7px; text-decoration: none; font-weight: 900; }
.button.primary { background: var(--gold); color: #111; }
.button.primary:hover { background: var(--gold-hover); }
.button.danger { background: var(--danger); color: white; }
.button.blue { background: #65a9e8; color: #071523; }
.button:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.35); }
.button.wide { width: 100%; margin-top: .5rem; }
.button.compact { min-height: 38px; padding: .45rem .8rem; background: #3b3b40; }
.button.compact:hover { background: #4a4a51; color: var(--gold); }
.button.compact.delete { background: #7f3030; color: white; }
.button.compact.delete:hover { background: var(--danger); color: white; }
.form-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: .5rem; }
.table-actions { display: flex; align-items: center; gap: .5rem; }
.section-tabs { display: flex; align-items: end; gap: .35rem; margin: -1rem 0 1.5rem; border-bottom: 2px solid var(--border); }
.section-tabs a { padding: .8rem 1.1rem .7rem; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-weight: 800; }
.section-tabs a:hover { color: var(--text); }
.section-tabs a.active { border-bottom-color: var(--gold); color: var(--gold); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem; border-right: 1px solid #303034; background: #202023; }
.group-chip { display: grid; gap: .25rem; padding: 1rem; border-radius: 12px; background: var(--surface-2); }
.group-chip strong { color: var(--gold); }
.group-chip span { color: var(--muted); font-size: .9rem; }
.sidebar nav { display: grid; gap: .35rem; }
.sidebar nav a, .logout { width: 100%; padding: .85rem 1rem; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; text-decoration: none; }
.sidebar nav a:hover, .sidebar nav a.active { background: #39393d; color: var(--gold); }
.sidebar form { margin-top: auto; }
.logout { background: #8f3434; text-align: center; }
.content { width: min(1500px, 100%); padding: clamp(1.2rem, 3vw, 3rem); }
.page-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.eyebrow { color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.page-heading h1 { margin: .3rem 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stats article, .panel, .game-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.stats article { display: grid; gap: .25rem; padding: 1.3rem; }
.stats strong { color: var(--gold); font-size: 2rem; }
.stats span { color: var(--muted); }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.game-card { padding: 1.4rem; }
.game-card h3 { margin: .65rem 0; font-size: 1.35rem; }
.game-icon { font-size: 2rem; }
.status-pill { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; background: #ffd5001f; color: var(--gold); font-size: .82rem; font-weight: 800; }
.dashboard-heading { align-items: center; }
.game-stat-tabs { display: flex; align-items: stretch; gap: .45rem; margin: -.6rem 0 1.5rem; overflow-x: auto; border-bottom: 1px solid var(--border); }
.game-stat-tabs a { flex: 0 0 auto; min-width: 150px; padding: .9rem 1rem; border: 1px solid var(--border); border-bottom: 3px solid transparent; background: #303034; text-align: center; text-decoration: none; font-weight: 900; }
.game-stat-tabs a:hover { color: var(--gold); }
.game-stat-tabs a.active { border-color: #8b7500; border-bottom-color: var(--gold); background: #4b4000; color: var(--gold); }
.dashboard-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dashboard-metrics article { min-width: 0; }
.dashboard-metrics strong { overflow-wrap: anywhere; font-size: clamp(1.35rem,2.2vw,2rem); }
.dashboard-metrics small { min-height: 1.4em; }
.dashboard-detail-grid { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.6fr); gap: 1rem; }
.dashboard-latest { display: grid; align-content: start; text-align: center; }
.dashboard-latest h2 { text-align: left; }
.dashboard-latest h3 { margin: .4rem 0; color: var(--gold); font-size: 1.65rem; }
.dashboard-latest > small { margin-top: .5rem; }
.dashboard-winner-icon { font-size: 3.25rem; }
.statistics-shell { padding: 1.3rem; }
.statistics-title p { margin-bottom: 1.35rem; }
.statistics-detail-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.9fr); gap: 1rem; }
.statistic-table table { min-width: 720px; }
.statistic-table th:not(:nth-child(2)),.statistic-table td:not(:nth-child(2)) { text-align: center; }
.statistic-table tbody tr:first-child { background: #ffd5000c; }
.statistic-table tbody tr:first-child td:first-child,.statistic-table tbody tr:first-child td:nth-child(2) { color: var(--gold); }
.recent-game-list { display: grid; gap: .65rem; margin-top: 1rem; }
.recent-game-list article { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: .65rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: #1c1c1f; }
.recent-game-list article > span { font-size: 1.4rem; }
.recent-game-list p { margin: .2rem 0; font-size: .88rem; }
.recent-game-list small { font-size: .75rem; }
.history-tabs a { min-width: 190px; }
.history-shell { padding: 1.25rem; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.history-toolbar h2,.history-toolbar p { margin: 0; }
.history-toolbar .form-actions { margin: 0; }
.history-layout { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.8fr); min-height: 570px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.history-list { min-width: 0; padding: 1rem; border-right: 1px solid var(--border); background: #1d1d20; }
.history-list h3 { margin-bottom: .75rem; }
.history-list-items { display: grid; gap: .35rem; max-height: 650px; overflow-y: auto; }
.history-list-items a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .2rem .6rem; padding: .75rem; border: 1px solid transparent; border-radius: 8px; text-decoration: none; }
.history-list-items a:hover { border-color: #6d6d73; background: #29292d; }
.history-list-items a.active { border-color: #8d7600; background: #514500; }
.history-list-items span { font-size: .78rem; }
.history-list-items strong { color: var(--gold); font-size: .8rem; }
.history-list-items small { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-detail { min-width: 0; max-height: 720px; overflow-y: auto; padding: 1.25rem; }
.history-detail-heading h2 { margin: .35rem 0; color: var(--gold); }
.history-summary-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; margin: 1rem 0 1.4rem; }
.history-summary-cards article { display: grid; gap: .3rem; padding: .8rem; border: 1px solid var(--border); border-radius: 10px; background: #202024; }
.history-summary-cards span { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.history-summary-cards strong { overflow-wrap: anywhere; color: var(--gold); }
.history-detail > h3 { margin: 1.4rem 0 .65rem; }
.history-rack-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.history-rack-list article { display: grid; gap: .2rem; padding: .7rem; border: 1px solid var(--border); border-radius: 9px; background: #202024; }
.history-rack-list strong { color: var(--gold); }
.history-inline-metrics { display: flex; flex-wrap: wrap; gap: .7rem; }
.history-inline-metrics span { min-width: 150px; padding: .8rem; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); }
.history-inline-metrics b { display: block; margin-top: .25rem; color: var(--gold); font-size: 1.5rem; }
.version-badge { align-self: flex-start; padding: .7rem 1rem; border-radius: 999px; background: #101f38; color: #dceaff; font-weight: 900; white-space: nowrap; }
.settings-grid { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.settings-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; padding: 1.25rem; border: 1px solid #385174; border-radius: 14px; background: #202b3b; }
.settings-card.protected { border-color: #347a58; background: #20342a; }
.settings-card.information { border-color: #8b6c25; background: #38301e; }
.settings-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #32445f; color: #78aaff; font-size: 1.3rem; font-weight: 900; }
.settings-card.protected .settings-icon { background: #28563f; color: #73dfaa; }
.settings-card.information .settings-icon { background: #6b5421; color: #ffd76a; }
.settings-card strong, .settings-card b { display: block; }
.settings-card b { margin: .35rem 0; color: #74a8ff; font-size: 1.55rem; }
.settings-card p { margin: .35rem 0 0; }
.settings-card ul { margin: .65rem 0 0; padding-left: 1.25rem; color: var(--text); }
.settings-card li { margin: .4rem 0; }
.update-form { display: grid; gap: 1rem; }
.update-step { margin: 0; }
.update-package-grid { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(360px,1.28fr); align-items: stretch; gap: 1rem; }
.update-picker { min-width: 0; }
.step-heading { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.step-heading > span { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #2476db; color: white; font-weight: 900; }
.step-heading h2 { margin: 0 0 .2rem; }
.step-heading p { margin: 0; }
.update-drop { position: relative; display: grid; place-items: center; min-height: 155px; padding: 1rem; border: 2px dashed #4d91f4; border-radius: 14px; background: #1c2635; text-align: center; cursor: pointer; }
.update-drop:hover { background: #223047; }
.update-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-symbol { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .4rem; border-radius: 50%; background: #2476db; color: white; font-size: 2rem; }
.update-drop small { display: block; }
.selected-file { display: flex; gap: 1rem; margin-top: .8rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 9px; background: #1d1d20; }
.selected-file span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.update-notes { display: grid; grid-template-columns: 42px minmax(0,1fr); align-content: start; gap: .9rem; min-height: 155px; padding: 1.2rem; border: 1px solid #8b6c25; border-radius: 14px; background: #38301e; }
.update-notes::before { content: 'i'; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: #6b5421; color: #ffd76a; font-size: 1.2rem; font-weight: 900; }
.update-notes > .update-notes-icon { display: none; }
.update-notes h3 { margin: .1rem 0 .45rem; color: #ffd76a; font-size: 1.25rem; }
.update-notes p { margin-bottom: .6rem; }
.update-notes ol { margin: .65rem 0 0; padding-left: 1.35rem; }
.update-notes li { margin: .5rem 0; }
.update-notes.loading { opacity: .72; }
.update-notes.error { border-color: #9a4444; background: #382222; }
.update-notes.error::before { content: '!'; background: #6f3030; color: #ffb3b3; }
.update-bottom { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1rem; }
.install-step { align-content: start; }
.install-step > small { display: block; margin-top: .75rem; text-align: center; }
.panel { margin-bottom: 1.5rem; padding: clamp(1rem, 3vw, 1.6rem); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-heading span { color: var(--gold); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem .75rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.empty-state { padding-block: 3rem; text-align: center; }
.registration-share { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 1.25rem; margin: 1rem 0 1.5rem; }
.qr-card { display: grid; justify-items: center; gap: .6rem; padding: 14px; border-radius: 12px; background: white; color: #222; }
.qr-card [data-qr], .qr-card img, .qr-card canvas { display: block; width: 220px; height: 220px; }
.qr-card small { color: #333; font-weight: 800; }
.join-link { min-width: 0; display: grid; gap: .8rem; padding: 1rem; border-radius: 10px; background: #19191b; }
.join-link a { overflow-wrap: anywhere; color: #9ecfff; }
.roster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.check-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: .8rem; min-height: 76px; padding: .9rem; border: 1px solid var(--border); border-radius: 9px; background: #2a2a2d; }
.check-card:has(input:checked) { border-color: #c5a900; background: #34311e; }
.check-card input { width: 24px; height: 24px; min-height: 24px; margin: 0; padding: 0; accent-color: var(--gold); }
.check-card-text { min-width: 0; display: grid; gap: .25rem; }
.check-card-text strong, .check-card-text small { display: block; overflow-wrap: anywhere; }
.registered-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.registered-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: .8rem; min-height: 72px; padding: .9rem; border: 1px solid #4f713c; border-radius: 9px; background: #263021; }
.registered-card strong { display: block; min-width: 0; overflow-wrap: anywhere; }
.registered-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: white; font-weight: 900; }
.registration-empty { display: grid; gap: .35rem; margin-bottom: 1rem; padding: 1.3rem; border: 1px dashed #5a5a60; border-radius: 9px; text-align: center; }
.registration-empty span { color: var(--muted); }
.game-registration-title { margin-bottom: 1.6rem; text-align: center; }
.game-registration-title h1 { margin-bottom: .45rem; color: var(--gold); text-transform: uppercase; }
.game-registration-title strong { color: #79e987; font-size: 1.25rem; }
.game-registration-grid { display: grid; grid-template-columns: minmax(320px,.95fr) minmax(360px,1.05fr); gap: 1.5rem; }
.game-registration-grid > .panel { min-height: 520px; margin-bottom: 0; }
.game-scan-panel { display: grid; align-content: start; justify-items: center; text-align: center; }
.game-scan-panel h2 { margin-bottom: .45rem; }
.game-registration-qr { margin: .65rem auto 1.25rem; padding: 18px; }
.game-registration-qr [data-qr], .game-registration-qr img, .game-registration-qr canvas { width: min(280px,100%); height: auto; aspect-ratio: 1; }
.registration-game-id { display: grid; justify-items: center; gap: .35rem; }
.registration-game-id strong { color: var(--gold); font-size: 2rem; letter-spacing: .08em; }
.game-registered-panel { display: flex; min-width: 0; flex-direction: column; }
.game-registered-panel h2 { margin-bottom: .45rem; }
.registered-count { color: var(--gold); font-size: 1.1rem; }
.game-registered-list { min-height: 380px; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--border); background: #1d1d1f; }
.game-registered-list .registered-card { margin-bottom: .7rem; }
.game-registered-list .registration-empty { min-height: 100%; place-content: center; }
.join-choice { padding: 1.15rem; border: 1px solid var(--border); border-radius: 12px; background: #29292c; }
.join-choice > form { display: grid; gap: 1rem; }
.join-choice summary { cursor: pointer; color: var(--gold); font-size: 1.35rem; font-weight: 900; }
.join-choice[open] summary { margin-bottom: 1rem; }
.or-divider { display: flex; align-items: center; gap: .8rem; margin: 1.25rem 0; color: var(--muted); }
.or-divider::before, .or-divider::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.action-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 1.25rem 0; }
.assassin-live-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(340px, .85fr); grid-template-areas: "shooter roster" "balls roster"; gap: 1rem; align-items: stretch; }
.shooter { grid-area: shooter; display: grid; place-content: center; min-height: 320px; text-align: center; }
.shooter > span { color: var(--muted); font-weight: 800; }
.shooter h2 { margin: .7rem 0; color: var(--gold); font-size: clamp(2rem, 5vw, 3.5rem); }
.roster-status { grid-area: roster; min-height: 100%; max-height: none; overflow-y: auto; }
.balls-panel { grid-area: balls; min-width: 0; }
.status-row { display: grid; gap: .2rem; padding: .8rem .65rem; border-bottom: 1px solid var(--border); }
.status-row span { color: var(--muted); font-size: .9rem; }
.status-row.eliminated { opacity: .45; text-decoration: line-through; }
.ball-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: .75rem 0; }
.ball-grid form { margin: 0; }
.pool-ball {
    --ball-color: #eee;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    padding: 0;
    border: 3px solid #e9e9e9;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff 0 18%, #d7d7d7 19% 23%, transparent 24%),
        radial-gradient(circle at 28% 20%, #fff 0 4%, #ffffffa8 5% 9%, transparent 10%),
        radial-gradient(circle at 38% 32%, #ffffff8c 0, transparent 43%),
        var(--ball-color);
    color: #111;
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
    box-shadow: inset -10px -13px 18px #0008, inset 7px 8px 13px #fff4, 0 8px 13px #0008;
    transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.pool-ball:hover:not(:disabled) { transform: translateY(-3px) scale(1.04); filter: saturate(1.15); }
.pool-ball:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.pool-ball.pocketed { filter: grayscale(1) brightness(.55); opacity: .42; text-decoration: line-through 3px; transform: scale(.92); }
.ball-1, .ball-9 { --ball-color: #f4cf00; }
.ball-2, .ball-10 { --ball-color: #175bc7; }
.ball-3, .ball-11 { --ball-color: #cf292d; }
.ball-4, .ball-12 { --ball-color: #63328e; }
.ball-5, .ball-13 { --ball-color: #ed7200; }
.ball-6, .ball-14 { --ball-color: #1f9146; }
.ball-7, .ball-15 { --ball-color: #7b2025; }
.ball-8 { --ball-color: #111; }
.ball-9, .ball-10, .ball-11, .ball-12, .ball-13, .ball-14, .ball-15 {
    background:
        radial-gradient(circle at center, #fff 0 18%, #d7d7d7 19% 23%, transparent 24%),
        radial-gradient(circle at 28% 20%, #fff 0 4%, #ffffffb8 5% 9%, transparent 10%),
        linear-gradient(to bottom, #f6f6f6 0 25%, var(--ball-color) 25% 72%, #f6f6f6 72% 100%);
}
.phone-game { text-align: center; }
.phone-game h1 { margin-bottom: .4rem; }
.phone-game-status { color: var(--gold); font-size: 1.2rem; font-weight: 900; }
.phone-ball-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.15rem; margin: 1.5rem 0; padding: 1.5rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #19191b; }
.phone-turn { display: grid; gap: .25rem; margin-top: 1rem; padding: 1rem; border-radius: 10px; background: #29292c; }
.phone-turn span, .phone-turn small, .phone-refresh-note { color: var(--muted); }
.phone-turn strong { color: var(--gold); font-size: 1.5rem; }
.phone-refresh-note { margin-top: 1.25rem; font-size: .88rem; }
.phone-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.25rem; }
.phone-choice form { margin: 0; }
.button.selected { outline: 3px solid #ffffff55; outline-offset: 2px; }
.koth-champion { display: flex; align-items: center; justify-content: center; gap: 1rem; border-color: var(--gold); background: #3a320d; text-align: center; }
.koth-champion > span { font-size: 2.5rem; }
.koth-champion h2 { margin: 0; color: var(--gold); }
.koth-matchup { display: grid; grid-template-columns: minmax(210px,1fr) minmax(190px,.72fr) minmax(210px,1fr) minmax(210px,.82fr); gap: .8rem; }
.koth-matchup > .panel { margin-bottom: 1rem; padding: 1rem; }
.koth-player { display: grid; align-content: center; min-height: 270px; text-align: center; }
.koth-player.king { border: 2px solid var(--gold); background: #332c0d; }
.koth-player.challenger { border: 2px solid #65a9e8; background: #222d38; }
.koth-player > span { color: var(--gold); font-weight: 900; }
.koth-player.challenger > span { color: #9ecfff; }
.koth-player h2 { margin: .7rem 0 .3rem; overflow-wrap: anywhere; font-size: clamp(1.55rem,2.5vw,2.25rem); }
.koth-player > strong { color: var(--gold); font-size: 1.35rem; }
.koth-player > small { margin: .4rem 0 1rem; }
.koth-game-choice { display: grid; align-content: center; text-align: center; }
.koth-game-choice > strong { margin-top: 1rem; color: var(--gold); }
.choice-buttons { display: grid; gap: .55rem; }
.choice-buttons .button { width: 100%; background-color: #3b3b40; }
.choice-buttons .button.primary { background: var(--gold); }
.koth-qr-panel { display: grid; align-content: center; justify-items: stretch; min-width: 0; text-align: center; }
.koth-qr-panel h2 { margin-bottom: .65rem; }
.koth-qr-panel > small { margin-top: .65rem; }
.koth-qr-card { display: grid; justify-items: center; gap: .35rem; width: fit-content; max-width: 100%; margin: 0 auto; padding: 9px; border-radius: 10px; background: white; color: #222; }
.koth-qr-card [data-qr], .koth-qr-card img, .koth-qr-card canvas { display: block; width: min(165px,100%); height: auto; aspect-ratio: 1; }
.koth-qr-card small { color: #333; font-weight: 800; }
.koth-details { display: grid; grid-template-columns: 1.5fr .8fr; gap: 1rem; }
.koth-queue { margin: 0 0 1.5rem; padding-left: 1.8rem; }
.koth-queue li { padding: .5rem; border-bottom: 1px solid var(--border); }
.apa-setup-form { display: grid; gap: 1.3rem; }
.apa-game-types, .apa-player-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.apa-game-type { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .25rem .8rem; padding: 1rem; border: 2px solid var(--border); border-radius: 12px; background: #29292c; cursor: pointer; }
.apa-game-type input { grid-row: 1 / 3; width: 24px; min-height: 24px; accent-color: var(--gold); }
.apa-game-type span { color: var(--muted); font-weight: 400; }
.apa-game-type.selected { border-color: var(--gold); }
.apa-game-type.disabled { opacity: .5; cursor: not-allowed; }
.apa-race-preview { padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #1d1d1f; text-align: center; }
.apa-race-preview > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.apa-race-preview article { display: grid; gap: .35rem; padding: 1rem; border-radius: 10px; background: var(--surface-2); }
.apa-race-preview strong, .apa-race-preview b { color: var(--gold); }
.apa-lag { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; }
.apa-lag:disabled { opacity: .42; }
.apa-lag:disabled label { cursor: not-allowed; }
.apa-lag legend { padding: 0 .5rem; color: var(--gold); font-weight: 900; }
.apa-lag label { display: flex; grid-template: none; align-items: center; gap: .65rem; padding: .8rem; border-radius: 9px; background: #303034; }
.apa-lag input { width: 22px; min-height: 22px; accent-color: var(--gold); }
.apa-match-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 1rem; overflow: hidden; border: 1px solid #334050; border-radius: 14px; background: #121d2a; }
.apa-match-summary.nine-ball { grid-template-columns: repeat(5,minmax(0,1fr)); }
.apa-match-summary article { display: grid; justify-items: center; gap: .25rem; padding: .95rem; border-right: 1px solid #334050; text-align: center; }
.apa-match-summary article:last-child { border-right: 0; }
.apa-match-summary span { color: #a9c9f5; font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.apa-match-summary strong { overflow-wrap: anywhere; color: white; font-size: 1.15rem; }
.apa-player-matchup { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 1rem; }
.apa-player-card { display: grid; align-content: center; min-height: 300px; margin-bottom: 1rem; border: 2px solid #b52d4b; background: linear-gradient(145deg,#171a21,#111821); text-align: center; }
.apa-player-card.shooting { border-color: var(--gold); background: linear-gradient(145deg,#30280b,#17150e); box-shadow: 0 0 24px #ffd50026; }
.apa-player-card > span { justify-self: start; padding: .35rem .65rem; border: 1px solid currentColor; border-radius: 999px; color: #ef627d; font-size: .76rem; font-weight: 900; }
.apa-player-card.shooting > span { color: var(--gold); }
.apa-player-card h2 { margin: .6rem 0 .2rem; overflow-wrap: anywhere; font-size: clamp(1.55rem,3vw,2.1rem); }
.apa-player-card > p { margin: 0 0 .8rem; }
.apa-versus { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #3c5069; border-radius: 12px; background: #172437; color: white; font-weight: 950; }
.apa-score-race { display: grid; grid-template-columns: 1fr 1fr; margin-top: .25rem; padding: .75rem 0; border-block: 1px solid #34404e; }
.apa-score-race > div { display: grid; place-items: center; gap: .15rem; }
.apa-score-race > div + div { border-left: 1px solid #34404e; }
.apa-score-race strong { color: var(--gold); font-size: 3rem; line-height: 1; }
.apa-player-card.player-two:not(.shooting) .apa-score-race strong { color: #ff365d; }
.apa-score-race small, .apa-player-totals small { color: #a9c9f5; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.apa-race-progress { height: 8px; margin: .85rem 0; overflow: hidden; border-radius: 999px; background: #1c2b3f; }
.apa-race-progress span { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.apa-player-card.player-two:not(.shooting) .apa-race-progress span { background: #ff365d; }
.apa-player-totals { display: flex; align-items: end; justify-content: space-between; gap: 1rem; text-align: left; }
.apa-player-totals > span { color: #a9c9f5; font-weight: 800; }
.apa-player-totals > span:last-child { display: grid; justify-items: end; text-align: right; }
.apa-player-totals b { margin-left: .3rem; color: white; font-size: 1.2rem; }
.apa-nine-achievements { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .75rem; }
.apa-nine-achievements span { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .45rem .6rem; border-radius: 7px; background: #192333; color: #a9c9f5; font-size: .75rem; font-weight: 800; }
.apa-nine-achievements b { color: var(--gold); font-size: 1rem; }
.apa-control-deck { display: grid; grid-template-columns: minmax(220px,.9fr) minmax(480px,1.8fr); gap: 1rem; margin-bottom: 0; background: linear-gradient(145deg,#111d2a,#101720); }
.apa-current-turn { display: grid; grid-template-columns: 48px minmax(0,1fr); align-content: center; justify-items: start; column-gap: 1rem; padding: 1.35rem; text-align: left; }
.apa-current-turn::before { content: '◉'; grid-row: 1 / 4; align-self: center; color: var(--gold); font-size: 2.65rem; line-height: 1; }
.apa-current-turn > span, .apa-current-turn > strong, .apa-current-turn > small { grid-column: 2; }
.apa-current-turn > span { color: var(--gold); font-size: .9rem; font-weight: 900; text-transform: uppercase; }
.apa-current-turn > strong { margin-top: .3rem; overflow-wrap: anywhere; color: var(--gold); font-size: clamp(1.55rem,2.4vw,2rem); }
.apa-current-turn > small { color: white; font-size: 1rem; }
.apa-control-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.apa-control-grid form { margin: 0; }
.apa-control-grid .button { width: 100%; height: 100%; min-height: 72px; }
.apa-end-rack { grid-column: 1 / -1; display: grid; justify-items: center; gap: .15rem; min-height: 72px; }
.apa-end-rack strong { font-size: 1.15rem; text-transform: uppercase; }
.apa-end-rack small { color: white; }
.apa-nine-balls { margin-top: 1rem; }
.apa-nine-ball-grid { display: grid; grid-template-columns: repeat(9,minmax(82px,1fr)); gap: 1rem; margin-top: 1.25rem; overflow-x: auto; padding: .35rem 0 .75rem; }
.apa-nine-ball-item { display: grid; justify-items: center; gap: .55rem; min-width: 82px; margin: 0; text-align: center; }
.apa-nine-ball-item .pool-ball { width: 62px; height: 62px; }
.apa-nine-ball-item small { max-width: 105px; min-height: 2.2em; color: var(--muted); font-size: .72rem; line-height: 1.1; }
.apa-nine-ball-item.awarded .pool-ball { filter: grayscale(1) brightness(.62); opacity: .62; transform: scale(.94); }
.apa-nine-ball-item.awarded small { color: #b8c1cc; font-weight: 800; }
.apa-nine-ball-item.dead .pool-ball { position: relative; filter: grayscale(1) brightness(.42); opacity: .72; transform: scale(.94); }
.apa-nine-ball-item.dead .pool-ball::after { content: '×'; position: absolute; inset: 50% auto auto 50%; color: #ff3038; font-size: 3.65rem; font-weight: 950; line-height: 1; text-shadow: 0 2px 2px #000,0 0 6px #fff; transform: translate(-50%,-54%); }
.apa-nine-ball-item.dead small { color: #ff8989; font-weight: 900; }
.apa-nine-rack-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.apa-nine-rack-actions form { margin: 0; }
.apa-nine-history { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.apa-nine-history-heading { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.apa-nine-history-heading h2,.apa-nine-history-heading p { margin: 0; }
.apa-nine-history-heading p { flex: 1 1 420px; color: var(--muted); }
.apa-nine-history-heading form { margin: 0; }
.apa-nine-rack-stat-card { display: grid; align-content: start; gap: .65rem; margin-top: .75rem; padding: .85rem; background: linear-gradient(145deg,#101d2a,#101720); }
.apa-nine-rack-stat-card > h2 { margin: 0; color: var(--gold); }
.apa-nine-rack-stat-card > header { display: flex; align-items: center; gap: .8rem; }
.apa-nine-rack-stat-card > header > div { display: grid; gap: .08rem; }
.apa-nine-rack-stat-card > header small { color: #72aef1; font-weight: 900; text-transform: uppercase; }
.apa-nine-rack-stat-card > header strong { color: white; font-size: 1.1rem; }
.apa-nine-rack-stat-card > header span { color: #a9c9f5; }
.apa-rack-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #1472ce; color: white !important; font-size: 1.2rem; font-weight: 950; }
.apa-rack-metrics { display: grid; grid-template-columns: 1.5fr .75fr .75fr; overflow: hidden; border: 1px solid #334050; border-radius: 12px; }
.apa-rack-metrics > span { display: grid; gap: .15rem; padding: .5rem .6rem; color: #a9c9f5; font-size: .82rem; }
.apa-rack-metrics > span + span { border-left: 1px solid #334050; text-align: center; }
.apa-rack-metrics b { color: white; font-size: 1.05rem; }
.apa-rack-player-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.apa-rack-player-stats article,.apa-rack-dead-list { padding: .6rem; border: 1px solid #334050; border-radius: 10px; background: #0c1724; }
.apa-rack-player-stats h3 { margin: 0 0 .45rem; font-size: .95rem; }
.apa-rack-stat-totals { display: grid; grid-template-columns: repeat(3,1fr); gap: .3rem; }
.apa-rack-stat-totals span { display: grid; gap: .15rem; padding: .4rem .25rem; border-radius: 7px; background: #152438; color: #a9c9f5; font-size: .76rem; text-align: center; }
.apa-rack-stat-totals b { color: white; font-size: .95rem; }
.apa-rack-ball-list,.apa-rack-dead-list > div { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; min-height: 30px; margin-top: .5rem; }
.apa-stat-ball { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #eee; border-radius: 50%; background: radial-gradient(circle at center,#fff 0 20%,#d7d7d7 21% 25%,transparent 26%),var(--ball-color); color: #111; font-size: .68rem; font-weight: 950; box-shadow: inset -5px -6px 8px #0007; }
.apa-stat-ball.ball-9 { background: radial-gradient(circle at center,#fff 0 20%,#d7d7d7 21% 25%,transparent 26%),linear-gradient(to bottom,#f6f6f6 0 25%,var(--ball-color) 25% 72%,#f6f6f6 72% 100%); }
.apa-stat-ball.dead { filter: grayscale(1) brightness(.48); opacity: .78; }
.apa-stat-ball.dead::after { content: '×'; position: absolute; color: #ff3038; font-size: 1.8rem; line-height: 1; text-shadow: 0 1px 1px #000; }
.apa-rack-dead-list > strong { color: white; }
.apa-nine-rack-stat-card.editable [data-rack-ball-drop] { transition: border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.apa-nine-rack-stat-card.editable [data-rack-ball-drop].drag-over { border-color: var(--gold); background: #29250d; box-shadow: inset 0 0 0 1px var(--gold); }
.apa-nine-rack-stat-card.editable [data-rack-ball] { cursor: grab; touch-action: none; }
.apa-nine-rack-stat-card.editable [data-rack-ball].dragging { opacity: .25; cursor: grabbing; }
.apa-undo-score { margin-top: 1rem; text-align: center; }
.apa-timeout-dialog { width: min(460px,calc(100% - 2rem)); padding: 0; border: 2px solid var(--gold); border-radius: 18px; background: #171b22; color: white; box-shadow: 0 22px 70px #000d,0 0 35px #ffd50026; }
.apa-timeout-dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
.apa-timeout-clock { display: grid; justify-items: center; gap: .35rem; padding: 2rem; text-align: center; }
.apa-timeout-clock span { color: var(--gold); font-size: .85rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.apa-timeout-clock h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.65rem; }
.apa-timeout-clock > strong { margin: .75rem 0; color: var(--gold); font-size: clamp(2.6rem,8vw,4rem); font-variant-numeric: tabular-nums; line-height: 1; }
.apa-timeout-clock form, .apa-timeout-clock .button { width: 100%; }
.apa-achievement-dialog { width: min(500px,calc(100% - 2rem)); padding: 0; border: 2px solid var(--gold); border-radius: 20px; background: radial-gradient(circle at top,#3d330c,#171b22 68%); color: white; box-shadow: 0 24px 80px #000e,0 0 42px #ffd50042; }
.apa-achievement-dialog::backdrop { background: #000c; backdrop-filter: blur(5px); }
.apa-achievement-content { display: grid; justify-items: center; gap: .75rem; padding: 2.2rem; text-align: center; }
.apa-achievement-content > span { color: var(--gold); font-size: .82rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.apa-achievement-content h2 { margin: .25rem 0; color: var(--gold); font-size: clamp(2rem,7vw,3.25rem); line-height: 1.05; }
.apa-achievement-content p { margin: 0 0 .8rem; font-size: 1.35rem; font-weight: 900; }
.apa-winner { border-color: var(--gold); background: #332c0d; text-align: center; }
.apa-winner h2 { color: var(--gold); }
.apa-rack-dialog { width: min(620px, calc(100% - 2rem)); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 18px 60px #000c; }
.apa-rack-dialog::backdrop { background: #000a; backdrop-filter: blur(3px); }
.apa-rack-dialog form { display: grid; gap: 1rem; padding: 1.5rem; }
.apa-rack-dialog h2, .apa-rack-dialog p { margin: 0; }
.apa-rack-dialog p strong { color: var(--gold); }
.apa-rack-dialog fieldset { display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; }
.apa-rack-dialog legend { padding: 0 .45rem; color: var(--gold); font-weight: 900; }
.apa-rack-dialog label { display: flex; grid-template: none; align-items: center; gap: .7rem; padding: .65rem; border-radius: 8px; background: #303034; cursor: pointer; }
.apa-rack-dialog label.unavailable { opacity: .42; cursor: not-allowed; }
.apa-rack-dialog input[type="radio"] { width: 21px; min-height: 21px; accent-color: var(--gold); }

.flash-stack { position: fixed; z-index: 20; top: 1rem; right: 1rem; width: min(430px, calc(100% - 2rem)); display: grid; gap: .5rem; }
.flash { padding: .9rem 1rem; border-radius: 8px; border: 1px solid #ffffff33; box-shadow: 0 10px 30px #0008; background: var(--surface-2); }
.flash.error { border-left: 5px solid var(--danger); }
.flash.success { border-left: 5px solid var(--success); }

@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: static; height: auto; padding: .8rem; flex-direction: row; align-items: center; flex-wrap: wrap; }
    .sidebar .brand strong, .group-chip { display: none; }
    .sidebar nav { display: flex; flex: 1; }
    .sidebar nav a { text-align: center; }
    .sidebar form { margin: 0; }
    .logout { width: auto; }
    .stats, .game-grid { grid-template-columns: 1fr; }
    .dashboard-metrics,.dashboard-detail-grid,.statistics-detail-grid { grid-template-columns: 1fr; }
    .dashboard-heading { align-items: stretch; flex-direction: column; }
    .history-layout { grid-template-columns: 1fr; }
    .history-list { border-right: 0; border-bottom: 1px solid var(--border); }
    .history-list-items { max-height: 300px; }
    .history-detail { max-height: none; }
    .history-summary-cards,.history-rack-list { grid-template-columns: 1fr 1fr; }
    .settings-grid, .update-bottom, .update-package-grid { grid-template-columns: 1fr; }
    .koth-matchup, .koth-details { grid-template-columns: 1fr; }
    .apa-player-matchup, .apa-control-deck, .apa-game-types, .apa-player-selects, .apa-race-preview > div, .apa-lag { grid-template-columns: 1fr; }
    .apa-versus { margin: -1rem auto 0; }
    .apa-match-summary { grid-template-columns: 1fr 1fr; }
    .apa-match-summary.nine-ball { grid-template-columns: 1fr 1fr; }
    .apa-match-summary article:nth-child(2) { border-right: 0; }
    .apa-match-summary article:nth-child(-n+2) { border-bottom: 1px solid #334050; }
    .apa-match-summary.nine-ball article { border-bottom: 1px solid #334050; }
    .apa-match-summary.nine-ball article:nth-child(even) { border-right: 0; }
    .apa-match-summary.nine-ball article:last-child { grid-column: 1 / -1; border-bottom: 0; }
    .apa-control-grid { grid-template-columns: 1fr 1fr; }
    .apa-rack-metrics,.apa-rack-player-stats { grid-template-columns: 1fr; }
    .apa-nine-history { grid-template-columns: 1fr; }
    .apa-rack-metrics > span + span { border-top: 1px solid #334050; border-left: 0; text-align: left; }
    .apa-rack-stat-totals { grid-template-columns: 1fr 1fr 1fr; }
    .assassin-live-grid { grid-template-columns: 1fr; grid-template-areas: "shooter" "roster" "balls"; }
    .roster-grid, .registered-grid, .registration-share, .game-registration-grid { grid-template-columns: 1fr; }
    .game-registration-grid > .panel { min-height: 0; }
    .game-registered-list { min-height: 240px; }
    .shooter, .roster-status { min-height: 0; }
    .qr-card { width: min-content; margin-inline: auto; }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .koth-matchup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .auth-shell { width: 100%; padding: 0; }
    .auth-brand { padding: 1rem; margin: 0; }
    .auth-brand img { width: 60px; height: 60px; }
    .auth-card { border-width: 1px 0 0; border-radius: 0; }
    .tab { min-height: 62px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    .phone-choice { grid-template-columns: 1fr; }
    .apa-control-grid { grid-template-columns: 1fr; }
    .content { padding: 1rem; }
    .page-heading { align-items: flex-start; flex-direction: column; }
}