:root {
  --bg: #1b1b1b;
  --tile: #333;
  --tile-text: #fff;
  --accent: #f7df1e;
  --grid: #555;
  --panel-width: 110px;
}
* { box-sizing: border-box; user-select: none; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
  color: var(--tile-text);
  font-family: system-ui, sans-serif;
}

/* ───── Layout ───── */
#left-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.5rem; }
#hand-panel { width: 100%; max-width: var(--panel-width); background: #111; padding: 0.5rem; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
canvas { border: 2px solid var(--grid); background: #222; max-width: 100%; height: auto; }

/* ───── Alphabet tray ───── */
#alphabet { display: grid; grid-template-columns: repeat(13, 1fr); gap: 0.25rem; max-width: 100%; }
#alphabet button { all: unset; background: var(--tile); color: var(--tile-text); text-align: center; font-weight: 600; border-radius: 4px; padding: 0.35rem 0; cursor: pointer; transition: background 0.15s; }
#alphabet button:hover { background: var(--accent); color: #000; }

/* ───── Hand tile ───── */
.tile { position: relative; width: 1.45rem; height: 1.45rem; border-radius: 6px; background: var(--tile); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.tile[data-count]::after { content: attr(data-count); position: absolute; bottom: 2px; right: 4px; font-size: 0.45rem; color: var(--accent); }

#hand-panel::-webkit-scrollbar { width: 4px; }
#hand-panel::-webkit-scrollbar-thumb { background: var(--grid); }

/* Media queries for responsive design */
@media (min-width: 768px) {
  body {
    flex-direction: row;
  }
  
  #hand-panel {
    width: var(--panel-width);
    flex-direction: column;
  }
}