:root {
  color-scheme: dark;
  --bg: #030b16;
  --surface: rgba(11, 28, 45, 0.8);
  --surface-strong: #10283e;
  --line: rgba(146, 236, 255, 0.18);
  --text: #f5faff;
  --muted: #9eb3c7;
  --accent: #0ba8ff;
  --accent-dark: #075b91;
  --green: #68e64b;
  --warn: #ffb23e;
  --danger: #ff4f4f;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(11, 168, 255, 0.28), transparent 42%),
    radial-gradient(circle at 92% 4%, rgba(255, 178, 62, 0.15), transparent 34%),
    linear-gradient(160deg, #030b16 0%, #091827 55%, #030b16 100%);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}
.auth-pending .app-shell, .unauthenticated .app-shell { display: none; }
.authenticated #loginOverlay { display: none; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.app-shell { max-width: 1180px; margin: 0 auto; min-height: 100vh; padding: 0 16px 104px; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; }
.brand-mark { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(11, 168, 255, .42)); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.session-button { max-width: 145px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; color: var(--text); background: rgba(255,255,255,.06); font-size: .78rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.compact-select, input, select { min-height: 44px; color: var(--text); background: rgba(5, 15, 26, 0.72); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.compact-select { min-height: 38px; padding: 6px 9px; }
.connection-badge, .status-pill, .count-badge { display: inline-flex; align-items: center; border-radius: 999px; font-size: 0.78rem; font-weight: 800; padding: 5px 9px; background: rgba(93, 225, 185, 0.12); color: var(--accent); }
.connection-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; }
.connection-badge.disconnected { color: var(--danger); background: rgba(255,125,125,.12); }
.view { display: none; animation: reveal 180ms ease-out; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } }
.glass { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.score-hero { border-radius: 24px; padding: 18px; overflow: hidden; position: relative; }
.home-hero { border-radius: 24px; padding: 22px; margin-bottom: 14px; }
.home-hero > p { color: var(--muted); }
.identity-summary { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.identity-summary strong, .identity-summary span { display: block; }
.identity-summary span { color: var(--muted); font-size: .88rem; }
.score-hero::after { content: ""; position: absolute; inset: auto -60px -90px auto; width: 190px; height: 190px; border: 42px solid rgba(93, 225, 185, 0.07); border-radius: 50%; pointer-events: none; }
.baseball-visual-grid { display: grid; gap: 14px; margin-top: 14px; }
.field-panel, .situation-panel, .baseball-stats-panel { padding: 18px; border-radius: 22px; }
.defensive-diamond { position: relative; min-height: 390px; margin-top: 12px; overflow: hidden; border-radius: 26px; background: radial-gradient(ellipse at 50% 70%, #704427 0 22%, transparent 23%), radial-gradient(ellipse at 50% 65%, #0b5b38 0 46%, #063223 72%); border: 1px solid rgba(104,230,75,.35); }
.defensive-diamond::after { content:""; position:absolute; width:42%; aspect-ratio:1; left:29%; top:37%; border:2px solid rgba(255,255,255,.42); transform:rotate(45deg); }
.field-player { position:absolute; z-index:1; transform:translate(-50%,-50%); width:72px; min-height:48px; padding:5px; display:grid; place-items:center; border:2px solid var(--accent); border-radius:11px; background:rgba(3,11,22,.9); text-align:center; }
.field-player.warning { border-color:var(--warn); }
.field-player b { font-size:.7rem; }
.field-player span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.64rem; }
.base-state { position:relative; width:150px; height:120px; margin:32px auto 16px; }
.base { position:absolute; width:42px; height:42px; transform:rotate(45deg); border:2px solid var(--muted); border-radius:6px; background:rgba(255,255,255,.08); }
.base.occupied { border-color:var(--warn); background:var(--warn); box-shadow:0 0 22px rgba(255,178,62,.35); }
.base-2 { left:54px; top:0; }.base-3 { left:10px; top:44px; }.base-1 { right:10px; top:44px; }
.count-state { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.count-state b { padding:10px 5px; border-radius:10px; background:rgba(255,255,255,.06); font-size:.78rem; }
.matchup-state { margin-top:14px; color:var(--muted); font-size:.82rem; text-align:center; }
.baseball-stats-panel { margin-top:14px; }
.game-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--muted); font-size: 0.85rem; }
.game-meta div { display: flex; gap: 9px; align-items: center; }
.game-meta strong { color: var(--text); }
.score-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 14px; margin: 22px 0; }
.team-score { display: flex; flex-direction: column; min-width: 0; }
.team-score.right { align-items: flex-end; text-align: right; }
.team-score span { color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-score strong { font-size: clamp(3.5rem, 16vw, 6rem); letter-spacing: -0.08em; line-height: 0.95; }
.game-center { align-self: center; text-align: center; color: var(--muted); }
.game-center small { display: block; margin-top: 8px; }
.inning-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(38px, 1fr); gap: 6px; overflow-x: auto; }
.inning-cell { text-align: center; min-width: 38px; border-radius: 9px; padding: 7px 5px; background: rgba(1, 8, 15, 0.34); }
.inning-cell b, .inning-cell span { display: block; }
.inning-cell span { color: var(--muted); font-size: 0.75rem; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 28px 2px 14px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.7rem, 6vw, 2.45rem); letter-spacing: -0.04em; }
h2 { margin-bottom: 14px; font-size: 1.05rem; }
.eyebrow { margin-bottom: 4px; color: var(--accent); font-size: 0.76rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.12em; }
.supporting { color: var(--muted); }
.panel { padding: 18px; border-radius: 20px; margin-bottom: 14px; }
.scoring-layout { display: grid; gap: 14px; }
.event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 14px; }
.event-button, .stepper button { min-height: 48px; border: 1px solid var(--line); color: var(--text); background: rgba(3, 13, 23, 0.52); border-radius: 13px; font-weight: 750; }
.event-button.selected { color: #03231b; background: var(--accent); border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.88rem; font-weight: 700; margin-bottom: 12px; }
.primary-button, .secondary-button, .ghost-button, .icon-button { min-height: 46px; border-radius: 13px; border: 0; padding: 10px 16px; font-weight: 850; }
.primary-button { width: 100%; color: #03231b; background: var(--accent); }
.primary-button.small { width: auto; min-height: 40px; }
.secondary-button { color: var(--text); background: var(--accent-dark); }
.ghost-button, .icon-button { color: var(--text); background: rgba(255,255,255,0.06); border: 1px solid var(--line); }
.icon-button { width: 44px; padding: 0; font-size: 1.4rem; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title-row h2 { margin-bottom: 0; }
.panel-title-row strong { font-size: 2rem; color: var(--accent); }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
.game-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.game-controls button { grid-column: 1 / -1; }
.stack-list, .card-list { display: grid; gap: 10px; }
.game-choice { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; color: var(--text); background: rgba(18,34,51,.7); border: 1px solid var(--line); border-radius: 16px; text-align: left; }
.game-choice span { color: var(--muted); font-size: .82rem; }
.availability-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.availability-item span { display: block; color: var(--muted); font-size: .82rem; }
.availability-item > div:last-child { color: var(--muted); font-size: .82rem; text-align: right; }
.empty-state { color: var(--muted); padding: 10px 0; }
.player-card, .game-card, .list-item { border: 1px solid var(--line); border-radius: 17px; background: rgba(18, 34, 51, 0.7); padding: 14px; }
.player-card { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; }
.jersey { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: rgba(93,225,185,.12); color: var(--accent); font-weight: 900; }
.player-card h3, .game-card h3 { margin: 0; font-size: 1rem; }
.player-card p, .game-card p { margin: 3px 0 0; color: var(--muted); font-size: .85rem; }
.danger-link { color: var(--danger); background: transparent; border: 0; padding: 8px; }
.hidden { display: none !important; }
.form-panel { margin-top: 14px; }
.compact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.compact-form input, .compact-form select, .compact-form button { min-width: 0; }
.pregame-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pregame-links a, #playBallLink { display: grid; place-items: center; text-decoration: none; }
.disabled { opacity: .45; pointer-events: none; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.form-actions .primary-button { width: auto; }
.tournament-card { border-radius: 20px; padding: 18px; margin-bottom: 14px; }
.tournament-card h2 { margin: 0 0 5px; }
.tournament-card p { margin: 0; color: var(--muted); }
.lineup-list { display: grid; gap: 9px; }
.lineup-row { display: grid; grid-template-columns: 34px 56px minmax(0, 1fr) 100px; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.order-number { font-size: 1.25rem; font-weight: 900; color: var(--accent); text-align: center; }
.lineup-row select { width: 100%; margin: 0; }
.feedback { min-height: 24px; margin: 10px 0 0; color: var(--accent); }
.feedback.error { color: var(--danger); }
.source-picker { padding: 10px; border-radius: 14px; color: var(--accent); background: rgba(93,225,185,.08); }
.source-picker select { color: var(--text); }
select { color-scheme: dark; }
select option { color: #f4f8fb; background: #102131; }
.login-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 9, 16, .88); backdrop-filter: blur(16px); }
.login-card { width: min(100%, 430px); padding: 24px; border-radius: 24px; }
.login-card > p { color: var(--muted); }
.auth-landing { overflow: hidden; text-align: center; }
.auth-artwork { width: 148px; height: 148px; object-fit: cover; border-radius: 30px; box-shadow: 0 18px 42px rgba(0,0,0,.42); }
.auth-brand { margin: 16px 0 22px; }
.auth-brand span { display: block; font-size: 1.65rem; font-weight: 950; letter-spacing: .12em; }
.auth-brand small { display: block; margin-top: 5px; color: var(--muted); font-weight: 800; letter-spacing: .16em; }
.login-secondary { width: 100%; margin-top: 10px; }
.discrepancy-observations { display: grid; gap: 8px; margin: 12px 0; }
.auth-language { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-language legend { grid-column: 1 / -1; margin-bottom: 8px; font-weight: 700; }
.observation-claim { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.15); }
.observation-claim p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.permission-hidden { display: none !important; }
.table-wrap { border-radius: 20px; padding: 10px; overflow-x: auto; margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; min-width: 480px; }
th, td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: #102131; }
th { color: var(--muted); font-size: .8rem; }
.bottom-nav { position: fixed; z-index: 10; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); max-width: 650px; margin: auto; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 20px; padding: 7px; background: rgba(6, 16, 27, .92); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.bottom-nav a { min-height: 54px; color: var(--muted); text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; }
.bottom-nav a.active { color: var(--accent); background: rgba(93,225,185,.09); }
.bottom-nav b { font-size: .7rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (min-width: 760px) {
  .app-shell { padding-left: 26px; padding-right: 26px; }
  .scoring-layout { grid-template-columns: 1.65fr 1fr; }
  .event-grid { grid-template-columns: repeat(4, 1fr); }
  .game-controls { grid-template-columns: 1.4fr 1fr .6fr .6fr auto; }
  .game-controls button { grid-column: auto; }
  .card-list { grid-template-columns: repeat(2, 1fr); }
  .baseball-visual-grid { grid-template-columns: 1.5fr 1fr; }
}

@media (max-width: 759px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .topbar { height: auto; min-height: 68px; align-items: flex-start; padding: 10px 0; gap: 8px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand span { display: none; }
  .topbar-actions { flex: 1; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .compact-select { max-width: min(42vw, 180px); }
  .connection-badge { display: none; }
  .player-card { grid-template-columns: 46px minmax(0, 1fr); }
  .player-card > div:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  .lineup-row { grid-template-columns: 34px 48px minmax(0, 1fr); }
  .lineup-row select { grid-column: 2 / -1; }
  .field-row { grid-template-columns: 1fr; }
  .compact-form { grid-template-columns: 1fr; }
  .bottom-nav { left: 6px; right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) { .view { animation: none; } }