:root { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial; }
body { margin: 0; padding: 16px; background:#fafafa; color:#111; }
header { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
h1 { margin:0; font-size:20px; }
.goal { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#prompt { background:#fff; border:1px solid #ddd; padding:6px 10px; border-radius:8px; }
button { border:1px solid #ddd; background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; }
button:hover { background:#f2f2f2; }
main { display:grid; grid-template-columns: 1fr; gap:12px; }
.canvas-wrap { background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:12px; }
#c { width:100%; max-width:640px; height:auto; border:1px dashed #ccc; border-radius:8px; background:#fff; touch-action:none; }
.tools { display:flex; gap:8px; margin-top:8px; }
.guess-wrap { display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:12px; }
#guess { padding:8px 10px; border:1px solid #ddd; border-radius:8px; }
#msg { min-height:20px; }
.stats { display:flex; gap:12px; opacity:.8; font-size:14px; }
footer { margin-top:14px; opacity:.7; }
@media (min-width: 880px) {
  main { grid-template-columns: 1fr 1fr; }
}