/* ---------- Gunther Snake — Comic-Pixel-Look ---------- */

:root{
  --ink:      #14100e;
  --paper:    #fff6e2;
  --yellow:   #ffd23f;
  --orange:   #ff8c26;
  --red:      #e2402c;
  --blue:     #2d6cdf;
  --green:    #35a35c;
  --shadow:   6px 6px 0 var(--ink);
  --shadow-s: 4px 4px 0 var(--ink);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:"Press Start 2P", ui-monospace, monospace;
  color:var(--ink);
  background-color:var(--yellow);
  background-image:
    radial-gradient(var(--orange) 18%, transparent 19%),
    radial-gradient(var(--orange) 18%, transparent 19%);
  background-size:22px 22px;
  background-position:0 0, 11px 11px;
  display:flex;
  justify-content:center;
  padding:18px 12px 40px;
}

.page{ width:100%; max-width:760px; }

/* ---------- Kopfzeile ---------- */

.head{ text-align:center; margin:0 0 14px; }

.logo{
  font-family:"Bangers", Impact, sans-serif;
  font-size:clamp(38px, 10vw, 74px);
  line-height:.95;
  letter-spacing:2px;
  margin:0;
  transform:rotate(-2deg);
}
.logo-a{
  color:var(--red);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--ink);
}
.logo-b{
  color:var(--paper);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--ink);
  margin-left:.25em;
}
.tagline{
  font-size:9px;
  line-height:1.7;
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow-s);
  display:inline-block;
  padding:8px 12px;
  margin:8px 0 0;
  transform:rotate(.6deg);
}

/* ---------- HUD ---------- */

.hud{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin:0 0 12px;
}
.stat{
  flex:1;
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:var(--shadow-s);
  padding:8px 6px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stat-label{ font-size:8px; opacity:.65; }
.stat-value{ font-size:16px; }
.toggle{
  width:54px;
  font-size:20px;
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:var(--shadow-s);
  cursor:pointer;
  line-height:1;
}
.toggle[aria-pressed="false"]{ opacity:.45; }
.toggle:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }

/* ---------- Spielfeld ---------- */

.stage{ position:relative; }

.frame{
  position:relative;
  border:5px solid var(--ink);
  box-shadow:var(--shadow);
  background:#e9d9b6;
  line-height:0;
}

canvas{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  touch-action:none;
}

/* ---------- Overlays ---------- */

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(20,16,14,.72);
  line-height:1.6;
}
.overlay.hidden{ display:none; }

.card{
  background:var(--paper);
  border:5px solid var(--ink);
  box-shadow:var(--shadow);
  padding:18px 16px;
  max-width:420px;
  text-align:center;
  transform:rotate(-1deg);
}
.card p{ font-size:9px; line-height:1.9; margin:10px 0; }
.card b{ color:var(--red); }

.burst{
  font-family:"Bangers", Impact, sans-serif;
  font-size:clamp(26px, 6vw, 40px);
  line-height:1;
  margin:0;
  color:var(--yellow);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--ink);
  transform:rotate(-2deg);
}

.keys{ opacity:.8; }
kbd{
  font-family:inherit;
  font-size:8px;
  background:var(--ink);
  color:var(--paper);
  border-radius:3px;
  padding:3px 5px;
  margin:0 1px;
  display:inline-block;
}

.opt{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:8px;
  margin:14px 0;
  cursor:pointer;
}
.opt input{ width:16px; height:16px; accent-color:var(--red); cursor:pointer; }

.final{ font-size:12px !important; }

.btn{
  font-family:"Bangers", Impact, sans-serif;
  font-size:24px;
  letter-spacing:1px;
  background:var(--red);
  color:var(--paper);
  border:4px solid var(--ink);
  box-shadow:var(--shadow-s);
  padding:8px 22px 6px;
  margin-top:6px;
  cursor:pointer;
}
.btn:hover{ background:var(--orange); }
.btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }

/* ---------- Touch-Steuerkreuz ---------- */

.dpad{
  display:none;
  grid-template-columns:repeat(3, 62px);
  grid-template-rows:repeat(2, 62px);
  gap:8px;
  justify-content:center;
  margin:18px auto 0;
}
.dbtn{
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:var(--shadow-s);
  font-size:20px;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
}
.dbtn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); background:var(--yellow); }
.dbtn.up{    grid-area:1 / 2; }
.dbtn.left{  grid-area:2 / 1; }
.dbtn.down{  grid-area:2 / 2; }
.dbtn.right{ grid-area:2 / 3; }

body.touch .dpad{ display:grid; }

/* ---------- Fuß ---------- */

.foot{
  text-align:center;
  font-size:8px;
  line-height:2;
  margin-top:18px;
  opacity:.8;
}

@media (max-width:520px){
  .stat-value{ font-size:13px; }
  .stat-label{ font-size:7px; }
  .card p{ font-size:8px; }
  .foot{ display:none; }
}

/* ---------- Bestenliste & Namenseintrag ---------- */
/* Nachträglich für die Ressort-Z-Fassung: das Spiel kam ohne Online-Liste. */

.board{
  margin:16px 0 4px;
  border-top:3px solid var(--ink);
  padding-top:10px;
  text-align:left;
}
.board h3{
  font-family:"Bangers", Impact, sans-serif;
  font-size:18px;
  letter-spacing:1px;
  margin:0 0 8px;
  text-align:center;
}
.board ol{
  list-style:none;
  margin:0;
  padding:0;
  font-size:8px;
  line-height:1.9;
  counter-reset:rank;
}
.board li{
  display:flex;
  gap:8px;
  align-items:baseline;
  padding:2px 0;
}
.board li::before{
  counter-increment:rank;
  content:counter(rank) ".";
  width:22px;
  flex:none;
  opacity:.6;
}
.board li .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board li .sc{ font-weight:bold; }
.board li.me{ color:var(--red); }
.board .empty{ opacity:.7; justify-content:center; }
.board .empty::before{ content:none; }

.entry{
  display:flex;
  gap:8px;
  align-items:stretch;
  justify-content:center;
  margin:12px 0 4px;
}
.entry[hidden]{ display:none; }
.entry input{
  flex:1;
  min-width:0;
  font-family:inherit;
  font-size:9px;
  padding:8px;
  color:var(--ink);
  background:#fff;
  border:4px solid var(--ink);
  box-shadow:var(--shadow-s);
}
.btn.small{
  font-size:15px;
  padding:6px 12px 4px;
  margin-top:0;
}

.note{ font-size:8px !important; min-height:1.9em; }
.note.warn{ color:var(--red); }

.menu-line{ font-size:8px !important; margin:10px 0 0 !important; }
.menu-line a{ color:inherit; }