/* ==========================================================================
   shell.css - v12: the app furniture, Duolingo school.

   A stat bar that never leaves (streak flame, pot, spares), white cards
   with soft borders, buttons with a hard bottom edge that physically
   press, a flat light tab bar, and a light title card.
   ========================================================================== */

#screen{padding:2px 14px 22px; width:100%; max-width:560px; margin:0 auto}
#screen.turn{animation:turn .24s var(--tap) both}
@keyframes turn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
#screen.turn-back{animation:turnb .24s var(--tap) both}
@keyframes turnb{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ------------------------------------------------------------------- boot */
#boot{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; background:var(--bg);
  transition:opacity .38s ease, visibility .38s}
#boot.gone{opacity:0; visibility:hidden; pointer-events:none}
#boot .mk{width:112px; height:112px; animation:bootmk .7s var(--pop) both}
@keyframes bootmk{from{opacity:0; transform:scale(.55)} to{opacity:1; transform:none}}
#boot .nm{font-family:"Nunito",sans-serif; font-weight:900; font-size:42px;
  letter-spacing:-.02em; color:var(--ink); animation:bootin .5s var(--pop) both .1s}
#boot .sub{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3); animation:bootin .5s var(--pop) both .18s}
@keyframes bootin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
#boot .bld{position:absolute; right:16px; bottom:calc(14px + env(safe-area-inset-bottom));
  font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:700;
  letter-spacing:.14em; color:var(--ink3)}
@media (prefers-reduced-motion:reduce){ #boot .mk,#boot .nm,#boot .sub{animation:none} }

/* ------------------------------------------------------------- front door
   #gate shipped with markup and JS and not one line of CSS, so on a fresh
   install it rendered as unstyled flow content in the middle of Today: an
   SVG with no width painted itself 393px wide, and the heading and the tap
   line landed under the nav bar. It is a door, so it behaves like one -
   fixed, full bleed, above everything except the boot card. */
#gate{position:fixed; inset:0; z-index:190; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; padding:32px 26px;
  padding-bottom:calc(32px + env(safe-area-inset-bottom));
  text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(120% 68% at 50% 24%, #FFF3D2, transparent 62%),
    radial-gradient(90% 50% at 50% 100%, #FFE6EE, transparent 70%),
    var(--bg);
  transition:opacity .5s var(--tap), transform .5s var(--tap)}
#gate .mk{width:min(38vw,132px); height:min(38vw,132px); flex:none;
  filter:drop-shadow(0 8px 20px rgba(226,168,20,.35));
  animation:gatemk .8s var(--pop) both}
#gate h1{margin:22px 0 0; font-family:"Nunito",sans-serif; font-weight:900;
  font-size:clamp(38px,12vw,52px); letter-spacing:-.035em; color:var(--ink);
  animation:gatein .55s var(--pop) both .12s}
#gate p{margin:8px 0 0; max-width:19ch; font-size:15.5px; font-weight:700;
  line-height:1.45; color:var(--ink2); text-wrap:balance;
  animation:gatein .55s var(--pop) both .2s}
#gate .go{margin-top:30px; padding:13px 26px; border-radius:999px;
  font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--goldInk);
  background:var(--goldSoft); border:1.5px solid var(--goldEdge);
  border-bottom-width:4px;
  animation:gatein .55s var(--pop) both .3s, gatepulse 2.4s ease-in-out 1.1s infinite}
#gate.going{opacity:0; transform:scale(1.06)}
@keyframes gatemk{from{opacity:0; transform:scale(.6) rotate(-24deg)} to{opacity:1; transform:none}}
@keyframes gatein{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes gatepulse{0%,100%{transform:none} 50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  #gate .mk,#gate h1,#gate p,#gate .go{animation:none}
}

/* ------------------------------------------------------ the stat bar (HUD) */
#hud{flex:none; z-index:30; display:flex; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 8px;
  width:100%; max-width:560px; margin:0 auto; background:var(--bg)}
.crest{position:relative; width:44px; height:44px; flex:none; border:0; padding:0;
  cursor:pointer; background:var(--card); border-radius:50%;
  border:2px solid var(--edge)}
.crest svg{width:40px; height:40px; transform:rotate(-90deg); display:block; margin:0 auto}
.crest circle{fill:none; stroke-width:4}
.crest .bg{stroke:var(--sunk)}
.crest .fg{stroke:var(--gold); stroke-linecap:round; transition:stroke-dasharray .9s var(--tap)}
.crest b{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Nunito",sans-serif; font-size:16px; font-weight:900; color:var(--ink)}
.crest.up{animation:crestpop .7s var(--pop)}
@keyframes crestpop{0%{transform:none}40%{transform:scale(1.22)}100%{transform:none}}
.hudgap{flex:1}
.chips{display:flex; gap:6px; flex:none}
.chip{display:flex; align-items:center; gap:6px; padding:6px 11px; border-radius:14px;
  background:var(--card); border:2px solid var(--edge); min-height:42px; color:var(--ink);
  font:inherit; cursor:pointer; transition:transform .12s var(--tap)}
.chip:active{transform:scale(.93)}
.chip svg{width:17px; height:17px; flex:none; display:block}
.chip b{font-family:"Nunito",sans-serif; font-size:15px; font-weight:900}
.chip.flame b{color:var(--flame)} .chip.gold b{color:var(--goldInk)} .chip.jade b{color:var(--greenInk)}
.chip.bump{animation:bump .5s var(--pop)}
@keyframes bump{0%{transform:none}35%{transform:scale(1.18)}100%{transform:none}}

/* --------------------------------------------------------------------- nav */
#nav{flex:none; z-index:40; display:flex; gap:2px;
  padding:6px 10px calc(8px + env(safe-area-inset-bottom));
  background:var(--card); border-top:2px solid var(--edge)}
#nav button{flex:1; border:0; background:none; padding:7px 2px 5px; min-height:54px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink3); font:inherit; font-family:"Nunito",sans-serif; font-size:10.5px;
  font-weight:800; letter-spacing:.03em; position:relative; border-radius:14px}
#nav button svg{width:24px; height:24px; display:block; position:relative; z-index:1}
#nav button span.lb{position:relative; z-index:1}
/* the active tab in a blue that reads at 10.5px: the brand blue is 2.4:1 on
   white, this is 5.7:1; at night the token flips to the bright one */
#nav button[aria-current="true"]{color:var(--navOn)}
#nav button[aria-current="true"]::before{content:""; position:absolute; inset:2px 6px;
  border-radius:14px; background:var(--blueSoft); border:2px solid #B8E5FB;
  animation:navin .22s var(--pop) both}
@keyframes navin{from{transform:scale(.85); opacity:0} to{transform:none; opacity:1}}
#nav button:active svg{transform:scale(.88); transition:transform .1s}
.badge{position:absolute; top:3px; right:calc(50% - 22px); min-width:18px; height:18px;
  border-radius:9px; background:var(--crit); color:#FFFFFF; font-family:"Nunito",sans-serif;
  font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--card); padding:0 4px; z-index:2}
.badge.pulse{animation:bpulse 1.9s ease-in-out infinite}
@keyframes bpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* ==================================================================== pieces */
.panel{background:var(--card); border:2px solid var(--edge); border-radius:var(--r2);
  padding:15px 16px; margin:12px 0; color:var(--ink)}
.panel.jade{border-color:#BEE8A0; background:var(--greenSoft)}
.panel.ember{border-color:#F5CF9B; background:var(--flameSoft)}
.panel.violet{border-color:#E3C6F8; background:var(--violetSoft)}
.panel.crit{border-color:#F5B9B9; background:var(--critSoft)}

.row{display:flex; gap:10px; align-items:flex-start; padding:10px 0;
  border-bottom:2px solid var(--sunk)}
.row:last-child{border-bottom:none}
.row b.k{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink3); flex:none; width:78px; padding-top:3px}
.row div{flex:1; min-width:0; font-size:14.5px}

.tag{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:8px;
  background:var(--sunk); color:var(--ink2); border:0; font-weight:700}
.tag.jade{background:var(--greenSoft); color:var(--greenInk)}
.tag.gold{background:var(--goldSoft); color:var(--goldInk)}
.tag.ember{background:var(--flameSoft); color:#B26800}
.tag.violet{background:var(--violetSoft); color:var(--violetInk)}
.tag.crit{background:var(--critSoft); color:#C0342F}

/* Buttons press. The bottom edge is the whole trick: 4px of darker colour
   that collapses under the thumb. */
button.btn{font:inherit; font-family:"Nunito",sans-serif; cursor:pointer; border-radius:16px;
  border:2px solid var(--edge); border-bottom-width:4px;
  background:var(--card); color:var(--ink2);
  padding:12px 15px; min-height:50px; font-weight:800; font-size:15px;
  letter-spacing:.02em; text-transform:uppercase;
  transition:transform .08s var(--tap), border-bottom-width .08s var(--tap)}
button.btn:active{transform:translateY(2px); border-bottom-width:2px}
button.btn.pri{background:#46A302; border-color:#3A8702; color:#FFFFFF}
button.btn.go{background:#1899D6; border-color:#137CB0; color:#FFFFFF}
button.btn.quiet{background:var(--card); border-color:var(--edge); color:var(--ink3);
  text-transform:none; font-weight:800}
button.btn[disabled]{opacity:.4; pointer-events:none}
.btns{display:flex; gap:9px; margin-top:12px; flex-wrap:wrap}
.btns button.btn{flex:1 1 auto; min-width:120px}
.btns.tight button.btn{min-height:42px; font-size:13px; padding:8px 12px}

input[type=text],input[type=number],textarea{width:100%; font:inherit; padding:13px 14px;
  border-radius:14px; border:2px solid var(--edge2); background:var(--card); color:var(--ink);
  resize:vertical; font-size:16px; font-weight:600}
textarea{min-height:70px}
input:focus,textarea:focus{outline:none; border-color:var(--blue)}
input::placeholder,textarea::placeholder{color:var(--ink3)}

/* a flame with no live run sits grey until the next full day relights it */
.chip.cold b{color:var(--ink3)}
.chip.cold svg{opacity:.4; filter:grayscale(1)}

/* at record pace the flame wears gold - he is racing his own best self */
.chip.record{background:var(--goldSoft); border-color:#EDD27E}
.chip.record b{color:var(--goldInk)}