:root{--hdr:96px;--info:84px;--bg:#0b0d12;--fg:#f3f4f7;--mut:#9aa1b2;--acc:#5eead4}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}
header{position:fixed;inset:0 0 auto 0;z-index:10;height:var(--hdr);padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background:linear-gradient(var(--bg) 70%,rgba(11,13,18,0));display:flex;flex-direction:column;gap:8px}
.brand{font-weight:800;font-size:20px;letter-spacing:.3px}
.brand span{color:var(--acc)}
#chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
#chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid #2a3040;background:#151924;color:var(--fg);border-radius:999px;padding:6px 14px;font:600 14px system-ui;cursor:pointer}
.chip[aria-pressed=true]{background:var(--acc);color:#04201c;border-color:var(--acc)}
#feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
#feed::-webkit-scrollbar{display:none}
.card{height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;
  padding-top:var(--hdr);padding-bottom:env(safe-area-inset-bottom)}
.stage{--h:min(calc(100dvh - var(--hdr) - var(--info) - env(safe-area-inset-bottom)), calc(100vw * 16 / 9));
  height:var(--h);width:calc(var(--h) * 9 / 16);max-width:100vw;border-radius:14px;overflow:hidden;background:#000;position:relative}
.stage img.thumb{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.stage .player,.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.info{height:var(--info);width:100%;max-width:520px;display:flex;align-items:center;gap:10px;padding:8px 12px}
.meta{flex:1;min-width:0}
.title{font-weight:650;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sub{color:var(--mut);font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub a{color:var(--mut)}
.tag{color:var(--acc);font-weight:600}
.btns{display:flex;gap:6px;flex:none}
.btn{width:40px;height:40px;border-radius:50%;border:1px solid #2a3040;background:#151924;color:var(--fg);font-size:18px;cursor:pointer;display:grid;place-items:center}
.btn.sound.on{background:var(--acc);color:#04201c;border-color:var(--acc)}
#empty{position:fixed;inset:40% 0 auto;text-align:center;color:var(--mut)}
.endcard{height:100dvh;scroll-snap-align:start;display:grid;place-items:center;text-align:center;padding:var(--hdr) 24px 24px;color:var(--mut)}
.endcard button{margin-top:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
#soundPrompt{border:0;border-radius:999px;padding:7px 14px;background:#fbbf24;color:#1f1300;font:700 14px system-ui;cursor:pointer;animation:pulse 1.6s ease-in-out infinite}
#soundPrompt[hidden]{display:none}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(251,191,36,.25)}}
.hbtns{display:flex;align-items:center;gap:8px}
#fsBtn{width:36px;height:36px;font-size:18px}
.btn.fsx{display:none}
/* immersive / full-screen mode: no header, no captions, Short fills the width edge to edge */
body.immersive{--hdr:0px;--info:56px}
body.immersive header{display:none}
body.immersive .stage{border-radius:0;max-width:100vw}
body.immersive .info{justify-content:center;padding:6px 12px}
body.immersive .meta{display:none}
body.immersive .btns{gap:18px}
body.immersive .btn.fsx{display:grid}
body.immersive .card{padding-top:env(safe-area-inset-top)}
#menuBtn{width:36px;height:36px;font-size:18px}
header{overflow:visible}
#menu{position:absolute;top:calc(env(safe-area-inset-top) + 52px);right:12px;z-index:20;width:min(280px,calc(100vw - 24px));background:#151924;border:1px solid #2a3040;border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:14px}
#menu[hidden]{display:none}
#menu small,#menu .fine{color:var(--mut);font-size:12px}
#resetReco{display:block;width:100%;margin:10px 0 6px;padding:9px;border-radius:10px;border:1px solid #3a4256;background:#0b0d12;color:var(--fg);font:600 14px system-ui;cursor:pointer}
body.immersive .info{flex:1;height:auto;max-width:none}

/* ===== Curioloop brand (v9) =====
   Coral #FF6F59 · Rose #E0559E · Violet #7B5CFF · Sunny #FFC23D · Night #120E22 · Cream #FFF7EE */
:root{--bg:#120E22;--panel:#1D1736;--line:#352B5C;--fg:#FFF7EE;--mut:#B3A9CF;--acc:#FF8A73;
  --coral:#FF6F59;--rose:#E0559E;--violet:#7B5CFF;--sun:#FFC23D;--grad:linear-gradient(120deg,#FF6F59,#E0559E 55%,#7B5CFF)}
html,body{font-family:"Fredoka",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{background:linear-gradient(var(--bg) 70%,rgba(18,14,34,0))}
.brand{display:flex;align-items:center;gap:7px;color:var(--fg);text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none}
.word{font:700 23px/1 "Fredoka",system-ui,sans-serif;letter-spacing:-.2px;color:var(--fg)}
.word b{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chip{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;background:var(--panel);border-color:var(--line)}
.chip[aria-pressed=true]{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(224,85,158,.35)}
.btn{background:var(--panel);border-color:var(--line)}
.btn.sound.on{background:var(--grad);color:#fff;border-color:transparent}
.tag{color:var(--acc)}
#soundPrompt{background:var(--sun);color:#2A1F55;font-family:"Fredoka",system-ui,sans-serif;font-weight:600}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(255,194,61,.25)}}
#menu{background:var(--panel);border-color:var(--line)}
#resetReco{background:var(--bg);border-color:var(--line);font-family:"Fredoka",system-ui,sans-serif}
.endcard .chip{background:var(--grad);color:#fff;border:0}
.stage{box-shadow:0 0 0 1px rgba(123,92,255,.25)}
/* splash */
#splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(120% 80% at 50% 35%,#2A1F55 0%,var(--bg) 70%);transition:opacity .45s ease,visibility .45s}
#splash .mark{width:112px;height:112px;animation:spin-in 1.1s cubic-bezier(.2,.8,.2,1) both}
#splash .word.big{font-size:40px}
#splash .tagline{color:var(--mut);font:500 17px "Fredoka",system-ui,sans-serif;letter-spacing:.2px}
#splash.done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes spin-in{from{transform:rotate(-200deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#splash .mark,#soundPrompt{animation:none}}

/* ===== v10: sound controls (SVG icons, brand style) ===== */
.ico{width:20px;height:20px;display:block}
.btn.sound{position:relative;color:var(--fg);background:#241B45;border:2px solid transparent;
  background:linear-gradient(#241B45,#241B45) padding-box,linear-gradient(120deg,rgba(255,111,89,.75),rgba(123,92,255,.75)) border-box}
.btn.sound.on{background:var(--grad);border-color:transparent;color:var(--fg);box-shadow:0 4px 14px rgba(224,85,158,.35)}
#soundPrompt{display:inline-flex;align-items:center;gap:6px;padding:6px 13px 6px 10px;color:var(--fg);font:600 14px "Fredoka",system-ui,sans-serif;
  border:2px solid transparent;border-radius:999px;
  background:linear-gradient(#241B45,#241B45) padding-box,var(--grad) border-box;animation:soundpulse 2.2s ease-in-out infinite}
#soundPrompt .ico{width:18px;height:18px}
@keyframes soundpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,85,158,.0)}50%{box-shadow:0 0 0 6px rgba(224,85,158,.22)}}
@media (prefers-reduced-motion:reduce){#soundPrompt{animation:none}}

/* ===== v10: fun-fact cards ===== */
.factstage{cursor:pointer;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(90% 60% at 80% 10%,rgba(255,194,61,.18),transparent 60%),linear-gradient(160deg,#FF6F59 0%,#E0559E 45%,#7B5CFF 100%)}
.factbody{padding:28px 24px;display:flex;flex-direction:column;gap:14px;color:#FFF7EE}
.spark{width:56px;height:56px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}
.factlabel{font:700 15px "Fredoka",sans-serif;letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.facttag{letter-spacing:.3px;text-transform:none;font-weight:600;font-size:13px;background:rgba(18,14,34,.35);padding:3px 10px;border-radius:999px}
.facttext{font:600 clamp(21px,6vw,28px)/1.3 "Fredoka",sans-serif;text-wrap:pretty}
.facthint{font-size:13px;opacity:.8}
.factbar{position:absolute;left:16px;right:16px;bottom:14px;height:4px;border-radius:99px;background:rgba(255,247,238,.3);overflow:hidden}
.factbar i{display:block;height:100%;width:0;background:#FFF7EE;border-radius:99px}

/* ===== v10: menu toggle ===== */
.toggle{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 2px;cursor:pointer;font-weight:600}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle i{width:44px;height:26px;border-radius:99px;background:#3a3160;position:relative;transition:background .2s}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFF7EE;transition:transform .2s}
.toggle input:checked + i{background:var(--grad)}
.toggle input:checked + i::after{transform:translateX(18px)}
.toggle input:focus-visible + i{outline:2px solid var(--sun);outline-offset:2px}
/* keep the header on one line on small phones */
#soundPrompt{white-space:nowrap;flex:none;font-size:13px;padding:5px 10px 5px 8px;gap:4px}
#soundPrompt .ico{width:16px;height:16px}
header .brand .word{font-size:21px} header .brand .mark{width:28px;height:28px} header .brand{gap:6px;min-width:0}
.hbtns{gap:6px}

/* ===== v12: card action row (save / share / report) ===== */
:root{--info:104px}
.title{-webkit-line-clamp:1}
.acts{display:flex;gap:6px;margin-top:7px}
.act{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px 0 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--fg);font:600 13px "Fredoka",system-ui,sans-serif;cursor:pointer}
.act .ico{width:16px;height:16px}
.act.heart.on{--hf:#FFF7EE;background:var(--grad);border-color:transparent;box-shadow:0 3px 12px rgba(224,85,158,.35)}
.act.report{padding:0 10px}
.act:active{transform:scale(.96)}
@media (max-width:370px){.act.report span{display:none}.act.report{padding:0 8px}}
body.immersive .acts{display:none}

/* saved view header */
#savedBar{display:none;align-items:center;gap:10px}
body.saved-mode #chips{display:none}
body.saved-mode #savedBar{display:flex}
.savedtitle{font:700 17px "Fredoka",sans-serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#savedCount{color:var(--mut);font-size:13px}

/* menu links */
.menulinks{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.mitem{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 4px;background:none;border:0;color:var(--fg);
  font:600 14px "Fredoka",system-ui,sans-serif;text-decoration:none;cursor:pointer;border-radius:8px;text-align:left}
.mitem:hover{background:rgba(123,92,255,.12)}
.mitem b{min-width:22px;text-align:center;font-size:12px;padding:2px 7px;border-radius:99px;background:var(--grad);color:#fff}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 118px);transform:translate(-50%,20px);opacity:0;z-index:60;
  background:#FFF7EE;color:#2A1F55;font:600 14px "Fredoka",sans-serif;padding:9px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:opacity .2s,transform .2s;pointer-events:none;max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* report bottom sheet */
.sheet{position:fixed;inset:0;z-index:70;background:rgba(10,8,20,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheetpanel{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:sheetup .22s ease-out}
@keyframes sheetup{from{transform:translateY(40px);opacity:.5}}
.sheetpanel h3{font:700 19px "Fredoka",sans-serif}
.sheetsub{color:var(--mut);font-size:13px;margin:4px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reason{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:6px 0;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:600}
.reason input{accent-color:#E0559E;width:18px;height:18px}
.reason:has(input:checked){border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;border:1px solid transparent}
.sheet .fine{color:var(--mut);font-size:12px;margin:8px 2px 12px}
.sheetbtns{display:flex;gap:10px}
.sheetbtns button{flex:1;height:44px;border-radius:12px;font:600 15px "Fredoka",sans-serif;cursor:pointer}
.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.primary{background:var(--grad);border:0;color:#fff}
.primary:disabled{opacity:.45;cursor:not-allowed}

/* welcome / topic picker */
#welcome{position:fixed;inset:0;z-index:90;overflow-y:auto;display:flex;justify-content:center;
  background:radial-gradient(120% 70% at 50% 0%,#2A1F55 0%,var(--bg) 65%)}
#welcome[hidden]{display:none}
.wbox{width:min(440px,100%);padding:calc(env(safe-area-inset-top) + 34px) 22px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}
.wbox .mark{width:84px;height:84px}
.wbox .word.big{font-size:36px;margin-top:8px}
.wbox .tagline{color:var(--mut);font:500 16px "Fredoka",sans-serif;margin-top:4px}
.wbox h2{font:700 22px "Fredoka",sans-serif;margin-top:28px}
.wsub{color:var(--mut);font-size:14px;margin:6px 0 16px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.tile{height:104px;border-radius:18px;border:2px solid transparent;cursor:pointer;color:var(--fg);font:700 17px "Fredoka",sans-serif;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(120deg,rgba(255,111,89,.35),rgba(123,92,255,.35)) border-box;transition:transform .12s}
.tile .te{font-size:30px}
.tile.on{background:var(--grad) padding-box,var(--grad) border-box;box-shadow:0 6px 20px rgba(224,85,158,.35);transform:translateY(-2px)}
.tile:active{transform:scale(.97)}
.primary.big{width:100%;height:52px;border-radius:16px;font:700 17px "Fredoka",sans-serif;margin-top:22px;cursor:pointer}
.skip{margin-top:12px;background:none;border:0;color:var(--mut);font:600 14px "Fredoka",sans-serif;text-decoration:underline;cursor:pointer;padding:8px}

/* ===== v13: full-screen polish – no stray gray boxes ===== */
/* 1. no gray tap-highlight rectangles (iOS/Android paint one over tapped buttons), no native button chrome */
html{-webkit-tap-highlight-color:transparent}
*{-webkit-tap-highlight-color:transparent}
button{-webkit-appearance:none;appearance:none}
:focus:not(:focus-visible){outline:none}
.btn:active,.act:active,.chip:active{transform:scale(.94)}
/* 2. brand Night background everywhere (incl. the fullscreen backdrop) */
html,body,#feed,.card{background-color:#120E22}
:root:fullscreen,:root:-webkit-full-screen{background:#120E22}
::backdrop{background:#120E22}
.stage{background:#120E22}
/* 3. hidden overlays never paint */
#toast:not(.show){visibility:hidden}
/* 4. immersive mode: only the video + one clean themed control bar */
body.immersive{--info:64px}
body.immersive .card{padding:env(safe-area-inset-top) 0 0;justify-content:flex-start}
body.immersive .stage{--h:min(calc(100dvh - var(--info) - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc(100vw * 16 / 9));box-shadow:none;border-radius:0}
body.immersive .info{flex:1 1 auto;height:auto;min-height:calc(var(--info) + env(safe-area-inset-bottom));max-width:none;width:100%;
  display:flex;align-items:center;justify-content:center;padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:#120E22}
body.immersive .meta,body.immersive .acts,body.immersive header,body.immersive #toast,body.immersive #menu{display:none!important}
body.immersive .btns{gap:22px}
body.immersive .btn{width:46px;height:46px;background:#1D1736;border:1px solid #352B5C;color:#FFF7EE}
body.immersive .btn.sound{background:linear-gradient(#241B45,#241B45) padding-box,linear-gradient(120deg,rgba(255,111,89,.75),rgba(123,92,255,.75)) border-box;border:2px solid transparent}
body.immersive .btn.sound.on{background:linear-gradient(120deg,#FF6F59,#E0559E 55%,#7B5CFF) padding-box,linear-gradient(120deg,#FF6F59,#E0559E 55%,#7B5CFF) border-box;border:2px solid transparent}
.btn.sound.on{background:linear-gradient(120deg,#FF6F59,#E0559E 55%,#7B5CFF) padding-box,linear-gradient(120deg,#FF6F59,#E0559E 55%,#7B5CFF) border-box}
/* iPhone hint (Safari's own toolbar can't be hidden by a web page; Home Screen mode removes it) */
#fsHint{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:65;display:flex;gap:10px;align-items:center;
  background:#1D1736;border:1px solid #352B5C;border-radius:14px;padding:10px 12px;color:#FFF7EE;font:500 13px/1.35 "Fredoka",sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.45)}
#fsHint[hidden]{display:none}
#fsHint b{font-weight:700}
#fsHint button{flex:none;margin-left:auto;background:linear-gradient(120deg,#FF6F59,#E0559E 55%,#7B5CFF);color:#fff;border:0;border-radius:999px;padding:6px 12px;font:600 13px "Fredoka",sans-serif}