/* SPL Fan Zone — custom styles carried over from the agency delivery, plus the
   debug panel. Everything else is Tailwind utility classes generated at runtime
   by assets/js/tailwind-play.js. */

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #E60023;
  border-radius: 10px;
}

/* Recolours the flat black station icons to the JMS red when unlocked. */
.red-png {
  filter: invert(13%) sepia(98%) saturate(7024%) hue-rotate(349deg) brightness(84%) contrast(117%);
}

.select-none {
  user-select: none;
  -webkit-user-select: none;
}

/* Brand fonts, supplied by the client 2026-09-03: Karbon (Klim) for English,
   Luma (Tarek Atrissi, licensed to Abdul Latif Jameel) for Arabic. Only the two
   weights the page uses are shipped. Luma has no Latin glyphs and Karbon has no
   Arabic ones, so each stack lists the other as its fallback — digits and any
   stray Latin in Arabic mode still come out of a brand font, not the system one.
   font-display: swap — text shows immediately on a slow stadium connection and
   re-renders when the font lands, rather than staying invisible. */
@font-face {
  font-family: 'Karbon';
  src: url('../fonts/Karbon-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karbon';
  src: url('../fonts/Karbon-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Luma';
  src: url('../fonts/Luma-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Luma';
  src: url('../fonts/Luma-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* app.js flips <html lang> on the language toggle. !important on purpose: it
   has to beat the Tailwind font utilities the runtime build generates. */
html[lang="en"], html[lang="en"] * {
  font-family: 'Karbon', 'Luma', sans-serif !important;
}
html[lang="ar"], html[lang="ar"] * {
  font-family: 'Luma', 'Karbon', sans-serif !important;
}

body {
  background-color: #0A0A0A;
  margin: 0;
  padding: 0;
}

/* Modals default to hidden; JS toggles the .flex class to show them. */
#history-modal, #already-played-modal, #game-completed-modal, #qr-modal {
  display: none;
}
#history-modal.flex, #already-played-modal.flex, #game-completed-modal.flex, #qr-modal.flex {
  display: flex;
}

/* ------------------------------------------------------------------ */
/* Debug panel — only rendered when the debug gate is open.            */
/* ------------------------------------------------------------------ */

#fz-debug {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #d8d8d8;
  background: #0d0d0f;
  border-top: 2px solid #E60023;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
}

#fz-debug-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: none;
  border: 0;
  color: #E60023;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

#fz-debug-body {
  padding: 0 14px 14px;
  max-height: 55vh;
  overflow-y: auto;
}

#fz-debug .fz-dbg-hint {
  color: #7a7a7a;
  line-height: 1.5;
  margin: 0 0 10px;
}

#fz-debug .fz-dbg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

#fz-debug button.fz-dbg-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
  background: #17171a;
  border: 1px solid #2c2c31;
  border-radius: 3px;
  color: #d8d8d8;
  font: inherit;
  cursor: pointer;
}
#fz-debug button.fz-dbg-btn:hover {
  border-color: #E60023;
  color: #fff;
}
#fz-debug button.fz-dbg-btn[data-done="1"] {
  border-color: #E60023;
  background: #1f0508;
}
#fz-debug button.fz-dbg-btn .fz-dbg-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a3a3f;
}
#fz-debug button.fz-dbg-btn[data-done="1"] .fz-dbg-dot {
  background: #E60023;
}

#fz-debug .fz-dbg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#fz-debug .fz-dbg-actions button {
  padding: 7px 12px;
  background: #17171a;
  border: 1px solid #2c2c31;
  border-radius: 3px;
  color: #b9b9b9;
  font: inherit;
  cursor: pointer;
}
#fz-debug .fz-dbg-actions button:hover {
  border-color: #E60023;
  color: #fff;
}

#fz-debug .fz-dbg-state {
  margin-top: 10px;
  padding: 8px 10px;
  background: #08080a;
  border: 1px solid #1e1e22;
  border-radius: 3px;
  color: #6f6f75;
  word-break: break-all;
  line-height: 1.5;
}

#fz-debug[data-open="0"] #fz-debug-body {
  display: none;
}

/* Keep the debug bar from covering the bottom of the page content. */
body.fz-has-debug {
  padding-bottom: 46px;
}