/* Sledding Hill : page-specific styles (shared: arcade-kit.css, sim3d.css for the banner / result card) */
.sl-wrap { position: relative; width: 100%; }
.sl-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; container-type: inline-size; }
.sl-hud button, .sl-hud .sim-result { pointer-events: auto; }
.sl-hud .sim-result[hidden] { display: none; }
.sl-card { position: absolute; left: 10px; top: 10px; background: rgba(15, 23, 42, .78); color: #fff; border-radius: 12px; padding: 5px 11px; max-width: 46%; }
.sl-card b { display: block; font: 900 14px system-ui, sans-serif; } .sl-card span { font: 700 11.5px system-ui, sans-serif; color: #bae6fd; }
.sl-stars { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(15, 23, 42, .78); color: #fde047; border-radius: 999px; padding: 4px 14px; font: 900 22px/1.2 system-ui, sans-serif; white-space: nowrap; }
.sl-pop { position: absolute; left: 50%; top: 30%; 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; }
.sl-pop.is-on { animation: sl-pop 1.5s ease-out forwards; }
@keyframes sl-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%); } }
.sl-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.sl-tb button, .sl-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; }
.sl-tb button:focus-visible { outline: 3px solid #ffd54a; }
.sl-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: #1e40af; color: #fff; border: 2px solid #bfdbfe; border-radius: 999px; padding: 7px 16px; font: 900 15px system-ui, sans-serif; white-space: nowrap; transition: opacity .4s; animation: sl-bob 1s ease-in-out infinite alternate; }
.sl-hint.is-off { opacity: 0; }
@keyframes sl-bob { to { transform: translate(-50%, -5px); } }
.sl-list { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.sl-list h3 { grid-column: 1 / -1; margin: 0 0 4px; }
.sl-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; }
.sl-list button.is-on { border-color: #fde047; background: rgba(250, 204, 21, .12); } .sl-list button:disabled { opacity: .45; cursor: not-allowed; }
.sl-list small { font-size: 11.5px; opacity: .85; } .sl-list button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; }
.sl-st { font-size: 30px; margin: 4px 0; }
@container (max-width: 560px) {
  .sl-card { left: 8px; top: 56px; padding: 4px 8px; max-width: 70%; } .sl-card b { font-size: 12.5px; } .sl-card span { font-size: 10.5px; }
  .sl-stars { left: 8px; transform: none; top: 8px; font-size: 18px; padding: 3px 10px; }
  .sl-tb { right: 8px; top: 8px; gap: 4px; } .sl-tb button, .sl-tb .ak-mute { width: 36px; height: 36px; font-size: 15px; }
  .sl-hint { font-size: 13px; white-space: normal; text-align: center; width: 84%; }
}