/* scenes/cavedepth.css -- the caves guide's depth gauge (assets/js/scenes/cavedepth.js). */
.gscene-cavedepth .gscene-stage { height: clamp(480px, 80vh, 720px); touch-action: pan-y;
  background: radial-gradient(ellipse 80% 60% at 50% 55%, #15171f, #08090e 75%); }
.cd-sky { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none;
  background: linear-gradient(180deg, #4d7fd1 0%, #8fb8ff 70%, #cfe2ff 100%); }

/* the readout, top left */
.cd-read { position: absolute; left: 16px; top: 14px; z-index: 3; display: flex; flex-direction: column; gap: 2px; max-width: min(330px, calc(100% - 120px));
  padding: 12px 16px 13px; border-radius: 18px; background: rgba(8, 10, 18, 0.72); border: 1px solid var(--line); pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cd-label { font: 800 0.72rem var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--torch); }
.cd-depth { font: 900 clamp(1.9rem, 4.4vw, 2.7rem)/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.cd-name { margin-top: 4px; font: 800 1.02rem/1.2 var(--display); color: var(--gold); }
.cd-text { font: 600 0.86rem/1.4 var(--text); color: var(--ink); }
.cd-text:empty { display: none; }
.cd-ores { margin-top: 4px; font: 700 0.78rem/1.35 var(--display); color: var(--muted); }

/* the gauge, right edge: a slider from the grass (top) to the bedrock */
.cd-gauge { position: absolute; right: 14px; top: 16px; bottom: 76px; z-index: 3; width: 92px; padding: 12px 10px 12px 34px; border-radius: 16px;
  background: rgba(8, 10, 18, 0.72); border: 1px solid var(--line); cursor: ns-resize; touch-action: none; outline: none; }
.cd-gauge:focus-visible { box-shadow: 0 0 0 3px var(--gold); }
.cd-scale { position: absolute; left: 8px; right: 10px; top: 12px; bottom: 12px; pointer-events: none; }
.cd-tick { position: absolute; left: 0; transform: translateY(-50%); font: 800 0.66rem var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-tick::after { content: ""; position: absolute; left: 22px; top: 50%; width: 52px; height: 1px; background: rgba(255, 255, 255, 0.08); }
.cd-bars { position: absolute; left: 36px; right: 10px; top: 12px; bottom: 12px; pointer-events: none; }
.cd-bar { position: absolute; width: 4px; border-radius: 3px; background: var(--c); opacity: 0.35; transition: opacity 0.25s, box-shadow 0.25s; }
.cd-bar:nth-child(1) { left: 0; } .cd-bar:nth-child(2) { left: 6px; } .cd-bar:nth-child(3) { left: 12px; } .cd-bar:nth-child(4) { left: 18px; }
.cd-bar:nth-child(5) { left: 24px; } .cd-bar:nth-child(6) { left: 30px; } .cd-bar:nth-child(7) { left: 36px; } .cd-bar:nth-child(8) { left: 42px; }
.cd-bar.on { opacity: 1; box-shadow: 0 0 8px var(--c); }
.cd-mark { position: absolute; left: 20px; right: -4px; top: 0; height: 0; pointer-events: none; }
.cd-mark::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.cd-mark::after { content: ""; position: absolute; left: -7px; top: -6px; border: 6px solid transparent; border-left-color: var(--gold); }

/* the legend: the eight main ores and their depths (wide screens) */
.cd-legend { position: absolute; right: 118px; top: 16px; z-index: 3; margin: 0; padding: 10px 14px; list-style: none; border-radius: 16px;
  background: rgba(8, 10, 18, 0.6); border: 1px solid var(--line); pointer-events: none; }
.cd-legend li { display: flex; align-items: center; gap: 7px; font: 800 0.78rem/1.75 var(--display); color: var(--muted); transition: color 0.25s; }
.cd-legend li i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); opacity: 0.45; }
.cd-legend li small { margin-left: auto; padding-left: 10px; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; }
.cd-legend li.on { color: #fff; }
.cd-legend li.on i { opacity: 1; box-shadow: 0 0 8px var(--c); }

/* the stops, along the bottom */
.cd-stops { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 6px; padding: 14px 14px 14px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(180deg, transparent, rgba(6, 8, 14, 0.85) 45%); }
.cd-stops::-webkit-scrollbar { display: none; }
.cd-stops button { flex: none; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); cursor: pointer;
  font: 800 0.82rem var(--display); color: var(--ink); background: rgba(255, 255, 255, 0.06); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.cd-stops button:hover { background: rgba(255, 255, 255, 0.13); }
.cd-stops button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cd-stops button[aria-pressed="true"] { color: #1a1206; background: var(--gold); border-color: var(--gold); }
.cd-stops .cd-tour { color: var(--torch); border-color: rgba(245, 166, 35, 0.45); }
.cd-stops .cd-tour[aria-pressed="true"] { color: var(--torch); background: rgba(245, 166, 35, 0.12); }

.no-webgl .cd-sky { display: none; }

@media (max-width: 900px) { .cd-legend { display: none; } }
@media (max-width: 560px) {
  .cd-read { left: 10px; top: 10px; padding: 9px 12px 10px; max-width: calc(100% - 104px); }
  .cd-text { font-size: 0.8rem; }
  .cd-gauge { right: 10px; top: 10px; bottom: 66px; width: 78px; padding-left: 30px; }
  .cd-bars { left: 32px; }
  .cd-stops { padding: 12px 10px; }
}