/* "Cari 6 Produk" hunt in the Rumah Regashi kitchen. */
.hh .hh-hit { fill: transparent; cursor: pointer; }
.hh .hh-prop { outline: none; cursor: pointer; }
.hh .hh-art { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--s, 1)); transition: transform .3s; }
.hh .hh-halo { fill: #FFE07A; opacity: 0; transition: opacity .3s; }
/* Found: the prop glows and stays lit. */
.hh .hh-prop.is-found .hh-halo { opacity: .75; animation: hh-glow 1.8s ease-in-out infinite; }
.hh .hh-prop.is-pop .hh-art { animation: hh-pop .5s cubic-bezier(.34,1.56,.64,1); }
.rh-scene.is-kb .hh-prop:focus-visible .hh-halo { opacity: .6; }
@keyframes hh-glow { 50% { opacity: .4; } }
@keyframes hh-pop { 40% { transform: scale(calc(var(--s, 1) * 1.25)); } }

/* Fridge and cabinet: the door swings open on its hinge; the prop inside can only be tapped when open. */
.hh .hh-door { transform-box: view-box; transition: transform .45s cubic-bezier(.34,1.3,.64,1); cursor: pointer; }
.hh .hh-box.is-open .hh-door { transform: scaleX(-.2); }
.hh .hh-box.is-open .hh-door > :first-child { fill: #E3D8C6; }
.hh .hh-box.is-open .hh-knob { display: none; }
.hh .hh-box:not(.is-open) .hh-prop { pointer-events: none; }

/* Progress badge (top-right of the room, phones: top-left of the wall strip) and reveal card. */
.hh-badge { position: absolute; z-index: 5; right: 62px; top: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid #EFE2CC; font-size: 13px; color: var(--ink, #2A1B10); box-shadow: 0 2px 8px rgba(42,27,16,.08); pointer-events: none; }
.hh-badge-t { font-weight: 600; }
.hh-badge-t::before { content: "🔍 "; }
.hh-dots { display: flex; gap: 4px; }
.hh-dots i { width: 8px; height: 8px; border-radius: 50%; background: #EAD9BD; }
.hh-dots i.on { background: var(--yellow-500, #F5B41E); }
.hh-card { position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 24px)); padding: 16px 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #EFE2CC; box-shadow: 0 18px 40px rgba(42,27,16,.18); animation: hh-card .35s cubic-bezier(.34,1.56,.64,1); }
.hh-card[hidden] { display: none; }
@keyframes hh-card { from { opacity: 0; transform: translate(-50%, -44%) scale(.94); } }
.hh-got { margin: 0 0 10px; font-weight: 700; font-size: 15px; color: var(--yellow-600, #C98A0B); }
.hh-got b { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #FFF1D6; color: var(--ink, #2A1B10); }
.hh-body { display: flex; gap: 14px; align-items: flex-start; }
.hh-body img { width: 112px; height: 112px; flex: none; object-fit: cover; border-radius: 12px; background: #F7F1E6; }
.hh-fam { margin: 0; font-size: 12px; color: #8A7660; text-transform: uppercase; letter-spacing: .04em; }
.hh-card h3 { margin: 2px 0 4px; font-size: 16px; line-height: 1.25; }
.hh-feat { margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; color: #5B4A3A; }
.hh-go { padding: 8px 14px; font-size: 13.5px; }
.hh-x { position: absolute; right: 8px; top: 6px; width: 32px; height: 32px; border: 0; background: none; font-size: 22px; line-height: 1; color: #8A7660; cursor: pointer; }
.hh-giftbtn { position: absolute; z-index: 6; right: 62px; top: 52px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--ink, #2A1B10); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(42,27,16,.2); animation: hh-bounce 2.4s ease-in-out infinite; }
.hh-giftbtn[hidden] { display: none; }
@keyframes hh-bounce { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-3px); } }
.hh-reward { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #FFF6DC; }
.hh-reward[hidden], .hh-body[hidden], .hh-got[hidden], .hh-claim[hidden] { display: none; }
.hh-body[hidden] + .hh-reward { margin-top: 18px; }
.hh-reward-t { margin: 0 0 4px; font-weight: 700; font-size: 15px; }
.hh-reward-s { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: #5B4A3A; }
.hh-reward-s:empty { display: none; }
.hh-claim { padding: 8px 16px; font-size: 13.5px; }
@media (max-width: 700px) {
  .hh-giftbtn { left: 8px; right: auto; top: 40px; font-size: 12px; min-height: 32px; padding: 5px 12px; }
  .hh-badge { left: 8px; right: auto; top: 8px; font-size: 12px; padding: 5px 10px; }
  .hh-body img { width: 92px; height: 92px; }
  .hh-card h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh .hh-halo, .hh .hh-art, .hh-card, .hh-giftbtn { animation: none !important; }
}