/* Base-Ten Blocks. Canvas fills the stage; the number sits on top, column
   labels follow the blocks, controls along the bottom. */

.bt {
  overflow: hidden; --bt-pad: clamp(8px, 2.4cqmin, 28px);
  --bt-b0: #f7c51e; --bt-b1: #f08c00; --bt-b2: #1c7ed6; --bt-b3: #2f9e44;
  --bt-c0: color-mix(in srgb, #e0a800 72%, var(--stage-ink));
  --bt-c1: color-mix(in srgb, #f08c00 84%, var(--stage-ink));
  --bt-c2: color-mix(in srgb, #1c7ed6 88%, var(--stage-ink));
  --bt-c3: color-mix(in srgb, #2f9e44 88%, var(--stage-ink));
}
.bt[data-colors="blue"] { --bt-b0: #3b82e0; --bt-b1: #3b82e0; --bt-b2: #3b82e0; --bt-b3: #3b82e0; }
.bt[data-colors="green"] { --bt-b0: #2f9e44; --bt-b1: #2f9e44; --bt-b2: #2f9e44; --bt-b3: #2f9e44; }
.bt[data-colors="wood"] { --bt-b0: #e2bd8a; --bt-b1: #dcb47e; --bt-b2: #d4aa72; --bt-b3: #cba068; }
.bt[data-colors="blue"], .bt[data-colors="green"], .bt[data-colors="wood"] {
  --bt-c0: var(--stage-ink); --bt-c1: var(--stage-ink); --bt-c2: var(--stage-ink); --bt-c3: var(--stage-ink);
}
.bt-c0 { color: var(--bt-c0); }
.bt-c1 { color: var(--bt-c1); }
.bt-c2 { color: var(--bt-c2); }
.bt-c3 { color: var(--bt-c3); }

.bt-host {
  background:
    radial-gradient(120% 85% at 50% 40%, var(--stage-bg) 30%, color-mix(in srgb, var(--stage-bg) 90%, #6b7a90) 100%);
}
.bt-host .t-canvas { cursor: grab; }
.bt-host .t-canvas:active { cursor: grabbing; }

/* ---- the number ---- */
.bt-readout {
  position: absolute; top: var(--bt-pad); left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: clamp(3px, .8cqmin, 10px);
  max-width: 94%; pointer-events: none;
}
.bt-num {
  pointer-events: auto; cursor: pointer; display: inline-flex; align-items: baseline;
  padding: .06em .45em; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(6px); box-shadow: var(--shadow);
  font: 700 clamp(26px, 8.6cqmin, 140px)/1.1 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: var(--stage-ink);
}
.bt-num .bt-sep { color: var(--muted); margin: 0 .02em; }
.bt-num.is-hidden span { color: var(--cat); min-width: 1.6em; text-align: center; }
.bt-num.is-typing { outline: 3px solid color-mix(in srgb, var(--cat) 55%, transparent); }
.bt-caret { display: inline-block; width: .08em; height: .8em; margin-left: .06em; background: var(--cat); animation: t-flash 1s steps(1) infinite; }
.bt-sum {
  padding: .25em .8em; border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(11px, 2.3cqmin, 28px); font-weight: 600; color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line);
}
.bt-sum i { font-style: normal; color: var(--muted); }
.bt-sum b { color: var(--ink); }
.bt-readout.is-nonstd .bt-sum { border-color: color-mix(in srgb, var(--cat) 50%, var(--line)); }

/* ---- column labels ---- */
.bt-labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bt-label {
  position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform;
  display: flex; flex-direction: column; align-items: center; min-width: 5.4em;
  padding: .3em .7em .4em; border-radius: clamp(8px, 1.6cqmin, 16px);
  background: color-mix(in srgb, var(--card) 86%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: clamp(10px, 1.9cqmin, 22px); color: var(--ink);
}
.bt-label[hidden] { display: none; }
.bt-count { font: 700 2.1em/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bt-label[data-k="0"] .bt-count { color: var(--bt-c0); }
.bt-label[data-k="1"] .bt-count { color: var(--bt-c1); }
.bt-label[data-k="2"] .bt-count { color: var(--bt-c2); }
.bt-label[data-k="3"] .bt-count { color: var(--bt-c3); }
.bt-name { font-weight: 650; color: var(--ink-soft); font-size: .92em; }
.bt-acts { display: flex; gap: .3em; margin-top: .3em; }
.bt-acts:empty { display: none; }
.bt-act {
  display: inline-flex; align-items: center; gap: .25em; padding: .2em .55em; min-height: max(26px, 2.2em);
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: .8em; font-weight: 650; white-space: nowrap; cursor: pointer;
}
.bt-act:hover { border-color: var(--cat); }
.bt-act .icon { width: 1.1em; height: 1.1em; }
.bt-trade .icon { transform: scaleX(-1); }
.bt-act:disabled { display: none; }
.bt-label.is-full .bt-trade { background: var(--cat); border-color: transparent; color: #fff; }

/* ---- controls ---- */
.bt-controls .bt-input {
  width: 4.4ch; flex: none; height: auto; min-height: clamp(36px, 8.4cqmin, 84px); padding: 0 .3em; text-align: center;
  border-radius: clamp(10px, 2.2cqmin, 22px); border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 700 clamp(16px, 4.2cqmin, 44px) var(--font-display); font-variant-numeric: tabular-nums; box-shadow: var(--shadow-sm);
}
.bt-controls .bt-input:focus { outline: 3px solid var(--ring); border-color: var(--cat); }
.bt-steps {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.bt-step {
  min-height: clamp(30px, 7cqmin, 72px); min-width: clamp(30px, 7cqmin, 72px); padding: 0 .55em; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-soft); font-weight: 700; font-size: clamp(12px, 2.6cqmin, 26px); cursor: pointer;
}
.bt-step:hover { color: var(--ink); }
.bt-step[aria-pressed="true"] { background: var(--cat); color: #fff; }
.bt-controls .t-btn-round { background: color-mix(in srgb, var(--card) 94%, transparent); }

/* ---- flat blocks (no WebGL) ---- */
.bt-flat {
  position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: clamp(80px, 22cqmin, 260px) 5cqmin clamp(110px, 30cqmin, 330px);
}
.bt-flat-svg { width: 100%; height: 100%; overflow: visible; }
.bt-f-face { stroke: rgba(0, 0, 0, .5); stroke-width: .07; }
.bt-f-grid { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: .05; }
.bt-f-top { filter: brightness(1.18); }
.bt-f-side { filter: brightness(.82); }
.bt-p0 .bt-f-face { fill: var(--bt-b0); }
.bt-p1 .bt-f-face { fill: var(--bt-b1); }
.bt-p2 .bt-f-face { fill: var(--bt-b2); }
.bt-p3 .bt-f-face { fill: var(--bt-b3); }
.bt-f-b { cursor: pointer; }
.bt-f-hit { fill: transparent; }
.bt-flat-note { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(clamp(36px, 8.4cqmin, 84px) + 2 * var(--bt-pad)); margin: 0; color: var(--muted); font-size: clamp(10px, 1.8cqmin, 16px); white-space: nowrap; }

/* ---- small stages ---- */
@container (max-width: 640px) {
  .bt-steps { display: none; }
  .bt-act span { display: none; }
  .bt-act { padding: .2em .4em; }
}
@container (max-height: 380px) {
  .bt-sum { display: none; }
  .bt-acts { display: none; }
  .bt-name { display: none; }
  .bt-label { min-width: 2.4em; padding: .15em .5em; }
  .bt-count { font-size: 1.7em; }
  .bt-num { font-size: clamp(20px, 8cqmin, 140px); }
  .bt-flat-note { display: none; }
}
@container (max-width: 420px) {
  .bt-name { display: none; }
  .bt-label { min-width: 0; padding: .2em .5em; }
}