/* Avalanche Escape 3D : page-specific styles (shared: sim3d.css, ski3d.css) */
.av-list { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.av-list h3 { grid-column: 1 / -1; margin: 0 0 4px; }
.av-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: inherit; cursor: pointer; font: inherit; }
.av-list button.is-on { border-color: #7dd3fc; background: rgba(14, 165, 233, .16); } .av-list button:disabled { opacity: .45; cursor: not-allowed; }
.av-list small { font-size: 11.5px; opacity: .8; } .av-list button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; }
.av-st { font-size: 26px; margin: 4px 0; }
/* rear-view mirror: the 3D view is drawn into this box (scissor), the box is only the frame */
.av-mirror { --mw: clamp(120px, 26cqw, 250px); position: absolute; right: 12px; top: 10px; width: var(--mw); aspect-ratio: 2 / 1; border: 3px solid #0f172a; outline: 2px solid rgba(255, 255, 255, .55); border-radius: 12px; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.av-mirror span { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: #0f172a; color: #fde68a; font: 900 9.5px system-ui, sans-serif; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
/* how far behind the avalanche is: fill grows with the gap, turns red when it is close */
.av-meter { --f: .5; position: absolute; right: 12px; top: calc(10px + clamp(120px, 26cqw, 250px) / 2 + 18px); width: clamp(120px, 26cqw, 250px); height: 14px; border-radius: 999px; background: rgba(10, 24, 44, .78); border: 1px solid rgba(255, 255, 255, .25); pointer-events: none; }
.av-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f) * 100%); border-radius: 999px; background: linear-gradient(90deg, #f8fafc, #38bdf8 40%, #4ade80); transition: width .2s; }
.av-meter.is-near i { background: linear-gradient(90deg, #f8fafc, #ef4444); animation: av-blink .5s infinite alternate; }
.av-meter span { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 17px; line-height: 1; }
.av-meter__av { left: 0; } .av-meter__me { left: calc(var(--f) * 100%); transition: left .2s; }
@keyframes av-blink { to { opacity: .55; } }
.av-white { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .95) 100%); }
@container (max-width: 560px) {
  .av-mirror { right: 8px; top: 6px; width: 26cqw; border-width: 2px; }
  .av-meter { right: 8px; top: calc(6px + 13cqw + 16px); width: 26cqw; height: 12px; }
  .av-meter span { font-size: 14px; }
}