:root {
  --paper: #f0e4ce;
  --ink: #101d2b;
  --ink-soft: #2b3848;
  --navy: #142334;
  --navy-2: #203c56;
  --cream: #fff7e7;
  --clay: #8d6849;
  --green: #5f9468;
  --red: #a7473f;
  --deep-red: #82312e;
  --gold: #d8b04a;
  --blue: #6687a5;
  --shadow: rgba(18, 29, 43, 0.18);
  --pixel: 3px;
}

@media (max-width: 560px) {
  .top-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 5px 6px;
  }

  h1 {
    font-size: clamp(17px, 5.4vw, 21px);
    line-height: 1.04;
  }

  .project-subtitle {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.15;
  }

  .header-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .day-chip,
  .time-chip {
    min-height: 28px;
    padding: 3px 5px;
  }

  .day-chip strong,
  .time-chip strong {
    font-size: 14px;
    line-height: 1;
  }

  .day-chip small,
  .time-chip small {
    font-size: 8.5px;
  }

  .panel-title {
    min-height: 30px;
    padding: 5px 7px;
  }

  .panel-title h2 {
    font-size: 14px;
  }

  .current-mame-layout {
    padding: 6px;
  }

  .current-scene-frame {
    min-height: clamp(146px, 43vw, 184px);
  }

  .current-scene-frame.has-stage-result {
    min-height: min(62vh, 302px);
  }

  .stage-azuki-hud {
    left: auto;
    right: 6px;
    top: 6px;
    grid-template-columns: repeat(3, minmax(0, auto));
    max-width: min(78%, 258px);
    padding: 3px;
    gap: 2px;
    opacity: 0.96;
  }

  .stage-azuki-hud div {
    padding: 2px 4px;
  }

  .stage-azuki-hud dt {
    font-size: 7.5px;
  }

  .stage-azuki-hud dd {
    font-size: 9.5px;
  }

  .azuki-pop {
    top: auto;
    bottom: 32px;
    max-width: min(72%, 230px);
    padding: 4px 7px;
    font-size: 10px;
  }

  .mame-effect {
    max-width: min(38%, 132px);
    padding: 3px 5px;
    font-size: 9px;
  }

  .mame-effect.badge-env-corner {
    left: 6px;
    right: auto;
    top: 6px;
  }

  .mame-effect.badge-near-mame-left {
    left: 9%;
    top: 22%;
  }

  .mame-effect.badge-near-center {
    left: 27%;
    top: 21%;
  }

  .mame-effect.badge-near-futon,
  .mame-effect.badge-near-entrance {
    left: 7%;
    top: 24%;
  }

  .current-scene-frame.has-stage-result .stage-azuki-hud,
  .current-scene-frame.has-stage-result .mame-effect,
  .current-scene-frame.has-stage-result .event-cutin,
  .current-scene-frame.has-stage-result figcaption {
    display: none;
  }

  .current-scene-frame.has-stage-result .current-mame-img {
    max-width: min(38%, 116px);
    max-height: 58%;
    opacity: 0.72;
  }

  .stage-result-overlay {
    inset: 4px;
    align-content: center;
    gap: 3px;
    padding: 6px;
    border-width: 3px;
  }

  .stage-result-kicker {
    padding: 1px 5px;
    font-size: 8px;
  }

  .stage-result-title {
    font-size: clamp(18px, 6vw, 25px);
    line-height: 1.02;
  }

  .stage-result-verdict {
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.15;
  }

  .stage-result-judges {
    gap: 3px;
  }

  .stage-result-judges div,
  .stage-result-mini div {
    padding: 2px 4px;
  }

  .stage-result-judges dt,
  .stage-result-mini dt {
    font-size: 7.8px;
    line-height: 1.05;
  }

  .stage-result-judges dd {
    display: -webkit-box;
    overflow: hidden;
    font-size: 8.6px;
    line-height: 1.12;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .stage-result-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }

  .stage-result-mini dd {
    font-size: 8.4px;
    line-height: 1.08;
  }

  .mame-message-bar {
    padding: 5px 7px;
  }

  .mame-message-bar span {
    padding: 1px 5px;
    font-size: 9px;
  }

  .mame-message-bar b {
    font-size: 10.5px;
    line-height: 1.18;
  }

  .current-mame-copy {
    padding: 6px;
  }

  .event-tag {
    padding: 3px 6px;
    font-size: 10px;
  }

  .current-mame-copy h3 {
    margin: 5px 0 4px;
    font-size: 13px;
  }

  .current-mame-copy p {
    font-size: 10.8px;
    line-height: 1.32;
    -webkit-line-clamp: 1;
  }

  .daily-brief-card:not(.is-daily-result) {
    padding: 5px;
  }

  .daily-brief-card:not(.is-daily-result) .brief-actor {
    display: none;
  }

  .daily-brief-card:not(.is-daily-result) .daily-brief-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .daily-brief-card:not(.is-daily-result) p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .daily-brief-card:not(.is-daily-result) dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .daily-brief-card:not(.is-daily-result) dl div {
    padding: 3px 4px;
  }

  .daily-brief-card:not(.is-daily-result) dt {
    font-size: 8px;
  }

  .daily-brief-card:not(.is-daily-result) dd {
    font-size: 9.5px;
  }

  .state-meta {
    margin-top: 6px;
  }

  .state-meta div:not(.is-priority),
  .state-meta .is-priority:nth-of-type(2) {
    display: none;
  }

  .hud-control-row {
    gap: 5px;
    margin-top: 6px;
  }

  .time-step-button {
    min-height: 32px;
    padding: 5px 6px;
    font-size: 11px;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(16, 29, 43, 0.035) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(0deg, rgba(16, 29, 43, 0.03) 1px, transparent 1px) 0 0 / 18px 18px,
    radial-gradient(circle at 18% 12%, rgba(166, 71, 63, 0.13), transparent 28%),
    linear-gradient(180deg, #f7eddc 0%, #e1ceb1 100%);
  font-family: "Yu Gothic UI", "Meiryo", "MS PGothic", system-ui, sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3,
p,
li,
dt,
dd,
figcaption,
small,
strong,
span,
button,
label,
textarea {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.top-panel > *,
.game-hud > *,
.current-mame-layout > *,
.main-grid > *,
.tank-scene > *,
.location-board > *,
.place-card > *,
.side-stack > *,
.intervention-grid > *,
.relation-grid > *,
.person-card > *,
.wife-grid > *,
.wife-copy,
.fight-box,
.person-copy,
.accepted-word,
.profile-box,
.status-note,
.image-slot,
.asset-slot {
  min-width: 0;
}

button,
input,
textarea {
  font: inherit;
}

.aquarium-shell {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 22px;
}

.pixel-frame {
  border: var(--pixel) solid var(--ink);
  background: var(--cream);
  box-shadow: 6px 6px 0 var(--shadow);
}

.top-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
}

.project-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 6px;
  padding: 3px 9px 2px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(24px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: 0;
}

.project-subtitle {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.55;
}

.day-chip {
  min-width: 180px;
  padding: 10px 12px;
  color: var(--cream);
  text-align: center;
  background: var(--navy);
  border: 3px solid var(--ink);
  box-shadow: inset 0 -6px 0 rgba(255, 255, 255, 0.05);
}

.day-chip span,
.day-chip small {
  display: block;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 800;
}

.day-chip strong {
  display: block;
  margin: 2px 0 3px;
  color: #fff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 30px;
  line-height: 1;
}

.day-chip small {
  color: #d7c5a9;
  font-size: 12px;
}

.header-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.time-chip {
  min-width: 156px;
  padding: 10px 12px;
  color: var(--ink);
  text-align: center;
  background:
    linear-gradient(var(--time-overlay, transparent), var(--time-overlay, transparent)),
    #fff0c7;
  border: 3px solid var(--ink);
  box-shadow: inset 0 -6px 0 rgba(16, 29, 43, 0.05);
}

.time-chip span,
.time-chip small {
  display: block;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 850;
}

.time-chip strong {
  display: block;
  margin: 2px 0 3px;
  color: var(--red);
  font-family: Consolas, "Courier New", monospace;
  font-size: 24px;
  line-height: 1;
}

.time-chip small {
  color: var(--ink-soft);
  font-size: 12px;
}

.time-morning {
  --time-filter: brightness(1.08) saturate(1.03) sepia(0.08);
  --time-overlay: rgba(255, 231, 158, 0.18);
}

.time-day {
  --time-filter: none;
  --time-overlay: rgba(255, 250, 240, 0.03);
}

.time-evening {
  --time-filter: brightness(0.98) saturate(1.08) sepia(0.18);
  --time-overlay: rgba(214, 124, 68, 0.18);
}

.time-night {
  --time-filter: brightness(0.72) saturate(0.95) sepia(0.04) hue-rotate(176deg);
  --time-overlay: rgba(25, 47, 78, 0.22);
}

.time-midnight {
  --time-filter: brightness(0.56) saturate(0.86) hue-rotate(190deg);
  --time-overlay: rgba(8, 19, 39, 0.36);
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(340px, 0.64fr);
  gap: 16px;
  margin-top: 16px;
}

.game-hud {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  grid-template-areas:
    "current summary"
    "current omen"
    "voice voice"
    "log log"
    "azuki azuki";
  gap: 14px;
  margin-top: 16px;
  min-width: 0;
}

.current-mame-card {
  grid-area: current;
}

.mini-status-card {
  grid-area: summary;
}

.hud-omen-card {
  grid-area: omen;
}

.latest-log-card {
  grid-area: log;
}

.hud-viewer-voice {
  grid-area: voice;
}

.hud-azuki-chance {
  grid-area: azuki;
}

.archive-hidden {
  display: none !important;
}

.tank-card,
.current-mame-card,
.mini-status-card,
.status-card,
.omen-card,
.log-card,
.viewer-voice-card,
.azuki-chance-card,
.intervention-card,
.relation-card,
.wife-event-card,
.footer-panel {
  border-radius: 8px;
  overflow: hidden;
}

.current-mame-card,
.mini-status-card {
  background: var(--cream);
}

.game-hud .viewer-voice-card,
.game-hud .azuki-chance-card {
  margin-top: 0;
}

.voice-sheet-close {
  display: none;
}

.current-mame-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.92fr);
  gap: 12px;
  min-width: 0;
  padding: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(0deg, rgba(16, 29, 43, 0.08) 1px, transparent 1px) 0 0 / 12px 12px,
    #d8cfb4;
}

.current-scene-stack {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.current-scene-frame {
  position: relative;
  min-width: 0;
  min-height: 250px;
  margin: 0;
  overflow: hidden;
  background: #efe3c9;
  border: 3px solid var(--ink);
  box-shadow: inset 0 -10px 0 rgba(16, 29, 43, 0.08);
}

.current-scene-frame.has-stage-result {
  min-height: clamp(275px, 34vw, 360px);
}

.current-scene-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--time-overlay, transparent);
}

.current-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--time-filter, none);
}

.current-scene-frame.is-scene-image {
  background: #101d2b;
}

.current-scene-frame.is-scene-image .current-bg {
  object-fit: contain;
  background: #101d2b;
}

.current-scene-frame.is-scene-image .current-mame-img {
  display: none;
}

.current-scene-frame.is-scene-image .actor-npc {
  display: none;
}

.observation-stage {
  isolation: isolate;
}

.stage-background {
  z-index: 0;
}

.actor {
  position: absolute;
  z-index: 2;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(5px 8px 0 rgba(16, 29, 43, 0.2));
}

.current-mame-img {
  right: 3%;
  bottom: 4%;
  max-width: min(52%, 230px);
  max-height: 82%;
}

.actor-npc {
  max-width: min(38%, 168px);
  max-height: 74%;
  opacity: 1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.actor-jko,
.actor-tproducer,
.actor-kkamei,
.actor-yyuu {
  transform-origin: 50% 100%;
}

.actor-npc[hidden],
.actor-npc.is-hidden {
  display: none;
}

.pos-mame-seat-left {
  right: auto;
  left: 19%;
  bottom: 4%;
}

.pos-futon-left {
  right: auto;
  left: 6%;
  bottom: 5%;
  max-width: min(48%, 210px);
}

.pos-kotatsu-center {
  right: auto;
  left: 35%;
  bottom: 3%;
}

.pos-mame-escape-left {
  right: auto;
  left: 10%;
  bottom: 4%;
  max-width: min(48%, 210px);
}

.pos-entrance-bottom {
  right: auto;
  left: 18%;
  bottom: -1%;
  max-width: min(46%, 200px);
}

.pos-default {
  right: 3%;
  left: auto;
  bottom: 4%;
}

.pos-jko-seat-right {
  right: 10%;
  bottom: 4%;
}

.pos-jko-pressure-right {
  right: 5%;
  bottom: 2%;
  max-width: min(42%, 184px);
}

.pos-entrance-bottom.actor-npc {
  right: 8%;
  bottom: -2%;
}

.pos-kotatsu-center.actor-npc {
  left: 58%;
  bottom: 3%;
  transform: translateX(-50%);
}

.mame-avatar {
  --actor-facing-scale: 1;
  transform-origin: 50% 96%;
  will-change: transform;
}

.actor-facing-left,
.actor-facing-center {
  --actor-facing-scale: 1;
}

.actor-facing-right {
  --actor-facing-scale: -1;
}

.actor-avoid-eye {
  filter: drop-shadow(5px 8px 0 rgba(16, 29, 43, 0.2)) saturate(0.92);
}

.mame-avatar.is-idle {
  animation: mame-idle 4.8s ease-in-out infinite;
}

.mame-avatar.is-sad,
.mame-avatar.is-tired {
  animation: mame-heavy 5.8s ease-in-out infinite;
}

.mame-avatar.is-angry,
.mame-avatar.is-panic {
  animation: mame-tremble 0.48s steps(2, end) infinite;
}

.mame-avatar.is-sleep {
  animation: mame-sleep 5.6s ease-in-out infinite;
}

.mame-avatar.is-pachinko,
.current-scene-frame.is-pachinko .current-bg {
  animation: mame-fidget 1.9s ease-in-out infinite;
}

.mame-avatar.is-startled {
  animation: mame-startled 0.62s ease-out 1;
}

.mame-avatar.is-happy {
  animation: mame-hop 0.86s ease-out 1, mame-idle 4.8s ease-in-out 0.86s infinite;
}

.current-scene-frame.has-red-aura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 74% 54%, rgba(167, 71, 63, 0.32), transparent 38%);
  animation: red-aura 1.1s ease-in-out infinite;
}

.mame-effect {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 4;
  max-width: min(46%, 170px);
  padding: 5px 8px;
  color: var(--ink);
  background: #fff0c7;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(16, 29, 43, 0.2);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mame-effect.badge-near-mame-left {
  right: auto;
  left: 22%;
  top: 14%;
}

.mame-effect.badge-near-center {
  right: auto;
  left: 37%;
  top: 12%;
}

.mame-effect.badge-near-futon {
  right: auto;
  left: 9%;
  top: 15%;
}

.mame-effect.badge-near-entrance {
  right: auto;
  left: 20%;
  top: 16%;
}

.mame-effect.badge-env-corner {
  right: 8px;
  left: auto;
  top: 8px;
}

.mame-effect.is-alert {
  color: var(--cream);
  background: var(--red);
  animation: effect-pulse 0.9s ease-in-out infinite;
}

.mame-effect.is-soft {
  background: #dff0d2;
}

.stage-azuki-hud {
  position: absolute;
  z-index: 4;
  left: 8px;
  top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 4px;
  margin: 0;
  max-width: calc(100% - 16px);
  padding: 5px;
  color: var(--ink);
  background: rgba(255, 250, 232, 0.92);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(16, 29, 43, 0.22);
  font-family: var(--pixel-font);
}

.stage-azuki-hud div {
  min-width: 0;
  padding: 3px 5px;
  background: rgba(239, 227, 201, 0.82);
}

.stage-azuki-hud dt,
.stage-azuki-hud dd {
  margin: 0;
  white-space: nowrap;
}

.stage-azuki-hud dt {
  color: #6b6148;
  font-size: 9px;
}

.stage-azuki-hud dd {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 800;
}

.azuki-pop {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 16%;
  max-width: min(82%, 280px);
  padding: 6px 10px;
  color: var(--ink);
  background: #fff9df;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.2);
  font-family: var(--pixel-font);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
  overflow-wrap: anywhere;
  pointer-events: none;
  animation: azuki-pop 0.42s ease both;
}

.azuki-pop[hidden] {
  display: none;
}

.azuki-pop.is-plus {
  color: #1f5d31;
  background: #f0ffe8;
}

.azuki-pop.is-minus {
  color: #7a1f1f;
  background: #fff0df;
}

@keyframes azuki-pop {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.mame-message-bar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff0c7;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.16);
}

.mame-message-bar span {
  padding: 2px 6px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.mame-message-bar b {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.event-cutin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: grid;
  gap: 3px;
  width: min(calc(100% - 24px), 300px);
  padding: 10px 12px;
  color: var(--cream);
  background: rgba(16, 29, 43, 0.94);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(16, 29, 43, 0.26);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: cutin-pop 2.6s ease both;
}

.event-cutin span {
  color: #fff0c7;
  font-size: 12px;
  font-weight: 900;
}

.event-cutin b {
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.event-cutin p {
  margin: 4px 0 0;
  color: #fff0c7;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.stage-result-overlay {
  position: absolute;
  inset: 8px;
  z-index: 8;
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  color: #fff4cf;
  background:
    linear-gradient(rgba(16, 29, 43, 0.86), rgba(16, 29, 43, 0.86)),
    rgba(117, 45, 37, 0.92);
  border: 4px solid #f1c15d;
  box-shadow:
    inset 0 0 0 2px var(--ink),
    5px 5px 0 rgba(16, 29, 43, 0.35);
  text-align: center;
}

.stage-result-overlay[hidden] {
  display: none;
}

.stage-result-kicker {
  justify-self: center;
  padding: 2px 7px;
  color: var(--ink);
  background: #f1c15d;
  border: 2px solid var(--ink);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.2;
}

.stage-result-title,
.stage-result-verdict {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stage-result-title {
  color: #fff;
  font-size: clamp(20px, 4vw, 34px);
  line-height: 1.08;
  text-shadow: 3px 3px 0 rgba(16, 29, 43, 0.9);
}

.stage-result-verdict {
  justify-self: center;
  padding: 4px 9px;
  color: var(--ink);
  background: #fff4cf;
  border: 2px solid #f1c15d;
  font-size: 13px;
  line-height: 1.25;
}

.stage-result-judges,
.stage-result-mini {
  display: grid;
  min-width: 0;
  margin: 0;
}

.stage-result-judges {
  gap: 5px;
}

.stage-result-mini {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.stage-result-judges div,
.stage-result-mini div {
  min-width: 0;
  padding: 4px 5px;
  color: var(--ink);
  background: rgba(255, 244, 207, 0.94);
  border: 2px solid rgba(241, 193, 93, 0.9);
}

.stage-result-judges dt,
.stage-result-judges dd,
.stage-result-mini dt,
.stage-result-mini dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stage-result-judges dt,
.stage-result-mini dt {
  color: var(--red);
  font-size: 9px;
  font-weight: 1000;
  line-height: 1.2;
}

.stage-result-judges dd {
  font-size: 11px;
  font-weight: 950;
  line-height: 1.25;
}

.stage-result-mini dd {
  font-size: 10.5px;
  font-weight: 1000;
  line-height: 1.2;
}

@keyframes mame-idle {
  0%, 100% { transform: translateY(0) scaleX(var(--actor-facing-scale, 1)); }
  50% { transform: translateY(-4px) scaleX(var(--actor-facing-scale, 1)); }
}

@keyframes mame-heavy {
  0%, 100% { transform: translateY(3px) scaleX(var(--actor-facing-scale, 1)); }
  50% { transform: translateY(0) scaleX(var(--actor-facing-scale, 1)); }
}

@keyframes mame-tremble {
  0%, 100% { transform: translate(0, 0) scaleX(var(--actor-facing-scale, 1)); }
  50% { transform: translate(3px, 1px) scaleX(var(--actor-facing-scale, 1)); }
}

@keyframes mame-sleep {
  0%, 100% { transform: translateY(2px) rotate(-1deg) scaleX(var(--actor-facing-scale, 1)); }
  50% { transform: translateY(5px) rotate(1.5deg) scaleX(var(--actor-facing-scale, 1)); }
}

@keyframes mame-fidget {
  0%, 100% { transform: translateX(0) rotate(0) scaleX(var(--actor-facing-scale, 1)); }
  35% { transform: translateX(-3px) rotate(-0.7deg) scaleX(var(--actor-facing-scale, 1)); }
  70% { transform: translateX(3px) rotate(0.7deg) scaleX(var(--actor-facing-scale, 1)); }
}

@keyframes mame-startled {
  0% { transform: translateY(0) scale(1) scaleX(var(--actor-facing-scale, 1)); }
  22% { transform: translateY(-12px) scale(1.04) scaleX(var(--actor-facing-scale, 1)); }
  52% { transform: translateY(3px) scale(0.98) scaleX(var(--actor-facing-scale, 1)); }
  100% { transform: translateY(0) scale(1) scaleX(var(--actor-facing-scale, 1)); }
}

@keyframes mame-hop {
  0% { transform: translateY(0) scaleX(var(--actor-facing-scale, 1)); }
  45% { transform: translateY(-10px) scaleX(var(--actor-facing-scale, 1)); }
  100% { transform: translateY(0) scaleX(var(--actor-facing-scale, 1)); }
}

@keyframes red-aura {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.8; }
}

@keyframes effect-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes cutin-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -44%) scale(0.96);
  }
  12%, 82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -56%) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mame-avatar,
  .current-scene-frame.is-pachinko .current-bg,
  .mame-effect,
  .event-cutin,
  .dummy-result-card.is-updated {
    animation: none !important;
  }
}

.current-scene-frame figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  color: var(--cream);
  background: rgba(16, 29, 43, 0.88);
  border: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.current-mame-copy {
  min-width: 0;
  padding: 11px;
  background: #fffaf0;
  border: 3px solid var(--ink);
}

.current-mame-copy h3 {
  margin: 9px 0 8px;
  color: var(--red);
  font-size: 18px;
  line-height: 1.35;
}

.current-mame-copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.daily-brief-card {
  min-width: 0;
  margin-top: 9px;
  padding: 8px;
  background: #f8efdb;
  border: 2px solid var(--red);
  box-shadow: 3px 3px 0 rgba(117, 45, 37, 0.14);
}

.daily-brief-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  margin-bottom: 6px;
}

.daily-brief-head span,
.daily-brief-head b {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.daily-brief-head span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 1000;
}

.daily-brief-head b {
  padding: 3px 7px;
  color: var(--cream);
  background: var(--red);
  border: 2px solid var(--ink);
  font-size: 11px;
}

.daily-brief-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.daily-brief-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.daily-brief-copy {
  min-width: 0;
}

.brief-actor {
  min-width: 0;
  width: 72px;
  margin: 0;
  padding: 4px;
  background: #fffaf0;
  border: 2px solid rgba(16, 29, 43, 0.45);
}

.brief-actor[hidden] {
  display: none;
}

.brief-actor img {
  display: block;
  width: 100%;
  max-height: 78px;
  object-fit: contain;
}

.brief-actor figcaption {
  margin-top: 2px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.daily-brief-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr));
  gap: 5px;
  min-width: 0;
  margin: 7px 0 0;
}

.daily-brief-card dl div {
  min-width: 0;
  padding: 5px 6px;
  background: #fffaf0;
  border: 2px solid rgba(16, 29, 43, 0.38);
}

.daily-brief-card dt,
.daily-brief-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.daily-brief-card dt {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 850;
}

.daily-brief-card dd {
  color: var(--ink);
  font-size: 12px;
  font-weight: 1000;
}

.daily-brief-card.is-daily-result {
  position: relative;
  margin-top: 10px;
  padding: 12px;
  color: var(--cream);
  background:
    linear-gradient(135deg, rgba(44, 31, 43, 0.96), rgba(117, 45, 37, 0.94)),
    #2d2533;
  border: 4px solid var(--ink);
  box-shadow:
    0 0 0 3px #f1c15d,
    5px 5px 0 rgba(16, 29, 43, 0.35);
}

.daily-brief-card.is-daily-result::before {
  content: "DAILY RESULT";
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 7px;
  color: var(--ink);
  background: #f1c15d;
  border: 2px solid var(--ink);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0;
}

.daily-brief-card.is-daily-result .daily-brief-head {
  align-items: stretch;
  gap: 7px;
  margin-bottom: 8px;
}

.daily-brief-card.is-daily-result .daily-brief-head span {
  color: #fff4cf;
  font-size: 16px;
  text-shadow: 2px 2px 0 rgba(16, 29, 43, 0.8);
}

.daily-brief-card.is-daily-result .daily-brief-head b {
  color: var(--ink);
  background: #fff4cf;
  border-color: #f1c15d;
  font-size: 12px;
}

.daily-brief-card.is-daily-result .daily-brief-body {
  grid-template-columns: minmax(64px, 92px) minmax(0, 1fr);
  gap: 10px;
}

.daily-brief-card.is-daily-result .brief-actor {
  width: 86px;
  background: rgba(255, 244, 207, 0.88);
  border-color: #f1c15d;
  box-shadow: 2px 2px 0 rgba(16, 29, 43, 0.45);
}

.daily-brief-card.is-daily-result .brief-actor img {
  max-height: 96px;
}

.daily-brief-card.is-daily-result .brief-actor figcaption {
  color: var(--ink);
}

.daily-brief-card.is-daily-result p {
  color: #fff4cf;
  font-size: 13px;
  line-height: 1.55;
}

.daily-brief-card.is-daily-result dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.daily-brief-card.is-daily-result dl div {
  background: rgba(255, 250, 240, 0.96);
  border-color: rgba(241, 193, 93, 0.95);
}

.daily-brief-card.is-daily-result dl div.is-major {
  grid-column: 1 / -1;
  background: #fff4cf;
  border-color: var(--red);
}

.daily-brief-card.is-daily-result dl div.is-major:first-child {
  background: #f1c15d;
  box-shadow: inset 0 0 0 2px rgba(117, 45, 37, 0.18);
}

.daily-brief-card.is-daily-result dt {
  color: var(--red);
  font-size: 10px;
}

.daily-brief-card.is-daily-result dd {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.35;
}

.daily-brief-card.is-daily-result dl div.is-major:first-child dd {
  color: var(--red);
  font-size: 16px;
}

.current-mame-copy .daily-brief-card.is-daily-result {
  display: none;
}

.state-meta {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
}

.hud-control-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.time-step-button {
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  padding: 8px 10px;
  color: var(--cream);
  background: var(--navy);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.16);
  cursor: pointer;
  font-weight: 1000;
  line-height: 1.25;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.time-step-button.is-next {
  color: var(--ink);
  background: #fff0c7;
}

.time-step-button:hover,
.time-step-button:focus-visible {
  filter: brightness(1.08);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(16, 29, 43, 0.2);
}

.time-step-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(16, 29, 43, 0.18);
}

.state-meta div,
.mini-status-grid div {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  background: #f1e5ce;
  border: 2px solid rgba(16, 29, 43, 0.45);
}

.state-meta .is-priority {
  background: #fff0c7;
  border-color: var(--red);
}

.state-meta dt,
.state-meta dd,
.mini-status-grid dt,
.mini-status-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.state-meta dt,
.mini-status-grid dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
}

.state-meta dd,
.mini-status-grid dd {
  color: var(--ink);
  font-size: 14px;
  font-weight: 1000;
}

.mini-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  background: #fffaf0;
}

.mini-status-grid div {
  grid-template-columns: 1fr;
  gap: 3px;
}

.mini-status-details,
.log-more {
  min-width: 0;
  padding: 0 12px 12px;
  background: #fffaf0;
}

.mini-status-details summary,
.log-more summary {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--cream);
  background: var(--navy-2);
  border: 2px solid var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1.3;
}

.mini-status-details[open] summary,
.log-more[open] summary {
  margin-bottom: 8px;
  color: var(--ink);
  background: #fff0c7;
}

.mini-status-grid.is-secondary {
  padding: 0;
  background: transparent;
}

.latest-log-card .action-log {
  max-height: none;
  overflow: visible;
}

.latest-log-card > .action-log > li:first-child {
  background: #fff0c7;
  border-color: var(--red);
  box-shadow: inset 4px 0 0 var(--red);
}

.secondary-log {
  padding: 0;
  background: transparent;
}

.quick-jump-nav {
  display: none;
}

#current-mame,
#status-summary,
#latest-log,
#viewer-voice {
  scroll-margin-top: 12px;
}

.material-grid {
  margin-top: 18px;
}

.panel-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 45px;
  padding: 9px 12px;
  color: var(--cream);
  background: var(--navy);
  border-bottom: 3px solid var(--ink);
}

.panel-title.compact {
  min-height: 40px;
  padding: 8px 11px;
}

.panel-title h2 {
  min-width: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.lamp {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: var(--blue);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.lamp.is-live {
  background: var(--green);
}

.lamp.is-alert {
  background: var(--red);
}

.tank-scene {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas:
    "official live"
    "official places"
    "gallery places";
  gap: 12px;
  padding: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(0deg, rgba(16, 29, 43, 0.08) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(180deg, #c6d0cf 0%, #d8cfb4 46%, #8e806d 100%);
}

.official-frame {
  grid-area: official;
  align-self: start;
  margin: 0;
  padding: 8px;
  background: #fffaf0;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.15);
}

.official-frame span {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 7px;
  padding: 2px 7px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.official-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  object-fit: contain;
  object-position: center;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.official-frame figcaption {
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
}

.live-character-panel {
  grid-area: live;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  background: rgba(255, 247, 231, 0.88);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.15);
}

.image-slot,
.asset-slot {
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  min-height: 120px;
  margin: 0;
  padding: 6px;
  background:
    linear-gradient(90deg, rgba(16, 29, 43, 0.03) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(0deg, rgba(16, 29, 43, 0.025) 1px, transparent 1px) 0 0 / 14px 14px,
    rgba(255, 247, 231, 0.34);
  border: 2px solid rgba(16, 29, 43, 0.42);
  box-shadow: inset 0 -8px 0 rgba(216, 176, 74, 0.05);
}

.image-slot img {
  display: block;
  width: 100%;
  height: min(170px, 28vw);
  max-height: 180px;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.image-slot figcaption {
  width: 100%;
  padding: 2px 6px;
  color: var(--cream);
  text-align: center;
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.character-slot {
  min-height: 180px;
}

.character-slot img {
  height: 176px;
  max-height: 176px;
}

.large-image img {
  height: 180px;
  max-height: 180px;
}

.asset-slot {
  border-style: dashed;
}

.asset-placeholder {
  display: grid;
  gap: 5px;
  justify-items: center;
  color: var(--ink);
  text-align: center;
}

.asset-placeholder strong {
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  padding: 3px 8px;
  font-size: 14px;
}

.asset-placeholder span {
  font-weight: 950;
}

.asset-placeholder small {
  color: var(--ink-soft);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
}

.asset-slot img {
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(4px 4px 0 rgba(16, 29, 43, 0.14));
}

.asset-slot figcaption {
  width: 100%;
  padding: 2px 6px;
  color: var(--cream);
  text-align: center;
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.character-meta {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 10px;
  background: #fffaf0;
  border: 2px solid var(--ink);
  font-weight: 900;
}

.character-meta b {
  color: var(--red);
}

.character-meta span {
  display: block;
}

.location-board {
  grid-area: places;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.place-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.95fr) minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
  padding: 9px;
  background: rgba(255, 250, 240, 0.92);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.14);
}

.place-copy {
  display: grid;
  align-content: start;
  gap: 7px;
}

.place-card h3 {
  margin: 0;
  padding: 3px 7px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 15px;
}

.place-card p,
.inside-checklist {
  margin: 0;
  font-size: 13px;
  font-weight: 850;
}

.missing-asset,
.asset-note {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 1px 5px;
  color: var(--ink-soft);
  background: rgba(245, 237, 221, 0.72);
  border: 1px dashed rgba(16, 29, 43, 0.32);
  opacity: 0.78;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 800;
}

.asset-note {
  background: rgba(255, 240, 199, 0.82);
  border-style: solid;
  opacity: 0.92;
}

.multi-visual {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.home-visual {
  position: relative;
  isolation: isolate;
  min-height: 176px;
  padding: 8px;
  overflow: hidden;
  background: #e8d2ad;
  border: 2px solid rgba(16, 29, 43, 0.42);
}

.home-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--time-overlay, transparent);
  pointer-events: none;
}

.home-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: var(--time-filter, none);
}

.multi-visual .image-slot {
  position: relative;
  z-index: 2;
  min-height: 112px;
  padding: 4px;
}

.home-visual .image-slot {
  align-self: end;
  background: rgba(255, 250, 240, 0.68);
  border-color: rgba(16, 29, 43, 0.34);
  backdrop-filter: blur(1px);
}

.multi-visual .image-slot img {
  height: 112px;
  max-height: 112px;
}

.multi-visual .image-slot figcaption {
  min-height: 34px;
  display: grid;
  place-items: center;
  font-size: 11px;
}

.solo-character-frame,
.scene-image-frame {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: 152px;
  margin: 0;
  overflow: hidden;
}

.solo-character-frame {
  padding: 4px 4px 0;
  background:
    linear-gradient(90deg, rgba(16, 29, 43, 0.04) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(0deg, rgba(16, 29, 43, 0.035) 1px, transparent 1px) 0 0 / 16px 16px,
    rgba(240, 228, 206, 0.56);
  border: 2px dashed rgba(16, 29, 43, 0.34);
}

.solo-character-frame img {
  display: block;
  width: 100%;
  height: 146px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(4px 4px 0 rgba(16, 29, 43, 0.14));
}

.solo-character-frame figcaption,
.scene-image-frame figcaption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
  padding: 3px 7px;
  color: var(--cream);
  background: rgba(20, 35, 52, 0.88);
  border: 2px solid rgba(16, 29, 43, 0.78);
  font-size: 11px;
  font-weight: 900;
}

.scene-image-frame {
  min-height: 166px;
  padding: 0;
  background: rgba(238, 220, 188, 0.64);
  border: 2px solid rgba(16, 29, 43, 0.38);
  box-shadow: none;
}

.scene-image-frame img {
  display: block;
  width: 100%;
  height: 166px;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.scene-visual {
  position: relative;
  min-height: 174px;
  overflow: hidden;
  isolation: isolate;
  background: #dcc7a8;
  border: 2px solid rgba(16, 29, 43, 0.42);
  box-shadow: none;
}

.scene-bg,
.scene-character {
  display: block;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.scene-character {
  position: absolute;
  right: 3%;
  bottom: 4px;
  z-index: 2;
  width: 46%;
  max-height: calc(100% - 8px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(4px 4px 0 rgba(16, 29, 43, 0.16)) saturate(1.03);
}

.scene-character-large {
  right: 5%;
  width: 60%;
}

.scene-bg-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: rgba(16, 29, 43, 0.64);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(20, 35, 52, 0.08) 25%, transparent 25% 50%, rgba(20, 35, 52, 0.08) 50% 75%, transparent 75%) 0 0 / 26px 26px,
    linear-gradient(180deg, #f5e6c9 0%, #e4cfa9 100%);
}

.scene-bg-placeholder span {
  padding: 2px 8px;
  background: rgba(255, 250, 240, 0.72);
  border: 1px dashed rgba(16, 29, 43, 0.34);
  font-size: 12px;
  font-weight: 950;
}

.scene-bg-placeholder small {
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: 800;
}

.scene-caption {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 3;
  max-width: 46%;
  padding: 3px 7px;
  color: var(--cream);
  background: rgba(20, 35, 52, 0.92);
  border: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.delivery-card {
  background: #edf0e7;
}

.car-scene {
  min-height: 172px;
  background: #b6a68e;
  border-color: rgba(16, 29, 43, 0.32);
}

.outside-character-frame {
  background:
    linear-gradient(180deg, rgba(225, 213, 185, 0.5) 0%, rgba(237, 240, 231, 0.72) 100%);
}

.pachinko-front,
.pachinko-mood,
.pachinko-inside {
  background: #fff0d1;
}

.pachinko-mood .image-slot,
.memo-card .image-slot,
.event-strip .image-slot {
  background:
    linear-gradient(180deg, rgba(255, 247, 231, 0.3) 0%, rgba(240, 228, 206, 0.54) 100%);
  border-color: rgba(16, 29, 43, 0.34);
}

.pachinko-mood .image-slot img,
.memo-card .image-slot img {
  height: 118px;
  max-height: 118px;
}

.pachinko-stats,
.fight-result,
.impact-list,
.lottery-stats {
  margin: 0;
}

.pachinko-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.pachinko-stats div,
.fight-result div,
.impact-list div,
.lottery-stats div {
  padding: 6px;
  background: #f1e5ce;
  border: 2px solid rgba(16, 29, 43, 0.55);
}

.pachinko-stats dt,
.fight-result dt,
.impact-list dt,
.lottery-stats dt {
  font-size: 11px;
  font-weight: 900;
}

.pachinko-stats dd,
.fight-result dd,
.impact-list dd,
.lottery-stats dd {
  margin: 0;
  color: var(--red);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
}

.inside-checklist {
  display: grid;
  gap: 3px;
  padding-left: 18px;
}

.memo-card {
  background: #f7e7dc;
}

.event-gallery {
  grid-area: gallery;
  align-self: start;
  padding: 10px;
  background: #fffaf0;
  border: 3px solid var(--ink);
}

.event-gallery h3 {
  margin-bottom: 8px;
  font-size: 15px;
}

.event-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.event-strip .image-slot {
  min-height: 130px;
}

.event-strip .image-slot img {
  height: 118px;
  max-height: 118px;
}

.side-stack {
  display: grid;
  gap: 16px;
}

.status-card,
.omen-card,
.log-card {
  background: var(--cream);
}

.meter-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
}

.meter-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.meter-row dt {
  font-weight: 900;
}

.meter-row dd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.meter-row b {
  width: 30px;
  flex: 0 0 auto;
  font-family: Consolas, "Courier New", monospace;
  text-align: right;
}

.meter {
  position: relative;
  display: block;
  width: 100%;
  min-width: 78px;
  height: 16px;
  background: #e8dcc6;
  border: 2px solid var(--ink);
}

.meter i {
  display: block;
  height: 100%;
  background: var(--blue);
}

.meter.danger i {
  background: var(--red);
}

.meter.anger i {
  background: var(--deep-red);
}

.meter.gold i {
  background: var(--gold);
}

.meter.calm i {
  background: var(--green);
}

.azuki-count {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 2px 8px;
  color: var(--cream);
  background: var(--clay);
  border: 2px solid var(--ink);
  font-weight: 900;
}

.profile-box,
.status-note {
  margin: 0 14px 14px;
  padding: 10px;
  background: #f8efdb;
  border: 2px dashed rgba(16, 29, 43, 0.5);
}

.profile-box {
  background: #fff0c7;
}

.anger-note {
  background: #f6d8d1;
}

.profile-box strong,
.status-note strong {
  display: block;
  margin-bottom: 4px;
}

.profile-box p,
.status-note p {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 800;
}

.pressure-chip,
.azuki-count.plus,
.azuki-count.minus {
  display: inline-block;
  min-width: 0;
  padding: 3px 7px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
  line-height: 1.2;
}

.azuki-count.plus {
  color: #15391f;
  background: #dff0d2;
}

.azuki-count.minus {
  color: #7d241b;
  background: #f4d5cd;
}

.omen-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px;
}

.omen-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  background: #f1e5ce;
  border: 2px solid rgba(16, 29, 43, 0.55);
}

.omen-list dt,
.omen-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

.omen-list dt {
  font-weight: 900;
}

.omen-list dd {
  color: var(--red);
  font-weight: 900;
  text-align: right;
}

.omen-card p {
  margin: 0 14px 14px;
  padding: 8px;
  color: var(--ink-soft);
  background: #f8efdb;
  border: 2px dashed rgba(16, 29, 43, 0.5);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.6;
}

.action-log {
  display: grid;
  gap: 8px;
  max-height: 330px;
  margin: 0;
  padding: 13px 14px 14px;
  overflow: auto;
  list-style: none;
  counter-reset: logs;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), transparent),
    #fffaf0;
}

.action-log li {
  position: relative;
  min-height: 31px;
  padding: 5px 8px 5px 42px;
  background: #f1e5ce;
  border: 2px solid rgba(16, 29, 43, 0.45);
  font-size: 13px;
  font-weight: 850;
}

.action-log li::before {
  counter-increment: logs;
  content: counter(logs, decimal-leading-zero);
  position: absolute;
  left: 7px;
  top: 5px;
  color: var(--cream);
  background: var(--navy);
  padding: 1px 4px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  font-weight: 900;
}

.action-log time {
  display: inline-block;
  margin-right: 7px;
  color: var(--red);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
}

.intervention-card,
.viewer-voice-card,
.azuki-chance-card,
.relation-card,
.wife-event-card {
  margin-top: 16px;
  background: var(--cream);
}

.voice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  grid-template-areas:
    "intro buttons"
    "result buttons"
    "effects effects"
    "danger novote";
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.voice-intro {
  grid-area: intro;
  min-width: 0;
}

.voice-intro p,
.danger-voice-card p,
.no-vote-card p,
.azuki-chance-copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vote-button-grid {
  grid-area: buttons;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.vote-button {
  min-height: 58px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff8e7;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.16);
  cursor: pointer;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.vote-button:hover,
.vote-button:focus-visible {
  filter: brightness(1.04);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(16, 29, 43, 0.2);
}

.vote-button:active,
.vote-button.is-selected {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(16, 29, 43, 0.18);
}

.vote-button.is-selected {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.vote-button.push {
  background: #dff0d2;
}

.vote-button.calm {
  background: #d9eaf4;
}

.vote-button.reality {
  background: #fff0c7;
}

.vote-button.taunt {
  color: var(--cream);
  background: #8f2d24;
}

.vote-button.spoil {
  background: #f0dfcb;
}

.vote-button.azuki {
  background: #ffe3a2;
  color: var(--ink);
}

.vote-effect-grid {
  grid-area: effects;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 10px;
  min-width: 0;
}

.vote-effect-card,
.danger-voice-card,
.dummy-result-card,
.no-vote-card,
.azuki-chance-copy,
.azuki-choice-list div {
  min-width: 0;
  height: auto;
  overflow: visible;
  padding: 10px;
  background: #fffaf0;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.12);
}

.vote-effect-card.is-danger,
.danger-voice-card {
  background: #f7dbd2;
}

.vote-effect-card h3,
.danger-voice-card h3,
.dummy-result-card h3,
.no-vote-card h3 {
  margin: 0 0 7px;
  padding: 3px 7px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.vote-effect-card ul,
.taunt-sample-list,
.change-list,
.no-vote-card ul {
  margin: 0;
  padding-left: 18px;
}

.vote-effect-card li,
.taunt-sample-list li,
.change-list li,
.no-vote-card li {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vote-effect-card li + li,
.taunt-sample-list li + li,
.change-list li + li,
.no-vote-card li + li {
  margin-top: 3px;
}

.danger-voice-card {
  grid-area: danger;
}

.mini-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}

.mini-title h3 {
  margin: 0;
}

.mini-title span {
  display: inline-block;
  padding: 2px 6px;
  color: var(--cream);
  background: var(--red);
  border: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.taunt-sample-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding-left: 0;
  list-style: none;
}

.taunt-sample-list li {
  padding: 6px 8px;
  background: rgba(255, 250, 240, 0.8);
  border: 2px dashed rgba(16, 29, 43, 0.5);
}

.dummy-result-card {
  grid-area: result;
  background: #fff0c7;
}

.dummy-result-card.is-updated {
  animation: result-pop 520ms ease;
}

@keyframes result-pop {
  0% {
    filter: brightness(1.18);
    transform: translateY(-2px);
  }

  100% {
    filter: brightness(1);
    transform: translateY(0);
  }
}

.result-lines {
  display: grid;
  gap: 7px;
  margin: 0 0 8px;
}

.result-lines div {
  min-width: 0;
  padding: 7px;
  background: #f1e5ce;
  border: 2px solid rgba(16, 29, 43, 0.55);
}

.result-lines dt,
.result-lines dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}

.result-lines dt {
  font-size: 11px;
  font-weight: 900;
}

.result-lines dd {
  color: var(--red);
  font-weight: 900;
}

.change-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding-left: 0;
  list-style: none;
}

.change-list li {
  padding: 6px;
  background: #f7dbd2;
  border: 2px solid rgba(16, 29, 43, 0.45);
  color: var(--red);
  font-weight: 900;
}

.action-log li.is-new {
  background: #fff0c7;
  border-color: var(--red);
}

.action-log li.is-major {
  color: var(--cream);
  background: var(--red);
  border-color: var(--ink);
}

.action-log li.is-major time,
.action-log li.is-major::before {
  color: var(--ink);
  background: #fff0c7;
}

.no-vote-card {
  grid-area: novote;
  background: #f8efdb;
}

.no-vote-card p {
  margin-bottom: 8px;
}

.azuki-chance-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.azuki-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.azuki-choice-list dt,
.azuki-choice-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}

.azuki-choice-list dt {
  color: var(--navy);
  font-weight: 1000;
}

.azuki-choice-list dd {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
}

.azuki-choice-list small {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 6px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.azuki-choice-list .support,
.azuki-choice-list .repay {
  background: #e6f0dd;
}

.azuki-choice-list .rest {
  background: #d9eaf4;
}

.azuki-choice-list .danger {
  background: #f7dbd2;
}

.intervention-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px 330px;
  grid-template-areas:
    "copy risk lottery"
    "copy buttons lottery"
    "accepted accepted lottery";
  gap: 14px;
  align-items: stretch;
  padding: 14px;
}

.intervention-copy {
  grid-area: copy;
}

.event-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 10px;
  padding: 3px 8px;
  color: var(--cream);
  background: var(--red);
  border: 2px solid var(--ink);
  font-weight: 900;
}

.intervention-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 160px));
  gap: 8px;
  margin-bottom: 10px;
}

.intervention-images .image-slot {
  min-height: 132px;
}

.intervention-images .image-slot img {
  height: 120px;
  max-height: 120px;
}

.claim,
.judge {
  margin: 0 0 10px;
  padding: 10px;
  border: 2px solid var(--ink);
  font-weight: 800;
}

.claim {
  background: #fff0c7;
}

.judge {
  margin-bottom: 0;
  background: #f7dbd2;
}

.risk-box {
  grid-area: risk;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 128px;
  padding: 12px;
  color: var(--cream);
  text-align: center;
  background: #3b2630;
  border: 3px solid var(--ink);
}

.risk-box span,
.risk-box small {
  font-weight: 900;
}

.risk-box strong {
  color: #ffd75d;
  font-size: 42px;
  line-height: 1;
}

.button-bank {
  grid-area: buttons;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.button-bank button,
.lottery-button {
  min-height: 46px;
  padding: 7px;
  color: var(--ink);
  background: #fff8e7;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.15);
  cursor: default;
  font-weight: 1000;
}

.button-bank button:first-child,
.lottery-button {
  color: var(--cream);
  background: var(--navy-2);
}

.button-bank button:nth-child(4) {
  background: #f0ca69;
}

.speech-lottery {
  grid-area: lottery;
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fffaf0;
  border: 3px solid var(--ink);
  box-shadow: inset 0 -6px 0 rgba(16, 29, 43, 0.05);
}

.lottery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lottery-head h3,
.accepted-word h3,
.fight-box h3 {
  margin: 0;
  font-size: 16px;
}

.lottery-head span {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: var(--cream);
  background: var(--red);
  border: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.quiet-state {
  margin: 0;
  padding: 7px 8px;
  color: var(--ink-soft);
  background: #eadcc0;
  border: 2px dashed rgba(16, 29, 43, 0.45);
  font-size: 13px;
  font-weight: 900;
}

.lottery-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.speech-lottery label {
  font-size: 13px;
  font-weight: 900;
}

.speech-lottery textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 9px;
  color: var(--ink);
  background: #f8edd6;
  border: 3px solid var(--ink);
  outline: none;
  font-weight: 800;
}

.accepted-word {
  grid-area: accepted;
  padding: 12px;
  background: #f8efdb;
  border: 3px solid var(--ink);
}

.accepted-word p {
  margin: 9px 0 0;
  font-weight: 850;
}

.mame-reaction {
  padding-top: 9px;
  border-top: 2px dashed rgba(16, 29, 43, 0.45);
  color: var(--ink-soft);
}

.relation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  padding: 14px;
}

.event-condition-board {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0 14px 14px;
}

.dev-note-board {
  margin-top: 16px;
  padding-top: 14px;
  background: var(--cream);
}

.sub-panel-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  background: #eadcc0;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.12);
}

.sub-panel-title h3 {
  margin: 0;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.35;
}

.sub-panel-title h2 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.35;
}

.sub-panel-title p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.6;
}

.condition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  min-width: 0;
}

.condition-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  height: auto;
  overflow: visible;
  padding: 10px;
  background: #fffaf0;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.13);
}

.condition-t-producer {
  background: #f7dbd2;
}

.condition-k-kamei {
  background: #f5e1d7;
}

.condition-y-yuu {
  background: #e6f0dd;
}

.condition-portrait {
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 128px;
  margin: 0;
  padding: 6px;
  background:
    linear-gradient(90deg, rgba(16, 29, 43, 0.035) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(0deg, rgba(16, 29, 43, 0.03) 1px, transparent 1px) 0 0 / 14px 14px,
    rgba(255, 247, 231, 0.55);
  border: 2px dashed rgba(16, 29, 43, 0.55);
}

.condition-portrait img {
  display: block;
  width: min(100%, 96px);
  height: auto;
  max-height: 118px;
  object-fit: contain;
  object-position: center bottom;
}

.condition-portrait figcaption {
  width: 100%;
  padding: 2px 5px;
  color: var(--cream);
  text-align: center;
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.condition-copy,
.condition-columns,
.condition-columns > div,
.condition-summary,
.condition-summary div {
  min-width: 0;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.condition-copy {
  display: grid;
  align-content: start;
  gap: 8px;
}

.condition-copy h3 {
  margin: 0;
  padding: 3px 7px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.condition-copy h4 {
  margin: 0 0 5px;
  color: var(--red);
  font-size: 12px;
  line-height: 1.35;
}

.condition-summary {
  margin: 0;
}

.condition-summary div {
  padding: 6px;
  background: #f1e5ce;
  border: 2px solid rgba(16, 29, 43, 0.55);
}

.condition-summary dt {
  font-size: 11px;
  font-weight: 900;
}

.condition-summary dd {
  margin: 0;
  color: var(--navy);
  font-weight: 900;
  line-height: 1.55;
}

.condition-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.condition-columns > div {
  padding: 7px;
  background: rgba(255, 250, 240, 0.78);
  border: 2px solid rgba(16, 29, 43, 0.42);
}

.condition-columns ul {
  margin: 0;
  padding-left: 17px;
}

.condition-columns li,
.rule-note {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.condition-columns li + li {
  margin-top: 3px;
}

.rule-note {
  margin: 0;
  padding: 7px 8px;
  background: rgba(255, 240, 199, 0.78);
  border: 2px dashed rgba(16, 29, 43, 0.5);
}

.person-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 10px;
  overflow: visible;
  background: #fffaf0;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(16, 29, 43, 0.13);
}

.person-slot {
  min-height: 128px;
  height: auto;
  overflow: visible;
}

.wife-person-slot {
  min-height: 150px;
  background: rgba(240, 223, 203, 0.72);
  border-style: solid;
}

.wife-person-slot img {
  max-height: 138px;
}

.t-producer-card {
  background: #f7dbd2;
}

.t-producer-main-slot {
  min-height: 142px;
  background:
    linear-gradient(90deg, rgba(16, 29, 43, 0.035) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(0deg, rgba(16, 29, 43, 0.03) 1px, transparent 1px) 0 0 / 16px 16px,
    rgba(255, 247, 231, 0.42);
  border-style: solid;
}

.t-producer-main-slot img {
  width: min(100%, 148px);
  height: auto;
  max-height: 150px;
  object-fit: contain;
  object-position: center bottom;
}

.person-copy h3 {
  display: block;
  margin-bottom: 5px;
  padding: 3px 7px;
  color: var(--cream);
  background: var(--navy);
  border: 2px solid var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.person-copy p {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.6;
}

.quote-line {
  padding: 6px 7px;
  background: rgba(255, 240, 199, 0.78);
  border: 2px dashed rgba(16, 29, 43, 0.48);
}

.impact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}

.relation-card,
.relation-grid,
.event-condition-board,
.condition-grid,
.condition-card,
.condition-copy,
.condition-portrait,
.condition-summary,
.condition-summary div,
.condition-columns,
.condition-columns > div,
.person-copy,
.asset-placeholder,
.impact-list,
.impact-list div,
.impact-list dt,
.impact-list dd {
  min-width: 0;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.relation-card .asset-slot {
  min-width: 0;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.relation-card .asset-placeholder {
  width: 100%;
}

.relation-card .asset-placeholder strong,
.relation-card .asset-placeholder span,
.relation-card .asset-placeholder small {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.relation-card .asset-placeholder small {
  word-break: break-all;
}

.relation-card .impact-list div {
  display: grid;
  align-content: start;
  gap: 2px;
}

.relation-card .impact-list dd {
  white-space: normal;
}

.stress-high {
  background: #f7dbd2;
}

.stress-mid {
  background: #f5e1d7;
}

.relax {
  background: #e6f0dd;
}

.wife-mini {
  background: #f0dfcb;
}

.wife-event-card {
  position: relative;
  isolation: isolate;
}

.wife-event-card::before,
.wife-event-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wife-event-card::before {
  z-index: 0;
  background: url("assets/backgrounds/bg_home_event.png") center / cover no-repeat;
  filter: var(--time-filter, none);
  opacity: 0.58;
}

.wife-event-card::after {
  z-index: 1;
  background: var(--time-overlay, transparent);
}

.wife-event-card > .panel-title,
.wife-event-card > .event-state,
.wife-event-card > .wife-grid {
  position: relative;
  z-index: 2;
}

.event-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 12px;
  color: var(--cream);
  background: rgba(20, 35, 52, 0.9);
  border-bottom: 3px solid var(--ink);
  font-weight: 900;
}

.event-state small {
  color: #d7c5a9;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
}

.wife-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 14px;
  padding: 14px;
}

.wife-slot {
  min-height: 190px;
  background:
    linear-gradient(45deg, rgba(116, 83, 61, 0.12) 25%, transparent 25% 50%, rgba(116, 83, 61, 0.12) 50% 75%, transparent 75%) 0 0 / 20px 20px,
    #eadbc5;
}

.actual-wife-slot {
  background:
    linear-gradient(90deg, rgba(116, 83, 61, 0.06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(0deg, rgba(116, 83, 61, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
    #eadbc5;
  border-style: solid;
}

.actual-wife-slot img {
  max-height: 220px;
}

.wife-copy,
.fight-box {
  padding: 12px;
  background: #fffaf0;
  border: 3px solid var(--ink);
}

.inline-mame {
  float: right;
  width: min(150px, 45%);
  min-height: 128px;
  margin: 0 0 8px 10px;
}

.inline-mame img {
  height: 116px;
}

.wife-copy p,
.fight-box p {
  margin-bottom: 8px;
  font-weight: 850;
  line-height: 1.6;
}

.wife-lines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-weight: 900;
  line-height: 1.55;
}

.fight-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.footer-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  color: var(--ink-soft);
  font-weight: 900;
}

.footer-panel strong {
  color: var(--red);
  font-size: 18px;
}

@media (max-width: 1140px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .side-stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .intervention-grid {
    grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-areas:
      "copy risk"
      "copy buttons"
      "accepted accepted"
      "lottery lottery";
  }

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

  .wife-grid {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .fight-box {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .relation-grid {
    grid-template-columns: 1fr;
  }

  .person-card {
    grid-template-columns: minmax(96px, 140px) minmax(0, 1fr);
    align-items: start;
  }

  .person-card .person-slot {
    min-height: auto;
    align-self: start;
  }
}

@media (max-width: 820px) {
  .aquarium-shell {
    width: min(100% - 18px, 1240px);
    padding-top: 9px;
  }

  .tank-card,
  .status-card,
  .log-card,
  .intervention-card,
  .relation-card,
  .wife-event-card,
  .footer-panel {
    overflow: visible;
  }

  .top-panel {
    grid-template-columns: 1fr;
  }

  .header-status {
    justify-content: stretch;
  }

  .day-chip,
  .time-chip {
    flex: 1 1 150px;
    min-width: 0;
  }

  .tank-scene {
    grid-template-columns: 1fr;
    grid-template-areas:
      "official"
      "live"
      "places"
      "gallery";
  }

  .official-frame {
    max-width: 360px;
    justify-self: center;
  }

  .live-character-panel {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .character-slot {
    min-height: 142px;
  }

  .character-slot img {
    height: 132px;
  }

  .location-board {
    grid-template-columns: 1fr;
  }

  .place-card {
    grid-template-columns: minmax(130px, 0.44fr) minmax(0, 1fr);
  }

  .multi-visual {
    grid-template-columns: 1fr;
  }

  .home-visual {
    min-height: 160px;
  }

  .multi-visual .image-slot img {
    height: 96px;
  }

  .solo-character-frame {
    min-height: 132px;
  }

  .solo-character-frame img {
    height: 126px;
  }

  .scene-image-frame {
    min-height: 148px;
  }

  .scene-image-frame img {
    height: 148px;
  }

  .scene-visual {
    min-height: 138px;
  }

  .scene-bg {
    height: 100%;
  }

  .scene-character {
    width: 50%;
  }

  .scene-character-large {
    width: 62%;
  }

  .side-stack,
  .intervention-grid,
  .relation-grid,
  .wife-grid {
    grid-template-columns: 1fr;
  }

  .wife-grid {
    gap: 10px;
    padding: 10px;
  }

  .event-state {
    padding: 7px 10px;
  }

  .wife-copy,
  .fight-box,
  .person-copy,
  .profile-box,
  .status-note,
  .accepted-word,
  .claim,
  .judge {
    line-height: 1.6;
  }

  .wife-slot,
  .actual-wife-slot,
  .person-slot {
    min-height: auto;
  }

  .actual-wife-slot img,
  .wife-person-slot img {
    max-height: 170px;
  }

  .action-log {
    max-height: none;
    overflow: visible;
  }

  .intervention-grid {
    grid-template-areas:
      "copy"
      "risk"
      "buttons"
      "lottery"
      "accepted";
  }

  .button-bank {
    grid-template-columns: 1fr 1fr;
  }

  .button-bank button:first-child {
    grid-column: 1 / -1;
  }

  .person-card {
    grid-template-columns: minmax(96px, 128px) minmax(0, 1fr);
    align-items: stretch;
  }

  .person-slot {
    min-height: auto;
  }

  .fight-box {
    grid-column: auto;
  }

  .footer-panel {
    display: grid;
  }
}

@media (max-width: 560px) {
  .live-character-panel,
  .place-card,
  .person-card {
    grid-template-columns: 1fr;
  }

  .relation-card {
    overflow: visible;
  }

  .relation-card .panel-title {
    padding: 8px 10px;
  }

  .relation-card .panel-title h2 {
    font-size: 16px;
    line-height: 1.35;
  }

  .person-card,
  .wife-copy,
  .fight-box {
    padding: 9px;
  }

  .relation-grid {
    gap: 10px;
    padding: 8px;
  }

  .relation-card .person-card {
    gap: 8px;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .relation-card .person-slot {
    min-height: auto;
  }

  .relation-card .asset-slot {
    padding: 6px;
  }

  .relation-card .asset-placeholder {
    gap: 4px;
  }

  .person-copy h3 {
    font-size: 14px;
  }

  .person-copy p {
    margin-bottom: 7px;
    line-height: 1.65;
  }

  .impact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .relation-card .impact-list div {
    padding: 6px;
  }

  .wife-lines {
    padding-left: 16px;
  }

  .asset-slot figcaption,
  .image-slot figcaption,
  .solo-character-frame figcaption,
  .scene-image-frame figcaption {
    white-space: normal;
    line-height: 1.35;
  }

  .solo-character-frame figcaption,
  .scene-image-frame figcaption {
    position: static;
    max-width: calc(100% - 8px);
    margin: 4px;
  }

  .image-slot img {
    height: 145px;
    max-height: 145px;
  }

  .multi-visual {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .multi-visual .image-slot img {
    height: 82px;
  }

  .scene-visual {
    min-height: 136px;
  }

  .scene-character {
    right: 4px;
    bottom: 5px;
    width: 54%;
  }

  .solo-character-frame {
    min-height: 124px;
  }

  .solo-character-frame img {
    height: 118px;
  }

  .scene-image-frame {
    min-height: 136px;
  }

  .scene-image-frame img {
    height: 136px;
  }

  .scene-character-large {
    width: 66%;
  }

  .scene-caption {
    left: 5px;
    bottom: 5px;
    max-width: 52%;
    font-size: 10px;
  }

  .intervention-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 24px;
  }

  .project-label {
    font-size: 11px;
  }

  .official-frame {
    max-width: 100%;
  }

  .pachinko-stats,
  .lottery-stats,
  .fight-result,
  .impact-list {
    grid-template-columns: 1fr;
  }

  .relation-card .impact-list {
    grid-template-columns: 1fr;
  }

  .meter-row {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 7px;
  }

  .person-slot {
    min-height: 112px;
  }

  .relation-card .person-slot {
    min-height: auto;
  }

  .meter-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .meter-row dd {
    width: 100%;
  }

  .meter {
    min-width: 0;
  }

  .lottery-head {
    display: grid;
    align-items: start;
  }

  .inline-mame {
    float: none;
    width: 100%;
    margin: 0 0 8px;
  }

  .inline-mame img {
    height: auto;
    max-height: 120px;
  }

  .meter-row dt,
  .meter-row dd,
  .action-log li,
  .claim,
  .judge,
  .accepted-word p,
  .wife-copy p,
  .fight-box p,
  .person-copy p,
  .place-card p,
  .inside-checklist {
    font-size: 12px;
    line-height: 1.65;
  }

  .wife-lines,
  .fight-result dt,
  .fight-result dd,
  .impact-list dt,
  .impact-list dd,
  .pachinko-stats dt,
  .pachinko-stats dd,
  .lottery-stats dt,
  .lottery-stats dd {
    line-height: 1.55;
  }

  .button-bank button,
  .lottery-button {
    min-height: 50px;
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .aquarium-shell {
    width: min(100% - 12px, 1240px);
  }

  .game-hud {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "current"
      "voice"
      "summary"
      "omen"
      "log"
      "azuki";
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .current-mame-card,
  .mini-status-card,
  .current-mame-layout,
  .current-mame-copy,
  .current-scene-frame,
  .mini-status-grid,
  .state-meta {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .current-mame-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .current-scene-frame {
    min-height: clamp(210px, 62vw, 285px);
  }

  .current-mame-img {
    right: 2%;
    bottom: 4%;
    max-width: min(58%, 184px);
    max-height: 80%;
  }

  .current-mame-copy {
    padding: 10px;
  }

  .mini-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .relation-card,
  .relation-card *,
  .wife-event-card,
  .wife-event-card * {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  .relation-card.pixel-frame,
  .wife-event-card.pixel-frame,
  .viewer-voice-card,
  .azuki-chance-card,
  .voice-layout,
  .vote-button-grid,
  .vote-effect-grid,
  .vote-effect-card,
  .danger-voice-card,
  .dummy-result-card,
  .no-vote-card,
  .azuki-chance-grid,
  .azuki-choice-list,
  .azuki-choice-list div,
  .relation-grid,
  .event-condition-board,
  .condition-grid,
  .condition-card,
  .condition-copy,
  .condition-portrait,
  .condition-summary,
  .condition-summary div,
  .condition-columns,
  .condition-columns > div,
  .persons-grid,
  .person-card,
  .person-copy,
  .wife-grid,
  .wife-copy,
  .fight-box,
  .impact-list,
  .impact-list div,
  .asset-slot,
  .person-slot,
  .asset-placeholder {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    overflow: visible;
  }

  .relation-grid,
  .voice-layout,
  .vote-button-grid,
  .vote-effect-grid,
  .azuki-chance-grid,
  .azuki-choice-list,
  .condition-grid,
  .condition-columns,
  .persons-grid,
  .wife-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .relation-grid {
    padding: 8px;
  }

  .person-card,
  .viewer-voice-card,
  .azuki-chance-card,
  .vote-effect-card,
  .danger-voice-card,
  .dummy-result-card,
  .no-vote-card,
  .condition-card,
  .wife-event-card,
  .fight-box {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .person-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
  }

  .condition-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
  }

  .event-condition-board {
    padding: 0 8px 8px;
  }

  .condition-portrait {
    min-height: auto;
  }

  .condition-portrait img {
    width: min(100%, 132px);
    max-height: 142px;
  }

  .person-slot,
  .asset-slot {
    min-height: auto;
  }

  .asset-slot img,
  .wife-person-slot img,
  .actual-wife-slot img {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
  }

  .impact-list,
  .impact-list div {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .impact-list div + div {
    margin-top: 6px;
  }

  .person-copy,
  .voice-intro,
  .voice-intro p,
  .vote-button,
  .vote-effect-card h3,
  .vote-effect-card li,
  .danger-voice-card h3,
  .danger-voice-card p,
  .taunt-sample-list li,
  .dummy-result-card h3,
  .result-lines dt,
  .result-lines dd,
  .change-list li,
  .no-vote-card h3,
  .no-vote-card p,
  .no-vote-card li,
  .azuki-chance-copy p,
  .azuki-choice-list dt,
  .azuki-choice-list dd,
  .azuki-choice-list small,
  .condition-copy,
  .condition-copy h3,
  .condition-copy h4,
  .condition-summary dt,
  .condition-summary dd,
  .condition-columns li,
  .rule-note,
  .wife-copy,
  .fight-box,
  .person-card p,
  .wife-copy p,
  .fight-box p,
  .person-card li,
  .wife-copy li,
  .fight-box li,
  .person-card dd,
  .person-card dt,
  .fight-box dd,
  .fight-box dt,
  .person-card figcaption,
  .wife-event-card figcaption,
  .person-card small,
  .wife-event-card small,
  .asset-placeholder strong,
  .asset-placeholder span,
  .asset-placeholder small,
  .wife-lines li {
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-break: anywhere;
    line-height: 1.6;
  }

  .asset-placeholder small {
    display: block;
    word-break: break-all;
  }

  .voice-layout {
    grid-template-areas:
      "intro"
      "buttons"
      "result"
      "effects"
      "danger"
      "novote";
    padding: 10px;
  }

  .vote-button {
    min-height: 54px;
  }

  .change-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .azuki-chance-grid {
    padding: 10px;
  }

  .person-copy h3,
  .condition-copy h3,
  .condition-copy h4,
  .fight-box h3,
  .relation-card .panel-title h2,
  .wife-event-card .panel-title h2 {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }

  .wife-lines {
    min-width: 0;
    max-width: 100%;
    padding-left: 16px;
    overflow: visible;
  }

  .inline-mame {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px;
  }
}

@media (max-width: 900px) {
  .t-producer-card,
  .event-condition-board,
  .omen-card,
  .omen-card *,
  .condition-grid,
  .condition-card,
  .condition-copy,
  .condition-portrait,
  .condition-summary,
  .condition-summary div,
  .condition-columns,
  .condition-columns > div,
  .condition-card *,
  .t-producer-card * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

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

  .condition-card {
    height: auto;
    max-height: none;
    overflow: visible;
  }

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

  .condition-copy,
  .condition-copy h3,
  .condition-copy h4,
  .condition-summary dt,
  .condition-summary dd,
  .condition-columns li,
  .rule-note,
  .sub-panel-title h3,
  .sub-panel-title p {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-break: anywhere;
    overflow: visible;
  }

  .t-producer-main-slot img {
    width: min(100%, 136px);
    height: auto;
    max-height: 138px;
  }

  .quote-line {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
  }
}

@media (max-width: 820px) {
  .aquarium-shell {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .quick-jump-nav {
    position: fixed;
    left: 50%;
    bottom: 8px;
    z-index: 40;
    display: grid;
    grid-template-columns: 1.25fr 0.82fr 0.82fr;
    gap: 6px;
    width: min(calc(100% - 18px), 430px);
    padding: 7px;
    background: rgba(16, 29, 43, 0.94);
    border: 3px solid var(--ink);
    box-shadow: 0 0 0 2px rgba(255, 247, 231, 0.45), 4px 4px 0 rgba(16, 29, 43, 0.25);
    transform: translateX(-50%);
  }

  .quick-jump-nav a {
    display: grid;
    min-height: 42px;
    place-items: center;
    padding: 6px 7px;
    color: var(--ink);
    text-decoration: none;
    background: #fff0c7;
    border: 2px solid var(--ink);
    font-size: 12px;
    font-weight: 1000;
    line-height: 1.2;
  }

.quick-jump-nav a:first-child {
    color: var(--cream);
    background: var(--red);
  }

  .voice-sheet-close {
    display: none;
  }

  .hud-viewer-voice:target {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    width: min(calc(100% - 16px), 430px);
    max-height: min(74vh, 620px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-50%);
    box-shadow: 0 0 0 999px rgba(16, 29, 43, 0.38), 5px 5px 0 rgba(16, 29, 43, 0.32);
  }

  .hud-viewer-voice:target .voice-sheet-close {
    display: inline-grid;
    min-height: 28px;
    place-items: center;
    padding: 4px 8px;
    color: var(--ink);
    text-decoration: none;
    background: #fff0c7;
    border: 2px solid var(--ink);
    font-size: 11px;
    font-weight: 1000;
  }
}

@media (max-width: 560px) {
  .aquarium-shell {
    width: min(100% - 10px, 1240px);
    padding-top: 7px;
  }

  .top-panel {
    gap: 5px;
    padding: 6px;
  }

  .project-label {
    min-height: 16px;
    margin-bottom: 2px;
    padding: 1px 6px;
    font-size: 9px;
  }

  h1 {
    font-size: clamp(18px, 6.2vw, 23px);
    line-height: 1.06;
  }

  .project-subtitle {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.25;
  }

  .header-status {
    gap: 6px;
  }

  .day-chip,
  .time-chip {
    padding: 4px 6px;
    border-width: 2px;
    box-shadow: none;
  }

  .day-chip span,
  .time-chip span {
    display: none;
  }

  .day-chip small,
  .time-chip small {
    font-size: 10px;
    line-height: 1.1;
  }

  .day-chip strong,
  .time-chip strong {
    margin: 0;
    font-size: 17px;
  }

  .game-hud {
    gap: 8px;
    margin-top: 9px;
  }

  .panel-title {
    min-height: 36px;
    padding: 7px 9px;
  }

  .panel-title.compact {
    min-height: 34px;
    padding: 6px 9px;
  }

  .panel-title h2 {
    font-size: 16px;
  }

  .current-mame-layout {
    gap: 8px;
    padding: 8px;
  }

  .current-scene-frame {
    min-height: clamp(152px, 46vw, 196px);
  }

  .current-scene-frame.has-stage-result {
    min-height: clamp(238px, 72vw, 288px);
  }

  .current-mame-img {
    max-width: min(56%, 160px);
    max-height: 78%;
  }

  .actor-npc {
    max-width: min(34%, 128px);
    max-height: 70%;
  }

  .pos-mame-seat-left {
    left: 14%;
  }

  .pos-mame-escape-left {
    left: 6%;
    max-width: min(50%, 145px);
  }

  .pos-futon-left {
    left: 3%;
    max-width: min(48%, 142px);
  }

  .pos-kotatsu-center {
    left: 31%;
  }

  .pos-jko-seat-right {
    right: 5%;
  }

  .pos-jko-pressure-right {
    right: 2%;
    max-width: min(37%, 136px);
  }

  .mame-effect {
    max-width: 42%;
    padding: 4px 6px;
    font-size: 10px;
  }

  .mame-effect.badge-env-corner {
    right: 6px;
    top: 6px;
  }

  .mame-effect.badge-near-mame-left {
    left: 16%;
    top: 12%;
  }

  .mame-effect.badge-near-center {
    left: 32%;
    top: 10%;
  }

  .mame-effect.badge-near-futon {
    left: 5%;
    top: 13%;
  }

  .mame-effect.badge-near-entrance {
    left: 17%;
    top: 13%;
  }

  .stage-azuki-hud {
    left: 6px;
    top: 6px;
    gap: 3px;
    padding: 4px;
  }

  .stage-azuki-hud div {
    padding: 2px 4px;
  }

  .stage-azuki-hud dt {
    font-size: 8px;
  }

  .stage-azuki-hud dd,
  .azuki-pop {
    font-size: 10px;
  }

  .mame-message-bar {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 7px 8px;
  }

  .mame-message-bar span {
    width: fit-content;
    font-size: 10px;
  }

  .mame-message-bar b {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .event-cutin {
    width: min(calc(100% - 18px), 280px);
    padding: 8px 9px;
  }

  .event-cutin b {
    font-size: 13px;
  }

  .stage-result-overlay {
    inset: 5px;
    gap: 4px;
    padding: 7px;
    border-width: 3px;
    box-shadow:
      inset 0 0 0 1px var(--ink),
      3px 3px 0 rgba(16, 29, 43, 0.3);
  }

  .stage-result-kicker {
    padding: 1px 5px;
    font-size: 8.5px;
  }

  .stage-result-title {
    font-size: clamp(16px, 5.3vw, 21px);
    line-height: 1.04;
  }

  .stage-result-verdict {
    padding: 2px 7px;
    font-size: 10.5px;
  }

  .stage-result-judges {
    gap: 3px;
  }

  .stage-result-mini {
    gap: 3px;
  }

  .stage-result-judges div,
  .stage-result-mini div {
    padding: 3px 4px;
    border-width: 1px;
  }

  .stage-result-judges dt,
  .stage-result-mini dt {
    font-size: 8px;
  }

  .stage-result-judges dd {
    display: -webkit-box;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.18;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .stage-result-mini dd {
    font-size: 8.8px;
  }

  .current-scene-frame figcaption {
    left: 6px;
    bottom: 6px;
    padding: 4px 7px;
    font-size: 11px;
  }

  .current-mame-copy {
    padding: 8px;
  }

  .current-mame-copy h3 {
    margin: 7px 0 6px;
    font-size: 15px;
  }

  .event-tag,
  .current-mame-copy h3 {
    line-height: 1.25;
  }

  .current-mame-copy p,
  .hud-omen-card p,
  .voice-intro p {
    font-size: 12px;
    line-height: 1.5;
  }

  .current-mame-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .state-meta {
    gap: 5px;
    margin-top: 8px;
  }

  .state-meta div:not(.is-priority) {
    display: none;
  }

  .state-meta div,
  .mini-status-grid div {
    padding: 6px 7px;
  }

  .state-meta dt,
  .mini-status-grid dt {
    font-size: 11px;
  }

  .state-meta dd,
  .mini-status-grid dd {
    font-size: 13px;
  }

  .mini-status-grid {
    gap: 6px;
    padding: 8px;
  }

  .mini-status-details,
  .log-more {
    padding: 0 8px 8px;
  }

  .mini-status-details summary,
  .log-more summary {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .omen-list {
    gap: 6px;
    padding: 8px;
  }

  .omen-list div {
    padding: 6px 7px;
  }

  .action-log {
    gap: 6px;
    padding: 8px;
  }

  .action-log li {
    min-height: 28px;
    padding: 5px 7px 5px 38px;
    font-size: 12px;
    line-height: 1.5;
  }

  .action-log li::before {
    left: 6px;
    top: 6px;
  }

  .voice-layout {
    gap: 8px;
    padding: 8px;
  }

  .vote-button-grid {
    gap: 8px;
  }

  .vote-button {
    min-height: 56px;
    padding: 8px 7px;
    font-size: 14px;
  }

  .dummy-result-card,
  .vote-effect-card,
  .danger-voice-card,
  .no-vote-card {
    padding: 8px;
  }
}

@media (max-width: 820px) {
  .aquarium-shell {
    padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px));
  }

  .hud-viewer-voice .voice-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "buttons"
      "result";
  }

  .hud-viewer-voice .voice-intro p,
  .hud-viewer-voice .vote-effect-grid,
  .hud-viewer-voice .danger-voice-card,
  .hud-viewer-voice .no-vote-card {
    display: none;
  }

  .daily-brief-card,
  .daily-brief-card * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 560px) {
  .top-panel {
    gap: 5px;
    padding: 6px;
  }

  .project-label {
    display: none;
  }

  h1 {
    font-size: clamp(18px, 6vw, 23px);
    line-height: 1.08;
  }

  .project-subtitle {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
  }

  .header-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .day-chip,
  .time-chip {
    padding: 4px 5px;
    border-width: 2px;
    box-shadow: none;
  }

  .day-chip span,
  .time-chip span {
    display: none;
  }

  .day-chip small,
  .time-chip small {
    font-size: 9px;
    line-height: 1.1;
  }

  .day-chip strong,
  .time-chip strong {
    margin: 0 0 1px;
    font-size: 16px;
  }

  .current-mame-copy p {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .daily-brief-card {
    margin-top: 7px;
    padding: 6px;
  }

  .daily-brief-body {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
  }

  .brief-actor {
    width: 56px;
    padding: 3px;
  }

  .brief-actor img {
    max-height: 58px;
  }

  .daily-brief-head {
    gap: 4px;
    margin-bottom: 4px;
  }

  .daily-brief-head span {
    font-size: 12px;
  }

  .daily-brief-head b {
    padding: 2px 5px;
    font-size: 10px;
  }

  .daily-brief-card p {
    font-size: 11px;
    line-height: 1.45;
  }

  .daily-brief-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 5px;
  }

  .daily-brief-card dl div {
    padding: 4px 5px;
  }

  .daily-brief-card dd {
    font-size: 11px;
  }

  .daily-brief-card.is-daily-result {
    margin-top: 8px;
    padding: 8px;
    border-width: 3px;
    box-shadow:
      0 0 0 2px #f1c15d,
      3px 3px 0 rgba(16, 29, 43, 0.28);
  }

  .daily-brief-card.is-daily-result::before {
    margin-bottom: 4px;
    padding: 2px 5px;
    font-size: 9px;
  }

  .daily-brief-card.is-daily-result .daily-brief-head {
    gap: 5px;
    margin-bottom: 6px;
  }

  .daily-brief-card.is-daily-result .daily-brief-head span {
    font-size: 14px;
  }

  .daily-brief-card.is-daily-result .daily-brief-head b {
    font-size: 10px;
  }

  .daily-brief-card.is-daily-result .daily-brief-body {
    grid-template-columns: minmax(48px, 64px) minmax(0, 1fr);
    gap: 7px;
  }

  .daily-brief-card.is-daily-result .brief-actor {
    width: 62px;
    padding: 3px;
  }

  .daily-brief-card.is-daily-result .brief-actor img {
    max-height: 68px;
  }

  .daily-brief-card.is-daily-result p {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .daily-brief-card.is-daily-result dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .daily-brief-card.is-daily-result dl div {
    padding: 4px 5px;
  }

  .daily-brief-card.is-daily-result dl div.is-major {
    grid-column: 1 / -1;
  }

  .daily-brief-card.is-daily-result dt {
    font-size: 9.5px;
  }

  .daily-brief-card.is-daily-result dd {
    font-size: 10.5px;
  }

  .daily-brief-card.is-daily-result dl div.is-major:first-child dd {
    font-size: 13.5px;
  }
}

/* Final mobile fit pass: keep the tank, HUD, result, and fixed bar from fighting each other. */
@media (max-width: 560px) {
  .top-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 5px 6px;
  }

  h1 {
    font-size: clamp(17px, 5.4vw, 21px);
    line-height: 1.04;
  }

  .project-subtitle {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.15;
  }

  .header-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .day-chip,
  .time-chip {
    min-height: 28px;
    padding: 3px 5px;
  }

  .day-chip strong,
  .time-chip strong {
    font-size: 14px;
    line-height: 1;
  }

  .day-chip small,
  .time-chip small {
    font-size: 8.5px;
  }

  .panel-title {
    min-height: 30px;
    padding: 5px 7px;
  }

  .panel-title h2 {
    font-size: 14px;
  }

  .current-mame-layout {
    padding: 6px;
  }

  .current-scene-frame {
    min-height: clamp(146px, 43vw, 184px);
  }

  .current-scene-frame.has-stage-result {
    min-height: min(62vh, 302px);
  }

  .stage-azuki-hud {
    left: auto;
    right: 6px;
    top: 6px;
    grid-template-columns: repeat(3, minmax(0, auto));
    max-width: min(78%, 258px);
    padding: 3px;
    gap: 2px;
    opacity: 0.96;
  }

  .stage-azuki-hud div {
    padding: 2px 4px;
  }

  .stage-azuki-hud dt {
    font-size: 7.5px;
  }

  .stage-azuki-hud dd {
    font-size: 9.5px;
  }

  .azuki-pop {
    top: auto;
    bottom: 32px;
    max-width: min(72%, 230px);
    padding: 4px 7px;
    font-size: 10px;
  }

  .mame-effect {
    max-width: min(38%, 132px);
    padding: 3px 5px;
    font-size: 9px;
  }

  .mame-effect.badge-env-corner {
    left: 6px;
    right: auto;
    top: 6px;
  }

  .mame-effect.badge-near-mame-left {
    left: 9%;
    top: 22%;
  }

  .mame-effect.badge-near-center {
    left: 27%;
    top: 21%;
  }

  .mame-effect.badge-near-futon,
  .mame-effect.badge-near-entrance {
    left: 7%;
    top: 24%;
  }

  .current-scene-frame.has-stage-result .stage-azuki-hud,
  .current-scene-frame.has-stage-result .mame-effect,
  .current-scene-frame.has-stage-result .event-cutin,
  .current-scene-frame.has-stage-result figcaption {
    display: none;
  }

  .current-scene-frame.has-stage-result .current-mame-img {
    max-width: min(38%, 116px);
    max-height: 58%;
    opacity: 0.72;
  }

  .stage-result-overlay {
    inset: 4px;
    align-content: center;
    gap: 3px;
    padding: 6px;
    border-width: 3px;
  }

  .stage-result-kicker {
    padding: 1px 5px;
    font-size: 8px;
  }

  .stage-result-title {
    font-size: clamp(18px, 6vw, 25px);
    line-height: 1.02;
  }

  .stage-result-verdict {
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.15;
  }

  .stage-result-judges {
    gap: 3px;
  }

  .stage-result-judges div,
  .stage-result-mini div {
    padding: 2px 4px;
  }

  .stage-result-judges dt,
  .stage-result-mini dt {
    font-size: 7.8px;
    line-height: 1.05;
  }

  .stage-result-judges dd {
    display: -webkit-box;
    overflow: hidden;
    font-size: 8.6px;
    line-height: 1.12;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .stage-result-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }

  .stage-result-mini dd {
    font-size: 8.4px;
    line-height: 1.08;
  }

  .mame-message-bar {
    padding: 5px 7px;
  }

  .mame-message-bar span {
    padding: 1px 5px;
    font-size: 9px;
  }

  .mame-message-bar b {
    font-size: 10.5px;
    line-height: 1.18;
  }

  .current-mame-copy {
    padding: 6px;
  }

  .event-tag {
    padding: 3px 6px;
    font-size: 10px;
  }

  .current-mame-copy h3 {
    margin: 5px 0 4px;
    font-size: 13px;
  }

  .current-mame-copy p {
    font-size: 10.8px;
    line-height: 1.32;
    -webkit-line-clamp: 1;
  }

  .daily-brief-card:not(.is-daily-result) {
    padding: 5px;
  }

  .daily-brief-card:not(.is-daily-result) .brief-actor {
    display: none;
  }

  .daily-brief-card:not(.is-daily-result) .daily-brief-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .daily-brief-card:not(.is-daily-result) p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .daily-brief-card:not(.is-daily-result) dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .daily-brief-card:not(.is-daily-result) dl div {
    padding: 3px 4px;
  }

  .daily-brief-card:not(.is-daily-result) dt {
    font-size: 8px;
  }

  .daily-brief-card:not(.is-daily-result) dd {
    font-size: 9.5px;
  }

  .state-meta {
    margin-top: 6px;
  }

  .state-meta div:not(.is-priority),
  .state-meta .is-priority:nth-of-type(2) {
    display: none;
  }

  .hud-control-row {
    gap: 5px;
    margin-top: 6px;
  }

  .time-step-button {
    min-height: 32px;
    padding: 5px 6px;
    font-size: 11px;
  }
}