/* Bug-Bug's Mountain Climb — v4 orange palette, cozy with white plot */

* { box-sizing: border-box; }

:root {
  --bg-top: #E8F2F4;
  --bg-mid: #FCEFD6;
  --bg-bot: #FFF6E4;

  --card-top: #FFD58A;
  --card-bot: #FF9F3D;

  --ribbon-top: #FF8A6B;
  --ribbon-bot: #E55564;

  --text-strong: #2C3E50;
  --text-warm: #5C2A0F;
  --text-fade: #7A4A0F;

  --line-grad: #A82B1A;
  --summit-line: #A82B1A;
  --gridline: #E0CFA8;
  --plot-bg: #FFFFFF;

  --rest-top: #C9DEEE;
  --rest-bot: #A8C4D9;
  --climb-top: #FFD27A;
  --climb-bot: #FFA84A;
  --sprint-top: #86E3B9;
  --sprint-bot: #3FB07A;

  --shadow: 0 6px 12px rgba(122, 58, 15, 0.28);
  --shadow-sm: 0 2px 4px rgba(63, 74, 92, 0.22);

  --card-radius: 22px;
  --max-width: 1400px;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Fredoka", "Quicksand", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  color: var(--text-strong);
  background:
    radial-gradient(circle at 80% 0%, #FFD58A 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bot) 100%);
  min-height: 100vh;
}

button { font-family: inherit; cursor: pointer; }

.defs-only { width: 0; height: 0; position: absolute; }

#app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 20px 40px;
}

/* ============== TITLE SCREEN ============== */

.title-screen {
  display: grid;
  place-items: center;
  min-height: 86vh;
}

.title-card {
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border-radius: 32px;
  box-shadow: var(--shadow);
  padding: 48px 56px;
  max-width: 560px;
  text-align: center;
  color: var(--text-strong);
}

.title-bug {
  width: 120px;
  height: 110px;
  margin: 0 auto 8px;
  display: block;
}

.title-heading {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 1.5px;
  margin: 8px 0 4px;
  line-height: 1.1;
  color: var(--text-strong);
}

.title-subtitle {
  margin: 0 0 24px;
  color: var(--text-warm);
  font-weight: 600;
  font-size: 14px;
}

.primary-btn {
  background: linear-gradient(180deg, #86E3B9, #3FB07A);
  color: #FFFDF7;
  border: none;
  padding: 18px 44px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-radius: 24px;
  box-shadow: 0 8px 16px rgba(63, 176, 122, 0.45);
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.primary-btn:hover { transform: translateY(-2px); }
.primary-btn:active { transform: translateY(1px); box-shadow: 0 4px 8px rgba(63, 176, 122, 0.45); }

.ghost-btn {
  background: #FFFDF7;
  color: var(--text-warm);
  border: 2px solid var(--text-warm);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 18px;
  letter-spacing: 1px;
}

.ghost-btn code { font-family: "JetBrains Mono", "Menlo", monospace; font-size: 12px; }

.title-best {
  margin: 16px 0 0;
  color: var(--text-warm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.best-stars {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.best-star {
  font-size: 28px;
  line-height: 1;
  display: inline-block;
  transition: transform 200ms ease;
}
.best-star.filled {
  /* Bright yellow emoji + glow for achieved star slots */
  filter: drop-shadow(0 0 6px rgba(255, 201, 77, 0.7));
}
.best-star.empty {
  /* Visibly dim 'not yet earned' slot — distinguishable from filled at
     a glance so the player can see their progress toward 3 stars.
     Dark gold-grey, partial opacity. */
  color: #8b7355;
  opacity: 0.5;
  font-weight: 900;
}

.title-howto {
  margin-top: 24px;
  text-align: left;
  background: #FFFDF7;
  border-radius: 16px;
  padding: 12px 18px;
}

.title-howto summary { cursor: pointer; font-weight: 800; color: var(--text-strong); }
.title-howto ul { margin: 8px 0 0 0; padding-left: 18px; color: var(--text-warm); line-height: 1.6; font-size: 14px; }

/* ============== GAME SCREEN ============== */

.game-screen { display: grid; gap: 16px; }

.card {
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
}

/* ----- Status bar ----- */

.status-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr 1.2fr;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-bug { width: 56px; height: 42px; }

.brand h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--text-strong);
}

.brand p {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-warm);
}

.brand code {
  background: #FFFDF7;
  padding: 1px 6px;
  border-radius: 6px;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
}

.day-pill {
  background: linear-gradient(180deg, var(--ribbon-top), var(--ribbon-bot));
  color: #FFFDF7;
  border-radius: 18px;
  padding: 10px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.day-pill .label { font-size: 10px; font-weight: 900; letter-spacing: 2px; display: block; color: #FFE8D6; }
.day-pill strong { font-size: 22px; font-weight: 900; }

.stat { text-align: center; color: var(--text-warm); }
.stat .label { font-size: 10px; font-weight: 900; letter-spacing: 2px; display: block; margin-bottom: 4px; }
.stat-altitude strong { font-size: 22px; font-weight: 900; color: var(--line-grad); }

.hearts { display: flex; gap: 4px; justify-content: center; }
.hearts .heart { width: 28px; height: 24px; }

.stat-progress { color: #FFFDF7; }
.stat-progress .label { color: var(--text-warm); }
.progress-bar { width: 120px; height: 14px; border-radius: 7px; background: #FFFDF7; margin: 4px auto 4px; overflow: hidden; }
.progress-bar .fill { height: 100%; background: linear-gradient(180deg, var(--sprint-top), var(--sprint-bot)); transition: width 280ms ease; }
.stat-progress strong { font-size: 16px; font-weight: 900; color: var(--text-warm); }

/* ----- Game main grid (chart + side column) ----- */

.game-main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
}

@media (max-width: 980px) {
  .status-bar { grid-template-columns: 1fr 1fr; }
  .game-main { grid-template-columns: 1fr; }
}

/* ----- Chart card ----- */

.chart-card { padding: 22px 26px 18px; }

.chart-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.chart-head h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--text-strong); }
.chart-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-warm); font-weight: 600; }

.avg-pill {
  background: #FFFDF7;
  border-radius: 18px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-warm);
  white-space: nowrap;
}

.chart-wrap { width: 100%; }
.chart { width: 100%; height: auto; display: block; }

.plot-bg { fill: var(--plot-bg); }
.grid-line { stroke: var(--gridline); stroke-width: 1.2; opacity: 0.85; }
.summit-line { stroke: var(--summit-line); stroke-width: 2.5; stroke-dasharray: 8 6; fill: none; }
.summit-label { font-size: 12px; font-weight: 900; fill: var(--text-fade); letter-spacing: 2px; }

.y-tick { font-size: 12px; font-weight: 700; fill: var(--text-warm); }

.climb-line { fill: none; stroke: var(--line-grad); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(122,42,15,0.15)); }

.day-marker.done circle { fill: #FFFDF7; stroke: var(--line-grad); stroke-width: 4; filter: drop-shadow(0 2px 2px rgba(122,42,15,0.3)); }
.day-marker .dot-gain { font-size: 12px; font-weight: 900; fill: var(--line-grad); }
.day-marker .dot-action { font-size: 16px; }

.day-marker.current .pulse-ring { fill: none; stroke: var(--line-grad); stroke-width: 2.5; stroke-dasharray: 3 4; animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 0.4; r: 18; }
  50% { opacity: 1; r: 22; }
}

.future-dot { fill: #FFFDF7; stroke: #C9A87A; stroke-width: 2; stroke-dasharray: 2 3; opacity: 0.6; }

.day-label { font-size: 13px; font-weight: 700; fill: var(--text-warm); }
.day-label.current { fill: var(--line-grad); font-weight: 900; }
.day-label.future { opacity: 0.45; }
.day-label.past { opacity: 0.85; }

.x-axis-title { font-size: 11px; font-weight: 700; fill: var(--text-warm); letter-spacing: 2px; }

/* ----- Forecast card ----- */

.forecast-card { padding: 18px 22px; }
.forecast-card h3 { margin: 0 0 14px; font-size: 12px; font-weight: 900; letter-spacing: 2px; color: var(--text-warm); }
.forecast-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }

.weather-tile {
  background: #FFF1C2;
  border: 2px solid #F4B83A;
  border-radius: 16px;
  padding: 14px 8px 10px;
  text-align: center;
}
.weather-tile.weather-sunny { background: #FFF1C2; border-color: #F4B83A; color: #9A6A1F; }
.weather-tile.weather-cloudy { background: #E8ECF3; border-color: #A5B0C2; color: #4B5567; }
.weather-tile.weather-storm { background: #E2E7EF; border-color: #7E8DA0; color: #3F4A5C; }
.weather-tile.empty { background: #FFFDF7; border-color: #D9C7A6; color: var(--text-warm); }

.weather-tile svg { width: 60px; height: 60px; }
.weather-tile .label { font-size: 11px; font-weight: 900; letter-spacing: 2px; display: block; margin-top: 4px; }
.weather-tile strong { font-size: 14px; font-weight: 900; display: block; margin-top: 2px; }
.weather-tile p { margin: 4px 0 0; font-size: 11px; font-weight: 700; }

.forecast-arrow { font-size: 22px; font-weight: 900; color: #FFFDF7; }

/* ----- Action card ----- */

.action-card { padding: 18px 22px; display: grid; gap: 10px; }
.action-card h3 { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 2px; color: var(--text-warm); }
.action-card .action-prompt { margin: 0 0 6px; font-size: 18px; font-weight: 900; color: var(--text-strong); }

.action-btn {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 14px 18px;
  border: none;
  border-radius: 20px;
  text-align: left;
  color: #FFFDF7;
  font-family: inherit;
  font-weight: 700;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform 80ms ease, box-shadow 80ms ease, opacity 120ms ease;
}

.action-btn:hover:not([disabled]) { transform: translateY(-2px); }
.action-btn:active:not([disabled]) { transform: translateY(1px); }

.action-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.action-btn .emoji { font-size: 30px; line-height: 1; }
.action-btn .label { font-size: 20px; font-weight: 900; grid-row: 1; grid-column: 2; }
.action-btn .meta { font-size: 12px; font-weight: 700; opacity: 0.95; grid-row: 2; grid-column: 2; }

.action-rest { background: linear-gradient(180deg, var(--rest-top), var(--rest-bot)); color: var(--text-strong); }
.action-rest .meta { color: #3F4A5C; }
.action-climb { background: linear-gradient(180deg, var(--climb-top), var(--climb-bot)); }
.action-sprint { background: linear-gradient(180deg, var(--sprint-top), var(--sprint-bot)); box-shadow: 0 6px 14px rgba(63, 176, 122, 0.45); }

.badge-best {
  display: inline-block;
  margin-left: 8px;
  background: #FFE564;
  color: var(--text-warm);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 10px;
  letter-spacing: 1.5px;
  vertical-align: middle;
}

.action-hint {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #FFFDF7;
  text-align: center;
  font-style: italic;
}

/* ----- Tip footer ----- */

.tip-card { padding: 16px 22px; display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 18px; }
@media (max-width: 780px) { .tip-card { grid-template-columns: 1fr; } }
.tip-card .label { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--text-warm); display: block; margin-bottom: 4px; }
.tip-text { margin: 0; font-size: 16px; font-weight: 900; color: var(--text-strong); }
.tip-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-warm); font-weight: 600; }
.recent .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
  background: #FFE5B2;
  border: 1.5px solid #E5A024;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-fade);
}
.chip.dim { opacity: 0.5; }

/* ============== END SCREEN ============== */

.end-screen {
  display: grid;
  place-items: center;
  padding: 24px 0;
}

.end-card {
  padding: 32px 40px;
  max-width: 880px;
  text-align: center;
}

.end-headline {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text-strong);
}
.end-headline.won { color: var(--text-strong); }
.end-headline.lost { color: var(--text-warm); }

.end-stars { font-size: 32px; margin: 8px 0 4px; letter-spacing: 8px; }
.end-sub { margin: 0 0 20px; font-size: 16px; color: var(--text-warm); font-weight: 700; }

.end-recap {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.end-recap li {
  background: #FFFDF7;
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-warm);
}

.end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ============== SOUND TOGGLE + SUCCESS MESSAGE ============== */

.mute-toggle {
  background: #FFFDF7;
  border: 2px solid var(--text-warm);
  width: 44px;
  height: 44px;
  font-size: 22px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 80ms ease;
}
.mute-toggle:hover { transform: translateY(-1px); }
.mute-toggle:active { transform: translateY(1px); }

/* Floating in the corner of the title or end card */
.mute-toggle-floating {
  position: absolute;
  top: 16px;
  right: 16px;
}
.title-card, .end-card { position: relative; }

/* Sits inside the game header next to the progress bar */
.mute-toggle-header {
  justify-self: end;
  align-self: center;
}

.end-success {
  margin: 0 0 14px;
  padding: 12px 22px;
  background: #FFE564;
  border: 2px solid #E5A024;
  border-radius: 16px;
  display: inline-block;
  font-size: 17px;
  font-weight: 900;
  color: var(--text-warm);
  box-shadow: var(--shadow-sm);
}

/* Header grid: brand | day | stamina | altitude | progress | mute */
.status-bar {
  grid-template-columns: 1.7fr 0.7fr 1.4fr 1fr 1.2fr auto;
}
@media (max-width: 980px) {
  .status-bar { grid-template-columns: 1fr 1fr auto; }
  .mute-toggle-header { grid-column: span 1; }
}

/* ========================================================
   New stamina pip display (replaces hearts)
======================================================== */
.stamina-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.stamina-num {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-strong);
  line-height: 1;
}
.stamina-of {
  font-size: 12px;
  color: var(--text-warm);
  font-weight: 700;
}
.stamina-pips {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  flex-basis: 100%;
}
.stamina-pip {
  width: 10px;
  height: 14px;
  border: 1.5px solid #0e0e10;
  border-radius: 3px;
}
.stamina-pip.filled { background: #ff6a00; }
.stamina-pip.spent { background: #fff; opacity: 0.35; }

/* ========================================================
   Sprint counter — two lightning bolts
======================================================== */
.sprint-counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sprint-num {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-strong);
  line-height: 1;
}
.sprint-bolts { display: flex; gap: 2px; font-size: 18px; line-height: 1; }
.sprint-bolt.used { opacity: 0.2; filter: grayscale(1); }
.sprint-bolt.available { animation: pulse-bolt 1.8s ease-in-out infinite; }
@keyframes pulse-bolt {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.6)); }
}

/* ========================================================
   10-day forecast strip
======================================================== */
.forecast-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.forecast-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text-warm);
  flex-shrink: 0;
}
.forecast-days {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.forecast-day {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 8px;
  border: 2px solid var(--text-strong);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.forecast-day .forecast-num { font-size: 10px; color: var(--text-warm); }
.forecast-day .forecast-icon { font-size: 20px; line-height: 1; }
.forecast-day.forecast-sunny  { background: #fff3d6; }
.forecast-day.forecast-cloudy { background: #f0f1f5; }
.forecast-day.forecast-storm  { background: #dde0eb; opacity: 0.75; }
.forecast-day.past {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.forecast-day.current {
  transform: scale(1.18);
  z-index: 1;
  box-shadow: 0 4px 0 0 var(--text-strong);
  border-width: 3px;
}
.forecast-day.future { /* default */ }
.forecast-legend {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-warm);
  font-weight: 700;
  flex-shrink: 0;
}
.legend-item { display: inline-flex; align-items: center; gap: 3px; }
.legend-icon { font-size: 14px; }

@media (max-width: 700px) {
  .forecast-strip { gap: 10px; padding: 10px 12px; }
  .forecast-label { flex-basis: 100%; }
  .forecast-legend { flex-basis: 100%; justify-content: center; }
  .forecast-day { padding: 4px 2px; }
  .forecast-day .forecast-icon { font-size: 16px; }
}

/* ========================================================
   Today card — replaces old today/tomorrow forecast card
======================================================== */
.today-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px;
  gap: 4px;
  text-align: center;
}
.today-card svg { width: 70px; height: 70px; }
.today-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text-warm);
}
.today-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-strong);
  margin-top: 2px;
}
.today-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-warm);
}
.today-card.weather-sunny  { background: linear-gradient(180deg, #fff3d6, #fff8f1); }
.today-card.weather-cloudy { background: linear-gradient(180deg, #f0f1f5, #fff8f1); }
.today-card.weather-storm  { background: linear-gradient(180deg, #d9deeb, #fff8f1); }

/* ========================================================
   How-to-play body (title screen)
======================================================== */
.howto-body {
  margin-top: 12px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-warm);
}
.howto-body h4 {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 900;
  color: var(--text-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.howto-body p { margin: 0 0 8px; }
.howto-body strong { color: var(--text-strong); }
.howto-body em { font-style: italic; }
.howto-body ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.howto-body li {
  padding: 4px 0;
}
.howto-weather li { display: flex; align-items: center; gap: 8px; }
.howto-icon { font-size: 18px; flex-shrink: 0; }
.howto-actions li, .howto-math li {
  padding-left: 4px;
}
.howto-goal {
  background: #ffe0b3;
  border: 2px solid var(--text-strong);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px !important;
}
.howto-hook {
  background: #fff3d6;
  border: 2px solid var(--text-strong);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px !important;
}
.howto-tip {
  background: #e8f4ea;
  border: 2px solid var(--text-strong);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px !important;
  font-size: 13px;
}

/* ========================================================
   Pick-a-card area
======================================================== */
.cards-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
}
.cards-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text-warm);
}
.cards-prompt {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-warm);
}
.cards-description {
  margin: 8px 0 14px;
  font-size: 14px;
  color: var(--text-strong);
  line-height: 1.5;
}
.reveal-headline {
  display: inline-block;
  margin: 6px 0 6px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--text-strong);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.reveal-headline.safe   { background: #d8f3dc; color: #1b4332; }
.reveal-headline.hazard { background: #ffd6d6; color: #7f1d1d; }

.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 12px;
}

/* ----- Face-down card (clickable) ----- */
.pick-card.face-down {
  appearance: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border: none;
}
.pick-card.face-down .card-back {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  border: 3px solid var(--text-strong);
  background: linear-gradient(160deg, #2a2d44, #0f1124);
  box-shadow: 0 5px 0 0 var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pick-card.face-down .card-back::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.pick-card.face-down:hover .card-back {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 0 var(--text-strong);
}
.pick-card.face-down:active .card-back {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--text-strong);
}
.card-back-q {
  font-size: 56px;
  font-weight: 900;
  color: #ffc94d;
  text-shadow: 0 0 18px rgba(255, 201, 77, 0.5);
  font-family: ui-rounded, system-ui, sans-serif;
}

/* ----- Revealed card ----- */
.pick-card.revealed .card-front {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  border: 3px solid var(--text-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  box-shadow: 0 4px 0 0 var(--text-strong);
  animation: card-flip-in 0.3s ease-out;
  transform-origin: center;
}
.pick-card.revealed.is-safe   .card-front { background: linear-gradient(180deg, #ecfdf5, #d1fae5); }
.pick-card.revealed.is-hazard .card-front { background: linear-gradient(180deg, #fef2f2, #fecaca); }
.pick-card.revealed.is-picked .card-front {
  outline: 4px solid #ffc94d;
  outline-offset: 2px;
  transform: scale(1.04);
  z-index: 1;
}
.pick-card.revealed.is-other .card-front {
  opacity: 0.7;
  filter: saturate(0.7);
}
@keyframes card-flip-in {
  from { transform: rotateY(90deg); opacity: 0; }
  to   { transform: rotateY(0deg);  opacity: 1; }
}
.pick-card.revealed.is-picked .card-front {
  animation: card-flip-picked 0.5s ease-out;
}
@keyframes card-flip-picked {
  0%   { transform: rotateY(90deg) scale(0.9); opacity: 0; }
  60%  { transform: rotateY(0deg)  scale(1.1); opacity: 1; }
  100% { transform: rotateY(0deg)  scale(1.04); opacity: 1; }
}
.card-icon {
  font-size: 32px;
  line-height: 1;
}
.card-label {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--text-strong);
  line-height: 1.2;
  padding: 0 2px;
}
.card-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--text-strong);
  margin-top: 2px;
}
.pick-card.revealed.is-safe   .card-badge { background: #34d399; color: #022c22; }
.pick-card.revealed.is-hazard .card-badge { background: #f87171; color: #450a0a; }

.continue-btn {
  width: 100%;
  margin-top: 4px;
}

/* Stamina hearts (3 hearts, fewer than the old pip display) */
.stamina-hearts {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.stamina-heart { font-size: 20px; line-height: 1; }
.stamina-heart.lost { filter: grayscale(1); opacity: 0.4; }

/* Hazard markers on the chart */
.day-marker.done.hazard circle {
  fill: #fef2f2;
  stroke: #b91c1c;
  stroke-width: 3;
}
.day-marker.done.safe circle {
  fill: #ecfdf5;
  stroke: #047857;
  stroke-width: 3;
}
.dot-icon { font-size: 16px; }
.dot-gain.hazard {
  fill: #b91c1c;
  font-weight: 900;
}
.dot-gain.safe {
  fill: #047857;
  font-weight: 900;
}
.y-axis-title {
  font-size: 14px;
  font-weight: 900;
  fill: var(--text-warm);
  letter-spacing: 0.05em;
}

/* Forecast: show pick result on past days */
.forecast-day .forecast-pick {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 11px;
  background: #fff;
  border: 1.5px solid #0e0e10;
  border-radius: 999px;
  padding: 1px 4px;
  line-height: 1;
}
.forecast-day .forecast-pick.hazard { background: #fecaca; }
.forecast-day .forecast-pick.safe   { background: #d1fae5; }
.forecast-day { position: relative; }

/* Footer chip variants */
.chip.chip-safe   { background: #d1fae5; border-color: #047857; color: #022c22; }
.chip.chip-hazard { background: #fecaca; border-color: #b91c1c; color: #450a0a; }

@media (max-width: 600px) {
  .card-row { gap: 6px; }
  .card-back-q { font-size: 40px; }
  .card-icon { font-size: 26px; }
  .card-label { font-size: 10px; }
}

/* Today card — sleeping vs active variant */
.today-card.sleeping {
  background: linear-gradient(180deg, #2e324a, #1c1f33);
  color: #fff;
  border-color: #0e0e10;
}
.today-card.sleeping .today-label { color: #b9bdd5; }
.today-card.sleeping .today-name  { color: #fff; }
.today-card.sleeping .today-hint  { color: #c4c8e0; }
.today-sleep-icon {
  font-size: 64px;
  line-height: 1;
  margin: 6px 0;
  animation: gentle-bob 2.6s ease-in-out infinite;
}
@keyframes gentle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Forecast tiles — sleep days look subdued */
.forecast-day.forecast-cloudy { background: #e8eaf2; }
.forecast-day.forecast-storm  { background: #d9deeb; }
.forecast-day.forecast-cloudy .forecast-icon,
.forecast-day.forecast-storm  .forecast-icon {
  opacity: 0.85;
}

/* ========================================================
   Slide-back animation (on loss)
   The dashed line draws itself from the final position back
   to (day 1, 0). Bug-Bug fades in at the start point.
======================================================== */
.slide-back-line {
  fill: none;
  stroke: #b91c1c;
  stroke-width: 3;
  stroke-dasharray: 8 6;
  stroke-linecap: round;
  opacity: 0.85;
  /* Animate a stroke-dashoffset reveal */
  stroke-dashoffset: 1200;
  animation: slide-draw 1.4s ease-out 0.3s forwards;
}
@keyframes slide-draw {
  to { stroke-dashoffset: 0; }
}

.slide-back-bug {
  opacity: 0;
  animation: slide-bug-in 0.4s ease-out 1.55s forwards;
}
@keyframes slide-bug-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.slide-back-label {
  fill: #b91c1c;
  font-weight: 800;
  font-size: 16px;
}

/* Victory trophy — pops in over Bug-Bug's final landing dot on a win */
.victory-trophy {
  transform-box: fill-box;
  transform-origin: center;
  animation: trophy-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes trophy-pop {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Altitude badge under the victory trophy */
.victory-altitude-badge .badge-bg {
  fill: #ffc94d;
  stroke: #0e0e10;
  stroke-width: 2.5;
}
.victory-altitude-badge .badge-text {
  fill: #0e0e10;
  font-weight: 900;
  font-size: 14px;
  font-family: ui-rounded, system-ui, sans-serif;
}

/* Stamina-out callout — bug stays put, banner appears at top of chart */
.stamina-out-callout {
  animation: callout-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@keyframes callout-pop {
  0%   { opacity: 0; transform-origin: center; }
  100% { opacity: 1; }
}
.stamina-out-callout .callout-bg {
  fill: #7f1d1d;
  stroke: #0e0e10;
  stroke-width: 3;
  filter: drop-shadow(0 4px 0 rgba(14, 14, 16, 0.4));
}
.stamina-out-callout .callout-text {
  fill: #fff;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-family: ui-rounded, system-ui, sans-serif;
}

.stuck-bug {
  animation: stuck-fade 0.4s ease-out 0.1s both;
}
@keyframes stuck-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Exhausted-finish trophy variant — slightly faded + softer badge */
.victory-trophy.exhausted {
  opacity: 0.85;
}
.victory-trophy.exhausted .badge-bg {
  fill: #f4a261;
}
.victory-trophy.exhausted .badge-text {
  fill: #5a1f00;
}

/* Half-star badge on the end screen */
.exhausted-badge {
  display: inline-block;
  background: #f4a261;
  color: #5a1f00;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2.5px solid var(--text-strong);
  box-shadow: 0 3px 0 0 var(--text-strong);
  font-size: 14px;
}

/* ============================================================
   Mobile fit — whole game visible on phones without scroll/zoom.
   Root cause of the old "zoomed-out" look: the line-chart SVG (and
   the 5-column status bar) were wider than the phone, which expanded
   the layout viewport and shrank everything. Below we clamp width to
   the viewport, make the chart responsive, and compress vertical
   spacing so the header, chart and cards all fit at once.
   ============================================================ */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  #app { padding: 8px; align-items: flex-start; max-width: 100vw; overflow-x: hidden; }
  .game-screen { gap: 6px; }
  .game-screen, .status-bar, .forecast-strip, .game-main,
  .chart-card, .side, .cards-card, .today-card { min-width: 0; max-width: 100%; }

  /* Compact header — the "to summit" progress bar is redundant with the chart.
     Extra top padding keeps the title/stamina clear of the fixed
     Arcade (top-left) and Share (top-right) buttons. */
  .status-bar { grid-template-columns: 1.4fr auto auto; gap: 4px 8px; padding: 50px 10px 8px; }
  .status-bar > * { min-width: 0; }
  .stat-progress, .stat.stat-progress { display: none; }
  .brand h1 { font-size: 13px; line-height: 1.05; }
  .brand-bug { width: 34px; height: 26px; }
  .brand p, .brand-sub { display: none; }
  .day-pill { transform: none; padding: 5px 10px; }

  .forecast-strip { padding: 5px 8px; gap: 3px; margin-bottom: 0; }
  .forecast-day { padding: 3px 2px; }
  .forecast-day .forecast-icon { font-size: 14px; }

  /* Responsive chart: fill width, capped height */
  .game-main { grid-template-columns: 1fr; }
  .chart-card { padding: 8px 12px 4px; }
  .chart-card svg { width: 100%; height: auto; max-height: 86px; }

  .today-card { padding: 6px 10px; gap: 2px; }
  .today-card svg { width: 38px; height: 38px; }
  .today-name { font-size: 16px; }
  .today-hint { display: none; }
  .today-sleep-icon { font-size: 36px; margin: 2px 0; }

  .cards-card { padding: 10px 12px; }
  .tip-card { display: none; }
}