/* DivinationChaloce — Single Card Fate Reading: compact 2D layout */
.root {
    scf-night: #030b14;
    scf-blue: #071827;
    scf-gold: #d7b16a;
    scf-gold-light: #ffe5a5;
    scf-text: #f3ead8;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--scf-night);
}
body { overscroll-behavior: none; }

.scf-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    direction: rtl;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--scf-text);
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: radial-gradient(ellipse at 50% 42%, #10263a 0%, #06111e 48%, #02060c 100%);
}

.scf-fullscreen-container {
    position: relative;
    isolation: isolate;
    width: min(100%, 620px);
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    background-color: var(--scf-night);
    background-image:
        linear-gradient(180deg, rgba(2,8,15,.25), rgba(2,8,15,.35) 42%, rgba(2,8,15,.8)),
        url('../../assets/images/bg/fate-reading-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 70px rgba(0,0,0,.65);
}

/* Subtle gold frame and corner glow */
.scf-fullscreen-container::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(215,177,106,.46);
    border-radius: 25px;
    pointer-events: none;
    z-index: 20;
    box-shadow: inset 0 0 28px rgba(215,177,106,.035), 0 0 16px rgba(215,177,106,.04);
}
.scf-fullscreen-container::after {
    content: '';
    position: absolute;
    left: 8%; right: 8%; top: 0;
    height: 30%;
    background: radial-gradient(ellipse at 50% 0%, rgba(29,69,91,.35), transparent 72%);
    pointer-events: none;
    z-index: 0;
}

.scf-menu-toggle {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: 20px;
    width: 42px; height: 42px;
    padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    border: 1px solid rgba(215,177,106,.55);
    border-radius: 50%;
    background: rgba(3,11,20,.72);
    color: var(--scf-gold-light);
    cursor: pointer;
    z-index: 10001;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.scf-menu-toggle span { width: 18px; height: 1.5px; display: block; background: var(--scf-gold-light); transition: transform .25s, opacity .2s; }
.scf-menu-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.scf-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.scf-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.scf-menu {
    position: absolute;
    top: 68px; right: 20px;
    min-width: 190px;
    padding: 8px 0;
    border: 1px solid rgba(215,177,106,.5);
    border-radius: 14px;
    background: rgba(3,11,20,.96);
    box-shadow: 0 16px 42px rgba(0,0,0,.55);
    z-index: 10000;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.scf-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.scf-menu a { display: block; padding: 10px 17px; color: #e8dfce; text-decoration: none; font-size: 13px; border-right: 2px solid transparent; }
.scf-menu a:hover, .scf-menu a:focus-visible { color: var(--scf-gold-light); background: rgba(215,177,106,.09); border-right-color: var(--scf-gold); outline: none; }

.scf-header-section {
    position: absolute;
    top: clamp(52px, 7.5vh, 78px);
    left: 50%; transform: translateX(-50%);
    width: min(88%, 440px);
    text-align: center;
    z-index: 100;
    pointer-events: none;
}
.scf-title { margin: 0 0 8px; color: var(--scf-gold-light); font-size: clamp(20px, 4.8vw, 27px); line-height: 1.45; font-weight: 700; text-shadow: 0 2px 18px #000, 0 0 22px rgba(215,177,106,.25); }
.scf-intro { margin: 0 auto; max-width: 330px; color: rgba(243,234,216,.88); font-size: clamp(11px, 2.8vw, 13px); line-height: 1.8; text-shadow: 0 2px 8px #000; }
.scf-header-section::after { content: ''; display: block; width: 90px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--scf-gold), transparent); box-shadow: 0 0 9px rgba(215,177,106,.55); }

.scf-start {
    position: absolute;
    top: clamp(160px, 30vh, 250px);
    left: 50%; transform: translateX(-50%);
    min-width: 158px;
    padding: 11px 29px;
    border: 1px solid var(--scf-gold);
    outline: 1px solid rgba(215,177,106,.22);
    outline-offset: 4px;
    border-radius: 7px 22px 7px 22px;
    color: var(--scf-gold-light);
    background: linear-gradient(135deg, rgba(12,34,49,.96), rgba(3,11,20,.96));
    box-shadow: 0 0 22px rgba(215,177,106,.16), inset 0 0 18px rgba(215,177,106,.06);
    font: 700 15px/1.4 'Vazirmatn', Tahoma, sans-serif;
    cursor: pointer;
    z-index: 5000;
    transition: box-shadow .25s, background .25s, transform .25s;
}
.scf-start::after { content: '  ←'; color: var(--scf-gold); }
.scf-start:hover, .scf-start:focus-visible { background: linear-gradient(135deg, #18364a, #071522); box-shadow: 0 0 34px rgba(215,177,106,.35); transform: translateX(-50%) translateY(-2px); outline-color: rgba(255,229,165,.65); }

.scf-circle-wrapper {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 2.5%;
    width: min(94vw, 500px);
    height: min(53vh, 500px);
    z-index: 10;
    pointer-events: none;
}
.scf-circle {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    pointer-events: auto;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(3,15,25,.1), rgba(1,7,13,.18) 70%, transparent 72%);
}
.scf-circle::before, .scf-circle::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(215,177,106,.17); border-radius: 50%; pointer-events: none; }
.scf-circle::before { width: 84%; height: 84%; }
.scf-circle::after { width: 58%; height: 58%; border-style: dotted; border-color: rgba(215,177,106,.15); }

.scf-card {
    position: absolute;
    display: block;
    width: clamp(23px, 7vw, 34px);
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: 1px solid rgba(215,177,106,.72);
    border-radius: 3px;
    background: #071827;
    box-shadow: 0 2px 8px rgba(0,0,0,.72), 0 0 4px rgba(215,177,106,.12);
    transform: translate(-50%,-50%) rotate(var(--scf-angle, 0deg));
    transform-origin: center center;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    transition: box-shadow .2s, opacity .2s;
    filter: none;
}
.scf-card:hover, .scf-card:focus-visible { box-shadow: 0 0 0 1px var(--scf-gold-light), 0 0 14px rgba(215,177,106,.6); outline: none; }
.scf-card.is-disabled { cursor: default; }
.scf-card.is-selected { box-shadow: 0 0 18px rgba(255,219,140,.9); }

.scf-selected-card {
    position: absolute;
    top: 50%; left: 50%;
    width: clamp(86px, 24vw, 118px);
    height: auto; aspect-ratio: 2 / 3;
    object-fit: cover;
    transform: translate(-50%,-50%);
    border: 2px solid var(--scf-gold);
    border-radius: 7px;
    box-shadow: 0 0 0 5px rgba(215,177,106,.08), 0 0 34px rgba(215,177,106,.58);
    z-index: 9500;
    pointer-events: none;
    animation: scf-selected-in .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes scf-selected-in { from { opacity: 0; transform: translate(-50%,-47%) scale(.72); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

.scf-result {
    position: absolute;
    left: 50%; bottom: max(3%, env(safe-area-inset-bottom));
    transform: translate(-50%, 10px);
    width: min(88%, 430px);
    max-height: 19vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 9px 14px;
    text-align: center;
    color: var(--scf-text);
    background: linear-gradient(180deg, rgba(3,11,20,.08), rgba(3,11,20,.76));
    border-top: 1px solid rgba(215,177,106,.25);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;
    z-index: 10000;
    text-shadow: 0 2px 8px #000;
    scrollbar-width: thin;
    scrollbar-color: rgba(215,177,106,.4) transparent;
}
.scf-result.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.scf-result-title { margin: 0 0 5px; color: var(--scf-gold-light); font-size: 15px; }
.scf-result-verse { margin: 0 0 6px; color: #e7c77e; font-size: 13px; font-style: italic; }
.scf-result-description { margin: 0; color: #eee6d8; font-size: 12px; line-height: 1.9; text-align: justify; }
.scf-result-message { margin: 0; font-size: 12px; }

@media (max-height: 700px) {
    .scf-header-section { top: 42px; }
    .scf-title { font-size: 19px; margin-bottom: 4px; }
    .scf-intro { font-size: 10px; }
    .scf-header-section::after { margin-top: 6px; }
    .scf-start { top: 21vh; padding: 8px 23px; min-width: 135px; font-size: 13px; }
    .scf-circle-wrapper { height: 51vh; bottom: 1%; }
}
@media (max-width: 600px) {
    .scf-fullscreen-container { width: 100%; }
    .scf-fullscreen-container::before { inset: 4px; border-radius: 17px; }
    .scf-menu-toggle { top: max(12px, env(safe-area-inset-top)); right: 13px; width: 36px; height: 36px; }
    .scf-menu { top: 58px; right: 13px; }
    .scf-header-section { top: clamp(46px, 7vh, 65px); width: 86%; }
    .scf-title { font-size: clamp(18px, 5vw, 22px); }
    .scf-intro { font-size: 11px; max-width: 290px; }
    .scf-start { top: clamp(200px, 40vh, 280px); min-width: 142px; padding: 9px 22px; font-size: 13px; }
    .scf-circle-wrapper { width: 96vw; height: min(48vh, 390px); bottom: 4%; }
    .scf-card { width: clamp(20px, 6.2vw, 27px); }
    .scf-selected-card { top: 50%; width: 82px; }
    .scf-result { bottom: max(2%, env(safe-area-inset-bottom)); max-height: 18vh; padding: 7px 10px; }
    .scf-result-title { font-size: 13px; }
    .scf-result-verse { font-size: 11px; }
    .scf-result-description { font-size: 10px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.scf-brand { margin: 0 0 5px; color: var(--scf-gold); font: 11px/1.4 Georgia, 'Times New Roman', serif; letter-spacing: .16em; text-shadow: 0 2px 8px #000; }
@media (max-width: 600px) { .scf-brand { font-size: 9px; margin-bottom: 3px; } }


/* =========================================================
   EXPERIMENTAL: tilt the existing 2D spiral as one flat plane
   This intentionally preserves the current JS spiral geometry.
   ========================================================= */
.scf-circle-wrapper {
    perspective: 1050px;
    perspective-origin: 50% 28%;
    overflow: visible;
}

.scf-circle {
    overflow: visible;
    transform: rotateX(64deg) translateZ(0);
    transform-origin: 50% 56%;
    backface-visibility: visible;
    will-change: transform;
    box-shadow: 0 24px 38px rgba(0,0,0,.14);
}

@media (max-width: 600px) {
    .scf-circle-wrapper {
        perspective: 850px;
        perspective-origin: 50% 25%;
        width: 98vw;
        height: min(50vh, 410px);
        bottom: 2%;
    }
    .scf-circle {
        transform: rotateX(66deg) translateZ(0);
        transform-origin: 50% 53%;
    }
}

@media (max-height: 700px) {
    .scf-circle { transform: rotateX(61deg) translateZ(0); }
}