/* Activity layout overrides for removing the center speaker button
   and pulling answer panels back toward the middle of the white card. */

.game-area.layout-compact-audio .instruction-area {
  padding: clamp(8px, 1.1vh, 14px) 0 clamp(4px, 0.8vh, 10px);
}

.game-area.layout-compact-audio .instruction-bubble {
  min-height: 0;
  gap: 0;
}

.game-area.layout-compact-audio .instruction-bubble:empty {
  display: none;
}

.game-area.layout-compact-audio .instruction-area:has(.instruction-bubble:empty) {
  padding: 0;
}

.game-area.layout-compact-audio .content-area {
  padding-top: clamp(8px, 1vh, 14px);
}

.game-area.layout-centered-options > .content-area {
  flex: 0 1 auto;
  min-height: 0;
  padding-bottom: 0;
}

.game-area.layout-centered-options > .answer-area {
  flex: 1 1 auto;
  min-height: 0;
  align-content: center;
  padding-top: 0;
  padding-bottom: var(--space-md);
}

/* ─── Subtle background decoration animations ─── */

/* Gentle floating — slow vertical drift */
@keyframes deco-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Gentle floating with rotation preserved */
@keyframes deco-float-rotate-neg16 {
  0%, 100% { transform: rotate(-16deg) translateY(0); }
  50% { transform: rotate(-16deg) translateY(-11px); }
}

@keyframes deco-float-rotate-14 {
  0%, 100% { transform: rotate(14deg) translateY(0); }
  50% { transform: rotate(14deg) translateY(-11px); }
}

@keyframes deco-float-rotate-neg18 {
  0%, 100% { transform: rotate(-18deg) translateY(0); }
  50% { transform: rotate(-18deg) translateY(-11px); }
}

@keyframes deco-float-rotate-neg {
  0%, 100% { transform: rotate(-18deg) translateY(0); }
  50% { transform: rotate(-18deg) translateY(-10px); }
}

@keyframes deco-float-rotate-12 {
  0%, 100% { transform: rotate(12deg) translateY(0); }
  50% { transform: rotate(12deg) translateY(-10px); }
}

@keyframes deco-float-rotate-16 {
  0%, 100% { transform: rotate(16deg) translateY(0); }
  50% { transform: rotate(16deg) translateY(-10px); }
}

@keyframes deco-float-rotate-neg14 {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  50% { transform: rotate(-14deg) translateY(-10px); }
}

/* Stars — gentle float */
.deco-star-top-left    { animation: deco-float 6s ease-in-out infinite; }
.deco-pink-star        { animation: deco-float 7s ease-in-out infinite 0.5s; }
.deco-blue-star-right  { animation: deco-float 8s ease-in-out infinite 1s; }
.deco-green-star       { animation: deco-float 7.5s ease-in-out infinite 1.5s; }

/* Happy stars — float with their existing rotation */
.deco-happy-star                  { animation: deco-float-rotate-neg16 7s ease-in-out infinite 0.3s; }
.deco-happy-star.deco-happy-star--medium { animation: deco-float-rotate-14 8s ease-in-out infinite 1s; }
.deco-happy-star.deco-happy-star--small  { animation: deco-float-rotate-neg18 6.5s ease-in-out infinite 0.7s; }

/* Notes — gentle float with their rotation */
.deco-note-right       { animation: deco-float 7s ease-in-out infinite 0.8s; }
.deco-note-left        { animation: deco-float-rotate-neg 8s ease-in-out infinite 0.4s; }
.deco-note-left-bottom { animation: deco-float-rotate-16 7.5s ease-in-out infinite 1.2s; }

/* Mid stars — float with rotation */
.deco-star-left-mid    { animation: deco-float-rotate-12 7s ease-in-out infinite 0.6s; }
.deco-star-left-bottom { animation: deco-float-rotate-neg14 8s ease-in-out infinite 1.1s; }

/* Dots — very subtle float */
.deco-dot-pink-top,
.deco-dot-yellow-top,
.deco-dot-blue-top,
.deco-dot-orange-top,
.deco-dot-pink-bottom,
.deco-dot-green-bottom,
.deco-dot-yellow-left-mid { animation: deco-float 9s ease-in-out infinite 0.5s; }

/* Plus signs — subtle float */
.scene-plus { animation: deco-float 8s ease-in-out infinite 1.3s; }

/* Squiggle — subtle float */
.scene-squiggle { animation: deco-float 9s ease-in-out infinite 0.9s; }

/* ─────────────────────────────────────────────────────────────────────────
   Portrait overrides — phones AND tablets in portrait orientation.

   Strategy: apply the "sayi-eslestir pattern" universally — a flex row
   where each direct child of .answer-area gets `flex: 1 1 0` (equal share)
   and `min-width: 0` (allowed to shrink). Activity-level fixed widths
   (`width: 280px`, `min-width: 200px`, etc.) are overridden by higher
   selector specificity (`.game-area .answer-area > *` is 0,2,1 — beats
   activity's `.option-card` 0,1,0 — no !important needed).

   This file loads LAST in every activity index.html.

   Universal rule covers: option-card, combination-card, answer-btn,
   number-card, item-card, slot, group-card, etc. — any direct child.
   Special cases (cok-mu-az-mi, sirala, ilk-ses-nedir, sozcuk-olustur,
   ayni-mi-farkli-mi-matematik) get extra rules below.

   Tablet-portrait scale-ups (bigger UI elements for iPad-class screens)
   live in the (orientation: portrait) and (min-width: 600px) block at
   the bottom of this file.
   ───────────────────────────────────────────────────────────────────────── */

@media (orientation: portrait) {
  /* === Universal: every .answer-area is a wrapping flex row === */
  .game-area .answer-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-sm);
    justify-content: center;
    align-items: stretch;
  }

  /* grupla uses a 2×2 grid of .item-card. Preserve that grid intent so 4
     cards don't squish into one row of 4. (:has() iOS Safari 15.4+) */
  .game-area .answer-area:has(> .item-card) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Universal: every direct child of .answer-area shares space equally.
     Cards are square by default; activities with non-square content
     (combination-card text rectangles) override aspect-ratio below. */
  .game-area .answer-area > * {
    flex: 1 1 0;
    min-width: 0;
    max-width: 46vw;
    width: auto;
    height: auto;
    aspect-ratio: 1;
    min-height: 100px;
    padding: var(--space-sm);
    box-sizing: border-box;
  }

  /* Grid items (inside grupla's 2×2) should fill their cell, not flex */
  .game-area .answer-area > .item-card {
    flex: initial;
    width: 100%;
    max-width: 100%;
  }

  /* Universal: inner images shrink to fit their flex-sized parent.
     Defeats fixed `width: 220px` declarations on .card-image, etc. */
  .game-area .answer-area img,
  .game-area .answer-area .card-image,
  .game-area .answer-area .option-image,
  .game-area .answer-area .answer-btn-icon,
  .game-area .answer-area .number-card-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }

  /* ses-avcisi — `.option-card__frame` is an absolute-positioned img that
     paints the card's colored border (the `.option-card` itself is
     transparent). The universal rule above collapses it to its natural
     size and pushes it to inset:0's top-left corner, producing an
     offset-looking frame. Restore its full-cover sizing here. Higher
     specificity (3 classes = 0,3,0) beats the universal (0,2,1). */
  .game-area .answer-area .option-card__frame {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  /* === Activity-specific structural exceptions === */

  /* sozcuk-olustur — combination-card may contain wide labels/images; allow
     non-square aspect so 2 cards per row don't squish vertically. */
  .game-area .combination-card {
    aspect-ratio: auto;
    min-height: 110px;
  }

  /* sozcuk-olustur — fixed inner image width: 220px → flexible */
  .game-area .combination-card .card-image,
  .game-area .card-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* ilk-ses-nedir — .option-card wraps a .phoneme-tile { min-width: 220px }
     plus an absolute-positioned .option-replay-button at top. The parent's
     fixed aspect-ratio (1/1.4) is fine; constrain the inner tile + button. */
  .game-area .option-card {
    /* the activity sets aspect-ratio: 1/1.4 — keep that for ilk-ses-nedir
       BUT the universal rule already forced aspect-ratio: 1. Reset here so
       this activity's tall card stays tall. Other activities use option-card
       with implicit square layout so aspect-ratio: 1 from above stays. */
  }

  .game-area .phoneme-tile {
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    aspect-ratio: 1;
    padding: var(--space-sm);
  }

  .game-area .phoneme-icon {
    width: 56px;
    height: 56px;
  }

  .game-area .phoneme-icon-svg {
    width: 32px;
    height: 32px;
  }

  .game-area .option-replay-button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .game-area .option-replay-icon svg {
    width: 22px;
    height: 22px;
  }

  /* === cok-mu-az-mi: .answer-area is display:none, the 2 group-cards live
        in .content-area instead. Use :has() to scope so we don't break other
        activities' content-area layouts. (iOS Safari 15.4+, supported on all
        modern phones.) === */
  .game-area .content-area:has(> .group-card) {
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-sm);
    justify-content: center;
    align-items: center;
  }

  .game-area .content-area > .group-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 46vw;
    width: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    padding: var(--space-sm);
  }

  /* === sirala: drag-source row (.sort-objects) and drop slots (.answer-area .slot)
        Both need to fit. Sort items can be smaller (3 across), slots can be 3 across.

        Portrait reorder: SLOTS at TOP, SOURCES at BOTTOM (per UX request —
        easier reach from thumb on phones). The .game-area is `display: flex;
        flex-direction: column`, so setting answer-area's order to -1 floats
        it above the content-area in the column stack. Scoped via :has(.slot)
        so other activities are unaffected. */
  .game-area .answer-area:has(.slot) {
    order: -1;
  }

  .game-area .sort-objects {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm);
    min-height: 0;
    justify-content: center;
  }

  .game-area .sort-objects > .sort-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 30vw;
    aspect-ratio: 1;
    padding: var(--space-xs);
  }

  .game-area .sort-objects .sort-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }

  /* === ayni-mi-farkli-mi-matematik: scene image in content-area is huge.
        Cap content images so they don't dominate vertical space and push
        answer buttons off-screen. === */
  .game-area .content-area > img,
  .game-area .content-area .scene-image,
  .game-area .content-area .question-scene img,
  .game-area .content-area .target-image {
    max-width: 90vw;
    max-height: 30vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* === Generic safety net for content-area children that contain images === */
  .game-area .content-area img {
    max-width: 100%;
    max-height: 30vh;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PER-ACTIVITY LAYOUT MODES (mobile only, ≤600px)

     Each activity adds ONE of these classes to its .game-area to opt into
     a specific arrangement of answer options on phones. Selectors here use
     `.game-area.layout-X` (specificity 0,2,0 with the > * descendant adds
     to 0,3,1) which beats the universal `.game-area .answer-area > *`
     (0,2,1) — so layout-X wins where present, falls through to universal
     where absent.

       .layout-d       — Vertical stack (one card per row)
       .layout-d-wide  — Same as .layout-d but cards are wide+thin
                          (hece-treni's horizontal trains)
       .layout-k       — Karma 2+1 (two cards on top row, one centered
                          below). Works for 3-option activities; 4 cards
                          would naturally form 2+2.
     ───────────────────────────────────────────────────────────────────── */

  /* === D = vertical stack === */
  .game-area.layout-d .answer-area {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-md);
  }

  .game-area.layout-d .answer-area > * {
    flex: 0 0 auto;
    width: 90%;
    max-width: min(320px, 80vw);
    aspect-ratio: 1;
    max-height: 26vh;
  }

  /* cok-mu-az-mi: content-area variant of vertical stack */
  .game-area.layout-d .content-area:has(> .group-card) {
    flex-direction: column;
    align-items: center;
  }

  .game-area.layout-d .content-area > .group-card {
    width: 90%;
    max-width: min(320px, 80vw);
    aspect-ratio: 1;
    max-height: 28vh;
    flex: 0 0 auto;
    /* The activity uses `flex-wrap: wrap` so 4 apples become 2 rows.
       Without `align-content: center` the wrapped rows pile at the top
       of the card. */
    align-content: center;
  }

  /* === D-wide = vertical stack with wide+thin rectangles (hece-treni) ===
     Hece-treni uses .train-tracks/.train-track, not .answer-area. Apply
     direct overrides to those, plus fall through to .answer-area children
     in case the activity ever uses option-card too. */
  .game-area.layout-d-wide .train-tracks {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
    width: 100%;
    padding: 0 var(--space-sm);
  }

  .game-area.layout-d-wide .train-track {
    width: 100%;
    max-width: 95vw;
    min-height: 64px;
    max-height: 18vh;
    padding: var(--space-xs) var(--space-md);
  }

  .game-area.layout-d-wide .train-track img {
    max-height: 16vh;
    width: auto;
    height: auto;
  }

  /* If hece-treni ever migrates to .answer-area, override there too */
  .game-area.layout-d-wide .answer-area {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-sm);
  }

  .game-area.layout-d-wide .answer-area > * {
    width: 95%;
    max-width: 95vw;
    aspect-ratio: 4 / 1;
    max-height: 90px;
  }

  /* === K = Karma 2+1 (2 cards on top, 1 centered below) ===
     `flex: 0 0 calc(50% - 8px)` makes each card exactly half-width minus
     half-gap (gap is 16px). 3 cards: first 2 share row 1, the 3rd wraps
     to row 2 and is centered by .answer-area's `justify-content: center`. */
  .game-area.layout-k .answer-area {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-md);
  }

  .game-area.layout-k .answer-area > * {
    flex: 0 0 calc(50% - var(--space-sm));
    max-width: calc(50% - var(--space-sm));
    aspect-ratio: 1;
    max-height: 30vh;
  }

  /* For ilk-ses-nedir + K: keep its taller aspect ratio (replay button on top) */
  .game-area.layout-k .answer-area > .option-card:has(> .phoneme-tile) {
    aspect-ratio: 1 / 1.2;
    max-height: 32vh;
  }

  /* For sozcuk-olustur + K: combination cards are wider rectangles */
  .game-area.layout-k .answer-area > .combination-card {
    aspect-ratio: auto;
    min-height: 110px;
    max-height: 24vh;
  }

  /* say-ve-sec: .scene-container is 520×320 fixed which overflows phones AND
     dominates vertical space, pushing answer cards below the fold.
     Tighter caps so question + 3 K-layout cards + Listen button all fit. */
  .game-area .scene-container {
    max-width: 90vw;
    max-height: 22vh;
    padding: var(--space-sm);
    /* Tame the desktop drop-shadow on portrait so its blur doesn't bleed
       visually into the gap below and "touch" the answer cards. */
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-primary) 10%, transparent));
  }

  .game-area .scene-container .scene-image {
    max-width: 100%;
    max-height: 100%;
  }

  /* Content-area containing a visual question element gets generous bottom
     padding so cards visually clear the question. Margin-bottom on the
     question element itself fails because content-area has `align-items:
     center` — moving the child within doesn't push the answer-area below.
     Padding on the parent does. Aggressive value (xxl=64px) chosen so the
     visible white space is obvious despite white-on-white card chrome. */
  .game-area .content-area:has(> .scene-container) {
    padding: var(--space-xs) 0 var(--space-xxl);
    flex: 0 0 auto;
  }

  .game-area .content-area:has(> .question-scene) {
    padding-bottom: var(--space-xxl);
  }

  /* Same shadow tame for question-scene wrappers */
  .game-area .question-scene {
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--color-primary) 10%, transparent));
  }

  /* ─────────────────────────────────────────────────────────────────────
     PHONE FIT-TO-SCREEN FIXES — activity style.css files set fixed
     `min-width`/`min-height`/`height` (e.g. 260px group-card, 200px
     number-card, 140px answer-btn) that shove content off the portrait
     viewport on phones. These overrides cap the min/fixed sizes so the
     flex-based portrait layout can actually take effect.
     ───────────────────────────────────────────────────────────────────── */

  /* Strip min-sizes from cards so our max-height constraints can take effect.
     NOTE: we deliberately do NOT set width/height here — the layout-d and
     layout-k rules below set `width: 90%` / `flex-basis`, and `width: auto`
     from here (same specificity, earlier-in-file but overridden by them…
     except when it isn't) would collapse the buttons to text width. */
  .game-area .answer-area > .number-card,
  .game-area .answer-area > .answer-btn,
  .game-area .content-area > .group-card {
    min-width: 0;
    min-height: 0;
  }

  /* Topla's .number-card has fixed `width: 200px; height: 200px` — those
     need explicit auto so layout-k's flex-basis can control the width and
     our max-height: 18vh rule can control the height. Scoped to number-card
     only to avoid affecting answer-btn / group-card. */
  .game-area .answer-area > .number-card {
    width: auto;
    height: auto;
  }

  /* Çok mu Az mı — .group-image (the apple / fish / balloon pics inside a
     group-card) has max-height: 220px + max-width: 100% in activity CSS,
     which overflows our smaller phone-portrait card. Cap images to ~44% of
     card width (so 2 fit per row with gap) and tier the max-height by item
     count: a single row of ≤2 items gets generous height (80%), a wrapped
     2×2 grid (3+ items) gets ~42% to fit two rows stacked. */
  .game-area .content-area > .group-card .group-image {
    max-width: 44%;
    max-height: 80%;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    object-fit: contain;
  }

  .game-area .content-area > .group-card:has(> .group-image:nth-child(3)) .group-image {
    max-height: 42%;
  }

  /* ─── Hece Davulu — reorder content-area in portrait so the syllabled
        word appears BELOW the drum and ABOVE the dots, not on top of the
        instruction text. content-area is already flex-column via shared
        layout rules; we just reassign `order`. */
  .game-area .content-area > .drum-wrapper { order: 1; }
  .game-area .content-area > .word-display {
    order: 2;
    margin: var(--space-sm) 0 0;
  }
  .game-area .content-area > .syllable-counter { order: 3; }

  /* ─── Çok mu Az mı — 2 group-cards stacked vertically on phones must
        fit within the ~330px usable viewport along with the Listen pill.
        Activity's min-height: 260px was hiding the second card entirely.
        Shorten cards and drop aspect-ratio so height controls. */
  .game-area.layout-d .content-area > .group-card {
    aspect-ratio: auto;
    max-height: 22vh;
    min-height: 120px;
  }

  /* ─── Topla / Layout-K with a scene image in content-area —
        (number cards 200×200 + scene 320px tall) overflows portrait and
        clips the bottom row of answer cards under the Listen button.
        Cap both scene image and answer cards so scene + 2+1 K grid + pill
        all fit. */
  .game-area.layout-k:has(.content-area img) .content-area img,
  .game-area.layout-k:has(.content-area .scene-image) .content-area .scene-image {
    max-height: 18vh;
  }

  .game-area.layout-k .answer-area > * {
    max-height: 18vh;
    min-height: 96px;
  }

  /* ─── Aynı mı / Farklı mı (both variants) — answer-btn cards with
        aspect-ratio: 1 + max-height: 26vh become ~220px tall and two of
        them stacked dominate the screen. These are text+icon buttons
        (not image-heavy), so relax aspect-ratio and shorten height. */
  .game-area.layout-d .answer-area > .answer-btn {
    aspect-ratio: auto;
    max-height: 15vh;
    min-height: 96px;
  }

  /* ─── iOS Safari portrait "ikinci panel" artifact düzeltmesi ───
     Aktivitelerin `filter: drop-shadow(0 12px 20px ...)` değerleri 2560px
     desktop reference için boyutlandırılmış; 393px telefon viewport'unda
     orantısız büyük çıkıyor ve iOS Safari'nin drop-shadow rasterization'ı
     keskin-kenarlı "ghost panel" üretiyor. Box-shadow (yuvarlak kenarlı
     opak kartlarda drop-shadow ile görsel olarak aynı) + küçük değerlerle
     değiştir. Korumalı: .feedback-correct kendi `box-shadow: ... !important`
     değerini uyguluyor, buradaki override'ı etkilemiyor. */
  .game-area .answer-area > .option-card,
  .game-area .answer-area > .combination-card,
  .game-area .answer-area > .answer-btn,
  .game-area .answer-area > .number-card,
  .game-area .answer-area > .item-card,
  .game-area .answer-area > .sort-item,
  .game-area .answer-area > .slot,
  .game-area .content-area > .group-card,
  .game-area .content-area .sound-speaker,
  .game-area .content-area .phoneme-tile,
  .game-area .sort-objects > .sort-item {
    filter: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

  /* ses-avcisi istisnası — .option-card `background: none` + `border-radius`
     yok (görünür şekli .option-card__frame img sağlıyor). Box-shadow ise
     elementin KUTUSUNA göre çizildiği için kare bir halo oluşturuyor ve
     frame'in yuvarlak köşelerinin DIŞINDA görünüyor → "ikinci panel"
     izlenimi. drop-shadow alpha'yı takip eder, frame'in yuvarlak şekline
     uyar. Küçük değerli drop-shadow burada iOS için güvenli (12px değil 4px
     offset). */
  .game-area .answer-area > .option-card {
    box-shadow: none;
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--color-primary) 12%, transparent));
  }
}

/* Tablet portrait — moderate breathing room (NOT aggressive: aggressive
   padding pushes the answer-area + Listen pill off-screen on iPad portrait.
   Use modest 32px and rely on shrinking the K cards instead, see below). */
@media (orientation: portrait) and (min-width: 600px) {
  .game-area .content-area:has(> .scene-container) {
    padding: var(--space-md) 0 var(--space-lg);
  }

  .game-area .content-area:has(> .question-scene) {
    padding-bottom: var(--space-lg);
  }

  /* === TABLET + K layout + visual question (img or svg in content-area):
        shrink the answer cards so they don't dominate vertical space and
        push everything below the fold. Cards stay centered automatically
        via .answer-area's `justify-content: center`. ===

        Without this, K cards on tablet are 50% width × 50% height (huge),
        making 3 cards (2 top + 1 below) consume ~600-700px vertical.
        With this, cards become ~38% width, freeing ~150-200px vertical
        so the question + 3 cards + Listen pill all fit in 1024 tall. */
  .game-area.layout-k:has(.content-area img) .answer-area > *,
  .game-area.layout-k:has(.content-area svg) .answer-area > * {
    flex: 0 0 calc(38% - var(--space-sm));
    max-width: calc(38% - var(--space-sm));
    min-height: 140px;
    max-height: 22vh;
  }

  /* Same shrink for ilk-ses-nedir variant on tablet (replay-button + tile) */
  .game-area.layout-k:has(.content-area img) .answer-area > .option-card:has(> .phoneme-tile),
  .game-area.layout-k:has(.content-area svg) .answer-area > .option-card:has(> .phoneme-tile) {
    aspect-ratio: 1 / 1.2;
    max-height: 26vh;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Tablet portrait (≥ 600px portrait) — scale UP card sizes from phone
   defaults. iPad mini portrait gives plenty of room for bigger cards.
   ───────────────────────────────────────────────────────────────────────── */
@media (orientation: portrait) and (min-width: 600px) {
  /* Universal: bump card max-width allowance and min-height */
  .game-area .answer-area > * {
    max-width: 40vw;
    min-height: 160px;
    padding: var(--space-md);
  }

  /* D = vertical stack on tablet — bigger cards, more vertical room */
  .game-area.layout-d .answer-area > * {
    max-width: min(420px, 60vw);
    max-height: 30vh;
  }

  .game-area.layout-d .content-area > .group-card {
    max-width: min(420px, 60vw);
    max-height: 32vh;
  }

  /* D-wide (hece-treni) on tablet — wider thin cards */
  .game-area.layout-d-wide .train-track {
    max-width: 80vw;
    max-height: 20vh;
  }

  /* K layout cards naturally scale (50% width) — just bump min-height */
  .game-area.layout-k .answer-area > * {
    min-height: 200px;
    max-height: 32vh;
  }

  /* Sirala source items can be a bit larger too */
  .game-area .sort-objects > .sort-item {
    max-width: 28vw;
  }

  /* Scene image (say-ve-sec) gets more vertical room on tablet */
  .game-area .scene-container {
    max-width: 80vw;
    max-height: 26vh;
  }

  /* ilk-ses-nedir replay button + phoneme icon scaled up */
  .game-area .option-replay-button {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }

  .game-area .phoneme-icon {
    width: 80px;
    height: 80px;
  }

  .game-area .phoneme-icon-svg {
    width: 44px;
    height: 44px;
  }
}