: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:2px solid var(--border);
  padding:0 16px;
  min-height:54px;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

.game-stats{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  width:100%;
  height:54px;
  gap:0;
  flex-wrap:nowrap;
}

.stats-group{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 20px 0 4px;
  border-right:1px solid var(--border);
  min-width:120px;
}

.centre-group button{
  padding:5px 9px;
}

.stat-item{
  font-size:14px;
  color:var(--muted);
  letter-spacing:0.01em;
}

.stat-item strong{
  color:var(--text);
  font-size:16px;
}

.stat-divider{
  color:var(--border);
  font-size:18px;
}

.centre-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:center;
  padding:0 24px;
}

.selected-display{
  background:#f0f4ff;
  border:1px solid #c7d4f5;
  border-radius:6px;
  padding:5px 16px;
  font-size:14px;
  color:var(--accent);
  font-weight:500;
  min-width:160px;
  text-align:center;
}

.header-buttons{
  display:flex;
  gap:6px;
  align-items:center;
  padding:0 4px 0 20px;
  border-left:1px solid var(--border);
  flex-shrink:0;
}

.header-buttons button,
.centre-group button{
  font-size:13px;
  padding:5px 12px;
  border-radius:6px;
  border:1px solid var(--border);
  background:white;
  color:var(--text);
  cursor:pointer;
  transition:background 0.15s, box-shadow 0.15s;
  font-family:inherit;
  white-space:nowrap;
}

.header-buttons button:hover,
.centre-group button:hover{
  background:var(--hover);
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
}

.centre-group button:disabled{
  opacity:0.4;
  cursor:default;
}

#reset-btn{
  background:#fff0f0;
  border-color:#fca5a5;
  color:#b91c1c;
}

#reset-btn:hover{
  background:#fee2e2;
}

#board{
  flex: 1;
  height: 100%;
  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;
}

/* Desktop layout with left commands panel */
.game-layout{
  display: flex;
  height: calc(100vh - 54px);
}

.commands-panel{
  width: 200px;
  flex-shrink: 0;
  padding: 20px 16px;
  background: #f8fafc;
  border-right: 1px solid var(--border);
  text-align: left;
  overflow-y: auto;
}

.commands-panel h3{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 14px 0;
}

.commands-panel ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.commands-panel li{
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

kbd{
  display: inline-block;
  background: #fff;
  border: 1px solid #d1d5db;
  border-bottom: 2px solid #9ca3af;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: inherit;
  color: #374151;
  margin-bottom: 2px;
}

@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{
    min-height:auto;
    padding:4px 8px;
  }
  .game-stats{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    height:auto;
    gap:4px;
    padding:4px 0;
    flex-wrap:unset;
  }
  .stats-group{
    grid-column:1;
    grid-row:1;
    border-right:none;
    padding:0;
    min-width:auto;
    justify-content:flex-start;
  }
  .header-buttons{
    grid-column:2;
    grid-row:1;
    border-left:none;
    padding:0;
    justify-content:flex-end;
  }
  .centre-group{
    grid-column:1 / -1;
    grid-row:2;
    gap:6px;
    padding:0;
    justify-content:center;
  }
  .selected-display{
    font-size:12px;
    padding:3px 8px;
    min-width:80px;
  }
  .header-buttons button,
  .centre-group button{
    font-size:11px;
    padding:3px 7px;
  }
  .commands-panel{
    display:none;
  }
  .game-layout{
    height:calc(100vh - 44px);
  }
}

.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;
}

.selected-held {
  outline: 3px solid #dc2626; /* red */
}

.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
========================= */

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: 16px;
  left: 16px;
  transform: none;
  z-index: 2000;
  font-size: 15px;
  padding: 10px 18px;
  background: #111;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#return-to-board:hover {
  background: #333;
}
#win-fade {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 1400;
  transition: opacity 1.2s ease;
}