/* Horoscope lesson. All rules scoped under .hrs-* */
.hrs-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hrs-note { font: 500 12.5px var(--sans); color: var(--faint); text-align: center; max-width: 330px; }

/* the opening sky */
.hrs-ow { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px 16px 10px; box-sizing: border-box; }
.hrs-open { width: 100%; max-width: 340px; max-height: 52vh; display: block; }
.hrs-dome { fill: #0F1430; stroke: rgba(169,155,255,.35); stroke-width: 1.5; }
.hrs-dot { fill: #EAE3D7; opacity: .75; }
.hrs-b circle { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.hrs-b.sun circle { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(252,192,80,.9)); }
.hrs-b.moon circle { fill: #D8D4E8; }
.hrs-b.mars circle { fill: #E0705A; }
.hrs-b.venus circle { fill: #F4E2B8; }
.hrs-b.jup circle { fill: #D7A86E; }
.hrs-open .fold .hrs-dot { opacity: .12; transition: opacity .8s; }
.hrs-ring { opacity: 0; transition: opacity .9s; }
.hrs-ring.in { opacity: 1; }
.hrs-r1 { fill: none; stroke: var(--violet-bright); stroke-width: 2; }
.hrs-r2 { fill: none; stroke: rgba(169,155,255,.55); stroke-width: 1.2; }
.hrs-ring line { stroke: rgba(169,155,255,.55); stroke-width: 1.2; }
.hrs-ring text { fill: var(--gold); font: 600 15px var(--sans); text-anchor: middle; }
.hrs-asp line { stroke: rgba(252,192,80,.55); stroke-width: 1; }
.hrs-asp { opacity: 0; transition: opacity .6s; }
.hrs-asp.in { opacity: 1; }
.hrs-stamp { font: 600 13px var(--mono); color: var(--dim); opacity: 0; transition: opacity .4s; }
.hrs-ow.frozen .hrs-stamp { opacity: 1; }

/* the sign picker */
.hrs-hint img { width: 190px; max-width: 60vw; max-height: 26vh; object-fit: contain; display: block; filter: drop-shadow(0 14px 24px rgba(123,92,253,.3)); animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.hrs-signs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.hrs-sgb { all: unset; box-sizing: border-box; min-height: 52px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: center; transition: border-color .2s, opacity .2s; }
.hrs-sgb i { font: normal 600 15px var(--sans); color: var(--gold); line-height: 1; }
.hrs-sgb b { font: 700 12.5px var(--sans); color: var(--text); }
.hrs-sgb span { font: 500 12px var(--sans); letter-spacing: -.3px; color: var(--dim); white-space: nowrap; }
.hrs-sgb.locked { pointer-events: none; opacity: .5; }
.hrs-sgb.picked { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(252,192,80,.35); }

/* the sky strip */
.hrs-sk { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
.hrs-sk.rise { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.hrs-yr { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.hrs-yr span { font: 600 12.5px var(--sans); color: var(--dim); }
.hrs-yr b { font: 700 20px var(--mono); color: var(--gold); }
.hrs-strip { width: 100%; display: block; }
.hrs-sky { fill: #0E1330; }
.hrs-row { fill: var(--dim); font: 600 12px var(--sans); }
.hrs-sg rect { fill: rgba(123,92,253,.16); stroke: rgba(169,155,255,.4); stroke-width: 1; }
.hrs-sg text { fill: var(--violet-bright); font: 700 12.5px var(--sans); text-anchor: middle; }
.hrs-sg.me rect { fill: rgba(123,92,253,.42); stroke: var(--violet-bright); stroke-width: 1.5; }
.hrs-sg.me text { fill: #fff; }
.hrs-cb { fill: rgba(234,227,215,.05); stroke: rgba(234,227,215,.22); stroke-width: 1; }
.hrs-cl { fill: none; stroke: rgba(234,227,215,.35); stroke-width: .8; }
.hrs-st { fill: #EAE3D7; }
.hrs-cn text { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.hrs-cn.on .hrs-cb { fill: rgba(252,192,80,.16); stroke: var(--gold); stroke-width: 1.5; }
.hrs-cn.on text { fill: var(--gold); }
.hrs-cn.on .hrs-st { fill: var(--gold); }
.hrs-cn.ok .hrs-cb { stroke: var(--mint); stroke-width: 2; }
.hrs-cn.no .hrs-cb { stroke: var(--red); stroke-width: 2; }
.hrs-bd line { stroke: rgba(252,192,80,.55); stroke-width: 1.2; stroke-dasharray: 3 3; }
.hrs-sun circle { fill: var(--gold); }
.hrs-sun .hrs-halo { fill: rgba(252,192,80,.22); }
.hrs-dl { fill: var(--text); font: 700 13px var(--sans); }
.hrs-dl2 { fill: var(--dim); font: 500 12px var(--sans); }
.hrs-hit { fill: transparent; cursor: pointer; }
.hrs-behind { text-align: center; font: 600 14px var(--sans); color: var(--dim); min-height: 20px; }
.hrs-behind b { color: var(--gold); }
.hrs-track { display: flex; align-items: center; gap: 8px; padding: 2px 6px 0; font: 600 12px var(--sans); color: var(--dim); }
.hrs-track i { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--line-strong); }
.hrs-track b { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(252,192,80,.6); }
.hrs-drag .hrs-sk { cursor: grab; }

/* the friend */
.hrs-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.hrs-card i { font: normal 600 30px var(--sans); color: var(--gold); }
.hrs-card b { display: block; font: 700 17px var(--sans); color: var(--text); }
.hrs-card span { font: 600 13px var(--sans); color: var(--violet-bright); }
.hrs-sc > .hrs-card + * { width: 100%; }

/* the test */
.hrs-maya { display: flex; gap: 12px; align-items: center; width: 100%; max-width: 340px; padding: 10px 12px; box-sizing: border-box; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.hrs-maya img { width: 74px; height: 74px; object-fit: contain; flex: none; }
.hrs-maya b { font: 700 15px var(--sans); color: var(--text); }
.hrs-maya p { margin: 2px 0 0; font: 500 13px/1.35 var(--sans); color: var(--dim); }
.hrs-charts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 340px; }
.hrs-cb2 { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; min-height: 44px; transition: opacity .2s, border-color .2s; }
.hrs-cb2 span { font: 600 12px var(--sans); color: var(--dim); }
.hrs-cb2.locked { pointer-events: none; opacity: .5; }
.hrs-cb2.picked { opacity: 1; border-color: var(--violet-bright); }
.hrs-cb2.real { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(252,192,80,.35); }
.hrs-cb2.real span { color: var(--gold); }
.hrs-mini { width: 100%; max-width: 54px; display: block; }
.hrs-m1 { fill: #12183A; stroke: var(--violet-bright); stroke-width: 1.4; }
.hrs-m2 { fill: none; stroke: rgba(169,155,255,.5); stroke-width: 1; }
.hrs-m3 { stroke: rgba(169,155,255,.5); stroke-width: 1; }
.hrs-m4 { stroke: rgba(252,192,80,.6); stroke-width: .9; }
.hrs-m5 { fill: var(--gold); }
.hrs-m6 { fill: #EAE3D7; }

/* the result */
.hrs-hw { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.hrs-hist { width: 100%; display: block; }
.hrs-ax { stroke: var(--line-strong); stroke-width: 1; }
.hrs-tk { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.hrs-bar { fill: var(--gold); }
.hrs-ch { fill: none; stroke: var(--violet-bright); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 5 4; }
.hrs-leg { display: flex; justify-content: center; gap: 16px; font: 600 12.5px var(--sans); color: var(--dim); }
.hrs-leg span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.hrs-leg .a::before { background: var(--gold); }
.hrs-leg .c::before { height: 0; border-top: 2.4px dashed var(--violet-bright); vertical-align: 3px; border-radius: 0; }
.hrs-sc:not(.go) .hrs-leg { opacity: .55; }

@media (max-height: 700px) {
  .hrs-open { max-height: 46vh; }
  .hrs-hint img { max-height: 20vh; }
  .hrs-maya img { width: 60px; height: 60px; }
  .hrs-maya p { font-size: 12.5px; }
}

/* two hours apart */
.hrs-twins { display: flex; gap: 14px; justify-content: center; width: 100%; }
.hrs-twb { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hrs-twb span { font: 700 13px/1.35 var(--mono); color: var(--dim); text-align: center; }
.hrs-twb span b { color: var(--text); }
.hrs-twb.moved span { color: var(--gold); }
.hrs-tw { width: 140px; max-width: 40vw; display: block; }
.hrs-wg { fill: var(--gold); font: 600 12px var(--sans); text-anchor: middle; }
.hrs-hz { stroke: rgba(63,214,154,.55); stroke-width: 1.2; stroke-dasharray: 4 3; }
.hrs-m7 { fill: #E0705A; }