/*
 * ================================================================
 * 難攻不落 - Web Puzzle
 * game.css
 * ================================================================
 *
 * DESIGN:
 * ・Dark / Cyber / Futuristic
 * ・Neon Pink × Cyan
 * ・Industrial Terminal
 * ・「難攻不落」をメインビジュアルとして強調
 *
 * ================================================================
 */


/* ================================================================
 * Root
 * ================================================================ */

:root {

    --bg:
        #030608;

    --panel:
        rgba(5, 11, 15, 0.88);

    --panel-light:
        rgba(255, 255, 255, 0.035);

    --white:
        #f2f5f4;

    --white-soft:
        rgba(255,255,255,0.58);

    --white-dim:
        rgba(255,255,255,0.28);

    --gray:
        #899499;

    --line:
        rgba(255,255,255,0.13);

    --line-bright:
        rgba(255,255,255,0.28);

    --pink:
        #ff315d;

    --pink-light:
        #ff6f8d;

    --pink-dark:
        #6f0b27;

    --cyan:
        #6ffff0;

    --danger:
        #ff174f;

    --pink-soft:
        rgba(255,49,93,0.12);

    --cyan-soft:
        rgba(111,255,240,0.10);

    --shadow-pink:
        0 0 10px rgba(255,49,93,0.70),
        0 0 30px rgba(255,49,93,0.35);

    --shadow-cyan:
        0 0 10px rgba(111,255,240,0.60),
        0 0 30px rgba(111,255,240,0.25);

    --mono:
        "IBM Plex Mono",
        "DM Mono",
        "Courier New",
        monospace;

    --tech:
        "Chakra Petch",
        sans-serif;

    --body:
        "Space Grotesk",
        "Noto Sans JP",
        sans-serif;

    --jp:
        "Noto Serif JP",
        serif;

}



/* ================================================================
 * Reset
 * ================================================================ */

* {
    box-sizing: border-box;
}

html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,30,80,0.07),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(0,255,240,0.06),
            transparent 40%
        ),
        var(--bg);

}

html {
    background: var(--bg);
}

body {

    font-family:
        var(--body);

    color:
        var(--white);

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}



/* ================================================================
 * Background Image
 * ================================================================ */

.background-image {

    position: fixed;
    inset: -50px;

    width:
        calc(100% + 100px);

    height:
        calc(100% + 100px);

    pointer-events:
        none;

    background-image:
        url("images/Furaku.png");

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    filter:
        blur(13px)
        saturate(0.75)
        contrast(1.15);

    transform:
        scale(1.045);

    opacity:
        0.24;

    z-index:
        0;

}



/* ================================================================
 * Background Overlay
 * ================================================================ */

.background-overlay {

    position: fixed;
    inset: 0;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(3,6,8,0.24) 0%,
            rgba(3,6,8,0.68) 58%,
            rgba(2,4,6,0.94) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,0.38),
            transparent 25%,
            transparent 70%,
            rgba(0,0,0,0.72)
        );

    z-index:
        1;

}



/* ================================================================
 * Background Grid
 * ================================================================ */

.background-grid {

    position: fixed;
    inset: 0;

    pointer-events:
        none;

    background-image:
        linear-gradient(
            rgba(111,255,240,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(111,255,240,0.025) 1px,
            transparent 1px
        );

    background-size:
        44px 44px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 78%
        );

    opacity:
        0.75;

    z-index:
        2;

}



/* ================================================================
 * Background Noise
 * ================================================================ */

.background-noise {

    position: fixed;
    inset: 0;

    pointer-events:
        none;

    opacity:
        0.035;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    z-index:
        3;

}



/* ================================================================
 * Main Container
 * ================================================================ */

.game-container {

    position:
        relative;

    z-index:
        4;

    width:
        min(
            780px,
            calc(100% - 32px)
        );

    margin:
        0 auto;

    padding:
        48px 0 76px;

}



/* ================================================================
 * Header
 * ================================================================ */

.game-header {

    position:
        relative;

    text-align:
        center;

    margin-bottom:
        46px;

    padding:
        28px 20px 30px;

    border:
        1px solid
        rgba(255,49,93,0.65);

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

    box-shadow:
        var(--shadow-pink);

    overflow:
        hidden;

}



/* pink top line */

.game-header::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pink),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(255,49,93,0.75);

}



/* cyan bottom line */

.game-header::after {

    content:
        "";

    position:
        absolute;

    bottom:
        0;

    left:
        15%;

    width:
        70%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(111,255,240,0.5);

}



/* ================================================================
 * Header Labels
 * ================================================================ */

.system-label,
.header-system {

    margin-bottom:
        10px;

    font-family:
        var(--tech);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.42em;

    color:
        var(--pink-light);

    text-transform:
        uppercase;

}



/* ================================================================
 * Main Title
 * ================================================================ */

.game-header h1,
.game-title {

    position:
        relative;

    margin:
        0;

    font-family:
        var(--jp);

    font-size:
        clamp(
            55px,
            12vw,
            100px
        );

    font-weight:
        900;

    letter-spacing:
        0.08em;

    line-height:
        0.98;

    color:
        var(--pink);

    text-shadow:
        2px 2px 0
        var(--pink-dark),

        -1px 0 0
        var(--cyan),

        0 0 10px
        rgba(255,49,93,0.85),

        0 0 30px
        rgba(255,49,93,0.42);

    transform:
        skewX(-5deg);

    filter:
        saturate(1.15);

}



/* ================================================================
 * Title Glitch Accent
 * ================================================================ */

.game-header h1::before,
.game-title::before {

    content:
        "難攻不落";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    transform:
        translateX(-50%)
        translateX(-2px);

    width:
        100%;

    color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(111,255,240,0.22);

    pointer-events:
        none;

}



/* ================================================================
 * Header Status
 * ================================================================ */

.header-status,
.game-subtitle {

    margin-top:
        17px;

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        0.38em;

    color:
        var(--cyan);

    opacity:
        0.72;

}



/* ================================================================
 * Mission
 * ================================================================ */

.mission {

    position:
        relative;

    padding:
        25px 28px 26px;

    margin-bottom:
        24px;

    border:
        1px solid
        rgba(111,255,240,0.25);

    border-left:
        3px solid
        var(--cyan);

    border-radius:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(0,8,12,0.88),
            rgba(5,11,15,0.68)
        );

    backdrop-filter:
        blur(12px);

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

    overflow:
        hidden;

}



/* corner */

.mission::before {

    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        -1px;

    width:
        42px;

    height:
        42px;

    border-top:
        1px solid
        var(--cyan);

    border-left:
        1px solid
        var(--cyan);

    opacity:
        0.8;

}



.mission::after {

    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        90px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan)
        );

    box-shadow:
        0 0 8px
        rgba(111,255,240,0.45);

}



/* ================================================================
 * Mission Label
 * ================================================================ */

.mission-label {

    margin-bottom:
        12px;

    font-family:
        var(--mono);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.34em;

    color:
        var(--cyan);

}



/* ================================================================
 * Mission Text
 * ================================================================ */

.mission-text {

    margin:
        0;

    font-family:
        var(--jp);

    font-size:
        19px;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    color:
        var(--white);

    text-shadow:
        0 0 12px
        rgba(255,255,255,0.08);

}



/* ================================================================
 * Operation Guide
 * ================================================================ */

.operation-guide {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px 24px;

    margin-bottom:
        32px;

}



.guide-item {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}



.guide-key {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        50px;

    height:
        25px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(111,255,240,0.20);

    border-radius:
        2px;

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

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        0.05em;

    color:
        var(--cyan);

    box-shadow:
        inset 0 0 12px
        rgba(111,255,240,0.025);

}



.guide-description,
.guide-text {

    font-family:
        "Noto Sans JP",
        sans-serif;

    font-size:
        10px;

    letter-spacing:
        0.03em;

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

}



/* ================================================================
 * Puzzle Board
 * ================================================================ */

.puzzle-board {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    width:
        100%;

    position:
        relative;

}



/* ================================================================
 * Puzzle Group
 * ================================================================ */

.puzzle-group {

    position:
        relative;

    width:
        100%;

    padding:
        17px 18px 19px;

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

    border-left:
        2px solid
        rgba(255,49,93,0.42);

    border-radius:
        2px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.040),
            rgba(255,255,255,0.012)
        );

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 10px 35px
        rgba(0,0,0,0.18),

        inset 0 1px 0
        rgba(255,255,255,0.035);

    overflow:
        hidden;

    transition:
        transform 320ms cubic-bezier(0.22,1,0.36,1),
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}



/* top accent */

.puzzle-group::before {

    content:
        "";

    position:
        absolute;

    left:
        18px;

    right:
        18px;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            rgba(255,49,93,0.08),
            transparent
        );

    opacity:
        0.65;

    pointer-events:
        none;

}



.puzzle-group:hover {

    border-color:
        rgba(255,49,93,0.42);

    border-left-color:
        var(--pink);

    background:
        linear-gradient(
            135deg,
            rgba(255,49,93,0.055),
            rgba(255,255,255,0.018)
        );

    box-shadow:
        0 14px 40px
        rgba(0,0,0,0.22),

        0 0 20px
        rgba(255,49,93,0.045),

        inset 0 1px 0
        rgba(255,255,255,0.05);

}



/* ================================================================
 * Group Header
 * ================================================================ */

.group-header {

    display:
        grid;

    grid-template-columns:
        48px
        1fr
        auto;

    align-items:
        center;

    min-height:
        40px;

    margin-bottom:
        14px;

}



/* ================================================================
 * Group Number
 * ================================================================ */

.group-number {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border:
        1px solid
        rgba(255,49,93,0.45);

    border-radius:
        2px;

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

    font-family:
        var(--mono);

    font-size:
        11px;

    font-weight:
        500;

    color:
        var(--pink-light);

    box-shadow:
        inset 0 0 15px
        rgba(255,49,93,0.025);

}



.group-number::before {

    content:
        "";

    position:
        absolute;

    width:
        6px;

    height:
        6px;

    top:
        -1px;

    left:
        -1px;

    border-top:
        1px solid
        var(--pink);

    border-left:
        1px solid
        var(--pink);

}



/* ================================================================
 * Order Text
 * ================================================================ */

.order-text {

    font-family:
        var(--mono);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.30em;

    color:
        rgba(111,255,240,0.48);

}



/* ================================================================
 * Move Controls
 * ================================================================ */

.move-controls {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

}



.move-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        27px;

    padding:
        0;

    border:
        1px solid
        rgba(111,255,240,0.20);

    border-radius:
        2px;

    background:
        rgba(111,255,240,0.02);

    color:
        rgba(111,255,240,0.72);

    font-family:
        sans-serif;

    font-size:
        15px;

    line-height:
        1;

    cursor:
        pointer;

    user-select:
        none;

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

}



.move-button:hover:not(:disabled) {

    background:
        rgba(111,255,240,0.08);

    border-color:
        var(--cyan);

    color:
        #ffffff;

    box-shadow:
        var(--shadow-cyan);

    transform:
        scale(1.04);

}



.move-button:active:not(:disabled) {

    transform:
        scale(0.92);

}



.move-button:disabled {

    opacity:
        0.16;

    cursor:
        default;

    transform:
        none;

}



/* ================================================================
 * Choice Area
 * ================================================================ */

.choice-area {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    gap:
        13px;

}



/* ================================================================
 * Selection Window
 * ================================================================ */

.selection-window {

    position:
        relative;

    width:
        148px;

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(111,255,240,0.52);

    border-radius:
        2px;

    background:
        radial-gradient(
            circle at center,
            rgba(111,255,240,0.055),
            rgba(0,0,0,0.20)
        );

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

        inset 0 0 30px
        rgba(111,255,240,0.025),

        0 0 18px
        rgba(111,255,240,0.055);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}



/* corner marks */

.selection-window::before,
.selection-window::after {

    content:
        "";

    position:
        absolute;

    width:
        9px;

    height:
        9px;

    pointer-events:
        none;

}



.selection-window::before {

    left:
        -1px;

    top:
        -1px;

    border-left:
        2px solid
        var(--pink);

    border-top:
        2px solid
        var(--pink);

    box-shadow:
        0 0 8px
        rgba(255,49,93,0.6);

}



.selection-window::after {

    right:
        -1px;

    bottom:
        -1px;

    border-right:
        2px solid
        var(--cyan);

    border-bottom:
        2px solid
        var(--cyan);

    box-shadow:
        0 0 8px
        rgba(111,255,240,0.6);

}



/* ================================================================
 * Selected Item
 * ================================================================ */

.selected-item {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--white);

    font-family:
        var(--body);

    font-size:
        31px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.03em;

    user-select:
        none;

    pointer-events:
        none;

    overflow:
        hidden;

    text-shadow:
        0 0 8px
        rgba(255,49,93,0.18),

        0 0 18px
        rgba(111,255,240,0.10);

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

}



.selected-item.is-item-moving {

    opacity:
        0;

    transform:
        scale(0.88)
        translateX(4px);

}



/* ================================================================
 * Horizontal Move Buttons
 * ================================================================ */

.item-move-button {

    width:
        50px;

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    padding:
        0;

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

    border-radius:
        2px;

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

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

    font-family:
        sans-serif;

    font-size:
        23px;

    line-height:
        1;

    cursor:
        pointer;

    user-select:
        none;

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

}



.item-move-button:hover:not(:disabled) {

    background:
        rgba(255,49,93,0.09);

    border-color:
        var(--pink);

    color:
        #ffffff;

    box-shadow:
        var(--shadow-pink);

    transform:
        scale(1.035);

}



.item-move-button:active:not(:disabled) {

    transform:
        scale(0.94);

}



.item-move-button:disabled {

    opacity:
        0.17;

    cursor:
        default;

    transform:
        none;

}



/* ================================================================
 * Old Choice UI
 * ================================================================ */

.group-buttons,
.choice-button,
.choice-button.selected {

    display:
        none !important;

}



/* ================================================================
 * Moving State
 * ================================================================ */

.puzzle-board.is-moving,
.puzzle-board.is-moving-items {

    pointer-events:
        none;

}



/* ================================================================
 * Board Error
 * ================================================================ */

.puzzle-board.board-error .puzzle-group {

    animation:
        puzzle-error
        0.65s ease;

}



@keyframes puzzle-error {

    0%,
    100% {

        transform:
            translateX(0);

    }

    15% {

        transform:
            translateX(-6px);

    }

    30% {

        transform:
            translateX(6px);

    }

    45% {

        transform:
            translateX(-4px);

    }

    60% {

        transform:
            translateX(4px);

    }

    75% {

        transform:
            translateX(-2px);

    }

}



/* ================================================================
 * Board Clear
 * ================================================================ */

.puzzle-board.board-clear .puzzle-group {

    border-color:
        rgba(111,255,240,0.55);

    border-left-color:
        var(--cyan);

    background:
        linear-gradient(
            135deg,
            rgba(111,255,240,0.075),
            rgba(111,255,240,0.025)
        );

    box-shadow:
        0 0 35px
        rgba(111,255,240,0.07),

        inset 0 0 30px
        rgba(111,255,240,0.025);

}



/* ================================================================
 * Answer Area
 * ================================================================ */

.answer-area {

    margin-top:
        38px;

    text-align:
        center;

}



.answer-label {

    margin-bottom:
        15px;

    font-family:
        var(--mono);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.38em;

    color:
        var(--pink-light);

}



.selected-preview {

    display:
        none !important;

}



/* ================================================================
 * Enter Button
 * ================================================================ */

.enter-button {

    position:
        relative;

    width:
        min(
            340px,
            100%
        );

    height:
        60px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    padding:
        0;

    border:
        1px solid
        rgba(255,49,93,0.70);

    border-radius:
        2px;

    background:
        linear-gradient(
            135deg,
            rgba(255,49,93,0.12),
            rgba(255,49,93,0.025)
        );

    color:
        #ffffff;

    cursor:
        pointer;

    box-shadow:
        var(--shadow-pink),

        inset 0 1px 0
        rgba(255,255,255,0.04);

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.15s ease,
        opacity 0.18s ease;

}



.enter-button::before {

    content:
        "";

    position:
        absolute;

    left:
        -100%;

    top:
        0;

    width:
        45%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.10),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.55s ease;

}



.enter-button:hover:not(:disabled)::before {

    left:
        150%;

}



.enter-button:hover:not(:disabled) {

    background:
        linear-gradient(
            135deg,
            rgba(255,49,93,0.20),
            rgba(255,49,93,0.045)
        );

    border-color:
        var(--pink-light);

    box-shadow:
        0 0 12px
        rgba(255,49,93,0.80),

        0 0 38px
        rgba(255,49,93,0.28);

}



.enter-button:active:not(:disabled) {

    transform:
        scale(0.985);

}



.enter-button:disabled {

    opacity:
        0.28;

    cursor:
        default;

}



.enter-button-text {

    position:
        relative;

    z-index:
        2;

    font-family:
        var(--tech);

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        0.34em;

    color:
        var(--pink-light);

}



.enter-button-line {

    position:
        absolute;

    left:
        18px;

    right:
        18px;

    bottom:
        7px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pink),
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(255,49,93,0.5);

}



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

.result {

    min-height:
        0;

    margin-top:
        22px;

    text-align:
        center;

}



.result-checking {

    min-height:
        32px;

    color:
        var(--cyan);

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        0.22em;

}



.decoded-result {

    display:
        block;

    font-family:
        var(--jp);

    font-size:
        25px;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    line-height:
        1.5;

    color:
        var(--cyan);

    text-shadow:
        var(--shadow-cyan);

}



.result small {

    display:
        block;

    margin-top:
        6px;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        0.22em;

    color:
        rgba(111,255,240,0.48);

}



.result-wrong {

    animation:
        result-wrong
        0.5s ease;

}



.result-clear {

    animation:
        result-clear
        0.55s ease;

}



@keyframes result-wrong {

    0% {

        opacity:
            0;

        transform:
            translateY(5px);

    }

    100% {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



@keyframes result-clear {

    0% {

        opacity:
            0;

        transform:
            scale(0.94);

    }

    100% {

        opacity:
            1;

        transform:
            scale(1);

    }

}



/* ================================================================
 * Reset Button
 * ================================================================ */

.reset-button {

    display:
        block;

    margin:
        30px auto 0;

    padding:
        8px 20px;

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

    border-radius:
        2px;

    background:
        transparent;

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

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        0.25em;

    cursor:
        pointer;

    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;

}



.reset-button:hover {

    color:
        var(--cyan);

    border-color:
        rgba(111,255,240,0.40);

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

    box-shadow:
        0 0 14px
        rgba(111,255,240,0.08);

}



/* ================================================================
 * Footer
 * ================================================================ */

.game-footer {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        52px;

    padding-top:
        16px;

    border-top:
        1px solid
        rgba(255,49,93,0.20);

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        0.18em;

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

}



/* ================================================================
 * Clear Overlay
 * ================================================================ */

.clear-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

}



.clear-overlay.show {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}



/* ================================================================
 * Clear Background
 * ================================================================ */

.clear-overlay-background {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at center,
            rgba(111,255,240,0.08),
            transparent 45%
        ),

        rgba(3,6,8,0.95);

    backdrop-filter:
        blur(12px);

}



/* ================================================================
 * Clear Panel
 * ================================================================ */

.clear-panel {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            500px,
            100%
        );

    padding:
        46px 36px 38px;

    border:
        1px solid
        rgba(111,255,240,0.50);

    border-radius:
        2px;

    background:
        linear-gradient(
            135deg,
            rgba(5,15,16,0.98),
            rgba(3,9,11,0.98)
        );

    text-align:
        center;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,0.62),

        var(--shadow-cyan),

        inset 0 1px 0
        rgba(255,255,255,0.045);

    animation:
        clear-panel-in
        0.45s
        cubic-bezier(0.22,1,0.36,1);

}



/* corners */

.clear-panel::before,
.clear-panel::after {

    content:
        "";

    position:
        absolute;

    width:
        25px;

    height:
        25px;

}



.clear-panel::before {

    top:
        -1px;

    left:
        -1px;

    border-top:
        2px solid
        var(--cyan);

    border-left:
        2px solid
        var(--cyan);

    box-shadow:
        0 0 10px
        rgba(111,255,240,0.5);

}



.clear-panel::after {

    right:
        -1px;

    bottom:
        -1px;

    border-right:
        2px solid
        var(--cyan);

    border-bottom:
        2px solid
        var(--cyan);

    box-shadow:
        0 0 10px
        rgba(111,255,240,0.5);

}



@keyframes clear-panel-in {

    0% {

        opacity:
            0;

        transform:
            translateY(18px)
            scale(0.96);

    }

    100% {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}



/* ================================================================
 * Clear Content
 * ================================================================ */

.clear-label {

    font-family:
        var(--mono);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.38em;

    color:
        var(--cyan);

    opacity:
        0.82;

}



.clear-title {

    margin:
        18px 0 0;

    font-family:
        var(--jp);

    font-size:
        31px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    color:
        var(--white);

    text-shadow:
        0 0 18px
        rgba(111,255,240,0.18);

}



.clear-answer {

    margin-top:
        30px;

    font-family:
        var(--jp);

    font-size:
        26px;

    font-weight:
        800;

    letter-spacing:
        0.20em;

    line-height:
        1.5;

    color:
        var(--cyan);

    text-shadow:
        var(--shadow-cyan);

}



.clear-reading {

    margin-top:
        8px;

    font-family:
        var(--mono);

    font-size:
        10px;

    letter-spacing:
        0.30em;

    color:
        var(--cyan);

    opacity:
        0.80;

}



/* ================================================================
 * Clear Actions
 * ================================================================ */

.clear-actions {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        32px;

}



.clear-action-button {

    position:
        relative;

    width:
        min(
            300px,
            100%
        );

    height:
        46px;

    padding:
        0 20px;

    border:
        1px solid
        rgba(111,255,240,0.30);

    border-radius:
        2px;

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

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

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        0.16em;

    cursor:
        pointer;

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

}



.clear-action-button:hover {

    background:
        rgba(111,255,240,0.08);

    border-color:
        var(--cyan);

    box-shadow:
        var(--shadow-cyan);

}



.clear-action-button:active {

    transform:
        scale(0.97);

}



.action-icon {

    display:
        inline-block;

    margin-right:
        9px;

    font-size:
        14px;

    vertical-align:
        -1px;

}



.x-button {

    border-color:
        rgba(255,49,93,0.40);

}



.x-button:hover {

    border-color:
        var(--pink);

    box-shadow:
        var(--shadow-pink);

    background:
        rgba(255,49,93,0.08);

}



/* ================================================================
 * Clear Close Button
 * ================================================================ */

.clear-close-button {

    margin-top:
        22px;

    min-width:
        155px;

    height:
        43px;

    padding:
        0 22px;

    border:
        1px solid
        rgba(111,255,240,0.35);

    border-radius:
        2px;

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

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

    font-family:
        var(--mono);

    font-size:
        9px;

    letter-spacing:
        0.25em;

    cursor:
        pointer;

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

}



.clear-close-button:hover {

    background:
        rgba(111,255,240,0.09);

    border-color:
        var(--cyan);

    box-shadow:
        var(--shadow-cyan);

}



.clear-close-button:active {

    transform:
        scale(0.97);

}



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

@media (max-width: 600px) {

    .game-container {

        width:
            calc(100% - 20px);

        padding:
            28px 0 48px;

    }



    .game-header {

        margin-bottom:
            34px;

        padding:
            22px 14px 25px;

    }



    .game-header h1,
    .game-title {

        font-size:
            clamp(
                48px,
                13vw,
                70px
            );

        letter-spacing:
            0.06em;

    }



    .mission {

        padding:
            21px 17px 22px;

    }



    .mission-text {

        font-size:
            16px;

        letter-spacing:
            0.07em;

    }



    .operation-guide {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            7px;

        padding:
            0 5px;

    }



    .puzzle-board {

        gap:
            9px;

    }



    .puzzle-group {

        padding:
            13px 10px 15px;

    }



    .group-header {

        grid-template-columns:
            38px
            1fr
            auto;

        margin-bottom:
            11px;

    }



    .group-number {

        width:
            29px;

        height:
            29px;

        font-size:
            10px;

    }



    .move-button {

        width:
            30px;

        height:
            25px;

        font-size:
            14px;

    }



    .choice-area {

        gap:
            7px;

    }



    .selection-window {

        width:
            98px;

        height:
            61px;

    }



    .selected-item {

        font-size:
            25px;

    }



    .item-move-button {

        width:
            42px;

        height:
            61px;

        font-size:
            21px;

    }



    .enter-button {

        width:
            100%;

        height:
            55px;

    }



    .clear-panel {

        padding:
            36px 20px 31px;

    }



    .clear-title {

        font-size:
            25px;

    }



    .clear-answer {

        font-size:
            21px;

    }



    .clear-action-button {

        width:
            100%;

    }



    .game-footer {

        flex-direction:
            column;

        align-items:
            center;

        gap:
            7px;

    }

}



/* ================================================================
 * Very Small Mobile
 * ================================================================ */

@media (max-width: 380px) {

    .selection-window {

        width:
            82px;

        height:
            56px;

    }



    .selected-item {

        font-size:
            23px;

    }



    .item-move-button {

        width:
            38px;

        height:
            56px;

        font-size:
            20px;

    }



    .choice-area {

        gap:
            5px;

    }



    .game-header h1,
    .game-title {

        font-size:
            45px;

    }

}



/* ================================================================
 * Reduced Motion
 * ================================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}