/* ── Nectar Rising — THH brand palette, sampled from the logo ─────────────── */
:root {
  --gold:#E0B028; --mint:#70C8C8; --leaf:#589028; --sky:#3890D0;
  --apple:#B81828; --cream:#E0E0C8; --forest:#104028; --deep:#0a2a1a;
  --rust:#C8503A; --dust:#D89878;
  --ink:#f3f7f1; --dim:#bcd4c6;
  --sans:'Montserrat', system-ui, -apple-system, sans-serif;
  --glass: rgba(8,26,18,.52);
  --line: rgba(224,224,200,.16);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--deep);
  font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; touch-action:none; }

.stage { position:fixed; inset:0; overflow:hidden; background:#1a0e0a; }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ── HUD ──────────────────────────────────────────────────────────────────── */
.hud { position:absolute; inset:0; padding:max(14px,env(safe-area-inset-top)) clamp(14px,3vw,30px) 14px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  pointer-events:none; z-index:5; }
.hud[hidden]{ display:none; }
.hud-left { display:flex; flex-direction:column; gap:8px; }
.hud-metric { display:flex; flex-direction:column; line-height:.96; }
.hud-num { font-size:clamp(30px,6vw,52px); font-weight:900; letter-spacing:-.02em;
  color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,.5); font-variant-numeric:tabular-nums; }
.hud-lab { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--mint); margin-top:3px; }

.terra { display:flex; flex-direction:column; gap:4px; max-width:200px; }
.terra-bar { height:6px; border-radius:6px; background:rgba(0,0,0,.35);
  border:1px solid var(--line); overflow:hidden; }
.terra-fill { display:block; height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--rust), var(--gold) 45%, var(--leaf));
  box-shadow:0 0 8px rgba(88,144,40,.55), inset 0 1px 0 rgba(255,255,255,.25);  /* inner-light — the bar glows as Mars greens */
  transition:width .45s cubic-bezier(.2,.9,.2,1); }
.terra-lab { font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--dim); text-transform:uppercase; }
.terra-lab b { color:var(--cream); }

.hud-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:auto; }
.icon-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--glass); color:var(--cream); font-size:16px; cursor:pointer; backdrop-filter:blur(6px);
  display:grid; place-items:center; transition:transform .15s ease, opacity .2s; opacity:.7; }
.icon-btn:hover { transform:scale(1.08); opacity:1; }
.icon-btn[data-off="true"]{ opacity:.4; text-decoration:line-through; }

.seed-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 9px; border-radius:30px;
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(6px);
  font-size:12px; font-weight:700; letter-spacing:.02em; }
.seed-dot { width:11px; height:11px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.seed-chip[data-seed="clover"]{ color:#cfe8a8; } .seed-chip[data-seed="clover"] .seed-dot{ background:#9fd24f; color:#9fd24f; }
.seed-chip[data-seed="legume"]{ color:#a8e6b0; } .seed-chip[data-seed="legume"] .seed-dot{ background:var(--leaf); color:var(--leaf); }
.seed-chip[data-seed="vine"]{ color:#aef0ef; } .seed-chip[data-seed="vine"] .seed-dot{ background:var(--mint); color:var(--mint); }
.seed-chip[data-seed="mycelium"]{ color:#f6dd9a; } .seed-chip[data-seed="mycelium"] .seed-dot{ background:var(--gold); color:var(--gold); }

.reserve { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.reserve-lab { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--mint); }
.reserve-bar { width:clamp(120px,30vw,190px); height:9px; border-radius:6px; background:rgba(0,0,0,.4);
  border:1px solid var(--line); overflow:hidden; }
.reserve-fill { display:block; height:100%; width:100%; border-radius:6px;
  background:linear-gradient(90deg,#3aa0a0,var(--mint));
  transition:width .18s cubic-bezier(.2,.9,.2,1), background .3s; }
.reserve-fill[data-low="true"]{ background:linear-gradient(90deg,#8a2418,var(--apple));
  animation:hullpulse 1s ease-in-out infinite; }  /* danger reads at a glance when the hull is thin */
@keyframes hullpulse { 0%,100%{ box-shadow:0 0 0 rgba(184,24,40,0); } 50%{ box-shadow:0 0 9px rgba(184,24,40,.7); } }

/* ── transient cues ───────────────────────────────────────────────────────── */
.cue, .alarm { position:absolute; left:50%; transform:translateX(-50%); z-index:6; pointer-events:none;
  font-weight:800; letter-spacing:.02em; padding:10px 20px; border-radius:30px; backdrop-filter:blur(6px); white-space:nowrap; }
.cue { top:20%; background:var(--glass); border:1px solid var(--line); color:var(--cream); font-size:15px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); transition:opacity .9s ease; }
.cue.out { opacity:0; }
.alarm { top:13%; background:rgba(184,24,40,.30); border:1px solid rgba(184,24,40,.6); color:#ffd9d0;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.12em;
  animation:alarmpulse .9s ease-in-out infinite; }
@keyframes alarmpulse { 0%,100%{opacity:.7; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.05);} }
@media (prefers-reduced-motion: reduce){ .alarm{ animation:none; opacity:.9; } }

/* ── Screens (overlays) ───────────────────────────────────────────────────── */
.screen { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center; }
.screen[hidden]{ display:none; }

/* Title */
.screen-title { overflow:hidden; }
.title-art { position:absolute; inset:0; background:url('art/sky_title_1.png') center 28%/cover no-repeat;
  animation:slowdrift 26s ease-in-out infinite alternate; }
/* companion picker — collect pollinators with pollen, equip up to two */
.companions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:18px 0 0; }
.comp { --ch:#E0B028; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:76px;
  padding:9px 10px; border-radius:14px; background:var(--glass); border:1px solid var(--line);
  color:var(--cream); cursor:pointer; font-family:var(--sans); transition:transform .14s, border-color .2s, opacity .2s; }
.comp:hover { transform:translateY(-2px); }
.comp .comp-dot { width:14px; height:14px; border-radius:50%; background:var(--ch); box-shadow:0 0 10px var(--ch); }
.comp .comp-n { font-size:12px; font-weight:800; }
.comp .comp-s { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--mint); }
.comp.on { border-color:var(--ch); box-shadow:0 0 0 1px var(--ch), 0 8px 20px rgba(0,0,0,.3); }
.comp.locked { opacity:.5; cursor:default; }
.comp.locked .comp-s { color:var(--dim); }
@keyframes slowdrift { from{ transform:scale(1.06) translateY(0);} to{ transform:scale(1.12) translateY(-2%);} }
.title-scrim { position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 8%, transparent 30%, rgba(10,42,26,.55) 78%, rgba(10,42,26,.92) 100%),
    linear-gradient(180deg, rgba(10,42,26,.18) 0%, rgba(10,42,26,.0) 32%, rgba(10,42,26,.72) 78%, var(--deep) 100%); }
.title-inner { position:relative; z-index:2; max-width:560px; display:flex; flex-direction:column; align-items:center;
  padding-bottom:env(safe-area-inset-bottom); }
.brandline { font-size:11px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--cream);
  opacity:.82; margin-bottom:14px; }
.brandline b { color:var(--gold); letter-spacing:.18em; }
.logo { margin:0; font-weight:900; line-height:.86; letter-spacing:-.03em;
  font-size:clamp(52px,15vw,108px); text-transform:uppercase;
  background:linear-gradient(180deg, var(--cream), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55)); }
.logo span { display:block; background:linear-gradient(180deg, var(--mint), var(--leaf));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.tag { margin:16px auto 4px; max-width:34ch; font-size:clamp(14px,2.1vw,17px); font-weight:600; color:var(--cream);
  text-shadow:0 2px 10px rgba(0,0,0,.6); }

.yourmars { display:inline-flex; align-items:center; gap:18px; margin:22px 0 4px;
  padding:10px 22px; border-radius:16px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(8px); }
.ym-item { display:flex; flex-direction:column; line-height:1; }
.ym-num { font-size:24px; font-weight:900; color:var(--cream); font-variant-numeric:tabular-nums; }
.ym-lab { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--mint); margin-top:5px; }
.ym-sep { width:1px; height:30px; background:var(--line); }

.btn { font-family:var(--sans); font-weight:800; cursor:pointer; border:none; border-radius:40px;
  transition:transform .14s ease, box-shadow .2s ease, filter .2s; text-decoration:none; display:inline-block; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn-play { margin-top:26px; padding:16px 40px; font-size:17px; letter-spacing:.01em;
  color:var(--deep); background:linear-gradient(180deg, var(--gold), #c8901a);
  box-shadow:0 10px 30px rgba(224,176,40,.4), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-play:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(224,176,40,.5); filter:saturate(1.1); }

.hints { list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:7px;
  font-size:12.5px; color:var(--dim); }
.hints b { color:var(--mint); }

/* Bridge card */
.screen-bridge { background:rgba(6,20,14,.78); backdrop-filter:blur(10px); animation:fade .35s ease; }
@keyframes fade { from{opacity:0;} to{opacity:1;} }
.card { width:min(640px,94vw); border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(180deg, #143126, #0c2419); border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6); animation:rise .4s cubic-bezier(.2,.9,.2,1); }
@keyframes rise { from{ transform:translateY(24px) scale(.97); opacity:0;} to{ transform:none; opacity:1;} }
.card-art { width:100%; aspect-ratio:16/9; background-size:cover; background-position:center 36%; }
.card-body { padding:24px clamp(22px,4vw,38px) 28px; text-align:left; }
.card-kicker { font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.card-body h2 { margin:8px 0 10px; font-size:clamp(22px,3.4vw,30px); font-weight:900; letter-spacing:-.02em; line-height:1.06; color:var(--cream); }
.card-body p { margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--dim); max-width:48ch; }
.card-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-grow { padding:14px 28px; font-size:15px; color:var(--deep);
  background:linear-gradient(180deg, var(--mint), #3aa0a0); box-shadow:0 8px 24px rgba(112,200,200,.34); }
.btn-grow:hover { transform:translateY(-2px); }
.btn-ghost { padding:14px 22px; font-size:14px; color:var(--dim); background:transparent; border:1px solid var(--line); }
.btn-ghost:hover { color:var(--cream); border-color:var(--mint); }

/* Game over */
.screen-over { background:radial-gradient(120% 100% at 50% 0%, rgba(20,49,38,.7), rgba(6,20,14,.92)); backdrop-filter:blur(8px); animation:fade .4s ease; }
.over-inner { max-width:480px; display:flex; flex-direction:column; align-items:center; }
.over-kicker { font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--apple); }
.over-head { margin:8px 0 22px; font-size:clamp(30px,6vw,46px); font-weight:900; letter-spacing:-.025em;
  background:linear-gradient(180deg,var(--cream),var(--mint)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.over-stats { display:flex; gap:34px; margin-bottom:18px; }
.os { display:flex; flex-direction:column; line-height:1; }
.os-num { font-size:40px; font-weight:900; color:var(--cream); font-variant-numeric:tabular-nums; }
.os-lab { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--mint); margin-top:6px; }
.over-mars { font-size:14px; color:var(--dim); margin-bottom:26px; }
.over-mars b { color:var(--leaf); font-weight:800; }
.over-soil { margin-top:16px; font-size:13px; color:var(--dim); text-decoration:none; border-bottom:1px dashed var(--line); padding-bottom:2px; }
.over-soil:hover { color:var(--mint); border-color:var(--mint); }

@media (max-width:560px){
  .hud-num{ font-size:34px; }
  .yourmars{ gap:14px; padding:9px 16px; }
  .card-art{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion: reduce){
  .title-art{ animation:none; }
  .reserve-fill[data-low="true"]{ animation:none; box-shadow:0 0 7px rgba(184,24,40,.6); }
  .card{ animation:none; }
  .screen-bridge, .screen-over{ animation:none; }
}