/* «Что может пойти не так» (#hazards): the 3D road diorama (canvas by hazards.js) with the in-game style event feed,
   a hardware control desk (mushroom button, toggle switch, push button, odometer) and plates with the real numbers. */
#hazards { background: linear-gradient(180deg, var(--ink), #191815 60%, var(--ink)); }

/* Diorama window: a steel frame around the canvas. */
#hazards .hz-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 8.2; max-height: 76vh; min-height: 340px;
  border-radius: 4px; overflow: hidden; background: #cdbba0; cursor: crosshair; touch-action: pan-y;
  box-shadow: 0 0 0 2px #0c0b0a, 0 0 0 7px #2e2c28, 0 0 0 9px #0c0b0a, var(--shadow-hard);
  -webkit-tap-highlight-color: transparent;
}
#hazards .hz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#hazards .hz-loading {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: #23221f; color: var(--paper-dim); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; transition: opacity .6s;
}
#hazards .hz-loading::before {
  content: ''; width: 44px; height: 44px; border-radius: 50%; border: 8px dotted #6d675d;
  box-shadow: inset 0 0 0 6px #2a2824; animation: hz-spin 1.2s linear infinite;
}
#hazards .hz-stage.is-ready .hz-loading { opacity: 0; pointer-events: none; }
#hazards .hz-stage.is-broken .hz-loading::before { animation: none; border-color: var(--alarm); }

/* Event feed, like the race HUD. */
#hazards .hz-feed {
  position: absolute; z-index: 2; left: 14px; top: 14px; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 6px; justify-items: start; max-width: min(380px, 72%); pointer-events: none;
}
#hazards .hz-feed li {
  background: rgba(21, 20, 18, .88); border-left: 4px solid var(--hazard); padding: 7px 12px 6px;
  font-size: 15px; line-height: 1.2; color: var(--paper); box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
  animation: hz-in .35s cubic-bezier(.3, 1.4, .5, 1); transition: opacity .4s, transform .4s;
}
#hazards .hz-feed li.is-bad { border-left-color: var(--alarm); }
#hazards .hz-feed li.is-good { border-left-color: var(--toxic); }
#hazards .hz-feed li.is-out { opacity: 0; transform: translateX(-24px); }
#hazards .hz-hint { position: absolute; z-index: 2; left: 14px; bottom: 14px; font-size: 14px; pointer-events: none; transition: opacity .5s; }
#hazards .hz-stage.is-used .hz-hint { opacity: 0; }

/* Control desk. */
#hazards .hz-desk {
  margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 30px; padding: 20px 30px;
}
#hazards .hz-ctl { display: flex; align-items: center; gap: 14px; }
#hazards .hz-label { font: 600 16px/1.1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
#hazards .hz-label small { display: block; margin-top: 4px; font-size: 13px; color: var(--paper-dim); letter-spacing: .03em; text-transform: none; }

#hazards .hz-lamp { width: 14px; height: 14px; flex: none; border-radius: 50%; background: #3a1512; box-shadow: inset 0 0 0 2px #0d0c0b; }
#hazards .hz-lamp.green { background: #1f2a14; }
#hazards .hz-lamp.is-on { background: radial-gradient(circle at 40% 35%, #ffb3a8, var(--alarm) 60%); box-shadow: inset 0 0 0 2px #0d0c0b, 0 0 12px rgba(232, 67, 58, .8); }
#hazards .hz-lamp.green.is-on { background: radial-gradient(circle at 40% 35%, #d9f5b8, var(--toxic) 60%); box-shadow: inset 0 0 0 2px #0d0c0b, 0 0 12px rgba(139, 209, 74, .7); }
#hazards .hz-lamp.is-blink { animation: hz-blink .45s steps(2, jump-none) infinite; }

/* Big red mushroom button in a hazard-striped collar. Matte, scuffed, not candy. */
#hazards .hz-mushroom {
  position: relative; flex: none; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: repeating-conic-gradient(var(--hazard) 0 15deg, #151412 15deg 30deg);
  box-shadow: 0 0 0 3px #0d0c0b, 0 6px 14px rgba(0, 0, 0, .5);
}
#hazards .hz-mushroom::before {
  content: ''; position: absolute; inset: 11px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #3a3833, #151412 70%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8);
}
#hazards .hz-dome {
  position: absolute; inset: 17px; border-radius: 50%; transform: translateY(-6px); transition: transform .07s, box-shadow .07s, filter .15s;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 190, 170, .45), transparent 32%),
    repeating-linear-gradient(35deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 45%, #d8392f, #a5241c 60%, #6a150f);
  box-shadow: 0 8px 0 #4a0d0a, 0 11px 12px rgba(0, 0, 0, .5), inset 0 -5px 8px rgba(0, 0, 0, .35);
}
#hazards .hz-mushroom:hover .hz-dome { filter: brightness(1.1); }
#hazards .hz-mushroom:active .hz-dome {
  transform: translateY(1px); box-shadow: 0 1px 0 #4a0d0a, 0 2px 4px rgba(0, 0, 0, .5), inset 0 -3px 6px rgba(0, 0, 0, .35);
}
#hazards .hz-mushroom.is-jammed .hz-dome { animation: hz-jam .25s; }

/* Aircraft-style toggle: lever down = off, up = on. */
#hazards .hz-toggle {
  position: relative; flex: none; width: 58px; height: 90px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, #45423b, #2a2824);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 0 2px #0d0c0b, 0 5px 10px rgba(0, 0, 0, .45);
  font: 600 9px/1 var(--font-body); letter-spacing: .12em; color: var(--paper-dim);
}
#hazards .hz-toggle::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  background: radial-gradient(circle, #1a1917 0 5px, #8f887c 6px 9px, #4b4740 10px 14px);
}
#hazards .hz-toggle .t-on, #hazards .hz-toggle .t-off { position: absolute; left: 0; right: 0; text-align: center; }
#hazards .hz-toggle .t-on { top: 6px; }
#hazards .hz-toggle .t-off { bottom: 6px; }
#hazards .hz-lever {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 20px; margin-left: -5px; border-radius: 5px;
  background: linear-gradient(90deg, #6e685e, #e6ddc9 45%, #8c857a); box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
  transform-origin: 50% 0; transform: rotate(0deg); transition: transform .2s cubic-bezier(.4, 1.8, .5, 1);
}
#hazards .hz-lever::after { content: ''; position: absolute; left: -3px; bottom: -6px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f4ecdb, #9a9387); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
#hazards .hz-toggle[aria-checked="true"] .hz-lever { transform: rotate(180deg); }

/* Square push button with an orange cap and an oil drop. */
#hazards .hz-push {
  position: relative; flex: none; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: #151412; box-shadow: 0 0 0 2px #0d0c0b, inset 0 0 0 3px #3a3833, 0 5px 10px rgba(0, 0, 0, .45);
}
#hazards .hz-cap {
  position: absolute; inset: 9px; border-radius: 5px; transform: translateY(-5px); transition: transform .07s, box-shadow .07s;
  background: linear-gradient(180deg, #ff8a3d, #d8540c); box-shadow: 0 6px 0 #7a2e06, inset 0 1px 0 rgba(255, 255, 255, .3);
}
#hazards .hz-cap::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -9px 0 0 -8px;
  background: #151412; border-radius: 0 50% 50% 50%; transform: rotate(45deg);
}
#hazards .hz-push:active .hz-cap { transform: translateY(1px); box-shadow: 0 0 0 #7a2e06, inset 0 1px 0 rgba(255, 255, 255, .3); }
#hazards .hz-push:disabled { cursor: default; }
#hazards .hz-push:disabled .hz-cap { filter: saturate(.4) brightness(.8); transform: translateY(1px); box-shadow: none; }

/* Odometer: each digit is a reel that rolls. */
#hazards .hz-counter { display: flex; align-items: center; gap: 12px; }
#hazards .hz-odo { display: flex; gap: 3px; padding: 5px; border-radius: 4px; background: #0d0c0b; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 0 0 2px #45423b; }
#hazards .hz-digit {
  width: 26px; height: 38px; overflow: hidden; border-radius: 2px; background: linear-gradient(180deg, #e9e1cf, #cfc5b0 50%, #e9e1cf);
  box-shadow: inset 0 7px 6px -5px rgba(0, 0, 0, .55), inset 0 -7px 6px -5px rgba(0, 0, 0, .55);
}
#hazards .hz-reel { display: flex; flex-direction: column; transition: transform .7s cubic-bezier(.3, 1.35, .6, 1); }
#hazards .hz-reel span { height: 38px; flex: none; display: grid; place-items: center; font: 600 26px/1 var(--font-body); color: #151412; }

/* Real track numbers. */
#hazards .hz-stats {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, calc(50% - 8px)), 1fr));
}
#hazards .hz-stat { padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 6px; }
#hazards .hz-num { font: 400 clamp(38px, 3.4vw, 54px)/.9 var(--font-title); color: var(--hazard); white-space: nowrap; }
#hazards .hz-num small { font-size: .42em; margin-left: .12em; }
#hazards .hz-what { font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
#hazards .hz-note { margin: 0; color: var(--paper-dim); font-size: 15px; line-height: 1.3; }

#hazards .hz-stage.is-flash .hz-canvas { animation: hz-flash .36s ease-out; }

@keyframes hz-spin { to { transform: rotate(1turn); } }
@keyframes hz-flash { 0% { filter: brightness(1.9) saturate(.7); } 100% { filter: none; } }
@keyframes hz-in { from { opacity: 0; transform: translateX(-24px); } }
@keyframes hz-blink { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes hz-jam { 30% { transform: translate(-3px, -5px); } 60% { transform: translate(3px, -5px); } }

@media (max-width: 700px) {
  #hazards .hz-stage { aspect-ratio: 3 / 4; max-height: 74vh; }
  #hazards .hz-feed { left: 10px; top: 10px; max-width: 86%; }
  #hazards .hz-feed li { font-size: 13px; padding: 6px 10px 5px; }
  #hazards .hz-hint { left: 10px; bottom: 10px; font-size: 12px; }
  #hazards .hz-desk { padding: 18px 18px; gap: 16px 18px; }
  #hazards .hz-ctl { flex: 1 1 100%; }
  #hazards .hz-stat { padding: 18px 14px 14px; }
  #hazards .hz-stat:last-child { grid-column: 1 / -1; }
  #hazards .hz-note { font-size: 14px; }
}