:root {
  color-scheme: dark;
  --ink: #171715;
  --paper: #f4f1e8;
  --yellow: #f0cf4d;
  --muted: #b9bab2;
  --line: #ffffff2a;
  font-family: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; background: var(--ink); color: var(--paper); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: #f0cf4d4a; touch-action: manipulation; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--ink); }
h1, h2, p { margin: 0; }
h1, h2 { font-family: "Barlow Condensed", Impact, sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 20; top: -5rem; left: 1rem; padding: .75rem 1rem; background: var(--yellow); color: var(--ink); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.page { max-width: 1600px; min-height: 100svh; margin: auto; }

.site-header { height: 72px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(22px, 3vw, 48px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; }
.brand img { display: block; width: 115px; height: auto; margin: -8px 0; filter: invert(1); }
.header-booking { color: var(--yellow); font-family: "DM Sans", Arial, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }

.booking-page { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr); min-height: calc(100svh - 72px); }
.stage { position: relative; min-height: 630px; max-height: 950px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 38%, #4b4439 0, #292a25 48%, #191a17 90%); }
.booking-page[data-location="campi"] .stage { background: radial-gradient(circle at 50% 38%, #5f513d 0, #343128 48%, #191a17 90%); }
.booking-page[data-location="scandicci"] .stage { background: radial-gradient(circle at 50% 38%, #48514e 0, #2b322f 48%, #171c1b 90%); }
.stage::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .3; background: repeating-linear-gradient(0deg, transparent 0 78px, #ffffff16 79px); }
.character-portrait { position: absolute; inset: 18px 0 0; width: 100%; height: calc(100% - 18px); object-fit: contain; object-position: center bottom; transform: scale(1.02); transform-origin: center bottom; filter: drop-shadow(0 24px 25px #0007); }
.booking-page[data-location="campi"] .character-portrait { transform: scale(1); }
.booking-page[data-location="scandicci"] .character-portrait { transform: scale(1.02); }
.stage-caption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 58px clamp(28px, 4vw, 64px) 34px; background: linear-gradient(0deg, #171715 0%, #171715ee 47%, #17171500 100%); }
.caption-kicker { color: var(--yellow); font-size: .78rem; font-weight: 700; letter-spacing: .12em; line-height: 1.2; }
.stage-caption h2 { margin-top: 3px; font-size: clamp(5rem, 7.8vw, 8.7rem); font-weight: 900; letter-spacing: -.035em; line-height: .82; }
.stage-detail { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35em; margin-top: 12px; color: #e8e6dc; font-size: .93rem; line-height: 1.3; }
.stage-detail strong { color: var(--paper); font-weight: 700; }
.stage-detail span[aria-hidden] { color: var(--yellow); }

.choice { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 32px 0; border-left: 1px solid var(--line); }
.choice-titleline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 clamp(25px, 3vw, 45px); }
.choice-titleline h2 { font-size: clamp(2.6rem, 4.2vw, 4.5rem); font-weight: 800; line-height: .9; letter-spacing: -.02em; }
.swipe-cue { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.swipe-cue span { color: var(--yellow); font-size: 1.25rem; }
.roster-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; padding: 24px clamp(25px, 3vw, 45px); touch-action: pan-y; }
.roster-card { width: 100%; min-width: 0; height: 235px; display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 2px solid #828077; border-radius: 0; background: #36362f; color: var(--paper); text-align: left; cursor: pointer; transition: transform .12s ease-out, border-color .12s ease-out, box-shadow .12s ease-out; }
.roster-card:hover { border-color: var(--paper); }
.roster-card.is-selected { position: relative; z-index: 1; transform: scale(1.045); border-color: var(--yellow); box-shadow: 0 0 0 3px #f0cf4d28; }
.roster-card:focus-visible { outline-offset: 5px; }
.card-art { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: radial-gradient(circle, #786349, #38332b); }
.card-art::after { content: ""; position: absolute; inset: 7px; border: 1px solid #ffffff39; pointer-events: none; }
.card-art-calenzano { background: radial-gradient(circle, #776553, #39312a); }
.card-art-scandicci { background: radial-gradient(circle, #607168, #2d3c38); }
.card-art img { position: absolute; top: -3%; left: -4%; width: 108%; height: auto; }
.card-art-campi img { top: -2%; }
.card-art-scandicci img { top: -3%; left: 0; width: 100%; }
.card-text { flex: 0 0 62px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 5px 9px; border-top: 1px solid #ffffff3b; }
.card-text strong { font-family: "Barlow Condensed", Impact, sans-serif; font-size: 1.45rem; line-height: .9; }
.card-text small, .card-text em { color: var(--muted); font-size: .63rem; font-style: normal; font-weight: 700; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.card-text em { color: #e0dbca; }
.roster-card.is-selected .card-text em { color: var(--yellow); }
.action-dock { margin: 0 clamp(25px, 3vw, 45px); }
.primary-action { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: var(--yellow); color: var(--ink); font-size: 1rem; font-weight: 700; text-decoration: none; }
.primary-action:hover { background: #ffdf69; }
.primary-action span { font-size: 1.4rem; line-height: 1; }

@media (max-width: 1000px) {
  .booking-page { grid-template-columns: 1fr; min-height: 0; }
  .stage { min-height: 430px; max-height: none; height: 50svh; }
  .choice { padding: 25px 0 38px; border-left: 0; }
  .choice-titleline { padding: 0 26px; }
  .roster-card { height: 185px; }
  .action-dock { margin: 0 26px; }
}
@media (max-width: 700px) {
  .site-header { height: 56px; padding: 0 17px; }
  .brand img { width: 91px; margin: -6px 0; }
  .header-booking { font-size: .67rem; }
  .stage { height: clamp(250px, calc(100svh - 56px - 184px - 65px), 620px); min-height: 250px; }
  .character-portrait { inset: 12px 0 0; height: calc(100% - 12px); transform: scale(1.02); }
  .booking-page[data-location="campi"] .character-portrait { transform: scale(1); }
  .booking-page[data-location="scandicci"] .character-portrait { transform: scale(1); }
  .stage-caption { padding: 50px 18px 16px; }
  .caption-kicker { font-size: .69rem; }
  .stage-caption h2 { margin-top: 3px; font-size: clamp(3.6rem, 14vw, 5.7rem); }
  .booking-page[data-location="campi"] .stage-caption h2 { font-size: clamp(3rem, 11vw, 5.7rem); }
  .stage-detail { margin-top: 7px; font-size: .79rem; }
  .choice { justify-content: flex-start; padding: 12px 0 calc(78px + env(safe-area-inset-bottom)); }
  .choice-titleline { padding: 0 18px; }
  .choice-titleline h2 { font-size: 2rem; }
  .swipe-cue { font-size: .64rem; }
  .roster-track { gap: 6px; padding: 11px 10px; }
  .roster-card { height: clamp(116px, 17svh, 150px); }
  .card-text { flex-basis: 50px; gap: 2px; padding: 3px 5px; }
  .card-text strong { font-size: clamp(.94rem, 3.9vw, 1.2rem); }
  .card-text small, .card-text em { font-size: .61rem; }
  .action-dock { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; margin: 0; padding: 9px 14px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #ffffff42; background: #171715f5; box-shadow: 0 -12px 30px #0005; backdrop-filter: blur(12px); }
  .primary-action { min-height: 48px; padding: 9px 14px; font-size: .93rem; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .site-header { height: 52px; }
  .stage { height: calc(100svh - 52px - 166px - 61px); min-height: 226px; }
  .stage-caption { padding-bottom: 10px; }
  .stage-caption h2 { font-size: 3.35rem; }
  .booking-page[data-location="campi"] .stage-caption h2 { font-size: 2.8rem; }
  .stage-detail { margin-top: 5px; font-size: .72rem; }
  .choice { padding-top: 8px; }
  .choice-titleline h2 { font-size: 1.75rem; }
  .roster-track { padding-top: 7px; padding-bottom: 7px; }
  .roster-card { height: 112px; }
  .action-dock { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .primary-action { min-height: 43px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}