@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Cinzel+Decorative:wght@700;900&family=Marcellus&display=swap");

:root {
    --ht-red: #8a1c20;
    --ht-red-dark: #4b070b;
    --ht-gold: #f3b93e;
    --ht-gold-light: #ffe88a;
    --ht-cream: #fff3c8;
}

.ht-btn {
    position: relative;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    font-family: "Cinzel", serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.ht-btn::before {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -70%;
    width: 42%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    transform: rotate(18deg);
    animation: htButtonShine 2.8s ease-in-out infinite;
}

.ht-btn:hover {
    transform: translateY(-1px) scale(1.012);
    filter: brightness(1.05);
    text-decoration: none;
}

.ht-btn:active {
    transform: translateY(1px) scale(0.99);
}

.ht-btn-primary {
    border: 1px solid rgba(255, 226, 128, 0.75);
    background: linear-gradient(180deg, #fff0a7 0%, #f4be38 42%, #a83918 100%);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.45),
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -3px 0 rgba(94, 19, 12, 0.45);
    color: #5a0e10;
    animation: htComingPop 0.7s cubic-bezier(0.2, 1.35, 0.3, 1) 0.5s both,
        htStartPulse 2.4s ease-in-out 1.4s infinite;
}

.ht-btn-ghost {
    color: var(--ht-cream);
    background: rgba(28, 4, 7, 0.55);
    border: 1px solid rgba(255, 215, 90, 0.3);
    backdrop-filter: blur(2px);
    animation: htComingPop 0.7s cubic-bezier(0.2, 1.35, 0.3, 1) 0.6s both;
}

/* Ikon gambar di dalam tombol (pengganti emoji 👑) */
.ht-btn-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
    display: inline-block;
    margin-bottom: 3px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* ===================== MODAL (x-ht-modal) ===================== */
.ht-modal {
    position: fixed;
    inset: 0;
    z-index: 9995;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ht-modal.is-active {
    display: flex;
}

.ht-modal-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at 50% 20%,
            rgba(255, 215, 90, 0.12),
            transparent 34%
        ),
        rgba(6, 1, 2, 0.55); /* dari 0.9 → 0.55, lebih transparan */
    backdrop-filter: blur(7px);
}

/* WRAPPER frame — tinggi mengikuti isi */
.ht-modal-frame {
    position: relative;
    z-index: 2;
    width: min(420px, 100%);
    animation: htModalIn 0.3s cubic-bezier(0.2, 1.1, 0.3, 1) both;
}

/* Frame emas sebagai overlay (klik tembus ke konten) — multi-varian */
.ht-modal-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.65));
}

.ht-modal-frame--long::after {
    background-image: url("/assets/images/hidden_throne/ht_modal_frame.png");
} /* paling panjang ke bawah */
.ht-modal-frame--1x1::after {
    background-image: url("/assets/images/hidden_throne/ht_modal_frame_1x1.png");
} /* persegi 1x1 */
.ht-modal-frame--3x4::after {
    background-image: url("/assets/images/hidden_throne/ht_modal_frame_3x4.png");
} /* agak landscape */
.ht-modal-frame--normal::after {
    background-image: url("/assets/images/hidden_throne/ht_modal_frame_normal.png");
} /* ~1.5x1 */

/* Tuning jarak isi dari ornamen tiap frame */
.ht-modal-frame--long .ht-modal-body {
    padding: 84px 40px 56px;
}
.ht-modal-frame--1x1 .ht-modal-body {
    padding: 72px 47px 120px;
}
.ht-modal-frame--3x4 .ht-modal-body {
    padding: 58px 46px 54px;
}
.ht-modal-frame--normal .ht-modal-body {
    padding: 78px 42px 60px;
}

/* Panel isi di dalam frame (transparan) */
.ht-modal-body {
    position: relative;
    z-index: 2;
    padding: 84px 40px 56px; /* fallback kalau tidak ada varian */
    text-align: center;
    max-height: 92vh;
    border-radius: 26px;
    margin: 18px;
}

.ht-modal-body::-webkit-scrollbar {
    width: 0;
}

/* Tombol close di pojok frame */
.ht-modal-close {
    position: absolute;
    top: 60px;
    right: 30px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 215, 90, 0.55);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 35%, #b22228, #5e0d11);
    color: #ffe88a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.ht-modal-close:hover {
    filter: brightness(1.12);
    transform: rotate(90deg);
}

/* Logo (di atas konten modal) */
.ht-modal-logo {
    display: block;
    width: 120px;
    max-width: 78%;
    height: auto;
    margin: 0 auto 12px;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 18px rgba(255, 215, 90, 0.28));
    animation: htCrownFloat 3.6s ease-in-out infinite;
}

/* ===================== KEYFRAMES KOMPONEN ===================== */
@keyframes htButtonShine {
    0%,
    45% {
        left: -70%;
    }
    70%,
    100% {
        left: 130%;
    }
}

@keyframes htComingPop {
    from {
        opacity: 0;
        transform: scale(0.78) translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes htStartPulse {
    0%,
    100% {
        box-shadow: 0 12px 22px rgba(0, 0, 0, 0.45),
            inset 0 2px 0 rgba(255, 255, 255, 0.45),
            inset 0 -3px 0 rgba(94, 19, 12, 0.45);
    }
    50% {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45),
            0 0 24px rgba(255, 215, 90, 0.34),
            inset 0 2px 0 rgba(255, 255, 255, 0.45),
            inset 0 -3px 0 rgba(94, 19, 12, 0.45);
    }
}

@keyframes htModalIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes htCrownFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-6px) rotate(0.6deg);
    }
}

/* ===================== RESPONSIVE & MOTION KOMPONEN ===================== */
@media (max-width: 360px) {
    .ht-modal-body {
        padding: 72px 28px 46px;
        margin: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ht-btn,
    .ht-btn::before,
    .ht-modal-frame,
    .ht-modal-logo {
        animation: none !important;
    }
}

/* Kontrol level-frame (di atas ornamen ::after yang z-index 3) */
.ht-modal-controls {
    position: absolute;
    inset: 0;
    z-index: 4; /* di atas ornamen frame */
    pointer-events: none; /* area kosong tetap tembus klik */
}
.ht-modal-controls > * {
    pointer-events: auto; /* tapi tombol di dalamnya tetap bisa diklik */
}

.ht-plate-button {
    --ht-plate-bg: url("/assets/images/hidden_throne/base-button.png");

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 140px;
    /* samakan tinggi tombol mendekati rasio plat biar tidak gepeng */
    padding: 10px 38px;
    box-sizing: border-box;
    background-color: transparent;

    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff4d6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);

    border: 0;
    cursor: pointer;
    user-select: none;

    /* plat tampil UTUH, mengisi seluruh tombol */
    background-image: var(--ht-plate-bg);
    background-size: 100% 100%; /* isi penuh; ganti ke "contain" kalau mau jaga rasio */
    background-repeat: no-repeat;
    background-position: center;

    transition: transform 0.12s ease, filter 0.15s ease;
}

.ht-plate-button__label {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.ht-plate-button__ico {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Hover / fokus / aktif */
.ht-plate-button:hover {
    filter: brightness(1.08) drop-shadow(0 0 6px rgba(255, 200, 65, 0.45));
    transform: translateY(-1px);
}

.ht-plate-button:active {
    transform: translateY(1px);
    filter: brightness(0.95);
}

.ht-plate-button:focus-visible {
    outline: 2px solid rgba(255, 226, 132, 0.9);
    outline-offset: 2px;
}

/* ===== Variant close (plat merah) ===== */
.ht-plate-button--close {
    --ht-plate-bg: url("/assets/images/hidden_throne/close-button.png");
    color: #ffe2d6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.ht-plate-button--close:hover {
    filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 80, 60, 0.5));
}

.ht-plate-button--close:focus-visible {
    outline: 2px solid rgba(255, 150, 120, 0.9);
    outline-offset: 2px;
}

/* ===== Variant primary (plat penuh) ===== */
.ht-plate-button--primary {
    color: #fff4d6;
}

/* ===== Variant ghost (tanpa plat, hanya outline emas) ===== */
.ht-plate-button--ghost {
    border-image: none;
    background: rgba(20, 12, 10, 0.55);
    border: 1px solid rgba(201, 148, 54, 0.75);
    border-radius: 6px;
    color: #e8c878;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.ht-plate-button--ghost:hover {
    background: rgba(40, 26, 14, 0.7);
    filter: none;
}