/* Permainan (Peringkat 3): kerangka sesi + Dengar-Tap, Padan Kad, Ulang.
   Semua saiz dalam cqmin (sisi pendek kawasan main) supaya berskala pada semua skrin. */

.game {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2cqmin;
  padding: 3cqmin 3.5cqmin 3.5cqmin;
  background: radial-gradient(ellipse at 50% 0%, #FFFFFF 0%, var(--c-bg) 70%);
}

/* ---------- Kepala: Lulu, arahan, butang dengar, titik kemajuan ---------- */
.game__head { display: flex; align-items: center; gap: 2.5cqmin; min-height: 0; }
.game__lulu { width: 13cqmin; flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-bounce); }
.game__lulu.is-bounce { transform: translateY(-2cqmin) scale(1.06); }
.game__say { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1cqmin; }
.game__instr {
  font-size: clamp(0.95rem, 4.2cqmin, 1.9rem);
  font-weight: 900; line-height: 1.2;
}
.game__dots { display: flex; gap: 1.2cqmin; flex-wrap: wrap; }
.game__dot { width: 2.6cqmin; height: 2.6cqmin; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--c-line); transition: background var(--dur-base), transform var(--dur-base) var(--ease-bounce); }
.game__dot.is-done { background: var(--c-success); }
.game__dot.is-now { background: var(--c-accent); transform: scale(1.3); }

.speak-btn {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: max(var(--tap-min), 14cqmin); height: max(var(--tap-min), 14cqmin);
  border-radius: 50%;
  background: var(--c-primary); color: #fff;
  box-shadow: 0 1cqmin 0 var(--c-primary-dark);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.speak-btn svg { width: 55%; height: 55%; }
.speak-btn:active { transform: translateY(0.8cqmin); box-shadow: 0 0.2cqmin 0 var(--c-primary-dark); }
.speak-btn.is-playing { animation: speak-pulse 0.9s ease-in-out infinite; }
@keyframes speak-pulse { 0%,100% { box-shadow: 0 1cqmin 0 var(--c-primary-dark), 0 0 0 0 rgba(30,140,138,.45); } 50% { box-shadow: 0 1cqmin 0 var(--c-primary-dark), 0 0 0 3cqmin rgba(30,140,138,0); } }

.game__body { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
.game__body > * { flex: 1 1 auto; align-self: stretch; }

/* ---------- Kad jawapan (umum) ---------- */
.gcard {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: var(--c-surface);
  border-radius: 4cqmin;
  border: 0.9cqmin solid transparent;
  box-shadow: 0 1.2cqmin 0 var(--c-line);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-base), filter var(--dur-base);
  touch-action: manipulation;
}
.gcard:active:not(:disabled) { transform: translateY(1cqmin); box-shadow: 0 0.2cqmin 0 var(--c-line); }
@media (hover: hover) { .gcard:hover:not(:disabled) { border-color: var(--c-primary-soft); } }
.gcard img { width: 72%; height: 72%; object-fit: contain; pointer-events: none; }
.gcard .ar { pointer-events: none; }
.gcard__key { position: absolute; top: 1.2cqmin; left: 1.6cqmin; font-size: 2.6cqmin; color: var(--c-ink-soft); font-weight: 900; }
@media (hover: none) { .gcard__key { display: none; } }

.gcard.is-correct { border-color: var(--c-success); background: #EAF7EA; box-shadow: 0 1.2cqmin 0 #BFE3C0; animation: g-pop var(--dur-slow) var(--ease-bounce); }
.gcard.is-wrong { animation: g-shake 0.45s ease-in-out; }
.gcard.is-out { opacity: 0.35; filter: grayscale(0.8); }
.gcard.is-hint { animation: g-hint 1.1s ease-in-out infinite; border-color: var(--c-accent); }
.gcard.is-selected { border-color: var(--c-primary); transform: translateY(-0.8cqmin); box-shadow: 0 2cqmin 0 var(--c-primary-soft); }
.gcard.is-matched { border-color: var(--c-success); background: #EAF7EA; box-shadow: none; cursor: default; }
.gcard:disabled { cursor: default; }

@keyframes g-pop { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes g-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-2cqmin) rotate(-2deg); } 40% { transform: translateX(2cqmin) rotate(2deg); } 60% { transform: translateX(-1.2cqmin); } 80% { transform: translateX(1.2cqmin); } }
@keyframes g-hint { 0%,100% { transform: scale(1); box-shadow: 0 1.2cqmin 0 var(--c-line), 0 0 0 0 rgba(255,200,69,.8); } 50% { transform: scale(1.05); box-shadow: 0 1.2cqmin 0 var(--c-line), 0 0 0 3cqmin rgba(255,200,69,0); } }

/* ---------- Dengar-Tap ---------- */
.lt { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 3cqmin; width: 100%; height: 100%; }
.lt .gcard { flex: 0 0 auto; width: var(--lt-size); height: var(--lt-size); }
.lt--2 { --lt-size: min(46cqmin, 40cqw); }
.lt--3 { --lt-size: min(40cqmin, 28cqw); }
.lt--4 { --lt-size: min(34cqmin, 21cqw); }
@container stage (orientation: portrait) {
  .lt--2 { --lt-size: min(40cqh, 70cqw); flex-direction: column; }
  .lt--3, .lt--4 { --lt-size: min(28cqh, 42cqw); }
}
.lt .gcard .ar { font-size: calc(var(--lt-size) * 0.5); line-height: 1.4; color: var(--c-ink); }

/* ---------- Padan Kad ---------- */
.mc { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 3cqmin 6cqmin; width: 100%; height: 100%; justify-items: center; }
.mc__col { display: flex; flex-direction: column; gap: 2.4cqmin; width: 100%; height: 100%; min-height: 0; justify-content: center; align-items: center; }
.mc .gcard { width: min(100%, 60cqmin); flex: 1 1 0; max-height: 26cqmin; min-height: 0; flex-direction: row; gap: 2cqmin; }
.mc .gcard img { width: auto; height: 84%; max-width: 90%; }
.mc .gcard .ar { font-size: min(9cqmin, 14cqw); line-height: 1.5; }
.mc__word .ar { color: var(--c-ink); }
@container stage (orientation: portrait) {
  .mc { gap: 3cqmin 4cqmin; }
  .mc .gcard { max-height: 18cqh; }
  .mc .gcard .ar { font-size: min(10cqw, 7cqh); }
}

/* ---------- Ulang ---------- */
.rp { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqmin; width: 100%; height: 100%; align-items: center; }
@container stage (orientation: portrait) { .rp { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; } }
.rp__model { display: flex; flex-direction: column; align-items: center; gap: 2cqmin; }
.rp__pic { width: 38cqmin; height: 38cqmin; display: grid; place-items: center; background: var(--c-surface); border-radius: 5cqmin; box-shadow: 0 1.2cqmin 0 var(--c-line); }
.rp__pic img { width: 76%; height: 76%; }
.rp__pic .ar { font-size: 22cqmin; line-height: 1.4; }
.rp__word { font-size: 10cqmin; line-height: 1.5; text-align: center; }
.rp__word--sent { font-size: 8cqmin; }
.rp__actions { display: flex; flex-direction: column; align-items: center; gap: 3cqmin; }
.mic-btn {
  position: relative;
  display: grid; place-items: center;
  width: max(88px, 24cqmin); height: max(88px, 24cqmin);
  border-radius: 50%;
  background: var(--c-action); color: #fff;
  box-shadow: 0 1.4cqmin 0 var(--c-action-dark);
  transition: transform var(--dur-fast);
}
.mic-btn svg { width: 46%; height: 46%; }
.mic-btn:active { transform: translateY(1cqmin); }
.mic-btn.is-rec { background: #E53950; animation: rec 1s ease-in-out infinite; }
@keyframes rec { 0%,100% { box-shadow: 0 1.4cqmin 0 var(--c-action-dark), 0 0 0 0 rgba(229,57,80,.5); } 50% { box-shadow: 0 1.4cqmin 0 var(--c-action-dark), 0 0 0 4cqmin rgba(229,57,80,0); } }
.mic-level { position: absolute; inset: -1.6cqmin; border-radius: 50%; border: 1cqmin solid var(--c-accent); transform: scale(var(--lvl, 1)); opacity: 0.8; pointer-events: none; transition: transform 80ms linear; }
.rp__label { font-size: clamp(0.85rem, 3.2cqmin, 1.3rem); font-weight: 900; color: var(--c-ink-soft); text-align: center; }
.rp__row { display: flex; gap: 2cqmin; flex-wrap: wrap; justify-content: center; }
.rp__row .btn { font-size: clamp(0.95rem, 3.6cqmin, 1.5rem); min-height: max(var(--tap-min), 11cqmin); }

/* ---------- Ganjaran bintang terbang ---------- */
.burst { position: absolute; pointer-events: none; z-index: 5; width: 0; height: 0; }
.burst i {
  position: absolute; left: 0; top: 0;
  width: 5cqmin; height: 5cqmin;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.6l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8z' fill='%23FFC845' stroke='%23D9A21B' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: burst 0.8s var(--ease-out) forwards;
}
@keyframes burst { from { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(160deg); opacity: 0; } }

/* ---------- Skrin tamat sesi ---------- */
.gend { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqmin; padding: 4cqmin; text-align: center; background: radial-gradient(circle at 50% 40%, #FFF6D6 0%, var(--c-bg) 70%); animation: fade-in var(--dur-base) both; }
.gend__lulu { width: 26cqmin; }
.gend__stars { display: flex; gap: 2cqmin; }
.gend__star { width: 16cqmin; height: 16cqmin; opacity: 0.25; filter: grayscale(1); transform: scale(0.6); transition: all var(--dur-slow) var(--ease-bounce); }
.gend__star.is-on { opacity: 1; filter: none; transform: scale(1); }
.gend__title { font-size: clamp(1.4rem, 7cqmin, 3rem); font-weight: 900; }
.gend__sub { font-size: clamp(1rem, 3.8cqmin, 1.6rem); color: var(--c-ink-soft); max-width: 36ch; }
.gend__actions { display: flex; gap: 2.4cqmin; flex-wrap: wrap; justify-content: center; }
.gend__actions .btn { font-size: clamp(1rem, 4cqmin, 1.6rem); min-height: max(var(--tap-min), 12cqmin); }

/* ---------- Bilik dalam rumah: status sedia ---------- */
.room.is-soon { opacity: 0.6; }
.room__ready { position: absolute; top: 10px; right: 10px; }

/* Ulang: potret — hadkan saiz ikut ketinggian supaya semua muat */
@container stage (orientation: portrait) {
  .rp { gap: 2.5cqh; }
  .rp__pic { width: min(44cqmin, 24cqh); height: min(44cqmin, 24cqh); }
  .rp__pic .ar { font-size: min(24cqmin, 14cqh); }
  .rp__word { font-size: min(11cqmin, 6.5cqh); }
  .rp__word--sent { font-size: min(8.5cqmin, 5cqh); }
  .rp__actions { gap: 1.6cqh; }
  .mic-btn { width: max(80px, min(26cqmin, 13cqh)); height: max(80px, min(26cqmin, 13cqh)); }
}

/* =========================================================
   Peringkat 4: Susun Suku Kata, Dialog, Jejak Huruf
   ========================================================= */
.ct-play__icon svg, .dl__hear svg { width: 100%; height: 100%; }

/* ---------- Susun Suku Kata ---------- */
.bs { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 3cqmin; align-items: center; justify-items: center; min-height: 0; }
.bs__top { display: flex; align-items: center; justify-content: center; gap: 4cqmin; min-height: 0; height: 100%; }
.bs__pic { height: min(100%, 30cqmin); aspect-ratio: 1; background: var(--c-surface); border-radius: 4cqmin; box-shadow: 0 1.2cqmin 0 var(--c-line); display: grid; place-items: center; }
.bs__pic img { width: 76%; height: 76%; object-fit: contain; }
.bs__model { font-size: 9cqmin; color: var(--c-ink-soft); opacity: 0.55; }
.bs__slots { display: flex; gap: 2cqmin; justify-content: center; min-height: 15cqmin; }
.bs__slot {
  min-width: max(64px, 16cqmin); height: max(64px, 15cqmin); padding: 0 1cqmin;
  border: 0.7cqmin dashed var(--c-primary-soft); border-radius: 3cqmin; background: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.bs__slot.is-over { border-color: var(--c-primary); background: #E3F4F3; }
.bs__slot.is-full { border-style: solid; border-color: transparent; background: none; padding: 0; }
.bs__slot.is-wrong .bs__tile { animation: g-shake 0.45s ease-in-out; border-color: var(--c-action); }
.bs__slot.is-locked .bs__tile { border-color: var(--c-success); background: #EAF7EA; }
.bs__slot.is-hint { animation: g-hint 1.1s ease-in-out infinite; border-color: var(--c-accent); }
.bs__tray { display: flex; flex-wrap: wrap; gap: 2.2cqmin; justify-content: center; min-height: max(64px, 15cqmin); }
.bs__tile {
  min-width: max(64px, 16cqmin); height: max(64px, 15cqmin); padding: 0 2.4cqmin;
  background: var(--c-surface); border: 0.7cqmin solid var(--c-line); border-radius: 3cqmin;
  box-shadow: 0 1cqmin 0 var(--c-line); font-size: max(30px, 8.5cqmin); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; user-select: none;
}
.bs__tile .ar { pointer-events: none; line-height: 1; }
.bs__tile.is-dragging { opacity: 0.3; }
.bs__tile.is-hint { animation: g-hint 1.1s ease-in-out infinite; border-color: var(--c-accent); }
.bs__ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; box-shadow: 0 3cqmin 5cqmin rgba(0,0,0,.18); cursor: grabbing; }
.bs__joined { font-size: max(40px, 13cqmin); color: var(--c-primary-dark); background: #EAF7EA; border-radius: 3cqmin; padding: 0 5cqmin; animation: g-pop var(--dur-slow) var(--ease-bounce); }

/* ---------- Dialog ---------- */
.dl { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2cqmin; min-height: 0; }
.dl__ctx { text-align: center; font-weight: 800; color: var(--c-ink-soft); font-size: max(15px, 3.4cqmin); margin: 0; }
.dl__talk { display: flex; flex-direction: column; justify-content: center; gap: 2cqmin; min-height: 0; }
.dl__row { display: flex; align-items: flex-end; gap: 2cqmin; min-height: 0; }
.dl__row--me { justify-content: flex-end; }
.dl__who { width: 14cqmin; height: 14cqmin; flex: none; }
.dl__who svg { width: 100%; height: 100%; }
.dl__bubble {
  position: relative; background: var(--c-surface); border-radius: 4cqmin 4cqmin 4cqmin 0.8cqmin; padding: 1.6cqmin 4cqmin;
  box-shadow: 0 1cqmin 0 var(--c-line); display: flex; align-items: center; gap: 3cqmin; font-size: max(26px, 7cqmin); min-height: 0; max-height: 100%;
}
.dl__bubble--me { border-radius: 4cqmin 4cqmin 0.8cqmin 4cqmin; background: #E3F4F3; color: var(--c-primary-dark); }
.dl__row.is-empty .dl__bubble--me { background: rgba(255,255,255,.5); box-shadow: none; border: 0.5cqmin dashed var(--c-primary-soft); }
.dl__dots { font-size: 6cqmin; color: var(--c-ink-soft); letter-spacing: 1cqmin; }
.dl__scene { position: relative; width: 20cqmin; height: 20cqmin; flex: none; }
.dl__scene img { position: absolute; object-fit: contain; }
.dl__solo { inset: 0; width: 100%; height: 100%; }
.dl__base { inset: 0; width: 100%; height: 100%; }
.dl__scene--fi .dl__obj { width: 50%; height: 50%; left: 25%; top: 38%; filter: drop-shadow(0 0 0.4cqmin #fff); }
.dl__scene--ala .dl__obj { width: 46%; height: 46%; left: 27%; top: -8%; }
.dl__choices { display: flex; flex-wrap: wrap; gap: 2cqmin; justify-content: center; }
.dl__opt { display: flex; align-items: center; gap: 1cqmin; }
.dl__choice {
  min-height: max(56px, 13cqmin); padding: 0.6cqmin 4cqmin; font-size: max(24px, 6cqmin);
  background: var(--c-surface); border: 0.7cqmin solid var(--c-line); border-radius: 3.4cqmin; box-shadow: 0 1cqmin 0 var(--c-line); color: var(--c-ink);
}
.dl__choice .ar { pointer-events: none; }
.dl__choice.is-wrong { animation: g-shake 0.45s ease-in-out; }
.dl__choice.is-hint { animation: g-hint 1.1s ease-in-out infinite; border-color: var(--c-accent); }
.dl__choice.is-right { border-color: var(--c-success); background: #EAF7EA; }
.dl__hear { width: max(48px, 10cqmin); height: max(48px, 10cqmin); border-radius: 50%; background: var(--c-primary); color: #fff; padding: 2cqmin; box-shadow: 0 0.8cqmin 0 var(--c-primary-dark); }

/* ---------- Jejak Huruf ---------- */
.tr { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 3cqmin; min-height: 0; }
.tr__side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqmin; min-height: 0; }
.tr__pic { width: min(100%, 26cqmin); aspect-ratio: 1; background: var(--c-surface); border-radius: 4cqmin; box-shadow: 0 1cqmin 0 var(--c-line); display: grid; place-items: center; }
.tr__pic img { width: 76%; height: 76%; object-fit: contain; }
.tr__word { font-size: max(26px, 7cqmin); color: var(--c-ink); }
.tr__model { font-size: max(40px, 14cqmin); color: var(--c-primary-dark); line-height: 1.3; }
.tr__board { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2cqmin; min-height: 0; }
.tr__pad { position: relative; background: var(--c-surface); border-radius: 4cqmin; box-shadow: inset 0 0 0 0.6cqmin var(--c-line); min-height: 0; overflow: hidden; }
.tr__pad.is-done { box-shadow: inset 0 0 0 0.8cqmin var(--c-success); }
.tr__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr__ink { touch-action: none; cursor: crosshair; }
.tr__bar { display: flex; align-items: center; gap: 2cqmin; }
.tr__meter { flex: 1; height: 2.4cqmin; min-height: 12px; background: var(--c-line); border-radius: 99px; overflow: hidden; }
.tr__meter span { display: block; height: 100%; width: 0; background: var(--c-success); border-radius: inherit; transition: width var(--dur-fast); }

@container stage (orientation: portrait) {
  .tr { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .tr__side { flex-direction: row; flex-wrap: wrap; }
  .tr__pic { width: min(22cqmin, 12cqh); }
  .tr__model { font-size: min(14cqmin, 8cqh); }
  .bs__pic { height: min(100%, 40cqmin); }
  .dl__who { width: 16cqmin; height: 16cqmin; }
  .dl__scene { width: 24cqmin; height: 24cqmin; }
  .dl__choices { flex-direction: column; align-items: stretch; }
  .dl__opt { justify-content: center; }
  .dl__opt .dl__choice { flex: 1; }
}

/* Pilihan aktiviti dalam bilik */
.act-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.act { flex-direction: column; min-height: 140px; }
.act .room__icon { width: 56px; height: 56px; color: var(--c-primary); }
/* Skrin rendah (telefon mendatar): ringkaskan lajur sisi jejak huruf */
@container stage (max-height: 440px) {
  .tr__model { display: none; }
  .tr__pic { width: min(100%, 20cqmin); }
  .tr__side { gap: 1.2cqmin; }
  .tr { grid-template-columns: minmax(0, 0.6fr) minmax(0, 2.4fr); }
  .tr__board { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto; }
  .tr__bar { flex-direction: column-reverse; justify-content: center; }
  .tr__meter { flex: none; width: 12px; height: 60px; }
  .tr__meter span { width: 100% !important; height: var(--m, 0%); }
}
@container stage (orientation: portrait) {
  .bs__tile, .bs__slot { min-width: max(72px, 19cqmin); height: max(72px, 17cqmin); }
  .bs__tile { font-size: max(32px, 10cqmin); }
}

/* ---------- Letak Barang ---------- */
.pl { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2cqmin; min-height: 0; justify-items: center; }
.pl__order { font-size: max(24px, 6.5cqmin); color: var(--c-primary-dark); background: var(--c-surface); padding: 0.6cqmin 4cqmin; border-radius: 99px; box-shadow: 0 0.8cqmin 0 var(--c-line); }
.pl__targets { display: flex; gap: 6cqmin; align-items: center; justify-content: center; min-height: 0; height: 100%; width: 100%; }
.pl__target { height: min(100%, 44cqmin); aspect-ratio: 1; background: rgba(255,255,255,.6); border: 0.8cqmin dashed transparent; border-radius: 5cqmin; display: grid; place-items: center; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.pl__target img { width: 88%; height: 88%; object-fit: contain; pointer-events: none; }
.pl__target.is-over { border-color: var(--c-primary); background: #E3F4F3; transform: scale(1.04); }
.pl__target.is-right { border-color: var(--c-success); border-style: solid; background: #EAF7EA; }
.pl__target.is-wrong { animation: g-shake 0.45s ease-in-out; }
.pl__target.is-hint { animation: g-hint 1.1s ease-in-out infinite; border-color: var(--c-accent); }
.pl__shelf { display: flex; justify-content: center; }
.pl__thing { width: max(84px, 22cqmin); height: max(84px, 22cqmin); background: var(--c-surface); border-radius: 4cqmin; box-shadow: 0 1.2cqmin 0 var(--c-line); display: grid; place-items: center; touch-action: none; cursor: grab; transition: transform 0.5s var(--ease-out), opacity 0.5s; position: relative; z-index: 2; }
.pl__thing img { width: 78%; height: 78%; object-fit: contain; pointer-events: none; }
.pl__thing.is-dragging { opacity: 0.3; }
.pl__thing.is-picked { outline: 0.8cqmin solid var(--c-primary); transform: translateY(-1.5cqmin); }
.pl__thing.is-nudge { animation: g-hint 0.6s ease-in-out; }
.pl__thing.is-in { box-shadow: none; background: transparent; pointer-events: none; }
.pl__ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; box-shadow: 0 3cqmin 5cqmin rgba(0,0,0,.18); }
@container stage (orientation: portrait) {
  .pl__targets { flex-direction: column; gap: 3cqh; }
  .pl--two .pl__target { height: min(40cqmin, 20cqh); }
  .pl:not(.pl--two) .pl__target { height: min(70cqmin, 34cqh); }
}

/* ---------- Adab terima kasih ---------- */
.th { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 2cqmin; justify-items: center; min-height: 0; }
.th__gift { display: flex; align-items: center; gap: 3cqmin; min-height: 0; height: 100%; }
.th__lulu { height: min(100%, 34cqmin); aspect-ratio: 1; }
.th__lulu svg { width: 100%; height: 100%; }
.th__item { width: min(24cqmin, 100%); aspect-ratio: 1; background: var(--c-surface); border-radius: 4cqmin; box-shadow: 0 1cqmin 0 var(--c-line); display: grid; place-items: center; transition: transform 0.6s var(--ease-out); }
.th__item img { width: 76%; height: 76%; object-fit: contain; }
.th__gift.is-given .th__item { transform: translateX(-10cqmin) rotate(-6deg); }
.th__reply .dl__bubble { font-size: max(24px, 6cqmin); }

/* ---------- Pelekat (hasil misi) ---------- */
.sticker { display: flex; flex-direction: column; align-items: center; gap: 1.5cqmin; }
.sticker__card { width: max(96px, 20cqmin); background: #fff; border-radius: 3cqmin; padding: 1.5cqmin; box-shadow: 0 0 0 0.8cqmin #FFC845, 0 1.4cqmin 0 rgba(0,0,0,.08); display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); animation: g-pop var(--dur-slow) var(--ease-bounce) 0.9s both; }
.sticker__card img { width: 80%; aspect-ratio: 1; object-fit: contain; }
.sticker__word { font-size: max(20px, 4.6cqmin); }
.sticker__ar { font-size: max(44px, 12cqmin); color: var(--c-primary-dark); }
@container stage (max-height: 440px) { .sticker__card { width: 70px; padding: 4px; } .sticker__word { font-size: 16px; } }
@container stage (max-height: 760px) {
  .gend:has(.sticker) .gend__lulu { display: none; }
  .gend:has(.sticker) { gap: 2cqmin; }
  .gend:has(.sticker) .gend__star { width: 12cqmin; height: 12cqmin; }
}
@container stage (max-height: 440px) {
  .pl { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: center; }
  .pl__order { grid-column: 1 / -1; }
  .pl__target { height: min(100%, 60cqh); }
  .pl__shelf { padding-inline-end: 3cqmin; }
  .gend:has(.sticker) .gend__sub, .gend:has(.sticker) .sticker .chip { display: none; }
  .gend:has(.sticker) { gap: 1.4cqmin; padding: 2cqmin; }
  .gend:has(.sticker) .gend__star { width: 10cqmin; height: 10cqmin; }
  .gend:has(.sticker) .gend__title { margin: 0; }
}