/* ===================================
   DDD - Retro Arcade Neon Style CSS
   =================================== */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {
    --neon-pink: #ff6b35;
    --neon-blue: #00ffff;
    --neon-green: #00ff66;
    --neon-yellow: #ffdd00;
    --neon-orange: #ff6600;
    --neon-purple: #cc00ff;
    --neon-red: #ff3333;
    --dark-purple: #0a1628;
    --dark-blue: #0d1a2d;
    --arcade-dark: #080d14;
    --arcade-floor: #0f1a2a;
    --gold: #ffd700;
    --white: #ffffff;
    --gray: #aaaaaa;
}

/* ===================================
   Scroll Reveal Animation (Sequential Fade-in)
   =================================== */
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for sequential appearance */
.reveal-item[data-delay="1"] { transition-delay: 0.1s; }
.reveal-item[data-delay="2"] { transition-delay: 0.2s; }
.reveal-item[data-delay="3"] { transition-delay: 0.3s; }
.reveal-item[data-delay="4"] { transition-delay: 0.4s; }
.reveal-item[data-delay="5"] { transition-delay: 0.5s; }
.reveal-item[data-delay="6"] { transition-delay: 0.6s; }
.reveal-item[data-delay="7"] { transition-delay: 0.7s; }
.reveal-item[data-delay="8"] { transition-delay: 0.8s; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--arcade-dark);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
}

/* ===================================
   Intro Screen - Arcade Room
   =================================== */
.intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, #060a10 0%, #0a1018 50%, #060a10 100%);
    z-index: 9999;
    overflow: hidden;
    perspective: 1000px;
}

.intro-screen.hidden {
    pointer-events: none;
}

/* Intro Content Wrapper - Scale to match 75% browser zoom */
.intro-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    zoom: 0.75;
}

/* CI Neon Sign Logo - 정면 벽 중앙 네온 간판 */
.ci-neon-sign {
    position: absolute;
    top: -5px;
    left: calc(50% + 15px);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

/* 벽에 비치는 빛 반사 */
.ci-neon-sign::after {
    content: '';
    position: absolute;
    top: -30px;
    left: -50px;
    right: -50px;
    bottom: -30px;
    background: radial-gradient(ellipse at center, rgba(255, 140, 0, 0.12) 0%, rgba(255, 100, 0, 0.06) 50%, transparent 75%);
    border-radius: 50%;
    z-index: -1;
    animation: wallGlow 2.5s ease-in-out infinite alternate;
}

@keyframes wallGlow {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

.ci-logo-img {
    width: 720px;
    height: auto;
    display: block;
    filter:
        brightness(1.15)
        drop-shadow(0 0 8px rgba(255, 220, 80, 1))
        drop-shadow(0 0 25px rgba(255, 166, 0, 0.9))
        drop-shadow(0 0 50px rgba(255, 130, 0, 0.6))
        drop-shadow(0 0 80px rgba(255, 100, 0, 0.4));
    animation: neonGlow 1s ease-in-out infinite alternate;
}

@keyframes neonGlow {
    0% {
        filter:
            brightness(1.1)
            drop-shadow(0 0 4px rgba(255, 220, 80, 0.9))
            drop-shadow(0 0 12px rgba(255, 166, 0, 0.7))
            drop-shadow(0 0 25px rgba(255, 130, 0, 0.4));
    }
    100% {
        filter:
            brightness(1.2)
            drop-shadow(0 0 6px rgba(255, 220, 80, 1))
            drop-shadow(0 0 18px rgba(255, 166, 0, 1))
            drop-shadow(0 0 35px rgba(255, 130, 0, 0.7));
    }
}

@keyframes neonFlicker {
    0%, 100% {
        opacity: 1;
        filter:
            drop-shadow(0 0 10px rgba(255, 166, 0, 0.8))
            drop-shadow(0 0 20px rgba(255, 166, 0, 0.6))
            drop-shadow(0 0 40px rgba(255, 166, 0, 0.4));
    }
    92% {
        opacity: 1;
    }
    93% {
        opacity: 0.8;
    }
    94% {
        opacity: 1;
    }
    96% {
        opacity: 0.9;
    }
    97% {
        opacity: 1;
    }
}

/* Dust Particles Effect */
.dust-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.dust-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(180, 170, 150, 0.4);
    border-radius: 40%;
    pointer-events: none;
    animation: floatDust ease-in-out infinite;
    filter: blur(0.5px);
}

.dust-particle.small {
    width: 1px;
    height: 1px;
    background: rgba(160, 150, 130, 0.3);
    border-radius: 50%;
}

.dust-particle.large {
    width: 3px;
    height: 2px;
    background: rgba(200, 190, 170, 0.5);
    border-radius: 30%;
    filter: blur(0.8px);
}

@keyframes floatDust {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: var(--opacity, 0.4);
        transform: translateY(8vh) translateX(calc(var(--drift, 10px) * -0.3)) rotate(15deg);
    }
    20% {
        transform: translateY(20vh) translateX(calc(var(--drift, 10px) * 0.8)) rotate(40deg);
    }
    32% {
        transform: translateY(32vh) translateX(calc(var(--drift, 10px) * -0.5)) rotate(70deg);
    }
    45% {
        transform: translateY(45vh) translateX(calc(var(--drift, 10px) * 1.2)) rotate(95deg);
        opacity: var(--opacity, 0.4);
    }
    58% {
        transform: translateY(58vh) translateX(calc(var(--drift, 10px) * -0.2)) rotate(125deg);
    }
    70% {
        transform: translateY(70vh) translateX(calc(var(--drift, 10px) * 0.6)) rotate(150deg);
    }
    85% {
        transform: translateY(85vh) translateX(calc(var(--drift, 10px) * -0.4)) rotate(170deg);
        opacity: var(--opacity, 0.3);
    }
    100% {
        transform: translateY(100vh) translateX(calc(var(--drift, 10px) * 0.3)) rotate(190deg);
        opacity: 0;
    }
}

/* Screen Zoom-In Effect - 게임기 화면 중앙으로 줌인 */
.intro-screen {
    transform-origin: 50% 48%;
}

.intro-screen.zoom-in {
    animation: zoomIntoScreen 2.5s linear forwards;
}

.intro-screen.zoom-in::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    animation: fadeToBlack 2.5s linear forwards;
    z-index: 100;
}

@keyframes zoomIntoScreen {
    0% {
        transform: scale(1);
        filter: blur(0px);
    }
    80% {
        filter: blur(0px);
    }
    100% {
        transform: scale(8);
        filter: blur(3px);
    }
}

@keyframes fadeToBlack {
    0% { opacity: 0; }
    40% { opacity: 0; }
    100% { opacity: 1; }
}

/* Easter Egg Glitch Effect */
@keyframes easterEggGlitch {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-3px, 2px); filter: hue-rotate(90deg); }
    40% { transform: translate(3px, -2px); filter: hue-rotate(180deg); }
    60% { transform: translate(-2px, -1px); filter: hue-rotate(270deg); }
    80% { transform: translate(2px, 1px); filter: hue-rotate(360deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* Easter Egg - Coin Drop Animation */
.easter-coin {
    position: absolute;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
    border-radius: 50%;
    border: 2px solid #daa520;
    box-shadow: 0 0 15px #ffd700, 0 0 30px #ffd700, inset 0 0 5px rgba(255,255,255,0.5);
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    animation: coinDrop 0.8s ease-in forwards;
}

.easter-coin::before {
    content: 'D';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    font-weight: bold;
    color: #8b4513;
}

@keyframes coinDrop {
    0% {
        bottom: 200px;
        opacity: 1;
        transform: translateX(-50%) rotate(0deg);
    }
    80% {
        bottom: 125px;
        opacity: 1;
        transform: translateX(-50%) rotate(360deg);
    }
    100% {
        bottom: 120px;
        opacity: 0;
        transform: translateX(-50%) rotate(400deg) scale(0.3);
    }
}

/* Easter Egg - Lights Off Mode */
.intro-screen {
    transition: background 1.5s ease;
}

.intro-screen.lights-off {
    background: #000 !important;
}

/* 천장 조명 - 트랜지션 */
.ceiling-light,
.ceiling-light::before {
    transition: opacity 1.5s ease;
}

.intro-screen.lights-off .ceiling-light {
    opacity: 0 !important;
}

.intro-screen.lights-off .ceiling-light::before {
    opacity: 0 !important;
}

/* 배경 기기 - 트랜지션 */
.side-machine .bg-marquee,
.side-machine .bg-led,
.side-machine .bg-controls,
.side-machine .bg-coin-slot,
.side-machine .bg-speaker,
.side-machine .bg-panel,
.back-machine .bg-marquee,
.back-machine .bg-controls,
.arcade-cabinet .cab-control-deck,
.arcade-cabinet .cab-coin-section,
.arcade-cabinet .cab-base {
    transition: filter 1.5s ease;
}

/* 배경 기기 - 화면 빼고 어둡게 */
.intro-screen.lights-off .side-machine .bg-marquee,
.intro-screen.lights-off .side-machine .bg-led,
.intro-screen.lights-off .side-machine .bg-controls,
.intro-screen.lights-off .side-machine .bg-coin-slot,
.intro-screen.lights-off .side-machine .bg-speaker,
.intro-screen.lights-off .side-machine .bg-panel {
    filter: brightness(0.02);
}

.intro-screen.lights-off .back-machine .bg-marquee,
.intro-screen.lights-off .back-machine .bg-controls {
    filter: brightness(0.01);
}

/* 메인 기기 - 화면 빼고 어둡게 (화면 빛이 비추는 느낌) */
.intro-screen.lights-off .arcade-cabinet .cab-control-deck {
    filter: brightness(0.25);
}

.intro-screen.lights-off .arcade-cabinet .cab-coin-section {
    filter: brightness(0.12);
}

.intro-screen.lights-off .arcade-cabinet .cab-base {
    filter: brightness(0.05);
}

/* Rainbow Glow Effect for Max Credits */
@keyframes rainbowGlow {
    0% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #ff0000, 0 0 60px #ff0000;
    }
    14% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #ff7700, 0 0 60px #ff7700;
    }
    28% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #ffdd00, 0 0 60px #ffdd00;
    }
    42% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #00ff00, 0 0 60px #00ff00;
    }
    57% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0099ff, 0 0 60px #0099ff;
    }
    71% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0000ff, 0 0 60px #0000ff;
    }
    85% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #8b00ff, 0 0 60px #8b00ff;
    }
    100% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #ff0000, 0 0 60px #ff0000;
    }
}

/* Arcade Room */
.arcade-room {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 뒷벽 */
.arcade-back-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65%;
    background:
        linear-gradient(180deg,
            #0a0f18 0%,
            #0d1520 30%,
            #101a28 60%,
            #0a1018 100%
        );
    z-index: 0;
}

/* 벽 텍스처 - 은은한 타일/벽돌 느낌 */
.arcade-back-wall::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 150px,
            rgba(0, 0, 0, 0.15) 150px,
            rgba(0, 0, 0, 0.15) 152px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 80px,
            rgba(0, 0, 0, 0.1) 80px,
            rgba(0, 0, 0, 0.1) 82px
        );
    opacity: 0.5;
}

/* 벽 하단 그림자 - 바닥과의 경계 */
.arcade-back-wall::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* Ceiling with lights */
.arcade-ceiling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: transparent;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 15px 10% 0;
    z-index: 10;
}

.ceiling-light {
    width: 60px;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(255, 200, 100, 0.7) 0%, rgba(255, 150, 50, 0.4) 50%, transparent 80%);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 180, 80, 0.4), 0 0 30px rgba(255, 150, 50, 0.15);
    pointer-events: auto;
}

.ceiling-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 515px;
    background: radial-gradient(ellipse at center 15px, rgba(255, 200, 100, 0.15) 0%, rgba(255, 180, 80, 0.08) 20%, transparent 60%);
    clip-path: path('M 30,20 Q 60,35 90,20 L 120,515 L 0,515 Z');
    pointer-events: none;
}

.light-1 { animation: pulseLight1 2s ease-in-out infinite; }
.light-2 { animation: pulseLight2 2.5s ease-in-out infinite; animation-delay: 0.3s; }
.light-3 { animation: pulseLight3 3s ease-in-out infinite; animation-delay: 0.6s; }
.light-4 { animation: pulseLight4 2.2s ease-in-out infinite; animation-delay: 0.15s; }
.light-5 { animation: pulseLight5 2.8s ease-in-out infinite; animation-delay: 0.9s; }

@keyframes pulseLight1 {
    0%, 100% { opacity: 1; }
    15% { opacity: 0.6; }
    30% { opacity: 1; }
    70% { opacity: 0.7; }
    85% { opacity: 1; }
}

@keyframes pulseLight2 {
    0%, 100% { opacity: 0.9; }
    25% { opacity: 1; }
    40% { opacity: 0.5; }
    55% { opacity: 0.9; }
    80% { opacity: 0.7; }
}

@keyframes pulseLight3 {
    0%, 100% { opacity: 1; }
    20% { opacity: 0.7; }
    35% { opacity: 1; }
    60% { opacity: 0.55; }
    75% { opacity: 0.9; }
}

@keyframes pulseLight4 {
    0%, 100% { opacity: 0.85; }
    10% { opacity: 1; }
    45% { opacity: 0.6; }
    60% { opacity: 1; }
    90% { opacity: 0.75; }
}

@keyframes pulseLight5 {
    0%, 100% { opacity: 1; }
    30% { opacity: 0.65; }
    50% { opacity: 1; }
    65% { opacity: 0.5; }
    80% { opacity: 0.9; }
}

/* Arcade Floor */
.arcade-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(180deg, #0a1520 0%, #0f1a2a 50%, #0a1520 100%);
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom center;
}

.arcade-floor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(255, 107, 53, 0.1) 100px,
            rgba(255, 107, 53, 0.1) 102px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 100px,
            rgba(0, 255, 255, 0.1) 100px,
            rgba(0, 255, 255, 0.1) 102px
        );
}

/* Front Side Machines (clear) */
.side-machine {
    position: absolute;
    width: 160px;
    height: 320px;
    background: linear-gradient(180deg, #252540 0%, #1a1a30 40%, #12122a 100%);
    border-radius: 8px 8px 0 0;
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.8),
        inset 2px 0 0 rgba(255, 255, 255, 0.05),
        inset -2px 0 0 rgba(0, 0, 0, 0.3);
    border: 2px solid #0a0a15;
    transform-style: preserve-3d;
}

/* 배경 오락기 스피커 그릴 */
.bg-speaker {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 35px;
    background:
        repeating-linear-gradient(
            0deg,
            #0a0a15 0px,
            #0a0a15 2px,
            #1a1a30 2px,
            #1a1a30 4px
        );
    border-radius: 3px;
    border: 2px solid #0a0a15;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* 배경 오락기 코인 슬롯 */
.bg-coin-slot {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 20px;
    background: linear-gradient(180deg, #4a4a5a 0%, #2a2a3a 100%);
    border-radius: 3px;
    border: 2px solid #ffcc00;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
}

.bg-coin-slot::before {
    content: '';
    width: 20px;
    height: 4px;
    background: #111;
    border-radius: 2px;
    border: 1px solid #ffcc00;
}

/* 배경 오락기 LED 인디케이터 */
.bg-led {
    position: absolute;
    top: 140px;
    right: 15px;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 30% 30%, #00ff00, #008800);
    border-radius: 50%;
    box-shadow: 0 0 5px #00ff00;
    animation: ledBlink 2s ease-in-out infinite;
}

@keyframes ledBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px #00ff00; }
    50% { opacity: 0.5; box-shadow: 0 0 2px #00ff00; }
}

/* 왼쪽 기계 - 왼쪽 면 두께 */
.left-machine::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45px;
    width: 48px;
    background: linear-gradient(90deg, #06060c 0%, #10101c 50%, #1a1a2a 100%);
    border-radius: 5px 0 0 5px;
    transform: perspective(500px) rotateY(-22deg);
    transform-origin: right center;
}

/* 오른쪽 기계 - 오른쪽 면 두께 */
.right-machine::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -45px;
    width: 48px;
    background: linear-gradient(270deg, #06060c 0%, #10101c 50%, #1a1a2a 100%);
    border-radius: 0 5px 5px 0;
    transform: perspective(500px) rotateY(22deg);
    transform-origin: left center;
}


/* 배경 오락기 상단 마키 */
.bg-marquee {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    height: 22px;
    background: linear-gradient(180deg, #ff6b35 0%, #aa4520 50%, #ff6b35 100%);
    border-radius: 3px;
    box-shadow:
        0 0 15px rgba(255, 107, 53, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: marqueeGlow 2s ease-in-out infinite alternate;
}

.right-machine .bg-marquee {
    background: linear-gradient(180deg, #00ffff 0%, #0099aa 50%, #00ffff 100%);
    box-shadow:
        0 0 15px rgba(0, 255, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes marqueeGlow {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* 배경 오락기 컨트롤 패널 */
.bg-controls {
    position: absolute;
    top: 145px;
    left: 10px;
    right: 10px;
    height: 50px;
    background: linear-gradient(180deg, #2a2a45 0%, #1f1f38 100%);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.bg-joystick {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #333, #111);
    border-radius: 50%;
    box-shadow:
        0 3px 0 #000,
        0 0 5px rgba(0, 0, 0, 0.5);
}


.bg-buttons {
    display: flex;
    gap: 5px;
}

.bg-buttons span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.bg-buttons span:nth-child(1) {
    background: radial-gradient(circle at 30% 30%, #ff4444, #aa0000);
}

.bg-buttons span:nth-child(2) {
    background: radial-gradient(circle at 30% 30%, #44ff44, #00aa00);
}

.bg-buttons span:nth-child(3) {
    background: radial-gradient(circle at 30% 30%, #4444ff, #0000aa);
}

/* 배경 오락기 하단 패널 */
.bg-panel {
    position: absolute;
    top: 205px;
    left: 10px;
    right: 10px;
    height: 100px;
    background: linear-gradient(180deg, #1a1a30 0%, #0f0f20 100%);
    border-radius: 3px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.bg-panel::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 6px;
    background: #000;
    border-radius: 3px;
    border: 1px solid #333;
}


/* 배경 오락기 화면 지지직 효과 */
.bg-screen {
    position: absolute;
    top: 38px;
    left: 10px;
    right: 10px;
    height: 95px;
    background: radial-gradient(ellipse at center, #001520 0%, #000a0f 60%, #000 100%);
    border-radius: 4px;
    overflow: hidden;
    border: 3px solid #1a1a30;
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.4),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
}

/* 배경 오락기 화면 내 게임 콘텐츠 */
.bg-screen-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: rgba(0, 255, 200, 0.7);
    text-shadow: 0 0 5px rgba(0, 255, 200, 0.5);
    text-align: center;
    z-index: 1;
}

/* 왼쪽 배경 기기 텍스트 깜빡임 */
.left-machine .bg-screen-content {
    animation: bgTextBlink1 2.5s steps(1) infinite;
}

/* 오른쪽 배경 기기 텍스트 깜빡임 */
.right-machine .bg-screen-content {
    animation: bgTextBlink2 2s steps(1) infinite;
    animation-delay: 0.5s;
}

@keyframes bgTextBlink1 {
    0%, 70% { opacity: 1; }
    71%, 100% { opacity: 0; }
}

@keyframes bgTextBlink2 {
    0%, 65% { opacity: 1; }
    66%, 100% { opacity: 0; }
}

.bg-screen-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.12;
    animation: bgStaticNoise 0.08s steps(3) infinite, bgStaticFlash 3s steps(1) infinite;
}

.bg-screen-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.4) 2px,
        rgba(0, 0, 0, 0.4) 4px
    );
    pointer-events: none;
}

@keyframes bgStaticNoise {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-8%, -5%); }
    66% { transform: translate(6%, 8%); }
    100% { transform: translate(0, 0); }
}

@keyframes bgStaticFlash {
    0%, 70%, 100% { opacity: 0.12; }
    72%, 75% { opacity: 0.25; }
}

@keyframes bgStaticFlash2 {
    0%, 40%, 100% { opacity: 0.12; }
    42%, 45% { opacity: 0.28; }
}

@keyframes bgStaticFlash3 {
    0%, 55%, 100% { opacity: 0.12; }
    57%, 60% { opacity: 0.22; }
}

@keyframes bgStaticFlash4 {
    0%, 25%, 100% { opacity: 0.12; }
    27%, 30% { opacity: 0.3; }
}

/* 각 기기별 다른 타이밍 */
.left-machine .bg-screen-static {
    animation: bgStaticNoise 0.08s steps(3) infinite, bgStaticFlash 2.7s steps(1) infinite;
    animation-delay: 0s, 0.3s;
}

.right-machine .bg-screen-static {
    animation: bgStaticNoise 0.08s steps(3) infinite, bgStaticFlash2 3.2s steps(1) infinite;
    animation-delay: 0.05s, 1.1s;
}

/* 뒷줄 기계는 효과 약하게 + 각각 다른 타이밍 */
.back-machine .bg-screen {
    top: 15px;
    left: 12px;
    right: 12px;
    height: 80px;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.2);
}

.back-machine .bg-screen-static {
    opacity: 0.08;
}

.back-left-1 .bg-screen-static {
    animation: bgStaticNoise 0.08s steps(3) infinite, bgStaticFlash3 4.1s steps(1) infinite;
    animation-delay: 0.02s, 0.7s;
}

.back-left-2 .bg-screen-static {
    animation: bgStaticNoise 0.08s steps(3) infinite, bgStaticFlash4 3.5s steps(1) infinite;
    animation-delay: 0.04s, 2.3s;
}

.back-right-1 .bg-screen-static {
    animation: bgStaticNoise 0.08s steps(3) infinite, bgStaticFlash 3.8s steps(1) infinite;
    animation-delay: 0.03s, 1.8s;
}

.back-right-2 .bg-screen-static {
    animation: bgStaticNoise 0.08s steps(3) infinite, bgStaticFlash2 4.4s steps(1) infinite;
    animation-delay: 0.01s, 0.5s;
}

.left-machine {
    left: 12%;
    bottom: 10%;
    width: 220px;
    height: 400px;
    transform: perspective(500px) rotateY(22deg);
}

.right-machine {
    right: 12%;
    bottom: 10%;
    width: 220px;
    height: 380px;
    transform: perspective(500px) rotateY(-22deg);
}

/* Back Row Machines */
.back-machine {
    position: absolute;
    width: 120px;
    height: 260px;
    background: linear-gradient(180deg, #222238 0%, #18182a 40%, #101020 100%);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
    border: 2px solid #0a0a15;
    filter: brightness(0.7);
    transform-style: preserve-3d;
}

/* 뒷줄 왼쪽 기계들 옆면 */
.back-left-1::before,
.back-left-2::before {
    content: '';
    position: absolute;
    top: 0;
    right: -25px;
    width: 25px;
    height: 100%;
    background: linear-gradient(180deg, #18182a 0%, #0e0e1a 40%, #080812 100%);
    transform: rotateY(90deg);
    transform-origin: left center;
    border-radius: 0 6px 0 0;
}

/* 뒷줄 오른쪽 기계들 옆면 */
.back-right-1::before,
.back-right-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -25px;
    width: 25px;
    height: 100%;
    background: linear-gradient(180deg, #18182a 0%, #0e0e1a 40%, #080812 100%);
    transform: rotateY(-90deg);
    transform-origin: right center;
    border-radius: 6px 0 0 0;
}

.back-machine .bg-marquee {
    top: 6px;
    left: 8px;
    right: 8px;
    height: 16px;
}

.back-machine .bg-screen {
    top: 28px;
    left: 8px;
    right: 8px;
    height: 70px;
}

.back-machine .bg-controls {
    top: 108px;
    left: 8px;
    right: 8px;
    height: 35px;
    padding: 0 5px;
}

.back-machine .bg-joystick {
    width: 10px;
    height: 10px;
}

.back-machine .bg-buttons span {
    width: 8px;
    height: 8px;
}

.back-left-1 {
    left: 22%;
    bottom: 12%;
    width: 170px;
    height: 340px;
    transform: perspective(500px) rotateY(12deg) scale(0.75);
}

.back-left-1 .bg-marquee {
    background: linear-gradient(180deg, #ffaa00 0%, #aa6600 50%, #ffaa00 100%);
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}

.back-left-2 {
    left: 32%;
    bottom: 14%;
    width: 150px;
    height: 300px;
    transform: perspective(500px) rotateY(6deg) scale(0.65);
}

.back-left-2 .bg-marquee {
    background: linear-gradient(180deg, #00ff88 0%, #00aa55 50%, #00ff88 100%);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

.back-right-1 {
    right: 22%;
    bottom: 12%;
    width: 170px;
    height: 330px;
    transform: perspective(500px) rotateY(-12deg) scale(0.75);
}

.back-right-1 .bg-marquee {
    background: linear-gradient(180deg, #ff5500 0%, #aa3300 50%, #ff5500 100%);
    box-shadow: 0 0 12px rgba(255, 85, 0, 0.5);
}

.back-right-2 {
    right: 32%;
    bottom: 14%;
    width: 150px;
    height: 310px;
    transform: perspective(500px) rotateY(-6deg) scale(0.65);
}

.back-right-2 .bg-marquee {
    background: linear-gradient(180deg, #aa44ff 0%, #6622aa 50%, #aa44ff 100%);
    box-shadow: 0 0 12px rgba(170, 68, 255, 0.5);
}

/* Arcade Stools */
.arcade-stool {
    position: absolute;
    bottom: 8%;
    width: 45px;
    height: 55px;
    filter: blur(1.5px);
    opacity: 0.7;
    z-index: 1;
}

.arcade-stool::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 12px;
    background: linear-gradient(180deg, #222 0%, #111 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.arcade-stool::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 40px;
    background: linear-gradient(90deg, #444 0%, #222 50%, #444 100%);
    border-radius: 2px;
}

.stool-1 {
    left: 12%;
    transform: scale(0.7);
}

.stool-2 {
    left: 24%;
    transform: scale(0.8);
    bottom: 10%;
}

.stool-3 {
    right: 24%;
    transform: scale(0.8);
    bottom: 10%;
}

.stool-4 {
    right: 12%;
    transform: scale(0.7);
}

/* Arcade Cabinet - Base Style */
.arcade-cabinet {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) scale(1.1);
    transform-origin: bottom center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===================================
   Retro TV Style
   =================================== */
.arcade-cabinet.retro-tv {
    transform: translateX(-50%) scale(1);
    bottom: 100px;
}

.retro-tv .tv-body {
    width: 500px;
    background: linear-gradient(135deg, #8B4513 0%, #5D3A1A 50%, #3D2512 100%);
    border-radius: 20px;
    padding: 20px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        inset 0 2px 10px rgba(255, 255, 255, 0.1),
        inset 0 -5px 20px rgba(0, 0, 0, 0.3);
    border: 4px solid #2D1A0D;
}

.retro-tv .tv-frame-top {
    height: 15px;
    background: linear-gradient(90deg, #6B3D1F 0%, #8B5A2B 50%, #6B3D1F 100%);
    border-radius: 10px 10px 0 0;
    margin: -10px -10px 15px -10px;
}

.retro-tv .tv-screen-area {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.retro-tv .crt-screen {
    flex: 1;
    height: 280px;
    background: #000;
    border-radius: 20px / 15px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 80px rgba(0, 255, 255, 0.1),
        inset 0 0 40px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 255, 255, 0.2);
    border: 8px solid #1a1a1a;
}

.retro-tv .crt-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    border-radius: 12px;
}

/* TV Control Panel */
.retro-tv .tv-controls {
    width: 100px;
    background: linear-gradient(180deg, #5D3A1A 0%, #3D2512 100%);
    border-radius: 10px;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border: 2px solid #2D1A0D;
}

.retro-tv .tv-brand {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #C4A35A;
    text-shadow: 0 0 5px rgba(196, 163, 90, 0.5);
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.retro-tv .tv-knob {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #444 0%, #222 50%, #111 100%);
    border-radius: 50%;
    border: 3px solid #555;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    position: relative;
}

.retro-tv .tv-knob::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 15px;
    background: #888;
    transform: translate(-50%, -100%) rotate(0deg);
    border-radius: 2px;
}

.retro-tv .channel-knob::after {
    transform: translate(-50%, -100%) rotate(-30deg);
}

.retro-tv .volume-knob::after {
    transform: translate(-50%, -100%) rotate(45deg);
}

.retro-tv .tv-speaker {
    width: 70px;
    height: 60px;
    background: linear-gradient(180deg, #2D1A0D 0%, #1a0f08 100%);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    margin-top: auto;
}

.retro-tv .speaker-line {
    height: 3px;
    background: linear-gradient(90deg, #3D2512 0%, #5D3A1A 50%, #3D2512 100%);
    border-radius: 2px;
}

.retro-tv .tv-frame-bottom {
    height: 20px;
    background: linear-gradient(90deg, #6B3D1F 0%, #8B5A2B 50%, #6B3D1F 100%);
    border-radius: 0 0 10px 10px;
    margin: 15px -10px -10px -10px;
}

/* TV Legs */
.retro-tv .tv-legs {
    display: flex;
    justify-content: space-between;
    width: 400px;
    margin-top: -5px;
}

.retro-tv .tv-leg {
    width: 30px;
    height: 80px;
    background: linear-gradient(180deg, #5D3A1A 0%, #3D2512 100%);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.retro-tv .tv-leg::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 10px;
    background: #2D1A0D;
    border-radius: 0 0 5px 5px;
    left: 50%;
    transform: translateX(-50%);
}

.retro-tv .left-leg {
    margin-left: 30px;
}

.retro-tv .right-leg {
    margin-right: 30px;
}

/* ===================================
   Classic Arcade Cabinet Style (80s Stand-up)
   =================================== */
.arcade-cabinet.classic-arcade {
    transform: translateX(-50%) scale(0.9);
    bottom: 50px;
}

.classic-arcade .cab-top {
    width: 450px;
    height: 80px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 4px solid #0f0f23;
    border-bottom: none;
    box-shadow:
        0 -10px 30px rgba(255, 0, 128, 0.3),
        inset 0 5px 20px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.classic-arcade .cab-marquee {
    width: 90%;
    height: 60px;
    background: linear-gradient(180deg, #ff6b35 0%, #cc4420 50%, #ff6b35 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        0 0 30px rgba(255, 107, 53, 0.8),
        0 0 60px rgba(255, 107, 53, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    animation: marqueeFlicker 3s infinite;
    overflow: hidden;
}

.classic-arcade .marquee-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: marqueeShine 2s infinite;
}

@keyframes marqueeShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.classic-arcade .marquee-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 28px;
    color: #fff;
    text-shadow:
        0 0 10px #fff,
        0 0 20px #ff6b35,
        0 0 40px #ff6b35,
        0 0 80px #ff6b35;
    letter-spacing: 15px;
    z-index: 1;
}

.classic-arcade .cab-screen-section {
    width: 450px;
    background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%);
    border-left: 4px solid #0f0f23;
    border-right: 4px solid #0f0f23;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.classic-arcade .cab-bezel {
    background: #000;
    border-radius: 15px;
    padding: 12px;
    box-shadow:
        inset 0 0 30px rgba(0, 255, 255, 0.1),
        0 0 20px rgba(0, 0, 0, 0.5);
}

.classic-arcade .crt-screen {
    width: 100%;
    height: 280px;
    background: radial-gradient(ellipse at center, #001a1a 0%, #000 100%);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 60px rgba(0, 255, 255, 0.2),
        0 0 30px rgba(0, 255, 255, 0.3);
}

/* Control Deck */
.classic-arcade .cab-control-deck {
    width: 450px;
    height: 100px;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f23 100%);
    border-left: 4px solid #0f0f23;
    border-right: 4px solid #0f0f23;
    position: relative;
}

.classic-arcade .control-panel-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #2d2d4a 0%, #1a1a2e 100%);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 20px;
    box-sizing: border-box;
    box-shadow: inset 0 5px 15px rgba(255, 255, 255, 0.1);
}

/* Joystick */
.classic-arcade .arcade-joystick {
    position: relative;
    width: 60px;
    height: 70px;
}

.classic-arcade .stick-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 20px;
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border-radius: 25px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.classic-arcade .stick-shaft {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 35px;
    background: linear-gradient(90deg, #222 0%, #444 50%, #222 100%);
    border-radius: 3px;
}

.classic-arcade .stick-ball {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    background: radial-gradient(circle at 30% 30%, #ff4444, #aa0000);
    border-radius: 50%;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.5),
        inset 0 -5px 10px rgba(0, 0, 0, 0.3),
        inset 0 5px 10px rgba(255, 255, 255, 0.3);
}

/* Arcade Buttons */
.classic-arcade .arcade-buttons {
    display: flex;
    gap: 12px;
}

.classic-arcade .arc-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow:
        0 6px 0 rgba(0, 0, 0, 0.3),
        0 8px 15px rgba(0, 0, 0, 0.4),
        inset 0 -3px 10px rgba(0, 0, 0, 0.3),
        inset 0 3px 10px rgba(255, 255, 255, 0.4);
    transition: transform 0.1s, box-shadow 0.1s;
}

.classic-arcade .btn-1 {
    background: radial-gradient(circle at 30% 30%, #ff6b6b, #c92a2a);
    box-shadow:
        0 6px 0 #8a1c1c,
        0 8px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 0, 0, 0.5);
}

.classic-arcade .btn-2 {
    background: radial-gradient(circle at 30% 30%, #74c0fc, #1c7ed6);
    box-shadow:
        0 6px 0 #1864ab,
        0 8px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 150, 255, 0.5);
}

.classic-arcade .btn-3 {
    background: radial-gradient(circle at 30% 30%, #8ce99a, #37b24d);
    box-shadow:
        0 6px 0 #2b8a3e,
        0 8px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 255, 100, 0.5);
}

/* Coin Section */
.classic-arcade .cab-coin-section {
    width: 450px;
    height: 120px;
    background: linear-gradient(180deg, #0f0f23 0%, #1a1a2e 50%, #0f0f23 100%);
    border-left: 4px solid #0f0f23;
    border-right: 4px solid #0f0f23;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: visible;
    position: relative;
}

.classic-arcade .coin-door {
    width: 120px;
    height: 50px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 5px;
    border: 3px solid #444;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px;
}

.classic-arcade .coin-slot {
    width: 35px;
    height: 8px;
    background: #000;
    border-radius: 4px;
    border: 2px solid #555;
}

.classic-arcade .coin-return {
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, #333, #111);
    border-radius: 50%;
    border: 2px solid #444;
}

.classic-arcade .insert-coin-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #ffd700;
    text-shadow: 0 0 10px #ffd700;
    animation: coinBlink 1s steps(1) infinite;
}

@keyframes coinBlink {
    0%, 70% { opacity: 1; }
    71%, 100% { opacity: 0; }
}


/* Cabinet Base */
.classic-arcade .cab-base {
    width: 450px;
    height: 80px;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f23 100%);
    border: 4px solid #0f0f23;
    border-top: none;
    border-radius: 0 0 10px 10px;
    position: relative;
}

.classic-arcade .base-front {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 20px;
    background: linear-gradient(180deg, #16213e 0%, #0f0f23 100%);
    border-radius: 5px;
}

/* Cabinet Side LEDs */
.cab-led {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #00ff88, #00aa55);
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
    animation: ledPulse 1.5s ease-in-out infinite;
    z-index: 5;
}

.cab-led-left {
    left: 8px;
}

.cab-led-right {
    right: 8px;
}

@keyframes ledPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 5px #00ff88, 0 0 10px #00ff88;
    }
}

/* Cabinet Speakers */
.cab-speaker {
    width: 60px;
    height: 60px;
    background:
        repeating-radial-gradient(
            circle at center,
            #0a0a15 0px,
            #0a0a15 2px,
            #1a1a30 2px,
            #1a1a30 4px
        );
    border-radius: 50%;
    border: 3px solid #2a2a40;
    box-shadow:
        inset 0 2px 10px rgba(0, 0, 0, 0.8),
        0 2px 5px rgba(0, 0, 0, 0.5);
}

.cab-speaker-left {
    margin-right: 15px;
}

.cab-speaker-right {
    margin-left: 15px;
}

/* Cabinet Vents */
.cab-vent {
    position: absolute;
    bottom: 15px;
    width: 50px;
    height: 40px;
    background:
        repeating-linear-gradient(
            0deg,
            #0a0a15 0px,
            #0a0a15 3px,
            #1a1a30 3px,
            #1a1a30 6px
        );
    border-radius: 3px;
    border: 2px solid #2a2a40;
    z-index: 2;
}

.cab-vent-left {
    left: 30px;
}

.cab-vent-right {
    right: 30px;
}

/* Cabinet Header/Marquee */
.cabinet-header {
    width: 380px;
    height: 60px;
    background: linear-gradient(180deg, #1a1a28 0%, #2a2a3e 50%, #1a1a28 100%);
    border-radius: 15px 15px 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 -5px 30px rgba(255, 107, 53, 0.4),
        inset 0 2px 10px rgba(255, 255, 255, 0.1);
    border: 3px solid #3a3a4e;
    border-bottom: none;
    box-sizing: border-box;
}

.marquee-light {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(255, 107, 53, 0.3) 0%,
        transparent 50%);
    border-radius: 12px 12px 0 0;
    animation: marqueeGlow 2s ease-in-out infinite alternate;
}

@keyframes marqueeGlow {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.cabinet-marquee {
    font-family: 'Press Start 2P', cursive;
    font-size: 24px;
    color: #fff;
    text-shadow:
        0 0 10px #ff6b35,
        0 0 20px #ff6b35,
        0 0 40px #ff6b35;
    letter-spacing: 12px;
    z-index: 1;
    animation: marqueeFlicker 3s infinite;
}

@keyframes marqueeFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    95% { opacity: 0.9; }
    96% { opacity: 1; }
}

/* Cabinet Body */
.cabinet-body {
    width: 380px;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a28 100%);
    border: 3px solid #3a3a4e;
    border-top: none;
    border-bottom: none;
    box-sizing: border-box;
}

/* Cabinet Bezel (around screen) */
.cabinet-bezel {
    padding: 15px;
    background: linear-gradient(180deg, #0a0a12 0%, #1a1a28 100%);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}

/* CRT Screen */
.crt-screen {
    width: 100%;
    height: 180px;
    background: #000;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 60px rgba(0, 255, 255, 0.15),
        inset 0 0 30px rgba(255, 107, 53, 0.1),
        0 0 20px rgba(0, 255, 255, 0.3);
    border: 4px solid #111;
}

.crt-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 5;
}

/* Screen Static Effect - 투박한 브라운관 지지직 */
.screen-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.12;
    animation: staticNoise 0.08s steps(3) infinite, staticFlash 3s steps(1) infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes staticNoise {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-8%, -5%); }
    66% { transform: translate(6%, 8%); }
    100% { transform: translate(0, 0); }
}

@keyframes staticFlash {
    0%, 70%, 100% { opacity: 0.12; }
    75% { opacity: 0.3; }
    80% { opacity: 0.05; }
    85% { opacity: 0.28; }
    90% { opacity: 0.08; }
    95% { opacity: 0.22; }
}

/* CRT Horizontal Interference Line - 굵고 투박하게 */
.screen-static::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    animation: horizontalLine 4s linear infinite;
    opacity: 0.8;
}

@keyframes horizontalLine {
    0% { top: -12px; }
    100% { top: 100%; }
}

/* Scanlines - 투박한 스캔라인 */
.screen-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.4) 2px,
        transparent 2px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 4;
}

/* Screen Flicker - 투박한 깜빡임 */
.screen-flicker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    animation: screenFlicker 0.08s steps(2) infinite, crtGlitch 5s steps(1) infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes screenFlicker {
    0% { opacity: 0.02; }
    50% { opacity: 0.08; }
    100% { opacity: 0.02; }
}

/* Random CRT glitch/distortion - 투박하게 */
@keyframes crtGlitch {
    0%, 88%, 92%, 95%, 100% {
        transform: none;
        filter: none;
    }
    89% {
        transform: skewX(1deg) translateX(3px);
        filter: brightness(1.2);
    }
    90% {
        transform: skewX(-0.5deg) translateY(2px);
        filter: brightness(0.8);
    }
    93% {
        transform: skewX(0.8deg) translateX(-2px);
        filter: brightness(1.15);
    }
    94% {
        transform: translateY(-1px);
        filter: brightness(0.9);
    }
}

/* Screen Content */
.screen-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Glitch Logo */
.glitch-logo {
    position: relative;
}

.arcade-logo-img {
    max-width: 90px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
    animation: glitchLogo 3s infinite;
}

.arcade-logo-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 28px;
    color: #fff;
    text-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00ffff,
        0 0 80px #ff6b35;
    animation: glitchText 3s infinite;
}

@keyframes glitchLogo {
    0%, 100% {
        transform: translate(0);
        filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
    }
    2% {
        transform: translate(-3px, 1px);
        filter: drop-shadow(3px 0 0 rgba(255, 0, 100, 0.7)) drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.7));
    }
    4% {
        transform: translate(3px, -1px);
        filter: drop-shadow(-3px 0 0 rgba(255, 0, 100, 0.7)) drop-shadow(3px 0 0 rgba(0, 255, 255, 0.7));
    }
    6% {
        transform: translate(0);
        filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
    }
    40% { transform: translate(0); }
    42% {
        transform: translate(2px, 0) skewX(5deg);
        filter: drop-shadow(2px 0 0 rgba(255, 0, 100, 0.5));
    }
    44% {
        transform: translate(-2px, 0) skewX(-3deg);
        filter: drop-shadow(-2px 0 0 rgba(0, 255, 255, 0.5));
    }
    46% { transform: translate(0) skewX(0); }
}

@keyframes glitchText {
    0%, 100% {
        text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff;
        transform: translate(0);
    }
    2% {
        text-shadow: -3px 0 #ff6b35, 3px 0 #00ffff;
        transform: translate(-2px, 1px);
    }
    4% {
        text-shadow: 3px 0 #ff6b35, -3px 0 #00ffff;
        transform: translate(2px, -1px);
    }
    6% {
        text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff;
        transform: translate(0);
    }
    50% {
        text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff;
    }
    52% {
        text-shadow: 5px 0 #ff6b35, -5px 0 #00ffff, 0 0 40px #ff6b35;
    }
    54% {
        text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff;
    }
}

/* Press Enter Text */
.press-enter {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00;
    white-space: nowrap;
}

.press-enter .blink {
    animation: blinkText 1s steps(1) infinite;
}

@keyframes blinkText {
    0%, 70% { opacity: 1; }
    71%, 100% { opacity: 0; }
}

/* Control Panel */
.cabinet-control-panel {
    width: 380px;
    height: 60px;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a28 100%);
    border: 3px solid #3a3a4e;
    border-top: none;
    border-bottom: none;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

.control-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #222235 0%, #1a1a28 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Joystick */
.joystick {
    position: relative;
    width: 36px;
    height: 36px;
}

.joystick-base {
    width: 36px;
    height: 36px;
    background: radial-gradient(circle at 30% 30%, #444, #111);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.8);
}

.joystick-stick {
    display: none;
}

.joystick-ball {
    display: none;
}

/* Cabinet Buttons */
.cabinet-buttons {
    display: flex;
    gap: 8px;
}

.cab-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
}

.cab-btn:active {
    transform: translateY(2px);
}

.cab-btn.red {
    background: radial-gradient(circle at 30% 30%, #ff6666, #cc0000);
    box-shadow:
        0 3px 0 #880000,
        0 5px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(255, 0, 0, 0.5);
}

.cab-btn.blue {
    background: radial-gradient(circle at 30% 30%, #6666ff, #0000cc);
    box-shadow:
        0 3px 0 #000088,
        0 5px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(0, 100, 255, 0.5);
}

.cab-btn.green {
    background: radial-gradient(circle at 30% 30%, #66ff66, #00aa00);
    box-shadow:
        0 3px 0 #006600,
        0 5px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(0, 255, 0, 0.5);
}

/* Coin Panel */
.cabinet-coin-panel {
    width: 380px;
    height: 40px;
    background: linear-gradient(180deg, #1a1a28 0%, #0f0f18 100%);
    border: 3px solid #3a3a4e;
    border-top: none;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

.coin-door {
    width: 50%;
    height: 18px;
    background: linear-gradient(180deg, #111 0%, #222 50%, #111 100%);
    border: 2px solid #333;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.coin-slot-display {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px;
    color: #00ffff;
    text-shadow: 0 0 8px #00ffff;
    animation: coinBlink 1.5s infinite;
}

@keyframes coinBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Cabinet Base */
.cabinet-base {
    width: 380px;
    height: 80px;
    background: linear-gradient(180deg, #1a1a28 0%, #0a0a12 100%);
    border: 3px solid #3a3a4e;
    border-top: none;
    border-radius: 0 0 0 0;
    position: relative;
    box-sizing: border-box;
}

.cabinet-feet {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 8px;
    background: linear-gradient(180deg, #0a0a12 0%, #050508 100%);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}

/* Hidden Enter Button */
.enter-btn-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 500px) {
    .arcade-cabinet {
        transform: translate(-50%, -50%) scale(0.65);
    }

    .side-machine,
    .back-machine {
        display: none;
    }

    .cabinet-header,
    .cabinet-body,
    .cabinet-control-panel,
    .cabinet-coin-panel,
    .cabinet-base {
        width: 300px;
    }
}

/* ===================================
   Main Wrapper
   =================================== */
.main-wrapper {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 40%, rgba(0, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 70%, rgba(255, 107, 53, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 90%, rgba(0, 255, 255, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #0a1420 0%, #0d1825 100%);
    zoom: 0.75;
}

/* ===================================
   Navigation
   =================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: transparent;
    transition: background 0.3s;
}

.nav.scrolled {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

.nav-logo {
    text-decoration: none;
}

.nav-logo img {
    height: 40px;
}

.nav-logo span {
    font-family: 'Press Start 2P', cursive;
    font-size: 20px;
    color: #fff;
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink),
        0 0 40px var(--neon-pink);
}

/* Nav Right Container */
.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 8px;
    color: var(--neon-blue);
    cursor: pointer;
    transition: all 0.3s;
}

.lang-current {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--neon-blue);
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.lang-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.lang-btn svg {
    width: 20px;
    height: 20px;
}

.lang-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background: rgba(20, 10, 40, 0.95);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 10px;
    padding: 8px 0;
    min-width: 120px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    z-index: 100;
}

.lang-dropdown.active .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: block;
    width: 100%;
    padding: 10px 20px;
    background: none;
    border: none;
    color: var(--white);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-option:hover {
    background: rgba(0, 255, 255, 0.1);
    color: var(--neon-blue);
}

.lang-option.active {
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    outline: none;
}

.nav-toggle:focus {
    outline: none;
}

.nav-toggle span {
    width: 28px;
    height: 3px;
    background: var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-blue);
    transition: all 0.3s;
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a1420;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-header {
    text-align: center;
    margin-bottom: 60px;
}

.mobile-menu-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 32px;
    color: #ff6b35;
    text-shadow:
        0 0 10px rgba(255, 107, 53, 0.8),
        0 0 30px rgba(255, 107, 53, 0.6),
        0 0 50px rgba(255, 107, 53, 0.4);
    letter-spacing: 4px;
    animation: menuTitleGlow 2s ease-in-out infinite alternate;
}

@keyframes menuTitleGlow {
    0% {
        text-shadow:
            0 0 10px rgba(255, 107, 53, 0.8),
            0 0 30px rgba(255, 107, 53, 0.6),
            0 0 50px rgba(255, 107, 53, 0.4);
    }
    100% {
        text-shadow:
            0 0 15px rgba(255, 107, 53, 1),
            0 0 40px rgba(255, 107, 53, 0.8),
            0 0 70px rgba(255, 107, 53, 0.6);
    }
}

.mobile-menu-stages {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-link {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0;
    background: transparent;
    border: none;
    transition: all 0.2s;
    position: relative;
}

/* Selected state (keyboard + mouse hover synced) */
.mobile-link.selected {
    color: #fff;
}

.mobile-link.selected .stage-cursor {
    opacity: 1;
    color: #2DF7E6;
    text-shadow: 0 0 15px rgba(45, 247, 230, 0.8);
    animation: cursorBlink 0.5s ease-in-out infinite;
}

.mobile-link.selected .stage-number {
    color: #2DF7E6;
    text-shadow: 0 0 10px rgba(45, 247, 230, 0.6);
}

.mobile-link.selected .stage-name {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.stage-cursor {
    font-size: 14px;
    color: #2DF7E6;
    opacity: 0;
    transition: all 0.2s;
    position: absolute;
    left: -25px;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.stage-number {
    font-size: 12px;
    color: #ff6b35;
    text-shadow: 0 0 8px rgba(255, 107, 53, 0.4);
    min-width: 35px;
    transition: all 0.2s;
}

.stage-name {
    transition: all 0.2s;
}

.mobile-menu-footer {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
}

.menu-hint {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
}

/* ===================================
   Room Section
   =================================== */
.room-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* Arcade Room Ambient Effects - disabled for seamless background */

/* Floor Grid Effect - disabled */
.room-section::after {
    display: none !important;
    content: none !important;
}

.room-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.room-container {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 80px;
    align-items: flex-end;
    justify-content: center;
    padding: 40px;
}

.room-object {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.room-object:hover {
    transform: translateY(-20px) scale(1.05);
}

.object-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.room-icon {
    font-size: 4rem;
    filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.6));
    transition: transform 0.3s, filter 0.3s;
}

.room-object:hover .room-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 25px rgba(45, 247, 230, 0.8));
}

.object-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--gray);
    transition: all 0.3s;
}

.room-object:hover .object-label {
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
}

/* Old arcade cabinet style removed - using main definition */

.cabinet-screen {
    width: 110px;
    height: 90px;
    background: linear-gradient(180deg, #000 0%, #0a0a15 100%);
    border-radius: 10px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #444;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 40px rgba(0, 255, 255, 0.7),
        0 0 80px rgba(0, 255, 255, 0.4),
        inset 0 0 40px rgba(0, 255, 255, 0.3);
}

.cabinet-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    animation: scanline 10s linear infinite;
}

@keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

.cabinet-screen span {
    font-family: 'Press Start 2P', cursive;
    font-size: 18px;
    color: #fff;
    text-shadow:
        0 0 10px var(--neon-blue),
        0 0 20px var(--neon-blue),
        0 0 40px var(--neon-blue);
    animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
    0% { text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); }
    100% { text-shadow: 0 0 20px var(--neon-blue), 0 0 40px var(--neon-blue), 0 0 60px var(--neon-blue); }
}

/* Old cabinet-body removed - using definition at line 404 */

/* Game Shelf */
.game-shelf {
    width: 160px;
    height: 180px;
    background: linear-gradient(180deg, #1a2840 0%, #0f1a28 100%);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 2px solid rgba(0, 255, 255, 0.4);
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

.shelf-item {
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.shelf-item:nth-child(1) {
    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-orange) 100%);
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.7);
}

.shelf-item:nth-child(2) {
    background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
}

.shelf-item:nth-child(3) {
    background: linear-gradient(135deg, var(--neon-green) 0%, var(--neon-blue) 100%);
    box-shadow: 0 0 25px rgba(0, 255, 102, 0.7);
}

/* Retro Phone */
.retro-phone {
    width: 120px;
    height: 160px;
    position: relative;
}

.phone-body {
    width: 100px;
    height: 140px;
    background: linear-gradient(180deg, #ff6b35 0%, #cc4420 100%);
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 0 40px rgba(255, 107, 53, 0.6),
        0 0 80px rgba(255, 107, 53, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

.phone-body::before {
    content: '☎';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    opacity: 0.5;
}

.phone-receiver {
    width: 80px;
    height: 30px;
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border-radius: 20px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    animation: phoneRing 2s ease-in-out infinite;
}

@keyframes phoneRing {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    10%, 30% { transform: translateX(-50%) rotate(-3deg); }
    20%, 40% { transform: translateX(-50%) rotate(3deg); }
    50% { transform: translateX(-50%) rotate(0deg); }
}

/* Room Tagline */
.room-tagline {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 20;
}

.room-tagline p {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 8px;
    text-shadow:
        0 0 10px var(--neon-blue),
        0 0 30px var(--neon-blue),
        0 0 50px var(--neon-blue);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.scroll-arrow {
    display: block;
    font-size: 24px;
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
    animation: scrollBounce 2s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.8;
    }
    50% {
        transform: translateY(10px);
        opacity: 1;
    }
}

/* ===================================
   Content Sections
   =================================== */
.content-section {
    min-height: 100vh;
    padding: 120px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.section-inner {
    max-width: 1000px;
    width: 100%;
}

.section-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 36px;
    text-align: center;
    margin-bottom: 60px;
    color: #fff;
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink),
        0 0 40px var(--neon-pink),
        0 0 80px var(--neon-pink);
}

/* About Section */
.about-section {
    background: transparent;
}

/* Removed for seamless background */

.about-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.about-quote {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 60px;
    text-shadow:
        0 0 10px var(--neon-blue),
        0 0 30px var(--neon-blue);
    padding: 25px 30px;
    border: 2px solid rgba(0, 255, 255, 0.5);
    border-radius: 10px;
    background: rgba(0, 255, 255, 0.05);
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.15),
        inset 0 0 20px rgba(0, 255, 255, 0.03);
}

.about-text {
    max-width: 650px;
    margin: 0 auto;
}

.about-text p {
    font-size: 16px;
    line-height: 2.2;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.8);
}

.about-text strong {
    color: #fff;
    text-shadow:
        0 0 10px var(--neon-blue),
        0 0 20px var(--neon-blue);
}

.about-text .highlight {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-top: 40px;
    text-shadow:
        0 0 10px var(--neon-green),
        0 0 30px var(--neon-green),
        0 0 50px var(--neon-green);
}

/* ===================================
   Vision / Mission / Core Values - Scroll Animation
   =================================== */

/* Section wrapper */
.vmc-scroll-section {
    position: relative;
    background: transparent;
}

/* Background glow effects */
.vmc-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.vmc-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.2;
}

.vmc-glow-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #ff6b35 0%, transparent 70%);
    top: 10%;
    left: 5%;
    animation: vmcGlow1 12s ease-in-out infinite;
}

.vmc-glow-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #2DF7E6 0%, transparent 70%);
    top: 30%;
    right: 5%;
    animation: vmcGlow2 15s ease-in-out infinite;
}

.vmc-glow-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #cc00ff 0%, transparent 70%);
    bottom: 10%;
    left: 25%;
    animation: vmcGlow3 10s ease-in-out infinite;
}

@keyframes vmcGlow1 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.2;
    }
    50% {
        transform: translate(100px, 50px);
        opacity: 0.3;
    }
}

@keyframes vmcGlow2 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.15;
    }
    50% {
        transform: translate(-80px, -40px);
        opacity: 0.25;
    }
}

@keyframes vmcGlow3 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.15;
    }
    50% {
        transform: translate(60px, -60px);
        opacity: 0.25;
    }
}

/* Main container - defines total scroll height */
.vmc-scroll-container {
    position: relative;
    height: 300vh; /* 3 slides x 100vh each */
}

/* Sticky wrapper - stays fixed during scroll */
.vmc-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Content display area */
.vmc-display {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 100vh;
    padding: 0 60px;
    text-align: center;
}

/* Individual slides */
.vmc-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 800px;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.vmc-slide.active {
    opacity: 1;
    z-index: 1;
}

/* Slide icon */
.vmc-slide-icon {
    font-size: 4rem;
    margin-bottom: 30px;
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Slide label */
.vmc-slide-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    color: #ff6b35;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 25px;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

/* Slide title */
.vmc-slide-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: clamp(24px, 4vw, 42px);
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 30px;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Slide description */
.vmc-slide-desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: clamp(14px, 2vw, 18px);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

/* Core Values grid */
.vmc-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
    text-align: left;
}

.vmc-value-item {
    background: rgba(20, 10, 40, 0.6);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.vmc-value-item:hover {
    background: rgba(45, 247, 230, 0.1);
    border-color: rgba(45, 247, 230, 0.5);
    transform: translateY(-5px);
}

.vmc-value-name {
    display: block;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ff6b35;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
}

.vmc-value-item:hover .vmc-value-name {
    color: #2DF7E6;
    text-shadow: 0 0 10px rgba(45, 247, 230, 0.6);
}

.vmc-value-text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
    .vmc-scroll-container {
        height: 250vh;
    }

    .vmc-display {
        padding: 0 20px;
    }

    .vmc-slide {
        padding: 20px;
    }

    .vmc-slide-icon {
        font-size: 3rem;
    }

    .vmc-values-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .vmc-value-item {
        padding: 15px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .vmc-slide {
        transition: opacity 0.3s ease;
    }

    .vmc-slide-icon {
        animation: none;
    }

    .vmc-value-item {
        transition: none;
    }
}

/* Contents Section */
.contents-section {
    background: transparent;
}

/* Removed for seamless background */

.platform-bar {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.platform-item {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow:
        0 0 10px var(--neon-blue),
        0 0 20px var(--neon-blue);
}

.platform-divider {
    color: var(--neon-pink);
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink);
}

.platform-desc {
    text-align: center;
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.projects-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 1;
}

.project-card {
    background: rgba(20, 10, 40, 0.8);
    border: 2px solid rgba(45, 247, 230, 0.3);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    max-width: 400px;
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: #2DF7E6;
    box-shadow: 0 0 30px rgba(45, 247, 230, 0.3);
}

.project-card.featured {
    border: 3px solid var(--neon-pink);
    box-shadow:
        0 0 30px rgba(255, 107, 53, 0.5),
        0 0 60px rgba(255, 107, 53, 0.2);
}

.project-card-image {
    position: relative;
    height: 220px;
    background: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-pink) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

.project-card-image.coming-soon {
    background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
}

.project-card-image.locked {
    background: linear-gradient(135deg, #333 0%, #222 100%);
}

.project-placeholder {
    font-family: 'Press Start 2P', cursive;
    font-size: 3rem;
    color: white;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5);
}

.project-badge {
    position: absolute;
    left: 15px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 6px 12px;
    border-radius: 4px;
}

/* 첫 번째 뱃지 위치 */
.project-badge:nth-of-type(1) {
    top: 15px;
}

/* 두 번째 뱃지 위치 */
.project-badge:nth-of-type(2) {
    top: 45px;
}

.project-badge.pc {
    background: #2DF7E6;
    color: #0a0a0a;
    box-shadow: 0 0 10px rgba(45, 247, 230, 0.5);
}

.project-badge.mobile {
    background: #ff6b35;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
}

.project-badge.console {
    background: #7FFF00;
    color: #0a0a0a;
    box-shadow: 0 0 10px rgba(127, 255, 0, 0.5);
}

.project-card-content {
    padding: 20px;
    background: linear-gradient(180deg, #0d1a2d 0%, #0a1220 100%);
    border-top: 1px solid rgba(45, 247, 230, 0.3);
}

.project-card-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    margin-bottom: 15px;
    color: white;
}

.project-status {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 8px 20px;
    border-radius: 20px;
    display: inline-block;
}

.project-status.developing {
    background: var(--neon-green);
    color: #000;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
}

.project-status.soon {
    background: var(--neon-orange);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
}

.project-status.locked {
    background: #555;
    color: #999;
}

/* Contact Section */
.contact-section {
    background: transparent;
}

/* Removed for seamless background */

.contact-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px;
    background: rgba(40, 15, 70, 0.8);
    border-radius: 20px;
    border: 2px solid rgba(255, 107, 53, 0.5);
    box-shadow:
        0 0 40px rgba(255, 107, 53, 0.2),
        inset 0 0 30px rgba(255, 107, 53, 0.05);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group label {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow:
        0 0 10px var(--neon-blue),
        0 0 20px var(--neon-blue);
}

.form-group input,
.form-group textarea {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 10px;
    padding: 18px 20px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: var(--white);
    transition: all 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--neon-pink);
    box-shadow:
        0 0 30px rgba(255, 107, 53, 0.5),
        inset 0 0 20px rgba(255, 107, 53, 0.1);
    background: rgba(0, 0, 0, 0.7);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--gray);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* Textarea 스크롤바 - 시안 계열 */
.form-group textarea::-webkit-scrollbar {
    width: 10px;
}

.form-group textarea::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 5px;
}

.form-group textarea::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00d4ff 0%, #0099cc 50%, #00d4ff 100%);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow:
        0 0 8px rgba(0, 212, 255, 0.5),
        inset 0 0 3px rgba(255, 255, 255, 0.2);
}

.form-group textarea::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #33ddff 0%, #00d4ff 50%, #33ddff 100%);
    box-shadow:
        0 0 12px rgba(0, 212, 255, 0.8),
        inset 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Form Error Messages */
.form-group .error-message {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: var(--neon-red);
    text-shadow: 0 0 10px rgba(255, 0, 68, 0.5);
    margin-top: 5px;
    display: none;
}

.form-group.has-error .error-message {
    display: block;
}

.form-group.has-error input,
.form-group.has-error textarea {
    border-color: var(--neon-red);
    box-shadow: 0 0 20px rgba(255, 0, 68, 0.4);
}

.submit-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 20px 40px;
    background: rgba(255, 107, 53, 0.1);
    color: #fff;
    border: 3px solid var(--neon-pink);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink);
    box-shadow:
        0 0 30px rgba(255, 107, 53, 0.4),
        inset 0 0 20px rgba(255, 107, 53, 0.1);
    align-self: flex-start;
}

.submit-btn:hover {
    background: var(--neon-pink);
    color: #000;
    text-shadow: none;
    box-shadow:
        0 0 50px var(--neon-pink),
        0 0 100px rgba(255, 107, 53, 0.5);
    transform: translateY(-3px);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px;
    background: rgba(40, 15, 70, 0.8);
    border-radius: 20px;
    border: 2px solid rgba(0, 255, 255, 0.5);
    box-shadow:
        0 0 40px rgba(0, 255, 255, 0.2),
        inset 0 0 30px rgba(0, 255, 255, 0.05);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #5ce1e6;
}

.info-value {
    font-size: 16px;
    color: var(--white);
}

/* ===================================
   News & Notice Section
   =================================== */
.news-section {
    background: transparent;
}

/* Removed for seamless background */

/* Contents Filter Buttons */
/* Search & Filter Controls */
.contents-controls,
.news-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.search-box {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-box .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.7;
    pointer-events: none;
}

.search-box input {
    width: 100%;
    padding: 12px 40px 12px 45px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(45, 247, 230, 0.3);
    border-radius: 25px;
    color: #fff;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-box input:focus {
    border-color: rgba(45, 247, 230, 0.7);
    box-shadow: 0 0 15px rgba(45, 247, 230, 0.2);
}

.search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-box.has-value .search-clear {
    opacity: 1;
    visibility: visible;
}

.search-clear:hover {
    background: rgba(255, 107, 53, 0.3);
    color: #fff;
}

/* News search box - pink theme */
.news-controls .search-box input {
    border-color: rgba(255, 107, 53, 0.3);
}

.news-controls .search-box input:focus {
    border-color: rgba(255, 107, 53, 0.7);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.2);
}

/* No results message */
.no-results {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    display: none;
    grid-column: 1 / -1;
    width: 100%;
}

.no-results.show {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no-results .no-results-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.contents-filter-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.contents-filter-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    padding: 12px 25px;
    background: transparent;
    border: 2px solid rgba(45, 247, 230, 0.5);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s;
}

.contents-filter-btn:hover {
    border-color: #2DF7E6;
    color: #2DF7E6;
    box-shadow: 0 0 15px rgba(45, 247, 230, 0.3);
}

.contents-filter-btn.active {
    background: #2DF7E6;
    border-color: #2DF7E6;
    color: #0a1420;
    box-shadow: 0 0 20px rgba(45, 247, 230, 0.5);
}

/* Platform Tags */
.project-platforms {
    display: flex;
    gap: 8px;
    margin: 8px 0;
    flex-wrap: wrap;
}

.platform-tag {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 4px 8px;
    background: rgba(45, 247, 230, 0.2);
    border: 1px solid rgba(45, 247, 230, 0.5);
    border-radius: 4px;
    color: #2DF7E6;
}

/* Filter Buttons */
.news-filter-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

.news-filter-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    padding: 12px 25px;
    background: transparent;
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s;
}

.news-filter-btn:hover {
    border-color: #ff6b35;
    color: #ff6b35;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

.news-filter-btn.active {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

/* Card Grid */
.news-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* News Card */
.news-card {
    background: rgba(20, 10, 40, 0.8);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    max-width: 400px;
}

.news-card:hover {
    transform: translateY(-8px);
    border-color: #2DF7E6;
    box-shadow: 0 0 30px rgba(45, 247, 230, 0.3);
}

.news-card-image {
    position: relative;
    height: 160px;
    background: linear-gradient(135deg, #0a1420 0%, #0d1825 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-placeholder {
    font-size: 4rem;
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.5));
}

.news-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 6px 12px;
    border-radius: 4px;
}

.news-badge.news {
    background: #ff6b35;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
}

.news-badge.notice {
    background: #2DF7E6;
    color: #0a0a0a;
    box-shadow: 0 0 10px rgba(45, 247, 230, 0.5);
}

.news-card-content {
    padding: 20px;
    background: linear-gradient(180deg, #0d1a2d 0%, #0a1220 100%);
    border-top: 1px solid rgba(255, 107, 53, 0.3);
}

.news-card-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.news-card-desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
    line-height: 1.5;
}

.news-card-date {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: rgba(255, 107, 53, 0.7);
}

/* ===================================
   Game Download Modal
   =================================== */
.game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.game-modal.active {
    opacity: 1;
    visibility: visible;
}

.game-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

.game-modal-content {
    position: relative;
    width: 90%;
    max-width: 380px;
    background: linear-gradient(180deg, rgba(20, 10, 50, 0.98) 0%, rgba(10, 5, 30, 0.98) 100%);
    border: 2px solid rgba(45, 247, 230, 0.5);
    border-radius: 12px;
    padding: 22px;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 0 40px rgba(45, 247, 230, 0.2),
        inset 0 0 60px rgba(45, 247, 230, 0.05);
    max-height: 85vh;
    overflow-y: auto;
}

.game-modal.active .game-modal-content {
    transform: scale(1) translateY(0);
}

.game-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: rgba(255, 107, 53, 0.2);
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 50%;
    color: #ff6b35;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.game-modal-close:hover {
    background: rgba(255, 107, 53, 0.4);
    transform: rotate(90deg);
}

.game-modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(45, 247, 230, 0.2);
}

.game-modal-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(45, 247, 230, 0.3) 0%, rgba(255, 107, 53, 0.3) 100%);
    border: 2px solid rgba(45, 247, 230, 0.5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    color: #2DF7E6;
    text-shadow: 0 0 10px rgba(45, 247, 230, 0.8);
}

.game-modal-title-wrap {
    flex: 1;
}

.game-modal-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: #fff;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.game-modal-badges {
    display: flex;
    gap: 8px;
}

.game-badge {
    padding: 4px 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    border-radius: 4px;
}

.game-badge.pc {
    background: rgba(45, 247, 230, 0.2);
    color: #2DF7E6;
    border: 1px solid rgba(45, 247, 230, 0.5);
}

.game-badge.mobile {
    background: rgba(255, 107, 53, 0.2);
    color: #ff6b35;
    border: 1px solid rgba(255, 107, 53, 0.5);
}

.game-badge.console {
    background: rgba(127, 255, 0, 0.2);
    color: #7FFF00;
    border: 1px solid rgba(127, 255, 0, 0.5);
}

.game-modal-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(45, 247, 230, 0.3);
}

.game-modal-video iframe,
.game-modal-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.game-modal-video.no-video {
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-modal-video.no-video::after {
    content: '🎬 영상 준비 중';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(45, 247, 230, 0.6);
    letter-spacing: 2px;
}

.game-modal-desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 15px;
}

.game-modal-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.game-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-info-item .info-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #5ce1e6;
}

.game-info-item .info-value {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    color: #fff;
}

.download-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #2DF7E6;
    margin-bottom: 10px;
}

.download-buttons {
    display: flex;
    gap: 15px;
}

.download-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    background: rgba(45, 247, 230, 0.1);
    border: 2px solid rgba(45, 247, 230, 0.4);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.download-btn:hover {
    background: rgba(45, 247, 230, 0.2);
    border-color: #2DF7E6;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(45, 247, 230, 0.3);
}

.download-btn.mobile {
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.4);
}

.download-btn.mobile:hover {
    background: rgba(255, 107, 53, 0.2);
    border-color: #ff6b35;
    box-shadow: 0 5px 20px rgba(255, 107, 53, 0.3);
}

.download-btn.console {
    background: rgba(127, 255, 0, 0.1);
    border-color: rgba(127, 255, 0, 0.4);
}

.download-btn.console:hover {
    background: rgba(127, 255, 0, 0.2);
    border-color: #7FFF00;
    box-shadow: 0 5px 20px rgba(127, 255, 0, 0.3);
}

.download-icon {
    font-size: 22px;
}

.download-text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.download-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 480px) {
    .game-modal-content {
        padding: 20px;
    }

    .game-modal-header {
        flex-direction: column;
        text-align: center;
    }

    .game-modal-badges {
        justify-content: center;
    }

    .download-buttons {
        flex-direction: column;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .contents-filter-buttons {
        flex-wrap: wrap;
    }

    .contents-filter-btn {
        font-size: 10px;
        padding: 10px 18px;
    }

    .news-filter-buttons {
        flex-wrap: wrap;
    }

    .news-filter-btn {
        font-size: 10px;
        padding: 10px 18px;
    }

    .news-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   Arcade Contact Section
   =================================== */
.arcade-contact-section {
    position: relative;
    min-height: 100vh;
    padding: 100px 40px;
    background: transparent;
    overflow: hidden;
}

/* CRT Scanline Overlay - disabled for seamless background */
.crt-overlay {
    display: none !important;
}

.arcade-contact-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 2;
}

/* Arcade Header */
.arcade-header {
    text-align: center;
    margin-bottom: 60px;
}

.arcade-title {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(20px, 4vw, 36px);
    color: #fff;
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink),
        0 0 40px var(--neon-pink),
        0 0 80px var(--neon-pink);
    margin-bottom: 20px;
    animation: titlePulse 2s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.arcade-subtitle {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    color: #2DF7E6;
    text-shadow: 0 0 10px #2DF7E6;
}

/* Sound Toggle */
.sound-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(45, 247, 230, 0.4);
    border-radius: 8px;
    color: #2DF7E6;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sound-toggle:hover {
    background: rgba(45, 247, 230, 0.1);
    border-color: #2DF7E6;
    box-shadow: 0 0 15px rgba(45, 247, 230, 0.5);
}

.sound-toggle svg {
    width: 20px;
    height: 20px;
    position: absolute;
}

.sound-toggle .sound-on { display: block; }
.sound-toggle .sound-off { display: none !important; }
.sound-toggle.muted .sound-on { display: none !important; }
.sound-toggle.muted .sound-off { display: block !important; }

/* Arcade Container */
.arcade-contact-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Arcade Screen (Form Area) */
.arcade-screen {
    perspective: 1000px;
}

.screen-frame {
    background: linear-gradient(145deg, #1a2840 0%, #0f1a28 100%);
    border: 4px solid #2a3850;
    border-radius: 20px;
    padding: 8px;
    box-shadow:
        0 0 0 2px #0a1420,
        0 10px 40px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.screen-inner {
    background: rgba(0, 5, 15, 0.95);
    border-radius: 15px;
    padding: 35px;
    border: 2px solid rgba(45, 247, 230, 0.3);
    box-shadow:
        inset 0 0 60px rgba(45, 247, 230, 0.05),
        inset 0 0 20px rgba(255, 107, 53, 0.03);
    position: relative;
    overflow: hidden;
}

.screen-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(45, 247, 230, 0.02) 0px,
            transparent 1px,
            transparent 3px
        );
    pointer-events: none;
    animation: scanMove 8s linear infinite;
}

@keyframes scanMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* Arcade Form */
.arcade-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.arcade-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arcade-form-group label {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    letter-spacing: 2px;
    color: #2DF7E6;
    text-shadow: 0 0 10px rgba(45, 247, 230, 0.5);
}

.arcade-form-group input,
.arcade-form-group textarea {
    background: rgba(0, 20, 40, 0.8);
    border: 2px solid rgba(45, 247, 230, 0.3);
    border-radius: 8px;
    padding: 15px 18px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: #fff;
    transition: all 0.3s;
}

.arcade-form-group input:focus,
.arcade-form-group textarea:focus {
    outline: none;
    border-color: #2df7e6;
    box-shadow:
        0 0 20px rgba(45, 247, 230, 0.4),
        inset 0 0 10px rgba(45, 247, 230, 0.1);
}

.arcade-form-group input::placeholder,
.arcade-form-group textarea::placeholder {
    color: #666;
}

.arcade-form-group input.input-error,
.arcade-form-group textarea.input-error {
    border-color: #ff6b35;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.5),
        0 0 20px rgba(255, 107, 53, 0.3),
        inset 0 0 10px rgba(255, 107, 53, 0.1);
}

.arcade-form-group textarea {
    min-height: 200px;
    resize: none;
}

/* Arcade Textarea 스크롤바 - 시안 계열 */
.arcade-form-group textarea::-webkit-scrollbar {
    width: 10px;
}

.arcade-form-group textarea::-webkit-scrollbar-track {
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(45, 247, 230, 0.3);
    border-radius: 5px;
}

.arcade-form-group textarea::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2df7e6 0%, #00b3a3 50%, #2df7e6 100%);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow:
        0 0 8px rgba(45, 247, 230, 0.5),
        inset 0 0 3px rgba(255, 255, 255, 0.2);
}

.arcade-form-group textarea::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #5ffff0 0%, #2df7e6 50%, #5ffff0 100%);
    box-shadow:
        0 0 12px rgba(45, 247, 230, 0.8),
        inset 0 0 4px rgba(255, 255, 255, 0.3);
}

.arcade-error {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    color: #ff6b35;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.6),
        0 0 20px rgba(255, 107, 53, 0.4);
    min-height: 18px;
}

.fallback-submit {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    padding: 15px 30px;
    background: #ff6b35;
    color: #000;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
}

/* Success Message */
.success-message {
    display: none;
    text-align: center;
    padding: 40px 20px;
    animation: successFadeIn 0.5s ease-out;
}

.success-message.show {
    display: block;
}

@keyframes successFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-title {
    display: block;
    font-family: 'Press Start 2P', cursive;
    font-size: 24px;
    color: #2DF7E6;
    text-shadow:
        0 0 10px #2DF7E6,
        0 0 20px #2DF7E6,
        0 0 40px #2DF7E6;
    margin-bottom: 20px;
    animation: successPulse 1s ease-in-out infinite;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.success-desc {
    display: block;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    color: #fff;
    line-height: 1.8;
}

/* NPC Speech Bubble */
.npc-bubble {
    margin-top: 30px;
    padding: 15px 20px;
    background: rgba(255, 107, 53, 0.1);
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 10px;
    position: relative;
    animation: bubbleBounce 2s ease-in-out infinite;
}

.npc-bubble::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 30px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(255, 107, 53, 0.5);
}

@keyframes bubbleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.npc-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #ff6b35;
    margin-right: 10px;
}

.npc-text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: #fff;
}

/* Coin Slot Area */
.coin-slot-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.coin-mechanism {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Coin Slot */
.coin-slot {
    position: relative;
    width: 100px;
    height: 150px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 3px solid #444;
    border-radius: 12px;
    box-shadow:
        inset 0 5px 15px rgba(0, 0, 0, 0.5),
        0 5px 20px rgba(0, 0, 0, 0.3);
}

.slot-opening {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 10px;
    background: linear-gradient(180deg, #000 0%, #111 100%);
    border-radius: 5px;
    border: 2px solid #333;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

.slot-glow {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 25px;
    background: radial-gradient(ellipse, rgba(45, 247, 230, 0) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.coin-slot.active {
    border-color: #2DF7E6;
    box-shadow:
        inset 0 5px 15px rgba(0, 0, 0, 0.5),
        0 5px 20px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(45, 247, 230, 0.4);
}

.coin-slot.active .slot-glow {
    opacity: 1;
    background: radial-gradient(ellipse, rgba(45, 247, 230, 0.6) 0%, transparent 70%);
    animation: slotGlow 0.5s ease-out;
}

@keyframes slotGlow {
    0% { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(1.5); opacity: 0; }
}

.spark-container {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 40px;
    pointer-events: none;
}

.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 6px #FFD700, 0 0 10px #FFA500;
    animation: sparkAnim 0.6s ease-out forwards;
}

@keyframes sparkAnim {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

/* Coin */
.coin {
    width: 60px;
    height: 60px;
    cursor: grab;
    transition: transform 0.3s, box-shadow 0.3s;
    user-select: none;
    -webkit-user-drag: element;
}

.coin:active {
    cursor: grabbing;
}

.coin:hover {
    transform: scale(1.1) rotate(5deg);
}

.coin:focus {
    outline: 3px solid #2DF7E6;
    outline-offset: 4px;
    border-radius: 50%;
}

.coin-face {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #DAA520;
    box-shadow:
        0 4px 15px rgba(255, 215, 0, 0.5),
        inset 0 -3px 10px rgba(0, 0, 0, 0.3),
        inset 0 3px 10px rgba(255, 255, 255, 0.4);
    position: relative;
}

.coin-face::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.coin-face span {
    font-family: 'Press Start 2P', cursive;
    font-size: 24px;
    color: #8B4513;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 53%;
    left: 55%;
    transform: translate(-50%, -50%);
    line-height: 1;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    image-rendering: pixelated;
}

.coin.inserted {
    animation: coinInsert 0.5s ease-in forwards;
    pointer-events: none;
}

@keyframes coinInsert {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-80px) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(0.3);
        opacity: 0;
    }
}

.coin.reset {
    animation: coinReset 0.5s ease-out forwards;
}

@keyframes coinReset {
    0% {
        transform: translateY(-100px) scale(0.3);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Coin Help Text */
.coin-help {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: #888;
    text-align: center;
}

.coin-help-mobile {
    display: none;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: #888;
    text-align: center;
}

/* Press Start Button */
.press-start-btn {
    position: relative;
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    letter-spacing: 2px;
    padding: 20px 50px;
    background: rgba(50, 50, 50, 0.8);
    color: #666;
    border: 3px solid #444;
    border-radius: 10px;
    cursor: not-allowed;
    transition: all 0.3s;
    overflow: hidden;
}

.press-start-btn .btn-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border-radius: 7px;
    transition: all 0.3s;
}

.press-start-btn:disabled {
    opacity: 0.6;
}

.press-start-btn.enabled {
    background: rgba(255, 107, 53, 0.2);
    color: #ff6b35;
    border-color: #ff6b35;
    cursor: pointer;
    text-shadow: 0 0 10px #ff6b35;
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.4);
    animation: startPulse 1.5s ease-in-out infinite;
}

@keyframes startPulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 107, 53, 0.4);
    }
    50% {
        box-shadow: 0 0 50px rgba(255, 107, 53, 0.6);
    }
}

.press-start-btn.enabled:hover {
    background: rgba(255, 107, 53, 0.3);
    transform: scale(1.05);
}

.press-start-btn.enabled:active {
    transform: scale(0.95);
}

.press-start-btn.enabled .btn-glow {
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.3), transparent);
    animation: glowSweep 2s linear infinite;
}

@keyframes glowSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Loading Indicator */
.loading-indicator {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.loading-indicator.show {
    display: flex;
}

.loading-bar {
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #2DF7E6;
    border-radius: 10px;
    overflow: hidden;
}

.loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2DF7E6, #ff6b35);
    box-shadow: 0 0 20px #2DF7E6;
    animation: loadingAnim 2s ease-in-out forwards;
}

@keyframes loadingAnim {
    0% { width: 0%; }
    100% { width: 100%; }
}

.loading-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: #2DF7E6;
    text-shadow: 0 0 10px #2DF7E6;
    animation: loadingBlink 0.5s ease-in-out infinite;
}

@keyframes loadingBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* CRT Flash Effect */
.screen-inner.flash {
    animation: crtFlash 0.3s ease-out;
}

@keyframes crtFlash {
    0% { filter: brightness(3) contrast(1.5); }
    100% { filter: brightness(1) contrast(1); }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .arcade-title,
    .success-title,
    .npc-bubble,
    .press-start-btn.enabled,
    .loading-text {
        animation: none;
    }

    .coin.inserted,
    .coin.reset {
        animation-duration: 0.1s;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .arcade-contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .coin-slot-area {
        order: -1;
    }

    .coin-help {
        display: none;
    }

    .coin-help-mobile {
        display: block;
    }
}

@media (max-width: 600px) {
    .arcade-contact-section {
        padding: 60px 20px;
    }

    .arcade-title {
        font-size: 16px;
    }

    .screen-inner {
        padding: 25px 20px;
    }

    .press-start-btn {
        font-size: 12px;
        padding: 15px 30px;
    }
}

/* ===================================
   Footer
   =================================== */
/* ===================================
   Scroll to Top Button
   =================================== */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.95), rgba(255, 70, 30, 0.95));
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: linear-gradient(135deg, rgba(255, 130, 80, 1), rgba(255, 90, 50, 1));
    transform: translateY(-3px);
    box-shadow:
        0 6px 20px rgba(255, 107, 53, 0.5),
        0 0 15px rgba(255, 107, 53, 0.3);
}

.scroll-top-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.4);
}

.scroll-top-btn span {
    display: block;
    line-height: 1;
}

.footer {
    background: rgba(0, 0, 0, 0.3);
    padding: 40px;
    border-top: 1px solid rgba(45, 247, 230, 0.2);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-item {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.footer-right {
    display: flex;
    align-items: center;
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.footer-link {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: var(--gray);
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.footer-link:hover {
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #060a10;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: linear-gradient(180deg, #0a1420 0%, #101828 100%);
    border: 2px solid rgba(255, 107, 53, 0.4);
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s;
    scrollbar-width: thin;
    scrollbar-color: var(--neon-pink) rgba(26, 10, 46, 0.5);
}

/* Custom Scrollbar for Modal - Retro Arcade Style */
.modal::-webkit-scrollbar {
    width: 8px;
}

.modal::-webkit-scrollbar-track {
    background: rgba(26, 10, 46, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.modal::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--neon-pink) 0%, #cc4420 50%, #aa3015 100%);
    border-radius: 4px;
    box-shadow: 0 0 8px var(--neon-pink), inset 0 0 2px rgba(255, 255, 255, 0.3);
}

.modal::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff8855 0%, var(--neon-pink) 50%, #cc4420 100%);
    box-shadow: 0 0 12px var(--neon-pink), inset 0 0 3px rgba(255, 255, 255, 0.5);
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--gray);
    font-size: 30px;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-close:hover {
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
}

.modal-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
    margin-bottom: 25px;
    padding-right: 30px;
}

.modal-content {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: var(--white);
    line-height: 1.8;
}

.modal-content h4 {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    color: var(--neon-blue);
    margin: 20px 0 10px;
    font-size: 15px;
}

.modal-content p {
    margin-bottom: 10px;
    color: var(--gray);
}

/* ===================================
   News Modal
   =================================== */
.news-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.news-modal.active {
    opacity: 1;
    visibility: visible;
}

.news-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    z-index: 0;
}

.news-modal-content {
    position: relative;
    background: linear-gradient(180deg, #0a1420 0%, #101828 100%);
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 20px;
    padding: 40px;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow:
        0 0 60px rgba(255, 107, 53, 0.3),
        0 0 120px rgba(255, 107, 53, 0.1);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-style: preserve-3d;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--neon-pink) rgba(26, 10, 46, 0.5);
}

/* Webkit scrollbar for news modal - Retro Arcade Style */
.news-modal-content::-webkit-scrollbar {
    width: 8px;
}

.news-modal-content::-webkit-scrollbar-track {
    background: rgba(26, 10, 46, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.news-modal-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--neon-pink) 0%, #cc4420 50%, #aa3015 100%);
    border-radius: 4px;
    box-shadow: 0 0 8px var(--neon-pink), inset 0 0 2px rgba(255, 255, 255, 0.3);
}

.news-modal-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff8855 0%, var(--neon-pink) 50%, #cc4420 100%);
    box-shadow: 0 0 12px var(--neon-pink), inset 0 0 3px rgba(255, 255, 255, 0.5);
}

.news-modal.active .news-modal-content {
    transform: scale(1) translateY(0);
}

/* 3D Circular Carousel System */
.news-modal {
    perspective: 1500px;
    perspective-origin: 50% 50%;
}

/* Carousel animations */
@keyframes carouselRotateOutLeft {
    0% {
        transform: scale(1) translateY(0) translateZ(0) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.7) translateY(0) translateZ(-300px) rotateY(45deg) translateX(-300px);
        opacity: 0;
    }
}

@keyframes carouselRotateOutRight {
    0% {
        transform: scale(1) translateY(0) translateZ(0) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.7) translateY(0) translateZ(-300px) rotateY(-45deg) translateX(300px);
        opacity: 0;
    }
}

@keyframes carouselRotateInFromRight {
    0% {
        transform: translateY(-50%) translateX(200px) translateZ(-350px) rotateY(-50deg) scale(0.65);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-50%) translateX(100px) translateZ(-150px) rotateY(-25deg) scale(0.85);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-50%) translateX(0) translateZ(0) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes carouselRotateInFromLeft {
    0% {
        transform: translateY(-50%) translateX(-200px) translateZ(-350px) rotateY(50deg) scale(0.65);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-50%) translateX(-100px) translateZ(-150px) rotateY(25deg) scale(0.85);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-50%) translateX(0) translateZ(0) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

/* Apply animations */
.news-modal-content.carousel-to-left {
    animation: carouselRotateOutLeft 0.55s ease-in-out forwards;
}

.news-modal-content.carousel-to-right {
    animation: carouselRotateOutRight 0.55s ease-in-out forwards;
}

.news-modal-prev.carousel-to-center {
    animation: carouselRotateInFromLeft 0.55s ease-out forwards;
    z-index: 10 !important;
}

.news-modal-next.carousel-to-center {
    animation: carouselRotateInFromRight 0.55s ease-out forwards;
    z-index: 10 !important;
}

/* Previous/Next Preview Cards */
.news-modal-preview {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    background: linear-gradient(180deg, #0a1420 0%, #101828 100%);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 16px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Preview Image Area */
.preview-image {
    position: relative;
    height: 140px;
    background: linear-gradient(135deg, #0a1420 0%, #0d1825 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-icon {
    font-size: 3rem;
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.5));
}

.preview-image .preview-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

/* Preview Content Area */
.preview-content {
    padding: 18px;
}

.preview-date {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: rgba(255, 107, 53, 0.7);
    margin-top: 10px;
}

.news-modal.active .news-modal-preview {
    opacity: 0.6;
    visibility: visible;
}

.news-modal.active .news-modal-prev:hover {
    opacity: 0.85;
    transform: translateY(-50%) translateZ(-180px) rotateY(35deg) scale(1.05);
    border-color: #ff6b35;
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.5);
}

.news-modal.active .news-modal-next:hover {
    opacity: 0.85;
    transform: translateY(-50%) translateZ(-180px) rotateY(-35deg) scale(1.05);
    border-color: #ff6b35;
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.5);
}

.news-modal-prev {
    left: 50%;
    margin-left: -680px;
    z-index: 2;
    transform: translateY(-50%) translateZ(-250px) rotateY(40deg) scale(0.85);
}

.news-modal-next {
    right: 50%;
    margin-right: -680px;
    z-index: 2;
    transform: translateY(-50%) translateZ(-250px) rotateY(-40deg) scale(0.85);
}

.news-modal-content {
    z-index: 5;
}

.news-modal-preview.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

/* Navigation Arrows */
.news-modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ff6b35;
    font-size: 50px;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    text-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
}

.news-modal.active .news-modal-arrow {
    opacity: 0.7;
    visibility: visible;
}

.news-modal-arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
    text-shadow: 0 0 25px rgba(255, 107, 53, 0.8);
}

.news-modal-arrow span {
    line-height: 1;
}

.news-modal-arrow-prev {
    left: 50%;
    margin-left: -400px;
}

.news-modal-arrow-next {
    right: 50%;
    margin-right: -400px;
}

.news-modal-arrow.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

.preview-badge {
    position: relative;
    z-index: 1;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 15px;
}

.preview-badge.news {
    background: #ff6b35;
    color: #fff;
}

.preview-badge.notice {
    background: #2DF7E6;
    color: #0a0a0a;
}

.preview-title {
    position: relative;
    z-index: 1;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Responsive for preview cards */
@media (max-width: 1200px) {
    .news-modal-preview {
        width: 220px;
    }

    .preview-image {
        height: 120px;
    }

    .preview-title {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .preview-content {
        padding: 15px;
    }
}

@media (max-width: 900px) {
    .news-modal-preview,
    .news-modal-arrow {
        display: none;
    }
}

.news-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 107, 53, 0.1);
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 50%;
    color: #ff6b35;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-modal-close:hover {
    background: #ff6b35;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.news-modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.news-modal-badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 8px 15px;
    border-radius: 6px;
}

.news-modal-badge.news {
    background: #ff6b35;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
}

.news-modal-badge.notice {
    background: #2DF7E6;
    color: #0a0a0a;
    box-shadow: 0 0 15px rgba(45, 247, 230, 0.5);
}

.news-modal-date {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.news-modal-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 107, 53, 0.3);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.news-modal-body {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
}

.news-modal-body p {
    margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .news-modal-content {
        padding: 30px 25px;
        margin: 20px;
    }

    .news-modal-title {
        font-size: 20px;
    }

    .news-modal-body {
        font-size: 14px;
    }
}

/* Social Links */
.social-links {
    display: flex;
    gap: 20px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 50%;
    color: var(--neon-pink);
    transition: all 0.3s ease;
}

.social-icon svg {
    width: 20px;
    height: 20px;
}

.social-icon:hover {
    background: var(--neon-pink);
    color: #000;
    border-color: var(--neon-pink);
    box-shadow:
        0 0 20px var(--neon-pink),
        0 0 40px rgba(255, 107, 53, 0.5);
    transform: translateY(-3px);
}

/* ===================================
   Responsive
   =================================== */
@media (max-width: 768px) {
    .nav {
        padding: 15px 20px;
    }

    .game-icon {
        width: 70px;
        height: 70px;
    }

    .game-icon span {
        font-size: 14px;
    }

    .logo-text {
        font-size: 48px;
    }

    .enter-btn {
        padding: 15px 35px;
        font-size: 12px;
    }

    .room-container {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .cabinet-screen {
        width: 90px;
        height: 75px;
    }

    .room-tagline {
        bottom: 60px;
    }

    .room-tagline p {
        font-size: 20px;
        letter-spacing: 4px;
    }

    .content-section {
        padding: 80px 20px;
    }

    .section-title {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .about-quote {
        font-size: 16px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form {
        padding: 25px;
    }

    .submit-btn {
        width: 100%;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-links {
        align-items: center;
    }

    .social-links {
        gap: 15px;
    }

    .social-icon {
        width: 36px;
        height: 36px;
    }

    .social-icon svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .room-object {
        transform: scale(0.85);
    }

    .room-object:hover {
        transform: scale(0.9) translateY(-15px);
    }

    .projects-container {
        grid-template-columns: 1fr;
    }

    .platform-bar {
        flex-wrap: wrap;
        gap: 15px;
    }

    .platform-item {
        font-size: 10px;
    }
}