/* Child‑friendly theme */
:root {
  --bg: #fff9ef;
  --panel: #f6e7cf;
  --accent: #00ffb7;
  --ink: #1b1b1b;
  --soft: #98cf0d;
  --soft2: #ffd166; /* warm yellow (tweak if you like) */
  --shadow: 10px 10px 30px rgba(103, 9, 9, 0.08);
  --radius: 20px;
  --header-h: clamp(56px, 11vh, 88px);
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  color: var(--ink);
  min-height: 100dvh; /* modern viewport unit */
  overflow: hidden;
  background: radial-gradient(
      1200px 800px at 10% -20%,
      #fff6c4 0%,
      transparent 60%
    ),
    var(--bg);
}

body::after {
  content: "";
  position: fixed; /* stays put while scrolling */
  inset: 0;
  z-index: -1; /* behind your app UI */
  background: linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.85)
    ),
    url("assets/app-bg.webp") center/cover no-repeat;
  filter: saturate(1.05);
}
/* Header */
.app-header {
  min-height: var(--header-h);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(12px, 2vw, 20px);
}
.app-header h1 {
  margin: 0;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 900;
  background: var(--accent);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow);
}

/* App shell */
.app-shell {
  margin: 0 auto;
  max-width: 1100px;
  padding: clamp(8px, 2vw, 20px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

/* Navigation buttons */
.nav-btn {
  --size: clamp(52px, 6.5vh, 64px);
  --bg: #a66363; /* deep purple/navy disc */
  --ink: #ffffff; /* white chevron */
  --ring: #2aeb7133;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  border: 3px solid var(--ring);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  padding: 0; /* the circle itself is the hit target */
  line-height: 1;
  opacity: 1; /* ensure always visible */
  transition: transform 0.1s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  z-index: 3; /* above card */
}

.nav-btn.left {
  /* PREVIOUS = ORANGE */
  --bg: #e36a2e;
  --ink: #ffffff;
  --ring: #e36a2e55;
}
.nav-btn.left:hover {
  background: #c95c27;
}
.nav-btn.left:active {
  transform: scale(0.98);
}

.nav-btn.right {
  /* NEXT = GREEN */
  --bg: #1aa74f;
  --ink: #ffffff;
  --ring: #1aa74f55;
}
.nav-btn.right:hover {
  background: #158d42;
}
.nav-btn.right:active {
  transform: scale(0.98);
}

/* Strong, visible keyboard focus */
.nav-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0, 0, 0, 0.15);
  border-color: var(--ring);
}

.nav-btn span {
  /* the chevron glyph */
  font-size: clamp(35px, 3.2vh, 40px);
  transform: translateY(-1px);
}
.nav-btn::after {
  content: attr(data-label);
  display: none;
  position: absolute;
  bottom: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: #3b2a77;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Show label on hover/focus (desktop) */
.nav-btn:hover::after,
.nav-btn:focus-visible::after {
  display: block;
}

/* Attention pulse for first-use discoverability */
@keyframes nav-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(91, 52, 247, 0.35);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(91, 52, 247, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(91, 52, 247, 0);
  }
}
body.show-nav-hint .nav-btn {
  animation: nav-pulse 1.6s ease-out infinite;
}

/* Card */
.card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  border: 3px solid #11111110;
  overflow: hidden;
  height: 100%;
  min-height: clamp(380px, 60vh, 700px);
  position: relative;
}
.card-inner {
  padding: clamp(12px, 2.2vw, 22px);
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* Horizontal (desktop/tablet) */
.layout-horizontal {
  grid-template-columns: 1fr 1fr; /* 1/3 : 2/3 */
  align-items: center;
}

/* Image pane */

.phrase-pane {
  background: var(--soft);
  border-radius: var(--radius);
  padding: clamp(12px, 2vw, 18px);
  box-shadow: inset 0 0 0 4px #ffffffff, var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}
/* New right-side word with different background */
.rhyme-pane {
  background: var(--soft2);
  border-radius: var(--radius);
  padding: clamp(12px, 2vw, 18px);
  box-shadow: inset 0 0 0 4px #ffffffff, var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

#wordA,
#wordB {
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: 1.2;
}
#slideText {
  margin: 0;
  text-align: center;
  font-weight: 700;
  /* Responsive sizing that stays big but wraps nicely */
  font-size: clamp(30px, 10vw, 100px);
  line-height: 1.25;
}

/* Controls */
.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(12px, 2vw, 18px) 14px;
}
.controls .left-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.controls .right-controls {
  display: flex;
  justify-content: center;
  min-width: fit-content;
}

.right-controls {
  display: flex;
  justify-content: flex-end;
  min-width: fit-content;
}

.pill {
  border: none;
  cursor: pointer;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: #111;
  color: #fff;
  box-shadow: var(--shadow);
}
.pill.small {
  font-size: 0.9rem;
}
.pill[aria-pressed="true"] {
  background: #0a7d29;
}

.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}
.counter {
  font-weight: 600;
  font-size: 0.95rem;
}

.dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 40vw;
}
.dots button {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: none;
  background: #00000030;
  cursor: pointer;
}
.dots button[aria-current="true"] {
  background: #0a7d29;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: no-preference) {
  .fade {
    animation: fade 0.28s ease both;
  }
  @keyframes fade {
    from {
      opacity: 0.6;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (max-width: 720px) {
  /* was unconstrained on some phones */
  .phrase-pane {
    min-height: 25dvh;
  }
  .rhyme-pane {
    min-height: 25dvh;
  }
  .controls {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .app-shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }
  .layout-horizontal {
    grid-template-columns: 1fr;
  }
  .nav-btn {
    --size: clamp(30px, 6.5vh, 45px);
    width: var(--size);
    height: var(--size);
  }

  .nav-btn span {
    /* the chevron glyph */
    font-size: clamp(25px, 3.2vh, 35px);
  }
  .nav-btn.left {
    left: max(10px, env(safe-area-inset-left));
  }
  .nav-btn.right {
    right: max(10px, env(safe-area-inset-right));
  }
  .nav-btn::after {
    display: block;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
.app-shell,
.card,
.card-inner {
  min-width: 0;
}

/* Compact controls on small screens */
@media (max-width: 560px) {
  .controls {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left  right"
      "progress progress";
    gap: 8px;
    padding: 8px 12px 12px;
  }
  .left-controls {
    grid-area: left;
    justify-content: flex-start;
  }
  .right-controls {
    grid-area: right;
    justify-content: flex-end;
  }
  .progress {
    grid-area: progress;
    justify-content: center;
  }

  /* Hide dots to save space; keep only the counter */
  .dots {
    display: flex;
    gap: 6px;
    max-width: 70vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dots button {
    flex: 0 0 10px;
  }
  .counter {
    font-size: 1.05rem;
  }

  /* Slightly tighter buttons */
  .pill.small {
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
  }
}

/* Softer buttons (less black, more friendly) */
:root {
  --btn-bg: #222; /* used rarely for emphasis */
  --btn-soft: #f0f1f5; /* default button fill */
  --btn-ink: #222; /* soft button text */
  --btn-ring: #00000014; /* subtle border */
}

.pill {
  background: var(--btn-soft);
  color: var(--btn-ink);
  border: 2px solid var(--btn-ring);
  box-shadow: none; /* remove heavy shadows */
  font-weight: 600;
}
.pill[aria-pressed="true"] {
  /* active state (e.g., Autoplay ON) */
  background: #0a7d29;
  color: #fff;
  border-color: #0a7d29;
}
.pill.small {
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
}

/* Optional: primary style only where you really want it */
.pill.primary {
  background: var(--btn-bg);
  color: #fff;
  border-color: transparent;
}

/* Progress area spacing so buttons don't crowd */
.controls {
  gap: 8px;
}
.progress {
  gap: 10px;
}

/* Give the phrase more presence than buttons */
#slideText {
  font-size: clamp(40px, 5.2vw, 70px); /* a touch larger */
  line-height: 1.25;
}

/* Mobile tightening: keep controls compact under 560px */
@media (max-width: 560px) {
  .pill.small {
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* ===== THEME: Candy Pop ===== */
body.theme-candy {
  --bg: #fff5fb;
  --panel: #ffffff;
  --accent: #ffd3e8;
  --soft: #da77f2;
  --ink: #221b29;
  --shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}
body.theme-candy::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(
      900px 600px at 15% -10%,
      rgba(255, 150, 220, 0.25),
      transparent 55%
    ),
    radial-gradient(
      900px 600px at 95% 120%,
      rgba(140, 180, 255, 0.22),
      transparent 55%
    ),
    #fff5fb;
}