/* The front door: a shop floor with the machines parked on it, rendered in 3D
   through the same renderer the game uses — the real machines, not pictures of
   them. Type sits top and bottom so the middle stays clear for the shop. */
.ride-select {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(14px, 2.4vh, 32px);
  overflow: hidden;
  /* The shop itself is the 3D scene behind this; only enough tint to keep the
     type readable over it. */
  background: linear-gradient(180deg, rgba(8, 12, 17, .55) 0%, rgba(8, 12, 17, .06) 34%, rgba(8, 12, 17, .55) 72%, rgba(8, 12, 17, .86) 100%);
  color: #e9f1f6;
}
.ride-select.hidden { display: none; }
body.picking #garage { visibility: hidden; }

/* -------------------------------------------------------------- foreground */
.ride-head, .ride-cards, .ride-foot { position: relative; z-index: 2; }
.ride-head .brand { color: #eaf6fa; }
.ride-head .eyebrow { color: #ffb15e; margin-top: 16px; letter-spacing: 2px; }
.ride-head h1 {
  margin: 8px 0 0;
  font-size: clamp(34px, 5.6vw, 70px);
  line-height: .92;
  letter-spacing: -1px;
  font-style: italic;
  font-weight: 900;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .55);
}
.ride-head h1 em { color: var(--orange); font-style: italic; }

/* ---------------------------------------------------------------- the row */
/* This is the first thing anyone sees. Four machined slabs with a lit edge,
   not four boxes of text. */
.ride-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, .8vw, 14px);
  max-width: 1460px;
  margin-top: auto;
}
.ride-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1vw, 16px);
  min-height: clamp(102px, 13vh, 150px);
  padding: clamp(12px, 1.3vw, 20px) clamp(14px, 1.5vw, 24px);
  text-align: left;
  color: #eaf6fa;
  cursor: pointer;
  border: 0;
  overflow: hidden;
  /* Cut corners top-left and bottom-right, so the row reads as machined panels
     rather than as browser buttons. */
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  background:
    linear-gradient(135deg, rgba(255, 138, 70, .14), transparent 42%),
    linear-gradient(180deg, rgba(30, 41, 52, .92), rgba(11, 16, 22, .96));
  box-shadow: inset 0 0 0 1px rgba(126, 168, 190, .34);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s, background .22s;
}
/* The lit edge: ignites from the left on approach. */
.ride-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), #ffd08b 40%, #7fd3e4);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .34s cubic-bezier(.2, .8, .3, 1);
  z-index: 2;
}
/* A sheen that sweeps across on hover. */
.ride-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(190, 236, 255, .16) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .55s cubic-bezier(.3, .7, .3, 1);
  pointer-events: none;
  z-index: 1;
}
.ride-card:hover, .ride-card:focus-visible {
  transform: translateY(-7px);
  background:
    linear-gradient(135deg, rgba(255, 138, 70, .24), transparent 46%),
    linear-gradient(180deg, rgba(44, 60, 74, .95), rgba(16, 23, 31, .97));
  box-shadow: inset 0 0 0 1px rgba(150, 214, 238, .72), 0 22px 46px rgba(0, 0, 0, .55);
  outline: none;
}
.ride-card:hover::before, .ride-card:focus-visible::before { transform: scaleX(1); }
.ride-card:hover::after, .ride-card:focus-visible::after { transform: translateX(120%); }
.ride-card:active { transform: translateY(-2px); }

/* The index, ghosted behind the name. */
.ride-no {
  flex: 0 0 auto;
  font-size: clamp(30px, 3.3vw, 52px);
  font-weight: 900;
  font-style: italic;
  line-height: .82;
  letter-spacing: -2px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(151, 200, 220, .42);
  transition: -webkit-text-stroke-color .22s, color .22s;
}
.ride-card:hover .ride-no, .ride-card:focus-visible .ride-no {
  -webkit-text-stroke-color: rgba(255, 160, 92, .85);
  color: rgba(255, 138, 70, .13);
}
.ride-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ride-card strong {
  font-size: clamp(13px, 1.3vw, 19px);
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.04;
  text-transform: uppercase;
}
.ride-card strong i { font-style: normal; color: #8fd7e8; font-size: .82em; }
.ride-card small {
  font-size: 10.5px;
  line-height: 1.4;
  color: #9fc0cd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ride-card em {
  margin-top: auto;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffb15e;
}
.ride-go {
  position: absolute;
  right: 12px; top: 10px;
  font-size: 15px;
  color: rgba(159, 208, 226, .45);
  transition: transform .22s, color .22s;
}
.ride-card:hover .ride-go, .ride-card:focus-visible .ride-go {
  color: var(--orange);
  transform: translate(3px, -3px);
}
/* A class that is not built yet says so, rather than being a dead button. */
.ride-card[data-state="soon"] { background: linear-gradient(180deg, rgba(24, 31, 39, .9), rgba(11, 15, 20, .95)); }
.ride-card[data-state="soon"] strong, .ride-card[data-state="soon"] .ride-no { opacity: .74; }
.ride-card[data-state="soon"] em { color: #7fa6b4; }
.ride-card[data-state="soon"]::before { background: linear-gradient(90deg, #52707f, #7fd3e4); }
.ride-soon {
  position: absolute;
  right: 0; top: 36px;
  padding: 3px 9px 3px 11px;
  background: #7fd3e4;
  color: #0b1218;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 1.6px;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
}

.ride-foot { margin: 0; font-size: 10px; letter-spacing: 1px; color: #7fa6b4; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ride-sound {
  border: 1px solid #3d4d5c; background: rgba(20, 28, 36, .9); color: #9fd8e6;
  padding: 6px 11px; font: 900 9px/1 Arial, sans-serif; letter-spacing: 1.4px; cursor: pointer;
}
.ride-sound:hover { border-color: #7fd3e4; color: #d6f2f9; }

/* Two across rather than four once a single row would squeeze the names. */
@media (max-width: 1100px) {
  .ride-cards { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .ride-card small { display: none; }
}
@media (max-width: 620px) {
  .ride-cards { grid-template-columns: 1fr; gap: 6px; }
  .ride-card {
    min-height: 0;
    align-items: center;
    padding: 11px 14px;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  }
  .ride-card:hover, .ride-card:focus-visible { transform: translateY(-3px); }
  .ride-no { font-size: 26px; }
  .ride-card strong { font-size: 14px; }
  .ride-card strong br { display: none; }
  .ride-card strong i { margin-left: 5px; }
  .ride-card em { margin-top: 3px; }
  .ride-go { top: 8px; right: 9px; font-size: 13px; }
  .ride-soon { top: auto; bottom: 8px; }
  .ride-head h1 { font-size: clamp(28px, 8.4vw, 42px); }
  .ride-head .eyebrow { margin-top: 6px; }
}
@media (max-height: 560px) {
  .ride-head h1 { font-size: 26px; }
  .ride-card { min-height: 0; padding: 9px 13px; }
  .ride-card small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ride-card, .ride-card::before, .ride-card::after, .ride-go, .ride-no { transition: none; }
  .ride-card:hover, .ride-card:focus-visible { transform: none; }
  .ride-card::after { display: none; }
}

/* A card that cannot be entered nudges back instead of doing nothing. */
@keyframes rideShake { 0%,100% { transform: translateY(-7px) translateX(0) } 25% { transform: translateY(-7px) translateX(-5px) } 75% { transform: translateY(-7px) translateX(5px) } }
.ride-card.shake { animation: rideShake .3s ease }
@media (prefers-reduced-motion: reduce) { .ride-card.shake { animation: none } }