:root {
    --bg-core: #2f4f52;
    --bg-light: #4f787a;
    --text-ui: #b8d4d4;
    --alert-red: #ff0000;
    --font-kronos: 'Orbitron', sans-serif;
    --cd-band-bg: rgba(162, 196, 196, 0.35);
    --cd-num-color: #152526;
    --dark-ui: #152526;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: var(--font-kronos); background: #000; color: var(--text-ui);
    overflow: hidden; user-select: none; text-transform: uppercase;
}

.screen {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 16 / 9;
    width: 100vw; height: 56.25vw;
    max-height: 100vh; max-width: 177.78vh;
    display: none !important; 
    flex-direction: column; justify-content: space-between; z-index: 10;
    background-color: #4e7072;
    background-image: 
        radial-gradient(circle at center, rgba(90, 130, 133, 0.4) 0%, rgba(0, 0, 0, 0.6) 90%);
    box-shadow: 0 0 50px rgba(0,0,0,0.5); border: 1px solid #000000;
    
    /* ACTIVAMOS LAS CONSULTAS DE CONTENEDOR */
    container-type: size;
}
.screen.active { display: flex !important; }

#screen-menu { 
    justify-content: center; 
    align-items: center; 
    background-color: #4e7072; 
    overflow: hidden;
    position: relative; 
}

.menu-bg-vignette {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(90, 130, 133, 0.4) 0%, rgba(30, 50, 50, 0.6) 90%);
    z-index: 1; pointer-events: none;
}

.menu-horizontal-strip {
    position: absolute;
    top: 50%; left: 0; 
    width: 100%; height: 40cqh;
    transform: translateY(-50%);
    background: rgb(255 255 255 / 38%); 
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    z-index: 1;
    pointer-events: none;
}

.menu-guide-line {
    position: absolute;
    left: 28%; 
    top: -10cqh; bottom: -10cqh;
    width: 1px;
    background-color: rgba(180, 220, 220, 0.3);
    z-index: 2;
}

.menu-line-left {
    position: absolute;
    left: calc(28% - 8cqh); 
    top: -10cqh; bottom: -10cqh;
    width: 1px;
    background-color: rgba(180, 220, 220, 0.3);
    z-index: 2;
}

.menu-content-wrapper {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
}

.menu-item {
    position: relative;
    display: flex; 
    align-items: center; 
    width: 100%;
    height: 9cqh; 
    cursor: pointer; 
    transition: all 0.1s ease-out; 
    color: #152526; 
}

.menu-col-icon {
    width: 28%;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    padding-right: 2.4cqh; 
    box-sizing: border-box;
}

.menu-svg {
    width: 3.2cqh; 
    height: 3.2cqh;
    fill: currentColor;
    opacity: 0.8;
}


.menu-col-text {
    flex: 1;
    display: flex;
    align-items: center;
    font-family: var(--font-kronos);
    font-size: 3.2cqh; 
    letter-spacing: 0.6cqh; 
    font-weight: 500;
    padding-left: 3cqh;
    text-shadow: none;
    text-transform: uppercase;
}


.menu-item.selected { 
    background: linear-gradient(90deg, transparent calc(28% - 8cqh), #5e706e calc(28% - 8cqh), #5e706e 100%);  
    color: #afafafde;
}
.menu-item.selected .menu-col-text {
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.menu-item.selected .menu-svg {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
}

.back-to-menu {
    position: absolute; top: 0; left: 0; height: 8%; 
    display: flex; align-items: center; padding-left: 2%; padding-right: 1%;
    background: var(--dark-ui); font-size: 1.5cqh; font-weight: bold;
    cursor: pointer; z-index: 100;  transition: background 0.2s;
}
.back-to-menu:hover { background: rgb(31, 39, 41); color: #fff; }

#screen-password { justify-content: center; align-items: center; }
.horizontal-strip { width: 100%; background-color: rgb(255 255 255 / 38%); border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); padding: 6cqh 0; display: flex; justify-content: center; align-items: center; }
.password-container { position: relative; display: flex; justify-content: center; align-items: center; width: 95%; text-align: center; }
#pass-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: text; font-size: 5cqh; }
#pass-display { font-family: var(--font-kronos); font-size: 6cqh; color: var(--dark-ui); font-weight: 900; letter-spacing: 3cqh; margin-right: -3cqh; pointer-events: none; transition: color 0.3s; white-space: nowrap; }
.cursor-blink { display: inline-block; animation: blink 1s step-end infinite; margin-left: 3cqh; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.supers-header-container {
    width: 100%; height: 8cqh; 
    background: transparent;
    display: flex; 
    box-sizing: border-box; 
    z-index: 10; 
}

.header-col-left {
    width: 50%; height: 100%;
    background-color: #1a2e30;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4%; box-sizing: border-box;
    border-right: 2px solid rgba(255,255,255,0.1);
    border-bottom: 2px solid #5a8a8b;
}

.header-col-right {
    width: 50%; height: 100%;
    background-color: #1a2e30;
    display: flex; align-items: center; justify-content: flex-start;
    padding: 0 4%; box-sizing: border-box;
    border-bottom: 2px solid #5a8a8b;
}

.header-title { 
    font-size: 2.2cqh; 
    letter-spacing: 0.5cqh; 
    font-weight: 900; 
    color: #b8d4d4; 
    opacity: 1; 
    text-shadow: 0 0 5px rgba(184, 212, 212, 0.3); 
    margin-left: 50px;
}
.header-threat { font-size: 2cqh; letter-spacing: 0.2cqh; font-weight: 900; color: #8fadad; background: rgba(0, 0, 0, 0.2);; }

.split-layout { display: flex; width: 100%; flex: 1; overflow: hidden; position: relative; }
.col-left, .col-right { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.col-left { background-color: rgba(0,0,0,0.2); border-right: 2px solid rgba(255,255,255,0.1); }
.col-right { background: linear-gradient(135deg,#aee1e1e6 100%); align-items: center; justify-content: center; }
.img-wrapper { position: relative; flex: 1; width: 100%; overflow: hidden; }

#instrument-img, #super-img, #droid-img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 122%; height: 120%; 
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.bg-layer { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; }
.col-left .bg-layer { filter: grayscale(100%) contrast(1.2) sepia(0.2); }
.col-right .bg-layer { filter: grayscale(100%) sepia(1) hue-rotate(130deg) saturate(2); mix-blend-mode: multiply; }

.terminated-bar { position: absolute; top: 50%; left: 0; width: 100%; height: 9cqh; background-color: #8a0b0b; display: none; align-items: center; justify-content: center; transform: translateY(-50%); z-index: 5; opacity: 0; }
.terminated-bar.active-alert { display: flex; animation: simpleFadeIn 0.2s linear 0.5s forwards; }
@keyframes simpleFadeIn { from { opacity: 0; } to { opacity: 1; } }
.terminated-text { font-size: 8.5cqh; font-weight: 1000; letter-spacing: 3cqh; color: #e0e0e0; text-shadow: none; }

.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 6cqh; color: rgba(21, 37, 38, 0.5); cursor: pointer; z-index: 20; padding: 2cqh; transition: all 0.2s ease; user-select: none; background: transparent; }
.nav-arrow:hover { color: #152526; transform: translateY(-50%) scale(1.2); filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
.nav-left { left: 1vw; } .nav-right { right: 1vw; }

.info-panel { padding: 2cqh; text-align: center; width: 100%; box-sizing: border-box; min-height: 25cqh; display: flex; flex-direction: column; justify-content: center; background: #1a2e30; background-image: radial-gradient(circle at center, rgba(90, 130, 133, 0.4) 0%, rgba(30, 50, 50, 0.6) 90%);}
.song-artist { font-size: 4cqh; margin-bottom: 0.5cqh; text-shadow: 0 0 10px rgba(0,0,0,0.5); line-height: 1; color: #fff; font-weight: 900; }
.song-title { font-size: 2cqh; letter-spacing: 0.2cqh; color: #8fadad; margin-bottom: 0.5cqh; font-weight: bold; }
.instrument-name { font-size: 3cqh; color: #ffffff; font-weight: 900; text-shadow: 0 0 10px rgba(255,255,255,0.5); margin-bottom: 1cqh; }
.instrument-desc { font-size: 1.2cqh; color: #ffffff; letter-spacing: 0.1cqh; font-weight: bold; line-height: 1.4; text-shadow: 0 0 10px rgba(255,255,255,0.5); max-width: 80%; margin: 0 auto; }

#screen-island { justify-content: center; align-items: center; }
.countdown-header { font-size: 4cqh; color: #b8d4d4; letter-spacing: 1cqh; font-weight: 900; margin-bottom: 0; text-shadow: 0 5px 10px rgba(0,0,0,0.2); opacity: 0.8; text-align: center; }
.countdown-band { width: 100%; background-color: var(--cd-band-bg); padding: 5cqh 0; margin: 5cqh 0; display: flex; justify-content: center; align-items: center; gap: 3cqw; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.time-group { display: flex; flex-direction: column; align-items: center; width: 15%; }
.time-val { font-size: 12cqh; font-weight: 900; color: var(--cd-num-color); line-height: 1; letter-spacing: -0.5cqh; }
.time-lbl { color: var(--alert-red); font-size: 1.5cqh; font-weight: 900; letter-spacing: 0.5cqh; margin-top: 1cqh; text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 0 0 10px rgba(255, 0, 0, 0.4); }
.time-sep { font-size: 8cqh; color: var(--cd-num-color); font-weight: 900; margin-top: -2cqh; }
.countdown-footer { font-size: 4cqh; color: rgba(255,255,255,0.6); letter-spacing: 2.5cqh; font-weight: 920; text-transform: uppercase; text-align: center;}

.kronos-display-area { position: absolute; top: 0; left: 0; width: 100%; height: 85%; overflow: hidden; background-color: #2f4f52; z-index: 1; }
.footer-kronos { 
    position: absolute; bottom: 0; left: 0; width: 100%; height: 15%; 
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end; 
    padding: 0 4%; box-sizing: border-box; 
    background: rgba(0,0,0,0.2); border-top: 2px solid #5a8a8b; z-index: 100; 
}
.footer-title { font-size: 3.5cqh; font-weight: 900; color: var(--alert-red); letter-spacing: 0.5cqh; margin-bottom: 0.5cqh; }
.phase-bar { display: flex; align-items: center; font-size: 2cqh; color: var(--text-ui); }
.phase-label { margin-right: 1cqh; letter-spacing: 0.3cqh; }
.phase-num { padding: 0.5cqh 1cqh; margin-left: 0.5cqh; cursor: pointer; font-weight: bold; border: 1px solid transparent; transition: all 0.2s; }
.phase-num:hover { border-color: rgba(255,255,255,0.3); }
.phase-num.selected { background-color: var(--alert-red); color: white; border-color: var(--alert-red); }

.phase-panel { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; flex-direction: column; align-items: center; justify-content: center; }
.phase-panel.active-panel { display: flex; }

.p0-header-container, .p1-header-container, .p2-header-container, .p3-header-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 15%; 
    display: flex; align-items: center; justify-content: center; 
    padding: 0 4%; box-sizing: border-box; z-index: 10;
    background-color: rgba(0,0,0,0.2); border-bottom: 2px solid #5a8a8b; background: #2f4f52; background-image: radial-gradient(circle at center, rgba(90, 130, 133, 0.4) 0%, rgba(0, 0, 0, 0.6) 90%);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.phase-header-title {
    font-size: 2.2cqh; 
    letter-spacing: 1.2cqh; 
    color: rgba(255, 255, 255, 0.7); 
    font-weight: 900; 
    text-transform: uppercase; 
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.p0-title-area, .p1-title-area, .p2-title-area, .p3-title-area {
    position: absolute; top: 20%; left: 0 !important; width: 100%;
    display: flex; flex-direction: row; justify-content: center; align-items: flex-start;
    gap: 20cqw; 
    z-index: 20;
    pointer-events: none;
    color: #152526; 
}
.p0-title-area{
    gap: 1cqw;
}
.p-title-group {
    display: flex; flex-direction: column; align-items: flex-end; 
}

.p0-sub-title, .p1-sub-title, .p2-sub-title, .p3-sub-title {
    font-size:2cqh; letter-spacing: 1cqh; color: rgba(255, 255, 255, 0.5); font-weight: 900; text-transform: uppercase; pointer-events: none; margin-bottom: 1cqh;
}
.p0-main-title, .p1-main-title, .p2-main-title, .p3-main-title {
    font-size: 4cqh; font-weight: 900; color: rgba(220, 235, 235, 0.95);
    letter-spacing: 0.5cqw; text-transform: uppercase; text-shadow: 0 0 20px rgba(255,255,255,0.1);
    background-color: rgba(16, 35, 35, 0.6); padding: 0.5cqh 4cqw; border: 3px solid rgba(120, 140, 140, 0.5); display: inline-block; border-radius: 4px;
}
.p0-info-box, .p1-loading-box, .p2-info-box, .p3-info-box {
    border: 2px solid rgba(100, 120, 120, 0.6); padding: 1cqh 1.5cqw;
    min-width: 20%; background: rgba(0,0,0,0.15); color: rgba(184, 212, 212, 0.9); text-align: left;
    margin-top: -0.5cqh; 
}
.p0-box-header, .box-header, .p2-box-header, .p3-box-header {
    font-size: 1.4cqh; font-weight: 900; letter-spacing: 0.2cqh; border-bottom: 1px solid rgba(100, 120, 120, 0.5); margin-bottom: 0.8cqh; padding-bottom: 0.5cqh;
}
.p0-box-list, .box-list, .p2-box-list, .p3-box-list { font-size: 1cqh; line-height: 1.6; font-weight: bold; opacity: 0.8; }

.p0-layout { 
    display: none; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; 
    padding-top: 5cqh; 
    box-sizing: border-box; 
    background-color: #6a8587; 
}
.p0-layout.active-panel { display: flex; }

.p0-group-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1cqh; 
}

.p0-main-title {
    font-size: 9cqh;
    font-weight: 900;
    margin: 0;
    line-height: 0.8;
    letter-spacing: 0.2cqh;
    color: #152526;
    
    transform: scaleY(0.85);
    transform-origin: center left;

    background: none; 
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    padding: 0;
}

.p0-design-text {
    font-size: 2cqh;
    font-weight: 900;      
    letter-spacing: 3.7cqh; 
    margin-left: 0.5cqh;
    margin-top: 0.5cqh; 
    color: #152526;
    opacity: 0.9;
    text-shadow: none;

    transform: scaleY(0.85);
    transform-origin: center left;
}

.p0-group-right {
    display: flex;
    align-items: center; 
    margin-top: 1.5cqh; 
    gap: 0; 
}

.p0-v-text {
    font-size: 5cqh;
    font-weight: 700;
    margin-right: 0.5cqh;
    margin-top: 1cqh; 
    color: #4a6364; 
}

.p0-10-text {
    font-size: 9cqh;
    font-weight: 900;
    line-height: 0.8;
    color: #4a6364; 
}

.p0-hex-icon {
    width: 6cqh;
    height: 6cqh;
    margin-left: 2cqh;
    opacity: 0.8;
    color: #152526; 
    stroke: currentColor;
}

.p0-schematic-container { 
    position: absolute; 
    top: 60%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 85cqh;  
    height: 70cqh; 
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p0-schematic-img { 
    width: 100%; 
    height: 90%; 
    object-fit: contain;
    opacity: 0;
}

#panel-phase-0.active-panel .p0-schematic-img {
    animation: quickGreenFlash 1.2s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0; 
}

@keyframes quickGreenFlash {
    0% { opacity: 0; filter: brightness(5) grayscale(1); }
    20% { opacity: 0.8; filter: brightness(1.6) grayscale(1); }
    60% { opacity: 0.8; filter: brightness(1) grayscale(0.5) hue-rotate(50deg); }
    100% { opacity: 1; filter: contrast(1.1) sepia(0.4) hue-rotate(50deg) saturate(0.5); }
}

.p1-exact-layout { width: 100%; height: 100%; background-color: #6a8587; position: relative; overflow: hidden; font-family: 'Orbitron', sans-serif; }
.p1-stage-area { position: absolute; top: 10%; left: 0; width: 100%; height: 80%; z-index: 5; }

.connection-bar { 
    position: absolute; 
    top: 48%; 
    left: 30%; 
    height: 13%; 
    width: 0; 
    background-color: rgba(255, 255, 255, 0.15); 
    z-index: 1; 
    animation: growConnectionBar 0.5s ease-out forwards;

}

@keyframes growConnectionBar {
    0% { width: 0; }
    100% { width: 30%; } 
}


.p1-label { position: absolute; color: rgba(64, 80, 82, 0.8); font-size: 1.5cqh; font-weight: 900; letter-spacing: 0.2cqh; }

.bot-container { 
    position: absolute; 
    top: 48%; 
    left: 25%; 
    width: 10%; 
    height: auto; 
    z-index: 10; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.bot-label { top: -4cqh; width: 100%; text-align: center; }
.bot-element { width: 110%; height: auto; filter: opacity(1); }
.rocket-container { position: absolute; z-index: 5; top: 25%; right: 28%; width: 25%; height: auto; }
.rocket-element { width: 85%; height: auto; display: block;  }
.rocket-label-top { position: absolute; top: 5%; right: -85%; text-align: left; width: 100%; }
.rocket-label-bottom { position: absolute; top: 70%; bottom: 20%; right: -85%; text-align: left; width: 100%; }
.rocket-sphere-light { position: absolute; z-index: 100; top: 55%; right: 38%; width: 5%; aspect-ratio: 1/1; height: 14%; border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: 0 0 25px rgba(255, 255, 255, 1); animation: pulseSphere 0.2s infinite alternate; }
@keyframes pulseSphere { 0% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); background-color: rgba(255, 255, 255, 0.6); } }

.p2-exact-layout { width: 100%; height: 100%; background-color: #6a8587; position: relative; overflow: hidden; font-family: 'Orbitron', sans-serif; }
.p2-stage-area { position: absolute; top: 22%; left: 0; width: 100%; height: 78%; z-index: 5; }
.p2-label { position: absolute; color: rgba(45, 70, 70, 0.7); font-size: 1.4cqh; font-weight: 900; letter-spacing: 0.2cqh; text-transform: uppercase; z-index: 5; }
.lbl-launch { top: 70%; left: 15%; bottom: 25%; text-align: left; }
.lbl-delivery { left: 20%; top: 30%; text-align: center; } 
.lbl-slider { right: 20%; top: 30%; }
.lbl-landing { right: 16%; top: 68%; }
.p2-world-bg { position: absolute; bottom: -5%; left: 10%; right: 10%; height: 40%; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.world-img { width: 80%; height: auto; z-index: 1000;}
.p2-trajectory-arc { position: absolute; left: 24%; width: 43%; bottom: -12%; height: 77%; border: 8cqh solid rgba(255, 255, 255, 0.2); border-radius: 50% 50% 0 0 / 75% 75% 0 0; border-bottom: none; z-index: 1; }
.p2-rocket-wrapper { position: absolute; width: 3.5%; height: auto; z-index: 10; opacity: 0; }
.p2-rocket-img { width: 100%; height: auto; filter: brightness(0.0); transform: rotate(0deg); }
.phase-panel.active-panel .p2-rocket-wrapper { animation: arcFlight 1.5s linear infinite; }

@keyframes arcFlight {
    0% { left: 25.5%; top: 82%; transform: rotate(0deg); opacity: 0; }
    2% { left: 25.55%; top: 77%; transform: rotate(4deg); opacity: 0.5; }
    4% { left: 25.6%; top: 72%; transform: rotate(8deg); opacity: 1; }
    6% { left: 25.9%; top: 68.3%; transform: rotate(12deg); }
    8% { left: 26.3%; top: 64.6%; transform: rotate(18deg); }
    10% { left: 26.7%; top: 61%; transform: rotate(22deg); }
    12% { left: 27.2%; top: 55.5%; transform: rotate(28deg); }
    14% { left: 27.6%; top: 52.2%; transform: rotate(32deg); }  
    15% { left: 27.9%; top: 50%; transform: rotate(35deg); }
    18% { left: 29.1%; top: 46%; transform: rotate(41deg); }
    20% { left: 30.0%; top: 43.5%; transform: rotate(44deg); } 
    22% { left: 31.0%; top: 41%; transform: rotate(48deg); }
    24% { left: 31.8%; top: 38.5%; transform: rotate(51deg); }
    26% { left: 32.6%; top: 36.2%; transform: rotate(55deg); }
    28% { left: 33.3%; top: 34.0%; transform: rotate(58deg); }  
    30% { left: 34.1%; top: 32%; transform: rotate(62deg); }
    32% { left: 35.6%; top: 30.0%; transform: rotate(65deg); }
    35% { left: 37.8%; top: 27.8%; transform: rotate(69deg); }
    38% { left: 40.0%; top: 25.8%; transform: rotate(73deg); }
    40% { left: 41.5%; top: 24.2%; transform: rotate(76deg); }
    42% { left: 43.0%; top: 23.2%; transform: rotate(79deg); }
    45% { left: 45.1%; top: 21.7%; transform: rotate(83deg); }
    48% { left: 47.3%; top: 20.5%; transform: rotate(87deg); }
    50% { left: 48.7%; top: 19.5%; transform: rotate(90deg); }
    52% { left: 50.1%; top: 19.8%; transform: rotate(93deg); }
    54% { left: 51.5%; top: 20.4%; transform: rotate(96deg); }
    56% { left: 52.8%; top: 21.3%; transform: rotate(99deg); }
    58% { left: 54.1%; top: 22.5%; transform: rotate(103deg); }
    60% { left: 55.5%; top: 24.2%; transform: rotate(106deg); }
    62% { left: 56.9%; top: 25.7%; transform: rotate(109deg); }
    64% { left: 58.3%; top: 27.5%; transform: rotate(113deg); }
    66% { left: 59.7%; top: 29.7%; transform: rotate(116deg); }
    68% { left: 61.0%; top: 32.2%; transform: rotate(119deg); }
    70% { left: 62.2%; top: 34.2%; transform: rotate(123deg); }
    72% { left: 63.5%; top: 36.5%; transform: rotate(126deg); }
    74% { left: 64.9%; top: 39.2%; transform: rotate(130deg); }
    76% { left: 66.3%; top: 42.1%; transform: rotate(134deg); }
    78% { left: 67.5%; top: 45.2%; transform: rotate(138deg); }
    80% { left: 68.6%; top: 48.5%; transform: rotate(142deg); } 
    82% { left: 69.6%; top: 52.0%; transform: rotate(146deg); } 
    84% { left: 70.4%; top: 55.6%; transform: rotate(150deg); }
    86% { left: 71.0%; top: 59.3%; transform: rotate(154deg); }
    88% { left: 71.4%; top: 63.1%; transform: rotate(158deg); }
    90% { left: 71.6%; top: 67.0%; transform: rotate(162deg); opacity: 1; }
    92% { left: 71.7%; top: 70.5%; transform: rotate(166deg); opacity: 1; }
    94% { left: 71.7%; top: 73.8%; transform: rotate(170deg); opacity: 0.8; }
    96% { left: 71.7%; top: 77.0%; transform: rotate(173deg); opacity: 0.4; }
    98% { left: 71.7%; top: 80.0%; transform: rotate(177deg); opacity: 0.1; }
    100% { left: 71.7%; top: 82.0%; transform: rotate(180deg); opacity: 0; }
}
.p3-exact-layout { width: 100%; height: 100%; background-color: #6a8587; position: relative; overflow: hidden; font-family: 'Orbitron', sans-serif; }
.p3-stage-area { position: absolute; top: 20%; left: 0; width: 100%; height: 80%; z-index: 5; display: flex; justify-content: center; align-items: center; }
.p3-img-layer { position: absolute; width: 50%; height: auto; object-fit: contain; }
.p3-intact { z-index: 1; opacity: 1; }
.phase-panel.active-panel .p3-intact { animation: intactFade 2.5s infinite; }
.p3-destroyed { z-index: 2; opacity: 0; }
.phase-panel.active-panel .p3-destroyed { animation: destroyedAppear 2.5s infinite; }
@keyframes intactFade { 0% { opacity: 1; } 35% { opacity: 1; } 35.1% { opacity: 0; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 1; } }
@keyframes destroyedAppear { 0% { opacity: 0; } 35% { opacity: 0; } 35.1% { opacity: 1; } 90% { opacity: 1; } 95% { opacity: 0; } 100% { opacity: 0; } }
.p3-laser-beam { position: absolute; z-index: 10; top: 43%; left: 52%; height: 6px; background: linear-gradient(40deg, rgba(200,255,255,1) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); box-shadow: 0 0 15px cyan; border-radius: 4px; transform-origin: left center; transform: rotate(-5deg); width: 0; opacity: 0; }
.phase-panel.active-panel .p3-laser-beam { animation: fireLaser 2.5s infinite; }
@keyframes fireLaser { 
    0% { width: 0; opacity: 0; } 
    30% { width: 0; opacity: 1; } 
    35% { width: 22%; opacity: 1; height: 15px; } 
    40% { width: 22%; opacity: 0; height: 2px; } 
    100% { width: 0; opacity: 0; } 
}
.p3-impact-flash { position: absolute; z-index: 20; top: 40%; right: 30%; width: 0; height: 0; background: radial-gradient(circle, #fff 0%, rgba(100,255,255,0.8) 30%, transparent 70%); border-radius: 50%; transform: translate(50%, -50%); }
.phase-panel.active-panel .p3-impact-flash { animation: impactBoom 2.5s infinite; }
@keyframes impactBoom { 0% { width: 0; height: 0; opacity: 0; } 35% { width: 0; height: 0; opacity: 0; } 35.1% { width: 15vw; height: 15vw; opacity: 1; } 45% { width: 20vw; height: 20vw; opacity: 0; } 100% { width: 0; height: 0; opacity: 0; } }

.watermark-credits {
    position: fixed;
    bottom: 12px;
    right: 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 1.2px;
    z-index: 9999; 
    pointer-events: none; 
    text-transform: uppercase;
    user-select: none; 
}

@media (max-width: 480px) {
    .menu-wrapper { width: 95%; }
    .menu-guide-line { left: 20%; }
    .menu-col-icon { width: 20%; padding-right: 1cqh; }
    .menu-col-text { font-size: 2.2cqh; padding-left: cqh; letter-spacing: 0.3cqh;}
    .horizontal-strip { padding: cqh 0; }
    .password-container { min-width: 80%; }
    .menu-container { width: 90%; }
    .menu-item { margin: 2cqh 0; left: 1.2ch;}
    .split-layout { flex-direction: column; }
    .col-left, .col-right { width: 100%; height: 50%; border-right: none; border-bottom: 2px solid rgba(255,255,255,0.1); }
    .countdown-header { margin-top: 10cqh; font-size: 2.5cqh; }
    .countdown-band { flex-direction: column; gap: 1cqh; padding: 2cqh 0; }
    .time-val { text-align: center; font-size: 8cqh; }
    .time-sep, .data-col { display: none; }
    .footer-kronos { align-items: center; padding: 1cqh; }
    .omnidroid-title { font-size: 3cqh; }
    .phase-header-text { font-size: 2.5cqh; top: 8cqh; }
    .nav-arrow { font-size: 4cqh; padding: 1cqh; }
}

.universal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 4;
    opacity: 0; 
    transition: opacity 0.2s ease;
}

.universal-overlay.active {
    opacity: 1;
}

#panel-phase-0 .universal-overlay {
    opacity: 1; 
}

.grid-line {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background-color: rgba(184, 212, 212, 0.15);
    z-index: 1;
}
.line-left { left: 12%; } 
.line-right { right: 12%; }

.universal-data-col {
    position: absolute;
    top: 15%; 
    bottom: 4%;
    width: 8%;
    font-size: 1.2cqh; 
    line-height: 2; 
    color: rgba(14, 44, 44, 0.445);
    font-weight: bold;
    overflow: hidden;
    z-index: 2;
    white-space: pre-wrap; 
    word-break: break-all;
}

.u-col-left { 
    left: 2%; 
    text-align: left; 
}

.u-col-right { 
    right: 2%; 
    text-align: right; 
}

.universal-data-col::-webkit-scrollbar { display: none; }

@keyframes textScanTopDown {
    0% { background-position: 0% 100%; } 
    100% { background-position: 0% 0%; } 
}

@keyframes svgScanShine {
    0% { clip-path: inset(0 0 100% 0); opacity: 0.2; }
    50% { opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 0.8; }
}

#panel-phase-0.active-panel .p0-main-title,
#panel-phase-0.active-panel .p0-design-text,
#panel-phase-0.active-panel .p0-v-text,
#panel-phase-0.active-panel .p0-10-text,
#panel-phase-0.active-panel .universal-data-col,
#phases-overlay.active .universal-data-col {
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-size: 100% 300% !important;
    background-repeat: no-repeat !important;
    
    animation: textScanTopDown 0.5s ease-out both; 
    animation-delay: 0.4s;
    text-shadow: none !important;
}

#panel-phase-0.active-panel .p0-hex-icon {
    animation: svgScanShine 0.5s ease-out both;
    animation-delay: 0.4s;
}

#panel-phase-0.active-panel .p0-title-area .p0-main-title,
#panel-phase-0.active-panel .p0-title-area .p0-design-text,
#panel-phase-0.active-panel .p0-title-area .p0-v-text,
#panel-phase-0.active-panel .p0-title-area .p0-10-text {
    background-image: linear-gradient(to bottom, 
        #152526 0%, 
        #152526 40%,        
        #ffffffd2 50%,        
        rgba(21, 37, 38, 0) 60%, 
        rgba(21, 37, 38, 0) 100% 
    ) !important;
}

#panel-phase-0.active-panel .universal-data-col,
#phases-overlay.active .universal-data-col {
    background-image: linear-gradient(to bottom, 
        rgba(14, 44, 44, 0.45) 0%, 
        rgba(14, 44, 44, 0.45) 40%, 
        #ffffffd2 50%, 
        rgba(14, 44, 44, 0) 60%, 
        rgba(14, 44, 44, 0) 100% 
    ) !important;
}