/* Pocket Wisdom: shared look for the app and the sign-in page.
   Brand: cream #FBF6EE, teal #1F4E5A, amber #F2A541. Light by default; dark is a toggle. */
:root{
  --ground:#FBF6EE; --surface:#FFFDF8; --card:#FFFCF5; --ink:#173B44; --muted:#5C7479;
  --line:#E9E0CF; --teal:#1F4E5A; --amber:#F2A541; --amber-ink:#1F3A40; --glow:rgba(242,165,65,.35);
  --good:#2F7D5B; --bad:#B4513A; --shadow:0 18px 40px rgba(31,78,90,.12);
  --mark-pocket:#1F4E5A; --mark-card:#FFFCF5;
}
:root[data-theme="dark"]{
  --ground:#13262B; --surface:#1A3238; --card:#1D373E; --ink:#F5EFE3; --muted:#A9BDBF;
  --line:#2A474E; --teal:#8FC3CC; --amber:#F2A541; --amber-ink:#13262B; --glow:rgba(242,165,65,.28);
  --good:#7FD1A6; --bad:#F09A84; --shadow:0 18px 40px rgba(0,0,0,.35);
  --mark-pocket:#F5EFE3; --mark-card:#13262B;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:17px/1.5 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none}
button{font:inherit;color:inherit}
.hidden{display:none!important}

/* sticky theme toggle, top right */
.theme{position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:12px;z-index:50;border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}

/* open screen */
.open{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 64px) 24px calc(env(safe-area-inset-bottom) + 28px);text-align:center;max-width:520px;margin:0 auto}
.brand{display:flex;flex-direction:column;align-items:center}
.mark{width:118px;height:118px;overflow:visible}
.mark .pk{fill:var(--mark-pocket)} .mark .cd{fill:var(--mark-card);stroke:var(--mark-pocket)} .mark .sp{fill:var(--amber)}
.mark .cdg{animation:rise 1.1s cubic-bezier(.2,.9,.25,1.2) .15s both;transform-origin:50% 60%}
.mark .sp{animation:pop .5s ease-out 1s both, twinkle 3.2s ease-in-out 1.6s infinite;transform-box:fill-box;transform-origin:center}
@keyframes rise{from{transform:translateY(22px) rotate(4deg)}to{transform:none}}
@keyframes pop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.78) rotate(18deg)}}
h1.title{font-size:38px;line-height:1.1;margin:18px 0 8px;font-weight:900;letter-spacing:-.5px;color:var(--teal)}
:root[data-theme="dark"] h1.title{color:var(--ink)}
.tag{margin:0;color:var(--muted);font-size:17px}
.fan{position:relative;width:200px;height:180px;margin:28px auto}
.fan::before{content:"";position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(6px)}
.fan i{position:absolute;left:50%;top:50%;width:104px;height:140px;margin:-70px 0 0 -52px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);animation:fan 1s cubic-bezier(.2,.9,.3,1) both}
.fan i:nth-child(1){--r:-14deg;--x:-34px} .fan i:nth-child(2){--r:-3deg;--x:-6px;animation-delay:.08s} .fan i:nth-child(3){--r:12deg;--x:28px;animation-delay:.16s}
@keyframes fan{from{transform:translateX(0) rotate(0);opacity:0}to{transform:translateX(var(--x)) rotate(var(--r));opacity:1}}
.cta{display:block;width:100%;max-width:360px;margin:0 auto;border:0;border-radius:999px;background:var(--amber);color:var(--amber-ink);
  font-size:20px;font-weight:800;padding:17px 22px;cursor:pointer;box-shadow:0 8px 22px var(--glow);transition:transform .15s}
.cta:active{transform:scale(.97)}
.cta.ghost{background:transparent;box-shadow:none;border:2px solid var(--line);color:var(--ink);font-size:17px;padding:13px}
.sub{margin-top:12px;font-size:14px;color:var(--muted)}
.links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-size:15px;font-weight:700}
.links button{background:none;border:0;color:var(--teal);cursor:pointer;padding:4px}
:root[data-theme="dark"] .links button{color:var(--amber)}
.stats{display:flex;gap:10px;justify-content:center;margin-top:6px;font-size:14px;color:var(--muted)}
.pill{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px}

/* sheets (saved, reminders) */
.sheet{position:fixed;inset:0;z-index:40;background:var(--ground);overflow:auto;
  padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 30px);animation:up .3s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{font-size:26px;margin:6px 0 14px;font-weight:900}
.sheet .back{background:none;border:0;font-weight:800;color:var(--teal);font-size:16px;padding:6px 0;cursor:pointer}
:root[data-theme="dark"] .sheet .back{color:var(--amber)}
.saved{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:10px 0;cursor:pointer}
.saved b{display:block;font-size:17px} .saved small{color:var(--muted)}
.box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0}
select{font:inherit;font-weight:700;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}

/* player */
.player{position:fixed;inset:0;z-index:30;background:var(--ground);display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 6px}
.top button{background:none;border:0;font-size:22px;width:40px;height:40px;cursor:pointer;color:var(--muted);flex:none}
.segs{flex:1;display:flex;gap:4px}
.segs i{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.segs i.done::after,.segs i.on::after{content:"";position:absolute;inset:0;background:var(--amber);transform-origin:left}
.segs i.on::after{transform:scaleX(var(--p,0))}
.stage{flex:1;position:relative;overflow:hidden;touch-action:none}
.bottom{display:flex;align-items:center;justify-content:space-between;padding:8px 22px calc(env(safe-area-inset-bottom) + 14px)}
.bottom button{border:1px solid var(--line);background:var(--surface);border-radius:999px;height:52px;min-width:52px;padding:0 16px;
  font-weight:800;font-size:16px;cursor:pointer;display:flex;align-items:center;gap:8px;justify-content:center}
.bottom .play{width:64px;height:64px;font-size:22px;background:var(--teal);color:var(--ground);border:0}
:root[data-theme="dark"] .bottom .play{background:var(--amber);color:var(--amber-ink)}
.bottom .kept{color:var(--bad);border-color:var(--bad)}
.hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:13px;color:var(--muted);font-weight:700;
  opacity:0;transition:opacity .4s;pointer-events:none}
.hint.show{opacity:1;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(-5px)}}

.card{position:absolute;inset:6px 16px 30px;background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);
  padding:24px 22px;display:flex;flex-direction:column;overflow:hidden;will-change:transform}
.card.enter{animation:cardIn .45s cubic-bezier(.2,.85,.25,1) both}
.card.enter-back{animation:cardBack .45s cubic-bezier(.2,.85,.25,1) both}
.card.leave{animation:cardOut .35s ease-in both}
.card.leave-back{animation:cardOutDown .35s ease-in both}
@keyframes cardIn{from{transform:translateY(70%) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes cardBack{from{transform:translateY(-40%) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes cardOut{to{transform:translateY(-55%) scale(.92);opacity:0}}
@keyframes cardOutDown{to{transform:translateY(55%) scale(.92);opacity:0}}
.kicker{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);animation:fadeUp .5s both}
:root:not([data-theme="dark"]) .kicker{color:#C27A1A}
.card h2{font-size:clamp(25px,7vw,32px);line-height:1.15;margin:8px 0 14px;font-weight:900;animation:fadeUp .5s .08s both}
@keyframes fadeUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.st{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.st.in{opacity:1;transform:none}
.line{font-size:clamp(18px,5vw,21px);line-height:1.4;margin:0 0 12px;font-weight:600}
.lead{font-size:clamp(16px,4.4vw,18px);color:var(--muted);margin:0 0 12px}
.after{font-size:clamp(16px,4.4vw,18px);margin:14px 0 0;font-weight:700}
.cite{font-size:13px;color:var(--muted);font-weight:700;margin-top:8px}
.quote{position:relative;font-family:Georgia,"Iowan Old Style",serif;font-size:clamp(21px,5.8vw,26px);line-height:1.38;margin:6px 0 4px;padding-top:26px}
.quote::before{content:"“";position:absolute;top:-22px;left:-6px;font-size:84px;color:var(--amber);line-height:1;
  transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.quote.in::before{transform:none}
.w{opacity:0;display:inline-block;transform:translateY(6px);transition:opacity .35s,transform .35s;filter:blur(2px)}
.in .w{opacity:1;transform:none;filter:none}
.quote s,.line s{text-decoration:none;background:linear-gradient(var(--bad),var(--bad)) no-repeat 0 55%/0 2.5px;transition:background-size .8s ease}
.card.t-strike.s3 s{background-size:100% 2.5px;color:var(--muted)}
.grow{flex:1;min-height:8px}

/* scenes */
.scene{position:relative;border-radius:18px;overflow:hidden;margin:2px -4px 16px;height:clamp(130px,24vh,200px);flex:none}
.camp{background:linear-gradient(#1C3540,#2C5560 70%,#3D6B70)}
.camp .star{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFF6DC;animation:tw 2.8s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
.camp svg,.king svg,.road svg{position:absolute;inset:0;width:100%;height:100%}
.lamp{animation:flick 1.8s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:.85}40%{opacity:1}60%{opacity:.7}}
.wave{animation:drift 6s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-60px)}}
.camp .scroll{opacity:0;transform:translateY(8px);transition:all .8s .2s}
.card.s2 .camp .scroll{opacity:1;transform:none}
.camp .smoke{opacity:0;transition:opacity 1.2s}
.card.s1 .camp .smoke{opacity:.8}

.king{background:linear-gradient(#F4E6CC,#EBD3AA)}
:root[data-theme="dark"] .king{background:linear-gradient(#22414A,#1A3238)}
.king .who{transition:transform 1.4s cubic-bezier(.4,0,.2,1),opacity 1.4s,filter 1.4s;transform-box:fill-box;transform-origin:center}
.card.s1 .king .groom{opacity:1}
.king .groom{opacity:0}
.card.s2 .king .who{transform:translateY(-30px) scale(.4);opacity:0;filter:blur(3px)}
.king .dust circle{opacity:0}
.card.s2 .king .dust circle{animation:dust 2.4s ease-out forwards}
@keyframes dust{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-70px)}}
.king .same{opacity:0;transition:opacity 1.2s 1.2s}
.card.s2 .king .same{opacity:1}

.road{background:linear-gradient(#FFF1D8,#F7E2BC)}
:root[data-theme="dark"] .road{background:linear-gradient(#22414A,#1A3238)}
.road .rock{transform:translateY(40px);opacity:0;transition:all .7s cubic-bezier(.3,1.4,.5,1);transform-box:fill-box}
.card.s0 .road .rock{transform:none;opacity:1}
.road .path{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 2.6s ease-in-out}
.card.s1 .road .path{stroke-dashoffset:0}
.road .walker{offset-path:path("M10 120 L120 120 C150 120 150 70 185 70 L215 70 C250 70 250 120 280 120 L390 120");offset-distance:0%;offset-rotate:0deg;opacity:0}
.card.s2 .road .walker{opacity:1;animation:walk 4.5s ease-in-out forwards}
@keyframes walk{to{offset-distance:100%}}

/* number */
.big{font-size:clamp(96px,30vw,140px);font-weight:900;line-height:1;color:var(--teal);letter-spacing:-3px}
:root[data-theme="dark"] .big{color:var(--amber)}
.unit{font-size:22px;font-weight:800;color:var(--muted);margin:-4px 0 14px}
.shelf{display:flex;gap:5px;align-items:flex-end;height:64px;margin:4px 0 18px}
.shelf i{width:16px;border-radius:3px 3px 1px 1px;background:var(--teal);transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.shelf i:nth-child(3n){background:var(--amber)} .shelf i:nth-child(4n+1){opacity:.75}
.shelf.in i{transform:none}

/* sort */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0}
.col{border-radius:16px;padding:10px;background:var(--surface);border:1px solid var(--line);min-height:150px}
.col h3{margin:0 0 8px;font-size:15px;font-weight:900}
.col.yes h3{color:var(--good)} .col.no h3{color:var(--bad)}
.chip{font-size:14.5px;line-height:1.25;font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 9px;margin:0 0 6px;
  opacity:0;transform:translateY(-14px) scale(.9);transition:all .45s cubic-bezier(.3,1.5,.5,1)}
.st.in > .chip{opacity:1;transform:none}

/* try + check */
.steps{list-style:none;padding:0;margin:8px 0 0}
.steps li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;margin:0 0 10px;font-weight:700;font-size:16.5px;line-height:1.35}
.steps button{flex:none;width:28px;height:28px;border-radius:8px;border:2px solid var(--teal);background:none;cursor:pointer;font-size:16px;line-height:1;color:var(--ground)}
.steps button.ok{background:var(--good);border-color:var(--good)}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.opt{text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:15px 16px;font-weight:800;font-size:17px;cursor:pointer;transition:all .25s}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--surface));animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.explain{margin-top:14px;font-weight:700}
.question{font-size:clamp(22px,6vw,27px);font-weight:900;line-height:1.25;margin:8px 0}

/* save burst */
.burst{position:absolute;left:50%;top:45%;font-size:80px;transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:5;color:var(--bad)}
.burst.go{animation:burst .8s ease-out}
@keyframes burst{30%{transform:translate(-50%,-50%) scale(1.15);opacity:1}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}

/* done */
.done{text-align:center}
.done .ring{width:120px;height:120px;margin:10px auto 10px}
.done .ring circle{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1s .2s ease-out forwards}
.done .ring path{stroke-dasharray:80;stroke-dashoffset:80;animation:draw .5s 1s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 100px);transform:translateX(-50%);background:var(--teal);color:var(--ground);
  padding:10px 18px;border-radius:999px;font-weight:800;font-size:15px;z-index:60;animation:fadeUp .3s}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}

/* fit on shorter phones (and Safari with its toolbars) */
.t-story .scene{height:clamp(104px,19vh,170px);margin-bottom:12px}
.t-story .line{font-size:clamp(16px,4.5vw,19px);margin-bottom:8px;line-height:1.35}
.t-road .scene{height:clamp(96px,16vh,150px)}
@media (max-height:740px){
  .open{padding-top:calc(env(safe-area-inset-top) + 40px)}
  .mark{width:96px;height:96px}
  h1.title{font-size:34px;margin-top:12px}
  .fan{height:140px;margin:14px auto} .fan i{width:88px;height:118px;margin:-59px 0 0 -44px}
  .card{padding:20px 18px}
  .card h2{margin:6px 0 10px}
  .quote{font-size:clamp(19px,5.3vw,24px)}
}