/* Pixel anime workday. Artwork is provided by the native image generator;
   this layer only frames it and lays out live, selectable HTML controls. */
:root {
  --px-night: #142236;
  --px-navy: #22354e;
  --px-frame: #3f5673;
  --px-paper: #fbf1dc;
  --px-paper-deep: #eadcc2;
  --px-ink: #25344c;
  --px-muted: #586477;
  --px-amber: #f7c56b;
  --px-amber-edge: #bd853a;
  --px-blue: #d6e7f0;
  --px-line: #a9987e;
  --px-green: #2c7353;
  --px-red: #a8433e;
  --bg: var(--px-night);
  --panel: var(--px-navy);
  --panel-2: #1b2b40;
  --line: var(--px-frame);
  --yellow: var(--px-amber);
  --gold: var(--px-amber);
}

html, body { background: var(--px-night); }
body { font-size: 15px; line-height: 1.5; animation: none; }
#app { max-width: 600px; background: var(--px-navy); border: 0; box-shadow: none; }
.screen.active, #scene, #btn-new, .ending-icon, .stat-fill.low { animation: none; }
#title-canvas, #scene, .pixel-work-scene { image-rendering: pixelated; }
button, input, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #2b80b9;
  outline-offset: 3px;
}
.btn, .btn-icon, .qbtn, .action-btn, .shop-buy, .invest-btns button {
  min-height: 44px;
  color: var(--px-ink);
  background: var(--px-paper);
  border: 2px solid var(--px-line);
  border-bottom-width: 4px;
  border-radius: 3px;
  box-shadow: none;
  text-shadow: none;
  font-size: 14px;
  line-height: 1.4;
}
.btn-primary, .op-exec, .mg-box.mg-app .mgx-next,
.mg-box .mg-intro .btn-primary, .mg-box .mg-result .btn-primary {
  color: var(--px-ink);
  background: var(--px-amber);
  border-color: var(--px-amber-edge);
}
.btn-good { color: #fff8e6; background: #34765b; border-color: #24533f; }
.btn:disabled, .action-btn:disabled { opacity: .55; }
.btn:active, .qbtn:active, .action-btn:active { transform: translateY(1px); margin-bottom: 0; border-bottom-width: 4px; }
.btn-icon { width: 44px; height: 44px; }

/* All sprite cells share one real 4 by 4 atlas; no CSS-drawn replacement art. */
.pixel-icons-ready [data-pixel-icon] {
  --pixel-x: 0%;
  --pixel-y: 0%;
  display: inline-block;
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  vertical-align: middle;
  font-size: 0 !important;
  line-height: 0;
  background-image: url('pixel-art/icons.png?v=20260922-pixel-1');
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: var(--pixel-x) var(--pixel-y);
  image-rendering: pixelated;
}
.pixel-icons-ready [data-pixel-icon="energy"] { --pixel-x: 33.333333%; }
.pixel-icons-ready [data-pixel-icon="mood"] { --pixel-x: 66.666667%; }
.pixel-icons-ready [data-pixel-icon="skill"] { --pixel-x: 100%; }
.pixel-icons-ready [data-pixel-icon="perf"] { --pixel-y: 33.333333%; }
.pixel-icons-ready [data-pixel-icon="boss"] { --pixel-x: 33.333333%; --pixel-y: 33.333333%; }
.pixel-icons-ready [data-pixel-icon="hair"] { --pixel-x: 66.666667%; --pixel-y: 33.333333%; }
.pixel-icons-ready [data-pixel-icon="money"] { --pixel-x: 100%; --pixel-y: 33.333333%; }
.pixel-icons-ready [data-pixel-icon="work"] { --pixel-y: 66.666667%; }
.pixel-icons-ready [data-pixel-icon="receipt"] { --pixel-x: 33.333333%; --pixel-y: 66.666667%; }
.pixel-icons-ready [data-pixel-icon="slack"] { --pixel-x: 66.666667%; --pixel-y: 66.666667%; }
.pixel-icons-ready [data-pixel-icon="help"] { --pixel-x: 100%; --pixel-y: 66.666667%; }
.pixel-icons-ready [data-pixel-icon="goal"] { --pixel-y: 100%; }
.pixel-icons-ready [data-pixel-icon="hop"] { --pixel-x: 33.333333%; --pixel-y: 100%; }
.pixel-icons-ready [data-pixel-icon="shop"] { --pixel-x: 66.666667%; --pixel-y: 100%; }
.pixel-icons-ready [data-pixel-icon="save"] { --pixel-x: 100%; --pixel-y: 100%; }
.pixel-icons-ready [data-pixel-icon] > .pixel-icon-fallback { display: none; }
.pixel-icon:not([data-pixel-icon]) { display: inline-flex; align-items: center; justify-content: center; }
.pixel-banner { image-rendering: pixelated; }
.pixel-icons-ready .pixel-duel-icon { display: block; width: 94px; height: 94px; margin-bottom: 5px; }
#screen-title .menu .pixel-icon { margin-right: 7px; width: 25px; height: 25px; }

/* Title stays quiet: the office and its character carry the identity. */
#screen-title { padding: 22px 24px 62px; }
#screen-title .title-inner { max-width: 460px; margin-inline: auto; }
.title-kicker { width: 100%; max-width: 420px; color: var(--px-amber); border-color: #62748b; font-size: 12px; }
.title-kicker span { color: #c7d0dd; font-size: 12px; }
#title-canvas { width: 100%; max-width: 420px; border: 3px solid #7287a0; border-radius: 2px; margin-bottom: 18px; }
.logo { color: var(--px-paper); font-size: clamp(42px, 11vw, 58px); letter-spacing: .05em; text-shadow: 3px 3px 0 #0d1725; }
.logo .logo-2 { color: var(--px-amber); font-size: .63em; text-shadow: 2px 2px 0 #0d1725; }
.subtitle { color: #d1d9e1; font-size: 14px; margin-block: 12px 18px; }
#screen-title .menu { width: 100%; max-width: 420px; gap: 9px; }
#screen-title .menu .btn { min-height: 46px; font-size: 14px; border-radius: 3px; }
#screen-title .menu #btn-new, #screen-title .menu #btn-continue { min-height: 52px; font-size: 17px; }
#btn-continue:not(:disabled) { color: var(--px-paper); background: #415d7c; border-color: #7187a1; }
.title-tip { max-width: 420px; color: #b7c4d3; font-size: 12px; margin-top: 16px; }
.title-credit { color: #b7c4d3; font-size: 12px; }

/* Main game: office window, paper status strip, then the day's decision. */
body.game-active { overflow-y: auto; touch-action: manipulation; }
body.game-active #app { height: auto; min-height: 100dvh; overflow: visible; padding: 0; }
body.game-active #screen-game.active {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) calc(10px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
}
body.game-active .hud {
  order: 0;
  position: relative;
  min-height: 62px;
  margin: 0;
  padding: 8px 12px;
  gap: 8px;
  background: var(--px-navy);
  border: 0;
  border-bottom: 3px solid #102036;
  border-radius: 0;
}
body.game-active .hud-day { grid-column: 2; grid-row: 1; color: var(--px-paper); font-size: 15px; line-height: 1.35; }
body.game-active .hud-left { flex: 1 1 auto; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; }
body.game-active .pixel-hud-avatar { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; outline: 2px solid #8e9bb0; outline-offset: 1px; background-color: var(--px-paper); }
body.game-active .hud-level { grid-column: 2; grid-row: 2; min-width: 0; max-width: 100%; color: #cdd7e4; font-size: 12px; line-height: 1.35; }
body.game-active .hud-right { gap: 7px; }
body.game-active .hud-money { color: var(--px-ink); background: var(--px-amber); border: 2px solid #cc9b4f; border-radius: 2px; padding: 5px 7px; font-size: 16px; }
body.game-active .hud .btn-icon { width: 44px; height: 44px; color: var(--px-paper); background: #334c6b; border-color: #778aa1; border-radius: 2px; font-size: 23px; }
body.game-active .scene-wrap { order: 1; padding: 0; height: auto; margin: 0 8px; overflow: hidden; border: 3px solid #102036; }
body.game-active #scene { display: block; width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; object-fit: contain; background: #18263a; border: 0; border-radius: 0; box-shadow: none; }
body.game-active .scene-time, body.game-active .daily-chip { top: 7px; max-width: 48%; font-size: 12px; line-height: 1.4; border-radius: 2px; padding: 3px 6px; background: #18283fea; border: 1px solid #92a0b3; }
body.game-active .scene-time { left: 7px; max-width: calc(100% - 14px); }
body.game-active .daily-chip { right: 7px; }
body.game-active .stats {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  min-height: 0;
  gap: 6px 9px;
  margin: 0 8px;
  padding: 9px;
  background: var(--px-paper);
  border: 3px solid #102036;
  border-top: 0;
}
body.game-active .stat { padding: 0; border: 0; border-radius: 0; background: none; min-width: 0; }
body.game-active .stat-label { color: var(--px-ink); gap: 3px; font-size: 12px; line-height: 1.35; margin-bottom: 4px; }
body.game-active .stat-label span { display: inline-flex; align-items: center; gap: 2px; overflow: visible; white-space: nowrap; }
body.game-active .stat-label b { color: var(--px-ink); font-size: 12px; font-weight: 800; }
body.game-active .stat-label [data-pixel-icon] { width: 19px; height: 19px; }
body.game-active .stat-bar { height: 6px; background: #d1c9b8; border: 1px solid #737b7f; border-radius: 0; box-shadow: none; }
body.game-active .stat-fill { border-radius: 0; background-image: none; box-shadow: none; }
body.game-active .panel {
  order: 3;
  flex: 1 0 auto;
  display: flex;
  min-height: 0;
  margin: 0 8px;
  padding: 10px;
  overflow: visible;
  color: var(--px-ink);
  background: var(--px-paper);
  border: 3px solid #102036;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 4px 0 #718198;
}
body.game-active .work-goal { flex: none; margin: 0 0 9px; padding: 7px 9px; color: var(--px-muted); background: #fbe4ac; border: 1px solid #c99a52; border-left-width: 4px; border-radius: 2px; font-size: 12px; line-height: 1.45; }
body.game-active .work-goal > strong { display: inline; color: var(--px-ink); font-size: 13px; margin-right: 7px; }
body.game-active .work-goal > span { display: inline; }
body.game-active .work-goal[data-danger="true"] { color: #733a36; background: #f6ddd3; border-color: #ad5a50; }
body.game-active .work-goal[data-danger="true"] strong { color: #7f302d; }
body.game-active .narr { flex: none; min-height: 0; max-height: none; margin: 0 0 8px; color: var(--px-muted); font-size: 14px; line-height: 1.45; }
body.game-active .actions.op-desk { flex: 1 0 auto; min-height: 0; overflow: visible; }
body.game-active .op-deck { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 8px; overflow: visible; }
body.game-active .op-top { min-height: 0; margin: 0; padding: 0 0 6px; gap: 8px; border-bottom: 1px dashed #b3a388; background: none; }
body.game-active .op-top span { color: var(--px-ink); font-size: 15px; }
body.game-active .op-top b { max-width: 52%; color: var(--px-muted); font-size: 12px; line-height: 1.35; white-space: normal; }
body.game-active .op-hand,
body.game-active .op-deck:not([data-count="4"]) .op-hand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, auto);
  height: auto;
  min-height: 0;
  gap: 8px;
  padding: 0;
  overflow: visible;
}
body.game-active .op-card,
body.game-active .op-deck:not([data-count="4"]) .op-card {
  grid-column: auto;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "ic name" "ic desc";
  gap: 3px 7px;
  align-items: center;
  align-content: center;
  min-height: 72px;
  padding: 8px;
  background: #fff8e8;
  color: var(--px-ink);
  border: 2px solid #a99b84;
  border-bottom-width: 3px;
  border-radius: 2px;
  box-shadow: none;
}
body.game-active .op-deck[data-count="5"] .op-card:last-child { grid-column: 1 / -1; }
body.game-active .op-card.selected { background: #ffecb4; border-color: #c38a2e; outline: 1px solid #f1bb52; outline-offset: -4px; box-shadow: none; filter: none; }
body.game-active .op-card:focus-visible { outline: 3px solid #2b80b9; outline-offset: 2px; }
body.game-active .op-card-name,
body.game-active .op-deck:not([data-count="4"]) .op-card-name { grid-area: name; max-width: none; color: var(--px-ink); font-size: 15px; line-height: 1.3; white-space: normal; }
body.game-active .op-card-ic,
body.game-active .op-deck:not([data-count="4"]) .op-card-ic { grid-area: ic; width: 40px; height: 40px; font-size: 27px; margin: 0; border-radius: 0; background-color: transparent; box-shadow: none; }
body.game-active .op-card-tag, body.game-active .op-card-line, body.game-active .op-card > .op-risk { display: none; }
body.game-active .op-card-desc,
body.game-active .op-deck:not([data-count="4"]) .op-card-desc { grid-area: desc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 0; margin: 0; color: var(--px-muted); font-size: 12px; line-height: 1.4; overflow: hidden; }
body.game-active .op-planner { display: flex; flex-direction: column; min-height: 0; gap: 7px; padding: 0; border: 0; background: none; }
body.game-active .op-plan-head, body.game-active .op-stances { display: none; }
body.game-active .op-forecast { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; margin: 0; background: #e8dec9; border: 1px solid #cebea3; border-radius: 2px; }
body.game-active .op-forecast span,
body.game-active .op-forecast .op-estimate { display: block; min-height: 0; flex: none; padding: 0; background: none; border: 0; color: var(--px-ink); font-size: 12px; font-weight: 600; line-height: 1.45; white-space: normal; overflow: visible; }
body.game-active .op-estimate-note { color: var(--px-muted); font-size: 12px; line-height: 1.4; }
body.game-active .op-exec { min-height: 50px; margin: 0; padding: 7px 10px; border: 2px solid var(--px-amber-edge); border-bottom-width: 4px; border-radius: 3px; box-shadow: none; }
body.game-active .op-exec span { font-size: 12px; line-height: 1.3; }
body.game-active .op-exec b { font-size: 17px; line-height: 1.4; }
body.game-active .quickbar { order: 4; flex: none; gap: 7px; padding: 12px 9px 3px; }
body.game-active .qbtn { min-height: 44px; padding: 7px 3px; color: #e8edf3; background: #334c66; border-color: #71859e; border-radius: 2px; font-size: 12px; }
body.game-active .qbtn .qb-ic { font-size: 16px; }
body.game-active .qbtn [data-pixel-icon] { width: 24px; height: 24px; }

/* Paper pages share legible ink tokens. Gameplay arenas retain their own cues. */
#screen-ending, #screen-ach, #screen-help, #screen-codex, #screen-shop,
#screen-invest, #screen-arcade, #screen-backup, .modal {
  --ink: var(--px-ink);
  --ink-dim: var(--px-muted);
  --ink-faint: #667080;
  --paper: var(--px-paper);
  --panel: #fff8e9;
  --panel-2: #efe2c9;
  --line: #b5a78f;
  --yellow: #805311;
  --gold: #805311;
  --teal: #28628a;
  --green: var(--px-green);
  --red: var(--px-red);
  color: var(--px-ink);
  background: var(--px-paper);
}
.sub-header, #screen-arcade .sub-header { color: var(--px-paper); background: var(--px-navy); border-bottom: 3px solid #102036; padding: 12px; border-radius: 0; }
.sub-header h2 { color: var(--px-paper); font-size: 18px; }
.sub-header .ach-count, .sub-header .shop-money { color: var(--px-amber); font-size: 13px; text-shadow: none; }
.sub-header .btn-icon { color: var(--px-paper); background: #334c6b; border-color: #778aa1; }
.shop-card, .invest-card, .arcade-card, .ach-card, .codex-card, .codex-stat, .ending-stats, .backup-tip {
  color: var(--px-ink);
  background: #fff8e9;
  border: 2px solid #b5a58a;
  border-radius: 3px;
  box-shadow: none;
}
.shop-card.owned, .ach-card.unlocked { border-color: #a17b3b; }
.arcade-card-feature { background: #f9e7b9; border-color: #aa884b; }
.arcade-name, .arcade-card-feature .arcade-name { color: var(--px-ink); font-size: 16px; }
.arcade-desc, .arcade-tip, .shop-tip, .invest-sub, .invest-hold,
.shop-info i, .ach-card .ac-desc, .codex-meta .cx-hint, .backup-tip, .invest-disclaimer { color: var(--px-muted); font-size: 13px; line-height: 1.5; }
.arcade-desc { -webkit-line-clamp: 2; }
.arcade-hi, .arcade-kicker, .arcade-tag, .shop-owned, .codex-meta i { color: #825616; font-size: 12px; }
.arcade-kicker, .arcade-tag { background: #f1dfb8; border-radius: 2px; }
.codex-meta .cx-tag, .help-credit { color: var(--px-muted); font-size: 12px; }
.help-body h3 { color: var(--px-ink); font-size: 17px; }
.help-body p, .ending-text { color: var(--px-muted); font-size: 15px; line-height: 1.7; }
.ending-title { color: var(--px-ink); }
.ending-tag { color: #805311; border-radius: 2px; }
.ending-btns { width: 100%; }
.backup-area, .name-input { color: var(--px-ink); background: #fff9ee; border-color: #a8987e; border-radius: 3px; font-size: 14px; }
.shop-buy, .invest-btns button { min-height: 44px; }
.shop-buy.off { color: var(--px-muted); background: #e8dfce; border-color: #ac9f87; }
.modal { max-width: 480px; border: 3px solid #182c43; border-radius: 3px; padding: 20px; box-shadow: 0 5px 0 #8a98a9; }
.modal-title { color: var(--px-ink); font-size: 21px; }
.modal-text { color: var(--px-ink); font-size: 15px; line-height: 1.65; }
.modal-art { border-radius: 2px; border-color: #ad9b81; box-shadow: none; }
.modal.emergency { animation: none; border-color: var(--px-red); box-shadow: 0 5px 0 #8a98a9; }
.modal-choices .btn { border-radius: 3px; font-size: 15px; }
.modal-choices .industry-card { color: var(--px-ink); background: #fff8e9; border-color: #b3a287; }
.industry-card strong, .industry-card b { color: var(--px-ink); font-size: 15px; }
.industry-card span, .industry-card small { color: var(--px-muted); font-size: 12px; }
#modal-box[data-kind="industry"] .modal-text { color: var(--px-muted); font-size: 14px; }
.result-summary { color: var(--px-ink); background: #e6edf0; border-color: #9aafbf; border-radius: 2px; font-size: 14px; }
.result-summary > strong, .result-summary > b { color: #345d7d; font-size: 14px; }
.toast, #ach-pop { border-radius: 3px; box-shadow: none; }
#btn-mute { min-width: 44px; min-height: 44px; border-radius: 3px; }

/* Content-sized mini challenges keep feedback next to the choice it explains. */
#mg-layer { align-items: flex-start; padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); background: #101d30ed; }
.mg-box.mg-app {
  --mini-width: 600px;
  width: min(100%, var(--mini-width));
  max-width: var(--mini-width);
  min-height: 0;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  flex: 0 1 auto;
  margin: 0 auto;
  padding: 12px;
  color: var(--px-ink);
  background: var(--px-paper);
  border: 3px solid #162a42;
  border-radius: 3px;
  box-shadow: 0 4px 0 #8998ac;
  overflow-y: auto;
}
.mg-box.mg-app .mg-head {
  position: sticky;
  top: -12px;
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 56px;
  gap: 3px 8px;
  margin: -12px -12px 10px;
  padding: 9px 52px 9px 11px;
  color: var(--px-paper);
  background: var(--px-navy);
  border: 0;
  border-bottom: 3px solid #102036;
  border-radius: 0;
}
.mg-box.mg-app .mg-title { color: var(--px-paper); font-size: 16px; line-height: 1.4; }
.mg-box.mg-app .mg-score { color: var(--px-amber); background: transparent; font-size: 12px; padding: 0; }
.mg-box.mg-app .mg-timer { color: #e2e9f0; background: transparent; font-size: 12px; padding: 0; }
.mg-box.mg-app .mg-timer.urgent { color: #ffad9b; animation: none; }
#mg-quit, #mg-exit {
  width: 44px !important;
  height: 44px !important;
  top: max(17px, calc(env(safe-area-inset-top) + 5px)) !important;
  right: max(17px, calc((100vw - 600px) / 2 + 7px)) !important;
  color: var(--px-ink) !important;
  background: var(--px-paper) !important;
  border: 2px solid #9ca9ba !important;
  border-radius: 2px !important;
}
.mg-box .mg-intro, .mg-box .mg-result { flex: none; margin: 0; padding: 35px 6px 10px; color: var(--px-ink); }
.mg-box .mg-intro h3, .mg-box .mg-result h3 { color: var(--px-ink); font-size: 24px; }
.pixel-icons-ready .mg-emoji [data-pixel-icon] { width: 68px; height: 68px; }
.mg-box .mg-intro p, .mg-box .mg-result p { color: var(--px-muted); font-size: 15px; line-height: 1.65; }
.mg-box .mg-intro .mg-exit-hint { color: var(--px-muted); font-size: 12px; }
.mgx-shell { flex: 0 1 auto; gap: 10px; }
.mgx-next { margin-top: 4px; min-height: 48px; }
.mgx-rule { color: var(--px-ink); background: #f2e4c7; border: 1px solid #c5b28f; border-left: 4px solid #a88143; border-radius: 2px; padding: 9px 11px; font-size: 14px; line-height: 1.5; }
.mgx-status, .mgx-progress, .mgx-rep, .mgx-hint, .mgx-stamina { color: var(--px-muted); font-size: 14px; }
.mgx-status { color: #34546f; background: var(--px-blue); border: 1px solid #98b4c6; border-radius: 2px; }
.mgx-grid { gap: 9px; }
.mgx-card { min-height: 88px; color: var(--px-ink); background: #fff8e8; border: 2px solid #b7a58a; border-bottom-width: 3px; border-radius: 2px; padding: 11px 12px; }
.mgx-card:hover:not(:disabled) { background: #ffedc5; border-color: #b38b45; }
.mgx-card-title { color: var(--px-ink); font-size: 16px; }
.mgx-card-meta { color: var(--px-muted); font-size: 13px; line-height: 1.5; }
.mgx-card[data-priority] { padding-right: 60px; }
.mgx-card[data-priority]::after { content: '待办'; position: absolute; top: 10px; right: 9px; padding: 2px 5px; color: #f8f1df; background: #496486; border: 1px solid #304761; font-size: 12px; font-weight: 700; }
.mgx-card[data-priority="urgent"]::after { content: '紧急'; background: #ad5138; border-color: #843d2c; }
.mgx-card[data-priority="late"]::after { content: '来不及'; background: #884148; border-color: #633039; }
.mgx-ticket { color: var(--px-ink); background: #fff9eb; border: 2px solid #b8a489; border-radius: 2px; padding: 14px; font-size: 18px; line-height: 1.6; }
.mgx-ticket-meta { color: var(--px-muted); font-size: 14px; }
.mgx-answer { min-height: 62px; font-size: 15px; line-height: 1.5; }
.mgx-feedback { color: #34546f; background: #dce9ef; border-radius: 2px; font-size: 14px; line-height: 1.55; margin-top: 0; }
.mgx-card.is-good, .mgx-feedback.is-good, .mgx-status.is-good { color: #20583f; background: #dcecd7; border-color: #659176; opacity: 1; }
.mgx-card.is-partial, .mgx-feedback.is-partial { color: #71511e; background: #f8e5af; border-color: #b28a42; opacity: 1; }
.mgx-card.is-bad, .mgx-feedback.is-bad, .mgx-status.is-bad { color: #823d36; background: #f1d9d0; border-color: #ba7669; opacity: 1; }
.mgx-rep { min-height: 130px; }
.mgx-accuracy { color: #71501f; font-size: 18px; }
.mgx-meter { border-radius: 2px; border-color: #657387; }
.mgx-cue { border-radius: 2px; }
.mgx-duel figure, .mgx-duel small { color: var(--px-muted); font-size: 12px; }
.mgx-duel strong { color: #825b20; }
.mgx-duel img { border-radius: 2px; border: 2px solid #a99374; }
.mgx-pause { border-radius: 3px; }
.pixel-work-scene { display: block; flex: none; width: 100%; aspect-ratio: 16 / 6; max-height: 176px; object-fit: cover; border: 2px solid #8b785f; border-radius: 2px; background: #1d2e42; }
.pixel-art-ready .pixel-work-scene:not(img) { background-image: url('pixel-art/office-day.png?v=20260922-pixel-1'); background-position: center 55%; background-size: cover; }
.pixel-work-scene { overflow: hidden; }
.pixel-work-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; image-rendering: pixelated; }

/* Small phones keep full-size controls and scroll instead of compressing text. */
@media (max-width: 360px) {
  #screen-title { padding-inline: 15px; }
  body.game-active .hud { padding-inline: 8px; }
  body.game-active .hud-left { grid-template-columns: 32px minmax(0, 1fr); }
  body.game-active .pixel-hud-avatar { width: 32px; height: 32px; }
  body.game-active .hud-day { font-size: 14px; }
  body.game-active .hud-money { font-size: 14px; padding-inline: 5px; }
  body.game-active .stats { gap: 7px; padding: 8px 6px; }
  body.game-active .stat-label { flex-wrap: wrap; gap: 1px; }
  body.game-active .stat-label b { margin-left: auto; }
  body.game-active .stat-label [data-pixel-icon] { width: 16px; height: 16px; }
  body.game-active .panel { padding: 8px; }
  body.game-active .op-card, body.game-active .op-deck:not([data-count="4"]) .op-card { grid-template-columns: 26px minmax(0, 1fr); padding: 7px; gap: 3px 5px; }
  body.game-active .op-card-ic, body.game-active .op-deck:not([data-count="4"]) .op-card-ic { width: 26px; height: 30px; }
  body.game-active .op-card-name, body.game-active .op-deck:not([data-count="4"]) .op-card-name { font-size: 14px; }
  body.game-active .op-top { flex-wrap: wrap; gap: 3px; }
  body.game-active .op-top b { max-width: 100%; text-align: left; }
  .mg-box.mg-app { padding: 10px; }
  .mg-box.mg-app .mg-head { margin: -10px -10px 9px; top: -10px; }
  .mgx-rule, .mgx-feedback { font-size: 14px; }
  .mgx-answer { font-size: 14px; }
}
@media (max-width: 600px) and (max-height: 650px) {
  #screen-title { padding-top: 14px; }
  #title-canvas { width: 100%; max-width: 290px; margin-bottom: 12px; }
  .logo { font-size: 38px; }
  .subtitle { font-size: 14px; }
  body.game-active #scene { max-height: 144px; object-fit: cover; }
  .mgx-rep { min-height: 120px; }
  .mgx-card { min-height: 80px; }
  .pixel-work-scene { max-height: 108px; }
}

/* A desktop office, rather than a phone-sized strip in the middle of a monitor. */
@media (min-width: 1024px) {
  #app { width: calc(100% - 48px); max-width: 1100px; min-height: calc(100dvh - 32px); margin-block: 16px; border: 3px solid #71849f; box-shadow: 4px 5px 0 #0d192a; }
  body.game-active #app { min-height: calc(100dvh - 32px); }
  #screen-title { min-height: calc(100dvh - 96px); }
  #screen-title .title-inner { display: grid; grid-template-columns: 1.14fr 1fr; align-items: center; gap: 10px 38px; max-width: 940px; text-align: left; }
  #screen-title .title-kicker { grid-column: 1 / -1; max-width: none; }
  #screen-title #title-canvas { grid-column: 1; grid-row: 2 / 7; width: 100%; max-width: none; margin: 0; }
  #screen-title .logo { grid-column: 2; align-items: flex-start; }
  #screen-title .subtitle, #screen-title .menu, #screen-title .title-tip, #screen-title .title-credit { grid-column: 2; margin-left: 0; margin-right: 0; }
  body.game-active #screen-game.active {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "hud hud" "scene stats" "scene goal" "scene actions" "narr actions" "quick actions";
    gap: 14px 18px;
    min-height: calc(100dvh - 40px);
    padding: 0 18px 20px;
    align-items: start;
  }
  body.game-active .hud { grid-area: hud; margin: 0 -18px; padding-inline: 20px; min-height: 70px; }
  body.game-active .hud-day { font-size: 19px; }
  body.game-active .hud-level { font-size: 14px; }
  body.game-active .hud-money { font-size: 20px; }
  body.game-active .scene-wrap { grid-area: scene; width: 100%; height: 100%; min-height: 320px; margin: 0; border-width: 3px; }
  body.game-active #scene { height: 100% !important; min-height: 320px; max-height: none; aspect-ratio: auto; object-fit: cover !important; object-position: 40% center; }
  body.game-active .stats { grid-area: stats; margin: 0; padding: 12px; border: 3px solid #102036; gap: 12px; }
  body.game-active .stat-label, body.game-active .stat-label b { font-size: 13px; }
  body.game-active .stat-label [data-pixel-icon] { width: 24px; height: 24px; }
  body.game-active .stat-bar { height: 8px; }
  body.game-active .panel { display: contents; }
  body.game-active .work-goal { grid-area: goal; margin: 0; padding: 10px 12px; font-size: 13px; }
  body.game-active .work-goal > strong { display: block; font-size: 15px; margin-bottom: 3px; }
  body.game-active .narr { grid-area: narr; margin: 0; padding: 14px; background: var(--px-paper); border: 2px solid #a9987e; color: var(--px-ink); font-size: 16px; }
  body.game-active .actions { grid-area: actions; width: 100%; min-width: 0; padding: 14px; background: var(--px-paper); border: 3px solid #102036; }
  body.game-active .op-deck { gap: 12px; }
  body.game-active .op-top span { font-size: 17px; }
  body.game-active .op-hand, body.game-active .op-deck:not([data-count="4"]) .op-hand { gap: 10px; grid-auto-rows: minmax(94px, auto); }
  body.game-active .op-card, body.game-active .op-deck:not([data-count="4"]) .op-card { min-height: 94px; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 9px; padding: 10px; }
  body.game-active .op-card-ic, body.game-active .op-deck:not([data-count="4"]) .op-card-ic { width: 40px; height: 44px; }
  body.game-active .op-card-name, body.game-active .op-deck:not([data-count="4"]) .op-card-name { font-size: 16px; }
  body.game-active .op-card-desc, body.game-active .op-deck:not([data-count="4"]) .op-card-desc { font-size: 13px; }
  body.game-active .op-forecast span, body.game-active .op-forecast .op-estimate { font-size: 13px; }
  body.game-active .op-exec { min-height: 58px; }
  body.game-active .quickbar { grid-area: quick; padding: 0; }
  body.game-active .qbtn { font-size: 13px; min-height: 48px; }
  .ach-grid, .codex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px; }
  .shop-list, .invest-list, .arcade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; padding: 18px; }
  .help-body, .backup-body { width: 100%; max-width: 820px; margin-inline: auto; padding: 20px 30px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}