/* Game Era v14 — translucent, layered interface inspired by liquid glass. */
:root {
  --glass-surface: rgba(20, 22, 34, .58);
  --glass-surface-strong: rgba(18, 20, 31, .76);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-highlight: rgba(255, 255, 255, .2);
  --glass-shadow: 0 20px 55px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(32, 217, 255, .13), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(193, 59, 147, .18), transparent 30rem),
    radial-gradient(circle at 48% 92%, rgba(124, 92, 255, .12), transparent 34rem),
    #070810;
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

.ambient { opacity: .12; filter: blur(105px) saturate(1.5) }
.topbar {
  border-color: rgba(255,255,255,.09);
  background: rgba(8, 10, 18, .54);
  box-shadow: 0 10px 35px rgba(0,0,0,.2), inset 0 -1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
}
.public-topbar nav { justify-content:flex-start }
.public-topbar .topbar-actions { margin-right:auto }
.public-reservation-link { margin-top:12px }

.public-booking-auth {
  display:grid;
  gap:16px;
  padding:18px;
  border:1px solid rgba(124,92,255,.24);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(124,92,255,.1),rgba(32,217,255,.045)),rgba(6,8,15,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.public-booking-auth-head { display:flex;align-items:center;gap:12px }
.public-booking-auth-head>span { width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(124,92,255,.3);border-radius:12px;background:rgba(124,92,255,.15);color:#b9aaff;font-size:22px }
.public-booking-auth-head>div { display:grid;gap:3px }
.public-booking-auth-head b { font-size:15px }
.public-booking-auth-head small,.public-booking-auth-note { color:var(--muted);font-size:11px;line-height:1.8 }
.public-booking-auth-fields { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.public-booking-auth-fields label { display:grid;gap:6px }

.reservation-preferences {
  display:grid;
  gap:16px;
  padding:18px;
  border:1px solid rgba(32,217,255,.18);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(32,217,255,.065),rgba(124,92,255,.045)),rgba(6,8,15,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.reservation-preferences-head>div { display:grid;gap:3px }
.reservation-preferences-head b { font-size:15px }
.reservation-preferences-head small { color:var(--muted);font-size:11px }
.game-title-field { display:grid;gap:7px }
.game-title-field>span { display:flex;align-items:center;gap:8px }
.game-title-field em { padding:2px 8px;border:1px solid rgba(32,217,255,.2);border-radius:999px;background:rgba(32,217,255,.08);color:var(--primary-2);font-size:9px;font-style:normal }
.play-mode-field { min-width:0;margin:0;padding:0;border:0 }
.play-mode-field legend { margin-bottom:8px;font-size:13px }
.play-mode-options { display:grid;grid-template-columns:repeat(3,1fr);gap:9px }
.play-mode-card { position:relative;cursor:pointer }
.play-mode-card input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none }
.play-mode-card>span { min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(5,7,14,.46);transition:border-color .16s ease,background .16s ease,transform .16s ease }
.play-mode-card b { font-size:13px }.play-mode-card small { color:var(--muted);font-size:10px }
.play-mode-card:hover>span { transform:translateY(-1px);border-color:rgba(124,92,255,.38) }
.play-mode-card input:checked+span { border-color:rgba(124,92,255,.72);background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(32,217,255,.07));box-shadow:0 0 0 1px rgba(124,92,255,.2),inset 0 1px 0 rgba(255,255,255,.1) }
.play-mode-card input:focus-visible+span { outline:2px solid var(--primary-2);outline-offset:2px }

.panel,
.availability-timetable,
.booking-system-card,
.figma-metrics .metric,
.customer-welcome,
.systems-hero,
.pc-build-intro,
.pc-spec-grid {
  border-color: var(--glass-line);
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 42%, rgba(9,11,20,.48)), var(--glass-surface);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.booking-system-card {
  box-shadow: 0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.075);
}
.booking-system-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 18px 42px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12);
}
.booking-system-card.selected,
.booking-system-card:has(.station-native-check:checked) {
  background: linear-gradient(145deg, rgba(124,92,255,.2), rgba(32,217,255,.05)), rgba(13,15,26,.62);
  box-shadow: 0 16px 45px rgba(48,31,116,.28), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(124,92,255,.36);
}

.btn { position: relative; overflow: hidden; border-color: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.16) }
.btn::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 35%,transparent 70%,rgba(255,255,255,.06)) }
.btn.primary { background: linear-gradient(135deg, #8a68ff, #6548db 56%, #4f36b9) }
.btn.ghost,.btn.secondary { background: rgba(255,255,255,.055); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px) }

input, select, textarea,
.duration-dropdown select {
  border-color: rgba(255,255,255,.105);
  background: rgba(5,7,14,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.availability-day-banner {
  border-color: rgba(32,217,255,.2);
  background: linear-gradient(135deg, rgba(32,217,255,.105), rgba(124,92,255,.075)), rgba(12,14,24,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.18);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.availability-timetable {
  position: relative;
  overflow: hidden;
  margin: 0 0 26px;
  padding: 20px;
  border-radius: 22px;
}
.availability-timetable::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  pointer-events: none;
}
.availability-timetable::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  top: -180px;
  left: -80px;
  border-radius: 50%;
  background: rgba(32,217,255,.16);
  filter: blur(55px);
  pointer-events: none;
}
.timetable-header { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px }
.timetable-header h2 { margin:3px 0 4px; font-size:20px }
.timetable-header p { margin:0; color:var(--muted); font-size:12px }
.glass-kicker { color:#83eaff; font:700 9px/1.2 Consolas,monospace; letter-spacing:.18em }
.timetable-date-field { min-width:180px; display:grid; gap:5px; color:var(--muted); font-size:10px }
.timetable-date-field input { min-height:42px; padding:8px 12px; direction:ltr; color:var(--text); text-align:center; font-size:13px }
.timetable-legend { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px; color:var(--muted); font-size:10px }
.timetable-legend span { display:inline-flex; align-items:center; gap:6px }
.timetable-legend i { width:9px; height:9px; border-radius:3px; background:var(--muted); box-shadow:inset 0 1px 0 rgba(255,255,255,.2) }
.timetable-legend .free i { background:#1b9f70 }.timetable-legend .taken i { background:#c13f60 }.timetable-legend .chosen i { background:#8065ff; box-shadow:0 0 9px rgba(128,101,255,.7) }
.timetable-legend .cancellable i { width:13px; height:13px; display:grid; place-items:center; background:#e3486c; color:white; font-size:10px; font-style:normal }

.figma-booking-layout > * { min-width:0 }
.booking-time-range { position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0 }
.booking-time-range label { display:grid;gap:8px;color:var(--muted);font-size:12px;min-width:0 }
.booking-time-range select { width:100%;min-height:48px;padding:10px 12px;font:inherit;font-size:15px;color:var(--text);background:#191a2d;border:1px solid rgba(154,131,255,.4);border-radius:12px }
.booking-time-range select:focus-visible { outline:2px solid #83eaff;outline-offset:2px }
.booking-time-range select:disabled { opacity:.5 }
.timetable-range-feedback:empty { display:none }
.timetable-scroll {
  position:relative;
  z-index:1;
  overflow:auto;
  max-height:590px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(3,5,11,.34);
  scrollbar-color: rgba(124,92,255,.55) rgba(255,255,255,.03);
  scrollbar-width: thin;
}
.timetable-scroll:focus-visible { outline:2px solid var(--primary); outline-offset:3px }
.timetable-grid {
  --slot-count: 24;
  display:grid;
  grid-template-columns:150px repeat(var(--slot-count), minmax(46px, 1fr));
  min-width:1260px;
  direction:rtl;
}
.timetable-corner,.timetable-time,.timetable-station,.timetable-cell { min-height:39px; border-left:1px solid rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.045) }
.timetable-corner,.timetable-time {
  position:sticky;
  top:0;
  z-index:5;
  display:grid;
  place-items:center;
  background:rgba(19,22,34,.9);
  color:var(--muted);
  font:700 10px/1 Consolas,Tahoma,sans-serif;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.timetable-corner { right:0; z-index:7; color:var(--text); font-family:Vazirmatn,Tahoma,sans-serif }
.timetable-station {
  position:sticky;
  right:0;
  z-index:4;
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 11px;
  background:rgba(15,18,29,.94);
  box-shadow:-7px 0 15px rgba(0,0,0,.18);
}
.timetable-station b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap }
.timetable-station small { color:var(--dim); font-size:8px }
.timetable-station { border-top:0;border-right:0;color:var(--text);font:inherit;text-align:right;cursor:pointer }
.timetable-station[aria-pressed="true"] { background:#292044;box-shadow:inset -3px 0 0 #9a83ff,-7px 0 15px rgba(0,0,0,.18) }
.timetable-station:focus-visible,.timetable-cell:focus-visible { z-index:8;outline:2px solid #83eaff;outline-offset:-3px }
.timetable-range-toolbar { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(124,92,255,.28);border-radius:12px;background:rgba(124,92,255,.1) }
.timetable-range-toolbar>div { display:grid;gap:4px }
.timetable-range-toolbar small { color:var(--muted);font-size:10px }
.timetable-range-toolbar strong { color:#ddd4ff;font-size:13px }
.timetable-range-toolbar button { flex-shrink:0 }
.timetable-range-help { margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.9 }
.timetable-range-feedback { min-height:22px;margin:4px 0 10px;color:#83eaff;font-size:11px;line-height:1.8 }
.timetable-range-feedback.error { color:#ff9bb1 }
.timetable-cell {
  position:relative;
  min-width:46px;
  padding:0;
  border-top:0;
  border-right:0;
  background:rgba(255,255,255,.018);
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.timetable-cell::after { content:""; position:absolute; inset:7px 5px; border-radius:6px; background:rgba(56,232,157,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.07) }
.timetable-cell.free:hover { z-index:2; background:rgba(56,232,157,.14); box-shadow:inset 0 0 0 1px rgba(56,232,157,.35) }
.timetable-cell.free:hover::after { background:rgba(56,232,157,.45); box-shadow:0 0 14px rgba(56,232,157,.24) }
.timetable-cell.taken { cursor:not-allowed }
.timetable-cell.taken::after { background:rgba(255,85,117,.42); box-shadow:0 0 11px rgba(255,85,117,.12), inset 0 1px 0 rgba(255,255,255,.1) }
.timetable-cell.taken.cancellable { cursor:pointer }
.timetable-cell.taken.cancellable::before { content:"×"; position:absolute; z-index:2; inset:0; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:800; opacity:0; transition:opacity .15s ease }
.timetable-cell.taken.cancellable:hover { z-index:2; background:rgba(255,85,117,.16); box-shadow:inset 0 0 0 1px rgba(255,85,117,.48) }
.timetable-cell.taken.cancellable:hover::after { background:rgba(255,85,117,.7); box-shadow:0 0 16px rgba(255,85,117,.35) }
.timetable-cell.taken.cancellable:hover::before { opacity:1 }
.timetable-cell.selected-window::after { background:rgba(124,92,255,.78); box-shadow:0 0 15px rgba(124,92,255,.48), inset 0 1px 0 rgba(255,255,255,.22) }
.timetable-cell.free.selected-window:hover { background:rgba(124,92,255,.14); box-shadow:inset 0 0 0 1px rgba(124,92,255,.35) }
.timetable-cell.free.selected-window:hover::after { background:rgba(124,92,255,.88); box-shadow:0 0 15px rgba(124,92,255,.48), inset 0 1px 0 rgba(255,255,255,.22) }
.timetable-cell.selected-window::after { left:0;right:0;border-radius:0 }
.timetable-cell.range-start::after { right:5px;border-radius:0 7px 7px 0 }
.timetable-cell.range-end::after { left:5px;border-radius:7px 0 0 7px }
.timetable-cell.free.range-anchor::before { content:"";position:absolute;z-index:2;top:2px;right:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#fff }
.timetable-cell.selected-conflict::after { background:repeating-linear-gradient(135deg,rgba(255,85,117,.82) 0 5px,rgba(124,92,255,.75) 5px 10px) }
.timetable-loading { grid-column:1/-1; min-height:120px; display:grid; place-items:center; color:var(--muted); font-size:12px }
.timetable-loading.error { color:var(--red) }
.availability-timetable footer { position:relative; z-index:1; display:flex; justify-content:space-between; gap:12px; margin-top:10px; color:var(--dim); font-size:9px }

.cancel-dialog-open { overflow:hidden }
.timetable-cancel-dialog { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px }
.timetable-cancel-dialog[hidden] { display:none!important }
.cancel-dialog-backdrop { position:absolute; inset:0; background:rgba(3,4,9,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }
.cancel-dialog-card { position:relative; width:min(430px,100%); padding:28px; border:1px solid rgba(255,255,255,.15); border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.025)),rgba(15,17,28,.9); box-shadow:0 32px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); text-align:center }
.cancel-dialog-icon { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 14px; border:1px solid rgba(255,85,117,.25); border-radius:50%; background:rgba(255,85,117,.12); color:var(--red); font-size:28px; line-height:1 }
.cancel-dialog-card h2 { margin:0 0 7px; font-size:20px }.cancel-dialog-card>p { margin:0 0 14px; color:var(--muted); font-size:13px }
.cancel-dialog-warning { margin:0 0 12px; padding:10px 12px; border:1px solid rgba(255,201,92,.2); border-radius:10px; background:rgba(255,201,92,.07); color:var(--yellow); font-size:11px }
.cancel-dialog-warning[hidden] { display:none!important }.cancel-dialog-status { min-height:20px; color:var(--red); font-size:11px }
.cancel-dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:8px }.cancel-dialog-actions .btn { width:100% }

@media (max-width:760px) {
  .public-topbar nav { display:none }
  .public-booking-auth-fields { grid-template-columns:1fr }
  .play-mode-options { grid-template-columns:1fr }
  .availability-timetable { padding:15px; border-radius:18px }
  .timetable-header { align-items:stretch; flex-direction:column }
  .timetable-date-field { width:100% }
  .timetable-range-toolbar { align-items:flex-start;flex-wrap:wrap }
  .timetable-grid { grid-template-columns:125px repeat(var(--slot-count), minmax(44px,1fr)); min-width:1181px }
  .timetable-cell { min-width:44px }
  .availability-timetable footer { flex-direction:column; gap:2px }
}

@media (prefers-reduced-motion:reduce) {
  .booking-system-card,.timetable-cell,.btn { transition:none!important }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .topbar,.panel,.availability-timetable,.booking-system-card,.figma-metrics .metric,.customer-welcome,.systems-hero,.pc-build-intro,.pc-spec-grid { background:#11141d }
}