/* ==========================================================================
   scene.css - v12: the daily session.

   The greeting, the sky card, the week strip, three pressable quest rows,
   and the chest that fills as they land. Duolingo-school physics: every
   interactive element has a bottom edge that collapses under the thumb.
   ========================================================================== */

/* Today is a scroller like every other tab; nothing about it is a flex column. */

/* the greeting */
.hello{text-align:left; margin:4px 2px 8px}
.ask{font-family:"Nunito",sans-serif; font-weight:900; font-size:26px;
  letter-spacing:-.015em; margin:0; line-height:1.12; color:var(--ink); text-wrap:balance}
.ask.gold{color:var(--ink)}
.asksub{font-size:14.5px; font-weight:700; color:var(--ink2); margin:5px 0 0}

/* ------------------------------------------------------------ the month, filed
   Shows once when a month closes, then lives on the shelf in You. */
.mrecap{background:var(--card); border:2px solid var(--edge); border-bottom-width:5px;
  border-radius:18px; padding:13px 14px; margin:0 0 10px}
.mrecap b{display:block; font-family:"Nunito",sans-serif; font-size:16px; font-weight:900}
.mrecap > span{display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-top:2px}
.mrecap .mles{display:block; margin-top:8px; padding:8px 11px; border-radius:11px;
  background:var(--goldSoft); color:var(--goldInk); font-size:12.5px; font-weight:800}
.mrecap .mok{margin-top:10px; font:900 13px/1 "Nunito",sans-serif; color:#FFFFFF;
  background:#46A302; border:0; border-bottom:3px solid #3A8702; border-radius:11px;
  padding:9px 14px 8px; cursor:pointer;
  transition:transform .08s var(--tap), border-bottom-width .08s var(--tap)}
.mrecap .mok:active{transform:translateY(2px); border-bottom-width:1px}

/* ------------------------------------------------------------- the sky card
   The one place the hour still paints. */
.skycard{display:flex; align-items:center; gap:14px; padding:12px 16px;
  border-radius:var(--r2); margin:0 0 8px;
  background:linear-gradient(135deg, var(--sky1), var(--sky2));
  border:2px solid rgba(0,0,0,.08);
  transition:background 1.6s linear}
.skycard svg{width:108px; height:56px; flex:none; display:block}
.skycard .arc{fill:none; stroke:color-mix(in srgb, var(--skyInk) 38%, transparent);
  stroke-width:2.5; stroke-linecap:round; stroke-dasharray:.1 7}
.skycard .band{fill:none; stroke:#8F7BFF; stroke-width:5; stroke-linecap:round; opacity:.95}
.skycard .orb{fill:#FFD335; stroke:#F59E1B; stroke-width:2}
.skycard .orb.moon{fill:#FFF6E8; stroke:#D9CBEB; stroke-width:2}
.skycard .ray{stroke:#FFD335; stroke-width:2.6; stroke-linecap:round}
.skycard .cut{fill:var(--sky2); transition:fill 1.6s linear}
.skycard .skybd{flex:1; min-width:0; color:var(--skyInk); transition:color 1.6s linear}
.skycard .skybd b{display:block; font-family:"Nunito",sans-serif; font-weight:900; font-size:16px}
.skycard .skybd span{display:block; font-family:"JetBrains Mono",monospace; font-size:10px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.75; margin-top:3px}

/* ------------------------------------------------------------ the week strip */
.week{display:flex; gap:6px; margin:0 0 10px}
.wd{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 0 7px; border-radius:14px; background:var(--card); border:2px solid var(--edge)}
.wd i{width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--sunk); color:transparent}
.wd b{font-family:"Nunito",sans-serif; font-size:10px; font-weight:900; color:var(--ink3);
  letter-spacing:.04em}
.wd.on i{background:var(--green); color:#FFFFFF}
.wd.on{border-color:#BEE8A0; background:var(--greenSoft)}
.wd.on b{color:var(--greenInk)}
.wd.ice i{background:var(--blueSoft); color:var(--blue)}
.wd.now{border-color:var(--gold); border-width:2.5px}
.wd.off{opacity:.45}

/* --------------------------------------------------------- the three quests */
.quests{display:flex; flex-direction:column; gap:9px; margin:2px 0 10px}
.pil{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  font:inherit; font-family:"Nunito",sans-serif; cursor:pointer;
  padding:12px 14px; min-height:73px; border-radius:18px;
  background:var(--card); color:var(--ink);
  border:2px solid var(--edge); border-bottom-width:5px;
  transition:transform .08s var(--tap), border-bottom-width .08s var(--tap),
    background .25s, border-color .25s}
.pil:active{transform:translateY(3px); border-bottom-width:2px}
.qic{flex:none; width:48px; height:48px; border-radius:15px; display:flex;
  align-items:center; justify-content:center; background:var(--pil); color:#FFFFFF}
.qbd{flex:1; min-width:0}
.qbd b{display:block; font-size:17px; font-weight:900; letter-spacing:-.01em}
.qbd span{display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-top:1px}
.qst{flex:none; display:flex; align-items:center; gap:3px; padding:4px 8px;
  border-radius:10px; background:var(--flameSoft); color:#B26800;
  font-size:12px; font-weight:900}
.qst svg{color:var(--flame)}
.qchk{flex:none; width:34px; height:34px; border-radius:11px;
  border:2.5px solid var(--edge2); background:var(--card); color:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  transition:all .22s var(--pop)}
.pil.on{background:var(--greenSoft); border-color:#BEE8A0}
.pil.on .qchk{background:var(--green); border-color:var(--greenEdge)}
.pil.on .qbd b{color:var(--greenInk)}
.pil.carried{opacity:.6}
.pil.carried .qic{background:var(--sunk); color:var(--ink3)}

/* the row the hour points at: it wears the pill and speaks a real tip */
.pil.up{border-color:#A6DFF7; background:var(--blueSoft)}
.pil.up .qbd span{color:var(--ink)}
.now{display:inline-block; vertical-align:2px; margin-left:7px; padding:2.5px 7px;
  border-radius:8px; background:#0E6C9E; color:#FFFFFF; font-size:10px;
  font-weight:900; font-style:normal; letter-spacing:.09em; text-transform:uppercase}
.pil.pop .qchk{animation:qpop .45s var(--pop)}
@keyframes qpop{0%{transform:scale(1)}45%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1)}}

/* ---------------------------------------------------------------- the chest */
.gem{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  font:inherit; font-family:"Nunito",sans-serif; padding:12px 14px;
  border-radius:18px; border:2px solid var(--edge); border-bottom-width:5px;
  background:var(--card); color:var(--ink); flex-wrap:wrap}
button.gem{cursor:pointer; transition:transform .08s var(--tap), border-bottom-width .08s var(--tap)}
button.gem:active{transform:translateY(3px); border-bottom-width:2px}
.gem .gcore{position:relative; flex:none; width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sunk); color:var(--ink3)}
.gem.won{background:var(--goldSoft); border-color:#EDD27E}
.gem.won .gcore{background:var(--gold); color:var(--goldInk);
  animation:gemwiggle 2.4s ease-in-out infinite}
@keyframes gemwiggle{0%,100%{transform:rotate(0)}6%{transform:rotate(-5deg) scale(1.05)}
  12%{transform:rotate(4deg)}18%{transform:rotate(-2deg)}24%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){ .gem.won .gcore{animation:none} }
.gem .gn{position:absolute; top:-8px; right:-8px; min-width:24px; height:24px;
  border-radius:12px; padding:0 6px; display:grid; place-items:center;
  background:var(--crit); color:#FFFFFF; border:2.5px solid var(--card);
  font-size:12px; font-weight:900}
.gem .gbd{flex:1; min-width:0}
.gem .gbd b{display:block; font-size:16px; font-weight:900}
.gem .dcount{display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-top:1px}
.gem .dcount i{font-style:normal}
.gem.won .gbd b{color:var(--goldInk)}
.gem .gbar{flex:1 0 100%; height:12px; border-radius:8px; background:var(--sunk);
  overflow:hidden; margin-top:2px}
.gem .gbar i{display:block; height:100%; border-radius:8px; background:var(--green);
  transition:width .5s var(--pop); min-width:0}

/* ------------------------------------------------------------ the side quest
   One held card asks something of him. Dashed border: a dare, not a duty. */
.quest{display:flex; align-items:center; gap:11px; padding:9px 12px; margin-top:9px;
  border-radius:16px; background:var(--card); border:2px dashed var(--edge2)}
.quest .qgl{flex:none; width:40px; height:40px; border-radius:12px; background:var(--goldSoft);
  display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1}
.quest .qgl.zh{font-size:19px; font-weight:700; color:var(--goldInk)}
.quest .qtx{flex:1; min-width:0}
.quest .qtx b{display:block; font-size:10.5px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; color:var(--goldInk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.quest .qtx > span{display:block; font-size:12.5px; font-weight:700; color:var(--ink2);
  margin-top:2px; line-height:1.32}
.quest .qact{flex:none; display:flex; flex-direction:column; gap:3px; align-items:stretch}
.quest .qgo{font:900 12.5px/1 "Nunito",sans-serif; color:#FFFFFF; background:#46A302;
  border:0; border-bottom:3px solid #3A8702; border-radius:11px; padding:9px 13px 8px;
  cursor:pointer; transition:transform .08s var(--tap), border-bottom-width .08s var(--tap)}
.quest .qgo:active{transform:translateY(2px); border-bottom-width:1px}
.quest .qswap{font:800 11px/1 "Nunito",sans-serif; color:var(--ink3); background:none;
  border:0; padding:5px 2px 3px; cursor:pointer}
.quest.qdone{border-style:solid; background:var(--goldSoft); border-color:#EDD27E}
.quest .qwin{flex:none; width:34px; height:34px; border-radius:11px; background:var(--gold);
  color:var(--goldInk); display:flex; align-items:center; justify-content:center}

/* ------------------------------------------------------------- the entrance */
#screen.arrive .hello{animation:riseup .4s var(--pop) both}
#screen.arrive .skycard{animation:riseup .4s var(--pop) both .06s}
#screen.arrive .week{animation:riseup .4s var(--pop) both .12s}
#screen.arrive .pil:nth-child(1){animation:riseup .4s var(--pop) both .18s}
#screen.arrive .pil:nth-child(2){animation:riseup .4s var(--pop) both .24s}
#screen.arrive .pil:nth-child(3){animation:riseup .4s var(--pop) both .30s}
#screen.arrive .gem{animation:riseup .4s var(--pop) both .38s}
#screen.arrive .quest{animation:riseup .4s var(--pop) both .46s}
@keyframes riseup{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  #screen.arrive .hello,#screen.arrive .skycard,#screen.arrive .week,
  #screen.arrive .pil,#screen.arrive .gem,#screen.arrive .quest{animation:none !important}
}

/* the burst a quest makes when it lands */
.mote{position:fixed; width:8px; height:8px; border-radius:50%; pointer-events:none;
  z-index:160; animation:mote .62s cubic-bezier(.15,.65,.35,1) both}
@keyframes mote{from{opacity:1; transform:translate(0,0) scale(1)}
  to{opacity:0; transform:translate(var(--mx), var(--my)) scale(.4)}}

/* small phones */
@media (max-height:740px){
  .ask{font-size:22px}
  .pil{min-height:66px; padding:10px 12px}
  .qic{width:42px; height:42px}
  .skycard{padding:9px 14px}
  .skycard svg{width:92px; height:48px}
  .quest{padding:8px 10px; margin-top:8px}
  .quest .qgl{width:34px; height:34px; font-size:19px}
}

/* ==========================================================================
   v34 - the sky is the header, and the three things are three tiles.
   ========================================================================== */
.skycard{flex-direction:column; align-items:stretch; gap:0; padding:0; margin:0 -14px 12px;
  border-radius:0 0 28px 28px; border:0; border-bottom:3px solid rgba(0,0,0,.12);
  box-shadow:0 18px 30px -22px rgba(0,0,0,.5)}
.skycard svg{width:100%; height:94px; padding:6px 18px 0}
.skycard .arc{stroke-width:2; stroke-dasharray:.1 6}
.skycard .band{stroke-width:6}
.skycard .orb{r:7}
.skycard .ray{stroke-width:2.2}
.skycard .skybd{padding:0 18px 16px; display:block}
.skycard .skybd i{display:block; font-family:"JetBrains Mono",monospace; font-style:normal;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.72; margin:0 0 4px}
.skycard .skybd b{font-size:22px; line-height:1.12; letter-spacing:-.02em; text-wrap:balance}
.skycard .skybd span{margin:3px 0 0; font-family:"Nunito",sans-serif; font-size:13px;
  font-weight:700; letter-spacing:0; text-transform:none; opacity:.82}
.hello{margin:6px 2px 10px}
.ask{font-size:24px}
.quests{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:4px 0 6px}
.pil{flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:14px 8px 12px; min-height:128px; border-radius:20px; position:relative}
.qic{width:46px; height:46px; border-radius:15px}
.qbd b{font-size:14px}
.qbd span{display:none}
.qst{position:absolute; top:8px; right:8px; padding:3px 6px; font-size:10.5px; border-radius:8px}
.qchk{position:absolute; top:8px; left:8px; width:24px; height:24px; border-radius:8px; border-width:2px}
.qchk svg{width:14px; height:14px}
.now{display:block; margin:0; padding:2.5px 7px; font-size:9px}
.qbd b .now{display:block; margin:4px auto 0; width:max-content}
.uptip{margin:0 2px 10px; font-size:13px; font-weight:700; color:var(--ink2); text-align:center; text-wrap:balance}
@media (max-height:740px){ .pil{min-height:112px} .skycard svg{height:82px} }

/* v34b: the last seven days are seven marks, not seven cards */
.week{gap:7px; margin:12px 0 12px}
.wd{padding:0; border:0; background:none; gap:5px}
.wd i{width:100%; max-width:34px; height:26px; border-radius:9px; background:var(--sunk);
  border:1.5px solid var(--edge)}
.wd i svg{width:13px; height:13px}
.wd.on i{background:var(--green); border-color:#3E8F4B; color:#fff}
.wd.on{background:none}
.wd.ice i{background:var(--blueSoft); border-color:#A8DFFA; color:var(--blue)}
.wd.now i{box-shadow:0 0 0 2.5px var(--gold)}
.wd.now{border:0}

/* ==================================================================== v39
   The sky card stopped counting and started instructing, so it carries the
   one action that lives on another tab. A pill, not a slab: the card is a
   watch face and the button is a hand on it. */
.skycard .skybd .skygo{display:inline-block; margin:8px 0 0; padding:9px 14px; min-height:38px;
  border-radius:12px; border:0; cursor:pointer;
  background:color-mix(in srgb, var(--skyInk) 92%, transparent);
  color:var(--sky2); font:900 12.5px/1 "Nunito",sans-serif; letter-spacing:.01em}
.skycard .skybd .skygo:active{transform:translateY(1px)}
@media (max-width:360px){ .skycard .skybd .skygo{font-size:12px; padding:8px 12px} }
/* a day in the air: not a miss, and it carries the run like a freeze */
.wd.jet i{background:var(--violetSoft); border-color:#D9B8F5; color:var(--violetInk)}

/* the city on the sky line, which is also how you correct it */
.skycard .skybd i .skyloc{font:inherit; color:inherit; background:none; padding:0 1px;
  border:0; border-bottom:1.5px dotted currentColor; cursor:pointer; letter-spacing:inherit}
.skycard .skybd i .skyloc:active{opacity:.6}
/* still only a guess from the clock: it wears the pin, and the tap asks the phone */
.skycard .skybd i .skyloc.ask{border-bottom:0; padding:3px 7px 3px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--skyInk) 14%, transparent); display:inline-flex;
  align-items:center; gap:3px}
.skycard .skybd i .skyloc .lm{display:inline-flex}
.skycard .skybd i .skyloc .lm svg{width:12px; height:12px; display:block}