/* Dreams workspace (Sanje / Dreams, Slovenian and English): what is particular to this pillar.
   The general grid is in workspace.css. */
.dream-text{min-height:100px}
#feelingLabel{display:block;margin-top:1rem}
.reading-panel .form-actions{margin-top:.5rem}
.feeling-chips{margin:.4rem 0 .5rem}
.feeling-chips .chip{min-height:40px}
.dream-notice{min-height:1.1rem;margin:.1rem 0 .2rem;font-size:.9rem;color:var(--text)}
.symbol-ask[hidden]{display:none}
.symbol-ask{margin:0 0 1rem;padding:1rem 1.1rem;border:1px solid rgba(168,200,232,.22);background:rgba(168,200,232,.05)}
.symbol-ask p{margin:0 0 .7rem;color:var(--muted);font-size:.9rem;line-height:1.6}
.reading-workspace>.reading-result{position:static}
/* The card of the dream: face down (night sky and crescent) until the hint is read, then it turns over
   and shows the image that was found, with the dictionary sentence about it. */
.symbol-card{width:min(280px,100%,calc((100vh - 22rem)/1.6));aspect-ratio:5/8;margin:0 auto;perspective:1200px}
.symbol-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,.1,.2,1)}
.symbol-card.lit .symbol-card-inner{transform:rotateY(180deg)}
.symbol-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;border:1px solid rgba(168,200,232,.3);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center}
.symbol-face::before{content:"";position:absolute;inset:8px;border:1px solid rgba(168,200,232,.16);pointer-events:none}
.symbol-back{background-image:url("/cards/optimized/oracle-card-back-velvet-secret.webp");background-size:cover;background-position:center;background-color:#111018}
.symbol-crescent{position:absolute;left:50%;top:44%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-18deg);border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6f9ff,#a8c8e8 55%,#5d7ea8);-webkit-mask:radial-gradient(circle at 68% 42%,transparent 0 44%,#000 45%);mask:radial-gradient(circle at 68% 42%,transparent 0 44%,#000 45%);filter:drop-shadow(0 0 14px rgba(168,200,232,.45))}
.symbol-front{transform:rotateY(180deg);background:linear-gradient(170deg,#22304f,#101828 74%);justify-content:center;padding:1.2rem 1.1rem;gap:.7rem;border-color:rgba(168,200,232,.82);box-shadow:0 0 0 1px rgba(168,200,232,.55),0 0 34px rgba(168,200,232,.42),0 0 88px rgba(138,184,216,.24),0 22px 56px rgba(0,0,0,.55)}
.symbol-front-moon{width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(240,246,255,.92) 0 7%,rgba(168,200,232,.55) 24%,rgba(74,109,154,.6) 58%,rgba(10,14,22,.9) 84%);box-shadow:0 0 36px rgba(168,200,232,.4)}
.symbol-card-name{position:relative;font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.symbol-card-line{position:relative;font-size:.8rem;line-height:1.55;color:rgba(224,232,245,.82);display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.symbol-caption{margin:1rem auto 0;max-width:280px;text-align:center;font-size:.82rem;line-height:1.5;color:var(--muted);font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}
@media(prefers-reduced-motion:reduce){.symbol-card-inner{transition:none}}
@media(max-width:959px){
  .reading-stage{display:none}
  .reading-result.show{min-height:min(75vh,560px)}
}
.reading-result{scroll-margin-top:6rem}
.feeling-chip:focus-visible,.symbol-ask .chip:focus-visible,#readDreamBtn:focus-visible{outline:2px solid #a8c8e8;outline-offset:3px}
@media(pointer:coarse){.feeling-chips .chip,.symbol-ask .chip{min-height:44px}}

/* The back of the card is the same picture as on the Cards: one back in the whole house. */
.symbol-back .symbol-crescent{display:none}