/* Stiluri comune: temă, safe-area, butoane mari. Jocurile își redefinesc variabilele. */
:root {
  --bg: #f4f1ea;
  --fg: #1f2328;
  --muted: #6b6f76;
  --accent: #2f6fdb;
  --surface: #ffffff;
  --radius: 14px;
  --tap: 48px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app { height: 100%; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.btn {
  min-width: var(--tap); min-height: var(--tap);
  border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--fg);
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px; cursor: pointer;
  box-shadow: 0 1px 0 rgb(0 0 0 / .08);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; }
.btn.primary { background: var(--accent); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgb(0 0 0 / .45); padding: 24px;
}
.overlay[hidden] { display: none; }
.card { background: var(--surface); border-radius: 20px; padding: 24px; max-width: 360px; width: 100%; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}