/* Zen Garden — widget-local styles. Shared chrome comes from ../../style.css;
   this file is the toolbar and the sand canvas. All sand/groove/stone COLOR
   lives in widget.js palettes (the canvas repaints itself for dark mode). */

.arena-zen {
  /* Matches the JS "warm" palette so there is no flash before first paint. */
  background: #e6d7ba;
}

@media (prefers-color-scheme: dark) {
  .arena-zen {
    background: #4e4537;
  }
}

/* touch-action: none — raking must never scroll the page. Only the canvas
   opts out of touch gestures; everything around it scrolls normally. */
#sand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.arena-zen.stone-mode #sand {
  cursor: crosshair;
}

/* --- Toolbar ---------------------------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.tool-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* touch-target floor */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.toolbar > .tool {
  background: var(--surface);
  border: 1px solid var(--line);
}

.tool[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.tool svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool svg .fill {
  fill: currentColor;
  stroke: none;
}

/* Speaker: wave arcs when on, slash when off. */
#soundBtn .icon-when-on { display: none; }
#soundBtn[aria-pressed="true"] .icon-when-on { display: initial; }
#soundBtn[aria-pressed="true"] .icon-when-off { display: none; }

.swatch {
  width: 34px;
  height: 34px;
  margin: 5px;
  border: 1px solid var(--line);
}

.swatch-warm { background: #e6d7ba; }
.swatch-cool { background: #d5d8da; }
.swatch-dusk { background: #e4ccd2; }

@media (prefers-color-scheme: dark) {
  .swatch-warm { background: #4e4537; }
  .swatch-cool { background: #3e444a; }
  .swatch-dusk { background: #483a41; }
}

.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--accent);
}

.toolbar-spacer {
  flex: 1;
}

.btn-smooth {
  min-height: 44px;
}