: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,.brand-mark { width: 54px; height: 54px; border-radius: 9px; object-fit: contain; }
.brand-mark { display: grid; flex: 0 0 auto; place-items: center; border: 3px solid #e9c500; background: radial-gradient(circle at 34% 28%,#fff 0 5%,#fff8 6% 9%,transparent 10%),radial-gradient(circle at 42% 38%,#343434,#050505 72%); color: var(--gold); box-shadow: inset -8px -10px 15px #0009,inset 5px 6px 10px #fff3,0 5px 12px #0008; }
.brand-mark b { font-size: 1rem; font-weight: 950; letter-spacing: -.04em; text-shadow: 0 1px 2px #000; }
.brand strong { font-size: 1.25rem; }
.auth-brand { justify-content: center; margin-bottom: 1.25rem; }
.auth-brand img,.auth-brand .brand-mark { width: 82px; height: 82px; }
.auth-brand .brand-mark b { font-size: 1.45rem; }
.auth-brand strong { display: block; font-size: clamp(1.55rem, 4vw, 2.25rem); }
.auth-brand span { display: block; color: var(--muted); margin-top: .25rem; }
.invite-shell { width: min(680px, calc(100% - 2rem)); }
.invite-card { padding: clamp(1.4rem, 4vw, 2.5rem); }
.invite-card h1 { color: var(--gold); }
.invite-form { display: grid; gap: 1rem; margin-top: 1.4rem; }
.invite-expiration { margin: 1rem 0 0; text-align: center; font-size: .86rem; }
.invite-complete-mark { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 1rem; border-radius: 50%; background: #1d5e3b; color: #a5f5c3; font-size: 2rem; font-weight: 950; }
.account-ready-note,.account-conflict-note { padding: 1rem; border: 1px solid #3d7659; border-radius: 10px; background: #1d3c2c; }
.account-conflict-note { border-color: #8b6c25; background: #38301e; }

.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: 44px; padding: .55rem .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; flex: 1 1 auto; min-height: 0; align-content: start; grid-auto-rows: max-content; gap: .35rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .3rem; scrollbar-gutter: stable; }
.sidebar nav::-webkit-scrollbar { width: 9px; }
.sidebar nav::-webkit-scrollbar-track { background: #19191b; border-radius: 999px; }
.sidebar nav::-webkit-scrollbar-thumb { border: 2px solid #19191b; border-radius: 999px; background: #5a5a60; }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.menu-toggle { display: none; min-height: 46px; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .9rem; border: 1px solid #515158; border-radius: 8px; background: #303034; color: white; font-weight: 900; }
.menu-toggle span { color: var(--gold); font-size: 1.35rem; line-height: 1; }
.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 { min-width: 0; width: 100%; padding: clamp(1.2rem, 3vw, 3rem); }
.page-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.game-page-heading { justify-content: center; text-align: center; }
.game-page-heading > div { width: 100%; }
.game-rules-shortcut { display: flex; justify-content: flex-end; margin: -.35rem 0 .75rem; }
.game-rules-shortcut a { display: inline-flex; min-height: 44px; align-items: center; padding: .55rem .85rem; border: 1px solid #655819; border-radius: 8px; background: #29250d; color: var(--gold); text-decoration: none; font-size: .88rem; font-weight: 900; }
.game-rules-shortcut a:hover { border-color: var(--gold); background: #3b330d; }
.rules-heading { margin-bottom: 1.1rem; }
.rules-nav { position: sticky; z-index: 10; top: .5rem; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .45rem; margin-bottom: 1rem; padding: .55rem; border: 1px solid var(--border); border-radius: 12px; background: #18181aee; backdrop-filter: blur(8px); }
.rules-nav a { display: flex; min-height: 48px; align-items: center; justify-content: center; padding: .55rem .7rem; border-radius: 8px; background: #303034; text-align: center; text-decoration: none; font-weight: 850; }
.rules-nav a:hover { background: #4b4000; color: var(--gold); }
.rules-notice { margin-bottom: 1.4rem; border-color: #6d601c; background: #29250d; }
.rules-notice strong { color: var(--gold); font-size: 1.05rem; }
.rules-notice p { margin: .35rem 0 0; }
.rules-section { scroll-margin-top: 6rem; margin: 0 0 1.4rem; }
.rules-section > header { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.rules-section > header > span { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 13px; background: #3b330d; font-size: 1.65rem; }
.rules-section > header h2,.rules-section > header p { margin: 0; }
.rules-section > header h2 { color: var(--gold); }
.rules-section > header p { margin-top: .2rem; }
.rules-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.rules-card { margin: 0; padding: 1.2rem 1.35rem; }
.rules-card-wide { grid-column: 1 / -1; }
.rules-card h3 { margin-bottom: .7rem; color: white; }
.rules-card ol,.rules-card ul { margin: 0; padding-left: 1.35rem; }
.rules-card li { margin: .55rem 0; color: var(--muted); line-height: 1.48; }
.rules-card li::marker { color: var(--gold); font-weight: 900; }
.rules-card li strong { color: white; }
.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; min-width: 0; grid-template-columns: minmax(280px,.85fr) minmax(0,1.6fr); gap: 1rem; }
.dashboard-detail-grid > .panel { min-width: 0; margin-bottom: 0; }
.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 { min-width: 0; padding: 1.3rem; }
.statistics-title p { margin-bottom: 1.35rem; }
.statistics-detail-grid { display: grid; min-width: 0; grid-template-columns: minmax(0,1.65fr) minmax(300px,.9fr); gap: 1rem; }
.statistics-detail-grid > .panel { min-width: 0; margin-bottom: 0; }
.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; }
.member-role-guide { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.member-role-guide article { padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.member-role-guide strong { color: var(--gold); font-size: 1.05rem; }
.member-role-guide p { margin: .4rem 0 0; font-size: .9rem; }
.member-access-panel { padding: 1.2rem; }
.member-access-panel .panel-heading p { margin: .2rem 0 0; }
.member-access-list { display: grid; gap: .7rem; }
.member-access-row { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.5fr); align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 11px; background: #1d1d20; }
.member-access-row.site-owner { border-color: #8d7600; background: #332d0d; }
.member-access-identity { display: grid; gap: .2rem; }
.member-access-identity > strong { font-size: 1.1rem; }
.member-access-identity > span { color: var(--gold); font-weight: 800; }
.member-access-identity small { font-size: .78rem; }
.account-status { margin-top: .2rem; color: var(--muted); font-weight: 800; }
.account-status.connected { color: #73dfaa; }
.account-status.pending { color: #ffd76a; }
.account-status.failed { color: #ff9e9e; }
.member-invite-form { margin-top: .45rem; }
.member-invite-form .button { width: fit-content; }
.account-conflicts { margin-bottom: 1rem; padding: 1.2rem; border-color: #8b6c25; background: #2b271b; }
.account-conflicts > article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-top: 1px solid #625522; }
.account-conflicts > article > div:first-child { display: grid; gap: .25rem; }
.account-conflicts > article span { color: var(--muted); font-size: .85rem; }
.account-conflicts .form-actions { flex-wrap: wrap; margin: 0; }
.member-role-form { display: grid; grid-template-columns: minmax(160px,.8fr) minmax(180px,1fr) auto; align-items: end; gap: .75rem; }
.member-role-form .button { min-height: 48px; }
.owner-lock { padding: .85rem 1rem; border: 1px solid #806d16; border-radius: 9px; background: #17171980; }
.owner-lock strong,.owner-lock small { display: block; }
.owner-lock strong { color: var(--gold); }
.owner-lock small { margin-top: .25rem; }
.site-group-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.site-group-card { display: grid; align-content: start; gap: 1rem; padding: 1.15rem; }
.site-group-card.inactive { opacity: .72; }
.site-group-card header h2 { margin: .65rem 0 .2rem; color: var(--gold); }
.site-group-card .status-pill { margin-right: .4rem; background: #1d5e3b; color: #9bf0bd; }
.site-group-card.inactive .status-pill { background: #632f2f; color: #ffc1c1; }
.owner-group-badge { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; background: #4b4000; color: var(--gold); font-size: .82rem; font-weight: 800; }
.site-group-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.site-group-metrics span { display: grid; gap: .2rem; padding: .7rem .5rem; border-right: 1px solid var(--border); color: var(--muted); text-align: center; font-size: .75rem; }
.site-group-metrics span:last-child { border-right: 0; }
.site-group-metrics b { color: var(--gold); font-size: 1.35rem; }
.bowlliards-intro { display: grid; grid-template-columns: minmax(320px,.9fr) minmax(420px,1.1fr); gap: 1rem; }
.bowlliards-intro > .panel { margin: 0; }
.bowlliards-player-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin: 1rem 0; }
.bowlliards-player-picker label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 9px; background: #303034; cursor: pointer; }
.bowlliards-player-picker input { width: 22px; min-height: 22px; accent-color: var(--gold); }
.bowlliards-rules ol { margin: 1rem 0 0; padding-left: 1.45rem; }
.bowlliards-rules li { margin: .75rem 0; color: var(--muted); line-height: 1.45; }
.bowlliards-scoreboard { overflow: hidden; background: linear-gradient(145deg,#101b29,#17181d); }
.bowlliards-scoreboard .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bowlliards-scoreboard .panel-heading h2,.bowlliards-scoreboard .panel-heading p { margin: 0; }
.bowlliards-scoreboard .panel-heading p { margin-top: .2rem; color: var(--muted); }
.bowlliards-perfect { display: grid; justify-items: end; color: #a9c9f5; font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.bowlliards-perfect b { color: var(--gold); font-size: 1.65rem; }
.bowlliards-table { min-width: 1020px; margin-top: 1rem; table-layout: fixed; }
.bowlliards-table th:first-child { width: 160px; text-align: left; }
.bowlliards-table th:last-child { width: 85px; }
.bowlliards-table th,.bowlliards-table td { padding: .45rem .3rem; text-align: center; }
.bowlliards-table tbody th { overflow-wrap: anywhere; color: white; }
.bowlliards-table td { height: 72px; background: #0b1725; }
.bowlliards-table td span { display: block; min-height: 1.3rem; color: #a9c9f5; font-size: .8rem; font-weight: 900; letter-spacing: .04em; }
.bowlliards-table td strong { display: block; margin-top: .45rem; color: white; font-size: 1.05rem; }
.bowlliards-table .bowlliards-total { background: #29250d; color: var(--gold); font-size: 1.45rem; font-weight: 950; }
.bowlliards-current { display: grid; grid-template-columns: minmax(270px,.7fr) minmax(420px,1.3fr); align-items: center; gap: 1.5rem; margin-top: 1rem; border-color: #806d16; background: linear-gradient(145deg,#30280b,#17150e); }
.bowlliards-current h2 { margin: .3rem 0; color: var(--gold); font-size: clamp(1.7rem,3vw,2.35rem); }
.bowlliards-current p { margin: 0 0 .35rem; }
.bowlliards-current small { color: #d5c882; }
.bowlliards-score-entry { display: grid; gap: .65rem; }
.bowlliards-score-entry > span { color: #f4e798; font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.bowlliards-score-entry > div { display: grid; grid-template-columns: repeat(11,minmax(42px,1fr)); gap: .4rem; }
.bowlliards-score-entry form { margin: 0; }
.bowlliards-score-entry button { width: 100%; min-height: 52px; padding: .5rem; border: 1px solid #cba900; border-radius: 9px; background: #ffd500; color: #111; font-size: 1.1rem; font-weight: 950; cursor: pointer; transition: transform .12s ease,filter .12s ease; }
.bowlliards-score-entry button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.bowlliards-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.bowlliards-actions form { margin: 0; }
.bowlliards-winner { margin-top: 1rem; border: 2px solid var(--gold); background: radial-gradient(circle at top,#3d330c,#171b22 72%); text-align: center; }
.bowlliards-winner > span { color: var(--gold); font-size: .84rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.bowlliards-winner h2 { margin: .45rem 0; color: var(--gold); font-size: clamp(2rem,5vw,3.25rem); }
.bowlliards-sudden { margin-top: 1rem; border-color: #ad2945; background: #26141a; }
.bowlliards-sudden h2 { color: #ff6682; }
.bowlliards-sudden > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: .65rem; }
.bowlliards-sudden > div span { display: grid; gap: .2rem; padding: .8rem; border: 1px solid #723044; border-radius: 9px; background: #17131a; color: var(--muted); }
.bowlliards-sudden strong { color: white; }
.bowlliards-history-scores { margin-top: 1rem; }
.golf-course-header { display: grid; grid-template-columns: minmax(280px,.52fr) minmax(520px,1.48fr); align-items: center; gap: 1.5rem; margin-bottom: 1rem; padding: 1.25rem; border: 1px solid #326c4c; border-radius: 14px; background: linear-gradient(145deg,#15271e,#101a16); }
.golf-rules { margin-top: 1rem; }.golf-rules ol { margin: .75rem 0 0; padding-left: 1.4rem; }.golf-rules li { margin: .55rem 0; color: var(--muted); }
.golf-course-header > div:first-child { display: grid; justify-items: center; gap: .25rem; text-align: center; }
.golf-course-header > div:first-child span { color: #8de5ad; font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.golf-course-header h2 { margin: 0; color: #78e49e; font-size: clamp(2rem,5vw,3.2rem); }
.golf-course-header strong { font-size: 1.25rem; }
.golf-course-controls { align-self:stretch; align-content:center; }
.golf-current-inline { width:100%; margin-top:1rem; padding-top:1rem; border-top:1px solid #78e49e55; text-align:left; }
.golf-current-inline > span { color:var(--gold)!important; }
.golf-current-inline h3 { margin:.25rem 0; color:#78e49e; font-size:clamp(1.6rem,3vw,2.25rem); }
.golf-current-inline p { margin:.15rem 0 .75rem; color:var(--muted); }
.golf-course-controls .golf-shot-actions { width:100%; grid-template-columns:1fr; gap:.55rem; }
.golf-course-controls .golf-shot-actions .button { min-height:54px; flex-direction:column; }
.golf-table { position: relative; justify-self: center; width: min(100%,900px); aspect-ratio: 2 / 1; min-height: 0; overflow: hidden; box-sizing: border-box; border: 18px solid #68431f; border-radius: 34px; background: radial-gradient(ellipse at center,#188a4d 0,#0e6739 68%,#084725 100%); box-shadow: inset 0 0 0 7px #173e28,inset 0 0 42px #001a0e,0 10px 24px #0008; }
.golf-table::before { content:""; position:absolute; inset:14px; border:1px solid #7bd69c66; border-radius:13px; pointer-events:none; }
.golf-table .pocket { position: absolute; z-index: 2; display: grid; place-items: center; box-sizing: border-box; width: 42px; height: 42px; border: 5px solid #252525; border-radius: 50%; background: #020202; color: #fff; font-size: 1rem; font-weight: 950; line-height: 1; box-shadow: inset 0 0 0 2px #000,0 3px 7px #000b; }
.golf-table .pocket.selected { width: 52px; height: 52px; border-color: #fff2a6; background: var(--gold); color: #111; font-size:1.15rem; box-shadow: 0 0 24px #ffd500,0 0 0 6px #ffd50038; }
.golf-table .pocket-6 { top: 10px; left: 10px; }.golf-table .pocket-5 { top: 10px; left: 50%; transform:translateX(-50%); }.golf-table .pocket-4 { top: 10px; right: 10px; }
.golf-table .pocket-1 { bottom: 10px; left: 10px; }.golf-table .pocket-2 { bottom: 10px; left: 50%; transform:translateX(-50%); }.golf-table .pocket-3 { right: 10px; bottom: 10px; }
.golf-rail-sights { position:absolute; z-index:2; pointer-events:none; }
.golf-rail-sights i { display:block; width:8px; height:8px; border:1px solid #fff9d4; background:#e8dfb6; box-shadow:0 1px 2px #000b; transform:rotate(45deg); }
.golf-rail-sights-top,.golf-rail-sights-bottom { right:0; left:0; height:10px; }
.golf-rail-sights-top { top:4px; }.golf-rail-sights-bottom { bottom:4px; }
.golf-rail-sights-top i,.golf-rail-sights-bottom i { position:absolute; top:0; }
.golf-rail-sights-top i:nth-child(1),.golf-rail-sights-bottom i:nth-child(1) { left:12.5%; }
.golf-rail-sights-top i:nth-child(2),.golf-rail-sights-bottom i:nth-child(2) { left:25%; }
.golf-rail-sights-top i:nth-child(3),.golf-rail-sights-bottom i:nth-child(3) { left:37.5%; }
.golf-rail-sights-top i:nth-child(4),.golf-rail-sights-bottom i:nth-child(4) { left:62.5%; }
.golf-rail-sights-top i:nth-child(5),.golf-rail-sights-bottom i:nth-child(5) { left:75%; }
.golf-rail-sights-top i:nth-child(6),.golf-rail-sights-bottom i:nth-child(6) { left:87.5%; }
.golf-rail-sights-left,.golf-rail-sights-right { top:0; bottom:0; width:10px; }
.golf-rail-sights-left { left:4px; }.golf-rail-sights-right { right:4px; }
.golf-rail-sights-left i,.golf-rail-sights-right i { position:absolute; left:0; }
.golf-rail-sights-left i:nth-child(1),.golf-rail-sights-right i:nth-child(1) { top:25%; }
.golf-rail-sights-left i:nth-child(2),.golf-rail-sights-right i:nth-child(2) { top:50%; }
.golf-rail-sights-left i:nth-child(3),.golf-rail-sights-right i:nth-child(3) { top:75%; }
.golf-object-ball { position:absolute; top:50%; left:25%; z-index:1; width:40px; height:40px; color:#ffe600; line-height:1; transform:translate(-50%,-50%); text-shadow:0 2px 5px #000; }
.golf-object-ball b { display:grid; width:40px; height:40px; place-items:center; font-size:2.5rem; font-weight:400; }
.golf-object-ball small { position:absolute; top:50%; left:calc(100% + .5rem); width:max-content; color:white; font-size:.72rem; font-weight:900; text-transform:uppercase; transform:translateY(-50%); }
.golf-cue-zone { position: absolute; top: 25%; right: 5%; bottom: 25%; left: 82%; z-index:1; display: grid; place-items: center; min-width:0; padding: .6rem; border: 2px solid #eefaf1; border-radius: 4px; background: #d8f0dddc; color: #18311d; font-size: .82rem; font-weight: 900; text-align: center; text-shadow:none; box-shadow:0 3px 10px #00241166; }
.golf-scorecard th small { display: block; margin-top: .15rem; color: #92d5a8; font-size: .65rem; }
.golf-scorecard td { text-align: center; }.golf-scorecard tbody th { min-width: 160px; }.golf-scorecard tbody td strong { color: var(--gold); font-size: 1.2rem; }
.golf-course-par { display: grid; justify-items: end; color: #a6cfb3; font-size: .78rem; font-weight: 900; text-transform: uppercase; }.golf-course-par b { color: #78e49e; font-size: 1.65rem; }
.golf-current { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(420px,1.2fr); align-items: center; gap: 1rem; border-color: #326c4c; background: linear-gradient(145deg,#1c3427,#171b19); }
.golf-current h2 { margin: .3rem 0; color: #78e49e; font-size: clamp(1.7rem,3vw,2.35rem); }.golf-current p { margin: 0 0 .4rem; }.golf-current small { color: #acd0b7; }
.golf-shot-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }.golf-shot-actions form,.golf-shot-actions .button { width: 100%; height: 100%; }.golf-shot-actions .button { min-height: 72px; }.golf-shot-actions .button small { display:block; margin-top:.25rem; font-size:.72rem; }
.golf-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }.golf-actions form { margin: 0; }
.golf-winner { border: 2px solid #51c67b; background: radial-gradient(circle at top,#184529,#171b19 72%); text-align: center; }.golf-winner > span { color: #78e49e; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }.golf-winner h2 { margin: .45rem 0; color: #78e49e; font-size: clamp(2rem,5vw,3.25rem); }
.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; }
.maintenance-heading { margin-top: 2.25rem; }
.database-maintenance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.database-actions { display: grid; gap: 1rem; }
.maintenance-card,.restore-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 1rem; align-items: start; }
.maintenance-card h2,.restore-card h2 { margin-top: 0; }
.maintenance-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #74a8ff; background: #253955; font-size: 1.4rem; font-weight: 900; }
.danger-icon { color: #ff7b86; background: #51262b; }
.restore-card { border-color: #774047; background: #2d2326; }
.restore-form { display: grid; gap: .8rem; }
.server-backups { margin-top: 1rem; }
.server-backups-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.server-backups-heading h2 { margin: .25rem 0 0; }
.retention-form { display: flex; align-items: end; gap: .65rem; }
.retention-form label { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.retention-form input { width: 70px; }
.backup-list { display: grid; gap: .65rem; }
.backup-row { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: #1b1c1f; }
.backup-file-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #253955; color: #7fb1ff; font-size: .72rem; font-weight: 900; }
.backup-file { min-width: 0; }
.backup-file strong,.backup-file small { display: block; overflow-wrap: anywhere; }
.backup-file small { margin-top: .25rem; color: var(--muted); }
.backup-actions { display: flex; align-items: center; gap: .45rem; }
.backup-actions form { margin: 0; }
.button.compact { min-height: 36px; padding: .45rem .7rem; font-size: .82rem; }
.restore-details { position: relative; }
.restore-details summary { list-style: none; cursor: pointer; }
.restore-details summary::-webkit-details-marker { display: none; }
.restore-details[open] form { position: absolute; z-index: 5; right: 0; top: calc(100% + .45rem); width: min(310px,80vw); display: grid; gap: .55rem; padding: .75rem; border: 1px solid #774047; border-radius: 10px; background: #242529; box-shadow: 0 12px 30px #000a; }
.compact-empty { min-height: 90px; }
.pwa-panel { padding: 1.5rem; }
.pwa-heading { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: start; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.pwa-heading img { width: 64px; height: 64px; object-fit: contain; }
.pwa-heading h1 { margin: .2rem 0; }
.pwa-heading p { margin: 0; }
.pwa-brand-note { display: flex; gap: .75rem; margin: 1.25rem 0; padding: 1rem; border-radius: 12px; background: #202b3b; color: var(--muted); }
.pwa-brand-note strong { color: #83b6ff; white-space: nowrap; }
.pwa-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.pwa-feature-grid article { padding: 1rem; border: 1px solid #3c4e69; border-radius: 12px; background: #20262f; }
.pwa-feature-grid h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.pwa-feature-grid p { margin: 0; }
.pwa-install-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; }
.pwa-install-action p { margin: 0; }
.pwa-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pwa-status-grid div { display: flex; justify-content: space-between; gap: .8rem; padding: .8rem; border: 1px solid #3c4e69; border-radius: 10px; background: #20262f; }
.pwa-status-grid strong { color: #64d98b; text-align: right; overflow-wrap: anywhere; }
.pwa-status-grid strong.status-bad { color: #ff777f; }
.straight-start-form { display: grid; grid-template-columns: minmax(150px,.6fr) minmax(240px,1.4fr) auto; align-items: end; gap: 1rem; margin-top: 1rem; }
.straight-start-form .button { min-height: 48px; }
.straight-match-header { display: grid; grid-template-columns: minmax(190px,.5fr) minmax(320px,1.25fr) minmax(210px,.55fr); gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1.25rem; border: 1px solid #326d50; border-radius: 16px; background: linear-gradient(135deg,#10271e,#173b2a); }
.straight-match-header h2 { margin: .25rem 0; color: var(--gold); font-size: clamp(1.8rem,4vw,3rem); }
.straight-live-qr { display: grid; justify-items: center; gap: .45rem; min-width: 0; padding: .85rem; border: 1px solid #ffffff2b; border-radius: 12px; background: #0b1f17aa; text-align: center; }
.straight-live-qr h3,.straight-live-qr p { margin: 0; }
.straight-live-qr p { color: var(--muted); font-size: .82rem; }
.straight-live-qr .koth-qr-card [data-qr],.straight-live-qr .koth-qr-card img,.straight-live-qr .koth-qr-card canvas { width: 118px !important; height: 118px !important; }
.straight-rack { display: grid; grid-template-columns: repeat(5,44px); justify-content: center; align-items: center; gap: 5px; min-height: 180px; padding: 1rem; border: 14px solid #67431f; border-radius: 18px; background: radial-gradient(circle at center,#198255,#075b38 75%); box-shadow: inset 0 0 26px #001f13,0 8px 20px #0007; }
.straight-rack i { display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid #f5f5f5; border-radius: 50%; background: #d5bd2b; color: #111; font-style: normal; font-weight: 950; box-shadow: inset -5px -6px 8px #0005,0 3px 7px #0007; }
.straight-rack i:nth-child(even) { background: #b52e31; color: white; }
.straight-rack i:nth-child(3n) { background: #2662aa; color: white; }
.straight-rack i.pocketed { opacity: .13; filter: grayscale(1); }
.straight-scoreboard { margin-bottom: 1rem; }
.straight-scoreboard tr.current-row { background: #3b330d; }
.straight-scoreboard tr.current-row th,.straight-scoreboard tr.current-row strong { color: var(--gold); }
.straight-controls { display: grid; grid-template-columns: minmax(220px,.55fr) minmax(0,1.45fr); gap: .85rem 1rem; margin-bottom: 1rem; }
.straight-current { display: grid; align-content: center; margin: 0; padding: .85rem; border-right: 1px solid var(--border); text-align: center; }
.straight-current h2 { margin: .25rem 0; color: #69e89b; font-size: clamp(1.8rem,4vw,2.7rem); }
.straight-action-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }
.straight-action-grid form,.straight-action-grid .button { width: 100%; }
.straight-action-grid .straight-score-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px,.65fr) minmax(240px,1.35fr); align-items: end; gap: .7rem; padding: .65rem; border: 1px solid #5e5315; border-radius: 10px; background: #302c16; }
.straight-action-grid .button { min-height: 54px; height: 100%; flex-direction: column; }
.straight-action-grid .button small { display: block; margin-top: .2rem; }
.straight-controls > .form-actions { grid-column: 1 / -1; justify-content: flex-end; margin: 0; padding-top: .8rem; border-top: 1px solid var(--border); }
.straight-phone-controls { display: grid; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 1px solid #5e5315; border-radius: 12px; background: #24210f; }
.straight-phone-controls h2 { margin: 0; color: var(--gold); text-align: center; }
.straight-phone-score { display: grid; gap: .65rem; }
.straight-phone-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.straight-phone-actions form,.straight-phone-actions .button { width: 100%; height: 100%; }
.straight-phone-controls .button { min-height: 52px; white-space: normal; }
.straight-log { display: grid; gap: .5rem; }
.straight-log h2 { margin-top: 0; }
.straight-log > div { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(180px,1.5fr) 60px; gap: .8rem; align-items: center; padding: .7rem; border-top: 1px solid var(--line); }
.straight-log > div b { color: var(--gold); text-align: right; }
.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 { min-width: 0; 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 { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
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 { width: min(280px,100%); margin: .65rem auto 1.25rem; padding: 18px; }
.game-registration-qr [data-qr] { width: 100%; aspect-ratio: 1; }
.game-registration-qr [data-qr] img, .game-registration-qr [data-qr] canvas { width: 100% !important; height: 100% !important; 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; }
.phone-live-board,.phone-table-section { min-width: 0; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #19191b; text-align: left; }
.phone-live-board h2,.phone-table-section h2 { margin: 0 0 .35rem; text-align: center; }
.phone-table-section > p { margin: 0 0 .8rem; color: var(--muted); text-align: center; }
.phone-score-list { display: grid; gap: .7rem; }
.phone-score-player { min-width: 0; overflow: hidden; border: 1px solid #46464c; border-radius: 10px; background: #262629; }
.phone-score-player.is-you { border-color: var(--gold); box-shadow: inset 4px 0 var(--gold); }
.phone-score-player header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .8rem; }
.phone-score-player header strong { min-width: 0; overflow-wrap: anywhere; }
.phone-score-player header span { flex: 0 0 auto; color: var(--gold); font-weight: 900; }
.phone-hole-grid,.phone-frame-grid { display: grid; gap: 1px; background: #45454a; }
.phone-hole-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.phone-frame-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.phone-hole-grid > span,.phone-frame-grid > span { display: grid; min-width: 0; min-height: 48px; place-items: center; gap: .05rem; padding: .28rem .12rem; background: #111d2a; text-align: center; }
.phone-hole-grid small,.phone-frame-grid small { color: var(--muted); font-size: .62rem; }
.phone-hole-grid b,.phone-frame-grid b { color: white; font-size: .78rem; font-style: normal; }
.phone-frame-grid em { color: #a9c9f5; font-size: .68rem; font-style: normal; }
.phone-current-hole { display: block; padding: .55rem .8rem; color: #91dbaa; text-align: right; }
.phone-table-section .golf-table { width: 100%; }
.bowlliards-table-diagram .pocket { color: transparent; }
.bowlliards-rack { position: absolute; z-index: 3; top: 50%; left: 27%; display: flex; align-items: center; gap: 1px; transform: translate(-50%,-50%); }
.bowlliards-rack > span { display: flex; flex-direction: column; gap: 1px; }
.bowlliards-rack .pool-ball { width: 21px; height: 21px; border-width: 1px; font-size: .52rem; box-shadow: inset -3px -4px 5px #0008,inset 2px 2px 3px #fff4,0 2px 3px #0008; }
.bowlliards-head-string { position: absolute; z-index: 1; top: 12%; bottom: 12%; left: 76%; border-left: 2px dashed #e8fff377; }
.bowlliards-cue-ball { position: absolute; z-index: 2; top: 50%; left: 86%; color: white; font-size: 2.2rem; line-height: 1; transform: translate(-50%,-50%); text-shadow: 0 2px 5px #000; }
.bowlliards-cue-ball small { position: absolute; top: calc(100% + .25rem); left: 50%; width: max-content; color: white; font-size: .58rem; font-weight: 900; transform: translateX(-50%); }
.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-drop].tap-target { border-color: #a88e13; background: #29250d; }
.apa-nine-rack-stat-card.editable [data-rack-ball] { cursor: grab; touch-action: manipulation; }
.apa-nine-rack-stat-card.editable [data-rack-ball].tap-selected { outline: 4px solid var(--gold); outline-offset: 3px; filter: none; opacity: 1; transform: scale(1.08); }
.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); }

.standard-pool-setup { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 2rem; align-items: start; overflow: hidden; }
.standard-pool-setup > div,.standard-pool-setup > form { width: 100%; max-width: 100%; min-width: 0; }
.standard-pool-setup h2,.standard-pool-setup p { margin-top: 0; }
.standard-pool-setup form { display: grid; gap: 1rem; }
.standard-game-choice { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; }
.standard-game-choice legend { padding: 0 .45rem; color: var(--gold); font-weight: 900; }
.standard-game-choice label { display: block; cursor: pointer; }
.standard-game-choice input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.standard-game-choice span { display: grid; min-height: 54px; place-items: center; padding: .65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); font-weight: 900; text-align: center; }
.standard-game-choice input:checked + span { border-color: var(--gold); background: #332f12; color: var(--gold); box-shadow: inset 0 -3px var(--gold); }
.standard-game-choice input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.standard-name-grid { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.standard-name-grid > label,.standard-game-choice > label { min-width: 0; }
.standard-name-grid input { min-width: 0; }
.standard-live-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.standard-live-overview > .panel { min-height: 285px; height: 100%; }
.standard-match-summary { display: grid; align-content: start; }
.standard-match-summary h2 { margin-top: 0; }
.standard-match-summary dl { display: grid; gap: .8rem; margin: 0; }
.standard-match-summary dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--border); }
.standard-match-summary dt { color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.standard-match-summary dd { margin: 0; color: var(--gold); font-size: 1.35rem; font-weight: 900; text-align: right; }
.standard-live-qr { display: grid; align-content: start; justify-items: center; gap: .55rem; padding: 1rem; text-align: center; }
.standard-live-qr h2,.standard-live-qr p { margin: 0; }
.standard-live-qr .koth-qr-card [data-qr],.standard-live-qr .koth-qr-card img,.standard-live-qr .koth-qr-card canvas { width: 132px !important; height: 132px !important; }
.standard-score-header { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.standard-score-header article { display: grid; gap: .35rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.standard-score-header span { color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.standard-score-header strong { color: var(--gold); font-size: 1.7rem; }
.standard-player-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; margin-top: 1rem; }
.standard-player-card { display: grid; gap: .45rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg,#29292d,#202023); text-align: center; }
.standard-player-card > span { min-height: 2.5em; display: grid; place-items: center; font-size: 1.15rem; font-weight: 900; overflow-wrap: anywhere; }
.standard-player-card > strong { color: var(--gold); font-size: 3rem; line-height: 1; }
.standard-player-card > small { color: var(--muted); }
.standard-player-card form { margin-top: .55rem; }
.standard-player-card .button { min-height: 54px; white-space: normal; }
.standard-session-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: 1rem; margin-top: 1rem; }
.standard-log > div { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.standard-log > div:last-child { border-bottom: 0; }
.standard-log span { color: var(--muted); }
.standard-session-actions { display: grid; align-content: start; gap: .8rem; }
.standard-session-actions h2,.standard-session-actions p,.standard-session-actions form { margin: 0; }
.standard-phone-shell { width: min(760px,100%); }
.standard-phone-heading { min-width: 0; padding-inline: .25rem; text-align: center; overflow: hidden; }
.standard-phone-heading .eyebrow { display: block; max-width: 100%; font-size: clamp(.82rem,4vw,1rem); white-space: normal; overflow-wrap: anywhere; }
.standard-phone-heading h1 { margin: .4rem 0; }
.standard-phone-heading p { margin-top: 0; color: var(--muted); }
.standard-phone-score { grid-template-columns: repeat(2,minmax(0,1fr)); }
.standard-phone-controls { display: grid; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.standard-phone-controls h2 { margin: 0; }
.standard-phone-controls > div { display: grid; gap: .65rem; }
.sports-empty { display: grid; justify-items: center; padding-block: 3rem; text-align: center; }
.sports-live-header { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(320px,1.25fr) minmax(210px,.55fr); gap: 1rem; margin-bottom: 1rem; }
.sports-live-header > article { min-width: 0; padding: 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.sports-live-header h2,.sports-live-header h3,.sports-live-header p { margin-bottom: .5rem; }
.sports-field { position: relative; min-height: 210px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; justify-items: center; overflow: hidden; background: linear-gradient(#276b37,#174925) !important; }
.sports-field span { display: grid; width: 64px; height: 64px; place-items: center; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); border: 3px solid white; background: #c99f62; color: #111; font-weight: 950; }
.sports-field span:nth-child(2) { align-self: start; }
.sports-field > strong { grid-column: 1 / -1; color: white; font-size: 1.2rem; }
.sports-field.football { display: grid; grid-template-columns: 1fr; align-content: center; gap: 1rem; background: repeating-linear-gradient(90deg,#1d6635 0 9%,#fff4 9% 10%) !important; }
.sports-field.football div { width: 90%; height: 34px; overflow: hidden; border: 3px solid white; border-radius: 999px; background: #102417; }
.sports-field.football i { display: block; height: 100%; background: var(--gold); }
.sports-follow { display: grid; justify-items: center; align-content: start; gap: .45rem; text-align: center; }
.sports-follow .koth-qr-card [data-qr],.sports-follow .koth-qr-card img,.sports-follow .koth-qr-card canvas { width: 125px !important; height: 125px !important; }
.sports-scoreboard { padding: 1rem; }
.sports-scoreboard table { min-width: 850px; }
.sports-scoreboard .current-row { background: #3b330d; }
.sports-controls { display: grid; grid-template-columns: minmax(180px,.45fr) minmax(0,1.55fr); gap: 1rem; align-items: start; }
.sports-controls > div:first-child { padding: 1rem; text-align: center; }
.sports-action-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.sports-action-grid form { min-width: 0; }
.sports-action-grid label { height: 100%; padding: .75rem; border: 1px solid #6a5c18; border-radius: 10px; background: #302b12; }
.sports-session-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.game-overview-rules { width: 100%; max-width: 100%; min-width: 0; margin-top: 1.5rem; overflow: hidden; text-align: left; }
.game-overview-rules > h2 { margin-top: 0; }
.inline-rules-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 1rem 2rem; }
.inline-rules-grid article { min-width: 0; }
.inline-rules-grid h3 { margin: 0 0 .75rem; color: var(--gold); }
.inline-rules-grid ol { margin: 0; padding-left: 1.4rem; }
.inline-rules-grid li { margin-bottom: .65rem; color: var(--muted); line-height: 1.45; }
.inline-rules-grid li:last-child { margin-bottom: 0; }

.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: 1100px) {
    .app-shell { display: block; }
    .sidebar { position: sticky; z-index: 30; top: 0; height: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: max(.7rem,env(safe-area-inset-top)) max(.8rem,env(safe-area-inset-right)) .7rem max(.8rem,env(safe-area-inset-left)); border-right: 0; border-bottom: 1px solid #3b3b40; box-shadow: 0 8px 24px #0008; }
    .sidebar .brand { min-width: 0; }
    .sidebar .brand img,.sidebar .brand-mark { width: 44px; height: 44px; }
    .sidebar .brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .group-chip { display: none; }
    .menu-toggle { display: inline-flex; }
    .sidebar nav,.sidebar > form { display: none; }
    .sidebar.menu-open nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: calc(100dvh - 155px); overflow-y: auto; padding-top: .35rem; padding-right: .3rem; }
    .sidebar.menu-open > form { grid-column: 1 / -1; display: block; margin: 0; }
    .sidebar nav a,.logout { min-height: 48px; }
    .content { width: 100%; padding-right: max(clamp(1.2rem,3vw,3rem),env(safe-area-inset-right)); padding-bottom: max(clamp(1.2rem,3vw,3rem),env(safe-area-inset-bottom)); padding-left: max(clamp(1.2rem,3vw,3rem),env(safe-area-inset-left)); }
    .dashboard-detail-grid,.statistics-detail-grid,.history-layout,.member-access-row,.site-group-grid,.bowlliards-intro,.bowlliards-current,.golf-course-header,.golf-current,.settings-grid,.update-bottom,.update-package-grid,.game-registration-grid,.database-maintenance-grid,.pwa-feature-grid,.straight-match-header,.standard-pool-setup,.standard-session-grid,.standard-live-overview,.sports-live-header { grid-template-columns: 1fr; }
    .dashboard-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .history-list { border-right: 0; border-bottom: 1px solid var(--border); }
    .history-list-items { max-height: 300px; }
    .history-detail { max-height: none; }
    .game-registration-grid > .panel { min-height: 0; }
    .game-registered-list { min-height: 240px; }
    .golf-course-header { align-items: stretch; }
    .golf-table { width: min(100%,900px); }
    .bowlliards-scoreboard { min-width: 0; padding-inline: .9rem; }
    .rules-nav { position: static; grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
    .apa-player-matchup,.apa-control-deck,.apa-game-types,.apa-player-selects,.apa-race-preview > div,.apa-lag,.koth-matchup,.koth-details,.roster-grid,.registered-grid,.registration-share { grid-template-columns: 1fr; }
    .apa-versus { margin: -1rem auto 0; }
    .assassin-live-grid { grid-template-columns: 1fr; grid-template-areas: "shooter" "roster" "balls"; }
}

@media (max-width: 760px) {
    .stats, .game-grid { grid-template-columns: 1fr; }
    .dashboard-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin-bottom: 1rem; }
    .dashboard-metrics article { padding: .9rem; }
    .dashboard-metrics strong { font-size: 1.3rem; }
    .dashboard-metrics small { min-height: 0; }
    .dashboard-detail-grid,.statistics-detail-grid { grid-template-columns: minmax(0,1fr); gap: .75rem; }
    .dashboard-detail-grid .empty-state,.statistics-detail-grid .empty-state { padding-block: 1.25rem; }
    .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; }
    .member-role-guide,.member-access-row,.site-group-grid { grid-template-columns: 1fr; }
    .account-conflicts > article { align-items: stretch; flex-direction: column; }
    .account-conflicts .form-actions,.account-conflicts .form-actions form,.account-conflicts .button { width: 100%; }
    .bowlliards-intro,.bowlliards-current { grid-template-columns: 1fr; }
    .golf-course-header,.golf-current { grid-template-columns: 1fr; }
    .bowlliards-score-entry > div { grid-template-columns: repeat(6,minmax(42px,1fr)); }
    .member-role-form { grid-template-columns: 1fr 1fr; }
    .member-role-form .button { grid-column: 1 / -1; }
    .settings-grid, .update-bottom, .update-package-grid { grid-template-columns: 1fr; }
    .server-backups-heading,.retention-form { align-items: stretch; flex-direction: column; }
    .backup-row { grid-template-columns: 40px minmax(0,1fr); }
    .backup-actions { grid-column: 1 / -1; flex-wrap: wrap; }
    .pwa-heading { grid-template-columns: 52px minmax(0,1fr); }
    .pwa-heading img { width: 52px; height: 52px; }
    .pwa-heading .status-pill { grid-column: 1 / -1; justify-self: start; }
    .pwa-brand-note,.pwa-install-action { align-items: stretch; flex-direction: column; }
    .pwa-brand-note strong { white-space: normal; }
    .pwa-status-grid { grid-template-columns: 1fr; }
    .straight-start-form,.straight-controls,.straight-action-grid,.sports-controls,.sports-action-grid { grid-template-columns: 1fr; }
    .sports-session-actions { flex-direction: column; }
    .straight-current { border-right: 0; border-bottom: 1px solid var(--border); }
    .straight-action-grid .straight-score-form { grid-column: auto; grid-template-columns: 1fr; }
    .straight-rack { grid-template-columns: repeat(5,34px); min-height: 145px; border-width: 10px; }
    .straight-rack i { width: 33px; height: 33px; font-size: .75rem; }
    .straight-log > div { grid-template-columns: 1fr auto; }
    .straight-log > div span { grid-column: 1 / -1; }
    .standard-score-header { grid-template-columns: 1fr 1fr; }
    .standard-score-header article:first-child { grid-column: 1 / -1; }
    .standard-live-overview > .panel { min-height: 0; }
    .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: auto; max-width: 100%; margin-inline: auto; }
    .rules-card-grid { grid-template-columns: 1fr; }
    .rules-card-wide { grid-column: auto; }
    .rules-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

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

@media (max-width: 560px) {
    .sidebar .brand strong { display: none; }
    .sidebar.menu-open nav { grid-template-columns: 1fr; }
    .game-rules-shortcut a { width: 100%; justify-content: center; }
    .rules-nav { grid-template-columns: 1fr; }
    .auth-shell { width: 100%; padding: 0; }
    .auth-brand { padding: 1rem; margin: 0; }
    .auth-brand img,.auth-brand .brand-mark { width: 60px; height: 60px; }
    .auth-card { border-width: 1px 0 0; border-radius: 0; }
    .tab { min-height: 62px; }
    .form-grid { grid-template-columns: 1fr; }
    .standard-game-choice,.standard-name-grid,.standard-phone-score { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    .member-role-form { grid-template-columns: 1fr; }
    .member-role-form .button { grid-column: auto; }
    .site-group-metrics { grid-template-columns: 1fr 1fr; }
    .site-group-metrics span:nth-child(2) { border-right: 0; }
    .site-group-metrics span:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .bowlliards-scoreboard { padding-inline: .75rem; }
    .bowlliards-player-picker { grid-template-columns: 1fr; }
    .golf-shot-actions { grid-template-columns: 1fr; }
    .golf-table { width:min(100%,760px); aspect-ratio:2 / 1; min-height:180px; border-width:10px; border-radius:24px; }
    .golf-table .pocket { width:36px; height:36px; border-width:4px; }
    .golf-table .pocket.selected { width:44px; height:44px; }
    .golf-rail-sights i { width:6px; height:6px; }
    .golf-cue-zone { top:23%; right:4%; bottom:23%; left:80%; min-width:0; }
    .bowlliards-score-entry > div { grid-template-columns: repeat(4,minmax(42px,1fr)); }
    .phone-choice { grid-template-columns: 1fr; }
    .statistics-shell { padding: .85rem; }
    .game-registration-title { margin-bottom: 1rem; }
    .game-registration-title h1 { font-size: clamp(1.8rem,9vw,2.45rem); overflow-wrap: anywhere; }
    .game-registration-grid { gap: .85rem; }
    .game-registration-grid > .panel { padding: 1rem; }
    .game-registration-qr { width: min(240px,100%); padding: 12px; }
    .game-registered-list { min-height: 0; margin-top: .85rem; padding: .75rem; }
    .game-registered-list .registration-empty { min-height: 130px; margin-bottom: 0; padding: .85rem; }
    .apa-control-grid { grid-template-columns: 1fr; }
    .content { padding: 1rem; }
    .straight-phone-actions { grid-template-columns: 1fr; }
    .standard-score-header { grid-template-columns: 1fr; }
    .standard-score-header article:first-child { grid-column: auto; }
    .standard-player-grid { grid-template-columns: 1fr; }
    .page-heading { align-items: flex-start; flex-direction: column; }
}