/* Shared Layout — ses-avcisi-style unified UI
   Landscape desktop layout with lavender gradient background,
   PNG-based decorations, ovoid white game card, PNG-based buttons.
   All activities share this visual shell. */

/* ─── Full-screen game container ─── */
.game-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-gradient);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding: clamp(72px, 8vh, 98px) clamp(18px, 2vw, 28px) clamp(96px, 10vh, 128px);
  box-sizing: border-box;
  isolation: isolate;
}

/* ─── Background orbs — large blurred circles ─── */
.background-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(8px);
  opacity: 0.48;
  pointer-events: none;
  z-index: 0;
}

.background-orb--left {
  width: min(37vw, 500px);
  aspect-ratio: 1;
  left: max(-13vw, -168px);
  bottom: max(-18vh, -196px);
  background: var(--color-deco-purple);
  opacity: 0.34;
}

.background-orb--right {
  width: min(31vw, 420px);
  aspect-ratio: 1;
  top: max(-10vh, -118px);
  right: max(-8vw, -82px);
  background: var(--color-bg-light);
  opacity: 0.62;
}

/* ─── Scene decorations — PNG-based scattered elements ─── */
.scene-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.scene-decoration,
.scene-plus,
.scene-squiggle {
  position: absolute;
}

.scene-decoration {
  display: block;
  pointer-events: none;
}

/* Star decorations */
.deco-star-top-left {
  width: clamp(64px, 5vw, 82px);
  top: clamp(50px, 6vh, 78px);
  left: clamp(188px, 15vw, 248px);
}

.deco-note-right {
  width: clamp(72px, 5.8vw, 96px);
  top: clamp(42px, 5vh, 66px);
  right: clamp(238px, 18vw, 302px);
}

.deco-pink-star {
  width: clamp(62px, 5vw, 88px);
  top: clamp(254px, 27vh, 328px);
  right: clamp(10px, 1vw, 24px);
}

.deco-blue-star-right {
  width: clamp(48px, 3.8vw, 66px);
  top: clamp(520px, 58vh, 610px);
  right: clamp(8px, 0.8vw, 18px);
}

.deco-green-star {
  width: clamp(36px, 2.8vw, 48px);
  bottom: clamp(106px, 12vh, 146px);
  right: clamp(18px, 1.4vw, 28px);
}

.deco-happy-star {
  width: clamp(70px, 5vw, 100px);
  bottom: 34px;
  left: 34px;
  transform: rotate(-16deg);
}

.deco-happy-star--medium {
  width: clamp(50px, 4vw, 70px);
  top: clamp(110px, 12vh, 154px);
  bottom: auto;
  left: clamp(36px, 2.8vw, 58px);
  transform: rotate(14deg);
}

.deco-happy-star--small {
  width: clamp(102px, 7vw, 138px);
  bottom: clamp(186px, 20vh, 238px);
  left: auto;
  right: clamp(112px, 8vw, 160px);
  transform: rotate(-18deg);
}

/* Note decorations */
.deco-note-left {
  width: clamp(52px, 4vw, 72px);
  top: clamp(210px, 23vh, 282px);
  left: clamp(84px, 6vw, 126px);
  transform: rotate(-18deg);
}

.deco-star-left-mid {
  width: clamp(42px, 3.2vw, 58px);
  top: clamp(404px, 44vh, 486px);
  left: clamp(128px, 9vw, 182px);
  transform: rotate(12deg);
}

.deco-dot-yellow-left-mid {
  width: clamp(12px, 1vw, 16px);
  bottom: clamp(212px, 23vh, 274px);
  left: clamp(86px, 6vw, 122px);
}

.deco-note-left-bottom {
  width: clamp(44px, 3.6vw, 62px);
  bottom: clamp(178px, 17vh, 204px);
  left: clamp(148px, 10vw, 204px);
  transform: rotate(16deg);
}

.deco-star-left-bottom {
  width: clamp(34px, 2.8vw, 50px);
  bottom: clamp(286px, 19vh, 322px);
  left: clamp(104px, 7vw, 146px);
  transform: rotate(-14deg);
}

/* Dot decorations */
.deco-dot-pink-top,
.deco-dot-yellow-top,
.deco-dot-blue-top,
.deco-dot-orange-top,
.deco-dot-pink-bottom,
.deco-dot-green-bottom {
  width: clamp(8px, 0.8vw, 12px);
}

.deco-dot-pink-top {
  top: clamp(146px, 15vh, 170px);
  left: clamp(182px, 14vw, 234px);
}

.deco-dot-yellow-top {
  top: clamp(46px, 5vh, 62px);
  left: clamp(292px, 22vw, 372px);
}

.deco-dot-blue-top {
  top: clamp(44px, 4vh, 58px);
  right: clamp(182px, 13vw, 228px);
}

.deco-dot-orange-top {
  top: clamp(86px, 8vh, 108px);
  right: clamp(148px, 11vw, 192px);
}

.deco-dot-pink-bottom {
  bottom: clamp(42px, 5vh, 62px);
  left: clamp(254px, 19vw, 332px);
}

.deco-dot-green-bottom {
  bottom: clamp(112px, 11vh, 138px);
  right: clamp(56px, 4vw, 82px);
}

/* Plus sign decorations */
.scene-plus {
  font-family: var(--font-family);
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-secondary);
  opacity: 0.7;
}

.scene-plus--left {
  top: clamp(304px, 31vh, 356px);
  left: clamp(20px, 1.6vw, 34px);
}

.scene-plus--bottom-right {
  bottom: clamp(124px, 13vh, 148px);
  right: clamp(16px, 1.2vw, 24px);
  color: var(--color-deco-green);
}

/* Squiggle decoration */
.scene-squiggle {
  width: clamp(44px, 4vw, 62px);
  height: clamp(18px, 1.6vw, 24px);
  bottom: clamp(46px, 5vh, 64px);
  left: clamp(278px, 21vw, 356px);
  border-bottom: 8px solid var(--color-deco-green);
  border-radius: var(--radius-full);
  transform: rotate(8deg);
  opacity: 0.9;
}

/* ─── Game area — white ovoid card ─── */
.game-area {
  position: relative;
  width: min(92vw, 1450px);
  max-width: 1300px;
  height: 78%;
  max-height: 720px;
  padding: 42px 12px 14px;
  background: var(--color-bg-card);
  border-radius: 140px;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--color-primary) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  z-index: 1;
  margin-top: 114px;
}

/* ─── Top bar — grid with back, header, home ─── */
.top-bar,
.btn-listen-wrapper {
  position: absolute;
  z-index: 3;
}

.top-bar {
  top: clamp(10px, 1.4vh, 18px);
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 116px;
  align-items: start;
  gap: clamp(16px, 1.8vw, 28px);
  pointer-events: none;
}

.nav-bar,
.nav-home,
.activity-header {
  pointer-events: auto;
}

.nav-bar {
  justify-self: start;
}

.nav-home {
  justify-self: end;
}

/* ─── Navigation buttons — PNG-based, 126px ─── */
.btn-back,
.btn-home {
  width: 126px;
  height: 126px;
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  transition: transform var(--duration-fast) var(--easing-smooth);
}

.btn-home {
  display: block;
}

.btn-back:hover,
.btn-home:hover {
  transform: scale(1.04);
}

.btn-back:active,
.btn-home:active {
  transform: scale(0.97);
}

.btn-back img,
.btn-home img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1;
  filter: none;
  transform-origin: center;
}

/* ─── Activity header — PNG background with title ─── */
.activity-header {
  grid-column: 2;
  width: min(100%, clamp(580px, 44vw, 660px));
  height: 126px;
  padding: 0 56px;
  background: url('../assets/ui/Header_Bg.webp') center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  justify-self: center;
  align-self: start;
}

.activity-header .activity-title {
  margin: 0;
  font-size: 4rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-text-on-primary);
  letter-spacing: 0.01em;
  transform: scale(1.04);
}

/* ─── Instruction area ─── */
.instruction-area {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 26px 0 22px;
}

.instruction-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 108px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.instruction-bubble .instruction-text {
  margin: 0;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  color: var(--color-text);
  text-align: center;
}

/* ─── Speaker button — 108px purple circle ─── */
.btn-speaker {
  width: 108px;
  height: 108px;
  padding: 0;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--easing-smooth);
}

.btn-speaker:hover {
  transform: scale(1.04);
}

.btn-speaker svg {
  width: 48%;
  height: 48%;
}

/* Pulsing animation during audio playback */
.btn-speaker.playing,
.btn-listen.playing {
  animation: speaker-pulse 1s ease-in-out infinite;
}

@keyframes speaker-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* ─── Main content area ─── */
.content-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 0 8px;
  position: relative;
  z-index: 1;
}

/* ─── Answer options area ─── */
.answer-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  padding-bottom: var(--space-lg);
}

/* ─── Option cards — floating shadow style ─── */
.option-card {
  min-width: 200px;
  min-height: 200px;
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--color-primary) 10%, transparent));
  transition: transform var(--duration-fast) var(--easing-smooth),
              filter var(--duration-fast) var(--easing-smooth);
}

.option-card:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 16px 24px color-mix(in srgb, var(--color-primary) 16%, transparent));
}

.option-card:active {
  transform: scale(0.97);
}

.option-card.selected {
  box-shadow: 0 0 0 3px var(--color-primary);
}

.option-card img {
  max-width: 100%;
  object-fit: contain;
}

/* ─── Phoneme/letter option cards (smaller, text-based) ─── */
.phoneme-card {
  min-width: 120px;
  min-height: 120px;
  padding: var(--space-lg);
  background: var(--color-bg-light);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-primary) 10%, transparent));
  transition: transform var(--duration-fast) var(--easing-smooth),
              filter var(--duration-fast) var(--easing-smooth);
}

.phoneme-card:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--color-primary) 16%, transparent));
}

.phoneme-card:active {
  transform: scale(0.95);
}

/* ─── "Dinle" (Listen) button — PNG background ─── */
.btn-listen-wrapper {
  right: 24px;
  bottom: 24px;
}

.btn-listen,
.btn-play-again {
  padding: 0;
  border: none;
  background: url('../assets/ui/Button_Bg.webp') center / 100% 100% no-repeat;
  color: var(--color-text-on-primary);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.2vw, 20px);
  transition: transform var(--duration-fast) var(--easing-smooth);
}

.btn-listen {
  width: 382px;
  aspect-ratio: 347 / 166;
  font-size: 3.35rem;
  font-weight: var(--font-weight-bold);
}

.btn-play-again {
  width: clamp(194px, 18vw, 252px);
  aspect-ratio: 347 / 166;
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  font-weight: var(--font-weight-bold);
}

.btn-listen:hover,
.btn-play-again:hover {
  transform: scale(1.03);
}

.btn-listen:active,
.btn-play-again:active {
  transform: scale(0.98);
}

.btn-listen svg,
.btn-play-again svg {
  width: clamp(30px, 3vw, 70px);
  height: clamp(30px, 3vw, 70px);
}

/* ─── Round indicator dots ─── */
.round-dots {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: var(--space-sm);
}

.round-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-deco-purple);
  opacity: 0.4;
  transition: opacity var(--duration-fast), background var(--duration-fast);
}

.round-dot.active {
  opacity: 1;
  background: var(--color-primary);
}

/* ─── Feedback overlay ─── */
.feedback-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-bg-light) 82%, var(--color-bg-card));
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.feedback-overlay.hidden {
  display: none;
}

/* ─── Feedback panel — white card inside overlay ─── */
.feedback-panel {
  width: min(68%, 560px);
  min-height: 250px;
  padding: clamp(24px, 3vh, 36px);
  border-radius: calc(var(--radius-xl) + var(--space-sm));
  background: var(--color-bg-card);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.6vh, 30px);
}

/* Star display */
.star-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.2vw, 18px);
}

/* ─── Utility classes ─── */
.hidden {
  display: none !important;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────────────
   Portrait layout — applies to ALL portrait viewports (phones AND tablets).
   The orientation guard in viewport-scale.js shows a "rotate" prompt on
   touch devices in landscape, so this CSS effectively defines the entire
   touch-device experience.

   The desktop layout uses a 16:9 white card with absolute decorations.
   Portrait collapses the card to a vertical full-screen flow, hides most
   decorations to reduce visual noise, and sizes controls to fit.

   Tablet-portrait scale-ups (bigger buttons / fonts so iPad doesn't look
   like a tiny phone UI) live in the (orientation: portrait) and (min-width: 600px)
   block at the bottom of this file.
   ───────────────────────────────────────────────────────────────────────── */

@media (orientation: portrait) {
  .game-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Modern browsers — handles iOS browser chrome */
    padding: 0;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Hide background orbs and most scene decorations on mobile —
     they're positioned for a 16:9 card and look chaotic in portrait */
  .background-orb,
  .scene-decoration,
  .scene-plus,
  .scene-squiggle {
    display: none;
  }

  /* Game area becomes the entire viewport, no card chrome.
     padding-top is 96px to clear the fixed top-bar (~72px tall) plus
     24px breathing room — this prevents the top-bar's translucent
     backdrop-blur from covering the start of instruction text. */
  .game-area {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    max-height: none;
    margin-top: 0;
    padding: calc(env(safe-area-inset-top, 0) + 96px) 12px
             calc(env(safe-area-inset-bottom, 0) + 96px);
    border-radius: 0;
    box-shadow: none;
    background: var(--color-bg-card);
    gap: var(--space-md); /* 16px between flex rows on phone */
  }

  /* Activities with a visible question (scene-container, group-card,
     equation, etc.) need extra space above the answer cards so they
     don't visually fuse with the question. `:has(*)` matches any
     non-empty content-area; on phone the bump is gentle. */
  .game-area .content-area:has(*) + .answer-area {
    margin-top: var(--space-sm);
  }

  /* Top bar — compact, fixed at top so it doesn't scroll away */
  .top-bar {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    padding: 8px 12px;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    gap: 12px;
    background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
    backdrop-filter: blur(8px);
    z-index: 50;
  }

  /* Smaller, finger-friendly nav buttons */
  .btn-back,
  .btn-home {
    width: 56px;
    height: 56px;
  }

  /* Activity header — much smaller, no PNG background (it doesn't scale well) */
  .activity-header {
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 0 12px;
    background: none;
    gap: 0;
  }

  .activity-header .activity-title {
    font-size: 1.5rem;
    transform: none;
    color: var(--color-primary);
    text-align: center;
  }

  /* Instruction area — tighter */
  .instruction-area {
    padding: 16px 0 12px;
  }

  .instruction-bubble {
    gap: 14px;
    min-height: 0;
    padding: 0 8px;
  }

  .instruction-bubble .instruction-text {
    font-size: var(--font-size-md);
  }

  .btn-speaker {
    width: 64px;
    height: 64px;
  }

  /* Content area — flexible, wraps */
  .content-area {
    padding: 8px 0;
  }

  /* Answer area — wraps by default for portrait */
  .answer-area {
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-sm) var(--space-md);
  }

  /* Option cards — smaller minimums, allow shrinking */
  .option-card {
    min-width: 120px;
    min-height: 120px;
    max-width: 45vw;
    padding: var(--space-md);
  }

  .phoneme-card {
    min-width: 80px;
    min-height: 80px;
    font-size: var(--font-size-xl);
    padding: var(--space-md);
  }

  /* "Dinle" / Listen button — fixed at bottom, full width */
  .btn-listen-wrapper {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 12px);
    left: 12px;
    z-index: 50;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .btn-listen,
  .btn-play-again {
    pointer-events: auto;
    background: var(--color-correct);
    color: var(--color-text);
    width: auto;
    aspect-ratio: auto;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 18%, transparent);
    gap: 10px;
  }

  .btn-listen {
    font-size: 1.4rem;
    min-width: 180px;
  }

  .btn-play-again {
    font-size: 1.2rem;
  }

  .btn-listen svg,
  .btn-play-again svg {
    width: 28px;
    height: 28px;
  }

  /* Round dots — smaller and lifted above the listen button */
  .round-dots {
    bottom: calc(env(safe-area-inset-bottom, 0) + 78px);
  }

  /* Feedback panel — fits portrait width */
  .feedback-panel {
    width: min(88%, 420px);
    min-height: 200px;
    padding: var(--space-lg);
  }

  .star-display {
    gap: 8px;
  }
}

/* Very narrow phones (≤ 480px portrait) — even tighter */
@media (orientation: portrait) and (max-width: 480px) {
  .game-area {
    padding-top: calc(env(safe-area-inset-top, 0) + 92px);
  }

  .activity-header .activity-title {
    font-size: 1.25rem;
  }

  .instruction-bubble .instruction-text {
    font-size: var(--font-size-sm);
  }

  .option-card {
    min-width: 96px;
    min-height: 96px;
    max-width: 44vw;
  }

  .btn-listen {
    font-size: 1.2rem;
    min-width: 0;
    padding: 12px 22px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Tablet portrait (≥ 600px wide, portrait orientation) — scale UP from
   the phone-sized defaults. iPad mini portrait is 768×1024, so the phone
   sizes look unnecessarily small. Bigger buttons, bigger fonts, bigger
   instruction text, bigger Listen pill, bigger gap between rows so the
   answer cards don't visually fuse with the question above.
   ───────────────────────────────────────────────────────────────────────── */
@media (orientation: portrait) and (min-width: 600px) {
  /* More breathing room above the top-bar AND between flex rows. */
  .game-area {
    padding: calc(env(safe-area-inset-top, 0) + 116px) 24px
             calc(env(safe-area-inset-bottom, 0) + 120px);
    gap: var(--space-xl); /* 48px between instruction/content/answer rows */
  }

  /* When the content-area renders any visual question (scene image,
     equation, group-cards, pattern, etc.) push the answer-area down with
     extra margin-top on top of the .game-area gap so cards don't visually
     fuse with the question.

     `:has(*)` matches any non-empty content-area. Combined with the 48px
     game-area gap, this gives ~80px breathing room before the first answer
     card on tablet — enough for the dropshadow of question elements to
     dissipate before the cards begin. */
  .game-area .content-area:has(*) + .answer-area {
    margin-top: var(--space-md);
  }

  /* Top-bar buttons sized for tablet thumbs */
  .top-bar {
    padding: 12px 20px;
    grid-template-columns: 80px minmax(0, 1fr) 80px;
    gap: 20px;
  }

  .btn-back,
  .btn-home {
    width: 80px;
    height: 80px;
  }

  /* Activity header — tablet uses a real PNG-bg badge again, with bigger title */
  .activity-header {
    height: 76px;
    min-height: 76px;
    padding: 0 28px;
  }

  .activity-header .activity-title {
    font-size: 2.2rem;
  }

  /* Instruction text bigger */
  .instruction-area {
    padding: 24px 0 16px;
  }

  .instruction-bubble {
    gap: 20px;
  }

  .instruction-bubble .instruction-text {
    font-size: 1.8rem;
  }

  .btn-speaker {
    width: 84px;
    height: 84px;
  }

  /* Bigger Listen pill */
  .btn-listen {
    font-size: 1.8rem;
    min-width: 240px;
    padding: 18px 36px;
  }

  .btn-play-again {
    font-size: 1.5rem;
    padding: 16px 32px;
  }

  .btn-listen svg,
  .btn-play-again svg {
    width: 36px;
    height: 36px;
  }

  /* Round dots higher to clear the bigger Listen pill */
  .round-dots {
    bottom: calc(env(safe-area-inset-bottom, 0) + 96px);
  }

  /* Feedback panel scales up */
  .feedback-panel {
    width: min(72%, 540px);
    min-height: 280px;
  }
}