/* Rescue Boat. Loaded after assets/css/game-base.css. The bay is a canvas
   drawn by ui.js; this file frames it. */

  .rb-wrap{position:relative; width:min(100%, 480px); margin:0 auto}
  .rb-sea{
    display:block; width:100%; height:auto; aspect-ratio:1000/1400; border-radius:18px;
    background:#7cc6ff; touch-action:none; user-select:none; -webkit-user-select:none; cursor:ew-resize;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 50px -24px rgba(0,0,0,.8);
  }
  .rb-msg{
    position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); pointer-events:none; width:86%;
    font-weight:900; font-size:26px; letter-spacing:-.01em; color:#fff; text-align:center;
    text-shadow:0 2px 0 rgba(0,40,80,.45), 0 0 20px rgba(0,60,120,.6); opacity:0; transition:opacity .25s ease;
  }
  .rb-msg.show{opacity:1}
  .rb-msg small{display:block; font-size:15px; font-weight:750; opacity:.95; margin-top:6px; line-height:1.4}
  .rb-stars{font-size:34px; letter-spacing:6px; margin:4px 0 6px; color:#ffc93c; text-align:center}
  .rb-stars .off{color:var(--border)}
  .rule.big p{font-size:15px; line-height:1.5}
  .rule.big .glyph{font-size:22px}
  .controls .btn[hidden]{display:none}
  #sHearts{color:#ef4444; letter-spacing:1px}

  @media(max-width:520px){
    body.g-rescueboat .hud{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-bottom:12px}
    body.g-rescueboat .stat{padding:8px 8px 8px 11px; min-width:0}
    body.g-rescueboat .stat .k{font-size:9.5px; letter-spacing:.06em}
    body.g-rescueboat .stat .v{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  }