/*
 * Copyright © 2026 Averox. All Rights Reserved.
 * https://averox.com/
 *
 * Sightscreen — Field and Panel (round 1f).
 * Depends on brand.css text/surface tokens (round 1e).
 */

/* ---- Bundled fonts (no runtime Google fetch) ---- */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ss-field: var(--brand-surface-dark, #0B3B27);
  --ss-primary: var(--brand-primary, #026F46);
  --ss-accent: var(--brand-accent, #1CAA57);
  --ss-panel: var(--brand-surface-white, #FFFFFF);
  --ss-panel-soft: var(--brand-surface-card, #E6EFE9);
  --ss-panel-border: #D8E6DD;
  --ss-radius: 24px;
  --ss-radius-ctrl: 12px;
  --ss-font: "Manrope", system-ui, sans-serif;
  --ss-score: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ss-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ss-dur-fast: 150ms;
  --ss-dur: 250ms;
  --ss-inset: 24px;
  --ss-max: 1280px;
}

@media (max-width: 719px) {
  :root { --ss-inset: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ss-dur-fast: 0ms; --ss-dur: 0ms; }
  .ss-live-pulse .ss-pulse-dot,
  .ss-stumps-loader span { animation: none !important; }
}

/* ---- Field shell ---- */
.ss-field {
  min-height: 100dvh;
  margin: 0;
  font-family: var(--ss-font);
  color: var(--text-on-dark, #FFFFFF);
  background:
    radial-gradient(900px 420px at 12% -8%, color-mix(in srgb, var(--ss-primary) 34%, transparent), transparent 55%),
    var(--ss-field);
}
.ss-field a { color: var(--link-on-dark, #FFFFFF); }

.ss-shell {
  width: min(100%, var(--ss-max));
  margin: 0 auto;
  padding: var(--ss-inset);
  box-sizing: border-box;
}

/* ---- Typography scale ---- */
.ss-caption { font-size: 12px; line-height: 1.35; font-weight: 500; }
.ss-body { font-size: 14px; line-height: 1.45; font-weight: 400; }
.ss-body-lg { font-size: 16px; line-height: 1.45; font-weight: 500; }
.ss-title { font-size: 20px; line-height: 1.3; font-weight: 600; }
.ss-headline { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.ss-display { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.ss-score-num {
  font-family: var(--ss-score);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ss-score-lg { font-size: clamp(56px, 8vw, 96px); }
.ss-score-md { font-size: 40px; }
.ss-score-sm { font-size: 28px; }

/* ---- SsPanel ---- */
.ss-panel {
  background: var(--ss-panel);
  color: var(--text-on-light, #0B2A1C);
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-panel-border);
  padding: 20px;
  box-sizing: border-box;
}
.ss-panel--soft {
  background: var(--ss-panel-soft);
}
/* Beat .surface-dark label/h2 rules from scorer.css (ss.css loads last). */
body .ss-panel,
body .ss-panel .muted,
body .ss-panel .ss-caption,
body .ss-panel .ss-body,
body .ss-panel h2,
body .ss-panel .eyebrow,
body .ss-panel label,
.surface-dark .ss-panel label,
.surface-dark .ss-panel h2,
.surface-dark .ss-panel .eyebrow {
  color: var(--text-on-light-muted, #3F6B55);
}
body .ss-panel {
  color: var(--text-on-light, #0B2A1C);
}
body .login-card a,
body .ss-panel a,
body .surface-light a {
  color: var(--link-on-light, #026F46);
}
.ss-panel .ss-title,
.ss-panel .login-title { color: var(--text-on-light, #0B2A1C); }
.ss-panel a { color: var(--link-on-light, #026F46); }
.ss-panel label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 6px;
}
.ss-panel input,
.ss-panel select,
.ss-panel textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--ss-radius-ctrl);
  border: 1px solid var(--ss-panel-border);
  background: var(--ss-panel);
  color: var(--text-on-light, #0B2A1C);
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
}
.ss-panel .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ---- Arc (one per screen) ---- */
.ss-arc {
  position: absolute;
  inset: auto 0 0 0;
  height: 48px;
  pointer-events: none;
  overflow: hidden;
}
.ss-arc svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ss-arc path {
  fill: none;
  stroke: var(--ss-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ---- Stumps ---- */
.ss-stumps {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  height: 14px;
}
.ss-stumps span {
  display: block;
  width: 3px;
  height: 10px;
  border-radius: 1px;
  background: var(--ss-accent);
}
.ss-stumps--on-light span { background: var(--ss-primary); }
.ss-stumps-loader span {
  animation: ss-stump-rise 0.9s ease-in-out infinite;
}
.ss-stumps-loader span:nth-child(2) { animation-delay: 0.12s; }
.ss-stumps-loader span:nth-child(3) { animation-delay: 0.24s; }
@keyframes ss-stump-rise {
  0%, 100% { height: 6px; opacity: 0.55; }
  50% { height: 14px; opacity: 1; }
}

/* ---- Live pulse ---- */
.ss-live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ss-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ss-accent);
  animation: ss-pulse 2s ease-in-out infinite;
}
@keyframes ss-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

/* ---- SsPageHeader ---- */
.ss-page-header {
  position: relative;
  padding: 8px 0 20px;
  margin-bottom: 8px;
}
.ss-page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ss-page-header__title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-on-dark, #FFFFFF);
}
.ss-page-header__sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-on-dark-body, #E6F2EA);
}

/* ---- Buttons ---- */
.ss-btn {
  appearance: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--ss-radius-ctrl);
  padding: 12px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--ss-dur-fast) var(--ss-ease), filter var(--ss-dur-fast) ease;
}
.ss-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ss-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ss-btn--primary {
  background: var(--ss-primary);
  color: var(--brand-on-primary, #FFFFFF);
}
.ss-btn--accent {
  background: var(--ss-accent);
  color: var(--text-on-light, #0B2A1C);
}
.ss-btn--ghost {
  background: transparent;
  color: var(--text-on-dark, #FFFFFF);
  border-color: color-mix(in srgb, var(--text-on-dark) 35%, transparent);
}
.ss-panel .ss-btn--ghost,
.ss-sheet .ss-btn--ghost,
.sheet .ss-btn--ghost,
#settings-sheet .ss-btn--ghost {
  color: var(--text-on-light, #0B2A1C);
  border-color: color-mix(in srgb, var(--text-on-light) 28%, transparent);
  background: #FFFFFF;
}
.ss-btn--block { width: 100%; display: block; }

/* ---- Chips / tabs ---- */
.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: transparent;
  color: inherit;
}
.ss-chip--accent {
  background: var(--ss-accent);
  border-color: var(--ss-accent);
  color: var(--text-on-light, #0B2A1C);
}
.ss-tabbar {
  display: flex;
  gap: 4px;
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--text-on-dark) 14%, transparent);
}
.ss-tabbar__tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-on-dark-muted, #D4E6DB);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 14px;
  cursor: pointer;
}
.ss-tabbar__tab[aria-selected="true"] {
  color: var(--text-on-dark, #FFFFFF);
}
.ss-tabbar__stumps {
  position: absolute;
  bottom: -1px;
  height: 3px;
  display: flex;
  gap: 3px;
  transition: left var(--ss-dur) var(--ss-ease), width var(--ss-dur) var(--ss-ease);
}
.ss-tabbar__stumps i {
  width: 8px;
  height: 3px;
  border-radius: 1px;
  background: var(--ss-accent);
}

/* ---- Score strip ---- */
.ss-score-strip {
  display: grid;
  gap: 8px;
}
.ss-score-strip__team {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-on-dark-body, #E6F2EA);
}
.ss-score-strip__figures {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ss-score-strip__meta {
  font-size: 13px;
  color: var(--text-on-dark-muted, #D4E6DB);
}

/* ---- Over strip ---- */
.ss-over-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 36px;
}
.ss-ball {
  min-width: 32px;
  height: 32px;
  border-radius: var(--ss-radius-ctrl);
  display: grid;
  place-items: center;
  font-family: var(--ss-score);
  font-weight: 600;
  font-size: 16px;
  background: color-mix(in srgb, var(--text-on-dark) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-on-dark) 18%, transparent);
  color: var(--text-on-dark, #FFFFFF);
  animation: ss-ball-in var(--ss-dur) var(--ss-ease) both;
}
.ss-ball--4, .ss-ball--6 {
  background: var(--ss-accent);
  border-color: var(--ss-accent);
  color: var(--text-on-light, #0B2A1C);
}
.ss-ball--W {
  background: color-mix(in srgb, #E0A44A 30%, transparent);
  border-color: #E0A44A;
}
@keyframes ss-ball-in {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Batter / bowler cards ---- */
.ss-player-card {
  background: #0E4A32;
  border: 1px solid #1A5C3E;
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text-on-dark, #FFFFFF);
}
.ss-player-card--striker {
  border-color: color-mix(in srgb, var(--ss-accent) 55%, transparent);
}
.ss-player-card__role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted, #D4E6DB);
  font-weight: 700;
}
.ss-player-card__name {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 700;
}
.ss-player-card__fig {
  margin-top: 6px;
  font-family: var(--ss-score);
  font-size: 24px;
  font-weight: 600;
}

/* ---- Empty / powered ---- */
.ss-empty {
  text-align: center;
  padding: 32px 20px;
  border: 1px dashed color-mix(in srgb, var(--text-on-dark) 22%, transparent);
  border-radius: var(--ss-radius);
  background: color-mix(in srgb, #0E4A32 80%, var(--ss-field));
  color: var(--text-on-dark, #FFFFFF);
}
.ss-empty__title {
  margin: 12px 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.ss-empty__body {
  margin: 0 0 16px;
  color: var(--text-on-dark-body, #E6F2EA);
  font-size: 14px;
}
.ss-powered {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-on-dark-muted, #D4E6DB);
  text-decoration: none;
}
.ss-powered img { width: 16px; height: 16px; object-fit: contain; }

/* ---- Desk three-zone (≥1024) ---- */
.ss-desk-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--ss-inset);
  background: var(--ss-field);
  border-bottom: 1px solid color-mix(in srgb, var(--text-on-dark) 12%, transparent);
}
.ss-desk-top .ss-btn--ghost,
.ss-desk-top .btn.ghost {
  color: var(--text-on-dark, #FFFFFF);
  border-color: color-mix(in srgb, var(--text-on-dark) 35%, transparent);
  background: transparent;
}
.ss-desk-top .btn.nav-active,
.ss-desk-top .ss-btn.nav-active {
  background: var(--ss-panel);
  color: var(--text-on-light, #0B2A1C);
  border-color: var(--ss-panel);
}
/* Desk grid lives in desk.css (Session A2). */

/* ---- Keypad ---- */
.ss-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ss-key {
  appearance: none;
  font-family: var(--ss-score);
  font-size: 28px;
  font-weight: 600;
  border-radius: 14px;
  padding: 16px 0;
  border: 1px solid color-mix(in srgb, var(--text-on-light) 12%, transparent);
  background: var(--ss-panel);
  color: var(--text-on-light, #0B2A1C);
  cursor: pointer;
  transition: transform var(--ss-dur-fast) var(--ss-ease);
}
.ss-key:hover { transform: translateY(-1px); }
.ss-key--accent {
  background: var(--ss-accent);
  border-color: var(--ss-accent);
  color: var(--text-on-light, #0B2A1C);
}
.ss-key--warn {
  background: #F3E6D0;
  border-color: color-mix(in srgb, #E0A44A 40%, transparent);
}

/* ---- TV broadcast ---- */
.ss-tv {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--ss-field);
  color: var(--text-on-dark, #FFFFFF);
  font-family: var(--ss-font);
}
.ss-tv__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 28px 8px;
}
.ss-tv__side {
  justify-self: end;
  display: grid;
  gap: 10px;
  padding: 0 28px;
  width: min(360px, 34vw);
}
.ss-tv__lower {
  position: relative;
  padding: 18px 28px 28px;
  background: color-mix(in srgb, #08281B 55%, var(--ss-field));
  border-top: 1px solid color-mix(in srgb, var(--text-on-dark) 12%, transparent);
}
.ss-tv__pill {
  background: var(--ss-accent);
  color: var(--text-on-light, #0B2A1C);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
}

/* ---- Sheet ---- */
.ss-sheet-veil {
  position: fixed;
  inset: 0;
  background: rgba(5, 20, 12, 0.55);
  z-index: 80;
  display: grid;
  align-items: end;
}
.ss-sheet {
  background: var(--ss-panel);
  color: var(--text-on-light, #0B2A1C);
  border-radius: 24px 24px 0 0;
  padding: 20px 20px 28px;
  max-height: min(78vh, 560px);
  overflow: auto;
  animation: ss-sheet-up var(--ss-dur) var(--ss-ease) both;
}
@keyframes ss-sheet-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}