:root{--bg:#fff9ef;--bg2:#fff1d6;--card:#fff;--ink:#2b2438;--muted:#6b6478;--line:#f0e2c8;--accent:#ff7a2f;--accent2:#7c4dff;--ok:#2f9e44;--shadow:0 6px 18px rgba(80,50,10,.10);--r:20px;--fs:1.12rem}
:root[data-theme=dark]{--bg:#17132a;--bg2:#201a3a;--card:#241e3f;--ink:#f6f1ff;--muted:#b4abcc;--line:#352d58;--accent:#ff9a55;--accent2:#a68bff;--shadow:0 6px 18px rgba(0,0,0,.4)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 ui-rounded,"Nunito","Quicksand","Segoe UI",system-ui,-apple-system,sans-serif;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-weight:800;line-height:1.18;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,5vw,3rem)}
h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2em 0 .7em}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.muted{color:var(--muted)}.small{font-size:.88rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.wrap.narrow{max-width:780px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:8px 14px;z-index:99;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent2);outline-offset:2px;border-radius:8px}
/* header */
header.site{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:14px;min-height:62px}
.logo{font-weight:900;font-size:1.35rem;text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.logo b{color:var(--accent)}
.logo .mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#ffd43b,#ff8a3d);font-size:1.2rem;box-shadow:0 3px 0 rgba(0,0,0,.12)}
nav.main{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a,nav.main .icon-btn{text-decoration:none;font-weight:700;padding:8px 12px;border-radius:999px;font-size:.95rem;position:relative}
nav.main a:hover{background:var(--bg2)}
body[data-nav=stories] a[data-nav=stories],body[data-nav=genres] a[data-nav=genres],body[data-nav=football] a[data-nav=football],body[data-nav=library] a[data-nav=library],body[data-nav=favourites] a[data-nav=favourites],body[data-nav=stickers] a[data-nav=stickers]{background:var(--accent);color:#fff}
.badge{background:var(--accent2);color:#fff;border-radius:999px;font-size:.7rem;padding:1px 7px;margin-left:5px}
.icon-btn{border:0;background:transparent;font-size:1.15rem;cursor:pointer;color:var(--ink);font-family:inherit}
.burger{display:none;margin-left:auto}
@media(max-width:900px){.burger{display:block}nav.main{display:none;position:absolute;left:0;right:0;top:62px;background:var(--bg);flex-direction:column;align-items:stretch;padding:10px 16px 16px;border-bottom:2px solid var(--line);margin:0}nav.main.open{display:flex}nav.main a,nav.main .icon-btn{padding:12px 14px;text-align:left}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:0;background:var(--accent);color:#fff;font:800 1rem/1 inherit;font-family:inherit;padding:13px 20px;border-radius:999px;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:transform .08s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 0 0 2px var(--line)}
.btn.big{padding:16px 26px;font-size:1.1rem}
.btn[hidden]{display:none}
.row{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
/* hero */
.hero{background:radial-gradient(circle at 85% 20%,#ffe8a3 0,transparent 40%),radial-gradient(circle at 10% 90%,#ffd1e8 0,transparent 35%),var(--bg2);padding:32px 0 36px;border-bottom:2px solid var(--line)}
:root[data-theme=dark] .hero{background:radial-gradient(circle at 85% 20%,#3a2a6b 0,transparent 45%),var(--bg2)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero .hl{color:var(--accent)}.hero .hl2{color:var(--accent2)}
.lead{font-size:1.18rem;color:var(--muted)}
.hero-art .art{border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff;transform:rotate(2deg)}
.art{aspect-ratio:4/3;background:linear-gradient(135deg,var(--g1,#ffd43b),var(--g2,#ff8a3d));overflow:hidden}
.art svg{display:block;width:100%;height:100%}
.stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.stats div{display:flex;flex-direction:column}.stats b{font-size:1.7rem;color:var(--accent2)}.stats span{font-size:.85rem;color:var(--muted)}
@media(max-width:800px){.hero .wrap{grid-template-columns:1fr}.hero-art{order:-1;max-width:420px}}
.searchbox{display:flex;gap:8px;margin:14px 0;max-width:560px}
.searchbox input{flex:1;min-width:0;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:13px 18px;font:inherit}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.grid.one{grid-template-columns:minmax(0,520px)}
.card{position:relative;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:2px solid var(--line);transition:transform .15s}
.card:hover{transform:translateY(-4px) rotate(-.4deg)}
.card .full{position:absolute;inset:0;z-index:2}
.card .art{border-bottom:2px solid var(--line)}
.card .body{padding:12px 14px 14px}
.card h3{margin:.35em 0 .3em;font-size:1.08rem}
.card p{font-size:.92rem;color:var(--muted);margin:0 0 .6em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gtag{display:inline-block;font-size:.76rem;font-weight:800;padding:3px 10px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2))}
.meta{display:flex;gap:12px;font-size:.8rem;color:var(--muted);font-weight:700}
.fav{position:absolute;top:10px;right:10px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#e03131;font-size:1.25rem;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);font-family:inherit}
.fav.on{background:#e03131;color:#fff}
.fav[data-label]{position:static;width:auto;height:auto;border-radius:999px;padding:13px 20px;font-weight:800;font-size:1rem;box-shadow:0 0 0 2px var(--line);background:var(--card);color:var(--ink)}
.fav[data-label].on{background:#e03131;color:#fff}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.tiles.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tile{display:block;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));border-radius:var(--r);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .15s}
.tile:hover{transform:translateY(-4px) scale(1.02)}
.tile .e{font-size:2.4rem;display:block;margin-bottom:6px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.15))}
.tile h3{margin:0 0 4px;color:#fff}.tile p{margin:0 0 6px;font-size:.9rem;opacity:.95}.tile small{opacity:.9;font-weight:700}
.banner{display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:28px;padding:26px;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));margin-bottom:20px;box-shadow:var(--shadow)}
.banner h3{font-size:1.6rem;color:#fff}.banner .btn{background:#fff;color:#0b7285}
.banner .bart{font-size:5rem;animation:bounce 2s infinite}
@keyframes bounce{50%{transform:translateY(-12px) rotate(12deg)}}
/* chips */
.chips,.gfilter{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-weight:700;font-size:.88rem;text-decoration:none}
a.chip:hover,.chip.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.crumbs{font-size:.88rem;color:var(--muted);margin:14px 0 10px}.crumbs a{text-decoration:none;font-weight:700}
/* pager */
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:34px 0}
.pager a,.pager .gap{padding:9px 15px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-weight:800;text-decoration:none;min-width:44px;text-align:center}
.pager .gap{border:0;background:none}
.pager a.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
/* genre hero */
.ghero{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;padding:12px 0 26px}
.ghero .crumbs,.ghero .crumbs a{color:#fff;opacity:.95}.ghero h1,.ghero .lead{color:#fff}
.ghero .chip{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:#fff}
.ghero-row{display:flex;align-items:center;gap:18px}
.gemoji{font-size:4.5rem;filter:drop-shadow(0 5px 0 rgba(0,0,0,.2))}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:14px 0}
.club{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--card);border:2px solid var(--line);border-left:8px solid var(--tc)}
.shield{font-size:1.3rem}
/* filters */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.filters label{display:flex;flex-direction:column;font-size:.82rem;font-weight:800;color:var(--muted);gap:4px}
.filters select{padding:10px 14px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700}
.empty{text-align:center;padding:50px 0}.empty .big{font-size:4rem}
/* story */
.story-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 22%,var(--bg)),color-mix(in srgb,var(--g2) 22%,var(--bg)));border-bottom:2px solid var(--line);padding-bottom:20px}
.hero-row{display:flex;gap:18px;align-items:center;margin-bottom:8px}
.portrait{flex:none;width:92px;height:92px;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:var(--shadow)}
.portrait svg{display:block;width:100%;height:100%}
.story h1{font-size:clamp(1.6rem,4.4vw,2.5rem);margin-bottom:.3em}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.book{padding-top:16px;padding-bottom:10px;font-size:var(--fs)}
.scene{margin:26px 0;display:flex;flex-direction:column;gap:12px}
.pic{margin:0;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff;background:var(--bg2)}
:root[data-theme=dark] .pic{border-color:var(--line)}
.pic .art{aspect-ratio:4/3}
.scene .txt{font-size:1em;line-height:1.75;margin:0;padding:6px 6px;border-radius:14px;transition:background .2s}
.scene:first-child .txt::first-letter{font-size:2.6em;float:left;line-height:.9;padding:4px 8px 0 0;color:var(--accent);font-weight:900}
.scene.speaking .txt{background:color-mix(in srgb,var(--accent) 22%,transparent)}
@media(min-width:760px){.scene{flex-direction:row;align-items:center;gap:22px}.scene.alt{flex-direction:row-reverse}.scene .pic{flex:0 0 52%}.scene .txt{flex:1}}
.end{margin:36px 0 10px;display:grid;gap:18px}
.moral{display:flex;gap:14px;background:#fff3c4;color:#4a3b05;border-radius:22px;padding:18px 20px;border:2px dashed #f2c94c}
:root[data-theme=dark] .moral{background:#3a3210;color:#ffe9a3;border-color:#7a6a1f}
.moral h2,.talk h2{margin:0 0 .2em;font-size:1.15rem}.moral p{margin:0}.mi{font-size:2rem}
.talk{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:16px 22px}
.talk ul{margin:0;padding-left:1.2em}.talk li{margin:.3em 0}
.finish{text-align:center;padding:10px 0}
.finish .done{animation:pop .5s}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pn{display:block;text-decoration:none;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:12px 16px;font-weight:800}
.pn small{display:block;color:var(--muted);font-weight:700}.pn.r{text-align:right}
/* stickers */
.progress .bar{height:18px;background:var(--bg2);border-radius:99px;overflow:hidden;border:2px solid var(--line)}
.progress .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s}
.stk-genres{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;margin-top:18px}
.stk{text-align:center;text-decoration:none;font-size:.78rem;font-weight:800}
.stk .portrait{width:100%;height:auto;aspect-ratio:1;margin-bottom:6px;transform:rotate(var(--rot,0deg));transition:transform .2s}
.stk:hover .portrait{transform:rotate(0) scale(1.08)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(30px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:800;opacity:0;pointer-events:none;transition:all .25s;z-index:50;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%)}
.prose h2{margin-top:1.6em}.prose li{margin:.5em 0}
/* footer */
footer.site{margin-top:60px;background:var(--bg2);border-top:2px solid var(--line);padding:30px 0}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.fgrid h4{margin-bottom:.5em}.fgrid ul{list-style:none;padding:0;margin:0}.fgrid li{margin:.35em 0}.fgrid a{text-decoration:none}.fgrid a:hover{text-decoration:underline}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
@media print{header.site,footer.site,.toolbar,.end .finish,.prevnext,.fav{display:none!important}body{background:#fff;color:#000}.card{break-inside:avoid}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}