/* TarotNote V18: brand, ritual stability, service motion and mobile refinement. */
:root{
  --v18-teal:#75bfc1;
  --v18-rose:#b96373;
  --v18-gold:#e6c76f;
}

.brand>span:last-child{
  min-width:0;
  color:#f0d98d;
  font-family:var(--display);
  font-size:clamp(16px,1.35vw,21px);
  font-weight:650;
  letter-spacing:0;
  white-space:nowrap;
}
.splash-title{letter-spacing:.08em!important}
#musicBtn{display:none!important}
#v114SettingsOpen{display:grid!important;place-items:center}
#v114SettingsOpen .v12-icon{width:21px;height:21px;transition:transform .45s cubic-bezier(.2,.75,.2,1)}
#v114SettingsOpen:hover .v12-icon,#v114SettingsOpen:focus-visible .v12-icon{transform:rotate(75deg)}
#v18UserSettings{display:flex!important;align-items:center;gap:10px}
#v18UserSettings>span{display:grid;place-items:center;width:22px;color:#d8bc65;font-size:17px}
#v18UserSettings>b{flex:1;min-width:0;font:inherit;font-weight:500;text-align:left;white-space:normal;overflow-wrap:anywhere}
.v7-top strong::after{content:attr(data-v18-brand-title)!important;letter-spacing:.08em!important}

body.v18-font-readable,body.v18-font-readable :is(button,input,textarea,select){
  --body:"Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",system-ui,sans-serif;
  --cn:"Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",system-ui,sans-serif;
}
body.v18-font-system,body.v18-font-system :is(button,input,textarea,select){
  --body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --cn:system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:Georgia,"Times New Roman",serif;
}
.v114-settings-card{scrollbar-gutter:stable}
.v114-setting-group{min-width:0}
.v114-segment{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))!important}
.v114-segment button{min-width:0!important;min-height:44px!important;padding:8px 10px!important;white-space:normal!important;line-height:1.35!important}

/* The original selector counted the orbit nodes as cards. Use tail positions so all three cards fan correctly. */
.hero{overflow:visible!important}
.hero-deck{
  width:min(520px,42vw)!important;
  min-width:0;
  overflow:visible!important;
  opacity:.9!important;
  transform:translate3d(-58px,0,0) perspective(1100px) rotateX(var(--v13-rx,0deg)) rotateY(var(--v13-ry,0deg))!important;
  filter:brightness(.78) saturate(.86) contrast(.96) drop-shadow(0 25px 42px rgba(0,0,0,.4))!important;
}
.hero-deck:after{opacity:.42!important}
.hero-card{width:196px!important;height:322px!important;opacity:.8!important;filter:drop-shadow(0 23px 24px rgba(0,0,0,.42))!important}
.hero-card:nth-last-child(3){z-index:1;transform:translate(-102px,28px) rotate(-15deg) scale(.84)!important;animation-delay:-1.4s}
.hero-card:nth-last-child(2){z-index:3;transform:translate(0,-8px) rotate(-1deg) scale(1)!important;opacity:1!important;animation-delay:-.4s}
.hero-card:nth-last-child(1){z-index:2;transform:translate(102px,27px) rotate(15deg) scale(.84)!important;animation-delay:-2.8s}
.hero-deck:hover .hero-card{filter:drop-shadow(0 24px 26px rgba(0,0,0,.46))!important}

/* Show the complete artwork and cover the legacy raster nameplate non-destructively. */
.card-back-pattern{
  container-type:inline-size;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:#07050c!important;
  filter:brightness(.78) saturate(.86) contrast(1.03)!important;
}
.hero-card .card-back-pattern{filter:brightness(.67) saturate(.78) contrast(1.04)!important}
.deck-card .card-back-pattern,.mini-back .card-back-pattern,.flying-card .card-back-pattern{filter:brightness(.79) saturate(.88) contrast(1.04)!important}
.reveal-card .card-back-pattern{filter:brightness(.72) saturate(.84) contrast(1.04)!important}
.card-back-pattern::after{
  content:"TarotNote"!important;
  display:grid!important;
  place-items:center!important;
  position:absolute!important;
  inset:auto 8.6% 2.1%!important;
  width:auto!important;
  height:9.2%!important;
  margin:0!important;
  border:1px solid rgba(229,194,92,.92)!important;
  border-radius:4px!important;
  background:#3b2118!important;
  color:#f2dc93!important;
  box-shadow:inset 0 0 0 1px rgba(20,10,8,.7),0 0 5px rgba(0,0,0,.45)!important;
  font:600 clamp(4px,6.1cqi,14px)/1 Georgia,serif!important;
  letter-spacing:0!important;
  text-shadow:0 1px #120907!important;
  transform:none!important;
  opacity:1!important;
  pointer-events:none!important;
}
.deck-stage.selecting .card-back-pattern::after{animation:none!important;transform:none!important}

/* Stable card targeting: hover no longer changes the hit area or pushes neighbours. */
.deck-stage.selecting .deck-card{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:filter .18s ease,opacity .3s ease!important;
}
.deck-stage.selecting .deck-card:hover,.deck-stage.selecting .deck-card.hovered{
  filter:brightness(1.06) saturate(1.04) drop-shadow(0 0 13px rgba(230,199,111,.6))!important;
  outline:1px solid rgba(235,205,120,.52);
  outline-offset:2px;
}
.deck-stage.selecting .deck-card:focus-visible{outline:3px solid var(--v18-teal);outline-offset:3px;z-index:400!important}

/* A single, explicit 3D flip path keeps the back and face from ever occupying the same side. */
.reveal-beam{display:none!important}
.reveal-card{
  isolation:isolate;
  transform:perspective(1200px) rotateX(0deg) rotateY(0deg) translateZ(0)!important;
  transform-origin:50% 50%!important;
  transition:transform .92s cubic-bezier(.2,.72,.18,1),filter .35s ease!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.reveal-card .face{
  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
  pointer-events:none!important;
}
.reveal-card .back{transform:rotateY(0deg) translateZ(1px)!important;visibility:visible}
.reveal-card .front{transform:rotateY(180deg) translateZ(1px)!important;visibility:hidden}
.reveal-card.flipped{transform:perspective(1200px) rotateX(0deg) rotateY(180deg) translateZ(0)!important}
.reveal-card.flipped .back{visibility:hidden;transition:visibility 0s .46s}
.reveal-card.flipped .front{visibility:visible}
.reveal-card:not(.flipped):not(.locked):hover{transform:perspective(1200px) rotateY(0deg) translateY(-6px) scale(1.012)!important;filter:drop-shadow(0 0 17px rgba(216,187,99,.32))}
.reveal-card:focus-visible{outline:3px solid var(--v18-teal);outline-offset:5px}

/* Service introductions reveal character by character and react without moving the readable copy. */
.service-slide{--v18-px:50%;--v18-py:45%;--v18-tilt-x:0deg;--v18-tilt-y:0deg;isolation:isolate}
.service-slide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle 260px at var(--v18-px) var(--v18-py),rgba(117,191,193,.1),rgba(185,99,115,.045) 32%,transparent 68%);
  opacity:.2;
  transition:opacity .4s ease;
}
.service-slide.v18-service-active::after{opacity:1}
.service-slide .service-ornament,.service-slide .service-orbit,.service-slide .witch-scene{
  transform:perspective(900px) rotateX(var(--v18-tilt-y)) rotateY(var(--v18-tilt-x)) translateZ(0);
  transition:transform .45s cubic-bezier(.2,.72,.18,1);
}
.service-copy-full :is(h1,p,.service-position) .v18-char{opacity:0;filter:blur(4px)}
.service-slide.v18-service-active .service-copy-full :is(h1,p,.service-position) .v18-char{
  animation:v18GlyphReveal .62s cubic-bezier(.2,.75,.2,1) both;
  animation-delay:calc(90ms + var(--v18-delay,0ms));
}
.service-slide.v18-service-active .service-copy-full>.eyebrow{
  animation:v18IntroRise .72s cubic-bezier(.2,.75,.2,1) both;
}
.service-slide.v18-service-active .service-copy-full>:is(.v9-service-benefits,.v9-service-price,.v9-detail-start){
  animation:v18IntroRise .75s cubic-bezier(.2,.75,.2,1) .48s both;
}
.service-slide.v18-tap-flare::after{animation:v18TapFlare .62s ease both}
@keyframes v18GlyphReveal{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes v18IntroRise{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes v18TapFlare{0%{opacity:.2}38%{opacity:1}100%{opacity:.65}}

.v18-speak-reading{gap:8px!important}
.v18-speak-reading[aria-pressed="true"]{border-color:var(--v18-teal)!important;color:#d7ffff!important;box-shadow:0 0 22px rgba(117,191,193,.16)!important}

@media(max-width:980px){
  .hero-deck{transform:translate3d(-24px,0,0) perspective(1100px) rotateX(var(--v13-rx,0deg)) rotateY(var(--v13-ry,0deg))!important}
}

@media(max-width:700px){
  #v114SettingsOpen{display:none!important}
  .hero{overflow:hidden!important}
  .hero-deck{
    width:calc(100% + 12px)!important;
    height:310px!important;
    min-height:310px!important;
    margin-inline:-6px!important;
    transform:translate3d(-7px,0,0)!important;
    filter:brightness(.76) saturate(.84) contrast(.98) drop-shadow(0 18px 28px rgba(0,0,0,.38))!important;
  }
  .hero-card{width:118px!important;height:197px!important}
  .hero-card:nth-last-child(3){transform:translate(-66px,23px) rotate(-14deg) scale(.86)!important}
  .hero-card:nth-last-child(2){transform:translate(0,-3px) rotate(-1deg) scale(1)!important}
  .hero-card:nth-last-child(1){transform:translate(66px,23px) rotate(14deg) scale(.86)!important}
  .orbit{width:278px!important;height:278px!important}
  .moon-phase i{transform:rotate(var(--a)) translateY(-135px)!important}
  .service-atlas{height:auto!important;min-height:calc(100svh - 62px)!important;overflow:hidden!important}
  .service-track{align-items:stretch!important;height:auto!important;min-height:calc(100svh - 62px)!important}
  .service-slide{height:auto!important;min-height:calc(100svh - 62px)!important;padding:72px 18px 112px!important;overflow:hidden!important}
  .service-copy-full{width:100%!important}
  .service-copy-full h1,html[lang^="zh"] .service-copy-full h1{font-size:clamp(38px,12vw,54px)!important;white-space:normal!important;line-height:1.13!important}
  .service-copy-full p{font-size:16px!important;line-height:1.82!important}
  .service-position{font-size:12px!important;line-height:1.6!important}
  .service-arrow{top:46%!important;width:44px!important;height:44px!important;background:rgba(8,5,14,.82)!important}
  .v114-settings{padding:0!important;align-items:flex-end!important}
  .v114-settings-card{width:100%!important;max-width:none!important;height:min(90dvh,820px)!important;border-radius:20px 20px 0 0!important;padding:20px 16px calc(20px + env(safe-area-inset-bottom))!important}
  .v114-segment{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))!important}
}

@media(max-width:360px){
  .hero-deck{height:278px!important;min-height:278px!important}
  .hero-card{width:106px!important;height:177px!important}
  .hero-card:nth-last-child(3){transform:translate(-58px,20px) rotate(-13deg) scale(.84)!important}
  .hero-card:nth-last-child(2){transform:translate(0,-2px) scale(1)!important}
  .hero-card:nth-last-child(1){transform:translate(58px,20px) rotate(13deg) scale(.84)!important}
  .service-slide{padding-inline:14px!important}
  .service-arrow.prev{left:4px!important}.service-arrow.next{right:4px!important}
}

@media(prefers-reduced-motion:reduce){
  .service-copy-full .v18-char{opacity:1!important;filter:none!important;animation:none!important}
  .service-slide .service-ornament,.service-slide .service-orbit,.service-slide .witch-scene{transform:none!important;transition:none!important}
  .hero-card{animation:none!important}
  .reveal-card{transition-duration:.01ms!important}
}