/* ========================================
   Y2K38 OVERFLOW CRISIS DASHBOARD - 2038 GLOBAL COLLAPSE
   SECURE HOLOGRAM PROJECTION INTERFACE | POST-2038 ANALYSIS
   Designed by Huokaing Thara
   ======================================== */

/* === RESET & BASE - 2038 SECURE MODE === */
* { margin: 0;padding: 0; box-sizing: border-box; }
html, body { 
  height: 100%; overflow-x: hidden; overflow-y: auto;
  background: radial-gradient(ellipse at center, #000 0%, #001133 50%, #000011 100%);
  font-family: 'Courier New', 'Consolas', monospace; color: #0ff;
  -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none;
  -ms-user-select: none; user-select: none; -khtml-user-select: none;
}

/* === Y2K38 HOLOGRAM OVERLAY - 2038 WARNING === */
#holo-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1;
  pointer-events: none; background: 
    repeating-linear-gradient(45deg, rgba(255,0,0,0.02) 0px, rgba(0,255,255,0.02) 1px, transparent 3px);
  animation: y2k38Scan 2.5s linear infinite;
}

/* === MATRIX 2038 INTRO === */
#matrix-intro {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;
  background: #000; color: #f00; font-size: 20px; line-height: 1.1; font-weight: bold;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-shadow: 0 0 20px #f00;
}

/* === MAIN CONTAINER === */
.container {
  max-width: 1400px; margin: 0 auto; padding: 25px; position: relative; z-index: 10;
}

/* === CRITICAL HEADER - 2038 COUNTDOWN === */
header { text-align: center; margin-bottom: 50px; }
h1 { 
  font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: 15px;
  background: linear-gradient(45deg, #f00, #0ff, #f0f, #f00); 
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 300% 300%;
  text-shadow: 0 0 40px #f00, 0 0 60px #0ff; animation: y2k38Glow 1.8s ease-in-out infinite alternate;
}
header p { 
  font-size: 1.2rem; margin: 8px 0; opacity: 0.9;
  text-shadow: 0 0 15px #0ff;
}

/* === Y2K38 PROJECTION TABLE - POST-2038 OVERFLOW === */
#projection-table {
  width: 100%; margin: 40px 0; background: rgba(10,0,20,0.85);
  border: 3px solid #f00; border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(20px); box-shadow: 0 0 60px rgba(255,0,0,0.4), inset 0 0 30px rgba(0,255,255,0.1);
}

#projection-table th {
  background: linear-gradient(90deg, rgba(255,0,0,0.3), rgba(0,255,255,0.2), rgba(240,0,240,0.2));
  padding: 20px 18px; text-align: left; font-weight: bold; color: #fff;
  border-bottom: 3px solid #f00; text-shadow: 0 0 10px #f00;
  font-size: 1.1rem;
}

#projection-table td {
  padding: 18px; border-bottom: 2px solid rgba(255,0,0,0.3);
  transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}

#projection-table tr:hover td {
  background: rgba(255,0,0,0.15); transform: translateX(5px) scale(1.02);
  box-shadow: 0 5px 25px rgba(255,0,0,0.3);
}

.cost { color: #0ff; font-weight: bold; text-shadow: 0 0 15px #0ff; }
.overflow { 
  color: #f00 !important; font-weight: bold; font-size: 1.3em; 
  text-shadow: 0 0 25px #f00, 0 0 40px #f00; animation: overflowPulse 2s infinite;
}

/* === 2038 CHARTS GRID === */
.charts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 35px; margin: 50px 0;
}

.chart-container {
  background: rgba(10,0,25,0.9); border: 3px solid #f00;
  border-radius: 20px; padding: 30px; backdrop-filter: blur(25px);
  box-shadow: 0 0 70px rgba(255,0,0,0.5), 0 0 100px rgba(0,255,255,0.2);
}

.chart-container h3 {
  text-align: center; margin-bottom: 25px; color: #f00;
  text-shadow: 0 0 25px #f00; font-size: 1.6rem; font-weight: bold;
}

/* === LIVE FEED - Y2K38 RESEARCH === */
#feed-container {
  background: rgba(0,10,0,0.9); border: 3px solid #f00;
  border-radius: 16px; padding: 30px; margin: 40px 0;
  backdrop-filter: blur(20px); box-shadow: 0 0 50px rgba(255,0,0,0.4);
}

#feed-container h3 {
  color: #f00; text-shadow: 0 0 20px #f00; margin-bottom: 20px;
}

#feed-list {
  list-style: none; max-height: 350px; overflow-y: auto;
}

#feed-list li {
  padding: 15px; margin-bottom: 12px; background: rgba(255,0,0,0.1);
  border-left: 5px solid #f00; border-radius: 8px;
  animation: y2k38Slide 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* === LANGUAGE CONTROLS - 2038 SECURE === */
#lang-controls {
  position: fixed; bottom: 35px; right: 35px; z-index: 1001;
  display: flex; flex-direction: column; gap: 14px;
}

#lang-controls button {
  padding: 16px 24px; border: 3px solid #f00; border-radius: 14px;
  background: rgba(255,0,0,0.2); color: #fff; font-family: inherit;
  font-weight: bold; cursor: pointer; backdrop-filter: blur(25px);
  box-shadow: 0 8px 30px rgba(255,0,0,0.5), inset 0 2px 10px rgba(255,255,255,0.1);
  transition: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55); position: relative; overflow: hidden;
}

#lang-controls button::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

#lang-controls button:hover::before { left: 100%; }
#lang-controls button:hover {
  background: rgba(255,0,0,0.4); transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 50px rgba(255,0,0,0.7);
}

/* === Y2K38 ANIMATIONS === */
@keyframes y2k38Scan {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { filter: hue-rotate(180deg) brightness(1.2); }
  100% { transform: translateX(100vw) translateY(100vh) rotate(45deg); }
}

@keyframes y2k38Glow {
  0% { filter: drop-shadow(0 0 15px #f00) drop-shadow(0 0 30px #0ff); }
  100% { filter: drop-shadow(0 0 30px #f00) drop-shadow(0 0 60px #0ff); }
}

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

@keyframes y2k38Slide {
  from { opacity: 0; transform: translateX(100%) rotateY(90deg); }
  to { opacity: 1; transform: translateX(0) rotateY(0deg); }
}

/* === RESPONSIVE 2038 MOBILE === */
@media (max-width: 768px) {
  .charts-grid { grid-template-columns: 1fr; gap: 25px; }
  #lang-controls { right: 20px; bottom: 20px; gap: 10px; }
  #lang-controls button { padding: 14px 20px; font-size: 14px; }
  .container { padding: 15px; }
}

/* === HIDDEN ELEMENTS === */
#holo-sound { display: none; }

/* === SECURITY SELECTION === */
::selection { background: rgba(255,0,0,0.6); color: #fff; text-shadow: none; }
::-moz-selection { background: rgba(255,0,0,0.6); color: #fff; text-shadow: none; }

:focus-visible {
  outline: 4px solid #f00; outline-offset: 4px; background: rgba(255,0,0,0.2);
}

/* === Y2K38 SCROLLBAR === */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { 
  background: rgba(10,0,20,0.8); border-radius: 8px;
}
::-webkit-scrollbar-thumb { 
  background: linear-gradient(180deg, #f00, #0ff); 
  border-radius: 8px; box-shadow: 0 0 15px #f00;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f00, #ff0); }

/* === PRINT - Y2K38 DECLASSIFIED === */
@media print {
  #holo-overlay, #lang-controls, canvas, #feed-container { display: none !important; }
  #projection-table { 
    border-collapse: collapse; background: white; color: black !important;
    box-shadow: none; border: 2px solid black;
  }
  .overflow { color: red !important; }
}

/* === 2038 WATERMARK === */
.container::after {
  content: 'Y2K38 OVERFLOW 2038-01-19 03:14:07 UTC ⚠️ CLASSIFIED ⚠️';
  position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 0.9rem; color: rgba(255,0,0,0.4); z-index: 999;
  text-shadow: 0 0 10px #f00; animation: blink 3s infinite;
  pointer-events: none;
}

@keyframes blink {
  0%, 50% { opacity: 0.4; }
  51%, 100% { opacity: 0.8; }
}