/* ═══════════════════════════════════════════════════════════════
   ОРБИТА СУДЕБ v2 — планеты-сферы, нити связей, панель смысла,
   просмотр кадров. Фото везде показываются целиком (contain).
   Классы fate-/fp-/fx-/fv- не пересекаются со старыми orbit-*,
   которые остаются для страницы ладоней.
   ═══════════════════════════════════════════════════════════════ */

.fate { padding: 72px 0 10px; }
.fate .section-title { text-align: left; }

.fate-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    margin-top: 30px;
    align-items: stretch;
}

/* ── Сцена ───────────────────────────────────────────────────── */

.fate-stage {
    position: relative;
    height: clamp(430px, 56vw, 610px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--line, rgba(110, 200, 255, .16));
    border-radius: 4px;
    background:
        radial-gradient(52% 50% at 50% 50%, rgba(85, 128, 247, .2), transparent 72%),
        radial-gradient(38% 38% at 14% 86%, rgba(94, 226, 240, .08), transparent 70%),
        radial-gradient(34% 34% at 90% 12%, rgba(255, 179, 71, .06), transparent 70%),
        rgba(4, 8, 16, .62);
}

.fate-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Око Оракула: главное фото целиком внутри вращающегося кольца */
.fate-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 190px; height: 190px;
    transform: translate(-50%, -50%);
    z-index: 5;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.fate-core::before {
    content: '';
    position: absolute; inset: 6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0, rgba(94, 226, 240, .95) 12%, transparent 30%, rgba(255, 179, 71, .85) 52%, transparent 70%, rgba(85, 128, 247, .95) 86%, transparent);
    -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 71%, transparent 72%);
            mask: radial-gradient(circle, transparent 66%, #000 67%, #000 71%, transparent 72%);
    filter: drop-shadow(0 0 8px rgba(94, 226, 240, .6));
    animation: fate-spin 12s linear infinite;
}
.fate-core::after {
    content: '';
    position: absolute; inset: -34px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 226, 240, .3), transparent 66%);
    animation: fate-breathe 5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
.fate-core-frame {
    position: absolute; left: 50%; top: 50%;
    width: var(--cw, 118px); height: var(--ch, 118px);
    transform: translate(-50%, -50%);
    display: grid; place-items: center;
    background: #091120;
    border: 1px solid rgba(168, 246, 255, .65);
    box-shadow: 0 0 0 5px rgba(4, 7, 13, .88), 0 0 44px rgba(94, 226, 240, .5);
    transition: box-shadow .4s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.fate-core:hover .fate-core-frame,
.fate-core:focus-visible .fate-core-frame {
    transform: translate(-50%, -50%) scale(1.07);
    box-shadow: 0 0 0 5px rgba(4, 7, 13, .88), 0 0 70px rgba(94, 226, 240, .85);
}
.fate-core-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fate-core-frame .fp-glyph { font-size: 44px; color: var(--solar, #ffb347); }

.fate-tag {
    position: absolute; left: 50%; top: 100%;
    transform: translate(-50%, 6px);
    padding: 2px 9px;
    font-family: var(--font-display, 'Unbounded', sans-serif);
    font-size: 10.5px; font-weight: 500;
    white-space: nowrap;
    color: var(--ink, #e8f1ff);
    background: rgba(4, 7, 13, .84);
    border: 1px solid var(--line-hot, rgba(94, 226, 240, .46));
    border-radius: 2px;
    pointer-events: none;
}
.fate-core .fate-tag { top: auto; bottom: 2px; transform: translate(-50%, 0); }

/* ── Планеты ─────────────────────────────────────────────────── */

.fp {
    --pc: #5580f7;
    position: absolute; left: 0; top: 0;
    width: var(--s, 84px); height: var(--s, 84px);
    margin: calc(var(--s, 84px) / -2) 0 0 calc(var(--s, 84px) / -2);
    padding: 0; border: 0; background: none;
    cursor: pointer;
    will-change: transform;
    z-index: 1;
}
.fp-ball {
    position: relative; display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--pc) 70%, #fff) 0, var(--pc) 38%, color-mix(in srgb, var(--pc) 35%, #02040a) 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 70%, transparent), 0 0 26px color-mix(in srgb, var(--pc) 45%, transparent), inset -8px -10px 22px rgba(0, 0, 0, .55);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
/* размытая копия самого фото красит шар, резкое фото лежит поверх целиком */
.fp-ball i { position: absolute; inset: -18%; background-size: cover; background-position: center; filter: blur(9px) saturate(1.25); opacity: .92; }
.fp-ball::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .34), transparent 46%), linear-gradient(135deg, color-mix(in srgb, var(--pc) 30%, transparent), transparent 60%);
}
.fp-ball img {
    position: absolute; left: 13%; top: 13%;
    width: 74%; height: 74%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .65));
}
.fp-glyph {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center;
    font-size: calc(var(--s, 84px) * .46);
    color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .5);
}
.fp-g {
    position: absolute; right: -3px; bottom: -3px; z-index: 3;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    font-size: 12px; color: #fff;
    background: rgba(4, 7, 13, .92);
    border: 1px solid var(--pc);
    border-radius: 50%;
}
.fp .fate-tag { top: calc(100% + 2px); }
.fp:hover .fp-ball, .fp:focus-visible .fp-ball, .fp.sel .fp-ball {
    transform: scale(1.14);
    box-shadow: 0 0 0 1px var(--pc), 0 0 46px color-mix(in srgb, var(--pc) 75%, transparent), inset -8px -10px 22px rgba(0, 0, 0, .5);
}
.fp.sel::before {
    content: ''; position: absolute; inset: -10px; border-radius: 50%;
    border: 1px solid var(--pc);
    animation: fate-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
.fp.is-day::after {
    content: ''; position: absolute; inset: -7px; border-radius: 50%;
    border: 1.5px dashed var(--solar, #ffb347);
    animation: fate-spin 18s linear infinite;
    pointer-events: none;
}
.fp.is-day .fate-tag { color: #ffd9a0; border-color: var(--solar, #ffb347); }

/* ── Панель смысла ───────────────────────────────────────────── */

.fate-panel {
    --pc: #5ee2f0;
    display: flex; flex-direction: column; gap: 12px;
    padding: 22px 22px 20px;
    border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent);
    border-radius: 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 10%, rgba(8, 14, 28, .84)), rgba(6, 10, 20, .88));
    box-shadow: 0 0 60px color-mix(in srgb, var(--pc) 14%, transparent);
    transition: border-color .4s, box-shadow .4s;
}
.fate-panel.swap > * { animation: fate-in .45s both; }
.fate-panel.swap > *:nth-child(2) { animation-delay: .05s; }
.fate-panel.swap > *:nth-child(3) { animation-delay: .1s; }
.fate-panel.swap > *:nth-child(4) { animation-delay: .15s; }
.fate-panel.swap > *:nth-child(5) { animation-delay: .2s; }

.fx-head { display: flex; gap: 14px; align-items: center; }
.fx-g {
    flex: none; width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 26px; color: #fff;
    background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--pc) 65%, #fff), var(--pc) 45%, color-mix(in srgb, var(--pc) 30%, #000));
    box-shadow: 0 0 26px color-mix(in srgb, var(--pc) 55%, transparent);
}
.fx-name { margin: 0; font-family: var(--font-display, 'Unbounded', sans-serif); font-size: 20px; font-weight: 600; color: var(--ink, #e8f1ff); }
.fx-sphere { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--pc); }
.fx-badge {
    align-self: flex-start;
    padding: 3px 10px;
    font-size: 12.5px; font-weight: 600;
    color: #ffd9a0;
    border: 1px solid var(--solar, #ffb347);
    border-radius: 2px;
    background: rgba(255, 179, 71, .08);
}
.fx-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text, #dfe9fb); }
.fx-moon { margin: 0; font-size: 13.5px; color: var(--muted, #8b9dbd); }
.fx-sub { margin: 4px 0 0; font-family: var(--font-display, 'Unbounded', sans-serif); font-size: 13px; font-weight: 500; color: var(--muted, #8b9dbd); }
.fx-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fx-link {
    --lc: #5ee2f0;
    display: grid; gap: 3px; width: 100%;
    padding: 10px 12px 10px 14px;
    text-align: left; font: inherit; cursor: pointer;
    color: var(--text, #dfe9fb);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line, rgba(110, 200, 255, .16));
    border-left: 3px solid var(--lc);
    border-radius: 3px;
    transition: border-color .2s, background .2s;
}
.fx-link:hover, .fx-link:focus-visible { border-color: var(--lc); background: rgba(255, 255, 255, .07); }
.fx-link b { font-family: var(--font-display, 'Unbounded', sans-serif); font-size: 12.5px; font-weight: 500; color: var(--lc); }
.fx-link span { font-size: 13px; line-height: 1.45; color: var(--muted, #8b9dbd); }
.fx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.fx-btn {
    padding: 11px 18px; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
    color: #04070d; background: var(--pc);
    border: 1px solid var(--pc); border-radius: 3px;
    transition: box-shadow .25s, transform .25s;
}
.fx-btn:hover:not(:disabled) { box-shadow: 0 0 26px color-mix(in srgb, var(--pc) 70%, transparent); transform: translateY(-1px); }
.fx-btn.ghost { color: var(--ink, #e8f1ff); background: transparent; border-color: var(--line-hot, rgba(94, 226, 240, .46)); }
.fx-empty { margin: 0; font-size: 13.5px; color: var(--muted, #8b9dbd); }

/* ── Подвал сцены: легенда нитей и «Призвать знак» ───────────── */

.fate-foot { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 16px; }
.fate-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted, #8b9dbd); }
.fate-legend li { display: flex; align-items: center; gap: 8px; }
.fate-legend li::before { content: ''; width: 26px; height: 2px; background: var(--lc); box-shadow: 0 0 10px var(--lc); }
.fate-summon {
    padding: 13px 26px; font: inherit; font-weight: 600; cursor: pointer;
    color: var(--ink, #e8f1ff);
    background: linear-gradient(135deg, rgba(94, 226, 240, .18), rgba(85, 128, 247, .22));
    border: 1px solid var(--line-hot, rgba(94, 226, 240, .46));
    border-radius: 3px;
    transition: box-shadow .3s, transform .3s;
}
.fate-summon:hover:not(:disabled) { box-shadow: 0 0 34px rgba(94, 226, 240, .5); transform: translateY(-1px); }
.fate-summon:disabled { opacity: .6; cursor: progress; }

/* ── Просмотр кадров: фото всегда целиком ────────────────────── */

.fv { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 14px; }
.fv[hidden] { display: none; }
.fv-bg { position: absolute; inset: 0; background: rgba(2, 4, 10, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fv-box {
    --pc: #5ee2f0;
    position: relative; width: min(980px, 100%); max-height: 100%; overflow: auto;
    padding: 20px 22px 18px;
    background: rgba(6, 10, 20, .97);
    border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent);
    border-radius: 4px;
    box-shadow: 0 0 90px color-mix(in srgb, var(--pc) 28%, transparent), 0 30px 80px rgba(0, 0, 0, .7);
    animation: fv-open .5s cubic-bezier(.2, .8, .2, 1) both;
}
.fv-head { display: flex; align-items: center; gap: 12px; padding-right: 44px; margin-bottom: 14px; }
.fv-glyph { font-size: 22px; color: var(--pc); }
.fv-name { font-family: var(--font-display, 'Unbounded', sans-serif); font-size: 18px; font-weight: 600; color: var(--ink, #e8f1ff); }
.fv-count { margin-left: auto; font-size: 13.5px; color: var(--muted, #8b9dbd); }
.fv-x {
    position: absolute; right: 16px; top: 16px; width: 34px; height: 34px;
    color: var(--ion-soft, #a8f6ff); font-size: 14px; cursor: pointer;
    background: transparent; border: 1px solid var(--line-hot, rgba(94, 226, 240, .46)); border-radius: 2px;
}
.fv-x:hover { background: rgba(94, 226, 240, .14); }
.fv-stage { position: relative; height: min(60vh, 560px); overflow: hidden; background: #050a14; border: 1px solid var(--line, rgba(110, 200, 255, .16)); touch-action: pan-y; }
.fv-blur { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(28px) saturate(1.3); opacity: .5; }
.fv-img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); }
.fv-img.in { animation: fv-img .6s cubic-bezier(.2, .8, .2, 1) both; }
.fv-nav {
    position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px;
    border-radius: 50%; font-size: 18px; cursor: pointer; color: var(--ink, #e8f1ff);
    background: rgba(4, 7, 13, .72); border: 1px solid var(--line-hot, rgba(94, 226, 240, .46));
}
.fv-nav:hover { background: rgba(94, 226, 240, .2); }
.fv-nav.prev { left: 12px; } .fv-nav.next { right: 12px; }
.fv-cap { margin: 12px 0 0; font-size: 14px; color: var(--muted, #8b9dbd); min-height: 1.4em; }
.fv-whisper { margin: 6px 0 0; min-height: 1.5em; font-family: var(--font-display, 'Unbounded', sans-serif); font-size: 15px; line-height: 1.5; color: var(--pc); text-shadow: 0 0 18px color-mix(in srgb, var(--pc) 50%, transparent); }
.fv-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; }
.fv-th {
    position: relative; flex: none; width: 64px; height: 64px; padding: 0; overflow: hidden; cursor: pointer;
    background: #050a14; border: 1px solid var(--line, rgba(110, 200, 255, .16)); border-radius: 3px; opacity: .6;
    transition: opacity .2s, border-color .2s;
}
.fv-th.on, .fv-th:hover { opacity: 1; border-color: var(--pc); }
.fv-th i { position: absolute; inset: -20%; background-size: cover; background-position: center; filter: blur(8px); opacity: .8; }
.fv-th img { position: absolute; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }

/* ── Анимации ────────────────────────────────────────────────── */

@keyframes fate-spin { to { transform: rotate(360deg); } }
@keyframes fate-breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes fate-pulse { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes fate-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fv-open { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fv-img { from { opacity: 0; transform: scale(1.04); filter: blur(12px); } to { opacity: 1; transform: none; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); } }

@media (prefers-reduced-motion: reduce) {
    .fate *, .fate *::before, .fate *::after, .fv *, .fv-box { animation: none !important; transition: none !important; }
}

/* ── Адаптив ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .fate-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .fate-stage { height: 420px; }
    .fate-core { width: 140px; height: 140px; }
    .fate-core-frame { box-shadow: 0 0 0 4px rgba(4, 7, 13, .88), 0 0 30px rgba(94, 226, 240, .5); }
    .fp .fate-tag { font-size: 9.5px; padding: 2px 6px; }
    .fate-foot { flex-direction: column; align-items: stretch; }
    .fate-summon { width: 100%; }
    .fv-box { padding: 16px 14px 14px; }
    .fv-stage { height: 52vh; }
    .fv-nav { width: 38px; height: 38px; margin-top: -19px; }
}