.ski-hud {
  position: fixed;
  z-index: 18;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.ski-hud-card {
  min-width: 104px;
  padding: 9px 13px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
  background: rgba(18, 54, 76, .78);
  backdrop-filter: blur(9px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  text-align: center;
}
.ski-hud-card small { display:block; font-size:8px; letter-spacing:.14em; opacity:.72; font-weight:900; }
.ski-hud-card b { display:block; margin-top:2px; font-size:20px; line-height:1; }
.ski-hud-card span { font-size:10px; opacity:.72; }
.ski-hud-card.status b { font-size:12px; color:#dff5ff; letter-spacing:.06em; }

.ski-transition {
  position: fixed;
  z-index: 55;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.25), transparent 30%),
    linear-gradient(155deg, rgba(24,77,111,.96), rgba(8,32,51,.98));
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.ski-transition.show { opacity: 1; }
.ski-transition-inner { text-align:center; padding:24px; }
.ski-transition-icon { font-size:54px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.25)); }
.ski-transition h2 { margin:8px 0 6px; font-size:clamp(28px,6vw,48px); }
.ski-transition p { margin:0; color:rgba(255,255,255,.78); }
.ski-transition-line { width:min(280px,65vw); height:5px; margin:20px auto 0; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.13); }
.ski-transition-line::after { content:""; display:block; width:42%; height:100%; border-radius:inherit; background:#e9f8ff; animation:skiLoad 1s ease-in-out infinite alternate; }
@keyframes skiLoad { from { transform:translateX(-20%); } to { transform:translateX(170%); } }

.ski-speed-rush {
  --ski-rush: 0;
  position: fixed;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s linear;
  background:
    repeating-conic-gradient(from 0deg at 50% 58%, rgba(255,255,255,.20) 0deg, transparent 1.1deg, transparent 8deg),
    radial-gradient(circle at 50% 58%, transparent 0 35%, rgba(224,246,255,.15) 72%, rgba(255,255,255,.21) 100%);
  mask-image: radial-gradient(circle at 50% 55%, transparent 0 38%, #000 72% 100%);
  transform: scale(calc(.98 + var(--ski-rush) * .05));
}
.ski-speed-rush.active { opacity: calc(var(--ski-rush) * .62); }

.ski-result-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin:18px 0 4px;
}
.ski-result-grid div { padding:13px 8px; border-radius:14px; background:rgba(255,255,255,.07); }
.ski-result-grid small { display:block; font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.6); }
.ski-result-grid b { display:block; margin-top:5px; font-size:18px; color:#ecf9a6; }
.ski-note { margin:12px 0 0; font-size:12px; line-height:1.6; color:rgba(255,255,255,.65); }

@media (max-width:700px) {
  .ski-hud { top:max(10px, env(safe-area-inset-top)); gap:5px; width:calc(100vw - 20px); justify-content:center; }
  .ski-hud-card { min-width:0; flex:1; max-width:125px; padding:8px 7px; }
  .ski-hud-card b { font-size:17px; }
  .ski-hud-card.status b { font-size:10px; }
  .ski-result-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ski-transition-line::after { animation:none; }
  .ski-speed-rush { display:none !important; }
}