/* ── Playground Layout ── */
.playground-layout {
  display: flex;
  height: calc(100vh - var(--nav-h) - var(--banner-h));
}

/* ── Left Panel (Controls) ── */
.controls-panel {
  width: 45%;
  min-width: 380px;
  overflow-y: auto;
  padding: 20px 24px 40px;
  border-right: 1px solid var(--border);
}

/* ── Section Cards ── */
.section-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  background: #fff;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-alt);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}

.section-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.section-header .toggle-icon {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform .2s;
}

.section-card.collapsed .section-header { border-radius: var(--radius); border-bottom: none; }
.section-card.collapsed .section-body { display: none; }
.section-card.collapsed .toggle-icon { transform: rotate(-90deg); }

.section-body { padding: 16px; }

.section-card.disabled { opacity: .45; pointer-events: none; }

/* ── Form Rows ── */
.form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.form-row label {
  font-size: 0.8rem;
  font-weight: 500;
  min-width: 80px;
  color: var(--text-muted);
}

.form-row input, .form-row select {
  flex: 1;
  min-width: 0;
}

.form-row input[type="number"] { max-width: 80px; flex: none; }
.form-row input[type="checkbox"] { flex: none; width: auto; }

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ── Room Code Display ── */
.room-code-display {
  display: none;
  margin: 12px 0;
  padding: 12px 16px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius);
  text-align: center;
}

.room-code-display.visible { display: block; }

.room-code-display .code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: #065f46;
  letter-spacing: 0.1em;
}

.room-code-display .label {
  font-size: 0.75rem;
  color: #047857;
  margin-bottom: 4px;
}

/* ── Dice Row ── */
.dice-rows { margin: 8px 0; }

.dice-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.dice-row select { width: 80px; }
.dice-row input { flex: 1; }
.dice-row .remove-btn {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 2px 6px;
}

/* ── Field Builder ── */
.field-list { margin: 8px 0; }

.field-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg-alt);
}

.field-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.field-item-header .field-type-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: #dbeafe;
  color: #1e40af;
}

.field-item-config { display: flex; flex-direction: column; gap: 6px; }
.field-item-config .config-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-item-config .config-row label {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 70px;
}
.field-item-config .config-row input,
.field-item-config .config-row select {
  flex: 1;
  font-size: 0.8rem;
  padding: 4px 8px;
}

/* ── Callback Buttons Builder ── */
.button-list { margin: 8px 0; }
.button-item {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.button-item input { flex: 1; }

/* ── Right Panel (Console) ── */
.console-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--code-bg);
  color: var(--code-text);
}

.console-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #181825;
  border-bottom: 1px solid #313244;
  flex-shrink: 0;
}

.console-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #a6adc8;
}

.console-clear-btn {
  background: rgba(255,255,255,.08);
  color: #a6adc8;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}
.console-clear-btn:hover { background: rgba(255,255,255,.15); }

.console-output {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
}

.console-line {
  margin-bottom: 2px;
  white-space: pre-wrap;
  word-break: break-all;
}

.console-time {
  color: #585b70;
  margin-right: 8px;
}

.console-info .console-msg { color: #cdd6f4; }
.console-success .console-msg { color: #a6e3a1; }
.console-error .console-msg { color: #f38ba8; }
.console-event .console-msg { color: #89dceb; }
.console-result .console-msg { color: #f9e2af; }

.console-line pre {
  margin: 2px 0 4px 20px;
  font-size: 0.75rem;
  color: #bac2de;
}

/* ── Player info ── */
.player-info {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 8px 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .playground-layout { flex-direction: column; height: auto; }
  .controls-panel { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--border); }
  .console-panel { height: 350px; }
}