/* ============ round two ============ */
.topbar .tb{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:var(--t3);display:grid;place-items:center}
.playful{max-width:760px;margin:0 auto;padding:70px 16px}
.box{margin-top:20px;padding:22px;border-radius:22px;background:var(--card);border:1px solid rgba(255,217,138,.28);backdrop-filter:blur(8px);text-align:center}

/* garden */
.tree{position:relative;height:150px;display:grid;place-items:center}
.tr-emoji{font-size:96px;line-height:1;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));animation:sway2 5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes sway2{50%{transform:rotate(3deg)}}
.tree.bloom::before{content:"✨";position:absolute;left:30%;top:10%;animation:hbeat 2s infinite}.tree.bloom::after{content:"✨";position:absolute;right:30%;top:20%;animation:hbeat 2.5s .5s infinite}
.tr-hearts{position:absolute;top:0;font-size:var(--t5);font-style:normal;animation:bob2 3s infinite}
.g-growth{margin-top:8px;color:#dfe8ff}.g-growth b{font:600 30px/1 var(--disp);color:var(--gold)}
.gchips{display:flex;gap:10px;justify-content:center;margin:12px 0 6px}
.gchip{padding:6px 14px;border-radius:99px;border:1px solid color-mix(in srgb,var(--pc) 50%,transparent);color:var(--dim);font-size:var(--t2)}.gchip.on{background:color-mix(in srgb,var(--pc) 18%,transparent);color:#fff}
.box .btn-gold{margin-top:12px;padding:12px 24px}
.drop{position:fixed;z-index:150;pointer-events:none;font-size:var(--t3);animation:dropfall 1.2s ease-in forwards}
@keyframes dropfall{to{transform:translateY(120px);opacity:0}}

/* daily question */
.dq-q{font:500 clamp(18px,3.4vw,24px)/1.5 var(--serif);color:#fff;margin-bottom:14px}
.dq-form{display:flex;gap:8px}.dq-form input{flex:1;min-width:0;padding:12px 16px;border-radius:99px;border:1px solid rgba(255,217,138,.3);background:rgba(10,15,40,.7);color:var(--text);font:inherit;outline:none}
.dq-form .btn-gold{margin:0;padding:0 20px;white-space:nowrap}
.dq-both{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.dq-ans{padding:14px;border-radius:16px;background:rgba(0,0,0,.25);border-left:4px solid var(--pc)}
.dq-ans b{display:block;font-size:var(--t1);color:var(--pc);margin-bottom:4px}.dq-ans span{font-family:var(--serif);font-size:var(--t3);line-height:1.6}.dq-ans i{color:var(--dim);font-size:var(--t2)}
@media(max-width:560px){.dq-both{grid-template-columns:1fr}.dq-form{flex-direction:column}.dq-form .btn-gold{padding:12px}}

/* jars */
.jar-box{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.jar{padding:18px 14px;border-radius:22px;background:var(--card);border:1px solid color-mix(in srgb,var(--pc) 45%,transparent);text-align:center;position:relative}
.jar-glass{position:relative;width:110px;height:130px;margin:0 auto 10px;border-radius:18px 18px 34px 34px;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border:2px solid rgba(255,255,255,.35);box-shadow:inset 0 -20px 30px rgba(0,0,0,.25);overflow:hidden}
.jar-lid{position:absolute;top:-2px;left:-6px;right:-6px;height:16px;border-radius:8px;background:var(--pc);opacity:.9}
.jar-glass i{position:absolute;font-style:normal;font-size:var(--t4);left:calc(8px + (var(--i) * 37) % 80 * 1px);bottom:calc(6px + (var(--i) / 3) * 18px);transform:rotate(calc(var(--i) * 23deg))}
.jar b{display:block;font-size:var(--t2)}.jar small{display:block;color:var(--dim);font-size:var(--t1);margin-bottom:8px}
.jar-form{display:flex;gap:6px}.jar-form input{flex:1;min-width:0;padding:9px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(10,15,40,.7);color:var(--text);font:inherit;font-size:var(--t2);outline:none}
.jar.shake .jar-glass{animation:jshake .6s}
@keyframes jshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(4deg)}}
.slip{margin-top:10px;min-height:0;opacity:0;transform:translateY(8px);transition:.5s}.slip.show{opacity:1;transform:none}
.slip span{display:block;padding:12px;border-radius:12px;background:#fbf5ea;color:#3a3550;font-family:var(--serif);font-size:var(--t2);line-height:1.6}.slip i{display:block;font-size:var(--t1);color:var(--dim);margin-top:4px}
.jar-pick{grid-column:1/-1;text-align:center}
@media(max-width:480px){.jar-box{grid-template-columns:1fr}}

/* jigsaw */
.jz-top{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:var(--t2);color:var(--dim);margin-bottom:12px}
.jz-size button{padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--dim);font-size:var(--t1)}.jz-size button.on{color:#06102e;background:var(--ice)}
.jz-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;width:min(400px,100%);aspect-ratio:1;margin:0 auto;border-radius:14px;overflow:hidden;background:#0a0f28;padding:3px}
.jz-t{background-image:var(--img);background-size:calc(var(--n) * 100%) calc(var(--n) * 100%);background-position:var(--x) var(--y);border-radius:6px;transition:transform .2s,box-shadow .2s;aspect-ratio:1}
.jz-t.sel{transform:scale(.9);box-shadow:0 0 0 3px var(--gold)}
.jz-grid.done{gap:0;padding:0;box-shadow:0 0 40px rgba(255,217,138,.5)}.jz-grid.done .jz-t{border-radius:0}
.jz-done{margin-top:12px;color:var(--gold);font-weight:500}

/* guess who */
.gw-q{font:500 clamp(16px,3vw,20px)/1.6 var(--serif);color:#fff;margin-bottom:16px}
.gw-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.gw-btns .btn-gold{margin:0;padding:11px 22px}
.gw-score{margin-top:12px;color:var(--dim);font-size:var(--t2)}.gw-fb{min-height:1.4em;margin-top:4px}.gw-fb.ok{color:#7be0a8}.gw-fb.no{color:#ffc2c9}

/* then vs now */
.tn{position:relative;width:min(560px,100%);aspect-ratio:4/5;margin:20px auto 10px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,217,138,.4);--p:50%}
.tn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.tn .tn-then{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.tn-line{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.tn-line::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--goldg);color:#3a2606;display:grid;place-items:center;font-weight:700}
.tn-lbl{position:absolute;bottom:12px;padding:5px 10px;border-radius:99px;background:rgba(5,8,25,.75);font-size:var(--t1);font-weight:500}.tn-lbl.l{left:12px}.tn-lbl.r{right:12px}
#tn-range{width:min(560px,100%);display:block;margin:0 auto}

/* call window + meet (inside together) */
.duo-extra{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.cw,.meet{padding:18px;border-radius:22px;background:var(--card);border:1px solid rgba(255,217,138,.3);text-align:center}
.cw .kicker,.meet .kicker{margin-bottom:6px}
.cw-now{font-weight:500;color:var(--dim)}.cw-now.ok{color:#7be0a8}
.cw-list{list-style:none;margin:10px 0;text-align:left;font-size:var(--t2)}.cw-list li{padding:6px 0;border-top:1px solid rgba(140,170,255,.12)}.cw-list i{color:var(--gold);font-style:normal;margin:0 6px}
.meet-n b{display:block;font:600 64px/1 var(--disp);background:var(--goldg);-webkit-background-clip:text;background-clip:text;color:transparent}.meet-n span{font-size:var(--t2);color:var(--dim)}
.meet p{margin-top:8px;font-size:var(--t2);color:#dfe8ff}.meet .plane{display:inline-block;margin-top:6px;font-size:28px;animation:fly2 4s ease-in-out infinite}
@keyframes fly2{0%,100%{transform:translateX(-24px) rotate(-8deg)}50%{transform:translateX(24px) rotate(8deg)}}
@media(max-width:640px){.duo-extra{grid-template-columns:1fr}}

/* monthly report */
.rp-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.rp-tabs button{padding:7px 14px;border-radius:99px;border:1px solid var(--line);color:var(--dim);font-size:var(--t2)}.rp-tabs button.on{color:#06102e;background:var(--ice)}
.rp{padding:22px;border-radius:22px;background:var(--card);border:1px solid rgba(255,217,138,.3)}
.rp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.rp-grid div{padding:12px 6px;border-radius:14px;background:rgba(0,0,0,.2)}.rp-grid b{display:block;font:600 34px/1 var(--disp);color:var(--ice)}.rp-grid span{font-size:var(--t1);color:var(--dim);line-height:1.3;display:block;margin-top:4px}
.rp-top{color:var(--gold);font-size:var(--t2);margin-top:6px}.rp ul{list-style:none;font-size:var(--t2);color:#dfe8ff}.rp li{padding:3px 0}
@media(max-width:480px){.rp-grid{grid-template-columns:repeat(2,1fr)}}

/* real sky per city + weather fx */
.city{position:relative;overflow:hidden;transition:background 1.5s}
.city.sky-day{background:linear-gradient(180deg,rgba(80,160,255,.35),rgba(20,28,66,.72) 70%)}
.city.sky-dawn{background:linear-gradient(180deg,rgba(255,150,120,.4),rgba(255,210,140,.2) 40%,rgba(20,28,66,.72) 80%)}
.city.sky-dusk{background:linear-gradient(180deg,rgba(255,110,90,.4),rgba(120,60,140,.3) 45%,rgba(20,28,66,.72) 85%)}
.city.sky-night{background:linear-gradient(180deg,rgba(6,10,40,.9),rgba(20,28,66,.72) 70%)}
.city .wxfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.city > *:not(.wxfx){position:relative;z-index:1}
.city[data-wx="cloud"]::before{content:"☁️";position:absolute;top:10px;left:-30px;font-size:26px;opacity:.5;animation:cloud 30s linear infinite;z-index:0}
@keyframes cloud{to{transform:translateX(400px)}}

/* seasonal + time-of-day photo tones */
html.season-autumn{--gold:#ffc46b}html.season-winter{--ice:#bfe9ff}html.season-spring{--pink:#ffc1d9}
html.season-christmas .orn span{filter:hue-rotate(90deg)}html.season-cny{--gold:#ffd166;--pink:#ff6b6b}html.season-valentine .aurora{opacity:1;filter:hue-rotate(-20deg)}
html.tod-dawn .pics img,html.tod-dawn .polaroid img{filter:sepia(.12) saturate(1.1) brightness(1.03)}
html.tod-dusk .pics img,html.tod-dusk .polaroid img{filter:sepia(.18) saturate(1.15) contrast(1.02)}
html.tod-night .pics img,html.tod-night .polaroid img{filter:brightness(.92) saturate(.95)}

/* paper mode */
html.paper body{background:#f6efe2;color:#2a2740}
html.paper #sky,html.paper #petals,html.paper #fx,html.paper .aurora,html.paper .vignette,html.paper .grain{display:none}
html.paper{--text:#2a2740;--dim:#6f6a85;--card:rgba(255,255,255,.75);--line:rgba(60,50,90,.18);--ice:#2d6cdf;--pink:#c43d7a;--blue:#2d6cdf;--bg:#f6efe2}
html.paper h1,html.paper .sub,html.paper section h2,html.paper .kin .w,html.paper .stats strong,html.paper .clock-t b,html.paper .dg-in b,html.paper .h2c b,html.paper .pl-meta h3{-webkit-text-fill-color:#2a2740;color:#2a2740;background:none}
html.paper .card,html.paper .stats>div,html.paper .st2,html.paper .city,html.paper .moon-card,html.paper .box,html.paper .qz-box,html.paper .chapter2,html.paper .cw,html.paper .meet,html.paper .rp,html.paper .jar,html.paper .mem-card,html.paper .cap,html.paper .graph-wrap,html.paper .term,html.paper .pl-card,html.paper .cute-t .cc{background:rgba(255,255,255,.8);border-color:rgba(60,50,90,.2);box-shadow:0 10px 30px rgba(60,50,90,.1);color:#2a2740}
html.paper .card p,html.paper .lede,html.paper .typed,html.paper .ch-text,html.paper .dq-q,html.paper .gw-q{color:#2a2740}
html.paper .term-body,html.paper .term-body b{color:#2a2740}html.paper .term{background:#fff}
html.paper .city.sky-day,html.paper .city.sky-dawn,html.paper .city.sky-dusk,html.paper .city.sky-night{background:rgba(255,255,255,.8)}
html.paper .topbar .lang,html.paper .who-chips,html.paper .topbar .tb{background:#fff}
html.paper .intro{display:none!important}

/* now playing + playlists in the player */
.pl-tabs button{flex:1 1 auto;padding:7px 4px;font-size:var(--t2)}
.pl-now{margin:6px 0 2px;padding:8px 12px;border-radius:12px;background:rgba(126,232,255,.08);border:1px solid rgba(126,232,255,.25);font-size:var(--t2);display:flex;align-items:center;gap:8px}
.pl-now:empty{display:none}.pl-now b{color:var(--ice)}.pl-now button{margin-left:auto;padding:4px 10px;border-radius:99px;border:1px solid rgba(126,232,255,.5);font-size:var(--t1);white-space:nowrap}
.pl-sod{padding:8px 10px;border-radius:12px;background:rgba(255,217,138,.08);border:1px dashed rgba(255,217,138,.35);font-size:var(--t2);margin-bottom:6px;color:var(--gold)}
.pl-sod:empty{display:none}

/* voice notes */
.note-form .mic{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid rgba(80,70,50,.25);display:grid;place-items:center;font-size:var(--t4);transition:.2s}
.note-form .mic.rec{background:#ff6b6b;color:#fff;animation:recpulse 1s infinite}
@keyframes recpulse{50%{box-shadow:0 0 0 8px rgba(255,107,107,.25)}}
.note audio{display:block;width:210px;max-width:100%;height:34px;margin-top:4px}
.note.voice span{font-size:var(--t2)}