:root {
  --bg: #f7f5f0;
  --ink: #23201a;
  --line: #cbb89a;
  --normal: #efe9dc;
  --dl: #b8d9e8;
  --tl: #6fb0d0;
  --dw: #f0c0a8;
  --tw: #e07850;
  --center: #d9c48a;
  --accent: #c0562e;
  --new: #ffe08a;
  --wordcell: #fff4cc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

header {
  padding: 18px 24px 8px;
}
header h1 { margin: 0 0 4px; font-size: 22px; }
header p { margin: 0; color: #7a6f5c; font-size: 13px; }

.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px 24px 40px;
  align-items: flex-start;
}

.panel {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}

#boardPanel { flex: 0 0 auto; }
#sidePanel { flex: 1 1 320px; min-width: 300px; max-width: 520px; }

.board {
  display: grid;
  grid-template-columns: repeat(15, 30px);
  grid-template-rows: repeat(15, 30px);
  gap: 2px;
  background: var(--line);
  border: 2px solid var(--line);
  border-radius: 6px;
}

.cell {
  width: 30px; height: 30px;
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--normal);
  padding: 0;
}
.cell:focus { outline: 2px solid var(--accent); z-index: 2; }
.cell.dl { background: var(--dl); }
.cell.tl { background: var(--tl); }
.cell.dw { background: var(--dw); }
.cell.tw { background: var(--tw); }
.cell.center { background: var(--center); }
.cell.wordcell { background: var(--wordcell); }
.cell.newcell { background: var(--new); box-shadow: inset 0 0 0 2px var(--accent); }

.legend { font-size: 12px; color: #7a6f5c; margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid var(--line); }

.controls { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
label { font-size: 13px; font-weight: 600; }
input[type=text] {
  font: inherit; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 6px; text-transform: uppercase; letter-spacing: 2px;
}
#rack { width: 160px; }

button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; border-radius: 6px;
}
button.secondary { background: #fff; color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }

#drop {
  border: 2px dashed var(--line); border-radius: 8px; padding: 14px;
  text-align: center; color: #7a6f5c; font-size: 13px; background: #fffdf8;
}
#drop.hot { border-color: var(--accent); color: var(--accent); }

.warnings { color: #9a5b2e; font-size: 12px; margin: 6px 0 0; }

table.moves { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
table.moves th, table.moves td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee2cc; }
table.moves tbody tr { cursor: pointer; }
table.moves tbody tr:hover { background: var(--wordcell); }
table.moves tbody tr.active { background: var(--new); }
.word { font-weight: 700; letter-spacing: 1px; }
.muted { color: #9a8f78; }
.status { font-size: 12px; color: #7a6f5c; }