/* --- GLITCH TITLE --- */
.dashboard-title {
    font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.5rem;
    color: var(--text-primary); text-shadow: 0 0 10px rgba(102, 252, 241, 0.3);
    position: relative; cursor: pointer; user-select: none;
}
.dashboard-title:hover { animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .94) both infinite; color: #fff; }
.dashboard-title:hover::before, .dashboard-title:hover::after { display: block; content: attr(data-text); position: absolute; top: 0; left: 0; opacity: 0.8; }
.dashboard-title:hover::before { color: #0ff; z-index: -1; animation: glitch-anim-2 0.3s cubic-bezier(.25, .46, .45, .94) both infinite; }
.dashboard-title:hover::after { color: #f0f; z-index: -2; animation: glitch-anim-3 0.3s cubic-bezier(.25, .46, .45, .94) both infinite; }
@keyframes glitch-anim { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 100% { transform: translate(0); } }
@keyframes glitch-anim-2 { 0% { transform: translate(0); } 20% { transform: translate(2px, -2px); } 100% { transform: translate(0); } }
@keyframes glitch-anim-3 { 0% { transform: translate(0); } 20% { transform: translate(-2px, -2px); } 100% { transform: translate(0); } }

/* --- WEATHER VORTEX --- */
.env-split { display: flex; width: 100%; justify-content: space-around; align-items: center; }
.env-item { display: flex; flex-direction: column; align-items: center; position: relative; }
.weather-vortex { position: relative; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; }
.vortex-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; animation: spin-vortex linear infinite; }
.vt-temp .vr-1 { width: 100%; height: 100%; border-top-color: var(--accent-green); border-left-color: rgba(69, 162, 158, 0.3); animation-duration: 3s; }
.vt-temp .vr-2 { width: 75%; height: 75%; border-top-color: var(--text-primary); animation-duration: 5s; animation-direction: reverse; }
.vt-pm .vr-1 { width: 100%; height: 100%; border-top-color: var(--accent-orange); border-left-color: rgba(255, 159, 67, 0.3); animation-duration: 4s; }
.vt-pm .vr-2 { width: 75%; height: 75%; border-top-color: var(--accent-yellow); animation-duration: 6s; animation-direction: reverse; }
.env-val-box { text-align: center; z-index: 5; }
.env-val { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 0 5px currentColor; }
.env-unit { font-size: 0.7rem; color: #888; }
.env-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #aaa; margin-top: 5px; letter-spacing: 1px; }
@keyframes spin-vortex { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- REACTOR MONITOR --- */
.res-grid { display: flex; justify-content: space-around; width: 100%; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.res-item { display: flex; flex-direction: column; align-items: center; margin: 10px; position: relative; }
.reactor { width: 120px; height: 120px; position: relative; display: flex; justify-content: center; align-items: center; }
.reactor-arc { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border-radius: 50%; background: conic-gradient(var(--color) 0%, #222 0%); box-shadow: 0 0 15px var(--color-glow); z-index: 1; transition: background 0.5s ease; }
.reactor-core { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background-color: #1a1a1a; border-radius: 50%; z-index: 2; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(#333 1px, transparent 1px); background-size: 10px 10px; border: 1px solid #333; }
.reactor-val { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.5rem; color: #fff; text-shadow: 0 0 5px currentColor; z-index: 3; }
.reactor-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px dashed #444; box-sizing: border-box; animation: spin-slow 10s linear infinite; z-index: 0; }
.reactor-ring::after { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 5px; background: var(--accent-green); }
.res-label { font-size: 0.8rem; color: #888; font-weight: bold; margin-top: 10px; letter-spacing: 1px; }
.uptime-box { background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--accent-orange); border: 1px solid var(--accent-orange); margin-top: 5px; box-shadow: 0 0 5px rgba(255, 159, 67, 0.3); }
@keyframes spin-slow { 100% { transform: rotate(360deg); } }

/* --- ENERGY BARS --- */
.energy-bar-container { width: 100%; height: 40px; background-color: #0f1519; border: 1px solid #333; border-radius: 4px; position: relative; overflow: hidden; box-shadow: inset 0 0 10px #000; }
.energy-bar-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 20px 100%; z-index: 0; }
.energy-fill { height: 100%; width: 0%; transition: width 1s linear; position: relative; z-index: 1; background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent 100% ); background-size: 20px 20px; animation: move-stripes 2s linear infinite; }
@keyframes move-stripes { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }
.fill-green { background-color: var(--accent-green); box-shadow: 0 0 15px var(--accent-green); }
.fill-orange { background-color: var(--accent-orange); box-shadow: 0 0 15px var(--accent-orange); }
.energy-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-family: 'JetBrains Mono', monospace; font-weight: bold; color: #fff; text-shadow: 0 0 3px #000; background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 4px; }

/* --- TERMINAL & NETWORK --- */
#hacker-terminal { width: 100%; height: 200px; max-height: 200px; background-color: #000; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #0f0; overflow: hidden; padding: 8px; border-radius: 4px; border: 1px solid #333; opacity: 0.9; display: flex; flex-direction: column; justify-content: flex-start; }
.log-line { margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ping-list { width: 100%; font-size: 0.75rem; }
.ping-row { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(255,255,255,0.1); padding: 2px 0; }
.ping-num { color: var(--text-primary); font-weight: bold; }
.ping-dot { height: 6px; width: 6px; border-radius: 50%; display:inline-block; margin-right:5px;}
.p-good { background: #00e676; } .p-mid { background: #ffea00; }

/* --- ZOO --- */
#zoo-overlay { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.pet-container { position: absolute; bottom: 8px; pointer-events: auto; cursor: pointer; user-select: none; left: -100px; z-index: 1000; }
.pet-flipper { display: inline-block; transform-origin: center; }
.pet-bouncer { display: inline-block; font-size: 3rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(69, 162, 158, 0.4)); animation: bounce-anim 0.5s infinite alternate ease-in-out; }
@keyframes patrol-walk { 0% { left: -10%; } 45% { left: 105%; } 50% { left: 105%; } 95% { left: -10%; } 100% { left: -10%; } }
@keyframes patrol-turn { 0% { transform: scaleX(-1); } 49% { transform: scaleX(-1); } 50% { transform: scaleX(1); } 99% { transform: scaleX(1); } 100% { transform: scaleX(-1); } }
@keyframes bounce-anim { from { transform: translateY(0); } to { transform: translateY(-10px); } }
#cat-pet { animation: patrol-walk 25s infinite linear; z-index: 1003; } #cat-pet .pet-flipper { animation: patrol-turn 25s infinite steps(1); }
#dino-pet { animation: patrol-walk 35s infinite linear; z-index: 1002; animation-delay: -5s; } #dino-pet .pet-flipper { animation: patrol-turn 35s infinite steps(1); animation-delay: -5s; }
#dog-pet { animation: patrol-walk 20s infinite linear; z-index: 1001; animation-delay: -10s; } #dog-pet .pet-flipper { animation: patrol-turn 20s infinite steps(1); animation-delay: -10s; }
.pet-bubble { position: absolute; top: -45px; left: 50%; transform: translateX(-50%); background: #fff; color: #000; padding: 5px 12px; border-radius: 12px; font-size: 0.9rem; font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.5); font-family: sans-serif; border: 2px solid #000; z-index: 2000; }
.pet-bubble::after { content: ''; position: absolute; bottom: -6px; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: #fff transparent transparent transparent; }