/* ============================================================
   Theme tokens — warm palette, no blue / dark-blue
   ============================================================ */
:root {
  --bg: #fdf6e3;
  --bg-2: #f7eed5;
  --surface: #ffffff;
  --surface-2: #fffaf0;
  --text: #2d2a26;
  --text-muted: #7a7670;
  --border: rgba(45, 42, 38, 0.08);
  --accent: #d18b47;   /* warm amber */
  --accent-2: #c46b4a; /* terracotta */
  --success: #6aa84f;
  --success-2: #8bbe6a;
  --danger: #c0573e;
  --danger-2: #d97757;
  --shadow: 0 10px 30px rgba(45, 42, 38, 0.12);
  --shadow-lg: 0 20px 50px rgba(45, 42, 38, 0.18);
  --radius: 22px;
  --radius-sm: 14px;
}

:root[data-theme='dark'] {
  --bg: #1c1916;
  --bg-2: #221e1a;
  --surface: #2a2520;
  --surface-2: #322c26;
  --text: #ede4d3;
  --text-muted: #a39c8e;
  --border: rgba(237, 228, 211, 0.08);
  --accent: #e8b87d;
  --accent-2: #e89370;
  --success: #8fc472;
  --success-2: #a8d68e;
  --danger: #e08a72;
  --danger-2: #ec9a82;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Reset & base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  transition: background 0.4s ease, color 0.4s ease;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  z-index: -3;
  transition: background 0.4s ease;
}

#bgCanvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  filter: blur(12px);
  opacity: 0.85;
}

#fxCanvas {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  padding: env(safe-area-inset-top) 14px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.2s ease;
}
.icon-btn:active {
  transform: scale(0.92);
  background: var(--surface-2);
}

/* ============================================================
   Screens
   ============================================================ */
#app {
  position: relative;
  height: 100vh;
  padding-top: 70px;
  padding-bottom: env(safe-area-inset-bottom);
}

.screen {
  position: absolute;
  inset: 70px 0 0 0;
  padding: 20px 18px env(safe-area-inset-bottom);
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.screen.active {
  display: flex;
  opacity: 1;
}

/* ---------- Start screen ---------- */
.start-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 20px;
}
.title {
  font-size: 38px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}
.subtitle {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 24px 0;
}
.direction-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 380px;
}
.dir-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dir-btn:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-lg);
}
.dir-btn .flags {
  font-size: 36px;
  letter-spacing: 4px;
}
.dir-btn .dir-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.quick-stats {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  min-height: 18px;
}

/* ---------- Study screen ---------- */
.study-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.text-btn {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.text-btn:active {
  transform: scale(0.95);
  background: var(--surface-2);
}
.progress {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.screen-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

/* =================================================================
   Card flip — iOS Safari–safe approach.

   The classic 3D flip uses `backface-visibility: hidden` to hide the
   face that's facing away. This is unreliable on iOS Safari: the
   back face of the front leaks through, even with all the usual
   prefixes and pseudo-element workarounds.

   Instead: each face has its own @keyframes animation that rotates
   AND switches opacity exactly at the 50% mark, when the face is
   edge-on to the camera (invisible regardless). No reliance on
   backface-visibility at all.
   ================================================================= */
.card-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 4px;
  perspective: 1600px;
  -webkit-perspective: 1600px;
}

.card {
  width: 100%;
  max-width: 420px;
  height: min(60vh, 460px);
  position: relative;
  cursor: pointer;
}
.card.swipe-left {
  animation: swipeOutLeft 0.45s cubic-bezier(0.5, 0, 0.75, 0) forwards;
  -webkit-animation: swipeOutLeft 0.45s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
.card.swipe-right {
  animation: swipeOutRight 0.45s cubic-bezier(0.5, 0, 0.75, 0) forwards;
  -webkit-animation: swipeOutRight 0.45s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
.card.swipe-in {
  animation: swipeIn 0.45s cubic-bezier(0.25, 1, 0.5, 1) backwards;
  -webkit-animation: swipeIn 0.45s cubic-bezier(0.25, 1, 0.5, 1) backwards;
}

@keyframes swipeOutLeft {
  to {
    transform: translateX(-130%) rotate(-20deg);
    -webkit-transform: translateX(-130%) rotate(-20deg);
    opacity: 0;
  }
}
@keyframes swipeOutRight {
  to {
    transform: translateX(130%) rotate(20deg);
    -webkit-transform: translateX(130%) rotate(20deg);
    opacity: 0;
  }
}
@keyframes swipeIn {
  from {
    transform: translateY(40px) scale(0.95);
    -webkit-transform: translateY(40px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    -webkit-transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

.card-front {
  z-index: 2;
  opacity: 1;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  background:
    radial-gradient(
      circle at 30% 20%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 60%
    ),
    var(--surface);
}

.card-back {
  z-index: 1;
  opacity: 0;
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  background:
    radial-gradient(
      circle at 70% 80%,
      color-mix(in srgb, var(--accent-2) 14%, transparent),
      transparent 60%
    ),
    var(--surface-2);
}

/* When .card.flipped is applied, run the flip animations on each face.
   Removing the .flipped class instantly snaps the faces back to their
   default states (no transition is running), which is exactly what we
   want when the next card slides in. */
.card.flipped .card-front {
  animation: flipOutFront 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
  -webkit-animation: flipOutFront 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}
.card.flipped .card-back {
  animation: flipInBack 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
  -webkit-animation: flipInBack 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

@keyframes flipOutFront {
  0%     { opacity: 1; transform: rotateY(0deg);   -webkit-transform: rotateY(0deg); }
  49.99% { opacity: 1; }
  50%    { opacity: 0; }
  100%   { opacity: 0; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
}

@keyframes flipInBack {
  0%     { opacity: 0; transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); }
  49.99% { opacity: 0; }
  50%    { opacity: 1; }
  100%   { opacity: 1; transform: rotateY(0deg);    -webkit-transform: rotateY(0deg); }
}

.card-word {
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  word-break: break-word;
  line-height: 1.2;
}
.card-hint {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ---------- Action buttons ---------- */
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 0 12px 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.action-buttons.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.action-btn {
  padding: 18px 12px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.action-btn .action-emoji {
  font-size: 22px;
}
.action-btn:active {
  transform: scale(0.96);
}
.action-yes {
  background: linear-gradient(135deg, var(--success), var(--success-2));
  color: #fff;
  border-color: transparent;
}
.action-no {
  background: linear-gradient(135deg, var(--danger), var(--danger-2));
  color: #fff;
  border-color: transparent;
}
.action-reset {
  background: var(--surface);
  color: var(--danger);
  margin-top: 18px;
}

/* ---------- Stats screen ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card.full {
  grid-column: span 2;
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.stat-value.accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Deck complete state ---------- */
.deck-complete {
  text-align: center;
  padding: 40px 20px;
}
.deck-complete .emoji {
  font-size: 64px;
  margin-bottom: 18px;
}
.deck-complete h3 {
  font-size: 24px;
  margin: 0 0 14px 0;
}

/* Subtle pulse removed — was promoting the front face to its own composite
   layer on Safari, which broke the 3D flip context. */