:root {
    color-scheme: dark;

    --bg: #070708;

    --glass: rgba(34, 34, 38, 0.84);
    --glass-strong: rgba(44, 44, 48, 0.92);
    --glass-soft: rgba(255, 255, 255, 0.055);

    --text: #f5f5f7;
    --muted: #9a9aa0;
    --muted-soft: #66666d;

    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.16);

    --accent: #f5f5f7;
    --accent-text: #111111;
}


/* ------------------------------
   Base
------------------------------ */

* {
    box-sizing: border-box;
}


html,
body {
    min-height: 100%;

    background: var(--bg);
}


html {
    overscroll-behavior: none;
}


body {
    margin: 0;

    background: var(--bg);
    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Pretendard",
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;
}


button,
a {
    font: inherit;

    -webkit-tap-highlight-color: transparent;
}


button {
    appearance: none;
}


button,
.game-stage {
    touch-action: manipulation;
}


/* ------------------------------
   App Shell
------------------------------ */

.app-shell {
    width: min(720px, calc(100% - 24px));

    min-height: 100dvh;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    padding:
        calc(22px + env(safe-area-inset-top)) 0 calc(72px + env(safe-area-inset-bottom));
}


/* ------------------------------
   Top Bar
------------------------------ */

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;
}


.brand {
    min-width: 0;
}


h1 {
    margin: 0 0 6px;

    font-size: 25px;
    font-weight: 760;

    letter-spacing: -0.04em;

    line-height: 1.15;
}


.site-subtitle {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;

    letter-spacing: -0.01em;
}


.developer {
    margin: 7px 0 0;

    color: var(--muted-soft);

    font-size: 10px;
    line-height: 1.4;
}


.developer a {
    color: var(--muted);

    text-decoration: none;

    transition: color 0.15s ease;
}


.developer a:hover {
    color: var(--text);
}


/* ------------------------------
   Language Button
------------------------------ */

.language-button {
    flex: 0 0 auto;

    min-width: 72px;

    border: 1px solid var(--line);
    border-radius: 11px;

    padding: 8px 10px;

    background: var(--glass);
    color: var(--text);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    cursor: pointer;

    font-size: 11px;
    font-weight: 700;

    transition:
        background 0.15s ease,
        transform 0.12s ease,
        border-color 0.15s ease;
}


.language-button:hover {
    background: var(--glass-strong);

    border-color: var(--line-strong);
}


.language-button:active {
    transform: scale(0.96);
}


/* ------------------------------
   Test Area
------------------------------ */

.test-area {
    flex: 0 0 auto;

    min-height: 0;

    display: flex;
    flex-direction: column;
}


/* ------------------------------
   Test Status
------------------------------ */

.test-status {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0 3px 8px;
}


.game-progress {
    color: var(--muted-soft);

    font-size: 10px;
    font-weight: 750;

    letter-spacing: 0.08em;
}


.game-name {
    color: var(--muted);

    font-size: 11px;
    font-weight: 650;
}


/* ------------------------------
   Main Game Card
------------------------------ */

.game-card {
    flex: 0 1 auto;

    height: min(620px,
            calc(100dvh - 230px));

    min-height: 430px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 24px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0)),
        var(--glass);

    backdrop-filter:
        blur(24px) saturate(120%);

    -webkit-backdrop-filter:
        blur(24px) saturate(120%);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/* ------------------------------
   Game Stage
------------------------------ */

.game-stage {
    flex: 1;

    min-height: 0;

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

    position: relative;

    padding: 26px;

    overflow: hidden;

    user-select: none;
    -webkit-user-select: none;
}


/* ------------------------------
   Start / Ready Screen
------------------------------ */

.start-panel {
    width: min(430px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* ------------------------------
   Game Instruction
------------------------------ */

.game-instruction-box {
    width: min(410px, 100%);

    margin-bottom: 30px;

    padding: 15px 18px;

    border: 1px solid var(--line);
    border-radius: 15px;

    background: var(--glass-soft);

    color: var(--text);

    font-size: 15px;
    font-weight: 720;

    line-height: 1.55;

    letter-spacing: -0.015em;

    text-align: center;
}


/* ------------------------------
   Start Mark
------------------------------ */

.start-mark {
    width: 74px;
    height: 74px;

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

    margin-bottom: 21px;

    border: 1px solid var(--line-strong);
    border-radius: 22px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.025));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 12px 26px rgba(0, 0, 0, 0.22);

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.04em;
}


/* ------------------------------
   Ready Text
------------------------------ */

.start-panel h2 {
    margin: 0;

    font-size: 23px;
    font-weight: 760;

    line-height: 1.25;

    letter-spacing: -0.035em;
}


.start-panel>p {
    max-width: 310px;

    margin: 10px 0 23px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.55;
}


/* ------------------------------
   Primary Button
------------------------------ */

.primary-button {
    width: min(260px, 100%);

    min-height: 46px;

    border: 0;
    border-radius: 14px;

    padding: 13px 18px;

    background: var(--accent);
    color: var(--accent-text);

    cursor: pointer;

    font-size: 14px;
    font-weight: 750;

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


.primary-button:hover {
    opacity: 0.92;
}


.primary-button:active {
    transform: scale(0.975);
}


/* ------------------------------
   Game Status
------------------------------ */

.game-status {
    min-height: 18px;

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

    padding: 0 14px 12px;

    color: var(--muted-soft);

    font-size: 11px;
    line-height: 1.4;

    text-align: center;
}


/* ------------------------------
   Footer
------------------------------ */

.site-footer {
    flex: 0 0 auto;

    padding-top: 14px;

    text-align: center;
}


.site-footer a {
    color: var(--muted-soft);

    font-size: 10px;
    line-height: 1.5;

    text-decoration: none;

    transition: color 0.15s ease;
}


.site-footer a:hover {
    color: var(--muted);
}


/* ------------------------------
   Mobile
------------------------------ */

@media (max-width: 520px) {

    .app-shell {
        width: min(calc(100% - 18px),
                720px);

        padding:
            calc(14px + env(safe-area-inset-top)) 0 calc(68px + env(safe-area-inset-bottom));
    }


    .topbar {
        gap: 10px;

        margin-bottom: 12px;
    }


    h1 {
        font-size: 20px;
    }


    .site-subtitle {
        font-size: 11px;
    }


    .developer {
        margin-top: 5px;

        font-size: 9px;
    }


    .language-button {
        min-width: 64px;

        padding: 7px 8px;

        border-radius: 10px;

        font-size: 10px;
    }


    .test-status {
        margin-bottom: 6px;
    }


    .game-card {
        height: min(560px,
                calc(100dvh - 220px));

        min-height: 390px;

        border-radius: 20px;
    }


    .game-stage {
        padding: 20px 16px;
    }


    .game-instruction-box {
        margin-bottom: 24px;

        padding: 13px 15px;

        border-radius: 13px;

        font-size: 14px;

        line-height: 1.5;
    }


    .start-mark {
        width: 64px;
        height: 64px;

        margin-bottom: 17px;

        border-radius: 19px;

        font-size: 18px;
    }


    .start-panel h2 {
        font-size: 20px;
    }


    .start-panel>p {
        margin: 8px 0 19px;

        font-size: 12px;
    }


    .primary-button {
        padding: 12px 16px;

        font-size: 13px;
    }


    .site-footer {
        padding-top: 14px;
    }
}

/* ------------------------------
   Reaction Game
------------------------------ */

.reaction-wrap {
    width: min(420px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;
}


.reaction-board {
    width: min(340px, 72vw);
    aspect-ratio: 1 / 1;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    grid-template-rows:
        repeat(2, 1fr);

    gap: 12px;
}


.reaction-tile {
    width: 100%;
    height: 100%;

    border: 1px solid var(--line);

    border-radius: 22px;

    background:
        rgba(255,
            255,
            255,
            0.045);

    box-shadow:
        inset 0 1px 0 rgba(255,
            255,
            255,
            0.035);

    cursor: pointer;

    transition:
        background 0.08s ease,
        border-color 0.08s ease,
        transform 0.08s ease,
        box-shadow 0.08s ease;
}


.reaction-tile.green {
    background:
        rgba(48,
            209,
            88,
            0.88);

    border-color:
        rgba(85,
            230,
            120,
            0.95);

    box-shadow:
        0 0 28px rgba(48,
            209,
            88,
            0.22);
}


.reaction-tile.red {
    background:
        rgba(255,
            69,
            58,
            0.88);

    border-color:
        rgba(255,
            95,
            86,
            0.95);

    box-shadow:
        0 0 28px rgba(255,
            69,
            58,
            0.20);
}


.reaction-tile.pressed {
    transform: scale(0.96);
}


.reaction-message {
    min-height: 32px;

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

    color: var(--muted);

    font-size: 22px;
    font-weight: 760;

    line-height: 1;
}


/* ------------------------------
   Reaction Result
------------------------------ */

.reaction-result {
    width: min(390px, 100%);

    text-align: center;
}


.reaction-result-label {
    margin-bottom: 8px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 650;
}


.reaction-result-score {
    margin-bottom: 8px;

    font-size: 54px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.05em;
}


.reaction-result-detail {
    margin: 0 0 24px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.65;
}


@media (max-width: 520px) {

    .reaction-board {
        width: min(310px,
                72vw);

        gap: 9px;
    }


    .reaction-tile {
        border-radius: 18px;
    }


    .reaction-message {
        font-size: 20px;
    }

}
.reaction-trial-counter {
    min-height: 20px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 750;

    letter-spacing: 0.06em;
}

/* ------------------------------
   Judgment Game
------------------------------ */

.judgment-wrap {
    width: min(440px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;
}


.judgment-hud {
    width: min(330px, 70vw);

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--muted);

    font-size: 12px;
    font-weight: 750;

    letter-spacing: 0.04em;
}


.judgment-timer {
    color: var(--text);

    font-size: 14px;
}


/* ------------------------------
   Board
------------------------------ */

.judgment-board {
    width: min(330px, 70vw);

    aspect-ratio: 1 / 1;

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-template-rows:
        repeat(3, 1fr);

    /*
        화살표를 보드 바깥에
        표시하기 위해 visible.
    */

    overflow: visible;

    border: 1px solid var(--line-strong);
    border-radius: 20px;

    background:
        rgba(0, 0, 0, 0.16);

    transition:
        box-shadow 0.12s ease,
        border-color 0.12s ease;
}


.judgment-cell {
    min-width: 0;
    min-height: 0;

    border: 0;

    border-right:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);

    background:
        rgba(255, 255, 255, 0.025);

    cursor: pointer;

    transition:
        background 0.12s ease,
        transform 0.12s ease;
}


/*
    3x3 오른쪽 끝
*/

.judgment-cell:nth-child(3n) {
    border-right: 0;
}


/*
    3x3 아래쪽 끝
*/

.judgment-cell:nth-child(n + 7) {
    border-bottom: 0;
}


/*
    보드 둥근 모서리
*/

.judgment-cell:nth-child(1) {
    border-top-left-radius: 19px;
}


.judgment-cell:nth-child(3) {
    border-top-right-radius: 19px;
}


.judgment-cell:nth-child(7) {
    border-bottom-left-radius: 19px;
}


.judgment-cell:nth-child(9) {
    border-bottom-right-radius: 19px;
}


.judgment-cell:hover {
    background:
        rgba(255, 255, 255, 0.055);
}


.judgment-cell:active {
    background:
        rgba(255, 255, 255, 0.08);
}


.judgment-cell.invalid {
    animation:
        judgmentInvalid 0.18s ease;
}


@keyframes judgmentInvalid {

    0% {
        background:
            rgba(255, 255, 255, 0.025);
    }

    50% {
        background:
            rgba(255, 255, 255, 0.12);
    }

    100% {
        background:
            rgba(255, 255, 255, 0.025);
    }

}


/* ------------------------------
   Player
------------------------------ */

.judgment-player {
    position: absolute;

    left: 0;
    top: 0;

    width: 33.333333%;
    height: 33.333333%;

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

    pointer-events: none;

    z-index: 5;

    transition:
        transform 250ms cubic-bezier(0.22,
            0.75,
            0.25,
            1);
}


.judgment-player.no-transition {
    transition: none;
}


.judgment-player-dot {
    width: 30%;
    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background: #f5f5f7;

    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.10),
        0 0 18px rgba(255, 255, 255, 0.18);
}


.judgment-player.hit .judgment-player-dot {
    animation:
        judgmentPlayerHit 0.42s ease;
}


@keyframes judgmentPlayerHit {

    0% {
        transform: scale(1);

        background: #f5f5f7;

        box-shadow:
            0 0 0 5px rgba(255, 255, 255, 0.10),
            0 0 18px rgba(255, 255, 255, 0.18);
    }

    20% {
        transform: scale(1.45);

        background: #ff453a;

        box-shadow:
            0 0 0 9px rgba(255, 69, 58, 0.22),
            0 0 30px rgba(255, 69, 58, 0.55);
    }

    45% {
        transform: scale(0.92);

        background: #ff453a;
    }

    70% {
        transform: scale(1.18);

        background: #ff6961;

        box-shadow:
            0 0 0 6px rgba(255, 69, 58, 0.15),
            0 0 20px rgba(255, 69, 58, 0.32);
    }

    100% {
        transform: scale(1);

        background: #f5f5f7;

        box-shadow:
            0 0 0 5px rgba(255, 255, 255, 0.10),
            0 0 18px rgba(255, 255, 255, 0.18);
    }

}


/* ------------------------------
   Attack Layer
------------------------------ */

.judgment-attack-layer {
    position: absolute;

    inset: 0;

    overflow: visible;

    pointer-events: none;

    z-index: 3;
}


.judgment-warning {
    position: absolute;

    pointer-events: none;
}


/* ------------------------------
   Row Attack
------------------------------ */

.judgment-warning.row {
    left: 0;

    top:
        calc(var(--attack-index) * 33.333333%);

    width: 100%;
    height: 33.333333%;
}


/* ------------------------------
   Column Attack
------------------------------ */

.judgment-warning.col {
    top: 0;

    left:
        calc(var(--attack-index) * 33.333333%);

    width: 33.333333%;
    height: 100%;
}


/* ------------------------------
   Warning Line
------------------------------ */

.judgment-warning-line {
    position: absolute;

    inset: 0;

    background: transparent;

    border: 1px solid transparent;
}


/*
    폭발 직전 0.25초만
    위험 행/열 표시
*/

.judgment-warning.danger .judgment-warning-line {
    background:
        rgba(255, 69, 58, 0.22);

    border-color:
        rgba(255, 69, 58, 0.55);

    animation:
        judgmentDanger 0.12s ease infinite alternate;
}


@keyframes judgmentDanger {

    from {
        opacity: 0.65;
    }

    to {
        opacity: 1;
    }

}


/* ------------------------------
   Warning Badge
------------------------------ */

.judgment-warning-badge {
    position: absolute;

    min-width: 48px;
    height: 38px;

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

    gap: 3px;

    padding: 5px 9px;

    border-radius: 11px;

    background:
        rgba(18, 18, 20, 0.96);

    border:
        1px solid rgba(255,
            69,
            58,
            0.48);

    color: #ff6961;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.30);

    font-size: 18px;
    font-weight: 850;

    line-height: 1;

    white-space: nowrap;

    z-index: 8;
}


/*
    좌측에서 들어오는 공격
    보드 왼쪽 바깥에 표시
*/

.judgment-warning.left .judgment-warning-badge {
    left: -58px;

    top: 50%;

    transform:
        translateY(-50%);
}


/*
    우측
*/

.judgment-warning.right .judgment-warning-badge {
    right: -58px;

    top: 50%;

    transform:
        translateY(-50%);
}


/*
    위
*/

.judgment-warning.top .judgment-warning-badge {
    top: -48px;

    left: 50%;

    transform:
        translateX(-50%);
}


/*
    아래
*/

.judgment-warning.bottom .judgment-warning-badge {
    bottom: -48px;

    left: 50%;

    transform:
        translateX(-50%);
}


/* ------------------------------
   Explosion
------------------------------ */

.judgment-explosion {
    position: absolute;

    pointer-events: none;

    z-index: 4;

    background:
        rgba(255, 69, 58, 0.58);

    box-shadow:
        0 0 22px rgba(255, 69, 58, 0.28);

    animation:
        judgmentExplosion 0.22s ease-out;
}


.judgment-explosion.row {
    left: 0;

    top:
        calc(var(--attack-index) * 33.333333%);

    width: 100%;
    height: 33.333333%;
}


.judgment-explosion.col {
    top: 0;

    left:
        calc(var(--attack-index) * 33.333333%);

    width: 33.333333%;
    height: 100%;
}


@keyframes judgmentExplosion {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}


.judgment-board.hit {
    animation:
        judgmentBoardHit 0.22s ease;
}


@keyframes judgmentBoardHit {

    0% {
        border-color:
            var(--line-strong);

        box-shadow: none;
    }

    25% {
        border-color:
            rgba(255, 69, 58, 1);

        box-shadow:
            0 0 0 3px rgba(255, 69, 58, 0.35);
    }

    65% {
        border-color:
            rgba(255, 69, 58, 0.95);

        box-shadow:
            0 0 0 2px rgba(255, 69, 58, 0.22);
    }

    100% {
        border-color:
            var(--line-strong);

        box-shadow: none;
    }

}

/* ------------------------------
   Message
------------------------------ */

.judgment-message {
    min-height: 28px;

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

    color: var(--muted);

    font-size: 22px;
    font-weight: 800;
}


/* ------------------------------
   Judgment Result
------------------------------ */

.judgment-result {
    width: min(390px, 100%);

    text-align: center;
}


.judgment-result-score {
    margin-bottom: 8px;

    font-size: 54px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.05em;
}


/* ------------------------------
   Mobile
------------------------------ */

@media (max-width: 520px) {

    .judgment-board,
    .judgment-hud {
        width: min(280px,
                68vw);
    }


    .judgment-board {
        border-radius: 17px;
    }


    .judgment-warning-badge {
        min-width: 42px;
        height: 34px;

        padding: 4px 7px;

        border-radius: 10px;

        font-size: 16px;
    }


    .judgment-warning.left .judgment-warning-badge {
        left: -49px;
    }


    .judgment-warning.right .judgment-warning-badge {
        right: -49px;
    }


    .judgment-warning.top .judgment-warning-badge {
        top: -43px;
    }


    .judgment-warning.bottom .judgment-warning-badge {
        bottom: -43px;
    }

}

/* ------------------------------
   Development Menu
------------------------------ */

.dev-panel {
    width: min(390px, 100%);

    margin-top: 24px;
    padding-top: 18px;

    border-top:
        1px solid var(--line);
}


.dev-label {
    margin-bottom: 9px;

    color: var(--muted-soft);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.12em;
}


.dev-buttons {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}


.dev-button {
    min-height: 34px;

    border:
        1px solid var(--line);

    border-radius: 10px;

    padding: 7px 9px;

    background:
        rgba(255,
            255,
            255,
            0.045);

    color: var(--muted);

    cursor: pointer;

    font-size: 10px;
    font-weight: 650;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease;
}


.dev-button:hover:not(:disabled) {
    background:
        rgba(255,
            255,
            255,
            0.09);

    color: var(--text);
}


.dev-button:active:not(:disabled) {
    transform: scale(0.97);
}


.dev-button:disabled {
    opacity: 0.3;

    cursor: default;
}

/* ------------------------------
   Multitasking Game
------------------------------ */

.multitask-wrap {
    width: min(440px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;
}


.multitask-hud {
    width: min(360px, 78vw);

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--muted);

    font-size: 12px;
    font-weight: 750;

    letter-spacing: 0.04em;
}


.multitask-timer {
    color: var(--text);

    font-size: 14px;
}


.multitask-body {
    width: min(360px, 78vw);
}


.multitask-field {
    width: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid var(--line-strong);

    border-radius: 20px;

    background:
        rgba(0, 0, 0, 0.16);

    touch-action: none;
}


/* ------------------------------
   Memory Zone
------------------------------ */

.multitask-memory-zone {
    height: 150px;

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

    border-bottom:
        1px solid var(--line);

    background:
        rgba(255, 255, 255, 0.025);
}


.multitask-symbol {
    min-width: 90px;

    text-align: center;

    color: #f5f5f7;

    font-size: 74px;
    font-weight: 700;

    line-height: 1;

    opacity: 0;

    transform: scale(0.92);
}


.multitask-symbol.red {
    color: #ff453a;
}


.multitask-symbol.show {
    animation:
        multitaskSymbolShow 0.18s ease forwards;
}


@keyframes multitaskSymbolShow {

    from {
        opacity: 0;
        transform: scale(0.86);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* ------------------------------
   Dodge Zone
------------------------------ */

.multitask-dodge-zone {
    height: 245px;

    position: relative;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.012);
}


.multitask-lanes {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.multitask-lanes span {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        var(--line);
}


.multitask-lanes span:nth-child(1) {
    left: 25%;
}


.multitask-lanes span:nth-child(2) {
    left: 50%;
}


.multitask-lanes span:nth-child(3) {
    left: 75%;
}

.multitask-direction-hint {
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        rgba(255, 255, 255, 0.10);

    font-size: 34px;
    font-weight: 800;

    line-height: 1;

    pointer-events: none;

    z-index: 1;

    user-select: none;
}


.multitask-direction-hint.left {
    left: 16px;
}


.multitask-direction-hint.right {
    right: 16px;
}


/* ------------------------------
   Player
------------------------------ */

.multitask-player {
    position: absolute;

    left: 43.75%;
    bottom: 14px;

    width: 12.5%;
    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background:
        #f5f5f7;

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.10),

        0 0 16px rgba(255, 255, 255, 0.18);

    z-index: 4;
}


.multitask-player.hit {
    animation:
        multitaskPlayerHit 0.26s ease;
}


@keyframes multitaskPlayerHit {

    0% {
        transform: scale(1);

        background:
            #f5f5f7;
    }

    35% {
        transform: scale(1.35);

        background:
            #ff453a;

        box-shadow:
            0 0 0 7px rgba(255, 69, 58, 0.18),

            0 0 24px rgba(255, 69, 58, 0.45);
    }

    100% {
        transform: scale(1);

        background:
            #f5f5f7;
    }

}


/* ------------------------------
   Obstacles
------------------------------ */

.multitask-obstacle-layer {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.multitask-obstacle {
    position: absolute;

    top: -18%;

    height: 13%;

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.20);

    border:
        1px solid rgba(255, 255, 255, 0.22);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ------------------------------
   Question
------------------------------ */

.multitask-question {
    min-height: 395px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 18px;

    padding: 24px;
}


.multitask-question-title {
    color: var(--text);

    font-size: 16px;
    font-weight: 750;

    text-align: center;
}


.multitask-choices {
    display: grid;

    gap: 10px;
}


.multitask-choice {
    min-height: 58px;

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

    gap: 10px;

    border:
        1px solid var(--line);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.045);

    color: var(--text);

    cursor: pointer;

    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        transform 0.12s ease;
}


.multitask-choice:hover {
    background:
        rgba(255, 255, 255, 0.075);
}


.multitask-choice:active {
    transform:
        scale(0.98);
}


.multitask-choice.correct {
    border-color:
        rgba(48, 209, 88, 0.75);

    background:
        rgba(48, 209, 88, 0.14);
}


.multitask-choice.wrong {
    border-color:
        rgba(255, 69, 58, 0.75);

    background:
        rgba(255, 69, 58, 0.14);
}


.multitask-choice:disabled {
    cursor: default;
}


.multitask-choice-symbol {
    color: #f5f5f7;

    font-size: 27px;
    font-weight: 700;

    line-height: 1;
}


.multitask-choice-symbol.red {
    color: #ff453a;
}

.multitask-transition {
    min-height: 395px;

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

    color: var(--text);

    font-size: 22px;
    font-weight: 800;

    letter-spacing: 0.08em;
}


/* ------------------------------
   Mobile
------------------------------ */

@media (max-width: 520px) {

    .multitask-hud,
    .multitask-body {
        width: min(320px,
                80vw);
    }


    .multitask-memory-zone {
        height: 125px;
    }


    .multitask-symbol {
        font-size: 62px;
    }


    .multitask-dodge-zone {
        height: 220px;
    }


    .multitask-field {
        border-radius: 17px;
    }


    .multitask-question {
        min-height: 345px;

        padding: 18px;

        gap: 14px;
    }


    .multitask-choice {
        min-height: 52px;
    }


    .multitask-choice-symbol {
        font-size: 24px;
    }

}

/* ------------------------------
   Precision Game
------------------------------ */

.precision-wrap {
    width: min(440px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 22px;
}


.precision-hud {
    width: min(360px, 78vw);

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--muted);

    font-size: 12px;
    font-weight: 750;

    letter-spacing: 0.04em;
}


.precision-timer {
    color: var(--text);

    font-size: 14px;
}


/* ------------------------------
   Track
------------------------------ */

.precision-track-wrap {
    width: min(360px, 78vw);

    padding: 34px 0;
}


.precision-track {
    width: 100%;
    height: 86px;

    position: relative;

    overflow: hidden;

    border:
        1px solid var(--line-strong);

    border-radius: 18px;

    background:
        rgba(0, 0, 0, 0.18);
}


/* ------------------------------
   Target
------------------------------ */

.precision-target {
    position: absolute;

    top: 0;
    bottom: 0;

    background:
        rgba(48, 209, 88, 0.18);

    border-left:
        1px solid rgba(48, 209, 88, 0.55);

    border-right:
        1px solid rgba(48, 209, 88, 0.55);
}


.precision-target-center {
    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    transform:
        translateX(-50%);

    background:
        rgba(105, 255, 145, 0.38);
}


/* ------------------------------
   Ball
------------------------------ */

.precision-ball {
    position: absolute;

    top: 50%;

    width: 22px;
    height: 22px;

    transform:
        translate(-50%,
            -50%);

    border-radius: 50%;

    background:
        #f5f5f7;

    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.10),

        0 0 18px rgba(255, 255, 255, 0.18);

    z-index: 3;
}


/* ------------------------------
   STOP Button
------------------------------ */

.precision-stop-button {
    width: min(260px, 100%);

    min-height: 62px;

    border: 0;

    border-radius: 16px;

    background:
        var(--accent);

    color:
        var(--accent-text);

    cursor: pointer;

    font-size: 18px;
    font-weight: 850;

    letter-spacing: 0.04em;

    transition:
        transform 0.10s ease,
        opacity 0.15s ease;
}


.precision-stop-button:active {
    transform:
        scale(0.97);
}


.precision-stop-button:disabled {
    opacity: 0.55;

    cursor: default;
}


/* ------------------------------
   Feedback
------------------------------ */

.precision-feedback {
    min-height: 30px;

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

    color: var(--muted);

    font-size: 18px;
    font-weight: 800;
}


.precision-feedback.correct {
    color:
        #30d158;
}


.precision-feedback.wrong {
    color:
        #ff453a;
}


/* ------------------------------
   Mobile
------------------------------ */

@media (max-width: 520px) {

    .precision-hud,
    .precision-track-wrap {
        width: min(320px,
                80vw);
    }


    .precision-track {
        height: 78px;

        border-radius: 16px;
    }


    .precision-ball {
        width: 20px;
        height: 20px;
    }


    .precision-stop-button {
        min-height: 58px;

        font-size: 17px;
    }

}

/* ==================================
   Prediction Game
================================== */

.prediction-wrap {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;
}


.prediction-hud {
    width: min(420px, 100%);

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: var(--muted);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.04em;
}


.prediction-timer {
    color: var(--text);

    font-variant-numeric:
        tabular-nums;
}


.prediction-message {
    min-height: 24px;

    color: var(--text);

    font-size: 14px;
    font-weight: 750;

    letter-spacing: 0.05em;
}


/* ------------------------------
   Board Shell
------------------------------ */

.prediction-board-shell {
    position: relative;

    width:
        min(360px,
            calc(100% - 76px));

    aspect-ratio: 1 / 1;

    margin:
        34px auto;
}


.prediction-board {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border:
        1px solid var(--line-strong);

    border-radius: 20px;

    background:
        rgba(255,
            255,
            255,
            0.035);
}


/* ------------------------------
   Mirrors
------------------------------ */

.prediction-mirror-layer {
    position: absolute;

    inset: 0;

    z-index: 3;
}


.prediction-mirror {
    position: absolute;

    width: 38px;
    height: 38px;

    transform:
        translate(-50%,
            -50%);

    pointer-events: none;
}


.prediction-mirror::before {
    content: "";

    position: absolute;

    left: 4px;
    right: 4px;

    top: 50%;

    height: 4px;

    border-radius: 999px;

    background:
        rgba(245,
            245,
            247,
            0.88);

    transform-origin:
        center;
}


.prediction-mirror.slash::before {
    transform:
        translateY(-50%) rotate(-45deg);
}


.prediction-mirror.backslash::before {
    transform:
        translateY(-50%) rotate(45deg);
}


/* ------------------------------
   Start Ball + Vector
------------------------------ */

.prediction-start {
    position: absolute;

    z-index: 5;

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

    transform:
        translate(-50%,
            -50%);

    pointer-events: none;
}


.prediction-start-dot {
    width: 15px;
    height: 15px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--text);

    box-shadow:
        0 0 0 4px rgba(255,
            255,
            255,
            0.10);
}


.prediction-start-arrow {
    position: absolute;

    color: rgba(255, 214, 10, 1);

    font-size: 32px;
    font-weight: 900;

    line-height: 1;

    text-shadow:
        0 0 8px rgba(255, 214, 10, 0.35);

    pointer-events: none;
}


/* 위 */

.prediction-start.up .prediction-start-arrow {
    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);
}


/* 아래 */

.prediction-start.down .prediction-start-arrow {
    left: 50%;
    top: 18px;

    transform:
        translateX(-50%);
}


/* 왼쪽 */

.prediction-start.left .prediction-start-arrow {
    right: 18px;
    top: 50%;

    transform:
        translateY(-50%);
}


/* 오른쪽 */

.prediction-start.right .prediction-start-arrow {
    left: 18px;
    top: 50%;

    transform:
        translateY(-50%);
}



/* ------------------------------
   Blackout
------------------------------ */

.prediction-blackout {
    position: absolute;

    inset: 0;

    z-index: 10;

    border-radius:
        inherit;

    background:
        #050506;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.16s ease;
}


.prediction-blackout.active {
    opacity: 1;
}


/* ------------------------------
   Exit Buttons
------------------------------ */

.prediction-exit {
    position: absolute;

    z-index: 20;

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

    border:
        1px solid var(--line-strong);

    background:
        rgba(255,
            255,
            255,
            0.035);

    color:
        var(--text);

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        border-color 0.12s ease,
        background 0.12s ease,
        transform 0.12s ease;

    user-select: none;
}


.prediction-exit:disabled {
    cursor: default;
}


/* ------------------------------
   Top Exits
------------------------------ */

.prediction-exit.exit-a,
.prediction-exit.exit-b {
    top: -30px;

    width: 40%;
    height: 28px;

    border-radius:
        9px 9px 4px 4px;
}


.prediction-exit.exit-a {
    left: 5%;
}


.prediction-exit.exit-b {
    left: 55%;
}


/* ------------------------------
   Right Exits
------------------------------ */

.prediction-exit.exit-c,
.prediction-exit.exit-d {
    right: -30px;

    width: 28px;
    height: 40%;

    border-radius:
        4px 9px 9px 4px;
}


.prediction-exit.exit-c {
    top: 5%;
}


.prediction-exit.exit-d {
    top: 55%;
}


/* ------------------------------
   Bottom Exits
------------------------------ */

.prediction-exit.exit-e,
.prediction-exit.exit-f {
    bottom: -30px;

    width: 40%;
    height: 28px;

    border-radius:
        4px 4px 9px 9px;
}


.prediction-exit.exit-f {
    left: 5%;
}


.prediction-exit.exit-e {
    left: 55%;
}


/* ------------------------------
   Left Exits
------------------------------ */

.prediction-exit.exit-g,
.prediction-exit.exit-h {
    left: -30px;

    width: 28px;
    height: 40%;

    border-radius:
        9px 4px 4px 9px;
}


.prediction-exit.exit-h {
    top: 5%;
}


.prediction-exit.exit-g {
    top: 55%;
}


/* ------------------------------
   Press
------------------------------ */

.prediction-exit:not(:disabled):active {
    transform:
        scale(0.96);
}


/* ------------------------------
   Answer
------------------------------ */

.prediction-exit.correct {
    border-color:
        rgba(52,
            199,
            89,
            0.95);

    background:
        rgba(52,
            199,
            89,
            0.20);
}


.prediction-exit.wrong {
    border-color:
        rgba(255,
            69,
            58,
            0.95);

    background:
        rgba(255,
            69,
            58,
            0.18);
}


.prediction-exit.correct {
    border-color:
        rgba(52,
            199,
            89,
            0.95);

    background:
        rgba(52,
            199,
            89,
            0.20);
}


.prediction-exit.wrong {
    border-color:
        rgba(255,
            69,
            58,
            0.95);

    background:
        rgba(255,
            69,
            58,
            0.18);
}


/* ------------------------------
   Path Reveal
------------------------------ */

.prediction-path {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 4;

    pointer-events: none;
}


.prediction-path-line {
    fill: none;

    stroke:
        rgba(255,
            214,
            10,
            0.95);

    stroke-width: 1.6;

    vector-effect:
        non-scaling-stroke;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ------------------------------
   Feedback
------------------------------ */

.prediction-feedback {
    min-height: 30px;

    font-size: 18px;
    font-weight: 800;

    text-align: center;
}


.prediction-feedback.correct {
    color:
        rgba(52,
            199,
            89,
            1);
}


.prediction-feedback.wrong {
    color:
        rgba(255,
            99,
            92,
            1);
}


.prediction-generation-error {
    margin: auto;

    color: var(--muted);

    text-align: center;
}


/* ==================================
   Prediction Mobile
================================== */

@media (max-width: 520px) {

    .prediction-board-shell {
        width:
            min(300px,
                calc(100% - 70px));

        margin:
            32px auto;
    }


    .prediction-mirror {
        width: 32px;
        height: 32px;
    }


    .prediction-exit {
        width: 36px;
        height: 36px;
    }

}

/* ==================================
   Final Result
================================== */

.result-page {
    width: 100%;

    display: flex;
    justify-content: center;
}


.result-content {
    width: min(620px,
            100%);
}


.final-result {
    width: 100%;

    padding:
        34px 28px;

    border:
        1px solid var(--line);

    border-radius:
        28px;

    background:
        var(--glass);

    text-align: center;
}


.final-result-label {
    color:
        var(--muted);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.06em;
}


.final-result-total {
    margin-top: 4px;

    color:
        var(--text);

    font-size: 54px;
    font-weight: 850;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.final-result-total span {
    color:
        var(--muted);

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.02em;
}


.final-result-title-label {
    margin-top: 28px;

    color:
        var(--muted);

    font-size: 12px;
    font-weight: 700;
}


.final-result-title {
    margin-top: 7px;

    color:
        var(--text);

    font-size: 31px;
    font-weight: 850;

    letter-spacing: -0.035em;
}


.result-title-en {
    margin-top: 4px;

    color:
        var(--muted);

    font-size: 14px;
    font-weight: 650;
}


.result-radar-wrap {
    width:
        min(460px,
            100%);

    margin:
        18px auto 6px;
}


.result-radar {
    display: block;

    width: 100%;

    aspect-ratio:
        1 / 1;
}


.result-actions {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 10px;
}


.result-secondary-button {
    min-height: 46px;

    padding:
        0 20px;

    border:
        1px solid var(--line-strong);

    border-radius:
        14px;

    background:
        var(--glass-soft);

    color:
        var(--text);

    font-size: 14px;
    font-weight: 750;

    cursor: pointer;
}


.result-share-status {
    min-height: 20px;

    margin-top: 10px;

    color:
        var(--muted);

    font-size: 12px;
}


.result-error {
    padding:
        60px 20px;

    color:
        var(--muted);

    text-align: center;
}


@media (max-width: 520px) {

    .final-result {
        padding:
            28px 16px;

        border-radius:
            22px;
    }


    .final-result-total {
        font-size: 46px;
    }


    .final-result-title {
        font-size: 27px;
    }


    .result-radar-wrap {
        width: 100%;
    }


    .result-actions {
        flex-direction: column;
    }


    .result-actions .primary-button,
    .result-secondary-button {
        width: 100%;
    }

}

#adfitBottomWrap {
    width: 100%;

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

    margin:
        18px auto 8px;
}


#adfitBottomWrap .kakao_ad_area {
    display: block;

    max-width: 100%;
}