/* ANSC Cricket Scoreboard — Display Styles (Light Theme, Fully Responsive) */
/* Mobile-first responsive design */

:root {
  --ansc-navy: #001E35;
  --ansc-navy-mid: #002D4D;
  --ansc-gold: #C8A800;
  --ansc-gold-bright: #FFE44D;
  --ansc-sky: #0077B6;
  --ansc-white: #FFFFFF;
  --ansc-text: #1A2B3C;
  --ansc-muted: #5A6B7C;
  --ansc-bg: #F0F5FA;
  --ansc-card: #FFFFFF;
  --ansc-border: #D0DAE6;
  --ansc-shadow: rgba(0, 30, 53, 0.12);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Dosis', sans-serif;
  background: linear-gradient(160deg, #E8EEF5 0%, var(--ansc-bg) 40%, #DCE5F0 100%);
  color: var(--ansc-text);
  min-height: 100vh;
}

/* ============================================================
   BASE / MOBILE STYLES (< 640px)
   ============================================================ */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0.75rem;
  gap: 0.75rem;
}

/* Header */
.display-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(90deg, var(--ansc-navy) 0%, var(--ansc-navy-mid) 100%);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(135, 225, 255, 0.25);
  box-shadow: 0 4px 20px var(--ansc-shadow);
  text-align: center;
}

.school-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.school-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ansc-gold-bright);
  object-fit: cover;
}

.school-info h1 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ansc-gold-bright);
  text-transform: uppercase;
  line-height: 1.2;
}

.match-label {
  font-size: 0.75rem;
  color: var(--ansc-sky);
  font-weight: 600;
  letter-spacing: 1.5px;
}

.conn-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF5350;
  box-shadow: 0 0 6px #EF5350;
  transition: all 0.3s;
}

.conn-pill.connected .conn-dot {
  background: #66BB6A;
  box-shadow: 0 0 6px #66BB6A;
}

.conn-text {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ansc-white);
}

/* Score Section */
.score-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
}

.versus {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ansc-gold);
  text-align: center;
  letter-spacing: 3px;
  padding: 0.25rem 0;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, var(--ansc-card) 0%, #F5F8FC 100%);
  border-radius: 12px;
  padding: 1rem;
  border: 2px solid var(--ansc-border);
  box-shadow: 0 4px 20px var(--ansc-shadow);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  gap: 0.5rem;
}

.team-card.active-batting {
  border-color: var(--ansc-gold);
  box-shadow: 0 4px 20px rgba(200, 168, 0, 0.18);
}

.team-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ansc-gold) 0%, var(--ansc-sky) 100%);
}

.team-logo-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ansc-gold);
  background: var(--ansc-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.team-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ansc-navy);
  line-height: 1.2;
}

.team-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ansc-sky);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

.team-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 0.25rem;
}

.score-runs {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--ansc-gold);
  text-shadow: 0 0 12px rgba(200, 168, 0, 0.2);
  line-height: 1;
}

.score-sep {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ansc-muted);
}

.score-wickets {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ansc-sky);
  line-height: 1;
}

/* Meta Bar */
.meta-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  background: linear-gradient(90deg, var(--ansc-card) 0%, #F5F8FC 100%);
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--ansc-border);
  box-shadow: 0 2px 10px var(--ansc-shadow);
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.4rem;
}

.meta-label {
  font-size: 0.65rem;
  color: var(--ansc-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.meta-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ansc-navy);
  text-align: center;
}

/* Over Tracker */
.over-tracker {
  background: linear-gradient(90deg, var(--ansc-card) 0%, #F5F8FC 100%);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ansc-border);
  box-shadow: 0 2px 10px var(--ansc-shadow);
}

.over-tracker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.over-tracker-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ansc-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.over-tracker-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ansc-navy);
}

.ball-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 36px;
  align-items: center;
}

.ball-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ansc-white);
  background: var(--ansc-navy-mid);
  border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.ball-item.ball-four {
  background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%);
  border-color: #1B5E20;
}

.ball-item.ball-six {
  background: linear-gradient(135deg, var(--ansc-gold) 0%, var(--ansc-gold-bright) 100%);
  color: var(--ansc-navy);
  border-color: #B89A00;
}

.ball-item.ball-wicket {
  background: linear-gradient(135deg, #C62828 0%, #E53935 100%);
  border-color: #8E0000;
}

.ball-item.ball-extra {
  background: linear-gradient(135deg, #7B1FA2 0%, #9C27B0 100%);
  border-color: #4A148C;
}

.ball-item.ball-dot {
  background: #E0E0E0;
  color: var(--ansc-muted);
  border-color: #BDBDBD;
}

.ball-item:last-child {
  animation: ballPop 0.35s ease-out;
}

.over-empty {
  font-size: 0.75rem;
  color: var(--ansc-muted);
  font-style: italic;
}

@keyframes ballPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Players Section */
.players-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.player-card {
  background: linear-gradient(180deg, var(--ansc-card) 0%, #F5F8FC 100%);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  border: 1px solid var(--ansc-border);
  box-shadow: 0 2px 10px var(--ansc-shadow);
  transition: border-color 0.3s;
}

.player-card.striker {
  border-color: var(--ansc-gold);
  box-shadow: 0 2px 14px rgba(200, 168, 0, 0.12);
}

.player-role {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ansc-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2px;
}

.player-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ansc-navy);
  margin-bottom: 0.5rem;
}

.player-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ansc-gold);
}

.stat-label {
  font-size: 0.6rem;
  color: var(--ansc-muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* Commentary */
.commentary-section {
  background: linear-gradient(90deg, var(--ansc-navy) 0%, var(--ansc-navy-mid) 100%);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(135, 225, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-shadow: 0 2px 10px var(--ansc-shadow);
}

.commentary-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ansc-sky);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.commentary-ticker {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ansc-white);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Animation Overlay */
.animation-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background: rgba(240, 245, 250, 0.8);
  backdrop-filter: blur(6px);
}

.animation-overlay.active {
  display: flex;
}

.anim-content {
  font-size: clamp(3rem, 14vw, 6rem);
  font-weight: 800;
  text-align: center;
  animation: animPop 1.2s ease-out forwards;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 1rem;
}

@keyframes animPop {
  0% { transform: scale(0.2) rotate(-10deg); opacity: 0; }
  40% { transform: scale(1.2) rotate(3deg); opacity: 1; }
  60% { transform: scale(1) rotate(0deg); }
  80% { opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}

.anim-four { color: #2E7D32; text-shadow: 0 0 20px rgba(46, 125, 50, 0.3); }
.anim-six  { color: #E65100; text-shadow: 0 0 20px rgba(230, 81, 0, 0.3); }
.anim-wicket { color: #C62828; text-shadow: 0 0 20px rgba(198, 40, 40, 0.3); }
.anim-wide { color: #006BA8; text-shadow: 0 0 20px rgba(0, 107, 168, 0.3); }
.anim-noball { color: #F57F17; text-shadow: 0 0 20px rgba(245, 127, 23, 0.3); }

/* Score flash effect */
.score-flash {
  animation: scoreFlash 0.4s ease-out;
}

@keyframes scoreFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); color: var(--ansc-gold-bright); }
  100% { transform: scale(1); }
}

/* ============================================================
   TABLET (640px – 1023px)
   ============================================================ */

@media (min-width: 640px) {
  .app {
    padding: 1rem 1.5rem;
    gap: 1rem;
  }

  .display-header {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    text-align: left;
  }

  .school-logo {
    width: 48px;
    height: 48px;
  }

  .school-info h1 {
    font-size: 1.35rem;
  }

  .match-label {
    font-size: 0.85rem;
  }

  /* Score section: side by side with VS in middle */
  .score-section {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .versus {
    font-size: 1.75rem;
    padding: 0;
    flex-shrink: 0;
  }

  .team-card {
    flex: 1;
    padding: 1.5rem;
    gap: 0.6rem;
  }

  .team-logo-wrap {
    width: 72px;
    height: 72px;
  }

  .team-name {
    font-size: 1.4rem;
  }

  .team-label {
    font-size: 0.8rem;
  }

  .score-runs {
    font-size: 4.5rem;
  }

  .score-sep {
    font-size: 2.5rem;
  }

  .score-wickets {
    font-size: 3.5rem;
  }

  /* Meta bar */
  .meta-bar {
    display: flex;
    justify-content: space-around;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
  }

  .meta-item {
    padding: 0;
  }

  .meta-label {
    font-size: 0.7rem;
  }

  .meta-value {
    font-size: 1.3rem;
  }

  /* Over tracker */
  .over-tracker {
    padding: 1rem 1.5rem;
  }

  .ball-item {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }

  /* Players: 2-column grid, bowler spans full width */
  .players-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
  }

  .player-card.bowler {
    grid-column: 1 / -1;
  }

  .player-card {
    padding: 1rem 1.25rem;
  }

  .player-name {
    font-size: 1.15rem;
  }

  .stat-val {
    font-size: 1.25rem;
  }

  .stat-label {
    font-size: 0.65rem;
  }

  /* Commentary */
  .commentary-section {
    flex-direction: row;
    align-items: center;
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
  }

  .commentary-ticker {
    font-size: 1.1rem;
  }

  /* Animation */
  .anim-content {
    font-size: clamp(4rem, 10vw, 7rem);
  }
}

/* ============================================================
   DESKTOP / PROJECTOR (1024px+)
   ============================================================ */

@media (min-width: 1024px) {
  .app {
    padding: 1.25vw 2vw;
    gap: 1.2vw;
  }

  .display-header {
    padding: 0.8vw 1.5vw;
    border-radius: 1vw;
  }

  .school-logo {
    width: 3.5vw;
    height: 3.5vw;
    min-width: 48px;
    min-height: 48px;
  }

  .school-info h1 {
    font-size: clamp(1.2rem, 1.8vw, 2.2rem);
  }

  .match-label {
    font-size: clamp(0.8rem, 1.1vw, 1.2rem);
  }

  .conn-pill {
    padding: 0.4vw 1vw;
    border-radius: 2vw;
  }

  .conn-dot {
    width: 0.7vw;
    height: 0.7vw;
    min-width: 10px;
    min-height: 10px;
  }

  .conn-text {
    font-size: clamp(0.75rem, 0.9vw, 1rem);
  }

  /* Score */
  .score-section {
    gap: 2vw;
    flex: 1;
    min-height: 0;
  }

  .versus {
    font-size: clamp(1.5rem, 3vw, 3.5rem);
    letter-spacing: 4px;
  }

  .team-card {
    border-radius: 1.5vw;
    padding: 2vw 3vw;
    gap: 0.75vw;
  }

  .team-logo-wrap {
    width: 6vw;
    height: 6vw;
    min-width: 64px;
    min-height: 64px;
    border-width: 3px;
    margin-bottom: 0.5vw;
  }

  .team-name {
    font-size: clamp(1.4rem, 2.2vw, 2.6rem);
    margin-bottom: 0.25vw;
  }

  .team-label {
    font-size: clamp(0.75rem, 1vw, 1.1rem);
    letter-spacing: 2px;
  }

  .team-score {
    gap: 0.5vw;
    margin-top: 0.75vw;
  }

  .score-runs {
    font-size: clamp(3.5rem, 7vw, 9rem);
  }

  .score-sep {
    font-size: clamp(2rem, 4vw, 5.5rem);
  }

  .score-wickets {
    font-size: clamp(2.5rem, 4.5vw, 6rem);
  }

  /* Meta bar */
  .meta-bar {
    justify-content: center;
    gap: 4vw;
    padding: 0.8vw 2vw;
    border-radius: 1vw;
  }

  .meta-item {
    gap: 0.2vw;
  }

  .meta-label {
    font-size: clamp(0.7rem, 0.85vw, 1rem);
    letter-spacing: 1.5px;
  }

  .meta-value {
    font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  }

  /* Over tracker */
  .over-tracker {
    padding: 1vw 1.5vw;
    border-radius: 1vw;
  }

  .over-tracker-label,
  .over-tracker-count {
    font-size: clamp(0.75rem, 1vw, 1rem);
  }

  .ball-item {
    width: clamp(36px, 3vw, 48px);
    height: clamp(36px, 3vw, 48px);
    font-size: clamp(0.75rem, 0.9vw, 1rem);
  }

  /* Players: 3-column layout */
  .players-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.2vw;
  }

  .player-card {
    border-radius: 1vw;
    padding: 1vw 1.5vw;
  }

  .player-card.bowler {
    grid-column: auto;
  }

  .player-role {
    font-size: clamp(0.65rem, 0.75vw, 0.85rem);
    margin-bottom: 0.3vw;
  }

  .player-name {
    font-size: clamp(1.1rem, 1.5vw, 1.8rem);
    margin-bottom: 0.6vw;
  }

  .player-stats-row {
    display: flex;
    gap: 1vw;
  }

  .stat-val {
    font-size: clamp(1.2rem, 1.6vw, 2rem);
  }

  .stat-label {
    font-size: clamp(0.6rem, 0.7vw, 0.8rem);
  }

  /* Commentary */
  .commentary-section {
    border-radius: 1vw;
    padding: 0.8vw 1.5vw;
    gap: 1vw;
  }

  .commentary-label {
    font-size: clamp(0.75rem, 0.85vw, 1rem);
    letter-spacing: 2px;
    flex-shrink: 0;
  }

  .commentary-ticker {
    font-size: clamp(1rem, 1.3vw, 1.6rem);
  }

  /* Animation */
  .anim-content {
    font-size: clamp(4rem, 12vw, 14rem);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
  }
}

/* ============================================================
   WIDE SCREENS (1440px+)
   ============================================================ */

@media (min-width: 1440px) {
  .app {
    padding: 1.5vw 3vw;
    gap: 1.5vw;
    max-width: 1800px;
    margin: 0 auto;
  }

  .score-runs {
    font-size: clamp(4rem, 8vw, 10rem);
  }

  .score-sep {
    font-size: clamp(2.5rem, 5vw, 6rem);
  }

  .score-wickets {
    font-size: clamp(3rem, 5.5vw, 7rem);
  }
}