/* Seni Tarot: restrained motion and mobile-first reference polish */
:root{--tarot-gold:#e7be7d;--tarot-ivory:#f5ebdf;--tarot-muted:#bcaec2;--tarot-line:rgba(228,190,129,.23)}
.online-hero-copy h1{letter-spacing:-.045em;text-wrap:balance}
.online-hero-actions .online-start{position:relative;isolation:isolate;transition:transform .22s ease,box-shadow .22s ease}
.online-hero-actions .online-start:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(227,172,92,.23)}
.reading-head h2{text-wrap:balance}
.question-box:focus-within{border-color:rgba(226,180,110,.68)!important;box-shadow:0 0 0 3px rgba(226,180,110,.08)}
.spread-options button{transition:background .2s,border-color .2s,transform .2s}
.spread-options button:focus-visible,.question-examples button:focus-visible,.pick-card:focus-visible,.reading-primary:focus-visible{outline:2px solid #f2cf9c!important;outline-offset:3px}
.spread-options button.selected{box-shadow:inset 0 0 0 1px rgba(237,195,128,.55)!important}
.pick-card.chosen .pick-card-inner{filter:drop-shadow(0 0 9px rgba(228,186,115,.36))}
.reading-primary:not(:disabled){transition:filter .22s,transform .22s}
.reading-primary:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px)}
.reading-loader{position:relative;isolation:isolate}
.loader-sigil:after{content:"";position:absolute;inset:-13px;border-radius:50%;border:1px solid rgba(232,187,113,.13);animation:tarotHalo 3.4s ease-in-out infinite;pointer-events:none}
@keyframes tarotHalo{0%,100%{transform:scale(.9);opacity:.3}50%{transform:scale(1.06);opacity:.8}}
@media(max-width:600px){
  /* Shared 16px content alignment, real line wraps, no hidden labels. */
  .online-main .reading-head,.reading-step .reading-actions,.reading-step .result-tools{min-width:0}
  .reading-head h2{font-size:clamp(24px,7.2vw,29px)!important;line-height:1.38!important;overflow-wrap:break-word}
  .reading-head p,.question-examples button,.result-next b,.reading-result p{line-height:1.75;overflow-wrap:break-word;word-break:keep-all}
  .online-hero-copy h1{font-size:clamp(32px,9vw,39px)!important;line-height:1.3!important}
  .online-hero-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
  .online-book{justify-self:center}
  .reading-progress span{min-width:0;letter-spacing:-.02em}
  .deck-toolbar:after{font-size:10px!important;line-height:1.55!important;word-break:keep-all}
  .reading-step[data-step="2"] .pick-card{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .reading-step[data-step="2"] .pick-card.chosen{filter:drop-shadow(0 8px 13px rgba(219,173,99,.42))!important}
  .reading-step[data-step="2"] .chosen-summary span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.45!important}
  .reading-step[data-step="2"] .chosen-summary>div{min-width:0!important}
  .result-next,.reading-result,.result-tools{min-width:0}
  .reading-result p{font-size:clamp(13px,3.9vw,15px)!important}
  .reading-step[data-step="2"] .reading-primary{min-height:52px!important}
}
@media(max-width:350px){
 .reading-step[data-step="2"] .reading-head h2{font-size:24px!important}
 .reading-step[data-step="2"] .deck-toolbar:after{max-width:58%!important;font-size:9px!important}
}
@media(prefers-reduced-motion:reduce){
 .loader-sigil:after{animation:none}
 .reading-primary,.online-start,.spread-options button{transition:none!important}
}

/* All 22 cards visible without horizontal scrolling, every screen. */
@media(min-width:601px){
 .reading-step[data-step="2"] .card-deck{
  display:grid!important;grid-template-columns:repeat(11,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,auto)!important;gap:10px 6px!important;
  overflow:visible!important;width:100%!important;height:auto!important;
  min-height:0!important;max-width:900px!important;padding:8px 0!important;
  scroll-snap-type:none!important;
 }
 .reading-step[data-step="2"] .pick-card{
  width:100%!important;min-width:0!important;max-width:none!important;
  height:auto!important;aspect-ratio:2/3!important;flex:none!important;
  scroll-snap-align:none!important;
 }
 .reading-step[data-step="2"] .pick-card-inner{width:100%!important}
 .reading-step[data-step="2"] .pick-front>b{font-size:clamp(6px,.75vw,10px)!important}
 .reading-step[data-step="2"] .deck-toolbar small{display:none!important}
 .reading-step[data-step="2"] .chosen-summary{margin-top:12px!important}
}
@media(min-width:601px) and (max-width:900px){
 .reading-step[data-step="2"] .card-deck{gap:8px 4px!important}
}
@media(max-width:600px){
 .reading-step[data-step="2"] .card-deck{
  overflow:visible!important;overflow-x:visible!important;
  scroll-snap-type:none!important;touch-action:manipulation!important;
 }
 .reading-step[data-step="2"] .card-deck .pick-card{scroll-snap-align:none!important}
}
/* Authoritative no-sideways-scroll mobile deck */
@media(max-width:600px){
  #readingApp .reading-step[data-step="2"] #cardDeck{
    display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,auto)!important;
    grid-auto-rows:auto!important;
    gap:7px 4px!important;align-items:start!important;justify-items:stretch!important;
    width:100%!important;max-width:100%!important;
    height:auto!important;min-height:0!important;
    margin:0!important;padding:8px 0!important;
    overflow-x:clip!important;overflow-y:visible!important;
    scroll-snap-type:none!important;touch-action:manipulation!important;
  }
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-card,
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-card:nth-child(n){
    display:block!important;position:relative!important;grid-column:auto!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    height:auto!important;aspect-ratio: .66!important;
    margin:0!important;padding:0!important;overflow:hidden!important;
    transform:none!important;z-index:auto!important;
  }
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-card-inner,
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-front,
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-back{
    width:100%!important;height:100%!important;max-width:100%!important;
    inset:0!important;box-sizing:border-box!important;pointer-events:none!important;
  }
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-card.chosen{transform:translateY(-3px)!important;z-index:3!important;overflow:visible!important}
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-front>b,
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-front>em,
  #readingApp .reading-step[data-step="2"] #cardDeck .pick-front>small,
  #readingApp .reading-step[data-step="2"] #cardDeck .arcana-symbol{display:none!important}
  #readingApp .reading-step[data-step="2"] #cardDeck .back-star{font-size:14px!important}
  .reading-step[data-step="2"] .deck-toolbar:after{content:"22장 전체에서 세 장을 터치하세요"!important}
}

/* Three unmistakable selection states; first amber, second lilac, third aqua. */
#readingApp #cardDeck .pick-card.pick-first{--pick-strong:#ffc46f;--pick-glow:rgba(255,182,74,.55)}
#readingApp #cardDeck .pick-card.pick-second{--pick-strong:#d5a8ff;--pick-glow:rgba(193,128,255,.58)}
#readingApp #cardDeck .pick-card.pick-third{--pick-strong:#7be1dd;--pick-glow:rgba(84,216,207,.56)}
#readingApp #cardDeck .pick-card.chosen{
  outline:3px solid var(--pick-strong)!important;outline-offset:-3px!important;
  border-radius:7px!important;
  box-shadow:0 0 0 2px var(--pick-strong),0 0 16px 3px var(--pick-glow)!important;
  filter:brightness(1.13)!important;
}
#readingApp #cardDeck .pick-card.chosen:after{
  content:"✓";position:absolute;top:2px;right:2px;z-index:10;
  width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:var(--pick-strong);color:#160c1a;font:900 13px/1 sans-serif;
  pointer-events:none;
}
#readingApp .chosen-summary>div:nth-child(1){border-color:#ffc46f!important}
#readingApp .chosen-summary>div:nth-child(2){border-color:#d5a8ff!important}
#readingApp .chosen-summary>div:nth-child(3){border-color:#7be1dd!important}
@media(max-width:600px){
 #readingApp .reading-step[data-step="2"] #cardDeck{
   grid-template-columns:repeat(8,minmax(0,1fr))!important;
   justify-content:center!important;justify-items:stretch!important;
 }
 #readingApp .reading-step[data-step="2"] #cardDeck .pick-card:nth-child(n+17){
   /* Last row of six centered with one free column on either side */
   grid-column:auto!important;
 }
 #readingApp .reading-step[data-step="2"] #cardDeck .pick-card:nth-child(17){grid-column:2!important}
 #readingApp #cardDeck .pick-card.chosen:after{width:14px;height:14px;font-size:10px;top:1px;right:1px}
}