/* ===== Variablen ===== */
:root { --bg:#0e0f13; --card:#171923; --fg:#e8e8ea; --accent:#63b3ed; --muted:#9aa1ac; --good:#48bb78; --warn:#f6ad55; }

/* ===== Reset/Basis ===== */
* { box-sizing: border-box; }
html,body { height: 100%; }
body { margin:0; font-family: system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--fg); background: var(--bg); }

/* ===== Layout: Header/Footer/Main ===== */
.app-header, .app-footer { padding: 12px 16px; background:#0b0c10; border-bottom:1px solid #20222c; }
.app-footer { border-top:1px solid #20222c; border-bottom:0; color:var(--muted); }
.app-header h1 { margin:0; font-size:20px; }
.app-header nav a { color:var(--muted); text-decoration:none; margin-left:12px; }
.app-main { padding: 16px; display:flex; justify-content:center; }

/* ===== Game-Layout ===== */
.game-wrap { width:100%; max-width:680px; display:grid; gap:14px; }
.board-wrap { background: var(--card); border:1px solid #20222c; border-radius:10px; padding:12px; }
#snake-canvas { width:100%; max-width:100%; display:block; aspect-ratio:1/1; background:#0b0d14; border-radius:8px; border:1px solid #1f2330; }

/* ===== HUD ===== */
.hud { display:flex; justify-content:space-between; margin-top:10px; color:var(--muted); }
.score span { color: var(--good); font-weight:600; }
.status { color: var(--accent); }

/* ===== Controls & Buttons ===== */
.controls { display:grid; gap:10px; justify-items:center; }
.control-row { display:flex; gap:10px; justify-content:center; align-items:center; }
.control-row .gap { width:48px; }

.btn { -webkit-tap-highlight-color: transparent; outline:0; border:1px solid #2a2f3d; background:#121521; color:var(--fg); padding:12px 16px; border-radius:10px; font-size:18px; min-width:64px; min-height:48px; cursor:pointer; }
.btn:active { transform: translateY(1px); }
.btn.ctrl { font-size:22px; min-width:60px; min-height:60px; }
.btn.action { background:#172033; border-color:#24314a; }
#btn-start { color: #c3f3d1; border-color:#2e4a3a; background:#0f1b16; }
#btn-pause { color: #ffe0b2; border-color:#53402b; background:#241a0e; }

/* ===== Hilfe ===== */
.help { color:var(--muted); }
.help summary { cursor:pointer; }

/* ===== Responsive (≥720px) ===== */
@media (min-width: 720px) {
  .game-wrap { grid-template-columns: 1fr 220px; align-items:start; }
  .controls { justify-items:stretch; }
}

/* ===== Spielername (Snake/Generisch) ===== */
.player-name { display:grid; gap:6px; }
.player-name label { font-size:12px; color:var(--muted); }
.name-row { display:flex; gap:8px; }
#player-name {
  flex:1; min-height:40px; border-radius:8px; border:1px solid #2a2f3d;
  background:#0f1220; color:var(--fg); padding:8px 10px; outline:none;
}

/* ===== Karten & Highscore (Block 1) ===== */
.card { background:#141827; border:1px solid #222638; border-radius:10px; padding:10px; }
.highscores h3 { margin:0 0 6px 0; font-size:16px; }
.hs-list { margin:0; padding-left:18px; }
.hs-list li { margin:2px 0; color:#d9dbe1; }
.hs-list li .me { color:var(--good); font-weight:600; }
.muted { color:var(--muted); }

/* ===== Highscore (List Style) ===== */
.hs-list{
  list-style: decimal;
  list-style-position: outside;
  padding-left: 18px;
  margin: 0;
}

/* ===== Home-Karten ===== */
.home .grid { display:grid; gap:14px; grid-template-columns: 1fr; }
.card-link { text-decoration:none; }
.card { background:#141827; border:1px solid #222638; border-radius:10px; padding:14px; color:#e8e8ea; }
.card h2 { margin:0 0 6px 0; }
@media (min-width:720px){ .home .grid { grid-template-columns: 1fr 1fr; } }

/* ===== Touch ===== */
button, .btn, a, [role="button"] { touch-action: manipulation; }

/* ===== Global Touch (Double-Tap vermeiden) ===== */
html, body { touch-action: manipulation; }

/* ===== Board-Extras ===== */
.board-wrap { position: relative; }

/* ===== Tetris: Next-Preview ===== */
.next-inline{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 110px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #222638;
}
.next-inline .title{
  margin: 0 0 4px 0;
  font-size: 12px;
  color: #9aa1ac;
  text-align: center;
}
#tz-next{
  display: block;
  width: 100%;
  height: auto;
  background: #0b0d14;
}

/* ===== Tetris: mobil (≤640px) ===== */
@media (max-width: 640px){
  .next-inline{
    position: static;
    margin: 8px 0 0 auto;
    width: 96px;
  }
}

/* ===== Tetris: kompakte HUD rechts ===== */
.hud-compact{
  margin-top: 8px;
  display: flex;
  flex-direction: column;   /* untereinander */
  gap: 6px;                 /* Abstand zwischen Zeilen */
  font-size: 12px;
  color: #c9ced9;
}
.hud-compact > div{
  display: flex;
  justify-content: space-between; /* Label links, Wert rechts */
}
.hud-compact .status{
  justify-content: center;  /* Status mittig */
  color: #9aa1ac;
}

/* ===== Tetris: Name ===== */
.tz-name { display:grid; gap:6px; }
.tz-name label { font-size:12px; color:var(--muted); }
.name-row { display:flex; gap:8px; }
#tz-name {
  flex:1; min-height:40px; border-radius:8px; border:1px solid #2a2f3d;
  background:#0f1220; color:var(--fg); padding:8px 10px; outline:none;
}

/* ===== BrickWall: Name ===== */
.bw-name { display:grid; gap:6px; }
.bw-name label { font-size:12px; color:var(--muted); }
.name-row { display:flex; gap:8px; }
#bw-name {
  flex:1; min-height:40px; border-radius:8px; border:1px solid #2a2f3d;
  background:#0f1220; color:var(--fg); padding:8px 10px; outline:none;
}


/* Sticky Footer */
html { height:auto; min-height:100%; }
body{
  min-height:100dvh; /* dynamische Viewport-Höhe (mobil korrekt) */
  display:flex;
  flex-direction:column;
}
.app-main{ flex:1 0 auto; }
.app-footer{ margin-top:auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand .logo {
  height: 40px;
  width: auto;
  display: block;
  border-radius: 4px;
}