.taro-carousel{
    position:relative;
    width:100%;
    max-width:620px;
    height:320px;
    margin: 50px auto 50px;
    perspective:1200px;
    transform-style:preserve-3d;
    isolation:isolate;
    background:transparent;
}


/* ===== CARD ===== */
.taro-card{
    position:absolute;
    width:var(--card-width);
    height:var(--card-height);
    top:50%;
    left:50%;

    border-radius:var(--card-radius);
    cursor:pointer;

    transform-origin:center;
    transition:transform 0.6s ease, opacity 0.6s ease;

    user-select:none;
    -webkit-tap-highlight-color:transparent;

    /* FIX FLIP BUG */
    transform-style:preserve-3d;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    will-change:transform;
    transform:translateZ(0);
}


/* ===== FLIP INNER ===== */
.inner{
    width:100%;
    height:100%;
    position:relative;

    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;

    transition:transform 0.9s cubic-bezier(.22,1,.36,1);

    /* FIX HALF RENDER BUG */
    will-change:transform;
    transform:translateZ(0);
}

.front,
.back{
    position:absolute;
    width:100%;
    height:100%;

    border-radius:var(--card-radius);

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    transform:translateZ(0);
}

.front{
    background:url('/assets/img/taro/back.webp') center/cover no-repeat;
}

.back{
    transform:rotateY(180deg) translateZ(0);
    background-size:cover;
    background-position:center;
}

.inner.flipped{
    transform:rotateY(180deg);
}

/* ЛЕВАЯ */
.left{
    transform:translate(-120%, -50%) scale(0.9) rotateY(-10deg);
    z-index:1;
    opacity:.85;
}

/* ПРАВАЯ */
.right{
    transform:translate(20%, -50%) scale(0.9) rotateY(10deg);
    z-index:1;
    opacity:.85;
}

/* ЦЕНТР — БОЛЕЕ ЯРКИЙ, НЕ МЕНЯЕТ ЦВЕТ */
.center{
    transform:translate(-50%, -50%) scale(1.15) translateZ(80px);

    z-index:10;
    opacity:1;


}




/* ===== ENTRY ===== */
.taro-entry{
    padding:0;
    animation:fadeIn .35s ease;
}

.taro-entry b{
    display:block;
    margin-bottom:6px;
    font-size:15px;
    color:var(--text-strong);
}


/* ===== DIVIDER ===== */
.taro-divider {
  height: 1px;
  margin: 10px 0;
  background: radial-gradient(
    at center,
    rgba(128, 128, 128, 0.6),
    rgba(128, 128, 128, 0) 70%
  );
}




/* ===== INTERACTION FIXES ===== */
.taro-card,
.taro-card *{
    -webkit-tap-highlight-color:transparent;
}

.taro-card:focus,
.taro-card:active{
    outline:none;
}

.taro-card{
    user-select:none;
}


/* ===== ANIMATION ===== */
@keyframes fadeIn{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
}




.taro-carousel{position:relative;width:100%;max-width:620px;height:var(--stage-height);margin:50px auto;perspective:1200px;transform-style:preserve-3d;isolation:isolate;background:transparent;overflow:visible}
.taro-section{--card-width:clamp(120px,24vw,200px);--card-height:calc(var(--card-width) * 1.5);--card-radius:clamp(7px,1.44vw,12px);--stage-height:calc(var(--card-height) * 1.25)}
.taro-section .taro-carousel{height:var(--stage-height);margin:calc(var(--card-height) * .25) auto;transform:translateY(-20px)}
.taro-card{position:absolute;width:var(--card-width);height:var(--card-height);top:50%;left:50%;border-radius:var(--card-radius);cursor:pointer;transform-origin:center;transition:transform .6s ease,opacity .6s ease;user-select:none;-webkit-tap-highlight-color:transparent;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;transform:translateZ(0)}
.inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .9s cubic-bezier(.22,1,.36,1);will-change:transform;transform:translateZ(0);border-radius:var(--card-radius);overflow:hidden}
.front,.back{position:absolute;inset:0;width:100%;height:100%;border-radius:var(--card-radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}
.front{background:url('/assets/img/taro/back.webp') center/cover no-repeat}
.back{transform:rotateY(180deg) translateZ(0);background-size:cover;background-position:center}
.inner.flipped{transform:rotateY(180deg)}
.left{transform:translate(-120%,-50%) scale(.9) rotateY(-10deg);z-index:1;opacity:.85}
.right{transform:translate(20%,-50%) scale(.9) rotateY(10deg);z-index:1;opacity:.85}
.center{transform:translate(-50%,-50%) scale(1.15) translateZ(80px);z-index:10;opacity:1}
.taro-entry{padding:0;animation:fadeIn .35s ease}
.taro-entry b{display:block;margin-bottom:6px;font-size:15px;color:var(--text-strong)}
.taro-divider{height:1px;margin:10px 0;background:radial-gradient(at center,rgba(128,128,128,.6),rgba(128,128,128,0) 70%)}
.taro-card,.taro-card *{-webkit-tap-highlight-color:transparent}
.taro-card:focus,.taro-card:active{outline:none}
.taro-info[hidden]{display:none}
.taro-section .taro-info,.taro-section .taro-description{max-width:900px;margin-left:auto;margin-right:auto}
.taro-section .taro-description{margin-top:22px}
@media(max-width:560px){.taro-section .taro-carousel{width:100%;max-width:none;margin-left:0;margin-right:0}}
@media(prefers-reduced-motion:reduce){.taro-card,.inner{transition:none}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}/* User adjustment 2026-10-08 */
.taro-section .taro-carousel{transform:translateY(-70px)}
@media(max-width:560px){.taro-section .taro-carousel{width:calc(100% + 20px);max-width:none;margin-left:-10px;margin-right:-10px}}

/* Final mobile/desktop card sizing: tarot stage matches the content block width. */
.taro-section{--card-width:clamp(140px,24vw,220px);--card-height:calc(var(--card-width) * 1.5);--stage-height:calc(var(--card-height) * 1.25)}
.taro-section .taro-carousel{width:100%;max-width:900px;height:var(--stage-height);margin:calc(var(--card-height) * .25) auto;transform:translateY(-105px)}
@media(max-width:560px){
  .taro-section .taro-carousel{width:100%;max-width:900px;margin-left:0;margin-right:0}
  .taro-section{--card-width:220px;--card-height:330px}
}
@media(max-width:360px){
  .taro-section{--card-width:220px;--card-height:330px}
}

/* Desktop cards lifted to match mobile position */
@media(min-width:561px){.taro-section .taro-carousel{transform:translateY(-100px)}}
/* Desktop alignment with the magic ball stage */
@media(min-width:561px){.taro-section .taro-carousel{transform:translateY(-45px)}}

/* Compact tarot stage: the layout box follows the visible cards instead of leaving empty vertical space. */
.taro-section .taro-carousel{
  height:var(--stage-height);
}


/* Final tarot card position: 30px higher */
.taro-section .taro-carousel{transform:translateY(-170px)}
@media(min-width:561px){.taro-section .taro-carousel{transform:translateY(-110px)}}
/* Reduce vertical gap between tarot cards and text by 100px */
.taro-section .taro-carousel{margin-bottom:calc((var(--card-height) * .25) - 150px);}

/* Mobile tarot cards use the same dimensions as desktop. */
@media(max-width:560px){.taro-section{--card-width:220px;--card-height:330px;--stage-height:calc(var(--card-height) * 1.25)}}

/* Tarot: result and timeout blocks match the prediction ball styling */
.taro-section .taro-info{
  width:100%;
  max-width:900px!important;
  box-sizing:border-box;
  margin-left:auto;
  margin-right:auto;
  background:var(--surface)!important;
}
.taro-section .ball-limit{
  width:100%;
  max-width:900px!important;
  box-sizing:border-box;
  margin:0 auto 18px!important;
  background:color-mix(in srgb,#d66 7%,var(--surface))!important;
  border-color:color-mix(in srgb,#c55 22%,var(--line))!important;
  color:color-mix(in srgb,#a33 72%,var(--muted))!important;
}

/* Tarot: description block exactly matches the purple revealed prediction block */
.taro-section .taro-info{
  background:color-mix(in srgb,var(--accent) 6%,var(--surface))!important;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))!important;
}

/* Tarot: fluid mobile card sizing — cards scale smoothly with viewport width */
@media(max-width:560px){
  .taro-section{
    --card-width:clamp(145px,52vw,220px);
    --card-height:calc(var(--card-width) * 1.5);
    --stage-height:calc(var(--card-height) * 1.25);
  }
}

/* Tarot mobile: cards scale evenly to the available screen width */
@media (max-width:560px){
  .taro-section .taro-carousel{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-left:12px;
    padding-right:12px;
  }
  .taro-section .taro-card{
    width:clamp(82px,27vw,112px)!important;
    height:clamp(126px,41.5vw,173px)!important;
    flex:0 0 clamp(82px,27vw,112px)!important;
  }
  .taro-section .taro-card .inner,
  .taro-section .taro-card .front,
  .taro-section .taro-card .back{
    width:100%;
    height:100%;
  }
}

/* Tarot: responsive card scaling matched to the live site's 3-card layout */
.taro-section{
  --card-width:clamp(160px,19vw,220px);
  --card-height:calc(var(--card-width) * 1.5);
  --card-radius:clamp(8px,1.15vw,12px);
  --stage-height:calc(var(--card-height) * 1.25);
}
.taro-section .taro-carousel{
  width:100%;
  max-width:900px;
  height:var(--stage-height);
  box-sizing:border-box;
}
.taro-section .taro-card{
  width:var(--card-width)!important;
  height:var(--card-height)!important;
}
@media (min-width:561px) and (max-width:900px){
  .taro-section{
    --card-width:clamp(140px,19vw,175px);
    --card-height:calc(var(--card-width) * 1.5);
    --stage-height:calc(var(--card-height) * 1.25);
  }
}
@media (max-width:560px){
  .taro-section{
    --card-width:clamp(82px,27vw,112px);
    --card-height:calc(var(--card-width) * 1.5);
    --card-radius:clamp(6px,1.8vw,9px);
    --stage-height:calc(var(--card-height) * 1.25);
  }
  .taro-section .taro-carousel{
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
  }
  .taro-section .taro-card{
    width:var(--card-width)!important;
    height:var(--card-height)!important;
  }
}

/* Tarot: unified three-card composition on desktop, tablet and mobile */
.taro-section{
  --card-width:clamp(150px,19vw,220px);
  --card-height:calc(var(--card-width) * 1.5);
  --card-radius:clamp(7px,1vw,12px);
  --stage-height:calc(var(--card-height) * 1.25);
}
.taro-section .taro-carousel{
  position:relative;
  width:100%;
  max-width:900px;
  height:var(--stage-height);
  box-sizing:border-box;
  overflow:visible;
}
.taro-section .taro-card{
  width:var(--card-width)!important;
  height:var(--card-height)!important;
  top:50%;
  left:50%;
}
.taro-section .taro-card.left{
  transform:translate(-120%,-50%) scale(.9) rotateY(-10deg)!important;
  z-index:1;
  opacity:.85;
}
.taro-section .taro-card.center{
  transform:translate(-50%,-50%) scale(1.15) translateZ(80px)!important;
  z-index:10;
  opacity:1;
}
.taro-section .taro-card.right{
  transform:translate(20%,-50%) scale(.9) rotateY(10deg)!important;
  z-index:1;
  opacity:.85;
}
@media (min-width:561px) and (max-width:900px){
  .taro-section{--card-width:clamp(125px,19vw,170px)}
}
@media (max-width:560px){
  .taro-section{
    --card-width:clamp(125px,37vw,190px);
    --card-height:calc(var(--card-width) * 1.5);
    --card-radius:clamp(6px,1.8vw,9px);
    --stage-height:calc(var(--card-height) * 1.25);
  }
  .taro-section .taro-carousel{
    width:100%;
    max-width:100%;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
    top:100px;
    margin-bottom:calc((var(--card-height) * .25) - 100px);
  }
}



/* Tarot card reveal: match production 3D flip */
.taro-section .taro-card .inner {
  transform: translateZ(0);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  will-change: transform;
  border-radius: var(--card-radius);
  overflow: visible;
}
.taro-section .taro-card .front,
.taro-section .taro-card .back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius);
  overflow: hidden;
}
.taro-section .taro-card .front {
  transform: translateZ(0);
  background: url('/assets/img/taro/back.webp') center/cover no-repeat;
}
.taro-section .taro-card .back {
  transform: rotateY(180deg) translateZ(0);
  background: transparent;
}
.taro-section .taro-card .inner.flipped {
  transform: rotateY(180deg);
}
.taro-section .taro-card .taro-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Keep the revealed card meanings at the same distance from the card stage as the description block. */
.taro-section .taro-info {
  margin-top: 22px !important;
  margin-bottom: 0;
}

/* Keep the timeout notice aligned with the revealed Tarot interpretation block. */
.taro-section .ball-limit {
  margin-top: 22px !important;
  margin-bottom: 0 !important;
}

/* Light theme: side Tarot cards should retain full image opacity. */
html:not([data-theme=dark]) .taro-section .taro-card.left,
html:not([data-theme=dark]) .taro-section .taro-card.right {
  opacity: 1 !important;
}

/* Sidebar layout overrides must follow the Tarot component styles. */
.taro-section > .container.taro-layout{width:100%;max-width:1180px!important;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:28px;align-items:start;box-sizing:border-box}
.taro-section .taro-main-column{min-width:0}
.taro-section .taro-main-column .taro-carousel{width:100%;max-width:900px;margin-left:0!important;margin-right:0!important}
.taro-section .taro-main-column .taro-info,.taro-section .taro-main-column .taro-description{width:100%;max-width:900px;margin-left:0!important;margin-right:0!important;box-sizing:border-box}
.taro-section .taro-main-column .taro-description{margin-top:22px}
.taro-section .taro-feature-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
.taro-section .taro-feature-sidebar .feature-card{display:block;padding:18px;border-radius:18px;text-decoration:none;color:var(--text)}
.taro-section .taro-feature-sidebar .feature-icon{display:block;font-size:24px;margin-bottom:9px}
.taro-section .taro-feature-sidebar .feature-card h3{font-size:17px;line-height:1.35;margin:0}
.taro-section .taro-feature-sidebar .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px}
.taro-section .taro-feature-sidebar .text-link{font-size:12px}
@media(max-width:820px){.taro-section > .container.taro-layout{grid-template-columns:minmax(0,1fr);gap:24px}.taro-section .taro-feature-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.taro-section .taro-main-column .taro-carousel{margin-left:auto!important;margin-right:auto!important}}
@media(max-width:560px){.taro-section > .container.taro-layout{gap:20px}.taro-section .taro-feature-sidebar{grid-template-columns:minmax(0,1fr);gap:12px}.taro-section .taro-feature-sidebar .feature-card{padding:17px}}