/* Koi Pond — widget-local styles. Everything wet is canvas; this file is
   the toolbar and the stone frame. The three palettes (day / dusk /
   moonlight) live as CSS variable SETS the canvas reads at render time —
   the renderer swaps a data attribute on the frame, and dark mode adjusts
   each set underneath (site rule: palettes have dark variants). */

:root {
  --kp-frame: #b9b0a0;
  --kp-frame-edge: #948b7a;
  --kp-arena-bg: transparent;
  /* day */
  --kp-water: #7db3c9;
  --kp-water-deep: #558da6;
  --kp-floor-a: #8b9a94;
  --kp-floor-b: #6e7d78;
  --kp-floor-c: #a5b0a3;
  --kp-highlight: #fff6dd;
  --kp-shadow: #2c4a58;
  --kp-pad: #4d7a4a;
  --kp-pad-edge: #3a5f39;
}

:root[data-kp="dusk"], .kp-frame[data-kp="dusk"] {
  --kp-water: #b58a94;
  --kp-water-deep: #7d5a72;
  --kp-floor-a: #8a7d80;
  --kp-floor-b: #6d5f66;
  --kp-floor-c: #a1908d;
  --kp-highlight: #ffd9a8;
  --kp-shadow: #4a2c44;
  --kp-pad: #5d6e45;
  --kp-pad-edge: #475536;
}

.kp-frame[data-kp="moon"] {
  --kp-water: #3d5a78;
  --kp-water-deep: #263c54;
  --kp-floor-a: #4a5a66;
  --kp-floor-b: #37454f;
  --kp-floor-c: #5c6c74;
  --kp-highlight: #dbe8ff;
  --kp-shadow: #101c2a;
  --kp-pad: #33553f;
  --kp-pad-edge: #264230;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kp-frame: #4a463d;
    --kp-frame-edge: #35322b;
    --kp-water: #4a7d96;
    --kp-water-deep: #2e5a70;
    --kp-floor-a: #5a6a64;
    --kp-floor-b: #43524d;
    --kp-floor-c: #6e7d70;
    --kp-highlight: #f5ecd0;
    --kp-shadow: #16262e;
  }
  .kp-frame[data-kp="dusk"] {
    --kp-water: #8a5f6e;
    --kp-water-deep: #5a3c52;
    --kp-floor-a: #6a5d62;
    --kp-floor-b: #504449;
    --kp-floor-c: #7d6c6a;
    --kp-highlight: #f0bf88;
    --kp-shadow: #331d30;
  }
  .kp-frame[data-kp="moon"] {
    --kp-water: #2c4560;
    --kp-water-deep: #1a2c42;
    --kp-floor-a: #3a4852;
    --kp-floor-b: #2a3540;
    --kp-floor-c: #48565e;
    --kp-highlight: #ccdcff;
    --kp-shadow: #0a141f;
  }
}

.arena-kp {
  height: auto;
  min-height: 0;
  padding: 16px 0 20px;
  display: flex;
  justify-content: center;
  background: var(--kp-arena-bg);
}

/* the stone rim around the water */
.kp-frame {
  width: min(100%, 480px);
  aspect-ratio: 4 / 5;
  padding: 12px;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--kp-frame), var(--kp-frame-edge));
  border-radius: 26px;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2),
    0 12px 30px rgba(15, 20, 32, 0.22);
}

/* touch-action: none — rippling must never scroll; the page around the
   pond scrolls normally (established contract) */
#pond {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  touch-action: none;
  cursor: pointer;
}

/* --- toolbar (house pattern) ---------------------------------------------------- */

.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;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  -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; }

#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);
}

/* palette swatches preview each time of day */
.swatch-day { background: linear-gradient(180deg, #9cc7da, #558da6); }
.swatch-dusk { background: linear-gradient(180deg, #d8a5ae, #7d5a72); }
.swatch-moon { background: linear-gradient(180deg, #52759c, #1a2c42); }

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

.kp-count { font-size: 15px; }

.toolbar-spacer { flex: 1; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}