/* Steamboat Scramble - arcade game styles.
   Everything is scoped to #sb-frame, and the frame is a container so the HUD and
   overlay size against the frame (container-query units), not the viewport. */

.sb-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px 48px; }

/* arcade game header: matches the shared 1fr/auto/1fr pixel-title pattern */
.sb-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 6px 4px 4px; border-bottom: 1px solid var(--hair); }
.sb-back { justify-self: start; font-family: var(--label); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12px; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: color .12s ease; }
.sb-back:hover { color: var(--gold); }
.sb-title { font-family: var(--pixel); font-size: clamp(11px, 3vw, 17px); color: var(--gold); text-align: center;
  text-shadow: 0 0 12px oklch(84% 0.13 86 / 0.4); white-space: nowrap; margin: 0; line-height: 1.25; }
.sb-sub { color: var(--ink-soft); font-size: 14px; margin: 12px 0 16px; max-width: 60ch; line-height: 1.5; }

/* the game frame: a self-contained 16:10 stage with a vintage film border */
#sb-frame {
  position: relative; container-type: size;
  width: 100%; max-width: 1080px; aspect-ratio: 16 / 10; margin: 0 auto;
  background: #cfc8b6; overflow: hidden; border-radius: 14px;
  box-shadow: 0 0 0 2px #16140f, 0 0 0 10px #e6dec9, 0 20px 52px rgba(0, 0, 0, .42);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#sb-frame canvas { display: block; width: 100%; height: 100%; }

#sb-vignette { position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 90px 16px rgba(10, 8, 4, .38); mix-blend-mode: multiply; }

/* brand chip, top-right, always legible */
#sb-brand { position: absolute; top: 2.4cqh; right: 2.4cqh; z-index: 3; pointer-events: none;
  font-weight: 800; font-size: clamp(11px, 1.8cqw, 15px); letter-spacing: .04em; color: #f3eedd;
  background: rgba(20, 16, 9, .42); padding: 5px 11px; border-radius: 999px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* HUD (hidden until play) */
#sb-hud { position: absolute; top: 2.2cqh; left: 0; right: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s ease; }
#sb-hud.show { opacity: 1; }
#sb-lives { position: absolute; left: 2.4cqh; top: 0; display: flex; gap: 5px; }
#sb-frame .life { width: clamp(22px, 4.6cqw, 38px); height: auto;
  transition: opacity .15s ease, filter .15s ease; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .45)); }
#sb-frame .life.lost { opacity: .18; filter: grayscale(1); }
#sb-miles { position: absolute; left: 50%; top: 0; transform: translateX(-50%); text-align: center;
  color: #16140f; line-height: 1; }
#sb-miles #sb-score { display: block; font-weight: 900; font-size: clamp(24px, 5.6cqw, 46px);
  letter-spacing: .01em; text-shadow: 0 2px 0 rgba(255, 255, 255, .45), 0 0 14px rgba(255, 255, 255, .3); }
#sb-miles small { display: block; margin-top: 3px; font-weight: 800; font-size: clamp(8px, 1.5cqw, 12px);
  letter-spacing: .24em; text-transform: uppercase; opacity: .72; }

/* mobile tap zones */
#sb-frame .tap { position: absolute; left: 0; right: 0; height: 50%; opacity: 0; }
#sb-tapUp { top: 0; } #sb-tapDown { bottom: 0; }

/* start / end overlay: logo + button centered together as one group */
#sb-overlay { position: absolute; inset: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 2.6cqh, 26px); padding: 6cqh 24px;
  background:
    linear-gradient(to bottom, rgba(8, 6, 3, .68) 0%, rgba(8, 6, 3, .06) 34%),
    radial-gradient(120% 105% at 50% 50%, rgba(20, 15, 8, .36) 0%, rgba(15, 11, 6, .62) 56%, rgba(8, 6, 3, .9) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(.85) brightness(.92); backdrop-filter: blur(3px) saturate(.85) brightness(.92);
  animation: sbOverlayIn .5s ease both; }
@keyframes sbOverlayIn { from { opacity: 0; } to { opacity: 1; } }

#sb-logo { display: block; width: min(82cqw, 900px); max-height: 36cqh; height: auto; object-fit: contain;
  pointer-events: none; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .55));
  animation: sbLogoBob 5s ease-in-out infinite; will-change: transform; }
@keyframes sbLogoBob {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-1.6cqh) rotate(.6deg); } }

#sb-overlayCenter { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.4cqh, 22px); }

#sb-msg { color: #f3eedd; font-weight: 700; letter-spacing: .01em; max-width: 34ch; line-height: 1.35;
  font-size: clamp(15px, 3cqw, 20px); text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
#sb-msg:empty { display: none; }
#sb-msg b { color: #fff; }

#sb-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
#sb-start { padding: 14px 44px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(#f8f3e4, #e6dcc4); color: #16140f; font-weight: 900;
  font-size: clamp(17px, 3.6cqw, 23px); letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 5px 0 #2a2620, 0 12px 22px rgba(0, 0, 0, .5), 0 0 0 0 rgba(248, 243, 228, 0);
  transition: transform .12s ease, box-shadow .12s ease; animation: sbBtnGlow 2.2s ease-in-out infinite; }
@keyframes sbBtnGlow {
  0%, 100% { box-shadow: 0 5px 0 #2a2620, 0 12px 22px rgba(0, 0, 0, .5), 0 0 0 0 rgba(248, 243, 228, 0); }
  50%      { box-shadow: 0 5px 0 #2a2620, 0 12px 22px rgba(0, 0, 0, .5), 0 0 0 9px rgba(248, 243, 228, .14); } }
#sb-start:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 7px 0 #2a2620, 0 16px 26px rgba(0, 0, 0, .55); animation: none; }
#sb-start:active { transform: translateY(3px) scale(.99); box-shadow: 0 2px 0 #2a2620, 0 6px 12px rgba(0, 0, 0, .5); animation: none; }
#sb-start:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#sb-share { padding: 13px 28px; border: 2px solid rgba(246, 241, 226, .65); border-radius: 999px; cursor: pointer;
  background: rgba(243, 238, 221, .12); color: #f6f1e2; font-weight: 800;
  font-size: clamp(15px, 3cqw, 19px); letter-spacing: .05em; text-transform: uppercase;
  transition: transform .12s ease, background .12s ease; }
#sb-share:hover { transform: translateY(-2px); background: rgba(243, 238, 221, .22); }
#sb-share:active { transform: translateY(2px); }
#sb-share:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#sb-overlay small { display: block; margin-top: .4cqh; color: #efe7d4; font-size: clamp(11px, 2.3cqw, 14px);
  letter-spacing: .045em; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

#sb-toast { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: rgba(20, 16, 9, .9); color: #f3eedd; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; }

#sb-frame .hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #sb-logo, #sb-start, #sb-overlay { animation: none !important; }
}