:root {
  --paper: #efe8d6;
  --ink: #121918;
  --jade: #77ad94;
  --jade-deep: #244b3f;
  --gold: #d5a64f;
  --gold-soft: #ead29d;
  --red: #c4604d;
  --blue: #6d9eb5;
  --violet: #9a80b7;
  --muted: #82938b;
  --line: rgba(214, 202, 175, .17);
  --panel: rgba(18, 28, 25, .94);
  --panel-soft: rgba(28, 42, 37, .78);
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #080d0b; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--paper);
  font-family: "Noto Serif TC", "Songti TC", "STSong", serif;
  background:
    radial-gradient(circle at 74% 4%, rgba(93, 139, 117, .16), transparent 28%),
    radial-gradient(circle at 6% 58%, rgba(159, 119, 55, .07), transparent 26%),
    linear-gradient(145deg, #0a100e, #16201d 48%, #090e0c);
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Opening cinematic */
.cinematic {
  position: fixed;
  z-index: 300;
  inset: 0;
  overflow: hidden;
  background: #020403;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}
.cinematic.visible { opacity: 1; visibility: visible; }
.cinematic:not(.started) .cinematic-image,
.cinematic:not(.started) .cinematic-beam,
.cinematic:not(.started) .cinematic-lines p,
.cinematic:not(.started) .cinematic-seal { animation: none; }
.cinematic:not(.started) .cinematic-image { opacity: .38; filter: brightness(.28) saturate(.65) blur(2px); transform: scale(1.08); }
.cinematic-entry {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 48%, rgba(15, 31, 25, .28), rgba(2, 5, 4, .74) 68%);
  text-align: center;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}
.cinematic.started .cinematic-entry { opacity: 0; visibility: hidden; pointer-events: none; }
.cinematic-entry > span { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(213, 166, 79, .48); border-radius: 50%; color: #ecd296; background: rgba(9, 18, 15, .72); font-size: 23px; box-shadow: 0 0 36px rgba(213, 166, 79, .14); }
.cinematic-entry p { margin: 15px 0 3px; color: #a69267; font-size: 11px; letter-spacing: .18em; }
.cinematic-entry h1 { margin: 0 0 22px; color: #eee2c8; font-size: clamp(27px, 4vw, 46px); letter-spacing: .12em; }
.cinematic-entry button { min-width: 220px; padding: 12px 18px; border: 1px solid rgba(213, 166, 79, .46); background: rgba(39, 78, 62, .72); color: #f0dfb7; font-size: 13px; cursor: pointer; }
.cinematic-entry button + button { margin-top: 8px; border-color: rgba(214, 202, 175, .18); background: rgba(8, 15, 13, .58); color: #8fa198; }
.cinematic-entry button:hover, .cinematic-entry button:focus-visible { border-color: #d5a64f; background: rgba(54, 102, 81, .82); color: #fff0c8; }
.cinematic-entry button:disabled { cursor: wait; opacity: .78; }
.cinematic-entry small { margin-top: 13px; color: rgba(220, 210, 187, .54); font-size: 10px; }
.cinematic-entry-status { margin-top: 8px; color: #9fc2ae; font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.cinematic-entry.audio-ready .cinematic-entry-status { color: #d7efdf; }
.cinematic-entry.audio-error .cinematic-entry-status { color: #ec9b8c; }
.cinematic-entry.audio-error #enterCinematic { border-color: rgba(219, 102, 82, .7); box-shadow: 0 0 0 3px rgba(199, 79, 62, .1); }
.cinematic-image {
  position: absolute;
  inset: -3%;
  background: url("og.png") center / cover no-repeat;
  opacity: 0;
  filter: brightness(.1) saturate(.7) blur(3px);
  transform: scale(1.16);
  animation: intro-world 7.6s cubic-bezier(.22, .72, .15, 1) forwards;
}
.cinematic-beam {
  position: absolute;
  left: 69%;
  top: -20%;
  width: 2px;
  height: 95%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(239, 205, 126, .95) 45%, rgba(239, 205, 126, .08));
  box-shadow: 0 0 25px 5px rgba(215, 166, 79, .25);
  transform: rotate(8deg);
  animation: intro-beam 3.8s ease 2.8s forwards;
}
.cinematic-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 43%, transparent 0 13%, rgba(1, 3, 2, .18) 38%, rgba(1, 3, 2, .92) 100%),
    linear-gradient(90deg, rgba(2, 4, 3, .78), transparent 55%);
}
.cinematic-lines { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cinematic-lines p {
  position: absolute;
  margin: 0;
  padding: 0 24px;
  color: #eee3ca;
  font-size: clamp(17px, 2.2vw, 30px);
  letter-spacing: .2em;
  text-align: center;
  text-shadow: 0 3px 18px #000;
  opacity: 0;
}
.cinematic-lines p:nth-child(1) { animation: intro-line 1.7s ease .45s both; }
.cinematic-lines p:nth-child(2) { animation: intro-line 1.7s ease 2s both; }
.cinematic-lines p:nth-child(3) { animation: intro-line 1.7s ease 3.65s both; }
.cinematic-lines p:nth-child(4) {
  left: 50%;
  top: calc(50% + clamp(52px, 9vh, 92px));
  width: 100%;
  color: #e4bd71;
  font-size: clamp(17px, 2.2vw, 30px);
  transform: translate(-50%, -50%);
  animation: intro-final 2.3s ease 5.25s both;
}
.cinematic-seal {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(50% - clamp(42px, 7vh, 76px));
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  color: #f0d6a1;
  border: 1px solid rgba(213, 166, 79, .5);
  border-radius: 50%;
  font-size: 30px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
  animation: intro-seal 1.9s ease 5.5s both;
}
.cinematic-skip, .sound-awaken {
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(222, 199, 151, .26);
  background: rgba(5, 9, 8, .54);
  color: #c9b88e;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.cinematic-skip { right: 24px; bottom: 24px; padding: 9px 14px; font-size: 10px; letter-spacing: .12em; }
.cinematic-sound { position: absolute; z-index: 4; left: 50%; bottom: 25px; display: grid; justify-items: center; gap: 5px; transform: translateX(-50%); }
.cinematic-sound small { color: rgba(226, 216, 192, .5); font-size: 8px; letter-spacing: .08em; }
.sound-awaken { position: static; padding: 10px 16px; font-size: 10px; letter-spacing: .08em; }
.sound-awaken[aria-pressed="true"] { color: #d9efdf; border-color: rgba(119, 173, 148, .55); background: rgba(36, 75, 63, .62); }
@keyframes intro-world { 0% { opacity: 0; filter: brightness(.08) saturate(.4) blur(5px); transform: scale(1.16); } 34% { opacity: .72; } 100% { opacity: 1; filter: brightness(.58) saturate(.9) blur(0); transform: scale(1.02); } }
@keyframes intro-beam { 0% { opacity: 0; transform: rotate(8deg) translateY(-18%); } 45% { opacity: 1; } 100% { opacity: .55; transform: rotate(8deg) translateY(16%); } }
@keyframes intro-line { 0%, 100% { opacity: 0; transform: translateY(10px); } 22%, 75% { opacity: 1; transform: translateY(0); } }
@keyframes intro-final { 0% { opacity: 0; letter-spacing: .36em; } 28%, 78% { opacity: 1; letter-spacing: .2em; } 100% { opacity: 0; } }
@keyframes intro-seal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-12deg); } 35%, 74% { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(0); box-shadow: 0 0 65px rgba(213, 166, 79, .2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }

/* Title */
.title-screen {
  position: fixed;
  z-index: 250;
  inset: 0;
  overflow: hidden;
  background: #070b09;
  opacity: 0;
  visibility: hidden;
  transition: opacity .65s ease, visibility .65s ease;
}
.title-screen.visible { opacity: 1; visibility: visible; }
.title-art { position: absolute; inset: 0; background: url("og.png") center / cover no-repeat; filter: brightness(.78) saturate(.9); transform: scale(1.015); }
.title-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 7, 6, .42), rgba(3, 7, 6, .08) 54%, rgba(3, 7, 6, .32)), linear-gradient(0deg, rgba(3, 7, 6, .78), transparent 55%); }
.title-menu {
  position: absolute;
  left: clamp(24px, 6vw, 90px);
  bottom: clamp(30px, 8vh, 100px);
  width: min(380px, calc(100vw - 48px));
  padding: 27px 28px 23px;
  border: 1px solid rgba(221, 190, 124, .28);
  background: linear-gradient(145deg, rgba(10, 18, 15, .88), rgba(17, 29, 25, .78));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
  backdrop-filter: blur(10px);
}
.menu-overline { margin: 0; color: #b8a475; font-size: 9px; letter-spacing: .22em; }
.title-menu h2 { margin: 5px 0 10px; font-size: 30px; }
.menu-rule { display: flex; align-items: center; gap: 8px; color: #b99754; }
.menu-rule i { height: 1px; flex: 1; background: rgba(213, 166, 79, .3); }
.menu-actions { display: grid; gap: 8px; margin-top: 16px; }
.menu-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(214, 202, 175, .15);
  background: rgba(255, 255, 255, .025);
  text-align: left;
  cursor: pointer;
}
.menu-button span, .menu-button small { display: block; }
.menu-button span { color: #eee2c8; font-size: 12px; }
.menu-button small { color: #87988f; font-size: 8px; text-align: right; }
.menu-button.featured { border-color: rgba(111, 168, 142, .5); background: rgba(48, 92, 75, .36); }
.menu-button.challenge { border-color: rgba(109, 158, 181, .36); }
.menu-button:hover { border-color: rgba(213, 166, 79, .55); background: rgba(213, 166, 79, .06); }
.menu-minor-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 3px; }
.menu-minor-actions button { border: 0; padding: 5px; background: none; color: #819089; font-size: 9px; cursor: pointer; }
.menu-minor-actions button:hover { color: #e2c57f; }
.menu-footnote { margin: 13px 0 0; color: #6f8178; font-size: 8px; text-align: center; }
.title-version { position: absolute; right: 18px; bottom: 13px; color: rgba(222, 203, 159, .5); font-size: 8px; letter-spacing: .13em; }

/* Shared chrome */
.ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(100px); opacity: .1; }
.orb-one { right: -80px; top: 12%; background: #77ad94; }
.orb-two { left: -120px; bottom: -80px; background: #a77b3a; }
.grain { position: absolute; inset: 0; opacity: .035; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); }
.game-shell { position: relative; z-index: 1; width: min(1580px, 100%); margin: auto; padding: 14px 18px 88px; }
.panel { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 15px 10px; }
.panel-heading.compact { padding-bottom: 8px; }
.panel-heading span, .panel-heading h2, .panel-heading em, .panel-heading strong { display: block; margin: 0; }
.panel-heading span { color: #71837a; font-size: 8px; letter-spacing: .12em; }
.panel-heading h2 { margin-top: 2px; color: #ded5c0; font-size: 15px; }
.panel-heading > em, .panel-heading > strong { color: #ba9d63; font-size: 9px; font-style: normal; text-align: right; }
.topbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(300px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 2px 2px 13px;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-seal { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(213, 166, 79, .45); border-radius: 50%; color: #e9cd8d; background: rgba(213, 166, 79, .06); font-size: 17px; }
.brand-lockup p, .brand-lockup h1 { margin: 0; }
.brand-lockup p { color: #7d8e86; font-size: 8px; letter-spacing: .12em; }
.brand-lockup h1 { margin-top: 2px; font-size: 20px; }
.season-clock { text-align: center; }
.season-clock span, .season-clock strong { display: block; }
.season-clock span { color: #8b9b93; font-size: 9px; }
.season-clock strong { margin-top: 2px; color: #d6ba79; font-size: 12px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.plain-button { padding: 7px 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); color: #9caaa3; font-size: 9px; cursor: pointer; }
.plain-button:hover { border-color: rgba(213, 166, 79, .38); color: #dfc784; }
.plain-button.danger { color: #c98577; }
.sound-button[aria-pressed="true"] { color: #cce5d5; border-color: rgba(119, 173, 148, .55); background: rgba(36, 75, 63, .3); }
.volume-control { display: flex; align-items: center; gap: 5px; color: #72847b; font-size: 8px; }
.volume-control input { width: 58px; accent-color: var(--jade); }

/* Four survival signals */
.survival-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 12px; border: 1px solid var(--line); background: rgba(9, 15, 13, .76); box-shadow: 0 16px 46px rgba(0, 0, 0, .2); }
.vital { position: relative; min-width: 0; padding: 13px 15px 12px; border-right: 1px solid var(--line); overflow: hidden; }
.vital:last-child { border-right: 0; }
.vital:before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--jade); opacity: .7; }
.vital-runway:before { background: var(--blue); }
.vital-economy:before { background: var(--gold); }
.vital-crisis:before { background: var(--red); }
.vital span, .vital strong, .vital em { display: block; }
.vital span { color: #75877e; font-size: 8px; letter-spacing: .12em; }
.vital strong { margin: 4px 0 2px; overflow: hidden; color: #eee2c7; font: 600 19px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.vital em { color: #8fa097; font-size: 8px; font-style: normal; }
.vital em b { color: #baa168; font-weight: 500; }
.vital-crisis[data-level="warning"] { background: rgba(169, 115, 48, .08); }
.vital-crisis[data-level="danger"] { background: rgba(184, 82, 63, .11); animation: crisis-pulse 2.4s ease-in-out infinite; }
.vital-crisis[data-level="danger"] strong { color: #e5a190; }
@keyframes crisis-pulse { 50% { box-shadow: inset 0 0 32px rgba(184, 82, 63, .12); } }

/* Living company world */
.world-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(520px, 1.7fr) minmax(260px, .82fr); gap: 12px; align-items: stretch; }
.objective-panel, .company-world { min-height: 438px; }
.objective-copy { min-height: 42px; margin: 0 15px 10px; color: #92a29a; font-size: 9px; line-height: 1.65; }
.doom-track { height: 3px; margin: 0 15px 10px; overflow: hidden; background: rgba(255, 255, 255, .055); }
.doom-track i { display: block; height: 100%; width: 8%; background: linear-gradient(90deg, var(--jade), var(--gold)); transition: width .5s ease; }
.objective-rows { display: grid; gap: 6px; padding: 0 15px; }
.objective-row { padding: 8px 9px; border: 1px solid rgba(214, 202, 175, .1); background: rgba(255, 255, 255, .018); }
.objective-row header { display: flex; justify-content: space-between; gap: 9px; color: #abb8b1; font-size: 8px; }
.objective-row header strong { color: #dbc17f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.objective-row i { display: block; height: 3px; margin-top: 6px; overflow: hidden; background: rgba(255, 255, 255, .055); }
.objective-row i b { display: block; height: 100%; background: var(--jade); transition: width .45s ease; }
.objective-row.complete i b { background: #9fc9b4; }
.objective-row.danger i b { background: var(--red); }
.secret-objective { display: flex; gap: 8px; align-items: center; margin: 9px 15px 11px; padding: 8px; border: 1px dashed rgba(109, 158, 181, .24); background: rgba(109, 158, 181, .035); }
.secret-objective > span { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid rgba(109, 158, 181, .35); border-radius: 50%; color: #8eb0c0; }
.secret-objective p, .secret-objective strong, .secret-objective small { display: block; margin: 0; }
.secret-objective strong { color: #8faeba; font-size: 8px; }
.secret-objective small { color: #63766f; font-size: 7px; }
.realm-path { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 13px 13px; padding: 0; border-top: 1px solid var(--line); }
.realm-path li { position: relative; min-width: 0; padding: 11px 3px 0; color: #5f7068; text-align: center; }
.realm-path li:before { content: ""; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #4a5b53; transform: translateX(-50%); }
.realm-path li.active, .realm-path li.completed { color: #cdbb8d; }
.realm-path li.active:before { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.realm-path li.completed:before { background: var(--jade); }
.realm-path i, .realm-path strong, .realm-path small, .realm-path em { display: block; font-style: normal; }
.realm-path i { font-size: 8px; }
.realm-path strong { margin-top: 2px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.realm-path small, .realm-path em { font-size: 6px; }
.realm-path em { margin-top: 3px; color: #60736a; }

.company-world { overflow: hidden; }
.world-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-end; padding: 14px 16px 10px; }
.world-heading span, .world-heading h2, .world-heading strong { display: block; margin: 0; }
.world-heading span { color: #b79d67; font-size: 8px; letter-spacing: .12em; }
.world-heading h2 { margin-top: 3px; font-size: 17px; }
.world-heading > strong { max-width: 48%; color: #88a096; font-size: 8px; line-height: 1.5; text-align: right; }
.office-scene { position: relative; height: 335px; margin: 0 14px; overflow: hidden; border: 1px solid rgba(214, 202, 175, .16); background: linear-gradient(180deg, #20342e 0, #172723 49%, #0e1714 100%); transition: filter .45s, background .45s; }
.office-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 15%, rgba(232, 195, 111, .14), transparent 38%); transition: opacity .4s; }
.office-sky { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 7px; padding: 0 28px 58px; opacity: .65; }
.office-sky i { display: block; width: 22%; height: 41%; border: 1px solid rgba(213, 166, 79, .1); background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(213, 166, 79, .05) 13px 14px), linear-gradient(#172823, #0b1412); transition: height .5s; }
.office-sky i:nth-child(2) { height: 63%; }
.office-sky i:nth-child(3) { height: 51%; }
.office-sky i:nth-child(4) { height: 35%; }
.office-scene[data-stage="1"] .office-sky i:nth-child(2) { height: 75%; }
.office-scene[data-stage="2"] .office-sky i { height: 63%; }
.office-scene[data-stage="2"] .office-sky i:nth-child(2) { height: 90%; box-shadow: 0 0 28px rgba(213, 166, 79, .08); }
.office-scene[data-stage="3"] .office-sky i { height: 76%; }
.office-scene[data-stage="3"] .office-sky i:nth-child(2) { height: 100%; box-shadow: 0 0 40px rgba(213, 166, 79, .14); }
.industry-props { position: absolute; z-index: 2; inset: 36px 28px 83px; pointer-events: none; }
.prop-screen { position: absolute; right: 4%; top: 2%; width: 115px; height: 70px; padding: 8px; border: 2px solid #13221e; background: rgba(5, 14, 12, .82); box-shadow: 0 9px 0 -5px #0b1512; }
.prop-screen span { display: block; color: #78aa91; font: 7px/1 ui-monospace, monospace; letter-spacing: .1em; }
.prop-screen i { display: block; width: 74%; height: 3px; margin-top: 8px; background: rgba(119, 173, 148, .35); box-shadow: 0 8px 0 rgba(119, 173, 148, .18), 0 16px 0 rgba(213, 166, 79, .18); }
.prop-work { position: absolute; left: 5%; top: 14%; display: grid; place-items: center; width: 73px; height: 73px; border: 1px solid rgba(213, 166, 79, .25); border-radius: 50%; background: rgba(8, 18, 15, .78); box-shadow: inset 0 0 25px rgba(213, 166, 79, .08); }
.prop-work span { color: #d5b66f; font: 11px ui-monospace, monospace; }
.prop-stack { position: absolute; right: 27%; bottom: 1%; display: flex; align-items: flex-end; gap: 4px; }
.prop-stack i { display: block; width: 23px; height: 31px; border: 1px solid rgba(213, 166, 79, .18); background: #15241f; }
.prop-stack i:nth-child(2) { height: 43px; }
.prop-stack i:nth-child(3) { height: 24px; }
.office-furniture { position: absolute; z-index: 3; left: 10%; right: 10%; bottom: 54px; display: flex; justify-content: center; gap: 26px; }
.office-furniture i { display: block; width: 67px; height: 7px; background: #4a3927; box-shadow: 0 18px 0 -2px #14201c; opacity: .82; }
.office-alerts { position: absolute; z-index: 6; left: 11px; top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.office-alerts span { padding: 4px 6px; border: 1px solid rgba(119, 173, 148, .18); color: #7f9a8d; background: rgba(4, 10, 8, .56); font-size: 7px; }
.office-alerts span.warning { color: #dbad62; border-color: rgba(213, 166, 79, .35); }
.office-alerts span.danger { color: #e09280; border-color: rgba(196, 96, 77, .43); animation: tag-blink 1.4s ease infinite; }
@keyframes tag-blink { 50% { opacity: .55; } }
.office-people { position: absolute; z-index: 5; left: 7px; right: 7px; bottom: 54px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 2.4vw, 24px); }
.office-person { position: relative; display: grid; justify-items: center; width: 57px; animation: person-arrive .45s ease both; animation-delay: calc(var(--person-index) * 70ms); }
.office-person .person-head { position: relative; z-index: 2; display: grid; place-items: center; width: 37px; height: 40px; border: 1px solid rgba(224, 196, 132, .45); border-radius: 48% 48% 42% 42%; background: linear-gradient(#38584b, #172620); color: #ead6a7; font-size: 9px; }
.office-person:first-child .person-head { width: 41px; height: 44px; border-color: rgba(213, 166, 79, .65); background: linear-gradient(#6a502d, #271f14); color: #f3ddb1; }
.office-person .person-body { width: 48px; height: 35px; margin-top: -5px; border-radius: 12px 12px 3px 3px; background: linear-gradient(90deg, #17211e, #2b4038 48%, #17211e); box-shadow: 0 8px 0 -2px rgba(9, 14, 12, .9); }
.office-person .person-name { max-width: 62px; margin-top: 3px; overflow: hidden; color: #a6b5ad; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.office-person[data-mood="tired"] { transform: translateY(7px); filter: saturate(.55); }
.office-person[data-mood="angry"] .person-head { border-color: rgba(196, 96, 77, .7); box-shadow: 0 0 16px rgba(196, 96, 77, .16); }
.office-person[data-mood="happy"] .person-head { box-shadow: 0 0 18px rgba(213, 166, 79, .2); }
.office-scene[data-activity="work"] .office-person:nth-child(even) { animation: person-work 1.8s ease-in-out infinite; }
.office-scene[data-activity="meeting"] .office-person { transform: translateX(calc((var(--person-index) - 1) * -3px)); }
.office-scene[data-activity="argue"] .office-person:nth-child(odd) { transform: translateX(-7px) rotate(-2deg); }
.office-scene[data-activity="argue"] .office-person:nth-child(even) { transform: translateX(7px) rotate(2deg); }
.office-scene[data-activity="argue"] .person-head { border-color: rgba(196, 96, 77, .72); box-shadow: 0 0 18px rgba(196, 96, 77, .17); }
.office-scene[data-activity="celebrate"] .office-person { animation: celebrate .7s ease-in-out infinite alternate; }
.office-stage { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; padding: 11px; color: #c0ad7e; background: rgba(4, 8, 7, .82); font-size: 8px; letter-spacing: .1em; text-align: center; }
.scene-particles i { position: absolute; z-index: 4; width: 3px; height: 3px; border-radius: 50%; background: rgba(213, 166, 79, .35); animation: mote 4s linear infinite; }
.scene-particles i:nth-child(1) { left: 20%; bottom: 23%; }
.scene-particles i:nth-child(2) { left: 65%; bottom: 33%; animation-delay: -1.3s; }
.scene-particles i:nth-child(3) { left: 82%; bottom: 18%; animation-delay: -2.4s; }
.office-scene[data-health="low-cash"] { filter: saturate(.44) brightness(.64); }
.office-scene[data-health="low-cash"] .office-glow { opacity: .12; }
.office-scene[data-health="high-debt"] { background: radial-gradient(circle at 76% 12%, rgba(184, 82, 63, .18), transparent 34%), linear-gradient(180deg, #302620, #18221e 60%, #0c1412); }
.office-scene[data-health="high-debt"] .prop-screen { animation: screen-error .8s steps(2) infinite; }
.office-scene[data-health="low-morale"] .office-person { transform: translateY(7px); filter: grayscale(.6); }
.office-scene[data-documents="high"] .prop-stack i { height: 62px; border-color: rgba(196, 96, 77, .35); }
.office-scene[data-industry="consumer"] .prop-work { border-radius: 20%; box-shadow: 0 0 34px rgba(109, 158, 181, .18); }
.office-scene[data-industry="consumer"] .prop-screen i { width: 42%; box-shadow: 18px 8px 0 rgba(109, 158, 181, .25), 43px 16px 0 rgba(213, 166, 79, .2); }
.office-scene[data-industry="ecommerce"] .prop-stack i { height: 26px; background: #4e3a23; border-color: rgba(222, 185, 112, .4); transform: rotate(var(--box-rotate, -2deg)); }
.office-scene[data-industry="ecommerce"] .prop-stack i:nth-child(2) { --box-rotate: 3deg; height: 40px; }
.office-scene[data-industry="ai"] .prop-work { box-shadow: inset 0 0 22px rgba(109, 158, 181, .25), 0 0 45px rgba(109, 158, 181, .2); animation: ai-orb 2.8s ease-in-out infinite; }
.office-scene[data-industry="traditional"] .office-sky { opacity: .3; }
.office-scene[data-industry="traditional"] .prop-work { width: 106px; height: 44px; border-radius: 2px; }
.office-scene[data-industry="traditional"] .prop-stack { left: 29%; right: 29%; bottom: 9%; height: 9px; background: repeating-linear-gradient(90deg, #77604a 0 7px, #18221e 8px 12px); animation: conveyor 2s linear infinite; }
.office-scene[data-industry="traditional"] .prop-stack i { display: none; }
.office-scene[data-industry="consulting"] .prop-screen { width: 128px; height: 88px; background: #e7dfcc; transform: rotate(1deg); }
.office-scene[data-industry="consulting"] .prop-screen span { color: #785d37; }
.office-scene[data-industry="consulting"] .prop-screen i { background: rgba(73, 104, 91, .34); }
.office-scene[data-industry="consulting"] .prop-stack i { width: 30px; background: #d2c4a8; transform: rotate(-4deg); }
@keyframes person-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes person-work { 50% { transform: translateY(2px) rotate(-1deg); } }
@keyframes celebrate { to { transform: translateY(-7px); } }
@keyframes mote { from { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } to { opacity: 0; transform: translateY(-75px); } }
@keyframes screen-error { 50% { filter: hue-rotate(100deg) brightness(1.6); transform: translateX(1px); } }
@keyframes ai-orb { 50% { transform: scale(1.05); box-shadow: inset 0 0 30px rgba(109, 158, 181, .3), 0 0 60px rgba(109, 158, 181, .28); } }
@keyframes conveyor { to { background-position: 24px 0; } }
.technique-strip { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 15px 12px; }
.technique-strip > span { flex: 0 0 auto; color: #788b81; font-size: 8px; }
#techniqueList { display: flex; flex-wrap: wrap; gap: 5px; }
#techniqueList em, .technique-chip { padding: 5px 7px; border: 1px solid rgba(213, 166, 79, .16); color: #736f62; background: rgba(255, 255, 255, .02); font-size: 7px; font-style: normal; }
.technique-chip { color: #d8bf81; border-color: rgba(213, 166, 79, .35); background: rgba(213, 166, 79, .055); }

/* Intelligence cards */
.side-intelligence { display: grid; gap: 10px; }
.causality-list { display: grid; gap: 6px; padding: 0 10px 10px; }
.cause-card { position: relative; padding: 9px 9px 9px 12px; border: 1px solid rgba(213, 166, 79, .17); background: rgba(213, 166, 79, .035); overflow: hidden; }
.cause-card:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.cause-card[data-risk="high"]:before { background: var(--red); }
.cause-card[data-risk="medium"]:before { background: #bc8d43; }
.cause-card header { display: flex; justify-content: space-between; gap: 8px; }
.cause-card strong { color: #d8cbb0; font-size: 8px; }
.cause-card time { color: #d7a75b; font-size: 7px; white-space: nowrap; }
.cause-card p { margin: 5px 0 0; color: #778a80; font-size: 7px; line-height: 1.5; }
.cause-card em { display: inline-block; margin-top: 5px; color: #bb786b; font-size: 6px; font-style: normal; }
.empty-card { padding: 12px; border: 1px dashed rgba(214, 202, 175, .13); color: #5f7068; font-size: 8px; text-align: center; }
.rival-card { display: grid; grid-template-columns: 42px 1fr; gap: 9px; align-items: center; padding: 0 11px 11px; }
.rival-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(196, 96, 77, .36); border-radius: 50%; color: #d28c7c; background: rgba(196, 96, 77, .06); }
.rival-card strong, .rival-card small { display: block; }
.rival-card strong { color: #d9cdb3; font-size: 10px; }
.rival-card small { margin-top: 2px; color: #9a7b74; font-size: 7px; }
.rival-card p { margin: 5px 0 0; color: #76877f; font-size: 7px; line-height: 1.45; }
.industry-metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
.industry-metrics > div { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 10px 3px 11px; border-right: 1px solid var(--line); }
.industry-metrics > div:last-child { border-right: 0; }
.industry-metrics span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(213, 166, 79, .24); border-radius: 50%; color: #d5b66e; font-size: 8px; }
.industry-metrics small { margin: 5px 0 2px; overflow: hidden; color: #6f8278; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.industry-metrics strong { color: #d9cfb8; font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Decision theatre */
.encounter-panel { margin-top: 12px; overflow: hidden; }
.chapter-line { display: flex; align-items: center; gap: 12px; padding: 13px 16px 10px; color: #94a69c; font-size: 9px; letter-spacing: .1em; }
.chapter-line i { height: 1px; flex: 1; background: var(--line); }
.chapter-line em { color: #c7ac77; font-style: normal; }
.encounter-card { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(440px, 1.7fr); margin: 0 14px; border: 1px solid rgba(214, 202, 175, .22); background: #eee6d3; color: var(--ink); box-shadow: 0 18px 45px rgba(0, 0, 0, .3); }
.event-art { position: relative; min-height: 280px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #29433b, #172a27 66%, #101b19); transition: .3s; }
.event-art[data-tone="gold"] { background: linear-gradient(165deg, #55452b, #25281e 62%, #151c19); }
.event-art[data-tone="red"] { background: linear-gradient(165deg, #5c322c, #29251f 62%, #151b18); }
.event-art:before { content: ""; position: absolute; width: 290px; height: 290px; border: 1px solid rgba(226, 199, 139, .16); border-radius: 50%; top: -160px; right: -70px; box-shadow: 0 0 80px rgba(213, 166, 79, .08); }
.sky-mark { position: relative; z-index: 1; color: rgba(240, 222, 180, .76); font-size: 72px; text-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.cityline { position: absolute; inset: auto 0 0; height: 74px; display: flex; align-items: end; justify-content: center; gap: 7px; opacity: .62; }
.cityline i { display: block; width: 30px; height: 38px; background: #0c1715; border-top: 2px solid rgba(213, 166, 79, .23); }
.cityline i:nth-child(2) { height: 55px; width: 42px; }
.cityline i:nth-child(3) { height: 31px; width: 57px; }
.cityline i:nth-child(4) { height: 62px; width: 30px; }
.cityline i:nth-child(5) { height: 27px; width: 62px; }
.event-art > span { position: absolute; z-index: 2; left: 11px; bottom: 9px; padding: 5px 7px; color: #c9d4cc; background: rgba(5, 10, 9, .64); font-size: 8px; letter-spacing: .1em; }
.event-body { padding: 19px 21px 18px; }
.event-kind { color: var(--red); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.event-body h2 { margin: 5px 0 7px; font-size: clamp(21px, 2vw, 29px); }
.event-body > p { margin: 0; color: #49554f; font-size: 11px; line-height: 1.75; }
.event-quote { margin: 10px 0 12px; padding-left: 11px; border-left: 2px solid rgba(184, 82, 63, .42); color: #756f62; font-size: 9px; font-style: italic; line-height: 1.55; }
.choices { display: grid; gap: 8px; }
.choice-button { width: 100%; display: grid; gap: 9px; padding: 11px 12px; border: 1px solid rgba(30, 49, 43, .19); background: rgba(255, 255, 255, .36); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.choice-button:hover:not(:disabled), .choice-button:focus-visible { border-color: rgba(49, 93, 80, .56); background: #faf5e9; transform: translateX(2px); }
.choice-button:disabled { opacity: .47; background: #dedbd2; }
.choice-title b, .choice-title small { display: block; }
.choice-title b { font-size: 11px; }
.choice-title small { margin-top: 2px; color: #69726d; font-size: 8px; line-height: 1.45; }
.choice-effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.effect-block { min-width: 0; padding: 6px 7px; border-left: 2px solid; background: rgba(255, 255, 255, .36); }
.effect-block.now { border-color: #4f8e70; }
.effect-block.market { border-color: #5b89a2; }
.effect-block.later { border-color: #c69847; }
.effect-block.team { border-color: #8c70a4; }
.effect-block.locked { border-color: #878b88; }
.effect-block span, .effect-block em { display: block; }
.effect-block span { color: #66726c; font-size: 6px; letter-spacing: .08em; }
.effect-block em { margin-top: 2px; overflow: hidden; color: #26352f; font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.choice-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.choice-footer strong { color: #315d50; font-size: 8px; }
.risk { padding: 3px 5px; border: 1px solid; font-size: 6px; font-style: normal; }
.risk.low { color: #3d765d; border-color: rgba(61, 118, 93, .34); background: rgba(61, 118, 93, .05); }
.risk.medium { color: #8d681e; border-color: rgba(167, 115, 28, .37); background: rgba(167, 115, 28, .05); }
.risk.high { color: #a94434; border-color: rgba(169, 68, 52, .4); background: rgba(169, 68, 52, .06); }
.choice-button.featured { border-color: #315d50; background: #18332a; color: #f2ead7; }
.choice-button.featured:hover:not(:disabled), .choice-button.featured:focus-visible { background: #234b3d; color: #fff7e5; border-color: #c7a358; }
.choice-button.featured .choice-title small { color: #b2c4bb; }
.choice-button.featured .effect-block { background: rgba(255, 255, 255, .04); }
.choice-button.featured .effect-block span { color: #9caea5; }
.choice-button.featured .effect-block em { color: #e3d8c1; }
.choice-button.featured .choice-footer strong { color: #efcd85; }
.event-resolution { padding: 10px 12px; border: 1px dashed rgba(49, 93, 80, .28); color: #6c766f; background: rgba(255, 255, 255, .18); font-size: 9px; line-height: 1.6; text-align: center; }
.strategy-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 15px 0; }
.strategy-heading span, .strategy-heading h2, .strategy-heading em { display: block; margin: 0; }
.strategy-heading span { color: #73857b; font-size: 7px; letter-spacing: .1em; }
.strategy-heading h2 { margin-top: 1px; font-size: 14px; }
.strategy-heading em { color: #b89e67; font-size: 8px; font-style: normal; }
.action-dock { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; padding: 10px 14px 14px; }
.strategy-card { position: relative; min-width: 0; }
.action-button { width: 100%; min-height: 82px; display: flex; align-items: flex-start; gap: 8px; padding: 10px 26px 9px 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); text-align: left; cursor: pointer; transition: .2s; }
.action-button:hover:not(:disabled), .action-button:focus-visible { border-color: rgba(111, 168, 142, .55); background: rgba(111, 168, 142, .08); transform: translateY(-2px); }
.action-button:disabled { opacity: .34; }
.action-button > i { display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border: 1px solid rgba(213, 166, 79, .28); border-radius: 50%; color: #d4b46e; font-size: 10px; font-style: normal; }
.action-button > span { min-width: 0; }
.action-button strong, .action-button small, .action-button em { display: block; }
.action-button strong { color: #ded5c0; font-size: 9px; }
.action-button small { margin-top: 3px; color: #7f9188; font-size: 7px; line-height: 1.3; }
.action-button em { margin-top: 7px; color: #bda66f; font-size: 6px; font-style: normal; line-height: 1.3; }
.strategy-info { position: absolute; z-index: 2; right: 5px; top: 5px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(109, 158, 181, .25); border-radius: 50%; background: rgba(10, 18, 16, .82); color: #8aa5b2; font-size: 8px; cursor: pointer; }

/* Team, details, chronicle */
.lower-grid { display: grid; grid-template-columns: 1.2fr .95fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.team-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 7px; padding: 0 10px 11px; }
.member-card { display: grid; grid-template-columns: 48px 1fr; gap: 9px; align-items: center; min-width: 0; padding: 9px; border: 1px solid rgba(214, 202, 175, .12); background: rgba(255, 255, 255, .02); text-align: left; cursor: pointer; }
.member-card:hover { border-color: rgba(213, 166, 79, .38); background: rgba(213, 166, 79, .045); }
.member-portrait { position: relative; display: grid; place-items: center; width: 45px; height: 50px; border: 1px solid rgba(213, 166, 79, .32); border-radius: 48% 48% 42% 42%; background: radial-gradient(circle at 50% 28%, #4b6b5d, #1a2924 66%); color: #edd7a5; }
.member-portrait:after { content: ""; position: absolute; left: 5px; right: 5px; bottom: -7px; height: 13px; border-radius: 8px 8px 2px 2px; background: #24362f; }
.member-portrait span { position: relative; z-index: 1; }
.member-portrait[data-mood="tired"] { filter: grayscale(.45); transform: translateY(3px); }
.member-portrait[data-mood="angry"] { border-color: rgba(196, 96, 77, .62); }
.member-card > div:last-child { min-width: 0; }
.member-card strong, .member-card small, .member-card em { display: block; }
.member-card strong { overflow: hidden; color: #d8cdb5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.member-card small { margin-top: 2px; overflow: hidden; color: #778a80; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.member-card em { margin-top: 5px; color: #9eb0a6; font-size: 6px; font-style: normal; }
.mini-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 5px; }
.mini-bars i { height: 3px; background: rgba(255, 255, 255, .07); }
.mini-bars i b { display: block; height: 100%; background: var(--jade); }
.mini-bars i:last-child b { background: var(--red); }
.company-detail-panel { min-height: 0; }
.company-detail-panel summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 15px; cursor: pointer; list-style: none; }
.company-detail-panel summary::-webkit-details-marker { display: none; }
.company-detail-panel summary span small, .company-detail-panel summary span strong { display: block; }
.company-detail-panel summary small { color: #71847a; font-size: 7px; }
.company-detail-panel summary strong { margin-top: 2px; font-size: 14px; }
.company-detail-panel summary > em { color: #8d9c94; font-size: 7px; font-style: normal; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.detail-grid > div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-grid > div:nth-child(3n) { border-right: 0; }
.detail-grid span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(111, 168, 142, .25); border-radius: 50%; color: #9db9a9; font-size: 8px; }
.detail-grid small { margin: 4px 0 2px; color: #6b7c73; font-size: 6px; }
.detail-grid strong { color: #d8cdb4; font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.company-detail-copy { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; }
.company-detail-copy strong, .company-detail-copy span, .company-detail-copy em { color: #8fa198; font-size: 7px; font-style: normal; }
.company-detail-copy strong { color: #c3b489; }
.chronicle-panel { min-height: 202px; }
#chronicle { max-height: 205px; overflow: auto; list-style: none; margin: 0; padding: 0 12px 12px; scrollbar-color: #435247 transparent; }
#chronicle li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(214, 202, 175, .08); }
#chronicle time { color: #aa9367; font-size: 7px; }
#chronicle p { margin: 0; color: #819188; font-size: 7px; line-height: 1.55; }

/* Dialogs */
.modal-layer { position: fixed; z-index: 400; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 9, 8, .74); backdrop-filter: blur(11px); opacity: 0; visibility: hidden; transition: .24s; }
.modal-layer.visible { opacity: 1; visibility: visible; }
.origin-dialog, .info-dialog, .ending-dialog, .settlement-dialog, .member-dialog, .codex-dialog { position: relative; width: min(880px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: clamp(22px, 4vw, 40px); border: 1px solid rgba(214, 202, 175, .27); background: linear-gradient(150deg, #1b2825, #101816); box-shadow: 0 30px 100px rgba(0, 0, 0, .52); }
.origin-dialog:before, .info-dialog:before, .ending-dialog:before, .settlement-dialog:before, .member-dialog:before, .codex-dialog:before { content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(214, 202, 175, .07); }
.modal-x { position: absolute; z-index: 2; top: 13px; right: 14px; border: 0; background: transparent; color: #81928a; font-size: 24px; cursor: pointer; }
.dialog-heading { display: grid; justify-items: center; text-align: center; }
.dialog-seal, .settlement-seal { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(111, 168, 142, .38); border-radius: 50%; color: #bfd8c9; background: rgba(111, 168, 142, .06); font-size: 18px; }
.dialog-heading p, .dialog-heading h2, .dialog-heading > span:last-child { margin: 0; }
.dialog-heading p { margin-top: 11px; color: #a99266; font-size: 9px; letter-spacing: .2em; }
.dialog-heading h2 { margin: 4px 0 6px; font-size: clamp(23px, 3vw, 33px); }
.dialog-heading > span:last-child { color: #869890; font-size: 9px; }
.company-input { display: grid; gap: 7px; }
.company-input span { color: #e5cd91; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.company-input input { width: 100%; min-height: 52px; border: 1px solid rgba(213, 166, 79, .58); border-radius: 2px; padding: 10px 14px; outline: 0; background: rgba(3, 8, 7, .56); color: #fff2d2; font-size: 20px; font-weight: 700; letter-spacing: .08em; box-shadow: inset 0 0 0 1px rgba(213, 166, 79, .07); transition: border-color .2s, box-shadow .2s, background .2s; }
.company-input input::placeholder { color: #7c887f; font-weight: 500; opacity: 1; }
.company-input input:focus { border-color: #e4bd63; background: rgba(6, 14, 12, .8); box-shadow: 0 0 0 3px rgba(213, 166, 79, .13), inset 0 0 0 1px rgba(235, 200, 120, .14); }
.company-input small { color: #81958b; font-size: 11px; line-height: 1.5; }
.setup-dialog { width: min(1040px, 100%); }
.setup-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 20px auto 17px; max-width: 790px; background: rgba(214, 202, 175, .11); }
.setup-progress button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border: 0; background: #111b18; color: #667a70; cursor: pointer; }
.setup-progress button.active { background: #263d35; color: #ead5a3; }
.setup-progress i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 7px; font-style: normal; }
.setup-progress span { font-size: 8px; letter-spacing: .08em; }
.setup-step[hidden] { display: none; }
.setup-step.active { display: block; animation: setup-enter .3s ease both; }
.company-name-card { position: relative; display: grid; grid-template-columns: .92fr 1.28fr .86fr; align-items: stretch; gap: 18px; margin: 7px 0 20px; padding: 18px; overflow: hidden; border: 1px solid rgba(213, 166, 79, .48); border-left: 4px solid #d5a64f; background: linear-gradient(115deg, rgba(213, 166, 79, .12), rgba(111, 168, 142, .065) 54%, rgba(3, 9, 7, .28)); box-shadow: 0 12px 34px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 231, 174, .035); transition: border-color .2s, box-shadow .2s; }
.company-name-card:after { content: "名"; position: absolute; right: -9px; bottom: -29px; color: rgba(213, 166, 79, .045); font-size: 112px; line-height: 1; pointer-events: none; }
.company-name-card:focus-within { border-color: rgba(235, 198, 112, .88); box-shadow: 0 14px 40px rgba(0, 0, 0, .27), 0 0 0 3px rgba(213, 166, 79, .08); }
.company-name-intro, .company-name-editor, .company-name-preview { position: relative; z-index: 1; }
.setup-priority { display: inline-flex; padding: 4px 8px; border: 1px solid rgba(220, 177, 87, .52); color: #f0cc78; background: rgba(213, 166, 79, .1); font-size: 11px; font-weight: 700; letter-spacing: .11em; }
.company-name-intro h3 { margin: 9px 0 5px; color: #f4e7ca; font-size: 21px; line-height: 1.2; }
.company-name-intro p { margin: 0; color: #9caea5; font-size: 12px; line-height: 1.65; }
.company-name-editor { display: grid; align-content: center; gap: 9px; }
.name-random, .secondary-button { padding: 10px 14px; border: 1px solid rgba(214, 202, 175, .2); background: rgba(255, 255, 255, .025); color: #9caea5; cursor: pointer; }
.company-name-editor .name-random { justify-self: start; padding: 7px 10px; color: #d9c38e; font-size: 12px; }
.name-random:hover, .secondary-button:hover { border-color: rgba(213, 166, 79, .48); color: #e7ca8a; }
.name-random:focus-visible, .secondary-button:focus-visible { outline: 2px solid #e1b85e; outline-offset: 2px; }
.company-name-preview { display: grid; align-content: center; justify-items: center; min-height: 112px; padding: 14px; border: 1px solid rgba(111, 168, 142, .23); background: linear-gradient(180deg, rgba(6, 16, 13, .74), rgba(11, 25, 20, .64)); text-align: center; }
.company-name-preview span { color: #7f968a; font-size: 11px; letter-spacing: .12em; }
.company-name-preview strong { width: 100%; margin: 8px 0 5px; overflow: hidden; color: #7e9187; font-size: clamp(18px, 2.1vw, 25px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.company-name-preview em { color: #809087; font-size: 11px; font-style: normal; line-height: 1.4; }
.company-name-card.has-name { border-left-color: #6fa88e; }
.company-name-card.has-name .company-name-preview { border-color: rgba(111, 168, 142, .52); box-shadow: inset 0 0 24px rgba(111, 168, 142, .08); }
.company-name-card.has-name .company-name-preview strong { color: #f2dda8; text-shadow: 0 0 18px rgba(213, 166, 79, .18); }
.company-name-card.has-name .company-name-preview em { color: #9bc3ad; }
.company-name-card.needs-name { border-color: rgba(199, 79, 62, .88); border-left-color: #c74f3e; animation: naming-attention .34s ease both; }
.company-name-card.needs-name .company-input input { border-color: #cf6556; box-shadow: 0 0 0 3px rgba(199, 79, 62, .14); }
.company-name-card.needs-name .company-name-preview em { color: #e78f7f; }
.setup-question { margin: 11px 0; color: #cbb887; font-size: 10px; letter-spacing: .12em; text-align: center; }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.origin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.setup-option { position: relative; min-height: 167px; padding: 15px 12px 13px; border: 1px solid rgba(214, 202, 175, .15); background: rgba(255, 255, 255, .02); color: #e9dfc9; text-align: center; cursor: pointer; transition: .2s; }
.setup-option:hover, .setup-option:focus-visible { border-color: rgba(213, 166, 79, .48); background: rgba(213, 166, 79, .05); transform: translateY(-2px); }
.setup-option.selected { border-color: #6fa88e; background: rgba(70, 124, 99, .17); box-shadow: inset 0 0 0 1px rgba(111, 168, 142, .15); }
.setup-option.selected:after { content: "已選"; position: absolute; right: 7px; top: 7px; padding: 2px 5px; color: #cbe2d5; background: #315a49; font-size: 6px; letter-spacing: .08em; }
.setup-option small, .setup-option strong, .setup-option p, .setup-option em { display: block; }
.setup-option small { color: #ae9769; font-size: 7px; letter-spacing: .1em; }
.setup-option strong { margin: 4px 0 7px; font-size: 13px; }
.setup-option p { margin: 0; min-height: 43px; color: #8ea096; font-size: 8px; line-height: 1.6; }
.setup-option em { margin-top: 6px; color: #ccb277; font-size: 7px; font-style: normal; }
.origin-glyph { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 8px; border: 1px solid rgba(111, 168, 142, .38); border-radius: 50%; color: #b9d1c2; background: rgba(111, 168, 142, .06); font-size: 14px; }
.setup-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.setup-nav .primary-button { margin-top: 0; }
.setup-summary { margin: 14px 0 4px; padding: 11px; border: 1px dashed rgba(213, 166, 79, .3); color: #d8c69a; background: rgba(213, 166, 79, .04); font-size: 9px; text-align: center; }
.legacy-setup { margin-top: 12px; padding: 10px; border: 1px solid rgba(154, 128, 183, .25); background: rgba(154, 128, 183, .035); }
.legacy-setup > p { margin: 0 0 8px; color: #aa91bf; font-size: 8px; text-align: center; }
#legacyOptions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.legacy-option { padding: 7px 9px; border: 1px solid rgba(154, 128, 183, .25); background: transparent; color: #9e8aa9; font-size: 7px; cursor: pointer; }
.legacy-option.selected { border-color: #a886bd; color: #e0cce9; background: rgba(154, 128, 183, .12); }
.dialog-foot { margin: 15px 0 0; color: #65766e; font-size: 8px; text-align: center; }
.primary-button { margin-top: 17px; min-width: 150px; padding: 10px 18px; border: 1px solid #ba9651; background: #a97830; color: #fff1d5; cursor: pointer; }
.info-dialog, .ending-dialog { width: min(620px, 100%); text-align: center; }
.eyebrow { margin: 0; color: #a68f64; font-size: 8px; letter-spacing: .17em; }
.info-dialog h2, .ending-dialog h2, .settlement-dialog h2, .member-dialog h2 { margin: 5px 0 13px; font-size: 27px; }
#infoContent, #endingText { color: #99a89f; font-size: 10px; line-height: 1.85; text-align: left; }
#infoContent ul { margin: 11px 0; padding-left: 18px; }
.settlement-dialog { width: min(460px, 100%); text-align: center; }
.settlement-seal { margin: 0 auto 12px; }
.settlement-lines { display: grid; gap: 6px; margin-top: 15px; }
.settlement-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--line); opacity: 0; transform: translateY(5px); animation: settle-line .3s ease forwards; animation-delay: calc(var(--line-index) * 160ms); }
.settlement-line span { color: #899991; font-size: 9px; }
.settlement-line strong { font: 600 11px ui-monospace, monospace; }
.settlement-line.gain strong { color: #9fd1b7; }
.settlement-line.cost strong { color: #d78878; }
.settlement-net { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; padding: 12px; border-top: 1px solid rgba(213, 166, 79, .35); color: #d7c59a; }
.settlement-net strong { font: 600 17px ui-monospace, monospace; }
#settlementCause { margin: 10px 0 0; color: #b49766; font-size: 8px; line-height: 1.5; }
@keyframes settle-line { to { opacity: 1; transform: translateY(0); } }
.member-dialog { width: min(430px, 100%); text-align: center; }
.member-portrait.large { width: 78px; height: 88px; margin: 0 auto 18px; font-size: 22px; }
.member-dialog > p:not(.eyebrow):not(.member-goal) { color: #8d9d95; font-size: 9px; }
.relationship-bars { display: grid; gap: 8px; margin: 17px 0; text-align: left; }
.relationship-bars > div { display: grid; grid-template-columns: 40px 1fr 30px; gap: 8px; align-items: center; color: #85968d; font-size: 8px; }
.relationship-bars i { height: 5px; background: rgba(255, 255, 255, .06); }
.relationship-bars i b { display: block; height: 100%; background: var(--jade); }
.relationship-bars > div:last-child i b { background: var(--red); }
.member-dialog blockquote { margin: 17px 0; padding: 13px; border: 1px solid rgba(213, 166, 79, .2); color: #d2c08e; background: rgba(213, 166, 79, .04); font-size: 10px; line-height: 1.65; }
.member-goal { color: #83958c; font-size: 8px; }
.codex-dialog { width: min(900px, 100%); text-align: center; }
.codex-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 18px 0; }
.codex-stats div { padding: 11px; border: 1px solid var(--line); }
.codex-stats small, .codex-stats strong { display: block; }
.codex-stats small { color: #71837a; font-size: 7px; }
.codex-stats strong { margin-top: 4px; color: #dcc37f; font: 600 16px ui-monospace, monospace; }
.codex-sections { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; text-align: left; }
.codex-sections section { padding: 12px; border: 1px solid var(--line); }
.codex-sections h3 { margin: 0 0 9px; color: #c9b481; font-size: 10px; }
.codex-chip { display: block; margin-top: 5px; padding: 7px; border: 1px solid rgba(214, 202, 175, .1); color: #86978e; background: rgba(255, 255, 255, .018); font-size: 7px; }
.codex-chip.unlocked { color: #c7daca; border-color: rgba(119, 173, 148, .3); }
.ending-mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 15px; color: #f0d79f; border: 1px solid rgba(213, 166, 79, .5); border-radius: 50%; font-size: 27px; box-shadow: 0 0 42px rgba(213, 166, 79, .12); }
.ending-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 17px; }
.ending-stats div { padding: 9px; border: 1px solid var(--line); }
.ending-stats small, .ending-stats strong { display: block; }
.ending-stats small { color: #75867e; font-size: 7px; }
.ending-stats strong { margin-top: 3px; color: #dfc583; font-size: 13px; }
.founder-verdict { margin: 13px 0 0; padding: 11px; border: 1px solid rgba(213, 166, 79, .22); color: #d7c38f; background: rgba(213, 166, 79, .05); font-size: 9px; line-height: 1.65; }
.ending-team { margin: 11px 0 0; color: #9eb0a6; font-size: 8px; line-height: 1.6; }
.ending-rarity { color: #8e9f96; font-size: 8px; }
.ending-actions { display: flex; justify-content: center; gap: 8px; margin-top: 17px; }
.ending-actions .primary-button { margin-top: 0; }
#endingModal[data-tone="victory"] .ending-mark { color: #cfe9d9; border-color: var(--jade); box-shadow: 0 0 50px rgba(111, 168, 142, .24); }
#endingModal[data-tone="failure"] .ending-mark { color: #e5aa9b; border-color: var(--red); }
.toast-region { position: fixed; z-index: 500; right: 17px; bottom: 17px; display: grid; gap: 7px; }
.toast { padding: 10px 13px; border: 1px solid rgba(213, 166, 79, .28); background: #18221f; box-shadow: 0 12px 35px rgba(0, 0, 0, .35); color: #d9d1bd; font-size: 9px; animation: toast-in .3s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes setup-enter { from { opacity: 0; transform: translateY(5px); } }
@keyframes naming-attention { 30% { transform: translateX(-4px); } 65% { transform: translateX(4px); } }

.mobile-nav { display: none; }

@media (max-width: 1220px) {
  .world-grid { grid-template-columns: minmax(210px, .65fr) minmax(500px, 1.55fr); }
  .side-intelligence { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .objective-panel, .company-world { min-height: 430px; }
  .action-dock { grid-template-columns: repeat(3, 1fr); }
  .lower-grid { grid-template-columns: 1.2fr .8fr; }
  .chronicle-panel { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
  .game-shell { padding: 10px 10px 88px; }
  .topbar { grid-template-columns: 1fr auto; gap: 8px; }
  .season-clock { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; text-align: left; }
  .top-actions { grid-column: 2; grid-row: 1; }
  .top-actions .volume-control, .top-actions #helpButton { display: none; }
  .survival-strip { position: sticky; z-index: 20; top: 0; grid-template-columns: repeat(2, 1fr); }
  .vital { border-bottom: 1px solid var(--line); }
  .vital:nth-child(even) { border-right: 0; }
  .vital:nth-last-child(-n + 2) { border-bottom: 0; }
  .world-grid { display: flex; flex-direction: column; }
  .objective-panel, .company-world { min-height: 0; }
  .company-world { order: -1; }
  .office-scene { height: 360px; }
  .side-intelligence { display: grid; grid-template-columns: 1fr; }
  .encounter-card { grid-template-columns: 1fr; }
  .encounter-panel { min-height: calc(100dvh - 174px); }
  .encounter-card { min-height: calc(100dvh - 235px); align-content: start; }
  .event-art { min-height: 160px; }
  .choices { max-height: 46dvh; padding-right: 3px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; }
  .choice-button { min-height: 138px; align-content: center; scroll-snap-align: start; }
  .action-dock { grid-template-columns: repeat(2, 1fr); }
  .lower-grid { display: flex; flex-direction: column; }
  .lower-grid > * { width: 100%; }
  .mobile-nav { position: fixed; z-index: 120; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(214, 202, 175, .2); background: rgba(9, 15, 13, .96); backdrop-filter: blur(12px); }
  .mobile-nav button { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; background: transparent; color: #667970; cursor: pointer; }
  .mobile-nav button.active { color: #e1c57f; background: rgba(213, 166, 79, .06); }
  .mobile-nav i { font-size: 12px; font-style: normal; }
  .mobile-nav span { font-size: 7px; }
  body[data-mobile-view] .mobile-section { display: none; }
  body[data-mobile-view="company"] [data-mobile-section="company"],
  body[data-mobile-view="decision"] [data-mobile-section="decision"],
  body[data-mobile-view="team"] [data-mobile-section="team"],
  body[data-mobile-view="chronicle"] [data-mobile-section="chronicle"] { display: block; }
  body[data-mobile-view="company"] .side-intelligence.mobile-section { display: grid; }
  .codex-sections { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .company-name-card { grid-template-columns: .9fr 1.3fr; gap: 13px; }
  .company-name-preview { grid-column: 1 / -1; min-height: 84px; }
  .setup-option { min-height: 155px; }
}

@media (max-width: 540px) {
  .brand-lockup p { display: none; }
  .brand-lockup h1 { max-width: 145px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .brand-seal { width: 36px; height: 36px; }
  .top-actions #codexButton, .top-actions #restartButton { display: none; }
  .survival-strip { margin-inline: -10px; }
  .vital { padding: 10px 11px; }
  .vital strong { font-size: 15px; }
  .vital em { font-size: 7px; }
  .office-scene { height: 310px; margin-inline: 9px; }
  .world-heading { align-items: flex-start; flex-direction: column; }
  .world-heading > strong { max-width: none; text-align: left; }
  .office-people { gap: 2px; }
  .office-person { width: 50px; }
  .encounter-card { margin-inline: 8px; }
  .event-body { padding: 16px 14px; }
  .event-body h2 { font-size: 21px; }
  .choice-effects { grid-template-columns: 1fr; }
  .action-dock { grid-template-columns: 1fr; padding-inline: 9px; }
  .action-button { min-height: 70px; }
  .team-list { grid-template-columns: 1fr; }
  .industry-grid, .origin-grid { grid-template-columns: 1fr; }
  .company-name-card { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .company-name-preview { grid-column: auto; min-height: 90px; }
  .company-name-intro h3 { font-size: 19px; }
  .company-input input { min-height: 50px; font-size: 18px; }
  .company-name-editor .name-random { justify-self: stretch; }
  .setup-option { min-height: 0; }
  .setup-option p { min-height: 0; }
  .setup-progress span { display: none; }
  .setup-nav { align-items: stretch; flex-direction: column-reverse; }
  .setup-nav button { width: 100%; }
  .modal-layer { padding: 9px; }
  .origin-dialog, .info-dialog, .ending-dialog, .settlement-dialog, .member-dialog, .codex-dialog { max-height: calc(100vh - 18px); padding: 24px 17px; }
  .ending-stats, .codex-stats { grid-template-columns: repeat(2, 1fr); }
  .ending-actions { flex-direction: column; }
  .ending-actions button { width: 100%; }
  .cinematic-image { background-position: 66% center; }
  .cinematic-vignette { background: radial-gradient(circle at 65% 34%, transparent, rgba(1, 3, 2, .75) 70%); }
  .cinematic-sound { bottom: 70px; }
  .title-art { inset: 0 0 auto; height: 40vh; background-size: contain; background-position: top center; background-repeat: no-repeat; }
  .title-shade { background: linear-gradient(0deg, #070b09 53%, transparent 82%); }
  .title-menu { left: 12px; right: 12px; bottom: 14px; width: auto; padding: 18px 16px 14px; }
  .title-menu h2 { font-size: 23px; }
  .title-version { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Living cast and founder avatar */
.founder-avatar { --skin: #e1ad8e; --skin-shadow: #a96f5f; --hair: #161a1a; --cloth: #202a27; position: relative; display: block; width: 92px; height: 132px; flex: 0 0 auto; isolation: isolate; }
.founder-avatar[data-tone="honey"] { --skin: #c98962; --skin-shadow: #895443; }
.founder-avatar[data-tone="bronze"] { --skin: #986044; --skin-shadow: #653d34; }
.avatar-aura { position: absolute; z-index: -1; inset: 11% 5% 6%; border-radius: 48%; background: radial-gradient(circle, rgba(100, 169, 137, .24), transparent 66%); opacity: .2; filter: blur(8px); }
.avatar-body { position: absolute; z-index: 1; left: 12%; right: 12%; bottom: 0; height: 52%; overflow: hidden; border: 1px solid rgba(213, 166, 79, .35); border-radius: 40% 40% 8% 8%; background: linear-gradient(100deg, #111817, var(--cloth) 48%, #0d1312); box-shadow: inset 0 0 18px rgba(111, 168, 142, .12); }
.avatar-body:before, .avatar-body:after { content: ""; position: absolute; top: 8%; width: 36%; height: 110%; border: 1px solid rgba(213, 166, 79, .24); }
.avatar-body:before { left: -8%; transform: skewX(14deg); }
.avatar-body:after { right: -8%; transform: skewX(-14deg); }
.avatar-body b { position: absolute; left: 50%; top: 4%; width: 2px; height: 82%; background: linear-gradient(rgba(213, 166, 79, .5), transparent); transform: translateX(-50%); }
.founder-avatar[data-outfit="hoodie"] { --cloth: #28332f; }
.founder-avatar[data-outfit="hoodie"] .avatar-body { border-radius: 45% 45% 8% 8%; }
.founder-avatar[data-outfit="hoodie"] .avatar-body:before { left: 22%; top: -2%; width: 54%; height: 28%; border-radius: 50%; transform: none; }
.founder-avatar[data-outfit="jacket"] { --cloth: #254437; }
.founder-avatar[data-outfit="suit"] { --cloth: #252b35; }
.founder-avatar[data-outfit="suit"] .avatar-body b { width: 18%; height: 32%; border-right: 1px solid rgba(218, 211, 193, .65); border-left: 1px solid rgba(218, 211, 193, .65); background: transparent; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.avatar-neck { position: absolute; z-index: 2; left: 42%; top: 43%; width: 16%; height: 18%; border-radius: 0 0 45% 45%; background: linear-gradient(90deg, var(--skin-shadow), var(--skin) 45%, var(--skin-shadow)); }
.avatar-face { position: absolute; z-index: 4; left: 29%; top: 15%; width: 42%; height: 39%; border: 1px solid rgba(255, 224, 191, .25); border-radius: 46% 46% 50% 50%; background: linear-gradient(120deg, var(--skin), color-mix(in srgb, var(--skin) 76%, #fff)); box-shadow: inset -5px -5px 8px rgba(93, 45, 36, .13); }
.founder-avatar[data-identity="masculine"] .avatar-body { left: 8%; right: 8%; border-radius: 34% 34% 8% 8%; }
.founder-avatar[data-identity="masculine"] .avatar-face { left: 28%; width: 44%; border-radius: 42% 42% 48% 48%; }
.founder-avatar[data-identity="feminine"] .avatar-body { left: 15%; right: 15%; border-radius: 45% 45% 8% 8%; }
.founder-avatar[data-identity="feminine"] .avatar-face { left: 30%; width: 40%; border-radius: 49% 49% 52% 52%; }
.founder-avatar[data-face="warm"] .avatar-face { width: 44%; left: 28%; border-radius: 50% 50% 46% 46%; }
.founder-avatar[data-face="steady"] .avatar-face { width: 46%; left: 27%; border-radius: 42% 42% 50% 50%; }
.avatar-eye, .avatar-brow { position: absolute; width: 18%; height: 2px; background: #2c211f; }
.avatar-eye { top: 48%; border-radius: 50%; }
.avatar-eye.left, .avatar-brow.left { left: 18%; }
.avatar-eye.right, .avatar-brow.right { right: 18%; }
.avatar-brow { top: 37%; height: 1px; transform: rotate(-5deg); }
.avatar-brow.right { transform: rotate(5deg); }
.avatar-mouth { position: absolute; left: 40%; bottom: 18%; width: 20%; height: 5%; border-bottom: 1px solid #763f3b; border-radius: 50%; }
.avatar-hair-back { position: absolute; z-index: 2; left: 19%; top: 8%; width: 62%; height: 52%; border-radius: 50% 50% 40% 40%; background: linear-gradient(125deg, #2e3331, var(--hair) 48%, #080b0b); box-shadow: 0 0 0 1px rgba(110, 159, 138, .2); }
.avatar-hair-front { position: absolute; z-index: 5; left: 24%; top: 9%; width: 55%; height: 28%; border-radius: 65% 45% 35% 20%; background: linear-gradient(150deg, #343a37, var(--hair) 66%); transform: rotate(-4deg); clip-path: polygon(0 0, 100% 0, 88% 42%, 72% 31%, 57% 75%, 40% 40%, 22% 88%, 0 62%); }
.founder-avatar[data-hair="cropped"] .avatar-hair-back { height: 39%; border-radius: 52% 52% 30% 30%; }
.founder-avatar[data-hair="tied"] .avatar-hair-back:after { content: ""; position: absolute; right: -18%; top: 32%; width: 30%; height: 48%; border-radius: 50% 20% 50% 30%; background: var(--hair); transform: rotate(-12deg); }
.founder-avatar[data-hair="long"] .avatar-hair-back { left: 13%; width: 74%; height: 75%; border-radius: 48% 48% 26% 26%; }
.founder-avatar[data-hair="wave"] .avatar-hair-back { left: 13%; width: 74%; height: 64%; border-radius: 48% 48% 35% 35%; box-shadow: -6px 8px 0 -2px #202523, 7px 10px 0 -3px #111514; }
.avatar-mark { position: absolute; z-index: 6; left: 50%; bottom: 29%; width: 10px; height: 10px; border: 1px solid rgba(213, 166, 79, .7); border-radius: 50%; box-shadow: 0 0 10px rgba(213, 166, 79, .18); transform: translateX(-50%); }
.founder-avatar[data-origin="builder"] .avatar-mark { border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.founder-avatar[data-origin="seller"] .avatar-mark { border-color: rgba(196, 96, 77, .7); }
.founder-avatar[data-origin="operator"] .avatar-mark { border-color: rgba(109, 158, 181, .75); border-width: 2px; }
.founder-avatar[data-origin="builder"] .avatar-body { box-shadow: inset 0 0 22px rgba(83, 151, 121, .18); }
.founder-avatar[data-origin="seller"] .avatar-body { box-shadow: inset 0 0 22px rgba(157, 73, 62, .18); }
.founder-avatar[data-origin="operator"] .avatar-body { box-shadow: inset 0 0 22px rgba(82, 126, 151, .2); }
.founder-avatar[data-expression="happy"] .avatar-eye { height: 4px; background: transparent; border-top: 1px solid #2c211f; border-radius: 50%; }
.founder-avatar[data-expression="happy"] .avatar-mouth { height: 8%; border-bottom-width: 2px; }
.founder-avatar[data-expression="tired"] .avatar-eye { top: 51%; transform: rotate(8deg); opacity: .65; }
.founder-avatar[data-expression="tired"] .avatar-mouth { border-radius: 0; transform: rotate(-5deg); }
.founder-avatar[data-expression="anxious"] .avatar-brow.left { transform: rotate(13deg); }
.founder-avatar[data-expression="anxious"] .avatar-brow.right { transform: rotate(-13deg); }
.founder-avatar[data-expression="determined"] .avatar-brow.left { transform: rotate(-12deg); }
.founder-avatar[data-expression="determined"] .avatar-brow.right { transform: rotate(12deg); }
.founder-avatar[data-expression="possessed"] { filter: saturate(.65) contrast(1.12); }
.founder-avatar[data-expression="possessed"] .avatar-eye { height: 3px; background: #d96952; box-shadow: 0 0 8px #c95a45; }
.founder-avatar[data-expression="possessed"] .avatar-aura { background: radial-gradient(circle, rgba(199, 80, 60, .48), transparent 65%); opacity: 1; animation: avatar-danger 1.1s ease-in-out infinite; }
.founder-avatar[data-realm="1"] .avatar-body { border-color: rgba(111, 168, 142, .62); box-shadow: inset 0 0 20px rgba(111, 168, 142, .18); }
.founder-avatar[data-realm="2"] .avatar-body { border-color: rgba(213, 166, 79, .72); box-shadow: inset 0 0 24px rgba(213, 166, 79, .16); }
.founder-avatar[data-realm="2"] .avatar-mark { box-shadow: 0 0 16px rgba(213, 166, 79, .55); }
.founder-avatar[data-realm="3"] .avatar-aura { inset: 2% -10% -4%; opacity: .9; background: radial-gradient(circle, rgba(213, 166, 79, .3), rgba(111, 168, 142, .12) 42%, transparent 70%); animation: avatar-aura 2.4s ease-in-out infinite; }
.founder-avatar[data-realm="3"] .avatar-body { border-color: #d5ad5d; box-shadow: inset 0 0 28px rgba(213, 166, 79, .24), 0 0 20px rgba(213, 166, 79, .16); }
@keyframes avatar-aura { 50% { transform: scale(1.08); opacity: .58; } }
@keyframes avatar-danger { 50% { transform: scale(.93); opacity: .52; } }

.character-portrait { position: relative; display: block; width: 78px; height: 104px; flex: 0 0 auto; background-image: var(--portrait-image); background-repeat: no-repeat; background-position: var(--portrait-x, 0%) bottom; background-size: 500% auto; }
.character-portrait > i { display: none; }
.character-portrait > em { position: absolute; z-index: 3; left: 50%; bottom: -3px; width: max-content; max-width: 94px; padding: 2px 4px; border: 1px solid rgba(213, 166, 79, .2); background: rgba(7, 13, 11, .82); color: #bda875; font-size: 5px; font-style: normal; opacity: 0; transform: translateX(-50%); }
.character-portrait.fallback { display: grid; place-items: center; border: 1px solid rgba(213, 166, 79, .32); border-radius: 45% 45% 12% 12%; background: linear-gradient(#355347, #14221d); }
.character-portrait.fallback > i { display: block; color: #ead4a3; font-size: 16px; font-style: normal; }
.character-portrait.card { width: 58px; height: 74px; margin: -6px -3px -5px; }
.founder-avatar.card { width: 58px; height: 78px; margin: -5px -3px -5px; }
.character-portrait.scene { width: 68px; height: 112px; }
.founder-avatar.scene { width: 70px; height: 110px; }
.character-portrait.large { width: 178px; height: 218px; margin: 0 auto 14px; }
.character-portrait.large > em { bottom: 2px; opacity: 1; font-size: 7px; }
.character-portrait.founder-host { display: grid; place-items: center; background: radial-gradient(circle, rgba(213, 166, 79, .08), transparent 68%); }
.founder-avatar.modal { width: 148px; height: 205px; }
.character-portrait.ending, .founder-avatar.ending { width: 84px; height: 112px; }

.member-card { grid-template-columns: 58px 1fr; min-height: 92px; overflow: hidden; }
.member-card.joining { border-color: rgba(213, 166, 79, .58); animation: member-join 1s ease both; }
.member-card .character-portrait { align-self: end; }
.member-card em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; }
@keyframes member-join { from { opacity: .25; transform: translateY(8px); box-shadow: 0 0 30px rgba(213, 166, 79, .3); } }

/* Modular miniature company */
.facility-layer { position: absolute; z-index: 1; inset: 65px 18px 56px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 8px; pointer-events: none; perspective: 520px; }
.facility-layer > span { position: relative; display: grid; place-items: center; min-height: 56px; padding: 7px 4px; border: 1px solid rgba(213, 166, 79, .12); background: linear-gradient(145deg, rgba(26, 45, 38, .88), rgba(7, 14, 12, .9)); box-shadow: 6px -5px 0 rgba(10, 23, 19, .65); opacity: 0; transform: translateY(18px) rotateX(7deg); transition: opacity .5s, transform .5s; }
.facility-layer > span.active { opacity: .84; transform: translateY(0) rotateX(7deg); }
.facility-layer i, .facility-layer b { display: block; font-style: normal; text-align: center; }
.facility-layer i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(111, 168, 142, .35); border-radius: 5px; color: #b5cfbf; background: rgba(111, 168, 142, .06); font-size: 9px; }
.facility-layer b { margin-top: 5px; color: #7f9488; font-size: 5px; font-weight: 500; }
.facility-layer [data-facility="1"] { min-height: 72px; }
.facility-layer [data-facility="2"] { min-height: 91px; }
.facility-layer [data-facility="3"] { min-height: 116px; border-color: rgba(213, 166, 79, .3); }
.office-scene[data-industry="consumer"] .facility-layer > span { border-radius: 12px 12px 3px 3px; }
.office-scene[data-industry="ecommerce"] .facility-layer > span { background: linear-gradient(145deg, rgba(79, 57, 34, .88), rgba(20, 15, 11, .94)); }
.office-scene[data-industry="ai"] .facility-layer [data-facility="2"] { box-shadow: inset 0 0 24px rgba(91, 137, 163, .25), 0 0 18px rgba(91, 137, 163, .14); }
.office-scene[data-industry="traditional"] .facility-layer > span { border-radius: 1px; background: linear-gradient(145deg, rgba(65, 65, 58, .9), rgba(19, 23, 21, .96)); }
.office-scene[data-industry="traditional"] .facility-layer [data-facility="1"]:after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 12px; height: 5px; background: repeating-linear-gradient(90deg, #927146 0 5px, #202b27 6px 10px); }
.office-scene[data-industry="consulting"] .facility-layer > span { background: linear-gradient(145deg, rgba(53, 66, 60, .92), rgba(15, 22, 19, .95)); }
.office-scene[data-group="true"] .facility-layer [data-facility="3"]:after { content: "副事業"; position: absolute; right: -18px; top: 18px; width: 42px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(213, 166, 79, .34); background: #172923; color: #d2b974; font-size: 5px; transform: translateX(100%); }
.scene-plant { position: absolute; z-index: 4; left: 16px; bottom: 51px; width: 28px; height: 48px; pointer-events: none; }
.scene-plant b { position: absolute; left: 7px; bottom: 0; width: 17px; height: 17px; border: 1px solid #8b6c46; background: #4a3522; }
.scene-plant i, .scene-plant i:before, .scene-plant i:after { position: absolute; content: ""; width: 19px; height: 10px; border-radius: 90% 15% 90% 15%; background: #4f876b; transform-origin: right center; }
.scene-plant i { left: -1px; top: 10px; transform: rotate(22deg); }
.scene-plant i:before { left: 10px; top: 8px; transform: rotate(110deg); }
.scene-plant i:after { left: 17px; top: 2px; transform: rotate(165deg); }
.office-scene[data-health="low-cash"] .scene-plant i { background: #655a3d; transform: translateY(11px) rotate(65deg); }
.office-scene[data-health="low-cash"] .facility-layer [data-facility="2"], .office-scene[data-health="low-cash"] .facility-layer [data-facility="3"] { opacity: .08; }
.scene-client-wall { position: absolute; z-index: 4; right: 13px; top: 93px; display: grid; place-items: center; width: 54px; height: 39px; border: 1px solid rgba(213, 166, 79, .38); background: rgba(12, 25, 21, .86); opacity: 0; transform: rotate(2deg) scale(.8); transition: .35s; }
.scene-client-wall span { color: #d9bf7c; font-size: 6px; }
.office-scene[data-client="true"] .scene-client-wall { opacity: 1; transform: rotate(2deg) scale(1); box-shadow: 0 0 20px rgba(213, 166, 79, .16); }
.scene-vacancy { position: absolute; z-index: 4; left: 18%; bottom: 57px; display: none; width: 47px; height: 33px; border: 1px solid rgba(205, 167, 102, .32); background: #4b3926; transform: rotate(-3deg); }
.scene-vacancy:before, .scene-vacancy:after { content: ""; position: absolute; top: -8px; width: 27px; height: 14px; border: 1px solid rgba(205, 167, 102, .32); background: #5c442b; }
.scene-vacancy:before { left: -2px; transform: rotate(-25deg); }
.scene-vacancy:after { right: -2px; transform: rotate(25deg); }
.scene-vacancy span { position: absolute; inset: 0; display: grid; place-items: center; color: #c3a778; font-size: 5px; }
.office-scene[data-vacancy="true"] .scene-vacancy { display: block; }
.scene-night { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(rgba(4, 10, 18, .46), rgba(4, 9, 15, .22)); opacity: 0; transition: .4s; }
.scene-night i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(87, 129, 154, .12); transform: rotate(17deg); }
.scene-night i:nth-child(1) { left: 24%; }.scene-night i:nth-child(2) { left: 53%; }.scene-night i:nth-child(3) { left: 78%; }
.office-scene[data-night="true"] .scene-night { opacity: 1; }
.office-scene[data-night="true"] .office-glow { background: radial-gradient(circle at 50% 70%, rgba(86, 137, 163, .2), transparent 45%); }
.scene-moment { position: absolute; z-index: 9; top: 42px; right: 9px; width: min(235px, 45%); padding: 8px 9px; border: 1px solid rgba(213, 166, 79, .38); background: rgba(8, 16, 14, .92); color: #ddd2b8; text-align: left; cursor: pointer; box-shadow: 0 12px 35px rgba(0, 0, 0, .32); }
.scene-moment:hover, .scene-moment:focus-visible { border-color: #d6b66a; background: #172923; }
.scene-moment[hidden] { display: none; }
.scene-moment span, .scene-moment strong, .scene-moment em { display: block; }
.scene-moment span { color: #b09562; font-size: 5px; letter-spacing: .14em; }
.scene-moment strong { margin-top: 3px; font-size: 8px; }
.scene-moment em { margin-top: 3px; color: #82968b; font-size: 6px; font-style: normal; line-height: 1.4; }

.office-people { z-index: 7; gap: clamp(0px, 1.1vw, 10px); pointer-events: none; }
.office-person { position: relative; width: 72px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; pointer-events: auto; }
.office-person:hover { z-index: 8; transform: translateY(-4px); }
.office-person .character-portrait, .office-person .founder-avatar { margin-inline: auto; }
.office-person .character-portrait > em { opacity: .85; }
.office-person .person-name, .office-person .person-role { position: relative; z-index: 4; display: block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.office-person .person-name { margin-top: -2px; color: #d1c8b3; font-size: 6px; }
.office-person .person-role { color: #768a7f; font-size: 5px; font-style: normal; }
.office-person[data-mood="tired"] { transform: translateY(7px); filter: saturate(.55); }
.office-person[data-mood="angry"], .office-person[data-mood="disappointed"] { filter: drop-shadow(0 0 9px rgba(196, 96, 77, .18)); }
.office-person.joining { animation: character-join 1s ease both; }
.scene-dialogue { position: absolute; z-index: 12; left: 50%; bottom: calc(100% + 4px); width: 135px; padding: 6px 7px; border: 1px solid rgba(213, 166, 79, .33); background: rgba(8, 16, 14, .95); color: #cfc5ac; font-size: 5px; line-height: 1.4; text-align: left; transform: translateX(-50%); }
.scene-dialogue:after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; border-right: 1px solid rgba(213, 166, 79, .33); border-bottom: 1px solid rgba(213, 166, 79, .33); background: #0a1210; transform: translateX(-50%) rotate(45deg); }
@keyframes character-join { from { opacity: 0; transform: translateY(24px); filter: drop-shadow(0 0 20px rgba(213, 166, 79, .7)); } }

/* Appearance creator and ending cast */
.avatar-creator { display: grid; grid-template-columns: minmax(190px, .65fr) minmax(420px, 1.5fr); gap: 20px; align-items: center; margin: 17px auto 0; max-width: 870px; }
.avatar-preview-wrap { display: grid; justify-items: center; min-height: 285px; padding: 15px; border: 1px solid rgba(213, 166, 79, .2); background: radial-gradient(circle at 50% 46%, rgba(111, 168, 142, .13), transparent 57%), rgba(255, 255, 255, .018); }
.founder-avatar.preview { width: 155px; height: 220px; }
.avatar-preview-wrap strong { color: #ddc888; font-size: 11px; }
.avatar-preview-wrap small { margin-top: 3px; color: #74877e; font-size: 7px; }
.avatar-controls { display: grid; gap: 9px; }
.avatar-controls fieldset { margin: 0; padding: 10px; border: 1px solid rgba(214, 202, 175, .15); }
.avatar-controls legend { padding: 0 6px; color: #9daa9f; font-size: 8px; }
.avatar-controls fieldset > div { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-controls button { flex: 1 1 80px; padding: 8px 9px; border: 1px solid rgba(214, 202, 175, .16); background: rgba(255, 255, 255, .02); color: #81958a; font-size: 7px; cursor: pointer; }
.avatar-controls button:hover, .avatar-controls button:focus-visible { border-color: rgba(213, 166, 79, .45); color: #d8c28b; }
.avatar-controls button.selected { border-color: #6fa88e; background: rgba(70, 124, 99, .16); color: #c9dfd3; }
.appearance-note { max-width: 870px; margin: 12px auto 0; color: #7c9085; font-size: 8px; line-height: 1.6; text-align: center; }
.ending-cast { display: flex; align-items: flex-end; justify-content: center; gap: 2px; min-height: 130px; margin: 10px 0 5px; padding: 9px 5px 0; overflow-x: auto; border-bottom: 1px solid rgba(213, 166, 79, .16); background: radial-gradient(circle at 50% 100%, rgba(213, 166, 79, .11), transparent 58%); }
.ending-person { position: relative; display: grid; justify-items: center; flex: 0 0 86px; }
.ending-person b { max-width: 84px; margin-top: -2px; overflow: hidden; color: #aebbb3; font-size: 5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ending-person.departed { opacity: .34; filter: grayscale(.75); }
.ending-person.founder { filter: drop-shadow(0 0 13px rgba(213, 166, 79, .22)); }

@media (max-width: 850px) {
  .avatar-creator { grid-template-columns: 1fr; }
  .avatar-preview-wrap { min-height: 245px; }
  .founder-avatar.preview { width: 135px; height: 190px; }
  .facility-layer { inset-inline: 8px; gap: 3px; }
  .facility-layer b { display: none; }
  .office-people { gap: 0; }
  .office-person { width: 64px; }
  .character-portrait.scene { width: 61px; height: 101px; }
  .founder-avatar.scene { width: 62px; height: 100px; }
  .scene-dialogue { width: 115px; }
}

@media (max-width: 540px) {
  .avatar-controls fieldset > div { display: grid; grid-template-columns: repeat(2, 1fr); }
  .avatar-controls button { width: 100%; }
  .office-person { width: 48px; }
  .character-portrait.scene { width: 48px; height: 82px; }
  .founder-avatar.scene { width: 49px; height: 82px; }
  .office-person .person-role { display: none; }
  .scene-dialogue { display: none; }
  .scene-moment { top: 70px; width: 54%; }
  .facility-layer [data-facility="3"] { min-height: 88px; }
  .ending-person { flex-basis: 72px; }
  .character-portrait.ending, .founder-avatar.ending { width: 70px; height: 96px; }
}

/* Production environment art */
.game-shell { width: min(1900px, 100%); }
.world-grid { grid-template-columns: minmax(260px, .72fr) minmax(620px, 1.8fr) minmax(300px, .9fr); }
.objective-panel, .company-world { min-height: 590px; }
.office-scene { height: 470px; background: #0c1512; }
.scene-stage-art { position: absolute; z-index: 0; inset: 0; background-position: center; background-size: cover; transform: scale(1.015); transition: background-image .45s ease, filter .45s ease, opacity .45s ease, transform 1.2s ease; }
.scene-stage-art:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 12, 10, .2), rgba(5, 11, 9, .05) 48%, rgba(5, 10, 8, .66) 100%); }
.office-glow { z-index: 1; }
.office-sky, .office-furniture { display: none; }
.office-scene[data-health="low-cash"] { filter: none; }
.office-scene[data-health="low-cash"] .scene-stage-art { filter: saturate(.35) brightness(.48); }
.office-scene[data-health="high-debt"] .scene-stage-art { filter: saturate(.62) sepia(.18) brightness(.76); }
.office-scene[data-health="low-morale"] .scene-stage-art { filter: saturate(.48) brightness(.68); }
.office-scene[data-night="true"] .scene-stage-art { filter: saturate(.48) brightness(.42) hue-rotate(8deg); }
.office-scene[data-stage="3"] .scene-stage-art { transform: scale(1.035); }

.facility-layer { position: absolute; z-index: 8; inset: 58px auto auto 14px; display: block; pointer-events: none; perspective: none; }
.facility-layer > span { display: none; min-height: 0; padding: 8px 11px; border: 1px solid rgba(213, 166, 79, .34); border-radius: 2px; background: rgba(7, 15, 13, .9); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); opacity: 0; transform: none; }
.facility-layer > span.current { display: flex; align-items: center; gap: 8px; opacity: 1; animation: facility-reveal .55s ease both; }
.facility-layer i { width: 30px; height: 30px; font-size: 13px; }
.facility-layer b { margin: 0; color: #b8c8bf; font-size: 12px; }
.facility-layer [data-facility="1"], .facility-layer [data-facility="2"], .facility-layer [data-facility="3"] { min-height: 0; }
.office-scene[data-group="true"] .facility-layer [data-facility="3"]:after { right: auto; left: calc(100% + 8px); top: 0; width: 58px; height: 46px; font-size: 11px; transform: none; }
@keyframes facility-reveal { from { opacity: 0; transform: translateY(-8px); } }

.industry-props { z-index: 4; inset: 86px 24px 96px; }
.prop-screen { opacity: .88; backdrop-filter: blur(4px); }
.prop-work { opacity: .86; backdrop-filter: blur(4px); }
.prop-stack { z-index: 5; }
.office-people { z-index: 9; bottom: 59px; gap: clamp(2px, 1.25vw, 17px); }
.office-person { width: 90px; }
.character-portrait.scene, .lifecycle-portrait.scene { width: 84px; height: 142px; }
.founder-avatar.scene { width: 86px; height: 140px; }
.office-person .person-name, .office-person .person-role { max-width: 90px; }
.person-desk-prop { position: absolute; z-index: 5; left: 50%; bottom: 29px; max-width: 88px; padding: 3px 5px; overflow: hidden; border: 1px solid rgba(213, 166, 79, .25); background: rgba(7, 14, 12, .88); color: #d0b97d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .2s, transform .2s; }
.office-person:hover .person-desk-prop, .office-person:focus-visible .person-desk-prop { opacity: 1; transform: translate(-50%, -5px); }

/* Character lifecycle artwork */
.lifecycle-portrait { position: relative; display: block; width: 78px; height: 104px; flex: 0 0 auto; background-image: var(--life-image); background-repeat: no-repeat; background-position: var(--life-x, 0%) bottom; background-size: 400% auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .28)); }
.lifecycle-portrait > em { position: absolute; left: 50%; bottom: 0; display: none; transform: translateX(-50%); }
.lifecycle-portrait.ending { width: 84px; height: 118px; }
.lifecycle-portrait.timeline { width: 108px; height: 150px; margin-inline: auto; }
.member-lifecycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 2px 0 18px; padding: 10px; border: 1px solid rgba(213, 166, 79, .14); background: rgba(255, 255, 255, .018); }
.member-lifecycle[hidden] { display: none; }
.member-lifecycle > div { display: grid; justify-items: center; min-width: 0; border-bottom: 2px solid rgba(111, 168, 142, .25); }
.member-lifecycle > div:nth-child(3) { border-color: rgba(196, 96, 77, .38); }
.member-lifecycle > div:nth-child(4) { border-color: rgba(213, 166, 79, .42); }
.member-lifecycle b { padding: 6px 3px 8px; color: #b9c6bf; font-size: 12px; font-weight: 500; }

/* Scene choreography: decision → cause → consequence */
.scene-storyboard { position: absolute; z-index: 7; inset: 0; overflow: hidden; pointer-events: none; }
.scene-storyboard > i { position: absolute; display: block; opacity: 0; }
.story-contract { right: 20%; top: 27%; width: 54px; height: 70px; border: 2px solid #d5b566; background: linear-gradient(#f1e7ce, #cdbd95); box-shadow: 0 0 25px rgba(213, 181, 102, .45); transform: rotate(5deg); }
.story-contract:after { content: "契"; position: absolute; inset: 0; display: grid; place-items: center; color: #8b3f32; font: 700 24px serif; }
.story-server { right: 9%; bottom: 82px; width: 28px; height: 70px; border: 1px solid #8d392e; background: repeating-linear-gradient(180deg, #15201e 0 7px, #b64c3e 8px 10px); box-shadow: 0 0 25px rgba(196, 76, 62, .58); }
.story-docs { right: 31%; bottom: 66px; width: 60px; height: 46px; background: repeating-linear-gradient(0deg, #d7c69f 0 7px, #866c46 8px 9px); box-shadow: 8px -6px 0 rgba(206, 190, 151, .8), -7px -12px 0 rgba(190, 168, 119, .75); }
.story-exit { right: 5%; bottom: 52px; width: 74px; height: 170px; border: 2px solid rgba(213, 166, 79, .38); border-bottom: 0; background: linear-gradient(90deg, rgba(5, 10, 9, .85), rgba(213, 166, 79, .15)); box-shadow: inset 0 0 25px rgba(0, 0, 0, .6); }
.story-exit:after { content: ""; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #d6b66a; box-shadow: 0 0 10px #d6b66a; }
.office-scene[data-moment="deal"] .story-contract { opacity: 1; animation: contract-land 2.2s ease-in-out infinite; }
.office-scene[data-moment="deal"] .story-docs, .office-scene[data-documents="high"] .story-docs { opacity: .92; animation: papers-rise 1.2s ease both; }
.office-scene[data-moment="overnight"] .story-server, .office-scene[data-health="high-debt"] .story-server { opacity: 1; animation: server-alarm .7s steps(2) infinite; }
.office-scene[data-moment="departure"] .story-exit { opacity: 1; }
.office-scene[data-moment="deal"] .office-person[data-person-id="su-heng"] { z-index: 12; animation: sales-celebrate 1.1s ease-in-out infinite alternate; }
.office-scene[data-moment="deal"] .office-person[data-person-id="a-cen"] { z-index: 11; animation: engineer-doubt 2.2s ease-in-out infinite; }
.office-scene[data-moment="overnight"] .office-person { animation: overnight-work 1.8s ease-in-out infinite; }
.office-scene[data-moment="conflict"] .office-person:nth-child(odd) { animation: conflict-left 1.5s ease-in-out infinite alternate; }
.office-scene[data-moment="conflict"] .office-person:nth-child(even) { animation: conflict-right 1.5s ease-in-out infinite alternate; }
.office-person.departing { z-index: 13; animation: colleague-exit 4.5s ease-in-out forwards; }
.office-scene[data-moment="promotion"] .office-person[data-person-id] .lifecycle-portrait { filter: drop-shadow(0 0 18px rgba(213, 166, 79, .66)); animation: promotion-aura 1.4s ease-in-out infinite alternate; }
@keyframes contract-land { 0%, 100% { transform: translate(8px, -12px) rotate(7deg); } 50% { transform: translate(0, 0) rotate(1deg); } }
@keyframes papers-rise { from { opacity: 0; transform: translateY(30px) scale(.65); } }
@keyframes server-alarm { 50% { filter: brightness(1.8); transform: translateX(2px); } }
@keyframes sales-celebrate { to { transform: translate(42px, -18px) rotate(2deg); } }
@keyframes engineer-doubt { 50% { transform: translate(-34px, 5px) rotate(-2deg); filter: saturate(.58); } }
@keyframes overnight-work { 50% { transform: translateY(9px); filter: saturate(.55) brightness(.72); } }
@keyframes conflict-left { to { transform: translateX(-18px) rotate(-2deg); } }
@keyframes conflict-right { to { transform: translateX(18px) rotate(2deg); } }
@keyframes colleague-exit { 0%, 20% { opacity: 1; transform: translateX(0); } 75% { opacity: .9; transform: translateX(150px); } 100% { opacity: 0; transform: translateX(220px) scale(.9); } }
@keyframes promotion-aura { to { transform: translateY(-8px); filter: drop-shadow(0 0 28px rgba(213, 166, 79, .9)); } }

/* Readability pass: no essential information below 11px */
body { font-size: 14px; }
.cinematic-skip, .cinematic-sound small, .sound-awaken, .menu-button small, .cinematic-entry-status { font-size: 12px; }
.menu-overline, .menu-minor-actions button, .menu-footnote, .title-version,
.panel-heading span, .panel-heading > em, .panel-heading > strong, .brand-lockup p,
.season-clock span, .plain-button, .volume-control, .vital span, .vital em,
.world-heading span, .world-heading > strong, .technique-strip > span,
.chapter-line, .event-kind, .strategy-heading span, .strategy-heading em,
.company-detail-panel summary small, .company-detail-panel summary > em,
.company-detail-copy strong, .company-detail-copy span, .company-detail-copy em,
.dialog-heading p, .dialog-heading > span:last-child, .company-input span,
.setup-progress span, .setup-summary, .legacy-setup > p, .dialog-foot, .eyebrow,
#settlementCause, .member-dialog > p:not(.eyebrow):not(.member-goal), .member-goal,
.ending-team, .ending-rarity, .toast { font-size: 12px; }
.panel-heading h2 { font-size: 20px; }
.brand-lockup h1 { font-size: 24px; }
.season-clock strong { font-size: 16px; }
.plain-button { padding: 9px 12px; }
.vital { padding: 16px 18px 15px; }
.vital strong { font-size: 27px; }
.objective-copy { min-height: 52px; font-size: 14px; }
.objective-row { padding: 11px 12px; }
.objective-row header { font-size: 13px; }
.secret-objective strong { font-size: 13px; }
.secret-objective small { font-size: 11px; }
.realm-path i, .realm-path strong { font-size: 12px; }
.realm-path small, .realm-path em { font-size: 11px; }
.world-heading h2 { font-size: 24px; }
.office-alerts span { padding: 6px 8px; font-size: 11px; }
.prop-screen span, .scene-client-wall span, .scene-vacancy span { font-size: 11px; }
.office-stage { padding: 13px; font-size: 13px; }
#techniqueList em, .technique-chip { padding: 7px 9px; font-size: 11px; }
.cause-card { padding: 12px 12px 12px 15px; }
.cause-card strong, .cause-card time, .cause-card p, .cause-card em, .empty-card { font-size: 12px; }
.rival-card strong { font-size: 15px; }
.rival-card small, .rival-card p { font-size: 12px; }
.industry-metrics span { width: 32px; height: 32px; font-size: 12px; }
.industry-metrics small { font-size: 11px; }
.industry-metrics strong { font-size: 15px; }
.event-art > span { font-size: 12px; }
.event-body > p { font-size: 15px; }
.event-quote { font-size: 13px; }
.choice-button { padding: 15px 16px; }
.choice-title b { font-size: 16px; }
.choice-title small { font-size: 13px; }
.effect-block span { font-size: 11px; }
.effect-block em { font-size: 12px; white-space: normal; }
.choice-footer strong, .risk, .event-resolution { font-size: 12px; }
.strategy-heading h2 { font-size: 19px; }
.action-button { min-height: 112px; padding: 13px 31px 12px 12px; }
.action-button > i { width: 36px; height: 36px; font-size: 14px; }
.action-button strong { font-size: 15px; }
.action-button small { font-size: 12px; line-height: 1.45; }
.action-button em { font-size: 11px; line-height: 1.45; }
.strategy-info { width: 26px; height: 26px; font-size: 12px; }
.team-list { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.member-card { grid-template-columns: 66px 1fr; min-height: 104px; padding: 12px; }
.member-card strong { font-size: 14px; }
.member-card small, .member-card em { font-size: 12px; }
.company-detail-panel summary strong { font-size: 18px; }
.detail-grid span { width: 30px; height: 30px; font-size: 12px; }
.detail-grid small { font-size: 11px; }
.detail-grid strong { font-size: 15px; }
#chronicle li { grid-template-columns: 62px 1fr; padding: 10px 0; }
#chronicle time, #chronicle p { font-size: 12px; }
.setup-progress i { width: 28px; height: 28px; font-size: 12px; }
.setup-question { font-size: 14px; }
.setup-option small, .setup-option em, .legacy-option { font-size: 12px; }
.setup-option strong { font-size: 17px; }
.setup-option p { font-size: 13px; }
.setup-option.selected:after { font-size: 11px; }
.avatar-preview-wrap strong { font-size: 16px; }
.avatar-preview-wrap small, .avatar-controls legend, .appearance-note { font-size: 12px; }
.avatar-controls button { padding: 11px 12px; font-size: 13px; }
#infoContent, #endingText { font-size: 14px; }
.settlement-line span, .relationship-bars > div { font-size: 13px; }
.member-dialog blockquote { font-size: 15px; }
.character-portrait.large > em { padding: 5px 8px; font-size: 12px; }
.codex-stats small, .codex-chip, .ending-stats small { font-size: 11px; }
.codex-sections h3 { font-size: 15px; }
.founder-verdict { font-size: 13px; }
.scene-moment { width: min(310px, 48%); padding: 11px 12px; }
.scene-moment span { font-size: 11px; }
.scene-moment strong { font-size: 14px; }
.scene-moment em { font-size: 12px; }
.office-person .person-name { font-size: 12px; }
.office-person .person-role { font-size: 10px; }
.scene-dialogue { width: 180px; padding: 9px 10px; font-size: 12px; }
.ending-person b { font-size: 11px; }
.mobile-nav span { font-size: 11px; }

@media (max-width: 1220px) {
  .world-grid { grid-template-columns: minmax(240px, .72fr) minmax(560px, 1.72fr); }
  .objective-panel, .company-world { min-height: 570px; }
}

@media (max-width: 850px) {
  .world-grid { display: flex; }
  .office-scene { height: 440px; }
  .character-portrait.scene, .lifecycle-portrait.scene { width: 68px; height: 116px; }
  .founder-avatar.scene { width: 70px; height: 114px; }
  .office-person { width: 68px; }
  .office-person .person-name, .office-person .person-role { max-width: 68px; }
  .person-desk-prop { display: none; }
  .member-lifecycle { grid-template-columns: repeat(2, 1fr); }
  .action-dock { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .brand-lockup h1 { font-size: 20px; }
  .vital strong { font-size: 20px; }
  .vital span, .vital em { font-size: 11px; }
  .office-scene { height: 390px; }
  .character-portrait.scene, .lifecycle-portrait.scene { width: 49px; height: 88px; }
  .founder-avatar.scene { width: 50px; height: 87px; }
  .office-person { width: 50px; }
  .office-person .person-name { max-width: 50px; font-size: 10px; }
  .office-person .person-role { display: none; }
  .facility-layer { top: 79px; left: 8px; }
  .facility-layer b { display: block; font-size: 11px; }
  .scene-moment { top: 118px; width: 62%; }
  .scene-moment em { display: none; }
  .story-contract { right: 8%; }
  .story-exit { right: 1%; }
  .action-button { min-height: 102px; }
  .setup-progress span { display: none; }
}

/* Illustrated founder system: real character art replaces the geometric prototype. */
.founder-avatar.illustrated {
  --tone-filter: sepia(0) saturate(1) brightness(1);
  --mood-filter: saturate(1) brightness(1) contrast(1);
  position: relative;
  display: block;
  overflow: visible;
  isolation: isolate;
  background-image: var(--founder-image);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  filter: none;
}
.founder-avatar.illustrated[data-tone="honey"] { --tone-filter: sepia(.12) saturate(1.12) brightness(.96); }
.founder-avatar.illustrated[data-tone="bronze"] { --tone-filter: sepia(.27) saturate(1.25) brightness(.79) contrast(1.05); }
.founder-avatar.illustrated[data-expression="happy"] { --mood-filter: saturate(1.14) brightness(1.08) contrast(1); }
.founder-avatar.illustrated[data-expression="tired"] { --mood-filter: saturate(.56) brightness(.75) contrast(.96); }
.founder-avatar.illustrated[data-expression="anxious"] { --mood-filter: saturate(.86) brightness(.88) contrast(1.08); }
.founder-avatar.illustrated[data-expression="possessed"] { --mood-filter: saturate(.7) brightness(.7) contrast(1.2); filter: none; }
.founder-avatar.illustrated .founder-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: var(--tone-filter) var(--mood-filter) drop-shadow(0 8px 9px rgba(0, 0, 0, .3));
  transition: filter .28s ease, transform .28s ease, opacity .2s ease;
  user-select: none;
}
.founder-avatar.illustrated[data-expression="happy"] .founder-art { transform: translateY(-2%); }
.founder-avatar.illustrated[data-expression="tired"] .founder-art { transform: translateY(4%) rotate(-1deg); }
.founder-avatar.illustrated[data-expression="anxious"] .founder-art { filter: var(--tone-filter) var(--mood-filter) drop-shadow(0 0 11px rgba(197, 91, 70, .42)); }
.founder-avatar.illustrated[data-expression="possessed"] .founder-art { filter: var(--tone-filter) var(--mood-filter) drop-shadow(0 0 15px rgba(206, 68, 46, .74)); }
.founder-avatar.illustrated .avatar-aura {
  z-index: 1;
  inset: 9% 4% 3%;
  opacity: .42;
  background: radial-gradient(ellipse at 50% 54%, rgba(95, 170, 134, .3), transparent 66%);
  filter: blur(9px);
}
.founder-avatar.illustrated[data-origin="seller"] .avatar-aura { background: radial-gradient(ellipse at 50% 54%, rgba(197, 91, 70, .3), transparent 66%); }
.founder-avatar.illustrated[data-origin="operator"] .avatar-aura { background: radial-gradient(ellipse at 50% 54%, rgba(87, 145, 173, .3), transparent 66%); }
.founder-avatar.illustrated[data-expression="possessed"] .avatar-aura { opacity: .9; background: radial-gradient(ellipse, rgba(207, 63, 43, .54), transparent 68%); animation: avatar-danger 1.1s ease-in-out infinite; }
.founder-avatar.illustrated[data-realm="2"] .avatar-aura { opacity: .68; background: radial-gradient(ellipse, rgba(213, 166, 79, .34), rgba(89, 155, 123, .18) 44%, transparent 70%); }
.founder-avatar.illustrated[data-realm="3"] .avatar-aura { inset: 1% -8% -5%; opacity: .92; background: radial-gradient(ellipse, rgba(227, 184, 92, .42), rgba(101, 177, 140, .2) 48%, transparent 72%); animation: avatar-aura 2.4s ease-in-out infinite; }
.founder-avatar.illustrated .avatar-mark {
  position: absolute;
  z-index: 4;
  left: 8%;
  top: 13%;
  bottom: auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(96, 174, 137, .7);
  border-radius: 50%;
  background: rgba(5, 14, 11, .88);
  color: #bce0cd;
  box-shadow: 0 0 15px rgba(96, 174, 137, .28);
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  transform: none;
}
.founder-avatar.illustrated[data-origin="builder"] .avatar-mark { border-radius: 2px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: none; }
.founder-avatar.illustrated[data-origin="seller"] .avatar-mark { border-color: rgba(212, 103, 79, .82); color: #efab97; box-shadow: 0 0 15px rgba(197, 91, 70, .3); transform: none; }
.founder-avatar.illustrated[data-origin="operator"] .avatar-mark { border-color: rgba(101, 162, 191, .82); color: #a9d3e7; box-shadow: 0 0 15px rgba(87, 145, 173, .3); transform: none; }
.founder-avatar.illustrated .avatar-expression {
  position: absolute;
  z-index: 4;
  top: 13%;
  right: 8%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(213, 166, 79, .48);
  border-radius: 50%;
  background: rgba(5, 13, 11, .86);
  color: #d9c187;
  font-size: 11px;
}
.founder-avatar.illustrated[data-expression="tired"] .avatar-expression { border-color: #7a8780; color: #aab4ae; }
.founder-avatar.illustrated[data-expression="anxious"] .avatar-expression,
.founder-avatar.illustrated[data-expression="possessed"] .avatar-expression { border-color: #c65d48; color: #ef9b87; box-shadow: 0 0 12px rgba(198, 93, 72, .36); }
.founder-avatar.illustrated .avatar-realm {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 1%;
  width: max-content;
  padding: 4px 9px;
  border: 1px solid rgba(213, 166, 79, .36);
  background: rgba(4, 12, 9, .9);
  color: #d5bd82;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  transform: translateX(-50%);
}
.founder-avatar.illustrated.card .avatar-realm,
.founder-avatar.illustrated.scene .avatar-realm,
.founder-avatar.illustrated.ending .avatar-realm { display: none; }
.founder-avatar.illustrated.card .avatar-mark,
.founder-avatar.illustrated.card .avatar-expression,
.founder-avatar.illustrated.scene .avatar-mark,
.founder-avatar.illustrated.scene .avatar-expression,
.founder-avatar.illustrated.ending .avatar-expression { width: 15px; height: 15px; font-size: 7px; }
.founder-avatar.illustrated.preview { width: 218px; height: 306px; }
.avatar-preview-wrap { min-height: 410px; align-content: center; }
.avatar-preview-summary { margin: 5px 0 0; color: #c2d4c8; font-size: 13px; line-height: 1.45; text-align: center; }
.avatar-random { margin-top: 11px; padding: 9px 14px; border: 1px solid rgba(213, 166, 79, .34); background: rgba(213, 166, 79, .06); color: #d9c58f; font: inherit; font-size: 12px; cursor: pointer; }
.avatar-random:hover, .avatar-random:focus-visible { border-color: #d5a64f; background: rgba(213, 166, 79, .12); color: #f0dda9; }
.avatar-controls button { position: relative; min-height: 42px; }
.avatar-controls button.selected::after { content: "✓"; margin-left: 7px; color: #d8be7d; }
.avatar-controls button[data-avatar-tone]::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; vertical-align: -2px; background: #e0b09a; }
.avatar-controls button[data-avatar-tone="honey"]::before { background: #bd8062; }
.avatar-controls button[data-avatar-tone="bronze"]::before { background: #84523f; }

@media (max-width: 850px) {
  .founder-avatar.illustrated.preview { width: 190px; height: 266px; }
  .avatar-preview-wrap { min-height: 350px; }
}

@media (max-width: 540px) {
  .founder-avatar.illustrated.preview { width: 166px; height: 234px; }
  .avatar-preview-wrap { min-height: 318px; }
  .founder-avatar.illustrated .avatar-mark,
  .founder-avatar.illustrated .avatar-expression { width: 20px; height: 20px; font-size: 9px; }
}