/* Shared styles for the 2D bike games (bike2d-*.js) */
#game-root .sim-controls-help { margin-top: 4px; }
.bk-setup { display: grid; gap: 12px; }
.bk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bk-head h2 { margin: 0; font-size: 20px; }
.bk-total { font-weight: 900; font-size: 16px; background: rgba(255, 210, 58, .14); color: #ffd23a; border-radius: 999px; padding: 3px 12px; }
.bk-sub { margin: 6px 0 0; font-size: 15px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.bk-lv { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 74px; padding: 8px 10px; border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .14); color: #fff; font: 700 13px system-ui, sans-serif; text-align: left; cursor: pointer; overflow: hidden;
  background: linear-gradient(160deg, var(--a, #3a6fd8) 0%, var(--b, #1d2a3a) 100%); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); transition: transform .1s ease, border-color .15s ease; }
.bk-lv::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); pointer-events: none; }
.bk-lv b { font-size: 20px; font-weight: 900; line-height: 1; }
.bk-lv span { line-height: 1.15; position: relative; z-index: 1; }
.bk-lv small { font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #ffd23a; position: relative; z-index: 1; margin-top: auto; }
.bk-lv:hover:not(:disabled) { border-color: #ffd23a; transform: translateY(-2px); }
.bk-lv:focus-visible, .bk-skin:focus-visible { outline: 3px solid #ffd23a; outline-offset: 2px; }
.bk-lv.is-locked { filter: grayscale(.85) brightness(.6); cursor: not-allowed; }
.bk-skins { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-skin { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 112px; padding: 7px 10px; border-radius: 12px; border: 2px solid var(--color-border, #333);
  background: var(--color-bg-alt, #1c1f27); color: var(--color-text, #fff); font: 700 13px system-ui, sans-serif; cursor: pointer; text-align: left; }
.bk-skin small { font-size: 11px; opacity: .8; }
.bk-skin[aria-pressed="true"] { border-color: #ffd23a; background: rgba(255, 210, 58, .12); }
.bk-skin:disabled { opacity: .45; cursor: not-allowed; }
.bk-sw { width: 100%; height: 8px; border-radius: 4px; margin-bottom: 3px; }

.bk-wrap { width: 100%; }
.bk-wrap .ak-stage { position: relative; width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); container-type: inline-size; background: #0b1020; }
.bk-hud { position: absolute; inset: 0; pointer-events: none; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.bk-tl { position: absolute; left: 10px; top: 8px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.bk-lvname { font: 800 13px system-ui, sans-serif; opacity: .95; }
.bk-time { font: 900 26px system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.bk-flips { font: 800 14px system-ui, sans-serif; color: #ffd23a; min-height: 1em; }
.bk-tb { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; }
.bk-tb button { pointer-events: auto; border: 1px solid rgba(255, 255, 255, .25); background: rgba(8, 16, 28, .66); color: #fff; border-radius: 10px; width: 38px; height: 38px; padding: 0;
  font: 800 16px system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(4px); }
.bk-tb .ak-mute { width: 38px; height: 38px; border-radius: 10px; border-color: rgba(255, 255, 255, .25); background: rgba(8, 16, 28, .66); color: #fff; font-size: 16px; pointer-events: auto; }
.bk-tb button:focus-visible { outline: 3px solid #ffd23a; outline-offset: 1px; }
.bk-msg { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity .15s, transform .15s; background: rgba(8, 16, 28, .8);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: 10px 20px; text-align: center; font: 900 24px system-ui, sans-serif; white-space: nowrap; }
.bk-msg.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bk-msg small { display: block; font-size: 13px; font-weight: 700; opacity: .85; }
.bk-start { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); background: rgba(8, 16, 28, .78); border: 1px solid rgba(255, 210, 58, .5); border-radius: 999px;
  padding: 8px 18px; font: 800 16px system-ui, sans-serif; white-space: nowrap; animation: bk-pulse 1.2s ease-in-out infinite; transition: opacity .3s; }
.bk-start.is-off { opacity: 0; animation: none; }
.bk-start kbd, .bk-help kbd { background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font: 800 13px ui-monospace, monospace; }
@keyframes bk-pulse { 50% { transform: translateX(-50%) scale(1.05); } }
.bk-touch { display: none; }
.bk-hud.is-touch .bk-touch { display: block; }
.bk-hud.is-touch .bk-start { bottom: 34%; }
.bk-tpad { position: absolute; bottom: 10px; display: flex; gap: 10px; }
.bk-tleft { left: 10px; } .bk-tright { right: 10px; }
.bk-tpad button { pointer-events: auto; width: 15cqw; height: 15cqw; max-width: 92px; max-height: 92px; min-width: 52px; min-height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45);
  background: rgba(8, 16, 28, .42); color: #fff; font: 900 26px system-ui, sans-serif; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.bk-tpad button.bk-gas { background: rgba(34, 197, 94, .45); }
.bk-tpad button.is-down { background: rgba(255, 210, 58, .55); transform: scale(.94); }
.bk-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 10, 20, .5); pointer-events: auto; animation: bk-fade .3s ease; }
@keyframes bk-fade { from { opacity: 0; } }
.bk-card { background: rgba(14, 22, 36, .96); border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; padding: 16px 24px; text-align: center; max-width: 90%; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.bk-card h3 { margin: 0 0 2px; font-size: 22px; }
.bk-card p { margin: 4px 0; }
.bk-goal { font-size: 13px; opacity: .85; }
.bk-stars { font-size: 40px; color: #ffd23a; letter-spacing: 4px; line-height: 1.1; text-shadow: 0 2px 10px rgba(255, 210, 58, .5); }
.bk-stars span { display: inline-block; animation: bk-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.bk-stars i { font-style: normal; opacity: .35; }
@keyframes bk-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.bk-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
@container (max-width: 560px) {
  .bk-time { font-size: 18px; } .bk-lvname, .bk-flips { font-size: 11px; }
  .bk-tb { gap: 4px; top: 6px; right: 6px; } .bk-tb button, .bk-tb .ak-mute { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
  .bk-msg { font-size: 17px; padding: 7px 14px; } .bk-start { font-size: 12px; padding: 5px 12px; }
  .bk-card { padding: 10px 14px; } .bk-card h3 { font-size: 17px; } .bk-stars { font-size: 28px; } .bk-card p { font-size: 13px; }
  .bk-card .btn { padding: 6px 12px; font-size: 13px; }
  .bk-tpad { bottom: 6px; gap: 6px; } .bk-tleft { left: 6px; } .bk-tright { right: 6px; }
  .bk-tpad button { min-width: 44px; min-height: 44px; font-size: 20px; }
}

/* race mode (Motocross Racer): countdown, position, standings */
.bk-start .bk-go { display: block; font: 900 46px system-ui, sans-serif; color: #ffd23a; padding: 0 18px; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.bk-pos { font: 900 15px system-ui, sans-serif; color: #fff; background: rgba(8, 16, 28, .55); border-radius: 8px; padding: 2px 8px; display: inline-block; margin-top: 2px; min-height: 1em; }
.bk-pos:empty { display: none; }
.bk-standings { list-style: none; counter-reset: st; margin: 6px auto 4px; padding: 0; display: inline-block; text-align: left; font-size: 14px; }
.bk-standings li { counter-increment: st; padding: 1px 0; }
.bk-standings li::before { content: counter(st) ". "; font-weight: 800; opacity: .7; }
.bk-standings li.is-me { font-weight: 900; color: #ffd23a; }
.bk-standings i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.bk-standings small { opacity: .7; margin-left: 4px; }
@container (max-width: 560px) { .bk-start .bk-go { font-size: 34px; } .bk-standings { font-size: 12px; } }
.bk-start.is-count { bottom: auto; top: 22%; border-radius: 18px; }
.bk-hud.is-touch .bk-start.is-count { bottom: auto; }

/* Wheelie Life + other setup screens with a separate Ride button */
.bk-lv.is-picked { outline: 3px solid #ffd23a; outline-offset: 2px; }
.bk-setup .wl-go { display: block; margin: 14px auto 6px; font-size: 18px; padding: 10px 34px; }
.wl-big { font: 900 40px system-ui, sans-serif; color: #ffd23a; margin: 2px 0 !important; }
@container (max-width: 560px) { .wl-big { font-size: 30px; } }

/* trick button (Stickman Bike Stunts) */
.bk-tpad .bk-trick { background: rgba(168, 85, 247, .85); color: #fff; }
.bk-tpad .bk-trick.is-down { background: #a855f7; }
/* light themes (paper sketch): dark HUD text */
.bk-hud.is-light .bk-tl { color: #1a1a1a; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.bk-hud.is-light .bk-flips { color: #a16207; }