/* Портал — стили новых разделов: оракул, нумерология, ритуалы, звуки, капсула, колесо, копилка, марафон, календарь */

/* Оракул: карты */
.ocard{position:relative;width:var(--cw,180px);aspect-ratio:2/3;border-radius:calc(var(--cw,180px) * .09);flex:none}
.ocard .face,.ocard .back{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.flip{perspective:1200px}
.flip .flip-in{position:absolute;inset:0;border-radius:inherit;transition:transform .9s var(--ease);transform-style:preserve-3d}
.flip.open .flip-in{transform:rotateY(180deg)}
.flip .face{transform:rotateY(180deg)}
.face{background:linear-gradient(160deg,hsl(var(--h) 55% 34%),hsl(calc(var(--h) + 35) 60% 13%) 78%);border:1px solid rgba(242,203,126,.55);box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 0 40px rgba(0,0,0,.35);color:#fff6e6}
.face .oc-in{position:absolute;inset:calc(var(--cw,180px) * .05);border:1px solid rgba(242,203,126,.45);border-radius:calc(var(--cw,180px) * .06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;text-align:center}
.face .oc-in::before,.face .oc-in::after{content:'✦';position:absolute;left:50%;transform:translateX(-50%);color:#f2cb7e;font-size:calc(var(--cw,180px) * .065);opacity:.8}
.face .oc-in::before{top:4px}
.face .oc-in::after{bottom:4px}
.oc-num{position:absolute;top:8px;left:10px;font-family:var(--font-head);font-size:calc(var(--cw,180px) * .075);color:#f2cb7e;opacity:.85}
.oc-sym{width:48%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,240,200,.25),transparent 70%);margin-bottom:4px}
.oc-sym svg{width:62%;height:62%;color:#f6d692;stroke-width:1.3;filter:drop-shadow(0 0 10px rgba(246,214,146,.6))}
.oc-name{font-family:var(--font-head);font-size:calc(var(--cw,180px) * .125);font-weight:700;line-height:1.05}
.oc-key{font-size:calc(var(--cw,180px) * .06);letter-spacing:.1em;text-transform:uppercase;color:#f2cb7e;opacity:.9;line-height:1.3}
.back{background:radial-gradient(circle at 50% 40%,#3b2a8f 0%,#17113f 55%,#0b0920 100%);border:1px solid rgba(242,203,126,.5);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.back::before{content:'';position:absolute;inset:calc(var(--cw,180px) * .05);border:1px solid rgba(242,203,126,.35);border-radius:calc(var(--cw,180px) * .06);background-image:radial-gradient(rgba(255,255,255,.8) 1px,transparent 1.5px),radial-gradient(rgba(242,203,126,.6) 1px,transparent 1.5px);background-size:22px 22px,37px 37px;background-position:0 0,11px 17px;opacity:.5}
.back .emb{position:absolute;inset:0;display:grid;place-items:center;color:#f2cb7e}
.back .emb svg{width:36%;height:36%;stroke-width:1.2;filter:drop-shadow(0 0 12px rgba(242,203,126,.6))}
.oc-mini .oc-name,.oc-mini .oc-key,.oc-mini .oc-num,.oc-mini .oc-in::before,.oc-mini .oc-in::after{display:none}
.fan{display:flex;justify-content:center;align-items:flex-start;padding:30px 30px 10px;min-height:250px}
.fan .ocard{--cw:122px;margin:0 -20px;cursor:pointer;transform:rotate(var(--r)) translateY(var(--y));transition:transform .25s var(--ease),opacity .3s}
.fan .ocard:hover{transform:rotate(var(--r)) translateY(calc(var(--y) - 20px));z-index:2}
.fan .ocard.picked{opacity:.12;pointer-events:none}
.fan:empty{min-height:0;padding:0}
.fan.shuffle .ocard{animation:shuffle .7s ease-in-out}
@keyframes shuffle{30%{transform:translateY(-14px) rotate(-7deg)}65%{transform:translateY(8px) rotate(6deg)}}
.spread{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:10px}
.slot-c{display:flex;flex-direction:column;align-items:center;gap:10px}
.slot-c .pos{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800}
.slot-empty{width:var(--cw,180px);aspect-ratio:2/3;border-radius:16px;border:1px dashed var(--line-3);display:grid;place-items:center;color:var(--muted);font-size:13px}
.reading{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:26px}
.yn-big{font-family:var(--font-head);font-size:68px;font-weight:700;text-align:center;line-height:1;margin:6px 0}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;justify-items:center}
.deck-grid .ocard{cursor:pointer;transition:transform .2s}
.deck-grid .ocard:hover{transform:translateY(-4px)}

/* Нумерология */
.num-big{width:124px;height:124px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-size:66px;font-weight:700;color:var(--gold);background:radial-gradient(circle,var(--gold-soft),transparent 70%);border:1px solid rgba(242,203,126,.45);box-shadow:0 0 50px var(--gold-shadow)}
.num-sm{width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-size:30px;font-weight:700;color:var(--gold);background:var(--gold-soft);border:1px solid rgba(242,203,126,.4)}

/* Ритуалы */
.rit-wrap{max-width:720px;margin:0 auto;text-align:center}
.rit-ico{width:84px;height:84px;margin:0 auto 14px;border-radius:26px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);border:1px solid rgba(242,203,126,.4)}
.rit-ico svg{width:40px;height:40px}
.rit-body{margin:22px auto 0;max-width:620px;text-align:left}
.rit-list{display:flex;flex-direction:column;gap:6px}
.rit-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.rit-item svg{color:var(--gold)}
.rit-card{display:flex;flex-direction:column;gap:10px}
.rit-card .done-mark{color:var(--teal);font-weight:800;font-size:13px}

/* Звуки */
.mix{transition:border-color .2s,background .2s}
.mix.on{border-color:var(--gold);background:var(--gold-soft)}
.mix.on .btn{border-color:var(--gold)}

/* Капсула времени */
.envelope{position:relative;aspect-ratio:1.6/1;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#fff4dd,#e8d1a2);box-shadow:0 16px 40px rgba(0,0,0,.35);color:#3a2a10}
.env-flap{position:absolute;left:0;right:0;top:0;height:58%;background:linear-gradient(180deg,#f3e2bd,#e2c78f);clip-path:polygon(0 0,100% 0,50% 100%);box-shadow:0 2px 0 rgba(0,0,0,.05)}
.env-seal{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#d9534f,#8e1f2b);color:#ffe6c4;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.env-seal svg{width:26px;height:26px}
.env-info{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;gap:10px;font-size:13px}
.env-info b{font-family:var(--font-head);font-size:18px}
.envelope.ready{cursor:pointer;animation:envGlow 2.4s ease-in-out infinite}
.envelope.ready:hover{transform:translateY(-3px)}
@keyframes envGlow{50%{box-shadow:0 0 0 3px rgba(242,203,126,.6),0 0 50px rgba(242,203,126,.45)}}
.letter{background:linear-gradient(180deg,#fffaf0,#f3e6c8);color:#3a2a10;border-radius:18px;padding:40px 44px;font-family:var(--font-head);font-size:23px;line-height:1.6;white-space:pre-wrap;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:slideIn 1.4s var(--ease);max-height:62vh;overflow:auto}

/* Сильные даты */
.pd-sun{color:var(--gold)}
.pd-moon{color:var(--violet);background:var(--violet-soft)}
.pd-mirror{color:var(--pink);background:var(--pink-soft)}
.pd-fest{color:var(--teal);background:var(--teal-soft)}
.pd-personal{color:var(--gold);box-shadow:0 0 20px var(--gold-shadow)}

/* Сегодня: намерение, письмо из прошлого */
.intent{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 14px;border-radius:999px;background:var(--gold-soft);border:1px solid rgba(242,203,126,.35);font-weight:700;font-size:14px}
.intent svg{width:16px;height:16px;color:var(--gold)}
.capsule-alert{display:flex;align-items:center;gap:16px;cursor:pointer;border-color:rgba(242,203,126,.5);animation:envGlow 2.4s ease-in-out infinite}

/* Синхронизация */
.sync-code{display:inline-block;font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:.06em;padding:10px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);margin:4px 0 12px;color:var(--gold)}
.sync-code.big{display:block;text-align:center;font-size:24px;padding:18px}

/* ---- end of extra.css ---- */