/* ============================================================
   Tetris by TrendtVision — Gameboy-Reskin
   Ein Gameboy-Gerät (fixes Seitenverhältnis), Innenleben in %.
   Skaliert monolithisch -> responsive Desktop + Mobile, kein Clipping.
   ============================================================ */

:root {
  --orange: #f07f3e;
  --orange-d: #ef9a2e;
  --maroon: #592a28;       /* Sidebar-Pillar */
  --maroon-d: #451312;     /* Rahmen dunkel */
  --ink: #2b1a17;
  --beige: #fde4c9;        /* Spielfeld / LCD */
  --beige-2: #efe4d6;
  --gray: #4a4a4a;         /* Bedienelemente */
  --gray-l: #6a6a6a;
  --green: #1ea049;
  --red: #d8442f;
  --muted: #8a6f63;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  --font: "OCR A Std", "lores-12", "Courier New", monospace;
}

* {
  font-family: var(--font);
  font-weight: 700;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body { height: 100%; margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   GAMEBOY-GERÄT
   ============================================================ */
.device {
  position: relative;
  aspect-ratio: 402 / 874;
  height: min(100dvh, calc(100vw * 874 / 402));
  margin: 0 auto;
  background: url("../assets/gameboy/gameboy.png") center / 100% 100% no-repeat;
  container-type: size;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.18));
}
body[data-state="login"] .device { display: none; }

/* LCD-Fenster (transparente Region im Gerätebild) */
.device__screen {
  position: absolute;
  left: 12.94%;
  top: 14.30%;
  width: 74.13%;
  height: 29.75%;
  background: var(--maroon);
  overflow: hidden;
}

/* Spielfeld (links) + Sidebar (rechts) */
.screen-game {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  background: var(--maroon);
}
/* Pfeiler = linke/rechte Schacht-Wand des Boards (Asset) */
.pfeiler {
  flex: 0 0 auto;
  width: 2.6%;
  height: 100%;
  background: url("../assets/gameboy/pfeiler.png") center / 100% 100% no-repeat;
}
.playfield {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 10 / 13;     /* exakt Board-Form -> Board füllt ohne Spalt */
  background: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
}
#board { display: block; }

.sidebar {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--maroon);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.8cqh 0;
  gap: 4%;
}
/* Panels breiten-getrieben -> Seitenverhältnis der Assets bleibt erhalten
   (NEXT quadratisch), horizontal zentriert, vertikal gleichmäßig verteilt. */
.panel {
  position: relative;
  flex: 0 0 auto;
  width: 90%;
}
/* SCORE über die volle Spaltenbreite; LEVEL/LINES/NEXT gleich breit & kleiner;
   NEXT nach unten geschoben (wie Vorlage). */
.panel-score { width: 100%; }
.panel-level, .panel-lines, .panel-next { width: 72%; }
.panel-next { margin-top: auto; margin-bottom: 1cqh; }
.panel-img { display: block; width: 100%; height: auto; }
.panel-value {
  position: absolute;
  left: 0; right: 0;
  bottom: auto;
  transform: translateY(-50%);
  text-align: center;
  color: var(--ink);
  font-size: 5cqw;
  line-height: 1;
  letter-spacing: 0.04em;
}
.value-score { top: 79%; font-size: 3.4cqw; }
.value-level, .value-lines { top: 64%; }
#next-canvas { position: absolute; inset: 0; }

/* ============================================================
   SCREEN-OVERLAYS (Start / Game Over)
   ============================================================ */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqh;
  padding: 2%;
  text-align: center;
  background: rgba(253, 228, 201, 0.95);
}
.btn-img {
  display: block;
  width: 46%;
  max-width: 170px;
  height: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}
.continue-text { width: 20%; max-width: 66px; height: auto; }
.player-tag {
  font-size: 5cqw;
  color: var(--maroon-d);
  letter-spacing: 0.05em;
}
.final-stats { display: flex; gap: 6cqw; }
.final-stats div { display: flex; flex-direction: column; gap: 0.2cqh; }
.final-stats .hud-label { font-size: 2.8cqw; color: var(--muted); letter-spacing: 0.12em; }
.final-stats strong { font-size: 5cqw; color: var(--ink); }
.verified-note { font-size: 2.8cqw; font-weight: 400; min-height: 1.2em; color: var(--muted); max-width: 96%; margin: 0; }
.verified-note.ok { color: var(--green); font-weight: 700; }
.verified-note.error { color: var(--red); font-weight: 700; }

/* ============================================================
   BEDIENELEMENTE (auf dem Korpus)
   ============================================================ */
.controls { position: absolute; inset: 0; pointer-events: none; }
.controls > * { pointer-events: auto; }

/* D-Pad */
.dpad {
  position: absolute;
  left: 13%; top: 61%;
  width: 24%; aspect-ratio: 1;
}
.dpad-btn, .dpad-center {
  position: absolute;
  background: var(--gray);
  border: none;
  border-radius: 3px;
}
.dpad-up    { left: 34%; top: 0;    width: 32%; height: 34%; border-radius: 4px 4px 0 0; }
.dpad-down  { left: 34%; bottom: 0; width: 32%; height: 34%; border-radius: 0 0 4px 4px; }
.dpad-left  { left: 0;   top: 34%;  width: 34%; height: 32%; border-radius: 4px 0 0 4px; }
.dpad-right { right: 0;  top: 34%;  width: 34%; height: 32%; border-radius: 0 4px 4px 0; }
.dpad-center { left: 33%; top: 33%; width: 34%; height: 34%; }
.dpad-center::after {
  content: ""; position: absolute; inset: 30%;
  border: 0.4cqw solid var(--gray-l); border-radius: 50%;
}
.dpad-btn:active { background: var(--gray-l); }

/* A / B */
.ab {
  position: absolute;
  width: 13%; aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: var(--gray);
  color: rgba(255,255,255,0.85);
  font-size: 5cqw;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 -0.6cqw 0 rgba(0,0,0,0.25);
}
.ab-a { left: 77.5%; top: 63%; }
.ab-b { left: 58.4%; top: 68.5%; }
.ab:active { background: var(--gray-l); box-shadow: inset 0 0.4cqw 0 rgba(0,0,0,0.25); }

/* SELECT / START */
.pills {
  position: absolute;
  left: 28%; top: 82%;
  width: 44%;
  display: flex;
  justify-content: space-between;
}
.pill {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.8cqh;
  color: rgba(255,255,255,0.8);
}
.pill::before {
  content: "";
  width: 11cqw; height: 2.4cqw;
  background: var(--gray);
  border-radius: 2cqw;
}
.pill span { font-size: 3cqw; letter-spacing: 0.1em; }
.pill:active::before { background: var(--gray-l); }

/* ============================================================
   LOGIN
   ============================================================ */
.login-form {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--beige);
  border: 3px solid var(--maroon-d);
  box-shadow: var(--shadow);
  z-index: 60;
}
body:not([data-state="login"]) .login-form { display: none; }
.logo { width: 56%; height: auto; margin-bottom: 18px; }
#email-page, #username-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-input {
  width: 100%;
  padding: 12px;
  font-size: 1em;
  text-align: center;
  letter-spacing: 0.04em;
  border: 2px solid var(--maroon-d);
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240,127,62,.28); }
.login-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,68,47,.2); }
.terms-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 4px;
  font-size: 0.78em;
  font-weight: 400;
  white-space: nowrap;
  color: var(--ink);
}
.terms-container input[type="checkbox"] { flex: 0 0 auto; }
.terms-container a { color: var(--orange-d); }
.error-message {
  color: var(--red);
  font-size: 0.8em;
  margin-top: 12px;
  display: none;
  font-weight: 400;
}

/* Text-Buttons im Stil der gelieferten Button-Grafiken (start-game/try-again):
   heller Kasten, dunkelmaroon Doppelrahmen, schwarzer Text. */
.text-button {
  margin: 16px auto 0;
  padding: 11px 22px;
  background: #e6e3dd;
  color: #000;
  border: 3px solid #3a1b1a;
  box-shadow: 0 0 0 3px #e6e3dd;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.text-button:hover { background: #d9d5cc; }
.text-button:active { transform: translateY(1px); }
.text-button:disabled { opacity: 0.5; cursor: default; }
.text-button--ghost {
  font-size: 2.8cqw;
  padding: 1cqh 4%;
  margin: 0;
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.leaderboard {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 20px;
  background: var(--beige);
  border: 3px solid var(--maroon-d);
  box-shadow: var(--shadow);
  z-index: 50;
}
.board-title { font-size: clamp(1.2em, 5vw, 2em); margin: 6px 0 10px; letter-spacing: 0.08em; color: var(--maroon-d); }
.unlock-status { font-size: 0.84em; color: var(--muted); margin-bottom: 14px; text-align: center; }
.unlock-status.unlocked { color: var(--green); font-size: 1em; }
.progress-container { width: 100%; }
.progress-percentage {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8em;
  margin-bottom: 6px;
}
.points-value { color: var(--green); }
.progress-bar {
  width: 100%;
  height: 16px;
  background: #e6dccd;
  border: 2px solid var(--maroon-d);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-d));
  transition: width 0.5s ease-in-out;
}
.separator-line { width: 100%; border-top: 3px solid var(--maroon-d); margin: 22px 0 14px; }
#leaderboard-list { list-style: none; padding: 0; margin: 0; width: 100%; }
#leaderboard-list li {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.92em;
  margin: 4px 0;
}
#leaderboard-list li:nth-child(odd) { background: rgba(89,42,40,0.06); }
#leaderboard-list li.highlight { background: #f6d9bf; outline: 2px solid var(--orange); }
#leaderboard-list .rank { color: var(--muted); }
#leaderboard-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#leaderboard-list .score { color: var(--orange-d); }
.your-position { margin-top: 12px; font-size: 0.82em; color: var(--muted); display: none; }

/* ============================================================
   MODALS / INFO
   ============================================================ */
.modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.5); }
.modal-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  background: var(--beige);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 3px solid var(--maroon-d);
}
.modal-content iframe { width: 100%; height: 300px; border: 1px solid #ccc; }
.close { float: right; font-size: 28px; color: var(--muted); cursor: pointer; line-height: 1; }
.close:hover { color: var(--ink); }

body.modal-open .device,
body.modal-open #info-circle { filter: blur(4px); pointer-events: none; }

.info-circle {
  position: fixed;
  bottom: 18px; left: 18px;
  width: 30px; height: 30px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  z-index: 40;
}
.info-circle svg { width: 100%; height: 100%; fill: currentColor; }
.modal2 {
  display: none;
  position: fixed;
  bottom: 56px; left: 18px;
  width: 210px;
  background: var(--beige);
  border: 2px solid var(--maroon-d);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 41;
}
.modal2.show { display: block; opacity: 1; transform: translateY(0); }
.modal-content2 { padding: 12px 14px; position: relative; }
.modal-content2 h2 { margin: 0 0 8px; color: var(--muted); font-size: 1em; }
.modal-content2 ul { list-style: none; padding: 0; margin: 0; }
.modal-content2 li { margin: 6px 0; }
.modal-content2 a { color: var(--ink); text-decoration: none; font-weight: 400; }
.modal-content2 a:hover { text-decoration: underline; }
.close-button2 { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--orange); cursor: pointer; font-size: 14px; }