:root {
  --ink: #201b18;
  --muted: #6f6258;
  --paper: #f8f4ec;
  --panel: #fffdf8;
  --line: #ded2c3;
  --red: #a43b2f;
  --green: #2d6a4f;
  --gold: #b7791f;
  --blue: #2f5d8c;
  --shadow: 0 16px 44px rgba(72, 49, 23, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(164, 59, 47, 0.08), transparent 34%),
    linear-gradient(225deg, rgba(47, 93, 140, 0.1), transparent 36%),
    var(--paper);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.86);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--red);
  color: #fff;
  font-weight: 900;
  font-size: 24px;
  box-shadow: 5px 5px 0 var(--ink);
}

.brand h1,
.topbar h2 {
  margin: 0;
}

.brand h1 {
  font-size: 22px;
}

.brand p,
.eyebrow,
.side-card span,
.meta,
.hint,
.small {
  color: var(--muted);
}

.brand p {
  margin: 3px 0 0;
  font-size: 13px;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav button,
.primary,
.secondary,
.option {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.nav button {
  text-align: left;
  padding: 12px 14px;
}

.nav button.active,
.nav button:hover,
.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.nav button:hover,
.primary:hover,
.secondary:hover,
.option:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(32, 27, 24, 0.12);
}

.side-card {
  margin-top: auto;
  border: 1px solid var(--line);
  background: #f0e6d8;
  padding: 16px;
  border-radius: 8px;
  display: grid;
  gap: 8px;
}

.main {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
}

.progress-pill {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 9px 14px;
  white-space: nowrap;
}

.view {
  max-width: 1120px;
}

.hero {
  min-height: 360px;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(32, 27, 24, 0.56), rgba(32, 27, 24, 0.36)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='520' viewBox='0 0 1200 520'%3E%3Crect width='1200' height='520' fill='%234b6f44'/%3E%3Cpath d='M0 380 C120 300 180 310 280 240 C410 145 520 210 620 130 C740 36 890 70 1020 150 C1110 205 1160 230 1200 220 L1200 520 L0 520 Z' fill='%232f4b37'/%3E%3Cpath d='M0 430 C160 370 250 390 350 330 C520 226 680 315 810 250 C990 160 1050 280 1200 245 L1200 520 L0 520 Z' fill='%23233830'/%3E%3Ccircle cx='880' cy='100' r='58' fill='%23f4cc76'/%3E%3Cpath d='M642 305 C720 245 810 270 866 214' stroke='%23d7d0b1' stroke-width='18' fill='none' stroke-linecap='round' opacity='.72'/%3E%3Cpath d='M690 310 C755 275 800 295 850 255' stroke='%23f3f0df' stroke-width='8' fill='none' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hero h3 {
  margin: 0;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
}

.hero p {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.7;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.primary,
.secondary {
  padding: 11px 15px;
}

.secondary {
  background: var(--panel);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.card,
.panel {
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.9);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(72, 49, 23, 0.07);
}

.card h3,
.panel h3 {
  margin-top: 0;
}

.map {
  display: grid;
  gap: 12px;
}

.map-row {
  display: grid;
  grid-template-columns: 70px 170px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 15px;
}

.map-thumb {
  width: 170px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 5px 5px 0 rgba(32, 27, 24, 0.16);
}

.chapter-no {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  font-weight: 800;
}

.status {
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--gold);
  font-size: 13px;
}

.status.done {
  background: var(--green);
}

.dialogue {
  display: grid;
  gap: 16px;
}

.comic-layout,
.task-stage,
.result-stage,
.hint-stage,
.reward-stage,
.chapter-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.comic-frame {
  position: relative;
  margin: 0;
  min-height: 580px;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  box-shadow: 8px 8px 0 rgba(32, 27, 24, 0.16);
  isolation: isolate;
}

.comic-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 35%, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px);
  background-size: 12px 12px, 16px 16px;
  mix-blend-mode: soft-light;
}

.comic-frame img,
.chapter-brief > img,
.reward-stage > img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
}

.scene-backdrop {
  filter: saturate(1.18) contrast(1.08);
  transform: scale(1.03);
  animation: cinematicDrift 10s ease-in-out infinite alternate;
}

.depth-shadow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(32, 27, 24, 0.05), rgba(32, 27, 24, 0.24)),
    radial-gradient(circle at 50% 72%, transparent 0 28%, rgba(32, 27, 24, 0.34) 66%);
  pointer-events: none;
  z-index: 1;
}

.single-frame-stage {
  grid-template-columns: 1fr;
}

.motion-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.motion-drift .motion-layer {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 230, 150, 0.16), transparent 24%),
    linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, 0.12) 45%, transparent 60%);
  animation: lightSweep 5.5s ease-in-out infinite;
}

.motion-glow .motion-layer {
  background:
    radial-gradient(circle at 38% 58%, rgba(255, 194, 74, 0.34), transparent 24%),
    radial-gradient(circle at 48% 66%, rgba(255, 255, 190, 0.22), transparent 20%);
  animation: pulseGlow 2.8s ease-in-out infinite;
}

.motion-rush .motion-layer {
  background:
    linear-gradient(100deg, transparent 0 20%, rgba(255, 255, 255, 0.16) 36%, transparent 50%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 18px);
  animation: rushLines 1.7s linear infinite;
}

.motion-celebrate .motion-layer {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 221, 90, 0.28), transparent 8%),
    radial-gradient(circle at 68% 28%, rgba(255, 118, 82, 0.22), transparent 9%),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.15), transparent 18%);
  animation: pulseGlow 3s ease-in-out infinite;
}

.scene-props {
  position: absolute;
  left: 18px;
  top: 96px;
  max-width: calc(100% - 36px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 3;
}

.scene-props span {
  border: 2px solid rgba(32, 27, 24, 0.78);
  border-radius: 999px;
  background: rgba(255, 248, 230, 0.9);
  color: var(--ink);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 3px 3px 0 rgba(32, 27, 24, 0.16);
}

.stage-cast {
  position: absolute;
  left: 34px;
  right: 28px;
  bottom: 106px;
  display: flex;
  align-items: flex-end;
  gap: 0;
  z-index: 2;
}

.stage-character {
  width: min(235px, 36%);
  min-width: 158px;
  display: grid;
  justify-items: center;
  gap: 0;
  margin-right: -22px;
  filter: drop-shadow(0 20px 12px rgba(32, 27, 24, 0.38));
}

.stage-character:nth-child(2) {
  transform: translateY(10px) scale(0.93);
}

.stage-character:nth-child(3) {
  transform: translateY(18px) scale(0.86);
}

.stage-character img {
  width: 100%;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.stage-character span {
  max-width: 100%;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(-8px);
  box-shadow: 3px 3px 0 rgba(32, 27, 24, 0.16);
}

.comic-frame.has-keyart .stage-cast {
  display: none;
}

.comic-frame.has-keyart .scene-props {
  top: auto;
  bottom: 170px;
}

.comic-frame.has-keyart .scene-backdrop {
  object-position: center;
  filter: saturate(1.08) contrast(1.04);
}

.comic-frame figcaption {
  position: absolute;
  left: 18px;
  top: 18px;
  max-width: calc(100% - 36px);
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #fff8e6;
  box-shadow: 4px 4px 0 rgba(32, 27, 24, 0.2);
}

.comic-frame figcaption span,
.comic-bubble span,
.evidence-slot span,
.unlock-grid span,
.focus-card span,
.character-card span,
.visual-library-card span {
  color: var(--muted);
  font-size: 12px;
}

.comic-frame figcaption strong {
  font-size: 22px;
}

.comic-bubble {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 16px 18px 18px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.95);
  box-shadow: 5px 5px 0 rgba(32, 27, 24, 0.18);
  z-index: 7;
}

.comic-bubble::after {
  content: "";
  position: absolute;
  left: 42px;
  bottom: -18px;
  width: 28px;
  height: 28px;
  background: rgba(255, 253, 248, 0.95);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}

.comic-bubble p {
  margin: 6px 0 0;
  font-size: 19px;
  line-height: 1.7;
}

.comic-progress {
  position: absolute;
  right: 18px;
  top: 18px;
  display: flex;
  gap: 8px;
  z-index: 8;
}

.story-dot {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fffdf8;
  font-weight: 800;
  font-size: 13px;
}

.audio-dock {
  position: absolute;
  right: 18px;
  top: 58px;
  z-index: 11;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: min(420px, calc(100% - 36px));
}

.audio-dock button {
  border: 2px solid rgba(32, 27, 24, 0.78);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.9);
  color: var(--ink);
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 3px 3px 0 rgba(32, 27, 24, 0.18);
}

.audio-dock button:hover {
  background: #fff1bd;
  border-color: var(--gold);
  transform: translateY(-1px);
}

.story-dot.active {
  background: var(--gold);
  color: #fff;
}

.story-dot.done {
  background: var(--green);
  color: #fff;
}

.frame-actions {
  position: absolute;
  right: 24px;
  bottom: 126px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  z-index: 8;
}

.frame-action-btn {
  box-shadow: 4px 4px 0 rgba(32, 27, 24, 0.22);
}

.in-frame-task {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 7px 7px 0 rgba(32, 27, 24, 0.22);
  padding: 16px;
}

.in-frame-task h3 {
  margin: 0 0 12px;
  font-size: 22px;
}

.in-frame-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.frame-option {
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff8e6;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  text-align: left;
  padding: 11px;
  line-height: 1.45;
}

.frame-option span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
}

.frame-option:hover,
.frame-option.selected {
  border-color: var(--gold);
  background: #fff1bd;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(32, 27, 24, 0.14);
}

.floating-clue {
  position: absolute;
  left: 28px;
  bottom: 28px;
  width: min(620px, calc(100% - 56px));
  z-index: 12;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.96);
  padding: 18px;
  box-shadow: 7px 7px 0 rgba(32, 27, 24, 0.22);
}

.floating-result {
  position: absolute;
  left: 28px;
  bottom: 28px;
  width: min(620px, calc(100% - 56px));
  z-index: 12;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.96);
  padding: 18px;
  box-shadow: 7px 7px 0 rgba(32, 27, 24, 0.22);
}

.floating-result h3 {
  margin-top: 0;
}

.mission-panel,
.task-console {
  position: sticky;
  top: 18px;
}

.comic-frame .floating-result.clue-board {
  position: absolute;
}

.visual-db-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7efe3;
  padding: 14px;
}

.visual-db-panel h3 {
  margin-bottom: 8px;
}

.palette-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.palette-row span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
  padding: 4px 8px;
  font-size: 12px;
}

.focus-card {
  border-left: 4px solid var(--blue);
  border-radius: 0 8px 8px 0;
  background: #eef6fb;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.character-cards {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.character-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 8px;
}

.character-card img {
  width: 72px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff8e6;
}

.character-card strong,
.visual-library-card strong {
  display: block;
  margin: 2px 0 4px;
}

.character-card p,
.visual-library-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.evidence-slot {
  margin-top: 18px;
  border: 2px dashed var(--gold);
  border-radius: 8px;
  padding: 14px;
  background: #fff7de;
  display: grid;
  gap: 4px;
}

.task-art,
.success-art,
.failure-art,
.hint-art {
  min-height: 620px;
}

.task-console h3 {
  font-size: 24px;
  line-height: 1.35;
}

.scene-line {
  border-left: 4px solid var(--red);
  background: var(--panel);
  padding: 22px;
  border-radius: 0 8px 8px 0;
  font-size: 20px;
  line-height: 1.8;
}

.option-list {
  display: grid;
  gap: 10px;
}

.option {
  width: 100%;
  text-align: left;
  padding: 14px;
  line-height: 1.55;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.option span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.option.selected {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.feedback-bad {
  border-color: rgba(164, 59, 47, 0.5);
  background: #fff7f4;
}

.feedback-good {
  border-color: rgba(45, 106, 79, 0.45);
  background: #f4fff8;
}

.chapter-brief > img,
.reward-stage > img {
  border: 4px solid var(--ink);
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(32, 27, 24, 0.16);
  background: #fff;
}

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

.mini-stats div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7efe3;
  padding: 12px;
}

.mini-stats p {
  margin: 0 0 4px;
}

.node-strip {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.node-strip span {
  border-left: 4px solid var(--red);
  background: #fff8e6;
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
}

.unlock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.unlock-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff8e6;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.visual-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.visual-library-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 10px;
}

.visual-library-card img {
  width: 92px;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff8e6;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag {
  border: 1px solid var(--line);
  background: #f4eee4;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
}

.report-list {
  display: grid;
  gap: 10px;
  padding-left: 18px;
}

pre {
  max-height: 430px;
  overflow: auto;
  border: 1px solid var(--line);
  background: #171411;
  color: #f8f4ec;
  border-radius: 8px;
  padding: 16px;
}

@keyframes cinematicDrift {
  from {
    transform: scale(1.03) translate3d(-0.8%, -0.4%, 0);
  }
  to {
    transform: scale(1.09) translate3d(0.8%, 0.5%, 0);
  }
}

@keyframes lightSweep {
  from {
    opacity: 0.45;
    transform: translateX(-12%);
  }
  to {
    opacity: 0.85;
    transform: translateX(12%);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.42;
    transform: scale(1);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.04);
  }
}

@keyframes rushLines {
  from {
    opacity: 0.2;
    transform: translateX(-8%);
  }
  to {
    opacity: 0.72;
    transform: translateX(8%);
  }
}

@media (max-width: 780px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    padding: 16px;
  }

  .nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .nav button {
    text-align: center;
    padding: 10px 6px;
    font-size: 13px;
  }

  .side-card {
    display: none;
  }

  .main {
    padding: 18px;
  }

  .topbar,
  .map-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .progress-pill {
    justify-self: start;
  }

  .hero {
    min-height: 390px;
    padding: 22px;
  }

  .map-thumb {
    width: 100%;
  }

  .comic-layout,
  .task-stage,
  .result-stage,
  .hint-stage,
  .reward-stage,
  .chapter-brief {
    grid-template-columns: 1fr;
  }

  .comic-frame,
  .task-art,
  .success-art,
  .failure-art,
  .hint-art {
    min-height: 520px;
  }

  .comic-frame img,
  .chapter-brief > img,
  .reward-stage > img {
    min-height: 430px;
  }

  .comic-bubble {
    left: 14px;
    right: 14px;
    bottom: 16px;
  }

  .mode-task .comic-bubble {
    display: none;
  }

  .frame-actions {
    left: 14px;
    right: 14px;
    bottom: 126px;
    justify-content: flex-start;
  }

  .in-frame-task {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px;
  }

  .in-frame-task h3 {
    font-size: 18px;
  }

  .in-frame-options {
    grid-template-columns: 1fr;
  }

  .floating-clue {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
  }

  .floating-result {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
  }

  .stage-cast {
    left: 12px;
    right: 12px;
    bottom: 118px;
  }

  .stage-character {
    min-width: 128px;
    width: 40%;
    margin-right: -28px;
  }

  .stage-character span {
    font-size: 11px;
  }

  .scene-props {
    top: 108px;
    left: 12px;
    right: 12px;
  }

  .scene-props span {
    font-size: 11px;
    padding: 4px 7px;
  }

  .comic-bubble p {
    font-size: 16px;
  }

  .comic-progress {
    top: auto;
    bottom: 155px;
    left: 18px;
    right: auto;
  }

  .audio-dock {
    top: 18px;
    right: 14px;
    max-width: calc(100% - 28px);
  }

  .audio-dock button {
    padding: 6px 8px;
    font-size: 11px;
  }

  .comic-frame.has-keyart .scene-props {
    bottom: 176px;
  }

  .mission-panel,
  .task-console {
    position: static;
  }

  .mini-stats {
    grid-template-columns: 1fr;
  }

  .visual-library-card {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .visual-library-card img {
    width: 76px;
  }
}