/* KRENZTEK ASCII SKI — C64-Optik (Snow field white) */
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/vt323-latin.woff2") format("woff2");
}

:root{
  --c64-cyan:#74F7FF;
  --c64-green:#7FFF73;
  --c64-purple:#9A5CFF;
  --bg:#000;
  --fg:#072a2d; /* dunkles Petrol für guten Kontrast auf Weiß */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--c64-cyan);
  font-family:'VT323', ui-monospace, monospace;
  font-size:22px;
  display:grid;
  place-items:center;
}

.wrap{ width:min(960px, 96vw); padding:16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.hud{ display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:8px; }
.hud h1{ margin:0; font-size:48px; color:var(--c64-purple); letter-spacing:1px; }
.hud .stats{ display:flex; gap:20px; font-size:24px; color:var(--c64-green); flex-wrap:wrap; }

.stage{
  position:relative;
  display:grid;
  place-items:center;
  border:2px solid var(--c64-cyan);
  padding:10px;
  background:linear-gradient(180deg, rgba(116,247,255,.06), rgba(0,0,0,.12) 40%);
}

pre#screen{
  margin:0;
  width:min(96vw, 720px);
  max-width:100%;
  background:#f6fbff;
  color:var(--fg);
  border:2px solid var(--c64-cyan);
  box-shadow:0 0 24px rgba(116,247,255,.15);
  padding:12px;
  line-height:1.0;
  letter-spacing:1px;
  white-space:pre;
  overflow:hidden;
  font-size:20px;
  touch-action: none;
}

.overlay{
  position:absolute; inset:10px; z-index:5;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55);
  border:2px dashed var(--c64-cyan);
  color:var(--c64-green);
  text-align:center;
  padding:12px;
}
.overlay .title{ font-size:44px; margin-bottom:8px; color:var(--c64-purple); }
.overlay .small{ font-size:20px; opacity:.9; }

/* Wipeout: kompakter, deckender Textblock — Spielfeld bleibt sichtbar */
.overlay.is-wipeout{
  background:transparent;
  border:none;
  padding:8px;
}
.overlay.is-wipeout .msg{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  padding:18px 22px;
  background:#00010a;
  border:2px dashed var(--c64-cyan);
  color:var(--c64-green);
}
.overlay.is-wipeout .title{
  color:var(--c64-purple);
  text-shadow:
    -1px 0 #000,
     1px 0 #000,
     0 -1px #000,
     0  1px #000;
}
.overlay.is-wipeout .small{
  color:var(--c64-green);
  opacity:1;
  text-shadow:0 1px 0 #000;
}

.dpad{
  position:absolute;
  inset:auto 12px 12px auto;
  display:grid;
  grid-template-rows:auto auto auto;
  gap:6px;
  user-select:none;
  z-index:6;
}
.dpad .row{ display:grid; grid-template-columns:auto auto auto; gap:6px; }
.dpad .btn{
  font:inherit;
  background:rgba(0,0,0,.35);
  color:var(--c64-cyan);
  border:2px solid var(--c64-cyan);
  padding:8px 10px;
  min-width:44px; min-height:44px;
}
.dpad .btn:active{ background:rgba(116,247,255,.18); }

.tips{ color:#0e6971; opacity:.95; margin-top:8px; }
.legal-bar{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  font-size:18px;
}
.legal-bar a{ color:var(--c64-cyan); }
#installBtn{
  font:inherit;
  cursor:pointer;
  color:var(--c64-cyan);
  background:transparent;
  border:1px solid var(--c64-cyan);
  padding:4px 10px;
}
#installBtn[hidden]{ display:none !important; }

.page-frame{
  width:min(720px, 96vw);
  border:2px solid var(--c64-cyan);
  padding:16px;
  background:#090b12;
}
.page-frame h1, .page-frame h2{ color:var(--c64-purple); font-weight:400; }
.page-frame a{ color:var(--c64-cyan); }
.page-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.page-nav a{
  display:inline-block;
  border:1px solid var(--c64-cyan);
  color:var(--c64-cyan);
  text-decoration:none;
  padding:6px 10px;
}

@media (max-width:700px){
  .hud{ flex-direction:column; align-items:flex-start; }
  .hud h1{ font-size:40px; }
  .overlay .title{ font-size:36px; }
  .overlay.is-wipeout .msg{ padding:14px 12px; }
  .overlay.is-wipeout .title{ font-size:32px; line-height:1.15; }
  .overlay.is-wipeout .small{ font-size:16px; line-height:1.25; }
  pre#screen{ font-size:16px; letter-spacing:0; }
}

@media (max-width:400px){
  .overlay.is-wipeout .title{ font-size:26px; }
  .overlay.is-wipeout .small{ font-size:15px; }
}

@media (hover: hover) and (pointer: fine){
  .dpad{ display: none; }
}
@media (hover: none), (pointer: coarse), (max-width: 900px){
  .dpad{
    position: static;
    margin-top: 12px;
    justify-self: center;
  }
}