/* ============================================================
   GameOn! — Material Design 3 override stylesheet
   ============================================================

   This file is intentionally additive. It loads AFTER src/styles.css
   and re-skins the existing markup with a Material-leaning palette,
   refreshed surfaces, and selective M3 component touches.

   PRESERVED, by design:
     - Game status colors:   green (confirmed), yellow (tentative), red (needs players)
     - History icon colors:  green (joined),    red (no-show),       yellow (cancelled)
     - The original sport-ball / pin PNG artwork (paths unchanged)
     - All JS, all DOM structure, all routes, all data shape
     - Layout & sizing of components that depended on transparent
       backgrounds (top bar, map-strip overlay, segmented control, etc.)

   ----------------------------------------------------------------
   HOW TO ROLL BACK (two surgical edits):
     1) Delete this file: src/styles-material.css
        (and its synced copy at public/src/styles-material.css)
     2) Remove the matching <link> from app/layout.js
     3) Re-run `npm run dev` (predev syncs assets)
   That reverts everything to the original GameOn! look — no
   other source files were touched to install this design.
   ---------------------------------------------------------------- */


/* ============================================================
   1. Token overrides
      We re-point the existing GameOn CSS variables at a Material 3
      palette. Because nearly every rule in styles.css uses these
      tokens, this single block ripples the new look through all
      surfaces without touching component-level rules.
   ============================================================ */
:root {
  /* Material 3 surface tiers */
  --md-primary:                #1f6f44;
  --md-on-primary:             #ffffff;
  --md-primary-container:      #a7f1c4;
  --md-on-primary-container:   #002111;
  --md-secondary-container:    #d2e8d4;
  --md-on-secondary-container: #0c1f13;
  --md-tertiary-container:     #bee8fb;
  --md-on-tertiary-container:  #001f29;

  /* Reported-game identity. A saturated Pool Blue drawn from the tertiary
     family (the system's cool counterweight to the green primary), deliberately
     outside the status triad so "reported" never reads as a join status.
     --report-accent paints chrome (stripe, pins, tints); --report-accent-ink
     is the text-safe tone for numbers and pill labels. */
  --report-accent:     #0d7da3;
  --report-accent-ink: #0a5f7c;

  /* Weather warning. An amber-orange caution tone kept deliberately rust-warm
     so it never reads as the reserved tentative-yellow of the status triad.
     --weather-accent paints the icon/border/tint; --weather-ink is the
     text-safe rust tone for the chip label. */
  --weather-accent:    #c2620e;
  --weather-ink:       #7c2d12;

  /* The single Confirmed Green. Every "confirmed / checked-in / positive /
     reliable" surface resolves here so the app speaks one green, not five.
     This is the DESIGN.md status-triad green; it repoints the legacy
     --confirmed token (base #0d6040), which previously diverged from the
     game-card stripe (#38b423), map pin (#1e8f3a), and check-in badge
     (#16a34a). */
  --confirmed:         #1e8f3a;

  --md-surface:                  #fbfdf8;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low:    #f5f7f1;
  --md-surface-container:        #eff1ec;
  --md-surface-container-high:   #e9ebe6;
  --md-surface-container-highest:#e3e5e0;

  --md-on-surface:         #181d18;
  --md-on-surface-variant: #414a42;
  --md-outline:            #717971;
  --md-outline-variant:    #c1c8c0;

  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  --md-elev-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.06);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.08);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.12);

  --md-state-hover: rgba(31,111,68,.08);
  --md-state-press: rgba(31,111,68,.12);

  /* Re-point existing GameOn tokens at the M3 palette */
  --bg: var(--md-surface);
  --surface: var(--md-surface-container-low);
  --surface-strong: var(--md-surface-container-lowest);
  --surface-soft: var(--md-surface-container);
  --text: var(--md-on-surface);
  --muted: var(--md-on-surface-variant);
  --line: var(--md-outline-variant);
  --primary: var(--md-primary);
  --primary-strong: #14563a;
  --primary-faint: var(--md-primary-container);
  --radius: var(--md-shape-lg);
  --radius-sm: var(--md-shape-md);
  --shadow: var(--md-elev-3);
  --shadow-sm: var(--md-elev-1);
  --shadow-card: var(--md-elev-1);
  --blur: saturate(1.3) blur(14px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-primary:                #8bd6a6;
    --md-on-primary:             #00391d;
    --md-primary-container:      #00522d;
    --md-on-primary-container:   #a7f1c4;
    --md-secondary-container:    #384b3d;
    --md-on-secondary-container: #d2e8d4;
    --md-tertiary-container:     #214b5c;
    --md-on-tertiary-container:  #bee8fb;

    /* Lifted Pool Blue for dark surfaces; ink rises to a readable tint. */
    --report-accent:     #74d0ef;
    --report-accent-ink: #a9e6f8;

    /* Lifted amber for dark surfaces; ink rises to a readable warm tint. */
    --weather-accent:    #f0a855;
    --weather-ink:       #fde68a;

    /* Confirmed green lifted for dark surfaces so reliability scores and
       reported "positive" labels stay legible; same hue as the light
       #1e8f3a, one tonal step brighter. */
    --confirmed:         #46c47a;

    --md-surface:                  #101410;
    --md-surface-container-lowest: #0b0f0c;
    --md-surface-container-low:    #181d18;
    --md-surface-container:        #1c211d;
    --md-surface-container-high:   #262b27;
    --md-surface-container-highest:#313631;

    --md-on-surface:         #e1e3dd;
    --md-on-surface-variant: #c1c8c0;
    --md-outline:            #8b938a;
    --md-outline-variant:    #414a42;

    --md-state-hover: rgba(167,241,196,.10);
    --md-state-press: rgba(167,241,196,.16);

    --primary-strong: #4ecf88;
  }
}


/* ============================================================
   2. App shell — softer Material background; no body-color changes
   ============================================================ */
.app-shell {
  background:
    radial-gradient(ellipse at 18% 8%, color-mix(in srgb, var(--md-primary) 10%, transparent), transparent 38%),
    radial-gradient(ellipse at 84% 86%, color-mix(in srgb, var(--md-primary) 6%, transparent), transparent 32%),
    var(--md-surface-container);
}
.phone-frame {
  background: var(--md-surface);
  border-radius: 28px;
  /* No visible border — the box-shadow defines the phone-frame's edge.
     A 1px solid border here would create a thin "sliver" between
     full-bleed elements (auth banner, profile hero gradient) and the
     phone-frame's outer edge, because the banner clips at the inner
     border edge and the phone-frame's near-white background shows
     through the 1px border ring. */
  border: 1px solid transparent;
  box-shadow: 0 6px 10px 4px rgba(0,0,0,.10), 0 2px 3px rgba(0,0,0,.12);
  backdrop-filter: none;
}
/* Note: with the transparent phone-frame border above, the existing
   bleed in styles.css for .auth-banner-wrap / .auth-banner /
   .profile-hero is plenty to avoid any sliver. Do not increase those
   margins here — doing so over-scales the banner image (object-fit:
   cover + aspect-ratio enlarges the artwork and shifts the logo
   off-center). Original margins are preserved intentionally. */

@media (max-width: 520px) {
  .phone-frame {
    border-radius: 0;
  }
}


/* ============================================================
   3. Top app bars
      IMPORTANT: do NOT give these an opaque background — they sit
      above .screen which has a brand background image. Painting
      them solid creates a visible white rectangle around the title.
      We keep them transparent and just refresh the typography.
   ============================================================ */
.feed-topbar h2,
.topbar h2,
.detail-header h2 {
  font-weight: 700;
  letter-spacing: -.005em;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--md-on-surface-variant);
  opacity: 1;
}


/* ============================================================
   4. Top-right alert button (notifications)
   ============================================================ */
.top-alert-button {
  width: 44px; height: 44px;
  background: color-mix(in srgb, var(--md-surface-container-high) 92%, transparent);
  border: 0;
  backdrop-filter: var(--blur);
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1),
              background 140ms ease;
}
.top-alert-button:hover { background: var(--md-secondary-container); }
.top-alert-button--expanded {
  width: auto;
  max-width: 180px;
  padding: 0 12px 0 10px;
  gap: 6px;
  display: inline-flex;
  align-items: center;
}
.top-alert-button--expanded .alert-preview {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.alert-count { border: 2px solid var(--md-surface); }


/* ============================================================
   5. Icon buttons
   ============================================================ */
.icon-button {
  width: 40px; height: 40px;
  border-radius: var(--md-shape-full);
  color: var(--md-on-surface);
  border: 0;
  transition: background-color .15s ease;
}
.icon-button:hover { background: var(--md-state-hover); }
.icon-button:active { background: var(--md-state-press); }


/* ============================================================
   6. Search row + filter button — M3 search bar look
   ============================================================ */
.search-row {
  height: 52px;
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container-high);
  border: 0;
  padding: 0 16px;
  box-shadow: var(--md-elev-1);
  gap: 10px;
}
.search-row:focus-within {
  box-shadow: 0 0 0 2px var(--md-primary);
}
.filter-button {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border: 1px solid transparent;
  font-weight: 600;
}
.filter-button.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}
.filter-button span {
  background: var(--md-primary);
  color: var(--md-on-primary);
}


/* ============================================================
   7. Chips (filter row + tag chips) — M3 styling, layout untouched
   ============================================================ */
.chip {
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline);
  background: transparent;
  color: var(--md-on-surface-variant);
  font-weight: 500;
}
.chip:hover { background: var(--md-state-hover); }
.chip.active,
.chip[aria-pressed="true"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}
.tag-chip {
  border-radius: var(--md-shape-lg);
  border: 1px solid var(--md-outline);
  background: transparent;
  color: var(--md-on-surface-variant);
}
.tag-chip.active,
.tag-chip[aria-pressed="true"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}


/* ============================================================
   8. Map strip preview
      DO NOT paint .map-strip-open opaque — it overlays the entire
      map area as a click target. An opaque background hides the map.
   ============================================================ */
.map-strip {
  border-radius: var(--md-shape-lg);
  overflow: hidden;
  box-shadow: var(--md-elev-1);
  border: 1px solid var(--md-outline-variant);
}
.map-strip-open {
  /* deliberately keep transparent — the map needs to show through */
  background: transparent;
}
.map-strip-open .map-copy {
  background: color-mix(in srgb, var(--md-surface) 86%, transparent);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-lg);
  padding: 8px 12px;
  box-shadow: var(--md-elev-1);
  backdrop-filter: var(--blur);
}
.map-strip-open .map-expand {
  color: var(--md-primary);
  font-weight: 700;
}


/* ============================================================
   9. Game card — Material elevation, status stripe preserved
   ============================================================ */
.game-card {
  border-radius: var(--md-shape-lg);
  border: 1px solid transparent;
  background: var(--md-surface-container-low);
  box-shadow: var(--md-elev-1);
  transition: box-shadow .2s ease, transform .12s ease;
}
.game-card:hover { box-shadow: var(--md-elev-2); }
.game-card::before {
  width: 4px;
  border-radius: 0;
  opacity: 1;
}
.game-card h3 {
  margin: 11px 0 7px;
  color: var(--md-on-surface);
  font-family: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
}
.game-card .card-top {
  align-items: flex-start;
}
.meta-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 8px 12px;
  margin-top: 4px;
}
/* Default: secondary metadata. Quiet, scannable, tucked behind the lead. */
.meta-grid span {
  min-width: 0;
  color: color-mix(in srgb, var(--md-on-surface-variant) 70%, var(--md-surface));
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.3;
}
.meta-grid span svg {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--md-on-surface-variant) 60%, var(--md-surface));
}
/* Supporting-primary: joined count. One step louder than secondary, but not
   the lead. Same DM Sans body, dialed up in weight and ink. */
.meta-grid .meta-primary {
  color: var(--md-on-surface);
  font-size: .82rem;
  font-weight: 700;
}
.meta-grid .meta-primary svg {
  color: color-mix(in srgb, var(--md-on-surface) 78%, var(--md-on-surface-variant));
}
/* Lead row: WHEN. Per DESIGN.md's "Numerals-Are-Display Rule", the date
   + start-time carry display-scale Barlow Condensed. The end-time fades
   to a DM Sans sub-line below so the start-time leads cleanly without
   the "to 4:00 PM" tail competing on the same baseline. */
.meta-grid .meta-when {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 8px;
  row-gap: 1px;
  color: var(--md-on-surface);
}
.meta-grid .meta-when > svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--md-primary);
}
.meta-grid .meta-when strong {
  flex: 1 1 0;
  min-width: 0;
  font-family: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.04;
  color: var(--md-on-surface);
}
.meta-grid .meta-when-tail {
  flex-basis: 100%;
  padding-left: 24px;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  color: color-mix(in srgb, var(--md-on-surface-variant) 62%, var(--md-surface));
  white-space: nowrap;
}
/* Card-footer tertiary: the deepest tier. "Needs 8 · 9 spots · 0 maybe"
   is at-a-glance metadata of metadata; pushed back so it never competes with
   the meta-grid. */
.card-footer {
  margin-top: 8px;
}
.card-attr-row {
  margin-top: -2px;
}
.progress {
  background: var(--md-surface-container-high);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.progress > span { border-radius: 999px; }
.card-share {
  border-radius: 999px;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border: 0;
}
.card-share:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.game-card-skeleton {
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
}
.card-attr-row {
  gap: 5px;
  margin-bottom: 9px;
}
.card-attr-tag {
  min-height: 23px;
  padding: 0 8px;
  border-color: color-mix(in srgb, var(--md-outline-variant) 78%, transparent);
  border-radius: var(--md-shape-lg);
  color: var(--md-on-surface-variant);
  background: color-mix(in srgb, var(--md-surface-container-high) 72%, transparent);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0;
}
.card-attr-tag svg {
  color: color-mix(in srgb, var(--md-on-surface-variant) 76%, var(--md-surface));
}
.card-attr-weather {
  color: var(--weather-ink);
  font-weight: 760;
}
.card-footer,
.reported-card-footer {
  color: color-mix(in srgb, var(--md-on-surface-variant) 60%, var(--md-surface));
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 0;
}
.card-footer .card-footer-primary {
  color: color-mix(in srgb, var(--md-on-surface) 78%, var(--md-on-surface-variant));
  font-weight: 620;
}
.reported-card-footer span {
  border: 1px solid color-mix(in srgb, var(--report-accent) 18%, var(--md-outline-variant));
  border-radius: var(--md-shape-lg);
  color: var(--report-accent-ink);
  background: color-mix(in srgb, var(--report-accent) 8%, var(--md-surface-container-low));
}
.reported-card-footer span:first-child {
  color: var(--md-on-surface);
  font-weight: 780;
}


/* ============================================================
   10. Sport pill — restyled.
       Card sport-pill now paints the original location-pin PNG
       artwork (assets/pins/X.png) over the existing <img>, so the
       cards match the map's pin look. The existing IMG element
       is hidden via CSS — no JS changes required.
   ============================================================ */
.sport-pill {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border: 0;
  border-radius: var(--md-shape-lg);
  height: 30px;
  padding: 0 12px 0 4px;
  font-weight: 600;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sport-pill .sport-icon {
  width: 24px; height: 30px;
  position: relative;
  background: transparent;
  border-radius: 0;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}
.sport-pill .sport-icon > img { display: none; }
.sport-pill .sport-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.sport-pill .sport-icon.sport-basketball::after { background-image: url('/assets/pins/basketball.png'); }
.sport-pill .sport-icon.sport-soccer::after     { background-image: url('/assets/pins/soccer.png'); }
.sport-pill .sport-icon.sport-football::after   { background-image: url('/assets/pins/football.png'); }
.sport-pill .sport-icon.sport-tennis::after     { background-image: url('/assets/pins/tennis.png'); }
.sport-pill .sport-icon.sport-baseball::after   { background-image: url('/assets/pins/baseball.png'); }
.sport-pill .sport-icon.sport-volleyball::after { background-image: url('/assets/pins/volleyball.png'); }
.sport-pill .sport-icon.sport-frisbee::after    { background-image: url('/assets/pins/frisbee.png'); }
.sport-pill .sport-icon.sport-pickleball::after { background-image: url('/assets/pins/pickleball.png'); }
.sport-pill .sport-icon.sport-yoga::after       { background-image: url('/assets/pins/yoga.png'); }
.sport-pill .sport-icon.sport-chess::after      { background-image: url('/assets/pins/chess.png'); }
.sport-pill .sport-icon.sport-cards::after      { background-image: url('/assets/pins/cards.png'); }
.sport-pill .sport-icon.sport-custom::after     { background-image: url('/assets/pins/custom.png'); }


/* ============================================================
   11. Status badge — M3 assist-chip look; semantics preserved
   ============================================================ */
.status-badge {
  height: 24px;
  padding: 0 10px;
  border-radius: var(--md-shape-lg);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 0;
}
.status-badge.reported {
  background: color-mix(in srgb, var(--report-accent) 9%, var(--md-surface-container-low));
}


/* ============================================================
   12. Map pins (Leaflet) — soft status halo behind original PNG
   ============================================================ */
.map-pin.image-marker {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.28));
}
.map-pin.image-marker.expanded::before {
  content: "";
  position: absolute;
  left: 50%; top: 30%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  opacity: .55;
  filter: blur(8px);
  pointer-events: none;
}
.map-pin.image-marker.mini::before {
  content: "";
  position: absolute;
  left: 50%; top: 32%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  opacity: .55;
  filter: blur(5px);
  pointer-events: none;
}
.map-pin.image-marker.status-confirmed::before       { background: #1e8f3a; }
.map-pin.image-marker.status-maybe-confirmed::before { background: #ffc400; }
.map-pin.image-marker.status-short::before           { background: #c62828; }


/* ============================================================
   13. Info panels — Material card with subtle dividers
   ============================================================ */
.info-panel {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  padding: 4px 12px;
  box-shadow: none;
}
.info-panel > div {
  padding: 12px 4px;
}
.info-panel > div + div { border-top: 1px solid var(--md-outline-variant); }


/* ============================================================
   14. Stats row + check-in hero (detail screen)
   ============================================================ */
.stats-row {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  box-shadow: none;
}
.checkin-hero,
.detail-hero-card {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: var(--md-shape-lg);
  border: 0;
}


/* ============================================================
   15. Action pills (detail screen) — M3 buttons
   ============================================================ */
.action-pill {
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border: 0;
  font-weight: 600;
}
.action-pill.active,
.action-pill.action-checkin.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.action-pill.action-join.active {
  background: var(--md-primary);
  color: var(--md-on-primary);
}


/* ============================================================
   16. Floating Maybe/Join FABs
       Leave button uses the M3 error palette — destructive action.
   ============================================================ */
.game-actions-fab { gap: 12px; }
.game-fab {
  border-radius: var(--md-shape-lg);
  border: 0;
  font-weight: 600;
  /* A single soft drop. The previous surface-colored spread rings rendered as
     a double ring around the pill, so they were removed. */
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16);
}
.game-fab-maybe {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  font-weight: 600;
  min-height: 38px;
  padding: 0 14px;
  box-shadow: var(--md-elev-1);
}
.game-fab-maybe.active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.game-fab-join { background: var(--md-primary); color: var(--md-on-primary); }
.game-fab-leave {
  background: linear-gradient(135deg, #ba1a1a, #93000a);
  color: #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16);
}


/* ============================================================
   17. Create FAB — extended M3 FAB
   ============================================================ */
.create-fab {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: var(--md-shape-lg);
  border: 0;
  /* Create is the centerpiece FAB. A stronger brand-tinted lift than the
     previous 24%/8px micro-shadow: deeper mint halo with more bleed so the
     button reads as the lifted lead in the bottom-right stack, clearly
     elevated above the game cards underneath. */
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--md-primary) 34%, transparent),
    0 1px 3px color-mix(in srgb, var(--md-primary) 22%, transparent);
  text-transform: none;
  letter-spacing: 0;
  min-width: 158px;
  padding-left: 22px;
  padding-right: 24px;
  transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.create-actions-fab {
  /* Slightly tighter stack so Create and Report Game read as a paired
     primary+secondary action, not two independent floaters. */
  gap: 9px;
}

.create-fab:hover,
.create-fab:focus-within {
  background: color-mix(in srgb, var(--md-primary) 14%, var(--md-primary-container)) !important;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--md-primary) 30%, transparent) !important;
  filter: none;
}
.create-fab:active {
  transform: scale(0.97);
}
.create-fab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-primary) 48%, transparent);
  outline-offset: 2px;
}
.create-fab:disabled,
.create-fab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Report Game is the essential-but-secondary partner to Create in the
   bottom-right FAB stack. It shares Create's 16px corner so the floating
   pair reads as one shape language. The surface uses the M3
   tertiary-container token (Pool Blue), the canonical "reported-game
   family" surface in the palette — same hue as the reported-game stripe,
   one tonal step lighter so the pill stays comfortable behind the
   on-tertiary-container ink. Dropped the previous ad-hoc Pool Blue
   color-mix and the tinted border; the saturated fill carries the
   identity on its own. */
.report-game-fab {
  border-radius: var(--md-shape-lg);
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  color: var(--md-on-tertiary-container);
  background: var(--md-tertiary-container);
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Map icon keeps full Pool Blue saturation. The icon carries the
   reported-game identity; the surface family carries the same hue at
   lower lightness so the pill reads as one cohesive blue surface. */
.report-game-fab > svg {
  color: var(--report-accent);
}
/* In the floating `.create-actions-fab` stack (the home-feed bottom-right
   pair), each button sizes to its own content so Create can be visually
   wider than Report. The previous `width: 100%` legacy was for an inline
   grid layout that no longer exists — keeping it stretched both buttons
   to the same width and undid Create's centerpiece hierarchy. */
.create-fab,
.report-game-fab {
  justify-content: center;
}
.create-fab {
  min-height: 48px;
  font-weight: 780;
}
.report-game-fab:hover {
  background: color-mix(in srgb, var(--report-accent) 14%, var(--md-tertiary-container));
}
.report-game-fab:active {
  transform: scale(0.97);
}
.report-game-fab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--report-accent) 46%, transparent);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--report-accent) 14%, var(--md-tertiary-container));
}
.report-game-fab:disabled,
.report-game-fab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.feed-list-header {
  align-items: center;
}
.feed-list-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.report-inline-button,
.create-inline-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--report-accent) 20%, var(--md-outline-variant));
  border-radius: var(--md-shape-lg);
  color: color-mix(in srgb, var(--report-accent-ink) 88%, var(--md-on-surface-variant));
  background: color-mix(in srgb, var(--report-accent) 6%, var(--md-surface-container-high));
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: 0;
  white-space: nowrap;
}
.create-inline-button {
  border-color: transparent;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  font-weight: 760;
}
.report-inline-button:hover,
.report-inline-button:focus-visible {
  background: color-mix(in srgb, var(--report-accent) 11%, var(--md-surface-container-high));
  border-color: color-mix(in srgb, var(--report-accent) 32%, var(--md-outline-variant));
}
.create-inline-button:hover,
.create-inline-button:focus-visible {
  background: color-mix(in srgb, var(--md-primary) 18%, var(--md-primary-container));
}


/* ============================================================
   18. Bottom navigation — M3 active indicator pill via pseudo
   ============================================================ */
.bottom-nav {
  background: color-mix(in srgb, var(--md-surface-container) 96%, transparent);
  border-top: 1px solid var(--md-outline-variant);
  backdrop-filter: var(--blur);
}
.bottom-nav button {
  color: var(--md-on-surface-variant);
  background: transparent;
  border-radius: 0;
  font-weight: 500;
}
.bottom-nav button::before {
  content: "";
  position: absolute;
  top: 3px; left: 50%;
  width: 64px; height: 30px;
  transform: translateX(-50%);
  border-radius: var(--md-shape-lg);
  background: transparent;
  transition: background-color .2s ease;
  z-index: 0;
}
.bottom-nav .active::before { background: var(--md-secondary-container); }
.bottom-nav button > * { position: relative; z-index: 1; }
.bottom-nav .active {
  color: var(--md-on-surface);
  background: transparent;
  font-weight: 600;
}
.bottom-nav .active svg { color: var(--md-on-secondary-container); }
.nav-badge {
  background: #c62828;
  border: 2px solid var(--md-surface-container);
}


/* ============================================================
   19. Profile + reliability cards
       Rating card uses a dark gradient so the white text from the
       original styles.css stays high-contrast (the original used
       a green-to-blue gradient — we keep that intent with the
       Material palette).
   ============================================================ */
.profile-avatar {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: var(--md-elev-2);
}
.profile-hero p { color: rgba(255, 255, 255, 0.82); }
.rating-card {
  background: linear-gradient(135deg, #14563a 0%, #1f4761 100%);
  color: #ffffff;
  border-radius: var(--md-shape-lg);
  border: 0;
}
.rating-card strong { color: #ffffff; }
.rating-card .eyebrow { color: rgba(255, 255, 255, 0.78); }
.rating-card p { color: rgba(255, 255, 255, 0.86); }
@media (prefers-color-scheme: dark) {
  .rating-card {
    background: linear-gradient(135deg, #0f3a26 0%, #15324b 100%);
  }
}
.profile-grid > div {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
}


/* ============================================================
   20. History entry button + history cards
   ============================================================ */
.history-entry-button {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  color: var(--md-on-surface);
}
.history-card {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  box-shadow: none;
}


/* ============================================================
   21. Inbox / message threads
   ============================================================ */
.inbox-message { border-radius: var(--md-shape-lg); }
.inbox-message + .inbox-message { border-radius: 0; }
.inbox-message:hover { background: var(--md-state-hover); }
/* Calm unread treatment: a subtle primary wash + accent dot, not the old
   heavy secondary-container fill that made every unread row shout. */
.inbox-message.unread { background: color-mix(in srgb, var(--md-primary) 7%, transparent); }
/* Pool Blue initials avatar — the design system's "inbox / participant
   avatar" surface. Same hue carries every sender; identity comes from the
   initials, not a per-row color flip. */
.inbox-avatar {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.inbox-unread-count { background: var(--md-primary); color: var(--md-on-primary); }


/* ============================================================
   22. Share sheet
   ============================================================ */
.share-sheet {
  background: var(--md-surface-container);
  border-top-left-radius: var(--md-shape-lg);
  border-top-right-radius: var(--md-shape-lg);
  border: 0;
}
.sheet-handle { background: var(--md-outline); }


/* ============================================================
   23. Toast / snackbar — M3 inverse surface
   ============================================================ */
.toast {
  background: #313330;
  color: #f1f1eb;
  border: 0;
  border-radius: var(--md-shape-lg);
  box-shadow: var(--md-elev-3);
}
/* The toast is an M3 inverse (dark) surface, so its controls need inverse
   colors. The base styles give the action a mint pill fill (--primary-faint),
   which left mint text on a mint background, illegible. Drop the fill so the
   mint "Undo" reads as a snackbar text button, and lighten the dismiss control
   so it isn't dark-on-dark in light mode. These literals are theme-independent
   on purpose: the toast surface is the same dark tone in light and dark mode. */
.toast-action {
  color: #a7f1c4;
  background: transparent;
}
.toast-action:hover {
  background: color-mix(in srgb, #a7f1c4 16%, transparent);
}
.toast-dismiss { color: #c7cabf; }
.toast-dismiss:hover {
  color: #f1f1eb;
  background: color-mix(in srgb, #f1f1eb 14%, transparent);
}


/* ============================================================
   24. Notes & empty states
   ============================================================ */
.notes,
.empty-state {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
}


/* ============================================================
   24b. Create and report forms, hierarchy pass
   ============================================================ */
.form-screen {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--md-primary) 5%, transparent), transparent 140px),
    var(--md-surface);
}
.form-screen .detail-header h2 {
  color: var(--md-on-surface);
  font-family: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0;
}
/* Form screen auto-numbers its sections via CSS counters so the user reads
   the form as an ordered path (01 → 02 → 03 …). Reset at the screen,
   increment per section, render the counter through a ::before pill above
   the elevated section title (the legacy `.eyebrow` slot). */
.form-screen {
  counter-reset: form-section;
}
.form-section {
  gap: 9px;
  margin: 18px 0 14px;
  padding: 16px 15px 15px;
  border-color: color-mix(in srgb, var(--md-outline-variant) 84%, transparent);
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container-low);
  box-shadow: none;
  counter-increment: form-section;
}
/* Promote the legacy small-cap eyebrow into a proper section title:
   Barlow Condensed Title scale (per DESIGN.md §3), sentence case, on-surface
   ink. Each section gets a "01" rail label above it via ::before so the
   ordered path is felt without numbering being shouty. */
.form-section > .eyebrow {
  position: relative;
  display: block;
  margin: 0 0 4px;
  padding-top: 16px;
  color: var(--md-on-surface);
  font-family: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-transform: none;
}
.form-section > .eyebrow::before {
  content: counter(form-section, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  color: color-mix(in srgb, var(--md-primary) 72%, var(--md-on-surface-variant));
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
/* Sections marked `data-optional="true"` (Create → Options, Report →
   Details) get a muted ink + an "OPTIONAL" tag on the rail label, so the
   spine of the form reads as required and the advanced bits sit visibly
   apart. An explicit attribute beats :last-of-type because the Edit
   screen's lone section is not optional. */
.form-section[data-optional="true"] > .eyebrow {
  color: color-mix(in srgb, var(--md-on-surface) 78%, var(--md-on-surface-variant));
}
.form-section[data-optional="true"] > .eyebrow::before {
  content: counter(form-section, decimal-leading-zero) " \00b7 OPTIONAL";
  color: color-mix(in srgb, var(--md-on-surface-variant) 72%, var(--md-surface));
}
/* Recurring panel keeps the legacy tiny eyebrow — it sits inline as a
   sub-heading inside a `.form-section`, not as a section title itself. */
.recurring-panel .eyebrow {
  color: color-mix(in srgb, var(--md-primary) 72%, var(--md-on-surface-variant));
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .09em;
}
.form-section label,
.stepper-cell > label,
.report-schedule-grid > div > label {
  color: var(--md-on-surface);
  font-size: .8rem;
  font-weight: 720;
}
.form-section input,
.form-section select,
.form-section textarea {
  background: var(--md-surface-container-lowest);
  border-color: var(--md-outline-variant);
}
.form-section textarea {
  min-height: 94px;
}
.report-explainer {
  grid-template-columns: 34px 1fr;
  gap: 11px;
  padding: 12px 13px;
  border-color: color-mix(in srgb, var(--report-accent) 22%, var(--md-outline-variant));
  border-radius: var(--md-shape-lg);
  background: color-mix(in srgb, var(--report-accent) 6%, var(--md-surface-container-low));
}
.report-explainer-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--md-shape-full);
}
.report-explainer p {
  color: var(--md-on-surface);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.38;
}
.recurring-panel {
  margin: 2px 0 6px;
  padding: 13px;
  border-color: color-mix(in srgb, var(--md-primary) 18%, var(--md-outline-variant));
  border-radius: var(--md-shape-lg);
  background: color-mix(in srgb, var(--md-primary) 5%, var(--md-surface-container-lowest));
}
.recurring-panel h3 {
  color: var(--md-on-surface);
  font-family: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0;
}
.weekday-grid button {
  border-color: var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface-variant);
  font-weight: 680;
}
.weekday-grid button.active {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.number-stepper > .stepper-btn {
  background: var(--md-surface-container-high);
  border-color: var(--md-outline-variant);
}
.number-stepper > input {
  background: var(--md-surface-container-lowest);
}
.field-help,
.optional-label {
  color: color-mix(in srgb, var(--md-on-surface-variant) 74%, var(--md-surface));
  font-weight: 500;
}
.form-actions-row > .primary.wide {
  min-height: 48px;
  font-weight: 760;
  /* Theme-aware ink so the mint dark-mode primary doesn't render white-on-
     mint (a11y contrast fail). In light mode this resolves to #ffffff, so
     no visible change to the existing dark-green primary. */
  color: var(--md-on-primary);
}
.form-actions-row > .secondary.wide {
  min-height: 48px;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-high);
}
/* Create-form footer: Post game (primary) on top, Save as template
   (secondary) below. Same height + shared 16px corner so they read as
   a single decision pair, not a primary CTA with a tacked-on ghost. */
.create-form-actions-row {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 2px;
  background: none;
  box-shadow: none;
}
/* Specificity-bumped selectors (3+ classes) so they win over the
   shared `.form-actions-row > .primary.wide` / `.secondary.wide` rules
   higher in this file. Without the extra `.wide` / `.secondary.wide`
   here, the form-row defaults (48px min-height, muted text on the
   secondary) leak through and break the matched pair. */
.create-form-actions-row > .primary.wide,
.create-form-actions-row > .save-as-template.wide {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  justify-content: center;
  gap: 8px;
  border-radius: var(--md-shape-lg);
}
.create-form-actions-row > .primary.wide {
  order: 1;
  color: var(--md-on-primary);
  font-size: 0.94rem;
  font-weight: 760;
  letter-spacing: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--md-primary) 22%, transparent);
  transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.create-form-actions-row > .primary.wide:hover {
  box-shadow: 0 5px 18px color-mix(in srgb, var(--md-primary) 30%, transparent);
}
.create-form-actions-row > .primary.wide:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-primary) 48%, transparent);
  outline-offset: 2px;
}
.create-form-actions-row > .primary.wide:disabled,
.create-form-actions-row > .primary.wide[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.create-form-actions-row > .secondary.save-as-template.wide {
  order: 2;
  flex: 1 1 auto;
  padding: 0 16px;
  border: 0;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  font-size: 0.86rem;
  font-weight: 640;
  letter-spacing: 0;
  transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1),
              color 160ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.create-form-actions-row > .secondary.save-as-template.wide:hover {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}
.create-form-actions-row > .secondary.save-as-template.wide:active {
  transform: scale(0.985);
}
.create-form-actions-row > .secondary.save-as-template.wide:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-primary) 44%, transparent);
  outline-offset: 2px;
}
.create-form-actions-row > .secondary.save-as-template.wide svg {
  flex-shrink: 0;
  opacity: 0.84;
}


/* ============================================================
   25. Participants
   ============================================================ */
.participant-card {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
}
.participant-card.is-you {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-color: transparent;
}
.participant-avatar {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.you-badge {
  background: var(--md-primary);
  color: var(--md-on-primary);
}


/* ============================================================
   26. Tool grid (organizer tools)
   ============================================================ */
.tool-grid button {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border: 0;
  border-radius: var(--md-shape-lg);
}
.tool-grid button:hover { background: var(--md-secondary-container); }


/* ============================================================
   27. Input focus ring — drawn INSIDE the input via inset
       box-shadow so it cannot be clipped by parent overflow.
       The auth-form has overflow:auto and zero horizontal
       padding; an outline (which always paints outside the
       element) would get chopped on the left/right edges.
       inset box-shadow stays inside the element's box.
   ============================================================ */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--md-primary);
  border-color: var(--md-primary);
}


/* ============================================================
   28. Auth links — dark-mode contrast bump
       "Forgot password?" and "How GameOn! works" were too dim
       in dark mode against the auth-card brand background.
       Light mode is intentionally untouched.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .forgot-password-link,
  .auth-tutorial-link {
    color: #bdf0d2;
    text-decoration-color: color-mix(in srgb, #bdf0d2 70%, transparent);
  }
  .forgot-password-link:hover,
  .forgot-password-link:focus-visible,
  .auth-tutorial-link:hover,
  .auth-tutorial-link:focus-visible {
    color: #d9f7e3;
    text-decoration-color: #d9f7e3;
  }
}


/* ============================================================
   29. Settings — alert toggle secondary text
       Existing rule in styles.css targets the heading via
       `> span > :first-child`, but the heading is an unwrapped
       text node — so :first-child actually matches the <small>
       and applies heading weight/size to the description. We
       use :first-child + :last-child + matching class chain to
       beat its specificity (0,4,1) and dial the description
       back to a clearly-secondary type style.
   ============================================================ */
.notification-row > span,
.alerts-channel-panel .toggle-row.notification-row > span {
  gap: 2px;
}
.alerts-channel-panel .toggle-row.notification-row > span > small:last-child,
.alerts-channel-panel .toggle-row.notification-row > span > small:first-child,
.notification-row > span > small:last-child,
.notification-row > span > small:first-child,
.notification-game-list button small {
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--md-on-surface-variant) 72%, var(--md-surface));
}
/* Lighten standalone setting-note paragraphs for consistency. */
.setting-note {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  color: color-mix(in srgb, var(--md-on-surface-variant) 72%, var(--md-surface));
}


/* ============================================================
   30. Auth — "Continue with Google" button + divider
       M3 outlined button conventions, brand-true multi-color G,
       neutral state layer (no green tint — wrong for a Google
       button), 48px touch target matching the primary CTA, and
       a quieter "or continue with email" divider above the
       email form so the OAuth path reads as the fast lane.
   ============================================================ */
.google-auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  margin: 0 0 16px;
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition:
    background-color .18s cubic-bezier(0.2, 0, 0, 1),
    border-color .18s cubic-bezier(0.2, 0, 0, 1),
    box-shadow .18s cubic-bezier(0.2, 0, 0, 1),
    transform .12s cubic-bezier(0.2, 0, 0, 1);
}
.google-auth-button:hover {
  background: color-mix(in srgb, var(--md-on-surface) 5%, var(--md-surface-container-lowest));
  border-color: color-mix(in srgb, var(--md-on-surface) 24%, var(--md-outline-variant));
  box-shadow: var(--md-elev-1);
}
.google-auth-button:active {
  background: color-mix(in srgb, var(--md-on-surface) 10%, var(--md-surface-container-lowest));
  transform: translateY(1px);
}
.google-auth-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-primary) 42%, transparent);
  outline-offset: 2px;
}
.google-auth-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.google-auth-mark {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: block;
}
.google-auth-label {
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .google-auth-button {
    background: var(--md-surface-container-low);
    border-color: var(--md-outline-variant);
  }
  .google-auth-button:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, var(--md-surface-container-low));
    border-color: color-mix(in srgb, var(--md-on-surface) 32%, var(--md-outline-variant));
  }
  .google-auth-button:active {
    background: color-mix(in srgb, var(--md-on-surface) 14%, var(--md-surface-container-low));
  }
}

/* Divider: thinner hairline, lowercase "or", regular weight.
   Sits between the OAuth button (above) and the email form (below). */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 18px;
  color: var(--md-on-surface-variant);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--md-outline-variant);
}


/* ============================================================
   31. Card check-in badge — preserved status meaning
   ============================================================ */
.card-checkin-badge {
  background: color-mix(in srgb, #1e8f3a 18%, var(--md-surface));
  color: #14563a;
  border-radius: var(--md-shape-lg);
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .card-checkin-badge { color: #a7f1c4; }
}


/* ============================================================
   32. Green harmonization — one Confirmed Green
   ------------------------------------------------------------
   The reskin left "confirmed / checked-in / positive" rendered in
   several different greens depending on surface. This section pulls
   every one of them onto the DESIGN.md Confirmed Green (#1e8f3a),
   so the status signal reads as a single colour across the app.
   The deep brand green (#14563a) and the mint container family
   (#a7f1c4 / #d2e8d4) are unchanged — only the saturated
   "positive status" greens are unified here.
   ============================================================ */

/* Game-card status stripe. Base set this accent to a brighter grass
   green (#38b423); DESIGN.md names the stripe as Confirmed Green, so
   it should match the map pin exactly. */
.game-card.status-confirmed { --game-status-accent: #1e8f3a; }

/* Map-pin label rings (mini + expanded) were also #38b423. */
.map-pin.mini.image-marker.status-confirmed .pin-label {
  box-shadow: inset 0 0 0 3px #1e8f3a, 0 3px 8px rgba(17, 24, 39, 0.12);
}
.map-pin.expanded.image-marker.status-confirmed .pin-label {
  box-shadow: inset 0 0 0 4px #1e8f3a, 0 4px 12px rgba(17, 24, 39, 0.12);
}

/* Check-in badge: the material reskin already moved the fill to
   #1e8f3a, but the base border + glow were still #16a34a, so a single
   badge mixed two greens. Finish the job. */
.card-checkin-badge {
  border-color: color-mix(in srgb, #1e8f3a 40%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, #1e8f3a 16%, transparent);
}

/* Confirmed hint (game detail) + tutorial status chip were #16a34a /
   #22c55e. Re-tint their fill + border onto the Confirmed Green; the
   deep-green text colours already read as on-brand. */
.confirm-hint.confirmed {
  background: color-mix(in srgb, #1e8f3a 12%, var(--md-surface-container-low));
  border-color: color-mix(in srgb, #1e8f3a 32%, transparent);
}
.tutorial-illo-status.confirmed {
  background: color-mix(in srgb, #1e8f3a 16%, var(--md-surface-container-low));
  border-color: color-mix(in srgb, #1e8f3a 34%, transparent);
}
@media (prefers-color-scheme: dark) {
  .confirm-hint.confirmed {
    background: color-mix(in srgb, #1e8f3a 20%, var(--md-surface-container-low));
    border-color: color-mix(in srgb, #1e8f3a 42%, transparent);
  }
}

/* Profile hero banner. Base froze this on the pre-reskin deep green
   (#0d6040), so it clashed with the rating card directly beneath it
   (#14563a). Re-anchor the hero on the same green-to-blue brand
   gradient as the rating card; the court-line grid overlay is
   preserved. */
.profile-hero {
  background:
    linear-gradient(145deg, #14563a 0%, #1f4761 100%),
    url("data:image/svg+xml,%3Csvg width='220' height='220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 58h220M0 116h220M0 174h220M58 0v220M116 0v220M174 0v220' stroke='%23ffffff' stroke-opacity='.10' stroke-width='6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .profile-hero {
    background:
      linear-gradient(145deg, #0f3a26 0%, #15324b 100%),
      url("data:image/svg+xml,%3Csvg width='220' height='220' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 58h220M0 116h220M0 174h220M58 0v220M116 0v220M174 0v220' stroke='%23ffffff' stroke-opacity='.10' stroke-width='6'/%3E%3C/svg%3E");
  }
}


/* ============================================================
   NOTE on what was intentionally NOT overridden:
     - .auth-card / .auth-form  (kept original to avoid clipping
       the segmented Sign-up/Sign-in toggle on tall signup forms)
     - .segmented               (kept original layout — overflow
       and grid behavior intact)
     - .toggle                  (kept original switch component)
     - input/select/textarea    (kept original padding to keep
       the signup form within visible height)
     - .topbar / .detail-header (kept transparent — opaque bg
       creates a visible white rectangle around titles)
     - .map-strip-open          (kept transparent — opaque bg
       hides the map underneath)
   ============================================================ */