/* The UK place pick (owner 26.10.2026, final): numbered pins on the London
   map, one big card with Previous / Vote / Next, locked places greyed with
   the holder's mark. Scoped to .is-uk10, so every other country's setup is
   drawn exactly as before. */

.motor-setup-overlay.is-uk10 .motor-setup-choice-panel { display: flex; flex-direction: column; }
.motor-setup-overlay.is-uk10 .motor-setup-action { border-top: 0; margin-top: 6px; padding-top: 0; }
.motor-setup-overlay.is-uk10 .motor-setup-action:has(#motor-setup-action-copy[hidden]) { display: none; }

.motor-place-pins[hidden] { display: none; }
.motor-place-pins { position: absolute; inset: 0; z-index: 2; }
.motor-place-pin {
  position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0; border: 0; background: none; cursor: pointer; font-family: Inter, Arial, sans-serif;
}
.motor-place-pin__drop {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  background: #0e7c86; border: 2px solid #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
  transition: transform .2s ease, background .2s ease;
}
.motor-place-pin__drop > * { transform: rotate(45deg); }
.motor-place-pin__drop b { color: #fff; font: 800 17px Inter, Arial, sans-serif; }
.motor-place-pin em {
  order: 2; font-style: normal; font: 700 12px Inter, Arial, sans-serif; color: #fff; background: #0b4f57;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}
.motor-place-pin.is-selected { z-index: 1; }
.motor-place-pin.is-selected .motor-place-pin__drop { width: 52px; height: 52px; background: #0b4f57; }
.motor-place-pin.is-selected .motor-place-pin__drop b { font-size: 22px; }
.motor-place-pin.is-mine .motor-place-pin__drop { background: #138a61; }
.motor-place-pin.is-locked { cursor: pointer; }
.motor-place-pin.is-locked .motor-place-pin__drop { background: #a3acb9; }
.motor-place-pin.is-locked .motor-firm-mark { --firm-mark-size: 22px; border-radius: 6px; }
.motor-place-pin.is-locked em { background: #5b6472; }
.motor-place-legend {
  position: absolute; left: 14px; bottom: 14px; display: flex; gap: 14px; padding: 7px 12px; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); font: 600 13px Inter, Arial, sans-serif; color: #1f2937;
}
.motor-place-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.motor-place-legend i.is-free { background: #0e7c86; }
.motor-place-legend i.is-locked { background: #a3acb9; }

.motor-setup-location-cards.motor-place-card-host { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.motor-place-lost {
  background: #fff7ed; border: 2px solid #f59e0b; border-radius: 12px; padding: 9px 13px;
  font: 700 15px Inter, Arial, sans-serif; color: #92400e;
}
/* The photo shows whole (owner 27.10.2026, live: a 168px strip cut the
   showroom in half). The card fills the panel: the rows under the photo keep
   their size and the photo takes all the height left.
   Owner 3.11.2026 ("looks really odd"): no text column beside the photo.
   The photo box runs the card's full width; the photo sits in it whole
   (3:2, object-fit: contain) over a blurred copy of itself, so nothing of
   it is cut. On it, at the top, the place's number, the line's mark and the
   name the firm becomes, white on a dark fade. Under it, the biggest words
   on the card: what the firm sells, with two of the line's vehicles. */
.motor-setup-overlay.is-uk10 .motor-setup-location-cards.motor-place-card-host { min-height: 0; }
/* The map keeps at least the height it had beside the old card. */
.motor-setup-overlay.is-uk10 .motor-setup-map-wrap { min-height: 506px; }
.motor-place-card {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  font-family: Inter, Arial, sans-serif;
}
/* SPEC CHANGE (owner 4.11.2026): a light grey, not near-black, behind the
   photo while it loads (no dark flash). */
.motor-place-card__media {
  position: relative; flex: 1 1 0; min-height: 150px; width: 100%; overflow: hidden; border-radius: 14px;
  background-color: #e5e7eb; background-position: center; background-size: cover; background-repeat: no-repeat;
}
.motor-place-card__media::before {
  content: ''; position: absolute; inset: 0; z-index: 0; backdrop-filter: blur(18px) brightness(.62);
}
/* Until the photo is in, the box stays light: no darkened blur, no broken-image text. */
.motor-place-card__media:not(.is-loaded)::before { backdrop-filter: none; }
.motor-place-card__media:not(.is-loaded) img.motor-place-card__photo { opacity: 0; }
.motor-place-card__media img.motor-place-card__photo {
  position: absolute; inset: 0; z-index: 1; margin: auto; display: block;
  height: 100%; width: auto; max-width: 100%; aspect-ratio: 3 / 2; object-fit: contain;
}
.motor-place-card__firm {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 26px 11px;
  background: linear-gradient(180deg, rgba(8, 15, 28, .86) 0%, rgba(8, 15, 28, .62) 62%, rgba(8, 15, 28, 0) 100%);
}
.motor-place-card__firm .motor-firm-mark { --firm-mark-size: 34px; border-radius: 9px; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.motor-place-card__firm strong {
  min-width: 0; font: 800 21px Inter, Arial, sans-serif; line-height: 1.15; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45); overflow-wrap: anywhere;
}
.motor-place-card__num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; background: #0e7c86; color: #fff; font: 800 17px Inter, Arial, sans-serif;
}
.motor-place-card__sells {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; min-height: 64px; box-sizing: border-box;
  padding: 8px 14px 8px 8px; border-radius: 12px; background: #e3f3f4;
}
.motor-place-card__cars { flex: 0 0 auto; display: flex; gap: 6px; }
.motor-place-card__cars img { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: #fff; }
.motor-place-card__sells strong { min-width: 0; font: 800 25px Inter, Arial, sans-serif; line-height: 1.12; color: #0b3b41; }
.motor-place-card__money { display: flex; gap: 8px; }
.motor-place-card__money span {
  flex: 1 1 0; padding: 12px 11px; border-radius: 10px; border: 1px solid #e2e8f0;
  font: 700 15px Inter, Arial, sans-serif; color: #0f172a; text-align: center;
}
/* Who voted for this place sits on the photo, so the card has no row that
   is empty until someone votes (owner 27.10.2026: no empty space). */
.motor-place-card__votes { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.motor-place-card__votes span { background: rgba(255, 255, 255, .94); color: #0b4f57; font: 700 14px Inter, Arial, sans-serif; padding: 4px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(15, 23, 42, .18); }
.motor-place-card__buttons { display: flex; gap: 10px; }
.motor-place-card__buttons button {
  flex: 1 1 0; height: 60px; border-radius: 14px; border: 2px solid #cbd5e1; background: #fff; color: #0f172a;
  font: 700 17px Inter, Arial, sans-serif; cursor: pointer;
}
.motor-place-card__buttons button.is-vote { flex: 1.3 1 0; border: 0; background: #0e7c86; color: #fff; }
.motor-place-card__buttons button.is-vote:disabled { background: #e5e7ea; color: #6b7280; cursor: default; }
.motor-place-card__taken {
  position: absolute; inset: -4px; border-radius: 14px; background: rgba(241, 245, 249, .84); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 2;
}
.motor-place-card__taken .motor-firm-mark { --firm-mark-size: 56px; border-radius: 14px; }
.motor-place-card__taken strong { font: 800 23px Inter, Arial, sans-serif; color: #0f172a; }
.motor-place-card__taken button {
  height: 50px; padding: 0 24px; border: 0; border-radius: 14px; background: #0e7c86; color: #fff;
  font: 700 17px Inter, Arial, sans-serif; cursor: pointer;
}

/* Step 1, the people, and step 3, the reveal (owner 3.11.2026): the game's
   light style - white page, dark text, teal accent - and each pupil in a
   sharp-cornered card of their own, name large, role readable under it.
   Equal cards in a tidy centred grid (2 or 3 in a row, 2 + 2), readable
   from the back of the class at 1366x768 and 1280x720; a long name wraps
   inside its card. The reveal keeps the firm's logo and name above. */
.motor-firm-intro.is-people,
.motor-firm-intro[data-mode="reveal"] { background: #fff; color: #0f172a; }
.motor-firm-intro.is-people .motor-firm-intro__mark,
.motor-firm-intro.is-people .motor-firm-intro__name { display: none; }
.motor-firm-intro.is-people .motor-firm-intro__stage,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__stage { max-width: none; padding: 16px 32px 64px; }
.motor-firm-intro.is-people .motor-firm-intro__kicker,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__kicker { font-size: 28px; font-weight: 600; margin-bottom: 0; color: #475569; }
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__kicker { font-size: 24px; margin-bottom: 6px; }
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__mark { margin-bottom: min(22px, 2.6vh); }
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__mark .motor-firm-mark {
  --firm-mark-size: min(150px, 18vh); border-radius: 30px; box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__name { font-size: min(56px, 7vh); color: #0f172a; }
.motor-firm-intro__place { color: #5eead4; }
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__place { color: #0e8a7c; }
.motor-firm-intro.is-people .motor-firm-intro__members,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__members {
  display: grid; grid-template-columns: repeat(6, min(180px, 14vw)); grid-auto-rows: 1fr;
  justify-content: center; gap: 20px; margin: min(28px, 3.4vh) auto 0; max-width: none;
}
.motor-firm-intro.is-people .motor-firm-intro__members:has(> :nth-child(4):last-child),
.motor-firm-intro.is-people .motor-firm-intro__members:has(> :nth-child(2):last-child),
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__members:has(> :nth-child(4):last-child),
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__members:has(> :nth-child(2):last-child) { grid-template-columns: repeat(4, min(180px, 14vw)); }
.motor-firm-intro.is-people .motor-firm-intro__members:has(> :only-child),
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__members:has(> :only-child) { grid-template-columns: repeat(2, min(180px, 14vw)); }
.motor-firm-intro.is-people .motor-firm-intro__member,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__member {
  grid-column: span 2; box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: min(22px, 2.6vh) 20px; border: 1px solid #cbd5e1; border-radius: 2px; background: #fff;
}
.motor-firm-intro.is-people .motor-firm-intro__member strong,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__member strong {
  font-size: min(40px, 5.2vh); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #0f172a;
  overflow-wrap: anywhere; text-wrap: balance;
}
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__member strong { font-size: min(34px, 4.6vh); }
.motor-firm-intro.is-people .motor-firm-intro__member.is-long strong,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__member.is-long strong { font-size: min(26px, 3.5vh); }
.motor-firm-intro.is-people .motor-firm-intro__member span,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__member span { margin-top: 8px; font-size: 20px; font-weight: 600; color: #0e8a7c; }
.motor-firm-intro.is-people .motor-firm-intro__continue,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__continue,
.motor-firm-intro.is-people .motor-firm-intro__continue:hover,
.motor-firm-intro[data-mode="reveal"] .motor-firm-intro__continue:hover { border-color: #94a3b8; border-radius: 2px; color: #0f172a; background: #fff; }
.motor-firm-intro.is-people.is-playing .motor-firm-intro__members { animation-delay: .4s; }
.motor-setup-overlay.is-uk10 .motor-setup-team-title[hidden] { display: none; }
.motor-setup-overlay.is-uk10 #motor-setup-team-mark.has-mark { background: none; padding: 0; }
.motor-setup-overlay.is-uk10 #motor-setup-team-mark.has-mark .motor-firm-mark { --firm-mark-size: 34px; border-radius: 9px; }

/* OWNER 27.10.2026: the old step tour never appears; the image tutorial is
   the only tutorial (app.js MOTOR_OLD_STEP_TOUR_DISABLED). */
#motor-guide,
#motor-guide-spotlight,
#motor-guide-arrow { display: none !important; }