/* ── RESET & GLOBAL ───────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #8B5FBF;
  --primary-dark: #6B4694;
  --text: #1a1e2b;
  --text-soft: #2c3e47;
  --background: #FFFFFF;
  --background-alt: #F9F7FE;
  --card-bg: #ffffff;
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 24px 36px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(139, 95, 191, 0.08);
  --radius-md: 20px;
  --radius-sm: 14px;
  --transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  --tap: 44px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  background: var(--background);
  color: var(--text);
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;

  /* prevent double-tap zoom on iOS */
  touch-action: manipulation;
}

/* ============================================================
   HOME BUTTON
   ============================================================ */
.home-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2000;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    text-decoration: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.2s;
    min-height: 36px;
}
.home-btn:hover { background: rgba(0, 212, 160, 0.75); color: #fff; }

@media screen and (max-width: 600px) {
    .home-btn { font-size: 12px; padding: 6px 10px; top: 8px; left: 8px; }
}