/* LOCK IN — the page around the app: base, first-time setup, drawer pieces, the big three. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0a0d;color:#f0f0ff;font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif}
#app{position:fixed;inset:0}
.lia-host{position:absolute;inset:0}
.lis-loading{position:absolute;inset:0;display:grid;place-items:center;font:700 22px "Barlow Condensed",Bahnschrift,"Segoe UI",sans-serif;letter-spacing:.3em;color:#f2c35b;opacity:.6}
.muted{color:rgba(240,240,255,.55)}

/* first time */
.lis-setup{position:absolute;inset:0;display:grid;place-items:center;padding:16px;overflow:auto}
.lis-setup-bg{position:fixed;inset:0;background:url(/scene.jpg) center 35%/cover;filter:brightness(.55) saturate(.9)}
.lis-setup-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.2),rgba(0,0,0,.7))}
.lis-card{position:relative;width:min(520px,100%);padding:30px 28px;border-radius:22px;background:rgba(12,14,20,.72);border:1px solid rgba(127,224,255,.35);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:14px;
  font-family:"Barlow Condensed",Bahnschrift,"Segoe UI",sans-serif;letter-spacing:.02em}
.lis-card h1{margin:4px 0 0;font-size:28px;line-height:1.15;font-weight:700}
.lis-card p{margin:0;font-family:"Segoe UI",sans-serif;letter-spacing:0;font-size:15px;line-height:1.55;color:rgba(240,240,255,.78)}
.lis-card label{font-size:12px;letter-spacing:.24em;color:#7fe0ff;margin-top:6px}
.lis-card input{height:52px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);color:#fff;
  font:16px "Segoe UI",sans-serif;outline:none}
.lis-card input:focus{border-color:#7fe0ff;box-shadow:0 0 0 3px rgba(127,224,255,.18)}
.lis-card .lia-go{min-width:0;width:100%}
.lis-err{min-height:18px;font:14px "Segoe UI",sans-serif;color:#ff8a7e}
.lis-small{font:13px "Segoe UI",sans-serif;color:rgba(240,240,255,.5)}
.lia-brand.big{font-size:20px;margin:0}

/* the big three in the top bar */
.lia-chip.lia-big{height:48px;padding:0 14px}
.lia-chip.lia-big b{font-size:24px}
.lia-chip.lia-big span{line-height:1.05}
.lia-fire{font-size:18px;filter:grayscale(1) opacity(.5)}
.lia-streak.hot .lia-fire{filter:none}
.lia-streak.hot{border-color:rgba(255,150,60,.55);box-shadow:0 0 18px rgba(255,140,40,.25)}

/* drawer pieces */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:none;border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:5px 12px;color:rgba(240,240,255,.75);cursor:pointer;font:12.5px "Segoe UI",sans-serif;text-decoration:none}
.chip:hover{border-color:rgba(255,255,255,.4);color:#fff}
.li-knob{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.li-knob>span{color:rgba(240,240,255,.72);font-size:13.5px;line-height:1.45}
.li-habits{display:flex;flex-direction:column;gap:6px;width:100%}
.li-habit{display:flex;align-items:center;gap:8px}
.li-habit em{font:normal 11px "Barlow Condensed",Bahnschrift,sans-serif;letter-spacing:.1em;color:#f2c35b;width:22px}
.li-habit input{flex:1;height:34px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.3);color:#fff;font:14px "Segoe UI",sans-serif}
.li-habit.add input{border-style:dashed}
.li-chain{display:flex;flex-wrap:wrap;gap:6px}
.li-link{display:inline-flex;flex-direction:column;align-items:center;min-width:44px;padding:6px 6px 4px;border:1px solid rgba(255,255,255,.14);border-radius:9px;font-size:15px;color:rgba(240,240,255,.7)}
.li-link i{font-style:normal;font-size:10.5px;color:rgba(240,240,255,.45);margin-top:2px}
.li-link.climb{color:#fff}.li-link.locked{border-color:#f6b93b}.li-link.slip{border-color:#f87171;color:#f87171}
.li-today{background:rgba(12,14,20,.58);border:1px solid rgba(255,255,255,.09);border-left:3px solid #f2c35b;border-radius:12px;padding:12px 14px;backdrop-filter:blur(10px)}

@media (max-width:900px){
  .lia-top{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .lia-chips{order:3;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px}
  .lia-lv,.lia-today{display:none!important}
  .lia-chip.lia-big{height:46px;padding:0 8px;gap:6px;justify-content:center}
  .lia-chip.lia-big b{font-size:20px}
  .lia-chip.lia-big span{display:inline!important;font-size:9px;letter-spacing:.1em}
  .lia-chip.lia-big .lia-ic{font-size:13px}
  .lia-chip.lia-coins{height:46px;padding:0 10px}
  .lia-hello{top:126px;left:16px}
  .lia-step b{font-size:44px}
  .lia-bottom{left:12px;right:12px;bottom:14px;gap:10px}
  .lia-go{min-width:0;width:100%;height:62px;padding:0 16px}
  .lia-go span{font-size:21px;letter-spacing:.12em;white-space:nowrap}
  .lia-pill{height:44px;padding:0 14px;font-size:14px;justify-content:center}
  .lis-integrity{top:118px;padding:.6em 1em}
  .lis-stress{top:180px}
  .lis-callout{max-width:240px}
}

/* ---- 2026-10-22 upgrades ---- */
/* the streak is the hero */
.lia-hello{top:86px}
.lia-streak{position:relative;display:flex;align-items:center;gap:12px}
.lia-flame{font-size:54px;line-height:1;filter:grayscale(1) brightness(.7);transition:filter .3s}
.lia-streak.hot .lia-flame{filter:drop-shadow(0 0 14px rgba(255,140,40,.8))}
.lia-streakn{font:700 96px/0.9 "Barlow Condensed",Bahnschrift,sans-serif;color:#fff6e2;text-shadow:0 4px 24px rgba(0,0,0,.55)}
.lia-streak div{display:flex;flex-direction:column;gap:4px}
.lia-streak i{font-style:normal;font:600 17px "Barlow Condensed",sans-serif;letter-spacing:.22em;color:#ffd78a}
.lia-streak small{font:500 13px "Segoe UI",sans-serif;color:rgba(255,236,210,.7);letter-spacing:0}
.lia-plus{position:absolute;left:58px;top:-6px;font:700 34px "Barlow Condensed",sans-serif;font-style:normal;color:#ffb347;opacity:0;pointer-events:none;text-shadow:0 0 16px rgba(255,150,50,.9)}
.lia-streak.burst .lia-flame{animation:liFlame 1.2s ease}
.lia-streak.burst .lia-plus{animation:liPlus 1.4s ease}
.lia-streak.burst .lia-streakn{animation:liPop .9s ease}
@keyframes liFlame{0%{transform:scale(1)}30%{transform:scale(1.6) rotate(-6deg)}60%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes liPlus{0%{opacity:0;transform:translateY(10px)}25%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}
@keyframes liPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.lia-week{display:flex;gap:7px;margin:14px 0 14px}
.lia-week span{display:flex;flex-direction:column;align-items:center;gap:5px}
.lia-week i{font:600 11px "Barlow Condensed",sans-serif;font-style:normal;letter-spacing:.1em;color:rgba(255,236,210,.6)}
.lia-week em{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.lia-week .on em{background:linear-gradient(180deg,#ffd77a,#e0912a);border-color:#ffd77a;box-shadow:0 0 12px rgba(255,170,60,.55)}
.lia-week .held em{background:#5d6773;border-color:#c9d3e0}
.lia-week .miss em{background:rgba(248,113,113,.25);border-color:#f87171}
.lia-week .now em{border:2px solid #7fe0ff;box-shadow:0 0 10px rgba(127,224,255,.5);animation:liNow 2s ease-in-out infinite}
@keyframes liNow{50%{box-shadow:0 0 2px rgba(127,224,255,.2)}}
.lia-step{font:600 13px "Barlow Condensed",sans-serif;letter-spacing:.24em}
.lia-step b{display:inline!important;font-size:22px!important;letter-spacing:.04em}
.lia-sat{top:auto!important;bottom:150px}

/* the moment: day card + level up */
.lia-moment{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.92);min-width:min(420px,88vw);padding:26px 30px;border-radius:22px;text-align:center;
  background:rgba(10,12,16,.72);border:1px solid rgba(255,200,110,.55);backdrop-filter:blur(14px);box-shadow:0 0 60px rgba(255,160,60,.25);
  opacity:0;transition:opacity .35s,transform .35s;z-index:7;pointer-events:none}
.lia-moment.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lia-moment.is-level{pointer-events:auto;border-color:#7fe0ff;box-shadow:0 0 70px rgba(80,200,255,.3)}
.lia-mo-flame{font-size:54px;line-height:1}
.lia-mo-big{font:700 72px/1 "Barlow Condensed",sans-serif;color:#fff6e2;letter-spacing:.04em}
.lia-mo-k{font:600 18px "Barlow Condensed",sans-serif;letter-spacing:.32em;color:#ffd78a;margin-top:4px}
.is-level .lia-mo-k{color:#7fe0ff}
.lia-mo-sub{font:15px/1.5 "Segoe UI",sans-serif;color:rgba(240,240,255,.82);margin-top:10px}
.lia-mo-add{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.lia-mo-add input{height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;font:15px "Segoe UI",sans-serif}
.lia-mo-add .lia-go{min-width:0;width:100%;height:56px}
.lia-mo-x{margin-top:12px;background:none;border:0;color:rgba(240,240,255,.6);font:600 14px "Barlow Condensed",sans-serif;letter-spacing:.14em;cursor:pointer}

/* day 0 close-up */
.lis-empty{position:absolute;left:50%;top:72%;transform:translateX(-50%);text-align:center;color:#bdf2ff;text-shadow:0 0 12px rgba(80,200,255,.6)}
.lis-empty b{display:block;font:700 28px "Barlow Condensed",sans-serif;letter-spacing:.14em}
.lis-empty span{font:15px "Segoe UI",sans-serif;color:#e6f8ff}
.lia.is-close .lis-empty:not([hidden]) ~ .lis-quest{opacity:.8}

/* keep your climb safe */
.lia-save{position:absolute;right:22px;top:84px;width:min(340px,calc(100% - 32px));padding:16px 18px;border-radius:16px;background:rgba(12,14,20,.86);
  border:1px solid rgba(255,215,140,.55);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:8px;z-index:4;font:14px/1.45 "Segoe UI",sans-serif}
.lia-save b{font:700 18px "Barlow Condensed",sans-serif;letter-spacing:.12em;color:#ffd78a}
.lia-save span{color:rgba(240,240,255,.8)}
.lia-code{font:700 34px "Barlow Condensed",monospace;letter-spacing:.18em;color:#fff6e2;text-align:center;padding:6px 0;border:1px dashed rgba(255,215,140,.5);border-radius:10px;background:rgba(0,0,0,.25);user-select:all}
.lia-code.small{font-size:24px;width:100%}
.lia-save-b{display:flex;gap:8px;justify-content:space-between;align-items:center}
.lia-save-b .lia-pill{height:38px;font-size:14px}

/* the start page: the climb shows, the card sits left */
.lis-setup{justify-items:start;padding-left:max(16px,6vw)}
.lis-setup-bg{background:url(/setup-bg.jpg) 70% 40%/cover!important;filter:brightness(.82) saturate(1.05)!important}
.lis-setup-bg::after{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%)!important}
.lis-continue{display:flex;flex-direction:column;gap:7px;margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.lis-continue span{font:13px "Segoe UI",sans-serif;color:rgba(240,240,255,.6)}
.lis-continue div{display:flex;gap:8px}
.lis-continue input{flex:1;height:40px!important;font:600 18px "Barlow Condensed",sans-serif!important;letter-spacing:.2em;text-transform:uppercase}
.lis-continue .chip{height:40px;padding:0 16px;font-size:14px}

/* the pose screen before the camera is on */
.lip-start span{font-size:24px!important}

@media (max-width:900px){
  .lis-setup{justify-items:center;padding-left:16px;align-items:end;padding-bottom:22px}
  .lis-setup-bg{background-position:62% 40%!important}
  .lis-setup-bg::after{background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.3) 55%,rgba(0,0,0,0) 80%)!important}
  .lia-hello{top:124px}
  .lia-flame{font-size:36px}.lia-streakn{font-size:62px}
  .lia-streak i{font-size:14px}
  .lia-week{gap:5px;margin:10px 0}.lia-week em{width:18px;height:18px}
  .lia-save{top:auto;bottom:150px;right:16px}
  .lia-mo-big{font-size:56px}
  .lis-setup-bg{background-position:64% 22%!important}
  .lis-card{padding:20px 18px;gap:10px}
  .lis-card h1{font-size:23px}
  .lis-card p{font-size:13.5px;line-height:1.45}
  .lis-card input{height:48px}
  .lis-card .lia-go{height:58px}
}