/* V8: place first, then barber and directions, with a stable selection deck. */
.site-header { height: 64px; }
.selection-arena { height: calc(100svh - 64px); min-height: 0; }
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 0 clamp(20px, 4vw, 64px);
  background: radial-gradient(ellipse at 75% 58%, #34424b 0, #1b2730 43%, #11181e 80%);
}
.stage:after {
  height: 32%;
  background: linear-gradient(transparent, #11181e 96%);
}
.stage-heading { grid-column: 1 / -1; padding: 20px 0; }
.stage-heading h2 { font-size: clamp(24px, 2.5vw, 34px); }
.selection-status, .character-name, .stage-footnote { display: none; }
.portrait-window {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  inset: auto;
  width: 100%;
  max-width: 440px;
  height: 100%;
  max-height: 460px;
  align-self: center;
  justify-self: center;
  min-height: 0;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 95%, transparent);
}
.hero-portrait { object-position: center center; }
.location-panel {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  inset: auto;
  max-width: none;
  align-self: center;
  padding: 0 0 24px;
}
.location-label { display: block; font-size: 12px; }
.location-panel h3 {
  font-size: clamp(100px, min(13.5vw, 26svh), 192px);
  line-height: .86;
  letter-spacing: -.02em;
  margin: 8px 0 24px;
  overflow-wrap: normal;
}
.select-screen[data-character="campi"] .location-panel h3 {
  font-size: clamp(88px, min(11vw, 22svh), 164px);
}
.location-person {
  font: 700 24px/1 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .03em;
  margin-bottom: 8px;
  color: var(--character-accent);
}
.location-address { font-size: 17px; color: var(--paper); }
.booking-mode { position: static; margin-top: 10px; font-size: 14px; }
.direction { top: 14px; }
.direction-prev { left: auto; right: calc(clamp(20px, 4vw, 64px) + 60px); }
.direction-next { right: clamp(20px, 4vw, 64px); }
.control-deck { min-height: 0; padding-top: 16px; padding-bottom: 20px; gap: 32px; }
.confirm-block { padding-top: 20px; }
.confirm-button { min-height: 56px; line-height: 1.2; }
.confirm-symbol { line-height: 1; }
.card-portrait {
  flex: 0 0 84px;
  width: 84px;
  min-height: 0;
  overflow: hidden;
  mask-image: none;
}
.card-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.character-card[data-id="campi"] .card-portrait img { object-position: 55% 0; }
.card-info { gap: 6px; }
.card-info strong { font-size: clamp(18px, 1.6vw, 24px); }
.card-info > span { color: var(--paper); font-size: clamp(15px, 1.35vw, 20px); font-weight: 700; }
.selected-tag {
  top: 5px;
  right: 5px;
  left: auto;
  transform: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0;
}
.character-card.is-selected { transform: none; box-shadow: inset 0 -3px var(--character-accent); }

@media (max-width: 899px) {
  .site-header { height: 56px; }
  .selection-arena { height: calc(100svh - 56px); min-height: 0; }
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    padding: 0 20px;
    background: radial-gradient(ellipse at 76% 73%, #34424b 0, #1b2730 43%, #11181e 86%);
  }
  .stage-heading { grid-row: 1; padding: 16px 100px 12px 0; }
  .stage-heading h2 { font-size: 22px; line-height: 1.1; }
  .direction { top: 10px; width: 40px; height: 40px; }
  .direction-prev { right: 66px; left: auto; }
  .direction-next { right: 20px; }
  .location-panel { display: contents; }
  .location-title { grid-row: 2; z-index: 3; padding: 10px 0 12px; }
  .location-label { font-size: 11px; }
  .location-panel h3,
  .select-screen[data-character="campi"] .location-panel h3 {
    font-size: clamp(86px, 20vw, 136px);
    margin: 6px 0 0;
  }
  .location-details {
    grid-row: 3;
    grid-column: 1;
    align-self: center;
    width: 42%;
    z-index: 3;
    padding: 0 0 12px;
  }
  .location-person { font-size: 27px; margin-bottom: 9px; }
  .location-address { font-size: 14px; line-height: 1.45; }
  .booking-mode { display: inline-block; margin-top: 12px; padding-bottom: 5px; font-size: 12px; }
  .portrait-window {
    grid-column: 1;
    grid-row: 3;
    inset: auto;
    width: 60%;
    max-width: 340px;
    height: 100%;
    max-height: 380px;
    justify-self: end;
    align-self: center;
    margin-right: -8px;
  }
  .stage:after { height: 18%; background: linear-gradient(transparent, #11181e 98%); }
  .control-deck { min-height: 0; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); }
  .input-hint { margin-bottom: 10px; }
  .character-card { height: 126px; }
  .card-portrait { width: 100%; max-width: 140px; flex: 0 0 64px; max-height: none; align-self: center; }
  .card-info { flex: 1; gap: 3px; padding: 5px 4px 6px; justify-content: center; }
  .card-info strong { font-size: 17px; }
  .card-info > span { font-size: clamp(13px, 3.4vw, 16px); line-height: 1.1; }
  .confirm-block { padding-top: 10px; }
  .confirm-button { min-height: 52px; padding: 10px 18px; }
  .confirm-hint { margin-top: 6px; }
  .selected-tag { top: 5px; right: 5px; left: auto; transform: none; font-size: 14px; letter-spacing: 0; }
}

@media (max-width: 480px) {
  .location-panel h3,
  .select-screen[data-character="campi"] .location-panel h3 { font-size: clamp(84px, 25vw, 116px); }
}

@media (max-height: 700px) and (max-width: 899px) {
  .site-header { height: 52px; }
  .selection-arena { height: calc(100svh - 52px); }
  .stage-heading { padding-top: 14px; padding-bottom: 10px; }
  .location-title { padding-top: 6px; padding-bottom: 8px; }
  .location-panel h3,
  .select-screen[data-character="campi"] .location-panel h3 { font-size: clamp(68px, 19vw, 88px); }
  .location-person { font-size: 23px; margin-bottom: 6px; }
  .location-address { font-size: 12px; }
  .booking-mode { margin-top: 8px; font-size: 11px; }
  .location-details { padding-bottom: 4px; }
  .character-card { height: 110px; }
  .card-portrait { flex-basis: 50px; }
  .input-hint { font-size: 11px; margin-bottom: 8px; }
  .confirm-button { min-height: 48px; }
  .confirm-hint { font-size: 11px; }
}

@media (max-height: 540px) {
  .selection-arena { height: auto; min-height: 0; }
  .stage { min-height: 430px; }
}