/* BLIP — plum dusk, a breathing sun, one mint comet. */
:root{
  --sky0:#241B3D; --sky1:#5A3D6E;
  --sun-out:#FFD98A; --sun-core:#FF8E6B; --crest:#FF5D73;
  --mint:#9BF0DF; --gold:#FFC94D; --cool:#7BE0FF; --scar:#F4A6B8;
  --ink:#F5EFFF; --ink-dim:rgba(245,239,255,.62);
  --disp:'Bungee', 'Arial Black', sans-serif;
  --mono:'Chivo Mono', ui-monospace, Menlo, monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:linear-gradient(180deg, var(--sky0) 0%, var(--sky1) 100%);
  color:var(--ink); font-family:var(--mono);
  overflow:hidden; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:var(--mono); }
a{ color:var(--ink-dim); }
button{ font-family:inherit; cursor:pointer; color:inherit; }
[hidden]{ display:none !important; }

#game{
  position:fixed; inset:0; width:100%; height:100%; display:block;
  touch-action:none; outline:none;
}

/* ============ screens (overlays) ============ */
.screen{
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; z-index:10;
}

/* ---------- intro ---------- */
.intro{ justify-content:space-between; text-align:center; pointer-events:none;
  padding:max(18px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom)); }
.intro button, .intro a{ pointer-events:auto; }
.intro-top{ padding-top:4vh; }
.kicker{ font-weight:700; font-size:.85rem; letter-spacing:.3em; color:var(--gold); }
.wordmark{
  font-family:var(--disp); font-weight:400; font-size:clamp(3.6rem,17vw,6.2rem);
  line-height:1; color:var(--mint); margin:6px 0 10px;
  text-shadow:0 0 26px rgba(155,240,223,.45), 0 4px 0 rgba(0,0,0,.25);
}
.rule{ font-size:1.02rem; color:var(--ink-dim); letter-spacing:.02em; }
.intro-mid{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.play-btn{
  font-family:var(--disp); font-size:1.9rem; letter-spacing:.02em;
  color:#241B3D; background:var(--mint); border:none; border-radius:50%;
  width:148px; height:148px; line-height:1;
  box-shadow:0 0 0 6px rgba(155,240,223,.2), 0 0 44px rgba(155,240,223,.35), 0 8px 0 rgba(0,0,0,.28);
  transition:transform .09s;
}
.play-btn:active{ transform:scale(.94); }
.daily-btn{
  display:flex; flex-direction:column; gap:2px; align-items:center;
  min-height:52px; padding:9px 26px; background:rgba(27,19,48,.6);
  border:2px solid var(--gold); border-radius:16px; color:var(--gold);
  font-weight:700; letter-spacing:.12em; transition:transform .09s;
}
.daily-btn:active{ transform:scale(.96); }
.daily-btn.locked{ border-color:rgba(255,201,77,.4); color:rgba(255,201,77,.55); }
.daily-label{ font-size:.95rem; }
.daily-sub{ font-size:.68rem; letter-spacing:.2em; opacity:.85; }
.intro-bot{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:min(430px, 96vw); margin:0 auto; padding:14px 14px 8px;
  background:rgba(27,19,48,.5); border-radius:22px 22px 14px 14px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.stats{ display:flex; gap:26px; }
.stat{ display:flex; flex-direction:column; gap:1px; font-size:.62rem; letter-spacing:.22em;
  color:var(--ink-dim); }
.stat b{ font-size:1.15rem; letter-spacing:.04em; color:var(--ink); font-weight:700; }
.medal-shelf{ display:flex; gap:14px; }
.medal{ display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.5rem; letter-spacing:.16em; color:var(--ink-dim); }
.medal i{ width:17px; height:17px; border-radius:50%; border:2px solid rgba(245,239,255,.25); }
.medal.got{ color:var(--gold); }
.medal.got i{ border-color:var(--gold); background:radial-gradient(circle at 34% 30%, #ffe9b0, var(--gold)); box-shadow:0 0 10px rgba(255,201,77,.5); }
.chip-row{ display:flex; gap:10px; }
.chip{
  min-height:44px; min-width:44px; padding:10px 18px; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; color:var(--ink); background:rgba(27,19,48,.55);
  border:1px solid rgba(245,239,255,.28); border-radius:999px;
}
.chip:active{ background:rgba(27,19,48,.8); }
.foot{ font-size:.7rem; color:var(--ink-dim); padding-bottom:2px; }

/* ---------- results ---------- */
.results{ justify-content:flex-end; z-index:20; }
.res-top{
  position:absolute; top:0; left:0; right:0; height:60%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; text-align:center; padding:14px;
  background:linear-gradient(180deg, rgba(20,14,38,.72) 0%, rgba(20,14,38,.35) 78%, transparent 100%);
}
.res-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--ink-dim); }
.res-score{ font-family:var(--disp); font-size:clamp(3.6rem,19vw,6.4rem); line-height:1;
  color:var(--gold); text-shadow:0 0 30px rgba(255,201,77,.4); }
.res-medal{ font-weight:700; font-size:.9rem; letter-spacing:.3em; color:#241B3D;
  background:var(--gold); border-radius:8px; padding:5px 14px; transform:rotate(-3deg);
  box-shadow:0 3px 0 rgba(0,0,0,.3); }
.res-medal.solar{ background:var(--crest); color:#fff; }
.res-stats{ font-size:.85rem; color:var(--ink); }
.res-margin{ font-size:.78rem; color:var(--scar); }
.res-best{ font-size:.78rem; font-weight:700; letter-spacing:.18em; color:var(--ink-dim); }
.res-best.newbest{ color:var(--mint); }
.share-btn{
  margin-top:8px; font-family:var(--disp); font-size:1rem; letter-spacing:.04em;
  color:#241B3D; background:var(--mint); border:none; border-radius:14px;
  min-height:50px; padding:13px 34px; box-shadow:0 5px 0 rgba(0,0,0,.3);
  transition:transform .08s;
}
.share-btn:active{ transform:translateY(3px); }
.retry{
  position:absolute; left:0; right:0; bottom:0; height:40%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-top:2px dashed rgba(155,240,223,.55);
  background:linear-gradient(180deg, rgba(27,19,48,.42), rgba(27,19,48,.6));
  cursor:pointer;
}
.retry:active{ background:linear-gradient(180deg, rgba(27,19,48,.6), rgba(27,19,48,.75)); }
.retry-label{ font-family:var(--disp); font-size:clamp(1.7rem,8vw,2.6rem); color:var(--mint);
  text-shadow:0 0 22px rgba(155,240,223,.55), 0 3px 0 rgba(0,0,0,.4); }
.retry-sub{ font-size:.68rem; letter-spacing:.26em; color:var(--ink-dim); }
.daily-end{
  position:absolute; left:0; right:0; bottom:0; height:40%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  border-top:2px dashed rgba(255,201,77,.5);
  background:linear-gradient(180deg, rgba(27,19,48,.42), rgba(27,19,48,.6));
}
#resCountdown{ font-size:.85rem; font-weight:700; letter-spacing:.18em; color:var(--gold); }
.endless-btn{
  font-family:var(--disp); font-size:1.1rem; color:#241B3D; background:var(--mint);
  border:none; border-radius:14px; min-height:50px; padding:13px 38px;
  box-shadow:0 5px 0 rgba(0,0,0,.3); transition:transform .08s;
}
.endless-btn:active{ transform:translateY(3px); }

/* ---------- achievements sheet ---------- */
.sheet{ position:fixed; inset:0; z-index:40; display:flex; align-items:center;
  justify-content:center; background:rgba(20,14,38,.8); padding:18px; }
.sheet-card{
  width:min(430px, 94vw); max-height:84svh; overflow-y:auto;
  background:var(--sky0); border:2px solid rgba(155,240,223,.3); border-radius:20px;
  padding:20px 18px; display:flex; flex-direction:column; gap:12px; align-items:center;
}
.sheet-title{ font-family:var(--disp); font-size:1.4rem; color:var(--mint); }
.ach-list{ list-style:none; width:100%; display:flex; flex-direction:column; gap:7px; }
.ach-list li{ display:flex; gap:10px; align-items:baseline; font-size:.74rem;
  color:var(--ink-dim); padding:7px 10px; border-radius:10px; background:rgba(245,239,255,.05); }
.ach-list li b{ min-width:104px; letter-spacing:.06em; color:var(--ink-dim); }
.ach-list li.got{ background:rgba(255,201,77,.1); }
.ach-list li.got b{ color:var(--gold); }

/* ---------- veil + toast ---------- */
.veil{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(20,14,38,.78); font-weight:700; letter-spacing:.3em; font-size:.95rem; }
.toast{
  position:fixed; top:max(14px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:70; background:rgba(20,14,38,.94); border:1px solid var(--gold); color:var(--gold);
  font-size:.74rem; font-weight:700; letter-spacing:.14em;
  padding:11px 18px; border-radius:999px; pointer-events:none;
  animation:toastin .25s ease-out; max-width:92vw; text-align:center;
}
@keyframes toastin{ from{ transform:translate(-50%,-16px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }

.sharecard{ position:fixed; left:-2000px; top:0; width:1080px; height:1080px; }

/* short screens (landscape phones): keep the whole results payoff on-screen.
   Anchor to the top (overflow clips into the bottom gradient, not off the top). */
@media (max-height:520px){
  .res-top{
    justify-content:flex-start; gap:3px;
    padding-top:max(8px, env(safe-area-inset-top));
  }
  .res-kicker{ font-size:.58rem; letter-spacing:.22em; }
  .res-score{ font-size:clamp(2rem,15vh,3.4rem); }
  .res-medal{ font-size:.68rem; padding:3px 10px; }
  .res-stats{ font-size:.72rem; }
  .res-margin,.res-best{ font-size:.66rem; }
  .share-btn{ margin-top:2px; min-height:44px; padding:9px 26px; font-size:.85rem; }
  #menuBtn{ min-height:44px; padding:8px 16px; font-size:.62rem; }
  .daily-end{ gap:8px; }
  .endless-btn{ min-height:44px; padding:9px 30px; font-size:.95rem; }
}

/* squarish foldables / short screens: tighten the intro stack */
@media (max-height:760px){
  .intro-top{ padding-top:1.5vh; }
  .wordmark{ font-size:clamp(3rem,11vw,4.4rem); }
  .play-btn{ width:118px; height:118px; font-size:1.5rem; }
  .stats{ gap:20px; }
}
/* ---------- breathing (menus never sit dead) ---------- */
@media (prefers-reduced-motion: no-preference){
  .wordmark{ animation:markglow 3.6s ease-in-out infinite; }
  .play-btn{ animation:playbreathe 2.6s ease-in-out infinite; }   /* glow only — :active keeps its squash */
  .retry-label{ animation:retrypulse 1.15s ease-in-out infinite; }
  .retry{ animation:retryedge 1.15s ease-in-out infinite; }
  .res-score.done{ animation:scorepop .34s cubic-bezier(.2,1.7,.4,1); }
  #resCountdown{ animation:cdglow 2.8s ease-in-out infinite; }
}
@keyframes markglow{
  0%,100%{ text-shadow:0 0 26px rgba(155,240,223,.45), 0 4px 0 rgba(0,0,0,.25); }
  50%{ text-shadow:0 0 44px rgba(155,240,223,.8), 0 4px 0 rgba(0,0,0,.25); }
}
@keyframes playbreathe{
  0%,100%{ box-shadow:0 0 0 6px rgba(155,240,223,.2), 0 0 44px rgba(155,240,223,.35), 0 8px 0 rgba(0,0,0,.28); }
  50%{ box-shadow:0 0 0 10px rgba(155,240,223,.14), 0 0 62px rgba(155,240,223,.5), 0 8px 0 rgba(0,0,0,.28); }
}
@keyframes retrypulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}
@keyframes retryedge{
  0%,100%{ border-top-color:rgba(155,240,223,.55); }
  50%{ border-top-color:rgba(155,240,223,.9); }
}
@keyframes scorepop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.14); }
  100%{ transform:scale(1); }
}
@keyframes cdglow{
  0%,100%{ opacity:1; }
  50%{ opacity:.65; }
}

@media (prefers-reduced-motion: reduce){
  .toast{ animation:none; }
  *{ transition:none !important; }
}