/* ============================================================================
   Велозаезд-экшн: сцена, HUD, экранные кнопки. Новые SVG-ассеты подключены
   в bike-ride.js; старые геометрические спрайты оставлены как fallback.
   Старые классы .bike-* сохранены для спокойного заезда. Экшн-классы имеют
   префиксы .bike-ex-*, .bike-hud-top и .bike-wslot.
   ========================================================================== */

.bike-hud {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .75rem 0;
  font-size: 1.2rem;
}
.bike-hud b { padding: .45rem .65rem; border: 1px solid #71849666; border-radius: .6rem; }

/* ---------- сцена экшна ---------- */
.bike-ex-stage {
  position: relative;
  overflow: hidden;
  height: clamp(240px, 46vh, 420px);height: clamp(240px, 46svh, 420px);
  border: 2px solid #4b5a4c;
  border-radius: 16px;
  background: #0b0e0c;
  isolation: isolate;
  user-select: none;
  touch-action: manipulation;
}
.bike-ex-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #0b0e0c;
}
.bike-ex-stage.shake { animation: bike-ex-shake .3s linear; }
@keyframes bike-ex-shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 3px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-5px, -3px); }
  80% { transform: translate(4px, 2px); }
  100% { transform: translate(0, 0); }
}
.bike-flash {
  position: absolute; inset: 0; z-index: 4;
  background: radial-gradient(ellipse at center, #ff3b2f22, #ff3b2f55);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}

/* ---------- HUD поверх сцены ---------- */
.bike-hud-top { margin: .5rem 0 .35rem; }
.bike-hud-top .bike-pill {
  background: #131a16e6;
  border: 1px solid #3c4a3e;
  border-radius: .55rem;
  padding: .3rem .55rem;
  font: 14px/1.5 'Space Mono', ui-monospace, monospace;
  color: #9da9a0;
  letter-spacing: .04em;
}
.bike-hud-top .bike-pill span { color: #f1f0e9; font-weight: 700; font-variant-numeric: tabular-nums; }
.bike-hpbar {
  display: inline-block; vertical-align: middle;
  width: 74px; height: 9px; margin-left: .25rem;
  border: 1px solid #4a5a4c; border-radius: 5px; background: #0d120e; overflow: hidden;
}
.bike-hpbar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #7fbf5f, #c5f477);
  transition: width .15s;
}
.bike-hpbar.low i { background: linear-gradient(90deg, #c94f3f, #ff5a5a); }
.bike-hearts { font-size: 18.2px; letter-spacing: 2px; color: #ff5a5a; text-shadow: 0 0 6px #ff5a5a66; }
.bike-hearts .off { color: #4a3a3a; text-shadow: none; }

/* ---------- панель оружия ---------- */
.bike-weapons { display: flex; gap: .35rem; flex-wrap: wrap; margin: .4rem 0; }
.bike-wslot {
  position: relative; overflow: hidden;
  min-width: 92px; padding: .3rem .4rem .45rem;
  border: 1px solid #3c4a3e; border-radius: .6rem;
  background: #131a16e6; color: #f1f0e9;
  font: 11.9px/1.35 'Space Mono', ui-monospace, monospace;
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.bike-wslot.sel { border-color: #c5f477; box-shadow: 0 0 0 2px #c5f47733, 0 0 14px #c5f47722; }
.bike-wslot .bike-wkey { position: absolute; top: 2px; right: 5px; color: #f1c77b; }
.bike-wslot .bike-wicon { display: block; font-size: 23.8px; line-height: 1.1; }
.bike-wslot .bike-wname { display: block; margin-top: 2px; letter-spacing: .02em; }
.bike-wslot .bike-wstat { display: block; color: #9da9a0; }
.bike-wslot .bike-wcd { position: absolute; left: 0; bottom: 0; height: 3px; width: 0%; background: #c5f477; }

/* ---------- экраны меню / отсчёт / финал ---------- */
.bike-screen {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 1rem; text-align: center;
  background: #0a0d0bd9; color: #f1f0e9;
}
.bike-screen[hidden] { display: none; }
.bike-screen .bike-tag {
  font: 14px 'Space Mono', ui-monospace, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: #ff956c;
}
.bike-screen h2 { margin: 0; font-size: clamp(33.6px, 7vw, 61.6px); letter-spacing: -.03em; text-shadow: 0 4px 30px #000; }
.bike-screen p { max-width: 560px; margin: 0; color: #c9d4c6; font-size: 17.5px; line-height: 1.6; }
.bike-screen .bike-keys { font: 14px/1.9 'Space Mono', ui-monospace, monospace; color: #9da9a0; }
.bike-screen .bike-keys b { color: #c5f477; }
.bike-screen .bike-stats { font: 16.1px/1.9 'Space Mono', ui-monospace, monospace; color: #f1c77b; }
.bike-screen .bike-stats b { color: #f1f0e9; }
#bikeScreenEnd h2 { color: #ff5a5a; text-shadow: 0 0 30px #ff5a5a55; }
#bikeScreenEnd.win h2 { color: #c5f477; text-shadow: 0 0 30px #c5f47755; }
#bikeCountText { font-size: clamp(67.2px, 16.8vw, 154px); color: #c5f477; text-shadow: 0 0 40px #c5f47755; }
.bike-go {
  border: 1px solid #c5f477 !important; border-radius: .75rem !important;
  padding: .7rem 2.4rem !important;
  background: linear-gradient(#3a5230, #24361f) !important;
  color: #c5f477 !important;
  font: 800 25.2px 'Space Mono', ui-monospace, monospace !important;
  letter-spacing: .1em !important;
  box-shadow: 0 5px 0 #16240f, 0 10px 26px #0009 !important;
}
.bike-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #16240f !important; }

/* ---------- экранные тач-кнопки ---------- */
.bike-touch {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 6;
  display: flex; gap: .4rem;
}
.bike-touch button {
  width: 52px; height: 48px;
  border: 1px solid #6c8363; border-radius: .7rem;
  background: #1d2b21d9; color: #c5f477;
  font-size: 26.6px; cursor: pointer; touch-action: manipulation;
}
.bike-touch button:active { background: #37513b; }

/* ---------- G55: уведомление о смене участка маршрута ----------
   Сцена имеет overflow:hidden, а canvas занимает всю её высоту, поэтому
   без absolute баннер уезжал бы под холст и игрок не увидел бы смену
   участка («смена каждого куска уведомляет что происходит» — ТЗ).
   Сплошная геометрия: плашка + рамка + текст, никакой отрисовки. */
.bike-seg-banner {
  position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
  z-index: 6; max-width: 86%; padding: .45rem .9rem;
  background: #0b0e0ce6; border: 1px solid #c5f47766; border-radius: .7rem;
  box-shadow: 0 8px 26px #000a;
  text-align: center; pointer-events: none; white-space: normal;
  animation: bike-seg-in .3s ease-out;
}
.bike-seg-banner[hidden] { display: none; }
.bike-seg-banner b {
  display: block; color: #c5f477;
  font: 700 clamp(18.2px, 3.6vw, 26.6px)/1.3 'Space Mono', ui-monospace, monospace;
  letter-spacing: .05em; text-shadow: 0 2px 12px #000;
}
.bike-seg-banner span {
  display: block; margin-top: .18rem; color: #f1c77b;
  font-size: clamp(14px, 2.8vw, 18.2px); line-height: 1.45;
}
@keyframes bike-seg-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .bike-seg-banner { animation: none; } }

/* ---------- старая разметка спокойного объезда (сохранена) ---------- */
.bike-stage {
  position: relative;
  overflow: hidden;
  height: 260px;
  border: 2px solid #32445a;
  border-radius: 16px;
  background: linear-gradient(#9fd8f5 0 20%, #7cc279 20% 33%, #343c48 33% 100%);
  isolation: isolate;
}
.bike-parade {
  position: absolute;
  top: 17%; left: 0; right: 0;
  height: 16%; display: flex; justify-content: space-around; align-items: center;
  font-size: 1.9rem; letter-spacing: .5rem;
  background: #d5bdad;
  box-shadow: 0 3px 0 #e9d9bd;
  white-space: nowrap;
}
.bike-roadmark {
  position: absolute;
  inset: 33% 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 36px, #ffffff82 36px 62px, transparent 62px 95px) 0 33% / 100% 3px no-repeat,
              repeating-linear-gradient(90deg, transparent 0 36px, #ffffff82 36px 62px, transparent 62px 95px) 0 66% / 100% 3px no-repeat;
  animation: bike-stripes .9s linear infinite;
}
@keyframes bike-stripes { to { background-position: -95px 33%, -95px 66%; } }
.bike-riders {
  position: absolute;
  z-index: 3;
  left: 18%;
  top: calc(42% + var(--lane) * 20%);
  transform: translateY(-50%);
  display: flex; gap: .1rem; align-items: center;
  font-size: clamp(2.4rem, 8.4vw, 3.5rem);
  transition: top .16s ease;
  filter: drop-shadow(0 3px 2px #0007);
}
.bike-tolya { transform: scaleX(-1); }
.bike-riders.bike-hit { animation: bike-hit .6s ease; }
@keyframes bike-hit { 40% { opacity: .35; transform: translateY(-50%) rotate(-8deg); } }
.bike-obstacle {
  position: absolute; z-index: 2;
  top: calc(42% + var(--lane) * 20%);
  transform: translateY(-50%);
  font-size: clamp(2rem, 7vw, 3.1rem);
  filter: drop-shadow(0 3px 2px #0008);
  pointer-events: none;
}
.bike-bell-wave {
  position: absolute; z-index: 4;
  left: 27%; top: 44%;
  font-size: 2.8rem; color: #fce354;
  opacity: 0; pointer-events: none;
}
.bike-bell-wave.ring { animation: bike-ring .65s ease-out; }
@keyframes bike-ring { 10% { opacity: 1; } 100% { opacity: 0; transform: translate(90px, -35px) scale(1.5); } }
.bike-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; }
.bike-controls button { min-width: 105px; touch-action: manipulation; }

@media (max-width: 520px) {
  .bike-stage { height: 220px; }
  .bike-ex-stage {height: clamp(200px, 40vh, 320px);height: clamp(200px, 40svh, 320px); }
  .bike-hud { font-size: 1.1rem; }
  .bike-hud b { padding: .3rem .42rem; }
  .bike-wslot { min-width: 74px; }
  .bike-touch button { width: 46px; height: 44px; font-size: 23.8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bike-roadmark, .bike-riders.bike-hit, .bike-bell-wave.ring, .bike-ex-stage.shake { animation: none; }
  .bike-riders { transition: none; }
  .bike-flash { transition: none; }
}

/* Illustrated 2D roadside scene. Keep the canvas proportions on phones:
   the old fixed height stretched riders and made incoming hazards unreadable. */
.bike-stage.bike-ex-stage {
  height: auto;
  aspect-ratio: 8 / 5;
  border: 3px solid #cf9562;
  border-radius: 18px;
  box-shadow: 0 0 0 3px #20384d, 0 14px 30px #07182288;
  background: #4b8790;
}
.bike-ex-stage canvas {
  position: absolute;
  inset: 0;
  image-rendering: auto;
}
.bike-ex-stage::before,
.bike-ex-stage::after { content: none; }
.bike-hud-top {
  gap: .35rem;
  padding: .38rem;
  border: 2px solid #d59d63;
  border-radius: .85rem;
  background: linear-gradient(120deg, #173d51, #142d39 50%, #37432f);
  box-shadow: inset 0 1px 0 #fff3, 0 6px 18px #07182255;
}
.bike-hud-top .bike-pill {
  background: #f4ead7;
  border: 1px solid #beac8f;
  border-radius: .45rem;
  color: #465e67;
  font-weight: 800;
  box-shadow: 0 2px 0 #b28f68;
}
.bike-hud-top .bike-pill span { color: #173d51; }
.bike-hpbar { border-color: #22483e; background: #b6c1ac; }
.bike-hearts { color: #ce4853; text-shadow: 0 1px 0 #fff8; }
.bike-weapons { gap: .35rem; }
.bike-wslot {
  min-height: 62px;
  border: 2px solid #ac9879;
  background: linear-gradient(155deg, #f6ebd6, #dbc9ac);
  color: #1f3e4b;
  box-shadow: 0 3px 0 #6f6551, inset 0 1px 0 #fff9;
}
.bike-wslot.sel {
  border-color: #e2763e;
  background: linear-gradient(145deg, #fff0cd, #ffd197);
  box-shadow: 0 0 0 2px #ef8c59, 0 4px 0 #894c2d;
}
.bike-wslot .bike-wkey,
.bike-wslot .bike-wstat { color: #58737b; }
.bike-wslot .bike-wcd { height: 5px; background: #e47348; }
/* Weapon tiles read as simple prop cards instead of tiny dark chips. */
.bike-wslot .bike-wicon {
  display: inline-grid; place-items: center;
  width: 30px; height: 28px; margin: 2px 0;
  border: 1px solid #b69972; border-radius: 5px;
  background: #fff7e7;
  box-shadow: inset 0 1px 0 #fff;
}
.bike-wslot .bike-wicon svg { display: block; width: 24px; height: 24px; }
.bike-wslot.sel .bike-wicon {
  border-color: #d4753d;
  box-shadow: 0 0 0 2px #f6aa78;
}
.bike-touch button {
  border: 2px solid #fff3cc;
  background: #16445de8;
  color: #ffeed0;
  box-shadow: 0 3px 0 #092b3d;
}
.bike-touch button:active { background: #e2844d; box-shadow: 0 1px 0 #713e27; }
.bike-seg-banner {
  top: 9%;
  border: 2px solid #ffdb9d;
  background: #16394fe8;
  box-shadow: 0 5px 0 #844c39, 0 12px 22px #10263588;
}
.bike-seg-banner b { color: #fff1d5; }
.bike-seg-banner span { color: #ffce91; }
.bike-screen {
  background: linear-gradient(105deg, #102d41ed 0%, #12384acb 63%, #1c3340a6 100%);
  text-shadow: 0 2px 5px #10202a;
}
.bike-screen .bike-tag { color: #ffcc89; font-weight: 800; }
.bike-screen h2 { color: #fff1d4; text-shadow: 0 3px 0 #3f6573, 0 8px 20px #081d28; }
.bike-screen .bike-keys b { color: #ffdb96; }
.bike-go {
  border-color: #ffdb96 !important;
  background: linear-gradient(#e69c5b, #bf683b) !important;
  color: #fff8e8 !important;
  box-shadow: 0 5px 0 #693b2c, 0 10px 26px #071b2899 !important;
}
#bikeScreenEnd { background: #152f3def; }
#bikeScreenEnd.win { background: #224b3eeb; }
#bikeScreenEnd.win h2 { color: #ffe4a6; text-shadow: 0 3px 0 #7a5040; }
@media (max-width: 520px) {
  .bike-hud-top .bike-pill { font-size: 12.6px; }
  .bike-wslot { min-width: 76px; }
  .bike-seg-banner { max-width: 93%; padding: .3rem .5rem; }
}