/* Coffee cup and tea leaf reading ("Read your own cup"). Loaded only on /free-coffee-cup-reading/. */
.cup-reading .topic-option small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cup-stage{width:100%;max-width:500px;margin:0 auto 18px}
.cup-svg{width:100%;height:auto;display:block}
.cup-map{cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cup-liquid[class*="swirled-"]{animation:cup-swirl .9s cubic-bezier(.4,.1,.3,1)}
.cup-turned{animation:cup-turn .8s ease-out}
@keyframes cup-swirl{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes cup-turn{from{transform:scaleY(.15);opacity:.3}to{transform:none;opacity:1}}
.cup-timer{text-align:center;color:var(--muted);min-height:1.5em}
.cup-steps{list-style:none;counter-reset:step;padding:0;max-width:520px;margin:10px auto 26px;display:grid;gap:8px}
.cup-steps li{counter-increment:step;padding:10px 14px 10px 44px;border:1px solid var(--line);border-radius:10px;position:relative;color:var(--muted)}
.cup-steps li:before{content:counter(step);position:absolute;left:14px;top:9px;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font-size:12px;display:grid;place-items:center}
.cup-steps li.current{color:var(--text,#f2ebe0);border-color:var(--gold);background:#d3b78a12}
.cup-steps li.done{opacity:.6}.cup-steps li.done:before{content:'✓'}
.cup-look{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start;max-width:1100px;margin:10px auto 26px}
.cup-side h2{margin:0 0 12px;font-size:26px}
.cup-toggle{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;color:var(--muted);margin-top:8px}
.cup-placed{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.cup-placed li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#19151f}
.cup-placed small{display:block;color:var(--muted);font-size:13px}
.cup-remove{padding:6px 10px;font-size:13px}
.cup-actions{justify-content:flex-start;flex-wrap:wrap;margin:0 0 10px}
.text-button{background:none;border:0;padding:0;color:var(--gold);text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:14px;cursor:pointer}
.cup-picker{border:1px solid var(--line);border-radius:14px;padding:18px;background:linear-gradient(180deg,#1f1828,#15111c)}
.cup-picker fieldset{border:0;padding:0;margin:0 0 12px}
.cup-zone-options{margin-bottom:8px}
.cup-picker input[type=search]{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#100e14;color:inherit;font:inherit;margin-bottom:10px}
.cup-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;max-height:340px;overflow:auto;padding:2px 4px 6px;margin-bottom:10px}
.cup-group{grid-column:1/-1;margin:8px 0 0;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.cup-choice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--line);border-radius:10px;background:#19151f;color:inherit;font-size:13px;cursor:pointer}
.cup-choice:hover,.cup-choice:focus-visible{border-color:var(--gold)}
.cup-choice[hidden],.cup-group[hidden]{display:none}
.cup-reading-list{max-width:860px;margin:0 auto 30px;display:grid;gap:18px}
.cup-symbol-reading{display:grid;grid-template-columns:96px 1fr;gap:22px;padding:22px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#1f1828,#15111c)}
.cup-symbol-reading h2{margin:2px 0 4px}.cup-symbol-reading p{margin:0 0 10px}
@media(max-width:860px){.cup-look{grid-template-columns:1fr}.cup-stage{max-width:420px}}
@media(max-width:600px){.cup-symbol-reading{grid-template-columns:60px 1fr;gap:14px;padding:16px}.cup-symbol-reading img{width:60px;height:60px}.cup-placed li{grid-template-columns:36px 1fr auto}.cup-placed img{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.cup-liquid[class*="swirled-"],.cup-turned{animation:none}}
@media print{.cup-look,.cup-picker{display:none}}
/* The cup reading by email (a photo form sharing hand-reading.css). */
.cup-email-link{margin:14px 0 0;font-size:14px;color:var(--muted)}
.cup-by-email{max-width:760px;margin:40px auto 10px;scroll-margin-top:20px}
.cup-by-email>h2{font-size:clamp(28px,3.4vw,38px);margin:6px 0 12px}
.cup-by-email h3{margin:26px 0 8px}