/* Cold reading lesson. All rules scoped under .cold-* */

.cold-sc { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.cold-note { grid-column: 1 / -1; font-size: 12px; color: var(--faint); text-align: center; }

/* picks */
.cold-orbs, .cold-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cold-orb { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); color: var(--text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: border-color .2s, opacity .2s; }
.cold-orb i { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset -8px -10px 18px rgba(0,0,0,.35), inset 6px 6px 12px rgba(255,255,255,.25); }
.cold-orb:disabled { cursor: default; opacity: .4; }
.cold-orb.on { opacity: 1; border-color: var(--gold); }
.cold-card { height: 150px; border-radius: 14px; border: 2px solid rgba(169,155,255,.5); background: repeating-linear-gradient(45deg, #2A2F55 0 8px, #232849 8px 16px); cursor: pointer; display: grid; place-items: center; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s, border-color .2s; }
.cold-card i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold); opacity: .8; }
.cold-card:disabled { cursor: default; opacity: .35; }
.cold-card.on { opacity: 1; border-color: var(--gold); transform: translateY(-8px); }
@media (max-height: 700px) { .cold-card { height: 120px; } .cold-orb i { width: 52px; height: 52px; } }

/* the reading */
.cold-read { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(160deg, #1D1838, #121829); border: 1px solid rgba(169,155,255,.35); }
.cold-rh { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-bright); }
.cold-ln { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.32; color: var(--text); opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s, color .3s; }
.cold-ln.in { opacity: 1; transform: none; }
.cold-ln.same { color: var(--dim); }
.cold-var { color: var(--gold); font-weight: 600; }
.cold-var.hot { background: rgba(252,192,80,.16); border-radius: 4px; padding: 0 3px; }
.cold-tag { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--dim); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 3px 8px; }
@media (max-height: 700px) { .cold-ln { font-size: 14.5px; line-height: 1.28; } .cold-read { gap: 4px; padding: 10px 12px; } }

.cold-stars { display: flex; justify-content: center; gap: 4px; }
.cold-star { width: 52px; height: 52px; font-size: 34px; line-height: 1; color: var(--raised); background: none; border: 0; cursor: pointer; text-shadow: 0 0 0 transparent; transition: color .15s, transform .2s; -webkit-text-stroke: 1px var(--line-strong); }
.cold-star.on { color: var(--gold); transform: scale(1.1); -webkit-text-stroke: 0; }
.cold-star:disabled { cursor: default; }

/* Forer bars */
.cold-bar { display: grid; grid-template-columns: 1fr 42px; gap: 4px 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cold-bar span { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--dim); }
.cold-bar b { height: 14px; border-radius: 7px; background: var(--raised); overflow: hidden; }
.cold-bar i { display: block; height: 100%; width: 0; border-radius: 7px; background: var(--violet); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.cold-bar em { font-style: normal; font-family: var(--mono); font-size: 16px; font-weight: 600; text-align: right; color: var(--text); }
.cold-bar.guess i { background: var(--violet-bright); }
.cold-bar.real i { background: var(--gold); }
.cold-bar.real.on { border-color: var(--gold); }
.cold-bar.real.on em { color: var(--gold); }

/* your line */
.cold-blank { display: inline-block; min-width: 110px; border-bottom: 2px solid var(--violet-bright); }
.cold-blank.set { border-color: var(--gold); color: var(--gold); }
.cold-fits { display: flex; gap: 8px; margin-top: 4px; }
.cold-fits span { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--mint); background: rgba(63,214,154,.12); border-radius: 8px; padding: 5px 6px; }

/* Dana */
.cold-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cold-who i, .cold-quote i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #1B1A18; background: #E9B98F; }
.cold-who b { display: block; font-size: 15px; }
.cold-who span { font-size: 13px; color: var(--dim); }
.cold-chat { display: flex; flex-direction: column; gap: 6px; }
.cold-msg { max-width: 86%; padding: 7px 11px; border-radius: 14px; font-size: 14px; line-height: 1.3; animation: coldIn .25s cubic-bezier(.34,1.56,.64,1) both; }
.cold-msg.me { align-self: flex-end; background: var(--violet-deep); color: #fff; border-bottom-right-radius: 4px; }
.cold-msg.her { align-self: flex-start; background: var(--raised); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cold-msg.her.hit { border-color: rgba(63,214,154,.6); }
.cold-msg.her.miss { border-color: rgba(216,85,85,.6); }
@keyframes coldIn { from { transform: scale(.85); opacity: 0; } }

.cold-tr { display: flex; flex-direction: column; gap: 3px; }
.cold-tl { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.3; transition: background .3s, opacity .3s; }
.cold-tl b { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-bright); }
.cold-tl.her b { color: #E9B98F; }
.cold-tl.dim { opacity: .5; }
.cold-tl.glow { background: rgba(252,192,80,.16); box-shadow: inset 0 0 0 1.5px var(--gold); }

.cold-quote { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.cold-quote p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.35; font-style: italic; }
.cold-quote.on { border-color: var(--gold); }
.cold-quote.on p { color: var(--gold); }

/* Hyman */
.cold-palm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cold-pc { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cold-pc small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cold-pc span { font-size: 15px; font-weight: 600; }
.cold-pc.said { border-color: rgba(252,192,80,.5); }
.cold-pc.said span { color: var(--gold); }

/* checks */
.cold-rules { display: flex; flex-direction: column; gap: 10px; }
.cold-rules div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cold-rules b { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1B1A18; }
.cold-rules span { font-size: 16px; font-weight: 600; }