:root {
  --cell: 72px;
  --bg: #2f3a2c;
  --panel: #f7f4ec;
  --ink: #222;
  --accent: #2e86ab;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.4 system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}

.panel { background: var(--panel); padding: 16px; }

#setup { max-width: 420px; margin: 10vh auto; border-radius: 8px; display: grid; gap: 12px; }
#setup h1 { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; margin-bottom: 6px; }
.choice { display: flex; gap: 6px; }
.choice button { flex: 1; background: #ddd; color: var(--ink); display: grid; line-height: 1.2; }
.choice button small { font-size: 11px; opacity: 0.7; }
.choice button.on { background: var(--accent); color: #fff; }
input, select, button { font: inherit; padding: 6px 10px; }

button { background: var(--accent); color: #fff; border: 0; border-radius: 6px; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
button.secondary { background: #777; }

#game { display: grid; grid-template-columns: 300px 1fr; height: 100vh; }
#game aside { overflow-y: auto; display: grid; gap: 12px; align-content: start; }

.actions, .moves { display: flex; gap: 8px; flex-wrap: wrap; }
#drawn-row { display: flex; gap: 12px; align-items: center; }
#drawn { cursor: grab; touch-action: none; }
#drawn svg { width: 96px; height: 96px; display: block; }
.hint { color: #555; }
.swatch.big { width: 16px; height: 16px; margin-right: 8px; }

.dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 4px; }
.dpad button { font-size: 20px; padding: 0; }
.dpad .up { grid-area: 1 / 2; }
.dpad .left { grid-area: 2 / 1; }
.dpad .right { grid-area: 2 / 3; }
.dpad .down { grid-area: 3 / 2; }

#ghost { position: fixed; width: var(--cell); height: var(--cell); transform: translate(-50%, -50%); pointer-events: none; opacity: 0.85; z-index: 10; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
#ghost svg { width: 100%; height: 100%; display: block; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }

#players { margin: 0; padding-left: 20px; }
#players li.current { font-weight: 700; }
#players .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
#log { font-size: 13px; max-height: 240px; overflow-y: auto; padding-left: 24px; }

#board-wrap { overflow: auto; padding: 24px; }
#board { display: grid; gap: 0; width: max-content; margin: auto; }
.cell { width: var(--cell); height: var(--cell); position: relative; }
.cell svg { width: 100%; height: 100%; display: block; }
.cell .layer { position: absolute; inset: 0; }
.cell.target { outline: 2px dashed #f6e7b4; outline-offset: -4px; cursor: pointer; }
.cell .preview { position: absolute; inset: 0; opacity: 0; transition: opacity 0.1s; }
.cell.target:hover .preview, .cell.target.hover .preview { opacity: 0.6; }
.cell .arrow { position: absolute; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 26px; background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.4); z-index: 2; }
.cell .arrow:hover { background: var(--accent); color: #fff; }
.cell .arrow.e0 { top: -13px; left: calc(50% - 13px); }
.cell .arrow.e1 { right: -13px; top: calc(50% - 13px); }
.cell .arrow.e2 { bottom: -13px; left: calc(50% - 13px); }
.cell .arrow.e3 { left: -13px; top: calc(50% - 13px); }
.cell.here::after { content: ''; position: absolute; inset: 0; outline: 3px solid #fff; outline-offset: -3px; pointer-events: none; }

@media (max-width: 720px) {
  #game { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  :root { --cell: 56px; }
}