/* Game PAUD dan TK: tombol besar, gambar besar, tanpa nyawa */
.pd-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(8px, 1.6vw, 18px); background: linear-gradient(180deg, #fef9c3, #e0f2fe 55%, #fce7f3); }
.pd-q { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; background: #fff; border: 4px solid var(--sky); border-radius: 22px; padding: 6px 12px; }
.pd-say { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--amber); font-size: 26px; cursor: pointer; box-shadow: 0 4px 0 #d97706; }
.pd-say:active { transform: translateY(3px); box-shadow: 0 1px 0 #d97706; }
.pd-qtext { flex: 1; min-width: 0; font-weight: 800; color: var(--ink); font-size: clamp(20px, 3.6vw, 46px); line-height: 1.15; }
.pd-stars { flex: 0 0 auto; display: flex; gap: 2px; font-size: clamp(18px, 2.6vw, 34px); color: #cbd5e1; letter-spacing: 1px; }
.pd-stars .on { color: #f59e0b; } .pd-stars .cur { color: #94a3b8; }
.pd-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.pd-img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.pd-items { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: clamp(4px, 1vw, 12px); }
.pd-item { position: relative; border: 0; background: transparent; padding: 0; cursor: pointer; flex: 0 0 auto; transition: transform .15s; }
.pd-items.na .pd-item { width: clamp(70px, 17vh, 150px); height: clamp(70px, 17vh, 150px); }
.pd-items.nb .pd-item { width: clamp(52px, 12vh, 110px); height: clamp(52px, 12vh, 110px); }
.pd-items.nc .pd-item { width: clamp(40px, 8.5vh, 80px); height: clamp(40px, 8.5vh, 80px); }
.pd-item.counted { transform: scale(.88); opacity: .75; }
.pd-badge { position: absolute; right: -2px; top: -2px; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--rose); color: #fff; font-weight: 800; font-size: clamp(12px, 2.2vh, 20px); display: none; align-items: center; justify-content: center; border: 2px solid #fff; }
.pd-item.counted .pd-badge { display: flex; }
.pd-swatch { width: clamp(110px, 32vh, 260px); height: clamp(110px, 32vh, 260px); border-radius: 50%; border: 6px solid #fff; box-shadow: 0 8px 20px rgba(15,23,42,.25); }
.pd-pic { width: clamp(100px, 30vh, 240px); height: clamp(100px, 30vh, 240px); }
.pd-stage.susun .pd-pic { width: clamp(90px, 26vh, 200px); height: clamp(90px, 26vh, 200px); }
.pd-slots { display: flex; gap: clamp(4px, 1vw, 10px); justify-content: center; flex-wrap: wrap; }
.pd-slot { width: clamp(40px, 9vh, 80px); height: clamp(48px, 11vh, 94px); border-radius: 14px; background: #fff; border: 4px dashed #94a3b8; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(26px, 6vh, 56px); color: var(--ink); }
.pd-slot.fixed { border-style: solid; border-color: var(--sky); background: var(--sky-50); }
.pd-slot.cur { border-color: var(--amber); background: #fffbeb; animation: pd-pulse .9s ease-in-out infinite; }
.pd-slot.filled { border-style: solid; border-color: var(--sky); cursor: pointer; }
.pd-slot.ok { border-style: solid; border-color: var(--ok); background: #bbf7d0; color: #065f46; }
.pd-slot.bad { border-color: var(--bad); background: var(--rose-100); animation: pd-shake .4s; }
@keyframes pd-pulse { 50% { transform: scale(1.08); } }
@keyframes pd-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pd-choices { flex: 0 0 auto; display: flex; gap: clamp(8px, 1.6vw, 18px); justify-content: center; flex-wrap: wrap; }
.pd-choice { flex: 1 1 0; min-width: 90px; max-width: 260px; min-height: clamp(70px, 17vh, 140px); border: 0; border-radius: 24px; background: #fff; border-bottom: 8px solid #bae6fd; box-shadow: 0 5px 0 rgba(15,23,42,.18); font: inherit; font-weight: 800; color: var(--ink); font-size: clamp(30px, 7vh, 72px); cursor: pointer; padding: 4px 8px; line-height: 1.05; word-break: break-word; }
.pd-choice:active { transform: translateY(3px); }
.pd-choice.sw { background: var(--sw); border: 6px solid #fff; box-shadow: 0 0 0 3px #cbd5e1, 0 5px 0 rgba(15,23,42,.18); }
.pd-choice.ok { background: #bbf7d0; border-bottom-color: var(--ok); }
.pd-choice.sw.ok { background: var(--sw); box-shadow: 0 0 0 6px var(--ok); }
.pd-choice.bad { animation: pd-shake .4s; border-bottom-color: var(--bad); }
.pd-choices.tiles .pd-choice { flex: 0 0 auto; width: clamp(54px, 12vh, 100px); min-width: 0; min-height: clamp(60px, 14vh, 110px); background: #fef3c7; border-bottom-color: #f59e0b; }
.pd-choice.tile.used { visibility: hidden; }
.pd-choices.c4 .pd-choice { font-size: clamp(24px, 5.5vh, 56px); }
.pd-fb { position: absolute; left: 50%; top: 40%; transform: translate(-50%, 10px) scale(.9); background: var(--ok); color: #fff; padding: 10px 26px; border-radius: 999px; font-weight: 800; font-size: clamp(22px, 5vh, 52px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 4; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.pd-fb.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pd-fb.bad { background: var(--rose); }
@media (max-height: 520px) {
  .pd-wrap { gap: 4px; padding: 4px 10px; }
  .pd-q { border-width: 3px; padding: 2px 10px; }
  .pd-say { width: 38px; height: 38px; font-size: 20px; }
  .pd-choice { min-height: 64px; border-radius: 18px; border-bottom-width: 6px; }
  .pd-swatch { border-width: 4px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .pd-choice { min-width: 70px; }
  .pd-items.na .pd-item { width: clamp(60px, 22vw, 110px); height: clamp(60px, 22vw, 110px); }
}
@media (prefers-reduced-motion: reduce) { .pd-slot.cur, .pd-slot.bad, .pd-choice.bad { animation: none; } .pd-fb { transition: none; } }
.pd-wrap.nostage .pd-stage { display: none; }
.pd-wrap.nostage .pd-choices { flex: 1 1 0; align-items: stretch; }
.pd-wrap.nostage .pd-choice { max-width: 340px; min-height: 0; }
.pd-choices.hide { display: none; }
.pd-choice.im { background: #fff; padding: 6px; flex: 0 0 auto; width: clamp(84px, 24vh, 210px); min-width: 0; height: clamp(84px, 24vh, 210px); min-height: 0; max-width: none; }
.pd-choices.im { align-items: center; align-content: center; }
.pd-wrap.nostage .pd-choices.im { flex: 1 1 0; }
.pd-wrap.nostage .pd-choice.im { max-width: none; }
.pd-svg { flex: 0 0 auto; width: 240px; height: 240px; touch-action: manipulation; user-select: none; -webkit-user-select: none; background: #fff; border: 4px solid var(--sky); border-radius: 22px; }
.pd-stage:has(.pd-svg) { min-height: 0; }
.pd-line { fill: none; stroke: var(--sky-d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pd-fill { fill: rgba(251, 191, 36, .45); opacity: 0; }
.pd-reward { opacity: 0; transition: opacity 1s .4s; pointer-events: none; }
.pd-svg.done .pd-reward { opacity: 1; }
.pd-line { transition: opacity .6s; }
.pd-dot { transition: opacity .6s; }
.pd-svg.done .pd-line, .pd-svg.done .pd-fill { opacity: 0; }
.pd-skip { opacity: 0; fill: #64748b; font-weight: 700; font-family: inherit; pointer-events: none; transition: opacity .6s 2s; }
.pd-svg.done .pd-skip { opacity: 1; }
.pd-dot { cursor: pointer; }
.pd-dot circle { fill: #fff; stroke: #64748b; stroke-width: .9; }
.pd-dot text { font-weight: 800; fill: var(--ink); pointer-events: none; font-family: inherit; }
.pd-dot.cur circle { fill: #fde68a; stroke: var(--amber); stroke-width: 1.4; animation: pd-dotpulse .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pd-dot.done circle { fill: #bae6fd; stroke: var(--sky-d); }
.pd-dot.bad circle { fill: var(--rose-100); stroke: var(--bad); }
.pd-svg.done .pd-dot { opacity: 0; pointer-events: none; }
@keyframes pd-dotpulse { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .pd-dot.cur circle { animation: none; } .pd-fill, .pd-reward { transition: none; } }
.pd-choices.im.c3 .pd-choice.im { width: min(32vh, 26vw); height: min(32vh, 26vw); }
.pd-choices.im.c4 .pd-choice.im { width: min(30vh, 21vw); height: min(30vh, 21vw); }
.pd-choices.im.c6 .pd-choice.im { width: min(24vh, 14.5vw); height: min(24vh, 14.5vw); }
@media (orientation: portrait) {
  .pd-choices.im.c3 .pd-choice.im { width: 28vw; height: 28vw; }
  .pd-choices.im.c4 .pd-choice.im { width: 38vw; height: 38vw; }
  .pd-choices.im.c6 .pd-choice.im { width: 27vw; height: 27vw; }
}