/* scenes/curvehorizon.css -- the horizon calculator (scenes/curvehorizon.js) */
.gscene-curvehorizon .gscene-stage { height: auto; min-height: 0; padding: clamp(16px, 3vw, 28px); touch-action: auto;
  background: radial-gradient(ellipse 70% 80% at 30% 40%, #13224a, #070b18 70%); }
.ch { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; }
.ch-svg { width: 100%; height: auto; display: block; }
.ch-cap { stroke: var(--gold, #ffcc4d); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 204, 77, 0.6)); }
.ch-rays { stroke: rgba(255, 204, 77, 0.55); stroke-width: 1.4; stroke-dasharray: 4 4; }
.ch-eye { fill: #fff; stroke: var(--gold, #ffcc4d); stroke-width: 2; }
.ch-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ch-alt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 0.95rem var(--display); color: var(--muted, #a6b3cd); }
.ch-alt b { font: 800 clamp(1.4rem, 3vw, 1.9rem) var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.ch-range { width: 100%; accent-color: var(--gold, #ffcc4d); height: 28px; cursor: pointer; }
.ch-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-chip { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; border-radius: 99px; padding: 7px 12px;
  font: 700 0.82rem var(--display); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.ch-chip:hover, .ch-chip:focus-visible { background: rgba(255, 204, 77, 0.16); border-color: var(--gold, #ffcc4d); outline: none; }
.ch-out { display: grid; gap: 8px; margin: 0; }
.ch-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.ch-out dt { font: 700 0.88rem/1.3 var(--display); color: var(--muted, #a6b3cd); }
.ch-out dd { margin: 0; font: 800 1.15rem var(--display); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-out .ch-game { color: var(--gold, #ffcc4d); }
.ch-note { margin: 0; font: 600 0.9rem/1.5 var(--display); color: #d6def0; min-height: 3em; }
.ch-space .ch-note { color: #b9d2ff; }
@media (max-width: 720px) { .ch { grid-template-columns: 1fr; } .ch-svg { max-width: 360px; margin: 0 auto; } }