/* General Relativity lesson. All rules scoped under .grl-* */
.grl-ball, .grl-grid, .grl-sky { position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.grl-ball svg, .grl-grid svg, .grl-sky svg { display: block; width: 100%; height: auto; overflow: visible; }
.grl-tx { font: 700 13px var(--sans); fill: var(--text); }
.grl-tx.grl-c { text-anchor: middle; }
.grl-note { font: 600 13.5px var(--sans); fill: var(--faint); text-anchor: end; }

/* the ants */
.grl-grat { fill: none; stroke: rgba(234,227,215,.22); stroke-width: 1; }
.grl-eq { fill: none; stroke: rgba(234,227,215,.5); stroke-width: 1.5; stroke-dasharray: 4 4; }
.grl-tr { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(252,192,80,.6)); }
.grl-ant ellipse { fill: #2A1B10; stroke: #F4EEE2; stroke-width: .7; }
.grl-ant path { fill: none; stroke: #F4EEE2; stroke-width: .8; }
.grl-bump { fill: none; stroke: var(--gold); stroke-width: 2.5; opacity: 0; }
.grl-met .grl-bump { animation: grl-ping .9s ease-out 2; }
@keyframes grl-ping { from { opacity: 1; r: 4; } to { opacity: 0; r: 22; } }

/* the bent grid */
.grl-mesh { fill: none; stroke: rgba(169,155,255,.35); stroke-width: 1; }
.grl-fall { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 4 4; }
.grl-apple circle { fill: #E0473C; }
.grl-apple path { fill: none; stroke: #6BBF59; stroke-width: 2; stroke-linecap: round; }

/* the elevator */
.grl-lift { position: relative; width: 100%; max-width: 220px; height: 260px; margin: 0 auto; border-radius: 14px; overflow: hidden; cursor: pointer; }
.grl-shaft { position: absolute; inset: 0; background-color: #161B2E; background-image: repeating-linear-gradient(180deg, transparent 0 86px, rgba(234,227,215,.22) 86px 90px), linear-gradient(90deg, #22283F 0 18px, transparent 18px calc(100% - 18px), #22283F calc(100% - 18px)); }
.grl-lift svg { position: absolute; left: 50%; top: 50%; width: 200px; height: 250px; translate: -50% -50%; overflow: visible; }
.grl-cabhit { fill: transparent; }
.grl-cab { stroke: #CFC8BC; stroke-width: 3; }
.grl-cut .grl-cab2 { opacity: 0; transition: opacity .2s; }
.grl-car { fill: #2A3150; stroke: var(--violet-bright); stroke-width: 2; }
.grl-rider circle { fill: #F3C9A0; }
.grl-rider path { fill: none; stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.grl-ap circle { fill: #E0473C; }
.grl-ap path { fill: none; stroke: #6BBF59; stroke-width: 2; stroke-linecap: round; }
.grl-scale { fill: #CFC8BC; }
.grl-kg { font: 800 16px var(--sans); fill: var(--gold); text-anchor: middle; }

/* the astronaut */
.grl-photo { margin: 0 auto; width: 100%; max-width: 250px; }
.grl-photo img { display: block; width: 100%; border-radius: 14px; }
.grl-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* starlight */
.grl-glow { fill: rgba(252,192,80,.18); }
.grl-earth { fill: #4C8BE8; }
.grl-ray { fill: none; stroke: #FFE7A6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgba(252,192,80,.8)); opacity: 0; }
.grl-sent .grl-ray { opacity: 1; }
.grl-done .grl-ray { stroke-dashoffset: 0; }
.grl-done .grl-st { opacity: 0; }
.grl-star path { fill: #FFF4D6; }
.grl-ghost path { fill: none; stroke: var(--gold); stroke-width: 2; }
.grl-back { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0; transition: opacity .5s; }
.grl-ghost { opacity: 0; transition: opacity .5s .5s; }
.grl-traced .grl-back, .grl-traced .grl-ghost { opacity: 1; }
.grl-marks { position: absolute; inset: 0; pointer-events: none; }
.grl-marks .choices.grl-mk { position: absolute; inset: 0; display: block; }
.grl-in { fill: none; stroke: #FFF4D6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 3px rgba(252,192,80,.9)); }
.grl-ask .grl-in { opacity: 1; }
/* Each mark is a 44px ring on the star's column; its label sits off the ray. */
.grl-mk .choice { position: absolute; left: 5.88%; width: 44px; height: 44px; min-height: 0; margin: -22px 0 0 -22px; padding: 0; border: none; border-radius: 50%; background: none; box-shadow: none; pointer-events: auto; overflow: visible; }
.grl-mk .choice:active { transform: none; box-shadow: none; }
.grl-mk .choice:nth-child(1) { top: 70%; }
.grl-mk .choice:nth-child(2) { top: 48%; }
.grl-mk .choice:nth-child(3) { top: 26%; }
.grl-mk .choice i { position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed rgba(234,227,215,.75); transition: border-color .15s; }
.grl-mk .choice span { position: absolute; left: 6px; padding: 0 4px; border-radius: 6px; background: rgba(10,14,26,.85); white-space: nowrap; font: 700 13.5px var(--sans); color: var(--text); }
.grl-mk .choice:nth-child(1) span { top: 50px; }
.grl-mk .choice:nth-child(2) span { top: -2px; left: 52px; }
.grl-mk .choice:nth-child(3) span { top: -24px; }
.grl-mk .choice.picked i { border-color: var(--violet-bright); border-style: solid; }
.grl-mk .choice.right i { border-color: var(--mint); border-style: solid; }
.grl-mk .choice.wrong i { border-color: var(--red); border-style: solid; }
.grl-mk .choice.right span { color: var(--mint); }

@media (max-height: 700px) {
  .grl-ball, .grl-sky { max-width: 320px; }
  .grl-grid { max-width: 320px; }
  .grl-lift { height: 230px; }
  .grl-lift svg { scale: .9; }
  .grl-photo { max-width: 210px; }
}