/* Semua ukuran di dalam #game memakai cqw (1cqw = 1% lebar game),
   jadi scene 4:3 ikut membesar/mengecil sebagai satu kesatuan. */
html, body {
    height: 100%;
    margin: 0;
    overscroll-behavior: none;   /* cegah pull-to-refresh / bounce saat game dimainkan di HP */
}

/* Cadangan kalau Tailwind CDN belum termuat (dipakai game.js lewat classList 'hidden'). */
.hidden { display: none !important; }

.game-body {
    background: #2b1a0e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Nyk Ngayogyan', 'Fraunces', Georgia, serif;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;  /* tanpa delay 300ms & tanpa zoom double-tap */
    -webkit-touch-callout: none;
}

#game {
    position: relative;
    width: min(100vw, calc(100dvh * 4 / 3));
    aspect-ratio: 4 / 3;
    container-type: inline-size;
    overflow: hidden;
    user-select: none;
}

#game img { -webkit-user-drag: none; }

.layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.abs { position: absolute; }

/* ---------- Speech bubble ----------
   Struktur: [aksara] [hint] [progress bar] disusun vertikal (in-flow), bukan absolute,
   jadi tinggi bubble otomatis menyesuaikan isi. Bubble di-anchor dari BAWAH
   (dekat buyer), sehingga kalau teks panjang/bertumpuk bubble tumbuh ke atas,
   bukan menabrak buyer. Tinggi scene 4:3 = 75cqw, jadi bottom 48.5cqw ~ top lama 26.5cqw. */
#bubble {
    --bubble-border: 0.4cqw;
    --bubble-bg: #fff8e8;
    --bubble-line: #7a4a22;
    left: 43cqw;
    bottom: 48.5cqw;
    width: 27cqw;
    min-height: 13cqw;
    box-sizing: border-box;
    z-index: 4;
    padding: 1.2cqw 3cqw 2cqw;
    gap: 0.6cqw;
    background: var(--bubble-bg);
    border: var(--bubble-border) solid var(--bubble-line);
    border-radius: 3.2cqw;
    box-shadow: 0 0.6cqw 0 rgba(63, 39, 21, 0.18), 0 1.2cqw 2.4cqw rgba(63, 39, 21, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #3f2715;
    transform: scale(0);
    transform-origin: 12% 110%;
    transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

#bubble.on { transform: scale(1); }

/* The left bottom edge pointer that merges cleanly with the border */
#bubble::after {
    content: "";
    position: absolute;
    left: 2.3cqw;          
    bottom: -3.7cqw;       /* Moved down a little bit */
    width: 3.8cqw;
    height: 3.8cqw;
    /* Uses dynamic URL-encoded SVG matching your --bubble-line (#7a4a22) and --bubble-bg (#fff8e8), with a thicker outer border profile */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M -8 -18 L 8 95 L 88 -8 Z' fill='%237a4a22'/%3E%3Cpath d='M 3 -5 L 12 74 L 69 -2 Z' fill='%23fff8e8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}

/* Aksara: line-height 2.2 (dari .aksara di fonts.css) memberi ruang penuh untuk pasangan
   dan sandhangan. Ukuran font diatur dari JS (fitAksara) sesuai panjang teks. */
#aksara {
    width: 100%;
    text-align: center;
    font-size: 4.2cqw;
    text-wrap: balance;
    word-break: keep-all;
}

#hint {
    font-size: 1.9cqw;
    font-weight: 700;
    line-height: 1.2;
    color: #b8552f;
    text-align: center;
}

#pbar {
    width: 100%;
    flex: none;
    height: 1cqw;
    margin-top: 0.8cqw;
    background: #e8d7b3;
    border-radius: 1cqw;
    box-shadow: inset 0 0.15cqw 0.25cqw rgba(63, 39, 21, 0.2);
    overflow: hidden;
}

#pfill {
    height: 100%;
    width: 100%;
    border-radius: 1cqw;
    background: #4f7a3a;
}

/* ---------- Buyers & seller ---------- */
.buyer { position: absolute; }

.bob {
    position: relative;
    width: 100%;
    height: 100%;
}

.bob.walking { animation: bob 0.34s ease-in-out infinite; }

@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(-1.6deg); }
    50% { transform: translateY(-1.3%) rotate(1.6deg); }
}

.buyer img {
    position: absolute;
    top: 0;
}

.seller {
    position: absolute;
    overflow: hidden;
    z-index: 3;
    -webkit-mask-image: linear-gradient(#000 80%, transparent);
    mask-image: linear-gradient(#000 80%, transparent);
}

.seller img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform-origin: 50% 100%;
    animation: breathe 3.6s ease-in-out infinite;
}

@keyframes breathe { 50% { transform: scaleY(1.012); } }

/* ---------- HUD ---------- */
#topbar {
    left: 15.5cqw;
    top: 2.6cqw;
    width: 69cqw;
    z-index: 6;
}

#topbar > img {
    width: 100%;
    display: block;
}

#hud {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4.5cqw 0 5.5cqw;
    color: #f7ecd3;
    font-weight: 700;
    font-size: 3cqw;
    text-shadow: 0 0.2cqw 0.2cqw #2a1608;
}

#hud div {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
}

#hud svg {
    width: 3.9cqw;
    height: 3.9cqw;
}

#coinPill {
    left: 16.5cqw;
    top: 9.8cqw;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 1cqw;
    padding: 0.5cqw 1.6cqw;
    border-radius: 2cqw;
    background: #5a3418;
    border: 0.3cqw solid #d9a441;
    color: #f7ecd3;
    font-size: 2.2cqw;
    font-weight: 700;
}

#coinPill svg {
    width: 2.6cqw;
    height: 2.6cqw;
}

#buyBtn {
    background: #d9a441;
    color: #3f2715;
    border-radius: 1.5cqw;
    padding: 0 1.2cqw;
    font-weight: 700;
    font-size: 2cqw;
}

#buyBtn:disabled { display: none; }

/* ---------- Shelf slots (posisi diukur dari stall.webp 900x675) ---------- */
#slots {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;  /* hanya .slot yang menerima klik */
}

.slot {
    position: absolute;
    pointer-events: auto;
    z-index: 5;
    /* Panel dalam slot di stall.webp = 142x72 px dari lebar 900px → 15.8 x 8 cqw. */
    width: 15.8cqw;
    height: 8cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.4cqw;
    transition: transform 0.12s, background 0.15s;
}

/* Hover hanya untuk mouse; di layar sentuh :hover menempel setelah tap. */
@media (hover: hover) {
    .slot:hover {
        background: rgba(255, 255, 255, 0.28);
        transform: translateY(-0.3cqw);
    }
}

.slot:active { transform: scale(0.93); }

/* Gambar apa pun rasionya selalu muat di dalam panel (dengan sedikit padding). */
.slot img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0.7cqw;
    object-fit: contain;
    pointer-events: none;
}

/* Panah carousel: tengah kiri/kanan area item (tengah vertikal grid = 53.4cqw). */
.arrow {
    position: absolute;
    top: 49.7cqw;
    width: 7cqw;
    z-index: 6;
    transition: transform 0.12s, opacity 0.2s;
}

#arrowLeft { left: 9.2cqw; }
#arrowRight { left: 83.8cqw; }
.arrow img { width: 100%; display: block; }
@media (hover: hover) {
    .arrow:not(:disabled):hover { transform: scale(1.08); }
}
.arrow:not(:disabled):active { transform: scale(0.94); }
.arrow:disabled {
    opacity: 0.35;
    filter: grayscale(0.4);
    cursor: default;
}

#pageDots {
    position: absolute;
    left: 0;
    right: 0;
    top: 63.6cqw;
    display: flex;
    justify-content: center;
    gap: 1cqw;
    z-index: 6;
    pointer-events: none;
}

#pageDots i {
    width: 1cqw;
    height: 1cqw;
    border-radius: 50%;
    background: rgba(247, 236, 211, 0.45);
    border: 0.15cqw solid #3f2715;
}

#pageDots i.on { background: #ffd45a; }

#hintBtn {
    left: 39cqw;
    top: 66.8cqw;
    width: 21cqw;
    z-index: 6;
    transition: filter 0.2s, transform 0.12s;
}

#hintBtn.on { filter: drop-shadow(0 0 1.1cqw #ffd45a) brightness(1.18); }
#hintBtn:active { transform: scale(0.95); }

/* ---------- Feedback ---------- */
.float {
    position: absolute;
    left: 44cqw;
    top: 24cqw;
    z-index: 7;
    font-weight: 700;
    font-size: 5cqw;
    pointer-events: none;
    animation: rise 1s ease-out forwards;
    text-shadow: 0 0.2cqw 0 #fff;
    white-space: nowrap;
}

@keyframes rise { to { transform: translateY(-9cqw); opacity: 0; } }
@keyframes flash { 0% { opacity: 0.5; } 100% { opacity: 0; } }

#flash {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: #c0281c;
    opacity: 0;
    pointer-events: none;
}

#flash.on { animation: flash 0.45s; }

@keyframes shake {
    25% { transform: translateX(-1cqw); }
    75% { transform: translateX(1cqw); }
}

#game.shake { animation: shake 0.35s; }

.game-body button { cursor: pointer; }

.game-body button:focus-visible {
    outline: 0.4cqw solid #ffd45a;
    outline-offset: 0.3cqw;
}

@media (prefers-reduced-motion: reduce) {
    .bob.walking, .seller img { animation: none; }
}

/* =====================================================================
   MOBILE / PORTRAIT  (harus sama dengan TALL_MQ di game.js)
   ---------------------------------------------------------------------
   Idenya: scene 4:3 TIDAK diubah. #game dibuat setinggi layar (jadi lebarnya
   lebih dari layar) dan diposisikan di tengah, sehingga sisi kiri-kanan terpotong.
   Yang tersisa di layar = bagian tengah stall: 2 kolom x 2 baris rak.
   Semua isi scene tetap pakai cqw (cqw sekarang relatif ke scene yang lebar itu).

   Elemen HUD (topbar, coin, panah, hint) TIDAK boleh pakai cqw untuk lebar/horizontal
   karena bagian scene yang terlihat berbeda-beda per rasio layar. Mereka di-anchor ke
   tengah (50%) dan diukur dengan vw / --ui-w. Posisi VERTIKAL yang menempel ke rak tetap cqw.
   ===================================================================== */
@media (max-aspect-ratio: 1/1) {
    .game-body {
        position: fixed;
        inset: 0;
        height: auto;
        display: block;
    }

    #game {
        /* 220vw: batas agar minimal ~34cqw scene terlihat (2 kolom rak butuh ~33cqw).
           Di HP yang lebih tinggi lagi dari ~1:2.2, scene berhenti membesar dan sisa
           bawahnya memakai warna body. */
        --sh: min(100dvh, 220vw);
        --ui-w: min(92vw, 480px);      /* lebar top bar */
        --hint-w: min(36vw, 170px);
        --arrow-w: min(12vw, 56px);
        --row-y: 66.8cqw;              /* baris panah + hint, tepat di bawah counter */
        position: absolute;
        top: 0;
        left: 50%;
        width: calc(var(--sh) * 4 / 3);
        height: var(--sh);
        margin-left: calc(var(--sh) * -2 / 3);
    }

    /* --- HUD --- */
    #topbar {
        left: calc(50% - var(--ui-w) / 2);
        top: calc(env(safe-area-inset-top, 0px) + 1.5vw);
        width: var(--ui-w);
        container-type: inline-size;   /* cqw di dalam topbar = % lebar topbar */
    }
    /* Angka desktop (satuan cqw scene) dibagi 69 (lebar topbar desktop). */
    #hud { padding: 0 6.5cqw 0 8cqw; font-size: 4.35cqw; }
    #hud div { gap: 1.7cqw; }
    #hud svg { width: 5.65cqw; height: 5.65cqw; }

    #coinPill {
        left: calc(50% - var(--ui-w) / 2 + var(--ui-w) * 0.04);
        top: calc(env(safe-area-inset-top, 0px) + 1.5vw + var(--ui-w) * 0.0922 + 1.2vw);
        gap: calc(var(--ui-w) * 0.014);
        padding: calc(var(--ui-w) * 0.008) calc(var(--ui-w) * 0.024);
        border-width: 2px;
        border-radius: calc(var(--ui-w) * 0.03);
        font-size: calc(var(--ui-w) * 0.042);
    }
    #coinPill svg { width: calc(var(--ui-w) * 0.05); height: calc(var(--ui-w) * 0.05); }
    #buyBtn {
        font-size: calc(var(--ui-w) * 0.038);
        padding: calc(var(--ui-w) * 0.008) calc(var(--ui-w) * 0.022);
        border-radius: calc(var(--ui-w) * 0.025);
    }

    /* --- Bubble: di atas kepala buyer (bukan di sampingnya), ekor di tengah --- */
    #bubble {
        left: calc(50% - 15cqw);
        width: 30cqw;
        bottom: 52.1cqw;
        transform-origin: 50% 110%;
    }
    #bubble::after { left: calc(50% - 1.9cqw); }

    /* --- Rak: 4 slot; gambar sedikit melebihi panel supaya lebih besar & mudah di-tap --- */
    .slot img { padding: 0.2cqw; transform: scale(1.15); }

    /* --- Baris kontrol di bawah counter: [<] [Hint] [>] --- */
    #hintBtn {
        width: var(--hint-w);
        left: calc(50% - var(--hint-w) / 2);
        top: var(--row-y);
    }
    #arrowLeft, #arrowRight {
        width: var(--arrow-w);
        /* sejajarkan tengah vertikal dengan tombol hint (tinggi hint = 0.3 x lebar) */
        top: calc(var(--row-y) + var(--hint-w) * 0.15 - var(--arrow-w) * 0.535);
    }
    #arrowLeft { left: calc(50% - var(--hint-w) / 2 - 3vw - var(--arrow-w)); }
    #arrowRight { left: calc(50% + var(--hint-w) / 2 + 3vw); }

    #pageDots { top: 63.4cqw; gap: 1.6vw; }
    #pageDots i { width: 2.2vw; height: 2.2vw; border-width: 1px; }

    /* --- Feedback (+100 / Kesuwen!) di tengah layar --- */
    .float { left: 0; width: 100%; text-align: center; top: 34cqw; }
}