.calculus-play {
  color: var(--ink, #292b3e);
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.calculus-level-bar,
.calculus-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  color: #6f6881;
  font-size: 13px;
}

.calculus-play h2 { margin: 8px 0; }
.calculus-goal { margin-bottom: 12px; }

.calculus-formula {
  padding: 10px 14px;
  border-radius: 12px;
  background: #ece9f7;
  font-family: ui-monospace, monospace;
  margin-bottom: 14px;
}

.calculus-board {
  overflow: hidden;
  border: 1px solid #e3deed;
  border-radius: 18px;
  width: 100%;
}

.calculus-board svg { width: 100%; height: auto; display: block; }

.calculus-metrics span {
  padding: 8px 12px;
  background: #f5f2fa;
  border-radius: 10px;
}

.calculus-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 8px 0;
}

.calculus-controls label {
  border: 1px solid #e3deed;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.calculus-controls label span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.calculus-controls output { color: #625bd4; font-weight: 700; }
.calculus-controls input { width: 100%; min-height: 36px; accent-color: #6961d8; }
.calculus-keyboard { font-size: 12px; color: #777184; margin: 8px 0 14px; }

.calculus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calculus-actions button {
  border-radius: 10px;
  border: 1px solid #ded9ec;
  background: #f5f2fa;
  color: #514879;
  padding: 11px 15px;
  min-height: 44px;
}

.calculus-actions .primary-btn { color: #fff; background: #6961d8; border-color: #6961d8; }
.calculus-actions [hidden] { display: none !important; }
.calculus-feedback { padding: 14px; margin-top: 12px; background: #fff3df; border-radius: 12px; }
.calculus-feedback.success { background: #e1f1e9; color: #25694e; }

@media (max-width: 600px) {
  .calculus-controls { grid-template-columns: 1fr; }
  .calculus-actions button { flex: 1 1 140px; }
  .calculus-board svg { min-height: 220px; }
}