/* River Rafting Rush 3D : page-specific styles (shared styles come from sim3d.css / car-kit.css / boat3d.css) */
#game-root .ak-pick.is-locked { opacity: .55; }
#game-root .ak-pick-row--tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
#game-root .ak-pick-row--tiers .ak-pick { width: auto; margin: 0; }
.sim-result[hidden] { display: none; }
.rr-perk { margin: 8px 0 0; font-size: 14px; opacity: .9; }
/* hearts card */
.rr-card { position: absolute; left: 12px; top: 10px; background: rgba(8, 16, 28, .74); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 5px 11px 6px; pointer-events: none; display: flex; flex-direction: column; }
.rr-card b { font-size: 19px; letter-spacing: 1px; white-space: nowrap; }
.rr-card .rr-lost { opacity: .45; }
.rr-card small { font: 800 11px system-ui, sans-serif; color: #fde047; letter-spacing: .03em; }
.rr-card.is-hurt { animation: rr-hurt .5s ease-out; }
@keyframes rr-hurt { 0%, 40% { background: rgba(220, 38, 38, .85); transform: scale(1.08); } 100% { background: rgba(8, 16, 28, .74); transform: none; } }
/* progress down the river */
.rr-prog { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); width: min(440px, 56%); pointer-events: none; }
.rr-prog__bar { position: relative; height: 8px; border-radius: 4px; background: rgba(8, 16, 28, .6); border: 1px solid rgba(255, 255, 255, .3); }
.rr-prog__cp { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: #fb923c; }
.rr-prog__cp.is-fin { width: 6px; margin-left: -3px; background: repeating-linear-gradient(0deg, #fff 0 3px, #111 3px 6px); }
.rr-prog__dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid #0f172a; }
.rr-prog__dot.is-me { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-color: #fff; z-index: 2; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
.rr-hint { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); max-width: min(620px, calc(100% - 24px)); background: rgba(8, 16, 28, .78); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 6px 12px; font: 800 13px system-ui, sans-serif; text-align: center; pointer-events: none; }
.rr-hint[hidden] { display: none; }
.w3-thr i { background: linear-gradient(90deg, #f97316, #facc15); }
/* touch: turn left + paddle on the left thumb, power + turn right on the right thumb */
.rr-touch .sim-tbtns { left: 12px; right: 12px; bottom: 14px; flex-wrap: nowrap; }
.rr-touch .sim-tbtn { width: 64px; height: 64px; border-radius: 50%; font-size: 26px; }
.rr-touch .sim-tbtn[data-id="l"] { order: 1; } .rr-touch .sim-tbtn[data-id="f"] { order: 2; background: rgba(22, 101, 52, .8); }
.rr-touch .sim-tbtn[data-id="pw"] { order: 3; margin-left: auto; background: rgba(194, 65, 12, .8); } .rr-touch .sim-tbtn[data-id="r"] { order: 4; }
.sim-has-touch .sim-toolbar { bottom: 92px; }
.sim-has-touch .rr-hint { bottom: 150px; }
.sim-has-touch .w3-hud { bottom: 92px; }
@container (max-width: 480px) {
  .rr-card { top: 92px; left: 8px; padding: 3px 8px 4px; } .rr-card b { font-size: 15px; } .rr-card small { font-size: 9.5px; }
  .w3-top .w3-big { font-size: 20px; padding: 2px 10px; min-width: 0; }
  .w3-sub { font-size: 12px; gap: 6px; }
  .rr-prog { top: 66px; width: 46%; left: auto; right: 8px; transform: none; }
  .rr-hint { font-size: 11px; padding: 5px 8px; }
  .rr-touch .sim-tbtn { width: 56px; height: 56px; font-size: 22px; }
  .sim-has-touch .sim-toolbar { bottom: auto; }
  .sim-has-touch .w3-hud { bottom: 80px; } .w3-speed { min-width: 64px; padding: 4px 8px; } .w3-speed b { font-size: 22px; }
  .sim-has-touch .rr-hint { bottom: 140px; }
}
@media (prefers-reduced-motion: reduce) { .rr-card.is-hurt { animation: none; } }