/* Inside the temple (template-di-chua-vao.php): the hall fills the screen. */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #12060a;
    font-family: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;
    color: #fff4e0;
    -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }

.chua {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse 60% 50% at 50% 60%, rgba(255, 140, 60, .18), transparent 70%),
        linear-gradient(180deg, #08040f 0%, #1a0a1c 50%, #2a0c10 100%);
}

/* Lanterns drifting up on both sides of the hall (wide screens). */
.chua__sky span {
    position: absolute;
    bottom: -50px;
    left: calc(4% + var(--i) * 14%);
    width: 18px;
    height: 24px;
    border-radius: 6px 6px 8px 8px;
    background: linear-gradient(180deg, #fff1c4, #ffb54a 55%, #e0602a);
    box-shadow: 0 0 16px 5px rgba(255, 170, 70, .4);
    opacity: 0;
    animation: chua-rise calc(16s + var(--i) * 2s) linear infinite;
    animation-delay: calc(var(--i) * -3.1s);
}

@keyframes chua-rise {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: .8; }
    85% { opacity: .6; }
    100% { transform: translate(20px, -110vh); opacity: 0; }
}

/* The hall keeps its 9:16 shape; on a phone it fills the screen (sides cropped a little). */
.chua__frame {
    position: relative;
    width: min(100vw, calc(100dvh * 9 / 16));
    height: 100dvh;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(200, 144, 44, .25), 0 30px 80px -20px rgba(0, 0, 0, .8);
}

@media (min-aspect-ratio: 10/16) {
    .chua__frame {
        border-radius: 0;
    }
}

#scene {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    touch-action: manipulation;
}

/* Glass controls over the hall. */
.chua__back,
.chua__round {
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(26, 8, 6, .55);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .35);
    color: #ffe2a8;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.chua__back {
    top: calc(12px + env(safe-area-inset-top));
    left: 12px;
}

.chua__back svg,
.chua__round svg {
    width: 22px;
    height: 22px;
}

.chua__corner {
    position: absolute;
    z-index: 5;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
}

.chua__corner .chua__round {
    position: static;
}

.chua__round .is-on { display: none; }
.chua__round[aria-pressed="true"] .is-on { display: block; }
.chua__round[aria-pressed="true"] .is-off { display: none; }

.chua__toast {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: calc(68px + env(safe-area-inset-top));
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(26, 8, 6, .72);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .4);
    font-size: 14px;
    font-weight: 600;
    color: #ffe9bf;
    text-align: center;
    transform: translate(-50%, -8px);
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}

.chua__toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.chua__dock {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 24px;
    background: rgba(26, 8, 6, .62);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .32), 0 16px 40px -16px rgba(0, 0, 0, .8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateX(-50%);
    transition: opacity .3s, transform .3s;
}

.chua__dock.is-away {
    opacity: 0;
    transform: translate(-50%, 30px);
    pointer-events: none;
}

.chua__dock button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 64px;
    min-height: 60px;
    padding: 6px 2px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: #ffeccc;
    cursor: pointer;
    transition: background .2s, transform .15s, opacity .2s;
}

.chua__dock button span {
    font-size: 24px;
    line-height: 1;
}

.chua__dock button b {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.chua__dock button:hover:not(:disabled),
.chua__dock button:focus-visible {
    background: rgba(255, 210, 140, .14);
}

.chua__dock button:active:not(:disabled) {
    transform: scale(.94);
}

.chua__dock button:disabled {
    opacity: .4;
}

/* Sheets. */
.chua__veil {
    position: absolute;
    inset: 0;
    z-index: 7;
    background: rgba(10, 3, 2, .35);
}

.chua__sheet {
    position: absolute;
    z-index: 8;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 90px);
    overflow: auto;
    padding: 20px 18px 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(48, 14, 10, .94), rgba(28, 8, 6, .96));
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .35), 0 -10px 40px -10px rgba(0, 0, 0, .7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: chua-up .32s cubic-bezier(.2, .8, .2, 1);
}

@keyframes chua-up {
    from { transform: translateY(30px); opacity: 0; }
}

.chua__sheet h2 {
    margin: 0 0 12px;
    font-family: "Noto Serif", Georgia, serif;
    font-size: 22px;
    color: #ffd98a;
}

.chua__hint {
    margin: -4px 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 236, 205, .78);
}

.chua__label {
    margin: 12px 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 220, 160, .8);
}

.chua__dress {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
}

.chua__dress canvas {
    width: 110px;
    height: auto;
    aspect-ratio: 22 / 27;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 30%, #6a2412, #2a0c0a);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .25);
}

.chua__field span {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 220, 160, .8);
}

.chua__sheet input[type="text"] {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 245, 230, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .3);
    color: #fff4e0;
    font-size: 16px;
    outline: none;
}

.chua__sheet input[type="text"]:focus {
    box-shadow: inset 0 0 0 2px #f2b247;
}

.chua__sheet input::placeholder {
    color: rgba(255, 236, 205, .45);
}

.chua__sheet form {
    display: grid;
    gap: 10px;
}

.chua__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.chua__chips button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 245, 230, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .25);
    color: #ffeccc;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.chua__chips.is-wide button {
    flex: 1;
    justify-content: center;
    min-height: 52px;
    font-size: 16px;
}

.chua__chips.is-outfit i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sw);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}

.chua__chips button[aria-pressed="true"] {
    background: rgba(242, 178, 71, .22);
    box-shadow: inset 0 0 0 2px #f2b247;
    color: #fff;
}

.chua__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chua__swatches button {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(26, 8, 6, .9);
    border-radius: 50%;
    background: var(--sw);
    box-shadow: 0 0 0 1px rgba(255, 210, 140, .35);
    cursor: pointer;
}

.chua__swatches button[aria-pressed="true"] {
    box-shadow: 0 0 0 3px #f2b247;
}

.chua__primary {
    width: 100%;
    min-height: 50px;
    margin-top: 14px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffe39a, #f2b247 50%, #d8862a);
    color: #3a1408;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 26px -12px rgba(255, 170, 60, .8);
}

.chua__sheet form .chua__primary {
    margin-top: 0;
}

.chua__ghost {
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 245, 230, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .35);
    color: #ffeccc;
    font-weight: 700;
    cursor: pointer;
}

.chua__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.chua__grid button {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0 10px;
    align-items: center;
    padding: 12px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 245, 230, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .22);
    color: #fff4e0;
    text-align: left;
    cursor: pointer;
}

.chua__grid button span {
    grid-row: span 2;
    font-size: 26px;
}

.chua__grid button b {
    font-size: 14px;
}

.chua__grid button small {
    font-size: 12px;
    color: rgba(255, 236, 205, .6);
}

.chua__switch {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 10px;
    font-size: 14px;
}

.chua__switch input {
    width: 20px;
    height: 20px;
    accent-color: #f2b247;
}

.chua__list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.chua__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 210, 140, .15);
    font-size: 14px;
}

.chua__list li span {
    flex: 1;
}

.chua__list li small {
    color: rgba(255, 236, 205, .5);
}

.chua__list li button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 245, 230, .08);
    color: #ffd9a0;
    cursor: pointer;
}

.chua__pair {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

.chua__pair .chua__primary {
    margin-top: 0;
}

.chua__pair .chua__ghost {
    min-height: 50px;
}

.chua__sheet.is-person {
    text-align: center;
}

.chua__sheet.is-person h2 {
    font-size: 26px;
}

/* The daily card. */
.chua__sheet.is-card {
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(255, 200, 110, .22), transparent 60%), linear-gradient(180deg, rgba(48, 14, 10, .95), rgba(28, 8, 6, .97));
}

.chua__card-kicker {
    margin: 4px 0 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #f2c46a;
}

.chua__card {
    margin: 0 0 14px;
    font-family: "Noto Serif", Georgia, serif;
    font-size: 22px;
    line-height: 1.5;
    color: #fff6dc;
}

/* Meditation: a breathing circle over the dimmed hall. */
.chua__zen {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

.chua__breath {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 170, .35), rgba(255, 180, 80, .08) 70%);
    box-shadow: 0 0 0 1px rgba(255, 220, 160, .5), 0 0 60px rgba(255, 190, 90, .35);
    font-size: 17px;
    font-weight: 700;
    color: #fff4d8;
    transform: scale(.7);
    transition: transform 4s ease-in-out;
}

.chua__breath.is-in {
    transform: scale(1.15);
}

.chua__zen-time {
    margin: 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 236, 205, .75);
}

@media (min-width: 700px) {
    .chua__sheet {
        left: 50%;
        right: auto;
        width: min(440px, calc(100% - 20px));
        transform: translateX(-50%);
        animation: none;
    }
}

@media (max-width: 360px) {
    .chua__dock button {
        width: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chua__sky span { animation: none; opacity: .5; transform: translateY(calc(-20vh - var(--i) * 8vh)); }
    .chua__sheet { animation: none; }
    .chua__breath { transition-duration: .01s; }
}