/* Rainy Window — widget-local styles. Everything on the glass is canvas;
   this file is the toolbar and the window casing. The casing is deliberately
   DEEPER in light mode — the scene is dim by nature, and a bright page
   glaring around it would break the mood (dark mode gets the lighter touch
   for once). */

:root {
  --rw-casing: #3a4353;
  --rw-casing-edge: #2b3342;
  --rw-sill: rgba(12, 17, 28, 0.55);
  --rw-arena-bg: #414b5d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rw-casing: #262e3d;
    --rw-casing-edge: #1b2230;
    --rw-sill: rgba(0, 0, 0, 0.5);
    --rw-arena-bg: #141a26;
  }
}

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

/* The window: a chunky casing around the glass, inner shadow for depth. */
.rw-frame {
  width: min(100%, 480px);
  aspect-ratio: 4 / 5;
  padding: 14px;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--rw-casing), var(--rw-casing-edge));
  border-radius: 14px;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(5, 8, 15, 0.35);
}

/* touch-action: none — wiping must never scroll; the page around the window
   scrolls normally (established contract). */
#glass {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  touch-action: none;
  box-shadow: inset 0 0 26px var(--rw-sill);
  cursor: crosshair;
}

/* --- 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;
  -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);
}

/* Swatches preview each evening's sky. */
.swatch-dusk { background: linear-gradient(180deg, #31415f, #141d30); }
.swatch-grey { background: linear-gradient(180deg, #454f59, #20262c); }
.swatch-sodium { background: linear-gradient(180deg, #3c3040, #171019); }

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

.toolbar-spacer {
  flex: 1;
}

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

.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;
}