/* Hallmark · theatre workbench · approved reference palette
 * No scrolling containers: layout and content must fit the viewport. */
@import url("../../tokens.css");
@import url('./presentation.css');
.shadow-game,
.shadow-modal {
  box-sizing: border-box;
  color: var(--shadow-ink);
  font-family: var(--shadow-font);
}
.shadow-game *,
.shadow-modal * {
  box-sizing: border-box;
}
.shadow-game {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  background: var(--shadow-wood);
  overflow: visible;
}
.shadow-game::backdrop {
  background: var(--shadow-wood);
}
.shadow-game:not([open]),
.shadow-modal:not([open]),
.shadow-game [hidden] {
  display: none !important;
}
.shadow-is-open {
  overflow: clip;
}
.shadow-window {
  width: 100%;
  height: 100%;
  padding: 2.5vh 4% 1vh;
  display: grid;
  grid-template-rows: clamp(52px, 8vh, 80px) clamp(38px, 6vh, 58px) minmax(
      0,
      1fr
    ) clamp(66px, 11vh, 108px) 16px;
  gap: clamp(8px, 1.5vh, 16px);
  background: var(--shadow-wood) url("./art/taian/theatre.webp") center/100%
    100% no-repeat;
}
.shadow-game button,
.shadow-modal button {
  font: 600 clamp(15px, 1.2vw, 22px) / 1.2 var(--shadow-font);
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-height: 44px;
  padding: 10px 17px;
  cursor: pointer;
  color: var(--shadow-ink);
  background: var(--shadow-paper);
  border: 1px solid var(--shadow-rule);
  outline: 1px solid var(--shadow-rule);
  outline-offset: -5px;
  border-radius: 4px;
  transition: transform var(--shadow-duration) var(--shadow-ease);
}
.shadow-game button:active,
.shadow-modal button:active {
  transform: scale(0.97);
}
.shadow-game button:disabled,
.shadow-modal button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.shadow-game button:focus-visible,
.shadow-modal button:focus-visible {
  outline: 3px solid var(--shadow-teal);
  outline-offset: 3px;
}
.shadow-game .shadow-red,
.shadow-modal .shadow-red {
  color: var(--shadow-paper-light);
  background: var(--shadow-red);
  outline-color: var(--shadow-light-rule);
}
.shadow-game .shadow-red:focus-visible,
.shadow-modal .shadow-red:focus-visible {
  outline-color: var(--shadow-paper-light);
  box-shadow: 0 0 0 6px var(--shadow-teal);
}
@media (hover: hover) and (pointer: fine) {
  .shadow-game button:not(:disabled):hover,
  .shadow-modal button:not(:disabled):hover {
    transform: translateY(-1px);
  }
}
.shadow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.shadow-brand {
  display: flex;
  gap: 20px;
  align-items: baseline;
  background: var(--shadow-teal);
  color: var(--shadow-paper-light);
  padding: 10px 20px;
  clip-path: polygon(0 5%, 97% 0, 100% 94%, 2% 100%);
  min-width: 0;
}
.shadow-brand > b {
  font-size: clamp(25px, 2.5vw, 42px);
  letter-spacing: 0.15em;
  white-space: nowrap;
}
.shadow-brand > span {
  font-size: clamp(16px, 1.5vw, 26px);
}
.shadow-header-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.shadow-header-actions button {
  font-size: 14px;
  background: var(--shadow-wood);
  color: var(--shadow-paper);
}
.shadow-header-actions button:last-child {
  font-size: 27px;
  width: 44px;
  padding: 0;
}
.shadow-steps {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  padding: 8px 18px;
  background: var(--shadow-paper);
  justify-self: end;
  min-width: 0;
  border-bottom: 1px solid var(--shadow-rule);
}
.shadow-steps > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(19px, 1.8vw, 29px);
  white-space: nowrap;
  color: var(--shadow-muted);
}
.shadow-steps i,
.shadow-task-list i,
.shadow-motion-goals i {
  font-style: normal;
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: var(--shadow-paper-light);
  background: var(--shadow-muted);
  flex-shrink: 0;
}
.shadow-steps .is-current,
.shadow-motion-goals .is-current {
  color: var(--shadow-red);
}
.shadow-steps .is-current i,
.shadow-motion-goals .is-current i {
  background: var(--shadow-red);
}
.shadow-steps .is-done,
.shadow-motion-goals .is-done {
  color: var(--shadow-teal);
}
.shadow-steps .is-done i,
.shadow-motion-goals .is-done i {
  background: var(--shadow-teal);
}
.shadow-steps > b {
  color: var(--shadow-rule);
  font-weight: 400;
}
.shadow-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3%;
  padding: 0 2%;
}
.shadow-play {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto 30px;
  gap: 8px;
}
.shadow-scene-caption {
  font-size: clamp(17px, 1.5vw, 25px);
  font-weight: 700;
  color: var(--shadow-red);
  background: var(--shadow-paper-light);
  border: 1px solid var(--shadow-rule);
  padding: 7px 12px;
  justify-self: start;
}
.shadow-scene {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  touch-action: none;
  user-select: none;
}
.shadow-scene [data-puppet] {
  cursor: grab;
}
.shadow-handle {
  fill: var(--shadow-red);
  stroke: var(--shadow-gold);
  stroke-width: 5;
}
.shadow-stage-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--shadow-ink);
}
.shadow-feedback {
  min-height: 26px;
  margin: 0;
  padding: 4px 8px;
  background: var(--shadow-paper);
  color: var(--shadow-muted);
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}
.shadow-feedback:empty {
  background: transparent;
}
.shadow-feedback[data-kind="error"] {
  color: var(--shadow-red);
}
.shadow-feedback[data-kind="success"] {
  color: var(--shadow-teal);
}
.shadow-panel {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(9px, 1.5vh, 16px);
  padding: clamp(18px, 2vw, 34px);
  border: 1px solid var(--shadow-rule);
  outline: 1px solid var(--shadow-rule);
  outline-offset: -6px;
  background: var(--shadow-paper)
    url("../../public/reference/water-ink/T_Paper.webp") center/cover;
}
.shadow-panel h1,
.shadow-panel h2,
.shadow-panel p {
  margin: 0;
  line-height: 1.4;
}
.shadow-panel h1 {
  font-size: clamp(38px, 4vw, 65px);
  color: var(--shadow-red);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.shadow-panel h2 {
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 600;
}
.shadow-panel p {
  font-size: clamp(14px, 1.2vw, 20px);
}
.shadow-panel .shadow-kicker {
  font-size: 12px;
  color: var(--shadow-muted);
  letter-spacing: 0.15em;
}
.shadow-panel .shadow-lead {
  font-size: clamp(16px, 1.5vw, 25px);
  letter-spacing: 0.07em;
}
.shadow-task-list {
  display: grid;
  gap: 12px;
}
.shadow-task-list > div {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--shadow-rule);
}
.shadow-task-list b {
  font-size: clamp(20px, 2vw, 31px);
}
.shadow-task-list small {
  display: block;
  font-size: 14px;
  color: var(--shadow-muted);
  margin-top: 4px;
}
.shadow-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shadow-panel-heading button {
  font-size: 14px;
  padding: 8px 14px;
}
.shadow-motion-goals {
  display: grid;
  gap: 10px;
}
.shadow-motion-goals > div {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--shadow-rule);
  padding: 12px;
}
.shadow-motion-goals b {
  display: block;
  font-size: clamp(20px, 1.8vw, 29px);
  font-weight: 600;
}
.shadow-motion-goals small {
  display: block;
  font-size: 14px;
  margin-top: 4px;
  color: var(--shadow-muted);
}
.shadow-motion-goals .is-current {
  background: var(--shadow-paper-light);
  outline: 1px solid var(--shadow-red);
  outline-offset: -4px;
}
.shadow-condition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  border: 1px solid var(--shadow-rule);
  padding: 12px 14px;
  color: var(--shadow-teal);
}
.shadow-condition > small {
  grid-column: 1/-1;
  color: var(--shadow-muted);
  font-size: 12px;
}
.shadow-condition > strong {
  font-size: clamp(17px, 1.6vw, 25px);
  font-weight: 600;
}
.shadow-counter {
  color: var(--shadow-red);
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 500;
  white-space: nowrap;
}
.shadow-meters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.shadow-meters label {
  font-size: 14px;
  color: var(--shadow-muted);
}
.shadow-meters b {
  float: right;
  font-weight: 500;
  color: var(--shadow-ink);
}
.shadow-balance-meter {
  position: relative;
  display: block;
  height: 10px;
  margin-top: 8px;
  border: 1px solid var(--shadow-rule);
  background: var(--shadow-paper-light);
}
.shadow-balance-meter::before {
  content: "";
  position: absolute;
  left: 38%;
  right: 38%;
  height: 100%;
  background: var(--shadow-teal);
  opacity: 0.2;
}
.shadow-balance-meter > i {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 4px;
  height: 16px;
  background: var(--shadow-red);
}
.shadow-meters progress {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 8px;
  accent-color: var(--shadow-teal);
}
.shadow-game[data-stage="motion"] .shadow-stage-tools {
  display: grid;
  gap: 7px;
}
.shadow-motion-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.shadow-motion-controls button {
  font-size: clamp(14px, 1.1vw, 19px);
  padding: 10px 12px;
  touch-action: none;
}
.shadow-rod-control {
  cursor: grab !important;
}
.shadow-power {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  background: var(--shadow-paper);
  padding: 6px 10px;
}
.shadow-power-track {
  height: 12px;
  min-width: 70px;
  flex: 1;
  position: relative;
  border: 1px solid var(--shadow-rule);
  background: var(--shadow-paper-light);
}
.shadow-power-window {
  position: absolute;
  inset: 0 22% 0 52%;
  background: var(--shadow-teal);
  opacity: 0.5;
}
.shadow-power-track > [data-power-fill] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--shadow-red);
  opacity: 0.8;
}
.shadow-power > b {
  font-size: 12px;
  font-weight: 500;
  min-width: 100px;
}
.shadow-control-hint {
  font-size: 12px;
  text-align: center;
  margin: 0;
  background: var(--shadow-paper);
  padding: 5px 8px;
  line-height: 1.4;
}
.shadow-footer {
  display: flex;
  gap: 16px;
  min-width: 0;
}
.shadow-speech {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  min-width: 0;
  flex: 1;
  border: 1px solid var(--shadow-rule);
  outline: 1px solid var(--shadow-rule);
  outline-offset: -5px;
  background: var(--shadow-paper)
    url("../../public/reference/water-ink/T_Paper.webp") center/cover;
}
.shadow-speech > b {
  color: var(--shadow-paper-light);
  background: var(--shadow-teal);
  font-size: clamp(19px, 1.8vw, 29px);
  padding: 8px 12px;
  white-space: nowrap;
}
.shadow-speech > span {
  font-size: clamp(15px, 1.3vw, 22px);
  line-height: 1.6;
}
.shadow-footer-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.shadow-footer-actions button {
  font-size: clamp(17px, 1.6vw, 28px);
  padding: 12px 22px;
}
.shadow-save-note {
  margin: 0;
  font: 11px/16px var(--shadow-body);
  text-align: right;
  color: var(--shadow-paper);
}
.shadow-rhythm-readout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  color: var(--shadow-red);
}
.shadow-rhythm-readout b {
  font-size: 23px;
}
.shadow-rhythm-readout span {
  font-size: 13px;
  color: var(--shadow-muted);
}
.shadow-game[data-stage="rhythm"] .shadow-stage-tools {
  display: block;
}
.shadow-rhythm-lane {
  position: relative;
  height: 40px;
  background: var(--shadow-paper-light);
  border-block: 1px solid var(--shadow-rule);
  margin: 15px 0 12px;
}
.shadow-hit-ring {
  position: absolute;
  left: 18%;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 4px double var(--shadow-red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.shadow-hit-label {
  position: absolute;
  left: 18%;
  top: -19px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--shadow-red);
}
.shadow-note {
  position: absolute;
  top: 50%;
  width: 25px;
  height: 25px;
  line-height: 21px;
  text-align: center;
  font-size: 17px;
  border-radius: 50%;
  border: 2px solid var(--shadow-gold);
  background: var(--shadow-red);
  color: var(--shadow-paper-light);
  transform: translate(-50%, -50%);
  font-style: normal;
}
.shadow-note.hit {
  background: var(--shadow-teal);
}
.shadow-note.miss {
  background: var(--shadow-muted);
  opacity: 0.5;
}
.shadow-gong-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.shadow-gong {
  background: var(--shadow-red) !important;
  color: var(--shadow-paper-light) !important;
}
.shadow-options {
  display: grid;
  gap: 10px;
}
.shadow-options > div {
  display: flex;
  gap: 8px;
}
.shadow-game .shadow-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  min-width: 0;
  font-size: clamp(17px, 1.6vw, 26px);
  padding: 13px 12px;
}
.shadow-option i {
  font-style: normal;
  border-radius: 50%;
  border: 1px solid var(--shadow-rule);
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}
.shadow-option[aria-pressed="true"] {
  border-color: var(--shadow-red);
  color: var(--shadow-red);
  background: var(--shadow-paper-light);
}
.shadow-audition {
  width: 44px;
  min-width: 44px;
  padding: 0 !important;
  font-size: 20px !important;
}
.shadow-game .shadow-confirm {
  width: 100%;
}
.shadow-subtitle {
  margin: 0;
  line-height: 1.5;
  font-size: clamp(14px, 1.2vw, 20px);
  padding: 9px 12px;
  background: var(--shadow-paper);
  border: 1px solid var(--shadow-rule);
  flex: 1;
  min-width: 0;
}
.shadow-subtitle small {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  color: var(--shadow-muted);
}
.shadow-panel h1.shadow-result-title {
  font-size: clamp(30px, 3vw, 48px);
}
.shadow-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.shadow-summary li {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--shadow-rule);
  padding-bottom: 10px;
  font-size: clamp(18px, 1.7vw, 27px);
}
.shadow-summary i {
  font-style: normal;
  color: var(--shadow-teal);
}
.shadow-summary b {
  font-weight: 500;
}
.shadow-summary span {
  margin-left: auto;
  color: var(--shadow-teal);
  font-size: 0.8em;
}
.shadow-clue {
  border-top: 1px solid var(--shadow-rule);
  padding-top: 15px;
  display: grid;
  gap: 10px;
}
.shadow-clue small {
  color: var(--shadow-red);
  letter-spacing: 0.15em;
}
.shadow-clue strong {
  font-size: clamp(27px, 2.8vw, 44px);
  letter-spacing: 0.15em;
}
.shadow-clue > span {
  font-size: 17px;
  color: var(--shadow-muted);
}
.shadow-token-name {
  padding: 10px 18px;
  background: var(--shadow-paper);
  border: 1px solid var(--shadow-rule);
  font-size: clamp(22px, 2.2vw, 36px);
  letter-spacing: 0.15em;
}
.shadow-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(760px, 90vw);
  max-width: 90vw;
  height: fit-content;
  max-height: none;
  padding: clamp(20px, 3vw, 40px);
  border: 3px double var(--shadow-rule);
  outline: 1px solid var(--shadow-gold);
  outline-offset: 5px;
  overflow: visible;
  background: var(--shadow-paper)
    url("../../public/reference/water-ink/T_Paper.webp") center/cover;
}
.shadow-modal::backdrop {
  background: var(--shadow-backdrop);
  backdrop-filter: blur(3px);
}
.shadow-modal h2 {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.3;
  color: var(--shadow-paper-light);
  background: var(--shadow-teal);
  padding: 12px;
  text-align: center;
  margin: 0;
}
.shadow-modal p {
  font-size: 16px;
  line-height: 1.6;
  margin: 10px 0;
}
.shadow-modal .shadow-modal-kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--shadow-muted);
  margin: 0 0 10px;
}
.shadow-modal .shadow-modal-subtitle {
  text-align: center;
  font-size: 22px;
  color: var(--shadow-red);
}
.shadow-modal ol {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: grid;
  gap: 14px;
}
.shadow-modal li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--shadow-rule);
  font-size: 18px;
  line-height: 1.6;
}
.shadow-modal li > i {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 18px;
  background: var(--shadow-red);
  color: var(--shadow-paper);
  font-style: normal;
  flex-shrink: 0;
}
.shadow-modal-condition {
  padding: 16px;
  border: 3px double var(--shadow-rule);
  text-align: center;
  margin: 15px 0;
}
.shadow-modal-condition small {
  display: block;
  font-size: 13px;
  color: var(--shadow-muted);
}
.shadow-modal-condition strong {
  display: block;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.5;
  color: var(--shadow-red);
  margin: 7px 0;
}
.shadow-modal-condition p {
  font-size: 14px;
  margin: 0;
}
.shadow-modal > button {
  display: block;
  margin: 18px auto 0;
}
.shadow-preview {
  margin: 0;
  background: var(--shadow-wood);
  color: var(--shadow-paper);
  font-family: var(--shadow-font);
}
.shadow-preview main {
  width: min(760px, 90%);
  margin: 10vh auto;
}
.shadow-preview main > h1 {
  font-size: 48px;
}
.shadow-preview main > p {
  font-size: 20px;
  line-height: 1.8;
}
.shadow-preview main a {
  color: var(--shadow-paper);
}
.shadow-preview main > button {
  padding: 15px 28px;
  background: var(--shadow-red);
  color: var(--shadow-paper);
  border: 1px solid var(--shadow-gold);
  font-size: 20px;
  cursor: pointer;
}
@media (max-height: 800px) and (min-width: 801px) {
  .shadow-window {
    padding-top: 14px;
    gap: 8px;
    grid-template-rows: 52px 40px minmax(0, 1fr) 66px 14px;
  }
  .shadow-panel {
    padding: 16px 22px;
    gap: 10px;
  }
  .shadow-panel h1 {
    font-size: 42px;
  }
  .shadow-panel h2 {
    font-size: 29px;
  }
  .shadow-panel p {
    font-size: 14px;
  }
  .shadow-task-list {
    gap: 9px;
  }
  .shadow-task-list > div {
    padding-top: 9px;
  }
  .shadow-task-list b {
    font-size: 22px;
  }
  .shadow-task-list small {
    font-size: 12px;
  }
  .shadow-motion-goals {
    gap: 7px;
  }
  .shadow-motion-goals > div {
    padding: 8px 10px;
  }
  .shadow-motion-goals b {
    font-size: 23px;
  }
  .shadow-motion-goals small {
    font-size: 12px;
    margin-top: 2px;
  }
  .shadow-condition {
    padding: 8px 11px;
  }
  .shadow-condition strong {
    font-size: 18px;
  }
  .shadow-counter {
    font-size: 26px;
  }
  .shadow-game .shadow-option {
    font-size: 20px;
    padding: 10px;
  }
  .shadow-options {
    gap: 8px;
  }
  .shadow-rhythm-readout {
    padding: 7px 0;
  }
  .shadow-summary li {
    font-size: 21px;
  }
  .shadow-clue {
    padding-top: 10px;
    gap: 7px;
  }
  .shadow-clue strong {
    font-size: 30px;
  }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .shadow-brand {
    gap: 12px;
    padding: 10px 12px;
  }
  .shadow-brand > b {
    font-size: 26px;
  }
  .shadow-brand > span {
    font-size: 16px;
  }
  .shadow-header-actions button {
    padding: 9px 12px;
    font-size: 13px;
  }
  .shadow-footer-actions button {
    padding: 10px 14px;
    font-size: 18px;
  }
  .shadow-speech {
    padding: 10px 14px;
    gap: 10px;
  }
  .shadow-speech > b {
    font-size: 19px;
  }
  .shadow-speech > span {
    font-size: 15px;
  }
  .shadow-motion-controls button {
    font-size: 13px;
    padding: 9px;
  }
  .shadow-power > b {
    min-width: 80px;
  }
  .shadow-control-hint {
    font-size: 11px;
  }
}
@media (max-width: 800px) {
  .shadow-window {
    padding: 10px 4% 6px;
    grid-template-rows: 56px 34px minmax(0, 1fr) 64px 12px;
    gap: 7px;
    background-size: auto 100%;
  }
  .shadow-brand {
    padding: 7px 10px;
    display: block;
  }
  .shadow-brand > b {
    display: block;
    font-size: 23px;
    letter-spacing: 0.1em;
  }
  .shadow-brand > span {
    font-size: 12px;
    display: block;
    margin-top: 3px;
  }
  .shadow-header-actions {
    gap: 5px;
  }
  .shadow-header-actions button {
    font-size: 11px;
    padding: 6px 8px;
    min-height: 38px;
  }
  .shadow-header-actions button:last-child {
    width: 34px;
    font-size: 23px;
  }
  .shadow-steps {
    justify-self: stretch;
    justify-content: center;
    gap: 15px;
    padding: 4px 8px;
  }
  .shadow-steps > span {
    font-size: 17px;
    gap: 7px;
  }
  .shadow-steps i {
    width: 23px;
    height: 23px;
    font-size: 13px;
  }
  .shadow-body {
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .shadow-play {
    grid-template-rows: 24px minmax(0, 1fr) auto 23px;
    gap: 3px;
    background: var(--shadow-paper-light);
    border: 1px solid var(--shadow-rule);
    padding: 5px 7px;
  }
  .shadow-scene-caption {
    font-size: 14px;
    padding: 2px 7px;
  }
  .shadow-feedback {
    font-size: 11px;
    line-height: 1.3;
    min-height: 22px;
    padding: 3px 4px;
  }
  .shadow-panel {
    padding: 12px 15px;
    gap: 8px;
  }
  .shadow-panel h1 {
    font-size: 33px;
  }
  .shadow-panel h2 {
    font-size: 23px;
  }
  .shadow-panel p {
    font-size: 13px;
  }
  .shadow-panel .shadow-lead {
    font-size: 14px;
  }
  .shadow-panel .shadow-kicker {
    font-size: 10px;
  }
  .shadow-task-list {
    gap: 6px;
  }
  .shadow-task-list > div {
    gap: 10px;
    padding-top: 6px;
  }
  .shadow-task-list b {
    font-size: 18px;
  }
  .shadow-task-list small {
    font-size: 11px;
    margin-top: 2px;
  }
  .shadow-task-list i {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  .shadow-panel-heading button {
    min-height: 34px;
    font-size: 12px;
    padding: 6px 11px;
  }
  .shadow-motion-goals {
    gap: 5px;
  }
  .shadow-motion-goals > div {
    padding: 5px 7px;
    gap: 8px;
  }
  .shadow-motion-goals b {
    font-size: 16px;
  }
  .shadow-motion-goals small {
    font-size: 11px;
    margin-top: 1px;
  }
  .shadow-motion-goals i {
    width: 23px;
    height: 23px;
    font-size: 12px;
  }
  .shadow-meters {
    gap: 15px;
  }
  .shadow-meters label {
    font-size: 11px;
  }
  .shadow-balance-meter,
  .shadow-meters progress {
    height: 7px;
    margin-top: 5px;
  }
  .shadow-balance-meter > i {
    height: 13px;
  }
  .shadow-condition {
    padding: 6px 9px;
    gap: 2px 8px;
  }
  .shadow-condition small {
    font-size: 10px;
  }
  .shadow-condition strong {
    font-size: 15px;
  }
  .shadow-counter {
    font-size: 21px;
  }
  .shadow-motion-controls {
    gap: 5px;
  }
  .shadow-motion-controls button {
    font-size: 12px;
    min-height: 36px;
    padding: 7px 9px;
  }
  .shadow-power {
    font-size: 10px;
    padding: 4px 6px;
    gap: 7px;
  }
  .shadow-power > b {
    font-size: 10px;
    min-width: 84px;
  }
  .shadow-control-hint {
    font-size: 10px;
    line-height: 1.3;
    padding: 3px 4px;
  }
  .shadow-footer {
    gap: 8px;
    min-width: 0;
  }
  .shadow-speech {
    padding: 8px 10px;
    gap: 8px;
  }
  .shadow-speech > b {
    font-size: 16px;
    padding: 6px 8px;
  }
  .shadow-speech > span {
    font-size: 12px;
    line-height: 1.5;
  }
  .shadow-footer-actions {
    gap: 7px;
    flex-direction: column;
    justify-content: center;
  }
  .shadow-footer-actions button {
    font-size: 13px;
    padding: 6px 10px;
    min-height: 30px;
  }
  .shadow-save-note {
    font-size: 10px;
    line-height: 12px;
  }
  .shadow-game .shadow-option {
    font-size: 17px;
    min-height: 39px;
    padding: 8px 9px;
    gap: 9px;
  }
  .shadow-option i {
    width: 23px;
    height: 23px;
    font-size: 13px;
  }
  .shadow-options {
    gap: 7px;
  }
  .shadow-audition {
    min-width: 39px;
    width: 39px;
    min-height: 39px !important;
  }
  .shadow-game .shadow-confirm {
    font-size: 16px;
    padding: 8px;
    min-height: 38px;
  }
  .shadow-subtitle {
    font-size: 12px;
    padding: 5px 7px;
  }
  .shadow-subtitle small {
    font-size: 9px;
    margin-top: 2px;
  }
  .shadow-stage-tools {
    gap: 8px;
  }
  .shadow-stage-tools button {
    font-size: 13px;
    padding: 8px 10px;
    min-height: 36px;
  }
  .shadow-rhythm-readout {
    padding: 4px 0;
  }
  .shadow-rhythm-readout b {
    font-size: 18px;
  }
  .shadow-rhythm-readout span {
    font-size: 11px;
  }
  .shadow-rhythm-lane {
    height: 30px;
    margin: 13px 0 7px;
  }
  .shadow-hit-ring {
    width: 32px;
    height: 32px;
  }
  .shadow-hit-label {
    font-size: 10px;
    top: -15px;
  }
  .shadow-note {
    width: 20px;
    height: 20px;
    font-size: 13px;
    line-height: 16px;
  }
  .shadow-game[data-stage="rhythm"] .shadow-stage-tools {
    width: 100%;
  }
  .shadow-summary {
    gap: 7px;
  }
  .shadow-summary li {
    font-size: 18px;
    padding-bottom: 7px;
    gap: 9px;
  }
  .shadow-panel h1.shadow-result-title {
    font-size: 27px;
  }
  .shadow-clue {
    padding-top: 8px;
    gap: 6px;
  }
  .shadow-clue strong {
    font-size: 27px;
  }
  .shadow-clue > span {
    font-size: 13px;
  }
  .shadow-clue small {
    font-size: 11px;
  }
  .shadow-token-name {
    font-size: 19px;
    padding: 6px 12px;
  }
  .shadow-modal {
    padding: 18px;
    width: 92vw;
    max-width: 92vw;
  }
  .shadow-modal h2 {
    font-size: 23px;
    padding: 9px;
  }
  .shadow-modal .shadow-modal-kicker {
    font-size: 10px;
    margin-bottom: 8px;
  }
  .shadow-modal .shadow-modal-subtitle {
    font-size: 18px;
  }
  .shadow-modal ol {
    gap: 10px;
    margin: 12px 0;
  }
  .shadow-modal li {
    font-size: 14px;
    gap: 9px;
    padding-bottom: 9px;
  }
  .shadow-modal li > i {
    width: 25px;
    height: 25px;
    font-size: 15px;
  }
  .shadow-modal-condition {
    padding: 12px;
    margin: 12px 0;
  }
  .shadow-modal-condition strong {
    font-size: 19px;
  }
  .shadow-modal-condition p {
    font-size: 12px;
  }
  .shadow-modal > button {
    margin-top: 12px;
    font-size: 16px;
  }
}
@media (max-width: 380px) {
  .shadow-window {
    padding-inline: 3%;
  }
  .shadow-brand > b {
    font-size: 21px;
  }
  .shadow-brand > span {
    font-size: 10px;
  }
  .shadow-header-actions button {
    font-size: 10px;
    padding: 5px 6px;
  }
  .shadow-header-actions {
    gap: 4px;
  }
  .shadow-panel {
    padding: 10px 12px;
    gap: 7px;
  }
  .shadow-game .shadow-option {
    font-size: 15px;
  }
  .shadow-speech {
    padding: 6px 8px;
  }
  .shadow-speech > b {
    font-size: 14px;
    padding: 5px;
  }
  .shadow-speech > span {
    font-size: 11px;
  }
  .shadow-motion-controls button {
    font-size: 11px;
    padding: 7px;
  }
  .shadow-control-hint {
    font-size: 9px;
  }
  .shadow-modal {
    padding: 15px;
  }
  .shadow-modal li {
    font-size: 13px;
  }
}
@media (max-height: 700px) and (max-width: 800px) {
  .shadow-window {
    grid-template-rows: 49px 30px minmax(0, 1fr) 58px 11px;
    gap: 5px;
    padding-top: 7px;
  }
  .shadow-panel {
    padding: 9px 12px;
    gap: 6px;
  }
  .shadow-play {
    grid-template-rows: 21px minmax(0, 1fr) auto 20px;
  }
  .shadow-panel h2 {
    font-size: 21px;
  }
  .shadow-panel h1 {
    font-size: 28px;
  }
  .shadow-task-list > div {
    padding-top: 5px;
  }
  .shadow-task-list small {
    font-size: 10px;
  }
  .shadow-motion-goals small {
    font-size: 10px;
  }
  .shadow-motion-goals b {
    font-size: 15px;
  }
  .shadow-panel-heading button {
    min-height: 30px;
  }
  .shadow-condition strong {
    font-size: 14px;
  }
  .shadow-meters label {
    font-size: 10px;
  }
  .shadow-options {
    gap: 5px;
  }
  .shadow-game .shadow-option {
    min-height: 36px;
    padding: 6px 9px;
  }
  .shadow-game .shadow-confirm {
    min-height: 34px;
  }
  .shadow-modal p {
    margin: 8px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shadow-game *,
  .shadow-modal * {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 800px) {
  .shadow-motion-goals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .shadow-motion-goals > div {
    padding: 7px 6px;
    display: block;
  }
  .shadow-motion-goals b {
    font-size: 14px;
    line-height: 1.4;
  }
  .shadow-motion-goals small {
    font-size: 10px;
    line-height: 1.4;
    margin-top: 3px;
  }
  .shadow-motion-controls button {
    min-height: 44px;
  }
  .shadow-stage-tools .shadow-motion-controls button {
    min-height: 44px;
  }
}

/* ===========================================================================
 * 叠在三维戏台上（.on-stage）
 *
 * 早先的做法是"影幕精确对位到三维亮子"：把亮子的屏幕矩形算出来，二维幕贴上去。
 * 对位确实准（实测偏差 0 px），但代价是游戏被锁进那块只有屏宽 45% 的幕里，
 * 右侧再让给操作面板，玩家真正能看的画面不到半屏——这就是"页面太小"的根。
 *
 * 现在的做法：三维戏台退成背景（backdrop 压暗），二维影幕按 SVG 自身的 5:3
 * 比例铺满可用区域，只把右侧一列留给操作面板。不再需要 JS 传像素矩形。
 *
 * 尺寸全部由下面四个变量算出，改布局只改这里：
 *   --panel-w     右侧操作面板宽度
 *   --gutter      四周留白
 *   --play-max-h  影幕可用高度（扣掉幕下的操作条与幕上反馈条）
 *   --play-w      min(可用宽, 可用高 × 5/3)
 * =========================================================================== */
.shadow-game.on-stage {
  --panel-w: clamp(252px, 22vw, 344px);
  --gutter: clamp(12px, 2vw, 30px);
  --play-max-h: calc(100dvh - 240px);
  --play-max-w: calc(100vw - var(--panel-w) - var(--gutter) * 3);
  --play-w: min(var(--play-max-w), calc(var(--play-max-h) * 5 / 3));
  background: transparent;
}
.shadow-game.on-stage::backdrop {
  /* 压暗而不是遮死：戏台还在后头，但不再和游戏抢注意力 */
  background: rgba(10, 7, 5, .54);
}
.shadow-game.on-stage .shadow-window {
  display: block;
  padding: 0;
  background: none;
}
.shadow-game.on-stage .shadow-header,
.shadow-game.on-stage .shadow-steps,
.shadow-game.on-stage .shadow-save-note {
  display: none !important;
}

/* 两栏：影幕吃掉余下宽度，面板固定一列。
   竖向不居中：幕要贴着上方，把下半屏留给操作条与班主对白。
   居中摆放时，操作条（幕下 12px 起）会压到对白条上——算过一遍：
   940 高的窗口里幕底 794、操作条到 906，而对白条从 859 起。 */
.shadow-game.on-stage .shadow-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  align-items: start;
  gap: var(--gutter);
  height: 100dvh;
  padding: clamp(16px, 4vh, 40px) var(--gutter) 0;
  box-sizing: border-box;
}

/* 影幕：按 5:3 取最大可用尺寸，不再缩到亮子里 */
.shadow-game.on-stage .shadow-play {
  position: relative;
  justify-self: center;
  align-self: start;   /* 覆盖 grid 的居中：幕必须贴顶，下方才放得下操作条 */
  width: var(--play-w);
  height: calc(var(--play-w) * 3 / 5);
  display: block;
  padding: 0;
  background: none;
  border: 0;
}
.shadow-game.on-stage .shadow-play .shadow-scene {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  /* 一圈灯晕：让二维幕"浮"在戏台前，而不是贴了张图 */
  box-shadow:
    0 0 0 2px rgba(64, 38, 18, .55),
    0 0 30px 8px rgba(255, 176, 88, .24),
    0 0 90px 26px rgba(255, 150, 60, .1);
}
.shadow-game.on-stage .shadow-scene-caption {
  display: none !important;
}

/* 反馈：浮在幕内顶部一条暗底小字，不再占幕下的位置 */
.shadow-game.on-stage .shadow-feedback {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(26, 18, 12, .7);
  color: #f6e8cc;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  backdrop-filter: blur(6px);
}
.shadow-game.on-stage .shadow-feedback:empty {
  display: none;
}

/* 操作条：贴着影幕下沿 */
.shadow-game.on-stage .shadow-stage-tools {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(100%, 760px);
}

/* 操作面板：右侧一列，纸折子本色，内容多时自己滚 */
.shadow-game.on-stage .shadow-panel {
  position: static;
  align-self: center;   /* 幕靠上，面板仍居中，视觉上不塌向一侧 */
  justify-self: stretch;
  width: auto;
  max-height: calc(100dvh - var(--gutter) * 2);
  overflow: auto;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--shadow-paper);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .5);
  border: 1px solid var(--shadow-rule);
  outline: 1px solid var(--shadow-rule);
  outline-offset: -6px;
}

/* 班主对白：底部一条窄纸条，宽度跟着影幕走 */
.shadow-game.on-stage .shadow-footer {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(var(--play-w), calc(100vw - var(--gutter) * 2));
  box-sizing: border-box;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(24, 17, 12, .8);
  color: #f3e6ca;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(8px);
}
.shadow-game.on-stage .shadow-footer .shadow-speech {
  padding: 4px 10px;
  border: 0;
  outline: 0;
  background: none;
}
.shadow-game.on-stage .shadow-footer .shadow-speech b {
  color: #ffca84;
}
.shadow-game.on-stage .shadow-footer-actions button {
  min-height: 34px;
  padding: 6px 13px;
  font-size: 13px;
}

/* 弹窗（玩法说明、奖励）：保持纸面，别落到三维背景上 */
.shadow-game.on-stage .shadow-modal {
  color: var(--shadow-ink);
}

@media (max-aspect-ratio: 1/1) {
  /* 竖屏：面板挪到下方，影幕独占上半屏 */
  .shadow-game.on-stage {
    --gutter: 10px;
    --panel-w: 0px;
    --play-max-h: calc(100dvh - 410px);
    --play-max-w: calc(100vw - var(--gutter) * 2);
  }
  .shadow-game.on-stage .shadow-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    justify-items: center;
    gap: 10px;
    padding-top: 7dvh;
  }
  .shadow-game.on-stage .shadow-panel {
    width: calc(100vw - var(--gutter) * 2);
    max-height: 34dvh;
    align-self: start;
    /* 幕下的操作条是 absolute 定位，不占流：这里按它的高度（约 100px）
       把面板往下推，否则竖屏下面板会正好压在操作条上。 */
    margin-top: clamp(96px, 13dvh, 124px);
  }
  .shadow-game.on-stage .shadow-footer {
    width: calc(100vw - 18px);
    bottom: 6px;
  }
}