:root {
  --bg: #1a1230;
  --panel: #241a40;
  --text: #fdf6ff;
  --muted: #c9b8e8;
  --accent: #ffb6e6;
  --accent-dim: #ff7fd0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  background: #1a1230;
  color: var(--text);
  font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* Kill pull-to-refresh and scroll-chaining so a downward swipe / drag on the
     joystick controls the character instead of refreshing the page. */
  overscroll-behavior: none;
  touch-action: none;
}

.wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The board fills the entire viewport; the canvas fills the board. */
.board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--panel);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* The game handles all touch gestures itself; tell the browser not to
     pan/zoom/refresh so drags register as joystick input. */
  touch-action: none;
}

/* ---- HUD bar (overlaid on the canvas, top) --------------------------- */
.bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Above the surah picker (z 7) so the mute / full-screen buttons stay tappable
     while the picker is open. */
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: clamp(6px, 1.6vmin, 12px) clamp(8px, 2vmin, 16px);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.bar h1 {
  font-size: clamp(13px, 2.6vmin, 20px);
  font-weight: 800;
  letter-spacing: 0.3px;
}

.scores {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vmin, 14px);
  pointer-events: auto;
}
.score { font-size: clamp(10px, 1.8vmin, 13px); color: var(--muted); }
.score strong { color: var(--text); margin-left: 4px; }

.mute {
  background: rgba(36, 26, 64, 0.7);
  border: 1px solid #3a2c5e;
  color: var(--text);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: clamp(13px, 2vmin, 15px);
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;
}
.mute:hover { border-color: var(--accent); }

/* ---- Overlay (intro / stage complete) -------------------------------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(26, 18, 48, 0.86);
  text-align: center;
  padding: 22px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.overlay.hidden { opacity: 0; pointer-events: none; }
/* On the surah-complete screen the friend cheering Alula is drawn on the
   canvas, so dim less and lift the text up to keep the characters visible. */
.overlay.greet {
  background: rgba(26, 18, 48, 0.42);
  justify-content: flex-start;
  padding-top: clamp(36px, 11vh, 120px);
}
#overlay-title {
  font-size: clamp(20px, 4vmin, 30px);
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 2px 0 #6a3d8a;
}
#overlay-sub {
  font-size: clamp(13px, 2.4vmin, 17px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 90%;
}
#overlay-sub .arabic { font-size: clamp(18px, 3vmin, 24px); color: var(--text); }

/* ---- Surah picker ---------------------------------------------------- */
.select {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, 3vmin, 22px);
  background: rgba(26, 18, 48, 0.92);
  text-align: center;
  /* Extra top padding clears the HUD bar; bottom padding lets the last row
     scroll fully into view. */
  padding: clamp(44px, 8vh, 72px) clamp(16px, 4vmin, 32px) clamp(24px, 6vh, 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* The board kills touch gestures for gameplay; re-enable vertical scrolling
     here so the 37-surah grid can be swiped through on a phone. */
  touch-action: pan-y;
}
.select.hidden { display: none; }
.select-title {
  font-size: clamp(20px, 4vmin, 30px);
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 2px 0 #6a3d8a;
}
.select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(96px, 18vmin, 130px), 1fr));
  gap: clamp(8px, 1.6vmin, 14px);
  width: min(720px, 92%);
}
.surah-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: clamp(8px, 1.6vmin, 14px) clamp(6px, 1.2vmin, 10px);
  border: 1px solid #3a2c5e;
  border-radius: 12px;
  background: rgba(255, 182, 230, 0.12);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.06s ease;
}
.surah-btn:hover { border-color: var(--accent); background: rgba(255, 182, 230, 0.22); }
.surah-btn:active { transform: scale(0.97); }
.surah-btn .num {
  font-size: clamp(9px, 1.5vmin, 11px);
  color: var(--muted);
}
.surah-btn .ar {
  font-size: clamp(18px, 3vmin, 24px);
  font-weight: 700;
}
.surah-btn .en {
  font-size: clamp(11px, 1.9vmin, 14px);
  font-weight: 700;
  color: var(--accent);
}

/* ---- Footer ---------------------------------------------------------- */
.foot {
  position: absolute;
  right: 8px;
  bottom: 4px;
  z-index: 4;
  font-size: 10px;
  opacity: 0.55;
  pointer-events: auto;
}

/* ---- Touch controls (small, semi-transparent, cornered) -------------- */
.touch {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none; /* only the buttons themselves capture touches */
  /* Hidden by default; revealed on coarse (touch) pointers via the query
     below, or forced on by the .show class the JS adds on first touch. */
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Movement cluster anchored bottom-left, jump anchored bottom-right. */
.touch .pad {
  position: absolute;
  left: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vh, 28px);
  display: flex;
  gap: clamp(10px, 2.4vw, 18px);
}

.tbtn {
  pointer-events: auto;
  width: clamp(64px, 15vmin, 96px);
  height: clamp(64px, 15vmin, 96px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 182, 230, 0.28);
  color: var(--text);
  font-size: clamp(26px, 6vmin, 40px);
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* prevent gestures so move + jump work together */
  backdrop-filter: blur(2px);
}
.tbtn:active { background: rgba(255, 182, 230, 0.55); }
.tbtn.jump {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vh, 28px);
  width: clamp(78px, 18vmin, 116px);
  height: clamp(78px, 18vmin, 116px);
  background: rgba(127, 217, 255, 0.32);
}

/* Reveal touch controls on touch-capable devices. */
@media (hover: none) and (pointer: coarse) {
  .touch { opacity: 1; }
}
.touch.show { opacity: 1; }

/* Return to games list */
.mute.home { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; }