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

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Game Frame ---- */
.game-frame {
  border: 3px solid;
  border-color: var(--sz-color-button-highlight) var(--sz-color-button-shadow) var(--sz-color-button-shadow) var(--sz-color-button-highlight);
  margin: 4px;
  padding: 5px;
  background: var(--sz-color-button-face);
  /* keeps its frame around the whole game when a small window scales it down */
  width: max-content;
}

.game-layout {
  display: flex;
  gap: 8px;
}

/* ---- Board ---- */
.board-border {
  border: 3px solid;
  border-color: var(--sz-color-button-shadow) var(--sz-color-button-highlight) var(--sz-color-button-highlight) var(--sz-color-button-shadow);
}

.board {
  display: grid;
  grid-template-columns: repeat(10, 20px);
  grid-template-rows: repeat(20, 20px);
  background: #000;
  line-height: 0;
}

.board-cell {
  width: 20px;
  height: 20px;
  border: 1px solid #111;
  background: #000;
}

.board-cell.filled {
  border: 2px outset;
}

.board-cell.ghost {
  border: 1px solid;
  background: transparent !important;
  opacity: 0.3;
}

.board-cell.clearing {
  animation: clear-sparkle 0.2s ease-in-out, clear-dissolve 0.3s 0.15s ease-out forwards;
}

@keyframes clear-sparkle {
  0% { background: #fff; filter: brightness(2); }
  25% { filter: brightness(1); }
  50% { background: #fff; filter: brightness(2); }
  75% { filter: brightness(1); }
  100% { background: #fff; filter: brightness(1.5); }
}

@keyframes clear-dissolve {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.3); opacity: 0; }
}

/* Piece lock flash */
.board-cell.just-locked {
  animation: lock-glow 0.2s ease-out;
}

@keyframes lock-glow {
  0% { filter: brightness(2) drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}

/* Screen shake */
.board-border.shaking-light {
  animation: shake-light 80ms ease-out;
}

.board-border.shaking-medium {
  animation: shake-medium 100ms ease-out;
}

.board-border.shaking-heavy {
  animation: shake-heavy 150ms ease-out;
}

@keyframes shake-light {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, 0); }
  75% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes shake-medium {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes shake-heavy {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-3px, 2px); }
  30% { transform: translate(3px, -2px); }
  45% { transform: translate(-2px, 3px); }
  60% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
}

/* Score popup */
.score-popup {
  position: absolute;
  pointer-events: none;
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: bold;
  font-size: 14px;
  color: #ff0;
  text-shadow: 1px 1px 2px #000, 0 0 6px rgba(255, 255, 0, 0.5);
  z-index: 50;
  animation: float-up 1s ease-out forwards;
  white-space: nowrap;
}

.score-popup.tetris {
  font-size: 18px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
  text-shadow: none;
}

@keyframes float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-20px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.9); }
}

/* Line clear particles */
.clear-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 40;
}

/* Level up effect */
.led-display.level-flash {
  animation: level-pulse 0.6s ease-out;
}

@keyframes level-pulse {
  0% { color: #fff; background: #330; }
  30% { color: #ff0; background: #440; }
  60% { color: #f00; background: #000; }
  100% { color: #f00; background: #000; }
}

.level-up-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 8px #ff0, 0 0 16px #f80, 2px 2px 4px #000;
  z-index: 60;
  pointer-events: none;
  animation: level-up-appear 1.2s ease-out forwards;
  white-space: nowrap;
}

@keyframes level-up-appear {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  30% { transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(0.9); }
}

.board-border.level-border-pulse {
  animation: border-color-pulse 0.6s ease-out;
}

@keyframes border-color-pulse {
  0% { border-color: #ff0 #ff0 #ff0 #ff0; }
  50% { border-color: #f80 #f80 #f80 #f80; }
  100% { border-color: var(--sz-color-button-shadow) var(--sz-color-button-highlight) var(--sz-color-button-highlight) var(--sz-color-button-shadow); }
}

/* Piece colors with 3D borders */
.piece-I { background: #00f0f0; border-color: #60ffff #009090 #009090 #60ffff; }
.piece-O { background: #f0f000; border-color: #ffff60 #909000 #909000 #ffff60; }
.piece-T { background: #a000f0; border-color: #d060ff #600090 #600090 #d060ff; }
.piece-S { background: #00f000; border-color: #60ff60 #009000 #009000 #60ff60; }
.piece-Z { background: #f00000; border-color: #ff6060 #900000 #900000 #ff6060; }
.piece-J { background: #0000f0; border-color: #6060ff #000090 #000090 #6060ff; }
.piece-L { background: #f0a000; border-color: #ffd060 #906000 #906000 #ffd060; }

/* ---- Side Panel ---- */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 100px;
}

.panel-box {
  border: 2px solid;
  border-color: var(--sz-color-button-shadow) var(--sz-color-button-highlight) var(--sz-color-button-highlight) var(--sz-color-button-shadow);
  padding: 4px;
  background: var(--sz-color-button-face);
}

.panel-label {
  font-size: 10px;
  font-weight: bold;
  color: var(--sz-color-menu-text);
  margin-bottom: 3px;
  text-align: center;
}

/* LED-style display */
.led-display {
  background: #000;
  color: #f00;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 4px;
  border: 1px solid;
  border-color: var(--sz-color-button-shadow) var(--sz-color-button-highlight) var(--sz-color-button-highlight) var(--sz-color-button-shadow);
  text-align: right;
  line-height: 1.2;
  min-width: 80px;
}

/* Next piece preview and hold slot */
.preview-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #000;
  border: 1px solid;
  border-color: var(--sz-color-button-shadow) var(--sz-color-button-highlight) var(--sz-color-button-highlight) var(--sz-color-button-shadow);
  padding: 4px 0;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 16px);
  grid-template-rows: repeat(2, 16px);
  background: #000;
  margin: 0 auto;
}

.preview-grid.preview-first {
  margin-bottom: 4px;
}

.preview-grid.preview-later {
  grid-template-columns: repeat(4, 12px);
  grid-template-rows: repeat(2, 12px);
  opacity: 0.85;
}

.preview-cell {
  width: 16px;
  height: 16px;
}

.preview-later .preview-cell {
  width: 12px;
  height: 12px;
}

.hold-panel {
  min-width: 82px;
}

.hold-box {
  cursor: pointer;
  touch-action: manipulation;
}

.hold-box.hold-used .preview-grid {
  opacity: 0.35;
  filter: grayscale(0.8);
}

/* Line clear flash */
.clear-flash {
  position: absolute;
  left: 0;
  width: 200px;
  height: 20px;
  pointer-events: none;
  z-index: 40;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95) 50%, rgba(255,255,255,0));
  animation: clear-sweep 0.45s ease-out forwards;
}

@keyframes clear-sweep {
  0% { transform: scaleX(0.1); opacity: 1; }
  40% { transform: scaleX(1.1); opacity: 1; }
  100% { transform: scaleX(1.3) scaleY(0.2); opacity: 0; }
}

.tetris-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 39;
  background: radial-gradient(circle, rgba(255,255,200,0.55), rgba(0,255,255,0.15) 70%, transparent);
  animation: tetris-flash 0.5s ease-out forwards;
}

@keyframes tetris-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

.preview-cell.filled {
  border: 2px outset;
}

/* ---- Overlays ---- */
.game-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.game-overlay.visible {
  display: flex;
}

.overlay-text {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000;
  text-align: center;
  line-height: 1.6;
}

.overlay-subtext {
  color: #ccc;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

.overlay-score {
  color: #ff0;
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
}

.board-wrapper {
  position: relative;
}

.dialog-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---- High Scores Table ---- */
.high-scores-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
  font-size: 11px;
}

.high-scores-table th {
  text-align: left;
  padding: 2px 6px;
  font-weight: bold;
  border-bottom: 1px solid var(--sz-color-button-shadow);
}

.high-scores-table td {
  padding: 2px 6px;
}

.high-scores-table td:nth-child(1) {
  text-align: center;
  width: 24px;
}

.high-scores-table td:nth-child(2) {
  text-align: right;
  font-family: 'Consolas', 'Courier New', monospace;
}

.high-scores-table td:nth-child(3) {
  text-align: right;
  font-size: 10px;
  color: var(--sz-color-button-shadow);
}

/* ---- Controls Info ---- */
.controls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.controls-table td {
  padding: 2px 6px;
}

.controls-table td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 90px;
}