/* Raft Survival Ocean : page-specific styles (shared: sim3d.css, car-kit.css, boat3d.css, tycoon-kit.css) */
.sim-result[hidden] { display: none; }
.rs-stats { position: absolute; left: 12px; top: 10px; width: 170px; background: rgba(8, 16, 28, .76); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 6px 10px 7px; pointer-events: none; display: flex; flex-direction: column; gap: 4px; }
.rs-day { font: 900 14px system-ui, sans-serif; color: #fde047; }
.rs-bar { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rs-bar b { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; display: block; }
.rs-bar i { display: block; height: 100%; border-radius: 5px; transition: width .3s; }
.rs-goal { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(8, 16, 28, .76); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 5px 14px; font: 800 13px system-ui, sans-serif; pointer-events: none; white-space: nowrap; max-width: calc(100% - 360px); overflow: hidden; text-overflow: ellipsis; }
.rs-goal b { color: #fde047; }
/* inventory strip */
.rs-inv { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 46%; pointer-events: none; }
.rs-inv span { background: rgba(8, 16, 28, .76); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; padding: 3px 7px; font-size: 16px; display: flex; align-items: center; gap: 3px; }
.rs-inv b { font: 900 12px system-ui, sans-serif; }
/* tools + eat / drink */
.rs-tools { position: absolute; right: 12px; bottom: 58px; display: flex; gap: 5px; }
.rs-tools button { position: relative; width: 46px; height: 46px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(8, 16, 28, .78); color: #fff; font-size: 21px; cursor: pointer; padding: 0; }
.rs-tools button small { position: absolute; left: 3px; top: 1px; font: 800 9px system-ui, sans-serif; opacity: .7; }
.rs-tools button b { position: absolute; right: 3px; bottom: 1px; font: 900 10px system-ui, sans-serif; color: #fde047; }
.rs-tools button.is-on { border-color: #fde047; background: rgba(202, 138, 4, .55); }
.rs-tools button.is-locked { opacity: .4; }
.rs-tools button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; }
.rs-hint { position: absolute; left: 50%; bottom: 114px; transform: translateX(-50%); max-width: min(560px, calc(100% - 24px)); background: rgba(8, 16, 28, .8); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 5px 12px; font: 800 13px system-ui, sans-serif; text-align: center; pointer-events: none; }
.rs-hint[hidden] { display: none; }
.rs-charge { position: absolute; left: 50%; bottom: 152px; transform: translateX(-50%); width: 160px; height: 10px; border-radius: 5px; background: rgba(8, 16, 28, .6); border: 1px solid rgba(255, 255, 255, .35); overflow: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; }
.rs-charge.is-on { opacity: 1; }
.rs-charge i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #facc15, #f97316); }
.rs-pop { top: 30%; font-size: clamp(16px, 2.4vw, 22px); }
.rs-night { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, rgba(10, 20, 60, 0), rgba(10, 20, 60, .65)); opacity: 0; transition: opacity 3s; }
/* build & craft panel */
.rs-build { width: min(380px, calc(100% - 20px)); max-height: calc(100% - 40px); overflow: auto; top: 54px; }
.rs-rec { display: flex !important; align-items: center; gap: 8px; width: 100%; text-align: left; margin: 0 0 5px; }
.rs-rec > span { font-size: 22px; }
.rs-rec b { min-width: 92px; }
.rs-rec small { font: 600 11px/1.3 system-ui, sans-serif; opacity: .85; }
.rs-rec em { font-style: normal; font-weight: 900; }
.rs-rec em.is-short { color: #fca5a5; }
.rs-rec.is-no { opacity: .6; }
.rs-x { width: 100%; }
/* touch: stick left, use + interact right */
.rs-touch .sim-tbtns { left: auto; right: 14px; bottom: 116px; flex-direction: column; }
.rs-touch .sim-tbtn { width: 62px; height: 62px; border-radius: 50%; font-size: 26px; }
.rs-touch .sim-tbtn[data-id="use"] { background: rgba(202, 138, 4, .8); }
.sim-has-touch .rs-inv { bottom: 150px; max-width: 60%; }
.sim-has-touch .rs-hint { bottom: 196px; }
@container (max-width: 560px) {
  .rs-stats { width: 128px; padding: 4px 7px; top: 92px; left: 8px; } .rs-day { font-size: 12px; } .rs-bar { font-size: 11px; }
  .rs-goal { top: 8px; left: 50%; max-width: calc(100% - 140px); font-size: 11px; padding: 4px 9px; }
  .rs-tools { right: 8px; bottom: 8px; gap: 3px; } .rs-tools button { width: 38px; height: 38px; font-size: 17px; }
  .rs-inv { top: 44px; right: 6px; left: auto; bottom: auto; flex-direction: column; flex-wrap: nowrap; max-width: none; max-height: calc(100% - 250px); overflow-y: auto; pointer-events: auto; scrollbar-width: none; }
  .sim-has-touch .rs-inv { bottom: auto; max-width: none; }
  .rs-inv span { font-size: 12px; padding: 1px 5px; } .rs-inv b { font-size: 10px; }
  .rs-hint { font-size: 11px; }
  .rs-touch .sim-tbtns { bottom: 56px; right: 8px; } .rs-touch .sim-tbtn { width: 54px; height: 54px; font-size: 22px; }
}