/* Pawmiefier — reuses ../../styles.css tokens (:root, .btn, .topbar, .footer). */
.tool { max-width: 720px; margin: 40px auto 70px; padding: 0 20px; text-align: center; }
.tool-title {
  font-family: 'Press Start 2P', monospace; text-transform: uppercase;
  font-size: clamp(24px, 6vw, 44px); text-shadow: 5px 5px 0 var(--ink);
  letter-spacing: 0.12em;   /* stop W/M colliding (clint) */
}
.tool-sub { display: inline-block; margin: 18px 0 26px; background: var(--lime); padding: 8px 14px; font-size: 15px; }
.tool-note { display: inline-block; margin-top: 26px; background: var(--lime); padding: 8px 14px; font-size: 13px; }

/* arcade cabinet */
.cabinet { border: var(--px) solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--lime); padding: 18px; }
.screen {
  position: relative; border: var(--px) solid var(--ink); background: var(--lime);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#out { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.screen-msg {
  position: absolute; font-family: 'Press Start 2P', monospace; font-size: 12px;
  text-align: center; padding: 10px; text-transform: uppercase;
}

/* controls: blocky, 2-color */
.controls { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: center; margin-top: 18px; }
.ctl { display: flex; flex-direction: column; gap: 6px; font-size: 12px; text-transform: uppercase; font-weight: 700; }

/* chunky 2-color range slider */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 130px; height: 12px;
  background: var(--lime); border: 3px solid var(--ink); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 22px;
  background: var(--ink); border: none; cursor: pointer;
}
input[type="range"]::-moz-range-thumb { width: 16px; height: 22px; background: var(--ink); border: none; border-radius: 0; }

/* chunky toggle */
.ctl-toggle { flex-direction: row; align-items: center; gap: 8px; }
.ctl-toggle input { position: absolute; opacity: 0; }
.toggle { width: 44px; height: 22px; border: 3px solid var(--ink); background: var(--lime); position: relative; }
.toggle::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--ink); }
.ctl-toggle input:checked + .toggle::after { left: 23px; }

.btn-snap { background: var(--ink); color: var(--lime); }