:root { --ink: #4a4558; --panel: rgba(255, 252, 246, 0.82); --line: rgba(120, 110, 140, 0.25); --accent: #f2b45c; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  display: flex; flex-direction: column; height: 100dvh; gap: 0;
  background: linear-gradient(#bfe2ea, #f6e9d8); color: var(--ink);
  font: 15px/1.3 system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
}
body.rain { background: linear-gradient(#9aa8b2, #cfd5d9); }
#hud, #tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 6px 8px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(80, 70, 110, 0.12);
}
#hud b { font-variant-numeric: tabular-nums; }
#event { min-width: 5em; color: #3f86b5; }
button, select, input { touch-action: manipulation; }
button, select {
  min-height: 40px; padding: 0 12px; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
button:active { background: #f1ebe0; }
button[aria-pressed="true"] { background: var(--accent); border-color: #d9953a; font-weight: 700; }
#help { width: 40px; padding: 0; border-radius: 50%; font-weight: 700; }
#tools label { display: flex; align-items: center; gap: 6px; }
#tools input { width: 110px; accent-color: #d9953a; }
#hint { margin: 0 8px 6px; padding: 6px 12px; min-height: 2.6em; font-size: 14px; text-align: center; color: var(--ink); }
main { position: relative; flex: 1; min-height: 0; overflow: hidden; }
canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: none; }
#over, #intro {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5;
  background: rgba(90, 85, 120, 0.45);
}
#over { position: absolute; }
#over[hidden], #intro[hidden] { display: none; }
.card {
  max-width: min(92vw, 480px); max-height: 92dvh; overflow: auto; background: #fffaf2; border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 22px; text-align: center; box-shadow: 0 8px 30px rgba(60, 50, 90, 0.25);
}
.card h2 { margin: 0 0 8px; }
.card ul { text-align: left; padding-left: 0; list-style: none; margin: 8px 0; }
.card li { margin: 6px 0; }
.card .small { font-size: 13px; text-align: left; }
#play, #again { background: var(--accent); border-color: #d9953a; font-weight: 700; padding: 0 28px; }
#debug {
  position: fixed; left: 4px; top: 60px; margin: 0; padding: 4px 6px;
  background: rgba(0, 0, 0, 0.7); color: #9f9; font-size: 11px; pointer-events: none;
}