:root{
  --bg:#ffffff; --fg:#111;
  --grid:#e9eef3; --grid2:#ccd6e2;
  --red:#e94141; --redFill:rgba(233,65,65,.16);
  --blue:#1f78ff; --blueFill:rgba(31,120,255,.16);
  --pill:#f7f9fc; --pillBd:#d7dee9;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

.bar{display:flex;gap:.6rem;align-items:center;padding:.75rem 1rem;flex-wrap:wrap}
.pill{border:1px solid var(--pillBd);border-radius:999px;background:var(--pill);
  padding:.35rem .65rem}
button{border:1px solid var(--pillBd);background:var(--pill);border-radius:999px;
  padding:.35rem .7rem;cursor:pointer}

.red{color:var(--red)} .blue{color:var(--blue)}

#wrap{display:flex;gap:1rem;padding:0 1rem 1rem}
.board{position:relative;user-select:none;-webkit-user-select:none;touch-action:none;
  background:#fff;border-radius:14px;box-shadow:0 1px 2px #00000010,0 6px 22px #0000000f;overflow:hidden}

#sidebar{min-width:240px;max-width:280px}
#sidebar h3{margin:.5rem 0}
#moves{margin:.25rem 0 1rem 1.2rem;padding:0;max-height:55vh;overflow:auto}

canvas{display:block;position:absolute;left:0;top:0}
#grid{z-index:0;pointer-events:none}
#fills{z-index:1;pointer-events:none}
#walls{z-index:2;pointer-events:none}
#dots{z-index:3;pointer-events:auto;cursor:crosshair}

/* iOS Safari: keine Doppel-Events */
#board canvas { touch-action: none; }
#board {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#board canvas {
  touch-action: none;              /* verhindert Ghost-Clicks */
  -webkit-tap-highlight-color: transparent;
}