:root {
    /* Warna Alam Bikini Bottom */
    --ocean-water: #0ea5e9; 
    --ocean-sand: #fde047;
    
    /* Palet Otentik Krusty Krab */
    --kk-floor: #4ca182; 
    --kk-floor-line: #2d6650; 
    --kk-wall: #9ebdd0; 
    --kk-wall-line: #7a9ba8; 
    --kk-wood-dark: #452410; 
    --kk-door: #71a5c6; 
    --kk-boat: #e2e8f0; 
    --kk-boat-trim: #3b82f6; 
    
    --krusty-red: #b91c1c; --krusty-gold: #f59e0b;
    --danger-true: #991b1b; --text-main: #1e293b;
}

/* HARDWARE ACCELERATION & RESET */
* { box-sizing: border-box; user-select: none; -webkit-font-smoothing: antialiased; outline: none; -webkit-tap-highlight-color: transparent;}
body { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: 'Poppins', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1000px; touch-action: none; }

/* SCENE 1: THE PORTALS (INTRO) */
#intro-screen { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(circle at center, #0284c7 0%, #001f3f 100%); perspective: 1200px; cursor: pointer; transition: opacity 0.4s ease; will-change: opacity;}
.open-sign { position: absolute; top: 10%; z-index: 10; background: #050505; color: #ef4444; padding: 15px 40px; border: 6px solid #4a2408; border-radius: 15px; font-family: 'Press Start 2P', cursive; font-size: 20px; text-shadow: 0 0 10px #ef4444; animation: neonFlicker 2s infinite alternate; pointer-events: none;}
@keyframes neonFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
.door-frame { position: relative; width: min(450px, 90vw); height: min(550px, 70vh); display: flex; border: 25px solid var(--kk-wood-dark); border-bottom: none; background: #000; transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none; will-change: transform;}
.door { position: relative; width: 50%; height: 100%; background: rgba(173, 216, 230, 0.3); border: 10px solid #8b5a33; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform;}
.door.left { transform-origin: left center; border-right: 6px solid var(--kk-wood-dark); }
.door.right { transform-origin: right center; border-left: 6px solid var(--kk-wood-dark); }
.handle { position: absolute; top: 50%; width: 25px; height: 80px; background: var(--krusty-gold); border-radius: 5px; transform: translateY(-50%); }
.door.left .handle { right: 15px; } .door.right .handle { left: 15px; }
.click-hint { position: absolute; bottom: 8%; color: rgba(255,255,255,0.8); font-size: 16px; font-weight: 700; letter-spacing: 4px; animation: pulseHint 2s infinite; text-align: center; pointer-events: none;}
@keyframes pulseHint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.door-open .door.left { transform: rotateY(-110deg); } .door-open .door.right { transform: rotateY(110deg); }
.zoom-through { transform: scale(8) translateZ(400px); opacity: 0; }

/* SCENE 2: THE 3D WORLD ENGINE (OPTIMIZED) */
#main-hud { position: absolute; inset: 0; z-index: 10; display: none; overflow: hidden; opacity: 0; transition: opacity 0.5s ease; background: #000; perspective: 1200px; pointer-events: none;}
#main-hud.active { opacity: 1; display: block; }
.post-processing { position: absolute; inset: 0; z-index: 8000; pointer-events: none !important; background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.7) 100%); }

.cinematic-scene, .room-box { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1; transform-style: preserve-3d; will-change: transform; pointer-events: none !important; }
.room-box { width: 100vw; height: 100vh; }
.zoom-transition { transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

.wall-back, .wall-front, .floor, .ceiling { pointer-events: none !important; transform-style: preserve-3d; backface-visibility: hidden;}

/* ARSITEKTUR PERSEGI PANJANG */
.wall-back, .wall-front, .wall-left, .wall-right {
    position: absolute; top: 50%; left: 50%; height: 1600px; margin-top: -500px;
    backface-visibility: hidden; transform-style: preserve-3d;
    background: 
        repeating-linear-gradient(90deg, transparent 0px, transparent 350px, var(--kk-wood-dark) 350px, var(--kk-wood-dark) 380px),
        repeating-linear-gradient(0deg, transparent 0px, transparent 300px, var(--kk-wood-dark) 300px, var(--kk-wood-dark) 330px),
        linear-gradient(to bottom, rgba(14, 165, 233, 0.45) 0%, rgba(14, 165, 233, 0.7) 65%, var(--ocean-sand) 65%, var(--ocean-sand) 100%);
    border: 50px solid var(--kk-wood-dark); border-bottom: 80px solid var(--kk-wall-line);
}

.wall-back, .wall-front { width: 3000px; }
.wall-left, .wall-right { width: 4000px; }

.wall-back { transform: translate(-50%, -50%) translateZ(-2000px); }
.wall-front { transform: translate(-50%, -50%) translateZ(2000px) rotateY(180deg); }
.wall-left { transform: translate(-50%, -50%) translateX(-1500px) rotateY(90deg); }
.wall-right { transform: translate(-50%, -50%) translateX(1500px) rotateY(-90deg); }

/* Bendera Festival */
.bunting-container { position: absolute; top: 0; left: 0; width: 100%; height: 100px; display: flex; justify-content: space-around; }
.bunting-flag { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #ef4444; }
.bunting-flag:nth-child(2n) { border-top-color: #3b82f6; }
.bunting-flag:nth-child(3n) { border-top-color: #fde047; }

.floor { 
    position: absolute; top: 50%; left: 50%; width: 3000px; height: 4000px; 
    background: repeating-linear-gradient(90deg, var(--kk-floor) 0px, var(--kk-floor) 120px, var(--kk-floor-line) 120px, var(--kk-floor-line) 130px); 
    transform: translate(-50%, -50%) translateY(300px) rotateX(90deg); 
    box-shadow: inset 0 100px 400px rgba(0,0,0,0.8); 
}
.ceiling { 
    position: absolute; top: 50%; left: 50%; width: 3000px; height: 4000px; 
    background: repeating-linear-gradient(90deg, #111 0px, #111 200px, var(--kk-wood-dark) 200px, var(--kk-wood-dark) 240px); 
    transform: translate(-50%, -50%) translateY(-1300px) rotateX(-90deg); 
    box-shadow: inset 0 0 600px rgba(0,0,0,0.9);
}

/* PAPAN DATA HOLOGRAM */
.hologram-board {
    position: absolute; top: 50%; left: 50%; width: 1050px; padding: 40px;
    margin-top: -500px; 
    background: #fffde7; 
    border: 20px solid var(--kk-wood-dark); 
    border-radius: 8px;
    color: #b91c1c; 
    transform-style: preserve-3d; 
    pointer-events: auto !important; 
    text-align: left;
    backface-visibility: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    transition: box-shadow 0.5s ease;
}

.board-left { transform: translate(-50%, -50%) translateX(-1500px) rotateY(90deg) translateZ(40px) translateY(150px); }
.board-right { transform: translate(-50%, -50%) translateX(1500px) rotateY(-90deg) translateZ(40px) translateY(150px); }
.board-front { transform: translate(-50%, -50%) translateZ(1960px) rotateY(180deg) translateY(150px); }

.board-front {
    background: #4a2408 !important; 
    border: 15px solid #291404 !important; 
    box-shadow: inset 0 0 60px rgba(0,0,0,0.8), 0 30px 60px rgba(0,0,0,0.6) !important;
}
.board-front::before, .board-front::after { background: #8b5a33 !important; width: 10px !important; }
.board-front h2 { color: #fde047 !important; text-shadow: 4px 4px 0px #111 !important; }
.board-front div[style*="color: #b45309"] { color: #e2e8f0 !important; }
.board-front div[style*="border-bottom: 8px double #b91c1c"] { border-bottom-color: #fde047 !important; }
.board-front .crime-card {
    background: #f8fafc !important; 
    border: none !important; border-radius: 2px !important;
    box-shadow: 3px 10px 15px rgba(0,0,0,0.5) !important;
    position: relative; padding-top: 35px !important; transform: rotate(-1deg);
}
.board-front .crime-card:nth-child(even) { transform: rotate(1.5deg); }
.board-front .crime-card::before {
    content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 14px; background: #ef4444; border-radius: 50%;
    box-shadow: -2px 2px 3px rgba(0,0,0,0.4), inset -2px -2px 4px rgba(0,0,0,0.3);
}
.board-front .crime-card-title { color: #b91c1c !important; border-bottom: 2px dashed #94a3b8 !important; margin-bottom: 15px !important; }
.board-front .crime-card-text { color: #0f172a !important; }

.hologram-board::before { content:''; position:absolute; bottom:100%; left: 10%; width: 6px; height: 1000px; background: #111; }
.hologram-board::after { content:''; position:absolute; bottom:100%; right: 10%; width: 6px; height: 1000px; background: #111; }

.crime-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.crime-card { background: transparent; padding: 25px; border-radius: 0; border: 5px solid #b45309; box-shadow: 8px 8px 0px #b45309; }
.crime-card-title { color: var(--danger-true); font-weight: 900; font-size: 20px; margin-bottom: 10px; border-bottom: 4px dashed rgba(185, 28, 28, 0.4); padding-bottom: 8px;}
.crime-card-text { font-size: 16px; color: #78350f; font-weight: bold; line-height: 1.6; }

/* PROPERTI INTERIOR KHAS KRUSTY KRAB */
.kk-pillar { position: absolute; width: 120px; height: 3000px; background: linear-gradient(to right, #291404, #5c2b0b, #291404); border-left: 5px solid #111; border-right: 5px solid #111;}
.pillar-left-1 { top: 50%; left: 0; transform: translate(-50%, -50%) translateZ(-500px); }
.pillar-left-2 { top: 50%; left: 0; transform: translate(-50%, -50%) translateZ(500px); }
.pillar-right-1 { top: 50%; right: 0; transform: translate(50%, -50%) translateZ(-500px); }
.pillar-right-2 { top: 50%; right: 0; transform: translate(50%, -50%) translateZ(500px); }

.kk-table-group { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; pointer-events: none;}
.table-1 { transform: translate3d(-600px, 0, 0px); }
.table-2 { transform: translate3d(600px, 0, 0px); }
.table-3 { transform: translate3d(0px, 0, 800px); } 

.kk-barrel { position: absolute; width: 160px; height: 220px; background: repeating-linear-gradient(90deg, #5c2b0b 0px, #5c2b0b 20px, #291404 20px, #291404 25px); transform: translate(-50%, -50%) translateY(190px); border-radius: 10px; border: 4px solid #111; box-shadow: inset 0 0 50px rgba(0,0,0,0.8);}
.kk-barrel.cross { transform: translate(-50%, -50%) translateY(190px) rotateY(90deg); }
.kk-table-top { position: absolute; width: 380px; height: 380px; background: #fde047; border: 30px solid #dc2626; border-radius: 50%; transform: translate(-50%, -50%) translateY(80px) rotateX(90deg); box-shadow: inset 0 0 30px rgba(0,0,0,0.3), 0 20px 50px rgba(0,0,0,0.6); }

/* FITUR FLASHCARD 3D */
.fc-3d-container { 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; 
    width: 1400px; transform-style: preserve-3d;
}
.fc-3d { 
    position: relative; height: 420px; perspective: 1200px; 
    pointer-events: auto !important; cursor: pointer;
}
.fc-3d-inner { 
    position: absolute; inset: 0; width: 100%; height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    transform-style: preserve-3d; 
}

.fc-3d.flipped .fc-3d-inner { transform: rotateY(180deg); }

@media (hover: hover) and (pointer: fine) {
    .fc-3d:hover .fc-3d-inner { transform: rotateY(180deg); }
}

.fc-front, .fc-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: 15px; padding: 30px 25px; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    border: 8px solid #b45309; box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
}

.fc-front { background: #fffde7; }
.fc-front .fc-icon { font-size: 70px; margin-bottom: 20px; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));}
.fc-front h3 { font-size: 24px; font-weight: 900; color: #b91c1c; margin: 0 0 15px 0; text-transform: uppercase;}
.fc-front .fc-hint { font-size: 14px; font-weight: 900; color: #b45309; margin-top: auto; border-top: 3px dashed #b45309; padding-top: 15px;}

.fc-back { background: #b91c1c; color: #fff; transform: rotateY(180deg); border-color: #7f1d1d;}
.fc-back h4 { font-size: 20px; font-weight: 900; color: #fde047; margin: 0 0 20px 0; border-bottom: 3px dashed #fde047; padding-bottom: 15px; text-transform: uppercase;}
.fc-back p { font-size: 16px; font-weight: bold; line-height: 1.6; color: #fff; margin: 0;}

/* PINTU UJUNG (EXIT / RUANG BOS) */
.kk-end-door {
    position: absolute; 
    bottom: 0; left: 95%; 
    transform: translateX(-100%) translateY(0px) translateZ(10px);
    width: 320px; height: 450px; background: var(--kk-door);
    border: 15px solid var(--kk-wood-dark); border-bottom: none;
    border-radius: 15px 15px 0 0; display: flex; gap: 5px;
    padding: 10px; cursor: pointer; pointer-events: auto !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 20px 50px rgba(0,0,0,0.5);
    transition: all 0.4s ease;
}

.kk-end-door:hover { 
    transform: translateX(-100%) translateY(0px) translateZ(10px) scale(1.02); 
    filter: brightness(1.2); 
}

.kk-end-door-left, .kk-end-door-right {
    flex: 1; background: rgba(255,255,255,0.3); border: 8px solid var(--kk-wood-dark);
    position: relative; display: flex; justify-content: center; align-items: center;
}

.kk-end-door-left::after { content: ''; position: absolute; right: 10px; top: 50%; width: 12px; height: 40px; background: var(--krusty-gold); border-radius: 5px; transform: translateY(-50%);}
.kk-end-door-right::after { content: ''; position: absolute; left: 10px; top: 50%; width: 12px; height: 40px; background: var(--krusty-gold); border-radius: 5px; transform: translateY(-50%);}

.door-sign {
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    background: #b91c1c; color: #fde047; font-weight: 900; font-size: 16px;
    padding: 8px 20px; border: 4px solid #fde047; border-radius: 8px; white-space: nowrap;
    letter-spacing: 2px; text-shadow: 2px 2px 0px #111;
    transition: all 0.4s ease;
}

/* SCREEN-SPACE HUD & VERA */
.hud-overlay-ui { position: absolute; inset: 0; z-index: 9000; display: flex; justify-content: center; align-items: stretch; pointer-events: none !important; }

.btn-exit-3d { position: absolute; top: 20px; right: 20px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 900; background: var(--krusty-red); padding: 10px 20px; border-radius: 8px; border: 2px solid #7f1d1d; transition: 0.2s; pointer-events: auto !important; font-family: 'Press Start 2P', sans-serif;}
.btn-exit-3d:active { transform: scale(0.95); }

.crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; background: rgba(255,255,255,0.8); border-radius: 50%; pointer-events: none !important;}

.wasd-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 1px; transition: opacity 0.5s; border: 1px solid rgba(255,255,255,0.2); pointer-events: none !important;}

#joystick-zone { position: absolute; bottom: 30px; left: 30px; width: 110px; height: 110px; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; display: none; pointer-events: auto !important; backdrop-filter: blur(2px); }
#joystick-knob { position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none !important; }
.mobile-look-hint { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,0.5); padding: 6px 12px; border-radius: 12px; font-size: 10px; font-weight: bold; display: none; pointer-events: none !important; }

#vera-feature-guide {
    position: fixed; bottom: 30px; left: 30px; z-index: 9999999; 
    display: flex; align-items: flex-end; gap: 15px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    transform: translateY(150%); opacity: 0; pointer-events: none;
}
#vera-feature-guide.aktif { transform: translateY(0); opacity: 1; pointer-events: auto; }

.vera-f-avatar {
    width: 75px; height: 75px; border-radius: 50%; 
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    display: flex; justify-content: center; align-items: center;
    font-size: 38px; box-shadow: 0 10px 25px rgba(14, 165, 233, 0.4);
    border: 4px solid #fff; animation: floatVeraF 3s ease-in-out infinite; cursor: pointer;
}

.vera-f-bubble {
    background: rgba(15, 23, 42, 0.95); padding: 18px 25px; border-radius: 20px; border-bottom-left-radius: 0;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6); max-width: 320px;
    border: 2px solid #38bdf8; color: #f8fafc; font-family: 'Poppins', sans-serif;
    backdrop-filter: blur(10px);
}

.vera-f-name { font-size: 11px; font-weight: 900; color: #38bdf8; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase;}
.vera-f-text { font-size: 13px; font-weight: 500; line-height: 1.6; min-height: 40px;}
.vera-f-cursor { animation: blinkVeraF 1s step-end infinite; font-weight: 900; color: #38bdf8; }

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

/* COMING SOON OVERLAY */
#coming-soon-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.9); opacity: 0; transition: opacity 0.5s;
}
#coming-soon-overlay h1 { color: #fde047; font-size: 60px; font-weight: 900; text-align: center; margin: 0; text-shadow: 0 0 20px rgba(253,224,71,0.5); }
#coming-soon-overlay p { color: #fff; font-size: 16px; margin: 20px 0 30px; letter-spacing: 1px;}
.btn-kembali { background: #b91c1c; color: #fff; border: 2px solid #7f1d1d; padding: 12px 30px; font-weight: bold; font-size: 16px; border-radius: 8px; cursor: pointer; transition: 0.2s;}
.btn-kembali:hover { transform: scale(1.05); background: #ef4444; }

@media (max-width: 768px) {
    #vera-feature-guide { bottom: 15px; left: 15px; right: 15px; }
    .vera-f-bubble { max-width: 100%; }
    #joystick-zone { display: block; }
    .wasd-hint { display: none; } 
    .mobile-look-hint { display: block; }
}