/* Миры Ла Манга — оформление. Тексты мира: world.js; механика: lamanga.js. */
:root{
  color-scheme:dark;
  --ink:#05040b;--ink-2:#0c0a18;--pearl:#f3eef9;--mist:#c9c0dc;--dim:#9f96b8;
  --pink:#f08fdc;--rose:#ffb6e6;--violet:#9d86f0;--ice:#cfe6ff;--ember:#ff6a3c;
  --line:#d8c8f02e;--glass:#15112499;
  --ease:cubic-bezier(.16,1,.3,1);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
.trainer-loading-message{display:grid;place-content:center;height:100%;color:#d8c8e8;text-align:center}
@media(max-width:600px){#console{gap:4px;padding:7px}#console .inst{width:clamp(42px,13vw,64px);height:64px;font-size:9px;padding-bottom:11px}#console .inst svg{top:12px;width:22px;height:22px}}
html,body{margin:0;height:100%;background:var(--ink);color:var(--pearl);font:16px/1.6 Interface,system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
button,a{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--rose);outline-offset:5px}
img{max-width:100%}

/* ---------- фон ---------- */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.nebula{position:fixed;inset:-15%;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(40% 35% at 70% 55%,#7a3f8f26,transparent 70%),radial-gradient(35% 30% at 25% 40%,#3a4a8a2a,transparent 70%),radial-gradient(25% 25% at 55% 85%,#a0406020,transparent 70%);
  animation:nebula 40s ease-in-out infinite alternate}
@keyframes nebula{to{transform:translate(-3%,2%) rotate(4deg) scale(1.08)}}
.flash{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#fff 0%,#f3d4ff 30%,#3b2766 75%);transition:opacity .25s}
.heat{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(120% 70% at 50% 118%,#ff4a1f70,transparent 62%);transition:opacity 1.8s}

/* ---------- слои-разделы ---------- */
.layer{position:fixed;inset:0;z-index:2;transition:opacity .55s var(--ease),transform .8s var(--ease),filter .5s var(--ease)}
.layer.hidden{opacity:0;pointer-events:none;visibility:hidden;transform:scale(.94);filter:blur(10px);transition:opacity .45s,transform .6s var(--ease),filter .45s,visibility 0s .6s}
body.jumping .layer:not(.hidden){opacity:0;transform:scale(1.18);filter:blur(14px);transition:opacity .45s,transform .7s cubic-bezier(.7,0,.84,0),filter .45s}

/* ---------- верхняя панель ---------- */
.topbar{position:fixed;z-index:20;top:calc(18px + var(--safe-t));left:24px;right:24px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;pointer-events:none;transition:opacity .6s}
body[data-section=hero] .topbar .brand{display:none}
.brand{pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:6px 4px;text-align:left;transition:opacity .5s}
.brand small{font:italic 400 13px/1 Literary,Georgia,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
.brand b{font:500 20px/1.1 Voyager,sans-serif;letter-spacing:-.02em;background:linear-gradient(100deg,#fff,var(--rose) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand:hover b{filter:drop-shadow(0 0 12px #f08fdc88)}
.back{pointer-events:auto;display:none;align-items:center;gap:10px;margin-top:10px;padding:10px 16px 10px 12px;border-radius:99px;border:1px solid var(--line);background:#120e22b3;backdrop-filter:blur(10px);font:500 13px Interface,sans-serif;letter-spacing:.02em;color:var(--pearl);transition:background .2s,border-color .2s,transform .3s var(--ease)}
.back:hover{background:#2a1f44cc;border-color:#f08fdc77;transform:translateX(-3px)}
.back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
body[data-section=place] .back{display:inline-flex}
.topleft{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.toprow{display:flex;align-items:center;gap:18px;min-width:0}

/* радио-мини (из radio-player.js) */
#radio-mini{pointer-events:auto;display:flex;align-items:center;gap:12px;max-width:280px;padding:7px 16px 7px 7px;border-radius:99px;border:1px solid var(--line);background:#120e22b3;backdrop-filter:blur(10px)}
#radio-mini [data-radio-toggle],.radio-controls [data-radio-toggle]{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid #f08fdc66;background:radial-gradient(circle at 40% 30%,#4a2f5e,#1c1330);color:#fbe9f7;font-size:14px}
#radio-mini.playing [data-radio-toggle]{box-shadow:0 0 0 4px #f08fdc22,0 0 22px #f08fdc66}
.radio-open{background:none;border:0;padding:0;text-align:left;min-width:0;flex:1}
/* «Читать книги серии» — та же таблетка, что у радио, справа (владелица 05.10) */
#read-mini{pointer-events:auto;flex:none;display:flex;align-items:center;gap:12px;padding:7px 18px 7px 7px;border-radius:99px;border:1px solid var(--line);background:#120e22b3;backdrop-filter:blur(10px);color:var(--pearl);text-decoration:none;transition:background .2s,border-color .2s}
#read-mini:hover{background:#2a1f44cc;border-color:#f08fdc77}
#read-mini .ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1px solid #f08fdc66;background:radial-gradient(circle at 40% 30%,#4a2f5e,#1c1330);color:#fbe9f7}
#read-mini .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linejoin:round}
#read-mini:hover .ico{box-shadow:0 0 0 4px #f08fdc22,0 0 22px #f08fdc66}
#read-mini .lbl span{display:block;font:500 10px Interface,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#read-mini .lbl strong{display:block;font:500 13px/1.5 Interface,sans-serif;white-space:nowrap}
[data-radio-next]{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);background:#211930;color:var(--pearl)}
[data-radio-next] svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
[data-radio-next]:enabled:hover{background:#3b2950;border-color:var(--rose)}
[data-radio-next]:disabled{opacity:.35;cursor:default}
.radio-open span{display:block;font:500 10px Interface,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.radio-open strong{display:block;max-width:180px;font:500 13px/1.5 Interface,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- пульт ---------- */
#console{position:fixed;z-index:20;left:50%;bottom:calc(20px + var(--safe-b));transform:translate(-50%,30px);opacity:0;pointer-events:none;display:flex;gap:8px;padding:9px;border-radius:99px;background:linear-gradient(180deg,#1d1730e6,#0b0916f2);box-shadow:inset 0 1px #ffffff1a,inset 0 0 0 1px #c8b0f028,0 24px 60px -18px #000;transition:opacity .6s,transform .8s var(--ease)}
body:not([data-section=hero]) #console{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.inst{position:relative;width:76px;height:76px;border-radius:50%;border:0;color:var(--mist);background:radial-gradient(circle at 50% 28%,#2f2645,#110e1d 72%);box-shadow:inset 0 1px #ffffff1c,inset 0 -8px 16px #0008,inset 0 0 0 1px #c8b0f01c;font:500 10.5px/1 Interface,sans-serif;letter-spacing:.03em;display:grid;place-items:end center;padding-bottom:16px;transition:color .25s,box-shadow .35s,transform .35s var(--ease)}
.inst svg{position:absolute;top:15px;left:50%;width:25px;height:25px;transform:translateX(-50%);stroke:currentColor;fill:none;stroke-width:1.35;transition:transform .4s var(--ease)}
.inst:hover{color:#fff;transform:translateY(-3px)}
.inst:hover svg{transform:translateX(-50%) scale(1.1)}
.inst.on{color:#fff;box-shadow:inset 0 0 0 1.4px var(--pink),0 0 26px #f08fdc40,inset 0 -8px 16px #0008}
.inst .led{position:absolute;top:9px;right:21px;width:4px;height:4px;border-radius:50%;background:#4b3f63}
.inst.on .led{background:var(--pink);box-shadow:0 0 8px var(--pink)}
.inst.live .led{background:#8dffc0;box-shadow:0 0 8px #8dffc0}

.shipstat{position:fixed;z-index:20;left:28px;bottom:calc(32px + var(--safe-b));font:500 11px/1.8 Interface,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:opacity .5s}
.shipstat b{color:var(--pearl);font-weight:500}
body[data-section=hero] .shipstat{opacity:0}

/* ---------- HERO ---------- */
#hero{display:grid;place-items:center;text-align:center;overflow:hidden}
#hero .ship{position:absolute;z-index:-1;right:-8%;bottom:-16%;width:84vw;max-width:1500px;opacity:.9;filter:brightness(1.1) saturate(.85);mask-image:radial-gradient(ellipse at 50% 50%,#000 36%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 36%,transparent 72%);animation:ship 26s ease-in-out infinite alternate;pointer-events:none}
@keyframes ship{from{transform:translate(0,0) rotate(-2deg)}to{transform:translate(-4vw,-3vh) rotate(.5deg)}}
.hero-in{position:relative;margin-top:-10vh;padding:0 16px}
.reference-entry{position:absolute;bottom:calc(12px + var(--safe-b));left:16px;right:16px;text-align:center;font:400 13px/1.5 Interface,system-ui,sans-serif}
.reference-entry a{display:inline-block;padding:10px 12px;color:var(--mist);text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:4px}
.reference-entry a:hover{color:var(--pearl)}
/* Документы для ЮKassa (владелица 16.10): вторая строка подвала, мельче и тише. */
.reference-entry .legal-row{display:block;margin-top:-2px;font-size:11px}
.hero-legal .legal-row{display:block;margin-bottom:4px;font-size:10px}.hero-legal .legal-row a{display:inline-block;padding:2px 7px;color:var(--dim);text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:2px}.hero-legal .legal-row a:hover{color:var(--pearl)}
.reference-entry .legal-row a{padding:4px 8px;color:var(--dim)}
/* реквизиты продавца (ЮKassa, 08.10): одной строкой, мелко, внизу */
/* реквизиты (08.10): ниже первого экрана — до них нужно прокрутить; полоса прокрутки скрыта, сцена не меняется */
#hero{overflow-x:hidden;overflow-y:auto;scrollbar-width:none}#hero::-webkit-scrollbar{display:none}
.hero-legal{position:absolute;top:calc(100% + 160px);left:16px;right:16px;margin:0;padding-bottom:28px;text-align:center;font:400 10px/1.4 Interface,system-ui,sans-serif;color:var(--dim);opacity:.6}
.who{font:italic 400 clamp(15px,1.7vw,22px)/1 Literary,Georgia,serif;letter-spacing:.34em;text-transform:uppercase;color:#dcd0ee;margin:0 0 22px;animation:flick 7s infinite}
h1.title{margin:0;font:900 clamp(46px,10.5vw,150px)/.9 Voyager,sans-serif;letter-spacing:-.025em;filter:url(#warp);background:linear-gradient(180deg,#fff 0%,#ffe0f6 36%,#f08fdc 62%,#7a5cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1.title span{display:block}
.hero-glow{position:absolute;inset:0;margin:auto;width:70vw;height:40vh;background:radial-gradient(closest-side,#f08fdc30,#9d86f012,transparent);filter:blur(34px);animation:breathe 6s ease-in-out infinite;pointer-events:none}
.board{position:relative;margin-top:38px;display:inline-flex;align-items:center;gap:14px;padding:18px 34px;border:0;border-radius:99px;background:#1b1330a6;color:#fff;font:500 12px Interface,sans-serif;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;transition:background .3s,transform .4s var(--ease)}
.board::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1px #f08fdc99,0 0 34px #f08fdc4d,inset 0 0 26px #f08fdc26;animation:ring 3.2s ease-in-out infinite}
.board:hover{background:#3a2358cc;transform:translateY(-2px)}
.board svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
/* вход в Академию Ласпи (владелица 05.10): вторая, тихая кнопка под «На борт»; на низком
   экране (телефон боком) встаёт рядом, иначе наезжает на ссылку «Об авторе и книгах» */
.hero-actions{display:flex;flex-direction:column;align-items:center}
@media (max-height:520px) and (min-width:600px){.hero-actions{flex-direction:row;justify-content:center;gap:16px}.hero-actions .academy-link{margin-top:38px;margin-left:0;margin-right:0}}
.academy-link{display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;max-width:100%;margin:18px auto 0;padding:9px 22px;border-radius:99px;border:1px solid #6fb08b66;background:#0f1f18b3;color:#e4f2ea;font:500 13.5px/1.3 Interface,sans-serif;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.academy-link span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8fd0aa}
.academy-link:hover{background:#1c3a2bcc;border-color:#8fd0aa;transform:translateY(-2px)}
@keyframes flick{0%,46%,54%,100%{opacity:.9}47%{opacity:.35}50%{opacity:1}52%{opacity:.55}}
@keyframes breathe{50%{transform:scale(1.15);opacity:.7}}
@keyframes ring{50%{box-shadow:0 0 0 1px #f08fdc,0 0 60px #f08fdc88,inset 0 0 36px #f08fdc40}}

/* ---------- КАРТА ---------- */
#map svg{width:100%;height:100%;display:block;padding:70px 2vw 120px}
.maphead{position:absolute;top:calc(92px + var(--safe-t));left:28px;pointer-events:none}
.maphead span{font:500 11px Interface,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.maphead b{display:block;font:500 clamp(34px,4vw,52px)/1.1 Voyager,sans-serif;letter-spacing:-.04em;margin-top:6px}
.legend{position:absolute;top:calc(96px + var(--safe-t));right:28px;text-align:right;font:400 12px/2 Interface,sans-serif;color:var(--dim);pointer-events:none}
.legend i{display:inline-block;width:28px;height:0;margin-right:10px;vertical-align:middle;border-top:1.5px solid #cfe6ffaa}
.legend i.blind{border-top:1.5px dashed #f5a6e0aa}
.node{cursor:pointer;outline:none}
.node .body{transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:center}
.node:hover .body,.node:focus-visible .body{transform:scale(1.22)}
.node .halo{opacity:.35;transition:opacity .4s}
.node:hover .halo,.node:focus-visible .halo{opacity:.85}
.node:focus-visible{outline:none}
.node:focus-visible .halo{opacity:1}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-7px)}}
.node.dive .body{transform:scale(5);transition:transform 1.2s cubic-bezier(.7,0,.84,0)}
body.diving #map .node:not(.dive),body.diving #map line,body.diving .maphead,body.diving .legend,body.diving .node.dive text,body.diving .node.dive .halo{opacity:0;transition:opacity .45s}
.orbit{transform-box:fill-box;transform-origin:center;animation:orbit 24s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.maplabel{font:600 19px Interface,sans-serif;fill:var(--pearl);pointer-events:none;paint-order:stroke;stroke:#05040bcc;stroke-width:4px}
.mapsub{font:500 11.5px Interface,sans-serif;letter-spacing:.14em;text-transform:uppercase;fill:var(--dim);pointer-events:none;paint-order:stroke;stroke:#05040bcc;stroke-width:3px}
.flow{animation:flow 2.8s linear infinite}
@keyframes flow{to{stroke-dashoffset:-40}}
.tip{position:fixed;z-index:25;max-width:320px;padding:16px 20px;border-radius:14px;background:#141024f2;box-shadow:inset 0 0 0 1px var(--line),0 20px 50px -10px #000;font:400 13.5px/1.6 Interface,sans-serif;color:var(--mist);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .3s var(--ease)}
.tip.on{opacity:1;transform:none}
.tip b{display:block;font:500 20px/1.2 Voyager,sans-serif;letter-spacing:-.02em;color:#fff;margin-bottom:4px}
.tip .route{display:block;margin-top:8px;color:var(--rose);font-size:12.5px}

/* ---------- МЕСТО ---------- */
#place{overflow:hidden}
.scene{position:absolute;inset:-4%;clip-path:circle(0px at var(--ox,50%) var(--oy,50%));transition:clip-path 1.5s cubic-bezier(.65,0,.2,1);will-change:transform}
.scene.on{clip-path:circle(160vmax at var(--ox,50%) var(--oy,50%))}
.scene img{filter:saturate(1.08)}
.scene img{width:100%;height:100%;object-fit:cover;animation:kenburns 38s ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,1%)}}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05040bf0 0%,#05040bb0 30%,#05040b30 60%,#05040b10 100%),linear-gradient(0deg,#05040bee 0%,transparent 35%),linear-gradient(180deg,#05040b99 0%,transparent 20%)}
.place-info{position:absolute;left:clamp(24px,5vw,80px);top:clamp(130px,19vh,210px);width:min(440px,40vw);opacity:0;transform:translateY(24px);transition:opacity 1s .2s,transform 1.2s .2s var(--ease)}
.arrived .place-info{opacity:1;transform:none}
.place-info .k{font:500 11.5px/1.7 Interface,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.place-info h2{margin:14px 0 22px;font:500 clamp(42px,6vw,86px)/1 Voyager,sans-serif;letter-spacing:-.045em;text-shadow:0 4px 40px #000}
.place-info .lead{margin:0;font:400 clamp(17px,1.35vw,20px)/1.7 Literary,Georgia,serif;color:#ece5f6;text-shadow:0 2px 14px #000}
.spots{position:absolute;inset:0;pointer-events:none}
.spot{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:14px;background:none;border:0;padding:0;opacity:0;transform:scale(.6);transition:opacity .8s,transform .9s var(--ease)}
.arrived .spot{opacity:1;transform:none}
.spot .dot{position:relative;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#fff 0 3px,#f08fdc66 4px 100%);box-shadow:0 0 0 1px #ffffffaa,0 0 24px #f08fdc}
.spot .dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid #fff8;animation:ping 2.8s var(--ease) infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(2.2);opacity:0}}
.spot .lbl{padding:8px 14px;border-radius:99px;background:#0d0a1ab8;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px #ffffff26;font:500 13px Interface,sans-serif;white-space:nowrap;transition:background .25s,box-shadow .25s}
.spot:hover .lbl{background:#2e2048d9;box-shadow:inset 0 0 0 1px #f08fdc99}

/* ---------- карточка ---------- */
.sheet{position:fixed;z-index:30;right:clamp(16px,4vw,60px);top:clamp(96px,14vh,160px);width:min(460px,calc(100vw - 32px));max-height:calc(100svh - 280px);overflow:auto;padding:34px 34px 30px;border-radius:20px;background:linear-gradient(150deg,#271d3cf2,#0e0c1cf5);box-shadow:inset 0 0 0 1px #d8c8f033,0 40px 100px -30px #000;opacity:0;transform:translateX(30px) scale(.98);pointer-events:none;transition:opacity .45s,transform .6s var(--ease)}
.sheet.on{opacity:1;transform:none;pointer-events:auto}
.sheet .k{padding-right:40px;font:500 11px/1.7 Interface,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}
.sheet h3{margin:12px 0 18px;font:500 28px/1.2 Voyager,sans-serif;letter-spacing:-.03em}
.sheet p{margin:0 0 .9em;font:400 18px/1.7 Literary,Georgia,serif;color:#e4dcf0}
.sheet .x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--mist);font:300 28px/1 Interface,sans-serif}
.sheet .x:hover{background:#ffffff12;color:#fff}
.sheet h4{margin:1.4em 0 .5em;font:500 19px/1.2 Voyager,sans-serif;letter-spacing:-.02em;color:var(--rose)}
.sheet-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:0 0 18px}
.sheet-links{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}.sheet-links a{padding:8px 14px;border-radius:99px;background:#f08fdc1a;box-shadow:inset 0 0 0 1px #f08fdc66;color:var(--pearl);font:600 12px Interface,sans-serif;text-decoration:none}.sheet-links a:hover{background:#f08fdc33}
.sheet .act{margin-top:8px;padding:12px 20px;border:0;border-radius:99px;background:#f08fdc22;box-shadow:inset 0 0 0 1px var(--pink);font:600 12px Interface,sans-serif;letter-spacing:.08em}

/* ---------- БОРТ ---------- */
#crew{display:grid;place-items:center;padding:96px 24px 130px}
.crew-wrap{width:min(1180px,100%,calc((100svh - 300px) * var(--ar,1.777)));min-width:min(100%,640px);display:flex;flex-direction:column;gap:14px}
.crew-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.crew-head h2{margin:0;font:500 clamp(28px,3vw,40px)/1.1 Voyager,sans-serif;letter-spacing:-.035em}
.tabs{display:flex;gap:6px;padding:5px;border-radius:99px;background:#120e22b3;box-shadow:inset 0 0 0 1px var(--line)}
.tabs button{border:0;border-radius:99px;padding:9px 16px;background:none;color:var(--mist);font:500 13px Interface,sans-serif;transition:background .25s,color .25s}
.tabs button[aria-selected=true]{background:#f08fdc2e;color:#fff;box-shadow:inset 0 0 0 1px #f08fdc88}
.frame{position:relative;width:100%;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 50px 120px -40px #000;background:#0c0a18}
.frame img{display:block;width:100%;height:auto;transition:opacity .6s}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05040b55,transparent 25%,transparent 75%,#05040b88)}
.tag{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;border:0;background:none;padding:0}
.tag .dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0 2px,#f08fdc88 3px 100%);box-shadow:0 0 0 1px #fffc,0 0 16px #f08fdc}
.tag .name{padding:6px 12px;border-radius:99px;background:#0d0a1acc;backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px #ffffff2e;font:600 13px Interface,sans-serif;white-space:nowrap;transition:background .25s}
.tag:hover .name{background:#3a2358e6}
.frame[data-scene=crew] .tag{width:6.6%;height:4.2%;border-radius:6px;animation:labelglow 5s ease-in-out infinite}
.frame[data-scene=crew] .tag .dot,.frame[data-scene=crew] .tag .name{display:none}
.frame[data-scene=crew] .tag:hover,.frame[data-scene=crew] .tag:focus-visible{box-shadow:0 0 0 2px var(--pink),0 0 22px #f08fdcaa;animation:none;outline:none}
@keyframes labelglow{0%,80%,100%{box-shadow:0 0 0 0 #f08fdc00}90%{box-shadow:0 0 0 2px #f08fdc88,0 0 16px #f08fdc55}}
.frame[data-scene=crew] .tag:nth-of-type(3n){animation-delay:-1.6s}.frame[data-scene=crew] .tag:nth-of-type(3n+1){animation-delay:-3.3s}
.chips{display:none;flex-wrap:wrap;gap:6px}
.chips button{border:0;border-radius:99px;padding:8px 13px;background:#1a1430;box-shadow:inset 0 0 0 1px var(--line);color:var(--pearl);font:500 13px Interface,sans-serif}
.crew-cap{margin:0;color:var(--dim);font:400 15px/1.6 Literary,Georgia,serif}

/* ---------- РАСЫ ---------- */
#races{display:flex;flex-direction:column;justify-content:center;padding:100px 0 140px}
.races-head{padding:0 clamp(24px,5vw,80px);margin-bottom:26px}
.races-head span{font:500 11px Interface,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.races-head h2{margin:6px 0 0;font:500 clamp(32px,4vw,52px)/1.1 Voyager,sans-serif;letter-spacing:-.04em}
.race-row{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px clamp(24px,5vw,80px) 24px;scrollbar-width:thin}
.race{flex:none;scroll-snap-align:center;position:relative;width:clamp(200px,17vw,290px);aspect-ratio:3/4.4;border:0;padding:0;border-radius:18px;overflow:hidden;text-align:left;background:#120e22 var(--img) var(--pos,center)/var(--size,cover) no-repeat;box-shadow:0 0 0 1px var(--line),0 30px 70px -30px #000;transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .5s var(--ease),box-shadow .4s}
.race::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#05040bf2 88%)}
.race:hover{box-shadow:0 0 0 1px #f08fdc99,0 0 50px #f08fdc33,0 30px 70px -30px #000}
.race .rt{position:absolute;z-index:1;left:20px;right:20px;bottom:20px}
.race .rt b{display:block;font:500 26px/1.1 Voyager,sans-serif;letter-spacing:-.03em}
.race .rt span{display:block;margin-top:8px;font:500 12px/1.5 Interface,sans-serif;color:var(--rose)}

/* ---------- РАДИО ---------- */
#radio{display:grid;place-items:center;padding:0 16px}
.rad{position:relative;width:min(580px,100%);padding:38px 34px 32px;border-radius:28px;text-align:center;background:linear-gradient(180deg,#1c1432f2,#0a0816f7);box-shadow:inset 0 0 0 1px #d8c8f02e,0 60px 120px -40px #000;overflow:hidden}
.rad::before{content:"";position:absolute;inset:-40% -20% auto;height:80%;background:radial-gradient(closest-side,#f08fdc30,transparent);pointer-events:none}
.rad .k{font:500 11px Interface,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)}
.rad .station{margin:8px 0 0;font:500 34px/1.1 Voyager,sans-serif;letter-spacing:-.03em}
.eq{display:flex;gap:4px;justify-content:center;align-items:flex-end;height:80px;margin:28px 0 18px}
.eq i{width:7px;height:6px;border-radius:3px;background:linear-gradient(#ffe0f6,#f08fdc 55%,#7a5cff);transition:height .12s}
.rad .now{font:500 20px/1.4 Interface,sans-serif}
#radio-artist{margin:4px 0 0;font:400 14px Interface,sans-serif;color:var(--dim);min-height:22px}
.radio-controls{display:flex;align-items:center;gap:16px;margin-top:22px}
.radio-controls label{font:500 12px Interface,sans-serif;color:var(--dim)}
.radio-controls input{flex:1;min-width:0;accent-color:var(--pink)}

/* ---------- ЖУРНАЛ ---------- */
#log{display:grid;place-items:center;padding:100px clamp(24px,5vw,80px) 140px;overflow:auto}
.bookwrap{display:flex;gap:clamp(30px,6vw,90px);align-items:center;justify-content:center;flex-wrap:wrap}
.book{width:min(290px,28vw);aspect-ratio:2/3;border-radius:6px 16px 16px 6px;transform-style:preserve-3d;transition:transform .25s;box-shadow:0 50px 90px -24px #000,-24px 0 60px -26px #f08fdc66}
.book img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* Живые обложки (владелица 16.10): ролик поверх картинки, виден только пока играет. */
.book-live-wrap{position:relative}
.book-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none}
.book-live-wrap.is-live .book-live{opacity:1}
.logtext{max-width:500px}
.bookwrap-2{margin-top:clamp(60px,9vw,120px)}
.logtext .k{font:500 11px Interface,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.logtext h2{margin:14px 0 20px;font:500 clamp(32px,3.8vw,52px)/1.1 Voyager,sans-serif;letter-spacing:-.04em}
.logtext p{font:400 19px/1.7 Literary,Georgia,serif;color:#e0d8ec;margin:0 0 8px}
.logtext .buy{display:inline-block;margin-left:18px;color:var(--ice);text-decoration:none;font:500 14px Interface,sans-serif}
.scenes{display:flex;gap:14px;margin-top:28px}
.scenes button{flex:1;max-width:190px;border:0;padding:0;background:none;text-align:left}
.scenes img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .3s}
.scenes button:hover img{transform:scale(1.05);box-shadow:0 0 0 1px #f08fdc99,0 20px 40px -12px #000}
.scenes span{display:block;margin-top:8px;font:500 12.5px Interface,sans-serif;color:var(--mist)}

/* ---------- телефон ---------- */
@media (max-width:760px){
  .topbar{left:16px;right:16px;top:calc(12px + var(--safe-t))}
  .brand small{font-size:10px}.brand b{font-size:16px}
  #radio-mini{max-width:170px;padding:5px;gap:6px}#radio-mini [data-radio-toggle],#radio-mini [data-radio-next]{width:36px;height:36px}
  .radio-open strong{max-width:95px;font-size:11.5px}
  .toprow{gap:8px}
  #read-mini{padding:5px 12px 5px 5px;gap:8px}#read-mini .ico{width:36px;height:36px}
  #read-mini .lbl span{display:none}#read-mini .lbl strong{font-size:11.5px;white-space:normal;line-height:1.2;max-width:74px}
  /* вне главной слева стоит ещё и название — радио и кнопка чтения сжимаются до значков */
  body:not([data-section=hero]) #radio-mini .radio-open,body:not([data-section=hero]) #read-mini .lbl{display:none}
  body:not([data-section=hero]) #read-mini{padding:5px}
  #console{width:calc(100% - 20px);max-width:480px;gap:4px;padding:6px;bottom:calc(10px + var(--safe-b))}
  .inst{flex:1;width:auto;height:60px;min-width:0;padding-bottom:9px;font-size:10px}
  .inst svg{top:9px;width:22px;height:22px}.inst .led{top:6px;right:calc(50% - 16px)}
  .shipstat{display:none}
  .maphead{top:calc(74px + var(--safe-t));left:16px}.maphead b{font-size:30px}
  .legend{display:none}
  #map svg{padding:120px 0 96px}
  .maplabel{font-size:26px}.mapsub{display:none}
  .place-info{left:16px;right:16px;width:auto;top:calc(120px + var(--safe-t))}
  .place-info h2{font-size:40px;margin:10px 0 14px}.place-info .lead{font-size:15.5px;line-height:1.6}
  .scene::after{background:linear-gradient(180deg,#05040bf5 0%,#05040bc0 45%,#05040b40 70%,#05040bee 100%)}
  .spots{position:absolute;inset:auto 0 calc(86px + var(--safe-b)) 0;display:flex;gap:8px;overflow-x:auto;padding:0 16px 8px;pointer-events:auto}
  .spot{position:static;flex:none}
  .spot .lbl{white-space:nowrap}
  .sheet{top:auto;bottom:calc(84px + var(--safe-b));left:10px;right:10px;width:auto;max-height:62svh;padding:28px 22px 22px;border-radius:18px;transform:translateY(30px)}
  .sheet h3{font-size:23px}.sheet p{font-size:16px}
  #crew{padding:84px 12px 96px;place-items:start center;overflow:auto}
  .tabs{width:100%;overflow-x:auto}.tabs button{flex:none;padding:8px 12px;font-size:12px}
  .tag .name{font-size:11px;padding:4px 9px}
  .chips{display:flex}
  .crew-wrap{min-width:0}
  #races{padding:84px 0 96px}
  .race{width:72vw}
  #log{place-items:start center;padding:88px 20px 100px}
  .book{width:150px;margin:0 auto}
  .logtext h2{font-size:30px}.logtext p{font-size:16.5px}
  .rad{padding:30px 20px 26px}.rad .station{font-size:26px}
  .who{letter-spacing:.2em;margin-bottom:28px}
  #hero .ship{width:150vw;max-width:none;right:-32%;bottom:2%;opacity:.8}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  h1.title{filter:none}
}