/* Elevator, Please! — interactive Rush Hour teaser */
.demo-frame {
  --demo-row-height: 49px;
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 515px; margin-inline: auto;
  padding: clamp(14px,3vw,23px); border-radius: 22px;
  border: 1px solid rgba(0,215,255,.36);
  background: radial-gradient(ellipse at 100% 0%,rgba(0,215,255,.17),transparent 62%),linear-gradient(155deg,#182841,#0a1527 75%);
  box-shadow: 0 18px 60px rgba(0,0,0,.45),0 0 32px rgba(0,215,255,.09);
}
.demo-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: .14;
  background-image: linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size: 32px 32px;
}
.demo-overline,.demo-header,.demo-stats,.demo-floor,.demo-controls,.demo-actions {
  display: flex; align-items: center; justify-content: space-between;
}
.demo-overline {
  font-size: .72rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: #60edff; margin-bottom: 10px;
}
.demo-live-label {
  padding: 3px 8px; border-radius: 99px; letter-spacing: .06em;
  background: rgba(0,215,255,.14); border: 1px solid rgba(0,215,255,.35);
}
.demo-header { align-items: flex-start; gap: 12px; margin-bottom: 13px; }
.demo-header h2 { color: white; font-size: clamp(1.22rem,2.4vw,1.55rem); line-height: 1.12; letter-spacing: -.035em; }
.demo-header p { color: #a7bed3; margin-top: 5px; font-size: .77rem; }
.demo-clock-wrap { flex-shrink: 0; text-align: right; }
.demo-clock-wrap strong {
  display: block; font: 800 2rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums; color: white;
}
.demo-clock-wrap span { font-size: .68rem; color: #a2b6cc; }
.demo-progress { height: 4px; margin-bottom: 11px; overflow: hidden; border-radius: 10px; background: #263b53; }
.demo-progress > div { height: 100%; width: 100%; background: linear-gradient(90deg,#00d7ff,#f5b041); transition: width .1s linear; }
.demo-stats { justify-content: flex-start; gap: 8px; color: #b1c9dd; font-size: .74rem; margin-bottom: 12px; }
.demo-stats span { padding: 5px 8px; border-radius: 7px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.06); }
.demo-stats strong { color: white; font-variant-numeric: tabular-nums; }
.demo-building {
  position: relative; background: #0a1726;
  border: 1px solid rgba(255,255,255,.13); border-radius: 11px; overflow: hidden;
}
.demo-floor {
  position: relative; height: var(--demo-row-height);
  padding: 0 83px 0 12px; justify-content: flex-start; gap: 9px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.demo-floor:nth-child(even) { background: rgba(255,255,255,.025); }
.demo-floor:nth-child(6) { border-bottom: 0; }
.demo-floor-number { color: #dceafb; font: 800 .86rem/1 var(--font-mono); min-width: 26px; }
.demo-waiting { display: flex; flex: 1; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.demo-passenger,.demo-overflow {
  display: inline-flex; justify-content: center; align-items: center;
  background: #ffd17b; color: #12243a; min-width: 28px;
  padding: 6px 5px; border-radius: 6px; font: 800 .74rem/1 var(--font-mono);
}
.demo-passenger.is-urgent { color: #2b101a; background: #ff8383; }
.demo-overflow { background: #acc2d5; }
.demo-none { color: #506c84; }
.demo-shaft {
  position: absolute; top: 0; bottom: 0; right: 12px; width: 63px;
  border-inline: 1px solid #416079; pointer-events: none;
  background: repeating-linear-gradient(90deg,#1a354b 0,#1a354b 3px,#071322 3px,#071322 11px);
}
.demo-car {
  --demo-travel-duration: 0ms;
  position: absolute; left: 5px; right: 5px; bottom: 0;
  height: calc(var(--demo-row-height) - 3px);
  border: 2px solid #ffce75; border-radius: 5px 5px 7px 7px;
  background: linear-gradient(90deg,#264659,#4e7a87,#264659);
  box-shadow: 0 0 16px rgba(245,176,65,.38);
  transition: bottom var(--demo-travel-duration) cubic-bezier(.55,0,.35,1);
}
.demo-car::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 1px; background: rgba(255,255,255,.28); }
.demo-car::after { content: "▲"; position: absolute; left: 6px; bottom: 3px; font-size: 9px; color: #ffd37d; }
.demo-cab { display: flex; align-items: center; gap: 8px; margin: 11px 0 8px; color: #b2c9db; font-size: .74rem; }
.demo-cab strong { color: white; white-space: nowrap; }
.demo-onboard { display: flex; flex-wrap: wrap; gap: 4px; }
.demo-onboard-passenger {
  color: #baf7ff; background: rgba(0,215,255,.14);
  font: 700 .73rem var(--font-mono); padding: 3px 6px; border-radius: 5px;
}
.demo-onboard-empty { color: #7390a7; }
.demo-controls { gap: 7px; margin: 5px 0 9px; }
.demo-floor-btn {
  flex: 1; display: inline-flex; justify-content: center; align-items: center;
  min-width: 0; min-height: 44px; border: 1px solid #416077; border-radius: 8px;
  background: #21364a; color: white; font: 800 .84rem var(--font-mono);
}
.demo-floor-btn:enabled:hover,.demo-floor-btn.is-current { color: #111b2a; background: #f5b041; }
.demo-floor-btn:enabled:active { transform: scale(.96); }
.demo-floor-btn:disabled { opacity: .48; cursor: not-allowed; }
.demo-floor-btn.is-current:disabled { opacity: 1; }
.demo-instructions { color: #93abbf; text-align: center; font-size: .69rem; margin-bottom: 10px; }
.demo-status { min-height: 36px; color: #e0edf7; font-size: .76rem; line-height: 1.42; margin-bottom: 9px; }
.demo-actions { gap: 12px; }
.demo-start {
  flex: 1; min-height: 44px; padding-inline: 10px;
  border-radius: 9px; color: #131f2c; font-weight: 800; font-size: .81rem;
  background: linear-gradient(120deg,#ffd37f,#f6a62d);
}
.demo-start:hover { filter: brightness(1.08); }
.demo-download {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 44px; color: #d1eafd; font-weight: 700; font-size: .75rem; text-align: center;
}
.demo-download:hover { color: white; }
.demo-result {
  margin-top: 11px; padding: 10px; border-radius: 9px; text-align: center;
  border: 1px solid rgba(0,215,255,.4); background: rgba(0,215,255,.09); color: white;
}
.demo-result[hidden] { display: none; }
.demo-result strong { display: block; }
.demo-result span { font-size: .78rem; color: #bfe3eb; }
.demo-note { margin-top: 10px; text-align: center; color: #92a9ba; font-size: .67rem; }
.hero-demo-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 17px; border: 1px solid #526b84; border-radius: 11px;
  color: #e1eefb; font-weight: 700;
}
.hero-demo-cta:hover { background: #273951; color: #fff; }
.hero-actions { flex-wrap: wrap; gap: 10px; }
.demo-frame:focus-visible { outline: 3px solid #f5b041; outline-offset: 4px; }
@media(max-width:440px) {
  .demo-frame { --demo-row-height: 45px; padding: 13px; }
  .demo-floor { padding-right: 72px; }
  .demo-shaft { right: 8px; width: 54px; }
  .demo-stats { gap: 5px; }
  .demo-stats span { padding: 4px 6px; }
  .demo-passenger { min-width: 26px; font-size: .7rem; }
  .demo-download { font-size: .7rem; }
}
@media(prefers-reduced-motion: reduce) {
  .demo-car,.demo-progress > div { transition: none !important; }
}


/* Post-audit input, accessibility and mobile polish. */
#mini-game { scroll-margin-top: calc(var(--header-height) + 16px); }
.demo-floor-btn:disabled { opacity: .5; } /* Only before the script has initialized. */
.demo-floor-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.demo-floor-btn.is-current[aria-disabled="true"] { opacity: 1; }
.demo-overline { flex-wrap: wrap; gap: 6px; }
.demo-live-label { margin-left: auto; }
.demo-controls {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  align-items: stretch;
}
.demo-floor-btn { width: 100%; min-height: 44px; }
.demo-stats { flex-wrap: wrap; font-size: .8rem; }
.demo-overline,.demo-instructions,.demo-status,.demo-note,.demo-cab,.demo-result span {
  font-size: .8rem;
}
.demo-clock-wrap span { font-size: .75rem; }
.demo-passenger { font-size: .73rem; white-space: nowrap; }
.demo-overflow { font-size: .77rem; }
.demo-actions { flex-wrap: wrap; }
.demo-pause {
  min-height: 44px; min-width: 67px; padding-inline: 9px;
  border: 1px solid #8fb2c9; color: #ecf6ff;
  border-radius: 9px; font-weight: 700; background: #203750;
}
.demo-pause:disabled { opacity: .4; cursor: not-allowed; }
.demo-pause:enabled:hover { background: #34516e; }
.demo-overlay {
  display: flex; position: absolute; inset: 0; z-index: 3;
  align-items: center; justify-content: center; flex-direction: column;
  background: rgba(5,16,29,.85); backdrop-filter: blur(2px);
  color: white; text-align: center; padding: 12px;
}
.demo-overlay[hidden],.demo-note[hidden] { display: none; }
.demo-overlay strong { font-size: 1.6rem; letter-spacing: .14em; }
.demo-overlay span { font-size: .84rem; color: #c7ddeb; }
.demo-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%);
  margin: -1px; padding: 0; border: 0;
}
@media (max-width: 640px) {
  #mini-game { scroll-margin-top: 84px; }
  .demo-controls { grid-template-columns: repeat(3,minmax(44px,1fr)); gap: 7px; }
}
@media (max-width: 380px) {
  .demo-download { flex: 1 0 100%; }
  .demo-header { gap: 7px; }
  .demo-clock-wrap strong { font-size: 1.75rem; }
}

/* Short phones (e.g. 320×568, 360×640): keep the clock, every floor and the keypad
   on screen together while playing. Floor buttons keep their 44px touch height. */
@media (max-width: 640px) and (max-height: 760px) {
  #mini-game { scroll-margin-top: 72px; }
  .demo-frame { --demo-row-height: 38px; padding: 11px 12px; }
  .demo-overline { margin-bottom: 6px; font-size: .72rem; }
  .demo-live-label { display: none; }
  .demo-header { align-items: center; margin-bottom: 8px; }
  .demo-header h2 { font-size: 1.08rem; }
  .demo-header p {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); margin: -1px;
  }
  .demo-clock-wrap strong { font-size: 1.55rem; }
  .demo-clock-wrap span { font-size: .7rem; }
  .demo-progress { margin-bottom: 8px; }
  .demo-stats { flex-wrap: nowrap; gap: 5px; margin-bottom: 8px; font-size: .74rem; }
  .demo-stats span { padding: 3px 6px; white-space: nowrap; }
  .demo-stat-capacity { display: none; } /* Capacity stays visible as "IN CAB n/4". */
  .demo-floor { padding-left: 10px; }
  .demo-passenger { padding: 4px 5px; }
  .demo-cab { margin: 7px 0 6px; }
  .demo-controls { gap: 6px; margin: 4px 0 8px; }
  .demo-instructions { margin-bottom: 6px; }
}