@font-face{font-family:"Fredoka";src:url("shared/fonts/Fredoka.woff2") format("woff2"),url("shared/fonts/Fredoka.ttf") format("truetype");font-weight:300 700;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;min-height:100%;font-family:"Fredoka","Arial Rounded MT Bold",system-ui,-apple-system,"PingFang SC",sans-serif;background:#7cc6f7;overscroll-behavior:none}
img{-webkit-user-drag:none;pointer-events:none}
.hidden{display:none!important}
#sky{position:fixed;inset:0;background:linear-gradient(#5db8f5,#a8dcfb 55%,#d8f1ff);z-index:-1;overflow:hidden}
.hills{position:absolute;left:-10%;right:-10%;bottom:-8vh;height:38vh;background:radial-gradient(ellipse 40% 60% at 20% 100%,#7ed36b 98%,transparent 100%),radial-gradient(ellipse 45% 70% at 75% 100%,#62c257 98%,transparent 100%),radial-gradient(ellipse 60% 50% at 50% 110%,#4fb04a 98%,transparent 100%)}
.cloud{position:absolute;background:#fff;border-radius:60px;opacity:.9;animation:drift 60s linear infinite}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:180px;height:56px;top:12vh;left:-200px}.c1:before{width:80px;height:80px;left:30px;top:-40px}.c1:after{width:60px;height:60px;left:90px;top:-26px}
.c2{width:140px;height:44px;top:30vh;left:-160px;animation-duration:80s;animation-delay:-30s}.c2:before{width:60px;height:60px;left:24px;top:-30px}.c2:after{width:50px;height:50px;left:70px;top:-20px}
.c3{width:220px;height:60px;top:6vh;left:-240px;animation-duration:95s;animation-delay:-60s}.c3:before{width:90px;height:90px;left:40px;top:-46px}.c3:after{width:70px;height:70px;left:110px;top:-30px}
@keyframes drift{to{transform:translateX(calc(100vw + 300px))}}
header{display:flex;align-items:center;gap:18px;padding:18px 200px 4px 26px;position:relative}
#owl{width:120px;filter:drop-shadow(0 6px 5px rgba(0,0,0,.18));pointer-events:auto;cursor:pointer;animation:bob 2.6s ease-in-out infinite}
#owl.talk{animation:talk .32s ease-in-out infinite alternate}
.hello{background:#fff;border-radius:28px;padding:12px 22px;box-shadow:0 6px 0 rgba(0,0,0,.08);position:relative}
.hello:before{content:"";position:absolute;left:-16px;top:38%;border:10px solid transparent;border-right:16px solid #fff}
.hello b{display:block;font-size:30px;color:#ff7a00}
.hello small{color:#7a8a99;font-size:15px}
/* parent-mode button: visible labelled pill, hold 2 s (progress bar), then a sum */
#gate{position:absolute;right:13px;top:13px;z-index:25;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;display:flex;align-items:center;gap:8px;width:auto;height:52px;padding:0 18px 0 11px;box-sizing:border-box;border-radius:26px;overflow:hidden;background:rgba(24,32,58,.88);border:2px solid rgba(255,255,255,.95);box-shadow:0 3px 8px rgba(0,0,0,.28);color:#fff;font-family:'PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif}
#gate svg.lk{position:static;inset:auto;flex:none;width:26px;height:26px;opacity:1}
#gate .gt{display:flex;flex-direction:column;line-height:1.08;white-space:nowrap}
#gate .gl{font-size:20px;font-weight:800;letter-spacing:1px}
#gate .gh{font-size:13px;font-weight:600;color:#d8e2ff;margin-top:2px}
#gate .gbar{position:absolute;left:0;bottom:0;height:6px;width:0;background:#ffd23f}
#gate.holding .gbar{transition:width 2s linear;width:100%}
#gate.holding{background:rgba(24,32,58,.96)}
#gate.nudge{animation:gnudge .45s ease-in-out}
#gate.nudge .gh{color:#ffd23f}
@keyframes gnudge{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#gate .ring,#gate>span:not(.gt){display:none}
main{padding:10px 26px 60px}
.shelf{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;padding:14px 0 10px}
.lcard{position:relative;width:min(44vw,460px);border-radius:40px;background:#fff;border:10px solid #fff;box-shadow:0 12px 0 rgba(0,0,0,.14);cursor:pointer;transition:transform .25s,box-shadow .25s;animation:popin .5s both;touch-action:manipulation}
.lcard .cov{width:100%;aspect-ratio:4/3;border-radius:30px;overflow:hidden;background:var(--c,#ffd27a)}
.lcard .cov img{width:100%;height:100%;object-fit:cover;display:block}
.lcard .ttl{display:flex;align-items:center;gap:10px;padding:12px 8px 4px}
.lcard .ttl b{font-size:28px;color:#334}
.lcard .ttl small{display:block;font-size:14px;color:#8a97a5}
.lcard .stk{position:absolute;right:-14px;top:-14px;display:flex}
.lcard .stk img{width:70px;height:70px;border-radius:50%;border:5px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.15);object-fit:cover;margin-left:-26px;background:#fff}
.lcard .stk em{font-style:normal;align-self:flex-end;background:#ff5d8f;color:#fff;border-radius:16px;padding:2px 10px;font-weight:700;font-size:18px;margin-left:-14px;border:3px solid #fff}
.lcard .new{position:absolute;left:-12px;top:-14px;background:#ff4d6d;color:#fff;font-weight:700;font-size:20px;padding:6px 16px;border-radius:22px;border:4px solid #fff;transform:rotate(-8deg);box-shadow:0 4px 0 rgba(0,0,0,.15);animation:wig 2.4s ease-in-out infinite}
.lcard .play{position:absolute;left:50%;top:38%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;background:#2ec05a;border:8px solid #fff;box-shadow:0 8px 0 rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);transition:all .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.lcard .play svg{width:56px;height:56px;margin-left:8px}
.lcard.sel{transform:scale(1.04);box-shadow:0 0 0 10px #ffd23f,0 16px 0 rgba(0,0,0,.14)}
.lcard.sel .play{opacity:1;transform:scale(1);pointer-events:auto;animation:pulse 1.2s ease-in-out .4s infinite}
.lcard.go{transform:scale(1.12);opacity:.0;transition:transform .5s,opacity .5s .2s}
.lcard.bounce{animation:bounce .35s}
.soonhd{display:flex;align-items:baseline;gap:12px;margin:26px 6px 6px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.soonhd span{font-size:28px}.soonhd small{font-size:15px;opacity:.9}
.path{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 18px;position:relative}
.scard{position:relative;background:rgba(255,255,255,.55);border:5px dashed rgba(255,255,255,.95);border-radius:28px;padding:10px 8px 8px;text-align:center;color:#6b7b8c;pointer-events:none}
.scard .sil{height:96px;display:flex;align-items:center;justify-content:center}
.scard .sil img{max-height:92px;max-width:110px;filter:brightness(0) invert(1) drop-shadow(0 0 0 rgba(0,0,0,0));opacity:.85}
.scard .wk{position:absolute;left:-8px;top:-10px;background:#9aa9b8;color:#fff;font-weight:700;border-radius:14px;padding:2px 10px;font-size:15px;border:3px solid #fff}
.scard b{display:block;font-size:15px;color:#5b6b7c;line-height:1.2;margin-top:4px}
.scard small{display:block;font-size:12px;color:#7d8c9a;margin-top:2px}
.scard.next{background:rgba(255,255,255,.75)}
.scard.next .wk{background:#ffb84d}
.spark{position:fixed;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:6px solid #fff;animation:ripple .45s ease-out forwards;pointer-events:none;z-index:50}
#pgate{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;display:flex;align-items:center;justify-content:center;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
#pgate .box{background:#fff;border-radius:18px;padding:22px 26px;text-align:center;min-width:300px}
#pgate h3{margin:0 0 8px}#pgate p{font-size:20px;margin:6px 0 14px}
#popts{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
#popts button{font-size:22px;width:64px;height:52px;border-radius:12px;border:2px solid #2f80ed;background:#eef5ff}
#pcancel{border:none;background:none;color:#888;font-size:15px;padding:8px}
@media (orientation:portrait){
  header{padding:66px 16px 4px 16px}
  #owl{width:100px}.hello b{font-size:24px}
  .lcard{width:min(88vw,560px)}
  main{padding:8px 16px 50px}
  .path{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (max-height:500px) and (orientation:landscape){.lcard{width:min(40vw,360px)}#owl{width:80px}.hello b{font-size:22px}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes talk{from{transform:rotate(-4deg)}to{transform:rotate(4deg) scale(1.04)}}
@keyframes popin{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes bounce{0%{transform:scale(1)}35%{transform:scale(.94)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes wig{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(4deg)}}
@keyframes ripple{from{transform:scale(.3);opacity:1}to{transform:scale(1.8);opacity:0}}
/* ---- week cards (home) ---- */
.rowhd{display:flex;align-items:baseline;gap:12px;margin:14px 6px 2px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.rowhd span{font-size:26px}.rowhd small{font-size:15px;opacity:.9}
.wrow{display:flex;gap:26px;overflow-x:auto;overflow-y:visible;padding:22px 10px 26px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wrow::-webkit-scrollbar{display:none}
.wcard{flex:none;position:relative;width:clamp(210px,30vw,300px);border-radius:34px;background:#fff;border:8px solid #fff;box-shadow:0 10px 0 rgba(0,0,0,.14);cursor:pointer;scroll-snap-align:center;transition:transform .25s,box-shadow .25s}
.wcard .cov{width:100%;aspect-ratio:4/3;border-radius:26px;overflow:hidden;background:var(--c,#cfe3f3)}
.wcard .cov img{width:100%;height:100%;object-fit:cover;display:block}
.wcard .ttl{padding:8px 6px 2px}
.wcard .ttl b{display:block;font-size:22px;color:#334;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard .ttl small{display:block;font-size:13px;color:#8a97a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard .dots{display:flex;align-items:center;gap:6px;padding:6px 4px 2px}
.wcard .dots i{width:24px;height:24px;border-radius:50%;background:#e4ebf2;border:3px solid #fff;box-shadow:0 0 0 2px #d3dde7;display:block;overflow:hidden}
.wcard .dots i.done{background:#ffd23f;box-shadow:0 0 0 2px #f5b800}
.wcard .dots i.done img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.wcard .dots i.soon{background:transparent;box-shadow:none;border:3px dashed #c9d5e0}
.wcard .dots em{font-style:normal;margin-left:auto;font-size:15px;font-weight:700;color:#6b7b8c}
.wcard .play{position:absolute;left:50%;top:36%;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:#2ec05a;border:7px solid #fff;box-shadow:0 7px 0 rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;pointer-events:auto}
.wcard .play svg{width:42px;height:42px;margin-left:6px}
.wcard.current .play{animation:breathe 1.6s ease-in-out infinite}
.wcard:not(.current):not(.sel) .play{display:none}
.wcard.sel{transform:scale(1.04);box-shadow:0 0 0 8px #ffd23f,0 14px 0 rgba(0,0,0,.14)}
.wcard.sel .play{display:flex;animation:pulse 1.2s ease-in-out infinite}
.wcard.go{transform:scale(1.12);opacity:0;transition:transform .5s,opacity .5s .2s}
.wcard.bounce{animation:bounce .35s}
.wcard.wobble{animation:wob .5s}
.wcard .badge{position:absolute;right:-14px;top:-16px;width:78px;height:78px;border-radius:50%;background:#ffd23f;border:5px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}
.wcard .badge svg{width:48px;height:48px}
.wcard.locked .cov img{filter:grayscale(1) brightness(1.05);opacity:.65}
.wcard.locked .lock,.wcard.coming .lock{position:absolute;left:50%;top:36%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(80,95,115,.85);border:5px solid #fff;display:flex;align-items:center;justify-content:center}
.wcard .lock svg{width:44px;height:44px}
.wcard.coming{background:rgba(255,255,255,.55);border:5px dashed rgba(255,255,255,.95);box-shadow:none}
.wcard.coming .cov{background:rgba(255,255,255,.35)}
.wcard.coming .cov img{filter:brightness(0) invert(1);opacity:.8;object-fit:contain;padding:10px}
.wcard.coming .ttl b{color:#5b6b7c}
.wcard.coming .lock{background:rgba(120,170,90,.9)}
.wcard .wk{position:absolute;left:-10px;top:-12px;background:var(--c,#9aa9b8);color:#fff;font-weight:700;border-radius:14px;padding:2px 10px;font-size:15px;border:3px solid #fff;z-index:2}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes wob{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
@media (orientation:portrait){.wcard{width:min(62vw,300px)}}
@media (max-height:500px) and (orientation:landscape){.wcard{width:220px}.wcard .ttl b{font-size:18px}header{padding-top:8px}}