/* ===== SHARED GAME BASE STYLES ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #0a0a14;
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

/* Back button */
.back {
  position: fixed;
  top: 14px;
  left: 14px;
  text-decoration: none;
  color: #fff;
  background: #ffffff14;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.85rem;
  transition: background 0.2s;
  z-index: 100;
  white-space: nowrap;
}
.back:hover { background: #ffffff28; }

/* Page title */
h1 {
  margin: 70px 0 6px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-align: center;
}

/* Info bar (score, level, etc.) */
.info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  color: #aaa;
}
.info span b { color: #fff; }

/* Canvas wrapper */
.wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Canvas */
canvas {
  border-radius: 10px;
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: none;
}

/* Overlay (start screen / game over) */
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000cc;
  border-radius: 16px;
  padding: clamp(24px, 5vw, 40px) clamp(28px, 6vw, 50px);
  text-align: center;
  backdrop-filter: blur(10px);
  min-width: 220px;
  width: max-content;
  max-width: 90vw;
  z-index: 10;
}

.overlay h2 {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  margin-bottom: 10px;
}

.overlay p {
  color: #aaa;
  margin-bottom: 20px;
  font-size: clamp(0.82rem, 2.5vw, 0.95rem);
  line-height: 1.6;
}

/* Buttons */
button, .btn {
  border: none;
  padding: 11px 28px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
button:hover, .btn:hover { transform: scale(1.05); filter: brightness(1.1); }

/* Mode button group */
.mode-btns {
  display: flex;
  gap: 10px;
  margin: 10px 0 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.mode-btn {
  background: #ffffff14;
  color: #fff;
  border: none;
  padding: 7px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.2s;
}

/* Hint text */
.hint {
  margin-top: 10px;
  color: #444;
  font-size: clamp(0.72rem, 2vw, 0.82rem);
  text-align: center;
  padding: 0 12px;
}

/* ===== FIXED OVERLAY (full-screen for some games) ===== */
.full-overlay {
  position: fixed;
  inset: 0;
  background: #000000aa;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.full-overlay .obox {
  background: #111127;
  border-radius: 16px;
  padding: clamp(28px, 5vw, 44px) clamp(30px, 6vw, 54px);
  text-align: center;
  max-width: 90vw;
}
.full-overlay .obox h2 {
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin-bottom: 10px;
}
.full-overlay .obox p {
  color: #aaa;
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: clamp(0.82rem, 2.5vw, 0.95rem);
}