/* ======= C64 Variables ======= */
:root{
    --c64-blue:#352879; --c64-cyan:#74f7ff; --c64-purple:#9a5cff; --c64-green:#7fff73; --c64-orange:#ffb76b;
    --crt-curve: 14px; --crt-vignette: rgba(0,0,0,.35);
    --overscan: var(--c64-cyan);
  }
  
  /* Themes */
  body.theme-c64{ --c64-blue:#352879; --c64-cyan:#74f7ff; --c64-purple:#9a5cff; --c64-green:#7fff73; --c64-orange:#ffb76b; }
  body.theme-green{ --c64-blue:#071a07; --c64-cyan:#8cff8c; --c64-purple:#c8ffd0; --c64-green:#8cff8c; --c64-orange:#bfffbf; }
  body.theme-amber{ --c64-blue:#1b0f00; --c64-cyan:#ffb45a; --c64-purple:#ffd9a0; --c64-green:#ffd27a; --c64-orange:#ffb45a; }
  body.theme-blood{ --c64-blue:#1a0004; --c64-cyan:#ff5a66; --c64-purple:#ff99b3; --c64-green:#ffd6e0; --c64-orange:#ff4444; }
  
  /* ======= Base ======= */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--c64-blue); color:var(--c64-cyan);
    font-family:"VT323",monospace; font-size:20px; line-height:1.25; text-transform:uppercase;
    overflow-x:hidden;
    /* Platz für die fixe Tape-Bar */
    padding-top:34px;
    position:relative;
  }
  
 /* Overscan border (hinter Content) */
body::before{
  content:"";
  position:fixed;
  inset:clamp(6px, 1.2vw, 12px);
  border:clamp(3px, 0.7vw, 8px) solid var(--overscan);
  border-radius:8px;
  pointer-events:none;
  z-index:0;            /* <-- vorher war 6: jetzt HINTER dem Content */
  opacity:.45;          /* etwas dezenter */
  animation:borderCycle 12s linear infinite;
}  
  /* ======= Layout / Centering ======= */
  .wrap{max-width:980px; margin:0 auto; padding:24px 16px 220px}
  
  /* ======= Terminal (mit CRT-Effekt) ======= */
  .terminal{
    position:relative; background:rgba(0,0,0,.18); padding:18px; border:2px solid var(--c64-cyan);
    box-shadow:0 0 0 4px rgba(0,0,0,.25) inset,0 0 24px rgba(116,247,255,.15);
  }
  .terminal.crt{border-radius:0; overflow:hidden; transform:perspective(1200px) rotateX(.4deg);}
  .terminal::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 2px, transparent 3px);
    opacity:.12; mix-blend-mode:screen;
  }
  .terminal.crt::before{
    content:""; position:absolute; inset:-2%; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.06) 0%, transparent 60%), radial-gradient(ellipse at center, transparent 60%, var(--crt-vignette) 100%);
    opacity:.55; mix-blend-mode:screen;
  }
  
  /* Micro-jitter (optional) */
  @keyframes jitter {0%,100%{transform:translateY(0)}50%{transform:translateY(.25px)}}
  .terminal{animation:jitter 7s steps(1) infinite}
  
  /* ======= Head ======= */
  .header{position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start}
  pre.logo{margin:10px 0 16px; color:var(--c64-cyan); text-shadow:0 0 10px rgba(116,247,255,.3); font-size:22px; line-height:1.05;}
  .headtext .hline{margin:2px 0; white-space:pre; text-shadow:0 0 6px rgba(116,247,255,.35)}
  .motto{animation:mottoHue 18s linear infinite}
  @keyframes mottoHue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
  
  /* ======= Lines / Panels ======= */
  .line{white-space:pre-wrap; margin:2px 0; text-shadow:0 0 6px rgba(116,247,255,.35)}
  .ok{color:var(--c64-green)} .accent{color:var(--c64-purple)}
  .panel{position:relative; border:2px solid var(--c64-cyan); padding:12px; margin:14px 0}
  .panel h2,.panel h3{margin:6px 0 8px; font-size:1.2em; color:var(--c64-purple)}
  .panel p{margin:6px 0}
  
  /* ======= PETSCII-Frame (optional Deko, falls du willst)
  .petscii{position:absolute; inset:6px; pointer-events:none; z-index:1}
  .petscii::before,.petscii::after{content:""; position:absolute; left:0; right:0; height:2px; background:linear-gradient(to right, currentColor 0 6px, transparent 6px 12px); color:var(--c64-cyan); opacity:.7}
  .petscii::before{top:0}.petscii::after{bottom:0}
  .petscii i{position:absolute; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, currentColor 0 6px, transparent 6px 12px); color:var(--c64-cyan); opacity:.7}
  .petscii i:first-child{left:0}.petscii i:last-child{right:0}
  =========================================================== */
  
  /* ======= Tape Bar (OBEN FIX) ======= */
  .tape{
    position:fixed; top:0; left:0; right:0; height:26px; z-index:7;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.25));
    border-bottom:2px solid var(--c64-cyan);
    font-size:16px; text-shadow:0 0 6px rgba(116,247,255,.35); pointer-events:none;
  }
  .drive-led{position:absolute; left:10px; top:6px; width:12px; height:12px; border:2px solid var(--c64-cyan); border-radius:50%; box-shadow:0 0 10px rgba(116,247,255,.25) inset}
  .drive-led.on{background:var(--c64-orange); box-shadow:0 0 8px var(--c64-orange), 0 0 10px rgba(116,247,255,.25) inset}
  
  /* ======= Rain (deko) ======= */
  .rain{position:fixed; inset:0; pointer-events:none; z-index:1}
  .rain span{position:absolute; top:-2rem; font-size:18px; color:var(--c64-green); opacity:.85; text-shadow:0 0 8px rgba(127,255,115,.45); animation:fall linear infinite}
  @keyframes fall{to{transform:translateY(110vh)}}
  /* Beispiel-Positionen – optional mehr hinzufügen */
  .rain span:nth-child(1){left:5%; animation-duration:7s}
  .rain span:nth-child(2){left:12%; animation-duration:9s; animation-delay:1s}
  .rain span:nth-child(3){left:18%; animation-duration:8s; animation-delay:2s}
  .rain span:nth-child(4){left:24%; animation-duration:10s; animation-delay:.5s}
  .rain span:nth-child(5){left:31%; animation-duration:7.5s; animation-delay:1.5s}
  .rain span:nth-child(6){left:38%; animation-duration:9.5s; animation-delay:.8s}
  .rain span:nth-child(7){left:45%; animation-duration:8.2s; animation-delay:2.3s}
  .rain span:nth-child(8){left:52%; animation-duration:10.6s; animation-delay:1.1s}
  .rain span:nth-child(9){left:59%; animation-duration:8.8s; animation-delay:2.9s}
  .rain span:nth-child(10){left:66%; animation-duration:9.1s; animation-delay:.2s}
  
  /* ======= Buttons ======= */
  .btn-c64{
    border:2px solid var(--c64-cyan); background:transparent; color:var(--c64-cyan);
    font-family:inherit; font-size:20px; padding:6px 12px; text-transform:inherit; cursor:pointer;
    box-shadow:0 0 0 2px rgba(0,0,0,.35) inset; margin-right:8px
  }
  .btn-c64:hover{background:rgba(116,247,255,.08)}
  .btn-c64:active{transform:translateY(1px)}
  
  /* ======= Rounded (per Toggle) ======= */
  body.rounded .terminal{border-radius:var(--crt-curve)}
  body.rounded .panel{border-radius:var(--crt-curve); overflow:hidden}
  body.rounded .btn-c64{border-radius:calc(var(--crt-curve)/1.4)}
  body.rounded .tape{border-bottom-left-radius:var(--crt-curve); border-bottom-right-radius:var(--crt-curve)}
  
  /* ======= Overlays ======= */
  .overlay{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:10; text-align:center}
  .overlay .box{border:2px solid var(--c64-cyan); padding:18px 22px; color:var(--c64-cyan); background:rgba(0,0,0,.3)}
  .overlay .line{margin:6px 0}
  
  /* ======= Blink ======= */
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
  .pressstart{display:inline-block}
  
  /* ======= Mobile Tweaks ======= */
  @media screen and (max-width: 600px){
    body{font-size:14px; padding-top:24px;}
    .wrap{padding:16px 8px 140px}
    pre.logo{font-size:16px; line-height:1}
    .btn-c64{font-size:16px; padding:6px 10px}
    .tape{font-size:14px}
    .panel{padding:10px}
  }
  
  /* ======= Reduced Motion ======= */
  @media (prefers-reduced-motion: reduce){
    .rain span,.terminal{animation:none!important}
  }

  /* ======= Countdown ======= */
#countdown {
    font-size: 1.1em;
    letter-spacing: 1px;
  }
  
  /* ======= Party-Licht Overlay ======= */
  .party-light{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;               /* unter der Tape-Bar (z-index:7), über Content */
    mix-blend-mode: screen;
    opacity: 0;               /* per JS auf 1, wenn aktiv */
    transition: opacity .25s ease;
  }
  
  /* Flacker-Animation */
  @keyframes partyFlicker {
    0%   { background: radial-gradient(circle at 20% 30%, rgba(255,80,80,.25), transparent 40%), radial-gradient(circle at 80% 70%, rgba(80,160,255,.25), transparent 45%), radial-gradient(circle at 50% 50%, rgba(255,200,80,.2), transparent 50%); }
    20%  { background: radial-gradient(circle at 70% 20%, rgba(255,80,80,.33), transparent 38%), radial-gradient(circle at 25% 70%, rgba(80,255,160,.28), transparent 42%), radial-gradient(circle at 50% 50%, rgba(255,80,255,.25), transparent 55%); }
    40%  { background: radial-gradient(circle at 40% 60%, rgba(80,160,255,.35), transparent 40%), radial-gradient(circle at 60% 35%, rgba(255,200,80,.25), transparent 48%), radial-gradient(circle at 50% 50%, rgba(255,80,80,.2), transparent 55%); }
    60%  { background: radial-gradient(circle at 80% 40%, rgba(255,80,255,.3), transparent 42%), radial-gradient(circle at 20% 50%, rgba(80,255,160,.25), transparent 46%), radial-gradient(circle at 50% 50%, rgba(80,160,255,.25), transparent 50%); }
    80%  { background: radial-gradient(circle at 30% 80%, rgba(255,200,80,.3), transparent 43%), radial-gradient(circle at 75% 30%, rgba(255,80,80,.28), transparent 47%), radial-gradient(circle at 50% 50%, rgba(80,255,160,.22), transparent 52%); }
    100% { background: radial-gradient(circle at 20% 30%, rgba(255,80,80,.25), transparent 40%), radial-gradient(circle at 80% 70%, rgba(80,160,255,.25), transparent 45%), radial-gradient(circle at 50% 50%, rgba(255,200,80,.2), transparent 50%); }
  }
  
  .party-light.active{
    opacity: 1;
    animation: partyFlicker 1.2s steps(1) infinite;
  }
  
  /* Epilepsie-/Motion-Schutz */
  @media (prefers-reduced-motion: reduce){
    .party-light{ animation: none !important; }
  }
  
  /* ======= Zombie Runner ======= */
  .zombie {
    position: fixed;
    bottom: 14px;             /* über der HUD/unteren Kante */
    left: -10vw;              /* Start außerhalb */
    font-size: clamp(22px, 6vw, 44px);
    filter: drop-shadow(0 0 6px rgba(0,0,0,.6));
    z-index: 8;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
    transform: translateX(0);
  }
  .zombie.run { 
    animation: zombieRun linear forwards;
  }
  /* Basis-Animation – Dauer wird per JS dynamisch gesetzt */
  @keyframes zombieRun {
    from { transform: translateX(0); }
    to   { transform: translateX(120vw); }
  }
 
/* ==== Responsive Fix für Header / ASCII + Text ==== */

/* Grid robuster und mit weichem Gap */
.header{
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr; /* Logo-Spalte + flexibler Text */
  gap: clamp(8px, 2vw, 16px);
  align-items: start;
}

/* ASCII-Logo: skaliert, scrollt notfalls horizontal */
pre.logo{
  font-size: clamp(12px, 2.4vw, 22px);
  line-height: 1.05;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 10px 0 6px;
}

/* Textspalte darf schrumpfen und umbrechen */
.headtext{ min-width: 0; }
.headtext .hline{
  /* deine Desktop-Optik bleibt erhalten */
  /* auf Mobile ändern wir's unten per @media */
  overflow-wrap: anywhere; /* Notfallumbruch für lange Tokens */
}

/* Allgemein: lange Inhalte dürfen umbrechen */
.line, .panel { overflow-wrap: anywhere; }

/* Panels enger am Rand */
.wrap{ padding-left: clamp(12px, 4vw, 24px); padding-right: clamp(12px, 4vw, 24px); }

/* Terminal innen etwas luftiger auf kleineren Screens */
@media (max-width: 720px){
  /* Header stapeln: Logo oben, Text darunter */
  .header{ grid-template-columns: 1fr; }
  pre.logo{ justify-self: center; margin: 6px auto 0; }
  .headtext{ text-align: center; }

  /* Wichtig: Text darf jetzt umbrechen (vorher: white-space: pre) */
  .headtext .hline{ white-space: normal; }

  /* Terminal-Padding etwas reduzieren */
  .terminal{ padding: 14px; }

  /* Optional: Overscan-Rahmen dezenter, damit nichts „stößt“ */
  body::before{ opacity:.22; border-width:4px; inset:6px; }
}

/* Sehr kleine Geräte */
@media (max-width: 400px){
  pre.logo{ font-size: clamp(10px, 3.2vw, 16px); }
  .headtext .hline{ font-size: 0.95em; }
}

/* COUNTDOWN wie die anderen Panels (volle Breite, links) */
#countPanel{
  /* keine Sonderbreite, keine Zentrierung */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

#countPanel #countdown{
  /* wieder normal wie .line */
  font-size: 1em;
  letter-spacing: normal;
  text-align: left;
}

#countPanel #partyBtn{
  /* Button wieder „normal“ neben Text möglich */
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 8px 8px 0 0;
}

/* (Sicherheit) Terminal über Overscan halten */
.terminal{ position: relative; z-index: 1; }

/* ==== iPhone/Small screens: ASCII-Logo über dem Text ==== */
.header{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"logo text";
  gap:clamp(8px,2vw,16px);
  align-items:start;
}
pre.logo{ 
  grid-area:logo;
  display:block;
  max-width:100%;
  overflow-x:auto;            /* notfalls horizontal scrollen */
  -webkit-overflow-scrolling: touch;
  font-size:clamp(12px, 2.6vw, 22px);
  line-height:1.05;
  margin:10px 0 6px;
}
.headtext{ 
  grid-area:text; 
  min-width:0; 
}
.headtext .hline{
  overflow-wrap:anywhere;     /* lange Tokens umbrechen */
}

/* Breakpoint: stapeln */
@media (max-width: 820px){
  .header{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "logo"
      "text";
  }
  pre.logo{ margin:6px auto 0; justify-self:center; }
  .headtext{ text-align:center; }
  .headtext .hline{ white-space:normal !important; }
}

/* iOS-Safari: zusätzlicher „Hebel“, falls oben nicht greift */
@supports (-webkit-touch-callout: none){
  @media (max-width: 900px){
    .header{
      grid-template-columns:1fr !important;
      grid-template-areas:
        "logo"
        "text";
    }
    .headtext .hline{ white-space:normal !important; }
  }
}

/* Kleiner iOS-Textzoom-Fix */
html { -webkit-text-size-adjust: 100%; }


/* Projektstruktur:
  /halloween
    index.html
    style.css
    script.js
    manifest.webmanifest
    sw.js
    /icons
      icon-192.png
      icon-512.png
      apple-touch-icon.png
      favicon-32.png
      favicon-16.png
      og-image.png
*/