@font-face {
  font-family: "Permanent Marker";
  src: url("./assets/fonts/permanent-marker.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fdf9f3;
  --paper-soft: #f7f1e8;
  --paper-shadow: rgba(45, 39, 31, 0.1);
  --grid: rgba(181, 188, 188, 0.16);
  --ink: #131313;
  --muted: #655f56;
  --accent: #245eff;
  --green: #6f8d70;
  --orange: #ff8a1c;
  --red: #a96a65;
  --violet: #5b33c9;
  --panel: rgba(253, 249, 243, 0.96);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.78), transparent 38%),
    linear-gradient(180deg, #fbf6ee 0%, #fdf9f3 46%, #f7f1e8 100%);
  color: var(--ink);
  font-family: "Permanent Marker", "Trebuchet MS", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

body.is-grayscale-mode {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 35%),
    linear-gradient(180deg, #e4e4e4 0%, #f1f1f1 100%);
}

button,
textarea {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  height: 100vh;
  padding: 8px;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}

.app-shell.is-board-top-hidden {
  grid-template-rows: 0 minmax(0, 1fr) auto;
}

.app-shell.is-board-tray-hidden {
  grid-template-rows: auto minmax(0, 1fr) 0;
}

.app-shell.is-board-top-hidden.is-board-tray-hidden {
  grid-template-rows: 0 minmax(0, 1fr) 0;
}

.orientation-guard {
  display: none;
}

.orientation-guard-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: min(320px, calc(100vw - 40px));
  padding: 22px 20px;
  border: 2px solid rgba(26, 26, 26, 0.9);
  border-radius: 24px;
  background: rgba(253, 249, 243, 0.97);
  box-shadow: 0 18px 42px rgba(22, 18, 12, 0.16);
  text-align: center;
}

.orientation-guard-card strong {
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.orientation-guard-card span {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.topbar,
.bottombar,
.board-frame,
.io-panel {
  border: 1.5px solid var(--ink);
  border-radius: 26px;
  background: var(--panel);
  box-shadow: 0 10px 30px var(--paper-shadow);
}

.io-panel {
  border: 1.5px solid var(--ink);
}

.topbar,
.bottombar,
.board-frame {
  position: relative;
  isolation: isolate;
}

.board-frame {
  touch-action: none;
  overscroll-behavior: contain;
}

.topbar::before,
.bottombar::before,
.board-frame::before {
  content: none;
}

.topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  padding: 5px 12px;
  overflow: visible;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 180ms ease, opacity 160ms ease;
}

.app-shell.is-board-top-hidden .topbar {
  transform: translateY(calc(-100% - 8px));
  opacity: 0;
  pointer-events: none;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}

.brand-logo {
  display: block;
  width: clamp(154px, 17vw, 228px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: translateX(-8px) translateY(6px) rotate(-4deg);
  transform-origin: 42% 54%;
}

.header-center {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  justify-self: end;
}

.level-pill {
  padding: 4px 10px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
}

.star-strip {
  display: flex;
  gap: 4px;
  align-items: center;
}

.star-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.star-icon.is-off {
  opacity: 0.22;
  filter: grayscale(1) brightness(1.15);
}

.accent {
  color: var(--accent) !important;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  justify-self: end;
}

.header-play-button.asset-button {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(38px, 4vw, 52px);
  height: clamp(38px, 4vw, 52px);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fdf9f3;
  overflow: visible;
  isolation: isolate;
  box-shadow: 0 2px 0 rgba(19, 19, 19, 0.12);
  transform: translate(-50%, -50%);
  transform-origin: center;
  z-index: 7;
}

.header-play-button.asset-button::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 0;
  border-radius: 999px;
  background: rgba(15, 84, 42, 0.1);
}

.header-play-button.asset-button:hover {
  transform: translate(-50%, calc(-50% - 1px)) rotate(-0.3deg);
}

.header-play-mark {
  position: relative;
  z-index: 1;
  display: block;
  width: 48%;
  height: 54%;
  margin-left: 7%;
  background: #0f542a;
  clip-path: polygon(12% 4%, 96% 50%, 12% 96%);
  filter: drop-shadow(2px 1px 0 rgba(19, 19, 19, 0.82));
}

.app-shell:not(.is-round-running) .header-play-button.asset-button {
  animation: headerPlayIdleTap 3.35s ease-in-out infinite;
}

.app-shell:not(.is-round-running) .header-play-button.asset-button::before {
  animation: headerPlayIdleGlow 3.35s ease-in-out infinite;
}

.app-shell:not(.is-round-running) .header-play-mark {
  animation: headerPlayIdleMark 3.35s ease-in-out infinite;
}

.app-shell.is-round-running .header-play-button.asset-button {
  opacity: 0.82;
}

@keyframes headerPlayIdleTap {
  0%,
  64%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  74% {
    transform: translate(-50%, -50%) scale(1.17);
  }

  82% {
    transform: translate(-50%, -50%) scale(0.97);
  }

  91% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes headerPlayIdleGlow {
  0%,
  64%,
  100% {
    transform: scale(1);
    background: rgba(15, 84, 42, 0.1);
  }

  74% {
    transform: scale(1.2);
    background: rgba(93, 187, 111, 0.28);
  }

  82% {
    transform: scale(0.98);
  }

  91% {
    transform: scale(1.1);
    background: rgba(58, 145, 78, 0.18);
  }
}

@keyframes headerPlayIdleMark {
  0%,
  64%,
  100% {
    background: #0f542a;
    filter: drop-shadow(2px 1px 0 rgba(19, 19, 19, 0.82));
  }

  74% {
    background: #68c979;
    filter: drop-shadow(2px 2px 0 rgba(19, 19, 19, 0.72));
  }

  91% {
    background: #3f9f55;
  }
}

.app-shell.is-grayscale {
  --paper: #f3f3f3;
  --paper-shadow: rgba(28, 28, 28, 0.12);
  --grid: rgba(132, 132, 132, 0.12);
  --muted: #555555;
  --accent: #626262;
  --green: #737373;
  --orange: #858585;
  --red: #686868;
  --violet: #747474;
  --panel: rgba(249, 249, 249, 0.94);
}

.app-shell.is-grayscale .brand-logo,
.app-shell.is-grayscale .header-level-inline,
.app-shell.is-grayscale .topbar .icon-button,
.app-shell.is-grayscale .grayscale-toggle,
.app-shell.is-grayscale .board-pan-button,
.app-shell.is-grayscale .board-expand-button,
.app-shell.is-grayscale .board-corner-actions,
.app-shell.is-grayscale .board-tray-toggle,
.app-shell.is-grayscale .board-ball-setup,
.app-shell.is-grayscale .board-map-caption,
.app-shell.is-grayscale > .board-tray-hide-toggle,
.app-shell.is-grayscale > .board-top-toggle,
.app-shell.is-grayscale > .board-side-toggle,
.app-shell.is-grayscale ~ .segment-adjust-overlay,
.app-shell.is-grayscale ~ .io-dialog {
  filter: grayscale(1);
}

.app-shell.is-grayscale ~ .tool-cursor-indicator .perk-icon:not(.boostslow-icon):not(.elasticity-icon):not(.perforate-icon):not(.portal-icon) {
  filter: grayscale(1);
}

.app-shell.is-grayscale .tools-panel-badge img,
.app-shell.is-grayscale .perk-card:not([data-segment="boost"]):not([data-segment="spring"]):not([data-segment="vanish"]):not([data-segment="portal"]) .perk-icon,
.app-shell.is-grayscale .perk-card:not([data-segment="boost"]):not([data-segment="spring"]):not([data-segment="vanish"]):not([data-segment="portal"]) .perk-title {
  filter: grayscale(1);
}

.app-shell.is-grayscale .perforate-icon,
.app-shell.is-grayscale .perk-card[data-segment="vanish"] .perk-title,
.app-shell.is-grayscale ~ .tool-cursor-indicator .perforate-icon {
  color: #a18466;
}

.app-shell.is-grayscale .boostslow-icon .boostslow-boost path,
.app-shell.is-grayscale ~ .tool-cursor-indicator .boostslow-icon .boostslow-boost path {
  stroke: #9a7184;
}

.app-shell.is-grayscale .boostslow-icon .boostslow-slow path,
.app-shell.is-grayscale ~ .tool-cursor-indicator .boostslow-icon .boostslow-slow path {
  stroke: #9a7184;
}

.app-shell.is-grayscale .elasticity-icon .elasticity-spring path,
.app-shell.is-grayscale ~ .tool-cursor-indicator .elasticity-icon .elasticity-spring path {
  stroke: #738d70;
}

.app-shell.is-grayscale .elasticity-icon .elasticity-damper path,
.app-shell.is-grayscale ~ .tool-cursor-indicator .elasticity-icon .elasticity-damper path {
  stroke: #9a746e;
}

.app-shell.is-grayscale .portal-icon path,
.app-shell.is-grayscale .perk-card[data-segment="portal"] .perk-title,
.app-shell.is-grayscale ~ .tool-cursor-indicator .portal-icon path {
  stroke: #7e789a;
  color: #7e789a;
}

.app-shell.is-grayscale .elasticity-range {
  background: linear-gradient(90deg, rgba(154, 116, 110, 0.18) 0 50%, rgba(115, 141, 112, 0.18) 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
}

.app-shell.is-grayscale .boost-range {
  background: linear-gradient(90deg, rgba(111, 135, 159, 0.17) 0 50%, rgba(154, 113, 132, 0.16) 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
}

.app-shell.is-grayscale .perforation-range {
  background: linear-gradient(90deg, rgba(161, 132, 102, 0.1) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
}

.app-shell.is-grayscale .elasticity-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(154, 116, 110, 0.44) 0 50%, rgba(115, 141, 112, 0.46) 50% 100%);
}

.app-shell.is-grayscale .elasticity-range::-moz-range-track {
  background: linear-gradient(90deg, rgba(154, 116, 110, 0.44) 0 50%, rgba(115, 141, 112, 0.46) 50% 100%);
}

.app-shell.is-grayscale .boost-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(111, 135, 159, 0.44) 0 50%, rgba(154, 113, 132, 0.42) 50% 100%);
}

.app-shell.is-grayscale .boost-range::-moz-range-track {
  background: linear-gradient(90deg, rgba(111, 135, 159, 0.44) 0 50%, rgba(154, 113, 132, 0.42) 50% 100%);
}

.app-shell.is-grayscale .perforation-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(161, 132, 102, 0.2) 0 100%);
}

.app-shell.is-grayscale .perforation-range::-moz-range-track {
  background: linear-gradient(90deg, rgba(161, 132, 102, 0.2) 0 100%);
}

.header-level-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.header-level-inline {
  display: inline-grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}

.header-level-mark {
  display: block;
  width: 74px;
  height: auto;
  transform: rotate(2deg);
  transform-origin: center;
}

.header-level-number {
  display: inline-block;
  margin-left: 2px;
  font-size: clamp(1.25rem, 1.8vw, 1.9rem);
  font-weight: 900;
  line-height: 1;
  transform: translateY(1px) rotate(-1deg);
  transform-origin: center;
}

.header-star-strip {
  gap: 3px;
}

.header-star-strip .star-icon {
  width: 24px;
  height: 24px;
}

.grayscale-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.grayscale-toggle:hover,
.grayscale-toggle.is-active {
  background: transparent;
  transform: translateY(-1px) rotate(-1deg);
}

.grayscale-toggle-icon {
  width: 22px;
  height: 22px;
  border: 1.8px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(90deg, #111 0 50%, #fdf9f3 50% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.grayscale-toggle::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  z-index: 30;
  transform: translateX(-50%);
  padding: 4px 8px;
  border: 1.2px solid var(--ink);
  border-radius: 10px;
  background: rgba(253, 249, 243, 0.96);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.grayscale-toggle:hover::after,
.grayscale-toggle:focus-visible::after {
  opacity: 1;
}

@media (min-width: 1800px) and (min-height: 900px) {
  .grayscale-toggle {
    width: 48px;
    height: 48px;
  }

  .grayscale-toggle-icon {
    width: 25px;
    height: 25px;
  }
}

@media (min-width: 2400px) and (min-height: 1200px) {
  .grayscale-toggle {
    width: 46px;
    height: 46px;
  }

  .grayscale-toggle-icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 760px) {
  .grayscale-toggle {
    width: 42px;
    height: 42px;
  }

  .grayscale-toggle-icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 420px) {
  .grayscale-toggle {
    width: 36px;
    height: 36px;
  }

  .grayscale-toggle-icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .grayscale-toggle {
    width: 34px;
    height: 34px;
  }

  .grayscale-toggle-icon {
    width: 18px;
    height: 18px;
  }

  .app-shell.is-board-expanded .grayscale-toggle {
    width: 30px;
    height: 30px;
  }

  .app-shell.is-board-expanded .grayscale-toggle-icon {
    width: 16px;
    height: 16px;
  }
}

.ink-button,
.icon-button,
.tool-button,
.utility-button,
.mini-action-button {
  border: 3px solid var(--ink);
  background: #fdf9f3;
  color: var(--ink);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.ink-button:hover,
.icon-button:hover,
.tool-button:hover,
.tool-button.active,
.utility-button:hover,
.mini-action-button:hover,
.mini-action-button.active {
  transform: translateY(-1px) rotate(-0.35deg);
  background: #f7f1e8;
}

.ink-button {
  padding: 7px 12px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 0.84rem;
}

.ink-button.primary {
  background: #f3eee7;
}

.icon-button {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 1.28rem;
  line-height: 1;
  background: #fdf9f3;
}

.icon-button::before {
  content: none;
}

.asset-button {
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.asset-button:hover,
.asset-button.active {
  background: transparent;
}

.button-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tool-cursor-indicator {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 120ms ease;
  filter: drop-shadow(0 2px 6px rgba(19, 19, 19, 0.15));
}

.tool-cursor-indicator.is-visible {
  opacity: 0.96;
}

.tool-cursor-indicator .perk-icon {
  font-size: 1.05rem;
}

.tool-cursor-indicator .glyph-icon {
  width: 34px;
  height: 18px;
}

.tool-cursor-indicator .eraser-toolbar-icon {
  width: 8px;
  height: 8px;
}

.tool-cursor-indicator .cursor-erase-symbol {
  display: block;
  width: 10px;
  height: 10px;
  object-fit: contain;
}

.tool-cursor-indicator .line-icon {
  width: 44px;
  height: 12px;
}

.tool-cursor-indicator .perforate-icon {
  width: 44px;
  height: 12px;
}

.tool-cursor-indicator .friction-icon,
.tool-cursor-indicator .boost-icon,
.tool-cursor-indicator .boostslow-icon {
  width: 42px;
  height: 16px;
}

.tool-cursor-indicator .portal-icon {
  width: 14px;
  height: 32px;
  transform: none;
}

.segment-adjust-overlay {
  position: fixed;
  z-index: 60;
  display: none;
  grid-template-columns: 1fr;
  gap: 4px;
  min-width: 128px;
  padding: 6px 7px;
  border-radius: 12px;
  border: 0;
  background: rgba(253, 249, 243, 0.74);
  box-shadow: 0 4px 14px rgba(40, 29, 16, 0.08);
  backdrop-filter: blur(2px);
}

.segment-adjust-overlay.is-visible {
  display: grid;
}

.item-param-overlay {
  position: fixed;
  z-index: 65;
  display: none;
  min-width: 76px;
  padding: 4px 5px;
  border: 1.5px solid rgba(19, 19, 19, 0.74);
  border-radius: 8px;
  background: rgba(253, 249, 243, 0.93);
  box-shadow: 0 5px 14px rgba(40, 29, 16, 0.12);
  pointer-events: auto;
}

.item-param-overlay.is-visible {
  display: block;
}

.item-param-field {
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-size: 0.44rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.item-param-number {
  width: 34px;
  min-width: 0;
  height: 18px;
  border: 1px solid rgba(19, 19, 19, 0.7);
  border-radius: 5px;
  background: rgba(253, 249, 243, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 0.5rem;
  text-align: center;
}

.segment-adjust-label {
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(19, 19, 19, 0.88);
  text-align: center;
}

.segment-adjust-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 4px;
  align-items: center;
}

.segment-adjust-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  height: 22px;
  border: 0;
  background: linear-gradient(90deg, rgba(49, 136, 214, 0.16) 0 50%, rgba(196, 78, 104, 0.16) 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
  cursor: pointer;
}

.segment-adjust-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(49, 136, 214, 0.5) 0 50%, rgba(196, 78, 104, 0.48) 50% 100%);
}

.segment-adjust-range::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(49, 136, 214, 0.5) 0 50%, rgba(196, 78, 104, 0.48) 50% 100%);
}

.segment-adjust-overlay.is-boost .segment-adjust-range {
  background: linear-gradient(90deg, rgba(196, 78, 104, 0.16) 0 50%, rgba(196, 78, 104, 0.22) 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
}

.segment-adjust-overlay.is-boost .segment-adjust-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, rgba(196, 78, 104, 0.42) 0 50%, rgba(196, 78, 104, 0.52) 50% 100%);
}

.segment-adjust-overlay.is-boost .segment-adjust-range::-moz-range-track {
  background: linear-gradient(90deg, rgba(196, 78, 104, 0.42) 0 50%, rgba(196, 78, 104, 0.52) 50% 100%);
}

.segment-adjust-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  border: 1.8px solid rgba(19, 19, 19, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.88) 0 28%, rgba(253, 249, 243, 0.95) 29% 100%);
  box-shadow: 0 2px 5px rgba(40, 29, 16, 0.16);
}

.segment-adjust-confirm {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(253, 249, 243, 0.7);
  color: var(--ink);
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.segment-adjust-confirm:hover,
.segment-adjust-confirm:focus-visible {
  background: rgba(247, 241, 232, 0.96);
}

.segment-adjust-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1.8px solid rgba(19, 19, 19, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.88) 0 28%, rgba(253, 249, 243, 0.95) 29% 100%);
  box-shadow: 0 2px 5px rgba(40, 29, 16, 0.16);
}

.tool-cursor-indicator .spring-icon,
.tool-cursor-indicator .damper-icon,
.tool-cursor-indicator .elasticity-icon {
  width: 34px;
  height: 18px;
}

.menu-button-icon {
  width: 84%;
  height: 84%;
}

.header-question-button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.question-button-icon {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.board-frame {
  --ball-setup-slot: 0px;
  --board-tool-column-x: 10px;
  --board-toolbox-bottom: 98px;
  --board-pan-bottom: 56px;
  --board-play-right: 12px;
  --board-play-size: 44px;
  --board-play-align-offset: -7px;
  --board-play-bottom: calc(var(--board-toolbox-bottom) + var(--board-play-align-offset));
  position: relative;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.play-layout {
  --sidebox-width: 286px;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebox-width);
  gap: 8px;
}

.board-frame {
  grid-column: 1;
  grid-row: 1;
}

.sidebox {
  grid-column: 2;
  grid-row: 1;
}

.app-shell.is-sidebox-left .play-layout {
  grid-template-columns: var(--sidebox-width) minmax(0, 1fr);
}

.app-shell.is-sidebox-left .board-frame {
  grid-column: 2;
}

.app-shell.is-sidebox-left .sidebox {
  grid-column: 1;
}

.app-shell.is-board-side-hidden .play-layout {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.is-board-side-hidden .board-frame {
  grid-column: 1;
}

.sidebox {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.sidebox.is-dragging {
  cursor: grabbing;
}

.sidebox :is(button, input, textarea, select, a, label) {
  cursor: revert;
}

.app-shell.is-board-side-hidden .sidebox {
  display: none;
}

.app-shell.is-help-board-open .board-toolbox-widget,
.app-shell.is-help-board-open .board-pan-button,
.app-shell.is-help-board-open .board-zoom-readout,
.app-shell.is-help-board-open .board-corner-actions,
.app-shell.is-help-board-open .board-play-button,
.app-shell.is-help-board-open .board-history-controls,
.app-shell.is-help-board-open .board-tray-toggle,
.app-shell.is-help-board-open .board-map-caption-board,
.app-shell.is-help-board-open .board-button-tooltip,
.app-shell.is-help-board-open > .board-tray-hide-toggle,
.app-shell.is-help-board-open > .board-top-toggle,
.app-shell.is-help-board-open > .board-side-toggle {
  display: none !important;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  touch-action: none;
  background: linear-gradient(180deg, #fdf9f3, #f6f1ea);
}

#game-canvas.is-pan-ready {
  cursor: url("./assets/panhand-mark.png") 15 15, grab;
}

#game-canvas.is-panning {
  cursor: url("./assets/panhand-mark.png") 15 15, grabbing;
}

.board-overlay {
  position: absolute;
  inset: 12px;
  pointer-events: none;
}

.board-corner-actions {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.board-zoom-readout {
  position: absolute;
  left: 9px;
  bottom: 41px;
  z-index: 4;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  width: 32px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(19, 19, 19, 0.82);
  font-size: 0.44rem;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
}

.board-zoom-readout span {
  font-weight: 700;
  text-transform: lowercase;
}

.board-zoom-readout strong {
  font-size: 0.48rem;
  font-weight: 900;
}

.board-toolbox-widget {
  position: absolute;
  left: var(--board-tool-column-x);
  bottom: var(--board-toolbox-bottom);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
}

.board-toolbox-button {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  filter: drop-shadow(0 5px 8px rgba(22, 18, 12, 0.16));
  transition: transform 120ms ease, filter 120ms ease;
}

.board-toolbox-button img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  transform: rotate(-5deg);
  pointer-events: none;
}

.board-toolbox-button:hover,
.board-toolbox-button:focus-visible {
  transform: translateY(-1px) rotate(-2deg);
  filter: drop-shadow(0 7px 11px rgba(22, 18, 12, 0.2));
}

.board-toolbox-active-badge {
  position: absolute;
  right: -5px;
  bottom: -4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 18px;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(22, 18, 12, 0.22));
}

.board-toolbox-active-badge .toolbox-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 15px;
  line-height: 1;
}

.board-toolbox-active-badge .line-icon {
  width: 18px;
  height: 15px;
}

.board-toolbox-active-badge .line-icon svg,
.board-toolbox-active-badge .perforate-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.board-toolbox-active-badge .line-icon path {
  fill: none;
  stroke: #161616;
  stroke-width: 4.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-toolbox-active-badge .perforate-icon {
  width: 18px;
  height: 15px;
  color: #d77a22;
}

.board-toolbox-active-badge .perforate-icon path {
  fill: none;
  stroke: #d77a22;
  stroke-width: 4.6;
  stroke-dasharray: 0 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-toolbox-active-badge .boostslow-icon {
  width: 17px;
  height: 15px;
  overflow: hidden;
}

.board-toolbox-active-badge .boostslow-icon path {
  stroke-width: 4.8;
}

.board-toolbox-active-badge .boostslow-icon .boostslow-boost path {
  stroke: #c83232;
}

.board-toolbox-active-badge .boostslow-icon .boostslow-slow path {
  stroke: #c83232;
}

.board-toolbox-active-badge .portal-icon {
  width: 10px;
  height: 18px;
}

.board-toolbox-active-badge .portal-icon path {
  stroke: #7c68bf;
  stroke-width: 4.7;
}

.board-toolbox-active-badge .elasticity-icon {
  width: 17px;
  height: 15px;
  overflow: hidden;
}

.board-toolbox-active-badge .elasticity-icon path {
  stroke-width: 4.7;
}

.board-toolbox-active-badge .elasticity-icon .elasticity-spring,
.board-toolbox-active-badge .elasticity-icon .elasticity-damper {
  transform: none;
}

.board-toolbox-active-badge .elasticity-icon .elasticity-spring path {
  stroke: #3b9a5c;
}

.board-toolbox-active-badge .elasticity-icon .elasticity-damper path {
  stroke: #cf5058;
}

.board-toolbox-active-badge .eraser-toolbar-icon,
.board-toolbox-active-badge .eraser-toolbar-icon img {
  width: 15px;
  height: 15px;
}

.board-toolbox-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 7;
  display: grid;
  grid-template-columns: 32px;
  justify-items: center;
  gap: 5px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.96);
  transform-origin: center bottom;
  transition: opacity 120ms ease, transform 120ms ease;
}

.board-toolbox-widget:hover .board-toolbox-popover,
.board-toolbox-widget:focus-within .board-toolbox-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.board-toolbox-mini {
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  width: 32px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.34rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
}

.board-toolbox-mini > span:last-child {
  display: none;
}

.board-toolbox-mini:hover,
.board-toolbox-mini:focus-visible {
  background: transparent;
  transform: translateY(-1px) rotate(-0.25deg) scale(1.08);
}

.board-toolbox-mini .toolbox-mini-icon {
  display: inline-flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 16px;
  line-height: 1;
}

.board-toolbox-mini .line-icon {
  width: 27px;
  height: 16px;
}

.board-toolbox-mini .line-icon svg,
.board-toolbox-mini .perforate-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.board-toolbox-mini .line-icon path {
  fill: none;
  stroke: #161616;
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-toolbox-mini .perforate-icon {
  width: 27px;
  height: 16px;
  color: #d77a22;
}

.board-toolbox-mini .perforate-icon path {
  fill: none;
  stroke: #d77a22;
  stroke-width: 4.4;
  stroke-dasharray: 0 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-toolbox-mini .boostslow-icon {
  width: 26px;
  height: 16px;
  overflow: hidden;
}

.board-toolbox-mini .boostslow-icon path {
  stroke-width: 4.8;
}

.board-toolbox-mini .boostslow-icon .boostslow-boost path {
  stroke: #c83232;
}

.board-toolbox-mini .boostslow-icon .boostslow-slow path {
  stroke: #c83232;
}

.board-toolbox-mini .portal-icon {
  width: 10px;
  height: 22px;
  transform: none;
}

.board-toolbox-mini .portal-icon path {
  stroke: #7c68bf;
  stroke-width: 4.4;
}

.board-toolbox-mini .elasticity-icon {
  width: 26px;
  height: 16px;
  overflow: hidden;
}

.board-toolbox-mini .elasticity-icon path {
  stroke-width: 4.7;
}

.board-toolbox-mini .elasticity-icon .elasticity-spring,
.board-toolbox-mini .elasticity-icon .elasticity-damper {
  transform: none;
}

.board-toolbox-mini .elasticity-icon .elasticity-spring path {
  stroke: #3b9a5c;
}

.board-toolbox-mini .elasticity-icon .elasticity-damper path {
  stroke: #cf5058;
}

.board-toolbox-mini .eraser-toolbar-icon {
  width: 16px;
  height: 16px;
}

.board-toolbox-mini .eraser-toolbar-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-shell.is-grayscale .board-toolbox-mini .perforate-icon {
  color: #d77a22;
}

.app-shell.is-grayscale .board-toolbox-mini .boostslow-icon .boostslow-boost path {
  stroke: #c24783;
}

.app-shell.is-grayscale .board-toolbox-mini .boostslow-icon .boostslow-slow path {
  stroke: #2f91d0;
}

.app-shell.is-grayscale .board-toolbox-mini .portal-icon path {
  stroke: #7c68bf;
}

.app-shell.is-grayscale .board-toolbox-mini .elasticity-icon .elasticity-spring path {
  stroke: #3b9a5c;
}

.app-shell.is-grayscale .board-toolbox-mini .elasticity-icon .elasticity-damper path {
  stroke: #cf5058;
}

.board-pan-button {
  position: absolute;
  left: var(--board-tool-column-x);
  bottom: var(--board-pan-bottom);
  top: auto;
  z-index: 3;
  display: block;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 120ms ease, filter 120ms ease;
}

.board-pan-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.board-pan-button:hover,
.board-pan-button.is-active {
  transform: translateY(-1px) rotate(-2deg);
}

.board-pan-button.is-active {
  filter: drop-shadow(0 0 0.2rem rgba(36, 94, 255, 0.45));
}

.board-reset-button {
  position: relative;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(253, 249, 243, 0.88);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.board-reset-button:hover {
  background: rgba(247, 241, 232, 0.96);
  transform: translateY(-1px) rotate(-0.3deg);
}

.board-clear-button {
  width: 64px;
  height: 46px;
  transform: translateY(-3px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.board-clear-button:hover {
  background: transparent;
  transform: translateY(-4px) rotate(-0.3deg);
}

.board-repeat-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.board-repeat-button:hover {
  background: transparent;
}

.board-reset-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.board-clear-icon {
  display: block;
  width: 82px;
  height: 59px;
}

.board-repeat-icon {
  display: block;
  width: 42px;
  height: 42px;
}

.board-expand-icon {
  display: block;
  width: 36px;
  height: 36px;
}

.board-clear-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-repeat-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-expand-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-reset-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.board-reset-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-reset-icon path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-reset-button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: rgba(253, 249, 243, 0.96);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.board-reset-button:hover::after,
.board-reset-button:focus-visible::after {
  opacity: 1;
}

.board-frame .board-reset-button::after {
  content: none;
}

.board-expand-button {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  bottom: auto;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.board-expand-button:hover {
  background: transparent;
}

.board-expand-button::after {
  border: 0;
}

.board-play-button {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: var(--board-play-bottom);
  top: auto;
  transform: translateX(-50%);
  z-index: 9;
  width: var(--board-play-size);
  height: var(--board-play-size);
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}

.board-play-button::before {
  content: "";
  position: absolute;
  inset: 13%;
  z-index: -1;
  border-radius: 999px;
  background: rgba(253, 249, 243, 0.98);
  animation: boardPlayFillPulse 3.2s ease-in-out infinite;
}

.board-play-button:hover {
  background: transparent;
  transform: translateX(-50%) translateY(-1px) rotate(-0.3deg);
}

.board-play-icon {
  --play-tone-filter: saturate(0.78) brightness(0.96);
  width: var(--board-play-size, 100%);
  height: var(--board-play-size, 100%);
  object-fit: contain;
  transform-origin: center;
  filter: var(--play-tone-filter);
  animation: boardPlayPulse 3.2s ease-in-out infinite;
}

@keyframes boardPlayPulse {
  0%,
  64%,
  100% {
    transform: scale(1);
    filter: var(--play-tone-filter) drop-shadow(0 3px 0 rgba(32, 26, 18, 0.12));
  }

  74% {
    transform: scale(1.16);
    filter: var(--play-tone-filter) drop-shadow(0 6px 0 rgba(32, 26, 18, 0.14));
  }

  82% {
    transform: scale(0.98);
  }

  90% {
    transform: scale(1.09);
  }
}

@keyframes boardPlayFillPulse {
  0%,
  64%,
  100% {
    transform: scale(1);
  }

  74% {
    transform: scale(1.16);
  }

  82% {
    transform: scale(0.98);
  }

  90% {
    transform: scale(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-play-icon,
  .board-play-button::before {
    animation: none;
  }
}

.board-map-caption {
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(44, 40, 36, 0.82);
  text-transform: lowercase;
  white-space: nowrap;
}

.board-map-caption-board {
  position: absolute;
  left: 50%;
  right: auto;
  top: 3px;
  bottom: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.board-button-tooltip {
  position: absolute;
  left: 50%;
  top: clamp(18px, 3vh, 28px);
  bottom: auto;
  z-index: 20;
  max-width: min(520px, calc(100% - 92px));
  padding: 5px 13px;
  border: 1px solid rgba(19, 19, 19, 0.12);
  border-radius: 999px;
  background: rgba(253, 249, 243, 0.78);
  color: rgba(19, 19, 19, 0.72);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.045em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(28, 22, 14, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-5px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.board-button-tooltip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.board-tray-toggle {
  position: absolute;
  left: auto;
  right: clamp(18px, 4vw, 46px);
  bottom: 6px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 18px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(253, 249, 243, 0.96);
  box-shadow: 0 5px 14px rgba(22, 18, 12, 0.14);
  transform: none;
  cursor: pointer;
}

/* Keep the bottom tray show handle exactly where the hide handle sits. */
.board-tray-toggle,
.board-tray-hide-toggle,
.app-shell.is-board-expanded .board-tray-toggle,
.app-shell.is-board-expanded .board-tray-hide-toggle {
  position: fixed;
  left: auto;
  right: clamp(70px, 13vw, 160px);
  top: var(--board-bottom-toggle-y, calc(100% - 72px));
  bottom: auto;
  z-index: 18;
  transform: translateY(-50%);
}

/* Last-pass alignment for numeric slider thumbs. Keep this after older slider rules. */
.sidebox .elasticity-controls,
.sidebox .boost-controls,
.sidebox .perforation-controls {
  --tool-thumb-size: 22px;
  --tool-thumb-half: 11px;
  --tool-header-height: 12px;
  --tool-range-height: 18px;
  --tool-range-half: 9px;
  position: relative;
  min-height: calc(var(--tool-header-height) + var(--tool-range-height));
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
}

.sidebox .elasticity-controls.is-visible,
.sidebox .boost-controls.is-visible,
.sidebox .perforation-controls.is-visible {
  display: grid;
  grid-template-rows: var(--tool-header-height) var(--tool-range-height);
}

.sidebox .elasticity-header,
.sidebox .boost-header,
.sidebox .perforation-header {
  min-height: var(--tool-header-height);
  height: var(--tool-header-height);
  line-height: 1;
}

.sidebox .elasticity-inline-number,
.sidebox .boost-inline-number,
.sidebox .perforation-inline-number {
  -moz-appearance: textfield;
  appearance: textfield;
  position: absolute;
  left: clamp(var(--tool-thumb-half), var(--tool-value-x), calc(100% - var(--tool-thumb-half)));
  top: calc(var(--tool-header-height) + var(--tool-range-half));
  z-index: 4;
  width: var(--tool-thumb-size);
  height: var(--tool-thumb-size);
  padding: 0;
  border: 1.35px solid rgba(19, 19, 19, 0.78);
  border-radius: 50%;
  background: #fdf9f3;
  box-shadow: 0 1px 3px rgba(40, 29, 16, 0.14);
  color: var(--ink);
  cursor: ew-resize;
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.36rem;
  font-weight: 800;
  line-height: var(--tool-thumb-size);
  text-align: center;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.sidebox .elasticity-range,
.sidebox .boost-range,
.sidebox .perforation-range {
  grid-row: 2;
  align-self: center;
  height: var(--tool-range-height);
  padding: 0;
}

.sidebox .elasticity-range::-webkit-slider-thumb,
.sidebox .boost-range::-webkit-slider-thumb,
.sidebox .perforation-range::-webkit-slider-thumb {
  width: var(--tool-thumb-size);
  height: var(--tool-thumb-size);
  margin-top: calc(1px - var(--tool-thumb-half));
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.sidebox .elasticity-range::-moz-range-thumb,
.sidebox .boost-range::-moz-range-thumb,
.sidebox .perforation-range::-moz-range-thumb {
  width: var(--tool-thumb-size);
  height: var(--tool-thumb-size);
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.sidebox .elasticity-inline-number::-webkit-outer-spin-button,
.sidebox .elasticity-inline-number::-webkit-inner-spin-button,
.sidebox .boost-inline-number::-webkit-outer-spin-button,
.sidebox .boost-inline-number::-webkit-inner-spin-button,
.sidebox .perforation-inline-number::-webkit-outer-spin-button,
.sidebox .perforation-inline-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .elasticity-controls,
  .sidebox .boost-controls,
  .sidebox .perforation-controls {
    --tool-thumb-size: 18px;
    --tool-thumb-half: 9px;
    --tool-header-height: 9px;
    --tool-range-height: 15px;
    --tool-range-half: 7.5px;
  }

  .sidebox .elasticity-inline-number,
  .sidebox .boost-inline-number,
  .sidebox .perforation-inline-number {
    font-size: 0.29rem;
    border-width: 1.2px;
  }
}

/* Final item group rail overrides. */
.sidebox .machine-elements-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
}

.sidebox .machine-elements-body .machine-component-list {
  min-width: 0;
  padding-right: 1px;
}

.sidebox .machine-category-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding: 2px 0 2px 1px;
}

.sidebox .machine-category-tab {
  position: relative;
  display: grid;
  place-items: center;
  width: 31px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(19, 19, 19, 0.45);
  font: inherit;
  cursor: pointer;
}

.sidebox .machine-category-tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px;
  border-top: 1.8px solid rgba(19, 19, 19, 0.22);
  border-radius: 999px;
  transform: translateX(-50%) rotate(-3deg);
}

.sidebox .machine-category-tab:first-child::before {
  display: none;
}

.sidebox .machine-category-tab::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 6px;
  bottom: 3px;
  height: 0;
  z-index: 0;
  border-bottom: 0;
  border-radius: 999px;
  background: transparent;
  transform: rotate(-3deg);
}

.sidebox .machine-category-tab .category-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
}

.sidebox .machine-category-tab .category-icon path,
.sidebox .machine-category-tab .category-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sidebox .machine-category-tab .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sidebox .machine-category-tab.is-active {
  color: rgba(19, 19, 19, 0.96);
}

.sidebox .machine-category-tab.is-active::after {
  border-bottom: 2.4px solid rgba(19, 19, 19, 0.82);
}

/* Final launch controls: play starts large on the board, then docks back into the header. */
.app-shell:not(.is-round-running):not(.is-play-docked) .header-play-button.asset-button {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  width: clamp(74px, 7.2vw, 112px) !important;
  height: clamp(74px, 7.2vw, 112px) !important;
  z-index: 28 !important;
  border-width: 2.8px !important;
  box-shadow: 0 7px 0 rgba(19, 19, 19, 0.12), 0 15px 28px rgba(30, 25, 18, 0.13);
}

.app-shell:not(.is-round-running):not(.is-play-docked) .topbar {
  z-index: 32;
}

.app-shell:not(.is-round-running):not(.is-play-docked) .header-play-mark {
  width: 50%;
  height: 56%;
}

.board-history-controls {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  bottom: auto !important;
  z-index: 27 !important;
  gap: clamp(96px, 11vw, 154px) !important;
  transform: translate(-50%, -50%) !important;
}

.app-shell.is-round-running .board-history-controls,
.app-shell.is-play-docked .board-history-controls {
  top: 82px !important;
  gap: clamp(62px, 7vw, 92px) !important;
}

.app-shell:not(.is-round-running):not(.is-play-docked) .board-history-controls .run-control-button {
  transform: scale(1.12);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .app-shell:not(.is-round-running):not(.is-play-docked) .header-play-button.asset-button {
    width: 62px !important;
    height: 62px !important;
  }

  .board-history-controls {
    gap: 86px !important;
  }

  .app-shell.is-round-running .board-history-controls,
  .app-shell.is-play-docked .board-history-controls {
    top: 36px !important;
    gap: 48px !important;
  }
}

.sidebox .machine-component[hidden] {
  display: none;
}

.machine-icon-roller {
  width: 35px;
  max-width: 36px;
  height: 23px;
}

.machine-icon-drive-belt {
  width: 37px;
  max-width: 38px;
  height: 23px;
}

.machine-icon-weight {
  width: 20px;
  max-width: 22px;
  height: 26px;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .machine-elements-body {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 2px;
  }

  .sidebox .machine-category-tab {
    width: 23px;
    height: 30px;
  }

  .sidebox .machine-category-tab::before {
    width: 14px;
    border-top-width: 1.3px;
  }

  .sidebox .machine-category-tab .category-icon {
    width: 16px;
    height: 16px;
  }

  .machine-icon-roller,
  .machine-icon-drive-belt {
    width: 27px;
    max-width: 28px;
    height: 17px;
  }

  .machine-icon-weight {
    width: 15px;
    max-width: 16px;
    height: 19px;
  }
}

/* Final item category rail: use the cut-out symbols from itemspion.png. */
.sidebox .machine-elements-body {
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 4px;
}

.sidebox .machine-category-tabs {
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 2px 0 0;
}

.sidebox .machine-category-tab {
  position: relative;
  display: grid;
  place-items: center;
  width: 27px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  opacity: 0.5;
}

.sidebox .machine-category-tab::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: -2px;
  height: 2px;
  border-top: 1.4px solid rgba(19, 19, 19, 0.28);
  transform: rotate(-1deg);
}

.sidebox .machine-category-tab:first-child::before {
  display: none;
}

.sidebox .machine-category-tab::after {
  display: none;
}

.sidebox .machine-category-tab .category-icon {
  display: block;
  width: 24px;
  height: 32px;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
}

.sidebox .machine-category-tab .category-icon-all,
.sidebox .machine-category-tab .category-icon-force {
  width: 25px;
  height: 25px;
}

.sidebox .machine-category-tab .category-icon-drive,
.sidebox .machine-category-tab .category-icon-frame,
.sidebox .machine-category-tab .category-icon-gates {
  width: 26px;
  height: 33px;
}

.sidebox .machine-category-tab.is-active {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 1;
  transform: scale(1.05);
}

.sidebox .machine-category-tab.is-active .category-icon {
  filter: grayscale(1) contrast(1.18);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .machine-elements-body {
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 2px;
  }

  .sidebox .machine-category-tabs {
    gap: 1px;
  }

  .sidebox .machine-category-tab {
    width: 21px;
    height: 34px;
  }

  .sidebox .machine-category-tab .category-icon {
    width: 20px;
    height: 25px;
  }

  .sidebox .machine-category-tab .category-icon-all,
  .sidebox .machine-category-tab .category-icon-force {
    width: 20px;
    height: 20px;
  }

  .sidebox .machine-category-tab .category-icon-drive,
  .sidebox .machine-category-tab .category-icon-frame,
  .sidebox .machine-category-tab .category-icon-gates {
    width: 21px;
    height: 26px;
  }
}

/* Final category rail: icon-only group filters with hand-drawn separators. */
.sidebox .machine-elements-body {
  grid-template-columns: minmax(0, 1fr) 32px !important;
  gap: 3px !important;
}

.sidebox .machine-category-tabs {
  gap: 0 !important;
  padding: 2px 0 2px 1px !important;
}

.sidebox .machine-category-tab {
  position: relative;
  display: grid;
  place-items: center;
  width: 31px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(19, 19, 19, 0.46);
  font: inherit !important;
}

.sidebox .machine-category-tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px;
  border-top: 1.8px solid rgba(19, 19, 19, 0.22);
  border-radius: 999px;
  transform: translateX(-50%) rotate(-3deg);
}

.sidebox .machine-category-tab:first-child::before {
  display: none;
}

.sidebox .machine-category-tab::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 6px;
  bottom: 3px;
  height: 0;
  border-bottom: 0;
  border-radius: 999px;
  background: transparent;
  transform: rotate(-3deg);
}

.sidebox .machine-category-tab > span:not(.sr-only) {
  transform: none;
}

.sidebox .machine-category-tab .category-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
}

.sidebox .machine-category-tab .category-icon path,
.sidebox .machine-category-tab .category-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sidebox .machine-category-tab .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sidebox .machine-category-tab.is-active {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(19, 19, 19, 0.96);
}

.sidebox .machine-category-tab.is-active::after {
  border-bottom: 2.4px solid rgba(19, 19, 19, 0.82);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .machine-elements-body {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    gap: 2px !important;
  }

  .sidebox .machine-category-tabs {
    gap: 0 !important;
  }

  .sidebox .machine-category-tab {
    width: 23px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
  }

  .sidebox .machine-category-tab::before {
    width: 14px;
    border-top-width: 1.3px;
  }

  .sidebox .machine-category-tab .category-icon {
    width: 16px;
    height: 16px;
  }
}

/* Item group rail on the tall sidebox list. */
.sidebox .machine-elements-panel {
  min-height: 0;
}

.sidebox .machine-elements-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27px;
  gap: 4px;
  min-height: 0;
  overflow: hidden;
}

.sidebox .machine-elements-body .machine-component-list {
  min-width: 0;
  padding-right: 1px;
}

.sidebox .machine-category-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 0 1px 0 0;
}

.sidebox .machine-category-tab {
  position: relative;
  display: grid;
  place-items: center;
  width: 25px;
  height: 58px;
  padding: 0;
  border: 1.7px solid rgba(19, 19, 19, 0.28);
  border-radius: 6px;
  background: rgba(253, 249, 243, 0.42);
  color: rgba(19, 19, 19, 0.48);
  font: inherit;
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.sidebox .machine-category-tab span {
  display: block;
  transform: rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
}

.sidebox .machine-category-tab.is-active {
  border-color: rgba(19, 19, 19, 0.86);
  background: rgba(19, 19, 19, 0.9);
  color: #fdf9f3;
}

.sidebox .machine-component[hidden] {
  display: none;
}

.machine-icon-roller {
  width: 35px;
  max-width: 36px;
  height: 23px;
}

.machine-icon-drive-belt {
  width: 37px;
  max-width: 38px;
  height: 23px;
}

.machine-icon-weight {
  width: 20px;
  max-width: 22px;
  height: 26px;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .machine-elements-body {
    grid-template-columns: minmax(0, 1fr) 21px;
    gap: 2px;
  }

  .sidebox .machine-category-tabs {
    gap: 2px;
  }

  .sidebox .machine-category-tab {
    width: 20px;
    height: 40px;
    border-width: 1.2px;
    border-radius: 4px;
    font-size: 0.34rem;
  }

  .sidebox .machine-component-list {
    gap: 1px;
  }

  .machine-icon-roller,
  .machine-icon-drive-belt {
    width: 27px;
    max-width: 28px;
    height: 17px;
  }

  .machine-icon-weight {
    width: 15px;
    max-width: 16px;
    height: 19px;
  }
}

/* Default BALL panel for the upper sidebox when no board item is selected. */
.sidebox .sidebox-tool-zone.has-ball-setup {
  --active-tool-box-height: 146px;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.sidebox .sidebox-tool-zone.has-ball-setup > .tool-preview-copy {
  display: none;
}

.sidebox .sidebox-tool-preview.ball-setup-preview {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 25px 27px 28px minmax(28px, 1fr);
  align-items: stretch;
  gap: 2px;
  width: 100%;
  min-height: 0;
  max-height: none;
  height: 100%;
  padding: 0;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls {
  grid-template-rows: 24px 20px 25px 23px minmax(22px, 1fr);
  gap: 1px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-strip {
  gap: 3px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-option {
  width: 21px;
  height: 19px;
  min-width: 21px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-command {
  width: 16px;
  height: 19px;
  min-width: 16px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-option img {
  width: 16px;
  height: 16px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-option span {
  font-size: 0.4rem;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-fields {
  gap: 2px 4px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-input {
  height: 19px;
  font-size: 0.58rem;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-type-strip {
  gap: 2px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-type-option {
  width: 24px;
  height: 22px;
  min-width: 24px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-type-option img {
  width: 20px;
  height: 20px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-type-option::after {
  bottom: -1px;
  height: 1.5px;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-params {
  gap: 1px 3px;
  align-content: start;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-param {
  gap: 1px;
  font-size: 0.3rem;
}

.sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-param strong {
  font-size: 0.36rem;
}

.ball-start-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.ball-start-option,
.ball-start-command {
  position: relative;
  display: grid;
  place-items: center;
  width: 23px;
  height: 22px;
  min-width: 23px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
}

.ball-start-option img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.ball-start-option span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  color: rgba(19, 19, 19, 0.8);
  font-size: 0.46rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(253, 249, 243, 0.9);
}

.ball-start-option.active {
  transform: translateY(-1px) scale(1.08);
}

.ball-start-option.active::after,
.ball-start-option:focus-visible::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: rgba(42, 91, 64, 0.78);
  transform: translateX(-50%);
}

.ball-start-command {
  width: 18px;
  min-width: 18px;
  color: rgba(19, 19, 19, 0.78);
}

.ball-start-command:disabled {
  opacity: 0.28;
  cursor: default;
}

.ball-setup-head {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ball-setup-active-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 23px;
  min-width: 29px;
}

.ball-setup-active-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ball-setup-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ball-setup-active-label {
  max-width: 72px;
  overflow: hidden;
  color: rgba(19, 19, 19, 0.68);
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ball-setup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.ball-setup-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-width: 0;
  color: rgba(19, 19, 19, 0.68);
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.46rem;
  font-weight: 900;
  line-height: 1;
}

.ball-setup-input {
  -moz-appearance: textfield;
  appearance: textfield;
  width: 100%;
  min-width: 0;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.ball-setup-input:focus-visible {
  outline: none;
  color: rgba(42, 91, 64, 0.98);
  text-shadow: 0 1px 0 rgba(253, 249, 243, 0.85);
}

.ball-setup-input::-webkit-outer-spin-button,
.ball-setup-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ball-type-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}

.ball-type-option {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.ball-type-option:hover,
.ball-type-option:focus-visible,
.ball-type-option.active {
  background: transparent;
  box-shadow: none;
}

.ball-type-option.active {
  outline: none;
  transform: translateY(-1px) scale(1.1);
}

.ball-type-option:focus-visible {
  outline: none;
}

.ball-type-option::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(-50%);
}

.ball-type-option.active::after,
.ball-type-option:focus-visible::after {
  background: rgba(42, 91, 64, 0.78);
}

.ball-type-option img {
  display: block;
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.ball-setup-params {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 2px 5px;
  min-width: 0;
  overflow: hidden;
}

.ball-setup-param {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px;
  min-width: 0;
  color: rgba(19, 19, 19, 0.58);
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.34rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.ball-setup-param strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(19, 19, 19, 0.86);
  font-size: 0.42rem;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone.has-ball-setup {
    --active-tool-box-height: 102px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview {
    grid-template-rows: 19px 22px 22px minmax(25px, 1fr);
    gap: 2px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls {
    grid-template-rows: 17px 15px 18px 16px minmax(14px, 1fr);
    gap: 1px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-strip {
    gap: 2px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-option {
    width: 18px;
    height: 15px;
    min-width: 18px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-command {
    width: 13px;
    height: 15px;
    min-width: 13px;
    font-size: 0.48rem;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-option img {
    width: 13px;
    height: 13px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-start-option span {
    right: -1px;
    bottom: -1px;
    font-size: 0.31rem;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-fields {
    gap: 1px 3px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-field {
    gap: 1px;
    font-size: 0.28rem;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-input {
    height: 16px;
    font-size: 0.46rem;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-type-strip {
    gap: 1px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-type-option {
    width: 18px;
    height: 16px;
    min-width: 18px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-type-option img {
    width: 15px;
    height: 15px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-type-option::after {
    bottom: -1px;
    width: 10px;
    height: 1px;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-params {
    gap: 0 2px;
    align-content: start;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-param {
    gap: 1px;
    font-size: 0.24rem;
    line-height: 0.95;
  }

  .sidebox .sidebox-tool-preview.ball-setup-preview.has-ball-start-controls .ball-setup-param strong {
    font-size: 0.29rem;
  }

  .ball-setup-head {
    grid-template-columns: 21px minmax(0, 1fr) auto;
    gap: 3px;
  }

  .ball-setup-active-icon {
    width: 21px;
    height: 17px;
    min-width: 21px;
  }

  .ball-setup-title {
    font-size: 0.54rem;
  }

  .ball-setup-active-label {
    max-width: 52px;
    font-size: 0.38rem;
  }

  .ball-setup-fields {
    gap: 3px;
  }

  .ball-setup-field {
    gap: 2px;
    font-size: 0.31rem;
  }

  .ball-setup-input {
    height: 19px;
    font-size: 0.43rem;
  }

  .ball-type-strip {
    gap: 2px;
  }

  .ball-type-option {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .ball-type-option img {
    width: 18px;
    height: 18px;
  }

  .ball-setup-params {
    gap: 1px 3px;
  }

  .ball-setup-param {
    gap: 1px;
    font-size: 0.23rem;
  }

  .ball-setup-param strong {
    font-size: 0.29rem;
  }
}

.ball-toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 28px;
}

.ball-toolbar-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .ball-toolbar-icon {
    width: 34px;
    height: 23px;
  }
}

@media (min-width: 1280px) and (min-height: 720px) {
  .topbar,
  .bottombar,
  .board-frame,
  .io-panel,
  .sidebox .sidebox-tool-zone,
  .sidebox .sidebox-elements-zone {
    border-width: 2.4px;
  }
}

/* Keep the tall balloon source fully visible in the compact one-line item list. */
.machine-component.is-queued[data-item-type="balloon"] {
  overflow: visible;
}

.machine-component.is-queued .machine-icon-balloon {
  width: 20px;
  max-width: 20px;
  height: 25px;
  max-height: 25px;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .machine-component.is-queued .machine-icon-balloon {
    width: 15px;
    max-width: 15px;
    height: 18px;
    max-height: 18px;
  }
}

/* Final numeric slider thumb treatment. */
.sidebox .elasticity-controls,
.sidebox .boost-controls,
.sidebox .perforation-controls {
  position: relative;
  min-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  gap: 1px;
}

.sidebox .elasticity-controls.is-visible,
.sidebox .boost-controls.is-visible,
.sidebox .perforation-controls.is-visible {
  display: grid;
  grid-template-rows: 14px 22px;
}

.sidebox .elasticity-header,
.sidebox .boost-header,
.sidebox .perforation-header {
  min-height: 14px;
  line-height: 1;
}

.sidebox .elasticity-header span,
.sidebox .boost-header span,
.sidebox .perforation-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebox .elasticity-inline-number,
.sidebox .boost-inline-number,
.sidebox .perforation-inline-number {
  -moz-appearance: textfield;
  appearance: textfield;
  position: absolute;
  left: clamp(15px, var(--tool-value-x), calc(100% - 15px));
  top: 17px;
  z-index: 4;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid rgba(19, 19, 19, 0.78);
  border-radius: 50%;
  background: #fdf9f3;
  box-shadow: 0 2px 5px rgba(40, 29, 16, 0.16);
  color: var(--ink);
  cursor: ew-resize;
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.46rem;
  font-weight: 800;
  line-height: 30px;
  text-align: center;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.sidebox .elasticity-inline-number:focus,
.sidebox .boost-inline-number:focus,
.sidebox .perforation-inline-number:focus {
  outline: 2px solid rgba(19, 19, 19, 0.72);
  outline-offset: 2px;
  cursor: text;
}

.sidebox .elasticity-inline-number.is-dragging-thumb,
.sidebox .boost-inline-number.is-dragging-thumb,
.sidebox .perforation-inline-number.is-dragging-thumb {
  cursor: ew-resize;
}

.sidebox .elasticity-inline-number::-webkit-outer-spin-button,
.sidebox .elasticity-inline-number::-webkit-inner-spin-button,
.sidebox .boost-inline-number::-webkit-outer-spin-button,
.sidebox .boost-inline-number::-webkit-inner-spin-button,
.sidebox .perforation-inline-number::-webkit-outer-spin-button,
.sidebox .perforation-inline-number::-webkit-inner-spin-button,
.item-property-number::-webkit-outer-spin-button,
.item-property-number::-webkit-inner-spin-button,
.item-param-number::-webkit-outer-spin-button,
.item-param-number::-webkit-inner-spin-button,
.advanced-param-number::-webkit-outer-spin-button,
.advanced-param-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.item-property-number,
.item-param-number,
.advanced-param-number {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sidebox .elasticity-range,
.sidebox .boost-range,
.sidebox .perforation-range {
  grid-row: 2;
  align-self: center;
  height: 22px;
  padding: 0;
  cursor: pointer;
}

.sidebox .elasticity-range::-webkit-slider-thumb,
.sidebox .boost-range::-webkit-slider-thumb,
.sidebox .perforation-range::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.sidebox .elasticity-range::-moz-range-thumb,
.sidebox .boost-range::-moz-range-thumb,
.sidebox .perforation-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .elasticity-controls,
  .sidebox .boost-controls,
  .sidebox .perforation-controls {
    min-height: 30px;
  }

  .sidebox .elasticity-controls.is-visible,
  .sidebox .boost-controls.is-visible,
  .sidebox .perforation-controls.is-visible {
    grid-template-rows: 10px 18px;
  }

  .sidebox .elasticity-header,
  .sidebox .boost-header,
  .sidebox .perforation-header {
    min-height: 10px;
  }

  .sidebox .elasticity-inline-number,
  .sidebox .boost-inline-number,
  .sidebox .perforation-inline-number {
    left: clamp(11px, var(--tool-value-x), calc(100% - 11px));
    top: 13px;
    width: 22px;
    height: 22px;
    font-size: 0.34rem;
    line-height: 22px;
  }

  .sidebox .elasticity-range,
  .sidebox .boost-range,
  .sidebox .perforation-range {
    height: 18px;
  }

  .sidebox .elasticity-range::-webkit-slider-thumb,
  .sidebox .boost-range::-webkit-slider-thumb,
  .sidebox .perforation-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -10px;
  }

  .sidebox .elasticity-range::-moz-range-thumb,
  .sidebox .boost-range::-moz-range-thumb,
  .sidebox .perforation-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}

.board-tray-toggle[hidden] {
  display: none !important;
}

.board-tray-toggle-icon {
  width: 14px;
  height: 10px;
}

.board-tray-toggle-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.board-tray-toggle-icon path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-tray-toggle.is-open .board-tray-toggle-icon {
  transform: rotate(180deg);
}

.board-tray-hide-toggle,
.board-top-toggle {
  position: absolute;
  z-index: 18;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(253, 249, 243, 0.96);
  box-shadow: 0 5px 14px rgba(22, 18, 12, 0.14);
  cursor: pointer;
}

.board-tray-hide-toggle {
  right: clamp(70px, 13vw, 160px);
  top: var(--board-bottom-toggle-y, calc(100% - 72px));
  bottom: auto;
  transform: translateY(-50%);
}

.board-top-toggle {
  left: auto;
  right: clamp(12px, 4vw, 46px);
  top: var(--board-top-toggle-y, 64px);
  transform: translateY(-50%);
}

.app-shell.is-board-top-hidden .board-top-toggle {
  top: 4px;
  transform: none;
}

.board-top-toggle:not(.is-open) .board-tray-toggle-icon {
  transform: rotate(180deg);
}

.board-tray-hide-toggle[hidden],
.board-top-toggle[hidden] {
  display: none !important;
}

.board-side-toggle {
  position: fixed;
  z-index: 18;
  left: calc(var(--board-side-toggle-x, 100vw) - 9px);
  right: auto;
  top: var(--board-side-toggle-y, 50vh);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(253, 249, 243, 0.96);
  box-shadow: 0 5px 14px rgba(22, 18, 12, 0.14);
  transform: translateY(-50%);
  transition: left 160ms ease, transform 120ms ease;
  cursor: pointer;
}

.board-side-toggle .board-tray-toggle-icon {
  width: 10px;
  height: 16px;
}

.board-side-toggle.is-open .board-tray-toggle-icon {
  transform: rotate(180deg);
}

.app-shell.is-sidebox-left .board-side-toggle .board-tray-toggle-icon {
  transform: rotate(180deg);
}

.app-shell.is-sidebox-left .board-side-toggle.is-open .board-tray-toggle-icon {
  transform: none;
}

.board-side-toggle[hidden] {
  display: none !important;
}

.board-ball-setup {
  position: absolute;
  left: 164px;
  top: 26px;
  z-index: 3;
  display: inline-grid;
  gap: 4px;
  min-width: 0;
  width: max-content;
  padding: 4px 0 4px 4px;
  border: 1.25px solid #2458b8;
  border-radius: 10px;
  background: rgba(253, 249, 243, 0.92);
  box-shadow: 0 6px 18px rgba(40, 29, 16, 0.08);
  cursor: grab;
  user-select: none;
}

.board-ball-setup.is-hidden {
  display: none;
}

.board-ball-setup.is-dragging {
  cursor: grabbing;
}

.board-ball-field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: rgba(19, 19, 19, 0.86);
}

.board-ball-field span {
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.board-ball-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
}

.board-ball-label-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-ball-field input {
  width: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  color: var(--ink);
  font: inherit;
  text-align: center;
}

.topbar .board-ball-setup,
.app-shell.is-board-expanded .topbar .board-ball-setup {
  position: static;
  left: auto;
  top: auto;
  z-index: auto;
  display: inline-grid;
  grid-template-columns: max-content;
  grid-auto-rows: max-content;
  align-items: center;
  gap: 1px;
  min-width: 0;
  width: max-content;
  padding: 2px 3px 2px 4px;
  border-width: 1px;
  border-radius: 9px;
  background: rgba(253, 249, 243, 0.74);
  box-shadow: none;
  cursor: default;
  user-select: auto;
}

.topbar .board-ball-field,
.app-shell.is-board-expanded .topbar .board-ball-field {
  grid-template-columns: auto auto;
  gap: 3px;
  font-size: 0.52rem;
}

.topbar .board-ball-label-icon,
.app-shell.is-board-expanded .topbar .board-ball-label-icon {
  width: 18px;
  height: 14px;
}

.topbar .board-ball-field input,
.app-shell.is-board-expanded .topbar .board-ball-field input {
  width: 46px;
  padding: 0;
}

.board-run-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  pointer-events: auto;
}

.board-corner-controls {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: auto;
  gap: 10px;
}

.board-params {
  display: grid;
  gap: 4px;
  padding: 4px 6px;
  font-size: 0.7rem;
  line-height: 1.1;
  color: rgba(19, 19, 19, 0.9);
  background: rgba(251, 245, 234, 0.72);
  border-radius: 8px;
}

.board-params div {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.board-params span {
  color: rgba(88, 79, 69, 0.92);
}

.board-params strong {
  font-weight: 700;
  text-align: right;
}

.advanced-params {
  order: 30;
  display: grid;
  gap: 4px;
  margin-top: 2px;
  min-width: 0;
}

.sidebox-elements-zone > .advanced-params {
  display: none;
}

.sidebox .line-mode-controls {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.sidebox .line-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.sidebox .line-mode-button {
  width: 100%;
  max-width: none;
}

.advanced-params-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 1px auto 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: rgba(19, 19, 19, 0.82);
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.advanced-params-toggle:hover,
.advanced-params-toggle:focus-visible {
  color: rgba(19, 19, 19, 0.96);
}

.advanced-params-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.advanced-params.is-open .advanced-params-icon {
  transform: rotate(180deg);
}

.advanced-params-grid {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  max-height: min(34vh, 220px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 2px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 19, 19, 0.3) transparent;
}

.advanced-params-grid[hidden] {
  display: none;
}

.advanced-params-grid div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}

.advanced-params-grid span,
.advanced-params-grid strong {
  min-width: 0;
  white-space: nowrap;
}

.advanced-params-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-params .advanced-params {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: normal;
}

.board-params .advanced-params-toggle {
  justify-self: center;
}

.board-params .advanced-params-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px 6px;
  justify-content: normal;
}

.board-params .advanced-params-grid[hidden] {
  display: none;
}

.board-params .advanced-params-grid > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: normal;
}

.board-params .advanced-params-grid > .advanced-param-input-row {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 5px;
  align-items: center;
  justify-content: start;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.board-params .advanced-param-icon {
  width: 25px;
  min-width: 25px;
  height: 16px;
}

.board-params .advanced-param-icon img {
  max-width: 25px;
  max-height: 16px;
}

.board-params .advanced-param-number {
  width: 42px;
}

.advanced-param-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 18px;
  overflow: visible;
}

.advanced-param-icon img {
  display: block;
  max-width: 34px;
  max-height: 18px;
  object-fit: contain;
}

.advanced-param-number {
  width: 62px;
  min-width: 0;
  padding: 0 0 0 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

.advanced-param-number:focus {
  outline: 0;
}

.advanced-toggle-pill {
  padding: 0;
  border: 0;
  background: transparent;
  color: #8c3e3d;
  font: inherit;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.advanced-toggle-pill.is-on {
  color: #465c47;
}

.advanced-toggle-pill.is-off {
  color: #8c3e3d;
}

.level-editor {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(19, 19, 19, 0.18);
}

.level-editor-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: rgba(19, 19, 19, 0.84);
  font: inherit;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.level-editor-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.level-editor.is-open .level-editor-icon {
  transform: rotate(180deg);
}

.level-editor-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 6px;
  align-items: start;
  min-width: 0;
  padding: 6px 6px 7px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(253, 249, 243, 0.58), rgba(247, 241, 232, 0.34));
  box-shadow: inset 0 0 0 1px rgba(19, 19, 19, 0.08);
}

.level-editor-column {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.level-editor-panel[hidden] {
  display: none;
}

.board-params .level-editor-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  justify-content: stretch;
  align-items: start;
}

.board-params .level-editor-panel[hidden] {
  display: none;
}

.level-editor-field {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(19, 19, 19, 0.68);
}

.board-params .level-editor-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: stretch;
}

.level-editor-field input,
.level-select,
.level-generator-select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(19, 19, 19, 0.28);
  border-radius: 9px;
  background: rgba(253, 249, 243, 0.78);
  color: var(--ink);
  font: inherit;
  box-shadow: none;
}

.level-editor-field input {
  padding: 4px 6px 3px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: none;
}

.level-select {
  min-height: 58px;
  max-height: 76px;
  padding: 3px 4px;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-x: hidden;
  overflow-y: auto;
}

.level-select option {
  padding: 2px 3px;
  border-radius: 6px;
  white-space: normal;
}

.level-generator-select {
  min-height: 24px;
  padding: 3px 5px 2px;
  font-size: 0.58rem;
  font-weight: 800;
}

.level-generator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.level-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.board-params .level-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  align-items: stretch;
}

.level-editor-button {
  appearance: none;
  min-width: 0;
  padding: 4px 4px 3px;
  border: 1px solid rgba(19, 19, 19, 0.34);
  border-radius: 999px;
  background: rgba(253, 249, 243, 0.68);
  color: var(--ink);
  font: inherit;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.level-editor-button.primary {
  background: rgba(151, 198, 133, 0.32);
}

.level-editor-button.map-edit-toggle.is-active {
  background: rgba(118, 155, 103, 0.38);
  border-color: rgba(19, 19, 19, 0.52);
}

.level-editor-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.level-editor-status {
  margin: 0;
  padding: 4px 5px 3px;
  border-radius: 8px;
  background: rgba(253, 249, 243, 0.5);
  color: rgba(19, 19, 19, 0.62);
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1.1;
}

.level-editor-status.is-error {
  color: #8c3e3d;
}

.level-editor-status.is-warning {
  color: #876b1f;
}

.sidebox-panel {
  width: 100%;
}

.sidebox-params {
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  border-radius: 0;
  background: transparent;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 19, 19, 0.38) transparent;
}

.sidebox-tool-zone {
  order: 1;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 4px;
  min-height: 0;
  min-width: 0;
  max-height: 168px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 7px;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 10px 30px var(--paper-shadow);
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 19, 19, 0.25) transparent;
}

.sidebox-elements-zone {
  order: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 7px 0 7px 7px;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 10px 30px var(--paper-shadow);
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 19, 19, 0.32) transparent;
}

.sidebox-elements-zone::-webkit-scrollbar {
  width: 7px;
}

.sidebox-elements-zone::-webkit-scrollbar-track {
  background: transparent;
}

.sidebox-elements-zone::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(19, 19, 19, 0.26);
}

.machine-catalog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  min-height: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border-bottom: 0;
}

.machine-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 7px 2px 0;
}

.machine-tab {
  appearance: none;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(19, 19, 19, 0.38);
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  transform: rotate(-1.5deg);
  transform-origin: center;
}

.machine-tab.is-active {
  color: var(--ink);
}

.machine-tab:focus-visible {
  outline: 2px solid rgba(19, 19, 19, 0.38);
  outline-offset: 2px;
}

.machine-tab-panel {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.machine-tab-panel[hidden] {
  display: none;
}

.machine-elements-panel,
.machine-tools-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.machine-tool-list {
  align-content: start;
}

.machine-advanced-panel {
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 19, 19, 0.28) transparent;
}

.machine-advanced-panel::-webkit-scrollbar {
  width: 6px;
}

.machine-advanced-panel::-webkit-scrollbar-track {
  background: transparent;
}

.machine-advanced-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(19, 19, 19, 0.24);
}

.machine-advanced-panel .advanced-params {
  display: grid;
  margin: 0;
  padding-right: 7px;
}

.machine-advanced-panel .advanced-params-grid {
  grid-template-columns: minmax(0, 1fr);
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.machine-advanced-panel .level-editor {
  margin-top: 0;
  margin-right: 7px;
}

.board-params .sidebox-elements-zone,
.board-params .machine-tabs,
.board-params .machine-tab-panel,
.board-params .machine-elements-panel,
.board-params .machine-tools-panel,
.board-params .machine-advanced-panel {
  display: grid;
}

.board-params .machine-tab-panel[hidden] {
  display: none;
}

.machine-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.03em;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.machine-panel-title-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 4px 2px;
  overflow: hidden;
}

.machine-title-image {
  display: block;
  width: min(190px, 92%);
  height: 30px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.machine-component-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 19, 19, 0.28) transparent;
}

.machine-component-list::-webkit-scrollbar {
  width: 6px;
}

.machine-component-list::-webkit-scrollbar-track {
  background: transparent;
}

.machine-component-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(19, 19, 19, 0.24);
}

.machine-component {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  min-width: 0;
  min-height: 0;
  height: 28px;
  padding: 1px 3px 1px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(253, 249, 243, 0.24);
  color: var(--ink);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-align: left;
  overflow: visible;
}

.machine-icon {
  display: block;
  justify-self: center;
  width: 38px;
  max-width: 40px;
  height: 25px;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.machine-icon-wide {
  width: 42px;
  max-width: 44px;
}

.machine-icon-tall {
  width: 28px;
  max-width: 30px;
  height: 26px;
}

.machine-icon-fan {
  width: 42px;
  max-width: 44px;
  height: 27px;
}

.machine-icon-launcher {
  width: 56px;
  max-width: 58px;
  height: 31px;
}

.machine-icon-switch-delay {
  width: 48px;
  max-width: 50px;
  height: 28px;
}

.machine-icon-switch-toggle,
.machine-icon-switch-spring {
  width: 46px;
  max-width: 48px;
  height: 30px;
}

.machine-icon-fan-item {
  width: 34px;
  max-width: 36px;
  height: 28px;
}

.machine-icon-spring-item {
  width: 42px;
  max-width: 44px;
  height: 24px;
}

.machine-component.is-queued .machine-icon {
  opacity: 0.78;
}

.machine-component.tool-button {
  border-color: transparent;
  background: transparent;
}

.machine-component.tool-button:hover,
.machine-component.tool-button.active {
  background: rgba(247, 241, 232, 0.72);
  border-color: transparent;
  transform: translateY(-1px) rotate(-0.35deg);
}

.machine-component.is-utility {
  margin-top: 7px;
}

.machine-component > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-component.is-queued {
  color: rgba(19, 19, 19, 0.58);
  cursor: pointer;
}

.machine-component.is-queued:hover,
.machine-component.is-queued.active {
  background: rgba(247, 241, 232, 0.72);
  color: var(--ink);
  transform: translateY(-1px) rotate(-0.35deg);
}

.machine-glyph {
  position: relative;
  display: inline-block;
  justify-self: center;
  width: 30px;
  height: 24px;
}

.machine-glyph::before,
.machine-glyph::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.machine-glyph-board::before {
  left: 2px;
  top: 10px;
  width: 28px;
  border-top: 4px solid currentColor;
  transform: rotate(-4deg);
}

.machine-glyph-board::after {
  left: 7px;
  top: 14px;
  width: 18px;
  border-top: 1px solid currentColor;
  opacity: 0.45;
  transform: rotate(-6deg);
}

.machine-glyph-spring::before {
  left: 4px;
  top: 5px;
  width: 22px;
  height: 14px;
  border: 3px solid currentColor;
  border-left: 0;
  border-right: 0;
  border-radius: 999px;
}

.machine-glyph-spring::after {
  left: 5px;
  top: 11px;
  width: 22px;
  border-top: 2px dashed currentColor;
}

.machine-glyph-fan::before {
  left: 5px;
  top: 3px;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.machine-glyph-fan::after {
  left: 12px;
  top: 9px;
  width: 8px;
  height: 8px;
  border: 3px solid currentColor;
  border-radius: 70% 20% 70% 20%;
  transform: rotate(38deg);
}

.machine-glyph-paper::before {
  left: 7px;
  top: 3px;
  width: 17px;
  height: 19px;
  border: 2px solid currentColor;
  transform: rotate(4deg);
}

.machine-glyph-paper::after {
  left: 10px;
  top: 11px;
  width: 14px;
  border-top: 2px dashed currentColor;
  transform: rotate(-8deg);
}

.machine-glyph-portal::before {
  left: 13px;
  top: 2px;
  height: 22px;
  border-left: 3px solid currentColor;
}

.machine-glyph-portal::after {
  left: 7px;
  top: 4px;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 999px;
  transform: rotate(45deg);
}

.machine-glyph-eraser::before {
  left: 7px;
  top: 8px;
  width: 20px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(-18deg);
}

.machine-glyph-ball::before {
  left: 7px;
  top: 3px;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.machine-glyph-ball::after {
  left: 12px;
  top: 8px;
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.machine-glyph-pipe::before {
  left: 5px;
  top: 4px;
  width: 22px;
  height: 17px;
  border: 4px solid currentColor;
  border-right: 0;
  border-bottom: 0;
  border-radius: 10px 0 0 0;
}

.machine-glyph-switch::before {
  left: 5px;
  top: 16px;
  width: 22px;
  border-top: 3px solid currentColor;
}

.machine-glyph-switch::after {
  left: 10px;
  top: 5px;
  width: 14px;
  border-top: 3px solid currentColor;
  transform: rotate(-30deg);
}

.machine-glyph-gear::before {
  left: 5px;
  top: 3px;
  width: 21px;
  height: 21px;
  border: 3px dashed currentColor;
  border-radius: 999px;
}

.machine-glyph-gear::after {
  left: 12px;
  top: 10px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.machine-glyph-pulley::before {
  left: 7px;
  top: 2px;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.machine-glyph-pulley::after {
  left: 15px;
  top: 17px;
  height: 8px;
  border-left: 2px solid currentColor;
}

.machine-glyph-magnet::before {
  left: 7px;
  top: 3px;
  width: 17px;
  height: 18px;
  border: 4px solid currentColor;
  border-top: 0;
  border-radius: 0 0 9px 9px;
}

.machine-glyph-domino::before {
  left: 5px;
  top: 5px;
  width: 8px;
  height: 18px;
  border: 2px solid currentColor;
  transform: rotate(-9deg);
}

.machine-glyph-domino::after {
  left: 17px;
  top: 6px;
  width: 8px;
  height: 18px;
  border: 2px solid currentColor;
  transform: rotate(7deg);
}

.machine-glyph-candle::before {
  left: 13px;
  top: 9px;
  width: 7px;
  height: 14px;
  border: 2px solid currentColor;
}

.machine-glyph-candle::after {
  left: 14px;
  top: 1px;
  width: 7px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 8px 8px 8px 0;
  transform: rotate(28deg);
}

.sidebox-params::-webkit-scrollbar {
  width: 7px;
}

.sidebox-params::-webkit-scrollbar-track {
  background: transparent;
}

.sidebox-params::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(19, 19, 19, 0.28);
}

.sidebox-params::-webkit-scrollbar-thumb:hover {
  background: rgba(19, 19, 19, 0.4);
}

.sidebox-tool-preview {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0 4px;
  text-align: center;
}

.sidebox-tool-preview .perk-icon {
  font-size: 1.9rem;
}

.sidebox-tool-preview .glyph-icon {
  width: 82px;
  height: 30px;
}

.sidebox-tool-preview .eraser-toolbar-icon {
  width: 44px;
  height: 30px;
}

.sidebox-tool-preview .eraser-toolbar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.sidebox-tool-preview .line-icon {
  width: 94px;
  height: 18px;
}

.sidebox-tool-preview .friction-icon,
.sidebox-tool-preview .boost-icon,
.sidebox-tool-preview .boostslow-icon {
  width: 88px;
  height: 24px;
}

.sidebox-tool-preview .damper-icon,
.sidebox-tool-preview .spring-icon,
.sidebox-tool-preview .elasticity-icon {
  width: 82px;
  height: 26px;
}

.sidebox-tool-preview .portal-icon {
  width: 18px;
  height: 36px;
  transform: none;
}

.sidebox-tool-preview .tool-preview-title {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
}

.sidebox-tool-preview .tool-preview-copy {
  max-width: 100%;
  font-size: 0.56rem;
  line-height: 1.05;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.line-mode-controls {
  display: none;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 6px;
  margin: 0;
  width: 100%;
  min-width: 0;
}

.line-mode-controls.is-visible {
  display: grid;
}

.line-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  justify-content: stretch;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.line-mode-button {
  appearance: none;
  border: 0;
  background: transparent;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 2px;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
  width: 100%;
  position: relative;
  max-width: none;
}

.line-mode-glyph {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(19, 19, 19, 0.72);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(253, 249, 243, 0.76);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.line-mode-glyph svg {
  width: 14px;
  height: 14px;
  overflow: visible;
}

.line-mode-glyph img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

#erase-scrub-button .line-mode-glyph {
  border-color: transparent;
  background: transparent;
}

#erase-scrub-button:hover .line-mode-glyph,
#erase-scrub-button:focus-visible .line-mode-glyph,
#erase-scrub-button.active .line-mode-glyph,
#erase-scrub-button.is-locked .line-mode-glyph {
  background: transparent;
  border-color: transparent;
}

#erase-scrub-button .line-mode-glyph img {
  width: 22px;
  height: 22px;
}

.line-mode-glyph path,
.line-mode-glyph circle {
  fill: none;
  stroke: #131313;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-mode-glyph circle {
  fill: #131313;
  stroke: none;
}

.line-mode-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.44rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.line-mode-button:hover .line-mode-glyph,
.line-mode-button:focus-visible .line-mode-glyph {
  transform: translateY(-1px);
  background: rgba(247, 241, 232, 0.86);
}

.line-mode-button.active .line-mode-glyph {
  background: rgba(255, 242, 191, 0.92);
  border-color: rgba(19, 19, 19, 0.92);
}

.line-mode-button.active .line-mode-label {
  color: #131313;
}

.line-mode-button.is-locked .line-mode-glyph {
  border-width: 3px;
  border-color: #a94f4d;
  background: rgba(169, 79, 77, 0.14);
}

.line-mode-button.is-locked .line-mode-label {
  color: #8c3e3d;
}

.line-mode-button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: 76px;
  padding: 2px 4px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: rgba(253, 249, 243, 0.98);
  color: var(--ink);
  font-size: 0.4rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 4;
}

.line-mode-button:hover::after,
.line-mode-button:focus-visible::after {
  opacity: 1;
}

.line-draft-meta {
  order: 3;
  display: none;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.line-draft-meta.is-visible {
  display: flex;
}

.elasticity-controls,
.perforation-controls {
  display: none;
  gap: 3px;
  margin: 0;
}

.elasticity-controls.is-visible,
.perforation-controls.is-visible {
  display: grid;
}

.elasticity-header,
.perforation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 0.54rem;
  color: var(--muted);
}

.elasticity-header span,
.boost-header span,
.perforation-header span {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(19, 19, 19, 0.86);
}

.elasticity-range,
.boost-range,
.perforation-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  height: 12px;
  border: 0;
  background: linear-gradient(180deg, transparent calc(50% - 1px), rgba(19, 19, 19, 0.34) calc(50% - 1px), rgba(19, 19, 19, 0.34) calc(50% + 1px), transparent calc(50% + 1px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.elasticity-range {
  background: linear-gradient(90deg, rgba(169, 106, 101, 0.18) 0 50%, rgba(111, 141, 112, 0.18) 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
}

.boost-range {
  background: linear-gradient(90deg, rgba(196, 78, 104, 0.16) 0 50%, rgba(196, 78, 104, 0.22) 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
}

.perforation-range {
  background: linear-gradient(90deg, rgba(161, 132, 102, 0.18) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
}

.elasticity-inline-number,
.perforation-inline-number {
  width: 48px;
  padding: 1px 3px;
  border: 1px solid rgba(19, 19, 19, 0.42);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  font: inherit;
  text-align: center;
}

.boost-controls {
  display: none;
  gap: 3px;
  margin: 0;
}

.boost-controls.is-visible {
  display: grid;
}

.boost-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 0.54rem;
  color: var(--muted);
}

.boost-inline-number {
  width: 48px;
  padding: 1px 3px;
  border: 1px solid rgba(19, 19, 19, 0.42);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  font: inherit;
  text-align: center;
}

.elasticity-range::-webkit-slider-runnable-track,
.boost-range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(19, 19, 19, 0.32);
}

.elasticity-range::-moz-range-track,
.boost-range::-moz-range-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(19, 19, 19, 0.32);
}

.elasticity-range::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(169, 106, 101, 0.46) 0 50%, rgba(111, 141, 112, 0.48) 50% 100%);
}

.elasticity-range::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(169, 106, 101, 0.46) 0 50%, rgba(111, 141, 112, 0.48) 50% 100%);
}

.boost-range::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(196, 78, 104, 0.42) 0 50%, rgba(196, 78, 104, 0.52) 50% 100%);
}

.boost-range::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(196, 78, 104, 0.42) 0 50%, rgba(196, 78, 104, 0.52) 50% 100%);
}

.perforation-range::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(161, 132, 102, 0.45) 0 100%);
}

.perforation-range::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(161, 132, 102, 0.45) 0 100%);
}

.elasticity-range::-webkit-slider-thumb,
.boost-range::-webkit-slider-thumb,
.perforation-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: 1.5px solid rgba(19, 19, 19, 0.72);
  border-radius: 50%;
  background: #fdf9f3;
  box-shadow: 0 1px 3px rgba(40, 29, 16, 0.1);
}

.boost-range::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  border-width: 1.8px;
  border-color: rgba(19, 19, 19, 0.78);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.88) 0 28%, rgba(253, 249, 243, 0.95) 29% 100%);
  box-shadow: 0 2px 5px rgba(40, 29, 16, 0.16);
}

.elasticity-range::-moz-range-thumb,
.boost-range::-moz-range-thumb,
.perforation-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(19, 19, 19, 0.72);
  border-radius: 50%;
  background: #fdf9f3;
  box-shadow: 0 1px 3px rgba(40, 29, 16, 0.1);
}

.boost-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-width: 1.8px;
  border-color: rgba(19, 19, 19, 0.78);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.88) 0 28%, rgba(253, 249, 243, 0.95) 29% 100%);
  box-shadow: 0 2px 5px rgba(40, 29, 16, 0.16);
}

.elasticity-range::-moz-range-progress,
.boost-range::-moz-range-progress,
.perforation-range::-moz-range-progress {
  height: 2px;
  background: rgba(19, 19, 19, 0.08);
}

.elasticity-range::-moz-range-progress {
  height: 3px;
  background: rgba(19, 19, 19, 0.08);
}

.boost-range::-moz-range-progress {
  height: 3px;
  background: rgba(19, 19, 19, 0.12);
}

.hint-card {
  display: inline-grid;
  gap: 4px;
  max-width: 220px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: rgba(253, 249, 243, 0.9);
  font-size: 0.8rem;
}

.hint-card::before {
  content: none;
}

.goal-card {
  position: absolute;
  top: 10px;
  right: 10px;
}

.bottombar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "perks";
  gap: 7px;
  padding: 4px 8px 1px;
  transform: translateY(0);
  transition: transform 180ms ease;
}

.app-shell.is-board-tray-hidden .bottombar {
  transform: translateY(calc(100% + 10px));
}

.perk-panel {
  grid-area: perks;
  position: relative;
}

.summary-panel-left {
  grid-area: summary-left;
}

.summary-panel-right {
  grid-area: summary-right;
}

.full-width-panel {
  width: 100%;
}

.tool-group {
  padding: 5px 8px 1px;
  background: transparent;
}

.tool-group h2 {
  margin: 0 0 4px;
  font-size: 0.82rem;
  text-align: center;
  letter-spacing: 0.03em;
}

.tools-panel-badge {
  position: absolute;
  top: 0;
  left: 2px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 22px;
  margin: 0;
  pointer-events: none;
}

.tools-panel-badge img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
}

.perk-toolbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 6px;
  width: 100%;
}

.perk-card {
  min-height: 58px;
  padding: 3px 7px 1px;
  border: 0;
  position: relative;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-rows: 26px 18px;
  align-content: start;
  align-items: start;
  justify-items: center;
  gap: 1px;
  text-align: center;
}

.perk-card:last-child {
  border-right: 0;
}

.perk-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 0;
  width: 6px;
  height: calc(100% - 14px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 120' preserveAspectRatio='none'%3E%3Cpath d='M12 8 C10 26, 14 44, 11 62 S15 94, 12 112' fill='none' stroke='%23131313' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.perk-icon {
  display: block;
  font-size: 1.44rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.glyph-icon {
  width: 64px;
  height: 32px;
}

.glyph-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.glyph-icon path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perk-icon.green {
  color: var(--green);
}

.perk-icon.red {
  color: var(--red);
}

.perk-icon.violet {
  color: var(--violet);
}

.perk-icon.orange {
  color: var(--orange);
}

.perk-icon.blue {
  color: var(--accent);
}

.perk-icon.black {
  color: var(--ink);
}

.perforate-title {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
}

.friction-icon {
  width: 76px;
  height: 22px;
}

.line-icon {
  width: 82px;
  height: 18px;
}

.perforate-icon {
  width: 82px;
  height: 18px;
  color: var(--orange);
}

.line-icon path {
  stroke: var(--ink);
  stroke-width: 5;
}

.perforate-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.perforate-icon path {
  stroke: var(--orange);
  stroke-width: 5;
  stroke-dasharray: 0 11;
}

.friction-icon path {
  stroke: var(--green);
  stroke-width: 5;
}

.boost-icon {
  width: 76px;
  height: 22px;
}

.boost-icon path {
  stroke: var(--green);
  stroke-width: 4.6;
}

.boostslow-icon {
  position: relative;
  width: 76px;
  height: 22px;
}

.boostslow-icon svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.boostslow-icon path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.boostslow-icon .boostslow-boost path {
  stroke: #c83232;
}

.boostslow-icon .boostslow-slow path {
  stroke: #c83232;
}

.boostslow-icon .boostslow-boost {
  transform: translate(5%, -8%);
}

.boostslow-icon .boostslow-slow {
  transform: translate(-5%, 8%);
}

.machine-glyph.boostslow-icon::before,
.machine-glyph.boostslow-icon::after {
  content: none;
}

.damper-icon {
  width: 62px;
  height: 26px;
}

.damper-icon path {
  fill: none;
  stroke: var(--violet);
  stroke-width: 4;
}

.spring-icon {
  width: 62px;
  height: 26px;
}

.spring-icon path {
  fill: none;
  stroke: var(--red);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.elasticity-icon {
  position: relative;
  width: 62px;
  height: 26px;
}

.elasticity-icon svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
}

.elasticity-icon path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.elasticity-icon .elasticity-spring path {
  stroke: var(--green);
}

.elasticity-icon .elasticity-spring {
  transform: translateX(-14%);
}

.elasticity-icon .elasticity-damper path {
  stroke: var(--red);
}

.elasticity-icon .elasticity-damper {
  transform: translateX(14%);
}

.portal-icon {
  width: 20px;
  height: 42px;
  transform: translateY(-3px);
}

.portal-icon path {
  stroke: var(--accent);
  stroke-width: 4;
}

.perk-title,
.action-title {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  align-self: start;
}

.perk-copy {
  display: none;
}

.perk-card::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  min-width: 180px;
  max-width: 260px;
  padding: 9px 12px;
  border: 2px solid rgba(19, 19, 19, 0.82);
  border-radius: 14px;
  background: rgba(253, 249, 243, 0.96);
  color: var(--ink);
  font-size: 0.68rem;
  line-height: 1.18;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 110ms ease, transform 110ms ease;
  box-shadow: 0 10px 24px rgba(40, 29, 16, 0.16);
  z-index: 8;
}

.perk-card:hover::before,
.perk-card:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mini-action-toolbar {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-action-button {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  border-width: 2px;
}

.board-toolbox-mini.mini-action-button {
  padding: 0;
  border-width: 0;
  border-radius: 0;
  background: transparent;
}

.run-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.board-history-controls {
  position: absolute;
  left: 50%;
  top: clamp(0px, 0.7vh, 8px);
  z-index: 8;
  gap: clamp(124px, 15vw, 260px);
  transform: translateX(-50%);
  pointer-events: none;
}

.board-history-controls .run-control-button {
  width: 62px;
  height: 62px;
  filter: drop-shadow(0 4px 8px rgba(22, 18, 12, 0.12));
  pointer-events: auto;
}

.board-history-controls #undo-button {
  background:
    radial-gradient(circle at 50% 50%, rgba(74, 109, 143, 0.24) 0 58%, rgba(74, 109, 143, 0) 60% 100%);
}

.board-history-controls .history-button-icon {
  width: 62px;
  height: 62px;
}

.sidebox-run-stack {
  margin-top: auto;
  display: grid;
  gap: 10px;
  width: 100%;
  flex: 0 0 auto;
}

.sidebox-run-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.sidebox-level-pill {
  padding: 0;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.sidebox-star-strip {
  gap: 5px;
}

.sidebox-star-strip .star-icon {
  width: 24px;
  height: 24px;
}

.sidebox-run-controls {
  width: 100%;
  padding: 0 2px 4px;
  justify-content: center;
  gap: 16px;
  align-items: flex-end;
}

.run-control-button {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}

.run-control-button-primary {
  width: 68px;
  height: 68px;
  font-size: 1.15rem;
  background: transparent;
}

.history-button-icon {
  width: 54px;
  height: 54px;
}

.play-button-icon {
  width: 68px;
  height: 68px;
}

.metrics-list {
  display: grid;
  gap: 4px;
  font-size: 0.76rem;
}

.metrics-list div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 2px dashed rgba(19, 19, 19, 0.3);
  padding-bottom: 3px;
}

.metrics-list span {
  color: var(--muted);
  font-size: 0.62rem;
}

.metrics-list strong {
  white-space: nowrap;
}

.io-dialog {
  border: 0;
  padding: 0;
  background: transparent;
}

.io-dialog::backdrop,
.round-complete-dialog::backdrop {
  background: rgba(20, 18, 14, 0.45);
}

.round-complete-dialog {
  border: 0;
  padding: 0;
  background: transparent;
}

.io-panel {
  width: min(720px, calc(100vw - 32px));
  padding: 18px;
}

.round-complete-panel {
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: #fdf9f3;
  box-shadow: 8px 8px 0 rgba(19, 19, 19, 0.22);
}

.io-panel h2 {
  margin: 0 0 12px;
}

.round-complete-panel h2 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 4vw, 2.2rem);
  line-height: 0.95;
}

.round-complete-panel p {
  margin: 0 0 16px;
  font-size: 1rem;
}

.round-complete-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.round-complete-stats div {
  border-top: 3px solid var(--ink);
  padding-top: 8px;
}

.round-complete-stats dt {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.round-complete-stats dd {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
}

#io-textarea {
  width: 100%;
  min-height: 280px;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  resize: vertical;
  background: #fdf9f3;
  font-family: "Courier New", monospace;
}

.io-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 1800px) and (min-height: 900px) {
  .app-shell {
    padding: 12px;
    gap: 12px;
  }

  .topbar,
  .bottombar,
  .board-frame,
  .sidebox {
    border-radius: 32px;
  }

  .topbar {
    grid-template-columns: minmax(280px, 1fr) auto auto;
    gap: 10px 14px;
    padding: 8px 18px;
  }

  .brand-logo {
    width: clamp(204px, 15.8vw, 292px);
  }

  .header-center {
    gap: 12px;
  }

  .level-pill {
    padding: 6px 14px;
    font-size: 0.88rem;
  }

  .star-strip {
    gap: 6px;
  }

  .star-icon {
    width: 28px;
    height: 28px;
  }

  .header-star-strip .star-icon {
    width: 30px;
    height: 30px;
  }

  .icon-button {
    width: 48px;
    height: 48px;
  }

  .play-layout {
    --sidebox-width: 300px;
    grid-template-columns: minmax(0, 1fr) var(--sidebox-width);
    gap: 12px;
  }

  .sidebox {
    padding: 12px 12px 8px;
  }

  .board-overlay {
    inset: 16px;
  }

  .board-params {
    gap: 4px;
    padding: 6px 8px;
    font-size: 0.84rem;
  }

  .board-params div {
    gap: 8px;
  }

  .sidebox-tool-preview {
    gap: 8px;
    padding: 12px 10px 10px;
  }

  .sidebox-tool-preview .perk-icon {
    font-size: 2.05rem;
  }

  .sidebox-tool-preview .glyph-icon {
    width: 108px;
    height: 52px;
  }

  .sidebox-tool-preview .eraser-toolbar-icon {
    width: 92px;
    height: 60px;
  }

  .sidebox-tool-preview .line-icon {
    width: 142px;
    height: 32px;
  }

  .sidebox-tool-preview .friction-icon,
  .sidebox-tool-preview .boost-icon,
  .sidebox-tool-preview .boostslow-icon {
    width: 132px;
    height: 38px;
  }

  .sidebox-tool-preview .damper-icon,
  .sidebox-tool-preview .spring-icon,
  .sidebox-tool-preview .elasticity-icon {
    width: 110px;
    height: 44px;
  }

  .sidebox-tool-preview .portal-icon {
    width: 26px;
    height: 48px;
  }

  .sidebox-run-stack {
    gap: 12px;
  }

  .sidebox-level-pill {
    padding: 0;
    font-size: 0.9rem;
  }

  .sidebox-star-strip .star-icon {
    width: 29px;
    height: 29px;
  }

  .sidebox-tool-preview .tool-preview-title {
    font-size: 1.16rem;
  }

  .sidebox-tool-preview .tool-preview-copy {
    font-size: 0.84rem;
  }

  .line-mode-header {
    font-size: 0.84rem;
  }

  .line-mode-glyph {
    width: 52px;
    height: 52px;
  }

  .line-mode-glyph svg {
    width: 30px;
    height: 30px;
  }

  .line-mode-label {
    font-size: 0.66rem;
  }

  .line-draft-meta {
    font-size: 0.78rem;
  }

  .elasticity-header,
  .perforation-header {
    font-size: 0.84rem;
  }

  .elasticity-inline-number,
  .perforation-inline-number {
    width: 82px;
    padding: 5px 7px;
  }

  .boost-header,
  .perforation-header {
    font-size: 0.84rem;
  }

  .boost-inline-number,
  .perforation-inline-number {
    width: 82px;
    padding: 5px 7px;
  }

  .bottombar {
    gap: 8px;
    padding: 5px 10px 2px;
  }

  .tool-group {
    padding: 6px 10px 2px;
  }

  .tools-panel-badge {
    height: 25px;
  }

  .tools-panel-badge img {
    height: 32px;
  }

  .header-level-mark {
    width: 86px;
  }

  .header-level-number {
    font-size: 2.05rem;
  }

  .board-toolbox-button,
  .board-toolbox-button img,
  .board-pan-button {
    width: 50px;
    height: 50px;
  }

  .board-repeat-button,
  .board-repeat-icon {
    width: 48px;
    height: 48px;
  }

  .board-clear-button {
    width: 74px;
    height: 52px;
  }

  .board-clear-icon {
    width: 94px;
    height: 67px;
  }

  .board-expand-button {
    width: 62px;
    height: 62px;
  }

  .board-expand-icon {
    width: 42px;
    height: 42px;
  }

  .perk-toolbar {
    margin-top: 8px;
  }

  .perk-card {
    min-height: 68px;
    padding: 5px 8px 2px;
    grid-template-rows: 30px 20px;
    gap: 2px;
  }

  .perk-icon {
    font-size: 1.56rem;
  }

  .glyph-icon {
    width: 70px;
    height: 36px;
  }

  .line-icon {
    width: 96px;
    height: 22px;
  }

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 88px;
    height: 26px;
  }

  .damper-icon,
  .spring-icon,
  .elasticity-icon {
    width: 72px;
    height: 30px;
  }

  .portal-icon {
    width: 18px;
    height: 34px;
  }

  .perk-title,
  .action-title {
    font-size: 0.8rem;
  }

  .perforate-title {
    font-size: 0.98rem;
  }

  .perk-card::before {
    min-width: 210px;
    max-width: 320px;
    padding: 10px 14px;
    font-size: 0.76rem;
  }

  .run-controls {
    gap: 16px;
  }

  .sidebox-run-controls {
    padding: 0 4px 8px;
  }

  .run-control-button {
    width: 66px;
    height: 66px;
  }

  .run-control-button-primary {
    width: 82px;
    height: 82px;
  }

  .history-button-icon {
    width: 66px;
    height: 66px;
  }

  .play-button-icon {
    width: 82px;
    height: 82px;
  }
}

@media (min-width: 2400px) and (min-height: 1200px) {
  .app-shell {
    padding: 14px;
    gap: 14px;
  }

  .topbar {
    padding: 10px 22px;
  }

  .brand-logo {
    width: clamp(234px, 14.8vw, 334px);
  }

  .level-pill {
    padding: 7px 16px;
    font-size: 0.96rem;
  }

  .star-icon {
    width: 31px;
    height: 31px;
  }

  .header-star-strip .star-icon {
    width: 34px;
    height: 34px;
  }

  .icon-button {
    width: 46px;
    height: 46px;
  }

  .header-level-mark {
    width: 104px;
  }

  .header-level-number {
    font-size: 2.28rem;
  }

  .board-toolbox-button,
  .board-toolbox-button img,
  .board-pan-button {
    width: 56px;
    height: 56px;
  }

  .board-repeat-button,
  .board-repeat-icon {
    width: 54px;
    height: 54px;
  }

  .board-clear-button {
    width: 82px;
    height: 58px;
  }

  .board-clear-icon {
    width: 104px;
    height: 74px;
  }

  .board-expand-button {
    width: 68px;
    height: 68px;
  }

  .board-expand-icon {
    width: 48px;
    height: 48px;
  }

  .play-layout {
    --sidebox-width: 340px;
    grid-template-columns: minmax(0, 1fr) var(--sidebox-width);
    gap: 14px;
  }

  .board-params {
    font-size: 0.84rem;
    padding: 7px 9px;
  }

  .bottombar {
    padding: 6px 12px 2px;
  }

  .perk-card {
    min-height: 74px;
    grid-template-rows: 34px 22px;
  }

  .perk-icon {
    font-size: 1.68rem;
  }

  .glyph-icon {
    width: 76px;
    height: 38px;
  }

  .line-icon {
    width: 102px;
    height: 24px;
  }

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 94px;
    height: 28px;
  }

  .damper-icon,
  .spring-icon,
  .elasticity-icon {
    width: 78px;
    height: 32px;
  }

  .portal-icon {
    width: 20px;
    height: 38px;
  }

  .perk-title,
  .action-title {
    font-size: 0.86rem;
  }

  .sidebox-level-pill {
    padding: 0;
    font-size: 0.94rem;
  }

  .run-controls {
    gap: 18px;
  }

  .sidebox-level-pill {
    padding: 7px 16px;
    font-size: 0.94rem;
  }

  .sidebox-star-strip .star-icon {
    width: 32px;
    height: 32px;
  }

  .run-control-button {
    width: 72px;
    height: 72px;
  }

  .run-control-button-primary {
    width: 90px;
    height: 90px;
  }

  .history-button-icon {
    width: 72px;
    height: 72px;
  }

  .play-button-icon {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 1220px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
  }

  .topbar {
    grid-template-columns: 1fr auto auto;
    gap: 6px 8px;
    padding: 6px 10px;
  }

  .brand-logo {
    width: clamp(134px, 29vw, 196px);
  }

  .header-center {
    gap: 8px;
    justify-content: flex-end;
  }

  .header-actions {
    justify-content: flex-end;
  }

  .play-layout {
    grid-template-columns: 1fr;
  }

  .app-shell.is-sidebox-left .play-layout {
    grid-template-columns: 1fr;
  }

  .app-shell.is-sidebox-left .board-frame,
  .app-shell.is-sidebox-left .sidebox {
    grid-column: 1;
  }

  .sidebox {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .bottombar {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 4px 6px 1px;
  }

  .perk-panel {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .perk-toolbar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .summary-panel-left,
  .summary-panel-right {
    padding-top: 4px;
    padding-bottom: 2px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 4px;
    gap: 6px;
  }

  .topbar {
    grid-template-columns: 1fr auto auto;
    gap: 4px 6px;
    padding: 4px 8px;
    border-radius: 18px;
  }

  .brand-logo {
    width: 126px;
  }

  .level-pill {
    padding: 4px 8px;
    border-width: 2px;
    font-size: 0.7rem;
  }

  .star-strip {
    gap: 3px;
  }

  .star-icon {
    width: 19px;
    height: 19px;
  }

  .icon-button {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }

  .sidebox {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px 6px 2px;
    border-radius: 18px;
  }

  #game-canvas {
    min-height: 0;
    height: 52vh;
  }

  .board-overlay {
    inset: 8px;
  }

  .board-run-controls {
    top: 4px;
    right: 4px;
    gap: 6px;
  }

  .board-corner-controls {
    top: 4px;
    left: 50%;
    gap: 6px;
  }

  .board-params {
    font-size: 0.6rem;
    padding: 3px 5px;
  }

  .sidebox-run-stack {
    gap: 8px;
  }

  .sidebox-run-meta {
    gap: 6px;
  }

  .sidebox-level-pill {
    padding: 0;
    font-size: 0.72rem;
  }

  .sidebox-star-strip .star-icon {
    width: 20px;
    height: 20px;
  }

  .boost-controls,
  .perforation-controls {
    gap: 4px;
    margin: 1px 0 6px;
  }

  .boost-header,
  .perforation-header {
    font-size: 0.64rem;
  }

  .boost-inline-number,
  .perforation-inline-number {
    width: 64px;
    padding: 4px 5px;
    border-radius: 8px;
  }

  .sidebox-tool-preview {
    gap: 5px;
    margin: 1px 0 4px;
    padding: 6px 4px 5px;
  }

  .sidebox-tool-preview .perk-icon {
    font-size: 1.46rem;
  }

  .sidebox-tool-preview .glyph-icon {
    width: 78px;
    height: 36px;
  }

  .sidebox-tool-preview .eraser-toolbar-icon {
    width: 66px;
    height: 42px;
  }

  .sidebox-tool-preview .line-icon {
    width: 98px;
    height: 22px;
  }

  .sidebox-tool-preview .friction-icon,
  .sidebox-tool-preview .boost-icon,
  .sidebox-tool-preview .boostslow-icon {
    width: 90px;
    height: 28px;
  }

  .sidebox-tool-preview .damper-icon,
  .sidebox-tool-preview .spring-icon,
  .sidebox-tool-preview .elasticity-icon {
    width: 78px;
    height: 34px;
  }

  .sidebox-tool-preview .portal-icon {
    width: 20px;
    height: 36px;
  }

  .sidebox-tool-preview .tool-preview-title {
    font-size: 0.86rem;
  }

  .sidebox-tool-preview .tool-preview-copy {
    font-size: 0.62rem;
  }

  .line-mode-controls {
    gap: 4px;
    margin: 1px 0 6px;
  }

  .line-mode-header {
    font-size: 0.64rem;
  }

  .line-mode-toggle {
    gap: 10px;
  }

  .line-mode-glyph {
    width: 42px;
    height: 42px;
  }

  .line-mode-glyph svg {
    width: 24px;
    height: 24px;
  }

  .line-mode-label {
    font-size: 0.56rem;
  }

  .line-draft-meta {
    font-size: 0.58rem;
  }

  .elasticity-controls,
  .perforation-controls {
    gap: 4px;
    margin: 1px 0 6px;
  }

  .elasticity-header,
  .perforation-header {
    font-size: 0.64rem;
  }

  .elasticity-inline-number,
  .perforation-inline-number {
    width: 64px;
    padding: 4px 5px;
    border-radius: 8px;
  }

  .run-control-button {
    width: 42px;
    height: 42px;
    font-size: 0.96rem;
  }

  .run-control-button-primary {
    width: 54px;
    height: 54px;
    font-size: 1rem;
  }

  .history-button-icon {
    width: 42px;
    height: 42px;
  }

  .board-history-controls .run-control-button,
  .board-history-controls .history-button-icon {
    width: 48px;
    height: 48px;
  }

  .board-history-controls {
    gap: clamp(104px, 15vw, 176px);
  }

  .play-button-icon {
    width: 54px;
    height: 54px;
  }

  .bottombar {
    gap: 4px;
    padding: 3px 5px 0;
    border-radius: 18px;
  }

  .tool-group {
    padding: 4px 6px 1px;
  }

  .tool-group h2 {
    margin-bottom: 3px;
    font-size: 0.74rem;
  }

  .tools-panel-badge {
    height: 24px;
    top: 1px;
    left: 0;
  }

  .tools-panel-badge img {
    height: 28px;
  }

  .perk-panel {
    padding-bottom: 1px;
  }

  .perk-toolbar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin-top: 8px;
    width: 100%;
  }

  .perk-card {
    min-height: 66px;
    padding: 3px 6px 1px;
    grid-template-rows: 24px 19px;
    gap: 0;
  }

  .perforate-title {
    font-size: 0.9rem;
  }

  .perk-card:not(:last-child)::after {
    top: 6px;
    right: 0;
    height: calc(100% - 12px);
    width: 5px;
  }

  .perk-icon {
    font-size: 1.34rem;
  }

  .glyph-icon {
    width: 56px;
    height: 26px;
  }

  .line-icon {
    width: 68px;
    height: 16px;
  }

  .friction-icon {
    width: 64px;
    height: 20px;
  }

  .portal-icon {
    width: 16px;
    height: 28px;
    transform: translateY(-3px);
  }

  .perk-title {
    font-size: 0.69rem;
  }

  .perk-card::before {
    min-width: 150px;
    max-width: 210px;
    padding: 7px 10px;
    font-size: 0.58rem;
  }

  .spring-icon,
  .damper-icon {
    width: 48px;
    height: 20px;
  }

  .perk-title {
    font-size: 0.56rem;
  }

  .perk-copy {
    font-size: 0.43rem;
    line-height: 0.92;
  }

  .metrics-list {
    gap: 2px;
    font-size: 0.68rem;
  }

  .metrics-list div {
    padding-bottom: 2px;
  }

  .metrics-list span {
    font-size: 0.54rem;
  }
}

@media (max-width: 420px) {
  .app-shell {
    padding: 3px;
    gap: 4px;
  }

  .topbar {
    gap: 3px 5px;
    padding: 3px 6px;
    border-radius: 16px;
  }

  .brand-logo {
    width: 110px;
    transform: translateX(-6px) translateY(4px) rotate(-4deg);
  }

  .icon-button {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .header-question-button {
    width: 30px;
    height: 30px;
  }

  .play-layout {
    gap: 4px;
  }

  #game-canvas {
    height: 46vh;
  }

  .sidebox {
    gap: 3px;
    padding: 5px 5px 1px;
    border-radius: 16px;
  }

  .board-params {
    font-size: 0.56rem;
    padding: 2px 4px;
  }

  .sidebox-tool-preview {
    gap: 4px;
    margin: 0;
    padding: 5px 3px 4px;
  }

  .sidebox-tool-preview .perk-icon {
    font-size: 1.28rem;
  }

  .sidebox-tool-preview .glyph-icon {
    width: 66px;
    height: 30px;
  }

  .sidebox-tool-preview .eraser-toolbar-icon {
    width: 56px;
    height: 35px;
  }

  .sidebox-tool-preview .line-icon {
    width: 86px;
    height: 18px;
  }

  .sidebox-tool-preview .friction-icon,
  .sidebox-tool-preview .boost-icon,
  .sidebox-tool-preview .boostslow-icon {
    width: 78px;
    height: 24px;
  }

  .sidebox-tool-preview .damper-icon,
  .sidebox-tool-preview .spring-icon,
  .sidebox-tool-preview .elasticity-icon {
    width: 68px;
    height: 30px;
  }

  .sidebox-tool-preview .portal-icon {
    width: 18px;
    height: 30px;
  }

  .sidebox-tool-preview .tool-preview-title {
    font-size: 0.78rem;
  }

  .sidebox-tool-preview .tool-preview-copy {
    font-size: 0.58rem;
  }

  .line-mode-controls,
  .elasticity-controls,
  .boost-controls,
  .perforation-controls {
    margin: 0 0 4px;
  }

  .line-mode-header,
  .elasticity-header,
  .boost-header,
  .perforation-header {
    font-size: 0.58rem;
  }

  .line-mode-toggle {
    gap: 8px;
  }

  .line-mode-glyph {
    width: 36px;
    height: 36px;
  }

  .line-mode-glyph svg {
    width: 20px;
    height: 20px;
  }

  .line-mode-label {
    font-size: 0.5rem;
  }

  .line-draft-meta {
    font-size: 0.54rem;
  }

  .elasticity-inline-number,
  .boost-inline-number,
  .perforation-inline-number {
    width: 56px;
    padding: 3px 4px;
    border-radius: 7px;
  }

  .sidebox-run-stack {
    gap: 5px;
  }

  .sidebox-run-meta {
    gap: 5px;
  }

  .sidebox-level-pill {
    font-size: 0.66rem;
  }

  .sidebox-star-strip .star-icon {
    width: 18px;
    height: 18px;
  }

  .run-control-button {
    width: 36px;
    height: 36px;
  }

  .run-control-button-primary {
    width: 46px;
    height: 46px;
  }

  .history-button-icon {
    width: 36px;
    height: 36px;
  }

  .board-history-controls .run-control-button,
  .board-history-controls .history-button-icon {
    width: 42px;
    height: 42px;
  }

  .board-history-controls {
    gap: clamp(92px, 15vw, 144px);
  }

  .play-button-icon {
    width: 46px;
    height: 46px;
  }

  .bottombar {
    gap: 3px;
    padding: 2px 4px 0;
    border-radius: 16px;
  }

  .tool-group {
    padding: 3px 4px 0;
  }

  .tools-panel-badge {
    height: 20px;
  }

  .tools-panel-badge img {
    height: 24px;
  }

  .perk-toolbar {
    margin-top: 6px;
  }

  .perk-card {
    min-height: 56px;
    padding: 3px 4px 1px;
    grid-template-rows: 20px 16px;
  }

  .perk-card:not(:last-child)::after {
    top: 5px;
    height: calc(100% - 10px);
    width: 4px;
  }

  .perk-icon {
    font-size: 1.18rem;
  }

  .glyph-icon {
    width: 48px;
    height: 22px;
  }

.line-icon {
  width: 58px;
  height: 13px;
}

.eraser-toolbar-icon {
  width: 7px;
  height: 7px;
}

.eraser-toolbar-icon-bottom {
  width: 4px;
  height: 4px;
}

.eraser-toolbar-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 54px;
    height: 17px;
  }

  .portal-icon {
    width: 14px;
    height: 24px;
  }

  .perk-title {
    font-size: 0.66rem;
  }

  .perk-card::before {
    min-width: 132px;
    max-width: 180px;
    padding: 6px 8px;
    font-size: 0.54rem;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .topbar,
  .bottombar,
  .board-frame,
  .sidebox,
  .io-panel {
    border-width: 1.5px;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    padding: 4px;
    gap: 3px;
  }

  @supports not (height: 100dvh) {
    .app-shell {
      height: 100vh;
      min-height: 100vh;
    }
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 6px;
    padding: 0 4px;
    border-radius: 18px;
  }

  .brand-logo {
    width: 114px;
    transform: translateX(-6px) translateY(4px) rotate(-4deg);
  }

  .icon-button {
    width: 34px;
    height: 34px;
    font-size: 0.94rem;
  }

  .header-question-button {
    width: 24px;
    height: 24px;
  }

  .header-level-mark {
    width: 40px;
  }

  .header-level-number {
    margin-left: 0;
    font-size: 1.04rem;
    transform: translateY(0) rotate(-1deg);
  }

  .play-layout {
    --sidebox-width: 156px;
    grid-template-columns: minmax(0, 1fr) var(--sidebox-width);
    gap: 4px;
    min-height: 0;
  }

  .app-shell.is-sidebox-left .play-layout {
    grid-template-columns: var(--sidebox-width) minmax(0, 1fr);
  }

  .app-shell.is-sidebox-left .board-frame {
    grid-column: 2;
  }

  .app-shell.is-sidebox-left .sidebox {
    grid-column: 1;
  }

  .app-shell.is-board-side-hidden .play-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.is-board-side-hidden .board-frame {
    grid-column: 1;
  }

  .board-frame,
  .sidebox,
  .bottombar {
    border-radius: 18px;
  }

  .board-frame {
    --board-tool-column-x: 7px;
    --board-toolbox-bottom: 78px;
    --board-pan-bottom: 49px;
    --board-play-right: 7px;
    --board-play-size: 30px;
    --board-play-align-offset: -4px;
  }

  #game-canvas {
    min-height: 0;
    height: 100%;
  }

  .sidebox {
    gap: 4px;
    padding: 3px 5px 2px;
  }

  .board-params {
    font-size: 0.47rem;
    padding: 2px 3px;
    gap: 2px;
  }

  .board-params div {
    gap: 5px;
  }

  .sidebox-tool-preview {
    gap: 3px;
    margin: 0;
    padding: 4px 2px 3px;
  }

  .sidebox-tool-preview .perk-icon {
    font-size: 1.08rem;
  }

  .sidebox-tool-preview .glyph-icon {
    width: 54px;
    height: 24px;
  }

  .sidebox-tool-preview .eraser-toolbar-icon {
    width: 46px;
    height: 28px;
  }

  .sidebox-tool-preview .line-icon {
    width: 72px;
    height: 15px;
  }

  .sidebox-tool-preview .friction-icon,
  .sidebox-tool-preview .boost-icon,
  .sidebox-tool-preview .boostslow-icon {
    width: 64px;
    height: 19px;
  }

  .sidebox-tool-preview .damper-icon,
  .sidebox-tool-preview .spring-icon,
  .sidebox-tool-preview .elasticity-icon {
    width: 56px;
    height: 24px;
  }

  .sidebox-tool-preview .portal-icon {
    width: 14px;
    height: 24px;
  }

  .sidebox-tool-preview .tool-preview-title {
    font-size: 0.58rem;
  }

  .sidebox-tool-preview .tool-preview-copy {
    font-size: 0.42rem;
  }

  .line-mode-controls,
  .elasticity-controls,
  .boost-controls,
  .perforation-controls {
    margin: 0 0 4px;
  }

  .line-mode-controls {
    gap: 6px;
  }

  .line-mode-header,
  .elasticity-header,
  .boost-header,
  .perforation-header {
    font-size: 0.47rem;
  }

  .line-mode-glyph {
    width: 28px;
    height: 28px;
  }

  .line-mode-glyph svg {
    width: 15px;
    height: 15px;
  }

  .line-mode-label {
    font-size: 0.38rem;
  }

  .line-draft-meta {
    font-size: 0.42rem;
  }

  .elasticity-inline-number,
  .boost-inline-number,
  .perforation-inline-number {
    width: 48px;
    padding: 1px 3px;
    border-radius: 7px;
  }

  .sidebox-run-stack {
    gap: 2px;
  }

  .sidebox-run-meta {
    gap: 3px;
  }

  .sidebox-level-pill {
    font-size: 0.56rem;
  }

  .sidebox-star-strip .star-icon {
    width: 14px;
    height: 14px;
  }

  .sidebox-run-controls {
    padding: 0 1px 1px;
  }

  .run-control-button {
    width: 24px;
    height: 24px;
  }

  .run-control-button-primary {
    width: 29px;
    height: 29px;
  }

  .history-button-icon {
    width: 24px;
    height: 24px;
  }

  .board-history-controls .run-control-button,
  .board-history-controls .history-button-icon {
    width: 30px;
    height: 30px;
  }

  .board-history-controls {
    top: 10px;
    gap: clamp(66px, 16vw, 96px);
  }

  .play-button-icon {
    width: 29px;
    height: 29px;
  }

  .bottombar {
    gap: 2px;
    padding: 0 2px 0;
    overflow: hidden;
  }

  .tool-group {
    padding: 0 2px 0;
  }

  .tools-panel-badge {
    top: 3px;
    left: 3px;
    height: 12px;
  }

  .tools-panel-badge img {
    height: 13px;
  }

  .perk-panel {
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
  }

  .perk-toolbar {
    margin-top: 2px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    align-items: center;
  }

  .perk-card {
    min-height: 36px;
    padding: 1px 3px 0;
    grid-template-rows: 12px 10px;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
    align-content: center;
    align-items: center;
  }

  .perforate-title {
    font-size: 0.7rem;
  }

  .perk-card:not(:last-child)::after {
    top: 5px;
    height: calc(100% - 10px);
    width: 3px;
  }

  .perk-icon {
    font-size: 0.82rem;
  }

  .glyph-icon {
    width: 34px;
    height: 14px;
  }

  .line-icon {
    width: 44px;
    height: 9px;
  }

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 40px;
    height: 12px;
  }

  .portal-icon {
    width: 10px;
    height: 16px;
  }

  .perk-title {
    font-size: clamp(0.26rem, 1.1vw, 0.36rem);
    letter-spacing: 0;
    max-width: 100%;
    white-space: nowrap;
    transform: scaleX(0.88);
    transform-origin: center;
  }

  .perk-card::before {
    min-width: 128px;
    max-width: 172px;
    padding: 6px 8px;
    font-size: 0.52rem;
  }

  .board-corner-actions {
    left: 7px;
    bottom: 7px;
    gap: 6px;
  }

  .board-zoom-readout {
    left: 6px;
    bottom: 34px;
    width: 26px;
    gap: 1px;
    font-size: 0.32rem;
  }

  .board-zoom-readout strong {
    font-size: 0.36rem;
  }

  .board-ball-setup {
    left: 64px;
    top: 34px;
    gap: 3px;
    min-width: 0;
    width: max-content;
    padding: 2px 0 2px 1px;
    border-width: 1px;
    border-radius: 8px;
    background: rgba(253, 249, 243, 0.76);
  }

  .board-ball-field {
    gap: 3px;
    font-size: 0.48rem;
  }

  .board-ball-label-icon {
    width: 18px;
    height: 14px;
  }

  .board-ball-field input {
    width: 38px;
    padding: 0;
    border-radius: 0;
  }

  .board-map-caption {
    font-size: 0.5rem;
  }

  .board-expand-button {
    top: 7px;
    right: 7px;
  }

  .board-reset-button {
    width: 28px;
    height: 28px;
  }

  .board-pan-button {
    left: var(--board-tool-column-x);
    bottom: var(--board-pan-bottom);
    top: auto;
    width: 22px;
    height: 22px;
  }

  .board-toolbox-widget {
    left: var(--board-tool-column-x);
    bottom: var(--board-toolbox-bottom);
  }

  .board-toolbox-button {
    width: 22px;
    height: 22px;
  }

  .board-toolbox-button img {
    width: 22px;
    height: 22px;
    transform: rotate(-5deg);
  }

  .board-toolbox-active-badge {
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 13px;
  }

  .board-toolbox-active-badge .toolbox-mini-icon {
    height: 11px;
  }

  .board-toolbox-active-badge .line-icon,
  .board-toolbox-active-badge .perforate-icon,
  .board-toolbox-active-badge .boostslow-icon,
  .board-toolbox-active-badge .elasticity-icon {
    width: 13px;
    height: 11px;
  }

  .board-toolbox-active-badge .portal-icon {
    width: 7px;
    height: 11px;
  }

  .board-toolbox-active-badge .eraser-toolbar-icon,
  .board-toolbox-active-badge .eraser-toolbar-icon img {
    width: 11px;
    height: 11px;
  }

  .board-toolbox-popover {
    grid-template-columns: 24px;
    gap: 4px;
    padding: 1px 0;
    border-radius: 0;
  }

  .board-toolbox-mini {
    width: 24px;
    height: 18px;
    grid-template-rows: 1fr;
    font-size: 0.28rem;
  }

  .board-toolbox-mini .toolbox-mini-icon {
    height: 13px;
  }

  .board-toolbox-mini .line-icon,
  .board-toolbox-mini .perforate-icon,
  .board-toolbox-mini .boostslow-icon {
    width: 21px;
  }

  .board-toolbox-mini .portal-icon {
    width: 8px;
    height: 13px;
  }

  .board-toolbox-mini .elasticity-icon {
    width: 21px;
    height: 13px;
  }

  .board-toolbox-mini .eraser-toolbar-icon {
    width: 13px;
    height: 13px;
  }

  .board-clear-button {
    width: 34px;
    height: 25px;
    transform: translateY(-2px);
  }

  .board-repeat-button {
    width: 22px;
    height: 22px;
  }

  .board-clear-icon {
    width: 46px;
    height: 33px;
  }

  .board-repeat-icon {
    width: 22px;
    height: 22px;
  }

  .board-expand-icon {
    width: 17px;
    height: 17px;
  }

  .board-reset-icon {
    width: 15px;
    height: 15px;
  }

  .board-play-button {
    left: 50%;
    right: auto;
    bottom: var(--board-play-bottom);
    top: auto;
    width: var(--board-play-size);
    height: var(--board-play-size);
    transform: translateX(-50%);
  }

  .board-button-tooltip {
    top: 18px;
    bottom: auto;
    max-width: min(330px, calc(100% - 58px));
    padding: 3px 9px;
    font-size: 0.5rem;
  }

  .board-play-icon {
    width: var(--board-play-size);
    height: var(--board-play-size);
  }

  .app-shell.is-board-expanded .play-layout {
    --expanded-sidebox-width: 156px;
    --expanded-play-gap: 4px;
    grid-template-columns: minmax(0, 1fr) var(--expanded-sidebox-width);
  }

  .app-shell.is-board-expanded.is-sidebox-left .play-layout {
    grid-template-columns: var(--expanded-sidebox-width) minmax(0, 1fr);
  }

  .app-shell.is-board-expanded .sidebox {
    display: flex;
  }

  .app-shell.is-board-expanded.is-board-side-hidden .play-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.is-board-expanded.is-board-side-hidden .sidebox {
    display: none;
  }

  .app-shell.is-board-expanded .board-frame {
    width: 100%;
  }

  .app-shell.is-board-expanded {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .app-shell.is-board-expanded.is-board-top-hidden {
    grid-template-rows: 0 minmax(0, 1fr) auto;
  }

  .app-shell.is-board-expanded.is-board-tray-hidden {
    grid-template-rows: auto minmax(0, 1fr) 0;
  }

  .app-shell.is-board-expanded.is-board-top-hidden.is-board-tray-hidden {
    grid-template-rows: 0 minmax(0, 1fr) 0;
  }

  .app-shell.is-board-expanded .topbar {
    padding: 0 3px;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 180ms ease, opacity 160ms ease;
  }

  .app-shell.is-board-expanded.is-board-top-hidden .topbar {
    transform: translateY(calc(-100% - 8px));
    opacity: 0;
    pointer-events: none;
  }

  .app-shell.is-board-expanded .brand-logo {
    width: 104px;
    transform: translateX(-6px) translateY(4px) rotate(-4deg);
  }

  .app-shell.is-board-expanded .icon-button {
    width: 30px;
    height: 30px;
    font-size: 0.88rem;
  }

  .app-shell.is-board-expanded .header-question-button {
    width: 23px;
    height: 23px;
  }

  .app-shell.is-board-expanded .board-ball-setup {
    min-width: 0;
    width: max-content;
    padding: 1px 0 1px 0;
    border-width: 1px;
    border-radius: 8px;
    background: rgba(253, 249, 243, 0.74);
  }

  .app-shell.is-board-expanded .board-ball-field {
    font-size: 0.48rem;
  }

  .app-shell.is-board-expanded .board-ball-label-icon {
    width: 16px;
    height: 13px;
  }

  .app-shell.is-board-expanded .board-ball-field input {
    width: 34px;
    padding: 0;
  }

  .app-shell.is-board-expanded .board-tray-toggle {
    display: inline-flex;
  }

  .app-shell.is-board-expanded .board-tray-hide-toggle {
    position: absolute;
    left: auto;
    right: clamp(70px, 13vw, 160px);
    top: var(--board-bottom-toggle-y, calc(100% - 42px));
    bottom: auto;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: rgba(253, 249, 243, 0.96);
    box-shadow: 0 5px 14px rgba(22, 18, 12, 0.14);
    transform: translateY(-50%);
    cursor: pointer;
  }

  .app-shell.is-board-expanded .board-tray-hide-toggle[hidden] {
    display: none !important;
  }

  .app-shell.is-board-expanded .board-top-toggle,
  .app-shell.is-board-expanded .board-side-toggle {
    position: fixed;
    z-index: 18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: rgba(253, 249, 243, 0.96);
    box-shadow: 0 5px 14px rgba(22, 18, 12, 0.14);
    cursor: pointer;
  }

  .app-shell.is-board-expanded .board-top-toggle {
    position: absolute;
    left: auto;
    right: clamp(12px, 4vw, 46px);
    top: var(--board-top-toggle-y, 36px);
    width: 34px;
    height: 18px;
    transform: translateY(-50%);
  }

  .app-shell.is-board-expanded.is-board-top-hidden .board-top-toggle {
    top: 4px;
    transform: none;
  }

  .app-shell.is-board-expanded .board-top-toggle:not(.is-open) .board-tray-toggle-icon {
    transform: rotate(180deg);
  }

  .app-shell.is-board-expanded .board-side-toggle {
    left: calc(var(--board-side-toggle-x, 100vw) - 9px);
    right: auto;
    top: var(--board-side-toggle-y, 50vh);
    width: 18px;
    height: 34px;
    transform: translateY(-50%);
    transition: left 160ms ease, transform 120ms ease;
  }

  .app-shell.is-board-expanded:not(.is-board-side-hidden) .board-side-toggle {
    left: calc(var(--board-side-toggle-x, 100vw) - 9px);
    right: auto;
  }

  .app-shell.is-board-expanded .board-side-toggle .board-tray-toggle-icon {
    width: 10px;
    height: 16px;
  }

  .app-shell.is-board-expanded .board-side-toggle.is-open .board-tray-toggle-icon {
    transform: rotate(180deg);
  }

  .app-shell.is-board-expanded.is-sidebox-left .board-side-toggle .board-tray-toggle-icon {
    transform: rotate(180deg);
  }

  .app-shell.is-board-expanded.is-sidebox-left .board-side-toggle.is-open .board-tray-toggle-icon {
    transform: none;
  }

  .app-shell.is-board-expanded .board-top-toggle[hidden],
  .app-shell.is-board-expanded .board-side-toggle[hidden] {
    display: none !important;
  }

  .app-shell.is-board-expanded .bottombar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 6;
    display: grid;
    transform: translateY(0);
    transition: transform 180ms ease;
  }

  .app-shell.is-board-expanded.is-board-tray-hidden .bottombar {
    transform: translateY(calc(100% + 10px));
  }

  .app-shell.is-board-expanded .tool-group {
    padding: 0 1px 0;
  }

  .app-shell.is-board-expanded .tools-panel-badge img {
    height: 12px;
  }

  .app-shell.is-board-expanded .perk-toolbar {
    margin-top: 2px;
    overflow: hidden;
    align-items: center;
  }

  .app-shell.is-board-expanded .perk-card {
    min-height: 34px;
    grid-template-rows: 12px 10px;
    padding: 1px 2px 0;
    overflow: hidden;
    align-content: center;
    align-items: center;
  }

  .app-shell.is-board-expanded .perk-icon {
    font-size: 0.82rem;
  }

  .app-shell.is-board-expanded .glyph-icon {
    width: 34px;
    height: 14px;
  }

  .app-shell.is-board-expanded .line-icon {
    width: 44px;
    height: 9px;
  }

  .app-shell.is-board-expanded .friction-icon,
  .app-shell.is-board-expanded .boost-icon,
  .app-shell.is-board-expanded .boostslow-icon {
    width: 40px;
    height: 12px;
  }

  .app-shell.is-board-expanded .portal-icon {
    width: 10px;
    height: 16px;
  }

  .app-shell.is-board-expanded .perk-title {
    font-size: 0.4rem;
  }
}

/* Keep the bottom bar height stable while giving tool content more visual weight. */
.perk-card {
  padding: 2px 5px 0;
  grid-template-rows: 31px 20px;
  gap: 0;
}

.perk-icon {
  font-size: 1.62rem;
}

.glyph-icon {
  width: 70px;
  height: 36px;
}

.line-icon {
  width: 92px;
  height: 22px;
}

.friction-icon,
.boost-icon,
.boostslow-icon {
  width: 86px;
  height: 26px;
}

.damper-icon,
.spring-icon,
.elasticity-icon {
  width: 70px;
  height: 30px;
}

.portal-icon {
  width: 19px;
  height: 34px;
  transform: translateY(-2px);
}

.perk-toolbar .eraser-toolbar-icon,
.perk-toolbar .eraser-toolbar-icon-bottom {
  width: 20px;
  height: 20px;
}

.perk-title,
.action-title {
  font-size: 0.82rem;
  line-height: 0.95;
}

.perforate-title {
  font-size: 0.98rem;
}

@media (min-width: 1800px) and (min-height: 900px) {
  .perk-card {
    padding: 3px 6px 1px;
    grid-template-rows: 36px 22px;
  }

  .perk-icon {
    font-size: 1.74rem;
  }

  .glyph-icon {
    width: 78px;
    height: 40px;
  }

  .line-icon {
    width: 108px;
    height: 25px;
  }

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 100px;
    height: 30px;
  }

  .damper-icon,
  .spring-icon,
  .elasticity-icon {
    width: 82px;
    height: 33px;
  }

  .portal-icon {
    width: 22px;
    height: 40px;
  }

  .perk-toolbar .eraser-toolbar-icon,
  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 24px;
    height: 24px;
  }

  .perk-title,
  .action-title {
    font-size: 0.9rem;
  }

  .perforate-title {
    font-size: 1.06rem;
  }
}

@media (min-width: 2400px) and (min-height: 1200px) {
  .perk-card {
    grid-template-rows: 39px 24px;
  }

  .perk-icon {
    font-size: 1.84rem;
  }

  .glyph-icon {
    width: 84px;
    height: 42px;
  }

  .line-icon {
    width: 112px;
    height: 27px;
  }

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 104px;
    height: 31px;
  }

  .damper-icon,
  .spring-icon,
  .elasticity-icon {
    width: 86px;
    height: 35px;
  }

  .portal-icon {
    width: 23px;
    height: 42px;
  }

  .perk-title,
  .action-title {
    font-size: 0.94rem;
  }
}

@media (max-width: 1220px) {
  .perk-card {
    grid-template-rows: 30px 21px;
    padding: 2px 5px 0;
  }

  .perk-icon {
    font-size: 1.48rem;
  }

  .glyph-icon {
    width: 64px;
    height: 30px;
  }

  .line-icon {
    width: 78px;
    height: 18px;
  }

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 72px;
    height: 22px;
  }

  .damper-icon,
  .spring-icon,
  .elasticity-icon {
    width: 68px;
    height: 29px;
  }

  .portal-icon {
    width: 18px;
    height: 30px;
  }

  .perk-toolbar .eraser-toolbar-icon,
  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 18px;
    height: 18px;
  }

  .perk-title {
    font-size: 0.76rem;
  }

  .perforate-title {
    font-size: 0.96rem;
  }
}

@media (max-width: 760px) {
  .perk-card {
    grid-template-rows: 24px 18px;
  }

  .perk-icon {
    font-size: 1.3rem;
  }

  .glyph-icon {
    width: 54px;
    height: 24px;
  }

  .line-icon {
    width: 64px;
    height: 15px;
  }

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 60px;
    height: 18px;
  }

  .damper-icon,
  .spring-icon,
  .elasticity-icon {
    width: 58px;
    height: 25px;
  }

  .portal-icon {
    width: 15px;
    height: 26px;
  }

  .perk-toolbar .eraser-toolbar-icon,
  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 15px;
    height: 15px;
  }

  .perk-title {
    font-size: 0.72rem;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-card {
    grid-template-rows: 16px 12px;
  }

  .perk-icon {
    font-size: 0.94rem;
  }

  .glyph-icon {
    width: 38px;
    height: 16px;
  }

  .line-icon {
    width: 50px;
    height: 10px;
  }

  .friction-icon,
  .boost-icon,
  .boostslow-icon {
    width: 46px;
    height: 14px;
  }

  .damper-icon,
  .spring-icon,
  .elasticity-icon {
    width: 40px;
    height: 17px;
  }

  .portal-icon {
    width: 11px;
    height: 18px;
  }

  .perk-toolbar .eraser-toolbar-icon,
  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 10px;
    height: 10px;
  }

  .perk-title {
    font-size: clamp(0.32rem, 1.25vw, 0.42rem);
    transform: scaleX(0.94);
  }
}

.app-shell.is-board-expanded .perk-card {
  grid-template-rows: 16px 12px;
}

.app-shell.is-board-expanded .perk-icon {
  font-size: 0.94rem;
}

.app-shell.is-board-expanded .glyph-icon {
  width: 38px;
  height: 16px;
}

.app-shell.is-board-expanded .line-icon {
  width: 50px;
  height: 10px;
}

.app-shell.is-board-expanded .friction-icon,
.app-shell.is-board-expanded .boost-icon,
.app-shell.is-board-expanded .boostslow-icon {
  width: 46px;
  height: 14px;
}

.app-shell.is-board-expanded .damper-icon,
.app-shell.is-board-expanded .spring-icon,
.app-shell.is-board-expanded .elasticity-icon {
  width: 40px;
  height: 17px;
}

.app-shell.is-board-expanded .portal-icon {
  width: 11px;
  height: 18px;
}

.app-shell.is-board-expanded .perk-toolbar .eraser-toolbar-icon,
.app-shell.is-board-expanded .perk-toolbar .eraser-toolbar-icon-bottom {
  width: 10px;
  height: 10px;
}

.app-shell.is-board-expanded .perk-title {
  font-size: 0.46rem;
}

.app-shell.is-board-expanded .board-frame {
  --board-tool-column-x: 7px;
  --board-toolbox-bottom: 78px;
  --board-pan-bottom: 49px;
  --board-play-right: 7px;
  --board-play-size: 30px;
  --board-play-align-offset: -4px;
}

.app-shell.is-board-expanded .board-toolbox-widget {
  left: var(--board-tool-column-x);
  bottom: var(--board-toolbox-bottom);
}

.app-shell.is-board-expanded .board-toolbox-button {
  width: 22px;
  height: 22px;
}

.app-shell.is-board-expanded .board-toolbox-button img {
  width: 22px;
  height: 22px;
  transform: rotate(-5deg);
}

.app-shell.is-board-expanded .board-toolbox-active-badge {
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 13px;
}

.app-shell.is-board-expanded .board-toolbox-active-badge .toolbox-mini-icon {
  height: 11px;
}

.app-shell.is-board-expanded .board-toolbox-active-badge .line-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .perforate-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .boostslow-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .elasticity-icon {
  width: 13px;
  height: 11px;
}

.app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
  width: 7px;
  height: 11px;
}

.app-shell.is-board-expanded .board-toolbox-active-badge .eraser-toolbar-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .eraser-toolbar-icon img {
  width: 11px;
  height: 11px;
}

.app-shell.is-board-expanded .board-toolbox-popover {
  grid-template-columns: 24px;
  gap: 4px;
  padding: 1px 0;
}

.app-shell.is-board-expanded .board-toolbox-mini {
  width: 24px;
  height: 18px;
  grid-template-rows: 1fr;
  font-size: 0.28rem;
}

.app-shell.is-board-expanded .board-toolbox-mini .toolbox-mini-icon {
  height: 13px;
}

.app-shell.is-board-expanded .board-toolbox-mini .line-icon,
.app-shell.is-board-expanded .board-toolbox-mini .perforate-icon,
.app-shell.is-board-expanded .board-toolbox-mini .boostslow-icon {
  width: 21px;
}

.app-shell.is-board-expanded .board-toolbox-mini .portal-icon {
  width: 8px;
  height: 13px;
}

.app-shell.is-board-expanded .board-toolbox-mini .elasticity-icon {
  width: 21px;
  height: 13px;
}

.app-shell.is-board-expanded .board-toolbox-mini .eraser-toolbar-icon {
  width: 13px;
  height: 13px;
}

.elasticity-inline-number,
.boost-inline-number {
  width: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  color: var(--ink);
  text-align: right;
}

.elasticity-inline-number:focus,
.boost-inline-number:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .topbar .board-ball-setup,
  .app-shell.is-board-expanded .topbar .board-ball-setup {
    gap: 0;
    padding: 1px 1px 1px 2px;
    border-radius: 7px;
  }

  .topbar .board-ball-field,
  .app-shell.is-board-expanded .topbar .board-ball-field {
    gap: 2px;
    font-size: 0.42rem;
  }

  .topbar .board-ball-label-icon,
  .app-shell.is-board-expanded .topbar .board-ball-label-icon {
    width: 15px;
    height: 12px;
  }

  .topbar .board-ball-field input,
  .app-shell.is-board-expanded .topbar .board-ball-field input {
    width: 34px;
  }

  .level-editor {
    gap: 2px;
    margin-top: 2px;
    padding-top: 2px;
  }

  .level-editor-toggle {
    gap: 3px;
    padding: 1px 2px;
    font-size: 0.48rem;
  }

  .level-editor-icon {
    width: 10px;
    height: 10px;
  }

  .level-editor-panel {
    gap: 3px;
    padding: 3px 3px 4px;
    border-radius: 8px;
  }

  .level-editor-column {
    gap: 3px;
  }

  .level-editor-field {
    gap: 1px;
    font-size: 0.36rem;
  }

  .level-editor-field input,
  .level-select {
    border-radius: 7px;
  }

  .level-editor-field input {
    padding: 1px 3px 1px;
    font-size: 0.4rem;
  }

  .level-select {
    min-height: 38px;
    max-height: 44px;
    padding: 2px;
    font-size: 0.36rem;
  }

  .level-editor-actions {
    gap: 3px;
  }

  .level-editor-button {
    padding: 2px 2px 1px;
    font-size: 0.32rem;
  }

  .level-editor-status {
    padding: 2px 3px;
    font-size: 0.32rem;
    line-height: 1.05;
  }
}

.portal-icon {
  width: 20px;
  height: 42px;
}

.perk-toolbar .portal-icon {
  width: 18px;
  height: 32px;
  transform: translateY(-1px);
}

.sidebox-tool-preview .portal-icon {
  width: 26px;
  height: 58px;
}

.board-toolbox-active-badge .portal-icon {
  width: 10px;
  height: 18px;
}

.board-toolbox-mini .portal-icon {
  width: 10px;
  height: 22px;
}

@media (min-width: 1800px) and (min-height: 900px) {
  .portal-icon {
    width: 24px;
    height: 54px;
  }

  .sidebox-tool-preview .portal-icon {
    width: 30px;
    height: 66px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .header-play-button.asset-button {
    width: 28px;
    height: 28px;
    border-width: 1.4px;
  }

  .portal-icon {
    width: 12px;
    height: 28px;
  }

  .perk-toolbar .portal-icon {
    width: 10px;
    height: 22px;
  }

  .sidebox-tool-preview .portal-icon {
    width: 15px;
    height: 34px;
  }

  .board-toolbox-active-badge .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
    width: 8px;
    height: 16px;
  }

  .board-toolbox-mini .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-mini .portal-icon {
    width: 8px;
    height: 18px;
  }

  .app-shell.is-board-expanded .portal-icon {
    width: 11px;
    height: 24px;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  .orientation-guard {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  background:
      linear-gradient(rgba(181, 188, 188, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(181, 188, 188, 0.16) 1px, transparent 1px),
      linear-gradient(180deg, #fdf9f3 0%, #f7f1e8 100%);
    background-size: 32px 32px, 32px 32px, auto;
  }

  .app-shell {
    display: none;
  }
}

.board-params .machine-catalog {
  display: grid;
}

.board-params .machine-component-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  justify-content: stretch;
}

.board-params .machine-component {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  justify-content: stretch;
}

.perk-card[data-tool="erase"] .eraser-toolbar-icon-bottom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 26px;
  transform: none;
}

.perk-card[data-tool="erase"] .machine-glyph {
  color: var(--ink);
  width: 36px;
  height: 24px;
}

.sidebox {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.sidebox .sidebox-params {
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
  gap: 8px;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.sidebox .sidebox-tool-zone,
.sidebox .sidebox-elements-zone {
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 10px 30px var(--paper-shadow);
}

.sidebox .sidebox-tool-zone {
  max-height: 168px;
}

.board-params .machine-catalog {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.board-params .machine-component-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0;
}

.sidebox-elements-zone > .advanced-params {
  display: none;
}

.sidebox-params > .advanced-params {
  display: none;
}

/* Source-cut portal and eraser icons from portalgumka.png. Keep these at EOF so older responsive rules cannot shrink them back to the fallback glyph sizes. */
.portal-icon,
.eraser-toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portal-icon::before,
.portal-icon::after,
.machine-glyph-portal::before,
.machine-glyph-portal::after,
.machine-glyph-eraser::before,
.machine-glyph-eraser::after {
  display: none;
  content: none;
}

.portal-icon img,
.eraser-toolbar-icon img,
.line-mode-glyph-eraser img,
.machine-icon-portal,
.machine-icon-eraser {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.machine-icon-portal {
  width: 34px;
  max-width: 36px;
  height: 24px;
}

.machine-icon-eraser {
  width: 35px;
  max-width: 37px;
  height: 23px;
}

.perk-toolbar .portal-icon {
  width: 42px;
  height: 32px;
}

.tool-cursor-indicator .portal-icon {
  width: 56px;
  height: 42px;
}

.sidebox-tool-preview .portal-icon {
  width: 58px;
  height: 44px;
}

.board-toolbox-mini .portal-icon,
.app-shell.is-board-expanded .board-toolbox-mini .portal-icon,
.board-toolbox-active-badge .portal-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
  width: 28px;
  height: 22px;
}

.board-toolbox-mini .eraser-toolbar-icon,
.app-shell.is-board-expanded .board-toolbox-mini .eraser-toolbar-icon,
.board-toolbox-active-badge .eraser-toolbar-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .eraser-toolbar-icon {
  width: 25px;
  height: 18px;
}

.sidebox-tool-preview .eraser-toolbar-icon {
  width: 52px;
  height: 35px;
}

.line-mode-glyph-eraser img {
  width: 26px;
  height: 22px;
}

.app-shell.is-grayscale .portal-icon img,
.app-shell.is-grayscale .eraser-toolbar-icon img,
.app-shell.is-grayscale .machine-icon-portal,
.app-shell.is-grayscale .machine-icon-eraser,
.app-shell.is-grayscale ~ .tool-cursor-indicator .portal-icon img,
.app-shell.is-grayscale ~ .tool-cursor-indicator .eraser-toolbar-icon img {
  filter: grayscale(1) contrast(1.08);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .portal-icon {
    width: 24px;
    height: 18px;
  }

  .tool-cursor-indicator .portal-icon {
    width: 42px;
    height: 32px;
  }

  .board-pan-button {
    width: 18px;
    height: 18px;
  }

  .sidebox .sidebox-tool-preview .portal-icon {
    width: 34px;
    height: 26px;
  }

  .board-toolbox-mini .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-mini .portal-icon,
  .board-toolbox-active-badge .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
    width: 24px;
    height: 18px;
  }

  .sidebox .sidebox-tool-preview .eraser-toolbar-icon {
    width: 34px;
    height: 23px;
  }

  .sidebox .machine-icon-portal {
    width: 28px;
    max-width: 30px;
    height: 20px;
  }

  .sidebox .machine-icon-eraser {
    width: 29px;
    max-width: 31px;
    height: 19px;
  }
}

/* Final bottom-toolbar sizing: overrides repeated source-cut icon rules above. */
.perk-toolbar .portal-icon {
  width: 42px;
  height: 32px;
}

@media (max-width: 1220px) {
  .perk-toolbar .portal-icon {
    width: 34px;
    height: 26px;
  }

  .board-pan-button {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 760px) {
  .perk-toolbar .portal-icon {
    width: 28px;
    height: 21px;
  }

  .board-pan-button {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 420px) {
  .perk-toolbar .portal-icon {
    width: 22px;
    height: 16px;
  }

  .board-pan-button {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .portal-icon {
    width: 22px;
    height: 16px;
  }

  .board-pan-button {
    width: 18px;
    height: 18px;
  }
}

/* Final board control layout: right-edge column plus bottom-left expand. */
.board-corner-actions {
  --board-edge-control-size: 42px;
  --board-edge-clear-width: 58px;
  --board-edge-clear-height: 40px;
  position: absolute;
  top: auto;
  right: 2px;
  bottom: 8px;
  left: auto;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 10px;
  width: var(--board-edge-control-size);
}

.board-corner-actions .board-toolbox-widget,
.board-corner-actions .board-pan-button,
.board-corner-actions .board-reset-button {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.board-corner-actions .board-toolbox-button,
.board-corner-actions .board-toolbox-button img,
.board-corner-actions .board-pan-button,
.board-corner-actions .board-repeat-button,
.board-corner-actions .board-repeat-icon,
.board-corner-actions .board-clear-button {
  width: var(--board-edge-control-size);
  height: var(--board-edge-control-size);
}

.board-corner-actions .board-clear-button,
.board-corner-actions .board-clear-button:hover {
  width: var(--board-edge-clear-width);
  transform: none;
  justify-self: end;
  overflow: visible;
}

.board-corner-actions .board-clear-icon {
  flex: 0 0 var(--board-edge-clear-width);
  width: var(--board-edge-clear-width);
  height: var(--board-edge-clear-height);
  max-width: none;
}

.board-corner-actions .board-clear-icon img {
  max-width: none;
}

.board-corner-actions .board-toolbox-popover {
  top: 50%;
  right: calc(100% + 6px);
  bottom: auto;
  left: auto;
  transform: translate(8px, -50%) scale(0.96);
  transform-origin: right center;
}

.board-corner-actions .board-toolbox-widget:hover .board-toolbox-popover,
.board-corner-actions .board-toolbox-widget:focus-within .board-toolbox-popover {
  transform: translate(0, -50%) scale(1);
}

.board-expand-button {
  top: auto;
  right: auto;
  bottom: 8px;
  left: 8px;
}

.perk-toolbar .eraser-toolbar-icon-bottom {
  width: 42px;
  height: 28px;
}

@media (max-width: 1220px) {
  .board-corner-actions {
    --board-edge-control-size: 34px;
    --board-edge-clear-width: 48px;
    --board-edge-clear-height: 33px;
    bottom: 6px;
    gap: 8px;
  }

  .board-expand-button {
    bottom: 6px;
    left: 6px;
  }

  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 34px;
    height: 23px;
  }
}

@media (max-width: 760px) {
  .board-corner-actions {
    --board-edge-control-size: 28px;
    --board-edge-clear-width: 40px;
    --board-edge-clear-height: 27px;
    bottom: 5px;
    gap: 6px;
  }

  .board-expand-button {
    bottom: 5px;
    left: 5px;
  }

  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 28px;
    height: 19px;
  }
}

@media (max-width: 420px) {
  .board-corner-actions {
    --board-edge-control-size: 22px;
    --board-edge-clear-width: 33px;
    --board-edge-clear-height: 23px;
    bottom: 4px;
    right: 1px;
    gap: 5px;
  }

  .board-expand-button {
    bottom: 4px;
    left: 4px;
  }

  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 22px;
    height: 15px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .board-corner-actions {
    --board-edge-control-size: 22px;
    --board-edge-clear-width: 33px;
    --board-edge-clear-height: 23px;
    bottom: 4px;
    right: 1px;
    gap: 5px;
  }

  .board-expand-button {
    bottom: 4px;
    left: 4px;
  }

  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 22px;
    height: 15px;
  }
}

@media (max-width: 1220px) {
  .perk-toolbar .portal-icon {
    width: 34px;
    height: 26px;
  }

  .board-pan-button {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 760px) {
  .perk-toolbar .portal-icon {
    width: 28px;
    height: 21px;
  }

  .board-pan-button {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 420px) {
  .perk-toolbar .portal-icon {
    width: 22px;
    height: 16px;
  }

  .board-pan-button {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .portal-icon {
    width: 22px;
    height: 16px;
  }

  .board-pan-button {
    width: 18px;
    height: 18px;
  }
}

.portal-icon,
.eraser-toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portal-icon::before,
.portal-icon::after,
.machine-glyph-portal::before,
.machine-glyph-portal::after,
.machine-glyph-eraser::before,
.machine-glyph-eraser::after {
  display: none;
  content: none;
}

.portal-icon img,
.eraser-toolbar-icon img,
.line-mode-glyph-eraser img,
.machine-icon-portal,
.machine-icon-eraser {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.machine-icon-portal {
  width: 34px;
  max-width: 36px;
  height: 24px;
}

.machine-icon-eraser {
  width: 35px;
  max-width: 37px;
  height: 23px;
}

.perk-toolbar .portal-icon,
.tool-cursor-indicator .portal-icon {
  width: 56px;
  height: 42px;
}

.sidebox-tool-preview .portal-icon {
  width: 58px;
  height: 44px;
}

.board-toolbox-mini .portal-icon,
.app-shell.is-board-expanded .board-toolbox-mini .portal-icon,
.board-toolbox-active-badge .portal-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
  width: 28px;
  height: 22px;
}

.board-toolbox-mini .eraser-toolbar-icon,
.app-shell.is-board-expanded .board-toolbox-mini .eraser-toolbar-icon,
.board-toolbox-active-badge .eraser-toolbar-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .eraser-toolbar-icon {
  width: 25px;
  height: 18px;
}

.sidebox-tool-preview .eraser-toolbar-icon {
  width: 52px;
  height: 35px;
}

.line-mode-glyph-eraser img {
  width: 26px;
  height: 22px;
}

.app-shell.is-grayscale .portal-icon img,
.app-shell.is-grayscale .eraser-toolbar-icon img,
.app-shell.is-grayscale .machine-icon-portal,
.app-shell.is-grayscale .machine-icon-eraser,
.app-shell.is-grayscale ~ .tool-cursor-indicator .portal-icon img,
.app-shell.is-grayscale ~ .tool-cursor-indicator .eraser-toolbar-icon img {
  filter: grayscale(1) contrast(1.08);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .portal-icon,
  .tool-cursor-indicator .portal-icon {
    width: 42px;
    height: 32px;
  }

  .sidebox .sidebox-tool-preview .portal-icon {
    width: 34px;
    height: 26px;
  }

  .board-toolbox-mini .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-mini .portal-icon,
  .board-toolbox-active-badge .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
    width: 24px;
    height: 18px;
  }

  .sidebox .sidebox-tool-preview .eraser-toolbar-icon {
    width: 34px;
    height: 23px;
  }

  .sidebox .machine-icon-portal {
    width: 28px;
    max-width: 30px;
    height: 20px;
  }

  .sidebox .machine-icon-eraser {
    width: 29px;
    max-width: 31px;
    height: 19px;
  }
}

.fan-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 38px;
}

.fan-tool-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-toolbox-mini .fan-tool-icon {
  width: 29px;
  height: 19px;
}

.board-toolbox-active-badge .fan-tool-icon {
  width: 22px;
  height: 17px;
}

.sidebox-tool-preview .fan-tool-icon {
  width: 82px;
  height: 36px;
}

.tool-cursor-indicator .fan-tool-icon {
  width: 44px;
  height: 25px;
}

.app-shell.is-grayscale .fan-tool-icon img,
.app-shell.is-grayscale ~ .tool-cursor-indicator .fan-tool-icon img {
  filter: grayscale(1) contrast(1.08);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .machine-icon-fan {
    width: 32px;
    max-width: 34px;
    height: 20px;
  }

  .perk-toolbar .fan-tool-icon {
    width: 58px;
    height: 28px;
  }

  .sidebox .sidebox-tool-preview .fan-tool-icon {
    width: 40px;
    height: 22px;
  }

  .board-toolbox-mini .fan-tool-icon,
  .app-shell.is-board-expanded .board-toolbox-mini .fan-tool-icon {
    width: 26px;
    height: 18px;
  }

  .board-toolbox-active-badge .fan-tool-icon,
  .app-shell.is-board-expanded .board-toolbox-active-badge .fan-tool-icon {
    width: 21px;
    height: 15px;
  }
}

.portal-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 42px;
  color: var(--accent);
  transform: none;
}

.portal-icon svg {
  display: none;
}

.portal-icon::before,
.portal-icon::after {
  display: none;
  content: none;
}

.machine-glyph-portal::before,
.machine-glyph-portal::after {
  display: none;
  content: none;
}

.machine-glyph-portal::before {
  left: 2px;
  border-color: #7a60c8;
  transform: rotate(-14deg);
}

.machine-glyph-portal::after {
  left: 14px;
  border-color: #1496ff;
  transform: rotate(14deg);
}

.machine-glyph-eraser::before {
  display: none;
  content: none;
}

.machine-glyph-eraser::after {
  display: none;
  content: none;
}

.eraser-toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portal-icon img,
.eraser-toolbar-icon img,
.line-mode-glyph-eraser img,
.machine-icon-portal,
.machine-icon-eraser {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.machine-icon-portal {
  width: 34px;
  max-width: 36px;
  height: 24px;
}

.machine-icon-eraser {
  width: 35px;
  max-width: 37px;
  height: 23px;
}

.board-toolbox-mini .eraser-toolbar-icon,
.board-toolbox-active-badge .eraser-toolbar-icon {
  width: 25px;
  height: 18px;
}

.line-mode-glyph-eraser {
  border-color: transparent;
  background: transparent;
}

.line-mode-glyph-eraser img {
  width: 26px;
  height: 22px;
}

#erase-scrub-button:hover .line-mode-glyph-eraser,
#erase-scrub-button:focus-visible .line-mode-glyph-eraser,
#erase-scrub-button.active .line-mode-glyph-eraser,
#erase-scrub-button.is-locked .line-mode-glyph-eraser {
  background: transparent;
  border-color: transparent;
}

.perk-toolbar .portal-icon {
  width: 56px;
  height: 42px;
}

.sidebox-tool-preview .portal-icon {
  width: 58px;
  height: 44px;
}

.board-toolbox-mini .portal-icon,
.board-toolbox-active-badge .portal-icon {
  width: 28px;
  height: 22px;
}

.tool-cursor-indicator .eraser-toolbar-icon {
  width: 30px;
  height: 21px;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .portal-icon {
    width: 42px;
    height: 32px;
  }

  .sidebox .sidebox-tool-preview .portal-icon {
    width: 34px;
    height: 26px;
  }

  .board-toolbox-mini .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-mini .portal-icon {
    width: 24px;
    height: 18px;
  }

  .board-toolbox-active-badge .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
    width: 22px;
    height: 17px;
  }

  .sidebox .sidebox-tool-preview .eraser-toolbar-icon {
    width: 34px;
    height: 23px;
  }

  .sidebox .machine-icon-portal {
    width: 28px;
    max-width: 30px;
    height: 20px;
  }

  .sidebox .machine-icon-eraser {
    width: 29px;
    max-width: 31px;
    height: 19px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-params {
    grid-template-rows: max-content minmax(0, 1fr);
    gap: 4px;
  }

  .sidebox .sidebox-tool-zone {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    align-items: center;
    align-content: center;
    gap: 3px;
    max-height: 58px;
    padding: 4px 5px;
    border-radius: 16px;
    overflow: hidden;
  }

  .sidebox .sidebox-tool-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-content: center;
    gap: 1px;
    min-width: 0;
    padding: 0;
    text-align: left;
  }

  .sidebox .sidebox-tool-preview .perk-icon {
    font-size: 0.82rem;
  }

  .sidebox .sidebox-tool-preview .glyph-icon {
    width: 48px;
    height: 16px;
  }

  .sidebox .sidebox-tool-preview .eraser-toolbar-icon {
    width: 34px;
    height: 18px;
  }

  .sidebox .sidebox-tool-preview .line-icon {
    width: 54px;
    height: 10px;
  }

  .sidebox .sidebox-tool-preview .friction-icon,
  .sidebox .sidebox-tool-preview .boost-icon,
  .sidebox .sidebox-tool-preview .boostslow-icon {
    width: 50px;
    height: 14px;
  }

  .sidebox .sidebox-tool-preview .damper-icon,
  .sidebox .sidebox-tool-preview .spring-icon,
  .sidebox .sidebox-tool-preview .elasticity-icon {
    width: 46px;
    height: 15px;
  }

  .sidebox .sidebox-tool-preview .portal-icon {
    width: 10px;
    height: 18px;
  }

  .sidebox .sidebox-tool-preview .tool-preview-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.48rem;
    line-height: 1;
    white-space: nowrap;
  }

  .sidebox .sidebox-tool-preview .tool-preview-copy {
    display: none;
  }

  .sidebox .line-mode-controls,
  .sidebox .elasticity-controls,
  .sidebox .boost-controls,
  .sidebox .perforation-controls {
    grid-column: 2;
    margin: 0;
    width: 50px;
    min-width: 0;
  }

  .sidebox .line-mode-toggle {
    grid-template-columns: repeat(2, 22px);
    justify-content: end;
    gap: 2px;
  }

  .sidebox .line-mode-button {
    width: 22px;
    gap: 1px;
  }

  .sidebox .line-mode-glyph {
    width: 18px;
    height: 18px;
  }

  .sidebox .line-mode-glyph svg,
  .sidebox .line-mode-glyph img {
    width: 10px;
    height: 10px;
  }

  #erase-scrub-button .line-mode-glyph img {
    width: 16px;
    height: 16px;
  }

  .sidebox .line-mode-label {
    max-width: 22px;
    font-size: 0.3rem;
    line-height: 0.95;
  }

  .sidebox .elasticity-controls.is-visible,
  .sidebox .boost-controls.is-visible,
  .sidebox .perforation-controls.is-visible {
    display: grid;
    gap: 1px;
  }

  .sidebox .elasticity-header,
  .sidebox .boost-header,
  .sidebox .perforation-header {
    gap: 2px;
    font-size: 0.34rem;
    line-height: 1;
  }

  .sidebox .elasticity-header span,
  .sidebox .boost-header span,
  .sidebox .perforation-header span {
    display: none;
  }

  .sidebox .elasticity-inline-number,
  .sidebox .boost-inline-number,
  .sidebox .perforation-inline-number {
    width: 34px;
    padding: 0 2px;
    border-radius: 6px;
    font-size: 0.38rem;
  }

  .sidebox .elasticity-range,
  .sidebox .boost-range,
  .sidebox .perforation-range {
    height: 8px;
  }

  .sidebox .sidebox-elements-zone {
    padding: 4px 0 5px 4px;
    border-radius: 16px;
  }

  .sidebox .machine-catalog {
    gap: 2px;
  }

  .sidebox .machine-tabs {
    gap: 2px;
    min-height: 22px;
    padding: 0 4px 1px 0;
  }

  .sidebox .machine-tab {
    font-size: 0.52rem;
    line-height: 1;
  }

  .sidebox .machine-panel-title-icons {
    min-height: 22px;
    padding: 0 2px 1px;
  }

  .sidebox .machine-title-image {
    width: min(120px, 92%);
    height: 22px;
  }

  .sidebox .machine-component-list {
    gap: 1px;
    padding-right: 0;
  }

  .sidebox .machine-component {
    grid-template-columns: 32px minmax(0, 1fr);
    height: 22px;
    padding: 0 2px 0 0;
    font-size: 0.5rem;
    line-height: 1;
  }

  .sidebox .machine-icon {
    width: 28px;
    max-width: 30px;
    height: 19px;
  }

  .sidebox .machine-icon-wide {
    width: 32px;
    max-width: 34px;
  }

  .sidebox .machine-icon-switch-delay {
    width: 37px;
    max-width: 39px;
    height: 22px;
  }

  .sidebox .machine-icon-switch-toggle,
  .sidebox .machine-icon-switch-spring {
    width: 36px;
    max-width: 38px;
    height: 23px;
  }

  .sidebox .machine-icon-fan-item {
    width: 27px;
    max-width: 29px;
    height: 22px;
  }

  .sidebox .machine-icon-spring-item {
    width: 32px;
    max-width: 34px;
    height: 18px;
  }

  .sidebox .machine-glyph {
    width: 24px;
    height: 18px;
  }
}

.sidebox-params > .advanced-params {
  display: none;
}

/* Source-cut portal and eraser icons from portalgumka.png. Keep these at EOF so older responsive rules cannot shrink them back to fallback glyph sizes. */
.portal-icon,
.eraser-toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portal-icon::before,
.portal-icon::after,
.machine-glyph-portal::before,
.machine-glyph-portal::after,
.machine-glyph-eraser::before,
.machine-glyph-eraser::after {
  display: none;
  content: none;
}

.portal-icon img,
.eraser-toolbar-icon img,
.line-mode-glyph-eraser img,
.machine-icon-portal,
.machine-icon-eraser {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.machine-icon-portal {
  width: 34px;
  max-width: 36px;
  height: 24px;
}

.machine-icon-eraser {
  width: 35px;
  max-width: 37px;
  height: 23px;
}

.perk-toolbar .portal-icon,
.tool-cursor-indicator .portal-icon {
  width: 56px;
  height: 42px;
}

.sidebox-tool-preview .portal-icon {
  width: 58px;
  height: 44px;
}

.board-toolbox-mini .portal-icon,
.app-shell.is-board-expanded .board-toolbox-mini .portal-icon,
.board-toolbox-active-badge .portal-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
  width: 28px;
  height: 22px;
}

.board-toolbox-mini .eraser-toolbar-icon,
.app-shell.is-board-expanded .board-toolbox-mini .eraser-toolbar-icon,
.board-toolbox-active-badge .eraser-toolbar-icon,
.app-shell.is-board-expanded .board-toolbox-active-badge .eraser-toolbar-icon {
  width: 25px;
  height: 18px;
}

.sidebox-tool-preview .eraser-toolbar-icon {
  width: 52px;
  height: 35px;
}

.line-mode-glyph-eraser img {
  width: 26px;
  height: 22px;
}

.app-shell.is-grayscale .portal-icon img,
.app-shell.is-grayscale .eraser-toolbar-icon img,
.app-shell.is-grayscale .machine-icon-portal,
.app-shell.is-grayscale .machine-icon-eraser,
.app-shell.is-grayscale ~ .tool-cursor-indicator .portal-icon img,
.app-shell.is-grayscale ~ .tool-cursor-indicator .eraser-toolbar-icon img {
  filter: grayscale(1) contrast(1.08);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .portal-icon,
  .tool-cursor-indicator .portal-icon {
    width: 42px;
    height: 32px;
  }

  .sidebox .sidebox-tool-preview .portal-icon {
    width: 34px;
    height: 26px;
  }

  .board-toolbox-mini .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-mini .portal-icon,
  .board-toolbox-active-badge .portal-icon,
  .app-shell.is-board-expanded .board-toolbox-active-badge .portal-icon {
    width: 24px;
    height: 18px;
  }

  .sidebox .sidebox-tool-preview .eraser-toolbar-icon {
    width: 34px;
    height: 23px;
  }

  .sidebox .machine-icon-portal {
    width: 28px;
    max-width: 30px;
    height: 20px;
  }

  .sidebox .machine-icon-eraser {
    width: 29px;
    max-width: 31px;
    height: 19px;
  }
}

/* Final bottom-toolbar sizing: this must stay after repeated source-cut icon rules. */
.perk-toolbar .portal-icon {
  width: 42px;
  height: 32px;
}

@media (max-width: 1220px) {
  .perk-toolbar .portal-icon {
    width: 34px;
    height: 26px;
  }

  .board-pan-button {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 760px) {
  .perk-toolbar .portal-icon {
    width: 28px;
    height: 21px;
  }

  .board-pan-button {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 420px) {
  .perk-toolbar .portal-icon {
    width: 22px;
    height: 16px;
  }

  .board-pan-button {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .portal-icon {
    width: 22px;
    height: 16px;
  }

  .board-pan-button {
    width: 18px;
    height: 18px;
  }
}

/* Final board control layout: keep after repeated icon sizing blocks. */
.board-corner-actions {
  --board-edge-control-size: 42px;
  --board-edge-clear-width: 58px;
  --board-edge-clear-height: 40px;
  position: absolute;
  top: auto;
  right: 2px;
  bottom: 8px;
  left: auto;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 10px;
  width: var(--board-edge-control-size);
}

.board-corner-actions .board-toolbox-widget,
.board-corner-actions .board-pan-button,
.board-corner-actions .board-reset-button {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.board-corner-actions .board-toolbox-button,
.board-corner-actions .board-toolbox-button img,
.board-corner-actions .board-pan-button,
.board-corner-actions .board-repeat-button,
.board-corner-actions .board-repeat-icon,
.board-corner-actions .board-clear-button {
  width: var(--board-edge-control-size);
  height: var(--board-edge-control-size);
}

.board-corner-actions .board-clear-button,
.board-corner-actions .board-clear-button:hover {
  transform: none;
}

.board-corner-actions .board-clear-icon {
  width: var(--board-edge-clear-width);
  height: var(--board-edge-clear-height);
}

.board-corner-actions .board-toolbox-popover {
  top: 50%;
  right: calc(100% + 6px);
  bottom: auto;
  left: auto;
  transform: translate(8px, -50%) scale(0.96);
  transform-origin: right center;
}

.board-corner-actions .board-toolbox-widget:hover .board-toolbox-popover,
.board-corner-actions .board-toolbox-widget:focus-within .board-toolbox-popover {
  transform: translate(0, -50%) scale(1);
}

.board-expand-button {
  top: auto;
  right: auto;
  bottom: 8px;
  left: 8px;
}

.perk-toolbar .eraser-toolbar-icon-bottom {
  width: 42px;
  height: 28px;
}

@media (max-width: 1220px) {
  .board-corner-actions {
    --board-edge-control-size: 34px;
    --board-edge-clear-width: 48px;
    --board-edge-clear-height: 33px;
    bottom: 6px;
    gap: 8px;
  }

  .board-expand-button {
    bottom: 6px;
    left: 6px;
  }

  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 34px;
    height: 23px;
  }
}

@media (max-width: 760px) {
  .board-corner-actions {
    --board-edge-control-size: 28px;
    --board-edge-clear-width: 40px;
    --board-edge-clear-height: 27px;
    bottom: 5px;
    gap: 6px;
  }

  .board-expand-button {
    bottom: 5px;
    left: 5px;
  }

  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 28px;
    height: 19px;
  }
}

@media (max-width: 420px) {
  .board-corner-actions {
    --board-edge-control-size: 22px;
    --board-edge-clear-width: 33px;
    --board-edge-clear-height: 23px;
    bottom: 4px;
    right: 1px;
    gap: 5px;
  }

  .board-expand-button {
    bottom: 4px;
    left: 4px;
  }

  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 22px;
    height: 15px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .board-corner-actions {
    --board-edge-control-size: 22px;
    --board-edge-clear-width: 33px;
    --board-edge-clear-height: 23px;
    bottom: 4px;
    right: 1px;
    gap: 5px;
  }

  .board-expand-button {
    bottom: 4px;
    left: 4px;
  }

  .perk-toolbar .eraser-toolbar-icon-bottom {
    width: 22px;
    height: 15px;
  }
}

/* Final bottom-toolbar eraser sizing: target the specific erase card rule. */
.perk-toolbar .perk-card[data-tool="erase"] .eraser-toolbar-icon-bottom {
  width: 42px;
  height: 28px;
}

@media (max-width: 1220px) {
  .perk-toolbar .perk-card[data-tool="erase"] .eraser-toolbar-icon-bottom {
    width: 34px;
    height: 23px;
  }
}

@media (max-width: 760px) {
  .perk-toolbar .perk-card[data-tool="erase"] .eraser-toolbar-icon-bottom {
    width: 28px;
    height: 19px;
  }
}

@media (max-width: 420px) {
  .perk-toolbar .perk-card[data-tool="erase"] .eraser-toolbar-icon-bottom {
    width: 22px;
    height: 15px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .perk-card[data-tool="erase"] .eraser-toolbar-icon-bottom {
    width: 22px;
    height: 15px;
  }
}

/* Final undo/redo placement: bottom of the board. */
.board-history-controls {
  top: auto;
  bottom: 8px;
  left: 50%;
  gap: 18px;
  transform: translateX(-50%);
}

@media (max-width: 1220px) {
  .board-history-controls {
    bottom: 6px;
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .board-history-controls {
    bottom: 5px;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .board-history-controls {
    bottom: 4px;
    gap: 8px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .board-history-controls {
    bottom: 4px;
    gap: 8px;
  }
}

/* Final sidebox tab fit: keep ITEMS / TOOLS / PRO on one row. */
.machine-tabs,
.sidebox .machine-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding-right: 0;
}

.machine-tab,
.sidebox .machine-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  font-size: 0.68rem;
  line-height: 1;
}

@media (max-width: 1220px) {
  .sidebox .machine-tab {
    font-size: 0.56rem;
  }
}

@media (max-width: 760px) {
  .sidebox .machine-tab {
    font-size: 0.5rem;
  }
}

@media (max-width: 420px) {
  .sidebox .machine-tab {
    font-size: 0.42rem;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .machine-tabs {
    gap: 0;
    min-height: 18px;
  }

  .sidebox .machine-tab {
    font-size: 0.5rem;
  }
}

/* Final drawing-mode and PRO editor layout. */
.line-mode-toggle,
.sidebox .line-mode-toggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.line-mode-button,
.sidebox .line-mode-button {
  min-width: 0;
}

.line-mode-label,
.sidebox .line-mode-label {
  font-size: 0.38rem;
  letter-spacing: 0;
}

.line-mode-glyph-straight path {
  stroke-linejoin: miter;
}

.machine-advanced-panel .level-editor {
  gap: 2px;
  margin-top: 1px;
  margin-right: 4px;
  padding-top: 3px;
}

.machine-advanced-panel .level-editor-toggle {
  justify-self: end;
  width: 16px;
  height: 12px;
  padding: 0;
  opacity: 0.78;
}

.machine-advanced-panel .level-editor-icon {
  width: 12px;
  height: 12px;
}

.machine-advanced-panel .level-editor-panel,
.board-params .level-editor-panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 5px;
  border-radius: 8px;
  background: rgba(253, 249, 243, 0.44);
}

.machine-advanced-panel .level-editor-column {
  gap: 4px;
}

.machine-advanced-panel .level-editor-field {
  gap: 2px;
  font-size: 0.44rem;
  letter-spacing: 0;
}

.machine-advanced-panel .level-editor-field input {
  padding: 3px 4px 2px;
  border-radius: 6px;
  font-size: 0.52rem;
}

.machine-advanced-panel .level-generator-select {
  min-height: 21px;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 0.5rem;
}

.machine-advanced-panel .level-select {
  min-height: 48px;
  max-height: 62px;
  padding: 2px 3px;
  border-radius: 6px;
  font-size: 0.44rem;
}

.machine-advanced-panel .level-editor-actions,
.board-params .level-editor-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.machine-advanced-panel .level-editor-button {
  padding: 3px 2px 2px;
  border-radius: 6px;
  font-size: 0.38rem;
  letter-spacing: 0;
}

.machine-advanced-panel .level-editor-status {
  padding: 3px 4px;
  border-radius: 6px;
  font-size: 0.36rem;
}

.machine-advanced-panel .level-generator-grid {
  gap: 4px;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .line-mode-toggle {
    gap: 1px;
  }

  .sidebox .line-mode-glyph {
    width: 18px;
    height: 18px;
  }

  .sidebox .line-mode-label {
    font-size: 0.3rem;
  }

  .machine-advanced-panel .level-editor-panel,
  .board-params .level-editor-panel {
    gap: 3px;
    padding: 3px;
  }

  .machine-advanced-panel .level-select {
    min-height: 36px;
    max-height: 44px;
    font-size: 0.34rem;
  }

  .machine-advanced-panel .level-editor-button {
    font-size: 0.3rem;
  }
}

/* Final bottom-toolbar fan icon size. */
.perk-toolbar .fan-tool-icon {
  width: 58px;
  height: 28px;
}

@media (max-width: 1220px) {
  .perk-toolbar .fan-tool-icon {
    width: 46px;
    height: 23px;
  }
}

@media (max-width: 760px) {
  .perk-toolbar .fan-tool-icon {
    width: 38px;
    height: 20px;
  }
}

@media (max-width: 420px) {
  .perk-toolbar .fan-tool-icon {
    width: 30px;
    height: 16px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .perk-toolbar .fan-tool-icon {
    width: 30px;
    height: 16px;
  }
}

/* Final compact line-mode layout: give the three drawing modes the free row space. */
.board-params .sidebox-tool-zone {
  display: grid;
}

.sidebox #line-mode-controls .line-mode-toggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.sidebox #line-mode-controls .line-mode-button {
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 6px;
  }

  .sidebox .sidebox-tool-preview .line-icon {
    width: 44px;
  }

  .sidebox #line-mode-controls.line-mode-controls {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .sidebox #line-mode-controls .line-mode-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 7px;
  }

  .sidebox #line-mode-controls .line-mode-button {
    width: 100%;
    min-width: 0;
    gap: 0;
  }

  .sidebox #line-mode-controls .line-mode-glyph {
    width: 17px;
    height: 17px;
  }

  .sidebox #line-mode-controls .line-mode-glyph svg {
    width: 10px;
    height: 10px;
  }

  .sidebox #line-mode-controls .line-mode-label {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.34rem;
    line-height: 0.95;
    transform: scaleX(0.94);
    transform-origin: center;
  }

  .sidebox #line-straight-button .line-mode-label {
    transform: scaleX(0.78);
  }
}

/* Final compact topbar logo position. */
@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .brand-logo,
  .app-shell.is-board-expanded .brand-logo {
    transform: translateX(-6px) translateY(-2px) rotate(-4deg);
  }
}

/* Final fixed active-tool box: keep the top container stable across tools. */
.sidebox .sidebox-tool-zone {
  --active-tool-box-height: 148px;
  height: var(--active-tool-box-height);
  min-height: var(--active-tool-box-height);
  max-height: var(--active-tool-box-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 66px minmax(0, 1fr);
  align-content: stretch;
  align-items: start;
  gap: 5px;
  overflow: hidden;
  padding: 7px 8px;
}

.sidebox .sidebox-tool-preview {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 2.15em);
  align-items: center;
  justify-items: start;
  gap: 0 8px;
  min-height: 62px;
  max-height: 62px;
  overflow: hidden;
  padding: 1px 2px;
  text-align: left;
}

.sidebox .sidebox-tool-preview .perk-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  align-self: center;
  margin: 0;
}

.sidebox .sidebox-tool-preview .glyph-icon {
  width: 62px;
  height: 28px;
}

.sidebox .sidebox-tool-preview .line-icon {
  width: 64px;
  height: 15px;
}

.sidebox .sidebox-tool-preview .boostslow-icon,
.sidebox .sidebox-tool-preview .friction-icon,
.sidebox .sidebox-tool-preview .boost-icon {
  width: 64px;
  height: 20px;
}

.sidebox .sidebox-tool-preview .elasticity-icon,
.sidebox .sidebox-tool-preview .spring-icon,
.sidebox .sidebox-tool-preview .damper-icon {
  width: 60px;
  height: 22px;
}

.sidebox .sidebox-tool-preview .portal-icon {
  width: 16px;
  height: 30px;
}

.sidebox .sidebox-tool-preview .eraser-toolbar-icon {
  width: 48px;
  height: 30px;
}

.sidebox .sidebox-tool-preview .placed-item-preview-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  width: 58px;
  height: 42px;
}

.sidebox .sidebox-tool-preview .placed-item-preview-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebox .sidebox-tool-preview .tool-preview-title {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1;
}

.sidebox .sidebox-tool-preview .tool-preview-copy {
  grid-column: 2;
  min-width: 0;
  min-height: 2.1em;
  max-height: 2.1em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.49rem;
  line-height: 1.05;
}

.sidebox .line-mode-controls,
.sidebox .elasticity-controls,
.sidebox .boost-controls,
.sidebox .perforation-controls {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  align-self: start;
}

.sidebox #line-mode-controls .line-mode-toggle,
.sidebox #erase-mode-controls .line-mode-toggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  gap: 5px;
}

.sidebox #erase-mode-controls .line-mode-button,
.sidebox #line-mode-controls .line-mode-button {
  width: 100%;
  min-width: 0;
}

.sidebox #erase-mode-controls .line-mode-label,
.sidebox #line-mode-controls .line-mode-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  font-size: 0.39rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.sidebox #erase-scrub-button .line-mode-glyph img {
  width: 20px;
  height: 20px;
}

.tool-cursor-indicator .placed-item-cursor-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  opacity: 0.92;
}

.tool-cursor-indicator .placed-item-cursor-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.line-mode-glyph-group path {
  stroke-width: 2.55;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone {
    --active-tool-box-height: 78px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 31px 36px;
    gap: 3px;
    padding: 4px 5px;
    border-radius: 16px;
  }

  .sidebox .sidebox-tool-preview {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 0 5px;
    min-height: 30px;
    max-height: 30px;
    padding: 0;
  }

  .sidebox .sidebox-tool-preview .perk-icon {
    grid-row: 1;
  }

  .sidebox .sidebox-tool-preview .glyph-icon {
    width: 34px;
    height: 16px;
  }

  .sidebox .sidebox-tool-preview .line-icon {
    width: 34px;
    height: 9px;
  }

  .sidebox .sidebox-tool-preview .boostslow-icon,
  .sidebox .sidebox-tool-preview .friction-icon,
  .sidebox .sidebox-tool-preview .boost-icon {
    width: 34px;
    height: 12px;
  }

  .sidebox .sidebox-tool-preview .elasticity-icon,
  .sidebox .sidebox-tool-preview .spring-icon,
  .sidebox .sidebox-tool-preview .damper-icon {
    width: 34px;
    height: 14px;
  }

  .sidebox .sidebox-tool-preview .portal-icon {
    width: 9px;
    height: 18px;
  }

  .sidebox .sidebox-tool-preview .eraser-toolbar-icon {
    width: 30px;
    height: 17px;
  }

  .sidebox .sidebox-tool-preview .placed-item-preview-icon {
    width: 30px;
    height: 20px;
  }

  .sidebox .sidebox-tool-preview .tool-preview-title {
    grid-column: 2;
    font-size: 0.48rem;
  }

  .sidebox .sidebox-tool-preview .tool-preview-copy {
    display: none;
  }

  .sidebox .line-mode-controls,
  .sidebox .elasticity-controls,
  .sidebox .boost-controls,
  .sidebox .perforation-controls {
    grid-column: 1 / -1;
    min-height: 34px;
    width: 100%;
  }

  .sidebox #erase-mode-controls .line-mode-toggle,
  .sidebox #line-mode-controls .line-mode-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .sidebox #erase-mode-controls .line-mode-glyph,
  .sidebox #line-mode-controls .line-mode-glyph {
    width: 17px;
    height: 17px;
  }

  .sidebox #erase-mode-controls .line-mode-glyph svg,
  .sidebox #line-mode-controls .line-mode-glyph svg {
    width: 10px;
    height: 10px;
  }

  .sidebox #erase-scrub-button .line-mode-glyph img {
    width: 15px;
    height: 15px;
  }

  .sidebox #erase-mode-controls .line-mode-label,
  .sidebox #line-mode-controls .line-mode-label {
    max-width: 100%;
    overflow: visible;
    font-size: 0.31rem;
    line-height: 0.95;
    transform: scaleX(0.92);
    transform-origin: center;
  }

  .sidebox #line-straight-button .line-mode-label {
    transform: scaleX(0.78);
  }
}

/* Final vertical sidebox tab rail: active tab stays centered and the others rotate around it. */
.machine-catalog,
.board-params .machine-catalog,
.sidebox .machine-catalog {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  min-height: 0;
}

.machine-tabs,
.sidebox .machine-tabs {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: 6px;
  min-height: 0;
  height: 100%;
  padding: 2px 0;
}

.machine-tab-panel,
.sidebox .machine-tab-panel {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
}

.machine-tab,
.sidebox .machine-tab {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0 2px;
  color: rgba(19, 19, 19, 0.33);
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  transform: rotate(-1.5deg);
}

.machine-tab[data-rail-position="top"] {
  order: 1;
}

.machine-tab[data-rail-position="center"] {
  order: 2;
}

.machine-tab[data-rail-position="bottom"] {
  order: 3;
}

.machine-tab.is-active,
.sidebox .machine-tab.is-active {
  color: var(--ink);
  font-size: 0.82rem;
  transform: rotate(-1.5deg) scale(1.08);
}

.machine-tab:not(.is-active):hover,
.machine-tab:not(.is-active):focus-visible {
  color: rgba(19, 19, 19, 0.58);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .machine-catalog,
  .board-params .machine-catalog,
  .sidebox .machine-catalog {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px;
  }

  .machine-tabs,
  .sidebox .machine-tabs {
    gap: 3px;
    min-height: 0;
    padding: 1px 0;
  }

  .machine-tab,
  .sidebox .machine-tab {
    font-size: 0.5rem;
    padding: 0 1px;
  }

  .machine-tab.is-active,
  .sidebox .machine-tab.is-active {
    font-size: 0.58rem;
  }
}

/* Final PRO panel order and collapsible section layout. */
.machine-advanced-panel,
.sidebox .machine-advanced-panel {
  align-content: start;
  gap: 8px;
  padding-right: 6px;
}

.machine-advanced-panel .level-editor,
.machine-advanced-panel .advanced-params {
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.machine-advanced-panel .level-editor {
  order: 1;
}

.machine-advanced-panel .level-generator {
  order: 2;
}

.machine-advanced-panel .advanced-params {
  order: 3;
}

.machine-advanced-panel .level-editor-toggle,
.machine-advanced-panel .advanced-params-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 5px;
  border: 1px solid rgba(19, 19, 19, 0.34);
  border-radius: 7px;
  background: rgba(253, 249, 243, 0.58);
  color: var(--ink);
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-size: 0.58rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
}

.machine-advanced-panel .level-editor-toggle span,
.machine-advanced-panel .advanced-params-toggle span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-advanced-panel .level-editor-icon,
.machine-advanced-panel .advanced-params-icon {
  width: 13px;
  height: 13px;
  justify-self: end;
}

.machine-advanced-panel .level-editor-panel,
.board-params .machine-advanced-panel .level-editor-panel,
.machine-advanced-panel .advanced-params-grid,
.board-params .machine-advanced-panel .advanced-params-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 6px;
  border-radius: 8px;
  background: rgba(253, 249, 243, 0.46);
  box-shadow: inset 0 0 0 1px rgba(19, 19, 19, 0.08);
}

.machine-advanced-panel .level-editor-panel,
.board-params .machine-advanced-panel .level-editor-panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.machine-advanced-panel .advanced-params-grid,
.board-params .machine-advanced-panel .advanced-params-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  max-height: none;
  overflow: visible;
}

.machine-advanced-panel .advanced-params-grid[hidden],
.board-params .machine-advanced-panel .advanced-params-grid[hidden] {
  display: none;
}

.machine-advanced-panel .advanced-params-grid > div,
.board-params .machine-advanced-panel .advanced-params-grid > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.machine-advanced-panel .advanced-params-grid > .advanced-ball-row,
.board-params .machine-advanced-panel .advanced-params-grid > .advanced-ball-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.machine-advanced-panel .advanced-param-input-row,
.board-params .machine-advanced-panel .advanced-param-input-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.machine-advanced-panel .advanced-param-number,
.board-params .machine-advanced-panel .advanced-param-number {
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .machine-advanced-panel,
  .sidebox .machine-advanced-panel {
    gap: 5px;
    padding-right: 4px;
  }

  .machine-advanced-panel .level-editor-toggle,
  .machine-advanced-panel .advanced-params-toggle {
    height: 20px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 0.43rem;
  }

  .machine-advanced-panel .level-editor-panel,
  .board-params .machine-advanced-panel .level-editor-panel,
  .machine-advanced-panel .advanced-params-grid,
  .board-params .machine-advanced-panel .advanced-params-grid {
    gap: 3px;
    padding: 4px;
  }

  .machine-advanced-panel .advanced-params-grid > .advanced-ball-row,
  .board-params .machine-advanced-panel .advanced-params-grid > .advanced-ball-row {
    gap: 4px;
  }

  .machine-advanced-panel .advanced-param-icon,
  .board-params .machine-advanced-panel .advanced-param-icon {
    width: 20px;
    min-width: 20px;
  }
}

/* Final sidebox tab position: keep ITEMS / TOOLS / PRO as a top row. */
.machine-catalog,
.board-params .machine-catalog,
.sidebox .machine-catalog {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  align-items: stretch;
}

.machine-tabs,
.sidebox .machine-tabs {
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 28px;
  height: auto;
  min-height: 0;
  gap: 5px;
  padding: 0;
}

.machine-tab-panel,
.sidebox .machine-tab-panel {
  grid-column: 1;
  grid-row: 2;
}

.machine-tab,
.sidebox .machine-tab {
  order: 0 !important;
  height: 28px;
  min-height: 0;
  padding: 0 4px;
  font-size: 0.64rem;
}

.machine-tab.is-active,
.sidebox .machine-tab.is-active {
  font-size: 0.76rem;
  transform: rotate(-1.5deg) scale(1.04);
}

/* Final board corner controls: expand + pan on the left, editing actions on the right. */
.board-frame {
  --board-control-left-edge: 14px;
  --board-control-right-edge: 22px;
  --board-control-bottom-edge: 14px;
}

.board-frame .board-expand-button {
  top: auto;
  right: auto;
  left: var(--board-control-left-edge);
  bottom: var(--board-control-bottom-edge);
  z-index: 8;
}

.board-frame .board-pan-button {
  left: calc(var(--board-control-left-edge) + 58px);
  bottom: calc(var(--board-control-bottom-edge) + 5px);
  top: auto;
  z-index: 8;
}

.board-frame .board-corner-actions {
  left: auto;
  right: var(--board-control-right-edge);
  bottom: calc(var(--board-control-bottom-edge) + 2px);
  gap: 12px;
}

.board-frame .board-toolbox-widget {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

.board-frame .board-zoom-readout {
  left: var(--board-control-left-edge);
  bottom: calc(var(--board-control-bottom-edge) + 58px);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .machine-catalog,
  .board-params .machine-catalog,
  .sidebox .machine-catalog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 3px;
  }

  .machine-tabs,
  .sidebox .machine-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 18px;
    gap: 3px;
    padding: 0;
  }

  .machine-tab,
  .sidebox .machine-tab {
    height: 18px;
    padding: 0 1px;
    font-size: 0.42rem;
  }

  .machine-tab.is-active,
  .sidebox .machine-tab.is-active {
    font-size: 0.5rem;
  }

  .board-frame {
    --board-control-left-edge: 8px;
    --board-control-right-edge: 13px;
    --board-control-bottom-edge: 8px;
  }

  .board-frame .board-expand-button {
    width: 28px;
    height: 28px;
  }

  .board-frame .board-expand-icon {
    width: 18px;
    height: 18px;
  }

  .board-frame .board-pan-button {
    left: calc(var(--board-control-left-edge) + 34px);
    bottom: calc(var(--board-control-bottom-edge) + 3px);
    width: 22px;
    height: 22px;
  }

  .board-frame .board-corner-actions {
    right: var(--board-control-right-edge);
    bottom: var(--board-control-bottom-edge);
    gap: 8px;
  }

  .board-frame .board-zoom-readout {
    left: var(--board-control-left-edge);
    bottom: calc(var(--board-control-bottom-edge) + 31px);
  }
}

/* Final active-tool card: centered title, short copy, controls below. */
.sidebox .sidebox-tool-zone {
  --active-tool-box-height: 124px;
  grid-template-rows: 42px minmax(0, 1fr);
  gap: 4px;
  padding: 6px 8px;
}

.sidebox .sidebox-tool-preview {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 18px 18px;
  align-items: center;
  justify-items: center;
  gap: 1px;
  min-height: 38px;
  max-height: 38px;
  padding: 0 30px 0;
  text-align: center;
}

.sidebox .sidebox-tool-preview .perk-icon,
.sidebox .sidebox-tool-preview .placed-item-preview-icon {
  position: absolute;
  left: 2px;
  top: 50%;
  grid-column: auto;
  grid-row: auto;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0.62;
  transform: translateY(-50%);
}

.sidebox .sidebox-tool-preview .line-icon {
  width: 27px;
  height: 11px;
}

.sidebox .sidebox-tool-preview .boostslow-icon,
.sidebox .sidebox-tool-preview .friction-icon,
.sidebox .sidebox-tool-preview .boost-icon,
.sidebox .sidebox-tool-preview .fan-tool-icon {
  width: 26px;
  height: 14px;
}

.sidebox .sidebox-tool-preview .elasticity-icon,
.sidebox .sidebox-tool-preview .spring-icon,
.sidebox .sidebox-tool-preview .damper-icon {
  width: 25px;
  height: 14px;
}

.sidebox .sidebox-tool-preview .portal-icon {
  width: 9px;
  height: 22px;
}

.sidebox .sidebox-tool-preview .eraser-toolbar-icon {
  width: 24px;
  height: 16px;
}

.sidebox .sidebox-tool-preview .placed-item-preview-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebox .sidebox-tool-preview .tool-preview-title {
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
  align-self: end;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.68rem;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebox .sidebox-tool-preview .tool-preview-copy {
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  max-height: 1.1em;
  align-self: start;
  overflow: hidden;
  display: block;
  color: rgba(19, 19, 19, 0.66);
  font-size: 0.4rem;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebox .line-mode-controls,
.sidebox .elasticity-controls,
.sidebox .boost-controls,
.sidebox .perforation-controls {
  min-height: 48px;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone {
    --active-tool-box-height: 70px;
    grid-template-rows: 27px 34px;
    gap: 2px;
    padding: 3px 5px;
  }

  .sidebox .sidebox-tool-preview {
    grid-template-rows: 13px 11px;
    min-height: 25px;
    max-height: 25px;
    padding: 0 18px;
  }

  .sidebox .sidebox-tool-preview .perk-icon,
  .sidebox .sidebox-tool-preview .placed-item-preview-icon {
    left: 1px;
    width: 15px;
    height: 15px;
  }

  .sidebox .sidebox-tool-preview .line-icon {
    width: 18px;
    height: 8px;
  }

  .sidebox .sidebox-tool-preview .boostslow-icon,
  .sidebox .sidebox-tool-preview .friction-icon,
  .sidebox .sidebox-tool-preview .boost-icon,
  .sidebox .sidebox-tool-preview .fan-tool-icon {
    width: 17px;
    height: 10px;
  }

  .sidebox .sidebox-tool-preview .elasticity-icon,
  .sidebox .sidebox-tool-preview .spring-icon,
  .sidebox .sidebox-tool-preview .damper-icon {
    width: 17px;
    height: 10px;
  }

  .sidebox .sidebox-tool-preview .portal-icon {
    width: 6px;
    height: 14px;
  }

  .sidebox .sidebox-tool-preview .eraser-toolbar-icon {
    width: 15px;
    height: 10px;
  }

  .sidebox .sidebox-tool-preview .tool-preview-title {
    font-size: 0.42rem;
  }

  .sidebox .sidebox-tool-preview .tool-preview-copy {
    display: block;
    max-height: 1em;
    font-size: 0.26rem;
    line-height: 1;
  }

  .sidebox .line-mode-controls,
  .sidebox .elasticity-controls,
  .sidebox .boost-controls,
  .sidebox .perforation-controls {
    min-height: 32px;
  }
}

/* Final active-tool flow: header, controls, then description. */
.sidebox .sidebox-tool-zone {
  --active-tool-box-height: 124px;
  grid-template-rows: 30px minmax(0, auto) minmax(18px, 1fr);
  gap: 2px;
  padding: 6px 8px;
}

.sidebox .sidebox-tool-preview {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: start;
  gap: 5px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  text-align: left;
}

.sidebox .sidebox-tool-preview .perk-icon,
.sidebox .sidebox-tool-preview .placed-item-preview-icon {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  width: 28px;
  height: 24px;
  margin: 0;
  opacity: 0.88;
  transform: none;
}

.sidebox .sidebox-tool-preview .line-icon {
  width: 27px;
  height: 11px;
}

.sidebox .sidebox-tool-preview .boostslow-icon,
.sidebox .sidebox-tool-preview .friction-icon,
.sidebox .sidebox-tool-preview .boost-icon,
.sidebox .sidebox-tool-preview .fan-tool-icon {
  width: 26px;
  height: 14px;
}

.sidebox .sidebox-tool-preview .elasticity-icon,
.sidebox .sidebox-tool-preview .spring-icon,
.sidebox .sidebox-tool-preview .damper-icon {
  width: 25px;
  height: 14px;
  overflow: hidden;
}

.sidebox .sidebox-tool-preview .elasticity-icon svg {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.sidebox .sidebox-tool-preview .elasticity-icon .elasticity-spring {
  display: block;
}

.sidebox .sidebox-tool-preview .elasticity-icon .elasticity-damper {
  display: none;
}

.sidebox .sidebox-tool-preview .elasticity-icon path {
  stroke-width: 5;
}

.sidebox .sidebox-tool-preview .portal-icon {
  width: 9px;
  height: 22px;
}

.sidebox .sidebox-tool-preview .eraser-toolbar-icon {
  width: 24px;
  height: 16px;
}

.sidebox .sidebox-tool-preview .placed-item-preview-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebox .sidebox-tool-preview .tool-preview-title {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  align-self: center;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.66rem;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebox .sidebox-tool-preview .tool-preview-value {
  grid-column: 3;
  justify-self: end;
  min-width: 0;
  max-width: 58px;
  overflow: hidden;
  color: rgba(19, 19, 19, 0.68);
  font-size: 0.46rem;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebox .sidebox-tool-zone > .tool-preview-copy {
  min-width: 0;
  min-height: 0;
  max-height: 2.1em;
  margin: 0;
  align-self: end;
  overflow: hidden;
  color: rgba(19, 19, 19, 0.66);
  font-size: 0.42rem;
  line-height: 1.02;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.machine-advanced-panel .level-editor-toggle,
.machine-advanced-panel .advanced-params-toggle {
  height: 19px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.machine-advanced-panel .level-editor-toggle:hover,
.machine-advanced-panel .level-editor-toggle:focus-visible,
.machine-advanced-panel .advanced-params-toggle:hover,
.machine-advanced-panel .advanced-params-toggle:focus-visible {
  background: transparent;
}

.machine-advanced-panel .level-editor-icon,
.machine-advanced-panel .advanced-params-icon {
  width: 12px;
  height: 12px;
}

.machine-icon-gear {
  width: 29px;
  max-width: 29px;
  height: 25px;
}

.select-tool-icon {
  display: inline-grid;
  place-items: center;
  color: var(--ink);
}

.select-tool-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: rgba(19, 19, 19, 0.08);
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.machine-glyph.select-tool-icon {
  width: 31px;
  height: 25px;
}

.toolbox-mini-icon.select-tool-icon {
  width: 16px;
  height: 18px;
}

.sidebox .sidebox-tool-preview .select-tool-icon {
  width: 23px;
  height: 23px;
}

.item-property-controls {
  display: none;
}

.item-property-controls.is-visible {
  display: grid;
  grid-row: 3;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  min-width: 0;
  align-self: start;
}

.item-property-field {
  display: none;
  min-width: 0;
  align-items: center;
  gap: 2px;
  color: rgba(19, 19, 19, 0.7);
  font-size: 0.34rem;
  font-weight: 900;
  line-height: 1;
}

.item-property-field.is-visible {
  display: grid;
}

.item-property-number {
  width: 100%;
  min-width: 0;
  height: 17px;
  padding: 0 1px;
  border: 1px solid rgba(19, 19, 19, 0.62);
  border-radius: 5px;
  background: rgba(253, 249, 243, 0.88);
  color: var(--ink);
  font: inherit;
  font-size: 0.43rem;
  line-height: 1;
  text-align: center;
}

.sidebox .sidebox-tool-zone.has-item-properties {
  grid-template-rows: 30px minmax(0, auto) 22px minmax(14px, 1fr);
}

.sidebox .sidebox-tool-zone.has-item-properties > .tool-preview-copy {
  grid-row: 4;
}

.sidebox .sidebox-tool-zone.has-item-properties:not(.has-item-transform) {
  grid-template-rows: 30px 22px minmax(14px, 1fr);
}

.sidebox .sidebox-tool-zone.has-item-properties:not(.has-item-transform) .item-property-controls.is-visible {
  grid-row: 2;
}

.sidebox .sidebox-tool-zone.has-item-properties:not(.has-item-transform) > .tool-preview-copy {
  grid-row: 3;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone {
    --active-tool-box-height: 70px;
    grid-template-rows: 19px minmax(0, auto) minmax(12px, 1fr);
    gap: 0;
    padding: 3px 5px;
  }

  .sidebox .sidebox-tool-preview {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    min-height: 19px;
    max-height: 19px;
    gap: 3px;
    padding: 0;
  }

  .sidebox .sidebox-tool-preview .perk-icon,
  .sidebox .sidebox-tool-preview .placed-item-preview-icon {
    width: 17px;
    height: 15px;
  }

  .sidebox .sidebox-tool-preview .line-icon {
    width: 18px;
    height: 8px;
  }

  .sidebox .sidebox-tool-preview .boostslow-icon,
  .sidebox .sidebox-tool-preview .friction-icon,
  .sidebox .sidebox-tool-preview .boost-icon,
  .sidebox .sidebox-tool-preview .fan-tool-icon {
    width: 17px;
    height: 10px;
  }

  .sidebox .sidebox-tool-preview .elasticity-icon,
  .sidebox .sidebox-tool-preview .spring-icon,
  .sidebox .sidebox-tool-preview .damper-icon {
    width: 17px;
    height: 10px;
  }

  .sidebox .sidebox-tool-preview .portal-icon {
    width: 6px;
    height: 14px;
  }

  .sidebox .sidebox-tool-preview .eraser-toolbar-icon {
    width: 15px;
    height: 10px;
  }

  .sidebox .sidebox-tool-preview .tool-preview-title {
    font-size: 0.39rem;
  }

  .sidebox .sidebox-tool-preview .tool-preview-value {
    max-width: 40px;
    font-size: 0.28rem;
  }

  .sidebox .sidebox-tool-zone > .tool-preview-copy {
    max-height: 2em;
    font-size: 0.26rem;
    line-height: 1;
  }

  .machine-advanced-panel .level-editor-toggle,
  .machine-advanced-panel .advanced-params-toggle {
    height: 16px;
    padding: 0 1px;
    font-size: 0.41rem;
  }

  .machine-icon-gear {
    width: 22px;
    max-width: 22px;
    height: 20px;
  }

  .machine-glyph.select-tool-icon {
    width: 23px;
    height: 18px;
  }

  .sidebox .sidebox-tool-preview .select-tool-icon {
    width: 15px;
    height: 15px;
  }

  .sidebox .sidebox-tool-zone.has-item-properties {
    grid-template-rows: 19px minmax(0, auto) 17px minmax(10px, 1fr);
  }

  .sidebox .sidebox-tool-zone.has-item-properties:not(.has-item-transform) {
    grid-template-rows: 19px 17px minmax(10px, 1fr);
  }

  .item-property-controls.is-visible {
    gap: 2px;
  }

  .item-property-field {
    font-size: 0.24rem;
  }

  .item-property-number {
    height: 12px;
    border-radius: 4px;
    font-size: 0.29rem;
  }
}

/* Final compact mode symbols in the upper sidebox tool controls. */
.sidebox #line-mode-controls .line-mode-button,
.sidebox #erase-mode-controls .line-mode-button {
  gap: 1px;
}

.sidebox #line-mode-controls .line-mode-glyph,
.sidebox #erase-mode-controls .line-mode-glyph {
  width: 16px;
  height: 16px;
  border-width: 1.2px;
}

.sidebox #line-mode-controls .line-mode-glyph svg,
.sidebox #erase-mode-controls .line-mode-glyph svg {
  width: 8px;
  height: 8px;
}

.sidebox #line-mode-controls .line-mode-glyph path,
.sidebox #line-mode-controls .line-mode-glyph circle,
.sidebox #erase-mode-controls .line-mode-glyph path,
.sidebox #erase-mode-controls .line-mode-glyph circle {
  stroke-width: 2.4;
}

.sidebox #erase-scrub-button .line-mode-glyph img {
  width: 13px;
  height: 13px;
}

.sidebox #line-mode-controls .line-mode-button.is-locked .line-mode-glyph,
.sidebox #erase-mode-controls .line-mode-button.is-locked .line-mode-glyph {
  border-width: 2px;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox #line-mode-controls .line-mode-toggle,
  .sidebox #erase-mode-controls .line-mode-toggle {
    gap: 4px;
  }

  .sidebox #line-mode-controls .line-mode-glyph,
  .sidebox #erase-mode-controls .line-mode-glyph {
    width: 11px;
    height: 11px;
    border-width: 1px;
  }

  .sidebox #line-mode-controls .line-mode-glyph svg,
  .sidebox #erase-mode-controls .line-mode-glyph svg {
    width: 6px;
    height: 6px;
  }

  .sidebox #line-mode-controls .line-mode-glyph path,
  .sidebox #line-mode-controls .line-mode-glyph circle,
  .sidebox #erase-mode-controls .line-mode-glyph path,
  .sidebox #erase-mode-controls .line-mode-glyph circle {
    stroke-width: 2.1;
  }

  .sidebox #erase-scrub-button .line-mode-glyph img {
    width: 9px;
    height: 9px;
  }

  .sidebox #line-mode-controls .line-mode-button.is-locked .line-mode-glyph,
  .sidebox #erase-mode-controls .line-mode-button.is-locked .line-mode-glyph {
    border-width: 1.5px;
  }
}

/* Final inline mode controls: drawing/eraser modes live in the title row. */
.sidebox .sidebox-tool-zone.has-inline-modes {
  position: relative;
  grid-template-rows: 24px minmax(18px, 1fr);
  gap: 1px;
}

.sidebox .sidebox-tool-zone.has-inline-modes .sidebox-tool-preview {
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  min-height: 22px;
  max-height: 22px;
  grid-template-columns: 26px minmax(0, 1fr);
  box-sizing: border-box;
  padding-right: 65px;
}

.sidebox .sidebox-tool-zone.has-inline-modes .sidebox-tool-preview .tool-preview-value {
  display: none;
}

.sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls.is-visible,
.sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls.is-visible {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: 19px;
}

.sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-toggle,
.sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-toggle {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  width: auto;
}

.sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-button,
.sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-button {
  width: 19px;
  height: 19px;
  min-width: 19px;
  gap: 0;
}

.sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-label,
.sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-label {
  display: none;
}

.sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-glyph,
.sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-glyph {
  width: 15px;
  height: 15px;
}

.sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-glyph svg,
.sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-glyph svg {
  width: 10px;
  height: 10px;
}

.sidebox .sidebox-tool-zone.has-inline-modes #erase-scrub-button .line-mode-glyph img {
  width: 13px;
  height: 13px;
}

.sidebox .sidebox-tool-zone.has-inline-modes > .tool-preview-copy {
  grid-row: 2;
  align-self: start;
}

.sidebox .sidebox-tool-zone.has-slider-control {
  grid-template-rows: 30px minmax(0, auto) minmax(18px, 1fr);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone.has-inline-modes {
    grid-template-rows: 20px minmax(12px, 1fr);
    gap: 0;
  }

  .sidebox .sidebox-tool-zone.has-inline-modes .sidebox-tool-preview {
    min-height: 20px;
    max-height: 20px;
    grid-template-columns: 17px minmax(0, 1fr);
    padding-right: 55px;
  }

  .sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls.is-visible,
  .sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls.is-visible {
    top: 4px;
    right: 5px;
    height: 17px;
  }

  .sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-toggle,
  .sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-toggle {
    gap: 0;
  }

  .sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-button,
  .sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-button {
    width: 17px;
    height: 17px;
    min-width: 17px;
  }

  .sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-glyph,
  .sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-glyph {
    width: 14px;
    height: 14px;
  }

  .sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-glyph svg,
  .sidebox .sidebox-tool-zone.has-inline-modes #erase-mode-controls .line-mode-glyph svg {
    width: 9px;
    height: 9px;
  }

  .sidebox .sidebox-tool-zone.has-inline-modes #erase-scrub-button .line-mode-glyph img {
    width: 12px;
    height: 12px;
  }

  .sidebox .sidebox-tool-zone.has-slider-control {
    grid-template-rows: 19px minmax(0, auto) minmax(12px, 1fr);
  }
}

/* Larger active-tool description in the upper sidebox card. */
.sidebox .sidebox-tool-zone > .tool-preview-copy {
  max-height: 2.35em;
  color: rgba(19, 19, 19, 0.74);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.08;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone {
    --active-tool-box-height: 94px;
    grid-template-rows: 22px minmax(0, auto) minmax(30px, 1fr);
  }

  .sidebox .sidebox-tool-zone > .tool-preview-copy {
    max-height: 2.35em;
    font-size: 0.58rem;
    line-height: 1.08;
  }
}

/* Numeric thumb controls for FAN, PAPER and SPRING sliders. */
.sidebox .elasticity-controls,
.sidebox .boost-controls,
.sidebox .perforation-controls {
  --tool-value-x: 50%;
  position: relative;
  padding-top: 18px;
}

.sidebox .elasticity-header,
.sidebox .boost-header,
.sidebox .perforation-header {
  min-height: 0;
}

.sidebox .elasticity-inline-number,
.sidebox .boost-inline-number,
.sidebox .perforation-inline-number {
  position: absolute;
  left: clamp(12px, var(--tool-value-x), calc(100% - 12px));
  top: 0;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid rgba(19, 19, 19, 0.78);
  border-radius: 50%;
  background: #fdf9f3;
  box-shadow: 0 2px 5px rgba(40, 29, 16, 0.14);
  color: var(--ink);
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.46rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
}

.sidebox .elasticity-range,
.sidebox .boost-range,
.sidebox .perforation-range {
  height: 18px;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .elasticity-controls,
  .sidebox .boost-controls,
  .sidebox .perforation-controls {
    padding-top: 14px;
  }

  .sidebox .elasticity-inline-number,
  .sidebox .boost-inline-number,
  .sidebox .perforation-inline-number {
    width: 24px;
    height: 24px;
    font-size: 0.34rem;
  }

  .sidebox .elasticity-range,
  .sidebox .boost-range,
  .sidebox .perforation-range {
    height: 13px;
  }
}

/* Tighten the upper sidebox card after numeric slider thumbs. */
.sidebox .sidebox-tool-zone {
  --active-tool-box-height: 112px;
  grid-template-rows: 30px minmax(0, auto) minmax(0, auto);
  gap: 1px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.sidebox .sidebox-tool-zone > .tool-preview-copy {
  align-self: start;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone {
    --active-tool-box-height: 84px;
    grid-template-rows: 21px minmax(0, auto) minmax(0, auto);
    gap: 1px;
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

/* Item orientation controls inside the fixed upper sidebox. */
.sidebox .sidebox-tool-zone.has-item-transform {
  grid-template-rows: 30px 24px minmax(0, auto);
}

.item-transform-controls {
  display: none;
}

.item-transform-controls.is-visible {
  display: flex;
  grid-row: 2;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.item-transform-button {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 22px;
  min-width: 25px;
  padding: 0;
  border: 1.5px solid rgba(19, 19, 19, 0.78);
  border-radius: 5px;
  background: rgba(253, 249, 243, 0.9);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(40, 29, 16, 0.1);
  cursor: pointer;
}

.item-transform-button:hover,
.item-transform-button:focus-visible,
.item-transform-button.active {
  background: rgba(19, 19, 19, 0.9);
  color: #fdf9f3;
}

.item-transform-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.item-transform-side-button {
  grid-template-columns: 15px auto;
  width: 48px;
  gap: 1px;
  padding: 0 4px;
}

.item-transform-side-button span,
.item-transform-value {
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.46rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.item-transform-value {
  min-width: 38px;
  color: rgba(19, 19, 19, 0.7);
  text-align: center;
}

.sidebox .sidebox-tool-preview .placed-item-preview-icon img,
.tool-cursor-indicator .placed-item-cursor-icon img {
  transform-origin: center;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .sidebox-tool-zone.has-item-transform {
    grid-template-rows: 20px 18px minmax(0, auto);
  }

  .item-transform-controls.is-visible {
    gap: 2px;
  }

  .item-transform-button {
    width: 20px;
    height: 17px;
    min-width: 20px;
    border-radius: 4px;
  }

  .item-transform-button svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
  }

  .item-transform-side-button {
    grid-template-columns: 12px auto;
    width: 38px;
    padding: 0 2px;
  }

  .item-transform-side-button span,
  .item-transform-value {
    font-size: 0.34rem;
  }

  .item-transform-value {
    min-width: 29px;
  }
}

/* Final bottom tray handle position: show and hide share the same screen point. */
.board-tray-toggle,
.board-tray-hide-toggle,
.app-shell.is-board-expanded .board-tray-toggle,
.app-shell.is-board-expanded .board-tray-hide-toggle {
  position: fixed;
  left: auto;
  right: clamp(70px, 13vw, 160px);
  top: var(--board-bottom-toggle-y, calc(100% - 72px));
  bottom: auto;
  z-index: 18;
  transform: translateY(-50%);
}

/* Final numeric slider thumb position: keep after every older slider override. */
.sidebox .elasticity-controls,
.sidebox .boost-controls,
.sidebox .perforation-controls {
  --tool-thumb-size: 22px;
  --tool-thumb-half: 11px;
  --tool-header-height: 12px;
  --tool-range-height: 18px;
  --tool-range-half: 9px;
  position: relative;
  min-height: calc(var(--tool-header-height) + var(--tool-range-height));
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
}

.sidebox .elasticity-controls.is-visible,
.sidebox .boost-controls.is-visible,
.sidebox .perforation-controls.is-visible {
  display: grid;
  grid-template-rows: var(--tool-header-height) var(--tool-range-height);
}

.sidebox .elasticity-header,
.sidebox .boost-header,
.sidebox .perforation-header {
  min-height: var(--tool-header-height);
  height: var(--tool-header-height);
  line-height: 1;
}

.sidebox .elasticity-inline-number,
.sidebox .boost-inline-number,
.sidebox .perforation-inline-number {
  -moz-appearance: textfield;
  appearance: textfield;
  position: absolute;
  left: clamp(var(--tool-thumb-half), var(--tool-value-x), calc(100% - var(--tool-thumb-half)));
  top: calc(var(--tool-header-height) + var(--tool-range-half));
  z-index: 4;
  width: var(--tool-thumb-size);
  height: var(--tool-thumb-size);
  padding: 0;
  border: 1.35px solid rgba(19, 19, 19, 0.78);
  border-radius: 50%;
  background: #fdf9f3;
  box-shadow: 0 1px 3px rgba(40, 29, 16, 0.14);
  color: var(--ink);
  cursor: ew-resize;
  font-family: "Permanent Marker", "Trebuchet MS", sans-serif;
  font-size: 0.36rem;
  font-weight: 800;
  line-height: var(--tool-thumb-size);
  text-align: center;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.sidebox .elasticity-range,
.sidebox .boost-range,
.sidebox .perforation-range {
  grid-row: 2;
  align-self: center;
  height: var(--tool-range-height);
  padding: 0;
}

.sidebox .elasticity-range::-webkit-slider-thumb,
.sidebox .boost-range::-webkit-slider-thumb,
.sidebox .perforation-range::-webkit-slider-thumb {
  width: var(--tool-thumb-size);
  height: var(--tool-thumb-size);
  margin-top: calc(1px - var(--tool-thumb-half));
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.sidebox .elasticity-range::-moz-range-thumb,
.sidebox .boost-range::-moz-range-thumb,
.sidebox .perforation-range::-moz-range-thumb {
  width: var(--tool-thumb-size);
  height: var(--tool-thumb-size);
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.sidebox .elasticity-inline-number::-webkit-outer-spin-button,
.sidebox .elasticity-inline-number::-webkit-inner-spin-button,
.sidebox .boost-inline-number::-webkit-outer-spin-button,
.sidebox .boost-inline-number::-webkit-inner-spin-button,
.sidebox .perforation-inline-number::-webkit-outer-spin-button,
.sidebox .perforation-inline-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .elasticity-controls,
  .sidebox .boost-controls,
  .sidebox .perforation-controls {
    --tool-thumb-size: 18px;
    --tool-thumb-half: 9px;
    --tool-header-height: 9px;
    --tool-range-height: 15px;
    --tool-range-half: 7.5px;
  }

  .sidebox .elasticity-inline-number,
  .sidebox .boost-inline-number,
  .sidebox .perforation-inline-number {
    font-size: 0.29rem;
    border-width: 1.2px;
  }
}

/* Final item group rail overrides. */
.sidebox .machine-elements-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  min-height: 0;
  overflow: hidden;
}

.sidebox .machine-elements-body .machine-component-list {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 1px;
}

.sidebox .machine-category-tabs {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  padding: 0 2px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.sidebox .machine-category-tabs::-webkit-scrollbar {
  display: none;
}

.sidebox .machine-category-tab {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(19, 19, 19, 0.48);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.sidebox .machine-category-tab .category-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(1);
}

.sidebox .machine-category-tab.is-active {
  background: transparent;
  color: var(--ink);
}

.sidebox .machine-category-tab.is-active .category-icon {
  filter: grayscale(1) contrast(1.22);
}

.sidebox .machine-component[hidden] {
  display: none;
}

.machine-icon-roller {
  width: 35px;
  max-width: 36px;
  height: 23px;
}

.machine-icon-drive-belt {
  width: 37px;
  max-width: 38px;
  height: 23px;
}

.machine-icon-weight {
  width: 20px;
  max-width: 22px;
  height: 26px;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .sidebox .machine-elements-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 2px;
  }

  .sidebox .machine-category-tabs {
    gap: 3px;
    padding-bottom: 1px;
  }

  .sidebox .machine-category-tab {
    width: 23px;
    height: 21px;
  }

  .sidebox .machine-category-tab .category-icon {
    width: 20px;
    height: 20px;
  }

  .machine-icon-roller,
  .machine-icon-drive-belt {
    width: 27px;
    max-width: 28px;
    height: 17px;
  }

  .machine-icon-weight {
    width: 15px;
    max-width: 16px;
    height: 19px;
  }
}

/* Last Maps Management cleanup. */
.machine-advanced-panel #level-editor {
  gap: 4px;
}

.machine-advanced-panel #level-editor .level-editor-toggle {
  height: 18px;
  justify-self: stretch;
  padding: 0 2px 2px;
  border-bottom: 1.4px solid rgba(19, 19, 19, 0.18);
  color: rgba(19, 19, 19, 0.86);
}

.machine-advanced-panel #level-editor .level-editor-toggle span {
  text-align: left;
}

.machine-advanced-panel #level-editor .level-editor-panel,
.board-params .machine-advanced-panel #level-editor .level-editor-panel {
  gap: 0;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.machine-advanced-panel #level-editor .level-editor-column {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.machine-advanced-panel #level-editor .level-editor-field {
  color: rgba(19, 19, 19, 0.58);
  font-size: 0.4rem;
  font-weight: 900;
}

.machine-advanced-panel #level-editor .level-title-field {
  grid-template-columns: 33px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.machine-advanced-panel #level-editor .level-board-field {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.machine-advanced-panel #level-title-input {
  height: 22px;
  padding: 2px 6px;
  border-width: 1.3px;
  border-radius: 7px;
  background: rgba(253, 249, 243, 0.8);
  font-size: 0.5rem;
}

.machine-advanced-panel #level-select {
  min-height: 62px;
  max-height: 72px;
  padding: 3px 4px;
  border-width: 1.3px;
  border-radius: 7px;
  background: rgba(253, 249, 243, 0.66);
  font-size: 0.42rem;
}

.machine-advanced-panel #map-edit-toggle {
  width: 100%;
  height: 22px;
  border-radius: 7px;
  background: rgba(253, 249, 243, 0.54);
  font-size: 0.4rem;
}

.machine-advanced-panel #map-edit-toggle.is-active {
  background: rgba(118, 155, 103, 0.34);
}

.machine-advanced-panel #level-editor .level-editor-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.machine-advanced-panel #level-editor .level-editor-button {
  height: 22px;
  padding: 0 4px;
  border-radius: 7px;
  font-size: 0.38rem;
}

.machine-advanced-panel #level-editor-status {
  min-height: 22px;
  padding: 4px 2px 0;
  border-top: 1.3px solid rgba(19, 19, 19, 0.14);
  border-radius: 0;
  background: transparent;
  color: rgba(19, 19, 19, 0.62);
  font-size: 0.34rem;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .machine-advanced-panel #level-editor {
    gap: 3px;
  }

  .machine-advanced-panel #level-editor .level-editor-toggle {
    height: 15px;
    font-size: 0.39rem;
  }

  .machine-advanced-panel #level-editor .level-editor-column {
    gap: 3px;
  }

  .machine-advanced-panel #level-editor .level-editor-field {
    font-size: 0.31rem;
  }

  .machine-advanced-panel #level-editor .level-title-field {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 3px;
  }

  .machine-advanced-panel #level-title-input,
  .machine-advanced-panel #map-edit-toggle,
  .machine-advanced-panel #level-editor .level-editor-button {
    height: 17px;
    border-radius: 5px;
    font-size: 0.3rem;
  }

  .machine-advanced-panel #level-select {
    min-height: 42px;
    max-height: 48px;
    font-size: 0.3rem;
  }

.machine-advanced-panel #level-editor-status {
    min-height: 16px;
    padding-top: 2px;
    font-size: 0.27rem;
  }
}

.machine-advanced-panel .advanced-params-grid,
.board-params .machine-advanced-panel .advanced-params-grid {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.advanced-check-row,
.level-editor-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(19, 19, 19, 0.78);
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-size: 0.42rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.advanced-check-row {
  justify-content: space-between;
  width: 100%;
}

.level-editor-check {
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  padding: 1px 0;
}

.advanced-check-row input,
.level-editor-check input,
.machine-advanced-panel #map-edit-toggle {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  border: 1.4px solid var(--ink);
  accent-color: #0f542a;
}

.level-editor-check:has(input:checked),
.advanced-check-row:has(input:checked) {
  color: rgba(19, 19, 19, 0.96);
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .advanced-check-row,
  .level-editor-check {
    gap: 4px;
    font-size: 0.31rem;
  }

  .advanced-check-row input,
  .level-editor-check input,
  .machine-advanced-panel #map-edit-toggle {
    width: 10px;
    height: 10px;
  }
}

/* Final run button state: show a stop square while the round is running. */
.app-shell.is-round-running .header-play-button.asset-button {
  opacity: 1;
}

.app-shell.is-round-running .header-play-button.asset-button::before {
  background: rgba(15, 84, 42, 0.14);
}

.app-shell.is-round-running .header-play-mark {
  width: 43%;
  height: 43%;
  margin-left: 0;
  border-radius: 4px;
  background: #0f542a;
  clip-path: none;
  filter: drop-shadow(1.5px 1px 0 rgba(19, 19, 19, 0.82));
}

.header-play-button.asset-button.is-run-overlay {
  position: fixed !important;
  left: 50vw !important;
  top: clamp(30px, 5.2vh, 62px) !important;
  width: clamp(38px, 4vw, 52px) !important;
  height: clamp(38px, 4vw, 52px) !important;
  z-index: 80 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 900px) and (orientation: landscape), (max-width: 1220px) and (max-height: 620px) {
  .header-play-button.asset-button.is-run-overlay {
    top: 34px !important;
    width: 42px !important;
    height: 42px !important;
  }
}

.app-shell.is-round-running .board-history-controls {
  display: none !important;
  pointer-events: none !important;
}

.board-history-controls .run-control-button:disabled,
.board-history-controls .run-control-button[aria-disabled="true"] {
  opacity: 0.34;
  filter: grayscale(1);
  pointer-events: none;
}

/* Board drawing now has one mode: straight polyline, point by point. */
.sidebox #line-mode-controls .line-mode-toggle {
  grid-template-columns: minmax(0, 1fr);
}

.sidebox .sidebox-tool-zone.has-inline-modes #line-mode-controls .line-mode-toggle {
  justify-content: flex-end;
}