/* ============================================================
   Type Invaders MK – Styles
   ============================================================ */
:root {
  --ti-bg:       #0a0a2e;
  --ti-surface:  #0d0d35;
  --ti-surface2: #14143a;
  --ti-green:    #44ff44;
  --ti-cyan:     #44ffff;
  --ti-yellow:   #ffff44;
  --ti-red:      #ff4444;
  --ti-blue:     #4488ff;
  --ti-purple:   #cc44ff;
  --ti-text:     #e0e0ff;
  --ti-dim:      #666688;
  --ti-border:   #333366;
  --ti-radius:   6px;
  --ti-glow:     0 0 20px rgba(68,255,68,0.15);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  font-family:'Courier New',Courier,monospace;
  background:var(--ti-bg);
  color:var(--ti-text);
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* NAV */
.ti-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.3rem 0.75rem;
  background:var(--ti-surface);border-bottom:2px solid var(--ti-border);
  flex-shrink:0;z-index:100;
}
.ti-nav-brand{
  font-size:1.1rem;font-weight:700;color:var(--ti-green);
  text-decoration:none;text-shadow:0 0 10px rgba(68,255,68,0.5);
}
.ti-nav-links{display:flex;gap:0.25rem}
.ti-nav-links a{
  color:var(--ti-dim);text-decoration:none;
  padding:0.3rem 0.6rem;border-radius:var(--ti-radius);font-size:0.8rem;
  transition:all 200ms ease;
}
.ti-nav-links a:hover,.ti-nav-links a.active{
  background:var(--ti-surface2);color:var(--ti-green);
}

/* HUD */
.ti-hud{
  display:flex;align-items:center;justify-content:center;
  gap:1.5rem;padding:0.3rem 1rem;
  background:var(--ti-surface);border-bottom:2px solid var(--ti-border);
  font-size:0.85rem;flex-shrink:0;
}
.ti-hud-item{display:flex;align-items:center;gap:0.3rem}
.ti-hud-label{color:var(--ti-dim);font-size:0.7rem}
.ti-hud-value{font-weight:700;min-width:2ch}
.ti-hud-value.score{color:var(--ti-yellow)}
.ti-hud-value.wave{color:var(--ti-cyan)}
.ti-hud-value.combo{color:var(--ti-purple)}
.ti-hud-value.accuracy{color:var(--ti-green)}

.ti-lives{display:flex;gap:2px}
.ti-life{
  font-size:14px;line-height:1;
  color:var(--ti-red);
}
.ti-life::before{content:'\2665'}
.ti-life.lost{opacity:0.2}

/* MAIN */
.ti-main{
  flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;min-height:0;background:#050515;
}

#ti-canvas{
  display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
  max-width:100%;max-height:100%;
  width:100%;height:100%;
  object-fit:contain;
}

/* ABOUT */
.ti-about{
  max-width:650px;width:100%;padding:1.5rem;
  overflow-y:auto;margin:0 auto;
}
.ti-about h2{font-size:1.3rem;margin-bottom:1rem;color:var(--ti-green);text-shadow:0 0 8px rgba(68,255,68,0.3)}
.ti-about h3{font-size:1rem;margin:1rem 0 0.5rem;color:var(--ti-cyan)}
.ti-about p,.ti-about li{font-size:0.85rem;color:var(--ti-dim);line-height:1.6}
.ti-about ul{padding-left:1.5rem;margin-bottom:0.75rem}
.ti-about code{background:var(--ti-surface2);padding:0.1rem 0.3rem;border-radius:3px;color:var(--ti-green);font-size:0.8rem}

.ti-card{
  background:var(--ti-surface2);border:1px solid var(--ti-border);
  border-radius:var(--ti-radius);padding:1rem;margin-bottom:0.75rem;
}

.ti-keys{display:grid;grid-template-columns:auto 1fr;gap:0.2rem 1rem;font-size:0.85rem}
.ti-keys dt{color:var(--ti-yellow)}
.ti-keys dd{color:var(--ti-dim)}

/* TOAST */
#toast-container{
  position:fixed;bottom:1rem;right:1rem;z-index:9999;
  display:flex;flex-direction:column;gap:0.4rem;max-width:340px;
}
.ti-toast{
  background:var(--ti-surface2);border:1px solid var(--ti-border);
  border-radius:var(--ti-radius);padding:0.6rem 0.8rem;
  border-left:3px solid var(--ti-green);font-size:0.8rem;
  animation:slideIn 0.3s ease;
}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* RESPONSIVE */
@media(max-width:600px){
  .ti-hud{gap:0.5rem;font-size:0.7rem;flex-wrap:wrap}
  .ti-nav-links{display:none}
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--ti-surface)}
::-webkit-scrollbar-thumb{background:var(--ti-border);border-radius:3px}

/* Custom Cursor */
body.ti-custom-cursor, body.ti-custom-cursor * { cursor: none !important; }
#cursor-dot, #cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; transform: translate(-50%, -50%);
  z-index: 9999;
}
#cursor-dot {
  width: 8px; height: 8px;
  background: #9d0b0e;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}
#cursor-ring {
  width: 30px; height: 30px;
  border: 2px solid #9d0b0e;
  border-radius: 50%;
  opacity: 0;
  transition: width 0.2s, height 0.2s, opacity 0.3s;
}
#cursor-dot.is-hovering {
  animation: ti-cursorPulse 0.7s ease-in-out infinite;
}
#cursor-ring.is-hovering {
  width: 42px; height: 42px; opacity: 0.35;
}
@keyframes ti-cursorPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.9); opacity: 0.5; }
}