/* Seven Rings · стиль: иллюстрированный фон мира, самоцветы в оправе, стеклянные плашки */
:root{
  --f-display:"Forum","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --line:#E3DEE8; --surface:#FFFFFF; --bg:#F4F1F5;
}
 #app{
  --g1:#FFF3F7; --g2:#E9C7D4; --g3:#A04C6E; --f1:#FFF4D0; --f2:#E2B45A; --f3:#8A5A14;
  --b1:#C79BB2; --b2:#9A5E7E; --b3:#6E3A58; --ink:#2E1F2A; --mute:#6E5565; --haze:244,241,245; --bgimg:none;
  min-height:100%; color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55; background:var(--bg); position:relative;
}
#app::before{content:""; position:fixed; inset:0; background:var(--bgimg) center/cover no-repeat, var(--bg); z-index:0}
 #app::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--haze),0.88) 0%, rgba(var(--haze),0.35) 22%, rgba(var(--haze),0) 45%, rgba(var(--haze),0) 70%, rgba(var(--haze),0.75) 100%)}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{min-height:100%; margin:0; background:#F4F1F5; font-family:var(--f-body); color:#2A1F2E}
 .app{position:relative; z-index:1; max-width:470px; margin:0 auto; display:flex; flex-direction:column; gap:14px;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:18px 60px}
h1,h2,h3{font-family:var(--f-display); font-weight:400; margin:0; text-wrap:balance; line-height:1.12; text-shadow:0 1px 0 rgba(255,255,255,0.8), 0 0 18px rgba(255,255,255,0.9)}
h1{font-size:40px} h2{font-size:30px} h3{font-size:22px}
p{margin:0}
.muted{color:var(--mute)} .small{font-size:14px} .center{text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px}
.eyebrow{letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-weight:600}
.stack{display:flex; flex-direction:column; gap:12px} .gap6{gap:6px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap} .row.nowrap{flex-wrap:nowrap} .between{justify-content:space-between}
.bignum{font-family:var(--f-display); font-size:48px; color:var(--b2)}
.hook{font-family:var(--f-display); font-size:19px; line-height:1.3}

 .btn{appearance:none; border:1px solid rgba(255,255,255,0.9); cursor:pointer; font:inherit; font-weight:600; font-size:16px; color:#FFFFFF; border-radius:999px; padding:14px 22px; width:100%;
  background:linear-gradient(180deg, var(--b1) 0%, var(--b2) 55%, var(--b3) 100%); box-shadow:0 8px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.55); transition:transform .15s ease}
.btn:active{transform:scale(.98)}
.btn.gold{background:linear-gradient(180deg, #F2D27A 0%, #D9A93F 55%, #9C6F1E 100%); color:#2A1F0A}
.btn.ghost{background:rgba(255,255,255,0.75); box-shadow:none}
.btn.small{width:auto; padding:9px 16px; font-size:14px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.link{appearance:none; background:rgba(255,255,255,0.6); border:0; border-radius:999px; color:var(--mute); font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--f2); outline-offset:2px}

.card{background:rgba(255,255,255,0.78); border:1px solid rgba(255,255,255,0.95); border-radius:20px; padding:18px; box-shadow:0 4px 18px rgba(0,0,0,0.06)}
.card.gold{background:linear-gradient(180deg, rgba(255,246,220,0.9), rgba(255,240,205,0.9))}
.card-in{background:rgba(255,255,255,0.55); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px}
.in{font:inherit; color:var(--ink); background:rgba(255,255,255,0.9); border:1px solid var(--line); border-radius:12px; padding:11px 13px; width:100%}
textarea.in{resize:vertical} .in.small{padding:6px 10px; font-size:14px}
input[type=range]{width:100%; accent-color:var(--b2)}
.progress{height:4px; background:rgba(255,255,255,0.7); border-radius:4px; overflow:hidden} .progress i{display:block; height:100%; background:linear-gradient(90deg,var(--f2),var(--b2)); transition:width .3s}

.opt{appearance:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer; width:100%; background:rgba(255,255,255,0.78); border:1px solid rgba(255,255,255,0.95); border-radius:16px; padding:14px 16px; transition:border-color .15s, background .15s}
.opt:hover{border-color:var(--f2)} .opt.sel{border-color:var(--f2); background:rgba(255,246,220,0.95)} .opt:disabled{opacity:.5; cursor:not-allowed}
.opt .t{font-weight:600; display:block} .opt .s{font-size:13px; color:var(--mute); display:block; margin-top:2px}
.core{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#FFF8F0; font-family:var(--f-display); font-size:20px}
.avatar{border-radius:50%; object-fit:cover; object-position:50% 12%; flex:none; border:2px solid rgba(255,255,255,0.9); background:radial-gradient(circle at 40% 30%, #FFFFFF, var(--g2))}
.fam{height:120px; width:100px; object-fit:contain; flex:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.18))}
.fam.big{height:220px; width:200px}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:13px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.95)}
.chip.rose{background:rgba(255,230,238,0.9)} .chip.night{background:rgba(230,230,244,0.95)}
.chip.btnchip{appearance:none; cursor:pointer; font:inherit; color:var(--ink)} .chip.btnchip.on{background:var(--g2); border-color:var(--f2); font-weight:600}
.say{display:flex; gap:10px; align-items:flex-start}
.bubble{background:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.95); border-radius:4px 18px 18px 18px; padding:10px 13px; font-size:14px; line-height:1.45; min-width:0; box-shadow:0 4px 14px rgba(0,0,0,0.08)}
.bubble .who{font-size:12px; color:var(--mute); font-weight:600; margin-bottom:2px}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:10px}
.brand{font-family:var(--f-display); text-shadow:0 0 12px rgba(255,255,255,0.95)}
.sparks{font-size:12px; color:var(--b3); font-weight:600; background:rgba(255,255,255,0.78); border:1px solid rgba(255,255,255,0.95); border-radius:999px; padding:5px 10px}
.bnav{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:space-around; align-items:flex-end; gap:4px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.nb{appearance:none; border:0; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; min-width:64px}
.nb svg{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round}
.nb.on{font-weight:600} 
.nb.now svg{width:52px; height:52px; stroke:none}
.field{display:flex; flex-direction:column; gap:4px}

.world-head{text-align:center; display:flex; flex-direction:column; gap:4px; align-items:center}
.wish-line{font-size:14px; background:rgba(255,255,255,0.78); border-radius:12px; padding:10px 14px; text-align:center}
.notice,.frame{background:rgba(255,255,255,0.85); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.frame{padding:10px 14px; gap:6px} .frame .btn{width:auto; align-self:flex-start; padding:8px 16px}
.frame .phrase{font-size:16px}
.chapter{display:flex; flex-direction:column; gap:6px}
.ch-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:10px}
.ch-head > div:first-child{background:rgba(255,255,255,0.74); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:14px; padding:6px 12px; min-width:0}
.ch-head > .row{background:rgba(255,255,255,0.74); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:999px; padding:4px 10px; flex:none}
.ch-head .t{font-family:var(--f-display); font-size:22px}
.path{display:flex; flex-direction:column; gap:12px; padding-block:6px}
.node-row{display:flex; padding-inline:6%} .node-row.p0{justify-content:flex-start} .node-row.p1{justify-content:center} .node-row.p2{justify-content:flex-end}
.node{appearance:none; border:0; background:none; font:inherit; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; width:124px; padding:0}
.node:disabled{cursor:default}
.node .lbl{font-size:12px; font-weight:500; text-align:center; line-height:1.3; background:rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,1); border-radius:999px; padding:3px 10px; color:var(--ink); box-shadow:0 3px 10px rgba(0,0,0,0.12)}
.gemwrap{position:relative; display:grid; place-items:center}
.gemwrap svg{position:relative; z-index:1}
.node svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,0.22))}
.node.done svg{filter:drop-shadow(0 3px 6px rgba(0,0,0,0.2)) drop-shadow(0 0 6px var(--g2))}
.node.locked svg{filter:drop-shadow(0 3px 6px rgba(0,0,0,0.18)) saturate(.75)}
.node.cur .gemwrap, .node.wait .gemwrap{animation:bob 2.4s ease-in-out infinite}
.node.cur svg, .node.wait svg{filter:drop-shadow(0 0 10px var(--b1)) drop-shadow(0 0 22px var(--g2)) drop-shadow(0 6px 10px rgba(0,0,0,0.2))}
.orbit{position:absolute; inset:-12px; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 15%, var(--f2) 25%, #FFFFFF 30%, transparent 40% 65%, var(--b1) 75%, #FFFFFF 80%, transparent 90%); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation:spin 3.2s linear infinite; opacity:.95}
.node.cur .lbl.now{color:#FFFFFF; box-shadow:0 0 14px var(--b1)} 
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.nb.now svg{filter:drop-shadow(0 0 10px var(--b1)); animation:bob 2.4s ease-in-out infinite}
.btn.ghost{border:1.5px solid var(--b1); color:var(--b3)}
.node .lbl.now{font-weight:600; background:#FFFFFF; box-shadow:0 2px 10px rgba(0,0,0,0.12)} .node .sub{font-weight:400; color:var(--mute)}
.node.locked .lbl{color:var(--mute)} .node.locked{cursor:not-allowed}
.pulse{animation:pulse 2.6s ease-in-out infinite; transform-origin:50% 50%} @keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

.steps{display:flex; flex-direction:column; gap:10px}
.step{background:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.95); border-radius:16px; overflow:hidden}
.step-h{display:flex; align-items:center; gap:12px; padding:14px 16px}
.num{flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:14px; font-weight:600; background:#FFFFFF}
.step.done .num{background:var(--f2); border-color:var(--f2); color:#FFFFFF} .step.active{border-color:var(--f2)} .step.active .num{border-color:var(--f2); color:var(--b2)} 
.step-title{font-weight:600} .step-sub{font-size:13px; color:var(--mute)}
.step-b{padding:0 16px 16px 16px; display:flex; flex-direction:column; gap:12px; min-width:0}
.steps-list{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.aff-card{text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 18px}
.aff{font-family:var(--f-display); font-size:27px; line-height:1.2; text-wrap:balance}
.wait-note{font-size:14px; background:rgba(230,230,244,0.9); border-radius:12px; padding:10px 14px}
.choice{display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:rgba(255,255,255,0.6)}
.choice{position:relative; padding-left:40px} .choice input{position:absolute; opacity:0; width:1px; height:1px; left:0; top:0} .choice::before{content:""; position:absolute; left:12px; top:13px; width:20px; height:20px; border-radius:50%; border:2px solid var(--b2); background:#fff} .choice.sel::before{background:var(--b2); box-shadow:inset 0 0 0 4px #fff} .choice.sel{border-color:var(--f2); background:rgba(255,246,220,0.95)}
.phrase{margin:0; font-family:var(--f-display); font-size:20px; line-height:1.3; padding-left:12px; border-left:2px solid var(--f2)}
.item{border-top:1px solid var(--line); padding-top:10px; display:flex; flex-direction:column; gap:4px} .item:first-child{border-top:0; padding-top:0} .item .txt{font-size:14px; white-space:pre-wrap}
.rec{display:flex; flex-direction:column; gap:8px}
.recwrap{display:flex; align-items:center; gap:8px; font-size:14px} .recdot{width:10px; height:10px; border-radius:50%; background:#D03A3A; animation:blink 1s infinite} @keyframes blink{50%{opacity:.2}}

/* техники */
.tapring{appearance:none; background:none; border:0; cursor:pointer; padding:0}
.chatbox{display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,0.55); border-radius:14px; padding:10px}
.msg{max-width:85%; padding:8px 12px; border-radius:14px; font-size:14px} .msg.them{background:#FFFFFF; align-self:flex-start; border-bottom-left-radius:4px} .msg.me{background:var(--g2); align-self:flex-end; border-bottom-right-radius:4px}
.callscreen{text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px; background:rgba(20,16,30,0.85); color:#FFF; border-radius:16px} .callscreen .eyebrow{color:#DDD} .calltime{font-family:var(--f-display); font-size:40px}
.diary{display:flex; flex-direction:column; gap:8px; background:rgba(255,255,255,0.6); border-radius:14px; padding:12px}
.jarwrap{display:flex; flex-direction:column; align-items:center; gap:4px} .jarwrap svg{overflow:visible} .firefly{transform-box:fill-box; transform-origin:50% 50%; transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .4s} .firefly.out{opacity:0; transform:translate(0, 150px) scale(0.2)} .firefly.in{opacity:1; filter:drop-shadow(0 0 3px #FFB400) drop-shadow(0 0 7px rgba(255,180,0,0.7)); animation:fly 2.4s ease-in-out infinite; animation-delay:calc(1s + var(--fd, 0s))} @keyframes fly{0%,100%{opacity:.5; transform:translateY(0)}50%{opacity:1; transform:translateY(-4px)}}
.star{appearance:none; border:1px solid var(--line); background:#FFF; color:var(--mute); border-radius:50%; flex:none; cursor:pointer} .star.on{background:var(--f2); color:#FFF; border-color:var(--f2)}
.paper{position:relative; overflow:hidden; background:#FFFDF8; border-radius:4px; padding:10px; box-shadow:0 2px 10px rgba(0,0,0,0.1); transition:opacity 2s, transform 2s}
.paper .in{background:transparent; border:0; border-bottom:1px solid #EEE}
.paper.burning{animation:burn 7s ease-in forwards; transform-origin:50% 100%} @keyframes burn{0%{opacity:1} 80%{opacity:1; transform:none} 100%{opacity:0; transform:scale(.85) translateY(26px)}}
.paper.burning::after{content:""; position:absolute; left:-10%; right:-10%; bottom:0; height:0; background:linear-gradient(to top, #120E0C 0%, #120E0C 38%, #4A2A14 55%, #D4581C 66%, #FF9A2E 76%, #FFD86A 84%, rgba(255,240,180,0.5) 92%, transparent 100%); filter:blur(1px); animation:charUp 6.3s ease-in forwards; z-index:2}
@keyframes charUp{0%{height:0} 100%{height:150%}}
.paper.burning::before{content:""; position:absolute; left:0; right:0; bottom:0; height:90px; transform-origin:50% 100%; background:radial-gradient(ellipse 30% 100% at 22% 100%, #FFE07A 0%, rgba(255,150,40,0.95) 35%, transparent 70%), radial-gradient(ellipse 28% 110% at 52% 100%, #FFF3B0 0%, rgba(255,190,60,0.95) 30%, transparent 70%), radial-gradient(ellipse 30% 95% at 80% 100%, #FFD36B 0%, rgba(255,120,30,0.95) 35%, transparent 70%); animation:flicker .22s infinite alternate; z-index:3}
@keyframes flicker{from{transform:scaleY(1); opacity:.85} to{transform:scaleY(1.18) scaleX(1.03); opacity:1}}
.ember{position:absolute; bottom:4px; left:var(--x); width:5px; height:5px; border-radius:50%; background:#FFC24A; box-shadow:0 0 6px 2px rgba(255,138,26,0.9); animation:emberUp 1.5s ease-out infinite; animation-delay:var(--d); z-index:4}
@keyframes emberUp{0%{transform:translate(0,0) scale(1); opacity:1} 100%{transform:translate(var(--dx), -240px) scale(.3); opacity:0}}
.ashpile{position:relative; width:120px; height:48px} .ashpile::before{content:""; position:absolute; bottom:0; left:12px; right:12px; height:14px; border-radius:50%; background:radial-gradient(ellipse at 50% 40%, #6E6A66, #9A9692); filter:blur(1.5px)}
.ashpile::after{content:""; position:absolute; bottom:6px; left:40px; width:12px; height:6px; border-radius:50%; background:#C86A2A; box-shadow:0 0 8px 3px rgba(255,120,40,0.6); animation:emberGlow 1.6s ease-in-out infinite alternate}
@keyframes emberGlow{from{opacity:.35} to{opacity:1}}
.ashpile i{position:absolute; bottom:14px; left:calc(50% + var(--x)); width:12px; height:26px; border-radius:50%; background:rgba(190,190,195,0.55); filter:blur(4px); animation:smoke 2.6s ease-out infinite; animation-delay:var(--d)}
@keyframes smoke{0%{transform:translateY(0) scale(.6); opacity:0} 25%{opacity:.7} 100%{transform:translateY(-48px) translateX(6px) scale(1.6); opacity:0}}
@media (prefers-reduced-motion: reduce){ .paper.burning::before, .ember, .ashpile i{animation:none} }
.paper.flying{animation:flyup 1.8s forwards} @keyframes flyup{100%{opacity:0; transform:translateY(-220px) scale(.4)}}
.burned{display:flex; flex-direction:column; align-items:center; gap:6px} 
.cheque{background:#FFFDF5; border:1px solid #E6D8B0; border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:14px}
.stamp{color:#B13A4B; border:2px solid #B13A4B; border-radius:6px; padding:2px 8px; font-size:12px; font-weight:600} .sign{font-family:var(--f-display); font-style:italic; color:#AAA} .sign.on{color:var(--ink)}
.guided{display:flex; flex-direction:column; gap:6px}
.pedestal{display:flex; flex-direction:column; align-items:center; gap:0; padding-top:10px}
.pedestal .block{width:120px; height:70px; border-radius:10px; display:grid; place-items:center; text-align:center; font-size:12px; padding:6px; opacity:0; transform:translateY(-30px); transition:all 1s}
.pedestal.has .block{opacity:1; transform:none; background:linear-gradient(180deg,var(--g1),var(--g2)); border:2px solid var(--f2); box-shadow:0 0 30px rgba(255,255,255,0.9)}
.pedestal .stand{width:160px; height:40px; background:linear-gradient(180deg,#E8E2EA,#B9B0BF); border-radius:6px 6px 0 0; border-top:3px solid var(--f2)}
.silhouette{position:relative; display:inline-block; touch-action:none; user-select:none}
.glowline{filter:drop-shadow(0 0 6px #FFFFFF)}
.cocoon .light{position:absolute; left:50%; bottom:0; width:160px; height:0; transform:translateX(-50%); border-radius:80px 80px 60px 60px; background:radial-gradient(ellipse, rgba(255,255,255,0.9), rgba(255,240,200,0.2)); transition:height 2.5s ease} .cocoon.lit .light{height:220px}
.chakra{width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, #FFFFFF, var(--ch)); box-shadow:0 0 40px var(--ch); animation:chakra 8s ease-in-out infinite} @keyframes chakra{50%{transform:scale(1.25)}}
.tappts{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.tappt{appearance:none; font:inherit; font-size:13px; border:1px solid var(--line); background:rgba(255,255,255,0.6); border-radius:10px; padding:10px 6px; cursor:pointer} .tappt.now{background:var(--g2); border-color:var(--f2); font-weight:600; animation:pulse 1s infinite} .tappt.past{opacity:.5}
.moon{opacity:.3} .moon.lit{opacity:1; color:var(--f3)} .moon.now{opacity:1; animation:pulse 2s infinite}
.charge{position:relative; display:inline-block; touch-action:none; user-select:none; border-radius:50%; background:conic-gradient(var(--f2) var(--pr), rgba(255,255,255,0.4) 0); padding:6px}
.charge .halo{opacity:.6}
.charge.lit{box-shadow:0 0 40px rgba(255,255,255,0.9)} .charge.lit svg{animation:pulse 1.2s ease-in-out 2}
.words3{display:flex; gap:8px; flex-wrap:wrap; justify-content:center} .word{font-family:var(--f-display); font-size:22px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,0.6); color:var(--mute)} .word.on{background:var(--g2); color:var(--ink)}
.artimg{width:180px; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.court{display:flex; flex-direction:column; gap:10px; background:rgba(255,255,255,0.55); border-radius:14px; padding:12px}
.verdict{background:#FFFFFF; border-radius:12px; padding:12px}
#app.shadow-lvl::after{background:linear-gradient(180deg, rgba(20,18,26,0.55) 0%, rgba(20,18,26,0.2) 30%, rgba(20,18,26,0.35) 100%)}
#app.shadow-lvl h2, #app.shadow-lvl .eyebrow{color:#FFFFFF; text-shadow:0 1px 10px rgba(0,0,0,0.7)}
#app.shadow-lvl .link{background:rgba(255,255,255,0.85)} 
.shsparks{position:absolute; inset:0; pointer-events:none} .shsparks i{position:absolute; left:50%; top:60%; width:6px; height:6px; border-radius:50%; background:#FFE9A8; opacity:0}
.stave{text-align:center; background:rgba(255,255,255,0.7); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:6px} .runes{font-size:44px; letter-spacing:.2em; color:var(--b3)} .code{font-family:var(--f-display); font-size:36px; letter-spacing:.12em; color:var(--b3)} .srow{display:flex; gap:8px; align-items:center; background:rgba(255,255,255,0.6); border-radius:10px; padding:6px 8px; font-size:14px} .srow .in{padding:6px 8px} .srow.on{background:var(--g2)}
.jar{background:rgba(255,255,255,0.55); border-radius:12px; padding:8px 10px; display:flex; flex-direction:column; gap:6px}

/* оверлеи */
 .over{position:fixed; inset:0; z-index:50; background:rgba(var(--haze),0.97); overflow-y:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
.over > *{max-width:420px} .over.dark{background:rgba(10,8,16,0.6); color:#FFF} .over.dark .muted{color:#CCC}
.big-phrase{font-family:var(--f-display); font-size:28px; text-wrap:balance}
.breath{width:140px; height:140px; border-radius:50%; border:2px solid var(--f2); display:grid; place-items:center; transition:transform 3s ease-in-out; font-family:var(--f-display); font-size:22px; background:rgba(255,255,255,0.6)}
.breath.in{transform:scale(1.35)} .breath.seal{animation:seal 1.2s ease-in forwards} @keyframes seal{60%{transform:scale(1.5); opacity:1} 100%{transform:scale(.1); opacity:0}}

/* шкатулка */
.rings7{grid-template-columns:repeat(7, minmax(0, 1fr)); gap:3px}
.rings7 div{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--mute); text-align:center} .rings7 svg{width:100%; max-width:40px} .rings7 circle{fill:none; stroke-width:3} .rings7 .got{color:var(--ink); font-weight:600}
.photos{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%} .photos img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; max-width:100%}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:8px} .gallery figure{margin:0} .gallery img{width:100%; border-radius:10px}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }
.node.cur .gemwrap::before, .node.wait .gemwrap::before{content:""; position:absolute; inset:-18px; border-radius:50%; background:radial-gradient(circle, var(--b1) 0%, var(--g2) 40%, transparent 70%); opacity:.55; animation:glowpulse 2.2s ease-in-out infinite; z-index:0}
@keyframes glowpulse{0%,100%{transform:scale(.85); opacity:.35}50%{transform:scale(1.15); opacity:.75}}
.orbit{z-index:0}
@media (prefers-reduced-motion: reduce){ .node.cur .gemwrap::before{animation:none} }

/* кольца-украшения */
.ringimg{display:block; height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.18))}
.ringimg.big{width:min(240px, 62vw); animation:ringIn 1.4s cubic-bezier(.2,.8,.2,1) both, ringFloat 4s ease-in-out 1.4s infinite}
.ringimg.md{width:160px} .ringimg.sm{width:52px; flex:none} .ringimg.xs{width:34px}
.ringimg.locked{filter:grayscale(1) opacity(.35)}
.rings7 .ringimg{width:44px; height:44px; object-fit:contain; margin:0 auto 4px}
.ringstage{position:relative; display:grid; place-items:center; padding:20px}
.ringstage::before{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, var(--g2) 35%, transparent 70%); animation:glowpulse 3s ease-in-out infinite}
.ringstage img{position:relative}
.ringrow{display:flex; gap:6px; justify-content:center; flex-wrap:wrap}
@keyframes ringIn{0%{opacity:0; transform:scale(.4) rotate(-25deg)} 70%{opacity:1; transform:scale(1.08) rotate(4deg)} 100%{transform:scale(1) rotate(0)}}
@keyframes ringFloat{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(2deg)}}
@media (prefers-reduced-motion: reduce){ .ringimg.big, .ringstage::before{animation:none} }

.redo{margin-top:6px} .redo .chips{gap:8px}

/* огонёк искры */
.flamesvg .main{transform:scale(calc(0.5 + 0.5 * var(--pf, 0))); transition:transform .15s linear}
.flamesvg .side{opacity:0; transform:translateX(var(--sx)) scale(var(--ss)); transition:opacity .6s}
.flamesvg .logs, .flamesvg .sparks{opacity:0; transition:opacity .6s} .flamesvg .sparks circle{fill:#FFD166}
.charge.fire.lit .side, .charge.fire.lit .logs, .charge.fire.lit .sparks{opacity:1}
.charge.fire.lit .main{animation:flick .45s ease-in-out infinite alternate}
.charge.fire.lit .side{animation:flick .6s ease-in-out infinite alternate-reverse}
.charge.fire.lit .sparks{animation:sparkup 1.6s ease-out infinite}
@keyframes flick{from{transform:translateX(var(--sx, 0px)) scale(var(--ss, 1)) scaleY(1)} to{transform:translateX(var(--sx, 0px)) scale(var(--ss, 1)) scaleY(1.1) scaleX(0.95)}}
@keyframes sparkup{0%{transform:translateY(0); opacity:1} 100%{transform:translateY(-14px); opacity:0}}
/* лестница изобилия */
.ladadd{display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center} .ladadd #ladName{grid-column:1/-1} .ladadd .btn{width:auto; padding-left:18px; padding-right:18px}
.ladadd .in{padding:10px 12px}
.xbtn{border:0; background:rgba(0,0,0,0.06); color:var(--mute); border-radius:50%; font-size:16px; line-height:1; cursor:pointer}
.note{background:rgba(255,255,255,0.6); border-radius:10px; padding:8px 10px}

.star{font-size:16px; width:36px; height:36px} .star.on{box-shadow:0 0 10px rgba(255,200,80,0.8)}

/* по одной записи: банка/колесо остаются на виду */
.sticky{position:sticky; top:4px; z-index:2}
.jarwrap.sticky{background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); border-radius:16px; padding:6px 0}
.donelist{margin-top:4px} .donelist .row{background:rgba(255,255,255,0.55); border-radius:10px; padding:6px 10px}
.seg{transition:fill .7s ease}
.listen{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px} .listen.on{background:rgba(255,255,255,0.6); border-radius:12px; padding:8px 10px}

/* код желания */
.codetap{appearance:none; border:2px solid rgba(255,255,255,0.9); background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.7)); border-radius:18px; padding:14px 22px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.08); transition:transform .12s, box-shadow .3s; min-width:220px; font:inherit; color:inherit}
.codetap:active{transform:scale(.96)} .codetap .code{line-height:1.1}
.codetap.full{box-shadow:0 0 0 3px var(--f2), 0 0 30px rgba(255,255,255,0.9)}
.bead{width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.9); transition:background .4s, box-shadow .4s, transform .4s}
.bead.on{background:radial-gradient(circle at 35% 35%, #FFFFFF, var(--f2) 55%, var(--b2)); box-shadow:0 0 10px var(--f2); transform:scale(1.15)}
/* страж главы */
.guardcard{background:linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.7)); border:1px solid rgba(255,255,255,0.95); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:0 4px 18px rgba(0,0,0,0.06)}
.gc-head{display:flex; gap:14px; align-items:center} .gc-name{font-family:var(--f-display); font-size:22px; line-height:1.1}
.blockstone{position:relative; margin:10px 14px 4px; padding:18px 16px; border-radius:10px 12px 10px 12px; background:linear-gradient(135deg, #4A4050 0%, #2A2330 55%, #171219 100%); color:#F7EEF2; text-align:center; font-family:var(--f-display); font-size:19px; line-height:1.25; transform:rotate(-1.5deg); box-shadow:inset 0 2px 0 rgba(255,255,255,0.12), inset 0 -3px 0 rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.22)}
.blockstone::after{content:""; position:absolute; left:18%; top:0; width:1px; height:100%; background:linear-gradient(180deg, transparent, rgba(255,255,255,0.18) 40%, transparent 80%); transform:skewX(-20deg)}
.bs-text::before{content:"«"} .bs-text::after{content:"»"}
.chain{position:absolute; top:-12px; width:3px; height:14px; background:repeating-linear-gradient(180deg, #C9B8A8 0 3px, #8B7A6C 3px 6px); border-radius:2px} .chain.l{left:14%} .chain.r{right:14%}
.guardcard.won .blockstone{background:linear-gradient(135deg, var(--g1), var(--g2) 60%, var(--g3)); color:var(--ink); transform:none; box-shadow:0 0 24px rgba(255,255,255,0.8)} .guardcard.won .chain{display:none}
.shadow-note{background:rgba(20,14,24,0.55); color:#F7EEF2; border-radius:14px; padding:12px 16px} .shadow-note .eyebrow{color:#D9C9D6} .shadow-note p{margin:4px 0 0; font-family:var(--f-display); font-size:18px}
/* день мечты: пункты-кнопки */
.srow.tap{appearance:none; border:1px solid rgba(255,255,255,0.9); width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; padding:10px 12px; transition:background .3s, box-shadow .3s}
.srow.tap.on{background:linear-gradient(90deg, rgba(255,255,255,0.95), var(--g1)); box-shadow:0 0 12px rgba(255,255,255,0.8)}

.reward-say{font-family:var(--f-display); font-size:20px; line-height:1.3; max-width:30ch; text-align:center; margin:0}

.gatecard p{margin:0}

.ladstats{display:grid; grid-template-columns:1fr 1fr; gap:8px} .ladstats div{background:rgba(255,255,255,0.6); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px} .ladstats b{font-family:var(--f-display); font-size:22px; font-variant-numeric:tabular-nums}

/* саблиминал: выбор фраз */
.subphr{display:flex; flex-direction:column; gap:6px}
.subp{appearance:none; display:flex; gap:10px; align-items:flex-start; text-align:left; border:1px solid rgba(255,255,255,0.9); background:rgba(255,255,255,0.6); border-radius:12px; padding:9px 12px; font:inherit; font-size:15px; color:inherit; cursor:pointer; transition:background .25s}
.subp i{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--b2); font-style:normal; font-size:13px; display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-top:1px}
.subp.on{background:linear-gradient(90deg, rgba(255,255,255,0.95), var(--g1))} .subp.on i{background:var(--b2)}
.subready{background:rgba(255,255,255,0.55); border-radius:12px; padding:8px 10px}
.subbuild summary{cursor:pointer; font-weight:600; padding:6px 0} .subbuild[open] summary{margin-bottom:8px} .subbuild .card-in{margin-top:8px}


/* аудит: читаемость и отклик */
#app.shadow-lvl .card .eyebrow, #app.shadow-lvl .aff-card .eyebrow, #app.shadow-lvl .card-in .eyebrow, #app.shadow-lvl .guardcard .eyebrow{color:var(--mute)}
.card.center .row.between{align-self:stretch; width:100%}
.node[aria-disabled="true"]{cursor:pointer}
.toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(10px); background:rgba(40,30,40,0.92); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; max-width:calc(100vw - 40px); text-align:center; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:60}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.eft{display:flex; flex-direction:column; align-items:center; gap:2px; margin:6px 0}
.ringstage + .eyebrow{background:rgba(255,255,255,0.55); border-radius:999px; padding:2px 10px}

/* аудит, этапы 2–4 */
.step.locked{opacity:1} .step.locked .step-h{opacity:.55}
.titleglass{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 22px; border-radius:22px; background:radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 55%, rgba(255,255,255,0) 100%)}
.node.locked .gemwrap{filter:saturate(.45) opacity(.78)} .node.done .gemwrap{filter:drop-shadow(0 0 6px rgba(255,220,140,0.9))}
.subready{flex-wrap:nowrap} .subready > span:first-child{min-width:0}
.donelist .row .xbtn{margin-left:8px}

/* логотип SEVENRINGS */
.brand{display:inline-flex; align-items:center; gap:8px; font-size:17px; letter-spacing:.16em}
.brand img{width:24px; height:24px; flex:none}
.prologo{display:flex; flex-direction:column; align-items:center; gap:14px}
.prologo img{width:min(150px, 40vw); height:auto; aspect-ratio:1/1; animation:logoSpin 60s linear infinite}
@keyframes logoSpin{to{transform:rotate(360deg)}}
.wordmark{font-family:var(--f-display); font-size:30px; letter-spacing:.24em; padding-left:.24em; color:var(--ink)}
@media (prefers-reduced-motion: reduce){ .prologo img{animation:none} }

/* Шкатулка: плитки по группам */
.showcase{gap:6px} .showcase .rings7 .ringimg{max-width:40px}
.boxwish{display:flex; gap:10px; align-items:center; background:rgba(255,255,255,0.72); border-radius:14px; padding:8px 12px; color:var(--b3)} .boxwish > span{color:var(--ink)}
.boxgrp{font-family:var(--f-display); font-size:19px}
.boxtiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
.boxtile{appearance:none; border:0; font:inherit; cursor:pointer; background:rgba(255,255,255,0.86); display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--b3); box-shadow:0 3px 10px rgba(0,0,0,0.06)}
.boxtile:focus-visible{outline:2px solid var(--b2); outline-offset:2px}
.boxtile b{color:var(--ink); font-weight:600; line-height:1.2} .boxtile span{color:var(--mute); line-height:1.2}
.boxtile.empty{color:var(--mute)} .boxtile.empty b{color:var(--mute)}
.boxback{align-self:flex-start; background:rgba(255,255,255,0.82); border-radius:999px; padding:5px 12px}
.sec-title{display:flex; align-items:center; gap:10px; color:var(--b3)} .sec-title h2{color:var(--ink); margin:0}
/* нижнее меню на 5 пунктов */
.bnav .nb{min-width:0; flex:1}

/* нижнее меню: контрастнее */
.bnav{background:rgba(255,255,255,0.97); box-shadow:0 -4px 18px rgba(0,0,0,0.10)}
.nb svg{stroke-width:2; width:25px; height:25px}
.nb.on{opacity:1}
.nb.on svg{fill:var(--g2); stroke:var(--b3)}
.nb.now{background:none; box-shadow:none}

/* ===== волшебная глина: нижнее меню и плитки Шкатулки ===== */
.bnav{background:linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--g1) 45%, #FFFFFF)); border-top:0; box-shadow:0 -8px 24px color-mix(in srgb, var(--b3) 16%, transparent), inset 0 2px 0 #FFFFFF; padding-top:6px}
.nb{opacity:1; color:var(--mute); font-weight:600; padding:4px 2px 6px; gap:2px; background:none; box-shadow:none; border-radius:16px}
.nb .nic{display:grid; place-items:center; width:42px; height:40px; border-radius:14px; transition:transform .15s, box-shadow .2s, background .2s}
.nb:not(.on):not(.now) .nic .i3d{filter:saturate(.35) brightness(1.05); opacity:.82}
.nb.on{color:var(--b3); background:none; box-shadow:none}
.nb.on .nic{background:linear-gradient(180deg, #FFFFFF, var(--g1)); box-shadow:inset 0 3px 6px color-mix(in srgb, var(--b3) 28%, transparent), inset 0 -2px 3px rgba(255,255,255,0.8), 0 0 14px color-mix(in srgb, var(--g2) 70%, transparent); transform:translateY(1px)}
.nb.on .nic .i3d{filter:none; opacity:1}
.nb:active .nic{transform:scale(.92)}
.nb.now{margin-top:-28px; opacity:1} .nb.now .nowwrap{position:relative; display:grid; place-items:center; width:64px; height:64px}
.nb.now .nowwrap svg{position:relative; z-index:2; animation:bob 2.6s ease-in-out infinite}
.orbit2{position:absolute; inset:-2px; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 55%, color-mix(in srgb, var(--g1) 80%, #fff) 68%, #FFFFFF 78%, var(--g2) 90%, transparent 100%); -webkit-mask:radial-gradient(circle, transparent 60%, #000 63%, #000 72%, transparent 75%); mask:radial-gradient(circle, transparent 60%, #000 63%, #000 72%, transparent 75%); animation:spin 3.2s linear infinite; z-index:1}
.nb.now .nowwrap::before{content:""; position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, color-mix(in srgb, var(--g2) 60%, transparent) 40%, transparent 70%); animation:glowpulse 3s ease-in-out infinite; z-index:0}
.boxtiles{gap:10px}
.boxtile{background:linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--g1) 55%, #FFFFFF)); border-radius:22px; padding:13px 6px 11px; gap:3px; box-shadow:0 8px 16px color-mix(in srgb, var(--b3) 16%, transparent), 0 2px 4px color-mix(in srgb, var(--b3) 10%, transparent), inset 0 2px 0 #FFFFFF, inset 0 -3px 6px color-mix(in srgb, var(--g2) 35%, transparent); transition:transform .12s, box-shadow .15s}
.boxtile .i3d{width:34px; height:34px; padding:8px; box-sizing:content-box; border-radius:50%; background:linear-gradient(160deg, #FFFFFF, var(--g1)); box-shadow:inset 0 2px 0 #fff, 0 4px 8px color-mix(in srgb, var(--b3) 15%, transparent)}
.boxtile b{font-size:12.5px} 
.boxtile:active{transform:translateY(2px); box-shadow:inset 0 4px 10px color-mix(in srgb, var(--b3) 25%, transparent), inset 0 -2px 4px rgba(255,255,255,0.7)}
.boxtile.empty{background:rgba(255,255,255,0.55); box-shadow:inset 0 2px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.04)} .boxtile.empty .i3d{filter:saturate(.25) opacity(.6); background:rgba(255,255,255,0.7); box-shadow:none}
.boxwish .i3d{width:22px; height:22px}
.sec-title .i3d{width:34px; height:34px}
@media (prefers-reduced-motion: reduce){ .orbit2, .nb.now .nowwrap svg, .nb.now .nowwrap::before{animation:none} }
.boxgrp{align-self:flex-start; background:rgba(255,255,255,0.74); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:12px; padding:4px 12px; margin:6px 0 -2px}

/* ===== фамильяр-собеседник ===== */
.fambtn{position:fixed; right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(96px + env(safe-area-inset-bottom,0px)); z-index:35; width:58px; height:58px; border-radius:50%; border:0; padding:0; cursor:pointer; background:radial-gradient(circle at 35% 30%, #FFFFFF, var(--g1) 55%, var(--g2)); box-shadow:0 8px 18px color-mix(in srgb, var(--b3) 30%, transparent), 0 0 0 3px rgba(255,255,255,0.85), inset 0 -3px 6px color-mix(in srgb, var(--b3) 18%, transparent); display:grid; place-items:center; animation:bob 3s ease-in-out infinite}
.fambtn img{border-radius:50%}
.fambtn .fsp{position:absolute; top:-4px; right:-2px; width:20px; height:20px; border-radius:50%; background:linear-gradient(180deg, #FFF3C9, #E7B95C); color:#7A5214; font-style:normal; font-size:12px; display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,0.2); animation:glowpulse 2.6s ease-in-out infinite}
.fambtn .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.fambtn:active{transform:scale(.94)}
.famchat{position:fixed; inset:0; z-index:45; display:flex; flex-direction:column; background:linear-gradient(180deg, color-mix(in srgb, var(--g1) 70%, #FFFFFF), #FFFFFF 40%); padding:calc(10px + env(safe-area-inset-top,0px)) max(12px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px))}
.famhead{display:flex; align-items:center; gap:10px; padding:6px 4px 10px} .famhead > div{flex:1; display:flex; flex-direction:column; line-height:1.2} .famhead b{font-family:var(--f-display); font-weight:400; font-size:20px} .famhead small{font-size:12px; color:var(--mute)} .famhead .link{font-size:18px; padding:6px 10px}
.fammsgs{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 2px}
.fm{display:flex; gap:8px; align-items:flex-end; max-width:92%; align-self:flex-start} .fm.fromme{align-self:flex-end; flex-direction:row-reverse}
.fb{padding:10px 13px; border-radius:16px; font-size:15px; line-height:1.4; white-space:pre-wrap; box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.fm.fromfam .fb{background:#FFFFFF; border-bottom-left-radius:4px} .fm.fromme .fb{background:linear-gradient(180deg, var(--g2), color-mix(in srgb, var(--g2) 70%, var(--b2))); color:#fff; border-bottom-right-radius:4px}
.famchips{display:flex; gap:6px; flex-wrap:wrap; padding:8px 2px} .famchips .chip{background:linear-gradient(180deg, #FFFFFF, var(--g1)); border:1px solid var(--g2); color:var(--b3); font-weight:600; box-shadow:0 3px 8px color-mix(in srgb, var(--b3) 12%, transparent)}
.famform{display:flex; gap:8px; padding-top:6px} .famform .in{flex:1; min-width:0}
body.fam-open .bnav{display:none}
.tbl{width:100%; border-collapse:collapse; font-size:13px} .tbl th, .tbl td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top}
/* Тень в трёх актах */
.card-in.gift{background:linear-gradient(135deg, rgba(255,248,222,0.95), rgba(255,255,255,0.85)); border:1px solid #E7C76A; text-align:center} .card-in.gift h3{margin:4px 0}
.reveal h3{margin:0} .reveal .fam.big{margin:0 auto; width:180px; height:180px; border-radius:50%; object-fit:cover}
.ringstep{position:relative; display:inline-flex} .ringstep b{position:absolute; right:-4px; bottom:-4px; border-radius:50%; background:var(--b2); color:#fff; display:inline-flex; align-items:center; justify-content:center}
.qtext{text-wrap:balance}
/* опрос в картинках */
.picgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pic{appearance:none; font:inherit; padding:0; border:2px solid rgba(255,255,255,0.95); border-radius:18px; overflow:hidden; background:#fff; cursor:pointer; display:flex; flex-direction:column; box-shadow:0 6px 16px rgba(40,30,60,0.12); transition:transform .15s, border-color .2s}
.pic:active{transform:scale(.97)} .pic.sel{border-color:var(--b2); box-shadow:0 0 0 3px var(--g1), 0 6px 16px rgba(40,30,60,0.18)}
.pic img, .picph{display:block; width:100%; aspect-ratio:1/1; object-fit:cover}
.picph{background:radial-gradient(circle at 35% 30%, #fff, var(--tint) 70%)}
.piccap{font-size:13px; font-weight:600; color:var(--ink); padding:7px 8px 9px; text-align:center; line-height:1.2}
.picgrid .pic:last-child:nth-child(odd){grid-column:1 / -1; width:calc(50% - 5px); justify-self:center}
.pic{position:relative} .place{position:absolute; top:8px; left:8px; z-index:1; width:34px; height:34px; border-radius:50%; background:var(--b2); color:#fff; font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(255,255,255,0.9), 0 4px 10px rgba(0,0,0,0.25); animation:placeIn .25s ease-out}
@keyframes placeIn{from{transform:scale(.4); opacity:0}}
.picgrid.rank .pic.sel img, .picgrid.rank .pic.sel .picph{opacity:.82}
.sticky-next{position:sticky; bottom:max(10px, env(safe-area-inset-bottom, 0px)); z-index:5; padding:8px; border-radius:22px; background:rgba(255,255,255,0.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(40,30,60,0.15)}
.sticky-next .btn:disabled{opacity:.55}
@media (prefers-reduced-motion: reduce){ .place{animation:none} }
/* опрос: три главные из семи — карточки втрое, все семь видны на экране, седьмая по центру последнего ряда */
.picgrid.rank.pick{grid-template-columns:repeat(3, 1fr); gap:8px}
.picgrid.rank.pick .piccap{font-size:12px; padding:5px 4px 7px}
.picgrid.rank.pick .pic:last-child:nth-child(odd){grid-column:2; width:auto; justify-self:stretch}
.picgrid.rank.pick .place{width:28px; height:28px; font-size:15px; top:6px; left:6px}
/* удержание: огонёк в шапке, ритуал дня, «Завтра:», возвращение, вера-метр, облачко проводника */
.topr{display:flex; align-items:center; gap:5px; flex-wrap:nowrap; justify-content:flex-end; flex:none}
.topr .sparks{padding:5px 8px; white-space:nowrap}
.topbar .brand{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:clip}
@media (max-width:370px){ .topbar .brand{font-size:0; gap:0} }
.gatetease{display:flex; gap:10px; align-items:flex-start; text-align:left; background:rgba(255,255,255,0.88); border-radius:18px 18px 18px 5px; padding:10px 12px; max-width:420px; width:100%; box-shadow:0 4px 14px rgba(40,30,60,0.1)}
.gatetease .kname{display:block; font-size:11px; font-weight:700; color:var(--b3); letter-spacing:.02em}
.gatetease p{margin:2px 0 0; max-width:none; font-size:15px; line-height:1.35}
.gatescene.locked .gatepic{width:min(210px, 56vw)} /* замок меньше: плитки ритуала видны без прокрутки */
.ritual{width:100%; max-width:420px; display:flex; flex-direction:column; gap:8px; margin-top:4px}
.rit-tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.rit{appearance:none; font:inherit; position:relative; border:1px solid rgba(255,255,255,0.95); background:rgba(255,255,255,0.86); border-radius:16px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; min-height:100px; box-shadow:0 4px 12px rgba(40,30,60,0.1); color:var(--ink)}
.rit b{font-size:13px; line-height:1.2} .rit span{font-size:11.5px; color:var(--b3); line-height:1.2}
.rit.done{background:linear-gradient(180deg, #FFF6DA, #FFFFFF); border-color:#E8C47A}
.rit .ck{position:absolute; top:6px; right:8px; font-style:normal; font-weight:800; color:#B07A1E}
.rit:active{transform:scale(.97)}
.retscene{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; min-height:78vh; padding:24px 4px}
.retav .avatar{box-shadow:0 0 0 4px rgba(255,255,255,0.9), 0 10px 26px rgba(40,30,60,0.25); border-radius:50%; object-fit:cover}
.retsay{background:rgba(255,255,255,0.92); border-radius:20px; padding:16px 18px; max-width:34ch; font-size:17px; line-height:1.45; box-shadow:0 8px 24px rgba(40,30,60,0.14); text-wrap:pretty}
.retsay .kname{display:block; font-size:12px; font-weight:700; color:var(--b3); margin-bottom:6px}
.retscene.dark .retsay{background:rgba(28,20,38,0.9); color:#F4ECFF} .retscene.dark .retsay .kname{color:#CDB8F0}
.faith{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:380px}
.faith p{margin:0}
.faithrow{display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; width:100%}
.fbtn{appearance:none; font:inherit; min-height:40px; padding:0; border-radius:10px; border:1px solid #E2D6E6; background:#fff; font-weight:700; font-size:14px; color:#4A3A55; cursor:pointer}
.fbtn.on{background:#7A4FA0; color:#fff; border-color:#7A4FA0}
.fbar{display:block; height:6px; border-radius:6px; background:#EEE6F2; overflow:hidden; margin-top:4px} .fbar i{display:block; height:100%; background:linear-gradient(90deg, #E7B95C, #C9963A)}
.faithitem .up{color:#2F7A4E} .faithitem .down{color:#A0443A}
.askbubble{position:fixed; right:calc(80px + env(safe-area-inset-right,0px)); bottom:calc(112px + env(safe-area-inset-bottom,0px)); z-index:36; appearance:none; font:inherit; font-weight:700; font-size:14px; color:#3A2A48; background:#FFFFFF; border:0; border-radius:16px 16px 4px 16px; padding:11px 14px; min-height:44px; box-shadow:0 8px 22px rgba(40,30,60,0.22); cursor:pointer; animation:askIn .5s cubic-bezier(.2,1.4,.4,1) both, askBob 2.6s ease-in-out .6s infinite}
.askbubble::after{content:""; position:absolute; right:-6px; bottom:6px; border:7px solid transparent; border-left-color:#FFFFFF; border-right:0}
@keyframes askIn{from{opacity:0; transform:translateX(12px) scale(.8)}} @keyframes askBob{50%{transform:translateY(-3px)}}
.dy-today{gap:10px} .dy-today .dy-gl b{font-size:22px}
@media (prefers-reduced-motion: reduce){ .askbubble{animation:none} }
/* эзотерика: руны, таро, числа, Луна, мандала */
.stavebox{display:flex; flex-direction:column; gap:8px}
.artimg.wide{width:min(100%, 340px); aspect-ratio:auto}
.runebag{appearance:none; font:inherit; border:0; cursor:pointer; width:150px; height:150px; border-radius:50% 50% 46% 46% / 60% 60% 40% 40%; background:radial-gradient(circle at 40% 30%, var(--g2), var(--g3)); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; box-shadow:0 10px 24px rgba(0,0,0,0.25), inset 0 -8px 16px rgba(0,0,0,0.2)} .runebag span{font-size:26px; letter-spacing:.2em; opacity:.85} .runebag i{font-style:normal; font-size:12px; opacity:.9}
.runeshow{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:14px; border-radius:18px; background:rgba(255,255,255,0.7)} .runeshow.flip{animation:flipIn .7s ease-out} .runebig{font-size:64px; line-height:1; color:var(--b2); text-shadow:0 0 18px var(--g2)}
@keyframes flipIn{from{transform:rotateY(90deg); opacity:0} to{transform:none; opacity:1}}
.numshow{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:14px; border-radius:18px; background:rgba(255,255,255,0.7)} .numbig{font-family:var(--f-display); font-size:72px; line-height:1; color:var(--b2); text-shadow:0 0 22px var(--g2); animation:placeIn .5s ease-out} .numrow{display:flex; flex-direction:column; gap:2px} .numrow p{margin:0}
.codebig{display:flex; gap:12px} .codedigit{appearance:none; font:inherit; font-family:var(--f-display); font-size:40px; width:64px; height:76px; border-radius:16px; border:2px solid var(--f2); background:#fff; color:var(--ink); cursor:pointer} .codedigit.on{background:var(--b2); color:#fff; box-shadow:0 0 16px var(--g2)}
.tcard{width:120px; aspect-ratio:2/3.3; border-radius:12px; padding:6px; background:linear-gradient(160deg, var(--g1), var(--g2)); box-shadow:0 8px 18px rgba(0,0,0,0.2); display:inline-block} .tcard .tin{height:100%; border-radius:8px; border:2px solid rgba(255,255,255,0.9); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:6px; color:var(--ink)}
.tcard.back .tin{background:repeating-linear-gradient(45deg, var(--b2) 0 6px, var(--b3) 6px 12px); color:#FFE9A8; font-size:34px} .tcard .tnum{font-family:var(--f-display); font-size:20px; color:var(--b3)} .tcard .tstar{font-size:28px; color:var(--b2)} .tcard b{font-size:14px} .tcard .small{color:var(--mute)}
.tcard.flip{animation:flipIn .8s ease-out} .deck{display:flex; flex-direction:column; align-items:center; gap:8px} .deckbtn{appearance:none; border:0; background:none; padding:0; cursor:pointer; position:relative; width:140px; height:210px} .deckbtn .tcard{position:absolute; left:10px; top:0} .deckbtn .d2{left:6px; top:4px; transform:rotate(-4deg)} .deckbtn .d3{left:14px; top:8px; transform:rotate(4deg)} .deckbtn.sm{width:120px; height:200px} .deckbtn.sm .tcard{left:0} .deckbtn:disabled{opacity:.4}
.tread p{margin:6px 0} .doors{display:flex; gap:8px; justify-content:space-between} .door{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:0} .door .tcard{width:100%; max-width:110px} .door .eyebrow{text-align:center}
.moonbox{display:flex; align-items:center; gap:16px; justify-content:center}
.mandalawrap svg{height:auto} .mandalawrap path, .mandalawrap circle{transition:fill .25s}
.numshow.elem .numbig{text-shadow:none}
/* готовые фразы */
.sugg{display:flex; flex-direction:column; gap:6px; margin:4px 0 8px} .chip.sg{background:rgba(255,255,255,0.85); border:1px dashed var(--f2); text-align:left; white-space:normal; line-height:1.3}
.chip.sg::before{content:"+ "; color:var(--b2); font-weight:700}
.chip.tech{background:var(--g1); color:var(--b3)}
/* свиток желаний */
.hand{font-family:"Caveat", "Segoe Script", cursive; font-size:22px; line-height:1.25}
.scroll{margin:8px 0} .scroll-roll{height:18px; border-radius:10px; background:linear-gradient(180deg, #E9D3A4, #C9A66A 60%, #A9864C); box-shadow:0 3px 6px rgba(0,0,0,0.2)}
.scroll-body{margin:0 10px; padding:14px 16px; background:linear-gradient(90deg, #F6E8C6, #FFF6E0 20%, #FFF6E0 80%, #F6E8C6); color:#4A3418; display:flex; flex-direction:column; gap:10px; box-shadow:inset 0 0 18px rgba(160,120,60,0.25)}
.scroll-title{font-family:"Caveat", cursive; font-size:28px; text-align:center; color:#7A5520}
.scroll-list{margin:0; padding-left:24px; display:flex; flex-direction:column; gap:6px} .scroll-list li{display:flex; align-items:center; justify-content:space-between; gap:8px} .scroll-list li::marker{font-family:"Caveat", cursive; font-size:20px; color:#7A5520}
.scroll-list li.main .hand{color:#B0402F; text-shadow:0 0 10px rgba(255,200,120,0.8)}
.scroll-add .in{background:rgba(255,255,255,0.6); border-color:#D9BE87; color:#4A3418}
.nextring{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.recgroup summary{display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none} .recgroup summary::-webkit-details-marker{display:none} .recgroup summary b{flex:1} .recgroup[open] summary{margin-bottom:10px}
.artitem{display:flex; flex-direction:row; gap:12px; align-items:flex-start}
/* камни колец */
.stones{display:inline-flex; gap:4px; vertical-align:middle} .stones i{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--f2); background:rgba(255,255,255,0.5)} .stones i.on{background:radial-gradient(circle at 35% 30%, #fff, var(--g2) 60%, var(--b2)); border-color:var(--b2); box-shadow:0 0 6px var(--g2)}
.ringbtn{appearance:none; border:0; background:none; font:inherit; color:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; padding:0}
/* общая карта */
.kmap{position:relative; aspect-ratio:9/16; border-radius:22px; overflow:hidden; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0) 30%), linear-gradient(170deg, #E9F1FB 0%, #FBF3DC 22%, #FBE5EC 40%, #FBE7E1 52%, #E3F4EA 66%, #ECECEC 80%, #E1F6F1 100%); background-size:cover; background-position:center; box-shadow:inset 0 0 40px rgba(0,0,0,0.08)}
.kroad{position:absolute; inset:0; width:100%; height:100%} .kroad path{stroke:#E2B45A; stroke-width:1.1; stroke-dasharray:1.6 1.6; opacity:.8} .kmap.img .kroad{display:none}
.kcastle{position:absolute; transform:translate(-50%, -50%); appearance:none; border:0; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; font:inherit; color:var(--ink); width:26%}
.kcastle img{width:100%; aspect-ratio:1/1; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.2)); transition:filter .3s, transform .3s}
.kcastle span{font-weight:600; background:rgba(255,255,255,0.85); border-radius:999px; padding:2px 8px; white-space:nowrap}
.kcastle.fog img{filter:grayscale(1) opacity(.45) blur(.5px)} .kcastle.fog span{opacity:.7}
.kcastle.got img{filter:drop-shadow(0 0 14px rgba(255,230,160,0.95))} .kcastle.now img{animation:pulse 1.8s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(255,255,255,1))}
/* Ключ даты */
.kdcode{display:flex; gap:8px; justify-content:center; align-items:center; font-family:var(--f-display)} .kdcode b{font-size:44px; color:var(--b2); text-shadow:0 0 14px var(--g2)} .kdcode i{font-style:normal; color:var(--mute); font-size:22px} .kdcode.sm b{font-size:30px}
.kdgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px} .kdgrid div{border-radius:12px; background:rgba(255,255,255,0.55); padding:8px 6px; text-align:center; display:flex; flex-direction:column; gap:2px; min-width:0} .kdgrid div.on{background:rgba(255,255,255,0.95); box-shadow:0 0 0 2px var(--g2)} .kdgrid b{font-family:var(--f-display); font-size:20px; color:var(--b3)} .kdgrid span{font-size:11px; color:var(--mute); line-height:1.25}
.bigstones .stones{gap:8px} .bigstones .stones i{width:16px; height:16px; border-width:2px}
.kmap.img{background-size:100% 100%} 
.kmap.img .kcastle span{margin-top:-6px}
.kmap.img .kcastle.fog img{filter:saturate(.35) brightness(1.08) opacity(.82) drop-shadow(0 4px 6px rgba(0,0,0,0.15))}
.kmap.img .kcastle{width:24%; transform:translate(-50%, -62%)} 
/* вопрос Вселенной */
.orb{appearance:none; border:0; cursor:pointer; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FFFFFF, var(--g1) 30%, var(--g2) 65%, var(--b3)); box-shadow:0 0 30px var(--g2), inset 0 -10px 24px rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--f-display); font-size:22px; line-height:1.15; text-align:center; text-shadow:0 1px 8px rgba(0,0,0,0.4); padding:14px}
.orb.spin{animation:orbspin 1.4s ease-in-out} .orb:disabled{opacity:.55} @keyframes orbspin{0%{transform:scale(1)} 30%{transform:scale(.92) rotate(-8deg); filter:brightness(1.3)} 60%{transform:scale(1.06) rotate(6deg)} 100%{transform:none}}
.answer{display:flex; flex-direction:column; gap:4px; text-align:center; padding:12px; border-radius:14px; background:rgba(255,255,255,0.85); width:100%} .answer b{font-family:var(--f-display); font-size:22px; color:var(--b3)} .answer p{margin:0}
/* колесо дня */
.wheelday{position:relative; width:min(78vw, 280px); aspect-ratio:1/1; max-width:100%} .wheelsvg{display:block; width:100%; height:100%; transition:transform 3s cubic-bezier(.17,.67,.2,1); filter:drop-shadow(0 8px 16px rgba(0,0,0,0.15))} .wheelpin{position:absolute; top:-14px; left:50%; transform:translateX(-50%); color:var(--b3); font-size:22px; z-index:1}
@media (prefers-reduced-motion: reduce){ .wheelsvg{transition:none} .orb.spin{animation:none} }
.orb span{font-size:44px}
/* уровень-переписка */
.lchat{display:flex; flex-direction:column; gap:10px}
.lmsg{display:flex; gap:8px; align-items:flex-end; max-width:94%} .lmsg.fromfam{align-self:flex-start} .lmsg.fromme{align-self:flex-end}
.lmsg .lb{padding:11px 14px; border-radius:18px; line-height:1.45; box-shadow:0 4px 14px rgba(40,30,60,0.08); display:flex; flex-direction:column; gap:6px; min-width:0}
.lmsg.fromfam .lb{background:rgba(255,255,255,0.94); border-bottom-left-radius:5px} .lmsg.fromme .lb{background:linear-gradient(180deg, var(--g2), var(--b2)); color:#fff; border-bottom-right-radius:5px; font-weight:600}
.lmsg .lb p{margin:0} .lmsg .avatar{flex:none}
.lmsg.live{animation:lmsgIn .45s ease-out} @keyframes lmsgIn{from{opacity:0; transform:translateY(10px)}}
.laff{font-family:var(--f-display); font-size:21px; line-height:1.3; color:var(--b3); padding:8px 10px; border-left:3px solid var(--f2); background:rgba(255,255,255,0.6); border-radius:8px}
.lact{display:flex; justify-content:center; padding:4px 0} .lact .btn{width:auto; min-width:160px}
.lstep{animation:lmsgIn .45s ease-out .15s both}
@media (prefers-reduced-motion: reduce){ .lmsg.live, .lstep{animation:none} }
.lsteps{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:14px}
.lstep .step-b > .center{padding-top:6px}
.lpast{pointer-events:none; border-radius:18px; padding:10px; background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.9)} .lpast .btn, .lpast .small.muted{display:none}
/* каталог шагов */
.kname{letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--b3)} .avatar.ringav{object-fit:contain; background:radial-gradient(circle at 35% 30%, #fff, var(--g1)); border-radius:50%; padding:3px; box-shadow:0 2px 8px rgba(0,0,0,0.12)} .avatar.kav{border-radius:50%; object-fit:cover; flex:none}
/* свиток намерений: главы и пустые строки */
.scroll-ch{display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px dashed #D9BE87}
.scroll-title + .scroll-ch{border-top:0; padding-top:0}
.scroll-chh{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-family:"Caveat", cursive; font-size:21px; color:#7A5520}
.scroll-chh .small{font-family:inherit; font-size:16px; color:#9A7A48}
.scroll-list li.empty .hand{opacity:.45; border-bottom:1px dotted #C9A86A; flex:1}
.scroll .sugg .chips{flex-wrap:wrap}
/* стражи: голос блока в переписке, живая табличка, тёмная застава */
.avatar.gav{border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(40,30,44,0.7), 0 0 14px rgba(120,60,140,0.45)}
.gav-ph{display:inline-flex; align-items:center; justify-content:center; flex:none; background:radial-gradient(circle at 35% 30%, #5A4C62, #231C28 70%); color:#E9DDF0; font-size:18px}
.kname.gname{color:#6B3A5E}
.lmsg.fromguard .lb{border-left:3px solid #4A3A52}
#app.guard-lvl::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(24,16,30,0.62) 0%, rgba(24,16,30,0.28) 35%, rgba(24,16,30,0.5) 100%)}
#app.guard-lvl h2, #app.guard-lvl > .app > .row .eyebrow, #app.guard-lvl .stack .eyebrow{color:#FFFFFF; text-shadow:0 1px 10px rgba(0,0,0,0.7)}
#app.guard-lvl .link{background:rgba(255,255,255,0.85)}
@keyframes gfadein{from{opacity:0; transform:translateY(6px)}}
/* вручение ключа мира */
.keystage{position:relative; width:min(220px, 58vw); aspect-ratio:1; max-width:100%; display:flex; align-items:center; justify-content:center}
.keystage::before{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, var(--g2) 38%, transparent 70%); animation:glowpulse 3s ease-in-out infinite}
.keyimg{position:relative; width:86%; height:auto; animation:ringIn 1.4s cubic-bezier(.2,.8,.2,1) both, ringFloat 4s ease-in-out 1.4s infinite}
.keysay{display:flex; gap:10px; align-items:flex-end; text-align:left; background:rgba(255,255,255,0.92); border-radius:18px 18px 18px 5px; padding:12px 14px; box-shadow:0 4px 14px rgba(40,30,60,0.08)}
.keysay p{margin:4px 0 0}
@media (prefers-reduced-motion: reduce){ .keystage::before, .keyimg{animation:none} }
.artkey{flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center} .artkey .keyimg{width:44px; height:44px; animation:none}

.lpast.live{pointer-events:auto} .lpast.live .btn{display:inline-flex} .lpast.live .small.muted{display:block}

/* намерение над кругом техники */
.techaff{display:flex; flex-direction:column; align-items:center; gap:4px; margin:4px 0 10px; text-align:center}
.techaff p{margin:0; font-family:var(--f-display, "Forum", Georgia, serif); font-size:20px; line-height:1.35; color:var(--ink); text-wrap:balance}
/* в переписке техника без списка шагов начинается с отступа сверху */
.lstep .step-b{padding-top:8px} .lstep .step-b > .chips:first-child{margin-top:6px}
/* блокнот: действие и Дневник */
.chip.note{background:color-mix(in srgb, var(--g1) 55%, #fff); color:var(--b3)}
.diaryitem{gap:6px}

/* палитра мандалы */
.mpal{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:320px; margin:0 auto 10px}
.mcolor{appearance:none; width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,0.95); background:var(--c); box-shadow:0 2px 6px rgba(0,0,0,0.18); cursor:pointer; padding:0; font:inherit; font-size:14px; color:var(--mute)}
.mcolor.on{outline:3px solid var(--b2); outline-offset:2px; transform:scale(1.08)}
.mcolor.erase{background:repeating-linear-gradient(45deg, #fff 0 5px, #eee 5px 10px)}
.mcolor:focus-visible{outline:3px solid var(--b3); outline-offset:2px}
.moonfields{display:flex; flex-direction:column; gap:6px} .moonfields .in{transition:opacity 1.2s ease, filter 1.2s ease}
.moonfields.faded .in{opacity:.12; filter:blur(3px)}

/* реплики стражей: белый текст на тёмной подложке */
.lmsg.isguard .lb{background:linear-gradient(160deg, rgba(42,32,50,0.8), rgba(24,18,30,0.82)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#F7F1FA; border-left:3px solid #8E6BA8; box-shadow:0 6px 18px rgba(0,0,0,0.35)}
.lmsg.isguard .lb .kname.gname{color:#D9C2EC}
.lmsg.isguard .lb .laff{color:#FFF4D6; border-color:#C9A2E3; background:rgba(255,255,255,0.06)}
.lmsg.isguard .lb .small.muted, .lmsg.isguard .lb .muted{color:#CBBBD8}
.lmsg.isguard .lb b{color:#FFFFFF}

.daylist{margin:4px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
/* уровень стража: кнопки и мои ответы чёрные */
#app.guard-lvl .btn:not(.ghost):not(.gold){background:linear-gradient(180deg, #2C2433 0%, #15101A 100%); color:#FFFFFF; border-color:rgba(255,255,255,0.35); box-shadow:0 6px 16px rgba(0,0,0,0.35)}
#app.guard-lvl .btn.ghost{background:rgba(20,15,26,0.72); color:#F3ECF8; border-color:rgba(255,255,255,0.4)}
#app.guard-lvl .lmsg.fromme .lb{background:linear-gradient(180deg, rgba(44,36,51,0.82), rgba(21,16,26,0.84)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#FFFFFF; border:1px solid rgba(255,255,255,0.25)}
/* медитация: описание целиком, без кнопок по шагам */
.medtext{display:flex; flex-direction:column; gap:8px}
.medsteps{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; line-height:1.5}
.medsteps li.now{font-weight:600; color:var(--b3)}
/* вопрос о вчерашней технике «на день» */
.lmsg.fuq .lb{gap:8px} .lmsg.fuq .in{font-size:15px} .lmsg.fuq .link{align-self:flex-start}

/* картинки техник */
.talimg{width:132px; height:132px; object-fit:contain; display:block; position:relative; z-index:1; pointer-events:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.18))}
.eftpic{position:relative; width:min(300px, 84vw); aspect-ratio:1; max-width:100%; margin:0 auto; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 4px 16px rgba(40,30,60,0.12)}
.eftpic img{width:100%; height:100%; object-fit:cover; display:block}
@keyframes eftpulse{50%{transform:scale(1.18)}}
/* талисман-картинка: заряд идёт только по ободу, внутри светлая подложка */
.charge:has(.talimg){padding:7px}
.charge:has(.talimg)::before{content:""; position:absolute; inset:7px; border-radius:50%; background:radial-gradient(circle, #FFFFFF 0%, rgba(255,255,255,0.94) 70%, rgba(255,255,255,0.85) 100%)}
.charge.lit .talimg{animation:pulse 1.2s ease-in-out 2}

/* страж: «фото» в начале переписки и крупная аватарка */
.lmsg.gphoto{max-width:100%; align-self:stretch; justify-content:center}
.gpic{position:relative; margin:0 auto; animation:gphotoIn .7s ease-out both}
.gpic img{display:block; width:100%; object-fit:cover}
.gpic-ph{aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; font-size:48px; color:#E9DDF0; background:radial-gradient(circle at 40% 30%, #5A4C62, #1A141F 70%)}
@keyframes gphotoIn{from{opacity:0; transform:translateY(12px) scale(.97)}}
.lmsg.isguard .avatar.gav{box-shadow:0 0 0 2px rgba(201,162,227,0.75), 0 0 18px rgba(150,90,190,0.6)}
@media (prefers-reduced-motion: reduce){ .gpic{animation:none} }

/* «Коса намерения»: картинка с лучом от затылка к экрану */
.braidpic{width:min(300px, 84vw); aspect-ratio:1; max-width:100%; border-radius:20px; overflow:hidden; box-shadow:0 4px 16px rgba(40,30,60,0.12); cursor:pointer}
.braidpic img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.braidpic svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.braidpic .glowline{filter:drop-shadow(0 0 2px #FFF7D6) drop-shadow(0 0 6px #FFC14D)}
.braidpic.lit{box-shadow:0 0 0 3px #FFD36B, 0 0 30px rgba(255,200,90,0.7)}

/* простукивание: фигура во весь рост, приближение к голове на точках лица */
.eftpic.full{background:linear-gradient(180deg, #FFFFFF, #F4EFF7)}
.eftpic.full .eftfig img, .eftpic.full .eftfig svg{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.tapnow{display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,0.7)}
.tapnow b{font-family:var(--f-display, "Forum", Georgia, serif); font-weight:400; font-size:22px}
.tapnow p{margin:0}

/* картинки техник: банка со светлячками, кокон, пьедестал, камни для рун, силуэт во весь рост */
.jarpic{position:relative; width:150px; aspect-ratio:1}
.jarpic > img:first-child{width:100%; height:100%; object-fit:contain; display:block}
.jarpic .ff{position:absolute; width:38px; height:38px; margin:-19px 0 0 -19px; transform:rotate(var(--rot)); transition:opacity .6s ease, transform .6s ease; filter:drop-shadow(0 0 2px rgba(255,214,107,0.9)) drop-shadow(0 0 5px rgba(255,190,60,0.55))}
.jarpic .ff.ffoff{opacity:0; transform:rotate(var(--rot)) translateY(-60px) scale(.4)}
.jarpic .ff.ffon{opacity:1; animation:ffly 3.2s ease-in-out var(--fd) infinite}
@keyframes ffly{0%,100%{transform:rotate(var(--rot)) translate(0,0)} 50%{transform:rotate(var(--rot)) translate(3px,-5px)} }
.pedpic{position:relative; width:min(260px, 72vw); max-width:100%; margin:0 auto}
.pedpic img{width:100%; height:auto; display:block}
.pedpic .pedcr{position:absolute; inset:0; opacity:0; transform:translateY(-14%) scale(.92); transform-origin:58% 50%; transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.25,1.15); pointer-events:none}
.pedpic.has .pedcr{opacity:1; transform:none; animation:pedglow 3.2s ease-in-out 1.1s infinite}
@keyframes pedglow{0%,100%{filter:drop-shadow(0 0 10px rgba(255,206,130,0.6))} 50%{filter:drop-shadow(0 0 24px rgba(255,214,150,1))}}
@media (prefers-reduced-motion: reduce){ .pedpic .pedcr{transition:opacity .3s} .pedpic.has .pedcr{animation:none} }
.pedcap{margin:6px auto 0; max-width:90%; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,0.92); font-size:13px; line-height:1.35; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,0.12); animation:gfadein .8s ease .6s both}
@media (prefers-reduced-motion: reduce){ .jarpic .ff.ffon{animation:none} }

/* Встреча с Тенью — переписка */

/* ---------- жизнь и переходы ---------- */
.app.enter{animation:screenIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes screenIn{from{opacity:0; transform:translateY(14px)}}
/* Хранитель дышит и мерцает */
.avatar.kav:not(.ringav){animation:keeperBreath 5s ease-in-out infinite; box-shadow:0 0 0 2px rgba(255,255,255,0.9), 0 0 0 rgba(255,230,170,0)}
@keyframes keeperBreath{0%,100%{transform:scale(1); box-shadow:0 0 0 2px rgba(255,255,255,0.9), 0 0 6px rgba(255,230,170,0.35)} 50%{transform:scale(1.045); box-shadow:0 0 0 2px rgba(255,255,255,0.95), 0 0 16px rgba(255,225,160,0.8)}}
/* страж: медленное приближение портрета */
.gpic img{transform-origin:50% 35%}
@keyframes kenburns{from{transform:scale(1)} to{transform:scale(1.08)}}
/* Тень: проступает из размытия */
/* окно награды */
.over:not(.dark){animation:overIn .45s ease-out both}
.over:not(.dark) > .avatar, .over:not(.dark) > img.avatar{animation:popIn .6s cubic-bezier(.2,1.4,.4,1) both}
.over h2{animation:popIn .6s .12s cubic-bezier(.2,1.4,.4,1) both}
@keyframes overIn{from{opacity:0}} @keyframes popIn{from{opacity:0; transform:scale(.6)}}
/* заставка перехода */
.stageintro{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(circle at 50% 45%, rgba(255,255,255,0.97), rgba(var(--haze),0.97)); animation:overIn .5s ease-out both; cursor:pointer}
.stageintro.dark{background:radial-gradient(circle at 50% 45%, rgba(46,34,56,0.97), rgba(12,9,16,0.98)); color:#F4EEF8}
.stageintro .si-in{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; animation:siUp .9s cubic-bezier(.2,.8,.2,1) both}
.stageintro h1{font-family:var(--f-display, "Forum", Georgia, serif); font-weight:400; font-size:34px; margin:0; text-wrap:balance}
.stageintro p{margin:0; opacity:.8} .stageintro.dark .eyebrow{color:#D9C2EC}
.stageintro.out{animation:siOut .5s ease-in both}
@keyframes siUp{from{opacity:0; transform:translateY(18px) scale(.97); letter-spacing:.04em}}
@keyframes siOut{to{opacity:0}}
/* карта: только что открывшийся шаг */
.node.justopen .gemwrap{animation:justOpen 1.2s ease-out 2}
@keyframes justOpen{0%{transform:scale(1)} 35%{transform:scale(1.25); filter:drop-shadow(0 0 18px #fff)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){ .app.enter, .avatar.kav, .gpic img, .over, .over h2, .stageintro, .stageintro .si-in, .node.justopen .gemwrap{animation:none !important} }

/* сундук и договор Тени */
/* ---------- Тень: сцена во весь рост ---------- */
.shscene{position:relative; border-radius:24px; overflow:hidden; min-height:max(420px, min(calc(100vh - 250px), 720px)); background:#120E16; box-shadow:0 18px 40px rgba(0,0,0,0.45); display:flex; flex-direction:column; justify-content:flex-end}
.shscene .scimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
@keyframes scIn{from{opacity:0; filter:blur(10px) brightness(.4); transform:scale(1.06)} to{opacity:1; filter:none; transform:none}}
.shscene.taken .scimg{filter:brightness(1.15) saturate(1.1) sepia(.12)}
.shscene.taken{box-shadow:0 0 0 3px rgba(255,236,190,0.9), 0 0 60px rgba(255,220,150,0.8)}
.scname{position:absolute; top:14px; left:16px; display:flex; flex-direction:column; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,0.8)} .scname .eyebrow{color:#D9C2EC} .scname b{font-family:var(--f-display, "Forum", Georgia, serif); font-weight:400; font-size:24px}
.scpanel{position:relative; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; padding:80px 18px 20px; color:#F7F1FA; background:linear-gradient(180deg, rgba(14,10,18,0) 0%, rgba(14,10,18,0.6) 30%, rgba(14,10,18,0.8) 100%)}
.sctext{margin:0; font-family:var(--f-display, "Forum", Georgia, serif); font-size:20px; line-height:1.4; text-wrap:balance}
.sctext span{opacity:0; animation:scWord .5s ease forwards; animation-delay:var(--d)}
@keyframes scWord{from{opacity:0; filter:blur(4px)} to{opacity:1; filter:none}}
.scpanel .btn:not(.ghost){background:linear-gradient(180deg, #F2D27A, #C9963A); color:#2A1F0A; border:0; width:auto; padding:12px 26px}
.scpanel .laff{color:#FFF4D6; border-color:#C9A2E3; background:rgba(255,255,255,0.08); text-align:left}
.scpanel .small{color:#D7CCE2; margin:0}
.sctasks{display:flex; gap:14px; justify-content:center}
.sctask{appearance:none; border:0; background:none; color:#F2ECF7; display:flex; flex-direction:column; align-items:center; gap:6px; font:inherit; cursor:pointer; padding:0}
.sctask .ic{width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; background:rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.25)}
.sctask .nm{font-size:13px; font-weight:600; letter-spacing:.02em}
.sctask.off{opacity:.38; cursor:default}
.sctask.on .ic{border-color:#FFE7A8; background:radial-gradient(circle, rgba(255,231,168,0.35), rgba(255,231,168,0.08)); box-shadow:0 0 0 4px rgba(255,231,168,0.25), 0 0 24px rgba(255,214,140,0.8); animation:taskPulse 1.6s ease-in-out infinite}
.sctask.done .ic{background:#8E6BA8; border-color:#D9C2EC; font-size:24px}
@keyframes taskPulse{50%{transform:scale(1.08); box-shadow:0 0 0 7px rgba(255,231,168,0.18), 0 0 34px rgba(255,214,140,1)}}
.scsheet{position:relative; margin:64px 10px 10px; max-height:72%; overflow:auto; display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding:16px; border-radius:20px; background:rgba(20,15,26,0.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#F2ECF7; box-shadow:0 -10px 30px rgba(0,0,0,0.4); animation:sheetUp .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheetUp{from{opacity:0; transform:translateY(30px)}}
.scsheet p{margin:0} .scsheet .eyebrow{color:#D9C2EC} .scsheet .small{color:#D7CCE2} 
.scsheet .scquote{font-family:var(--f-display, "Forum", Georgia, serif); font-size:19px; line-height:1.35; color:#FFF4D6}
.scsheet .phrase{color:#FFF4D6; border-color:#C9A2E3; background:rgba(255,255,255,0.06)}
.scsheet .btn:not(.ghost){background:linear-gradient(180deg, #F2D27A, #C9963A); color:#2A1F0A; border:0}
.scsheet .row{width:100%; align-items:center} .scsheet .in{flex:1}
.scme{align-self:flex-end; padding:10px 14px; border-radius:16px 16px 4px 16px; background:linear-gradient(180deg, var(--g2), var(--b2)); color:#fff; font-weight:600}
.scact{width:100%; text-align:left; color:#F7F1FA; background:rgba(28,20,36,0.7); border:1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:16px; padding:12px}
.scpanel .gift{color:#F7F1FA; text-align:left; background:rgba(28,20,36,0.7); border:1px solid rgba(231,199,106,0.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
@media (prefers-reduced-motion: reduce){ .shscene .scimg, .sctext span, .sctask.on .ic, .scsheet{animation:none !important; opacity:1} }

/* дом кольца с замком на следующем шаге */
.gatescene{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding-top:8px}
.gatescene h2{margin:4px 0 0; text-wrap:balance}
.gatescene p{max-width:34ch; margin:0}
.gatepic{position:relative; width:min(300px, 80vw); max-width:100%; aspect-ratio:1}
.gatepic img{width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 10px 22px rgba(40,30,60,0.22)); transition:filter 1.2s ease}
.glockwrap{position:absolute; left:50%; bottom:6%; width:64px; height:80px; margin-left:-32px; padding:0; border:0; background:none; appearance:none; display:block}
.glock{width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35))}
.glock .shackle{transition:transform .5s cubic-bezier(.3,1.6,.5,1); transform-origin:46px 38px}
.gatescene.locked .glockwrap{animation:none}
.glockwrap.live{cursor:pointer; animation:glockPulse 1.8s ease-in-out infinite}
.glockwrap.live .glock{filter:drop-shadow(0 0 10px rgba(255,214,140,0.95)) drop-shadow(0 4px 8px rgba(0,0,0,0.3))}
.glockwrap.opened .shackle, .gatescene.opening .shackle{transform:translateY(-10px) rotate(-28deg)}
.gatescene.opening .glockwrap{animation:glockAway 1.2s ease .45s forwards}
.gatescene.opening .gatepic img{filter:drop-shadow(0 0 30px rgba(255,214,140,0.95)) brightness(1.08)}
@keyframes glockPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.08)}}
@keyframes glockAway{to{transform:translateY(16px) scale(.6); opacity:0}}
@media (prefers-reduced-motion: reduce){ .glockwrap.live, .gatescene.opening .glockwrap{animation:none} }

/* Тень: всё внутри сцены — светлый текст на тёмной полупрозрачной подложке */
.scpanel .gift h3{color:#FFF4D6} .scpanel .gift .eyebrow{color:#E7C76A} .scpanel .gift .small{color:#E6DCEE} .scpanel .gift .small.muted{color:#CBBBD8}
.scact p, .scact b{color:#F7F1FA} .scact .small.muted, .scact .muted{color:#CBBBD8}
.scact .choice{background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.22); color:#F7F1FA}
.scact .choice::before{background:transparent; border-color:#D9C2EC}
.scact .choice.sel{background:rgba(255,231,168,0.12); border-color:#E7C76A}
.scact .choice.sel::before{background:#F2D27A; box-shadow:inset 0 0 0 4px #1C1424}
.scact .chip{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.25); color:#FFFFFF}
.scact .btn.ghost{background:rgba(20,15,26,0.6); color:#F3ECF8; border-color:rgba(255,255,255,0.4)}
.scact .phrase{color:#FFF4D6; border-color:#C9A2E3; background:rgba(255,255,255,0.06)}
.scact .wait-note{color:#E6DCEE}

/* свиток: звезда стража слева, «главное» справа */
.scroll-list li .star{width:30px; height:30px; font-size:15px; display:grid; place-items:center; padding:0}
.scroll-list li .hand{flex:1; min-width:0}
.scroll-list li.gstar .hand{color:#7A4E12}
.gsline{margin:2px 0 0; color:#7A4E12} .gsline.muted{color:var(--mute)}

/* восьмиконечная звезда пути */
.s8{display:inline-block; width:1em; height:1em; vertical-align:-0.14em; overflow:visible; color:#D49A2E; filter:drop-shadow(0 0 2px rgba(255,200,90,0.55))}
.s8 path{fill:currentColor} .s8 .s8c{fill:#FFF6DC}
.btn.gold .s8{color:#5A3D0E; filter:none}
.star .s8{width:16px; height:16px; color:#B98A3A; filter:none} .star.on .s8{color:#FFFFFF}
.shscene .s8, .lmsg.isguard .s8, .scsheet .s8{color:#F2CF7A}
.scroll-list li .star.on{background:linear-gradient(180deg, #F2D27A, #C9963A); border-color:#C9963A; box-shadow:0 0 10px rgba(255,200,80,0.7)}

/* ---------- Дневник самопрограммирования (js/diary.js) ---------- */
.dy{display:flex; flex-direction:column; gap:12px; --dy-lh:29px; --dy-hand:"Bad Script", "Segoe Script", cursive}
.dy-cover{position:relative; aspect-ratio:3/4; width:100%; max-width:420px; margin:0 auto; border-radius:6px 18px 18px 6px; background:var(--cov, #8C7BB8); box-shadow:0 18px 30px rgba(40,30,70,0.28), inset -6px 0 12px rgba(0,0,0,0.12); overflow:hidden; touch-action:pan-y}
.dy-cover::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.22), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 5px)}
.dy-spine{position:absolute; left:0; top:0; bottom:0; width:26px; background:linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0.08)); border-right:1px dashed rgba(255,255,255,0.35)}
.dy-band{position:absolute; right:26px; top:0; bottom:0; width:12px; background:linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05) 40%, rgba(255,255,255,0.12)); box-shadow:2px 0 4px rgba(0,0,0,0.15)}
.dy-stitch{position:absolute; inset:14px 50px 14px 40px; border:2px dashed rgba(255,255,255,0.4); border-radius:10px; pointer-events:none}
.dy-cvtitle{position:absolute; left:40px; right:50px; top:9%; text-align:center; font-family:"Forum", Georgia, serif; color:#F2D27A; text-shadow:0 1px 0 rgba(0,0,0,0.25); line-height:1.1}
.dy-cvtitle small{display:block; font-size:12px; letter-spacing:.22em; text-transform:uppercase; opacity:.9}
.dy-cvtitle b{display:block; font-weight:400; font-size:26px; margin-top:6px}
.dy-oval{position:absolute; left:50%; top:50%; transform:translate(-50%, -46%); width:50%; aspect-ratio:3/4; border-radius:50%; background:radial-gradient(circle at 50% 35%, rgba(255,255,255,0.55), rgba(255,255,255,0.12) 70%); border:3px solid #F2D27A; box-shadow:0 0 0 6px rgba(242,210,122,0.25), inset 0 0 20px rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center}
.dy-oval svg{width:62%; height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25))}
.dy-cvname{position:absolute; left:40px; right:50px; bottom:8%; text-align:center; font-family:var(--dy-hand); font-size:26px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.3)}
.dy-layer{position:absolute; inset:0; pointer-events:none}
.dy-layer .dy-item{pointer-events:auto}
.dy-panel .in{width:100%}
.dy-sw{width:36px; height:36px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,0.08); cursor:pointer; padding:0}
.dy-sw[aria-pressed="true"]{box-shadow:0 0 0 2px #C9963A}
.dy-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.dy-month{font-family:"Forum", Georgia, serif; font-size:21px}
.dy-strip{display:flex; gap:4px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; background:rgba(255,255,255,0.85); border-radius:16px; padding:6px; -webkit-overflow-scrolling:touch}
.dy-strip::-webkit-scrollbar{display:none}
.dy-day{flex:0 0 calc((100% - 24px) / 7); scroll-snap-align:start; appearance:none; border:0; background:none; border-radius:12px; padding:6px 0 8px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; position:relative; font:inherit; color:var(--ink)}
.dy-day small{font-size:11px; opacity:.6}
.dy-day b{font-size:16px; font-variant-numeric:tabular-nums}
.dy-day.today b{color:var(--b2)}
.dy-day[aria-pressed="true"]{background:var(--b2)}
.dy-day[aria-pressed="true"] b, .dy-day[aria-pressed="true"] small{color:#fff; opacity:1}
.dy-day i{position:absolute; bottom:3px; width:5px; height:5px; border-radius:50%; background:#C9963A}
.dy-day i.part{background:#D9CBB0}
.dy-paper{position:relative; background:#FFFDF8; color:#2A2440; border-radius:4px 14px 14px 4px; box-shadow:0 10px 24px rgba(40,30,70,0.14); min-height:320px; padding:12px 14px 18px 52px; overflow:hidden; background-image:linear-gradient(to bottom, transparent calc(var(--dy-lh) - 1px), #D3DFF0 calc(var(--dy-lh) - 1px)); background-size:100% var(--dy-lh); background-position:0 10px}
.dy-paper::before{content:""; position:absolute; left:40px; top:0; bottom:0; width:2px; background:#E9AFC0; opacity:.7}
.dy-holes{position:absolute; left:11px; top:0; bottom:0; width:14px; background:radial-gradient(circle at 7px 7px, rgba(200,190,215,0.9) 5px, transparent 6px) 0 20px / 14px 64px repeat-y}
.dy-date{font-family:var(--dy-hand); font-size:20px; line-height:var(--dy-lh); color:#8E2F46; margin:0}
.dy-goal{display:flex; flex-direction:column; gap:6px; margin:0 0 var(--dy-lh); background:#F4EFFA; border-radius:12px; padding:8px 10px; position:relative; z-index:1}
.dy-goal.full{background:#FBF1DA}
.dy-gl{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px}
.dy-gl b{font-family:var(--dy-hand); font-size:19px; font-weight:400; color:#8E2F46}
.dy-gbar{height:6px; border-radius:6px; background:#E2D9EE; overflow:hidden; position:relative}
.dy-gbar i{display:block; height:100%; background:linear-gradient(90deg, #E7B95C, #C9963A); transition:width .5s}
.dy-gbar::after{content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; background:#fff}
.dy-entries{display:block; position:relative}
.dy-entries::after{content:""; display:block; clear:both}
.dy-entry{font-family:var(--dy-hand); font-size:18px; line-height:var(--dy-lh); color:var(--ink, #2B4B9B); white-space:pre-wrap; word-wrap:break-word; position:relative}
.dy-num{position:absolute; left:-46px; top:0; width:28px; text-align:right; font-size:16px; color:#B98A3A; user-select:none; -webkit-user-select:none}
.dy-entry.writing{animation:dyWrite 1.4s cubic-bezier(.4,.1,.3,1) backwards}
.dy-entry.writing .dy-num{animation:dyNum .4s ease 1.2s backwards}
@keyframes dyWrite{from{clip-path:inset(0 100% 0 0); filter:blur(.6px)} to{clip-path:inset(0 0 0 0)}}
@keyframes dyNum{from{opacity:0}}
.dy-mk-t{border-radius:3px; padding:0 2px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.dy-empty{font-family:var(--dy-hand); font-size:17px; color:#B4ADC4; line-height:var(--dy-lh)}
.dy-item{position:absolute; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transform-origin:50% 50%; z-index:3}
.dy-item svg{width:100%; height:100%; display:block; filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 4px rgba(40,30,60,0.22))}
.dy-item.sel{outline:2px dashed var(--b2); outline-offset:4px; border-radius:6px}
.dy-x, .dy-rot, .dy-pdel{position:absolute; width:26px; height:26px; border-radius:50%; border:0; color:#fff; font-size:15px; line-height:26px; padding:0; cursor:pointer; display:none; z-index:4}
.dy-x, .dy-pdel{top:-13px; right:-13px; background:#2A2440}
.dy-rot{top:-13px; left:-13px; background:var(--b2); font-size:13px}
.dy-rs, .dy-prs{position:absolute; width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid var(--b2); display:none; touch-action:none; z-index:4}
.dy-rs{right:-13px; bottom:-13px; cursor:nwse-resize}
.dy-rs::after, .dy-prs::after{content:""; position:absolute; inset:6px; border-right:2px solid var(--b2); border-bottom:2px solid var(--b2)}
.dy-item.sel .dy-x, .dy-item.sel .dy-rot, .dy-item.sel .dy-rs{display:block}
.dy-pin{position:relative; z-index:2; float:right; margin:8px 0 10px 14px; background:#fff; padding:6px 6px 14px; box-shadow:0 5px 12px rgba(40,30,60,0.2); transform:rotate(var(--r, 2deg)); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.dy-pin.left{float:left; margin:8px 14px 10px 0}
.dy-pin img{display:block; width:100%; height:auto; pointer-events:none; user-select:none; -webkit-user-select:none}
.dy-phload{display:block; aspect-ratio:4/3; background:linear-gradient(90deg, #EEE9F3, #F7F3FA, #EEE9F3)}
.dy-pin::before{content:""; position:absolute; top:-9px; left:50%; width:54px; height:18px; margin-left:-27px; background:rgba(242,210,122,0.65); transform:rotate(-4deg)}
.dy-pin.left .dy-pdel{right:auto; left:-13px}
.dy-prs{left:-13px; bottom:-13px; cursor:nesw-resize}
.dy-prs::after{border-right:0; border-left:2px solid var(--b2)}
.dy-pin.left .dy-prs{left:auto; right:-13px; cursor:nwse-resize}
.dy-pin.left .dy-prs::after{border-left:0; border-right:2px solid var(--b2)}
.dy-pin.sel{outline:2px dashed var(--b2); outline-offset:5px; touch-action:none; cursor:grab}
.dy-pin.sel .dy-pdel, .dy-pin.sel .dy-prs{display:block}
.dy-pin.moving{z-index:6; box-shadow:0 14px 28px rgba(40,30,60,0.35); opacity:.92}
.dy-dropline{height:0; border-top:3px solid #C9963A; border-radius:3px; margin:2px 0; box-shadow:0 0 8px rgba(201,150,58,0.7)}
.dy-compose{display:flex; gap:8px; align-items:flex-end}
.dy-compose textarea{flex:1; min-width:0; resize:none; max-height:140px; line-height:1.4}
.dy-tools{display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; background:rgba(255,255,255,0.85); border-radius:18px; padding:6px}
.dy-tool{appearance:none; border:0; background:none; border-radius:12px; padding:6px 2px; display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit; font-size:11px; font-weight:600; color:var(--ink); cursor:pointer}
.dy-tool svg{width:26px; height:26px}
.dy-tool[aria-pressed="true"]{background:rgba(160,140,210,0.18)}
.dy-sheet{animation:gfadein .25s ease both}
.dy-stgrid{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px}
.dy-stgrid button{appearance:none; border:0; background:rgba(0,0,0,0.04); border-radius:14px; aspect-ratio:1; padding:8px; cursor:pointer}
.dy-stgrid button svg{width:100%; height:100%}
.dy-mk{width:54px; height:30px; border-radius:6px 14px 14px 6px; border:0; cursor:pointer; box-shadow:inset 0 -3px 0 rgba(0,0,0,0.1)}
.dy-ink{width:40px; height:40px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,0.08); cursor:pointer; padding:0}
.dy-ink[aria-pressed="true"]{box-shadow:0 0 0 2px #C9963A}
.dy-info h3{font-family:"Forum", Georgia, serif; font-weight:400; font-size:20px; margin:4px 0 0}
.dy-info p, .dy-info li{font-size:14px; line-height:1.5; margin:0}
.dy-info ol, .dy-info ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.dy-hand{font-family:var(--dy-hand); font-size:17px; color:#2B4B9B}
@media (prefers-reduced-motion: reduce){ .dy-entry.writing, .dy-entry.writing .dy-num, .dy-sheet{animation:none} }

.dy-tip{margin:0; background:rgba(255,255,255,0.85); color:var(--ink); border-radius:12px; padding:8px 12px}

/* ---------- Карта желаний (js/wishboard.js) ---------- */
.wb{display:flex; flex-direction:column; gap:10px; --wb-hand:"Bad Script", "Segoe Script", cursive}
 .wb-board{position:relative; aspect-ratio:16/9; width:100%; border-radius:14px; overflow:hidden; box-shadow:inset 0 0 0 8px #B88F62, inset 0 0 0 10px #9C744A, 0 8px 18px rgba(60,40,20,0.18);
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 60%), repeating-linear-gradient(0deg, rgba(120,90,60,0.05) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(120,90,60,0.05) 0 2px, transparent 2px 4px), #E9DFCF}
.wb-ttl{position:absolute; left:14px; top:7px; font-family:var(--wb-hand); font-size:15px; color:#6B4E2E; z-index:6; background:rgba(233,223,207,0.85); padding:0 6px; border-radius:6px}
.wb-ttl b{font-weight:400; color:#8E2F46}
.wb-empty{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:30px; color:#8B7155; font-size:13px}
.wb-pin{position:absolute; width:16.5%; background:#fff; padding:3px 3px 11px; box-shadow:0 4px 8px rgba(60,40,20,0.25); transform:rotate(var(--r)); cursor:pointer; z-index:2}
.wb-pin.fresh{animation:wbPinIn .55s cubic-bezier(.2,1.4,.4,1) both}
.wb-pin img, .wb-pin .wb-ph{display:block; width:100%; aspect-ratio:1; object-fit:cover}
.wb-pin i{position:absolute; left:50%; top:-4px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #F08AA0, #C2445E); box-shadow:0 2px 3px rgba(0,0,0,0.35)}
.wb-pcap{position:absolute; left:2px; right:2px; bottom:0; text-align:center; font-family:var(--wb-hand); color:#5A4A3A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wb-pin.sel{outline:2px dashed var(--b2); outline-offset:3px; z-index:5}
.wb-x{position:absolute; border-radius:50%; border:0; background:#2A2440; color:#fff; padding:0; cursor:pointer}
@keyframes wbPinIn{from{transform:translateY(-30px) scale(1.25) rotate(0deg); opacity:0}}
.wb-ph{display:block; aspect-ratio:1; background:linear-gradient(90deg, #EEE9F3, #F7F3FA, #EEE9F3)}
.wb-deck{display:flex; flex-direction:column; align-items:center; gap:8px; background:rgba(255,255,255,0.9); border-radius:18px; padding:10px 12px 12px}
.wb-stage{position:relative; width:min(170px, 46vw); aspect-ratio:5/6; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.wb-card{position:absolute; inset:0; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 22px rgba(40,30,70,0.2); transition:transform .3s cubic-bezier(.2,.8,.2,1); z-index:1; animation:wbCard .3s ease both}
.wb-card img, .wb-card .wb-ph{width:100%; height:82%; object-fit:cover; display:block; pointer-events:none}
.wb-cap{height:18%; display:grid; place-items:center; font-family:var(--wb-hand); font-size:15px; color:#2B4B9B; padding:0 6px; text-align:center; line-height:1.1}
.wb-card.own .wb-cap{color:#8E2F46}
.wb-card.on::after{content:"✓ на доске"; position:absolute; top:8px; right:8px; background:rgba(92,143,110,0.92); color:#fff; font-weight:600; padding:2px 8px; border-radius:999px}
@keyframes wbCard{from{opacity:.4; transform:scale(.96)}}
.wb-back{position:absolute; inset:0; transform:translate(10px, 8px) rotate(4deg); background:#fff; border-radius:16px; opacity:.6; box-shadow:0 6px 14px rgba(40,30,70,0.12)}
.wb-back.b2{transform:translate(-10px, 10px) rotate(-5deg); opacity:.4}
.wb-arr{position:absolute; top:50%; width:44px; height:44px; margin-top:-22px; border-radius:50%; border:1px solid rgba(0,0,0,0.08); background:rgba(255,255,255,0.97); box-shadow:0 4px 10px rgba(40,30,70,0.12); cursor:pointer; display:grid; place-items:center; color:var(--ink); padding:0; z-index:3}
.wb-arr svg{width:20px; height:20px}
.wb-arr.l{left:-56px; animation:wbNudgeL 2.4s ease-in-out infinite} .wb-arr.r{right:-56px; animation:wbNudgeR 2.4s ease-in-out infinite}
@keyframes wbNudgeL{0%,70%,100%{transform:none} 80%{transform:translateX(-5px)}}
@keyframes wbNudgeR{0%,70%,100%{transform:none} 80%{transform:translateX(5px)}}
.wb-dots{display:flex; gap:4px; flex-wrap:wrap; justify-content:center; max-width:90%}
.wb-dots i{width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,0.12)} .wb-dots i.on{background:#C9963A} .wb-dots i.cur{background:var(--b2); width:16px; border-radius:3px} .wb-dots i.cur.on{background:#C9963A}
.wb-own{flex:none; width:auto; position:relative; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.wm-grid{display:grid; grid-template-columns:repeat(2, 1fr)}
.wm-sec{position:relative; border-radius:14px; padding:10px; background:#E9DFCF; box-shadow:inset 0 0 0 4px #B88F62; min-width:0}
.wm-sec.wide{grid-column:1 / -1}
.wm-sec h3{margin:0 0 6px; font-family:"Bad Script", cursive; font-weight:400; font-size:17px; color:#6B4E2E}
.wm-mini{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px}
.wm-mini figure{margin:0; background:#fff; padding:3px 3px 0; box-shadow:0 2px 5px rgba(0,0,0,0.18)}
.wm-mini img, .wm-mini .wb-ph{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.wm-mini figcaption{font-family:"Bad Script", cursive; font-size:11px; color:#5A4A3A; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:1px 0 2px}
.wm-sec.lock{background:#EEE7DD; box-shadow:inset 0 0 0 4px #CDBFAE}
.wm-sec.lock p{font-size:12px; color:#8B7155; margin:0}
@media (prefers-reduced-motion: reduce){ .wb-pin.fresh, .wb-card, .wb-arr.l, .wb-arr.r{animation:none} }

/* чек: штамп ставится после подписи */
.stamp{opacity:0; transform:rotate(-6deg) scale(1.8)} .stamp.on{opacity:1; transform:rotate(-6deg); animation:stampIn .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stampIn{from{opacity:0; transform:rotate(-14deg) scale(2.2)}}

/* окно награды: портрет стража или Тени */
.rw-face{margin:0 0 4px; display:flex; flex-direction:column; align-items:center; gap:6px}
.rw-face img{width:min(170px, 46vw); aspect-ratio:4/5; object-fit:cover; object-position:50% 18%; border-radius:18px; box-shadow:0 10px 26px rgba(0,0,0,0.35); animation:rwFace .7s cubic-bezier(.2,.8,.2,1) both}
.rw-face.shadow img{filter:saturate(.9) contrast(1.05)}
.rw-face figcaption{font-size:12px; font-weight:600; letter-spacing:.04em; opacity:.8}
@keyframes rwFace{from{opacity:0; transform:scale(.92) translateY(8px)}}
@media (prefers-reduced-motion: reduce){ .rw-face img{animation:none} }

/* Коса: лучи от затылка рисуются сами, по кругу */
.braidpic .ray{stroke-dasharray:90; stroke-dashoffset:90; filter:drop-shadow(0 0 2px #FFF7D6) drop-shadow(0 0 5px #FFC14D); animation:braidRay 2.8s ease-in-out infinite}
@keyframes braidRay{0%{stroke-dashoffset:90; opacity:0} 12%{opacity:1} 60%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}
@media (prefers-reduced-motion: reduce){ .braidpic .ray{animation:none; stroke-dashoffset:0} }
@keyframes cocoonGlow{0%,100%{opacity:.85} 50%{opacity:1}}

/* простукивание: таймер зоны */
.tapbar{height:6px; border-radius:6px; background:rgba(0,0,0,0.08); overflow:hidden; margin-top:6px}
.tapbar i{display:block; height:100%; background:linear-gradient(90deg, var(--g2), var(--b2)); transition:width .2s linear}
.tapnow.rest .tapbar i{background:linear-gradient(90deg, #CDE8D6, #7FB495)}
.tapnow.rest b{opacity:1}

/* Луна в тучах */
.mstage{position:relative; width:220px; height:220px; margin:6px auto 0; display:grid; place-items:center; touch-action:none}
.mstage > svg{filter:drop-shadow(0 0 22px rgba(255,236,180,0.55))}
.mcloud{position:absolute; cursor:grab; touch-action:none; animation:mcFloat 3.6s ease-in-out infinite; filter:drop-shadow(0 6px 10px rgba(30,20,50,0.35))}
.mcloud:nth-child(3){animation-delay:.8s} .mcloud:nth-child(4){animation-delay:1.6s}
.mcloud svg{width:100%; height:auto; display:block}
@keyframes mcFloat{0%,100%{translate:0 0} 50%{translate:calc(var(--dir) * 6px) 0}}
.mswipe{margin:4px 0 0; text-align:center; font-weight:600; font-size:14px; color:var(--b2)}
@media (prefers-reduced-motion: reduce){ .mcloud{animation:none} }

.tapbar{align-self:stretch; width:100%}
.mcloud{width:62%}

/* окна поверх экрана: плотный фон, чтобы не просвечивала переписка */
.over:not(.dark){background:rgb(var(--haze))}

/* «Письмо от неё»: конверт */
.env2{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.envsvg{width:min(230px, 70vw); height:auto; filter:drop-shadow(0 10px 18px rgba(60,40,20,0.2)); overflow:visible}
.envsvg .envflap{transform-origin:120px 40px; animation:envFlap .7s cubic-bezier(.3,1.3,.5,1) .15s both}
.envsvg .envwax{transform-origin:120px 112px; animation:envWax .45s cubic-bezier(.3,1.6,.5,1) .8s both}
@keyframes envFlap{from{transform:scaleY(-1)}}
@keyframes envWax{from{transform:scale(2.2); opacity:0}}
@media (prefers-reduced-motion: reduce){ .envsvg .envflap, .envsvg .envwax{animation:none} }

/* Рисую став: камень с пунктиром и обводка пальцем */
.runechips{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.runechip{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:12px; opacity:.45}
.runechip svg{width:24px; height:40px} .runechip path{fill:none; stroke:var(--ink); stroke-width:6; stroke-linecap:round; stroke-linejoin:round}
.runechip.now{opacity:1} .runechip.lit{opacity:1} .runechip.lit path{stroke:#C9963A}
.runestage{position:relative; width:min(250px, 68vw); aspect-ratio:1; margin:4px auto 0; touch-action:none; cursor:crosshair}
.runestage svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.runestage .rguide{fill:none; stroke:rgba(255,236,190,0.95); stroke-width:2.2; stroke-dasharray:3 3.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 2px rgba(0,0,0,0.4))}
.runestage .rink{fill:none; stroke:#FFD36B; stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px #FFC14D)}
.runestage.miss{animation:runeMiss .4s ease}
@keyframes runeMiss{25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}
.bindimg{max-width:min(260px, 72vw); border-radius:18px; box-shadow:0 10px 24px rgba(40,30,70,0.18); animation:popIn .7s cubic-bezier(.2,1.4,.4,1) both}

/* салон мечты: процедуры и чек */
.svcs{display:flex; flex-direction:column; gap:6px}
.svc{appearance:none; font:inherit; color:var(--ink); display:grid; grid-template-columns:1fr auto 28px; align-items:center; gap:10px; text-align:left; padding:10px 12px; border-radius:14px; border:1px solid rgba(0,0,0,0.08); background:rgba(255,255,255,0.8); cursor:pointer}
.svc-n{display:flex; flex-direction:column; font-weight:600; font-size:14px} .svc-n small{font-weight:400; color:var(--mute); font-size:12px}
.svc b{font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}
.svc i{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-style:normal; background:rgba(0,0,0,0.05); font-weight:700}
.svc.on{border-color:var(--b2); background:color-mix(in srgb, var(--g1) 35%, #fff)} .svc.on i{background:var(--b2); color:#fff}
 .receipt{position:relative; background:#FFFEFA; color:#2A2440; border-radius:6px; padding:16px 16px 18px; box-shadow:0 8px 20px rgba(40,30,60,0.14); font-family:"Courier New", ui-monospace, monospace; max-width:340px; margin:0 auto; width:100%;
  -webkit-mask:radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/16px 100% repeat-x; mask:radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0/16px 100% repeat-x}
.rc-head{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; border-bottom:1px dashed #BFB6C8; padding-bottom:10px; margin-bottom:8px; font-size:13px}
.rc-head b{font-size:16px} .rc-when{font-weight:700}
.rc-rows{display:flex; flex-direction:column; gap:6px; font-size:13px}
.rc-row{display:flex; justify-content:space-between; gap:10px} .rc-row span{display:flex; flex-direction:column} .rc-row small{font-size:11px} .rc-row b{white-space:nowrap}
.rc-total{display:flex; justify-content:space-between; border-top:1px dashed #BFB6C8; margin-top:10px; padding-top:8px; font-size:15px; font-weight:700}
.rc-stamp{position:absolute; right:14px; top:44%; transform:rotate(-14deg); border:3px solid #B13A4B; color:#B13A4B; font-family:"Golos Text", sans-serif; font-weight:700; letter-spacing:.12em; padding:4px 10px; border-radius:6px; animation:stampIn .45s cubic-bezier(.3,1.6,.5,1) both; background:rgba(255,255,255,0.6)}

/* предназначение */
.pnums{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px}
.pnum{display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:14px; background:rgba(255,255,255,0.7)}
.pnum b{font-family:var(--f-display, "Forum", Georgia, serif); font-weight:400; font-size:30px; line-height:1}
.pnum span{font-size:11px; color:var(--mute); text-align:center}
.pnum.key{background:linear-gradient(180deg, #FFF6DC, #F7E2B0); box-shadow:0 0 0 2px #E7C76A}
.pcard h3{margin:2px 0 0}

/* значки заданий Тени и тряска закрытого замка */
.sctask .ic svg{width:28px; height:28px}
.glockwrap.shake{animation:lockShake .45s ease}
@keyframes lockShake{20%{transform:translateX(-6px) rotate(-6deg)} 60%{transform:translateX(6px) rotate(6deg)}}

/* дневник: правка записи, без дырок под номерами */
.dy-holes{display:none}
.dy-entry.edit{background:rgba(255,231,168,0.35); border-radius:6px}
.dy-etools{display:flex; gap:8px; margin:2px 0 6px; font-family:"Golos Text", system-ui, sans-serif}
.dy-etools button{appearance:none; border:1px solid rgba(0,0,0,0.1); background:#fff; border-radius:999px; font-size:12px; font-weight:600; color:#2A2440; cursor:pointer}
.dy-etools button[data-dact="edel"]{color:#8E2F46}

/* техаудит 2 */
.scic{display:inline-flex; width:14px; height:14px; vertical-align:-2px; font-style:normal}
.scic svg{width:100%; height:100%}
.fambtn .fsp svg{width:13px; height:13px}
.app.with-nav{padding-bottom:calc(166px + env(safe-area-inset-bottom,0px))}
.scsheet .link{color:#fff; text-decoration:underline}
.dy-etools button{min-height:36px; padding:6px 14px}
.dy-x::after, .dy-rot::after, .dy-pdel::after, .wb-x::after{content:""; position:absolute; inset:-9px}

/* дневник: серия, итог недели, подсказка */
.dy-stats{display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; font-size:12px; color:var(--mute, #6B6278); margin-top:6px}
.dy-stats b{font-weight:700}
.dy-hint{color:#6B3F8A; font-weight:500}
.dy-hint:empty{display:none}

/* Карта желаний: подписи на доске крупнее, крестик крупнее */
.wb-pcap{font-size:11px; line-height:1.15; background:rgba(255,250,240,0.85); border-radius:3px}
.wb-x{width:28px; height:28px; line-height:28px; right:-12px; top:-12px; font-size:15px}
.pwhat summary{cursor:pointer; color:var(--accent, #8A5BA8)}
.pwhat ul{margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}

.wm-shot{max-height:60vh; width:auto; max-width:100%; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.25)}

/* номера помощи: кризисный ответ фамильяра, раздел «Я», Тень, письмо */
.helpnums{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
a.chip.helptel{text-decoration:none; font-weight:600; color:#7A1F2E; background:#FFF1F1; border:1px solid #E7A9B2}
a.chip.helptel::before{content:"☎ "}
.famsos{font-size:12px !important; padding:4px 8px !important; color:#9A2B3C; white-space:nowrap}
.helplink{appearance:none; display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; border-radius:14px; border:1px solid #E7A9B2; background:#FFF5F5; color:#7A1F2E; font:inherit; font-weight:600; text-align:left; cursor:pointer}
.helpcard .eyebrow{margin-top:6px}
.schelp{font-size:12px; color:#D7CCE2; margin:0}
.scstop{color:#D7CCE2 !important; font-size:12px; text-decoration:underline; background:none; border:0; cursor:pointer; align-self:flex-end}
.scdanger{border-left:3px solid #E7A9B2; padding:8px 10px; background:rgba(255,255,255,0.06); border-radius:8px}
/* Костёр отпускания (js/bonfire.js) */
.bf-add{display:flex; flex-direction:column; gap:6px}
.bf-in{font-size:21px; padding-top:6px; padding-bottom:6px}
 .bf-scene{position:relative; width:100%; max-width:340px; aspect-ratio:1/0.92; margin:6px auto 0; border-radius:22px; overflow:hidden; user-select:none; -webkit-user-select:none;
  background:radial-gradient(ellipse 75% 62% at 50% 44%, #FFF4DE 0%, #F8E7CF 55%, #EEDAC0 100%); box-shadow:inset 0 0 0 1px rgba(160,110,60,0.12), 0 8px 20px rgba(90,60,30,0.12)}
.bf-img{position:absolute; left:5%; top:1%; width:90%; height:auto; pointer-events:none; transition:opacity 2s ease}
.bf-embers{opacity:0}
.bf-flick{clip-path:inset(0 0 47% 0); transform-origin:50% 53%; opacity:.5; animation:bfFlick 1.7s ease-in-out infinite alternate}
@keyframes bfFlick{0%{transform:scale(1, 1) skewX(0); filter:brightness(1)} 30%{transform:scale(1.02, 1.05) skewX(-1.4deg); filter:brightness(1.12)} 65%{transform:scale(.99, 1.02) skewX(1.1deg); filter:brightness(1.04)} 100%{transform:scale(1.015, 1.08) skewX(-.6deg); filter:brightness(1.2)}}
 .bf-glow{position:absolute; left:50%; top:36%; width:72%; aspect-ratio:1; margin-left:-36%; margin-top:-36%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,205,120,0.85) 0%, rgba(255,172,80,0.4) 38%, rgba(255,160,70,0) 70%); animation:bfGlow 2.3s ease-in-out infinite alternate; transition:filter .3s, opacity 2s, top 2s, width 2s, margin 2s}
@keyframes bfGlow{from{opacity:.7; scale:.94} to{opacity:1; scale:1.06}}
.bf-scene.near .bf-glow{filter:brightness(1.25) saturate(1.3)}
.bf-scene.flare .bf-glow{animation:bfGlowFlare .9s ease-out}
@keyframes bfGlowFlare{0%{opacity:1; scale:1} 30%{opacity:1; scale:1.4} 100%{opacity:.85; scale:1}}
.bf-scene.flare .bf-flick{animation:bfFlare .85s ease-out; opacity:.75}
@keyframes bfFlare{0%{transform:scale(1)} 30%{transform:scale(1.08, 1.22); filter:brightness(1.35)} 100%{transform:scale(1)}}
.bf-sparks{position:absolute; inset:0; pointer-events:none; transition:opacity 1.5s}
.bf-spark{position:absolute; left:var(--x); top:30%; width:4px; height:4px; border-radius:50%; background:#FFC24A; box-shadow:0 0 6px 2px rgba(255,140,30,0.8); opacity:0; animation:bfSpark var(--t) ease-out infinite; animation-delay:var(--d)}
@keyframes bfSpark{0%{transform:translate(0, 0) scale(1); opacity:0} 12%{opacity:1} 100%{transform:translate(var(--dx), -130px) scale(.3); opacity:0}}
.bf-burst{position:absolute; left:50%; top:38%; pointer-events:none}
.bf-burst i{position:absolute; width:5px; height:5px; border-radius:50%; background:#FFD36B; box-shadow:0 0 8px 3px rgba(255,140,30,0.9); animation:bfBurst .95s ease-out forwards; animation-delay:var(--bd)}
@keyframes bfBurst{0%{transform:translate(0, 0) scale(1.3); opacity:1} 100%{transform:translate(var(--bx), var(--by)) scale(.2); opacity:0}}
.bf-target{position:absolute; left:50%; top:38%; width:36%; height:30%; transform:translate(-50%, -50%); pointer-events:none}
.bf-scene.out .bf-fire, .bf-scene.out .bf-flick, .bf-scene.out .bf-sparks{opacity:0}
.bf-scene.out .bf-embers{opacity:1}
.bf-scene.out .bf-glow{top:50%; width:52%; margin-left:-26%; margin-top:-26%; opacity:.55; background:radial-gradient(circle, rgba(255,130,60,0.55) 0%, rgba(255,120,50,0.2) 45%, rgba(255,120,50,0) 70%); animation:bfEmber 3.2s ease-in-out infinite alternate}
@keyframes bfEmber{from{opacity:.35} to{opacity:.7}}
.bf-ash{position:absolute; left:var(--x); top:46%; width:4px; height:4px; border-radius:50%; background:#9A918B; opacity:0; animation:bfAsh 4.2s ease-out infinite; animation-delay:calc(var(--d) + 1.2s)}
@keyframes bfAsh{0%{transform:translate(0, 0); opacity:0} 15%{opacity:.8} 100%{transform:translate(var(--dx), -120px) rotate(160deg); opacity:0}}
.bf-pile{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; padding:6px 2px 2px}
 .bf-strip{position:relative; z-index:3; max-width:100%; font-size:20px; line-height:1.1; color:#33294F; background:linear-gradient(180deg, #FFFDF7, #F6EDDA); border:0; padding:8px 16px 7px; margin:0;
  transform:rotate(var(--r)); box-shadow:0 3px 8px rgba(80,50,20,0.2); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  clip-path:polygon(0 8%, 6% 0, 14% 6%, 24% 1%, 36% 7%, 48% 0, 60% 6%, 72% 1%, 84% 7%, 94% 0, 100% 9%, 98% 50%, 100% 92%, 92% 100%, 80% 94%, 66% 100%, 52% 94%, 38% 100%, 24% 95%, 12% 100%, 2% 93%, 1% 50%);
  transition:transform .3s cubic-bezier(.2,1.3,.4,1)}
.bf-strip.fresh{animation:bfStripIn .45s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes bfStripIn{from{transform:translateY(-14px) rotate(var(--r)) scale(.8); opacity:0}}
.bf-strip::after{content:""; position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(to top, #1A0F0A 0%, #2C170C 45%, #FF7A1A 68%, #FFD36B 84%, rgba(255,230,160,0) 100%); pointer-events:none}
.bf-strip.held{cursor:grabbing; z-index:20; box-shadow:0 10px 18px rgba(80,50,20,0.28); animation:none}
.bf-strip.fly{z-index:30; pointer-events:none; animation:none}
.bf-strip.burn{filter:brightness(.35) sepia(1) saturate(2.5); opacity:0}
.bf-strip.burn::after{animation:bfChar .45s ease-in forwards}
@keyframes bfChar{to{height:140%}}
.bf-after{display:flex; flex-direction:column; gap:8px; animation:gfadein 1.2s ease 1s both}
.bf-empty{font-family:var(--f-display); font-size:23px; color:#5A3A1E; text-align:center; margin:6px 0 0}
@media (prefers-reduced-motion: reduce){ .bf-flick, .bf-glow, .bf-spark, .bf-ash, .bf-strip, .bf-after{animation:none} .bf-img{transition:none} }

/* простукивание EFT: 9 точек, золотая пульсирующая точка с подписью, плавное приближение (transform на .eftfig задаётся в eftScheme) */
@property --z{syntax:"<number>"; inherits:true; initial-value:1}
.eftpic.full{overflow:hidden; isolation:isolate}
.eftpic.full .eftfig{position:absolute; transform-origin:0 0; will-change:transform; transition:transform .6s ease, --z .6s ease}
@keyframes eftring{0%{transform:scale(.6); opacity:1} 100%{transform:scale(1.7); opacity:0}}
.tapnow .laff{margin:4px 0 0; font-size:18px; align-self:stretch}
@media (prefers-reduced-motion: reduce){ .eftpic.full .eftfig{transition:none} }

/* доступность: контраст ≥4,5:1, цели касания ≥44 px (чипы ≥40), шрифт ≥12 px, видимый фокус */
.node.cur .lbl.now{background:var(--b3); border-color:var(--b3)}
.node.cur .lbl.now{background:color-mix(in srgb, var(--b2) 77%, #000); border-color:color-mix(in srgb, var(--b2) 77%, #000)}
.node.cur .lbl.now .sub{color:#FFFFFF}
.place, .codedigit.on, .ringstep b{background:var(--b3)}
.place, .codedigit.on, .ringstep b{background:color-mix(in srgb, var(--b2) 77%, #000)}
.scsheet .link, #app.shadow-lvl .scsheet .link{background:rgba(255,255,255,0.14); color:#FFFFFF}
.rc-row small{color:#6B6278}
.dy-stats b{color:#8A6418}
.link{min-height:44px; padding:6px 12px}
.famhead .link{min-width:44px; min-height:44px}
.btn.small{min-height:44px}
.chip.btnchip{min-height:40px}
a.chip.helptel{display:inline-flex; align-items:center; min-height:44px}
.scstop{min-height:44px; padding:10px 0}
.xbtn{position:relative; width:32px; height:32px} .xbtn::after{content:""; position:absolute; inset:-6px; border-radius:50%}
.dy-sw{position:relative} .dy-sw::after{content:""; position:absolute; inset:-7px; border-radius:50%}
.eyebrow{font-size:12px} .door .eyebrow{font-size:12px}
.nb{font-size:12px}
.rings7{display:flex; flex-wrap:wrap; justify-content:center; row-gap:10px; column-gap:0} .rings7 > *{flex:0 0 25%; min-width:0}
.rings7 div{font-size:12px}
.boxtile span{font-size:12px} .tcard .small{font-size:12px} .kname{font-size:12px}
.kcastle span{font-size:12px} .kmap.img .kcastle span{font-size:12px; padding:1px 6px}
.kdgrid span, .pnum span, .rc-row small, .dy-day small, .dy-tool, .wm-mini figcaption{font-size:12px}
.wb-card.on::after{font-size:12px} .ringstep b{font-size:12px; width:20px; height:20px}
button:focus-visible, a[href]:focus-visible, summary:focus-visible, label:focus-visible, select:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--b3); outline-offset:2px}
input:focus-visible, textarea:focus-visible{outline:2px solid var(--b3); outline-offset:1px}
.scsheet :focus-visible, .shscene :focus-visible, .scact :focus-visible{outline-color:#FFE7A8}
/* свои линейные иконки вместо эмодзи */
.lic{display:inline-block; width:1.15em; height:1.15em; vertical-align:-.2em; margin-right:.35em; flex:none}
.msg.them .lic{margin:0 0 0 .3em}
/* «Прежде чем войти» */
.legal{gap:14px}
.legal p{line-height:1.5}
/* снятый став в Шкатулке */
.gallery figure.staveoff img{filter:grayscale(1) opacity(.45)}
.gallery figure.burnnow img{animation:staveBurn 1.4s ease-out both}
@keyframes staveBurn{0%{filter:none; box-shadow:0 0 0 rgba(255,150,40,0)} 35%{filter:sepia(1) saturate(3) brightness(1.2); box-shadow:0 0 22px rgba(255,150,40,0.9)} 100%{filter:grayscale(1) opacity(.45); box-shadow:0 0 0 rgba(255,150,40,0)}}
@media (prefers-reduced-motion: reduce){ .gallery figure.burnnow img{animation:none} }
.staveoffbtn{margin-top:4px; padding:6px 8px; font-size:13px}
.numbig .lic{width:1em; height:1em; margin:0; vertical-align:middle}
.zedge{display:flex; flex-direction:column; gap:8px; align-items:center; margin:8px 0} .zedge .chips{justify-content:center}

/* свиток на уровне: поле на всю ширину, кнопка под ним */
.lvlscroll .scroll-add{flex-wrap:wrap; gap:8px}
.lvlscroll .scroll-add input{flex:1 1 100%; min-width:0}
.lvlscroll .scroll-add .btn{flex:1 1 100%; width:100% !important}

/* страж без белой подложки: фигура на прозрачном фоне, мягкая серая тень, края растворяются */
.gpic{border:0; box-shadow:none; border-radius:0; overflow:visible; background:none; filter:drop-shadow(0 14px 22px rgba(20,14,28,0.55))}
.gpic img{-webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-composite:intersect}

/* стражи и Тень: тёмное нижнее меню, чтобы не ломать атмосферу */
#app.guard-lvl .bnav, #app.shadow-lvl .bnav{background:linear-gradient(180deg, rgba(34,25,46,0.94), rgba(16,11,22,0.98)); border-top:1px solid rgba(255,255,255,0.08); box-shadow:0 -10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06)}
#app.guard-lvl .bnav .nb, #app.shadow-lvl .bnav .nb{color:#E3D9EE}
#app.guard-lvl .bnav .nb.on, #app.shadow-lvl .bnav .nb.on{color:#F2D27A}
#app.guard-lvl .bnav .nb .nic, #app.shadow-lvl .bnav .nb .nic{filter:brightness(0.9) saturate(0.85)}

/* страж: портрет без подписи, реплики без аватарки, кнопка действия золотая и живая */
#app.guard-lvl .lmsg.isguard{padding-left:0}
#app.guard-lvl .lchat .btn:not(.ghost):not(:disabled){background:linear-gradient(180deg, #F6DE97, #C99A3A); color:#2A1C08; border:0; box-shadow:0 0 0 1px rgba(255,236,180,0.5), 0 0 22px rgba(242,210,122,0.55); animation:gbtnGlow 2.4s ease-in-out infinite}
@keyframes gbtnGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,236,180,0.5), 0 0 16px rgba(242,210,122,0.4)} 50%{box-shadow:0 0 0 1px rgba(255,236,180,0.7), 0 0 30px rgba(242,210,122,0.75)}}
@media (prefers-reduced-motion: reduce){ #app.guard-lvl .lchat .btn{animation:none} }

/* страж приближается: выходит из темноты, с каждым этапом подходит ближе, при поражении отступает */
.gpic{transform-origin:50% 100%; transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.4s ease}
@media (prefers-reduced-motion: reduce){ .gpic{transition:none} .gpic img{animation:none} }

/* реплики стража: приглушённый светло-лиловый текст, первая — шрифтом Forum, фраза-блок выделена золотом */
#app.guard-lvl .lmsg.isguard .lb{color:#D6C9E3}
#app.guard-lvl .lmsg.isguard.gfirst .lb p{font-family:var(--f-display, "Forum"), Georgia, serif; font-size:19px; line-height:1.4; letter-spacing:.01em}
.gblock{color:#EBC97A; font-weight:600; text-shadow:0 0 12px rgba(235,201,122,0.35)}
#app.guard-lvl .lmsg.isguard.gfirst .gblock{font-weight:400}

/* стражи: один размер рамки (560x600), компактнее, чтобы под стражем было видно сообщение */
.gpic{width:min(330px, 88%)}

/* название техники у стражей и теней: шапка внутри самой техники */
.ltech-title{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; margin:2px 0 12px}
.ltech-title .eyebrow{font-size:11px; letter-spacing:.12em; opacity:.7}
.ltech-title b{font-family:var(--f-display, "Forum"), Georgia, serif; font-weight:400; font-size:20px; line-height:1.2; text-wrap:balance}

/* простукивание: объяснение с примером перед стартом */
.tapintro{display:flex; flex-direction:column; gap:8px; margin:10px 0 12px; padding:12px 14px; border-radius:16px; background:rgba(122,85,160,0.07); border:1px solid rgba(122,85,160,0.18)}
.tapintro .laff{margin:0}

/* кнопка завершения техники («Выполнила» и т.п.) отличается от кнопок внутри техники */
.btn.tfinish{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; padding:13px 18px; border-radius:999px; border:0; background:linear-gradient(180deg, #7B55A6 0%, #4E3270 100%); color:#FFFFFF; font-weight:600; letter-spacing:.02em; box-shadow:0 0 0 1px rgba(233,199,116,0.75), 0 8px 20px rgba(60,30,90,0.35)}
.btn.tfinish::before{content:"✓"; font-weight:700; color:#F2D27A}
.btn.tfinish:disabled{opacity:.45; box-shadow:0 0 0 1px rgba(233,199,116,0.35)}
#app.guard-lvl .lchat .btn.tfinish:not(:disabled){background:linear-gradient(180deg, #7B55A6 0%, #4E3270 100%); color:#FFFFFF; animation:none; box-shadow:0 0 0 1px rgba(242,210,122,0.8), 0 0 22px rgba(160,110,220,0.45)}

/* фраза, которую держит страж: прописными (просьба владелицы), переносится, чтобы не вылезать за экран */
.gblock{text-transform:uppercase; letter-spacing:.03em; white-space:normal}

/* суд над мыслью: сценарий с заседанием */
.courtpic{margin:0 0 12px; border-radius:16px; overflow:hidden; box-shadow:0 6px 18px rgba(40,25,60,0.18)}
.courtpic img{display:block; width:100%; height:auto}
.court .cq-lead{font-family:var(--f-display, "Forum"), Georgia, serif; font-size:18px; line-height:1.4; margin:0 0 8px}
.court .cq{display:flex; flex-direction:column; gap:10px; margin:4px 0 12px}
.court .cq-q{font-family:var(--f-display, "Forum"), Georgia, serif; font-size:19px; line-height:1.35; margin:0}
.court .chip.btnchip.on{background:linear-gradient(180deg, #7B55A6, #4E3270); color:#fff; border-color:transparent}
.court .verdict{display:flex; flex-direction:column; gap:8px}
/* суд: портрет того, кто ведёт допрос */
.court .cq-who{display:flex; justify-content:center; margin:2px 0 12px}
.court .cq-who.guard img{width:min(220px, 70%); height:auto; border-radius:20px; background:radial-gradient(120% 90% at 50% 30%, #4A3A60, #1E1628 75%); box-shadow:0 10px 24px rgba(30,18,44,0.35)}
.court .cq-who.keeper img{width:132px; height:132px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px rgba(233,199,116,0.8), 0 10px 24px rgba(60,40,90,0.25)}
/* суд: кто спрашивает — аватар и пузырь; страж с упрёком (тёмный), Хранитель с добротой (тёплый) */
.court .cq-say{display:flex; gap:10px; align-items:flex-start}
.court .cq-say img{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none}
.court .cq-say.g img{background:#2A2036; box-shadow:0 0 0 2px rgba(155,120,194,0.8), 0 0 14px rgba(120,80,170,0.45)}
.court .cq-say.k img{box-shadow:0 0 0 2px rgba(233,199,116,0.85)}
.court .cq-b{flex:1; min-width:0; border-radius:16px; padding:10px 13px; display:flex; flex-direction:column; gap:4px}
.court .cq-say.g .cq-b{background:linear-gradient(180deg, #2E2340, #1D1628); color:#EDE3F7; border-top-left-radius:4px}
.court .cq-say.k .cq-b{background:linear-gradient(180deg, #FFF8E8, #F6ECD6); color:#3A2C18; border:1px solid rgba(214,176,98,0.45); border-top-left-radius:4px}
.court .cq-nm{font-size:11.5px; letter-spacing:.04em; opacity:.75}
.court .cq-say .cq-q{font-size:17.5px}

/* окно после уровня: две кнопки рядом */
.over .overbtns{gap:8px; justify-content:center; flex-wrap:wrap}
.lact.lvlend{margin-top:6px}

/* «Мои действия» во вкладке «Моё» */
.myacts{gap:10px}
.myact{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:14px; background:rgba(122,85,160,0.06); border:1px solid rgba(122,85,160,0.15)}
.myact p{margin:0; line-height:1.45}
.myact-h{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.myact-b{gap:8px; flex-wrap:wrap}
.myact.done{opacity:.7}
.myact-done{margin-top:4px} .myact-done summary{cursor:pointer; color:var(--muted, #776a85)} .myact-done .myact{margin-top:8px}
/* «Выполнила» — в цвете королевства (глубокий цвет камня кольца), золотой контур и галочка остаются */
.btn.tfinish, #app.guard-lvl .lchat .btn.tfinish:not(:disabled){background:linear-gradient(180deg, var(--g3) 0%, var(--b3) 100%); color:#FFFFFF}
/* стражи выплывают плавно: место под портрет зарезервировано, анимация стартует только после загрузки картинки */
.gpic img{aspect-ratio:560/600; height:auto; opacity:0; animation:none}
.gpic img.gin{animation:gFloat 2.6s cubic-bezier(.22,.61,.36,1) both, kenburns 14s 2.6s ease-in-out infinite alternate}
@keyframes gFloat{0%{opacity:0; transform:translateY(26px) scale(.92); filter:blur(8px) brightness(.6)} 50%{opacity:.9; filter:blur(1.5px) brightness(.85)} 100%{opacity:1; transform:none; filter:none}}
@media (prefers-reduced-motion: reduce){ .gpic img.gin{animation:none; opacity:1} }
/* Тень тоже проявляется только после загрузки картинки, без рывка */
.shscene .scimg{opacity:0; animation:none}
.shscene .scimg.gin{opacity:1; animation:scIn 2.4s ease-out both, kenburns 18s ease-in-out 2.4s infinite alternate}
@media (prefers-reduced-motion: reduce){ .shscene .scimg.gin{animation:none !important; opacity:1} }
/* простукивание: окно ниже — квадрат, видна верхняя часть фигуры, нужная точка приближается */
.eftpic.full{aspect-ratio:1; width:min(240px, 66vw)}
.eftpic.full .eftfig{inset:auto; left:0; top:0; width:100%; height:177.08%}

/* v187: заметки реестра — вопрос опроса, парящая кнопка королевств, подпись под картой */
.qtext .qpick{display:block; margin-top:6px; font-family:var(--f-body, inherit); font-size:15px; font-weight:600; color:var(--b3, var(--accent)); letter-spacing:.01em}
/* v188: одна картинка из шести — три в ряд, все шесть на экране */
.picgrid.one{grid-template-columns:repeat(3, 1fr); gap:8px}
.picgrid.one .piccap{font-size:12px; padding:5px 4px 7px}

/* v189: согласие с условиями под «Продолжить» */
.terms-agree{margin-top:-14px; max-width:300px} .terms-agree .link{font-size:inherit; padding:0; min-height:0}
.legal p{margin:4px 0 0} .termslink{display:block; margin:6px auto 0; font-size:13px}

/* v194: чек Вселенского банка — гильош, рамка, печати */
.chq-in{display:flex; align-items:center; gap:8px} .chq-in .in{flex:1; font-size:22px; font-weight:600; text-align:right; letter-spacing:.02em} .chq-in span{font-size:22px; font-weight:600}
 .chq{--cb:#2F4FA8; position:relative; padding:9px; border-radius:6px; color:#1F2B55; animation:chqIn .7s cubic-bezier(.2,.8,.2,1) both;
  background:repeating-radial-gradient(circle at 0 0, transparent 0 5px, rgba(47,79,168,.55) 5px 6px), repeating-radial-gradient(circle at 100% 100%, transparent 0 5px, rgba(47,79,168,.55) 5px 6px), #DCE7FA; box-shadow:0 10px 26px rgba(30,40,90,.22)}
 .chq-in2{position:relative; overflow:hidden; border:1.5px solid var(--cb); padding:14px 14px 12px; font-family:"Times New Roman", Georgia, serif; font-size:13px; line-height:1.35;
  background:repeating-linear-gradient(115deg, rgba(127,166,230,.16) 0 1px, transparent 1px 7px), repeating-linear-gradient(65deg, rgba(127,166,230,.16) 0 1px, transparent 1px 7px), radial-gradient(ellipse at 50% 55%, #FFFFFF 0%, #EEF4FF 70%, #DDE8FB 100%)}
.chq-h{text-align:center; font-family:Arial, sans-serif; font-weight:700; font-size:22px; letter-spacing:.06em; color:#111A3A}
.chq-sub{text-align:center; font-style:italic; font-weight:700; color:var(--cb); margin:2px 0 10px}
.chq-row{display:flex; justify-content:space-between; gap:10px; font-weight:700; margin-bottom:8px} .chq-row span{display:flex; gap:4px; align-items:baseline}
.chq-f{display:flex; gap:8px; align-items:baseline; margin:6px 0} .chq-f span{white-space:nowrap}
.chq-f u, .chq-row u{flex:1; text-decoration:none; border-bottom:1px solid #1F2B55; font-weight:700; font-style:italic; color:#16307A; padding:0 4px; min-width:0}
.chq-t{margin:8px 0 0; font-size:11.5px; text-align:justify}
.chq-foot{display:flex; justify-content:space-between; gap:10px; margin-top:12px; font-style:italic; font-size:12px} .chq-sign{font-family:var(--f-display), cursive; font-size:16px; color:#16307A; margin-left:4px}
.chq-stamp{position:absolute; right:10px; bottom:26px; border:2px solid #2C3FA0; color:#2C3FA0; font:700 10px/1.15 Arial, sans-serif; text-align:center; padding:4px 7px; border-radius:4px; transform:rotate(-14deg); opacity:0; animation:chqStamp .4s cubic-bezier(.3,1.6,.5,1) .7s both; background:rgba(255,255,255,.35)}
.chq-paid{position:absolute; left:50%; top:52%; border:4px double #C0263A; color:#C0263A; font:800 34px/1 Arial, sans-serif; letter-spacing:.12em; padding:6px 16px; border-radius:8px; transform:translate(-50%,-50%) rotate(-12deg); opacity:0; animation:chqPaid .45s cubic-bezier(.3,1.6,.5,1) 1.9s both; background:rgba(255,255,255,.25)}
.chq-msg{opacity:0; animation:chqMsg .5s ease-out 2.5s both; background:var(--gold-soft, #FBF1DA); border-radius:12px; padding:10px 12px}
@keyframes chqIn{from{opacity:0; transform:translateY(14px) scale(.96)}}
@keyframes chqStamp{from{opacity:0; transform:rotate(-14deg) scale(2)} to{opacity:.9; transform:rotate(-14deg)}}
@keyframes chqPaid{from{opacity:0; transform:translate(-50%,-50%) rotate(-12deg) scale(2.2)} to{opacity:.88; transform:translate(-50%,-50%) rotate(-12deg)}}
@keyframes chqMsg{from{opacity:0; transform:translateY(6px)} to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .chq, .chq-stamp, .chq-paid, .chq-msg{animation-duration:.01s; animation-delay:0s} }

/* v197: «Звонок Вовану» */
.vv-lead{margin:0; font-size:16px; line-height:1.5}
.vv-sec{display:flex; flex-direction:column; gap:10px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95); border-radius:20px; padding:14px; box-shadow:0 4px 14px rgba(40,30,60,.06)}
.vv-h{display:flex; align-items:center; gap:10px; font-family:var(--f-display, Georgia), serif; font-size:20px; color:var(--ink)}
.vv-n{width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:700 14px/1 var(--f-body, sans-serif); color:#fff; background:linear-gradient(160deg, var(--g2, #D9A441), var(--b3, #8A5A1E)); flex:none}
.vv-chips{gap:8px} .vv-chips .chip{font-size:14px; padding:8px 13px; text-align:left}
.vv-sec .in{margin:0}
.vv-text{display:flex; flex-direction:column; gap:6px; position:relative; background:#FFFFFF; border-radius:20px 20px 20px 6px; padding:16px 18px 16px 20px; font-size:17px; line-height:1.55; color:var(--ink); box-shadow:0 8px 22px rgba(40,30,60,.1); border:1px solid rgba(0,0,0,.04)}
.vv-text::before{content:"“"; position:absolute; right:14px; top:-6px; font:700 64px/1 Georgia, serif; color:var(--g2, #D9A441); opacity:.35}
.vv-text.big{font-size:19px}
.vv-callbtn{background:linear-gradient(180deg, #4CC37A, #23924F) !important; color:#fff !important; border:0 !important; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 20px rgba(35,146,79,.35) !important}
.vv-call{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 16px 20px; border-radius:28px; color:#F2F4FA; background:radial-gradient(120% 80% at 50% 0%, #46527A 0%, #232A44 55%, #151A2B 100%); box-shadow:0 14px 34px rgba(20,24,40,.38)}
.vv-call::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 40% at 50% 18%, rgba(255,214,120,.16), transparent 70%); pointer-events:none}
.vv-ava{width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg, #FFE6A6, #D9A441 60%, #B07A22); box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.35)}
.vv-ava span{font:700 42px/1 var(--f-display, Georgia), serif; color:#1B2033}
.vv-call.ring .vv-ava, .vv-call.dial .vv-ava{animation:vvPulse 1.2s ease-in-out infinite}
.vv-name{font-size:24px; font-weight:600; margin-top:8px; letter-spacing:.02em}
.vv-num{font:600 26px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.16em; min-height:32px} .vv-num i{font-style:normal; opacity:.18}
.vv-st{font-size:14px; opacity:.72}
.vv-wave{display:flex; gap:4px; align-items:center; height:26px; margin-top:4px} .vv-wave i{width:4px; border-radius:3px; background:#FFD27A; animation:vvWave 1s ease-in-out infinite} .vv-wave i:nth-child(2){animation-delay:.12s} .vv-wave i:nth-child(3){animation-delay:.24s} .vv-wave i:nth-child(4){animation-delay:.36s} .vv-wave i:nth-child(5){animation-delay:.24s} .vv-wave i:nth-child(6){animation-delay:.12s}
.vv-say{position:relative; z-index:1; margin-top:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:11px 14px; font-size:15px; line-height:1.45; text-align:center; animation:vvIn .35s ease-out both}
.vv-deal{display:flex; flex-direction:column; gap:6px; background:linear-gradient(160deg, #FFF8E6, #FBEBC6); border:1px solid #EBCB84; border-radius:18px; padding:14px 16px; color:#3A2A10} .vv-deal b{font-size:18px; font-family:var(--f-display, Georgia), serif; font-weight:400}
@keyframes vvPulse{50%{box-shadow:0 0 0 16px rgba(255,214,120,.16), 0 10px 24px rgba(0,0,0,.35)}}
@keyframes vvWave{0%, 100%{height:6px} 50%{height:24px}}
@keyframes vvIn{from{opacity:0; transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){ .vv-call .vv-ava, .vv-say, .vv-wave i{animation:none} .vv-wave i{height:14px} }

/* v199: значок искры */
.spk{width:1.15em; height:1.15em; vertical-align:-.2em; margin:0 .12em; object-fit:contain}
.sparks .spk{width:16px; height:16px; margin:0 3px 0 0}
.spkline{display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap}
h2.spkline .spk{width:30px; height:30px}

/* v206: настройки в шапке, двойные подписи меню, королевство и Замок семи колец */
.gearbtn{appearance:none; border:0; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.85); color:var(--ink); margin-left:6px; cursor:pointer; box-shadow:0 1px 4px rgba(40,30,60,.12)}
.gearbtn.on{box-shadow:0 0 0 2px var(--g2, #E7B95C)}
.bnav .nb span:last-child{font-size:10px; line-height:1.1; text-align:center}
.landpic{display:flex; justify-content:center} .landpic img{width:min(220px, 60vw); height:auto; filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.landkeeper{gap:10px; justify-content:center; align-items:center}
.castle-empty{background:rgba(255,255,255,.75); border:1px dashed var(--line, #C9B8DC); border-radius:16px; padding:12px 14px; text-align:center; font-family:var(--f-display, Georgia), serif; font-size:16px}
.roomrow{display:flex; align-items:center; justify-content:space-between; gap:10px}
.roomname{appearance:none; background:none; border:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:2px; font:inherit; color:inherit; cursor:pointer; min-width:0}
.roomname:disabled{cursor:default; opacity:.7}
.price{background:var(--goldsoft, #FBF1DA); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; white-space:nowrap; border:0; font-family:inherit; color:inherit}
.price.on{background:color-mix(in srgb, #5C8F6E 18%, #fff)} .price.buy{cursor:pointer; background:linear-gradient(180deg, #F2D27A, #C9963A)}
.roompic{height:160px; border-radius:18px; background:linear-gradient(160deg, #E9E1F2, #C9B8DC)}
.castle-news{display:flex; gap:10px; align-items:flex-start; text-align:left; background:rgba(255,255,255,.85); border-radius:14px; padding:10px 12px; margin:6px 0} .castle-news p{margin:2px 0 0; font-size:14px}
.boxtile.wide{width:100%}
.roomrow{background:var(--card, #fff); border-radius:16px; padding:12px 14px; box-shadow:0 2px 10px rgba(40,30,60,.08)}
/* v208: замки земель меньше и тусклее, Замок семи колец без изменений */
.kmap.img .kcastle:not(.k-eighth){width:19%}
.kmap.img .kcastle:not(.k-eighth) img{filter:saturate(.7) brightness(.97) opacity(.88) drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.kmap.img .kcastle:not(.k-eighth) span{font-size:10px}
/* v209: Замок семи колец — новый рисунок целиком и ореол за ним */
.kmap .kcastle.k-eighth{z-index:2}
.kmap .kcastle.k-eighth::before{content:""; position:absolute; left:50%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; z-index:-1; animation:castleHalo 4.5s ease-in-out infinite; pointer-events:none}
.kmap .kcastle.k-eighth img{filter:drop-shadow(0 0 14px rgba(255,236,190,.9)) drop-shadow(0 6px 10px rgba(80,60,110,.18))}
@keyframes castleHalo{50%{transform:translate(-50%,-50%) scale(1.08); opacity:.85}}
@media (prefers-reduced-motion: reduce){ .kmap .kcastle.k-eighth::before{animation:none} }
.kmap.img .kcastle.k-eighth{width:33%}
.kmap .kcastle.k-eighth::before{top:45%; background:radial-gradient(circle, rgba(255,248,224,1) 0%, rgba(255,230,170,.8) 26%, rgba(240,220,255,.45) 50%, transparent 70%)}
.kmap .kcastle.k-eighth::before{width:150%}

/* v211: замки «под Тенью» / «после» */
.kpic{position:relative; display:block; width:100%} .kpic img{display:block; width:100%} .kpic img.lit{position:absolute; inset:0; transition:opacity 1.2s ease}
.kmap.img .kcastle.fog:not(.k-eighth) img{filter:opacity(.8) drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.kmap.img .kcastle.now:not(.k-eighth) img{filter:drop-shadow(0 0 10px rgba(255,255,255,.95))}
.kmap.img .kcastle.got:not(.k-eighth) img{filter:drop-shadow(0 0 8px rgba(255,230,160,.8))}
.kmap.img .kcastle.k-eighth.k-eighth img{filter:drop-shadow(0 6px 10px rgba(80,60,110,.2))}
.kmap .kcastle.k-eighth::before{opacity:calc(.3 + .7 * var(--lit, 0))}
.landpic .kpic img{width:100%}
.gatescene.locked .gatepic img{filter:drop-shadow(0 10px 22px rgba(40,30,60,0.22))}
.kcastle .kpic, .kmap.img .kcastle .kpic{background:none; padding:0; margin:0; border-radius:0; white-space:normal}
.kpic img.lit.tower{animation:towerGlow 3.5s ease-in-out infinite}
@keyframes towerGlow{0%,100%{filter:brightness(1)} 50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion: reduce){ .kpic img.lit.tower{animation:none} }

/* v215: комната на весь экран (Покои) */
.roomfs{position:fixed; inset:0; z-index:60; overflow:hidden; background:#1a0f07}
.roomfs .rbox{position:absolute; left:50%; top:50%; width:max(100vw, 66.667vh); height:max(100vh, 150vw); transform:translate(-50%, -50%)}
.roomfs .rlayer{position:absolute; inset:0; background-size:100% 100%; background-repeat:no-repeat; -webkit-mask-size:300% 100%; mask-size:300% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; animation:rlit 1.6s ease}
.roomfs .rlayer.rdark{filter:grayscale(1) sepia(1) saturate(1.6) hue-rotate(-10deg) brightness(.3) contrast(1.15); animation:none}
body.roomopen .bnav, body.roomopen .fambtn{display:none}
@keyframes rlit{from{opacity:0} to{opacity:1}}
.roomfs .rtop{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:calc(10px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 18px max(14px, env(safe-area-inset-left, 0px)); background:linear-gradient(180deg, rgba(20,12,6,.65), rgba(20,12,6,0))}
.roomfs .rback, .roomfs .rspk{appearance:none; border:0; border-radius:999px; padding:6px 12px; background:rgba(255,248,236,.9); color:#3b2615; font:600 13px/1 var(--f-body, system-ui), sans-serif; display:inline-flex; align-items:center; gap:4px; cursor:pointer}
.roomfs .rspk img{width:14px; height:14px}
.roomfs .rtitle{color:#fff6e6; font-family:var(--f-display, Georgia), serif; font-size:20px; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.roomfs .rbottom{position:absolute; left:0; right:0; bottom:0; padding:28px max(14px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); background:linear-gradient(0deg, rgba(20,12,6,.75), rgba(20,12,6,0)); display:flex; flex-direction:column; align-items:center; gap:8px}
.roomfs .rdone{margin:0; color:#fff6e6; font-family:var(--f-display, Georgia), serif; font-size:20px; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.roomfs .rspot{position:absolute; transform:translate(-50%, -50%); z-index:2; appearance:none; border:0; background:rgba(255,248,236,.94); color:#3b2615; display:inline-flex; align-items:center; white-space:nowrap; cursor:pointer; font-family:inherit; box-shadow:0 0 0 0 rgba(255,214,140,.7), 0 4px 14px rgba(0,0,0,.35); animation:rspot 2.4s ease-in-out infinite}
.roomfs .rspot b{font-size:13px} .roomfs .rspot i{font-style:normal; font-weight:700; font-size:13px; color:#8a5a1c; display:inline-flex; align-items:center; gap:3px} .roomfs .rspot i img{width:14px; height:14px}
.roomfs .rspot.off{opacity:.7}
@keyframes rspot{0%,100%{box-shadow:0 0 0 0 rgba(255,214,140,.6), 0 4px 14px rgba(0,0,0,.35)} 50%{box-shadow:0 0 0 8px rgba(255,214,140,0), 0 4px 14px rgba(0,0,0,.35)}}
@media (prefers-reduced-motion: reduce){ .roomfs .rspot{animation:none} }
.roomfs .rspot span{font-size:11px; opacity:.7}
.roomfs .rspot{flex-direction:column; gap:1px; padding:7px 14px; border-radius:16px; text-align:center}
.roomfs .rspot i{margin-top:2px}
.roomfs .rloading{position:absolute; left:0; right:0; top:45%; text-align:center; color:#f4e3c8; font-family:var(--f-display, Georgia), serif; font-size:18px}
.roomfs .rlayer.still{animation:none}
/* v231: фон карты королевства — тёмный под Тенью, светлеет вокруг пройденных земель */
.kmap.img::before{content:""; position:absolute; inset:0; background:inherit; background-size:100% 100%; filter:saturate(.35) brightness(.48) sepia(.25) hue-rotate(220deg); z-index:0; pointer-events:none}
.kmap.img.all-lit::before{display:none}
.kmap-lit{position:absolute; inset:0; background-size:100% 100% !important; z-index:0; pointer-events:none; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; animation:rlit 1.6s ease}
.kmap.img .kcastle{z-index:1}
.kmap.img .kcastle span{background:rgba(255,255,255,0.9)}

/* v232: комната фамильяра, живой лисёнок (движение кодом) */
.famroom .foxwrap{position:absolute; transform:translate(-50%, -100%); transform-origin:50% 100%; z-index:2}
.famroom .fox{display:block; height:auto; transform-origin:50% 100%; animation:foxBreath 3.2s ease-in-out infinite; cursor:pointer; filter:drop-shadow(0 6px 10px rgba(60,40,20,.25))}
.famroom .foxshadow{position:absolute; left:14%; right:14%; border-radius:50%; animation:foxShadow 3.2s ease-in-out infinite}
@keyframes foxBreath{0%,100%{transform:scale(1, 1)} 50%{transform:scale(1.015, 1.035)}}
@keyframes foxShadow{0%,100%{transform:scaleX(1)} 50%{transform:scaleX(.97)}}
.famroom .foxwrap.hop{animation:foxHop .7s cubic-bezier(.3,.7,.4,1)}
.famroom .foxwrap.tilt{animation:foxTilt 1.1s ease-in-out}
.famroom .foxwrap.wiggle{animation:foxWiggle .6s ease-in-out}
@keyframes foxHop{0%{transform:translate(-50%,-100%)} 30%{transform:translate(-50%,-112%) scale(1.03,.97)} 55%{transform:translate(-50%,-100%) scale(1.04,.95)} 75%{transform:translate(-50%,-103%)} 100%{transform:translate(-50%,-100%)}}
@keyframes foxTilt{0%,100%{transform:translate(-50%,-100%) rotate(0)} 30%{transform:translate(-50%,-100%) rotate(-7deg)} 65%{transform:translate(-50%,-100%) rotate(4deg)}}
@keyframes foxWiggle{0%,100%{transform:translate(-50%,-100%) rotate(0)} 25%{transform:translate(-50%,-100%) rotate(3deg)} 75%{transform:translate(-50%,-100%) rotate(-3deg)}}
.famroom .foxfx{position:absolute; inset:0; pointer-events:none}
.famroom .foxfx i{position:absolute; top:20%; font-style:normal; font-size:22px; color:#ff8fb1; text-shadow:0 0 8px #fff; animation:foxFloat 1.5s ease-out forwards; opacity:0}
@keyframes foxFloat{0%{opacity:0; transform:translateY(0) scale(.6)} 20%{opacity:1} 100%{opacity:0; transform:translateY(-120px) scale(1.2)}}
.famroom .foxsay{position:absolute; left:50%; top:38%; transform:translateX(-50%); max-width:min(78vw, 320px); background:rgba(255,250,240,.96); color:#3b2615; border-radius:16px; padding:10px 14px; font-size:15px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:3}
.famroom .foxsay::after{content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); border:8px solid transparent; border-top-color:rgba(255,250,240,.96); border-bottom:0}
.famroom .foxgrow{margin:0; color:#fff6e6; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.famroom .foxbtns{display:flex; width:100%; max-width:420px}
.famroom .foxbtns .btn{flex:1}
@media (prefers-reduced-motion: reduce){ .famroom .fox, .famroom .foxshadow{animation:none} }
.famroom .foxwrap{left:49%; top:70%}
.famroom .foxshadow{bottom:1%; height:7%; background:radial-gradient(ellipse, rgba(70,40,90,.4), transparent 70%)}

/* v235: лисёнок слоями — хвост качается, моргание, свечение знака, искры, сон */
.famroom .foxwrap{width:42%}
.famroom .fox{position:relative; aspect-ratio:560/542; width:100%}
.famroom .fox img{position:absolute; inset:0; width:100%; height:100%}
.famroom .fx-tail{transform-origin:74.4% 88.1%; animation:foxTail 3.6s ease-in-out infinite}
@keyframes foxTail{0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)}}
.famroom .fx-blink{opacity:0; animation:foxBlink 5.2s infinite}
@keyframes foxBlink{0%,93%,100%{opacity:0} 94.5%,97%{opacity:1}}
.famroom .fox.sleep .fx-blink{animation:none; opacity:1}
.famroom .fox.sleep{animation:foxBreath 5s ease-in-out infinite}
.famroom .fx-sign{position:absolute; left:50.5%; top:28.3%; width:15%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(220,230,255,.85), rgba(200,215,255,.25) 45%, transparent 70%); mix-blend-mode:screen; animation:foxSign 3s ease-in-out infinite; pointer-events:none}
@keyframes foxSign{0%,100%{opacity:.25; transform:translate(-50%,-50%) scale(.85)} 50%{opacity:.9; transform:translate(-50%,-50%) scale(1.1)}}
.famroom .fx-zz{position:absolute; right:4%; top:6%; font-style:normal; font-weight:700; color:#fff; text-shadow:0 0 8px rgba(120,100,200,.8); opacity:0; pointer-events:none}
.famroom .fox.sleep .fx-zz{animation:foxZz 2.6s ease-in-out infinite}
@keyframes foxZz{0%{opacity:0; transform:translate(0,10px) scale(.8)} 30%{opacity:1} 100%{opacity:0; transform:translate(14px,-30px) scale(1.15)}}
.famroom .fx-sparks{position:absolute; inset:-10% -15% 0; pointer-events:none}
.famroom .fx-sparks i{position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 8px 3px rgba(210,225,255,.9); opacity:0; animation:foxSpark 4s ease-in-out infinite}
.famroom .fx-sparks i:nth-child(1){left:78%; top:40%; animation-delay:0s} .famroom .fx-sparks i:nth-child(2){left:88%; top:62%; animation-delay:.8s} .famroom .fx-sparks i:nth-child(3){left:12%; top:30%; animation-delay:1.6s} .famroom .fx-sparks i:nth-child(4){left:70%; top:20%; animation-delay:2.4s} .famroom .fx-sparks i:nth-child(5){left:22%; top:58%; animation-delay:3.2s}
@keyframes foxSpark{0%,100%{opacity:0; transform:translateY(0) scale(.5)} 40%{opacity:1} 80%{opacity:0; transform:translateY(-24px) scale(1)}}
@media (prefers-reduced-motion: reduce){ .famroom .fx-tail, .famroom .fx-sign, .famroom .fx-sparks i{animation:none} }
.famroom .fx-l{position:absolute; inset:0; background-repeat:no-repeat; background-size:300% 100%; pointer-events:none}
.famroom .fx-tail{background-position:0 0} .famroom .fx-body{background-position:50% 0} .famroom .fx-blink{background-position:100% 0}

/* v237: семь лисят, переключатель в тесте, кнопки-картинки */
.famroom .fx-l{background-image:var(--fox)}
.famroom .foxbtns{justify-content:center; gap:28px}
.famroom .foxbtn{appearance:none; border:0; background:none; padding:0; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; flex:0 0 auto}
.famroom .foxbtn img{width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); transition:transform .15s}
.famroom .foxbtn:active img{transform:scale(.9)}
.famroom .foxbtn span{color:#fff6e6; font-size:13px; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.7); display:inline-flex; align-items:center; gap:3px}
.famroom .foxbtn span img{width:13px; height:13px; filter:none}

/* v239: опрос «мысли» — 6 картинок + своя мысль */
.fearown{position:relative; display:flex; gap:8px; align-items:center; margin-top:8px; padding:8px; border-radius:14px; background:rgba(255,255,255,.7); border:1px dashed var(--line, #C9B8DC)}
.fearown.sel{border-style:solid; border-color:var(--g2, #E7B95C)}
.fearown .in{flex:1; min-width:0; margin:0}
.fearown .place{position:static; flex:0 0 auto}
.picgrid.one .pic:last-child:nth-child(odd){grid-column:2; width:auto; justify-self:stretch}

/* v244: несколько своих мыслей */
.fearown .owntxt{flex:1; min-width:0; overflow-wrap:anywhere}

/* v249: знак кольца без круга, живой */
.medal3 .m3glow{transform-origin:58px 58px; animation:m3glow 3.2s ease-in-out infinite}
.medal3 .m3float{animation:m3float 4s ease-in-out infinite}
.medal3 .m3sp{opacity:0; animation:m3tw 2.8s ease-in-out infinite}
.medal3 .m3sp.s2{animation-delay:.9s} .medal3 .m3sp.s3{animation-delay:1.8s}
@keyframes m3glow{0%,100%{opacity:.7; transform:scale(.94)} 50%{opacity:1; transform:scale(1.05)}}
@keyframes m3float{0%,100%{transform:translateY(2px)} 50%{transform:translateY(-3px)}}
@keyframes m3shine{0%,55%{transform:translateX(0) skewX(-18deg)} 85%,100%{transform:translateX(150px) skewX(-18deg)}}
@keyframes m3tw{0%,100%{opacity:0} 40%,60%{opacity:1}}
@media (prefers-reduced-motion:reduce){.medal3 *{animation:none!important} .medal3 .m3sp{opacity:.8}}

/* v250: значок стоит, по нему проходит золотой перелив */
.medal3 .m3glow, .medal3 .m3float{animation:none}
.medal3 .m3shine{opacity:.85; animation:m3gold 3.6s ease-in-out infinite}
@keyframes m3gold{0%,20%{transform:translateX(0) skewX(-18deg)} 75%,100%{transform:translateX(175px) skewX(-18deg)}}
.fambtn img{object-position:center}
/* v251: кнопки «Назад» — светлая таблетка с золотой каймой и золотым кружком-стрелкой */
button.bk{appearance:none; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; min-height:38px; padding:4px 14px 4px 5px; border-radius:999px; border:1px solid rgba(214,170,82,.55); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,240,.85)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 3px 10px rgba(60,40,80,.14), inset 0 1px 0 #fff; color:var(--ink, #2A2233); font:600 13.5px/1 var(--f-body, system-ui), sans-serif; text-decoration:none; letter-spacing:.01em; cursor:pointer; transition:transform .12s, box-shadow .12s}
button.bk .bki{width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg, #FFF1C9, #E7B95C 55%, #B9842E); box-shadow:0 1px 3px rgba(120,80,20,.35), inset 0 1px 0 rgba(255,255,255,.7)}
button.bk:hover{box-shadow:0 5px 14px rgba(60,40,80,.2), inset 0 1px 0 #fff}
button.bk:active{transform:scale(.96)}
button.bk.small{min-height:34px; font-size:12.5px}
/* «Вести каждый день» → «Моё волшебство» */
.keepbtn{appearance:none; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; margin:0 0 12px; padding:10px 14px; border-radius:16px; border:1.5px dashed color-mix(in srgb, #C9A24E 70%, transparent); background:rgba(255,255,255,0.7); color:var(--b3); font-weight:600}
.keepbtn.on{border-style:solid; background:linear-gradient(180deg, #FFF8E6, #F6E7BF); color:#7A5A16}
.keepbtn .small{font-weight:400}
/* по высоте экрана 19,5:9 (v259): опрос */
.qbody{gap:10px}
.qbody .qtext{margin:0}
.picgrid.rank.pick .pic img, .picgrid.rank.pick .picph, .picgrid.one .pic img, .picgrid.one .picph{aspect-ratio:6/5}
.link.fearadd{align-self:center; margin-top:2px; font-size:14px}
.qbody .stack:has(> .opt){gap:8px}
.qbody .opt{padding:11px 16px}
.qbody .picgrid.rank.pick{gap:7px}
.qbody .qtext .qpick{margin-top:3px}
/* раскрытие и карта силы */
.fitpage{gap:12px}
.fitpage .reveal{gap:6px; padding-block:14px}
.powgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
/* королевство: карта и земли под высоту экрана */
.kmap{width:auto; max-width:100%; max-height:none; margin-inline:auto}
.landbtns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.landbtns .btn.gold{grid-column:1 / -1}
.landbtns .btn.ghost{padding-inline:8px}
.landbtns .btn.ghost{font-size:13px; line-height:1.2; padding-block:9px; min-height:0}
.kmap{height:calc(100svh - 400px)}
.landpic .kpic{width:min(200px, 55vw, 17svh)}
.landkeeper{padding-block:10px}
/* настройки: плотнее подвал, кризисная строка остаётся */
.setlinks{justify-content:center; gap:16px; flex-wrap:wrap}
.setlinks .termslink{margin:0}
.helpline{margin:10px 4px 0; font-size:12px; line-height:1.35}
.helplink{margin-top:10px; padding:10px 14px}
/* оплата */
.paywall h2, .paywall > p{margin:0}
.paywall .card{gap:6px}
.paywall .btn.ghost{margin-top:-2px}
.paywall .ringimg.md{width:min(140px, 11svh)}
.paywall{gap:8px; margin-top:-6px}
.paywall .card p{margin:0}
.paywall .card{padding-block:12px}
/* тайная комната: плотные плитки */
.roomintro{margin:0 4px 10px; line-height:1.35}
.roomtiles .boxtile{gap:2px}
.roomtiles .boxtile b{line-height:1.15}
.roomtiles .boxtile span{font-size:11px; line-height:1.2}
.roomtiles{grid-template-columns:repeat(4, 1fr); gap:7px}
.roomtiles .boxtile{border-radius:18px; padding:9px 3px 8px}
.roomtiles .boxtile b{font-size:12px; overflow-wrap:anywhere; hyphens:auto}
@media (max-width:370px){ .roomtiles .boxtile span{display:none} .roomtiles .boxtile{padding-block:10px} }
/* карта желаний: пустые рамки ниже */
.wm-intro p{margin:0 4px 10px; line-height:1.35}
.wm-sec.lock{min-height:0; padding:9px 10px}
.wm-sec.lock h3{font-size:16px; margin-bottom:3px}
.wm-grid{gap:8px}
.mandalawrap svg{min-width:200px}
.mandalawrap svg{width:min(100%, 300px, calc(100svh - 572px))}
.helpline{background:rgba(255,255,255,0.86); border-radius:14px; padding:8px 12px; color:var(--ink) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.landbtns .btn:last-child:nth-child(even){grid-column:1 / -1}
@media (max-height:800px){ #app .boxtiles:not(.roomtiles) .boxtile{padding-block:10px 9px} .helplink{margin-top:8px} }
/* каталог техник (v261) */
.catbtn{margin-top:4px}
.techclassic{margin:-6px 4px 10px}
.trow{appearance:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:16px; background:rgba(255,255,255,0.86); border:1px solid rgba(255,255,255,0.95); box-shadow:0 3px 10px rgba(0,0,0,0.06)}
.trow:active{transform:scale(.985)} .trow-t{display:flex; flex-direction:column; gap:1px; min-width:0} .trow-t b{font-size:15px} .trow-n{flex:none; white-space:nowrap}
.techhook p{margin:0} .techmeta{margin-top:6px !important}
.techrings .use{display:flex; align-items:center; gap:8px; font-size:14px} .techrings .use .ringimg.xs{width:28px; flex:none}
.trole{font-size:11px; color:#9C7224; background:#FBF3DF; border-radius:6px; padding:0 5px; margin-left:6px; white-space:nowrap}
/* королевство: карта почти на весь экран, без шапки */
.realmfull{display:flex; justify-content:center; margin-top:-4px}
.steps.solo{margin-top:4px} .steps.solo .step{padding-top:4px}
.link.solostop{display:block; margin:8px auto 0; font-size:13px}
.solodone h3{margin:0}
/* королевство: карта на весь экран (от верха до нижнего меню), картинка не растягивается — края обрезаются */
.realmfull{position:fixed; left:0; right:0; overflow:hidden; z-index:0; margin:0; container-type:size}
.realmfull .kmap{position:absolute; left:50%; transform:translate(-50%, -50%); max-width:none; max-height:none; border-radius:0; margin:0}
.realmfull::after{position:absolute; inset:0 0 auto; height:calc(84px + env(safe-area-inset-top, 0px)); background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0)); pointer-events:none; z-index:3}
.app:has(> .realmfull) > .topbar{position:relative; z-index:4}
.realmfull{bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
/* королевство v265: карта целиком в центре, края растворяются; вокруг — размытая копия карты вместо обрезки */
.realmfull{background:#B9AFC4}
.realmfull::before{position:absolute; inset:-40px; background:var(--kbg) center/cover no-repeat; filter:blur(22px) saturate(.35) brightness(.62) sepia(.25) hue-rotate(220deg); transform:scale(1.08); z-index:0}
.realmfull.lit::before{filter:blur(22px) saturate(.9) brightness(1.02)}
.realmfull .kmap{height:auto !important; z-index:1; -webkit-mask-composite:source-in; mask-composite:intersect}
/* королевство v266: карта 2:3 с облаками по краям — заполняет экран, края облаков можно обрезать */
.realmfull::before{content:none}
.realmfull .kmap{top:50%; aspect-ratio:auto !important; -webkit-mask-image:none; mask-image:none}
/* королевство v267: карта 9:16, замки крупнее */
.realmfull .kmap.img .kcastle span{font-size:11px}
/* v268: карта начинается под шапкой, чтобы Зеркальный сад был виден целиком; Звёздный мост крупнее */
.realmfull::after{content:none}
/* v269: карта снова от самого верха экрана, картинка целиком по высоте; замки чуть меньше */
.realmfull{top:0}
.realmfull .kmap.img .kcastle:not(.k-eighth){width:15%}
.realmfull .kmap.img .kcastle.k-heart{width:18%}
.realmfull .kmap.img .kcastle.k-eighth{width:24%}
/* v270: вся картинка целиком, без обрезки краёв: карта ровно по экрану (по высоте чуть вытянута) */
.realmfull .kmap{width:100cqw !important; height:100cqh !important}
.realmfull .kmap.img .kcastle.k-life{width:20%}
/* v272: подпись замка — название, под ним кружки камней */
.realmfull .kmap.img .kcastle > span:not(.kpic){display:inline-flex; flex-direction:column; align-items:center; gap:1px; line-height:1.15; padding:2px 8px 3px}
.realmfull .kmap.img .kcastle.k-call:not(.k-eighth){width:19%}
.realmfull .kmap.img .kcastle.k-life:not(.k-eighth){width:21%}
.realmfull .kmap.img .kcastle .stones{margin-top:2px}
.dy-phmiss{display:flex; align-items:center; justify-content:center; padding:10px; text-align:center; font-size:12px; color:var(--mute)}
/* техника по страницам (Мастерская реальности) */
.gpage{display:flex; flex-direction:column; gap:10px}
.gpage h3{margin:0; font-family:var(--f-display); font-weight:400; font-size:24px}
.gpage p{margin:0}
.gpage .btn.gold{align-self:stretch}
.gpage .gnote{margin-top:2px}
.gpage .link{align-self:flex-start}
.gpage .gsteps{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:14px}
/* уровень: под открытой техникой есть пустое место, чтобы её можно было поднять к верху экрана */
.lchat:has(> .lstep), .lchat:has(.lstep){padding-bottom:calc(100svh - 380px)}
.lstep{scroll-margin-top:12px}
.gpage .gprep{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.gpage > .btn:not(.gold){align-self:stretch}
.gpage .silhouette.braidpic{width:auto; max-width:72%; margin:0 auto}
.gpage .silhouette.braidpic img{max-height:30svh; width:auto; max-width:100%}
.gpage .center{display:flex; flex-direction:column; align-items:center; gap:6px}
.gpage .rec textarea{min-height:0}
/* косица: картинка на странице техники, без блока намерения (он есть в уровне выше) */
.gpage .gbraid .techaff{display:none}
.gpage .gbraid .small.muted{font-size:12px}
/* шкала «здесь лучше, когда меньше» (важность, сила блока) */
.dscale{display:flex; flex-direction:column; gap:4px}
.dscale input[type="range"].dsrange{width:100%; height:8px; margin:6px 0 2px; border-radius:999px; -webkit-appearance:none; appearance:none; background:linear-gradient(90deg, #7CC79C 0%, #E7C46A 50%, #E08070 100%); outline:none}
.dscale input[type="range"].dsrange::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:2px solid #B97FA0; box-shadow:0 2px 6px rgba(0,0,0,.2)}
.dscale input[type="range"].dsrange::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:2px solid #B97FA0}
.dscale input[type="range"].dsrange:disabled{opacity:.6}
.dsends{display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--mute); line-height:1.25}
.dsends span:last-child{text-align:right}
.dsnote{margin:2px 0 0}
.gpage .gbraid .center{gap:2px}
.gpage .gbraid .small.muted{display:none} 
.gpage .gbraid .silhouette.braidpic img{max-height:16svh}
/* Портальная дверь: воздушный шар с грузами */
.bl-wrap{position:relative; display:flex; flex-direction:column; align-items:center; margin:4px 0}
.bl-balloon{position:relative; transform-origin:50% 90%; animation:blsway 3.2s ease-in-out infinite}
.bl-balloon svg{display:block; width:100%; height:auto}
.bl-text{position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--f-display, Georgia, serif); line-height:1.2; color:#5A2140; text-shadow:0 1px 0 rgba(255,255,255,.6); overflow:hidden}
.bl-weights{justify-content:center}
.bl-weight{appearance:none; border:0; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; transition:transform .8s cubic-bezier(.55,0,1,.45), opacity .8s; -webkit-tap-highlight-color:transparent}
.bl-weight.gone{transform:translateY(160px) rotate(18deg); opacity:0; pointer-events:none}
.bl-wrap.fly .bl-balloon{animation:blfly 2.6s ease-in .2s forwards}
.bl-say{margin:0; text-align:center}
.bl-ok{margin:0; text-align:center; font-weight:600; color:#3F8A62}
.bl-again{margin:0; color:#A2563C}
@keyframes blsway{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)}}
@keyframes blbag{0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)}}
@keyframes blfly{0%{transform:translateY(0)} 25%{transform:translateY(12px)} 100%{transform:translateY(-130vh) rotate(4deg)}}
@media (prefers-reduced-motion: reduce){ .bl-wrap.fly .bl-balloon{opacity:0} .bl-weight.gone{display:none} }
/* 5 грузов: верёвки разной длины, мешки ближе */
/* картинки: Свет чакры, воздушный шар, мешки */
.chakrapic{position:relative; margin:0 auto}
.chakrapic img{display:block; width:100%; height:auto}
.chakrapic .chglow{position:absolute; left:50%; top:var(--cy); aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; background:radial-gradient(circle, #fff 0%, var(--cc) 30%, transparent 70%); mix-blend-mode:screen; animation:chpulse 2.6s ease-in-out infinite}
@keyframes chpulse{0%,100%{opacity:.75; transform:translate(-50%, -50%) scale(.85)} 50%{opacity:1; transform:translate(-50%, -50%) scale(1.15)}}
.bl-balloon{width:150px}
.bl-balloon img{display:block; width:100%; height:auto}
.bl-text{top:13%; height:38%; left:17%; right:17%; font-size:13px}
@media (prefers-reduced-motion: reduce){ .chakrapic .chglow{animation:none} }
.chakrapic .chglow{width:30%}
.chcap{margin:-4px 0 0 !important; text-align:center}
.inlink{appearance:none; border:0; background:none; padding:0; font:inherit; color:var(--b3, #8A4A6E); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.chakrapic{width:min(48%, 180px, 19svh)}

/* мешки кучкой под корзиной, каждый на своей верёвке */
.bl-weights{position:relative; display:block; width:170px; height:118px; margin-top:-6px; gap:0}
.bl-ropes{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.bl-ropes line{stroke:#8C5A3C; stroke-width:1.2; vector-effect:non-scaling-stroke}
.bl-weights .bl-weight{position:absolute; width:46px; height:52px; transform:translate(-50%, -12%); display:block}
.bl-weights .bl-weight img{display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.22)); animation:blbag 1.8s ease-in-out infinite}
.bl-weights .bl-weight.gone{transform:translate(-50%, 220px) rotate(20deg); opacity:0}
.bl-wrap{height:auto}

/* саблиминал в уровне: 12 фраз кольца на одном экране */
.subcmp .subphr{gap:3px} .gpage .subcmp{margin-top:-4px}
.subcmp .subp{padding:3px 10px; font-size:13.5px; line-height:1.15; gap:8px; border-radius:10px}
.subcmp .subp i{width:18px; height:18px; font-size:11px}

/* спираль: тетрадный лист в клетку, желание в центре, серая подсказка, рисунок пальцем */
.spsheet{position:relative; width:100%; border-radius:6px; overflow:hidden; background-color:#FFFDF7; background-image:linear-gradient(rgba(120,160,210,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,210,.28) 1px, transparent 1px); background-size:15px 15px; box-shadow:0 2px 10px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.05)}
.spsheet::before{content:""; position:absolute; top:0; bottom:0; right:22px; width:1px; background:rgba(220,90,90,.45)}
.spwish{position:absolute; left:14%; right:14%; top:44%; transform:translateY(-50%); text-align:center; font-family:'Caveat', 'Bad Script', cursive; font-size:21px; line-height:1.1; color:#3A3550; pointer-events:none}
.spfoot{position:absolute; left:12px; right:30px; bottom:8px; display:flex; justify-content:space-between; align-items:flex-end; gap:8px; pointer-events:none; font-family:'Caveat', 'Bad Script', cursive}
.spthank{color:#2B3A8C}
.spsig{flex:none; border-top:1px solid rgba(60,60,90,.5); text-align:center; font-size:13px; color:rgba(60,60,90,.6); font-family:'Golos Text', sans-serif; padding-top:1px}
.spcanvas, .spimg{position:absolute; inset:0; width:100%; height:100%; touch-action:none}
.sphint{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; transition:opacity .4s}
.sphint.off{opacity:0}
.sphint .spdot{fill:rgba(90,90,110,.55); animation:spdot 6s infinite}
.sphint .sppath{fill:none; stroke:rgba(90,90,110,.42); stroke-width:.7; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; animation:sppath 6s infinite}
@keyframes spdot{0%{opacity:0} 6%,92%{opacity:1} 100%{opacity:0}}
@keyframes sppath{0%,8%{stroke-dashoffset:100; opacity:1} 70%{stroke-dashoffset:0; opacity:1} 92%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}
.spthank{font-size:18px; white-space:nowrap}
.spsig{width:78px}
.spsheet{height:262px}

/* «Само собой»: лист в линейку из трёх частей */
.sssheet{display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px 30px; border-radius:6px; background-color:#FFFDF7; background-image:linear-gradient(transparent 26px, rgba(120,160,210,.30) 27px); background-size:100% 27px; box-shadow:0 2px 10px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.05); position:relative}
.sssheet::before{content:""; position:absolute; top:0; bottom:0; left:20px; width:1px; background:rgba(220,90,90,.45)}
.sshand{margin:0; font-family:'Caveat', 'Bad Script', cursive; font-size:21px; line-height:1.15; color:#2B3A8C}
.sssheet .ssin{background:rgba(255,255,255,.75); font-size:15px; min-height:0}
.sssheet .ssfull{font-size:22px; line-height:27px; color:#2B3A8C; white-space:pre-wrap}
.sssheet .ssev{color:#C8323C}

/* «А что если…?»: пробковая доска со стикерами */
.wnrow{display:flex; align-items:center; gap:8px}
.wnlead{font-family:'Caveat', 'Bad Script', cursive; font-size:25px; color:#2B3A8C; white-space:nowrap}
.wnrow .in{flex:1; min-width:0}
.wnrow .wnadd{width:auto; min-width:44px; padding:0 14px; font-size:22px}
.wnchips .chip{font-size:12.5px}
.wnboard{display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; padding:14px 12px; min-height:120px; border-radius:8px; border:6px solid #8B5E34; background-color:#C9A06B;
  background-image:radial-gradient(rgba(90,55,20,.28) 1px, transparent 1.6px), radial-gradient(rgba(255,240,210,.28) 1px, transparent 1.6px); background-size:7px 7px, 11px 11px; background-position:0 0, 3px 5px; box-shadow:inset 0 0 14px rgba(0,0,0,.28)}
.wnst{position:relative; padding:16px 12px 10px; min-height:64px; font-family:'Caveat', 'Bad Script', cursive; font-size:18px; line-height:1.12; color:#3A3040; box-shadow:0 3px 7px rgba(0,0,0,.28); transform:rotate(var(--r)); overflow-wrap:anywhere}
.wnst::before{content:""; position:absolute; top:4px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FF9A9A, #B3262E); box-shadow:0 1px 2px rgba(0,0,0,.35)}
.wnx{position:absolute; top:0; right:2px; padding:2px 6px; border:0; background:none; font-size:17px; line-height:1; color:rgba(0,0,0,.45); cursor:pointer}
.wnempty{grid-column:1/-1; align-self:center; margin:0; text-align:center; font-size:14px; color:rgba(255,248,235,.92)}

/* «Новость для подруги»: переписка прокручивается внутри окна, последнее сообщение внизу видно сразу */
.chatbox.chatscroll{flex-direction:column-reverse; max-height:250px; overflow-y:auto}
.chatscroll .chatin{display:flex; flex-direction:column; gap:6px}
/* «Спасибо заранее», стр. 3: компактный список из 10, строка = выбор самой тёплой */
.gtlist{display:flex; flex-direction:column; gap:4px}
.gtrow{display:flex; align-items:flex-start; gap:8px; width:100%; padding:6px 10px; border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,0.55); font:inherit; font-size:13.5px; line-height:1.3; text-align:left; color:var(--ink); cursor:pointer}
.gtrow .gtstar{color:var(--mute); opacity:.5; flex:none}
.gtrow.on{background:rgba(255,236,190,0.85); border-color:#E7B95C} .gtrow.on .gtstar{color:#B9842E; opacity:1}

/* «Новость для подруги»: окно мессенджера */
.chatwin{display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:#FBF6F8; box-shadow:0 2px 12px rgba(80,40,70,.12)}
.chathead{display:flex; align-items:center; gap:10px; padding:10px 12px; background:#FFFFFF; border-bottom:1px solid rgba(0,0,0,.06)}
.chatava{width:40px; height:40px; flex:none; border-radius:50%; object-fit:cover; background:#E9DDE4}
.chatwho{display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.2} .chatwho b{font-size:15px; color:#2E2433} .chatwho span{font-size:12px; color:#3BA55C}
.chatcall{width:38px; height:38px; border:0; border-radius:50%; background:#F3E6EE; color:#9B4D78; display:grid; place-items:center; cursor:pointer}
.chatwall.chatbox{border-radius:0; max-height:330px; min-height:230px; padding:12px 10px; background-color:#F6EDF2; background-image:radial-gradient(rgba(180,120,160,.14) 1.2px, transparent 1.6px); background-size:16px 16px}
.chatwall .msg{position:relative; padding:7px 10px 16px; line-height:1.3; box-shadow:0 1px 1px rgba(0,0,0,.08); min-width:72px}
.chatwall .msg.me{background:#F9D3E3}
.chatwall .msg .mt{position:absolute; right:8px; bottom:3px; font-size:10px; color:rgba(46,36,51,.45)}
.chatwall .msg.fresh{animation:chatIn .35s ease-out .6s both}
@keyframes chatIn{from{opacity:0; transform:translateY(6px) scale(.97)} to{opacity:1; transform:none}}
.chatbar{display:flex; align-items:flex-end; gap:6px; padding:8px; background:#FFFFFF; border-top:1px solid rgba(0,0,0,.06)}
.chatfield{flex:1; min-width:0; resize:none; border:1px solid rgba(0,0,0,.1); border-radius:20px; padding:9px 14px; font:inherit; font-size:15px; line-height:1.3; max-height:110px; background:#FBF8FA; color:#2E2433}
.chatmic, .chatsend{width:40px; height:40px; flex:none; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:16px}
.chatmic{background:#F3E6EE; color:#9B4D78} .chatsend{background:linear-gradient(135deg, #D46A9A, #A84C7E); color:#FFF}
.chatrec{flex:1; display:flex; align-items:center; gap:8px; padding:9px 4px; font-size:14px; color:#B4505A}
.chatend{margin:0; padding:12px; text-align:center; font-size:14px; color:#6B5C70; background:#FFFFFF}
.chatwin .callscreen{border-radius:0} .chatwin .callscreen .chatava{width:64px; height:64px}

/* «Спасибо заранее»: пробка отдельным слоем; «Отпустить светлячков» — пробка улетает, светлячки вылетают через горлышко */
.jarpic .jarlid{position:absolute; left:25%; top:2.2%; width:52.5%; height:auto; z-index:2; transform-origin:30% 100%}
.jarpic.free .jarlid{animation:jarLid 1.1s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes jarLid{0%{transform:none} 25%{transform:translateY(-4px) rotate(-4deg)} 100%{transform:translate(70px,-60px) rotate(38deg); opacity:0}}
.jarpic.free .ff.ffon{animation:ffAway 1.9s ease-in var(--fo) forwards}
@keyframes ffAway{0%{left:var(--x); top:var(--y); opacity:1} 50%{left:50%; top:4%; opacity:1} 85%{opacity:.25} 100%{left:calc(50% + var(--dx)); top:-24%; opacity:0; transform:rotate(var(--rot)) scale(.6)}}
.gfreetxt, .gfreenext{animation:gFreeIn .5s ease-out 3.2s both}
@keyframes gFreeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .jarpic.free .jarlid, .jarpic.free .ff.ffon{animation-duration:.01s; animation-delay:0s} .gfreetxt, .gfreenext{animation:none} }

/* Свиток по страницам: одна глава на странице */
.scroll.wlpage .scroll-body{padding:14px 14px 10px}
.wlgot{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 2px} .wlgot .hand{font-size:22px; line-height:1.2}
.scroll .wlline{margin:2px 0 6px; font-size:20px; line-height:1.2}

/* Колесо веры, стр. 3: маленькое колесо и список фраз */
.wlist{max-height:48vh; overflow-y:auto} .wlist .gtrow{cursor:default} .wlist .gtstar{min-width:16px; text-align:right; font-size:12px}
.gpage .bf-scene{max-width:250px} .gpage .bf-scene.out{max-width:170px}
/* ---------- ритуальный стол ---------- */
.rtable{position:relative; width:100%; max-width:360px; aspect-ratio:360/280; margin:4px auto 0; border-radius:18px; overflow:hidden; box-shadow:0 6px 18px rgba(30,15,45,.35); user-select:none; -webkit-user-select:none}
.rtable .rtbg{position:absolute; inset:0; width:100%; height:100%}
.rtable .rtfl{transform-box:fill-box; transform-origin:50% 100%; animation:rtFlick 1.6s ease-in-out infinite}
.rtable .rtcandle:last-of-type .rtfl{animation-delay:.5s}
@keyframes rtFlick{0%,100%{transform:scale(1, 1)} 30%{transform:scale(.92, 1.08)} 60%{transform:scale(1.06, .95)}}
.rtable .rtglow{transition:opacity .6s} .rtable:not(.has) .rtglow{opacity:.4}
.rt-at{position:absolute; transform:translate(-50%, -50%); border:0; background:none; padding:0; transition:left .6s cubic-bezier(.3,.7,.3,1), top .6s cubic-bezier(.3,.7,.3,1), width .6s, height .6s; touch-action:none}
.rt-bar{height:6px; border-radius:6px; background:rgba(120,90,150,.18); overflow:hidden} .rt-bar i{display:block; height:100%; background:linear-gradient(90deg, #D9B262, #FFE29A); transition:width .1s linear}
/* талисман */
.rt-tal{width:58px; height:58px; cursor:pointer; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.rt-tal img{width:100%; height:100%; object-fit:contain; pointer-events:none}
.rt-tal.on{width:96px; height:96px; cursor:grab}
.rt-tal.on img{filter:brightness(calc(.7 + .5 * var(--pf, 0))) drop-shadow(0 0 calc(18px * var(--pf, 0)) rgba(255,214,120,.95))}
.rt-tal .tal-fx{position:absolute; left:50%; top:50%; width:150%; height:150%; transform:translate(-50%, -50%) scale(calc(.4 + .8 * var(--pf, 0))); border-radius:50%; background:radial-gradient(circle, rgba(255,224,140,.55), rgba(255,224,140,0) 65%); opacity:var(--pf, 0); pointer-events:none}
.rt-tal.tal-candle.on .tal-fx{left:44%; top:10%; width:46%; height:46%; border-radius:50% 50% 45% 45%; background:radial-gradient(ellipse at 50% 70%, #FFF6C8 0, #FFC24D 45%, rgba(255,150,40,0) 72%); transform:translate(-50%, -50%) scale(calc(.2 + 1.1 * var(--pf, 0))); animation:rtFlick 1.2s ease-in-out infinite}
.tal-sp{position:absolute; color:#FFF6D0; font-style:normal; font-size:14px; opacity:calc(var(--pf, 0) * 1); text-shadow:0 0 6px #FFE38A; pointer-events:none; animation:talTw 1.4s ease-in-out infinite}
.tal-sp.s1{left:12%; top:18%} .tal-sp.s2{right:10%; top:40%; animation-delay:.4s; font-size:11px} .tal-sp.s3{left:40%; bottom:8%; animation-delay:.8s; font-size:10px}
@keyframes talTw{0%,100%{transform:scale(.6); filter:brightness(.8)} 50%{transform:scale(1.3); filter:brightness(1.4)}}
/* личный знак */
@keyframes sgReady{0%,100%{filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))} 50%{filter:drop-shadow(0 0 14px rgba(255,200,110,.9))}}
@keyframes sgFly{0%{transform:translate(-50%, -50%)} 40%{transform:translate(-50%, -80%) rotate(-8deg) scale(.95)} 100%{transform:translate(-50%, 70%) rotate(24deg) scale(.25); opacity:0; filter:brightness(.3) sepia(1)}}
@keyframes sgFlare{0%{transform:scale(1)} 40%{transform:scale(1.5); filter:drop-shadow(0 0 22px rgba(255,170,60,1)) brightness(1.3)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){ .rtable .rtfl, .tal-sp, .rt-tal.tal-candle.on .tal-fx{animation:none} }
.artimg.sm{width:130px}

/* став на столе: камень в центре скатерти */
/* знаки чисел: латунные таблички */
@keyframes nmGlow{0%,100%{filter:brightness(1)} 50%{filter:brightness(1.15)}}

/* денежный код: монеты на столе */
@keyframes mcPulse{0%,100%{transform:translate(-50%, -50%) scale(1); box-shadow:0 0 0 0 rgba(255,220,120,.8), 0 4px 8px rgba(0,0,0,.5)} 50%{transform:translate(-50%, -50%) scale(1.1); box-shadow:0 0 0 10px rgba(255,220,120,0), 0 4px 8px rgba(0,0,0,.5)}}
.mc-hand{position:absolute; left:50%; top:105%; transform:translateX(-50%); font-style:normal; font-size:24px; animation:mcHand 1.1s ease-in-out infinite; text-shadow:0 2px 4px rgba(0,0,0,.5)}
@keyframes mcHand{0%,100%{transform:translate(-50%, 0)} 50%{transform:translate(-50%, -8px)}}
.mc-say{position:absolute; left:50%; bottom:110%; transform:translateX(-50%); white-space:nowrap; font-style:normal; font-size:15px; color:#FFF3C9; background:rgba(40,20,55,.85); padding:3px 8px; border-radius:10px; animation:mcSay 1.2s ease-out both}
@keyframes mcSay{0%{opacity:0; transform:translate(-50%, 6px)} 20%{opacity:1; transform:translate(-50%, 0)} 100%{opacity:1}}
.mc-rounds{display:flex; justify-content:center; gap:8px} .mc-rounds span{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; background:rgba(120,90,150,.15); color:var(--mute)}
.mc-rounds span.now{background:#E9C46A; color:#3B2610} .mc-rounds span.on{background:#B88935; color:#FFF6DA}
.mc-code{display:flex; justify-content:center; gap:10px} .mc-code span{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font:700 30px/1 'Forum', Georgia, serif; color:#5A3D10; background:radial-gradient(circle at 35% 30%, #FBE6A8, #C99A3E 60%, #8C6420); box-shadow:0 0 16px rgba(255,214,110,.8)}
/* предназначение: камни с числами */
.pp-jobs{display:flex; flex-wrap:wrap; gap:6px} .pp-job{padding:6px 10px; border-radius:14px; background:rgba(255,236,190,.7); font-size:14px}
/* карта дня на столе */
.tr-card{width:30%} .tr-card .tcard{width:100%}
/* три двери */
.dr-row{display:flex; gap:10px; justify-content:center}
.dr{position:relative; flex:1; max-width:104px; border:0; background:none; padding:0; cursor:pointer; filter:drop-shadow(0 6px 8px rgba(30,15,45,.35)); transition:opacity .4s, transform .3s}
.dr svg{width:100%; display:block} .dr:not([disabled]):hover{transform:translateY(-3px)}
.dr.off{opacity:.35}
.dr-card{position:absolute; left:50%; top:58%; width:74%; transform:translate(-50%, -50%)} .dr-card .tcard{width:100%; padding:3px} .dr-card .tcard .small{display:none} .dr-card .tcard b{font-size:11px}
/* знак стихии */
.el-sign{width:26%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; color:#FFF3C9; background:radial-gradient(circle, rgba(255,214,120,.45), rgba(255,214,120,0) 70%); animation:elGlow 2.4s ease-in-out infinite}
.el-sign .lic{width:70%; height:70%; filter:drop-shadow(0 0 8px rgba(255,214,120,.9))}
@media (prefers-reduced-motion: reduce){ .mc-hand, .el-sign{animation:none} }

/* Колесо веры: витражная роза */
.rosew{position:relative; width:min(205px, 55vw); aspect-ratio:1; max-width:100%; margin:4px auto; border-radius:50%; box-shadow:0 6px 22px rgba(40,30,70,.35)}
.rosew svg{display:block; width:100%; height:100%}
.rosew .rpet.new{animation:rosePet 1.4s ease-out}
@keyframes rosePet{0%{opacity:0; filter:brightness(2.2)} 60%{opacity:1; filter:brightness(1.4)} 100%{filter:none}}
.rosew.full{animation:roseTurn 60s linear infinite; box-shadow:0 0 34px rgba(255,226,160,.75), 0 6px 22px rgba(40,30,70,.35)}
@keyframes roseTurn{to{transform:rotate(360deg)}}
.rosew .rcore{animation:roseCore 2.4s ease-in-out infinite}
@keyframes roseCore{0%,100%{filter:brightness(1.1)} 50%{filter:brightness(1.6)}}
.rosew .rrays{position:absolute; inset:-8%; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(255,246,220,.85) 0, rgba(255,230,170,.35) 9%, transparent 26%); animation:roseRays 2.4s ease-in-out infinite}
@keyframes roseRays{0%,100%{opacity:.6} 50%{opacity:1}}

/* простукивание: точки с двух сторон и выноска с подписью поверх фигуры (координаты рамки) */
.tappg .eftpic{width:min(190px, 54vw)}
.eftov .eftd.now{width:12px; height:12px; margin:-6px 0 0 -6px}
.eftov{position:absolute; inset:0; pointer-events:none; z-index:2}
.eftov svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.eftov line{stroke:#C98A12; stroke-width:1.3; stroke-dasharray:3 2; vector-effect:non-scaling-stroke; opacity:.85}
.eftd{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid #FFFFFF; background:radial-gradient(circle at 35% 35%, #FFF1B8, #F2B83A 60%, #C98A12); box-shadow:0 0 0 2px rgba(201,138,18,.5), 0 0 10px 3px rgba(255,190,60,.6); transition:opacity .3s}
.eftd.now::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(242,184,58,.9); animation:eftring 1.2s ease-out infinite}
.eftd.small{width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-width:1px; box-shadow:none; opacity:.85}
.eftov.alt[data-half="1"] .eftd.h1, .eftov.alt[data-half="2"] .eftd.h2{opacity:.28; box-shadow:none}
.eftov.alt[data-half="1"] .eftd.h1::after, .eftov.alt[data-half="2"] .eftd.h2::after{animation:none; opacity:0}
.eftov.soon .eftd{opacity:.55} .eftov.soon .eftd::after{animation:none; opacity:0}
.eftcall{position:absolute; left:50%; transform:translate(-50%, -50%); white-space:nowrap; font-size:12px; line-height:1.1; font-weight:600; color:#6B4A0E; background:rgba(255,250,232,.96); border:1px solid rgba(226,180,90,.9); border-radius:999px; padding:4px 10px; box-shadow:0 2px 6px rgba(120,80,20,.15)}
.eftcall em{font-style:normal; font-weight:500; color:#9A7432}
/* пауза: круг дыхания — вдох 2 с, выдох 2 с */
.tapbreath{position:relative; align-self:center; width:78px; height:78px; display:grid; place-items:center; margin:2px 0}
.tapbreath i{position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(127,180,149,.6), rgba(127,180,149,.12)); animation:tbBreath 6s ease-in-out forwards}
.tapbreath span{position:absolute; font-size:14px; font-weight:600; color:#3E6B50; background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important}
.tapbreath .in{animation:tbIn 6s forwards} .tapbreath .out{opacity:0; animation:tbOut 6s forwards}
.tapbreath.paused i, .tapbreath.paused span{animation-play-state:paused}
@keyframes tbBreath{0%{transform:scale(.45)} 50%{transform:scale(1)} 100%{transform:scale(.45)}}
@keyframes tbIn{0%,46%{opacity:1} 54%,100%{opacity:0}}
@keyframes tbOut{0%,46%{opacity:0} 54%,100%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .tapbreath i{animation:none; transform:scale(.8)} .eftd.now::after{animation:none} }

.eftcall b{font-weight:600} .eftov.alt .eftcall .hr{display:none} .eftov.alt[data-half="2"] .eftcall .hl{display:none} .eftov.alt[data-half="2"] .eftcall .hr{display:inline}

/* «Звонок Вовану» по экранам: звонок компактнее, текст под ним виден с набора номера */
.vvpg{gap:12px}
.vvcallpg .vv-call{padding:16px 14px 14px; gap:4px}
.vvcallpg .vv-ava{width:64px; height:64px} .vvcallpg .vv-ava span{font-size:30px}
.vvcallpg .vv-name{font-size:20px; margin-top:4px} .vvcallpg .vv-num{font-size:22px; min-height:26px}
.vvcallpg .vv-say{margin-top:6px; font-size:14px}
.vvcallpg .vv-text{font-size:16px; padding:12px 14px; transition:box-shadow .3s, transform .3s}
.vvcallpg .vv-text.now{font-size:17px; box-shadow:0 0 0 2px #4CC37A, 0 6px 18px rgba(35,146,79,.25)}
/* пепел: картинка, тлеющие угольки и дымок */
.ashpile2{position:relative; width:min(170px, 46vw); margin:28px auto 4px}
.ashpile2 img{display:block; width:100%; filter:drop-shadow(0 6px 8px rgba(40,20,20,.25))}
.ashpile2 b{position:absolute; width:16px; height:10px; margin:-5px 0 0 -8px; border-radius:50%; background:radial-gradient(circle, #FFB347, rgba(255,90,20,.6) 55%, rgba(255,60,0,0) 75%); mix-blend-mode:screen; animation:emberGlow2 1.8s ease-in-out infinite alternate; animation-delay:var(--d, 0s)}
@keyframes emberGlow2{from{opacity:.35; transform:scale(.8)} to{opacity:1; transform:scale(1.25)}}
.ashpile2 i{position:absolute; bottom:62%; left:calc(50% + var(--x)); width:16px; height:34px; border-radius:50%; background:rgba(185,180,185,.55); filter:blur(5px); animation:smoke2 3.4s ease-out infinite; animation-delay:var(--d)}
@keyframes smoke2{0%{transform:translateY(0) scale(.6); opacity:0} 25%{opacity:.75} 100%{transform:translateY(-70px) translateX(10px) scale(1.9); opacity:0}}
@media (prefers-reduced-motion: reduce){ .ashpile2 b, .ashpile2 i{animation:none} }

/* мандала крупнее (сколько позволяет экран), палитра меньше и с воздухом сверху */
.gintro .mandalawrap{display:flex; flex-direction:column; align-items:center; gap:8px}
.gintro .mpal{gap:7px; margin:10px auto 6px}
.gintro .mcolor{width:28px; height:28px; font-size:12px}
.gintro .mandalawrap svg{width:min(100%, 380px, calc(100svh - 360px)); min-width:220px}

/* искра: красивая рамка — золотой ободок, полоска зарядки от светлого золота к оранжевому, внешнее кольцо с ромбиками; язычки пламени растут от основания */
.charge.fire{padding:9px; margin:22px 0 18px; background:conic-gradient(#FFE29A 0, #FFB547 calc(var(--pr) * .6), #FF8A1F var(--pr), rgba(255,255,255,.45) 0);
  box-shadow:0 0 0 2px #F3D58E, 0 0 0 4px rgba(255,255,255,.85), 0 0 0 5.5px #D9A441, 0 10px 26px rgba(170,110,40,.28)}
.charge.fire.lit{box-shadow:0 0 0 2px #F3D58E, 0 0 0 4px rgba(255,255,255,.85), 0 0 0 5.5px #D9A441, 0 0 46px rgba(255,170,60,.85)}
.spframe{position:absolute; left:50%; top:50%; width:calc(100% + 46px); height:calc(100% + 46px); transform:translate(-50%, -50%); pointer-events:none; overflow:visible; transition:filter .6s}
.charge.fire.lit .spframe{animation:spSpin 24s linear infinite; filter:drop-shadow(0 0 4px rgba(255,190,80,.9))}
@keyframes spSpin{to{transform:translate(-50%, -50%) rotate(360deg)}}
.flamesvg .flame, .flamesvg .main, .flamesvg .side{transform-box:view-box; transform-origin:60px 96px}
@media (prefers-reduced-motion: reduce){ .charge.fire.lit .spframe{animation:none} }

/* ритуальный стол на картинке: страница техники — комната (размыта и осветлена), посередине чёткий стол, края растворяются в комнате */
/* страница с ритуальным столом — тёмная комната: вся карточка техники тёмная, текст светлый */
.step:has(.rtable.rtimg){background:linear-gradient(180deg, rgba(22,12,26,.80), rgba(22,12,26,.50) 45%, rgba(22,12,26,.85)), url(assets/tech/ritual-room.webp) 50% 30% / cover no-repeat !important; border-color:rgba(226,182,92,.45) !important; color:#F3E7F0}
.step:has(.rtable.rtimg) .gpage{background:none}
.step:has(.rtable.rtimg) :is(p, li, span, b, label, .small, .hook){color:#F3E7F0}
.step:has(.rtable.rtimg) .muted{color:rgba(243,231,240,.72) !important}
.step:has(.rtable.rtimg) .eyebrow{color:#E7C27A}
.step:has(.rtable.rtimg) :is(.phrase, .laff){color:#FFF4D6; background:rgba(255,255,255,.06); border-color:#E2B65C}
.step:has(.rtable.rtimg) :is(.inlink, .link){color:#F3D58E}
.step:has(.rtable.rtimg) .rt-bar{background:rgba(255,255,255,.15)}
.rtable.rtimg{border-radius:0; box-shadow:none; overflow:visible; background:none; aspect-ratio:720/431;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 90%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 90%, transparent 100%)}
/* стол на картинке ниже рисованного: центр круга скатерти на 57%, а позиции предметов рассчитаны на 67% — поднимаем на 10% высоты */
.rtable.rtimg > .rt-at{margin-top:-6%}
.rtable.rtimg .rtbg{object-fit:cover}
.rtable.rtimg .rtglow2{position:absolute; left:50%; top:57%; width:62%; height:36%; transform:translate(-50%, -50%); border-radius:50%; pointer-events:none; background:radial-gradient(ellipse, rgba(255,214,140,.45), rgba(255,214,140,0) 70%); opacity:.35; transition:opacity .6s}
.rtable.rtimg.has .rtglow2{opacity:.9}

/* высокий ритуальный стол (талисман): почти на весь экран, без сдвига предметов */
.rtable.rtimg.tall{aspect-ratio:720/694; width:calc(100% + 32px); max-width:none; margin-inline:-16px; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 92%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 92%, transparent 100%)}
.rtable.rtimg.tall > .rt-at{margin-top:0}
.rtable.rtimg.tall .rtglow2{top:45%; width:88%; height:46%}
/* новые талисманы: стоят на столе с тенью, лёгкое дыхание света; выбранный — крупно в центре, остальные приглушены */
.tall .rt-tal{filter:drop-shadow(0 6px 5px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,214,140,.25)); animation:talIdle 3.2s ease-in-out infinite; animation-delay:calc(var(--n, 0) * -.8s)}
@keyframes talIdle{0%,100%{filter:drop-shadow(0 6px 5px rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(255,214,140,.15))} 50%{filter:drop-shadow(0 6px 5px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,214,140,.55))}}
.tall .rt-tal.dim{opacity:.5; animation:none; filter:drop-shadow(0 5px 4px rgba(0,0,0,.5)) saturate(.7)}
.tall .rt-tal.on{animation:none}
.tall .rt-tal.on::before{content:""; position:absolute; left:50%; bottom:2%; width:80%; height:16%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); z-index:-1}
.tall .rt-tal.on img{filter:brightness(calc(.85 + .45 * var(--pf, 0))) drop-shadow(0 0 calc(4px + 22px * var(--pf, 0)) rgba(255,214,120,calc(.3 + .65 * var(--pf, 0))))}
.tall .rt-tal.tal-candle.on .tal-fx{left:59.7%; top:-9%; width:17%; height:30%; border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; background:radial-gradient(ellipse at 50% 72%, #FFFFFF 0, #FFF2B0 18%, #FFC24D 45%, #FF8A1F 68%, rgba(255,120,30,0) 80%); box-shadow:0 0 calc(34px * var(--pf, 0)) calc(12px * var(--pf, 0)) rgba(255,176,60,.75); transform-origin:50% 90%; transform:translate(-50%, -50%) scale(calc(.12 + 1 * var(--pf, 0)))}
.tall .rt-tal.tal-candle.on .tal-fx{z-index:2; animation:candleFlk .9s ease-in-out infinite alternate}
@keyframes candleFlk{from{transform:translate(-50%, -50%) scale(calc(.12 + 1 * var(--pf, 0))) skewX(-3deg)} to{transform:translate(-50%, -52%) scale(calc(.12 + 1.08 * var(--pf, 0)), calc(.12 + 1.15 * var(--pf, 0))) skewX(3deg)}}

/* картинки стола и предметов — не ссылки: палец по ним не открывает картинку в новой вкладке */
.rtable img, .rt-tal img{pointer-events:none; -webkit-touch-callout:none; -webkit-user-drag:none; user-select:none}

/* высокий стол сверху (талисман): фон страницы — та же комната, размытая и тёмная */
.step:has(.rtable.rtimg.tall){background:linear-gradient(180deg, rgba(18,10,22,.78), rgba(18,10,22,.45) 45%, rgba(18,10,22,.85)), url(assets/tech/ritual-room-top.webp) 50% 45% / cover no-repeat !important}
.phrase.sm{font-size:16px; line-height:1.35}
.vvpg .vv-lead{font-size:15px; line-height:1.45} .vvpg .vv-chips .chip{font-size:13px; padding:6px 11px} .vvpg .vv-sec{gap:8px; padding-block:12px}

/* талисманы на столе выровнены по низу: координата — точка, где предмет стоит */
.tall .rt-tal:not(.on){transform-origin:50% 100%}
.tall .rt-tal.tal-candle{--ts:1.35} .tall .rt-tal.tal-stone{--ts:1.08} .tall .rt-tal.tal-ring, .tall .rt-tal.tal-pendant{--ts:.9}

/* талисманы крупнее; сдвиг по оси картинки (у свечи ось на 60% ширины) */
.tall .rt-tal.tal-candle{--dx:-10%} .tall .rt-tal.tal-ring{--dx:2.5%} .tall .rt-tal.tal-pendant{--dx:3.2%}
.tall .rt-tal:not(.on){transform:translate(calc(-50% + var(--dx, 0%)), -96%) scale(var(--ts, 1))}
.tall .rt-tal.on{transform:translate(calc(-50% + var(--dx, 0%)), -50%)}
/* заряжен: парит, от него расходятся золотые волны, вокруг кружат искры */
.tall .rt-tal.on.charged, .talstage .talimgw{animation:talFloat 2.6s ease-in-out infinite}
@keyframes talFloat{0%,100%{translate:0 0} 50%{translate:0 -14px}}
.tal-wave{position:absolute; left:50%; top:55%; width:100%; height:44%; border-radius:50%; border:2px solid rgba(255,214,120,.85); transform:translate(-50%, -50%) scale(.3); opacity:0; animation:talWave 2.2s ease-out infinite; pointer-events:none; z-index:-1}
.tal-wave.w2{animation-delay:1.1s}
@keyframes talWave{0%{transform:translate(-50%, -50%) scale(.3); opacity:.95} 100%{transform:translate(-50%, -50%) scale(2.1); opacity:0}}
.tal-orb{position:absolute; inset:-18%; animation:talSpin 6s linear infinite; pointer-events:none}
.tal-orb b{position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:#FFE9A8; box-shadow:0 0 10px 3px rgba(255,200,90,.9); transform:rotate(calc(var(--i) * 72deg)) translateY(-62px)}
.tal-orb b:nth-child(1){--i:0} .tal-orb b:nth-child(2){--i:1; width:5px; height:5px} .tal-orb b:nth-child(3){--i:2} .tal-orb b:nth-child(4){--i:3; width:4px; height:4px} .tal-orb b:nth-child(5){--i:4}
@keyframes talSpin{to{transform:rotate(360deg)}}
/* итог: сам талисман на тёмной сцене */
.step:has(.talres){background:linear-gradient(180deg, rgba(18,10,22,.82), rgba(18,10,22,.55) 45%, rgba(18,10,22,.88)), url(assets/tech/ritual-room-top.webp) 50% 45% / cover no-repeat !important; border-color:rgba(226,182,92,.45) !important}
.step:has(.talres) :is(p, span, b){color:#F3E7F0} .step:has(.talres) .eyebrow{color:#E7C27A}
.talres{align-items:center; text-align:center}
.talstage{position:relative; width:min(230px, 62vw); aspect-ratio:1; margin:18px auto 10px; display:grid; place-items:center}
.talstage::before{content:""; position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle, rgba(255,214,140,.55), rgba(255,180,90,.12) 55%, transparent 72%); animation:talGlow 2.6s ease-in-out infinite}
@keyframes talGlow{0%,100%{opacity:.75; transform:scale(.95)} 50%{opacity:1; transform:scale(1.05)}}
.talstage .talimgw{position:relative; width:78%; aspect-ratio:1} .talstage .talimgw img{width:100%; filter:drop-shadow(0 0 18px rgba(255,210,120,.8)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
.talstage .tal-wave{top:78%; height:26%}
.talstage .tal-orb{inset:-4%} .talstage .tal-orb b{transform:rotate(calc(var(--i) * 72deg)) translateY(-118px)}
.talname{font-family:var(--f-display, Georgia), serif; font-size:19px; color:#FFE9B8 !important; margin:0}
@media (prefers-reduced-motion: reduce){ .tall .rt-tal.on.charged, .talstage img, .tal-wave, .tal-orb, .talstage::before{animation:none} }

/* свеча на финальной сцене горит */
.talflame{position:absolute; left:59.7%; top:-11%; width:16%; height:28%; transform:translate(-50%, 0); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; background:radial-gradient(ellipse at 50% 72%, #FFFFFF 0, #FFF2B0 18%, #FFC24D 45%, #FF8A1F 68%, rgba(255,120,30,0) 80%); box-shadow:0 0 30px 10px rgba(255,176,60,.65); transform-origin:50% 90%; animation:talFlameF .9s ease-in-out infinite alternate}
@keyframes talFlameF{from{transform:translate(-50%, 0) scale(1, 1) skewX(-3deg)} to{transform:translate(-50%, -3%) scale(1.06, 1.12) skewX(3deg)}}

/* Личный знак на высоком столе: дощечка в центре, бронзовая чаша с огнём у дальнего края */
.sg-board2{border:0; background:none; padding:0; filter:drop-shadow(0 10px 8px rgba(0,0,0,.55)); z-index:3}
.sgb{position:relative; width:100%; height:100%}
.sgb img{width:100%; height:100%; display:block}
.sgb .sg-ink{position:absolute; mix-blend-mode:multiply}
.sgb .ink{fill:none; stroke:#2A1206; stroke-width:9; stroke-linecap:round; stroke-linejoin:round}
.sgb .sg-mark circle{fill:#2A1206}
.sg-board2.ready{cursor:pointer; animation:sgReady2 1.6s ease-in-out infinite}
@keyframes sgReady2{0%,100%{filter:drop-shadow(0 10px 8px rgba(0,0,0,.55))} 50%{filter:drop-shadow(0 10px 8px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,170,70,.75))}}
.sg-brazier{aspect-ratio:416/560; pointer-events:none; z-index:2}
.sg-brazier img{position:absolute; left:0; width:100%}
.sg-brazier .bz{top:0; height:100%; filter:drop-shadow(0 8px 6px rgba(0,0,0,.6))}
.sg-brazier .fl{top:0; height:47%; transform-origin:50% 100%; mix-blend-mode:screen; opacity:.85; animation:sgFlick .35s ease-in-out infinite alternate}
@keyframes sgFlick{from{transform:scaleY(.94) skewX(-2deg)} to{transform:scaleY(1.1) skewX(2deg)}}
.sg-brazier .sg-glow{position:absolute; left:50%; top:30%; width:180%; height:120%; transform:translate(-50%, -50%); border-radius:50%; background:radial-gradient(circle, rgba(255,170,60,.38), rgba(255,140,40,0) 62%); animation:sgGlowP 1.2s ease-in-out infinite alternate; z-index:-1}
@keyframes sgGlowP{from{opacity:.7} to{opacity:1}}
.sg-spk{position:absolute; left:50%; top:16%; width:4px; height:4px; border-radius:50%; background:#FFD27A; box-shadow:0 0 6px 2px rgba(255,160,50,.9); animation:sgSpark 1.8s ease-out infinite}
.sg-spk.s2{left:40%; animation-delay:.6s} .sg-spk.s3{left:60%; animation-delay:1.2s}
@keyframes sgSpark{0%{transform:translate(0,0); opacity:1} 100%{transform:translate(10px, -60px); opacity:0}}
.sg-brazier.flare .fl{animation:sgFlare2 1s ease-out .8s both, sgFlick .3s ease-in-out infinite alternate}
@keyframes sgFlare2{0%{transform:scale(1)} 40%{transform:scale(1.8, 2.3); filter:brightness(1.5)} 100%{transform:scale(1)}}
.sg-brazier.flare .sg-glow{animation:sgGlowF 1.2s ease-out .8s both}
@keyframes sgGlowF{0%{opacity:.8} 40%{opacity:1; transform:translate(-50%, -50%) scale(1.8)} 100%{opacity:.8; transform:translate(-50%, -50%) scale(1)}}
/* итог: знак светится золотом на тёмной сцене */
.sgstage .sg-gold{position:relative; width:80%; height:80%; filter:drop-shadow(0 0 8px rgba(255,210,120,.9)) drop-shadow(0 0 22px rgba(255,170,70,.6)); animation:talFloat 2.6s ease-in-out infinite}
.sg-gold path{fill:none; stroke:#FFE3A0; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; animation:sgDraw 2.2s ease-out both}
.sg-gold circle{fill:#FFE3A0}
@keyframes sgDraw{from{stroke-dashoffset:100} to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){ .sg-brazier .fl, .sg-spk, .sg-board2.ready, .sg-gold path, .sgstage .sg-gold{animation:none} }
.sgres .talstage{width:min(170px, 46vw); margin:6px auto 2px} .sgres .talstage .tal-orb b{transform:rotate(calc(var(--i) * 72deg)) translateY(-88px)} .sgres{gap:8px}

/* огонь дальше, у самого края стола; дощечка меньше; знак выжигается тёмным, с едва тлеющей каймой */
.sgb.live .sg-ink{mix-blend-mode:multiply; filter:drop-shadow(0 0 2px rgba(255,110,30,.55))}
.sgb.live .ink{stroke:#4A2008} .sgb.live .sg-mark circle{fill:#4A2008}
@keyframes sgFly2{0%{transform:translate(-50%, -50%) rotate(0) scale(1); opacity:1} 45%{transform:translate(-50%, calc(-50% - 168px)) rotate(-8deg) scale(.45); opacity:1} 100%{transform:translate(-50%, calc(-50% - 142px)) rotate(14deg) scale(.1); opacity:0}}

/* вертикальная дощечка стоит на скатерти (точка — низ), чаша крупнее и дном на столе у дальнего края */
.sg-board2{aspect-ratio:380/600; transform:translate(-50%, -100%)}
.sgb .sg-ink{left:12%; top:7%; width:76%; height:86%; transform:none}
.sg-brazier{transform:translate(-50%, -100%)}
@keyframes sgFly3{0%{transform:translate(-50%, -100%) rotate(0) scale(1); opacity:1} 45%{transform:translate(-50%, calc(-100% - 150px)) rotate(-10deg) scale(.5); opacity:1} 100%{transform:translate(-50%, calc(-100% - 110px)) rotate(18deg) scale(.1); opacity:0}}

.sg-brazier{width:26%}
.sg-board2.fly{animation:sgFly4 1.5s cubic-bezier(.45,.05,.55,1) forwards}
@keyframes sgFly4{0%{transform:translate(-50%, -100%) rotate(0) scale(1); opacity:1} 45%{transform:translate(-50%, calc(-100% - 190px)) rotate(-10deg) scale(.5); opacity:1} 100%{transform:translate(-50%, calc(-100% - 150px)) rotate(18deg) scale(.1); opacity:0}}
.tall .rt-tal{width:86px; height:86px} .tall .rt-tal.on{width:150px; height:150px}
.sg-board2{width:24%}

/* ---- эзотерика на высоком столе ---- */
/* знаки чисел: латунные таблички, число выгравировано поверх */
/* став: большой тёмный камень, руна обводится прямо по нему */
.rt-stone2{aspect-ratio:1}
.rt-stone2 .runestage{width:100%; margin:0}
.rt-stone2 .runestage image{filter:drop-shadow(0 10px 8px rgba(0,0,0,.6))}
/* денежный код: золотые монеты */
.mc-coin2{width:80px; aspect-ratio:300/180; border:0; background:none; padding:0; filter:drop-shadow(0 5px 4px rgba(0,0,0,.55)) brightness(.85)}
.mc-coin2 img{width:100%; height:100%; display:block; pointer-events:none}
.mc-coin2 b{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 26px/1 'Forum', Georgia, serif; color:#5A3A0E; text-shadow:0 1px 0 rgba(255,240,190,.7); transform:translateY(-3px)}
.mc-coin2.next{cursor:pointer; filter:drop-shadow(0 5px 4px rgba(0,0,0,.55)); animation:mcPulse2 1.1s ease-in-out infinite}
@keyframes mcPulse2{0%,100%{filter:drop-shadow(0 5px 4px rgba(0,0,0,.55)) drop-shadow(0 0 4px rgba(255,214,110,.4))} 50%{filter:drop-shadow(0 5px 4px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,214,110,.95))}}
.mc-coin2.lit{filter:drop-shadow(0 5px 4px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,214,110,.9)) brightness(1.12)}
/* предназначение: аметистовые камни с числами */
.pp-stone2{width:70px; aspect-ratio:300/215; filter:drop-shadow(0 5px 4px rgba(0,0,0,.55))}
.pp-stone2 img{width:100%; height:100%; display:block}
.pp-stone2 b{position:absolute; left:0; right:0; top:22%; text-align:center; font:700 26px/1 'Forum', Georgia, serif; color:#FFF4D6; text-shadow:0 0 8px rgba(80,30,120,.9), 0 1px 2px rgba(0,0,0,.6)}
.pp-stone2 span{position:absolute; left:50%; top:100%; transform:translateX(-50%); white-space:nowrap; font-size:11px; color:#F3E7F0; text-shadow:0 1px 2px rgba(0,0,0,.8)}
.pp-stone2.key{width:92px; filter:drop-shadow(0 6px 5px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(200,150,255,.7))}
.pp-stone2.key b{font-size:32px}
/* карта дня: колода с рубашкой-картинкой на столе */
.tcard.tback-img{padding:0; background:none; box-shadow:0 8px 14px rgba(0,0,0,.5); overflow:hidden}
.tcard.tback-img img{width:100%; height:100%; object-fit:cover; display:block}
/* три двери: настоящая дверь, створка уходит внутрь, за ней свет; страница тёмная */
.step:has(.dr-row){background:linear-gradient(180deg, rgba(18,10,22,.85), rgba(18,10,22,.6) 45%, rgba(18,10,22,.88)), url(assets/tech/ritual-room-top.webp) 50% 45% / cover no-repeat !important; border-color:rgba(226,182,92,.45) !important}
.step:has(.dr-row) :is(p, span, b, h3){color:#F3E7F0} .step:has(.dr-row) .eyebrow{color:#E7C27A}
.dr-img{position:relative; display:block; aspect-ratio:340/491; perspective:500px}
.dr-light{position:absolute; left:16%; right:16%; top:14%; bottom:4%; border-radius:46% 46% 0 0 / 30% 30% 0 0; background:radial-gradient(ellipse at 50% 60%, #FFF6D8, #FFD27A 45%, #C9893A 80%); box-shadow:0 0 24px 6px rgba(255,210,120,.7)}
.dr-leaf2{position:absolute; inset:0; width:100%; height:100%; transform-origin:12% 50%; transition:transform 1s cubic-bezier(.3,.6,.3,1), filter .6s}
.dr-leaf2.open{transform:rotateY(-72deg); filter:brightness(.7)}
.dr-num{position:absolute; left:0; right:0; top:4%; text-align:center; font:700 13px/1 'Forum', Georgia, serif; color:#F3D58E; text-shadow:0 1px 3px rgba(0,0,0,.8)}
.dr .dr-card{top:60%}
@media (prefers-reduced-motion: reduce){ .mc-coin2.next{animation:none} .dr-leaf2{transition:none} }
.step:has(.rt-stone2) .runechips{margin:0} .rune-say{line-height:1.35}
p.center.inl{display:block; text-align:center}

/* знаки чисел: медальоны с числами кругом */
.nm-med{width:78px; aspect-ratio:240/190; border:0; background:none; padding:0; cursor:pointer; filter:drop-shadow(0 6px 5px rgba(0,0,0,.55)); transition:left .6s cubic-bezier(.3,.7,.3,1), top .6s cubic-bezier(.3,.7,.3,1), width .6s, opacity .4s}
.nm-med img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none}
.nm-med.dim{opacity:.4}
.nm-med.on{width:150px; z-index:3; filter:drop-shadow(0 8px 6px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(255,214,120,.85)); animation:talFloat 2.6s ease-in-out infinite}
/* став: плита стоит, руна на её лицевой стороне */
.rt-stone2{width:54%}
/* карта дня: веер карт на столе */
.tr-fan{width:17%; aspect-ratio:2/3.3; border:0; background:none; padding:0; cursor:pointer; transform:translate(-50%, -50%) rotate(var(--r)); transition:transform .25s; filter:drop-shadow(0 6px 6px rgba(0,0,0,.55)); animation:fanIn .6s cubic-bezier(.3,.7,.3,1) both; animation-delay:calc(var(--n) * 60ms)}
.tr-fan .tcard{width:100%}
.tr-fan:hover, .tr-fan:active{transform:translate(-50%, -60%) rotate(var(--r))}
@keyframes fanIn{from{opacity:0; translate:0 24px} to{opacity:1; translate:0 0}}
.tall .tr-card{width:30%}
/* три двери: выбранная горит, карта вылетает в центр и возвращается */
.dr.me .dr-img{animation:drGlow 1.6s ease-in-out infinite}
@keyframes drGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,200,90,.6))} 50%{filter:drop-shadow(0 0 20px rgba(255,210,110,1))}}
.dr-card.show{z-index:5}
/* знак стихии: на стоящей плите горит знак */
.el-slab{width:34%; aspect-ratio:300/401; filter:drop-shadow(0 10px 8px rgba(0,0,0,.6))}
.el-slab img{width:100%; height:100%; display:block}
.el-mark{position:absolute; left:50%; top:52%; width:62%; aspect-ratio:1; transform:translate(-50%, -50%); color:#FFE3A0; animation:elGlow 2.4s ease-in-out infinite}
.el-mark svg{width:100%; height:100%; stroke:currentColor; filter:drop-shadow(0 0 6px rgba(255,200,100,.95)) drop-shadow(0 0 16px rgba(255,170,70,.6))}
@keyframes elGlow{0%,100%{opacity:.85} 50%{opacity:1}}
.rtable.elt.tall{aspect-ratio:720/560}
.rtable.elt.tall .rtbg{object-position:50% 40%}
@media (prefers-reduced-motion: reduce){ .nm-med.on, .tr-fan, .dr.me .dr-img, .dr-card.show, .el-mark{animation:none} }

/* QA: лицо карты таро на тёмной сцене — свой тёмный текст; вылетевшая карта у дверей короче и меньше; вбок страница не ездит */
.step :is(.tcard.face) :is(b, span, .small, .tnum, .tstar){color:var(--b3) !important}
.step .tcard.face b{color:var(--ink, #2B2230) !important}
.dr-card.show{animation:drFly 1.9s cubic-bezier(.3,.7,.3,1) both}
@keyframes drFly{0%{transform:translate(-50%, -50%) scale(.3); opacity:0} 25%{transform:translate(calc(-50% + var(--dx)), -45%) scale(2); opacity:1} 55%{transform:translate(calc(-50% + var(--dx)), -45%) scale(2); opacity:1} 100%{transform:translate(-50%, -50%) scale(1); opacity:1}}
.dr .dr-card{width:56%}
#app{overflow-x:clip}
.word{max-width:100%; overflow-wrap:anywhere}
.chips.mchips{gap:6px}.chips.mchips .btnchip{padding:6px 11px; font-size:14px; min-height:0}
.rtable.elt.tall.edge{aspect-ratio:720/410}.rtable.elt.tall.edge .rtbg{object-position:50% 46%}.rtable.elt.tall.edge .el-slab{transform:translate(-50%,-50%) scale(.8)}
.scsheet .chips.mchips .btnchip{text-align:left; line-height:1.3}
.shscene:has(.scsheet){height:max(420px, min(calc(100vh - 250px), 720px))}.shscene .scsheet{max-height:calc(100% - 74px); overscroll-behavior:contain}
.shscene .gift{padding:12px 14px; gap:6px}.shscene .gift h3{margin:0}
.shscene.taken .sctext{font-size:17px; line-height:1.35}
.shscene .scsheet > .btn:not(.ghost):not(.link){position:sticky; bottom:-16px; z-index:2; box-shadow:0 -10px 18px rgba(20,12,26,.85)}
.bsel{gap:6px}.bsel select.in{flex:1; min-width:0; padding-inline:8px}
.btn.warn{color:#B3261E; border-color:#B3261E}
.gpage .gtlist.wlist{max-height:min(48vh, 420px); overflow-y:auto; overscroll-behavior:contain; padding-right:2px}
.fambtn img{object-fit:contain; background:transparent; width:54px; height:54px}
.holdleft{display:block; text-align:center; font-size:13px; font-weight:700; color:var(--b3, #7A4E8C); margin-top:6px; min-height:18px}
.rtable .holdleft{position:absolute; left:0; right:0; bottom:3%; z-index:5; color:#FFE7A8; text-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none; margin:0}
.catwords summary{cursor:pointer; list-style:none}.catwords summary::-webkit-details-marker{display:none}.catwords dl{margin:10px 0 0; display:grid; gap:6px}.catwords dt{font-weight:700}.catwords dd{margin:0 0 4px; font-size:14px}
.sharebtn{margin-top:6px}
.savesh{gap:8px; width:100%; align-items:stretch}.savesh .btn{flex:1; margin:0; min-width:0}.savesh .sharebtn{flex:0 0 auto; width:auto}
.gpage.talres{gap:8px}
.iggrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.igcard{display:flex; flex-direction:column; gap:2px; text-align:left; padding:10px 12px; border-radius:14px; border:1.5px solid var(--line, #E3D7E6); background:rgba(255,255,255,.75); color:inherit; font:inherit; cursor:pointer}
.igcard b{font-size:14px}
.igcard span{font-size:12px; opacity:.7; line-height:1.3}
.igcard.on{border-color:var(--b3, #9B5C8F); background:color-mix(in srgb, var(--g1, #F1E4EF) 70%, #fff); box-shadow:0 0 0 2px color-mix(in srgb, var(--b3, #9B5C8F) 25%, transparent)}
.scsoul{margin:0 0 8px; font-size:14px; color:#F2CF7A; text-align:center}
.gpage .pedpic{width:min(200px, 54vw)}

/* v363: вопрос «как тебе больше нравится» (текстом) и «Нравится» в технике */
.rankt{display:flex;flex-direction:column;gap:8px}
.rtrow{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:14px;border:1.5px solid rgba(0,0,0,.08);background:rgba(255,255,255,.75);font:inherit;color:inherit;cursor:pointer}
.rtrow.sel{border-color:var(--b2,#9B5C86);background:#fff}
.rtn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:rgba(0,0,0,.06)}
.rtrow.sel .rtn{background:var(--b2,#9B5C86);color:#fff}
.finrow{display:flex;align-items:center;gap:8px}.finrow .tfinish{flex:1}
.likehint{margin:4px 0 0;font-size:12px;line-height:1.3;opacity:.75}
.likebtn{flex:none;border:1.5px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:8px 14px;white-space:nowrap;font:inherit;font-size:15px;cursor:pointer;color:inherit}
.likebtn.on{border-color:#D2557E;color:#C2416B;background:#FFF0F4}

/* каталог: выбор кольца иконками */
.ringpick{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px}
.rpick{position:relative; display:flex; flex-direction:column; align-items:center; padding:6px 0; border:1.5px solid transparent; border-radius:12px; background:transparent; font-size:10px; color:var(--ink2, inherit); cursor:pointer; min-width:0}
.rpick img{width:38px; height:38px; object-fit:contain; opacity:.55; transition:opacity .2s, transform .2s}
.rpick.on{border-color:var(--f2); background:rgba(255,255,255,.55)} .rpick.on img{opacity:1; transform:scale(1.08)}
.rpick .rdot{position:absolute; top:4px; right:calc(50% - 23px); width:7px; height:7px; border-radius:50%; background:var(--b2)}
.soloring{align-items:center; gap:8px} .soloring .boxback{flex:none}

/* номера помощи под ссылкой */
.helpfold{margin:6px 0} .helpfold summary{cursor:pointer; font-size:13px; text-decoration:underline; text-underline-offset:3px; opacity:.8; list-style:none} .helpfold summary::-webkit-details-marker{display:none} .helpfold[open] summary{margin-bottom:6px}
/* v372: экраны с картой/комнатой на весь экран появляются без сдвига — transform у .app ломал position:fixed, и картинка «разжималась» сверху */
.app.enter:has(.realmfull, .roomfs, .stageintro){animation-name:screenFade}
@keyframes screenFade{from{opacity:0}}

/* v373: карта пройденного кольца из королевства — только смотреть */
/* v375: чат с фамильяром — плавающее окно поверх любой вкладки, двигается за шапку (позиция в S.famPos) */
.famchat{inset:auto; left:var(--fx, 12px); top:var(--fy, 80px); width:min(360px, calc(100vw - 24px)); height:min(420px, calc(100dvh - 140px)); padding:6px 10px 10px; border-radius:20px; border:1px solid rgba(255,255,255,0.9); box-shadow:0 18px 44px rgba(40,30,60,0.28), 0 0 0 1px color-mix(in srgb, var(--g2) 25%, transparent); overflow:hidden}
.famchat .famhead{cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; padding:4px 2px 8px; position:relative}
.famchat .famhead::before{content:""; position:absolute; left:50%; top:0; width:36px; height:4px; margin-left:-18px; border-radius:4px; background:color-mix(in srgb, var(--b3) 25%, transparent)}
.famchat.drag .famhead{cursor:grabbing} .famchat.drag{box-shadow:0 24px 54px rgba(40,30,60,0.36)}
.famchat .famhead b{font-size:17px} .famchat .fb{font-size:14px}
body.fam-open .bnav{display:flex}

/* v376: пройти кольцо заново — кнопка на карте пройденного кольца */
.ringagain{gap:8px} .ringagain .btn.gold{width:100%}
.ringagain > .row{flex-wrap:nowrap; align-items:center; gap:10px} .ringagain > .row > span{min-width:0} .ringagain > .row .btn{flex:none}
.ringback{flex-wrap:nowrap; gap:10px} .ringback > span{min-width:0} .ringback .btn{flex:none}

/* Тень: вопрос под намерением (новая логика) */
.scask{margin:10px 0 4px; font-size:15px}
.scnth{margin:6px 0 0; font-size:13px; letter-spacing:.08em; text-transform:uppercase; opacity:.8}
.igcard{position:relative}
.ignum{position:absolute; top:6px; right:8px; font-style:normal; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--b3, #9B5C8F)}
/* 02.11: головы Теней не обрезаются — картинка сдвинута под заголовок, верх прижат, приближение растёт вниз; размер тот же (ширина сцены) */
.shscene .scimg{inset:auto 0 0 0; top:64px; height:calc(100% - 64px); object-position:50% 0; transform-origin:50% 0; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 56px); mask-image:linear-gradient(180deg, transparent 0, #000 56px)}
/* 02.11: головы стражей не обрезаются — высокие картинки (560×840) прижаты к верху, приближение растёт вниз; размер тот же */
.gpic img{object-position:50% 0; transform-origin:50% 0}
/* 02.11 Жизнь: встреча с хранителем и дары */
.kpscene{display:flex; flex-direction:column; gap:12px}
.kphead{display:flex; align-items:center; gap:14px}
.kpimg{width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:50% 20%; box-shadow:0 8px 22px rgba(30,20,40,.25); flex:none}
.kphead h2{margin:2px 0 0}
.kpgift{border:1.5px solid var(--b2, #C9A24A); transition:box-shadow .6s, transform .6s}
.kpgift.got{box-shadow:0 0 0 3px color-mix(in srgb, var(--b2, #C9A24A) 30%, transparent), 0 10px 26px rgba(201,162,74,.35); transform:scale(1.02)}
.lgifts{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.lgift{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); font-size:14px; animation:lgiftIn .8s ease-out both; animation-delay:var(--d, 0s)}
.lgifts.done .lgift{background:var(--g1, #F4EEF6); border-color:var(--line, #E3D7E6); animation:none}
.lwt.on{opacity:.35; text-decoration:line-through}
@keyframes lgiftIn{from{opacity:0; transform:translateY(-14px) scale(.8)}}
@media (prefers-reduced-motion: reduce){ .lgift{animation:none} }
/* 02.11 начало игры в чёрно-белом: кнопки чёрные, золото тоже уходит в чёрное */
#app[data-world="mono"] .btn.gold{background:linear-gradient(180deg, #4A4A4A 0%, #1E1E1E 55%, #050505 100%); color:#FFFFFF}
#app[data-world="mono"] .btn.ghost{color:#141414; border-color:#4A4A4A}
#app[data-world="mono"] .link, #app[data-world="mono"] .eyebrow{color:#2E2E2E}
#app[data-world="mono"] .progress i{background:#141414}
.promark{opacity:.9}
.reveal .fam.big.nofr{border-radius:0; object-fit:contain; width:170px; height:170px; background:none; box-shadow:none; mix-blend-mode:multiply}
.howgame{gap:10px}
.howrow{display:flex; gap:12px; align-items:flex-start}
.howrow p{margin:2px 0 0}
.hownum{flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--b3, #141414); color:#fff; font-size:13px}
.howgame{gap:7px; padding-block:12px}
.howrow p{font-size:13px; line-height:1.32}
.howrow b{font-size:15px}
.hownum{width:22px; height:22px; font-size:12px; margin-top:1px}
/* 02.11: «Твоё первое кольцо» — картинка кольца по высоте экрана, страница целиком без прокрутки */
.reveal .ringimg.md{width:auto; height:clamp(84px, calc(100svh - 545px), 180px); margin:0 auto}
.fitpage .ringrow .ringimg.xs{width:clamp(26px, 8vw, 34px)}
.reveal .fam.big.nofr{height:clamp(90px, calc(100svh - 560px), 180px); width:auto}
@media (max-height:740px){
  .fitpage{gap:8px}
  .fitpage h2{font-size:24px; margin:0}
  .fitpage .card{padding-block:10px}
  .howgame{gap:5px}
  .howrow p{font-size:12.5px; line-height:1.28}
  .fitpage .say .bubble, .fitpage .say p{font-size:13.5px}
}
#app[data-world="mono"] .card.reveal{background:#FFFFFF} .reveal .fam.big.nofr{filter:none; animation:none}
/* 02.11 коронация в финале Жизни */
.over.lcoro{overflow-y:auto; justify-content:flex-start; padding-top:max(40px, env(safe-area-inset-top, 0px))}
.lcrown{font-size:64px; line-height:1; color:#E7B95C; text-shadow:0 0 24px rgba(231,185,92,.6); animation:lgiftIn 1s ease-out both}
.lstory{background:#FBF7EF; color:#2A2230; border-radius:14px; padding:16px 18px; font-family:var(--f-display); font-size:18px; line-height:1.45; text-align:left}
.lstory p{margin:0 0 10px}
.chip.now{background:var(--b3, #2E2E2E); color:#fff; border-color:transparent}
/* 02.11: Замок семи колец на карте королевства светлее с самого начала — видно, что на него можно нажать */
.kmap.img .kcastle.k-eighth img, .kmap.img .kcastle.k-eighth.fog img{filter:brightness(1.32) saturate(.95) drop-shadow(0 0 18px rgba(255,240,200,1)) drop-shadow(0 0 6px rgba(255,255,255,.8))}
.kmap .kcastle.k-eighth::before{width:175%}
/* 02.11 Замок семи колец: башни-кольца дугой вокруг замка */
.castlearc{position:relative; width:100%; max-width:420px; aspect-ratio:1/0.92; margin:0 auto}
.castlemid{position:absolute; left:50%; top:60%; width:46%; transform:translate(-50%, -50%)}
.castlemid .kpic{display:block; position:relative} .castlemid .kpic img{width:100%; display:block} .castlemid .kpic img.lit{position:absolute; inset:0}
.ctower{position:absolute; transform:translate(-50%, -50%); appearance:none; border:0; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; width:21%; font:inherit; color:var(--ink)}
.ctower img{width:62%; aspect-ratio:1; object-fit:contain; filter:grayscale(.85) opacity(.5); transition:filter .3s}
.ctower span{font-size:10.5px; line-height:1.15; font-weight:600; text-align:center; background:rgba(255,255,255,.8); border-radius:8px; padding:1px 5px; opacity:.75}
.ctower.open img{filter:drop-shadow(0 0 10px rgba(255,230,160,.95))} .ctower.open span{opacity:1}
.castlehint{margin:2px 0 8px}
.crooms{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.croom{appearance:none; border:1px solid var(--line, #E3D7E6); background:rgba(255,255,255,.85); border-radius:14px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; font:inherit; color:var(--ink); cursor:pointer; text-align:center}
.croom b{font-size:13px; line-height:1.2} .croom span{font-size:11px; color:var(--mute)}
.croom:not(.open){opacity:.6} .croom.open{box-shadow:0 0 0 2px color-mix(in srgb, var(--b2, #C9A24A) 35%, transparent)}
.croom .cfam{width:38px; height:38px; object-fit:contain; mix-blend-mode:multiply}
.castlearc{aspect-ratio:1/0.84}
.castlemid{top:62%; width:44%}
.castlehint{background:rgba(255,255,255,.82); border-radius:999px; padding:4px 12px; width:max-content; max-width:100%; margin:0 auto 10px; box-sizing:border-box}
.croom{background:#FFFFFF}
.castlearc{width:min(100%, 420px, calc((100svh - 545px) / 0.84)); min-width:min(100%, 250px)}
/* 03.11 Замок семи колец: плитки с иконками */
.cgrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.ctile{appearance:none; border:1px solid var(--line, #E3D7E6); background:#FFFFFF; border-radius:16px; padding:10px 6px 9px; display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit; color:var(--ink); cursor:pointer; text-align:center; min-width:0}
.ctile b{font-size:12.5px; line-height:1.18} .ctile .cwhen{font-size:10.5px; line-height:1.2; color:var(--mute)}
.cicw{position:relative; width:56px; height:56px; display:flex; align-items:center; justify-content:center}
.cico{width:56px; height:56px; object-fit:contain} .cico.fam{mix-blend-mode:multiply}
.ctile:not(.open) .cico{filter:grayscale(.9) opacity(.45)}
.clock{position:absolute; right:-2px; bottom:-2px; font-style:normal; font-size:14px}
.ctile.open{box-shadow:0 0 0 2px color-mix(in srgb, var(--b2, #C9A24A) 30%, transparent)}
.cicw, .cico{width:64px; height:64px}
.cgrid.c4{grid-template-columns:repeat(4, 1fr); gap:6px}
.cgrid.c4 .ctile{padding:8px 3px 7px; border-radius:14px}
.cgrid.c4 .cicw, .cgrid.c4 .cico{width:54px; height:54px}
.cgrid.c4 .ctile b{font-size:11.5px}
.cgrid.c4 .ctile .cwhen{font-size:10px}
/* 03.11: замок как витрина колец в Шкатулке — одна полупрозрачная карточка на группу, без рамок у плиток, мягкая тень у картинок */
.castlecard{display:flex; flex-direction:column; gap:6px; padding-block:12px}
.ctile, .cgrid.c4 .ctile{border:0; background:none; box-shadow:none; padding:4px 2px}
.ctile.open{box-shadow:none}
.ctile .cico{filter:drop-shadow(0 6px 10px rgba(40,30,50,.28)) drop-shadow(0 2px 3px rgba(40,30,50,.18))}
.ctile:not(.open) .cico{filter:grayscale(1) opacity(.5) drop-shadow(0 4px 6px rgba(40,30,50,.12))}
.ctile b{font-weight:700} .ctile:not(.open) b{font-weight:500; color:var(--mute)}
/* 03.11 иконки-миниатюры в Шкатулке: без кружка, с мягкой тенью, как комнаты замка */
.boxtile .bimg{width:68px; height:68px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(40,30,50,.28)) drop-shadow(0 2px 3px rgba(40,30,50,.18))}
.boxtile.empty .bimg{filter:grayscale(1) opacity(.5)}
.boxtiles.b3{grid-template-columns:repeat(3, 1fr)} .boxtiles.b3 .boxtile{min-width:0; padding-inline:4px} .boxtiles.b3 .boxtile span{font-size:11px}
/* 03.11: семь колец снова в один ряд (подписей больше нет) */
.showcase .rings7{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px; row-gap:0}
.showcase .rings7 > *{flex:none; display:flex; justify-content:center; align-items:center; padding:0; background:none; border:0}
.showcase .rings7 .ringimg{width:100%; max-width:46px; height:auto; aspect-ratio:1; margin:0 auto}
/* 03.11 Шкатулка: Вселенский банк и Дневник — широкие кнопки */
.boxtile.boxwide{flex-direction:row; justify-content:flex-start; gap:14px; text-align:left; padding:12px 18px; margin-top:8px; width:100%; box-sizing:border-box}
.boxwide .bwtext{display:flex; flex-direction:column; gap:1px; align-items:flex-start}
.boxwide .bwtext b{font-size:15px} .boxwide .bwtext span{font-size:12px}
/* 03.11 свои значки */
.uiic{object-fit:contain; display:block; filter:drop-shadow(0 3px 5px rgba(60,40,50,.18))}
.boxtile .uiic{margin:0 auto}
.nb .nic .uiic{filter:drop-shadow(0 2px 3px rgba(60,40,50,.15)) saturate(.75) opacity(.8)}
.nb.on .nic .uiic{filter:drop-shadow(0 2px 6px rgba(201,162,74,.55))}
.gearbtn .uiic{filter:none}
.boxtile.boxwide{display:flex; align-items:center} .boxwide .bwtext{flex:1; text-align:left; align-items:flex-start} .boxwide .uiic{margin:0; width:52px !important; height:52px !important}
/* 03.11 Дневник, вариант A: одна строка сверху, тетрадь сразу открыта */
.dy-top{display:flex; align-items:center; gap:8px; margin:2px 0 6px}
.dy-top h2{margin:0; flex:1}
.dy-top .boxback{font-size:26px; line-height:1; padding:0 8px 2px; text-decoration:none}
.dy-fire{appearance:none; border:0; background:rgba(255,255,255,.85); border-radius:999px; padding:6px 12px; font:inherit; font-size:14px; font-weight:600; color:#8A5A12; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.06)}
.dy-fire.zero{font-weight:500; color:var(--mute)}
.dy-more{appearance:none; border:0; background:rgba(255,255,255,.85); border-radius:50%; width:36px; height:36px; font-size:20px; line-height:1; cursor:pointer; color:var(--ink)}
.dy-month{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin:0 4px 2px}
.dy-dhead{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.dy-cnt{font-family:var(--dy-hand); font-size:19px; color:#B98A3A; font-weight:400; white-space:nowrap}
.dy-cnt.full{color:#2E8B57}
.dy-ptip{font-family:var(--dy-hand); font-size:16px; line-height:var(--dy-lh); color:#9A8FB0; margin:0}
.dy-ghost{position:relative; height:var(--dy-lh)} .dy-ghost .dy-num{color:#D9CBA8}
.dy-paper .dy-compose{position:relative; display:flex; align-items:flex-start; gap:6px; margin:0}
.dy-paper .dy-compose .dy-num{top:2px}
.dy-paper .dy-compose textarea{background:transparent; border:0; box-shadow:none; padding:0; font-family:var(--dy-hand); font-size:18px; line-height:var(--dy-lh); color:var(--ink, #2B4B9B); border-bottom:1.5px dashed #D9CBA8; border-radius:0; min-height:var(--dy-lh)}
.dy-paper .dy-compose textarea:focus{outline:none; border-bottom-color:#B98A3A}
.dy-ok, .dy-cancel{appearance:none; border:0; width:32px; height:32px; border-radius:50%; flex:none; cursor:pointer; font-size:17px; line-height:1}
.dy-ok{background:linear-gradient(180deg, #F2D27A, #D9A93F); color:#3A2A08; box-shadow:0 2px 6px rgba(160,110,30,.35)}
.dy-cancel{background:#EFE8F2; color:#6b6272}
.dy-paper .dy-hint:empty{display:none}
.dy-tools{grid-template-columns:repeat(4, 1fr); margin-right:68px}
.dy-menu .btn{width:100%} .dy-menu{gap:6px}
.dy-streak b{font-size:15px} .dy-sdots{display:flex; gap:8px; justify-content:space-between}
.dy-sdot{flex:1; aspect-ratio:1; max-width:38px; border-radius:50%; border:2px solid #E3D7C0; display:flex; align-items:flex-end; justify-content:center; position:relative}
.dy-sdot small{position:absolute; bottom:-16px; font-size:10px; color:var(--mute)} .dy-sdots{margin-bottom:14px}
.dy-sdot.on{background:radial-gradient(circle, #FFE7A0, #E2B24F); border-color:#D9A93F} .dy-sdot.part{background:#FBF1D6}
.dy-opencover{position:fixed; left:50%; top:52%; width:min(78vw, 320px); aspect-ratio:3/4; transform:translate(-50%, -50%); background:var(--cov); border-radius:6px 18px 18px 6px; box-shadow:0 20px 40px rgba(40,30,70,.3); display:flex; align-items:center; justify-content:center; z-index:30; pointer-events:none; transform-origin:left center; animation:dyOpen 1.1s cubic-bezier(.5,.1,.3,1) .15s forwards}
.dy-opencover b{font-family:var(--f-display); font-size:30px; color:#F6E6B8; letter-spacing:.04em}
@keyframes dyOpen{0%{opacity:1; transform:translate(-50%, -50%) perspective(900px) rotateY(0)} 70%{opacity:1} 100%{opacity:0; transform:translate(-50%, -50%) perspective(900px) rotateY(-100deg)}}
@media (prefers-reduced-motion: reduce){ .dy-opencover{display:none} }
/* листы дневника (наклейки, маркер, чернила, «⋯», серия) — над нижним меню, всегда видны */
.dy .dy-sheet{position:fixed; left:max(12px, env(safe-area-inset-left, 0px)); right:max(12px, env(safe-area-inset-right, 0px)); bottom:calc(96px + env(safe-area-inset-bottom, 0px)); z-index:25; max-height:58vh; overflow:auto; box-shadow:0 12px 32px rgba(40,30,70,.22); background:rgba(255,255,255,.97)}
.dy-fire{white-space:nowrap} @media (max-width:380px){ .dy-fire{font-size:12.5px; padding:6px 9px} }
@media (max-height:780px){ .dy-paper{min-height:0} }
/* 03.11 точка «новое»: на вкладке меню и на плитке раздела, гаснет, когда туда заглянешь */
.nb .nic{position:relative}
.nbdot{position:absolute; top:-2px; right:-4px; width:9px; height:9px; border-radius:50%; background:#E2B24F; box-shadow:0 0 0 2px #fff, 0 0 8px rgba(226,178,79,.9); animation:nbPulse 1.8s ease-in-out infinite}
.boxtile.isnew{position:relative} .boxtile.isnew::after{content:""; position:absolute; top:8px; right:8px; width:10px; height:10px; border-radius:50%; background:#E2B24F; box-shadow:0 0 0 2px #fff, 0 0 8px rgba(226,178,79,.9); animation:nbPulse 1.8s ease-in-out infinite}
@keyframes nbPulse{50%{transform:scale(1.25)}}
@media (prefers-reduced-motion: reduce){ .nbdot, .boxtile.isnew::after{animation:none} }
/* 03.11: обложка при входе — на весь экран и раскрывается от левого края, как настоящая книга */
.dy-opencover{left:0; top:0; right:0; bottom:0; width:auto; aspect-ratio:auto; transform:none; border-radius:0; background:linear-gradient(90deg, rgba(0,0,0,.18) 0, rgba(0,0,0,0) 18px), var(--cov); box-shadow:none; z-index:60; transform-origin:left center; animation:dyOpenFull 1.3s cubic-bezier(.55,.05,.3,1) .25s forwards}
.dy-oc-in{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:24px; border:1.5px dashed rgba(246,230,184,.55); border-radius:14px; margin:12vh 10vw}
.dy-oc-in small{font-family:var(--f-display); font-size:16px; letter-spacing:.3em; text-transform:uppercase; color:#F6E6B8}
.dy-oc-in b{font-family:var(--f-display); font-size:clamp(26px, 8vw, 38px); color:#F6E6B8; font-weight:400}
.dy-oc-star{font-size:64px; color:#F2D27A; text-shadow:0 0 24px rgba(242,210,122,.8)}
.dy-oc-in i{font-family:var(--dy-hand); font-style:normal; font-size:22px; color:#FFF1C9}
@keyframes dyOpenFull{0%{transform:perspective(1400px) rotateY(0); opacity:1} 75%{opacity:1} 100%{transform:perspective(1400px) rotateY(-105deg); opacity:0}}
.dy-opencover{z-index:2147483000; position:fixed}
/* 03.11: лист дневника шире, без подсказок и пустых номеров — под фото и наклейки */
.dy .dy-paper{margin-inline:-8px; padding-left:42px; padding-right:12px}
.dy .dy-paper .dy-num{left:-36px}
.dy .dy-paper{min-height:max(240px, calc(100svh - 445px))}
/* 03.11 наклейки-картинки: белая кайма уже на картинке, только мягкая тень */
.dy-item img{width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 3px 4px rgba(40,30,60,.2)); pointer-events:none}
.dy-stgrid button img{width:100%; height:100%; object-fit:contain}
.dy-stgrid{grid-template-columns:repeat(6, 1fr)}
/* 03.11 страницы земель: история, разговор, доска объявлений */
.landstory p{font-size:15px; line-height:1.55; margin:0}
.landpic.small{max-width:160px; margin:0 auto}
.landchat{margin-bottom:8px}
.landq{margin:6px 0 10px} .landinput .in{flex:1}
.corkboard{position:relative; min-height:320px; border-radius:18px; padding:18px; background:#C79A64 radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 2px, transparent 3px) 0 0/22px 22px, radial-gradient(circle at 70% 60%, rgba(0,0,0,.08) 0 2px, transparent 3px) 0 0/18px 18px, linear-gradient(135deg, #C9A06C, #B88A55); box-shadow:inset 0 0 0 8px #8E6236, inset 0 0 18px rgba(0,0,0,.35), 0 10px 24px rgba(60,40,20,.25)}
.pinnote{position:relative; background:#FFFBEF; width:72%; margin:10px auto 0; padding:20px 16px 14px; transform:rotate(-2deg); box-shadow:0 6px 12px rgba(60,40,20,.28); font-family:var(--dy-hand, cursive)}
.pinnote b{display:block; font-size:20px; color:#8E2F46; margin-bottom:4px} .pinnote p{margin:0 0 6px; font-size:17px; line-height:1.35; color:#3A3348} .pinnote span{font-size:15px; color:#9A8FB0}
.pinnote .pin{position:absolute; top:6px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FF9AA8, #C2304B); box-shadow:0 2px 3px rgba(0,0,0,.35)}
.pinnote.empty{width:34%; height:70px; display:inline-block; margin:18px 4% 0; padding:0; transform:rotate(3deg); background:#FDF3D7; opacity:.85}
.pinnote.empty.n3{transform:rotate(-4deg); background:#F3F7E6}

/* 03.11 окно награды: трофей и одна реплика хранительницы */
.over .rw-trophy{font-size:15px;line-height:1.45;margin:4px 0 0;max-width:30ch}
.over .rw-keeper{font-size:15px;line-height:1.45;margin:6px 0 2px;max-width:32ch;color:var(--ink,#2B2230)}
.over .rw-keeper b{font-weight:600}
.castle-news{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.75);border-radius:16px;padding:10px 12px;margin:0 0 12px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.castle-news p{margin:2px 0 0;font-size:14px;line-height:1.4}

/* 03.11 Вселенский банк: именная карта и чек */
.bank{display:flex;flex-direction:column;gap:14px}
.bk-card{position:relative;overflow:hidden;aspect-ratio:1.586;max-width:100%;border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;color:#F6E7C1;
  background:radial-gradient(120% 90% at 85% 0%,rgba(255,226,160,.28),transparent 55%),linear-gradient(135deg,#3B2A5C 0%,#5A3D7A 45%,#2A1D44 100%);box-shadow:0 14px 30px rgba(42,29,68,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.bk-card::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 110% 120%,rgba(255,255,255,.05) 0 2px,transparent 2px 14px);pointer-events:none}
.bk-top{display:flex;justify-content:space-between;align-items:center}
.bk-brand{font-family:var(--serif,Georgia,serif);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#F2D27A}
.bk-chip{width:42px;height:31px;border-radius:7px;background:linear-gradient(135deg,#FFF1C9,#E7B95C 50%,#B9842E);box-shadow:inset 0 0 0 1px rgba(120,80,20,.35)}
.bk-label{margin-top:auto;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.bk-sum{font-family:var(--serif,Georgia,serif);font-size:38px;line-height:1.1;font-weight:500;background:linear-gradient(180deg,#FFF6DA,#E7B95C);-webkit-background-clip:text;background-clip:text;color:transparent}
.bk-sub{font-size:13px;opacity:.85;margin-top:2px}
.bk-bottom{display:flex;justify-content:space-between;margin-top:14px;font-size:12px;letter-spacing:.14em;opacity:.8}
.bk-receipt{position:relative;background:#FFFDF8;color:#2B2230;border-radius:14px 14px 0 0;padding:16px 16px 22px;box-shadow:0 6px 18px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 8px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 8px repeat-x}
.bk-rhead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed rgba(43,34,48,.25);padding-bottom:8px}
.bk-line{display:flex;align-items:baseline;gap:6px;font-size:15px;min-width:0}
.bk-line span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bk-line i{flex:1;border-bottom:1px dotted rgba(43,34,48,.35);transform:translateY(-4px);min-width:12px}
.bk-line b{white-space:nowrap}
.bk-line .xbtn{margin-left:4px}
.bk-total{border-top:1px dashed rgba(43,34,48,.25);padding-top:8px;font-weight:600}
.bk-sec{display:flex;flex-direction:column;gap:6px}
.bk-foot{text-align:center}
@media (max-width:360px){.bk-sum{font-size:32px}}
/* 03.11 дневник на весь экран */
body:has(.dy-full) .bnav, body:has(.dy-full) .fambtn, body:has(.dy-full) .topbar{display:none !important}
.dy-full{min-height:100vh;padding-top:env(safe-area-inset-top,0px)}
.dy-date{display:flex;align-items:center;gap:6px}
.dy-arr{border:0;background:none;font-size:22px;line-height:1;padding:0 6px;color:inherit;opacity:.55;cursor:pointer}
.likeend{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0 2px}
.dy-full .dy-paper{min-height:calc(100vh - 175px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}

/* 03.11 календарь записей дневника */
.dy-calh{display:flex;justify-content:space-between;align-items:center}
.dy-calg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.dy-calg small{opacity:.55;font-size:12px}
.dy-cd{position:relative;border:0;background:rgba(255,255,255,.6);border-radius:10px;aspect-ratio:1;font-size:15px;color:inherit;cursor:pointer}
.dy-cd:disabled{opacity:.3;cursor:default}
.dy-cd.today{box-shadow:inset 0 0 0 1.5px #C99A3B}
.dy-cd.on{background:#8C7BB8;color:#fff}
.dy-cd i{position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#E7B95C}
.dy-cd i.part{background:#B9A9D8}

/* 03.11 лист дневника в клетку: две клетки на строку */
.dy-paper.grid{background-image:linear-gradient(to bottom, transparent calc(var(--dy-lh) / 2 - 1px), #D6DEEA calc(var(--dy-lh) / 2 - 1px)), linear-gradient(to right, transparent calc(var(--dy-lh) / 2 - 1px), #D6DEEA calc(var(--dy-lh) / 2 - 1px)); background-size:calc(var(--dy-lh) / 2) calc(var(--dy-lh) / 2); background-position:0 10px}
.dy-full .dy-tools{grid-template-columns:repeat(5, 1fr); margin-right:0} /* лисёнка в дневнике нет — пять кнопок во всю ширину */

/* 03.11 высокое окно награды не обрезается сверху на маленьких экранах */
.over > :first-child{margin-top:auto}
.over > :last-child{margin-bottom:auto}
.over{justify-content:flex-start}
.shscene .scsheet > .btn:not(.ghost):not(.link):disabled{opacity:1; background:#4A3D58; color:#B9ACC8} /* 03.11: закреплённая кнопка не просвечивает поверх мыслей */

.dy-sheet{position:relative}
.dy-shx{position:absolute;top:6px;right:8px;border:0;background:rgba(0,0,0,.06);width:30px;height:30px;border-radius:50%;font-size:18px;line-height:1;color:inherit;cursor:pointer;z-index:2}
.dy-full .dy-sheet{position:sticky;bottom:96px;z-index:6;max-height:55vh;overflow:auto}

/* 03.11 доска «Карты желаний»: льняная, тонкая светлая рамка, ленты крест-накрест с золотыми гвоздиками, фото на деревянных прищепках */
.wb-board{aspect-ratio:4/5; border-radius:6px; box-shadow:inset 0 0 0 5px #F4EEE6, inset 0 0 0 6px #D9CDBE, 0 8px 20px rgba(80,60,40,.18);
  background:repeating-linear-gradient(45deg, transparent 0 calc(33.3% - 5px), rgba(232,178,180,.75) calc(33.3% - 5px) 33.3%), repeating-linear-gradient(-45deg, transparent 0 calc(33.3% - 5px), rgba(205,205,212,.85) calc(33.3% - 5px) 33.3%),
  repeating-linear-gradient(0deg, rgba(150,130,100,.06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(150,130,100,.06) 0 1px, transparent 1px 3px), #EDE6DA}
.wb-board::before{content:""; position:absolute; inset:6px; pointer-events:none; background-image:radial-gradient(circle, #E8C77B 0 2.6px, #B88A36 2.7px 3.4px, transparent 3.5px); background-size:23.57% 23.57%; background-position:11.8% 11.8%; opacity:.9}
.wb-ttl{left:12px; top:9px; font-size:17px; color:#6E5A48; background:#FBF7F0; box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wb-pin{width:30%; padding:5px 5px 21px; box-shadow:0 3px 8px rgba(70,50,30,.2)}
.wb-pin i{width:7px; height:22px; top:-12px; margin-left:-3.5px; border-radius:2px; background:linear-gradient(90deg,#C9A27A,#E3C29C 50%,#B98E64); box-shadow:0 1px 2px rgba(0,0,0,.25)}
.wb-pcap{font-size:13px; bottom:3px; background:none; color:#5E4E40}
.wb-sprig{position:absolute; z-index:4; pointer-events:none; background-repeat:no-repeat; background-size:contain}
.wb-sprig.s1{left:1%; bottom:3%; width:13%; height:22%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 90'%3E%3Cpath d='M20 88 C20 60 22 30 20 4' stroke='%2385977d' stroke-width='1.6' fill='none'/%3E%3Cg fill='%239fb59a'%3E%3Cellipse cx='13' cy='70' rx='7' ry='5'/%3E%3Cellipse cx='27' cy='60' rx='7' ry='5'/%3E%3Cellipse cx='13' cy='48' rx='6.5' ry='4.6'/%3E%3Cellipse cx='27' cy='37' rx='6' ry='4.3'/%3E%3Cellipse cx='14' cy='26' rx='5.5' ry='4'/%3E%3Cellipse cx='26' cy='16' rx='5' ry='3.6'/%3E%3Cellipse cx='20' cy='6' rx='4' ry='3'/%3E%3C/g%3E%3C/svg%3E"); transform:rotate(-12deg)}
.wb-sprig.s2{right:2%; top:28%; width:8%; height:18%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 90'%3E%3Cpath d='M15 88 L15 20' stroke='%238a9a78' stroke-width='1.4'/%3E%3Cg fill='%23a58ac9'%3E%3Cellipse cx='15' cy='8' rx='3' ry='4.5'/%3E%3Cellipse cx='11' cy='15' rx='3' ry='4'/%3E%3Cellipse cx='19' cy='15' rx='3' ry='4'/%3E%3Cellipse cx='11' cy='23' rx='3' ry='4'/%3E%3Cellipse cx='19' cy='23' rx='3' ry='4'/%3E%3Cellipse cx='11' cy='31' rx='2.8' ry='3.8'/%3E%3Cellipse cx='19' cy='31' rx='2.8' ry='3.8'/%3E%3Cellipse cx='15' cy='38' rx='2.6' ry='3.6'/%3E%3C/g%3E%3C/svg%3E"); transform:rotate(14deg)}

/* решётка лент с гвоздиками на пересечениях */
.wb-board{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cline x1='-10' y1='-162' x2='110' y2='-42' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='-124' x2='110' y2='-4' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='-86' x2='110' y2='34' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='-48' x2='110' y2='72' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='-10' x2='110' y2='110' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='28' x2='110' y2='148' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='66' x2='110' y2='186' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='104' x2='110' y2='224' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='142' x2='110' y2='262' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='180' x2='110' y2='300' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='218' x2='110' y2='338' stroke='%23EBC3C3' stroke-width='2.4' opacity='.8'/%3E%3Cline x1='-10' y1='-28' x2='110' y2='-148' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='10' x2='110' y2='-110' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='48' x2='110' y2='-72' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='86' x2='110' y2='-34' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='124' x2='110' y2='4' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='162' x2='110' y2='42' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='200' x2='110' y2='80' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='238' x2='110' y2='118' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='276' x2='110' y2='156' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='314' x2='110' y2='194' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Cline x1='-10' y1='352' x2='110' y2='232' stroke='%23D4D3DA' stroke-width='2.4' opacity='.85'/%3E%3Ccircle cx='76.0' cy='76.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='38.0' cy='114.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='57.0' cy='57.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='19.0' cy='57.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='76.0' cy='114.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='38.0' cy='38.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='57.0' cy='19.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='95.0' cy='19.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='19.0' cy='19.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='38.0' cy='76.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='95.0' cy='57.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='57.0' cy='95.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='19.0' cy='95.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='76.0' cy='38.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3Ccircle cx='95.0' cy='95.0' r='1.15' fill='%23E6C988' stroke='%23B8924A' stroke-width='.4'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat, repeating-linear-gradient(0deg, rgba(150,130,100,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(150,130,100,.05) 0 1px, transparent 1px 3px), #EEE8DD}
.wb-board::before{display:none}

/* 03.11 доска — реалистичное фото (OpenAI), фото девушки поверх на прищепках */
.wb-board{aspect-ratio:2/3; border-radius:4px; box-shadow:0 10px 24px rgba(80,60,40,.22); background:url("assets/tech/wish-board.webp") center/100% 100% no-repeat, #E9E1D3}
.wb-board::before{display:none}
.wb-sprig{display:none}
.wb-ttl{left:9%; top:5.5%}
.wb-pcap{font-size:10.5px; bottom:4px}
.wb-card[data-act]{cursor:pointer}
/* квадратная доска */
.wb-board{aspect-ratio:1/1}
.wb-pin{width:26%; padding:4px 4px 17px}
.wb-ttl{left:6%; top:3.5%; font-size:15px}
.wb-pin{width:24.5%}

/* 03.11 «А что если…?»: та же льняная доска с лентами, что в «Карте желаний», пастельные стикеры на кусочках скотча */
.wnboard{aspect-ratio:1/1; border:0; border-radius:4px; padding:11% 10% 10%; gap:7% 6%; align-content:start; box-shadow:0 10px 24px rgba(80,60,40,.2); background:url("assets/tech/wish-board.webp") center/100% 100% no-repeat, #E9E1D3}
.wnst{border-radius:10px; padding:18px 12px 12px; min-height:0; font-size:16px; line-height:1.15; color:#5A4A55; box-shadow:0 4px 10px rgba(90,70,60,.16), inset 0 0 0 1px rgba(255,255,255,.55)}
.wnst::before{width:44px; height:14px; top:-6px; margin-left:-22px; border-radius:2px; background:rgba(255,255,255,.6); box-shadow:0 1px 2px rgba(0,0,0,.08); transform:rotate(-3deg)}
.wnst:nth-child(even)::before{transform:rotate(4deg)}
.wnboard{aspect-ratio:auto; min-height:300px; padding:46px 30px 40px; gap:16px 12px}
.wnst{font-size:14.5px; padding:16px 11px 11px}

/* 03.11 «Чек от Вселенной» — нарядный бланк: кремовая «мраморная» бумага, золотая двойная рамка с завитками, золотая печать, рукописные поля */
.chq{padding:0; border-radius:14px; color:#4A3B2A; background:none; box-shadow:0 14px 30px rgba(120,90,40,.22)}
.chq-in2{border:0; border-radius:14px; padding:30px 26px 26px; font-family:'Forum', Georgia, serif; font-size:13.5px; color:#5A4630;
  background:radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.9), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(236,220,190,.55), transparent 60%),
  repeating-linear-gradient(125deg, rgba(200,170,120,.06) 0 2px, transparent 2px 9px), linear-gradient(160deg, #FFFCF4, #F7EEDC 60%, #F3E6CC)}
.chq-in2::before{content:""; position:absolute; inset:9px; border:1.5px solid #C9A24E; border-radius:9px; box-shadow:inset 0 0 0 4px rgba(255,252,244,.9), inset 0 0 0 5px rgba(201,162,78,.55); pointer-events:none}
.chq-in2::after{content:""; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A24E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 60 C6 28 28 6 60 6'/%3E%3Cpath d='M14 62 C16 36 36 16 62 14'/%3E%3Cpath d='M60 6 C74 10 80 22 74 30 C68 37 58 32 62 25 C65 20 72 23 70 27'/%3E%3Cpath d='M6 60 C10 74 22 80 30 74 C37 68 32 58 25 62 C20 65 23 72 27 70'/%3E%3Cpath d='M30 30 C40 22 52 24 56 34'/%3E%3Cpath d='M30 30 C22 40 24 52 34 56'/%3E%3C/g%3E%3Cg fill='%23D9B867'%3E%3Cpath d='M40 38 q6 -10 14 -6 q-6 2 -8 10 z'/%3E%3Cpath d='M38 40 q-10 6 -6 14 q2 -6 10 -8 z'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E") 4px 4px/64px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A24E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 60 C6 28 28 6 60 6'/%3E%3Cpath d='M14 62 C16 36 36 16 62 14'/%3E%3Cpath d='M60 6 C74 10 80 22 74 30 C68 37 58 32 62 25 C65 20 72 23 70 27'/%3E%3Cpath d='M6 60 C10 74 22 80 30 74 C37 68 32 58 25 62 C20 65 23 72 27 70'/%3E%3Cpath d='M30 30 C40 22 52 24 56 34'/%3E%3Cpath d='M30 30 C22 40 24 52 34 56'/%3E%3C/g%3E%3Cg fill='%23D9B867'%3E%3Cpath d='M40 38 q6 -10 14 -6 q-6 2 -8 10 z'/%3E%3Cpath d='M38 40 q-10 6 -6 14 q2 -6 10 -8 z'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E") calc(100% - 4px) 4px/64px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A24E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 60 C6 28 28 6 60 6'/%3E%3Cpath d='M14 62 C16 36 36 16 62 14'/%3E%3Cpath d='M60 6 C74 10 80 22 74 30 C68 37 58 32 62 25 C65 20 72 23 70 27'/%3E%3Cpath d='M6 60 C10 74 22 80 30 74 C37 68 32 58 25 62 C20 65 23 72 27 70'/%3E%3Cpath d='M30 30 C40 22 52 24 56 34'/%3E%3Cpath d='M30 30 C22 40 24 52 34 56'/%3E%3C/g%3E%3Cg fill='%23D9B867'%3E%3Cpath d='M40 38 q6 -10 14 -6 q-6 2 -8 10 z'/%3E%3Cpath d='M38 40 q-10 6 -6 14 q2 -6 10 -8 z'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E") 4px calc(100% - 4px)/64px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A24E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 60 C6 28 28 6 60 6'/%3E%3Cpath d='M14 62 C16 36 36 16 62 14'/%3E%3Cpath d='M60 6 C74 10 80 22 74 30 C68 37 58 32 62 25 C65 20 72 23 70 27'/%3E%3Cpath d='M6 60 C10 74 22 80 30 74 C37 68 32 58 25 62 C20 65 23 72 27 70'/%3E%3Cpath d='M30 30 C40 22 52 24 56 34'/%3E%3Cpath d='M30 30 C22 40 24 52 34 56'/%3E%3C/g%3E%3Cg fill='%23D9B867'%3E%3Cpath d='M40 38 q6 -10 14 -6 q-6 2 -8 10 z'/%3E%3Cpath d='M38 40 q-10 6 -6 14 q2 -6 10 -8 z'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E") calc(100% - 4px) calc(100% - 4px)/64px no-repeat}
.chq-in2 > *{position:relative; z-index:1}
.chq-h{font-family:'Forum', Georgia, serif; font-weight:400; font-size:24px; letter-spacing:.18em; color:#8C6320; background:linear-gradient(180deg,#D9B867,#8C6320); -webkit-background-clip:text; background-clip:text; color:transparent}
.chq-sub{font-style:normal; font-weight:400; color:#A07B3C; font-size:12.5px; letter-spacing:.06em; margin:2px 0 14px}
.chq-row{font-weight:400; color:#7A6040}
.chq-f span, .chq-row > span{color:#8A7050; font-size:12px; letter-spacing:.03em}
.chq-f u, .chq-row u{border-bottom:1px solid rgba(201,162,78,.75); font-family:'Caveat','Bad Script',cursive; font-style:normal; font-weight:500; font-size:20px; color:#8C5A1E; line-height:1.05}
.chq-t{color:#6E5A42; font-size:12px; line-height:1.45}
.chq-foot{color:#8A7050; font-style:normal; align-items:flex-end} .chq-sign{font-family:'Caveat','Bad Script',cursive; font-size:22px; color:#8C5A1E}
.chq-stamp{border:0; color:transparent; width:78px; height:78px; padding:0; right:16px; bottom:16px; transform:rotate(-10deg); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23FFF3C4'/%3E%3Cstop offset='.45' stop-color='%23E2B85A'/%3E%3Cstop offset='1' stop-color='%23A9792A'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M50 2 L56 10 L66 6 L69 16 L80 16 L79 27 L89 31 L84 41 L92 49 L84 57 L89 67 L79 71 L80 82 L69 82 L66 92 L56 88 L50 96 L44 88 L34 92 L31 82 L20 82 L21 71 L11 67 L16 57 L8 49 L16 41 L11 31 L21 27 L20 16 L31 16 L34 6 L44 10 Z' fill='url%28%23g%29'/%3E%3Ccircle cx='50' cy='49' r='29' fill='none' stroke='%238C6320' stroke-width='1.2' opacity='.7'/%3E%3Ccircle cx='50' cy='49' r='10' fill='%23FFF1C2' opacity='.9'/%3E%3Cg stroke='%238C6320' stroke-width='1.6' opacity='.75'%3E%3Cpath d='M50 30 V36 M50 62 V68 M31 49 H37 M63 49 H69 M37 36 L41 40 M59 58 L63 62 M63 36 L59 40 M41 58 L37 62'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; font-size:0; filter:drop-shadow(0 3px 4px rgba(120,80,20,.35))}
.chq-paid{border:3px double #B8913F; color:#B8913F; background:rgba(255,250,236,.55); font-family:'Forum', Georgia, serif; font-weight:400; letter-spacing:.18em}
.chq-in2 > .chq-stamp, .chq-in2 > .chq-paid{position:absolute; z-index:2}
.chq-paid{font-size:28px; letter-spacing:.1em; padding:6px 14px}
.chq-foot{padding-right:86px}
.chq-in2{padding-bottom:40px} .chq-foot span{white-space:nowrap}
/* 03.11 чек на реалистичной бумаге (OpenAI): рамка, вензели и печать — на картинке */
.chq-in2{background:url("assets/tech/cheque-paper.webp") center/100% 100% no-repeat, #F6EEDD; padding:13% 11% 15%}
.chq-in2::before, .chq-in2::after{display:none}
.chq-in2 > .chq-stamp{display:none}
.chq-foot{padding-right:24%}
.chq-in2{padding:13% 11% 31%}
.chq-h{font-size:21px; letter-spacing:.12em}
.chq-foot{padding-right:0}
.chq-paid{font-size:24px; top:46%}

/* 03.11 «Костёр отпускания»: живой костёр в сумерках (OpenAI), догорает до углей */
.bf-scene{aspect-ratio:1/1; max-width:360px; background:#2A1A33; box-shadow:0 10px 26px rgba(40,20,50,.35)}
.bf-img{left:0; top:0; width:100%; height:100%; object-fit:cover}
.bf-flick{clip-path:inset(8% 25% 40% 25%); mix-blend-mode:screen; opacity:.4; transform-origin:50% 62%}
.bf-glow{top:48%; width:60%; margin-left:-30%; margin-top:-30%; mix-blend-mode:screen; background:radial-gradient(circle, rgba(255,190,90,0.55) 0%, rgba(255,140,50,0.22) 40%, rgba(255,120,40,0) 70%)}
.bf-scene.out .bf-glow{top:68%; opacity:.45}
.bf-flick{clip-path:none; -webkit-mask-image:radial-gradient(ellipse 22% 30% at 50% 45%, #000 40%, transparent 100%); mask-image:radial-gradient(ellipse 22% 30% at 50% 45%, #000 40%, transparent 100%); opacity:.35}
.chip.ssch{text-align:left; margin-bottom:2px}
/* 03.11: «Три слова» — пароль на бумажке */
.pwnote{position:relative; margin:14px auto 6px; max-width:300px; padding:22px 18px 16px; text-align:center; background:#FFF8E8; background-image:radial-gradient(rgba(190,150,90,.08) 1px, transparent 1px); background-size:6px 6px; border-radius:4px; transform:rotate(-1.5deg); box-shadow:0 6px 16px rgba(80,50,20,.16), inset 0 0 0 1px rgba(200,170,120,.35)}
.pwtape{position:absolute; top:-10px; left:50%; width:84px; height:22px; margin-left:-42px; background:rgba(242,200,214,.75); transform:rotate(2deg); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pwlabel{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#B08A4E}
.pwwords{margin:6px 0 0; font-family:'Caveat', 'Bad Script', cursive; font-size:30px; line-height:1.15; color:#2B3A8C; overflow-wrap:anywhere}
.pwwhen{margin:0; padding:10px 12px; border-left:3px solid var(--f2); background:rgba(255,255,255,.55); border-radius:0 8px 8px 0}
.pwwords span{display:block}
.pwnote{margin:12px auto 4px; padding:18px 18px 12px; min-width:200px} .pwwords{font-size:27px; line-height:1.1}
.pwrec p.small{margin:0 0 6px} .pwrec .row{flex-wrap:nowrap; gap:8px} .pwrec .row .btn{flex:1; padding-inline:8px}
/* 03.11: стол сверху (бархат) — для раскладочных техник; таблички «Знаков чисел» */
.rtable.rtimg.top{aspect-ratio:720/689; width:calc(100% + 32px); max-width:none; margin-inline:-16px; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%)}
.rtable.rtimg.top > .rt-at{margin-top:0}
.nmp{position:relative; width:64px; aspect-ratio:1; border:0; background:none; padding:0; cursor:pointer; filter:drop-shadow(0 5px 6px rgba(0,0,0,.55)); transition:transform .25s, filter .25s}
.nmp img{width:100%; height:100%; display:block; pointer-events:none}
.nmp span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-size:18px; letter-spacing:.02em; color:#F6DA8C; text-shadow:0 1px 0 rgba(60,30,0,.9), 0 -1px 0 rgba(255,240,190,.35); pointer-events:none}
.nmp span.sm{font-size:14px}
.nmp.on{transform:translate(-50%, -50%) scale(1.12); filter:drop-shadow(0 5px 6px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,214,120,.9))}
.rtable .nmp.rt-at:not(.on){opacity:.92}
.nmc{position:absolute; left:50%; top:47%; transform:translate(-50%, -50%); animation:talFloat 2.6s ease-in-out infinite}
.nmp.big{width:132px; cursor:default; filter:drop-shadow(0 8px 8px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,214,120,.8))}
.nmp.big span{font-size:34px} .nmp.big span.sm{font-size:26px}
.nmhint{position:absolute; left:50%; top:47%; transform:translate(-50%, -50%); margin:0; color:rgba(255,236,200,.75); font-size:14px; white-space:nowrap}
.nmmean{margin:4px 0 0; text-align:center} .nmown{margin-top:4px}
.nmp.mini{width:52px; flex:none; cursor:default} .nmp.mini span{font-size:14px} .nmp.mini span.sm{font-size:11px}
.nmitem{display:flex; gap:10px; align-items:center}
@media (prefers-reduced-motion: reduce){ .nmc{animation:none} }
.nmp.rt-at{position:absolute} .nmc, .nmhint{top:48.5%}
.nmlist{gap:12px} .nmlist .nmitem{display:flex; flex-direction:row; gap:12px; align-items:center; text-align:left} .nmlist .nmitem + .nmitem{border-top:1px solid rgba(120,80,110,.15); padding-top:12px}
/* 03.11: «Рисую став» — деревянная дощечка на столе сверху */
.stv-top{width:44%; aspect-ratio:390/601}
.stv-top .stvb, .stv-ready .stvb{position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)); pointer-events:none}
.stv-top .runestage{position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%); margin:0}
.stv-top .runestage .rguide{stroke:rgba(255,240,205,.95); filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
.stv-ready{width:74%; aspect-ratio:601/390}
.stv-ready .stvb{width:64.9%; height:auto; aspect-ratio:390/601; left:50%; top:50%; inset:auto; transform:translate(-50%, -50%) rotate(90deg)}
.stv-ready svg{position:absolute; inset:6% 4%; width:92%; height:88%; overflow:visible}
.stv-ready .rdone{fill:none; stroke:#FFD36B; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px #FFB83D)}
.runechip svg path{stroke:rgba(255,236,200,.4)} .runechip b{color:rgba(255,236,200,.55)}
.runechip.now svg path{stroke:#fff} .runechip.now b{color:#fff}
.runechip.lit svg path{stroke:#FFD36B; filter:drop-shadow(0 0 3px #FFB83D)} .runechip.lit b{color:#FFD36B}
.stv-ready .stvb{width:100%; height:100%; aspect-ratio:auto; left:0; top:0; inset:0; transform:none}
.stv-top{height:auto}
/* 03.11: «Личный код» — камни/монеты на столе сверху, цифры видны */
.mc-top{position:absolute; width:19%; aspect-ratio:1; border:0; background:none; padding:0; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 5px 6px rgba(0,0,0,.55)); transition:filter .3s, transform .3s}
.mc-top img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none}
.mc-top b{position:relative; font-family:var(--f-display); font-size:30px; line-height:1; pointer-events:none}
.mc-top.st b{color:rgba(235,240,250,.9); text-shadow:0 1px 0 rgba(0,0,0,.7), 0 -1px 0 rgba(255,255,255,.25)}
.mc-top.cn b{color:#6B4A12; text-shadow:0 1px 0 rgba(255,236,170,.7)}
.mc-top.lit{filter:drop-shadow(0 5px 6px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,214,120,.95))}
.mc-top.lit.st b{color:#FFE9A8}
.mc-top.next{transform:translate(-50%, -50%) scale(1.08); animation:mcPulse 1.4s ease-in-out infinite}
.mc-top:disabled{cursor:default}
.mc-top .mc-say{position:absolute; top:-28px; left:50%; transform:translateX(-50%); font-style:normal; color:#FFE9A8; font-size:15px; white-space:nowrap}
.mc-top .mc-hand{position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); font-style:normal; font-size:20px}
@keyframes mcPulse{50%{filter:drop-shadow(0 5px 6px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,236,190,.9))}}
details.decode{margin:6px 0; text-align:left} details.decode summary{cursor:pointer; color:#F3C97A; font-size:14px; text-decoration:underline; text-underline-offset:3px; list-style:none; text-align:center} details.decode summary::-webkit-details-marker{display:none}
details.decode[open]{background:rgba(255,255,255,.06); border-radius:12px; padding:8px 12px} details.decode p{margin:6px 0 0}
@media (prefers-reduced-motion: reduce){ .mc-top.next{animation:none} }
.pp-top span{position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:4px; font-size:12px; color:rgba(255,236,200,.85); white-space:nowrap; letter-spacing:.03em}
.pp-top.key{filter:drop-shadow(0 5px 6px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,214,120,.8))} .pp-top.key b{color:#FFE9A8}
.pp-top{transform:translate(-50%, -50%)}
/* 03.11: «Три двери» — две сверху, одна снизу; дверь распахивается, выходит карточка */
.drpage{position:relative}
.dr3wrap{display:flex; flex-direction:column; gap:6px; margin:4px 0}
.dr3row{display:flex; justify-content:center; gap:14px} .dr3row.one{margin-top:-4px}
.dr3{width:42%; max-width:150px; border:0; background:none; padding:0; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer}
.dr3-img{position:relative; width:100%; aspect-ratio:330/494; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.dr3-img img{position:absolute; inset:0; width:100%; height:100%; transition:opacity .7s ease}
.dr3-img .o{opacity:0} .dr3.open .dr3-img .o{opacity:1} .dr3.open .dr3-img .c{opacity:0}
.dr3.open .dr3-img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,214,120,.75))}
.dr3-l{font-size:12.5px; color:rgba(255,236,200,.92); letter-spacing:.02em}
.drover{position:absolute; inset:-8px; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(30,15,40,.72); border-radius:18px; backdrop-filter:blur(3px); cursor:pointer; animation:drFade .35s ease}
.drc{position:relative; width:78%; max-width:290px; aspect-ratio:330/483} .drc > img{position:absolute; inset:0; width:100%; height:100%}
.drc.big{animation:drRise .7s cubic-bezier(.2,.8,.3,1)}
.drc-in{position:absolute; inset:15% 15% 13%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; color:#4A3346}
.drc-in b{font-family:var(--f-display); font-size:22px; font-weight:400; color:#6B3F5E} .drc-in p{margin:0; font-size:14.5px; line-height:1.35} .drc-in .small{font-size:12.5px; opacity:.85}
.drc-n{font-family:var(--f-display); color:#B08A4E; font-size:15px; letter-spacing:.1em}
.drq{font-family:var(--f-display); font-size:19px !important; color:#5A2F4E}
.drhint{font-size:12px; color:rgba(255,236,200,.75)}
@keyframes drRise{from{opacity:0; transform:translateY(40px) scale(.6)} to{opacity:1; transform:none}}
@keyframes drFade{from{opacity:0}}
.drsum{display:flex; flex-direction:column; gap:10px} .drsum-i{display:flex; gap:10px; align-items:flex-start; background:rgba(255,248,236,.94); color:#4A3346; border-radius:14px; padding:10px 12px} .drsum-i p{margin:2px 0 0; font-size:14px} .drsum-i .drq{font-size:16px !important} .drsum-i b{font-family:var(--f-display); font-weight:400; font-size:17px; color:#6B3F5E}
@media (prefers-reduced-motion: reduce){ .drc.big, .drover{animation:none} }
.dr3-l{color:var(--ink); font-weight:600} .drsum{gap:6px} .drsum-i{padding:8px 12px} .drsum-i p{font-size:13.5px; line-height:1.3}
/* 04.11: карты колоды SEVENRINGS (js/deck.js) — рубашка/лицо, переворот, веер на столе */
.dk{display:inline-block; position:relative; width:72px; aspect-ratio:2/3; perspective:900px; vertical-align:middle}
.dk-in{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.3,.8,.3,1)}
.dk.open .dk-in{transform:rotateY(180deg)}
.dk-b, .dk-f{position:absolute; inset:0; border-radius:7px; backface-visibility:hidden; -webkit-backface-visibility:hidden; background-size:cover; background-position:center; box-shadow:0 5px 12px rgba(0,0,0,.45)}
.dk-b{background-image:url(assets/deck/back.webp)} .dk-f{transform:rotateY(180deg)}
.dk.flip .dk-in{animation:dkFlip 1s cubic-bezier(.3,.8,.3,1) both} @keyframes dkFlip{from{transform:rotateY(0)} to{transform:rotateY(180deg)}}
.dk-fan{width:22%; border:0; background:none; padding:0; cursor:pointer; transform:translate(-50%, -50%) rotate(var(--r)); transition:transform .25s}
.dk-fan .dk{width:100%} .dk-fan:hover, .dk-fan:focus-visible{transform:translate(-50%, -56%) rotate(var(--r)); outline:none}
.dk-fan:hover .dk-b, .dk-fan:focus-visible .dk-b{box-shadow:0 0 0 2px #E3BE79, 0 0 16px rgba(255,214,120,.8)}
.dk-center{left:50%; top:48.5%; width:44%} .dk-center .dk{width:100%}
.dk-mid{width:140px}
.dk-say{text-align:center; display:flex; flex-direction:column; gap:4px; margin-top:4px} .dk-say p{margin:0}
@media (prefers-reduced-motion: reduce){ .dk-in, .dk.flip .dk-in{transition:none; animation:none} }
.dk-center{width:36%}
/* 04.11: Тайная комната на колоде */
.dk-pile{position:relative; width:110px; height:150px; border:0; background:none; padding:0; cursor:pointer}
.dk-pile .dk{position:absolute; left:10px; top:6px; width:88px} .dk-pile .dk:nth-child(1){transform:translate(-5px, 5px) rotate(-4deg)} .dk-pile .dk:nth-child(2){transform:translate(-2px, 2px) rotate(2deg)}
.dk-pile:hover .dk:last-child .dk-b{box-shadow:0 0 0 2px #E3BE79, 0 0 16px rgba(255,214,120,.8)} .dk-pile:disabled{opacity:.5; cursor:default}
.dk-pile.shuf .dk:last-child{animation:dkShuf .5s ease-in-out infinite alternate} @keyframes dkShuf{to{transform:translateX(14px) rotate(6deg)}}
.dk-room{width:150px}
.dk-yn{font-family:var(--f-display); font-size:30px; color:var(--b2, #8E3B67)}
.dk-stack{width:15%; border:0; background:none; padding:0} .dk-stack .dk{width:100%} .dk-stack em{position:absolute; top:100%; left:50%; transform:translateX(-50%); font-style:normal; font-size:10.5px; color:#fff; text-shadow:0 1px 3px #000; white-space:nowrap}
.dk-stack.now{cursor:pointer; animation:dkPulse 1.6s ease-in-out infinite} .dk-stack.now .dk-b{box-shadow:0 0 0 2px #E3BE79, 0 0 16px rgba(255,214,120,.85)}
.dk-stack:not(.now):not(.done){opacity:.8} @keyframes dkPulse{50%{transform:translate(-50%, -50%) scale(1.07)}}
.dk-verdict{text-align:center; padding:10px; border-radius:14px; background:color-mix(in srgb, var(--g1, #f6e7c8) 60%, #fff)} .dk-verdict b{font-family:var(--f-display); font-size:24px; font-weight:400} .dk-verdict p{margin:4px 0 0}
.dk-row{border-radius:12px; background:rgba(255,255,255,.6); padding:8px} .dk-row summary{display:flex; gap:10px; align-items:center; cursor:pointer; list-style:none} .dk-row summary::-webkit-details-marker{display:none}
.dk-row summary .dk{width:44px; flex:none} .dk-row summary > span{display:flex; flex-direction:column; min-width:0} .dk-row p{margin:6px 0 0}
@media (prefers-reduced-motion: reduce){ .dk-stack.now, .dk-pile.shuf .dk:last-child{animation:none} }
.rtable.rtimg.top.short{aspect-ratio:720/500} .rtable.rtimg.top.short .rtbg{height:100%; object-fit:cover} .rtable.top.short .dk-center{top:50%; width:30%}
/* 04.11: кнопка звука на первых экранах */
.sndfab{position:fixed; z-index:50; top:calc(12px + env(safe-area-inset-top, 0px)); right:calc(12px + env(safe-area-inset-right, 0px)); width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,.15); background:rgba(255,255,255,.88); color:#2B2230; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15); padding:0}
.sndfab svg{width:22px; height:22px} .sndfab[aria-pressed="true"]{color:#8a8090}
/* 04.11: рука-подсказка (js/handhint.js): кончик пальца — в центре цели */
.handhint{position:absolute; z-index:60; width:0; height:0; pointer-events:none; animation:hhIn .4s ease both}
.handhint svg{position:absolute; left:-17px; top:-2px; width:44px; height:55px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); transform-origin:40% 10%}
.handhint .hh-ring{position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; border:2px solid rgba(245,243,248,.9); box-shadow:0 0 0 1px rgba(55,45,65,.25); opacity:0}
.handhint.tap svg{animation:hhTap 1.3s ease-in-out infinite} .handhint.tap .hh-ring{animation:hhRing 1.3s ease-out infinite}
.handhint.hold svg{animation:hhHold 2.4s ease-in-out infinite} .handhint.hold .hh-ring{animation:hhRingHold 2.4s ease-out infinite}
@keyframes hhIn{from{opacity:0}}
@keyframes hhTap{0%,100%{transform:translate(6px, 10px)} 40%{transform:translate(0, 0) scale(.93)} 55%{transform:translate(0, 0) scale(.93)}}
@keyframes hhRing{0%,38%{opacity:0; transform:scale(.4)} 45%{opacity:.9} 100%{opacity:0; transform:scale(1.6)}}
@keyframes hhHold{0%{transform:translate(6px, 10px)} 20%,80%{transform:translate(0, 0) scale(.92)} 100%{transform:translate(6px, 10px)}}
@keyframes hhRingHold{0%,18%{opacity:0; transform:scale(.4)} 25%{opacity:.9; transform:scale(.6)} 80%{opacity:.6; transform:scale(2)} 100%{opacity:0; transform:scale(2.2)}}
@media (prefers-reduced-motion: reduce){ .handhint svg, .handhint .hh-ring{animation:none} .handhint .hh-ring{opacity:.6} }
/* 04.11: первая страница дневника самопрограммирования */
.dy-intro{display:flex; flex-direction:column; gap:8px}
.dyi-page{position:relative; display:flex; flex-direction:column; gap:10px; padding:18px 16px 16px; border-radius:6px 16px 16px 6px; background-color:#FFFDF7; background-image:linear-gradient(transparent 27px, rgba(120,160,210,.22) 28px); background-size:100% 28px; box-shadow:0 6px 20px rgba(60,30,60,.18), inset 6px 0 0 rgba(140,123,184,.35)}
.dyi-page > small{text-align:center; letter-spacing:.2em; text-transform:uppercase; color:#8C7BB8; font-size:11px} .dyi-page > h3{text-align:center; margin:-6px 0 0; font-size:24px; color:#4A3346}
.dyi-lead{margin:0; text-align:center; font-size:14.5px; color:#4A3346}
.dyi-steps{display:flex; flex-direction:column; gap:8px} .dyi-step{display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.75); border-radius:12px; padding:7px 10px}
.dyi-ic{font-size:20px; line-height:1.2} .dyi-step b{display:block; font-size:14px; color:#4A3346} .dyi-step span{font-size:12.5px; color:#6c5d70; line-height:1.35}
.dyi-ex{position:relative; height:132px; border-radius:10px; background:#FFFDF7; background-image:linear-gradient(transparent 25px, rgba(120,160,210,.3) 26px); background-size:100% 26px; box-shadow:inset 0 0 0 1px rgba(180,160,190,.35); overflow:hidden}
.dyi-lines{position:absolute; left:10px; top:4px; right:110px; font-family:'Caveat', 'Bad Script', cursive; font-size:19px; line-height:26px; color:#2B4B9B} .dyi-lines p{margin:0} .dyi-lines span{color:#8C7BB8}
.dyi-lines mark{background:rgba(255,226,74,.6); color:inherit; border-radius:3px; padding:0 2px}
.dyi-photo{position:absolute; right:12px; top:14px; width:84px; padding:5px 5px 14px; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.2); transform:rotate(5deg)} .dyi-photo img{display:block; width:100%; aspect-ratio:1; object-fit:cover}
.dyi-photo i{position:absolute; top:-7px; left:22px; width:40px; height:14px; background:rgba(242,200,214,.8); transform:rotate(-6deg)}
.dyi-st{position:absolute; width:30px; height:30px} .dyi-st svg{width:100%; height:100%} .dyi-st.s1{right:96px; bottom:8px; transform:rotate(-12deg)} .dyi-st.s2{right:8px; bottom:6px; width:26px; height:26px} .dyi-st.s3{left:62%; top:2px; width:22px; height:22px}
.dyi-page{gap:9px; padding:14px 14px 14px; line-height:1.35} .dyi-lead{font-size:14px; line-height:1.4}
.dyi-steps{display:grid; grid-template-columns:1fr 1fr; gap:7px} .dyi-step{flex-direction:column; gap:2px; padding:8px 9px; line-height:1.3} .dyi-step b{font-size:13.5px} .dyi-step span{font-size:12px; line-height:1.3} .dyi-ic{font-size:18px}
.dyi-ex{height:118px} .dyi-page .eyebrow{margin-bottom:-4px}
.dyi-ex{height:144px} .dyi-lines{right:104px}
.dk-cheer{margin:4px 0 0; font-family:var(--f-display); font-size:17px; color:#F3C97A}
.rtable.rtimg.top.short{aspect-ratio:720/430} .rtable.top.short .dk-center{width:27%}
/* 04.11: имя фамильяра в его комнате */
.foxnamebtn{align-self:center; border:0; background:rgba(255,255,255,.85); color:#4A3346; border-radius:999px; padding:6px 14px; font:inherit; font-size:14px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.foxname{display:flex; gap:8px; align-items:center} .foxname .in{flex:1}