:root {
    --stage-w: 1284;
    --stage-h: 2778;
    --footer-h: 489px;
    --btn-w: 222px;
    --btn-h: 115px;
    --btn-y: 2482px;
    --btn-x-zh: 61px;
    --btn-x-nan: 374px;
    --btn-x-ja: 687px;
    --btn-x-en: 1000px;
    --close-x: 1131px;
    --close-y: 174px;
    --close-s: 87px;
    --beige: #e5e4dd;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: "Noto Serif TC", "Songti TC", serif;
    touch-action: manipulation;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
}

.viewport {
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stage {
    width: 1284px;
    height: 2778px;
    position: relative;
    transform-origin: center center;
    overflow: hidden;
    background: var(--beige);
    flex: 0 0 auto;
}

.layer {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
}

.bg-lang {
    inset: 0;
    width: 1284px;
    height: 2778px;
}

.anim {
    inset: 0;
    width: 1284px;
    height: 2778px;
    object-fit: cover;
    background: transparent;
    -webkit-mask-image: radial-gradient(circle 780px at 50% 41.3%, #000 96%, transparent 100%);
    mask-image: radial-gradient(circle 780px at 50% 41.3%, #000 96%, transparent 100%);
}

.anim::-webkit-media-controls-start-playback-button,
.anim::-webkit-media-controls {
    display: none !important;
}

.bg-footer {
    left: 0;
    bottom: 0;
    width: 1284px;
    height: var(--footer-h);
}

.lang-btn,
.close-btn {
    position: absolute;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
}

.lang-btn {
    top: var(--btn-y);
    width: var(--btn-w);
    height: var(--btn-h);
}

.lang-btn[data-lang="zh"] { left: var(--btn-x-zh); }
.lang-btn[data-lang="nan"] { left: var(--btn-x-nan); }
.lang-btn[data-lang="ja"] { left: var(--btn-x-ja); }
.lang-btn[data-lang="en"] { left: var(--btn-x-en); }

.lang-btn img,
.close-btn img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.close-btn {
    left: var(--close-x);
    top: var(--close-y);
    width: var(--close-s);
    height: var(--close-s);
}

.start-overlay {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(20, 16, 8, 0.28);
    color: #fff;
    font: inherit;
    font-size: 52px;
    letter-spacing: 0.18em;
    cursor: pointer;
}

.start-overlay span {
    display: inline-block;
    padding: 18px 48px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    background: rgba(50, 46, 30, 0.45);
}

.start-overlay.is-hidden {
    display: none;
}

audio {
    display: none;
}