.arcade-game-option:nth-child(3) {
    --arcade-card-accent: #00bfff;
    --arcade-card-accent-soft: rgba(0, 191, 255, 0.28);
}

.arcade-game-option:nth-child(3).is-selected {
    border-color: #00bfff;
    box-shadow:
        0 0 0 2px #0b0611,
        0 0 0 4px rgba(0, 191, 255, 0.78),
        0 0 20px rgba(0, 191, 255, 0.46);
}

.arcade-flood-icon {
    overflow: hidden;
    background:
        linear-gradient(180deg, #111322 0 42%, #0a4a65 43% 100%);
}

.arcade-flood-icon::before {
    content: "";
    position: absolute;
    inset: 34% -10% auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, #baf7ff 0 9px, transparent 9px 16px);
    box-shadow: 0 9px 0 rgba(83, 231, 255, 0.55), 0 18px 0 rgba(83, 231, 255, 0.32);
    transform: rotate(-3deg);
}

.arcade-flood-icon .flood-icon-truck {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 0;
    width: 43px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px rgba(255, 105, 180, 0.55));
}

.arcade-flood-icon .flood-icon-akane {
    position: absolute;
    z-index: 2;
    left: 5px;
    bottom: 2px;
    width: 21px;
    height: 31px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.9));
}

.arcade-flood-icon .flood-icon-water {
    position: absolute;
    z-index: 1;
    left: 18px;
    bottom: -1px;
    width: 35px;
    height: 18px;
    object-fit: fill;
    image-rendering: pixelated;
    opacity: 0.86;
}

#arcadeGameScreen #akaneFloodCanvas {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 4 / 5;
    image-rendering: pixelated;
    background: #030008;
    border: 3px solid rgba(0, 191, 255, 0.72);
    box-shadow:
        0 0 0 2px #09040f,
        0 0 0 4px rgba(255, 105, 180, 0.2),
        0 0 24px rgba(0, 191, 255, 0.32);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#arcadeGameScreen[data-active-game="flood"] .arcade-game-container {
    padding: 12px;
    gap: 8px;
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 191, 255, 0.14), transparent 33%),
        radial-gradient(circle at 90% 100%, rgba(255, 105, 180, 0.13), transparent 38%),
        linear-gradient(180deg, rgba(12, 6, 23, 0.98), rgba(2, 9, 15, 0.98));
    border: 2px solid rgba(0, 191, 255, 0.5);
    box-shadow:
        8px 8px 0 rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 191, 255, 0.12),
        inset 0 0 0 2px rgba(255, 105, 180, 0.08);
}

#arcadeGameScreen[data-active-game="flood"] .scoreboard {
    min-height: 48px;
    padding: 7px 9px;
    background:
        linear-gradient(90deg, rgba(0, 191, 255, 0.15), transparent 40%, rgba(255, 105, 180, 0.13)),
        #05050d;
    border-color: rgba(83, 231, 255, 0.75);
    border-radius: 2px;
    box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.84),
        inset 0 -3px 0 rgba(138, 43, 226, 0.22),
        inset 0 0 18px rgba(0, 191, 255, 0.08);
}

#arcadeGameScreen[data-active-game="flood"] .score-stack {
    color: #7cf7ff;
}

#arcadeGameScreen[data-active-game="flood"] .hearts-box {
    padding: 4px 7px;
    background: rgba(23, 5, 39, 0.88);
    border-color: #9f48ff;
    border-radius: 2px;
    box-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.72),
        inset 0 0 12px rgba(138, 43, 226, 0.3);
}

#arcadeGameScreen[data-active-game="flood"] .heart-icon {
    filter: drop-shadow(0 0 3px rgba(197, 101, 255, 0.58));
}

#arcadeGameScreen[data-active-game="flood"] .arcade-pause-toggle {
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(0, 191, 255, 0.2), rgba(4, 0, 9, 0.96)),
        #040009;
}

#arcadeGameScreen[data-active-game="flood"] .arcade-status-line {
    min-height: 27px;
    color: #f2dfff;
    background:
        linear-gradient(90deg, rgba(138, 43, 226, 0.16), transparent 55%, rgba(0, 191, 255, 0.1)),
        rgba(2, 2, 8, 0.88);
    border-color: rgba(255, 105, 180, 0.65);
    border-radius: 2px;
    letter-spacing: 0.4px;
}

#arcadeGameScreen[data-active-game="flood"] .canvas-container::after {
    content: "";
    inset: 12% 3px 3px;
    opacity: 0.66;
    background-image:
        repeating-linear-gradient(
            180deg,
            transparent 0 3px,
            rgba(0, 0, 0, 0.22) 3px 4px
        ),
        url("../assets/arcade/flood/sprites/rain-tile.png");
    background-size:
        100% 4px,
        96px 96px;
    background-repeat: repeat;
    animation: flood-rain-sweep 720ms steps(8, end) infinite;
}

.flood-mobile-controls {
    width: 100%;
    min-height: 132px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#arcadeGameScreen[data-active-game="flood"] .arcade-game-container,
#arcadeGameScreen[data-active-game="flood"] .arcade-dpad,
#arcadeGameScreen[data-active-game="flood"] .arcade-dpad-btn {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

#arcadeGameScreen.is-flood-sudden-death .canvas-container::before {
    content: "";
    opacity: 1;
    background: rgba(255, 35, 79, 0.13);
    animation: flood-sudden-flash 620ms steps(2, end) infinite;
}

#arcadeGameScreen.is-flood-sudden-death .scoreboard,
#arcadeGameScreen.is-flood-sudden-death .arcade-status-line {
    color: #ff6b86;
    border-color: #ff234f;
    animation: flood-sudden-hud 620ms steps(2, end) infinite;
}

#arcadeGameScreen.is-flood-damage .canvas-container {
    animation: flood-damage-shake 480ms steps(6) both;
}

#arcadeGameScreen.is-flood-pickup .canvas-container {
    animation: flood-pickup-pulse 520ms steps(6) both;
}

#arcadeGameScreen.is-flood-time-stop .canvas-container {
    box-shadow:
        0 0 0 2px rgba(124, 247, 255, 0.72),
        0 0 28px rgba(255, 61, 242, 0.42);
}

#arcadeGameScreen.is-flood-time-stop .canvas-container::after {
    animation-play-state: paused;
    opacity: 0.82;
    background-color: rgba(91, 224, 255, 0.13);
    filter: saturate(1.45) hue-rotate(18deg);
}

#arcadeGameScreen.is-flood-stage-clear .canvas-container {
    animation: flood-stage-clear 760ms steps(8) both;
}

#arcadeGameScreen.is-flood-record .scoreboard {
    animation: flood-record 720ms steps(5) 3;
}

@keyframes flood-sudden-flash {
    0%,
    100% { background: rgba(255, 35, 79, 0.07); }
    50% { background: rgba(255, 35, 79, 0.24); }
}

@keyframes flood-sudden-hud {
    0%,
    100% { filter: none; }
    50% { filter: brightness(1.5) drop-shadow(0 0 7px rgba(255, 35, 79, 0.82)); }
}

@keyframes flood-damage-shake {
    0%,
    100% { transform: translate(0, 0); filter: none; }
    20% { transform: translate(-5px, 1px); filter: saturate(0.6); }
    40% { transform: translate(5px, -2px); }
    60% { transform: translate(-3px, 2px); filter: brightness(1.35); }
    80% { transform: translate(2px, 0); }
}

@keyframes flood-pickup-pulse {
    0%,
    100% { filter: none; transform: scale(1); }
    45% { filter: drop-shadow(0 0 18px rgba(0, 255, 255, 0.76)); transform: scale(1.015); }
}

@keyframes flood-stage-clear {
    0%,
    100% { filter: none; }
    35% { filter: brightness(1.55) drop-shadow(0 0 22px rgba(255, 105, 180, 0.72)); }
}

@keyframes flood-record {
    0%,
    100% { border-color: rgba(255, 255, 255, 0.32); }
    50% {
        color: #ffd32a;
        border-color: #ffd32a;
        box-shadow: 0 0 20px rgba(255, 211, 42, 0.7);
    }
}

@keyframes flood-rain-sweep {
    from {
        background-position:
            0 0,
            0 -96px;
    }
    to {
        background-position:
            0 0,
            -32px 96px;
    }
}

@media (max-width: 620px) {
    #arcadeGameScreen.active[data-active-game="flood"] {
        min-height: 100dvh;
        justify-content: flex-start;
        padding: 52px 8px 12px;
    }

    #arcadeGameScreen[data-active-game="flood"] .arcade-game-container {
        width: min(100%, calc(100dvw - 16px), 366px);
        gap: clamp(5px, 1.4dvh, 9px);
        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.82);
    }

    #arcadeGameScreen[data-active-game="flood"] #akaneFloodCanvas {
        width: auto;
        height: clamp(300px, calc(100dvh - 246px), 500px);
        max-width: 100%;
        max-height: 500px;
        box-shadow:
            0 0 0 2px #09040f,
            0 0 0 3px rgba(255, 105, 180, 0.18);
    }

    #arcadeGameScreen[data-active-game="flood"] .canvas-container::after {
        animation: flood-rain-mobile 960ms steps(4, end) infinite;
    }

    #arcadeGameScreen[data-active-game="flood"] .heart-icon {
        filter: none;
    }

    #arcadeGameScreen.is-flood-sudden-death .canvas-container::before,
    #arcadeGameScreen.is-flood-sudden-death .scoreboard,
    #arcadeGameScreen.is-flood-sudden-death .arcade-status-line {
        animation: none;
    }

    #arcadeGameScreen.is-flood-damage .canvas-container {
        animation-name: flood-damage-shake-mobile;
    }

    #arcadeGameScreen.is-flood-pickup .canvas-container {
        animation-name: flood-pickup-pulse-mobile;
    }

    #arcadeGameScreen.is-flood-stage-clear .canvas-container {
        animation: none;
    }

    #arcadeGameScreen[data-active-game="flood"] .flood-mobile-controls {
        min-height: clamp(108px, 18dvh, 132px);
        margin-top: clamp(3px, 1dvh, 8px);
        padding: 0 12px;
    }

    #arcadeGameScreen[data-active-game="flood"] .arcade-dpad-flood {
        --dpad-size: clamp(106px, 31vw, 122px);
        --dpad-hit-padding: 14px;
    }
}

@keyframes flood-rain-mobile {
    from {
        background-position:
            0 0,
            0 -96px;
    }
    to {
        background-position:
            0 0,
            -32px 96px;
    }
}

@keyframes flood-damage-shake-mobile {
    0%,
    100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 1px); }
    50% { transform: translate(4px, -1px); }
    75% { transform: translate(-2px, 1px); }
}

@keyframes flood-pickup-pulse-mobile {
    0%,
    100% { transform: scale(1); }
    45% { transform: scale(1.012); }
}

@media (max-width: 380px) {
    #arcadeGameScreen[data-active-game="flood"] .arcade-game-container {
        width: min(100%, calc(100dvw - 12px));
        padding: 6px;
    }

    #arcadeGameScreen[data-active-game="flood"] #akaneFloodCanvas {
        height: clamp(276px, calc(100dvh - 232px), 430px);
    }
}

@media (max-height: 680px) and (max-width: 620px) {
    #arcadeGameScreen.active[data-active-game="flood"] {
        padding: 48px 6px 8px;
    }

    #arcadeGameScreen[data-active-game="flood"] .scoreboard {
        min-height: 34px;
        padding: 5px;
    }

    #arcadeGameScreen[data-active-game="flood"] .arcade-status-line {
        min-height: 20px;
        padding-block: 2px;
    }

    #arcadeGameScreen[data-active-game="flood"] #akaneFloodCanvas {
        height: clamp(240px, calc(100dvh - 300px), 340px);
    }

    #arcadeGameScreen[data-active-game="flood"] .flood-mobile-controls {
        min-height: clamp(88px, 16dvh, 106px);
    }

    #arcadeGameScreen[data-active-game="flood"] .arcade-dpad-flood {
        --dpad-size: clamp(88px, 27vw, 100px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #arcadeGameScreen.is-flood-sudden-death .canvas-container::before,
    #arcadeGameScreen.is-flood-sudden-death .scoreboard,
    #arcadeGameScreen.is-flood-sudden-death .arcade-status-line,
    #arcadeGameScreen.is-flood-damage .canvas-container,
    #arcadeGameScreen.is-flood-pickup .canvas-container,
    #arcadeGameScreen.is-flood-stage-clear .canvas-container,
    #arcadeGameScreen.is-flood-record .scoreboard {
        animation: none !important;
    }
}