.game-page::after { display: none; }
.game-content { max-width: 1060px; padding-block: clamp(26px, 5vw, 72px); }
.game-content h1 {
  font-size: clamp(44px, 7vw, 86px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.game-content > p { color: #b9cad5; }
.game-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 28px 16px; }
.game-filters [aria-current="page"] { background: var(--coral); color: var(--navy); border-color: var(--coral); }
.game-count { margin-bottom: 12px; font-size: 0.875rem; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.game-listing { padding: clamp(16px, 3vw, 28px); background: #0d2534; border: 1px solid #315064; border-radius: 18px; }
.game-sport { color: var(--coral); font-weight: 750; text-transform: uppercase; font-size: 0.875rem; }
.game-listing h2 { font-size: 1.45rem; font-weight: 800; }
.game-listing dl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #315064; }
.game-listing dt { font-size: 0.8rem; color: #b9cad5; }
.game-listing dd { font-weight: 650; }

.demo-notice { margin-block: 12px; }
.demo-host { margin-block: 14px; padding: 16px; border: 1px solid #315064; border-radius: 14px; }
.demo-host summary { cursor: pointer; color: var(--coral); font-weight: 750; }
.demo-host form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 12px; align-items: end; margin-top: 14px; }
.demo-host label { display: grid; gap: 4px; min-width: 0; }
.demo-host :is(input, select) { width: 100%; min-height: 44px; padding: 6px 10px; background: #0d2534; color-scheme: dark; border: 1px solid #597183; border-radius: 8px; }
.demo-status { margin-block: 8px; }
.demo-view { margin-top: 14px; }
.demo-actions:not([hidden]) { display: flex; align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 12px; }
.game-page button { cursor: pointer; }
.demo-level { margin-top: 8px; color: #c4d3dc; }

.demo-profiles { width: 100%; border-top: 1px solid #315064; padding-top: 12px; }
.demo-profiles h3, .demo-profiles h4 { font-weight: 750; }

.demo-player-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.player-content > .game-sport { color: var(--coral); margin-bottom: 8px; }
.player-reviews { margin-top: 28px; }
.player-reviews h2 { font-size: 1.45rem; font-weight: 800; margin-bottom: 12px; }
.player-reviews li p + p { margin-top: 6px; }

.player-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.player-avatar-large { display: block; margin-block: 12px; border: 2px solid var(--coral); }

.demo-host .demo-profile-form { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.demo-profile-form textarea { width: 100%; padding: 8px 10px; border: 1px solid #597183; border-radius: 8px; background: #0d2534; resize: vertical; }
.demo-profile-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-profile-bio { white-space: pre-wrap; overflow-wrap: anywhere; }

.demo-host .demo-photo-picker { grid-row: 1; justify-items: center; justify-self: start; color: var(--coral); cursor: pointer; font-weight: 700; }
.demo-photo-circle { display: grid; place-items: center; width: 96px; height: 96px; border: 2px solid #597183; border-radius: 50%; overflow: hidden; background: #153244; font-size: 2rem; }
.demo-photo-circle img { display: block; width: 100%; height: 100%; }
.demo-photo-picker:focus-within .demo-photo-circle { outline: 2px solid var(--cream); outline-offset: 4px; }

.demo-account-history { width: 100%; }
.demo-account-history li, .demo-account-review { padding: 12px; border: 1px solid #315064; border-radius: 8px; }
.demo-account-history li + li { margin-top: 8px; }
.demo-account-history time { display: block; color: #c4d3dc; font-size: 0.85rem; }

.demo-role-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.demo-role-picker legend { margin-bottom: 8px; }
.demo-host .demo-role-card {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 112px;
  padding: 12px;
  border: 2px solid #597183;
  border-radius: 14px;
  background: linear-gradient(0deg, #061925f2, #06192530), var(--role-photo) center / cover;
  cursor: pointer;
}
.demo-role-player { --role-photo: url("/live-motive/hero-morocco-retouched.webp"); }
.demo-role-vendor { --role-photo: url("/live-motive/football.png"); }
.demo-role-card:has(input:checked) { border-color: var(--coral); }
.demo-role-card:has(input:focus-visible) { outline: 2px solid var(--cream); outline-offset: 3px; }
.demo-host .demo-role-card input { flex: none; appearance: auto; width: 16px; height: 16px; min-height: 0; margin-block-end: 4px; padding: 0; accent-color: var(--coral); }

.account-dashboard { width: 100%; margin-block-start: 12px; }
.account-dashboard nav { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px; border-block: 1px solid #315064; }
.account-dashboard nav a { padding: 7px 12px; border-radius: 999px; background: #17384a; font-weight: 650; }
.account-dashboard section { margin-top: 28px; scroll-margin-block-start: 16px; }
.account-section-heading { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.account-section-heading h3 { font-size: clamp(20px, 3vw, 28px); font-weight: 800; }
.account-section-heading a { color: #ffad9d; font-weight: 650; }
.account-dashboard h4 { margin-block: 12px 6px; font-size: 0.9rem; font-weight: 700; color: #dce8ef; }
.account-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-history-card { display: grid; gap: 3px; padding: 14px; background: #0a202e; border: 1px solid #315064; border-radius: 14px; overflow-wrap: anywhere; }
.account-history-card small { color: #ffad9d; font-weight: 650; }
.account-history-card time { font-size: 0.875rem; color: #d2e0e8; }
.account-example { padding: 0; overflow: hidden; }
.account-example img { width: 100%; height: 112px; object-fit: cover; }
.account-example div { display: grid; gap: 3px; padding: 14px; }
@media (max-width: 600px) {
  .account-card-grid { grid-template-columns: 1fr; }
}
.account-dashboard nav a[aria-current="page"] { background: var(--coral); color: var(--navy); }

.demo-auth-divider { display: flex; align-items: center; gap: 12px; color: #c4d3dc; }
.demo-auth-divider::before, .demo-auth-divider::after { content: ""; flex: 1; border-top: 1px solid #597183; }
.demo-provider { width: 100%; border-radius: 8px; }
.demo-provider svg { flex: none; width: 22px; height: 22px; }
.demo-provider-google { background: #fff; color: #202124; border-color: #747775; }
.demo-provider-apple { background: #050505; color: #fff; border-color: #7d8990; }
.demo-register-link { justify-self: center; min-height: 44px; color: #ffad9d; font-weight: 700; text-decoration: underline; }

.vendor-dashboard > h3 { font-size: 1.75rem; font-weight: 800; }
.vendor-dashboard > p { margin-block: 6px 14px; color: #c4d3dc; }
.vendor-dashboard .account-card-grid { margin-block-start: 12px; }
.vendor-dashboard .demo-profile-buttons { margin-top: 8px; }
.vendor-month-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.vendor-month-header h3 { font-size: clamp(1rem, 4vw, 1.45rem); font-weight: 750; }
.vendor-month-header button { width: 44px; padding: 0; font-size: 1.5rem; }
.vendor-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; text-align: center; }
.vendor-month > * { min-width: 0; padding-block: 6px; font-size: clamp(0.7rem, 2.6vw, 0.95rem); overflow-wrap: anywhere; }
.vendor-month > span { min-height: 42px; background: #0a202e; border: 1px solid #315064; border-radius: 6px; }
.vendor-month .vendor-calendar-booked { background: #275167; color: #fff8ee; }
.vendor-calendar-booked small { display: block; color: #ffad9d; }

.vendor-calendar-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; margin-block-end: 14px; }
.vendor-calendar-tools label { display: grid; gap: 4px; font-size: 0.85rem; }
.vendor-calendar-tools input { min-height: 44px; padding: 6px 10px; background: #0a202e; color-scheme: dark; border: 1px solid #597183; border-radius: 8px; }
.vendor-month > button { min-height: 44px; background: #0a202e; border: 1px solid #315064; border-radius: 6px; cursor: pointer; }
.vendor-month > button[aria-current="date"] { border-color: #ffad9d; }
.vendor-month > button[aria-pressed="true"] { background: var(--coral); color: var(--navy); }
.vendor-month > button[aria-pressed="true"] small { color: inherit; }
.vendor-month > button:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; }
[dir="rtl"] .vendor-month-header button { transform: scaleX(-1); }
.vendor-date-jump { display: flex; flex-wrap: wrap; gap: 8px; }

.notification-inbox { width: 100%; }
.notification-inbox ul { display: grid; gap: 8px; margin-top: 12px; }
.notification-inbox a { display: block; }

.booking-thread { margin-block-start: 8px; padding: 10px; border: 1px solid #315064; border-radius: 8px; }
.booking-thread summary { color: #ffad9d; font-weight: 700; cursor: pointer; }
.booking-thread > p, .booking-thread li { margin-block-start: 6px; }
.booking-thread li p { white-space: pre-wrap; overflow-wrap: anywhere; }
.booking-thread form { display: grid; justify-items: start; gap: 8px; margin-block-start: 10px; }
.booking-thread form label { display: grid; width: 100%; gap: 4px; }
.booking-thread textarea { width: 100%; padding: 6px 8px; background: #153244; border: 1px solid #597183; border-radius: 6px; resize: vertical; }
.notification-inbox h4 { margin-block-start: 22px; font-weight: 750; }
.venue-requester { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid #315064; }
.venue-chat h3 { font-size: 1.35rem; font-weight: 800; } .venue-chat > a { margin-block: 10px; color: #ffad9d; } .venue-chat li p { overflow-wrap: anywhere; } .booking-thread time { font-size: 0.8rem; color: #c4d3dc; }

.chat-page-content { padding-block: 20px 36px; }
.venue-chat-shell { display: grid; margin-top: 16px; border: 1px solid #315064; border-radius: 16px; overflow: hidden; background: #0a202e; }
.venue-chat-shell.has-thread { grid-template-columns: minmax(215px, 0.8fr) minmax(0, 2fr); }
.venue-chat-list { min-width: 0; background: #102b3a; }
.venue-chat-list header, .venue-chat-header { padding: 14px 16px; border-bottom: 1px solid #315064; }
.venue-chat-list header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.venue-chat-list header h1 { font: 800 1.2rem/1.2 var(--font-geist-sans), Arial, sans-serif; letter-spacing: normal; text-transform: none; margin: 0; }
.venue-chat-list header a, .venue-chat-list > p { color: #d2e0e8; font-size: 0.875rem; }
.venue-chat-list > p { padding: 16px; }
.help-content .venue-chat-list ul { list-style: none; padding: 0; max-height: 60vh; overflow-y: auto; }
.help-content .venue-chat-list li + li { margin: 0; }
.venue-chat-list li a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #315064; }
.venue-chat-list li a:hover, .venue-chat-list a[aria-current="page"] { background: #1a3d50; }
.venue-chat-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #28516a; font-weight: 750; }
.venue-chat-preview { display: grid; gap: 2px; min-width: 0; }
.venue-chat-preview > span { font-size: 0.83rem; color: #c4d3dc; overflow-wrap: anywhere; }
.venue-chat-preview .venue-chat-snippet { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.venue-chat-detail { min-width: 0; border-inline-start: 1px solid #315064; }
.venue-chat-header { display: grid; gap: 9px; background: #102b3a; }
.venue-chat-header h2 { font-size: 1.15rem; font-weight: 800; }
.venue-chat-header p { font-size: 0.85rem; color: #c4d3dc; overflow-wrap: anywhere; }
.venue-chat-header .venue-chat-back { justify-self: start; padding: 5px 12px; }
[dir="rtl"] .venue-chat-back span { transform: scaleX(-1); }
.venue-thread-log { min-height: min(38vh, 320px); max-height: min(52vh, 440px); overflow-y: auto; padding: 14px; }
.venue-thread-note { color: #c4d3dc; text-align: center; font-size: 0.82rem; margin-block-end: 10px; }
.venue-thread-log ol { display: grid; gap: 10px; }
.venue-message { justify-self: start; max-width: 85%; padding: 8px 12px; border-radius: 12px 12px 12px 3px; background: #193546; overflow-wrap: anywhere; }
.venue-message.is-own { justify-self: end; background: #285064; border-radius: 12px 12px 3px 12px; }
.venue-message strong, .venue-message time { font-size: 0.74rem; color: #d2e0e8; }
.venue-message p { white-space: pre-wrap; }
.venue-message time { display: block; text-align: end; }
.venue-thread-composer { display: flex; align-items: end; gap: 8px; padding: 10px; background: #102b3a; border-top: 1px solid #315064; }
.venue-thread-composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 100px; padding: 10px; border: 1px solid #597183; border-radius: 12px; background: #0a202e; font-size: 16px; resize: vertical; }
.venue-thread-composer button { padding-inline: 12px; }
@media (max-width: 700px) {
  .venue-chat-shell.has-thread { grid-template-columns: minmax(0, 1fr); }
  .venue-chat-shell.has-thread .venue-chat-list { display: none; }
  .venue-chat-detail { border-inline-start: 0; }
}
.account-session-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }

.venue-message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.venue-receipt { display: inline-flex; color: #c4d3dc; }
.venue-receipt.is-seen { color: #7bd5ff; }