/* Ski Jump Challenge : page-specific styles (shared: arcade-kit.css, sim3d.css for the banner / result card) */
.sj-wrap { position: relative; width: 100%; }
.sj-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; container-type: inline-size; }
.sj-hud button, .sj-hud .sim-result { pointer-events: auto; }
.sj-hud .sim-result[hidden] { display: none; }
.sj-card { position: absolute; left: 10px; top: 10px; background: rgba(15, 23, 42, .78); color: #fff; border-radius: 12px; padding: 5px 11px; max-width: 46%; }
.sj-card b { display: block; font: 900 14px system-ui, sans-serif; } .sj-card span { font: 700 12px system-ui, sans-serif; color: #bae6fd; }
.sj-wind { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(15, 23, 42, .78); color: #bbf7d0; border-radius: 999px; padding: 5px 14px; font: 800 13px/1.2 system-ui, sans-serif; white-space: nowrap; }
.sj-wind.is-tail { color: #fecaca; }
.sj-pop { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); font: 900 clamp(20px, 4cqw, 34px) system-ui, sans-serif; color: #fff; text-shadow: 0 2px 0 #1e3a8a, 0 0 10px rgba(30, 58, 138, .6); opacity: 0; white-space: nowrap; }
.sj-pop.is-on { animation: sj-pop 1.8s ease-out forwards; }
@keyframes sj-pop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }
.sj-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.sj-tb button, .sj-tb .ak-mute { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(15, 23, 42, .78); color: #fff; font-size: 17px; cursor: pointer; }
.sj-tb button:focus-visible { outline: 3px solid #ffd54a; }
.sj-hint { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); background: #1e40af; color: #fff; border: 2px solid #bfdbfe; border-radius: 999px; padding: 6px 16px; font: 900 15px system-ui, sans-serif; white-space: nowrap; transition: opacity .3s; }
.sj-hint.is-off { opacity: 0; }
.sj-list { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.sj-list h3 { grid-column: 1 / -1; margin: 0 0 4px; }
.sj-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; }
.sj-list button.is-on { border-color: #fde047; background: rgba(250, 204, 21, .12); } .sj-list button:disabled { opacity: .45; cursor: not-allowed; }
.sj-list small { font-size: 11.5px; opacity: .85; } .sj-list button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; }
.sj-big { font: 900 30px system-ui, sans-serif; margin: 2px 0; }
.sj-pts { margin: 2px 0; } .sj-pts b { color: #fde047; } .sj-tot { font-size: 1.15em; }
.sj-why { font-size: 13px; opacity: .85; margin: 4px 0; }
.sj-medal { font: 900 20px system-ui, sans-serif; margin: 6px 0; }
.sj-res { max-width: 520px; }
.sj-tblw { max-height: 190px; overflow: auto; margin: 6px 0; }
.sj-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.sj-table th, .sj-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); white-space: nowrap; }
.sj-table td:first-child, .sj-table th:first-child { width: 22px; }
.sj-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; }
.sj-table tr.is-me td { background: rgba(250, 204, 21, .18); font-weight: 800; }
@container (max-width: 560px) {
  .sj-card { left: 8px; top: 8px; padding: 4px 8px; max-width: 62%; } .sj-card b { font-size: 12px; } .sj-card span { font-size: 11px; }
  .sj-wind { left: 8px; transform: none; top: 56px; font-size: 12px; padding: 4px 10px; }
  .sj-tb { right: 8px; top: 8px; gap: 4px; } .sj-tb button, .sj-tb .ak-mute { width: 36px; height: 36px; font-size: 15px; }
  .sj-hint { bottom: 92px; font-size: 13px; white-space: normal; text-align: center; width: 84%; }
  .sj-big { font-size: 20px; } .sj-table { font-size: 11.5px; } .sj-res h3 { font-size: 15px; margin: 0; } .sj-pts { font-size: 13px; } .sj-why { display: none; } .sj-tblw { max-height: 112px; } .sj-medal { font-size: 16px; margin: 2px 0; }
}