/* Estilo comum do PlayGames: temas claro/escuro, barra superior, botões. Usado pelo menu e por todos os jogos. */
:root {
  --bg: #f4f6fb; --surface: #ffffff; --surface2: #eceff7; --text: #171a2b; --muted: #667089;
  --border: #dde2ee; --accent: #6d4cff; --accent-text: #ffffff; --accent2: #12b886; --danger: #e03a4e;
  --shadow: 0 6px 20px rgba(20, 24, 60, .10); --r: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1220; --surface: #181c30; --surface2: #222740; --text: #eef0fb; --muted: #9aa3c2;
    --border: #2a3050; --accent: #8b73ff; --accent-text: #0f1220; --accent2: #3ddcae;
    --shadow: 0 6px 20px rgba(0, 0, 0, .35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1220; --surface: #181c30; --surface2: #222740; --text: #eef0fb; --muted: #9aa3c2;
  --border: #2a3050; --accent: #8b73ff; --accent-text: #0f1220; --accent2: #3ddcae;
  --shadow: 0 6px 20px rgba(0, 0, 0, .35); color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  min-height: 100dvh; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.4;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: manipulation; overscroll-behavior: none;
}
button { font: inherit; color: inherit; }

/* Barra superior dos jogos: seta de voltar + título */
.pg-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.pg-topbar h1 { font-size: 18px; margin: 0; flex: 1; font-weight: 700; }
.pg-btn-icon {
  width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); cursor: pointer;
}
.pg-btn-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pg-btn {
  min-height: 48px; padding: 0 20px; border-radius: 14px; border: 0; background: var(--accent); color: var(--accent-text);
  font-weight: 700; font-size: 16px; cursor: pointer;
}
.pg-btn.sec { background: var(--surface2); color: var(--text); }
.pg-btn:active, .pg-btn-icon:active { transform: scale(.97); }
.pg-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }