:root{
  --bg: #fff;
  --fg: #111;
  --muted: #666;
  --accent: #0a66c2;
  --danger: #c21a1a;
  --cell-size: 44px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
.app{max-width:980px;margin:18px auto;padding:18px;background:var(--bg);color:var(--fg)}
header h1{margin:0 0 6px 0;font-size:1.4rem}
.muted{color:var(--muted);font-size:0.95rem}
.row{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.controls-inline{display:flex;gap:12px;align-items:center}
#game-area{margin-top:12px;overflow:auto;border:1px solid #ddd;padding:8px;background:#fafafa}
table.grid{border-collapse:collapse;margin:0 auto}
table.grid td{width:var(--cell-size);height:var(--cell-size);border:1px solid #ddd;text-align:center;vertical-align:middle;font-weight:700;font-size:0.9rem}
.cell{display:inline-block;width:18px;height:18px;border-radius:4px;vertical-align:middle;margin-right:6px}
.cell.empty{background:#eee;border:1px solid #ddd}
.cell.me{background:var(--accent)}
.cell.other{background:#555}

#status{font-weight:600}
#message{padding:8px;border-radius:6px;min-height:28px}
#message.win{background:#e6ffe6;border:1px solid #b9f0b9;color:#0a600a}
#message.lose{background:#ffe6e6;border:1px solid #f0b9b9;color:var(--danger)}

/* arrows */
.touch-arrows{display:flex;flex-direction:column;gap:6px;align-items:center}
.touch-arrows button.arrow{width:44px;height:34px;border-radius:6px;border:1px solid #ccc;background:#fff;font-size:1rem}
button{cursor:pointer;padding:6px 8px;border-radius:6px;border:1px solid #ccc;background:#fff}
input,select{padding:6px;border:1px solid #ccc;border-radius:6px}
.legend{margin-top:18px;background:#f9f9f9;padding:10px;border-radius:6px;border:1px solid #eee}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fullscreen-grid {
  /* center the grid and remove margins; keep background white and minimal UI */
  padding: 6px;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

@media (max-width:560px){
  :root{--cell-size:36px}
  .app{padding:12px}
  header h1{font-size:1.1rem}
}