/* Lost Postcard — player web styles. Layout + light theming.
   Real custom fonts (Bungee / Special Elite / Inter) land at step 7. */

:root {
  /* Departure Lounge palette — mirror of DesignSystem/Colors.swift §4. */
  --cream:         #F4ECD8;
  --cream-warm:    #ECDFC2;
  --ink-navy:      #1A2238;
  --ink-faded:     #4A5468;
  --stamp-red:     #C8453C;
  --stamp-teal:    #2A8B8E;
  --stamp-mustard: #D4A03C;
  --airmail-blue:  #3B6FA8;
  --sunset-orange: #E68B5F;
  --midnight:      #0E1426;

  /* Travel-postcard palette extension (mirror in DesignSystem/Colors.swift). */
  --bougainvillea: #D86A85;
  --palm-green:    #5C8E5A;
  --aegean:        #2A5780;
  --sand:          #C9A876;

  /* Brand burnt orange — greetings card backdrop, truth pin on maps. */
  --burnt-orange:  #BF5F2D;

  --font-display: ui-serif, "New York", Georgia, "Times New Roman", Times, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-navy);
  min-height: 100vh;
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 18% 24%, rgba(26,34,56,0.045) 0 1px, transparent 1.4px),
    radial-gradient(circle at 73% 71%, rgba(26,34,56,0.035) 0 1px, transparent 1.4px),
    radial-gradient(circle at 38% 81%, rgba(200,69,60,0.04)  0 1px, transparent 1.4px),
    linear-gradient(160deg, var(--cream) 0%, var(--cream-warm) 100%);
  background-size: 28px 28px, 36px 36px, 44px 44px, 100% 100%;
  background-attachment: fixed;
}

main, .screen, .join, .home { padding: 24px; max-width: 560px; margin: 0 auto; }

.screen { display: none; }
body[data-screen="loading"]      .screen[data-screen="loading"],
body[data-screen="no-token"]     .screen[data-screen="no-token"],
body[data-screen="lobby"]        .screen[data-screen="lobby"],
body[data-screen="arming"]       .screen[data-screen="arming"],
body[data-screen="get-ready"]    .screen[data-screen="get-ready"],
body[data-screen="guess-easy"]   .screen[data-screen="guess-easy"],
body[data-screen="guess-medium"] .screen[data-screen="guess-medium"],
body[data-screen="guess-hard"]   .screen[data-screen="guess-hard"],
body[data-screen="submitted"]    .screen[data-screen="submitted"],
body[data-screen="round-result"] .screen[data-screen="round-result"],
body[data-screen="leaderboard"]  .screen[data-screen="leaderboard"],
body[data-screen="final"]        .screen[data-screen="final"],
body[data-screen="abandoned"]    .screen[data-screen="abandoned"] { display: block; }

h1, h2, .home__title, .arming__countdown, .lobby__header h1,
.join__code, .get-ready__round, .result__truth, .final__winner {
  font-family: var(--font-display);
}

h1 { font-size: 56px; font-weight: 900; letter-spacing: 0.02em; margin: 0; line-height: 1.05; }
h2 { font-size: 32px; font-weight: 800; letter-spacing: 0.02em; margin: 8px 0 16px; }

.muted { color: var(--ink-faded); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 8px; }

/* Form fields */
.field { border: none; padding: 0; margin: 0 0 24px; }
.field__label { display: block; color: var(--ink-faded); font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; }
input[type="text"], input[type="number"] {
  width: 100%; padding: 16px 18px;
  font-size: 22px; font-family: var(--font-body); color: var(--ink-navy);
  background: var(--cream-warm);
  border: 2px solid var(--ink-navy);
  border-radius: 6px;
  appearance: none; -webkit-appearance: none;
  outline: none;
}
input[type="text"]:focus, input[type="number"]:focus {
  outline: none;
  border-color: var(--burnt-orange);
}

/* Pickers */
.picker { display: flex; flex-wrap: wrap; gap: 10px; }
.picker__option {
  appearance: none;
  background: var(--cream-warm); color: var(--ink-navy);
  border: 2px solid var(--ink-navy); border-radius: 6px;
  padding: 12px 18px;
  font-size: 16px; font-family: inherit; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: transform 80ms ease, color 120ms ease, background-color 120ms ease;
}
.picker__option:active { transform: scale(0.97); }
.picker__option.is-selected { background: var(--ink-navy); color: var(--cream); }

/* Extra breathing room above the icon + color picker fieldsets so they
   don't crowd the name input above. */
.join__form fieldset.field { margin-top: 16px; }

.picker--icons .picker__option--icon {
  width: 56px; height: 56px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-faded);
}
.picker--icons .picker__option--icon.is-selected {
  background: var(--cream); color: var(--ink-navy);
  border-color: var(--ink-navy);
}
.icon-svg { width: 32px; height: 32px; display: block; fill: currentColor; }
.picker--icons .icon-svg { width: 28px; height: 28px; }

.picker--colors .picker__option--color {
  width: 56px; height: 56px; padding: 0;
  background: var(--swatch);
  border-radius: 50%;
}
.picker--colors .picker__option--color.is-selected {
  outline: 3px solid var(--ink-navy); outline-offset: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Buttons */
/* Buttons — mirror of iOS IOSPostcardButtonStyle.
   Serif heavy label, cream inner stroke inset 3px, soft drop shadow,
   0.97 press-scale. Variants: .primary (stamp-red), .download (ink-navy),
   .secondary (outlined ink-navy for cancel-style). */
.primary, .secondary, .download {
  position: relative;
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 16px 32px;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  border-radius: 12px; cursor: pointer;
  border: none;
  margin-bottom: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.primary::before, .download::before {
  content: ""; position: absolute; inset: 3px;
  border: 1.5px solid rgba(244, 236, 216, 0.32);
  border-radius: 9px;
  pointer-events: none;
}
.primary  { background: var(--stamp-red); color: var(--cream); box-shadow: 0 4px 8px rgba(0,0,0,0.18); }
.download { background: var(--ink-navy);  color: var(--cream); box-shadow: 0 4px 8px rgba(0,0,0,0.18); }
.secondary {
  background: transparent; color: var(--ink-navy);
  border: 2px solid var(--ink-navy);
  padding: 14px 30px;  /* compensate for the 2px border so heights match */
}

.primary:active, .download:active {
  transform: scale(0.97);
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}
.secondary:active { transform: scale(0.97); }

.primary:disabled, .download:disabled, .secondary:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.primary:disabled:active, .download:disabled:active, .secondary:disabled:active {
  transform: none;
}

.download svg { width: 22px; height: 22px; flex: 0 0 auto; }

.error {
  background: var(--stamp-red); color: var(--cream);
  padding: 12px 16px; border-radius: 6px;
  margin: 16px 0; font-weight: 600;
  position: fixed; left: 24px; right: 24px; bottom: 24px;
  text-align: center; z-index: 10;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Bottom notice popup — shown on / after the host ends a game. */
.popup {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  padding: 14px 18px;
  background: var(--ink-navy); color: var(--cream);
  border-radius: 10px;
  text-align: center; font-weight: 700;
  letter-spacing: 0.04em; font-size: 15px;
  box-shadow: 0 6px 18px rgba(14,20,38,0.35);
  border: 1px solid var(--airmail-blue);
  z-index: 100;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Fade-out class set by JS autoFadeHide ~5s after the message appears.
   Pointer events drop too so the dimming pill doesn't intercept taps. */
.error.is-fading,
.popup.is-fading {
  opacity: 0;
  pointer-events: none;
}

/* /home */
.home__header { margin-bottom: 32px; text-align: center; }
.home__eyebrow { color: var(--ink-faded); font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; margin: 0 0 12px; }
.home__title  { font-size: 64px; font-weight: 900; letter-spacing: 0.02em; color: var(--stamp-red); margin: 0; }
.home__form   { margin-top: 16px; }
.home__field  { text-align: center; }
.home__field-label { text-align: center; }
.home__form input[type="text"] {
  font-family: var(--font-mono);
  font-size: 36px; letter-spacing: 0.4em; text-align: center;
  text-transform: uppercase;
}
.home__submit { margin-top: 32px; }

/* /join */
.join__header { margin-bottom: 24px; text-align: center; }
.join__eyebrow { color: var(--ink-faded); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; }
.join__code { font-family: var(--font-mono); font-size: 64px; letter-spacing: 0.15em; color: var(--stamp-red); margin: 4px 0 0; }

/* /play lobby */
.lobby__header { margin-bottom: 16px; }
.lobby__header h1 { font-family: var(--font-mono); color: var(--stamp-red); }
.lobby__count { color: var(--ink-faded); margin: 0 0 16px; font-size: 18px; }
.lobby__players { list-style: none; padding: 0; margin: 0 0 24px; }
.player { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--ink-faded); }
.player__icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.player__icon .icon-svg { width: 26px; height: 26px; }
.player__name { flex: 1; font-size: 18px; font-weight: 600; }

/* /play arming */
.arming__countdown {
  font-family: var(--font-mono);
  font-size: 140px; line-height: 1; color: var(--stamp-mustard);
  margin: 0 0 16px;
}

/* Get ready */
.get-ready__round { font-size: 48px; font-weight: 800; margin: 16px 0 24px; color: var(--stamp-red); }

/* Guessing */
.guess__timer {
  font-family: var(--font-mono);
  font-size: 56px; line-height: 1; color: var(--stamp-mustard);
  margin: 8px 0 24px;
}

/* Easy */
.easy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.easy__option {
  appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  background: var(--cream-warm); color: var(--ink-navy);
  border: 2px solid var(--ink-navy); border-radius: 10px;
  padding: 24px 12px;
  font-family: inherit; font-size: 18px; font-weight: 700;
  cursor: pointer; min-height: 140px;
  transition: transform 80ms ease;
}
.easy__option:active { transform: scale(0.97); background: var(--ink-navy); color: var(--cream); }
.easy__flag { font-size: 48px; line-height: 1; }
.easy__name { text-align: center; line-height: 1.2; }

/* Medium — country select scroll area */
.medium__list {
  list-style: none; padding: 0; margin: 16px 0 24px;
  max-height: 35vh; overflow-y: auto;
  border: 2px solid var(--ink-navy); border-radius: 8px;
  background: var(--cream-warm);
}
.medium__option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--ink-faded);
  cursor: pointer;
  font-size: 18px;
}
.medium__option:last-child { border-bottom: none; }
.medium__option.is-selected { background: var(--ink-navy); color: var(--cream); }
.medium__flag { font-size: 28px; line-height: 1; }

/* Hard — Google Maps JS pin drop. Sized to fill most of the screen so
   players can actually aim a tap; sits between the timer and Confirm. */
.hard__map {
  width: 100%; height: 50vh;
  margin: 8px 0 12px;
  border: 2px solid var(--ink-navy); border-radius: 10px;
  overflow: hidden;
  background: var(--cream-warm);
  position: relative;
}
/* ToS-grey: hide the Google attribution / logo on the JS map. Revisit if we
   ever come up for review with Google. */
.hard__map .gm-style-cc,
.hard__map a[href^="https://maps.google.com/maps"],
.hard__map a[href^="https://www.google.com/maps"],
.hard__map .gmnoprint a, .hard__map .gmnoprint span, .hard__map .gm-style-cc { display: none !important; }
.hard__map img[alt="Google"] { display: none !important; }
.hard__hint {
  margin: 0 0 12px;
  font-size: 12px; letter-spacing: 0.18em;
}

/* Submitted — postmark-style stamp instead of a generic lock icon. */
.postmark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 220px; height: 220px;
  margin: 32px auto 16px;
  border-radius: 50%;
  border: 4px double var(--stamp-red);
  color: var(--stamp-red);
  background: var(--cream-warm);
  transform: rotate(-6deg);
  box-shadow: inset 0 0 0 12px rgba(200,69,60,0.06);
}
.postmark__seal {
  font-family: var(--font-mono);
  font-size: 96px; line-height: 1; font-weight: 900;
}
.postmark__label {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 0.25em; font-weight: 800;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Round result — uppercase the location reveal to match the tvOS treatment. */
.result__truth {
  font-size: 36px; color: var(--stamp-red); margin-bottom: 16px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
/* Static reveal map. The wrapper enforces an aspect-ratio slightly wider
   than the static map's natural 1280:880 (~1.45) so object-fit:cover with
   object-position:top crops the bottom strip — kills the Google
   attribution AND the dead space in one shot. */
.result__map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;          /* 1.6 — wider than image's 1.45 */
  border: 2px solid var(--ink-navy); border-radius: 10px;
  overflow: hidden;
  background: var(--cream-warm);
  margin-bottom: 16px;
}
.result__map {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.result__you {
  background: var(--cream-warm);
  border: 2px solid var(--ink-navy); border-radius: 12px;
  padding: 20px; margin-top: 16px;
}
.result__guess { font-size: 28px; font-weight: 700; margin: 4px 0 12px; }
.result__points {
  font-family: var(--font-mono);
  font-size: 56px; font-weight: 900;
  color: var(--row-color, var(--stamp-mustard));
  margin: 0 0 8px;
}

/* The between-rounds leaderboard screen uses an uppercased "LEADERBOARD"
   header (matches the tvOS podium). Player names stay title-case below. */
.screen--leaderboard h2 {
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* Leaderboard / Final — match the tvOS podium look at scaled-down sizes.
   Each row carries `--row-color` (set by JS from the player's icon color);
   rank text, score text, and border all read that variable. #1 overrides
   to the red podium accent. */
.leaderboard__list { list-style: none; padding: 0; margin: 16px 0; }
.leaderboard__row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--cream); border-radius: 10px;
  border: 2px solid var(--row-color, rgba(74,84,104,0.3));
}
.leaderboard__row .leaderboard__rank,
.leaderboard__row .leaderboard__score {
  color: var(--row-color, var(--ink-faded));
}
.leaderboard__row:nth-child(1) {
  background: var(--cream-warm);
  /* Border stays the standard 2px in the player's color. The thicker 3px
     border is reserved for the --me row, so it's only emphasized when the
     leader is the current player. */
}
.leaderboard__row--me {
  background: var(--cream-warm);
  border-width: 3px;
}
/* "YOU" pill — background matches the row's accent (player icon color, or
   stamp-red on the #1 podium row), so it reads as a coordinated badge. */
.leaderboard__you {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--row-color, var(--airmail-blue)); color: var(--cream);
  font-family: var(--font-mono); font-weight: 900;
  font-size: 11px; letter-spacing: 0.18em;
}
.leaderboard__rank {
  font-family: var(--font-mono); font-weight: 900;
  font-size: 20px; color: var(--ink-faded); min-width: 38px;
}
.leaderboard__icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.leaderboard__icon .icon-svg { width: 24px; height: 24px; }
.leaderboard__name {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leaderboard__score {
  font-family: var(--font-mono); font-weight: 900; font-size: 20px;
  color: var(--ink-faded); flex-shrink: 0;
}

/* Final personal outcome banner (was 28px → ~30% smaller). */
.final__personal {
  font-family: var(--font-display); font-weight: 900;
  font-size: 20px; letter-spacing: 0.05em; text-align: center;
  margin: 16px 0 12px; padding: 12px 16px;
  border-radius: 10px;
  background: var(--cream-warm);
  border: 2px dashed var(--ink-faded);
}
.final__personal--win  { background: var(--stamp-mustard); color: var(--ink-navy); border-color: var(--stamp-red); }
.final__personal--lose { color: var(--ink-navy); }

.final__winner {
  font-family: var(--font-display);
  font-size: 72px; line-height: 1.05; font-weight: 900;
  color: var(--stamp-red); margin: 12px 0 8px;
  letter-spacing: 0.02em;
}
.final__score {
  font-family: var(--font-mono); font-weight: 800;
  color: var(--stamp-mustard); font-size: 28px; margin: 0 0 24px;
}