:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#cfd8e3;
  --hover:#f3f4f6;
  --accent:#2563eb;
}

*{box-sizing:border-box}

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

body{
  font-family:Arial,Helvetica,sans-serif;
  background:#ffffff !important;
  color:var(--text);
  text-align:center;
}

header{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:6px 10px;
}

.game-stats{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  font-size:14px;
}

header button{
  font-size:13px;
  padding:3px 8px;
}

#board{
  height:calc(100vh - 68px);
  overflow:auto;
  padding:14px;
  background:#f6f8fb;
}

table{
  margin:0 auto;
  border-collapse:separate;
  border-spacing:6px;
}

td{
  padding:0;
  vertical-align:top;
}

button{
  font:inherit;
}

.bigbut{
  width:160px;
  height:80px;

  padding:6px;

  font-size:14px;
  line-height:1.1;

  white-space:normal;
  word-wrap:break-word;
  overflow-wrap:break-word;
  
  text-align:center;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  background:#ffffff;
  border:1px solid #d7dee6;
  border-radius:8px;

  box-shadow:0 1px 2px rgba(0,0,0,0.08);

  transition:
    transform .08s ease,
    box-shadow .08s ease,
    background .08s ease;
}

.bigbut:hover{
  background:#f7f9fc;
  box-shadow:0 3px 6px rgba(0,0,0,0.12);
}

.bigbut:active{
  transform:translateY(1px) scale(.98);
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}

.bigbut:disabled{
  cursor:default;
  opacity:1;
}

.success-glow{
  animation:successFlash .6s ease;
}

@keyframes successFlash{
  0%{box-shadow:0 0 0 rgba(34,197,94,0)}
  50%{box-shadow:0 0 18px rgba(34,197,94,.8)}
  100%{box-shadow:0 0 0 rgba(34,197,94,0)}
}

.shake{
  animation:shake .3s linear;
}

@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}

#win-banner{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:1001;
  opacity:0;
  pointer-events:none;
  font-size:42px;
  font-weight:700;
}

#win-banner span{
  display:inline-block;
  color:#ffd400;
  text-shadow:
    0 0 6px rgba(255,212,0,.8),
    0 0 12px rgba(255,136,0,.6);
}

#win-banner.win-active{
  opacity:1;
}

#win-banner.win-active span{
  animation:bounceLetters 1s infinite alternate;
}

@keyframes bounceLetters{
  from{transform:translateY(0)}
  to{transform:translateY(-10px)}
}

#starfield{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:500;
}

.star{
  position:absolute;
  font-size:22px;
  animation:starRise 4s linear forwards;
}

@keyframes starRise{
  0%{transform:translateY(50px);opacity:0}
  15%{opacity:1}
  100%{transform:translateY(-320px);opacity:0}
}

#crt-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:900;
}

#fireworks{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:950;
}

#board::-webkit-scrollbar{
  width:10px;
  height:10px;
}

#board::-webkit-scrollbar-thumb{
  background:#bcc7d3;
  border-radius:999px;
}

#board::-webkit-scrollbar-track{
  background:transparent;
}

.merge-count{
  color:#d11;
  font-weight:bold;
}

.selected-tile{
  outline:3px solid #2563eb;
  outline-offset:0;
}

.bigbut:disabled{
  background:#e5e7eb;
  color:#111827;
  cursor:default;
}

#crt-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:900;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.05),
      rgba(0,0,0,0.05) 2px,
      transparent 2px,
      transparent 4px
    );

  opacity:0;
  transition:opacity 0.5s ease;
}

#crt-overlay.active{
  opacity:1;
}

/* =========================
   MOBILE LAYOUT
========================= */

@media (max-width:600px){

  #board{
    padding:8px;
    overflow-x:auto;
  }

  table{
    border-spacing:4px;
    margin:0 auto;
    width:calc((84px * 4) + (4px * 3));
  }

  .bigbut{
    width:84px;
    height:70px;

    font-size:12px;
    padding:4px;

    line-height:1.05;
  }

  header{
    padding:4px 6px;
  }

  .game-stats{
    font-size:12px;
    gap:6px;
  }

  header button{
    font-size:11px;
    padding:2px 6px;
  }

}

  .game-stats{
    font-size:12px;
    gap:6px;
  }

  header button{
    font-size:11px;
    padding:2px 6px;
  }

}

button{
  touch-action: manipulation;
}

#tile-tooltip{
  position:fixed;
  max-width:260px;
  background:#111;
  color:#fff;
  padding:10px 12px;
  border-radius:8px;
  font-size:14px;
  line-height:1.3;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  z-index:2000;
}

#tile-tooltip.visible{
  opacity:1;
}

#dotdance{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1500;
}

#return-to-board{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:2000;

  font-size:22px;
  padding:14px 24px;

  background:#111;
  color:white;
  border:none;
  border-radius:8px;

  cursor:pointer;

  display:none;
}

#return-to-board:hover{
  background:#333;
}