style.css

:root{
  /* --- BACKGROUNDS (Deep tactical dark, but slightly lifted for eye comfort) --- */
  --void:#0a0f0d;          /* A rich, ultra-dark army slate (not pure black pitch) */
  --panel:#131c18;         /* Clear container background */
  --panel-2:#1a2620;       /* Slightly lighter card background for layered depth */
  --grid-line:#25382e;     /* Boosted contrast so borders cleanly define structural shapes */

  /* --- ACCENTS & GLOWS (Vibrant neon terminal tones that cut through the dark) --- */
  --phosphor:#4effa2;      /* Neon terminal green - highly visible */
  --phosphor-dim:#518c68;  /* Was way too dark before; now a highly readable mid-tone green */
  --amber:#ffb830;         /* Clear tactical amber */
  --red:#ff6666;           /* Sharp warning red */
  
  /* --- FACTIONS (Iconic tones tuned up for dark-mode readability) --- */
  --uef:#5caeff;           
  --cybran:#ff5252;        
  --aeon:#ffd042;          
  --seraphim:#4ff0cf;      

  /* --- TEXT (Maximum readability, crisp contrast) --- */
  --text:#f0fbf5;          /* Crisp, high-contrast off-white with a hint of mint */
  --text-dim:#94b3a1;      /* Crisp mid-tone for body text; completely readable against the dark panels */
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-size:14px;
  background: var(--void); /* Fast solid paint optimization path */
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* subtle tactical grid backdrop */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:0.4; 
  pointer-events:none;
  z-index:0;
}

.frame{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:22px 20px 80px;
}

/* ===== TOP STATUS BAR ===== */
.statusbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Share Tech Mono', monospace;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--phosphor-dim);
  border:1px solid var(--grid-line);
  padding:8px 14px;
  margin-bottom:18px;
  background:var(--panel);
}
.statusbar .dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--phosphor);
  box-shadow:0 0 8px var(--phosphor);
  margin-right:8px;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.4;}
}

/* ===== HEADER / RADAR ===== */
.hero{
  position:relative;
  border:1px solid var(--grid-line);
  background:linear-gradient(180deg, var(--panel) 0%, var(--void) 100%);
  padding:36px 30px 30px;
  margin-bottom:28px;
  overflow:hidden;
}
.hero .corner{position:absolute;width:16px;height:16px;border-color:var(--phosphor);}
.hero .corner.tl{top:8px;left:8px;border-top:2px solid;border-left:2px solid;}
.hero .corner.tr{top:8px;right:8px;border-top:2px solid;border-right:2px solid;}
.hero .corner.bl{bottom:8px;left:8px;border-bottom:2px solid;border-left:2px solid;}
.hero .corner.br{bottom:8px;right:8px;border-top:2px solid;border-right:2px solid;}

.radar{
  position:absolute;
  top:-60px; right:-60px;
  width:220px;height:220px;
  border-radius:50%;
  border:1px solid var(--phosphor-dim);
  opacity:0.4;
}
.radar::before{
  content:"";
  position:absolute;
  inset:26px;
  border-radius:50%;
  border:1px solid var(--phosphor-dim);
}
.radar::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:50%; height:1px;
  background:linear-gradient(90deg, var(--phosphor), transparent);
  transform-origin:left center;
  transform: rotate(45deg); 
}

.eyebrow{
  font-family:'Share Tech Mono', monospace;
  color:var(--amber);
  font-size:12px;
  letter-spacing:0.3em;
  margin-bottom:10px;
}
.hero h1{
  font-family:'Share Tech Mono', monospace;
  font-size:clamp(28px, 5vw, 46px);
  margin:0 0 14px;
  color:var(--phosphor);
  letter-spacing:0.03em;
  text-shadow:0 0 18px rgba(78,255,162,0.2);
}
.hero h1 .cursor{
  display:inline-block;
  width:0.55em;
  background:var(--phosphor);
  animation:blink 1s steps(1) infinite;
  margin-left:4px;
}
@keyframes blink{50%{opacity:0;}}
.hero p{
  max-width:560px;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.6;
  margin:0;
}

/* quick links row */
.quicklinks{
  display:flex;
  gap:10px;
  margin-top:22px;
  flex-wrap:wrap;
}
.quicklinks a{
  font-family:'Share Tech Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--phosphor);
  text-decoration:none;
  border:1px solid var(--phosphor-dim);
  padding:8px 14px;
  transition:all .2s;
  background:rgba(0,0,0,0.2);
}
.quicklinks a:hover{
  background:var(--phosphor);
  color:var(--void);
  box-shadow:0 0 14px rgba(78,255,162,0.4);
}

/* ===== SECTION LABEL ===== */
.section-label{
  font-family:'Share Tech Mono', monospace;
  font-size:12px;
  letter-spacing:0.25em;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  gap:12px;
  margin:36px 0 16px;
}
.section-label::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--grid-line);
}

/* ===== NEWS FEED ===== */
.feed{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.feed > .card{
  flex:1 1 300px;
  min-width:0; 
}
.feed > .card.featured{
  flex-basis:100%;
}

.card{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--grid-line);
  padding:18px;
  --accent:var(--phosphor);
  transition:transform .25s, box-shadow .25s;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--accent), 0 8px 24px -8px rgba(0,0,0,0.5);
}
.card .corner{position:absolute;width:10px;height:10px;border-color:var(--accent);opacity:0;transition:opacity .25s;}
.card:hover .corner{opacity:1;}
.card .corner.tl{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;}
.card .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;}

.card.uef{--accent:var(--uef);}
.card.cybran{--accent:var(--cybran);}
.card.aeon{--accent:var(--aeon);}
.card.seraphim{--accent:var(--seraphim);}

/* ===== FEATURED / LATEST ===== */
.card.featured{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  padding:26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02), transparent 60%),
    var(--panel);
  border:1px solid var(--accent);
}
.card.featured .corner{opacity:1;width:14px;height:14px;}
.card.featured .tag{
  background:var(--accent);
  color:var(--void);
  font-weight:600;
}
.card.featured .tag.latest{
  background:transparent;
  color:var(--accent);
  border-style:solid;
  margin-right:8px;
  animation:pulse 2s infinite;
}
.card.featured h3{
  font-size:clamp(20px, 2.4vw, 30px);
  line-height:1.25;
  margin:0 0 14px;
}
.card.featured p{
  font-size:13.5px;
  line-height:1.7;
}
.card.featured .meta{
  font-size:11px;
}

.card.featured > div:first-child{
  flex:1.1 1 320px;
}
.card.featured .visual{
  position:relative;
  flex:1 1 280px;
  min-height:220px;
  overflow:hidden;
  border:1px solid var(--grid-line);
  background:var(--void);
  display:flex;
  align-items:flex-end;
  padding:12px;
  box-sizing:border-box;
}
.card.featured .visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.card.featured .visual::before{
  content:"";
  position:absolute;
  top:10px; left:10px; right:10px; bottom:10px;
  border:1px dashed var(--accent);
  opacity:0.4;
  z-index:2;
}
.card.featured .visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(78, 255, 162, 0.08), transparent),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 1px, transparent 2px, transparent 4px);
  z-index:1;
}
.card.featured .visual .coord{
  position:relative;
  z-index:3;
  font-family:'Share Tech Mono', monospace;
  font-size:10px;
  color:var(--accent);
  letter-spacing:0.1em;
}

@media (max-width:820px){
  .card.featured > div:first-child,
  .card.featured .visual{
    flex-basis:100%;
  }
}

.card .tag{
  font-family:'Share Tech Mono', monospace;
  font-size:10px;
  letter-spacing:0.15em;
  color:var(--accent);
  border:1px solid var(--accent);
  display:inline-block;
  padding:3px 8px;
  margin-bottom:12px;
  background:rgba(0,0,0,0.2);
}
.card .meta{
  font-size:10px;
  color:var(--text-dim);
  letter-spacing:0.08em;
  margin-bottom:8px;
}
.card h3{
  font-family:'Share Tech Mono', monospace;
  font-size:16px;
  color:var(--text);
  margin:0 0 10px;
  line-height:1.3;
}
.card p{
  font-size:12.5px;
  color:var(--text-dim);
  line-height:1.6;
  margin:0 0 14px;
}
.card .readmore{
  font-family:'Share Tech Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--accent);
  text-decoration:none;
}
.card .readmore::after{content:" →";}

/* ===== CARD THUMBNAIL STYLES ===== */
.card-thumb {
  position: relative;
  width: 100%;
  height: 150px;
  margin-bottom: 14px;
  overflow: hidden; 
  border: 1px solid var(--grid-line);
  background: var(--void);
  display: block;
  box-sizing: border-box;
}

.card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  max-width: 100%;
}

.card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    linear-gradient(rgba(110, 231, 163, 0.08), transparent),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 1px, transparent 2px, transparent 4px);
  z-index: 1;
}

.card:hover .card-thumb img {
  opacity: 1;
  filter: grayscale(0%) contrast(100%);
  transform: scale(1.03); 
}

/* ===== TOURNAMENTS TICKER ===== */
.ticker-wrap{
  border:1px solid var(--grid-line);
  background:var(--panel);
  padding:14px 18px;
  margin-top:36px;
  display:flex;
  align-items:center;
  gap:16px;
}
.ticker-label{
  font-family:'Share Tech Mono', monospace;
  font-size:11px;
  color:var(--red);
  letter-spacing:0.15em;
  white-space:nowrap;
}
.ticker-label .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-right:6px;
  animation:pulse 1.4s infinite;
}
.ticker{
  font-size:12.5px;
  color:var(--text-dim);
  overflow:hidden;
  white-space:nowrap;
}
.ticker span{
  display:inline-block;
  padding-left:100%;
  animation:scroll 22s linear infinite;
}
@keyframes scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}

/* ===== FOOTER NAV ===== */
.footnav{
  margin-top:50px;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  border-top:1px solid var(--grid-line);
  padding-top:28px;
}
.footnav > div{
  flex:1 1 180px;
}
.footnav h4{
  font-family:'Share Tech Mono', monospace;
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--amber);
  margin:0 0 12px;
}
.footnav a{
  display:block;
  font-size:12.5px;
  color:var(--text-dim);
  text-decoration:none;
  padding:5px 0;
  border-bottom:1px dashed transparent;
}
.footnav a:hover{
  color:var(--phosphor);
  border-bottom-color:var(--phosphor-dim);
}

@media (max-width:640px){
  .hero{padding:26px 18px 22px;}
  .radar{display:none;}
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:var(--void);
}
::-webkit-scrollbar-thumb{
  background:var(--grid-line);
  border:1px solid var(--phosphor-dim);
}
::-webkit-scrollbar-thumb:hover{
  background:var(--phosphor-dim);
}

/* ===== AUTOMATIC PERFORMANCE FREEZE UTILITY ===== */
.freeze-frame,
.freeze-frame *,
.freeze-frame::before,
.freeze-frame::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ===== FULLCALENDAR OVERRIDES (TACTICAL HUD THEME) ===== */
/* ===== ALLOW EVENT TEXT TO WRAP ===== */
.fc-direction-ltr .fc-daygrid-event .fc-event-time,
.fc-direction-ltr .fc-daygrid-event .fc-event-title,
.fc-event-main {
  white-space: normal !important; /* Forces text to wrap to the next line */
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: break-word !important;
}

/* Ensure the event bar height expands to fit the wrapped text */
.fc-h-event {
  height: auto !important;
  padding-bottom: 4px !important;
}

.fc {
  font-family: 'Share Tech Mono', monospace;
  background: var(--panel);
  border: 1px solid var(--grid-line);
  padding: 20px;
  color: var(--text);
}

/* Header toolbar text and button configurations */
.fc .fc-toolbar-title {
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--phosphor);
}
.fc .fc-button-primary {
  background-color: var(--void);
  border-color: var(--grid-line);
  color: var(--phosphor-dim);
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus {
  background-color: var(--phosphor);
  color: var(--void) !important;
  border-color: var(--phosphor);
  box-shadow: 0 0 10px rgba(78,255,162,0.3);
}
.fc .fc-button-active {
  background-color: var(--panel-2) !important;
  border-color: var(--phosphor) !important;
  color: var(--phosphor) !important;
}

/* Grid borders and cell properties */
.fc th {
  background: var(--panel-2);
  color: var(--amber);
  border-color: var(--grid-line) !important;
  padding: 8px 0 !important;
  letter-spacing: 0.1em;
}
.fc td {
  border-color: var(--grid-line) !important;
}
.fc .fc-day-other {
  background: rgba(0, 0, 0, 0.2); /* Dim out-of-month days */
}
.fc .fc-day-today {
  background: rgba(78, 255, 162, 0.04) !important; /* Luminous target highlight */
}

/* Inside-grid event bars */
.fc-v-event, .fc-h-event {
  background-color: var(--panel-2);
  border: 1px solid var(--phosphor-dim);
  padding: 2px 4px;
}
.fc-event-title, .fc-event-time {
  color: var(--phosphor);
  font-size: 11px;
}
.fc-event:hover {
  cursor: pointer;
  border-color: var(--amber);
}


/* ===== CALENDAR EVENT TYPE COLOR CODING ===== */

/* 1. Patch Deployment — UEF Cyan Blue */
.fc-event.ev-patch {
  background-color: rgba(92, 174, 255, 0.15) !important;
  border-left: 3px solid var(--uef) !important;
  border-top: 1px solid rgba(92, 174, 255, 0.3) !important;
  border-right: 1px solid rgba(92, 174, 255, 0.3) !important;
  border-bottom: 1px solid rgba(92, 174, 255, 0.3) !important;
}
.fc-event.ev-patch .fc-event-title { 
  color: var(--uef) !important; 
}

/* 2. Tournament — Cybran Warning Red */
.fc-event.ev-tournament {
  background-color: rgba(255, 82, 82, 0.15) !important;
  border-left: 3px solid var(--cybran) !important;
  border-top: 1px solid rgba(255, 82, 82, 0.3) !important;
  border-right: 1px solid rgba(255, 82, 82, 0.3) !important;
  border-bottom: 1px solid rgba(255, 82, 82, 0.3) !important;
}
.fc-event.ev-tournament .fc-event-title { 
  color: var(--cybran) !important; 
  font-weight: 600; 
}

/* 3. Game Night — Terminal Neon Green */
.fc-event.ev-gamenight {
  background-color: rgba(78, 255, 162, 0.1) !important;
  border-left: 3px solid var(--phosphor) !important;
  border-top: 1px solid rgba(78, 255, 162, 0.2) !important;
  border-right: 1px solid rgba(78, 255, 162, 0.2) !important;
  border-bottom: 1px solid rgba(78, 255, 162, 0.2) !important;
}
.fc-event.ev-gamenight .fc-event-title { 
  color: var(--phosphor) !important; 
}

/* 4. Association Meetings — Seraphim Teal/Mint */
.fc-event.ev-meeting {
  background-color: rgba(79, 240, 207, 0.12) !important;
  border-left: 3px solid var(--seraphim) !important;
  border-top: 1px solid rgba(79, 240, 207, 0.2) !important;
  border-right: 1px solid rgba(79, 240, 207, 0.2) !important;
  border-bottom: 1px solid rgba(79, 240, 207, 0.2) !important;
}
.fc-event.ev-meeting .fc-event-title { 
  color: var(--seraphim) !important; 
}

/* 5. Supcom Steam Sale — Operational Tactical Amber */
.fc-event.ev-sale {
  background-color: rgba(255, 184, 48, 0.12) !important;
  border-left: 3px solid var(--amber) !important;
  border-top: 1px solid rgba(255, 184, 48, 0.2) !important;
  border-right: 1px solid rgba(255, 184, 48, 0.2) !important;
  border-bottom: 1px solid rgba(255, 184, 48, 0.2) !important;
}
.fc-event.ev-sale .fc-event-title { 
  color: var(--amber) !important; 
}


/* ===== EVENT MODAL OVERLAY ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 13, 0.85); /* Darkens the rest of the app */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: var(--panel-2);
  border: 1px solid var(--phosphor-dim);
  width: 90%;
  max-width: 480px;
  padding: 24px;
  position: relative;
  box-shadow: 0 0 0 1px var(--phosphor), 0 8px 32px -8px rgba(0,0,0,0.8);
}
.modal-box .corner { position: absolute; width: 14px; height: 14px; border-color: var(--phosphor); }
.modal-box .corner.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.modal-box .corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.modal-header h3 {
  font-family: 'Share Tech Mono', monospace;
  color: var(--phosphor);
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.05em;
}
.close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 28px;
  cursor: pointer;
  line-height: 0.8;
  padding: 0;
  transition: color 0.2s;
}
.close-btn:hover { color: var(--red); }

.modal-body .meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: var(--amber);
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}
.modal-body p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 20px;
}
.modal-body .readmore {
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--uef);
  text-decoration: none;
  border: 1px solid var(--uef);
  padding: 8px 16px;
  background: rgba(0,0,0,0.2);
  transition: all 0.2s;
}
.modal-body .readmore:hover {
  background: var(--uef);
  color: var(--void);
}