* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f4efe6; color: #2e2113; }
header { background: #6b4f2a; color: #f4efe6; padding: 8px 16px; }
header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 1px; }
#setup { padding: 24px; display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
#setup[hidden] { display: none; }
#setup label { display: flex; flex-direction: column; font-size: .85rem; gap: 4px; }
#setup select, #setup input { padding: 6px; font-size: 1rem; }
button { background: #8a5a2b; color: #f4efe6; border: none; padding: 8px 14px; font-size: 1rem; cursor: pointer; border-radius: 4px; }
button:hover { background: #6b4f2a; }
#game { display: flex; gap: 16px; padding: 16px; align-items: flex-start; }
#game[hidden] { display: none; }
#board-wrap { flex: 1; min-width: 0; }
#board { width: 100%; height: 70vh; background: #3f6b3a; border: 2px solid #2e2113; border-radius: 6px; }
#side { width: 260px; display: flex; flex-direction: column; gap: 12px; }
#preview { width: 120px; height: 120px; background: #3f6b3a; border-radius: 4px; }
.legal-cell { fill: #ffffff; opacity: .18; cursor: pointer; }
.legal-cell:hover { opacity: .38; }
#hud { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
#hud li { padding: 6px 8px; border-radius: 4px; border: 2px solid transparent; display: flex; justify-content: space-between; }
#hud li.current { border-color: #2e2113; font-weight: bold; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; }
#claim-controls { display: flex; flex-direction: column; gap: 6px; }
#message { min-height: 1.4em; font-size: .9rem; }
#winner { font-size: 1.2rem; font-weight: bold; }
#compass { width: 90px; height: 90px; }
#tiles-left { font-size: .9rem; font-weight: bold; }
.meeple { stroke: #1a1a1a; stroke-width: 2; }

/* Phones and narrow screens: stack the board over a compact control bar. */
@media (max-width: 720px) {
  header h1 { font-size: 1.2rem; }
  #setup { padding: 16px; }
  #game { flex-direction: column; padding: 8px; gap: 8px; }
  #board-wrap { width: 100%; }
  #board { height: 52vh; }
  #side { width: 100%; flex-flow: row wrap; align-items: center; gap: 8px; }
  #turn { flex: 1 1 100%; font-weight: bold; }
  #tiles-left { flex: 1 1 100%; }
  #compass { width: 56px; height: 56px; }
  #preview { width: 80px; height: 80px; }
  #rotate { flex: 0 0 auto; }
  #claim-controls { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  #hud { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  #hud li { flex: 1 1 45%; }
  #message { flex: 1 1 100%; }
  button { min-height: 42px; }
}

@keyframes pop { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
.score-pop { animation: pop 2s ease-out forwards; font-weight: bold; font-size: 20px; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
@keyframes pulse { 0%,100% { opacity: 0; } 50% { opacity: .55; } }
.pulse-cell { fill: #fff; animation: pulse 1.2s ease-in-out; pointer-events: none; }
.hud-pop { animation: pop 2.2s ease-out forwards; font-weight: bold; margin-left: 6px; }