/* Tetris 2 by Fuxoft — ZX Spectrum style */

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  height: calc(var(--vh, 1vh) * 100);
}
body {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  background: #000; color: #fff;
  font-family: 'Courier New', monospace;
}

/* ── Menu ─────────────────────────────────── */
#menu {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100vh; height: 100dvh; height: calc(var(--vh, 1vh) * 100); overflow-y: auto;
  background: #000011;
}
.menu-box {
  max-width: 440px; width: 92%; padding: 20px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.title {
  font-size: clamp(2rem, 10vw, 3.5rem);
  color: #FFFF00;
  text-shadow: 0 0 20px #FFFF0088;
  letter-spacing: 0.1em;
}
.credit { font-size: 0.7rem; color: #00FFFF; text-align: center; }
.hint   { font-size: 0.7rem; color: #888888; text-align: center; margin: 2px 0; }

.section { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.section h2 {
  font-size: 0.75rem; color: #00FFFF; letter-spacing: 0.1em;
  border-bottom: 1px solid #00FFFF44; padding-bottom: 3px; margin-bottom: 2px;
}
button {
  width: 100%; padding: 10px 14px;
  background: #000033; border: 2px solid #FF00FF;
  color: #fff; font-family: inherit; font-size: 0.95rem;
  letter-spacing: 0.05em; cursor: pointer;
  transition: background 0.1s, box-shadow 0.1s;
  user-select: none; touch-action: manipulation;
}
button:hover, button:active {
  background: #220022;
  box-shadow: 0 0 12px #FF00FF66;
}

.controls table { width: 100%; font-size: 0.7rem; border-collapse: collapse; }
.controls td { padding: 2px 5px; color: #888; }
.controls td:first-child { color: #00FFFF; font-weight: bold; width: 50%; }

/* ── Rebind screen ────────────────────────── */
#rebind-screen {
  display: none; align-items: center; justify-content: center;
  width: 100%; height: 100vh; height: 100dvh; height: calc(var(--vh, 1vh) * 100); overflow-y: auto;
  background: #000011; position: fixed; inset: 0; z-index: 10;
}
#rebind-screen.active { display: flex; }
#rebind-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
#rebind-table td { padding: 5px 4px; color: #888; vertical-align: middle; }
#rebind-table td:first-child { color: #00FFFF; width: 48%; }
.rebind-key {
  width: 100%; padding: 4px 8px; background: #000033;
  border: 2px solid #FF00FF66; color: #fff;
  font-family: inherit; font-size: 0.8rem; cursor: pointer;
  text-align: center; user-select: none;
}
.rebind-key.waiting {
  border-color: #FFFF00; color: #FFFF00; animation: blink 0.6s infinite;
}
@keyframes blink { 50% { opacity: 0.4; } }

/* ── Game screen ──────────────────────────── */
#game-screen {
  display: none; flex-direction: column;
  align-items: center; justify-content: flex-start;
  width: 100%; height: 100vh; height: 100dvh; height: calc(var(--vh, 1vh) * 100); background: #000;
  overflow: hidden;
}
#game-screen.active { display: flex; }

#game-canvas {
  display: block; touch-action: none;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
}

/* ── Tap overlay (stats screen / game over) ── */
#tap-overlay {
  display: none; position: absolute;
  inset: 0; z-index: 5; cursor: pointer;
  touch-action: manipulation;
}
#tap-overlay.active { display: block; }

/* ── Floating menu button ─────────────────── */
.tc-menu {
  position: absolute; top: 6px; right: 6px;
  width: auto; padding: 4px 10px; height: 28px;
  font-size: 0.75rem; border-radius: 4px;
  border: 2px solid #FF00FF66; background: #110011;
  color: #fff; font-family: inherit; cursor: pointer;
  touch-action: manipulation; user-select: none;
  display: none;
}
#game-screen.active .tc-menu { display: block; }

/* ── Touch controls ───────────────────────── */
#touch-controls {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 4px 6px; width: 100%;
  touch-action: none;
}
.touch-row { display: flex; justify-content: center; gap: 5px; }
.touch-row-action {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px; width: 100%;
}
.tc4-bomb { color: #FF6600; border-color: #FF660088; }
.tc4 {
  flex: 1 1 0; width: 100%; height: 48px; font-size: 1.2rem; padding: 0;
  border-radius: 4px; border: 2px solid #FF00FF66; background: #110011;
  color: #fff; font-family: inherit; cursor: pointer;
  touch-action: manipulation; user-select: none;
}

/* ── Fullscreen / add-to-homescreen button ─────── */
#btn-fullscreen {
  width: 100%; padding: 8px 14px;
  background: #000022; border: 2px solid #00FFFF44;
  color: #888; font-family: inherit; font-size: 0.8rem;
  letter-spacing: 0.05em; cursor: pointer;
  touch-action: manipulation; user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  #touch-controls { display: none; }
}
@media (orientation: landscape) and (max-height: 480px) {
  #touch-controls {
    flex-direction: row; flex-wrap: wrap;
    max-width: none; position: fixed; right: 4px; top: 50%;
    transform: translateY(-50%); width: auto;
  }
  .touch-row { flex-direction: column; }
  #game-screen { flex-direction: row; justify-content: center; }
}