*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0A0A1A;
  --panel:    #12122A;
  --accent:   #00F0F0;
  --text:     #E0E0FF;
  --dim:      #6060AA;
  --btn-bg:   #1E1E3A;
  --btn-hover:#2A2A50;
  --danger:   #F00000;
  font-family: 'Courier New', Courier, monospace;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Layout ─────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;          /* dynamic viewport height handles mobile chrome */
}

#game-area {
  display: flex;
  flex: 1;
  min-height: 0;
  justify-content: center;
  align-items: stretch;
  gap: 0;
}

/* Left panel */
#panel-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  width: 90px;
  flex-shrink: 0;
}

/* Board */
#board-wrap {
  /* Main-axis (width): start from the ideal Tetris width and allow shrinking
     on narrow screens (e.g. mobile), but never grow past it. */
  flex: 0 1 calc((100dvh - 90px) / 2);
  min-width: 0;
  /* Cross-axis (height): viewport-relative value makes this *explicitly*
     definite so that children can resolve heights against it. Using
     align-items:stretch alone is not treated as definite by all browsers,
     which is what caused the board to collapse. max-height:100% clips it
     when the game-area is shorter (mobile with dpad visible). */
  height: calc(100dvh - 90px);
  max-height: 100%;
  position: relative;
  /* Column flex: canvas grows via flex:1, no height:100% percentage needed */
  display: flex;
  flex-direction: column;
}

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

/* Right panel */
#panel-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  width: 90px;
  flex-shrink: 0;
}

/* ── Level-up HUD animation ──────────────────────────────────── */
@keyframes levelUp {
  0%   { color: #fff; transform: scale(1.5); }
  60%  { color: var(--accent); transform: scale(1.1); }
  100% { color: var(--accent); transform: scale(1); }
}
.level-up { animation: levelUp 0.6s ease-out forwards; }

/* ── Stat boxes ─────────────────────────────────────────────── */
.stat-box {
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: 4px;
  padding: 6px 8px;
  text-align: center;
  width: 100%;
}
.stat-label {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.stat-value {
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 1px;
  display: block;
  margin-top: 2px;
}

/* ── Next-piece preview ──────────────────────────────────────── */
.next-label {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 1px;
  text-align: center;
}
#next-canvas,
#hold-canvas {
  width: 64px;
  height: 64px;
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: 4px;
  display: block;
  image-rendering: pixelated;
}

/* ── Buttons ─────────────────────────────────────────────────── */
button {
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--dim);
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 4px;
  width: 100%;
  cursor: pointer;
  transition: background 0.1s;
  touch-action: manipulation;
}
button:hover  { background: var(--btn-hover); }
button:active { filter: brightness(1.3); }
button:disabled { opacity: 0.4; cursor: default; }

/* ── Mobile D-pad ────────────────────────────────────────────── */
#dpad {
  display: none;
  flex-shrink: 0;
  padding: 6px 0;
  background: var(--panel);
  border-top: 1px solid var(--dim);
}

#dpad-inner {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 10px;
}

#dpad button {
  font-size: 16px;
  padding: 10px 0;
  width: auto;
  letter-spacing: 0;
}

/* ── AdSense banner ──────────────────────────────────────────── */
#ad-banner {
  flex-shrink: 0;
  min-height: 60px;
  max-height: 90px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--dim);
  overflow: hidden;
}

/* ── Sidebar ad (desktop only) ──────────────────────────────── */
#ad-sidebar {
  display: none;
  width: 320px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--dim);
  background: var(--panel);
}

@media (min-width: 900px) {
  #ad-sidebar { display: flex; }
}

/* ── Start Menu ──────────────────────────────────────────────── */
#start-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  /* subtle grid pattern for depth */
  background-image:
    linear-gradient(rgba(0,240,240,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,240,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
#start-menu[hidden] { display: none; }

#start-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 32px 24px;
  width: 100%;
  max-width: 320px;
}

#start-logo {
  text-align: center;
}

#start-title {
  font-size: clamp(36px, 10vw, 64px);
  color: var(--accent);
  letter-spacing: 6px;
  text-shadow: 0 0 20px var(--accent), 0 0 60px rgba(0,240,240,0.2);
  line-height: 1;
  margin: 0;
}

#start-tagline {
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 5px;
  margin-top: 8px;
}

#start-message {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 12px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 1px;
  line-height: 1.6;
}
#start-message[hidden] { display: none; }

#mode-card {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: 6px;
  padding: 14px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
  user-select: none;
}
#mode-card:hover  { border-color: var(--accent); }
#mode-card:active { filter: brightness(1.2); }

.mode-label {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mode-name {
  font-size: 20px;
  color: var(--text);
  letter-spacing: 4px;
  margin-top: 6px;
}

.mode-desc {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 2px;
  margin-top: 4px;
  text-transform: uppercase;
}

#start-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#start-actions button {
  font-size: 13px;
  padding: 14px;
  letter-spacing: 2px;
  width: 100%;
}

#btn-start {
  border-color: var(--accent);
  color: var(--accent);
  font-size: 16px !important;
  padding: 16px !important;
}

#start-footer {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 1px;
  text-align: center;
  opacity: 0.7;
}

/* ── Clear / combo announcement (inside board) ───────────────── */
#clear-announce {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
#clear-announce[hidden] { display: none; }

@keyframes clearFade {
  0%   { opacity: 1; transform: translateY(0)    scale(1.15); }
  60%  { opacity: 1; transform: translateY(-10px) scale(1);   }
  100% { opacity: 0; transform: translateY(-20px) scale(0.95); }
}
.clear-name {
  font-size: clamp(15px, 3vw, 22px);
  color: var(--accent);
  letter-spacing: 4px;
  text-shadow: 0 0 14px var(--accent);
  animation: clearFade 1.2s ease-out forwards;
}
.clear-combo {
  font-size: clamp(10px, 2vw, 13px);
  color: var(--text);
  letter-spacing: 2px;
  margin-top: 5px;
  opacity: 0.85;
  animation: clearFade 1.2s ease-out forwards;
}

/* ── Pause overlay (inside board, pause only) ────────────────── */
#overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#overlay[hidden] { display: none; }

#overlay-message {
  text-align: center;
  padding: 24px 32px;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 8px;
}
#overlay-message h2 {
  font-size: 28px;
  color: var(--accent);
  letter-spacing: 3px;
  margin-bottom: 8px;
}
#overlay-message p {
  font-size: 13px;
  color: var(--dim);
}
#btn-quit {
  margin-top: 16px;
  width: auto;
  padding: 8px 24px;
  color: var(--danger);
  border-color: var(--danger);
}

/* ── Name entry modal ────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 24px 28px;
  width: min(360px, 90vw);
  text-align: center;
}
.modal h3 {
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.modal p {
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 14px;
}

#name-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--dim);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 8px;
  margin-bottom: 14px;
  outline: none;
}
#name-input:focus { border-color: var(--accent); }
#name-input.input-error { border-color: var(--danger); }

.modal-buttons {
  display: flex;
  gap: 10px;
}
.modal-buttons button { flex: 1; font-size: 12px; padding: 8px; }
#name-submit { border-color: var(--accent); color: var(--accent); }

/* ── Leaderboard modal ──────────────────────────────────────── */
#lb-modal .modal { max-height: 80vh; overflow-y: auto; }
#lb-modal h3 { margin-bottom: 16px; }
#lb-close { width: auto; padding: 6px 16px; margin-top: 14px; }

.lb-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(96,96,170,0.3);
  font-size: 12px;
}
.lb-rank    { color: var(--dim); }
.lb-name    { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score   { color: var(--accent); letter-spacing: 1px; }
.lb-level   { color: var(--dim); font-size: 10px; }
.lb-version { color: var(--dim); font-size: 9px; opacity: 0.6; }

/* Countdown leaderboard row: rank name time version (no level column) */
.lb-row-countdown { grid-template-columns: 24px 1fr auto auto; }

/* ── Responsive: mobile ─────────────────────────────────────── */
@media (max-width: 500px) {
  #panel-left, #panel-right { width: 64px; padding: 4px 5px; }
  .stat-value { font-size: 12px; }
  button { font-size: 8px; padding: 5px 2px; }
  #next-canvas, #hold-canvas { width: 48px; height: 48px; }
  #dpad { display: flex; }
  #start-footer { display: none; }
  #start-menu-inner { gap: 20px; }
  #btn-start { font-size: 14px !important; padding: 14px !important; }
}

@media (max-height: 600px) {
  #dpad { padding: 3px 0; }
  #dpad button { padding: 7px 0; font-size: 14px; }
  #start-menu-inner { gap: 16px; padding: 16px; }
  #start-title { font-size: 32px; }
  #start-mode { padding: 10px 16px; }
  .mode-name { font-size: 16px; }
}