/* ============================================================
   SBYC Jetpack — Styles
   Mobile-first. SBYC greens layered over Alto's-Odyssey dawn
   silhouettes. The game canvas renders flat, anti-aliased art.
   ============================================================ */

:root {
  --sbyc-green: #1b7849;
  --sbyc-green-dark: #0e4028;
  --sbyc-green-deeper: #07281b;
  --sbyc-light: #d4edda;
  --sbyc-red: #CC0000;
  --sbyc-yellow: #f5d76e;
  --ink: #0f1d15;
  --muted: #7a8a7f;
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--sbyc-green-deeper);
  color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.screen {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-y: auto;
}
.screen.active { display: flex; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 17px; font-weight: 600;
  border: none; border-radius: var(--radius);
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
  text-decoration: none;
  color: #fff;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--sbyc-green); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.primary.big { padding: 18px 48px; font-size: 20px; margin-top: 28px; }
.btn.ghost {
  background: transparent; color: var(--sbyc-light);
  border: 2px solid var(--sbyc-light); padding: 12px 26px;
}
.btn.ghost:hover { background: rgba(212, 237, 218, .12); }
.btn.link {
  background: transparent; color: var(--sbyc-light);
  padding: 10px 14px; text-decoration: underline;
}
.btn.small { padding: 10px 18px; font-size: 15px; }

/* ---------- SPLASH ---------- */
#screen-splash {
  /* Base color is a dark purple-navy that matches the bottom of every
     palette's near-foreground tint. This is a safety net: if the canvas
     ever fails to paint the very bottom pixels (dpr rounding, mid-
     animation resize, etc.) the gap falls back to a skyline-compatible
     hue instead of the old flat green that was bleeding through. */
  background: #1a1028;
  /* IMPORTANT: do NOT set position:relative here — .screen already sets
     position:fixed;inset:0 so the splash fills the viewport. Overriding
     it to relative makes the section shrinkwrap to content, leaving the
     vignette and canvas sized to only the upper half and exposing the
     body background below. */
}
/* Animated game-world parallax behind the title. Fully opaque so no
   background bleeds through; the dark vignette ::after handles text
   contrast. */
#splash-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  display: block;
}
#screen-splash::after {
  /* Vignette that darkens the edges + center band behind the title so
     the hero wordmark always has enough contrast over the animation. */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 8, 28, 0.55) 0%, rgba(10, 8, 28, 0.75) 60%, rgba(10, 8, 28, 0.92) 100%);
  z-index: 1;
  pointer-events: none;
}
.splash-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 520px;
  padding: 40px 24px;
}
.splash-logo {
  width: 180px; height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}
.title {
  font-size: 72px; letter-spacing: 6px; margin: 14px 0 0;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #d4edda 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.title-sub {
  margin: 4px 0 10px; font-size: 20px; letter-spacing: 8px;
  font-weight: 700; color: var(--sbyc-light); opacity: .95;
}
.tagline {
  margin: 10px 0 4px;
  color: #fff; opacity: .95; font-size: 19px; font-weight: 600;
}
.tagline-sub {
  margin: 2px auto 10px; max-width: 440px;
  color: var(--sbyc-light); opacity: .75;
  font-size: 14px; line-height: 1.45;
}
.splash-stats {
  margin: 6px auto 14px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(212, 237, 218, 0.12);
  border-radius: 999px;
  display: inline-block;
  color: var(--sbyc-light); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.splash-stats strong { color: #fff; font-weight: 700; }
.splash-stats .dot { opacity: .5; margin: 0 8px; }
.kbd-hint {
  margin: 14px 0 0;
  font-size: 12px; color: var(--sbyc-light); opacity: .55;
  letter-spacing: .3px;
}
.kbd-hint kbd {
  display: inline-block;
  padding: 2px 7px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 237, 218, 0.25);
  border-radius: 5px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px; color: #fff;
}
/* Hide keyboard hint on touch-primary devices — pointer:coarse
   covers phones and tablets without catching hybrid touchscreen laptops. */
@media (pointer: coarse) {
  .kbd-hint { display: none; }
}
.splash-footer {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center; font-size: 12px;
  color: rgba(212, 237, 218, 0.6);
  display: flex; flex-direction: column; gap: 3px;
}
.splash-footer .dev-credit {
  font-size: 11px;
  color: rgba(212, 237, 218, 0.78);
  opacity: 1;
}
/* Shared developer-credit line used on splash footer, instructions,
   and the game-over screen so the attribution looks consistent. Uses
   rgba-based color (not parent opacity) so the text stays legible when
   nested inside elements that have their own opacity. */
.dev-credit {
  color: rgba(212, 237, 218, 0.75);
  font-size: 12px;
  letter-spacing: 0.02em;
  margin: 0;
}
.instr-credit {
  text-align: center;
  margin-top: 14px;
}
.over-credit {
  text-align: center;
  margin-top: 12px;
}
.mute-btn {
  position: absolute; top: 18px; right: 18px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(212, 237, 218, 0.25);
  border-radius: 999px;
  width: 46px; height: 46px; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 3;
  transition: background .15s ease, transform .08s ease;
}
.mute-btn:hover { background: rgba(0,0,0,.75); }
.mute-btn:active { transform: scale(0.95); }
.mute-btn.inline {
  position: static; margin: 0 6px;
  width: 42px; height: 42px; font-size: 18px;
  box-shadow: none;
}

/* ---------- NAME / INSTRUCTIONS — shared skyline backdrop ---------- */
/* Both onboarding screens reuse the splash skyline renderer behind a
   glass card so the whole flow (splash → name → instructions → mission
   → briefing) feels continuous instead of dropping to a flat backdrop. */
#screen-name, #screen-instructions {
  background: #1a1028;
}
#name-canvas, #instructions-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  display: block;
}
#screen-name::after, #screen-instructions::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 8, 28, 0.40) 0%, rgba(10, 8, 28, 0.68) 70%, rgba(10, 8, 28, 0.88) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Glass card — shared with mission cards' surface language. Used on the
   name-entry and instructions containers so their forms float cleanly
   over the animated skyline without competing with it for attention. */
.glass-card {
  position: relative;
  z-index: 2;
  background: rgba(12, 22, 40, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 237, 218, 0.25);
  border-radius: var(--radius);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
}
/* ---------- NAME ---------- */
.name-wrap, .instr-wrap {
  text-align: center;
  max-width: 440px; padding: 32px 24px;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
.subtitle { font-size: 28px; margin: 6px 0 14px; color: #fff; }
#name-input {
  padding: 18px 20px; font-size: 20px;
  background: rgba(255,255,255,.08);
  color: #fff; border: 2px solid var(--sbyc-green);
  border-radius: var(--radius); outline: none;
  text-align: center; font-weight: 600;
}
#name-input:focus { border-color: var(--sbyc-light); }
.error-msg { color: #ff9090; font-size: 14px; margin: 0; min-height: 18px; }

/* ---------- INSTRUCTIONS ---------- */
.instr-row {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.05);
  border-radius: var(--radius); padding: 14px 16px; text-align: left;
}
.instr-icon { font-size: 32px; width: 44px; text-align: center; }
.muted { color: var(--sbyc-light); opacity: .7; font-size: 13px; }

/* ---------- MISSION SELECT ---------- */
/* Mission select reuses the splash skyline renderer behind the cards.
   The section keeps .screen's position:fixed;inset:0 so the canvas can
   fill the viewport — we just add a dark fallback color in case the
   canvas hasn't painted its first frame yet. */
#screen-mission {
  background: #1a1028;
}
#mission-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  display: block;
}
/* Subtle vignette so the card text reads cleanly over any palette. */
#screen-mission::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 8, 28, 0.35) 0%, rgba(10, 8, 28, 0.62) 70%, rgba(10, 8, 28, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.mission-wrap {
  position: relative;
  z-index: 2;
  padding: 28px 18px; text-align: center;
  max-width: 760px; width: 100%;
}
.mission-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin: 18px 0 20px;
}
.mission-card {
  position: relative;
  background: rgba(12, 22, 40, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 237, 218, 0.30);
  border-radius: var(--radius);
  padding: 10px 12px 16px;
  color: #fff; cursor: pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: center;
  overflow: hidden;
}
.mission-card:hover:not(.disabled),
.mission-card:focus-visible:not(.disabled) {
  background: rgba(27, 120, 73, 0.32);
  border-color: var(--sbyc-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.mission-card h3 { margin: 10px 0 4px; font-size: 16px; }
.mission-card p {
  margin: 0; font-size: 13px;
  color: var(--sbyc-light); opacity: .88;
}
/* Mini-scene canvas at the top of each card — painted by main.js with
   the mission's palette sky + destination landmark. */
.mission-card .mission-scene {
  display: block;
  width: 100%;
  height: 68px;
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: 4px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.mission-card.disabled {
  opacity: .45; cursor: not-allowed;
  background: rgba(0,0,0,.3);
  border-color: rgba(212, 237, 218, .2);
}
.coming-soon {
  position: absolute; top: 8px; right: 8px;
  background: var(--sbyc-yellow); color: #333;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: .5px;
}

/* ---------- BRIEFING ---------- */
.brief-wrap {
  padding: 24px 18px 32px;
  max-width: 640px; width: 100%;
  text-align: center;
}
.brief-mission {
  margin: -6px 0 16px;
  font-size: 14px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sbyc-yellow);
  font-weight: 700;
}
.brief-section {
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  margin-bottom: 14px;
  text-align: left;
}
.brief-collect { border-left: 4px solid #4fd38a; }
.brief-avoid   { border-left: 4px solid #ff5a5a; }
.brief-heading {
  margin: 0 0 10px;
  font-size: 16px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.brief-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #4fd38a; color: #0e3a22;
  font-size: 14px; font-weight: 900;
}
.brief-cross {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #ff5a5a; color: #fff;
  font-size: 14px; font-weight: 900;
}
.brief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.brief-item {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,0,0,.28);
  border-radius: 12px;
  padding: 10px 6px 8px;
  gap: 4px;
}
.brief-avoid .brief-item { background: rgba(255, 50, 50, .12); }
.brief-item canvas {
  width: 64px; height: 64px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,0) 70%);
  border-radius: 50%;
}
.brief-item .brief-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: .3px;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.brief-item .brief-sub {
  font-size: 10.5px; opacity: .7;
  text-align: center; line-height: 1.2;
}
.brief-actions {
  margin-top: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
@media (max-width: 480px) {
  .brief-grid { gap: 8px; }
  .brief-item canvas { width: 56px; height: 56px; }
  .brief-heading { font-size: 15px; }
}

/* ---------- GAME ---------- */
#screen-game { padding: 0; background: #0e4028; }
.game-wrap {
  position: relative;
  width: 100vw; height: 100vh;
  max-width: 100vw; max-height: 100dvh;
  overflow: hidden;
}
#game-canvas {
  display: block;
  width: 100%; height: 100%;
  /* Matches the lightest-common sky base across palettes so any
     pre-first-frame flash or letterbox bar doesn't read as near-black. */
  background: #3b2a6a;
  touch-action: none;
}
.hud {
  position: absolute; top: 10px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 14px;
  font-weight: 700;
  pointer-events: none;
}
.hud-left .hearts {
  background: rgba(0,0,0,.38);
  padding: 6px 10px; border-radius: 999px;
  display: flex; gap: 6px;
}
.heart { color: #CC0000; font-size: 22px; line-height: 1; text-shadow: 0 0 2px #000; }
.heart.empty { color: #333; }
.hud-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.score {
  background: rgba(0,0,0,.45);
  color: #fff; padding: 6px 12px; border-radius: 10px;
  font-size: 22px; font-variant-numeric: tabular-nums;
}
.combo {
  background: var(--sbyc-yellow); color: #333;
  padding: 4px 10px; border-radius: 10px; font-size: 14px;
  font-weight: 800;
}
.hidden { display: none !important; }

.pause-row {
  position: absolute; bottom: 14px; right: 14px;
  display: flex; gap: 6px;
}
.pause-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
.pause-overlay h2 { margin: 0; font-size: 36px; }

/* ---------- GAME OVER ---------- */
#screen-over {
  background:
    radial-gradient(circle at 75% 15%, #b25a4e 0%, transparent 40%),
    linear-gradient(180deg, #1a1036 0%, #0e4028 70%, #07281b 100%);
}
.over-wrap {
  text-align: center;
  max-width: 520px; width: 100%;
  padding: 24px 18px 40px;
}
.title-sm { font-size: 24px; color: var(--sbyc-light); margin: 8px 0 2px; opacity: .85; }
.over-name { font-size: 18px; color: #fff; margin-top: 4px; }
.over-score {
  font-size: 84px; font-weight: 900;
  color: #fff; line-height: 1; margin: 6px 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.over-mission { color: var(--sbyc-yellow); font-weight: 700; margin-bottom: 10px; }
.rotating-msg {
  background: rgba(255,255,255,.08);
  border-left: 4px solid var(--sbyc-green);
  padding: 12px 16px; border-radius: 8px;
  font-style: italic; font-size: 15px; margin: 14px 0;
  color: var(--sbyc-light);
}
.over-card-wrap { margin: 14px 0; }
.scorecard-preview {
  max-width: 240px; width: 70%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.card-actions { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.cta-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 20px 0;
}
.cta-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 6px; border-radius: var(--radius);
  font-size: 13px; font-weight: 700; text-align: center;
  color: #fff; text-decoration: none;
  min-height: 54px;
}
.cta-btn.facebook { background: #1877f2; }
.cta-btn.whatsapp { background: #25d366; color: #073; }
.cta-btn.website  { background: var(--sbyc-green); }
.cta-btn:active { transform: scale(0.96); }

.over-bottom {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px;
}

/* ---------- LEADERBOARD ---------- */
.lb-wrap {
  max-width: 640px; width: 100%; padding: 24px 18px;
  text-align: center;
}
.lb-toggle {
  display: inline-flex; gap: 6px;
  background: rgba(0,0,0,.3); padding: 4px; border-radius: 999px;
  margin-bottom: 14px;
}
.tab-btn {
  background: transparent; color: var(--sbyc-light);
  padding: 8px 16px; border: none; border-radius: 999px;
  font-size: 14px; cursor: pointer; font-weight: 600;
}
.tab-btn.active { background: var(--sbyc-green); color: #fff; }
.lb-table-wrap {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 60vh; overflow-y: auto;
}
.lb-table {
  width: 100%; border-collapse: collapse; color: #fff;
}
.lb-table th, .lb-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
}
.lb-table th {
  background: rgba(0,0,0,.3);
  font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--sbyc-light);
}
.lb-table td:last-child, .lb-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.lb-table tr:nth-child(1) td { background: rgba(245, 215, 110, .08); font-weight: 700; }

/* ---------- ADMIN ---------- */
.admin-wrap {
  max-width: 640px; width: 100%; padding: 24px;
}
.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 14px 0;
}
.admin-card {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius); padding: 14px;
}
.admin-card h4 { margin: 0 0 4px; font-size: 12px; color: var(--sbyc-light); text-transform: uppercase; letter-spacing: .5px; }
.admin-card .num { font-size: 32px; font-weight: 800; color: #fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
  .splash-logo { width: 130px; }
  .title { font-size: 48px; letter-spacing: 4px; }
  .title-sub { font-size: 15px; letter-spacing: 5px; }
  .tagline { font-size: 17px; }
  .tagline-sub { font-size: 13px; }
  .over-score { font-size: 68px; }
  .cta-btn { font-size: 12px; min-height: 50px; }
  .btn.primary.big { padding: 16px 40px; font-size: 18px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  /* landscape phones */
  .over-wrap { padding: 10px 14px; }
  .over-score { font-size: 48px; }
  .scorecard-preview { max-width: 160px; }
}

/* ---------- MOBILE PORTRAIT ROTATE PROMPT ----------
   The game renders at a fixed 16:9 logical canvas (800x450), so portrait
   phones end up with the playfield crammed into the top ~25% of screen.
   Rather than rework the world for portrait, we follow the Jetpack
   Joyride convention and require landscape on touch devices.

   `pointer: coarse` scopes this to touch screens so a narrow desktop
   browser window in portrait aspect isn't blocked — only real phones/
   tablets held upright are. */
#rotate-prompt {
  display: none;
  position: fixed; inset: 0;
  z-index: 9999;
  background: linear-gradient(180deg, #0e4028 0%, #1b7849 100%);
  color: #fff;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#rotate-prompt .rotate-inner {
  max-width: 340px;
}
#rotate-prompt .rotate-icon {
  display: inline-block;
  margin-bottom: 20px;
  animation: rotateHint 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform-origin: 50% 50%;
}
@keyframes rotateHint {
  0%, 35%    { transform: rotate(0deg); }
  55%, 100%  { transform: rotate(-90deg); }
}
#rotate-prompt h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
#rotate-prompt p {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

/* Only show the prompt on touch devices held in portrait. On desktop
   (pointer: fine) or on phones in landscape the game runs normally. */
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-prompt { display: flex; }
  /* Extra belt-and-suspenders: also hide the main content so screen
     readers and even users who somehow bypass the z-index overlay
     cannot interact with splash/game while blocked. */
  body > section.screen { pointer-events: none; }
}