/* DEMO and parameter workbench. Keep all game artwork in its original coordinate system. */
:root {
  --workbench-padding: clamp(20px, 4vw, 70px);
  --workbench-padding-y: clamp(18px, 6.4dvh, 74px);
  --workbench-gap: clamp(24px, 4vw, 80px);
  --workbench-gold: #f2d886;
  --workbench-text: #e7edf5;
  --workbench-muted: #b6c5d7;
}

body { overflow: hidden; }
.workspace.workbench,
.workspace.workbench.config-open {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--workbench-gap);
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: var(--workbench-padding-y) var(--workbench-padding);
  overflow: hidden;
}
.workbench > .game-viewport {
  order: 0;
  flex: none;
  margin: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 15px 42px #0006, 0 0 0 1px #86b1dba6;
}
.workbench > .review.workbench-panel,
.workbench.config-open > .review.workbench-panel {
  display: flex;
  order: 1;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 8px 2px 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8aa0b266 transparent;
}
.workbench-panel > * { flex: none; }
.workbench-title,
.workbench-brief,
.workbench-section {
  margin: 0;
  border: 1px solid #44546a;
  border-radius: 12px;
  background: #111d2ef5;
}
.workbench-title { padding: 15px 20px; }
.workbench-panel .workbench-title h1 {
  margin: 0;
  font-family: "Microsoft JhengHei", "Segoe UI", sans-serif;
  font-size: clamp(26px, 2.3vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .12em;
  color: var(--workbench-gold);
}
.workbench-brief { padding: 13px 20px; }
.workbench-brief p {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 15px;
  margin: 0;
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--workbench-text);
}
.workbench-brief strong { color: var(--workbench-gold); font-weight: 600; }
.workbench-spec { font-variant-numeric: tabular-nums; }
.workbench-brief p.workbench-description { color: var(--workbench-muted); font-size: 12px; margin-top: 4px; }
.workbench-section > summary,
.workbench-subsection > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  margin: 0;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
  color: var(--workbench-gold);
  font-size: clamp(16px, 1.25vw, 21px);
  font-weight: 600;
  line-height: 1.4;
}
.workbench-section > summary::-webkit-details-marker,
.workbench-subsection > summary::-webkit-details-marker { display: none; }
.workbench-section > summary::after,
.workbench-subsection > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s;
  opacity: .85;
}
.workbench-section[open] > summary::after,
.workbench-subsection[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.workbench-section > summary small,
.workbench-subsection > summary small {
  min-width: 0;
  color: var(--workbench-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}
.workbench-section > summary:hover,
.workbench-subsection > summary:hover { background: #bdcfda0b; }
.workbench-section[open] > summary { border-bottom: 1px solid #9fbaca24; }
.workbench-section-body { min-width: 0; padding: 16px 20px 20px; }
.workbench-panel .workbench-note {
  margin: 0 0 15px;
  color: var(--workbench-muted);
  font-size: 12px;
  line-height: 1.85;
}
.workbench-section-body > .workbench-note:last-child { margin-bottom: 0; }
.workbench-subtitle { margin: 0 0 8px; color: var(--workbench-text); font-size: 14px; font-weight: 600; }
.workbench-panel .game-info-launchers { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; }
.workbench-panel .game-info-launchers button { padding: 10px 16px; min-height: 40px; font-size: 13px; }
.workbench-panel .scenarios { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.workbench-panel .scenarios button { min-height: 40px; padding: 9px 8px; }
.workbench-panel .text-button { min-height: 38px; padding: 8px 0; }
.workbench-panel #case-status { font-size: 12px; line-height: 1.6; }
.workbench-panel .round-notes { margin-top: 18px; }
.workbench-panel .event-log-wrap {
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  overscroll-behavior: contain;
  padding: 0 14px 0 30px;
}
.workbench-panel #event-log { padding: 10px 0; }
.workbench-subsection { margin-top: 18px; border-top: 1px solid #8fa7b73b; }
.workbench-subsection > summary { min-height: 52px; padding: 15px 0; font-size: 15px; }
.workbench #config-panel,
.workbench #symbol-panel {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.workbench #config-panel[hidden],
.workbench #symbol-panel[hidden] { display: none; }
.workbench .config-scroll,
.workbench .symbol-scroll {
  overflow: visible;
  padding: 0;
  min-height: 0;
  max-height: none;
  overscroll-behavior: auto;
}
.workbench .config-header,
.workbench .symbol-header { display: none; }
.workbench .config-intro,
.workbench .symbol-intro { margin-top: 0; font-size: 12px; }
.workbench .config-group,
.workbench .symbol-group { border-color: #7995a433; }
.workbench .config-group summary,
.workbench .symbol-group summary { font-size: 14px; }
.workbench .config-field { padding: 9px 0 13px; }
.workbench .config-field-title label { font-size: 13px; }
.workbench .config-field p,
.workbench .layout-note { font-size: 11px; }
.workbench .config-tabs { max-width: 420px; }
.workbench .config-tabs button { min-height: 38px; }
.workbench .config-presets { flex-wrap: wrap; }
.workbench .config-presets select { min-width: 120px; }
.workbench .config-files,
.workbench .symbol-files { max-width: 520px; }
.workbench .config-files button,
.workbench .symbol-files button { min-height: 38px; }
.workbench #layout-actions button,
.workbench #layout-controls button {
  font: inherit;
  font-size: 12px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #355e78;
  border-radius: 6px;
  background: #15374d;
  color: #d6edf8;
}
.workbench #layout-actions button:hover:not(:disabled),
.workbench #layout-controls button:hover:not(:disabled) { background: #23506a; border-color: #78b4cd; }
.workbench #layout-actions .layout-reset { margin-top: 12px; }
.workbench #layout-actions .workbench-note { margin-top: 10px; font-size: 11px; }
.workbench #layout-message { color: #81c9bc; font-size: 11px; line-height: 1.7; margin: 10px 0 0; }
.workbench #layout-message:empty { display: none; }
.workbench #layout-message.error { color: #ffc1ad; }
.workbench #presentation-preview-host:empty { display: none; }
.workbench #presentation-preview-host { margin-top: 20px; }
.workbench .config-preview,
.workbench .symbol-footer {
  border: 1px solid #7294a538;
  border-radius: 8px;
  background: #142d3b91;
  padding: 14px;
  margin-top: 16px;
}
.workbench #presentation-preview-host .config-preview { margin: 0; }
.workbench .config-preview label { font-size: 13px; color: var(--workbench-text); }
.workbench .config-preview .preview-mode-row { align-items: center; margin-bottom: 12px; }
.workbench .preview-mode-row label { flex: none; font-size: 12px; }
.workbench .preview-mode-row select { flex: 1; min-width: 0; max-width: 240px; }
.workbench .config-preview button,
.workbench .config-preview select {
  font: inherit;
  font-size: 12px;
  border: 1px solid #355e78;
  border-radius: 6px;
  background: #15374d;
  color: #d6edf8;
  min-height: 36px;
  padding: 7px 10px;
}
.workbench .config-preview .primary { background: #61bec4; color: #052839; border-color: #6bd0d4; }
.workbench .symbol-footer p,
.workbench .config-preview p { font-size: 11px; }
.workbench #config-mobile-launch,
.workbench #symbol-mobile-launch { display: none; }

@media (max-width: 1100px) and (min-width: 851px) {
  .workbench-section > summary { gap: 8px; padding-inline: 15px; }
  .workbench-section > summary small { font-size: 11px; }
  .workbench-section-body { padding-inline: 15px; }
  .workbench-panel .scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  :root {
    --workbench-padding: 16px;
    --workbench-padding-y: 18px;
    --workbench-gap: 24px;
  }
  body { overflow-y: auto; overflow-x: hidden; }
  .workspace.workbench,
  .workspace.workbench.config-open {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--workbench-gap);
    height: auto;
    min-height: 100dvh;
    padding: var(--workbench-padding-y) var(--workbench-padding);
    overflow: visible;
  }
  .workbench > .game-viewport,
  .workbench.config-open > .game-viewport { order: 0; margin: 0; border-radius: 12px; }
  .workbench > .review.workbench-panel,
  .workbench.config-open > .review.workbench-panel {
    order: 1;
    flex: none;
    width: 100%;
    max-width: 720px;
    height: auto;
    min-height: 0;
    gap: 10px;
    overflow: visible;
    padding: 0;
    scrollbar-gutter: auto;
    overscroll-behavior: auto;
  }
  .workbench-title { padding: 14px 16px; }
  .workbench-panel .workbench-title h1 { font-size: 26px; }
  .workbench-brief { padding: 12px 16px; }
  .workbench-brief p { font-size: 13px; }
  .workbench-section > summary { min-height: 56px; padding: 15px 16px; font-size: 16px; gap: 9px; }
  .workbench-section > summary small { font-size: 10px; }
  .workbench-section-body { padding: 14px 16px 18px; }
  .workbench-panel .scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-panel .game-info-launchers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-panel .game-info-launchers button { padding-inline: 8px; }
  .workbench .config-group summary small,
  .workbench .symbol-group summary small { float: none; display: block; margin-top: 5px; }
  .workbench .config-inputs input[type="number"],
  .workbench .symbol-inputs input[type="number"] { font-size: 16px; min-height: 38px; }
  .workbench .config-preview > div { flex-wrap: wrap; }
}