/* ============================================================
   Type Invaders MK – Styles
   ============================================================ */
@font-face {
  font-family: 'VT323';
  src: url('../assets/fonts/VT323-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --wimk-bg:       #0a0a2e;
  --wimk-surface:  #0d0d35;
  --wimk-surface2: #14143a;
  --wimk-green:    #44ff44;
  --wimk-cyan:     #44ffff;
  --wimk-yellow:   #ffff44;
  --wimk-red:      #ff4444;
  --wimk-blue:     #4488ff;
  --wimk-purple:   #cc44ff;
  --wimk-text:     #e0e0ff;
  --wimk-dim:      #666688;
  --wimk-border:   #333366;
  --wimk-radius:   6px;
  --wimk-glow:     0 0 20px rgba(68,255,68,0.15);
  --wimk-font:     'VT323', 'Courier New', monospace;
}

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

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

/* Scanlines – globales Viewport-Overlay (CRT-Anmutung).
   Werte: Alpha 0.15, Periode 3px, kein mix-blend-mode.
   Referenz: .CLAUDE-BAUSTEINE/ui/baustein-scanlines-global-overlay.md */
body::after{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.15) 0px,
    rgba(0,0,0,0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events:none;
  z-index:9999;
}

#app{display:flex;flex-direction:column;height:calc(100vh - 30px);height:calc(100dvh - 30px)}

/* FOOTER — global fixed, Pixel-Defender-Stil */
.wimk-footer{
  position:fixed;bottom:0;left:0;right:0;
  height:30px;z-index:50;
  text-align:center;padding:6px 10px;
  font-size:0.65em;letter-spacing:0.08em;
  color:#5a6570;
  font-family:'Courier New',Courier,monospace;
  background:rgba(10,10,46,0.92);
  border-top:1px solid var(--wimk-border);
}
.wimk-footer a{
  color:#5a6570;text-decoration:none;
  transition:color 0.2s ease,border-color 0.2s ease,background 0.2s ease;
}
.wimk-footer a:hover{color:#fff}
.wimk-footer-credit{
  border:1px solid transparent;border-radius:3px;padding:1px 5px;
}
.wimk-footer-credit:hover{
  color:#ff6b6b !important;
  border-color:#ff6b6b;
  background:rgba(255,107,107,0.08);
}
.wimk-footer-sep{margin:0 4px}

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

/* Game-Route: Header (Nav) komplett weg — das Canvas-Menue ist die Navigation.
   HUD nur beim Canvas-Menue ausblenden, waehrend des Spielens bleibt es sichtbar. */
body.wimk-on-game-page .wimk-nav{display:none !important}
body.wimk-on-game-page.wimk-on-menu .wimk-hud{display:none !important}

/* HUD — Pixel-Defender-Stil: VT323, gruenlich getoent, schmale Border */
.wimk-hud{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:8px 16px;
  background:rgba(68,255,68,0.05);
  border-bottom:1px solid rgba(68,255,68,0.2);
  font-family:var(--wimk-font);
  font-size:1.35em;letter-spacing:0.05em;
  flex-shrink:0;
}
.wimk-hud-item{display:flex;align-items:baseline;gap:0.35rem}
.wimk-hud-label{color:var(--wimk-dim);font-size:0.85em;letter-spacing:0.08em}
.wimk-hud-label::after{content:':'}
.wimk-hud-value{font-weight:normal;min-width:2ch;color:var(--wimk-green)}
.wimk-hud-value.score{color:var(--wimk-green)}
.wimk-hud-value.wave{color:var(--wimk-yellow)}
.wimk-hud-value.combo{color:var(--wimk-purple);text-shadow:0 0 6px var(--wimk-purple)}
.wimk-hud-value.accuracy{color:var(--wimk-cyan)}

.wimk-lives{display:flex;gap:2px;align-items:center}
.wimk-life{
  font-size:1.1em;line-height:1;
  color:var(--wimk-red);
  text-shadow:0 0 6px var(--wimk-red);
}
.wimk-life::before{content:'\2665'}
.wimk-life.lost{opacity:0.2;text-shadow:none}

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

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

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

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

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

/* TOAST */
#toast-container{
  position:fixed;bottom:1rem;right:1rem;z-index:9999;
  display:flex;flex-direction:column;gap:0.4rem;max-width:340px;
}
.wimk-toast{
  background:var(--wimk-surface2);border:1px solid var(--wimk-border);
  border-radius:var(--wimk-radius);padding:0.6rem 0.8rem;
  border-left:3px solid var(--wimk-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){
  .wimk-hud{gap:0.5rem;font-size:0.7rem;flex-wrap:wrap}
  .wimk-nav-links{display:none}
}

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

/* Custom Cursor */
body.wimk-custom-cursor, body.wimk-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: wimk-cursorPulse 0.7s ease-in-out infinite;
}
#cursor-ring.is-hovering {
  width: 42px; height: 42px; opacity: 0.35;
}
@keyframes wimk-cursorPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.9); opacity: 0.5; }
}

/* GUIDE ROWS (about / how to play) */
.wimk-guide-row{
  display:flex;align-items:flex-start;gap:0.6rem;
  padding:0.25rem 0;font-size:0.85rem;color:var(--wimk-text);line-height:1.5;
}
.wimk-guide-row b{color:var(--wimk-green)}
.wimk-guide-icon{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.6em;font-size:1.05em;line-height:1;
  text-shadow:0 0 6px currentColor;
}
.wimk-gi-green{color:var(--wimk-green)}
.wimk-gi-red{color:var(--wimk-red)}
.wimk-gi-yellow{color:var(--wimk-yellow)}
.wimk-gi-cyan{color:var(--wimk-cyan)}
.wimk-gi-magenta{color:var(--wimk-purple)}
.wimk-guide-hint{
  font-size:0.85rem;color:rgba(68,255,68,0.75);
  margin:0.2rem 0;
}

/* EASTER EGG — Retro-Frame (Scanlines liegen global via body::after drüber) */
.wimk-retro-frame{
  border:3px solid var(--wimk-green);
  border-radius:2px;
  box-shadow:
    0 0 18px var(--wimk-green),
    0 0 36px rgba(68,255,68,0.35),
    inset 0 0 14px rgba(68,255,68,0.45);
  overflow:hidden;background:#000;
}
.wimk-easter-egg{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,0.9);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  pointer-events:none;
}
.wimk-easter-egg.hidden{display:none}
.wimk-ee-text{
  font-size:1.4rem;color:var(--wimk-red);
  text-align:center;line-height:1.5;
  text-shadow:0 0 20px var(--wimk-red),0 0 40px var(--wimk-red);
  animation:wimk-ee-blink 0.8s step-end infinite;
  margin-bottom:1.75rem;padding:0 1rem;
}
.wimk-ee-face{
  position:relative;width:220px;height:220px;
  animation:
    wimk-ee-slide 1.5s cubic-bezier(.2,.8,.2,1.05) forwards,
    wimk-ee-wobble 2.5s ease-in-out 1.5s infinite;
}
.wimk-ee-face-img{
  width:100%;height:100%;object-fit:cover;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:saturate(1.35) contrast(1.25) brightness(1.05) hue-rotate(-4deg);
}
@keyframes wimk-ee-blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0.35}
}
@keyframes wimk-ee-slide{
  0%   { transform: translateX(500px) rotate(-14deg) scale(0.35); opacity:0; }
  55%  { transform: translateX(0) rotate(5deg) scale(1.12); opacity:1; }
  75%  { transform: translateX(0) rotate(-3deg) scale(0.96); }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity:1; }
}
@keyframes wimk-ee-wobble{
  0%,100%{ transform: translateY(0) rotate(0); }
  50%    { transform: translateY(-6px) rotate(1.5deg); }
}

/* Corner-Badge (persistent nach Unlock) */
.wimk-ee-corner{
  position:fixed;bottom:14px;right:14px;
  width:72px;height:72px;z-index:100;
  pointer-events:none;
  animation:wimk-ee-corner-float 3.2s ease-in-out infinite;
}
.wimk-ee-corner.hidden{display:none}
.wimk-ee-corner img{
  width:100%;height:100%;object-fit:cover;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:saturate(1.35) contrast(1.25) brightness(1.05) hue-rotate(-4deg);
}
@keyframes wimk-ee-corner-float{
  0%,100%{ transform: translateY(0) rotate(0); }
  50%    { transform: translateY(-4px) rotate(1deg); }
}