/* Bocce Pals — Happy Days-inspired retro Americana.
   Cherry red + cream, bouncy "Chewy" display type (closest Google Font to the
   Happy Days logo's Balloon lettering), friendly rounded Nunito for body.
   Nonna-proof tokens still rule: ≥18px body, ≥56px tap targets. */

:root {
  --pals-red: #d2342c;
  --pals-red-dark: #a32420;
  --pals-cream: #fff6e5;
  --pals-ink: #2b2421;
}

body {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1.125rem; /* ≥18px body text */
  background-color: var(--pals-cream);
  color: var(--pals-ink);
}

/* The Happy Days wordmark: stacked two-tone sticker letters — colored fill,
   thick white outline, dark offset shadow, slight tilt. Outline is built from
   layered text-shadows (rendering-safe everywhere, unlike text-stroke). */
.logo-stack {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.95;
  text-decoration: none;
  transform: rotate(-2deg);
}
.logo-word {
  display: inline-block; /* transforms don't apply to inline text */
  font-family: 'Chewy', cursive;
  font-size: 2.6rem;
  letter-spacing: 2px;
  text-shadow:
    /* white sticker outline, 8 directions */
    3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
    2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,
    3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff,
    /* dark offset shadow beyond the outline */
    5px 6px 0 #20242b, 6px 5px 0 #20242b, 6px 7px 0 #20242b, 7px 6px 0 #20242b;
}
.logo-red { color: #e03a30; }
.logo-green {
  color: #2f9e44;
  margin-top: -0.3rem;
  transform: rotate(1.5deg);
}
.logo-sm .logo-word, .logo-word.logo-sm { font-size: 1.7rem; }

/* The "o" in Bocce is a bocce ball: shaded sphere with engraved arc lines,
   white ring + dark offset shadow to match the lettering treatment. */
.logo-ball {
  display: inline-block;
  width: 0.58em;
  height: 0.58em;
  margin: 0 0.03em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0655c, #e03a30 55%, #a8231c);
  box-shadow: 0 0 0 3px #fff, 5px 6px 0 #20242b;
  position: relative;
  overflow: hidden;
}
/* Groove rings: two perpendicular great circles seen at an angle, so each
   renders as a thin full ellipse wrapping the sphere (clipped by the ball). */
.logo-ball::before,
.logo-ball::after {
  content: '';
  position: absolute;
  border: 0.045em solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
}
.logo-ball::before {
  /* near-horizontal equator groove */
  width: 96%;
  height: 52%;
  left: 2%;
  top: 24%;
  transform: rotate(-16deg);
}
.logo-ball::after {
  /* perpendicular meridian groove */
  width: 52%;
  height: 96%;
  left: 24%;
  top: 2%;
  transform: rotate(-16deg);
}

h1, .h1 {
  font-family: 'Chewy', cursive;
  font-size: 2rem;
  color: var(--pals-red);
  letter-spacing: 0.5px;
}
h2, .h2 { font-size: 1.4rem; font-weight: 700; }

a { color: var(--pals-red); }

.btn-primary {
  --bs-btn-bg: var(--pals-red);
  --bs-btn-border-color: var(--pals-red);
  --bs-btn-hover-bg: var(--pals-red-dark);
  --bs-btn-hover-border-color: var(--pals-red-dark);
  --bs-btn-active-bg: var(--pals-red-dark);
  --bs-btn-active-border-color: var(--pals-red-dark);
}

/* One big obvious action per screen: full width, ≥56px tall */
.btn-big {
  display: block;
  width: 100%;
  min-height: 56px;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 16px;
}

/* Score steppers: giant +/- targets, no typing needed */
.stepper {
  min-width: 56px;
  min-height: 56px;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 14px;
}

/* Form fields sized for older eyes and thumbs */
.form-control, .form-select {
  min-height: 56px;
  font-size: 1.125rem;
  border-radius: 12px;
}
.form-label { font-weight: 700; }

.card {
  border-radius: 18px;
  border: 2px solid rgba(163, 36, 32, 0.12);
  background-color: #fffdf7;
}

/* QR codes render as inline SVG; keep them crisp and centered */
.qr-box svg { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; }

/* Numbered game cards on the manage page — each game a distinct row so
   adjacent games are easy to tell apart. */
.game-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 2px solid rgba(163, 36, 32, 0.12);
  border-radius: 12px;
  background: #fffdf7;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.6rem;
}
/* games currently in play get a green border */
.game-card.live {
  border-color: #2f9e44;
}
.game-num {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--pals-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-card-body {
  flex: 1;
  min-width: 0;
}
.game-card-match {
  font-weight: 600;
  font-size: 1.05rem;
}
.game-card-meta {
  font-size: 0.8rem;
  color: #9a8f86;
}

/* Graphical bracket: rounds as columns left-to-right, games centered between
   their feeders, horizontally scrollable on small screens. */
.bracket {
  display: flex;
  gap: 2rem;
  padding-bottom: 0.5rem;
  /* No inner scroll window: the bracket sizes to its content (max-content) and
     the whole page pans to reveal it — easier to grab than a
     scroll-within-a-scroll, especially for older users on phones. It must not
     sit inside a fixed-width card, or the card edge clips it. */
  width: max-content;
  max-width: none;
}
.br-round {
  display: flex;
  flex-direction: column;
  min-width: 9.5rem;
  flex: 0 0 auto;
}
.br-round-title {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--pals-red);
  text-align: center;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}
.br-games {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 1rem;
}
.br-game {
  position: relative;
  border: 2px solid rgba(163, 36, 32, 0.15);
  border-radius: 10px;
  background: #fffdf7;
  overflow: hidden;
}
/* a game currently in play gets a green border */
.br-game.br-live {
  border-color: #2f9e44;
  border-width: 3px;
}
/* live pool games ("Now playing") get a green left accent */
.live-item {
  border-left: 4px solid #2f9e44;
}
/* short connector stub linking a game toward the next round */
.br-round:not(:last-child) .br-game::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 2rem;
  height: 2px;
  background: rgba(163, 36, 32, 0.2);
}
.br-team {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  font-size: 1rem;
}
.br-team + .br-team {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.br-team.winner {
  font-weight: 700;
  background: rgba(47, 158, 68, 0.13);
}
.br-team .nm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.br-tbd .nm, .br-tbd {
  color: #9a8f86;
}
.br-court {
  font-size: 0.75rem;
  color: #9a8f86;
  padding: 0.15rem 0.55rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

@media print {
  footer, .no-print { display: none !important; }
  body { background: #fff; }
}