/* park3d.css: HUD + menus for the terrain-park games (with sim3d.css, ski3d.css) */
.pk-list { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.pk-list h3 { grid-column: 1 / -1; margin: 0 0 4px; }
.pk-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; }
.pk-list button.is-on { border-color: #f9a8d4; background: rgba(219, 39, 119, .14); } .pk-list button:disabled { opacity: .45; cursor: not-allowed; }
.pk-list small { font-size: 11.5px; opacity: .8; } .pk-list button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; }
.pk-feed { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; pointer-events: none; max-width: 42%; }
.pk-feed div { background: rgba(10, 24, 44, .72); border-radius: 9px; padding: 2px 9px; font: 700 12px system-ui, sans-serif; color: #e2e8f0; display: flex; gap: 8px; white-space: nowrap; opacity: .75; }
.pk-feed div.is-new { opacity: 1; background: rgba(219, 39, 119, .85); color: #fff; }
.pk-feed span { color: #fde047; font-weight: 900; }
.pk-touch .sim-tbtns { grid-template-columns: 60px 60px 1fr 54px 54px 54px 60px; grid-auto-flow: dense; }
.sk-touch.pk-touch .sim-tbtns { grid-template-columns: 60px 60px 1fr 54px 54px 54px 60px; grid-auto-flow: dense; }
.sk-touch.pk-touch .sim-tbtn[data-id="grab"] { grid-column: 6; background: rgba(219, 39, 119, .8); } .sk-touch.pk-touch .sim-tbtn[data-id="jump"] { grid-column: 7; }
.pk-big { font: 900 26px system-ui, sans-serif; margin: 2px 0; }
.pk-why { font-size: 12.5px; opacity: .85; margin: 4px 0; }
.pk-res { max-width: 520px; }
.pk-tblw { max-height: 170px; overflow: auto; margin: 6px 0; }
.pk-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.pk-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .pk-table td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-table tr.is-me td { background: rgba(250, 204, 21, .18); font-weight: 800; }
.pk-cc { font: 800 10px system-ui, sans-serif; font-style: normal; background: rgba(255, 255, 255, .14); border-radius: 4px; padding: 1px 4px; margin-right: 2px; }
@container (max-width: 560px) {
  .sk-touch.pk-touch .sim-tbtns { grid-template-columns: 48px 48px 1fr 44px 44px 46px 48px; gap: 5px; }
  .pk-feed { top: 52px; right: 8px; } .pk-feed div { font-size: 10.5px; } .pk-feed div:nth-child(n+4) { display: none; }
  .pk-big { font-size: 20px; } .pk-res h3 { font-size: 16px; margin: 0; } .pk-why { display: none; } .pk-tblw { max-height: 110px; } .pk-table { font-size: 12px; }
}

.sim-play .sim-result { z-index: 6; }

/* Halfpipe Hero 3D: pump / speed meter */
.hp-meter { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); width: min(220px, 46%); height: 16px; border-radius: 9px; background: rgba(10, 24, 44, .6); overflow: hidden; pointer-events: none; opacity: .55; transition: opacity .15s, box-shadow .15s; }
.hp-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #22d3ee, #f97316); border-radius: 9px; }
.hp-meter span { position: relative; display: block; text-align: center; font: 900 10.5px/16px system-ui, sans-serif; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 2px #000; }
.hp-meter.is-on { opacity: 1; box-shadow: 0 0 0 2px #fde047; } .hp-meter.is-pump { box-shadow: 0 0 0 2px #22c55e, 0 0 14px #22c55e; }
@container (max-width: 560px) { .hp-meter { bottom: 118px; height: 14px; left: 10px; transform: none; width: 44%; } .hp-meter span { line-height: 14px; font-size: 9.5px; } }
/* Aerial Ski Flips */
.as-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -110%); width: 96px; height: 96px; pointer-events: none; display: grid; place-items: center; text-align: center; }
.as-ring[hidden] { display: none; }
.as-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.as-ring circle { fill: none; stroke-width: 9; }
.as-ring__bg { stroke: rgba(10, 24, 44, .55); } .as-ring__fill { stroke: #38bdf8; stroke-linecap: round; stroke-dasharray: 0 100; } .as-ring__tgt { stroke: #fde047; stroke-dasharray: 2 98; stroke-dashoffset: 1; }
.as-ring b { position: relative; font: 900 18px system-ui, sans-serif; color: #fff; text-shadow: 0 2px 4px #000; margin-top: 18px; } .as-ring small { position: relative; font: 800 9.5px system-ui, sans-serif; color: #e2e8f0; text-shadow: 0 1px 2px #000; margin-top: -26px; }
.as-ring.is-open .as-ring__fill { stroke: #22c55e; } .as-ring.is-open b { color: #86efac; } .as-ring.is-late .as-ring__fill { stroke: #f97316; } .as-ring.is-late b { color: #fdba74; }
.as-speed.is-zone { box-shadow: 0 0 0 3px #22c55e; } .as-speed.is-fast { box-shadow: 0 0 0 3px #f97316; } .as-speed small { white-space: nowrap; }
.as-judges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.as-judges span { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 4px 9px; font-size: 12px; } .as-judges b { font-size: 17px; } .as-judges small { font-size: 10px; opacity: .8; }
.as-pick h3 { margin-top: 0; } .as-pick .pk-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@container (max-width: 560px) { .as-ring { width: 80px; height: 80px; transform: translate(-50%, -40%); } .as-judges small { display: none; } .as-big b { font-size: 15px; } .as-big small { font-size: 9px; } }
/* Ski Mountaineering 3D */
.sm-meter { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); width: min(260px, 52%); display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.sm-meter[hidden] { display: none; }
.sm-stam { position: relative; height: 14px; border-radius: 8px; background: rgba(10, 24, 44, .6); overflow: hidden; }
.sm-stam i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22c55e, #a3e635); border-radius: 8px; }
.sm-stam.is-low i { background: linear-gradient(90deg, #ef4444, #f97316); }
.sm-stam span { position: relative; display: block; text-align: center; font: 900 9.5px/14px system-ui, sans-serif; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 2px #000; }
.sm-beat { position: relative; height: 22px; border-radius: 11px; background: linear-gradient(90deg, rgba(10,24,44,.65) 0 47%, rgba(34,197,94,.45) 47% 78%, rgba(249,115,22,.4) 78%); }
.sm-beat i { position: absolute; top: 2px; bottom: 2px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff; }
.sm-beat b { position: absolute; inset: 0; text-align: center; font: 900 11px/22px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.sm-beat.is-go { box-shadow: 0 0 0 2px #22c55e; }
.sm-qte { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); background: rgba(8, 20, 40, .85); border-radius: 14px; padding: 10px 14px; text-align: center; color: #fff; pointer-events: none; }
.sm-qte[hidden] { display: none; }
.sm-qte > b { display: block; font: 900 14px system-ui, sans-serif; margin-bottom: 6px; }
.sm-qte div { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.sm-qte span { display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 6px 6px 4px; border-radius: 10px; background: rgba(255,255,255,.08); font: 900 18px system-ui, sans-serif; opacity: .6; }
.sm-qte span small { font: 700 9px system-ui, sans-serif; opacity: .8; margin-top: 2px; }
.sm-qte span.is-now { opacity: 1; background: #2563eb; box-shadow: 0 0 0 2px #93c5fd; } .sm-qte span.is-done { opacity: .35; background: rgba(34,197,94,.4); }
.sm-qte.is-bad { animation: smShake .3s; } @keyframes smShake { 25% { margin-left: -6px; } 75% { margin-left: 6px; } }
.sm-qte--big { position: static; transform: none; margin: 10px auto; display: inline-block; }
.sm-trainer { text-align: center; } .sm-pad { display: flex; gap: 8px; justify-content: center; margin: 10px 0; } .sm-pad .btn { min-width: 54px; font-size: 20px; }
.sm-board { position: absolute; right: 12px; top: 64px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.sm-board div { background: rgba(10, 24, 44, .7); color: #e2e8f0; border-radius: 8px; padding: 2px 8px; font: 700 11.5px system-ui, sans-serif; } .sm-board div.is-me { background: rgba(250, 204, 21, .85); color: #111827; }
.sk-hint.is-alert { background: #f97316; color: #fff; animation: ssPop .3s ease infinite alternate; }
@container (max-width: 560px) { .sm-meter { bottom: 118px; width: 60%; left: 10px; transform: none; } .sm-board { top: 98px; right: 8px; } .sm-board div { font-size: 10px; } .sm-qte span { min-width: 40px; font-size: 15px; } }