:root{--paper:#f8ebce;--deep:#21104b;--lilac:#a050ec;--gold:#f4cd76}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
html{color-scheme:light}
body{color:white;background:#1a0d43}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit}
a:focus-visible,button:focus-visible,.paper-text-scroll:focus-visible{outline:3px solid #ffe08f;outline-offset:3px}
.starlight-app{width:100%;min-height:100dvh;height:100dvh;overflow:hidden;position:relative;display:flex;flex-direction:column;isolation:isolate;background:radial-gradient(circle at 5% 80%,#8546a4b5,transparent 19%),radial-gradient(circle at 91% 7%,#cf7daa6b,transparent 17%),linear-gradient(135deg,#100b37,#3b1761 48%,#20104b)}
.starlight-app:before{content:"";position:absolute;inset:0;background:url('../povesti-carte-magica.webp') center/cover no-repeat;opacity:.18;z-index:-2}
.starlight-app:after{content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;opacity:.65;background-image:radial-gradient(#ffe7a0 1.5px,transparent 1.6px),radial-gradient(#eea4ff 1.3px,transparent 1.4px);background-size:110px 105px,151px 133px;background-position:14px 18px,70px 50px}
.site-header{flex:0 0 auto;display:flex;align-items:center;gap:17px;padding:10px clamp(15px,2.4vw,34px);min-height:76px;position:relative;z-index:4;background:linear-gradient(180deg,#0d0627c9,transparent)}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:clamp(23px,2.2vw,33px);letter-spacing:-.03em;white-space:nowrap;text-shadow:0 3px 16px #09001d}
.logo-star{display:grid;place-items:center;font-size:27px;width:49px;height:49px;background:linear-gradient(#ffe7a3,#fdb34a);box-shadow:0 0 0 3px #f8dea047,0 8px 19px #2a095c4f;border-radius:50%}
.logo-dot{color:#ffc4ec}
.nav{display:flex;align-items:center;justify-content:center;gap:clamp(5px,.8vw,12px);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px}
.nav::-webkit-scrollbar{display:none}
.nav a{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px clamp(12px,1.4vw,22px);border-radius:100px;border:1px solid #ffa8fb6b;background:linear-gradient(#7d41b6da,#3f1c75e6);box-shadow:inset 0 1px 0 #ffffff4d,0 9px 20px #07001b77;font-size:clamp(12px,.99vw,16px);font-weight:750;white-space:nowrap;transition:filter .18s,transform .18s}
.nav a:hover,.nav a[aria-current=page]{filter:brightness(1.25);transform:translateY(-1px)}
.sound-btn{border-radius:50%;width:54px;height:54px;border:2px solid #ffc2ff;background:radial-gradient(circle at 35% 15%,#c67eff,#512082 70%);color:white;font-size:25px;box-shadow:0 0 18px #ad69f67d;flex:none}
.story-layout{width:min(1740px,100%);margin:0 auto;flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(450px,1.1fr);gap:clamp(12px,1.15vw,22px);padding:0 clamp(13px,1.6vw,26px) 18px}
.story-aside{border-radius:26px;padding:clamp(14px,1.45vw,24px);overflow:hidden;min-height:0;background:linear-gradient(140deg,#3b197fcf,#351464df 65%,#4c2584d9);border:2px solid #e7b1e14d;box-shadow:0 16px 54px #08012196,inset 0 2px 0 #ffffff16;display:flex;flex-direction:column;gap:11px}
.breadcrumbs{align-self:flex-start;color:#ffe8b6;font-size:13px;font-weight:800;border-bottom:1px solid #ffdc8f74;padding:2px 0 4px}
.kicker{background:#af74f136;color:#fff2e8;border:1px solid #ffdaeb67;border-radius:100px;padding:8px 13px;align-self:flex-start;font-size:12px;font-weight:850;letter-spacing:.08em}
.story-aside h1{font:800 clamp(37px,4.3vw,69px)/.96 Georgia,serif;margin:0;color:#fff7ed;text-shadow:0 5px 18px #090122;letter-spacing:-.04em}
.story-aside h1 em{font-style:normal;color:#ffe8ad}
.story-subtitle{margin:0;font-size:clamp(14px,1.16vw,18px);line-height:1.4;color:#fdf2ff}
.cover-figure{position:relative;margin:2px 0 0;flex:1 1 auto;min-height:110px;max-height:255px;border-radius:19px;border:2px solid #ffdb9eaa;box-shadow:0 12px 22px #13082d66;overflow:hidden;background:#53347b}
.cover-figure img{width:100%;height:100%;object-fit:cover;display:block;object-position:center}
.cover-label{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:linear-gradient(transparent,#1b0d4ce8);font-family:Georgia,serif;font-size:clamp(13px,1.15vw,19px);font-weight:750}
.section-mini-title{font-size:13px;color:#ffeca9;font-weight:850;letter-spacing:.03em}
.parts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:0 0 auto}
.part-choice{display:flex;align-items:center;gap:9px;text-align:left;color:white;background:linear-gradient(#7445ac88,#492471bc);border:1px solid #ffffff42;box-shadow:inset 0 1px 0 #ffffff16;border-radius:17px;padding:8px;min-height:74px;min-width:0}
.part-choice img{width:68px;height:58px;object-fit:cover;border-radius:12px;border:1px solid #ffe7b0a6;flex:none}
.part-choice span{min-width:0}.part-choice strong{display:block;font-size:15px}.part-choice small{display:block;margin-top:3px;font-size:12px;line-height:1.24;color:#f9ecff}
.part-choice[aria-pressed=true]{color:#4d2a68;background:linear-gradient(#fffce6,#f5dfa8);border-color:#ffcd71;box-shadow:0 0 0 2px #ffeb9a50,0 5px 16px #160a367c}
.part-choice[aria-pressed=true] small{color:#725b78}
.side-actions{display:flex;gap:9px;margin-top:auto;flex:0 0 auto}
.side-actions button{padding:12px 12px;border-radius:100px;font-size:14px;font-weight:850;border:1px solid #ffffff80}
.listen-btn{background:linear-gradient(#fff8fa,#f7caff);color:#60308e;flex:1}.stop-btn{background:#6a30a9;color:white}
.stop-btn:disabled{opacity:.45;cursor:not-allowed}
.side-note{font-size:12px;color:#e9d7ff;min-height:1.4em;line-height:1.35}
.storybook-paper{position:relative;min-height:0;border-radius:32px;padding:13px;background:linear-gradient(120deg,#a16b2b,#f7d58d 5%,#ffe8aa 94%,#8d4a1b 100%);box-shadow:0 20px 65px #070019a8,inset 0 0 0 2px #ffecb5}
.storybook-paper:before{content:"✦";position:absolute;top:10px;right:25px;font-size:24px;color:#ba7828;text-shadow:0 2px 3px #ffe7b5}
.paper-inner{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative;border:4px double #d4a150;border-radius:23px;padding:clamp(13px,1.4vw,26px);color:#3f2a4e;background:linear-gradient(135deg,#fffaf0,#fff0ce 63%,#fbe8c3)}
.paper-inner:before,.paper-inner:after{content:'❧ ✦ ❧';pointer-events:none;position:absolute;color:#d7a14c;font-size:20px;z-index:0}
.paper-inner:before{top:0;left:8px}.paper-inner:after{bottom:0;right:8px;transform:rotate(180deg)}
.paper-heading{position:relative;z-index:1;display:flex;align-items:center;gap:15px;flex:0 0 auto;padding:4px 5px 12px;border-bottom:1px solid #dfb773;margin-bottom:12px}
.paper-thumb{height:81px;width:93px;border:2px solid #d9a465;border-radius:17px;object-fit:cover;box-shadow:0 5px 18px #93713833}
.paper-heading-text{min-width:0}.chapter-kicker{color:#8c5c93;font:800 clamp(11px,.93vw,14px)/1.3 system-ui,sans-serif;letter-spacing:.1em}
.paper-heading h2{margin:3px 0 2px;font:800 clamp(26px,2.35vw,43px)/1.04 Georgia,serif;color:#4b278a;letter-spacing:-.025em}
.paper-heading p{margin:0;font-size:clamp(12px,1vw,17px);color:#7c5970;line-height:1.3}
.paper-illustration{height:clamp(170px,30%,285px);min-height:155px;flex:0 0 auto;border:2px solid #dfb571;border-radius:23px;overflow:hidden;box-shadow:0 8px 19px #7744262e;background:#a18bc0;margin:0 0 15px}
.paper-illustration img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.paper-text-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#dbad70 transparent;scrollbar-width:thin;padding-right:6px}
.story-paragraphs{font:400 clamp(17px,1.24vw,23px)/1.52 Georgia,'Times New Roman',serif;color:#432f4d}
.story-paragraphs p{margin:0 0 14px}
.story-paragraphs p:first-child::first-letter{font-size:3em;float:left;line-height:.81;margin:.1em .12em 0 0;color:#5c3195}
.paper-bottom{display:grid;grid-template-columns:minmax(104px,160px) minmax(70px,1fr) minmax(104px,160px);align-items:center;gap:8px;flex:0 0 auto;border-top:1px solid #d8a863;margin-top:10px;padding-top:14px}
.paper-arrow{padding:12px 8px;font:800 clamp(14px,1.15vw,20px)/1.2 Georgia,serif;border-radius:100px;border:2px solid #ffe2ef;color:white;background:linear-gradient(#b757ff,#6f2cce);box-shadow:0 7px 15px #9d47883f}
.paper-arrow.back{background:linear-gradient(#d0a8d6,#a36bba)}.paper-arrow:disabled{opacity:.55;cursor:not-allowed}
.page-progress{text-align:center;color:#73516b;font:16px Georgia,serif}.progress-track{height:5px;background:#dac29f;border-radius:40px;margin:7px auto 0;width:clamp(64px,60%,160px);overflow:hidden}.progress-track span{height:100%;display:block;width:25%;background:linear-gradient(90deg,#ba6bd8,#7835ce);transition:width .2s}
.sound-menu{position:fixed;right:21px;top:78px;z-index:30;width:min(330px,92vw);border:2px solid white;border-radius:22px;padding:17px;background:#fff8fd;color:#4b3562;box-shadow:0 19px 70px #0d0319a0}
.sound-menu[hidden]{display:none!important}.sound-title{display:flex;justify-content:space-between;align-items:center;font-weight:850;margin-bottom:10px}.sound-close{border:0;border-radius:10px;background:#edddf8;padding:7px 12px}.audio-controls{display:grid;gap:11px}.audio-controls label{display:grid;gap:6px;font-size:13px;font-weight:750}.audio-controls select{padding:9px;background:white;border:1px solid #dac8ee;border-radius:10px;color:#4b3562}.audio-controls input{width:100%;accent-color:#885bc0}.audio-controls button{border:0;border-radius:12px;background:#8050bc;color:white;padding:10px}.audio-status{margin:0;font-size:12px;color:#806b91}
@media(max-width:1180px){.site-header{gap:9px}.logo-star{width:38px;height:38px;font-size:20px}.logo{font-size:23px}.nav a{padding:9px 10px}.story-layout{grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr)}.story-aside{gap:7px}.paper-heading h2{font-size:29px}.part-choice img{width:52px;height:52px}.part-choice{min-height:65px}.story-paragraphs{font-size:17px}}
@media(max-width:900px){body{overflow:auto}.starlight-app{height:auto;min-height:100dvh;overflow:visible}.site-header{flex-wrap:wrap;justify-content:space-between}.nav{order:3;flex-basis:100%;justify-content:flex-start}.story-layout{grid-template-columns:1fr;height:auto;padding-bottom:26px}.story-aside{min-height:0}.cover-figure{height:240px;flex:none;max-height:none}.storybook-paper{min-height:700px}.paper-inner{height:680px}.paper-illustration{height:230px}.story-paragraphs{font-size:18px}}
@media(max-width:550px){.logo{font-size:21px}.logo-star{width:35px;height:35px}.site-header{padding:8px 12px}.sound-btn{height:42px;width:42px;font-size:20px}.nav a{font-size:12px;padding:9px 11px}.story-layout{padding:0 10px 20px}.story-aside{padding:14px}.story-aside h1{font-size:40px}.part-choice{min-height:70px}.part-choice img{width:54px;height:51px}.part-choice strong{font-size:13px}.part-choice small{font-size:11px}.storybook-paper{padding:9px;border-radius:22px;min-height:670px}.paper-inner{padding:13px;border-radius:17px;height:655px}.paper-heading{gap:10px}.paper-thumb{width:65px;height:67px;border-radius:12px}.paper-heading h2{font-size:23px}.paper-heading p{font-size:12px}.paper-illustration{height:200px;min-height:150px}.story-paragraphs{font-size:16px;line-height:1.45}.paper-bottom{grid-template-columns:1fr 1fr;gap:7px}.page-progress{grid-column:1/-1;grid-row:1}.paper-arrow{font-size:15px;padding:10px 8px}.paper-bottom .back{grid-column:1}.paper-bottom .next{grid-column:2}}
@media(max-height:740px) and (min-width:901px){.site-header{min-height:60px;padding:6px 14px}.story-aside{gap:6px;padding:12px}.story-aside h1{font-size:40px}.story-subtitle{font-size:13px}.kicker{padding:5px 10px}.cover-figure{max-height:180px}.part-choice{min-height:56px;padding:5px}.part-choice img{width:52px;height:48px}.side-actions button{padding:9px 10px}.paper-inner{padding:12px}.paper-heading{margin-bottom:8px;padding-bottom:7px}.paper-thumb{height:65px;width:76px}.paper-illustration{height:26%;min-height:130px;margin-bottom:7px}.paper-heading h2{font-size:25px}.story-paragraphs{font-size:16px;line-height:1.42}.paper-bottom{margin-top:5px;padding-top:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* Identitate Lumi: continuăm aspectul aprobat al cititorului PUPIS. */
.story-aside h1{font-size:clamp(30px,3.25vw,57px);line-height:1.03}.story-aside h1 em{color:#ffe99d}.part-choice small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:900px){.story-aside h1{font-size:clamp(30px,7vw,43px)!important}}

/* Identitatea lui Zguby */
.story-aside h1 em{color:#a6f6ce!important}.kicker{letter-spacing:.11em}

/* ManyX: paletă aurie */
.story-aside h1 em{color:#ffd79c!important}

/* Piri v107: păstrăm cititorul aprobat; identitate violet-perlată, fără modificări globale. */
.story-aside h1 em{color:#f6d5ff!important}.starlight-app{background:radial-gradient(circle at 7% 80%,#a356b8aa,transparent 23%),radial-gradient(circle at 92% 8%,#f3b87480,transparent 20%),linear-gradient(130deg,#170d37,#4a2473 52%,#251347)}
.part-choice[aria-pressed=true]{background:linear-gradient(#fff9f3,#f9dfec)}
.storybook-paper{background:linear-gradient(120deg,#90663b,#f2cf93 6%,#ffe7b2 94%,#945a3b 100%)}