/* KRENZTEK SNAKE — C64-Optik */
@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:var(--c64-cyan);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  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); }

.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%);
}

canvas#game{
  width:min(96vw, 880px);
  height:auto;
  image-rendering: pixelated;
  background: #001a1c;
  border:2px solid var(--c64-cyan);
  box-shadow:0 0 24px rgba(116,247,255,.15);
  touch-action: none;
}

.overlay{
  position:absolute; inset:10px;
  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; }

.dpad{
  position:absolute;
  inset:auto 12px 12px auto;
  display:grid;
  grid-template-rows:auto auto auto;
  gap:6px;
  user-select:none;
}
.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); }
.dpad #btnPause{ min-width:66px; }

.tips{ color:#9ae7ec; opacity:.9; 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; }
}

/* Desktop (Maus): D-Pad ausblenden */
@media (hover: hover) and (pointer: fine){
  .dpad{ display: none; }
}

/* Touch / kleine Screens: D-Pad unter dem Canvas anzeigen (kein Overlay) */
@media (hover: none), (pointer: coarse), (max-width: 900px){
  .dpad{
    position: static;           /* nicht mehr absolut */
    margin-top: 12px;           /* Abstand unterhalb des Canvas */
    justify-self: center;       /* zentrieren in der Stage */
  }
  .dpad .row{ display:grid; grid-template-columns:auto auto auto; gap:6px; }
}