/* Marble Drop — widget-local styles. Everything on the board is canvas; this
   file is the toolbar, the counter chip, and the wooden casing. The canvas
   reads the --md-* variables at render time, so dark mode restyles the board
   without a line of JS colour logic. */

:root {
  --md-casing: #cbb99f;
  --md-casing-edge: #ab937a;
  --md-bg: #f2f4f8;
  --md-bg-edge: #e2e7ef;
  --md-peg: #93a0b6;
  --md-peg-hi: rgba(255, 255, 255, 0.85);
  --md-divider: #aab4c6;
  --md-funnel: #8d99ae;
  --md-curve: rgba(63, 140, 255, 0.16);
  --md-arena-bg: transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-casing: #453b31;
    --md-casing-edge: #2e2822;
    --md-bg: #1b2231;
    --md-bg-edge: #151b27;
    --md-peg: #4a5871;
    --md-peg-hi: rgba(255, 255, 255, 0.45);
    --md-divider: #38445c;
    --md-funnel: #4e5b74;
    --md-curve: rgba(122, 176, 255, 0.14);
    --md-arena-bg: transparent;
  }
}

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

/* The casing: a shallow wooden tray around the board. */
.md-frame {
  width: min(100%, 430px);
  aspect-ratio: 10 / 13;
  padding: 12px;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--md-casing), var(--md-casing-edge));
  border-radius: 16px;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.25),
    0 12px 30px rgba(15, 20, 32, 0.25);
}

/* touch-action: none — hold-to-drop must never scroll; the page around the
   board scrolls normally (established contract). */
#board {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  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;
  -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 marble family. */
.swatch-glass { background: radial-gradient(circle at 32% 30%, #dcecff, #6fa5e8 60%, #3d6fb4); }
.swatch-candy { background: radial-gradient(circle at 32% 30%, #ffe3d1, #f28d67 55%, #c94f7c); }
.swatch-steel { background: radial-gradient(circle at 32% 30%, #f2f4f6, #9aa4ad 60%, #5c666f); }

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

.toolbar-spacer {
  flex: 1;
}

/* Counter chip: the only number on screen. Tabular digits so it doesn't
   wobble as it counts. */
.md-chip {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.btn-sweep {
  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;
}