.matrix2048-app * { box-sizing: border-box; }
.matrix2048-app {
  --bg: #08110d;
  --panel: #0f1f18;
  --panel-2: #14271f;
  --grid: #1c3228;
  --empty: #20392d;
  --text: #d9ffe8;
  --muted: #9dd8b4;
  --accent: #67ff9a;
  --button: #183326;
  --button-hover: #214531;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  width: 100%;
  max-width: 980px;
  margin: 20px auto;
}
.matrix2048-desktop-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 18px;
  border-radius: 20px;
  background: radial-gradient(circle at top, #0e2018 0%, #08110d 45%, #050906 100%);
}
.matrix2048-sidecard {
  width: 290px;
  flex: 0 0 290px;
}
.matrix2048-brand h1, .matrix2048-mobile-brand h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(103,255,154,.18);
}
.matrix2048-brand p, .matrix2048-mobile-brand p {
  margin: 6px 0 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.matrix2048-mobile-header { display: none; }
.matrix2048-instructions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.matrix2048-instruction-box {
  background: linear-gradient(180deg, rgba(20,39,31,.95) 0%, rgba(13,27,21,.95) 100%);
  border: 1px solid rgba(103,255,154,.10);
  border-radius: 14px;
  padding: 12px;
}
.matrix2048-instruction-box h2 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--accent);
  text-transform: uppercase;
}
.matrix2048-instruction-box p, .matrix2048-tip {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.matrix2048-tip { margin-top: 14px; }
.matrix2048-gamewrap {
  width: 100%;
  max-width: 440px;
}
.matrix2048-scorebar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}
.matrix2048-score-box {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(180deg, #163025 0%, #10241c 100%);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid rgba(103,255,154,.12);
}
.matrix2048-score-box span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}
.matrix2048-score-box strong {
  display: block;
  font-size: 22px;
  margin-top: 4px;
  color: var(--accent);
}
#matrix2048-restart, .matrix2048-btn {
  border: 1px solid rgba(103,255,154,.12);
  background: var(--button);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.matrix2048-btn.primary { background: var(--button-hover); }
.matrix2048-board-shell {
  position: relative;
  background: linear-gradient(180deg, #13261e 0%, #0d1d17 100%);
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(103,255,154,.10);
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
  touch-action: none;
}
.matrix2048-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.matrix2048-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: var(--empty);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 28px;
  user-select: none;
}
.tile-0 { background: var(--empty); color: transparent; }
.tile-2 { background: #dfffea; color: #123121; }
.tile-4 { background: #b8ffd0; color: #123121; }
.tile-8 { background: #84f7b0; color: #10311f; }
.tile-16 { background: #52e58f; color: #082213; }
.tile-32 { background: #35cf79; color: #081b10; }
.tile-64 { background: #26b866; color: #05140b; }
.tile-128 { background: #17a95a; color: #f3fff7; font-size: 24px; }
.tile-256 { background: #10934d; color: #f3fff7; font-size: 24px; }
.tile-512 { background: #0d7d42; color: #f3fff7; font-size: 24px; }
.tile-1024 { background: #0a6636; color: #f3fff7; font-size: 20px; }
.tile-2048, .tile-super { background: linear-gradient(180deg, #7bffb2 0%, #2cff88 100%); color: #041109; font-size: 20px; box-shadow: 0 0 20px rgba(44,255,136,.28); }
.matrix2048-overlay {
  position: absolute;
  inset: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,9,6,.72);
  border-radius: 14px;
}
.matrix2048-overlay.hidden { display: none; }
.matrix2048-overlay-card {
  width: calc(100% - 24px);
  max-width: 320px;
  text-align: center;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,39,31,.98) 0%, rgba(13,27,21,.98) 100%);
  border: 1px solid rgba(103,255,154,.14);
}
.matrix2048-overlay-card h3 { margin: 0 0 8px; color: var(--accent); }
.matrix2048-overlay-card p { margin: 0 0 14px; color: var(--muted); }
.matrix2048-overlay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 840px) {
  .matrix2048-desktop-layout { display: block; padding: 14px; }
  .matrix2048-sidecard { display: none; }
  .matrix2048-mobile-header { display: block; margin-bottom: 12px; }
  .matrix2048-gamewrap { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .matrix2048-app { margin: 10px auto; }
  .matrix2048-scorebar { gap: 8px; }
  .matrix2048-score-box { padding: 8px 10px; }
  .matrix2048-cell { font-size: 24px; }
  .tile-128, .tile-256, .tile-512 { font-size: 20px; }
  .tile-1024, .tile-2048, .tile-super { font-size: 16px; }
}