/* ==========================================================================
   PLAYER — ARENA BOOKING

   A city-first booking surface inside the Player cabinet. It keeps the same
   outlined, tactile Frontline controls as the inventory while making venue,
   date and time the loudest information on the screen.
   ========================================================================== */

.pl-booking-view {
  --booking-accent: var(--reset-sky);
}

/* While a booking sheet is open the cabinet behind it must not scroll: on a
   phone the page underneath used to slide away under the player's thumb. */
html.pl-booking-locked,
html.pl-booking-locked body { overflow: hidden; }

.pl-booking-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .55fr);
  align-items: stretch;
  gap: clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  padding: clamp(1.2rem, 3.5vw, 2.2rem);
  border: var(--pl-border);
  border-radius: var(--pl-radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reset-sky) 18%, transparent), transparent 48%),
    var(--reset-panel-raised);
  box-shadow: var(--pl-lift-hi);
}

.pl-booking-hero::after {
  position: absolute;
  right: -4rem;
  bottom: -7rem;
  width: 18rem;
  height: 18rem;
  border: 2px solid color-mix(in srgb, var(--reset-sky) 38%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 2rem color-mix(in srgb, var(--reset-sky) 8%, transparent),
    0 0 0 5rem color-mix(in srgb, var(--reset-coral) 5%, transparent);
  content: '';
  pointer-events: none;
}

.pl-booking-hero__copy,
.pl-booking-city {
  position: relative;
  z-index: 1;
}

.pl-booking-hero__kicker {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .65rem;
  color: var(--reset-ink-coral);
}

.pl-booking-hero__copy h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 3rem);
  line-height: 1.02;
}

.pl-booking-hero__copy > p:not(.pl-hud) {
  max-width: 42rem;
  margin: .85rem 0 0;
  color: var(--reset-muted);
  font-size: var(--fs-md);
  line-height: 1.55;
}

.pl-booking-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.25rem;
}

.pl-booking-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .65rem;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--reset-panel) 86%, transparent);
  color: var(--reset-cream);
  font-size: var(--fs-xs);
}

.pl-booking-hero__trust i { color: var(--reset-ink-coral); }

.pl-booking-city {
  align-self: center;
  padding: 1rem;
  border: 2px solid var(--reset-cream);
  border-radius: var(--pl-radius);
  background: color-mix(in srgb, var(--reset-panel) 92%, transparent);
  box-shadow: var(--pl-lift);
}

.pl-booking-city > .pl-hud {
  margin: 0 0 .55rem;
  color: var(--reset-muted);
}

.pl-booking-city__button {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 3.5rem;
  padding: .45rem .65rem;
  border: 2px solid var(--reset-cream);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-sun);
  color: var(--reset-tile-ink);
  font: inherit;
  text-align: left;
  box-shadow: var(--pl-lift-sm);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pl-booking-city__button:hover {
  box-shadow: var(--pl-lift);
  transform: translate(-1px, -1px);
}

.pl-booking-city__button > span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1.5px solid var(--reset-cream);
  border-radius: 50%;
  background: var(--reset-coral);
}

.pl-booking-city__button b {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pl-booking-city-note {
  min-height: 1.15rem;
  margin: .55rem 0 0;
  color: var(--reset-muted);
  font-size: var(--fs-xs);
}

#pl-booking-city-note.is-ok { color: var(--reset-ink-coral); }
#pl-booking-city-note.is-bad { color: var(--reset-coral); }

.pl-booking-list-head { margin-top: 2rem; }

.pl-booking-list-head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .65rem;
}

.pl-booking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

.pl-booking-arena {
  position: relative;
  display: grid;
  grid-template-rows: 10rem minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: var(--pl-border);
  border-radius: var(--pl-radius);
  background: var(--reset-panel-raised);
  box-shadow: var(--pl-lift);
  transition: transform .16s ease, box-shadow .16s ease;
}

.pl-booking-arena:hover {
  box-shadow: var(--pl-lift-hi);
  transform: translate(-2px, -2px);
}

/* The card itself opens the arena — a player aims at the picture, not at the
   button under it. The button stays for the keyboard and for the eye. */
.pl-booking-arena[data-booking-arena] { cursor: pointer; }
.pl-booking-arena[data-booking-arena]:hover { border-color: var(--reset-cream); }

.pl-booking-arena__media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: var(--pl-border);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--arena-color, var(--reset-sky)) 35%, transparent), transparent 58%),
    var(--pl-plate);
}

.pl-booking-arena__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-booking-arena__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .65));
  content: '';
  pointer-events: none;
}

.pl-booking-arena__fallback {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
}

.pl-booking-arena__live {
  position: absolute;
  z-index: 1;
  top: .7rem;
  left: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  border: 1.5px solid rgba(255, 255, 255, .84);
  border-radius: 999px;
  background: rgba(12, 13, 17, .78);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pl-booking-arena__live::before {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--live-dot, #3fe18c);
  box-shadow: 0 0 .65rem var(--live-dot, #3fe18c);
  content: '';
}

.pl-booking-arena__live.is-soon { --live-dot: #ffc02e; }
.pl-booking-arena__live.is-closed { --live-dot: #f06a6a; }
.pl-booking-arena__live.is-closed::before { box-shadow: none; }

/* Room chips answer "what is inside" without opening the dialog, and each one
   is a shortcut into that exact room. */
.pl-booking-arena__rooms {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .65rem 0 0;
}

.pl-booking-arena__room {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  max-width: 100%;
  padding: .3rem .55rem;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: 999px;
  background: var(--reset-panel);
  color: var(--reset-cream);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}

.pl-booking-arena__room span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-booking-arena__room small { color: var(--reset-muted); font-size: .65rem; }
.pl-booking-arena__room:hover {
  border-color: var(--reset-cream);
  background: var(--reset-sun);
  color: var(--reset-tile-ink);
}
.pl-booking-arena__room:hover small { color: inherit; opacity: .75; }
.pl-booking-arena__room.is-rest { color: var(--reset-muted); cursor: default; }

/* ===== Arena search ===================================================== */

.pl-booking-search {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: min(16rem, 100%);
  padding: .35rem .7rem;
  border: 2px solid var(--reset-line-strong);
  border-radius: 999px;
  background: var(--reset-panel);
}

.pl-booking-search[hidden] { display: none; }
.pl-booking-search:focus-within { border-color: var(--reset-sky); }
.pl-booking-search i { color: var(--reset-muted); }

.pl-booking-search input {
  width: 100%;
  min-width: 0;
  padding: .3rem 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--reset-cream);
  font: inherit;
  font-size: var(--fs-sm);
}

.pl-booking-arena__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem;
}

.pl-booking-arena__body h3 {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.18;
}

.pl-booking-arena__address {
  display: flex;
  align-items: flex-start;
  gap: .42rem;
  min-height: 2.5rem;
  margin: .45rem 0 0;
  color: var(--reset-muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.pl-booking-arena__address i { margin-top: .15rem; color: var(--reset-ink-coral); }

.pl-booking-arena__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .5rem;
  margin: .9rem 0;
}

.pl-booking-arena__fact {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .55rem;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
}

.pl-booking-arena__fact i { color: var(--reset-ink-coral); }

.pl-booking-arena__fact span {
  display: grid;
  min-width: 0;
}

.pl-booking-arena__fact small {
  color: var(--reset-muted);
  font-size: .67rem;
}

.pl-booking-arena__fact b {
  overflow: hidden;
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-booking-arena__actions {
  display: flex;
  gap: .5rem;
  margin-top: auto;
}

.pl-booking-arena__actions .pl-btn--primary { flex: 1; }

.pl-booking-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: .7rem;
  padding: clamp(2rem, 8vw, 4rem) 1rem;
  border: 2px dashed var(--reset-line-strong);
  border-radius: var(--pl-radius);
  color: var(--reset-muted);
  text-align: center;
}

.pl-booking-empty__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: var(--pl-border);
  border-radius: 50%;
  background: var(--reset-sun);
  color: var(--reset-tile-ink);
  font-size: 1.5rem;
  box-shadow: var(--pl-lift-sm);
}

.pl-booking-empty h3 { margin: 0; color: var(--reset-cream); }
.pl-booking-empty p { max-width: 34rem; margin: 0; line-height: 1.5; }

.pl-booking-skeleton {
  height: 22rem;
  border: var(--pl-border);
  border-radius: var(--pl-radius);
  background:
    linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--reset-cream) 10%, transparent) 48%, transparent 66%) 0 0 / 230% 100%,
    var(--reset-panel-raised);
  box-shadow: var(--pl-lift);
  animation: pl-booking-shimmer 1.4s linear infinite;
}

@keyframes pl-booking-shimmer { to { background-position: -230% 0; } }

/* ===== City sheet ======================================================= */

.pl-booking-city-dialog { width: min(31rem, 100%); }

.pl-booking-city-dialog > .pl-hud {
  margin: 0 3rem .45rem 0;
  color: var(--reset-ink-coral);
}

.pl-booking-city-dialog h2 { margin: 0 3rem .35rem 0; }
.pl-booking-city-dialog > p:not(.pl-hud, .pl-booking-form__status) {
  margin: 0;
  color: var(--reset-muted);
  line-height: 1.45;
}

.pl-booking-city-list {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}

.pl-booking-city-option {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .65rem;
  border: 2px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
  color: var(--reset-cream);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pl-booking-city-option:hover,
.pl-booking-city-option.is-current {
  border-color: var(--reset-cream);
  background: var(--reset-sun);
  color: var(--reset-tile-ink);
  box-shadow: var(--pl-lift-sm);
}

.pl-booking-city-option__pin {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.pl-booking-city-option__text { display: grid; min-width: 0; }
.pl-booking-city-option__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-booking-city-option__text small { color: var(--reset-muted); }
.pl-booking-city-option.is-current .pl-booking-city-option__text small { color: inherit; opacity: .75; }

/* ===== Booking dialog =================================================== */

.pl-booking-modal { z-index: 40; }
.pl-booking-dialog { width: min(66rem, 100%); padding: 0; }

.pl-booking-dialog__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1.25rem 4.5rem 1.1rem 1.25rem;
  border-bottom: var(--pl-border);
  background: linear-gradient(120deg, color-mix(in srgb, var(--reset-sky) 16%, transparent), transparent);
}

.pl-booking-dialog__head .pl-hud {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .35rem;
  color: var(--reset-ink-coral);
}

.pl-booking-dialog__head h2 { margin: 0; font-size: var(--fs-xl); }

.pl-booking-dialog__place {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin: .35rem 0 0;
  color: var(--reset-muted);
  font-size: var(--fs-sm);
}

.pl-booking-dialog__place i { margin-top: .2rem; color: var(--reset-ink-coral); }

.pl-booking-dialog__links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .55rem;
}

.pl-booking-dialog__links a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: 999px;
  color: var(--reset-cream);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
}

.pl-booking-dialog__links a:hover { border-color: var(--reset-cream); background: var(--reset-panel); }
.pl-booking-dialog__links i { color: var(--reset-ink-sky); }

/* A progress rail that actually tracks progress: filled once the step is
   answered, outlined while it is the one waiting for the player. */
.pl-booking-dialog__steps {
  display: flex;
  align-items: center;
  align-self: start;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-booking-dialog__steps li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: 999px;
  color: var(--reset-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pl-booking-dialog__steps li i { font-size: .6rem; }

.pl-booking-dialog__steps li.is-done {
  border-color: var(--reset-cream);
  background: var(--reset-ok);
  color: var(--reset-tile-ink);
}

.pl-booking-dialog__steps li.is-active {
  border-color: var(--reset-coral);
  color: var(--reset-ink-coral);
}

.pl-booking-dialog__content {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .55fr);
  align-items: start;
  gap: 1rem;
  padding: 1.15rem;
}

.pl-booking-form {
  display: grid;
  gap: 1.15rem;
  min-width: 0;
}

.pl-booking-section {
  display: grid;
  gap: .65rem;
  min-width: 0;
}

.pl-booking-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.pl-booking-section__head h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: var(--fs-md);
}

.pl-booking-section__head h3 > span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1.5px solid var(--reset-cream);
  border-radius: 50%;
  background: var(--reset-coral);
  color: var(--reset-tile-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
}

.pl-booking-section__note {
  color: var(--reset-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.pl-booking-slot-tools {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.pl-icon-btn--sm {
  width: 2.1rem;
  min-width: 2.1rem;
  height: 2.1rem;
  font-size: .75rem;
}

.pl-btn--sm {
  min-height: 2.3rem;
  padding: .35rem .7rem;
  font-size: var(--fs-xs);
}

.pl-booking-room-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .6rem;
}

.pl-booking-room {
  display: grid;
  gap: .35rem;
  min-width: 0;
  padding: .75rem;
  border: 2px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
  color: var(--reset-cream);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pl-booking-room:hover { border-color: var(--reset-cream); }
.pl-booking-room.is-selected {
  border-color: var(--reset-cream);
  background: color-mix(in srgb, var(--reset-sky) 20%, var(--reset-panel));
  box-shadow: var(--pl-lift-sm);
}

.pl-booking-room__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}

.pl-booking-room__top b { min-width: 0; line-height: 1.2; }
.pl-booking-room__check { color: var(--reset-ink-coral); }
.pl-booking-room__meta { color: var(--reset-muted); font-size: var(--fs-xs); }

.pl-booking-room__desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--reset-muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pl-booking-room.is-selected .pl-booking-room__desc,
.pl-booking-room.is-selected .pl-booking-room__meta { color: inherit; opacity: .78; }
.pl-booking-room__price { color: var(--reset-ink-coral); font-size: var(--fs-sm); font-weight: 800; }
.pl-booking-room.is-selected .pl-booking-room__price { color: inherit; }

.pl-booking-dates {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(5rem, auto);
  gap: .5rem;
  overflow-x: auto;
  padding: .1rem .15rem .45rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.pl-booking-date { scroll-snap-align: start; }

.pl-booking-date {
  display: grid;
  justify-items: center;
  gap: .12rem;
  min-height: 4.25rem;
  padding: .45rem .6rem;
  border: 2px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
  color: var(--reset-cream);
  font: inherit;
  cursor: pointer;
}

.pl-booking-date small { color: var(--reset-muted); font-size: .67rem; text-transform: uppercase; }
.pl-booking-date b { font-size: 1.15rem; }
.pl-booking-date span { font-size: .7rem; }
.pl-booking-date:hover:not(:disabled) { border-color: var(--reset-cream); }
.pl-booking-date.is-selected {
  border-color: var(--reset-cream);
  background: var(--reset-sun);
  color: var(--reset-tile-ink);
  box-shadow: var(--pl-lift-sm);
}
.pl-booking-date.is-selected small { color: inherit; opacity: .7; }
.pl-booking-date:disabled { opacity: .4; cursor: not-allowed; }
.pl-booking-date.is-closed span { color: var(--reset-ink-danger); font-weight: 700; }

/* ===== Time slots =======================================================
   Grouped by part of the day and shown whole: a booked 19:00 is drawn as a
   struck-through tile rather than quietly removed, so an evening that looks
   empty is understood as busy, not broken. */

.pl-booking-slot-summary,
.pl-booking-slot-notice {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .2rem 0 .55rem;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.pl-booking-slot-summary { color: var(--reset-ink-ok); }
.pl-booking-slot-summary i { color: var(--reset-ink-sun); }

.pl-booking-slot-notice {
  padding: .5rem .65rem;
  border: 2px solid var(--reset-coral);
  border-radius: var(--pl-radius-sm);
  background: color-mix(in srgb, var(--reset-coral) 14%, transparent);
  color: var(--reset-ink-coral);
}

.pl-booking-slot-group { margin-bottom: .7rem; }
.pl-booking-slot-group:last-child { margin-bottom: 0; }
.pl-booking-slot-group.is-empty { opacity: .62; }

.pl-booking-slot-group__head {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin: 0 0 .4rem;
  font-size: var(--fs-xs);
}

.pl-booking-slot-group__head i { color: var(--reset-ink-sky); }
.pl-booking-slot-group__head small { margin-left: auto; color: var(--reset-muted); }

.pl-booking-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.1rem, 1fr));
  gap: .4rem;
}

.pl-booking-time {
  display: grid;
  justify-items: center;
  gap: .1rem;
  padding: .45rem .5rem;
  border: 2px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
  color: var(--reset-cream);
  font: inherit;
  cursor: pointer;
  /* Transform only: a colour transition here would also animate every slot
     border when the player flips the cabinet between light and dark. */
  transition: transform .12s ease;
}

.pl-booking-time b { font-family: "JetBrains Mono", monospace; }
.pl-booking-time small { color: var(--reset-muted); font-size: .62rem; }
.pl-booking-time.is-free:hover { border-color: var(--reset-cream); transform: translateY(-1px); }

.pl-booking-time.is-busy,
.pl-booking-time.is-past {
  border-style: dashed;
  border-color: var(--reset-line);
  background: transparent;
  color: var(--reset-muted);
  cursor: not-allowed;
}

.pl-booking-time.is-busy b { text-decoration: line-through; }
.pl-booking-time.is-busy small { color: var(--reset-ink-danger); }
.pl-booking-time.is-past { opacity: .5; }

.pl-booking-time.is-selected {
  border-color: var(--reset-cream);
  background: var(--reset-coral);
  color: var(--reset-tile-ink);
  box-shadow: var(--pl-lift-sm);
}
.pl-booking-time.is-selected small { color: inherit; opacity: .75; }

.pl-booking-times.is-loading { pointer-events: none; }

.pl-booking-time-skeleton {
  height: 2.9rem;
  border-radius: var(--pl-radius-sm);
  background: linear-gradient(100deg,
    var(--reset-panel) 30%, var(--reset-surface) 50%, var(--reset-panel) 70%);
  background-size: 230% 100%;
  animation: pl-booking-shimmer 1.25s linear infinite;
}

.pl-booking-inline-state {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .65rem .75rem;
  border: 1.5px dashed var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  color: var(--reset-muted);
  font-size: var(--fs-sm);
}

.pl-booking-inline-state i { color: var(--reset-ink-coral); }

.pl-booking-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.pl-booking-field {
  display: grid;
  gap: .3rem;
  min-width: 0;
}

.pl-booking-field--wide { grid-column: 1 / -1; }

.pl-booking-captcha {
  min-height: 5.25rem;
  overflow-x: auto;
  padding-top: .15rem;
}

.pl-booking-captcha iframe { max-width: 100%; }

.pl-booking-field > label {
  color: var(--reset-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.pl-booking-field input,
.pl-booking-field textarea {
  width: 100%;
  min-width: 0;
  padding: .7rem .75rem;
  border: 2px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  outline: none;
  background: var(--reset-panel);
  color: var(--reset-cream);
  font: inherit;
}

.pl-booking-field textarea { min-height: 5rem; resize: vertical; }
.pl-booking-field input:focus,
.pl-booking-field textarea:focus {
  border-color: var(--reset-sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reset-sky) 18%, transparent);
}

/* Errors on this form are loud on purpose: a quiet grey line under a field is
   exactly what a player misses before hitting "Book" for the third time. */
.pl-booking-field input.has-error,
.pl-booking-field textarea.has-error {
  border-color: var(--reset-danger);
  background: color-mix(in srgb, var(--reset-danger) 8%, var(--reset-panel));
}

.pl-booking-field input.has-error:focus,
.pl-booking-field textarea.has-error:focus {
  border-color: var(--reset-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reset-danger) 26%, transparent);
}

.pl-booking-field__error {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  color: var(--reset-ink-danger);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
}

.pl-booking-field__error:empty { display: none; }
.pl-booking-field__error.is-ok { color: var(--reset-ink-ok); }
.pl-booking-field__error.is-note { color: var(--reset-muted); }

.pl-booking-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem;
}

.pl-booking-promo input { text-transform: uppercase; }

@keyframes pl-booking-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.pl-booking-shake { animation: pl-booking-shake .5s cubic-bezier(.36, .07, .19, .97) both; }

.pl-booking-players {
  display: grid;
  grid-template-columns: 2.5rem minmax(2.8rem, auto) 2.5rem;
  align-items: center;
  gap: .4rem;
}

.pl-booking-players button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--reset-cream);
  border-radius: 50%;
  background: var(--reset-panel);
  color: var(--reset-cream);
  font: inherit;
  cursor: pointer;
}

.pl-booking-players button:disabled { opacity: .35; cursor: not-allowed; }
.pl-booking-players output { font-family: "JetBrains Mono", monospace; font-size: 1.15rem; font-weight: 800; text-align: center; }

.pl-booking-summary {
  position: sticky;
  top: .2rem;
  display: grid;
  gap: .8rem;
  min-width: 0;
  padding: 1rem;
  border: var(--pl-border);
  border-radius: var(--pl-radius);
  background: var(--reset-panel);
  box-shadow: var(--pl-lift);
}

.pl-booking-summary > .pl-hud { margin: 0; color: var(--reset-ink-coral); }
.pl-booking-summary h3 { margin: -.25rem 0 0; font-size: var(--fs-md); }

.pl-booking-summary__rows {
  display: grid;
  gap: .6rem;
  margin: 0;
}

.pl-booking-summary__row {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
}

.pl-booking-summary__row i { margin-top: .15rem; color: var(--reset-ink-coral); }
.pl-booking-summary__row span { display: grid; min-width: 0; }
.pl-booking-summary__row small { color: var(--reset-muted); font-size: .68rem; }
.pl-booking-summary__row b { overflow-wrap: anywhere; font-size: var(--fs-xs); }
.pl-booking-summary__row.is-pending b { color: var(--reset-ink-coral); }
.pl-booking-summary__row.is-promo i { color: var(--reset-ink-ok); }
.pl-booking-summary__row.is-promo b { color: var(--reset-ink-ok); font-size: var(--fs-sm); }

.pl-booking-summary__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .75rem;
  border-top: 1.5px solid var(--reset-line-strong);
}

.pl-booking-summary__total span { color: var(--reset-muted); font-size: var(--fs-sm); }
.pl-booking-summary__total b {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  margin-left: auto;
  white-space: nowrap;
  font-size: clamp(1rem, 1.7vw, var(--fs-lg));
}

.pl-booking-summary__total s {
  color: var(--reset-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.pl-booking-summary .pl-btn { width: 100%; min-height: 2.9rem; }

/* ===== Thumb-reach action bar ===========================================
   The summary is a sidebar on a desktop and a footer on a phone. Below 900px
   the card scrolls, so the price and the button ride along the bottom edge
   instead of hiding under three sections of form. */

.pl-booking-cta { display: none; }

@media (max-width: 900px) {
  .pl-booking-cta {
    position: sticky;
    z-index: 2;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    border-top: var(--pl-border);
    background: var(--reset-panel-raised);
    box-shadow: 0 -6px 18px color-mix(in srgb, var(--reset-shadow) 22%, transparent);
  }

  .pl-booking-cta__total { display: grid; min-width: 0; }
  .pl-booking-cta__total small {
    overflow: hidden;
    color: var(--reset-muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pl-booking-cta__total b { font-size: var(--fs-md); }
  .pl-booking-cta .pl-btn { min-height: 2.9rem; }

  /* One primary button per screen: the sidebar copy stands down. */
  .pl-booking-summary > .pl-btn { display: none; }
}

.pl-booking-form__status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--reset-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.pl-booking-form__status.is-error { color: var(--reset-coral); }
.pl-booking-form__status.is-ok { color: var(--reset-ink-coral); }

.pl-booking-success {
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding: clamp(2rem, 6vw, 4rem) 1.2rem;
  text-align: center;
}

.pl-booking-success__icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: var(--pl-border);
  border-radius: 50%;
  background: var(--reset-sun);
  color: var(--reset-tile-ink);
  font-size: 2rem;
  box-shadow: var(--pl-lift-hi);
}

.pl-booking-success h2 { margin: .4rem 0 0; font-size: var(--fs-xl); }
.pl-booking-success > p { max-width: 34rem; margin: 0; color: var(--reset-muted); line-height: 1.5; }

.pl-booking-success__ticket {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  width: min(34rem, 100%);
  margin: .4rem 0;
  padding: 1rem;
  border: 2px dashed var(--reset-line-strong);
  border-radius: var(--pl-radius);
  background: var(--reset-panel);
  text-align: left;
}

.pl-booking-success__ticket span { display: grid; min-width: 0; }
.pl-booking-success__ticket small { color: var(--reset-muted); font-size: .68rem; }
.pl-booking-success__ticket b { overflow-wrap: anywhere; }
.pl-booking-success__ticket em {
  color: var(--reset-ink-ok);
  font-size: var(--fs-xs);
  font-style: normal;
}

.pl-booking-success__actions,
.pl-booking-success__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  width: 100%;
}

.pl-booking-success__nav { margin-top: .3rem; }
.pl-booking-success__nav .pl-btn--primary { min-width: 10rem; }

@media (max-width: 900px) {
  .pl-booking-hero { grid-template-columns: minmax(0, 1fr); }
  .pl-booking-city { max-width: 31rem; }
  .pl-booking-dialog__content { grid-template-columns: minmax(0, 1fr); }
  .pl-booking-summary { position: static; }
}

@media (max-width: 620px) {
  .pl-booking-hero { padding: 1rem; }
  .pl-booking-hero__copy h2 { font-size: 1.8rem; }
  .pl-booking-hero__copy > p:not(.pl-hud) { font-size: var(--fs-sm); }
  .pl-booking-hero__trust { display: grid; }
  .pl-booking-city { padding: .75rem; }
  .pl-booking-list-head__actions { justify-content: flex-start; }
  .pl-booking-arena { grid-template-rows: 8.5rem minmax(0, 1fr); }

  .pl-booking-modal { place-items: end center; padding: 0; }
  .pl-booking-dialog {
    width: 100%;
    max-height: calc(100vh - .5rem);
    border-radius: var(--pl-radius) var(--pl-radius) 0 0;
  }
  .pl-booking-dialog__head {
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
    padding: 1rem 3.8rem .85rem 1rem;
  }
  /* The rail stays — on a phone it is the only thing telling a player how much
     of the booking is left — but it drops to bare markers. */
  .pl-booking-dialog__steps { gap: .35rem; }
  .pl-booking-dialog__steps li { padding: .25rem .45rem; font-size: .65rem; }
  .pl-booking-dialog__steps li span { display: none; }
  .pl-booking-dialog__steps li.is-active span,
  .pl-booking-dialog__steps li.is-done span { display: inline; }
  .pl-booking-dialog__content { padding: .85rem; }
  .pl-booking-room-list { grid-template-columns: minmax(0, 1fr); }
  .pl-booking-fields { grid-template-columns: minmax(0, 1fr); }
  .pl-booking-field--wide { grid-column: auto; }
  .pl-booking-times { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); }
  .pl-booking-success__ticket { grid-template-columns: minmax(0, 1fr); }
  .pl-booking-success__actions .pl-btn { flex: 1 1 8rem; }

  .pl-booking-city-modal { place-items: end center; padding: 0; }
  .pl-booking-city-dialog {
    width: 100%;
    max-height: 88vh;
    border-radius: var(--pl-radius) var(--pl-radius) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-booking-skeleton,
  .pl-booking-time-skeleton,
  .pl-booking-shake { animation: none; }
  .pl-booking-arena,
  .pl-booking-arena__room,
  .pl-booking-time,
  .pl-booking-city__button { transition: none; }
}

/* ==========================================================================
   ARENA SHOWCASE — cover, photo strip, short description, gallery viewer

   An arena fills these in the CRM. Everything degrades to the previous card
   when the showcase is empty: no strip row, no description, no photo chip.
   ========================================================================== */

.pl-booking-arena.has-shots { grid-template-rows: 10rem auto minmax(0, 1fr); }

.pl-booking-arena__photos {
  position: absolute;
  z-index: 1;
  top: .7rem;
  right: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  border: 1.5px solid rgba(255, 255, 255, .84);
  border-radius: 999px;
  background: rgba(12, 13, 17, .78);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: .65rem;
  font-weight: 700;
  cursor: pointer;
}

.pl-booking-arena__photos:hover { background: rgba(12, 13, 17, .92); }

.pl-booking-arena__shots {
  display: flex;
  gap: .35rem;
  padding: .45rem .5rem;
  border-bottom: var(--pl-border);
  background: var(--pl-plate);
}

.pl-booking-arena__shot {
  overflow: hidden;
  width: 3.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;
}

.pl-booking-arena__shot img { width: 100%; height: 100%; object-fit: cover; }
.pl-booking-arena__shot:hover { border-color: var(--reset-ink-coral); transform: translateY(-2px); }

.pl-booking-arena__shot.is-rest {
  display: grid;
  place-items: center;
  color: var(--reset-muted);
  font-size: .72rem;
  font-weight: 800;
}

.pl-booking-arena__about {
  display: -webkit-box;
  overflow: hidden;
  margin: .5rem 0 0;
  color: var(--reset-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* ---- The arena inside the booking dialog ------------------------------
   Between the masthead and the booking form: the photo, the sentence and the
   four numbers a client wants before they pick a time. The row disappears
   piece by piece for an arena that has not filled the showcase in — an empty
   showcase leaves the facts, which every arena has. */

.pl-booking-venue {
  display: grid;
  gap: .9rem;
  padding: 1rem 1.15rem;
  border-bottom: var(--pl-border);
  background: color-mix(in srgb, var(--reset-panel) 55%, transparent);
}

.pl-booking-venue.has-cover { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }

.pl-booking-venue__cover {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 11rem;
  max-height: 16rem;
  padding: 0;
  border: var(--pl-border);
  border-radius: var(--pl-radius-sm);
  background: var(--pl-plate);
  cursor: pointer;
}

.pl-booking-venue__cover.is-static { cursor: default; }
.pl-booking-venue__cover img { width: 100%; height: 100%; object-fit: cover; }

.pl-booking-venue__count {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .55rem;
  border: 1.5px solid rgba(255, 255, 255, .84);
  border-radius: 999px;
  background: rgba(12, 13, 17, .78);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: .65rem;
  font-weight: 700;
}

/* Shown on hover on a pointer, always on a phone: the cover is a button and
   has to say so before it is tapped. */
.pl-booking-venue__zoom {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(12, 13, 17, .78);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  opacity: 0;
  transition: opacity .16s ease;
}

.pl-booking-venue__cover:hover .pl-booking-venue__zoom,
.pl-booking-venue__cover:focus-visible .pl-booking-venue__zoom { opacity: 1; }

@media (hover: none) {
  .pl-booking-venue__zoom { opacity: 1; }
}

.pl-booking-venue__side {
  display: grid;
  align-content: start;
  gap: .7rem;
  min-width: 0;
}

.pl-booking-venue__about {
  margin: 0;
  color: var(--reset-cream);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.pl-booking-venue__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .5rem;
}

.pl-booking-venue__fact {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .5rem .6rem;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
}

.pl-booking-venue__fact i { color: var(--reset-ink-coral); }
.pl-booking-venue__fact.is-open i { color: var(--reset-ink-ok); }
.pl-booking-venue__fact.is-closed i { color: var(--reset-muted); }
.pl-booking-venue__fact span { display: grid; min-width: 0; }
.pl-booking-venue__fact small { color: var(--reset-muted); font-size: .67rem; }

.pl-booking-venue__fact b {
  overflow: hidden;
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-booking-venue__shots {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.pl-booking-venue__shot {
  overflow: hidden;
  width: 4.2rem;
  height: 3rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;
}

.pl-booking-venue__shot img { width: 100%; height: 100%; object-fit: cover; }
.pl-booking-venue__shot:hover { border-color: var(--reset-ink-coral); transform: translateY(-2px); }

.pl-booking-venue__shot.is-rest {
  display: grid;
  place-items: center;
  color: var(--reset-muted);
  font-size: .72rem;
  font-weight: 800;
}

.pl-booking-venue__hours summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  color: var(--reset-cream);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.pl-booking-venue__hours summary i { color: var(--reset-ink-sky); }

.pl-booking-venue__hours ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .2rem .8rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.pl-booking-venue__hours li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .18rem 0;
  color: var(--reset-muted);
  font-size: var(--fs-xs);
}

.pl-booking-venue__hours li.is-today { color: var(--reset-ink-coral); font-weight: 700; }
.pl-booking-venue__hours li b { font-family: "JetBrains Mono", monospace; }

/* The room picker carries the room's own photo — a player picks "the big one
   with the bridge", not a name from a list. */
.pl-booking-room__art {
  display: block;
  overflow: hidden;
  height: 5rem;
  margin: -.75rem -.75rem .15rem;
  border-bottom: 1.5px solid var(--reset-line-strong);
  background: var(--pl-plate);
}

.pl-booking-room__art img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Gallery viewer --------------------------------------------------- */

.pl-booking-gallery-modal { z-index: 45; }
.pl-booking-gallery-dialog { width: min(52rem, 100%); }

.pl-booking-gallery-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding-right: 2.6rem;
}

.pl-booking-gallery-head h2 { margin: 0; font-size: var(--fs-lg); }
.pl-booking-gallery-head .pl-hud { color: var(--reset-muted); }

.pl-booking-gallery-stage {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: .8rem;
  overflow: hidden;
  border: var(--pl-border);
  border-radius: var(--pl-radius-sm);
  background: var(--pl-plate);
}

.pl-booking-gallery-stage img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.pl-booking-gallery-step {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--reset-panel-raised) 92%, transparent);
  backdrop-filter: blur(4px);
}

.pl-booking-gallery-step[data-booking-gallery-step="-1"] { left: .6rem; }
.pl-booking-gallery-step[data-booking-gallery-step="1"] { right: .6rem; }
.pl-booking-gallery-step[hidden] { display: none; }

.pl-booking-gallery-caption {
  margin: .7rem 0 0;
  color: var(--reset-muted);
  font-size: var(--fs-sm);
}

.pl-booking-gallery-caption[hidden] { display: none; }

.pl-booking-gallery-thumbs {
  display: flex;
  gap: .4rem;
  margin-top: .8rem;
  overflow-x: auto;
  padding-bottom: .25rem;
}

.pl-booking-gallery-thumb {
  overflow: hidden;
  width: 4.4rem;
  height: 3.2rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1.5px solid var(--reset-line-strong);
  border-radius: var(--pl-radius-sm);
  background: var(--reset-panel);
  cursor: pointer;
}

.pl-booking-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-booking-gallery-thumb.is-current { border-color: var(--reset-ink-coral); }

@media (max-width: 900px) {
  .pl-booking-venue.has-cover { grid-template-columns: minmax(0, 1fr); }
  .pl-booking-venue__cover { min-height: 12rem; max-height: 15rem; }
}

@media (max-width: 620px) {
  .pl-booking-arena.has-shots { grid-template-rows: 8.5rem auto minmax(0, 1fr); }
  .pl-booking-arena__shot { width: 3rem; height: 2.1rem; }

  .pl-booking-venue { padding: .85rem; gap: .7rem; }
  .pl-booking-venue__cover { min-height: 9.5rem; max-height: 11rem; }
  .pl-booking-venue__shot { width: 3.4rem; height: 2.4rem; }
  .pl-booking-room__art { height: 6.5rem; }

  .pl-booking-gallery-modal { place-items: end center; padding: 0; }
  .pl-booking-gallery-dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--pl-radius) var(--pl-radius) 0 0;
  }
  .pl-booking-gallery-stage img { max-height: 46vh; }
  .pl-booking-gallery-step { width: 2.4rem; height: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-booking-arena__shot,
  .pl-booking-venue__shot,
  .pl-booking-venue__zoom { transition: none; }
}