@font-face {
    font-family: 'neodgm';
    src: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/fonts/neodgm.woff2') format('woff2'),
    url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/fonts/neodgm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;

    touch-action: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
    overflow-anchor: none;
}

body {
    inset: 0;
}

.HtmlBlock_htmlContent__AVSTW.HtmlBlock_htmlContent__AVSTW .game-app-wrapper img {
    object-fit: initial;
}

.game-app-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #DCFFFF 0%, #A8B9DA 100%);
}

.game-app-wrapper img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    touch-action: none;
    -webkit-touch-callout: none;
}

.game-app-wrapper * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
    -webkit-tap-highlight-color: transparent;

    touch-action: none;
    -webkit-touch-callout: none;
}

#game-app {
    position: relative;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    box-sizing: border-box;
}

#game-app, #game, #game canvas {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.game-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;

    width: min(100%, 640px);
    height: calc(100svh - 120px);
}

@media (max-width: 639px) {
    .game-wrapper {
        height: calc(100svh - 102px);
    }
}

@media (min-width: 640px) and (max-height: 869px) {
    .game-wrapper {
        width: 410px;
    }
}

.game-cover {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.game-cover.hidden {
    display: none;
}

#game-app .game-cover > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

#game {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;

    margin: -20px 0 -10px;

    background: #a1bff2;
}

#game canvas {
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    transition: opacity 200ms ease;
}

body.rotating #game canvas,
body.resizing #game canvas {
    opacity: 0;
    transition: none;
}

.frame-top {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.frame-middle-wrapper {
    position: absolute;
    z-index: 15;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    display: flex;
    flex-direction: column;
}

.frame-d {
    flex: 1;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/div.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.frame-middle {
    flex: 0 0 auto;
    margin-top: -2px;
}

.frame-bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 640 / 235;
}

.frame-bottom-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-app .frame-bottom-inner > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.frame-bottom-cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 32px;
    box-sizing: border-box;
}

body.is-compact .frame-bottom-cont {
    gap: 12px;
    padding: 0 19px;
}


@media screen and (max-width: 350px) {
    .frame-bottom-cont {
        gap: 12px;
        padding: 0 19px;
    }
}

#hud {
    flex: 1;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

#hud.visible {
    opacity: 1;
}

.hud-row--top {
    display: flex;
    align-items: center;

    padding: 0 24px;
    margin-bottom: 6px;
    height: 55px;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/hud-top.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.hud-row--bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 127px;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/hud-bottom.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

body.is-compact .hud-row--top {
    padding: 0 14px;
    margin-bottom: 4.5px;
    height: 32.2px;
}

body.is-compact .hud-row--bottom {
    height: 74.4px;
}

#hud-stage {
    width: 100%;
    height: 100%;
}

#hud-stage.hud-stage-num--1 {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/info-1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

#hud-stage.hud-stage-num--2 {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/info-2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

#hud-stage.hud-stage-num--3 {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/info-3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

#hud-stage.hud-stage-num--4 {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/info-4.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

#hud-stage.hud-stage-num--5 {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/info-5.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

#hud-stage.hud-stage-num--6 {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/info-6.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

#hud-stage.hud-stage-num--7 {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/info-7.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

#hud-timer {
    color: #FFF;
    font-family: 'neodgm';
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-shadow: 3px 3px #170086;

    font-variant-numeric: tabular-nums;
}

.hud-label {
    margin-right: 14px;
    color: #FFF;
    font-family: 'neodgm';
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-shadow: 3px 3px #170086;
}

#hud-percent {
    color: #FFF;
    font-family: 'neodgm';
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-shadow: 3px 3px #170086;
    font-variant-numeric: tabular-nums;
}

.hud-progress-wrapper {
    display: flex;
    align-items: center;
}

.hud-dot {
    display: block;
    margin: 0 14px;
    color: #FFF;
    font-family: 'neodgm';
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-shadow: 3px 3px #170086;
}

body.is-compact #hud-timer {
    font-size: 16px;
    text-shadow: 1.8px 1.8px #170086;
}

body.is-compact .hud-label {
    margin-right: 8px;
    font-size: 16px;
    text-shadow: 1.8px 1.8px #170086;
}

body.is-compact #hud-percent {
    font-size: 16px;
    text-shadow: 1.8px 1.8px #170086;
}

body.is-compact .hud-dot {
    margin: 0 8px;
    font-size: 16px;
    text-shadow: 1.8px 1.8px #170086;
}

.joystick-wrapper {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#joystick {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    display: block;
    z-index: 30;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

#joystick .jb {
    cursor: pointer;
    pointer-events: auto;
    fill-opacity: 0;
}

#joystick .jb:hover {
    fill-opacity: 0;
}

#joystick .jb:active {
    fill-opacity: 0;
}

.joystick-guide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 28;
    opacity: 0;
    pointer-events: none;
}

body.is-compact .joystick-wrapper {
    width: 111px;
    height: 111px;
}

#message-box {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);

    padding: 24px;
    width: calc(100% - 100px);

    opacity: 0;
    transition: transform 200ms ease;
    pointer-events: none;
    cursor: pointer;
    z-index: 8;

    display: flex;
    gap: 20px;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/text-box.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

#message-box.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

#message-left {
    flex: 0 0 145px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 20px;
    border-right: 2px solid #7AA9E3;
    min-width: 0;
    word-break: keep-all;
}

#message-left:empty,
#message-left.hidden {
    display: none;
}

#message-date {
    color: #C2D8F1;
    font-family: "Pretendard";
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.14px;
}

#message-label {
    color: #7AA9E3;
    font-family: "Pretendard";
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.14px;
    white-space: pre-wrap;
}

#message-right {
    min-width: 0;

    display: flex;
}

#message-text {
    min-height: 116px;
    color: #FFF;
    font-family: "Pretendard";
    font-size: 17px;
    font-weight: 500;
    line-height: 135%;
    letter-spacing: -0.17px;
    white-space: pre-wrap;
    word-break: keep-all;
}

.game-app-en #message-text {
    font-size: 16px;
    line-height: 145%;
    letter-spacing: -0.16px;
}

.game-app-jp #message-text {
    font-size: 15.5px;
    line-height: 145%;
    letter-spacing: -0.155px;

    word-break: break-all;
}

body.is-compact #message-box {
    bottom: 18px;
    padding: 14px;
    width: calc(100% - 56px);
    gap: 12px;
}

body.is-compact #message-left {
    flex: 0 0 82px;
    gap: 4px;
    padding-right: 10px;
    border-right: 1px solid #7AA9E3;
}

body.is-compact #message-date {
    font-size: 8px;
    letter-spacing: -0.08px;
}

body.is-compact #message-label {
    font-size: 8px;
    letter-spacing: -0.08px;
}

body.is-compact #message-text {
    min-height: 86px;
    font-size: 12px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.18px;
}

body.is-compact .game-app-en #message-text {
    font-size: 11.52px;
    line-height: 140%;
    letter-spacing: -0.115px;
}

body.is-compact .game-app-jp #message-text {
    font-size: 11px;
    line-height: 150%;
    letter-spacing: -0.11px;
}

#message-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
}

#message-indicator .ind-next,
#message-indicator .ind-end {
    display: none;
}

#message-indicator[data-mode="next"] .ind-next {
    display: block;
    margin-left: 20px;
    width: 24px;
    height: 39px;

    transform: translateX(0);

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/arrow.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    animation: indicator-move 800ms steps(2, jump-none) infinite;
}

@keyframes indicator-move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

body.is-compact #message-indicator[data-mode="next"] .ind-next {
    margin-left: 8px;
    width: 14px;
    height: 23px;
}

@keyframes indicator-move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(0);
    }
}

#stage-clear-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 74px;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 620px;
    height: 100%;
    color: #fff;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    z-index: 8;
}

body.is-compact #stage-clear-popup {
    padding: 0 35px;
}

#stage-clear-popup.visible {
    opacity: 1;
    pointer-events: auto;
}

/* 스테이지별 배경색 (60% 투명) */
#stage-clear-popup.stage--1 {
    background: rgba(14, 30, 72, 0.60);
}

#stage-clear-popup.stage--2 {
    background: rgba(110, 191, 219, 0.60);
}

#stage-clear-popup.stage--3 {
    background: rgba(184, 215, 225, 0.60);
}

#stage-clear-popup.stage--4 {
    background: rgba(229, 183, 207, 0.60);
}

#stage-clear-popup.stage--5 {
    background: rgba(33, 15, 76, 0.60);
}

#stage-clear-popup.stage--6 {
    background: rgba(255, 206, 105, 0.60);
}

#stage-clear-popup.stage--7 {
    background: rgba(85, 144, 181, 0.60);
}

.stage-clear-ani {
    position: relative;
    width: 100%;
    height: 100%;
}

#game-app .stage-clear-ani > img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.stage-clear-ani > img:not(:first-child) {
    position: absolute;
    inset: 0;
}

/* ===== 엔딩 화면 ===== */
#ending-screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 60px 0;
    box-sizing: border-box;
    z-index: 9;
    cursor: default;
}

#ending-screen.visible {
    display: flex;
}

.ending-box {
    width: 100%;
    max-width: 540px;
    text-align: center;
}

.ending-box-middle {
    padding: 0 0 20px;
    width: 100%;
    background-color: #B3CFFF;
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/popup-middle.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.eb-title {
    padding-top: 25px;
    margin: 0 auto;
    height: calc(88px + 25px);
    box-sizing: border-box;
}

#game-app .eb-title > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#ending-time {
    display: block;
    padding-top: 32px;
    text-align: center;
    color: #000;
    font-family: 'neodgm';
    font-size: 120px;
    font-weight: 400;
    line-height: normal;
    text-shadow: 4px 4px #85A8FF;
}

.ending-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.ending-btn {
    flex: 1;
    width: 264px;
    height: 79px;
    cursor: pointer;

    border: 0;
    background: transparent;
}

#retry-btn {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/btn-retry.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#credit-btn {
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/btn-credit.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

body.is-compact #ending-screen {
    padding: 30px 0;
    gap: 16px;
}

body.is-compact .ending-box {
    max-width: 316px;
}

body.is-compact .eb-title {
    padding-top: 15px;
    margin: 0 auto;
    height: calc(51px + 15px);
    box-sizing: border-box;
}

body.is-compact #ending-time {
    padding-top: 18px;
    font-size: 68px;
    text-shadow: 2.4px 2.4px 0 #85A8FF;
}

body.is-compact .ending-buttons {
    gap: 8px;
}

body.is-compact .ending-btn {
    width: 154px;
    height: 46px;
}


/* ===== credit ===== */
#credit-screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 30px 0;
    box-sizing: border-box;
    z-index: 9;
    cursor: default;

    background: rgba(220, 255, 255, 1);
}

#credit-screen.visible {
    display: flex;
}

.credit-screen-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;

    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;

    overflow: hidden;
}

body.is-compact .credit-screen-inner {
    gap: 22px;
}

.credit-icon-list {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;

    padding: 0 25px;
}

.credit-icon-item {
    position: absolute;
    bottom: -80px;
    animation: credit-float 20s linear forwards;
    will-change: transform;

    width: calc(100% - 50px);
}

.credit-icon-item > img {
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;

    width: 100%;
    height: auto;
}

/* popping 클래스가 붙은 아이콘만 두두둥 스케일 (Stepped 이징) */
.credit-icon-item.popping > img {
    animation: credit-pop 1000ms steps(3, jump-none) infinite;
    transform-origin: center;
}

@keyframes credit-float {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-120vh);
    }
}

@keyframes credit-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.025);
    }
    100% {
        transform: scale(1);
    }
}

.gc-title {
    height: 39px;
}

#game-app .gc-title > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gc-cont {
    height: 302px;
}

.gc-cont.gc-cont--ex {
    height: 298px;
}

#game-app .gc-cont > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#credit-retry-btn {
    margin: auto auto 0;
    width: 264px;
    height: 79px;
    cursor: pointer;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/btn-retry.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    border: 0;
    background-color: transparent;
}

#credit-back-btn {
    width: 264px;
    height: 79px;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/btn-back.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    border: 0;
    background-color: transparent;
}


body.is-compact .gc-title {
    height: 22px;
}

body.is-compact .gc-cont {
    height: 174px;
}

body.is-compact .gc-cont.gc-cont--ex {
    height: 172px;
}

body.is-compact #credit-retry-btn {
    width: 154px;
    height: 46px;
}

body.is-compact #credit-back-btn {
    width: 154px;
    height: 46px;
}


/*intro*/
.game--intro #hud {
    opacity: 1;
}

.gt-title {
    position: absolute;
    z-index: 4;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 40px;
}

.gt-title > img {
    display: block;
    width: auto;
    height: 100%;
}


body.is-compact .gt-title {
    top: 58px;
    height: 22px;
}


.gt-next-btn {
    position: absolute;
    z-index: 5;
    top: 85px;
    right: 40px;
    width: 48px;
    height: 48px;
    animation: arrow-move 800ms steps(2, jump-none) infinite;

    cursor: pointer;
}

@keyframes arrow-move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}


body.is-compact .gt-next-btn {
    top: 52px;
    right: 22px;
    width: 29px;
    height: 29px;
}


.game-intro-bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/stages/1.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}

.game-intro-bg:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 30, 72, 0.70);
}

.game-intro-bg.tooltip-outer-active:after {
    display: none;
}

.game-tooltip--inner {
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.game-tooltip--inner.visible {
    opacity: 1;
}

.game-tooltip-main {
    display: block;

    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;
}

.game-tooltip-next {
    display: none;

    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;
}

.game-tooltip--outer {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 30, 72, 0.70);

    opacity: 0;
    pointer-events: none;
}

.game-tooltip--outer.visible {
    opacity: 1;
}

#game-app .game-tooltip--outer > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}


body.is-compact #game-app .game-tooltip--outer > img {
    object-fit: contain;
}


.game-player-select-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    box-sizing: border-box;
    z-index: 5;

    opacity: 0;
    pointer-events: none;
}

.game-player-select-wrapper.visible {
    opacity: 1;
    pointer-events: auto;
}

.game-player-select-box {
    width: 100%;
}

.gps-box-middle {
    padding: 60px 0 40px;
    width: 100%;
    background-color: #B3CFFF;
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/popup-middle.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.gps-title {
    margin: 0 auto 60px;
    width: auto;
    height: 83px;
}

#game-app .gps-title > img {
    margin: auto;
    display: block;
    width: auto;
    height: 100%;
}

.gp-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 24px;
    row-gap: 24px;
    padding: 0 55px 60px;
}

.gp-item {
    width: 98px;
    cursor: pointer;
}

/* ===== 선택 시 on 이미지 깜빡빡 (3회 후 on 상태로 고정) ===== */
.gp-item.selected img {
    animation: gp-blink 0.18s steps(2, jump-none) 3;
}

@keyframes gp-blink {
    0%, 49% {
        opacity: 0.25;
    }
    50%, 100% {
        opacity: 1;
    }
}

.game-start-btn {
    margin: auto;
    width: 264px;
    height: 79px;
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/btn-start.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    cursor: pointer;
}


body.is-compact .game-player-select-wrapper {
    padding: 0 12px;
}

body.is-compact .gps-box-middle {
    padding: 30px 0 20px;
}

body.is-compact .gps-title {
    margin: 0 auto 30px;
    height: 45px;
}

body.is-compact .gp-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 10px;
    row-gap: 10px;
    padding: 0 24px 30px;

    max-width: 320px;
    margin: auto;
}

body.is-compact .gp-item {
    width: 58px;
}

body.is-compact .game-start-btn {
    margin: auto;
    width: 154px;
    height: 46px;
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/frame/btn-start.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    cursor: pointer;
}


#credit-open-btn {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 60px;
    height: 60px;
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/credit/btn-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    cursor: pointer;
}

/* 엔딩/크레딧 화면 노출 중엔 숨김 */
#game:has(#ending-screen.visible) #credit-open-btn,
#game:has(#credit-screen.visible) #credit-open-btn {
    display: none;
}


body.is-compact #credit-open-btn {
    top: 20px;
    right: 22px;
    width: 45px;
    height: 45px;
}


.gtm-arrow {
    margin: auto;
    width: 90px;
    height: 122px;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/stages/up.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    animation: gtm-arrow-sprite 800ms steps(11) infinite;

    transform: scale(0.7);
    transform-origin: top;
}

@keyframes gtm-arrow-sprite {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -990px 0;
    }
}

.gtm-action-wrapper {
    display: flex;
    justify-content: center;
    margin: 0 auto 42px;
}


body.is-compact .gtm-action-wrapper {
    margin: 0 auto;
}


.gtm-item {
    margin-right: -122px;
    width: 122px;
    height: 80px;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/player/3-l.png');
    background-repeat: no-repeat;
    /* 명시 픽셀 고정 (모바일 브라우저 분수픽셀 회피) */
    background-size: 976px 80px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    animation: gtm-item-sprite 800ms steps(8) infinite;
    will-change: background-position;
}

@keyframes gtm-item-sprite {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -976px 0;
    }
}

.gtm-c {
    width: 80px;
    height: 80px;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/collectibles/2-w-r.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    filter: grayscale(100%) brightness(0.45);
}

.gtm-c.visible {
    filter: grayscale(0%) brightness(1);
}

.gtn-inner {
    position: relative;
    width: 400px;
    height: 80px;
    display: flex;
    margin-left: auto;
    margin-right: -5px;
}

.gtn-item--slot {
    position: relative;
    z-index: 0;
    width: 140px;
    height: 80px;
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/tooltip/i-s.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.gtn-item--piece {
    position: relative;
    z-index: 0;
    width: 260px;
    height: 80px;
    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/tooltip/i-p.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    transform: translateX(0);
    animation: gtn-piece-move 1800ms steps(4) infinite;
}

@keyframes gtn-piece-move {
    0% {
        transform: translateX(0);
    }
    33% {
        transform: translateX(-70px);
    }
    66% {
        transform: translateX(-140px);
    }
    100% {
        transform: translateX(-140px);
    }
}

.gt-text {
    margin-bottom: 28px;
    height: 23px;
}

.gt-text.gt-text--2 {
    height: 55px;
}

.gt-text > img {
    margin: auto;
    display: block;
    width: auto;
    height: 100%;
}

.gtn-i-f {
    height: 98px;
}

.gtn-i-f > img {
    margin: auto;
    display: block;
    width: auto;
    height: 100%;
}


body.is-compact .gt-text {
    margin-bottom: 16px;
    height: 15px;
}

body.is-compact .gt-text.gt-text--2 {
    height: 35px;
}

body.is-compact .gtn-i-f {
    height: 56px;
}

body.is-compact .gtm-arrow {
    transform: scale(0.5);
}

body.is-compact .gtm-action-wrapper {
    margin-top: -40px;
    transform: scale(0.7);
    transform-origin: top;
}

body.is-compact .gtn-inner {
    transform: scale(0.7);
    transform-origin: top;
}

.gtm-cont-wrapper {
    width: 100%;
    min-height: 370px;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    margin-top: 40px;
}

.gtn-cont-wrapper {
    width: 100%;
    min-height: 370px;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    margin-top: 40px;
}

.gtm-box {
    width: 100%;

    max-width: 480px;
    margin: auto;
    padding: 0 20px;

    opacity: 0;
    transform: translateY(20px);

    transition: transform 200ms ease;

    pointer-events: none;
}

.gtm-box.visible {
    opacity: 1;
    transform: translateY(0);
}

.gtm-box .gtm-box-pc {
    display: block;
}

.gtm-box .gtm-box-m {
    display: none;
}

.gtn-cont + .gtn-cont {
    margin-top: 72px;
}

body.is-compact .gtm-cont-wrapper {
    min-height: 220px;
}

body.is-compact .gtn-cont-wrapper {
    min-height: 220px;
}

body.is-compact .gtm-box {
    padding: 0;
    max-width: 290px;
}

body.is-compact .gtm-box .gtm-box-pc {
    display: none;
}

body.is-compact .gtm-box .gtm-box-m {
    display: block;
}

body.is-compact .gtn-cont + .gtn-cont {
    margin-top: 42px;
}

.gto-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.c-b-wrapper {
    position: relative;
    z-index: 2;

    pointer-events: none;
}

.j-g {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;

    opacity: 0;
}

.h-g {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
}

.game--intro #hud .hud-row--top > * {
    opacity: 0;
}

.game--intro #hud-stage {
    opacity: 0;
}

.game--intro .frame-bottom-cont:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 30, 72, 0.70);

    opacity: 0;
}

.game--intro.outer-active #hud .hud-row--top > *,
.game--intro.outer-active #hud-stage,
.game--intro.outer-active .j-g,
.game--intro.outer-active .frame-bottom-cont::after {
    opacity: 1;
}

.fullscreen-guide {
    display: none;
}

body.needs-fullscreen .fullscreen-guide {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

body.needs-fullscreen .frame-top,
body.needs-fullscreen .game-tooltip--top,
body.needs-fullscreen #game,
body.needs-fullscreen .game-tooltip--outer,
body.needs-fullscreen .frame-bottom {
    opacity: 0;
    pointer-events: none;
}

.fg-text--kr {
    width: 370px;
}

.fg-text--en {
    width: 322px;
}

.fg-text--jp {
    width: 258px;
}

.fg-text .pt-pc {
    display: block;
}

.fg-text .pt-m {
    display: none;
}

body.is-mobile.needs-fullscreen .fg-text--kr {
    width: 221px;
}

body.is-mobile.needs-fullscreen .fg-text--en {
    width: 270px;
}

body.is-mobile.needs-fullscreen .fg-text--jp {
    width: 248px;
}

body.is-mobile.needs-fullscreen .fg-text .pt-pc {
    display: none;
}

body.is-mobile.needs-fullscreen .fg-text .pt-m {
    display: block;
}

.fullscreen-guide .gtm-item {
    margin-left: 42px;
    margin-right: 0;

    width: 122px;
    height: 80px;
    min-height: 80px;

    background-image: url('https://magazine.weverse.io/cont/s5/interactive/dib/assets/img/player/3-l.png');
    background-repeat: no-repeat;
    background-size: 976px 80px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    animation: gtm-item-sprite 800ms steps(8) infinite;
    will-change: background-position;
}

@keyframes scanlines {
    from {
        background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
        background-size: 100% 2px;
    }
    to {
        background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
        background-size: 100% 2px;
    }
}

@-webkit-keyframes scanlines {
    from {
        background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
        background-size: 100% 2px;
    }
    to {
        background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
        background-size: 100% 2px;
    }
}

.lines {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.4;
    will-change: opacity;
    -webkit-animation: opacity 8s linear infinite;
    animation: opacity 8s linear infinite;
}

.lines:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
    background-size: 100% 2px;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-animation: scanlines 0.8s linear infinite;
    animation: scanlines 0.8s linear infinite;
}

.e-cover {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.2;
}

.e-cover-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

body.is-compact .e-cover {
    opacity: 0.5;
}

#stage-notice-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 8;

    display: flex;
    justify-content: center;
    align-items: center;
}

#stage-notice-popup.visible {
    opacity: 1;
    pointer-events: auto;
}

.snp-cont {
    margin: auto;
    width: auto;
    height: 116px;
}

.snp-cont.snp-cont--en {
    margin: auto;
    width: auto;
    height: 96px;
}

body.is-compact .snp-cont {
    margin: auto;
    width: auto;
    height: 76px;
}

body.is-compact .snp-cont.snp-cont--en {
    margin: auto;
    width: auto;
    height: 66px;
}

.snp-cont > img {
    margin: auto;
    display: block;
    width: auto;
    height: 100%;
}