* { box-sizing: border-box; touch-action: manipulation; }

body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(180deg, #566CD5 0%, #3E50A4 100%);
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* --- PHASE 1: STRATOS (Intro Animation) --- */
#stratos-splash {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #080808; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease-out;
}
#stratos-splash.fade-out { opacity: 0; pointer-events: none; }

.studio-container {
    display: flex; flex-direction: column; align-items: center; color: white;
    font-family: 'Inter', sans-serif; opacity: 0;
    animation: studio-in 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.diamond-icon {
    font-size: 32px; color: #00E5FF; margin-bottom: 12px;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.8); animation: diamond-pulse 2s infinite;
}
.studio-text {
    font-size: 36px; font-weight: 300; letter-spacing: 10px; position: relative;
    color: #333; overflow: hidden;
}
.studio-text::before {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 0%; height: 100%;
    color: #fff; overflow: hidden; border-right: 2px solid #00E5FF;
    animation: text-shimmer 3.0s ease-in-out forwards 0.5s;
}
.studio-sub { font-size: 13px; font-weight: 700; letter-spacing: 6px; color: #666; margin-top: 8px; text-transform: uppercase; }

@keyframes studio-in { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
@keyframes diamond-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes text-shimmer { to { width: 100%; border-color: transparent; } }

/* --- PHASE 2: BOOT LAYER --- */
#game-boot-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; pointer-events: none; z-index: 5000;
}

/* --- LOGO WRAPPER --- */
.logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    animation: logo-float 3s ease-in-out infinite alternate;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center top; 
}

.main-logo-img {
    width: 85%;       
    max-width: 340px; 
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4)); 
    display: block;
}

.logo-wrapper.move-to-header {
    margin-top: 50px; 
    transform: scale(1);
    animation: none;        
    position: absolute; 
    top: 0;
}

@keyframes logo-float {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}

/* --- LOADING ZONE --- */
.loading-zone {
    margin-top: 50px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    opacity: 0; 
    transition: opacity 0.2s;
}

#game-boot-layer.active .loading-zone {
    animation: fade-in-loader 0.5s ease forwards 1.0s;
}

@keyframes fade-in-loader { to { opacity: 1; } }

.loading-label {
    font-family: 'Kanit', sans-serif; font-weight: 800; font-size: 14px;
    letter-spacing: 2px;
    color: #ffffff; 
    text-shadow: 0 0 10px rgba(255,255,255,0.4);
}

.progress-track {
    width: 220px; height: 12px;
    background: rgba(0,0,0,0.5); 
    border-radius: 6px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
}

.progress-fill {
    height: 100%; 
    width: 0%; 
    background: repeating-linear-gradient(
        45deg,
        #00E5FF,             
        #00E5FF 10px,
        #00B8D4 10px,        
        #00B8D4 20px
    );
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.6);
}

#game-boot-layer.active .progress-fill {
    animation: load-fill 3.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards 1.2s;
}

@keyframes load-fill { 0% { width: 0%; } 100% { width: 100%; } }

/* --- PHASE 3: MENU UI --- */
.bottom-ui-layer {
    position: absolute; bottom: 0; left: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center;
    padding-bottom: 120px; 
    opacity: 0;
    z-index: 10;
    transition: opacity 0.3s;
}

.bottom-ui-layer.animate-entry {
    animation: slide-up-soft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-up-soft {
    0% { transform: translateY(80px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.button-stack { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%; }

/* --- GLOSSY BUTTONS --- */
.pill-btn {
    width: 280px; height: 72px; border-radius: 20px; 
    border: 2px solid rgba(255,255,255,0.2);
    display: flex; justify-content: center; align-items: center; gap: 12px;
    text-decoration: none; cursor: pointer;
    font-family: 'Kanit', sans-serif; font-size: 28px; font-weight: 900;
    letter-spacing: 1px; color: white; text-transform: uppercase;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.1); text-shadow: 0 3px 0 rgba(0,0,0,0.2);
    margin-bottom: 10px; transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s;
    position: relative; overflow: hidden;
}

.pill-btn::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 18px 18px 50% 50% / 18px 18px 20% 20%; pointer-events: none;
}

/* MINI GRID ICON */
.mini-grid-icon {
    display: flex; gap: 4px; padding: 5px;
    background: rgba(0,0,0,0.15); border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1); margin-right: 4px;
}
.mg-cell {
    width: 28px; height: 28px; background: rgba(0,0,0,0.2);
    border-radius: 5px; display: flex; justify-content: center; align-items: center;
    font-size: 20px; line-height: 1; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.green-pill { 
    background: linear-gradient(180deg, #4FC3F7 0%, #0288D1 100%);
    box-shadow: 0 8px 0 #01579B, 0 15px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.5);
}
.green-pill:active { transform: translateY(8px); box-shadow: 0 0 0 #01579B, inset 0 2px 0 rgba(255,255,255,0.5); }

.orange-pill {
    background: linear-gradient(180deg, #FFCA28 0%, #F57C00 100%);
    box-shadow: 0 8px 0 #E65100, 0 15px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.5);
}
.orange-pill:active { transform: translateY(8px); box-shadow: 0 0 0 #E65100, inset 0 2px 0 rgba(255,255,255,0.5); }

.hidden { display: none !important; }

/* --- PARTICLE BACKGROUND --- */
.particles-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; z-index: 1; opacity: 0; transition: opacity 2.0s ease-in; pointer-events: none;
}
.particles-layer.active { opacity: 1; }
.cube {
    position: absolute; border-radius: 6px; bottom: -150px; opacity: 0.15;
    animation: rise 15s infinite linear; box-shadow: 0 0 10px rgba(255,255,255,0.1);
}
@keyframes rise { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-120vh) rotate(360deg); } }

/* Cube Colors */
.c1 { width: 40px; height: 40px; left: 10%; background: #00E5FF; animation-duration: 18s; }
.c2 { width: 20px; height: 20px; left: 20%; background: #D500F9; animation-duration: 12s; animation-delay: 2s; }
.c3 { width: 60px; height: 60px; left: 35%; background: #FFA726; animation-duration: 25s; animation-delay: 5s; }
.c4 { width: 30px; height: 30px; left: 50%; background: #FF1744; animation-duration: 15s; animation-delay: 1s; }
.c5 { width: 50px; height: 50px; left: 65%; background: #00E5FF; animation-duration: 20s; animation-delay: 3s; }
.c6 { width: 25px; height: 25px; left: 80%; background: #D500F9; animation-duration: 14s; animation-delay: 7s; }
.c7 { width: 15px; height: 15px; left: 90%; background: #FFA726; animation-duration: 10s; animation-delay: 4s; }
.c8 { width: 55px; height: 55px; left: 5%; background: #FF1744; animation-duration: 28s; animation-delay: 0.5s; }
.c9 { width: 35px; height: 35px; left: 30%; background: #00E5FF; animation-duration: 17s; animation-delay: 6s; }
.c10 { width: 45px; height: 45px; left: 60%; background: #D500F9; animation-duration: 22s; animation-delay: 2.5s; }
.c11 { width: 25px; height: 25px; left: 75%; background: #FFA726; animation-duration: 13s; animation-delay: 1.5s; }
.c12 { width: 40px; height: 40px; left: 45%; background: #FF1744; animation-duration: 19s; animation-delay: 8s; }

/* --- CONSTRUCTED TROPHY STRUCTURE (STATIC NO SCROLL) --- */

.map-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #3E50A4; 
    z-index: 100;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-overlay.active { transform: translateY(0); }

/* Header */
.adv-header {
    height: 15vh;
    width: 100%;
    display: flex; flex-direction: column; 
    align-items: center; justify-content: center;
    color: white; text-align: center;
    z-index: 2;
}

.trophy-icon { font-size: 32px; margin-bottom: 5px; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.2)); }
.adv-title-group h1 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: 1px; }
.adv-title-group p { margin: 2px 0 0; font-size: 12px; opacity: 0.7; font-weight: 300; }

/* Structure Container (STATIC CENTERED) */
.structure-container {
    flex: 1; 
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center Vertically */
    width: 100%;
    overflow: hidden; /* No scrolling */
    padding: 5px;
}

.pixel-structure {
    display: flex; flex-direction: column;
    align-items: center;
}

.struct-row {
    display: flex;
    justify-content: center;
    height: 4.2vh; /* Adjusted for 12 rows (90 levels) */
}

/* THE BRICKS */
.struct-block {
    /* FIT 12 ROWS (90 Levels) 
       Available space is approx 60vh. 
       We use 4.2vh per block to fit all 12 rows without overflow.
    */
    width: 8vw; 
    height: 4.2vh;
    
    max-width: 38px; 
    max-height: 38px;
    
    display: flex; justify-content: center; align-items: center;
    font-family: 'Kanit', sans-serif; font-weight: 700; 
    font-size: 1.4vh; /* Text scales with height */
    text-decoration: none;
    
    border: 1px solid rgba(0,0,0,0.15); 
    box-sizing: border-box; 
    margin: 0; padding: 0;
}

.struct-block.empty {
    background: transparent;
    border: none;
    pointer-events: none;
}

/* 1. LOCKED (Dark Structure) */
.struct-block.locked {
    background: #283593; 
    color: rgba(255, 255, 255, 0.15);
}

/* 2. UNLOCKED (Blue) */
.struct-block.blue {
    background: #42A5F5; 
    color: white;
    border: 1px solid rgba(255,255,255,0.2); 
}

/* 3. TARGET (Gold) */
.struct-block.gold {
    background: #FFCA28; 
    color: white;
    z-index: 5;
    position: relative;
    border: 1px solid white;
    box-shadow: 0 0 15px rgba(255, 202, 40, 0.6);
}

.struct-block.pulse { animation: block-flash 1.5s infinite; }
@keyframes block-flash { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }


/* Bottom Action Panel */
.bottom-action-panel {
    /* CHANGED: Allow height to grow so buttons fit */
    height: auto; 
    min-height: 20vh; 
    
    background: #303F9F; 
    
    /* CHANGED: Added 80px to bottom padding (20px original + 60px for Ad) */
    padding: 20px 20px 80px 20px; 
    
    border-top-left-radius: 24px; border-top-right-radius: 24px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; gap: 15px;
    align-items: center; justify-content: center;
    z-index: 10;
}

.big-play-btn {
    width: 100%; max-width: 320px; height: 50px;
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 100%);
    border-radius: 12px; display: flex; justify-content: center; align-items: center;
    color: white; font-size: 20px; font-weight: 800; text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 0 #2E7D32, 0 8px 15px rgba(0,0,0,0.2);
}
.big-play-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #2E7D32; }

.nav-tabs {
    display: flex; justify-content: center; gap: 10px;
}
.nav-tab {
    width: 50px; height: 40px; background: transparent; border: none;
    display: flex; justify-content: center; align-items: center;
    font-size: 20px; cursor: pointer; border-radius: 12px;
}
.nav-tab.active { background: rgba(255,255,255,0.1); }