:root {
  color-scheme: light;
  --sky: #b9d9dc;
  --soil: #8b6038;
  --wood-dark: #5d3d24;
  --wood: #855a32;
  --wood-light: #b9874d;
  --parchment: #f3e4b8;
  --parchment-light: #fff1cb;
  --parchment-deep: #e7cf94;
  --ink: #49351f;
  --muted: #7f694b;
  --green: #4f8b42;
  --green-dark: #326333;
  --green-soft: #dce8ad;
  --red: #b44e3e;
  --red-dark: #78352f;
  --red-soft: #efd0bb;
  --gold: #c58a2e;
  --blue: #4d8ca7;
  --violet: #795682;
  --mint: var(--green);
  --amber: var(--gold);
  --line: #a67b49;
  --line-soft: rgb(122 88 48 / 22%);
  --shadow: 0 7px 18px rgb(74 48 24 / 22%);
  --story: Georgia, Cambria, "Times New Roman", serif;
  --numbers: "Palatino Linotype", Palatino, Georgia, serif;
  font-family: var(--story);
  font-synthesis: none;
}

/* First completed Seoul run: one quiet handoff to the leverage desk. */
.campaign-end-upgrades {
  width: 100%;
  min-height: 58px;
  margin: 0 0 10px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 12px;
  border: 2px solid #9b7537;
  border-radius: 6px;
  color: #fff1bd;
  background: linear-gradient(135deg, #586f3d, #334d35);
  box-shadow: inset 0 0 0 2px rgb(255 229 153 / 18%), 0 3px 0 #2b3a28;
  letter-spacing: .07em;
  font: 900 11px/1.1 var(--story);
  text-align: left;
  cursor: pointer;
}
.campaign-end-upgrades[hidden] { display: none; }
.campaign-end-upgrades > span { grid-row: 1 / 3; grid-column: 2; font-size: 20px; }
.campaign-end-upgrades > small { color: #d8ddb0; letter-spacing: .02em; font-size: 8px; }
.campaign-end-card.first-upgrade-ready .campaign-end-upgrades {
  animation: leverage-desk-cue 1.8s ease-in-out 2;
}
@keyframes leverage-desk-cue {
  50% { border-color: #e1bc62; box-shadow: inset 0 0 0 2px rgb(255 229 153 / 24%), 0 0 0 4px rgb(219 177 82 / 16%), 0 3px 0 #2b3a28; }
}

/* Desktop keeps the cabinet-card grid; phone rows add their own buy control. */
.market-sense-shop-row { display: contents; }
.shop-row-purchase { display: none; }

@media (prefers-reduced-motion: reduce) {
  .campaign-end-card.first-upgrade-ready .campaign-end-upgrades { animation: none; }
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: #aa895a;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 12% 4%, rgb(255 255 255 / 72%) 0 4%, transparent 4.5%),
    radial-gradient(ellipse at 25% 7%, rgb(255 255 255 / 54%) 0 5%, transparent 5.5%),
    radial-gradient(ellipse at 85% 3%, rgb(255 252 224 / 64%) 0 6%, transparent 6.5%),
    linear-gradient(180deg, #acd3d8 0 12rem, #b8c986 12rem 18rem, #9c7547 18rem 100%);
}

body.menu-open { overflow: hidden; }
html:has(.entrance-screen:not([hidden])) { overflow: hidden; }

/* Asset-backed screens reveal only after their artwork has decoded. */
.asset-surface > .asset-reveal-target {
  opacity: 1;
  transform: none;
  transition: opacity 180ms ease-out, transform 220ms ease-out;
}

.asset-surface.asset-loading > .asset-reveal-target {
  opacity: 0;
  transform: translateY(4px) scale(.995);
  pointer-events: none;
}

.asset-surface.asset-loading::after {
  content: "Loading artwork\2026";
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgb(255 241 202 / 82%);
  background: rgb(48 31 18 / 58%);
  box-shadow: 0 2px 14px rgb(27 16 9 / 24%);
  letter-spacing: .08em;
  font: 700 9px/1 var(--story);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body[data-ui-theme="city"] .asset-surface.asset-loading {
  background:
    linear-gradient(rgb(7 12 19 / 68%), rgb(8 12 19 / 84%)),
    url("assets/illustrations/city-chart-surface-v1.png") center / cover no-repeat,
    #0a1018;
}

body[data-ui-theme="city"] .asset-surface.asset-loading::after {
  color: rgb(239 230 211 / 88%);
  background: rgb(9 14 22 / 78%);
  box-shadow: inset 0 0 0 1px rgb(191 157 101 / 24%), 0 4px 18px rgb(0 0 0 / 38%);
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .asset-surface > .asset-reveal-target { transition: none; }
  .asset-surface.asset-loading > .asset-reveal-target { transform: none; }
}

body::before {
  content: "";
  position: fixed;
  inset: 8rem 0 auto;
  z-index: -2;
  height: 13rem;
  opacity: .42;
  background:
    radial-gradient(90% 110% at 12% 100%, #78936b 0 42%, transparent 43%),
    radial-gradient(90% 130% at 68% 100%, #6d8c68 0 44%, transparent 45%);
}

button,
input { font: inherit; }

button { color: inherit; }

button:focus-visible,
input:focus-visible {
  outline: 3px solid #fff5be;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--green-dark);
}

body.controller-input :is(button, input, summary):focus {
  outline: 3px solid #fff5be;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgb(49 93 44 / 72%);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .115;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.app-shell {
  width: min(1720px, 100%);
  margin: 0 auto;
  padding: 10px 18px 24px;
}

.topbar {
  min-height: 58px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 3px solid var(--wood-dark);
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(90deg, transparent 0 3%, rgb(255 255 255 / 8%) 3% 3.3%, transparent 3.3% 72%, rgb(70 40 20 / 10%) 72%),
    linear-gradient(#9b6b3c, #7a4e2d);
  box-shadow: inset 0 0 0 2px rgb(221 171 101 / 42%), var(--shadow);
}

.brand-lockup,
.brand-line,
.session-controls,
.market-clock,
.asset-heading,
.metric-heading,
.panel-header,
.quantity-label,
.order-estimate,
.realized-row {
  display: flex;
  align-items: center;
}

.brand-lockup { gap: 8px; }

.brand-mark {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 2px solid var(--wood-dark);
  border-radius: 50%;
  background: #e8d18f;
  box-shadow: inset 0 0 0 3px #b58a4f;
  font-size: 21px;
  transform: rotate(-3deg);
}

.brand-line {
  gap: 10px;
  padding: 5px 10px;
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
  background: linear-gradient(#f8e8b9, #e8ce91);
  box-shadow: inset 0 0 0 2px rgb(255 251 219 / 65%);
  transform: rotate(-.3deg);
}

.brand-line h1 {
  margin: 0;
  color: #53351e;
  letter-spacing: .025em;
  font: 900 22px/1 var(--story);
  text-shadow: 0 1px #fff4d0;
}

.prototype-tag {
  padding: 3px 6px;
  border: 1px solid #a96b49;
  border-radius: 2px;
  color: #fff1cd;
  background: #ad6549;
  letter-spacing: .08em;
  font: 800 8px/1.1 var(--story);
}

.session-controls { gap: 7px; }

.bill-goal {
  width: 98px;
  padding: 6px 9px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 6px;
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
  background: #f2dda3;
  box-shadow: inset 0 0 0 2px rgb(255 248 210 / 52%);
}

.bill-goal span {
  color: var(--red-dark);
  letter-spacing: .08em;
  font: 800 8px/1 var(--story);
}

.bill-goal strong {
  color: var(--red-dark);
  font: 900 11px/1 var(--numbers);
  text-align: right;
}

.bill-goal .goal-track { grid-column: 1 / -1; height: 4px; }

.market-clock {
  min-height: 36px;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid rgb(71 45 25 / 42%);
  border-radius: 3px;
  color: #f8e8bf;
  background: rgb(82 50 29 / 55%);
  letter-spacing: .04em;
  font: 800 10px/1 var(--story);
}

.market-clock strong {
  min-width: 47px;
  color: white;
  font: 900 13px/1 var(--numbers);
  text-align: right;
}

.status-dot,
.live-chip::before {
  width: 8px;
  height: 8px;
  border: 1px solid #315a29;
  border-radius: 50%;
  background: #80b957;
  box-shadow: 0 0 0 3px rgb(239 231 158 / 28%);
}

.status-dot.locked { border-color: #866326; background: #e2af48; }
.status-dot.closed { border-color: #7e302d; background: #b84c42; box-shadow: none; }

.control-button,
.icon-button {
  height: 34px;
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
  background: linear-gradient(#f6e5b7, #d9b978);
  box-shadow: inset 0 0 0 1px #fff0c6, 0 2px 0 #4e311d;
  cursor: pointer;
  color: #573b23;
  font: 800 10px/1 var(--story);
  text-transform: uppercase;
}

.control-button { padding: 0 11px; }
.icon-button { width: 34px; font-size: 17px; }
.control-button:hover, .icon-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.control-button:active, .icon-button:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px #fff0c6; }

.goal-track {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #8f744a;
  box-shadow: inset 0 1px 2px rgb(58 37 20 / 45%);
}

.goal-progress {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #78a94d, #b8d66f);
  transition: width 300ms ease;
}

.account-strip {
  min-height: 78px;
  padding: 5px;
  display: grid;
  grid-template-columns: .92fr 1fr;
  gap: 5px;
  border: 3px solid var(--wood-dark);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(90deg, #7e522f, #a16f3e 46%, #77502f);
  box-shadow: inset 0 0 0 2px rgb(222 171 98 / 35%), var(--shadow);
}

.metric {
  min-width: 0;
  min-height: 65px;
  padding: 9px 10px 8px 43px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: 1px solid #b29055;
  border-radius: 5px;
  background: linear-gradient(135deg, #eff0bd, #e2d596);
  box-shadow: inset 0 0 0 2px rgb(255 249 210 / 52%);
}

.metric::before {
  content: attr(data-rune);
  position: absolute;
  left: 9px;
  top: 50%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(92 66 37 / 22%);
  border-radius: 50%;
  background: rgb(255 250 217 / 52%);
  font-size: 16px;
  transform: translateY(-50%);
}

.pnl-metric { background: linear-gradient(135deg, #eff0bd, #cfdf91); }
.capacity-metric { background: linear-gradient(135deg, #dce9dc, #b8d9d7); }

.label {
  color: #657545;
  letter-spacing: .075em;
  font: 900 9px/1.15 var(--story);
}

.capacity-metric .label { color: #3e7288; }

.metric strong {
  white-space: nowrap;
  color: var(--ink);
  letter-spacing: -.025em;
  font: 900 19px/1 var(--numbers);
  font-variant-numeric: tabular-nums;
}

.primary-metric strong { font-size: 27px; }
.pnl-value { display: flex; align-items: baseline; gap: 8px; }
.pnl-percent { font-size: .46em; letter-spacing: 0; }
.account-value-inline { display: flex; align-items: baseline; gap: 7px; }
.account-value-inline span { color: #657545; letter-spacing: .075em; font: 900 8px/1.15 var(--story); }
.primary-metric .account-value-inline strong { color: #5b4a32; font-size: 15px; }
.metric small { overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.metric small.positive, .positive { color: var(--green-dark) !important; }
.metric small.negative, .negative { color: var(--red) !important; }
.metric-heading { display: flex; justify-content: space-between; gap: 10px; }
.metric-heading > span:last-child { color: var(--green-dark); font: 900 9px/1 var(--story); }
.capacity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.capacity-stat { min-width: 0; display: grid; gap: 3px; border-right: 1px solid rgb(76 99 88 / 20%); }
.capacity-stat:last-child { border-right: 0; }
.capacity-stat > span { color: #527486; letter-spacing: .05em; font: 900 8px/1 var(--story); }
.capacity-stat strong { overflow: hidden; text-overflow: ellipsis; font-size: 14px; letter-spacing: 0; }
.capacity-stat small { font-size: 8px; }
.margin-track { height: 6px; overflow: hidden; border: 1px solid rgb(83 63 35 / 22%); border-radius: 99px; background: #aa986d; }
.margin-fill { width: 100%; height: 100%; border-radius: inherit; background: var(--green); transition: width 260ms ease, background 260ms ease; }

.game-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(500px, 2.35fr) minmax(250px, 1fr);
  gap: 10px;
  margin-top: 10px;
  align-items: stretch;
}

.panel {
  min-width: 0;
  overflow: hidden;
  border: 3px solid var(--wood-dark);
  border-radius: 7px;
  background:
    linear-gradient(100deg, transparent 0 48%, rgb(146 108 57 / 5%) 49% 51%, transparent 52%),
    var(--parchment);
  box-shadow: inset 0 0 0 2px var(--wood-light), var(--shadow);
}

.panel-header {
  min-height: 53px;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-bottom: 2px solid var(--line);
  background: linear-gradient(#f9ebc5, #ead39c);
}

.panel-header.compact { min-height: 48px; }
.panel-header h2 { margin: 0; color: #5a3d22; font: 900 17px/1.1 var(--story); text-shadow: 0 1px #fff7d9; }
.panel-header h2 span { font-size: 14px; }
.watch-panel .panel-header h2 { font-size: 16px; white-space: nowrap; }

.live-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green-dark);
  font: 900 8px/1 var(--story);
}

.live-chip::before { content: ""; display: block; width: 6px; height: 6px; }

.watch-panel { display: flex; flex-direction: column; }
.watch-list { flex: 1; display: grid; grid-template-rows: repeat(4, minmax(72px, 1fr)); }

.watch-card {
  width: 100%;
  min-height: 80px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  position: relative;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: rgb(255 247 214 / 38%);
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.watch-card:last-child { border-bottom: 0; }
.watch-card::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--asset-color); opacity: 0; }
.watch-card:hover { background: #fff0c0; }
.watch-card.active {
  z-index: 1;
  border: 1px solid #875c31;
  border-left: 6px solid #6c482a;
  background: linear-gradient(90deg, #f8dfa0, #f4e7ba);
  box-shadow: inset 0 0 0 2px rgb(255 249 216 / 65%), 2px 2px 0 #7c5532;
  transform: translateX(3px) rotate(-.2deg);
}
.watch-card.active::before { opacity: 1; left: 1px; top: -8px; bottom: -8px; width: 3px; background: #73502e; }

.watch-quote { min-width: 0; display: grid; gap: 6px; }
.watch-main, .watch-sub { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.watch-main strong { color: #543921; letter-spacing: .03em; font: 900 14px/1 var(--story); }
.watch-identity { min-width: 0; display: grid; gap: 2px; }
.watch-identity small { overflow: hidden; color: #826c4e; font: 700 8px/1 var(--story); white-space: nowrap; text-overflow: ellipsis; }
.watch-price { color: var(--ink); font: 900 14px/1 var(--numbers); font-variant-numeric: tabular-nums; }
.watch-sub { min-width: 0; }
.watch-sparkline { width: 72px; height: 20px; overflow: visible; }
.watch-sparkline path { fill: none; stroke: var(--asset-color); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.watch-performance { flex: 0 0 auto; display: grid; justify-items: end; gap: 2px; }
.watch-capital-weight { display: none; }
.watch-change { flex: 0 0 auto; padding: 3px 5px; border-radius: 3px; background: #ded1a4; font: 900 9px/1 var(--numbers); }
.watch-change.up { color: var(--green-dark); background: #dce7a7; }
.watch-change.down { color: var(--red-dark); background: #efcabb; }
.watch-position { color: #6f5b40; font: 800 7px/1 var(--story); white-space: nowrap; }
.watch-day-pnl { font: 900 8px/1 var(--numbers); white-space: nowrap; }
.watch-day-pnl.neutral { color: #806d4f; }

.center-column { display: grid; gap: 10px; min-width: 0; }
.chart-panel { min-height: 325px; }
.chart-header {
  min-height: 64px;
  padding: 9px 14px;
  display: grid;
  grid-template-columns: minmax(215px, 1fr) minmax(120px, .65fr);
  align-items: center;
  gap: 13px;
  border-bottom: 2px solid var(--line);
  background: linear-gradient(95deg, #f7e6b6, #f0d99f);
}

.asset-heading { min-width: 0; gap: 9px; }
.selected-emblem { flex: 0 0 auto; width: 44px; height: 44px; filter: drop-shadow(0 2px 1px rgb(74 47 25 / 24%)); }
.selected-emblem svg { display: block; width: 100%; height: 100%; }
.asset-heading > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.ticker-badge { flex: 0 0 auto; padding: 6px 8px; border: 2px solid currentColor; border-radius: 3px; background: rgb(255 248 213 / 52%); font: 900 11px/1 var(--story); }
.asset-heading h2 { margin: 0; overflow: hidden; color: #543821; font: 900 17px/1.1 var(--story); white-space: nowrap; text-overflow: ellipsis; }

.mission-chip {
  min-width: 130px;
  height: 31px;
  display: flex;
  align-items: center;
  border: 1px solid #9a7140;
  border-radius: 4px;
  background: #fff0bc;
  box-shadow: 1px 2px 0 #b0824c;
  font: 900 9px/1 var(--story);
  transform: rotate(.4deg);
}
.mission-chip span { height: 100%; padding: 0 8px; display: grid; place-items: center; border-right: 1px dashed #ad8450; color: var(--red-dark); }
.mission-chip strong { padding: 0 9px; overflow: hidden; color: #6f4e2d; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }

.quote-block { display: grid; gap: 3px; text-align: right; }
.quote-block strong { color: #4c351f; letter-spacing: -.04em; font: 900 27px/1 var(--numbers); font-variant-numeric: tabular-nums; }
.quote-block span { color: var(--muted); font: 900 10px/1 var(--numbers); }

.chart-wrap {
  height: 237px;
  position: relative;
  overflow: hidden;
  background: #f7e9c3;
}
.chart-scenery, #price-chart { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.chart-scenery { opacity: .9; }
#price-chart { overflow: visible; }
.chart-grid { stroke: #927449; stroke-width: 1; stroke-dasharray: 2 5; opacity: .4; vector-effect: non-scaling-stroke; }
.chart-session { fill: #fff5d2; opacity: .08; }
.chart-candle { filter: drop-shadow(0 1px 1px rgb(67 48 25 / 18%)); }
.chart-candle-wick { stroke-width: 1.35; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.chart-candle-body { stroke-width: 1.1; shape-rendering: geometricPrecision; vector-effect: non-scaling-stroke; }
.chart-candle-open { stroke-width: 2.2; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.chart-candle-up .chart-candle-wick, .chart-candle-up .chart-candle-body { stroke: var(--green-dark); }
.chart-candle-up .chart-candle-open { stroke: var(--green-dark); }
.chart-candle-up .chart-candle-body { fill: var(--green); }
.chart-candle-down .chart-candle-wick, .chart-candle-down .chart-candle-body { stroke: var(--red-dark); }
.chart-candle-down .chart-candle-open { stroke: var(--red-dark); }
.chart-candle-down .chart-candle-body { fill: var(--red); }
.chart-label { fill: #665036; font: 800 9px var(--numbers); paint-order: stroke; stroke: #f5e7bd; stroke-width: 2px; }
.event-marker { stroke: #fff3c8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.upcoming-event-guide { stroke: #725d42; stroke-width: 1; stroke-dasharray: 2 5; opacity: .28; vector-effect: non-scaling-stroke; }
.upcoming-event-symbol { fill: #f5e7bd; stroke: #725d42; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.current-marker { stroke-width: 2; fill: #fff9dc; vector-effect: non-scaling-stroke; }
.current-marker-up { stroke: var(--green-dark); }
.current-marker-down { stroke: var(--red-dark); }
.current-line { stroke: #6d5435; stroke-width: 1; stroke-dasharray: 3 5; opacity: .42; vector-effect: non-scaling-stroke; }
.position-reference-line { stroke: #1473e6; stroke-width: 2; vector-effect: non-scaling-stroke; }
.position-reference-label-bg { fill: #1473e6; }
.position-reference-label { fill: #fff; font: 800 9px var(--numbers); letter-spacing: .03em; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #806d4f; letter-spacing: .14em; font: 900 10px/1 var(--story); pointer-events: none; }
.chart-empty.hidden { display: none; }
.chart-footer { height: 24px; padding: 0 12px; display: grid; grid-template-columns: 44fr 15fr 37fr; align-items: center; border-top: 1px solid #b89663; color: #755d3d; background: #ead49e; font: 800 7px/1 var(--story); }
.chart-footer span:nth-child(2), .chart-footer span:nth-child(3) { text-align: center; }
.chart-footer span:last-child { text-align: right; }

.trade-row { display: grid; grid-template-columns: minmax(275px, .95fr) minmax(320px, 1.25fr); gap: 10px; }
.order-panel, .position-panel { min-height: 300px; }
.order-panel { padding-bottom: 11px; }
.order-panel .panel-header, .position-panel .panel-header { margin-bottom: 7px; }
.order-status { padding: 4px 7px; border: 1px solid #66814a; border-radius: 3px; color: var(--green-dark); background: #d9e5a6; font: 900 8px/1 var(--story); }
.order-status.locked { border-color: #977334; color: #725022; background: #efcf85; }

.quantity-label { justify-content: space-between; margin: 0 12px 5px; color: #7d6545; letter-spacing: .06em; font: 900 8px/1 var(--story); }
.quantity-control { margin: 0 12px; display: grid; grid-template-columns: 34px 1fr 34px; }
.quantity-control button, .quantity-control input { height: 34px; border: 1px solid #9c7646; background: #fff0c8; }
.quantity-control button { cursor: pointer; color: #694826; font-size: 17px; }
.quantity-control input { min-width: 0; border-left: 0; border-right: 0; color: var(--ink); text-align: center; font: 900 15px/1 var(--numbers); -moz-appearance: textfield; }
.quantity-control input::-webkit-inner-spin-button { appearance: none; }
.preset-row { margin: 5px 12px 7px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.preset-row button { height: 23px; border: 1px solid #aa8351; border-radius: 3px; background: #e9d3a1; color: #735739; cursor: pointer; font: 900 8px/1 var(--story); }
.preset-row button:hover { background: #f7e6b8; }
.preset-row button.active { border-color: #476d37; color: #fff8d9; background: linear-gradient(#6da653, #4f843d); text-shadow: 0 1px #31562b; }
.leverage-control { margin: 6px 0 5px; padding: 5px 7px; border: 1px solid rgb(62 114 136 / 45%); border-radius: 4px; background: rgb(255 255 255 / 30%); }
.leverage-control label { display: flex; justify-content: space-between; gap: 8px; color: #3e7288; letter-spacing: .05em; font: 900 8px/1 var(--story); }
.leverage-control label strong { color: var(--ink); font: 900 9px/1 var(--numbers); }
.leverage-control input {
  width: 100%; height: 5px; margin: 7px 0 2px; border: 0; border-radius: 999px;
  appearance: none; background: linear-gradient(90deg,
    #477f91 0 var(--permitted-leverage),
    #8eb6bd var(--permitted-leverage) var(--available-leverage),
    rgb(62 114 136 / 18%) var(--available-leverage) 100%);
  cursor: pointer;
}
.leverage-control input::-webkit-slider-thumb { width: 12px; height: 12px; border: 2px solid #315e70; border-radius: 50%; appearance: none; background: #f7edc9; box-shadow: 0 1px 1px rgb(43 70 69 / 35%); }
.leverage-control input::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid #315e70; border-radius: 50%; background: #f7edc9; box-shadow: 0 1px 1px rgb(43 70 69 / 35%); }
.leverage-control input::-moz-range-progress { background: transparent; }
.leverage-control input:disabled { cursor: not-allowed; opacity: .55; }
.leverage-scale { display: flex; justify-content: space-between; margin-bottom: 1px; color: #66868a; font: 800 6px/1 var(--numbers); }
.leverage-control p { margin: 0; color: #496f75; font: 800 7px/1.25 var(--numbers); }
.order-estimate { justify-content: space-between; margin: 0 12px 6px; color: #7a6344; font: 900 8px/1 var(--story); }
.order-estimate strong { color: var(--ink); font: 900 11px/1 var(--numbers); }
.position-panel { display: flex; flex-direction: column; }
.position-panel .panel-header > span { color: var(--muted); font: 800 9px/1 var(--story); }
.positions-list { min-height: 145px; padding: 0 12px; overflow-y: auto; }
.empty-positions { height: 140px; display: grid; place-content: center; justify-items: center; gap: 6px; color: #99815d; text-align: center; }
.empty-positions span { font: 400 28px/1 var(--story); }
.empty-positions p { margin: 0; font-size: 11px; }
.position-row { min-height: 76px; padding-block: 6px; display: grid; grid-template-columns: minmax(110px, 1.3fr) repeat(2, .85fr); gap: 5px 8px; align-items: center; border-bottom: 1px solid var(--line-soft); }
.position-row:last-child { border-bottom: 0; }
.position-symbol { min-width: 0; display: flex; align-items: center; gap: 7px; }
.position-emblem { flex: 0 0 auto; width: 31px; height: 31px; }
.position-emblem svg { display: block; width: 100%; height: 100%; }
.position-symbol > span:last-child { min-width: 0; display: grid; gap: 3px; }
.position-symbol strong { font: 900 12px/1 var(--story); }
.position-symbol small, .position-stat span { color: var(--muted); font-size: 8px; }
.position-stat { min-width: 0; display: grid; gap: 4px; text-align: right; }
.position-stat strong { overflow: hidden; text-overflow: ellipsis; font: 900 10px/1 var(--numbers); }
.position-close {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 22px;
  padding: 0 9px;
  border: 2px solid #7d342e;
  border-radius: 4px;
  background: linear-gradient(#d46c56, #a94539);
  box-shadow: 0 2px 0 #72312c;
  color: #fff8d8;
  cursor: pointer;
  font: 900 8px/1 var(--story);
  text-shadow: 0 1px #72312c;
}
.position-close:hover, .position-close:focus-visible { filter: brightness(1.08); }
.position-close:active { transform: translateY(1px); box-shadow: 0 1px 0 #72312c; }
.position-close:disabled { border-color: #876f4e; background: #c8b78d; box-shadow: none; color: #7d6d51; cursor: not-allowed; text-shadow: none; }
.realized-row { min-height: 42px; justify-content: space-between; padding: 0 12px; margin-top: auto; border-top: 1px solid var(--line-soft); color: var(--muted); font: 900 8px/1 var(--story); }
.realized-row strong { color: var(--ink); font: 900 11px/1 var(--numbers); }

.right-column { min-width: 0; display: grid; grid-template-rows: minmax(420px, 1fr); gap: 10px; }
.edge-card {
  min-height: 91px;
  padding: 10px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 9px;
  align-items: center;
  border: 3px solid var(--wood-dark);
  border-radius: 7px;
  background: linear-gradient(120deg, #ead8d5, #dac4d2);
  box-shadow: inset 0 0 0 2px #b88892, var(--shadow);
}
.edge-icon { display: grid; place-items: center; width: 32px; height: 37px; border: 1px solid #76527d; border-radius: 50% 50% 46% 54%; background: #f3e6d1; font-size: 18px; transform: rotate(-4deg); }
.edge-copy { min-width: 0; display: grid; gap: 3px; }
.edge-copy .label { color: #76527d; font-size: 8px; }
.edge-copy strong { color: #5a3a59; font-size: 12px; }
.edge-copy p { margin: 0; color: #846981; font-size: 9px; }
.edge-card button { min-width: 73px; height: 34px; padding: 0 8px; border: 2px solid #704975; border-radius: 5px; background: #9b70a2; box-shadow: 0 2px 0 #57385b; cursor: pointer; color: #fff2dc; font: 900 8px/1.1 var(--story); text-transform: uppercase; }
.edge-card button:disabled { border-color: #9b8673; background: #c5b89c; box-shadow: none; color: #7e705d; cursor: not-allowed; }
.edge-card.used { filter: saturate(.65); opacity: .78; }
.edge-card.consequence { border-color: var(--red-dark); background: linear-gradient(120deg, #efd0b9, #dba6a3); }

.feed-panel { min-height: 0; display: flex; flex-direction: column; }
.feed-count { color: var(--muted); font: 800 8px/1 var(--story); }
.market-feed { max-height: 510px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a97d4d transparent; }
.feed-item { min-height: 72px; padding: 10px 11px; display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 9px; position: relative; border-bottom: 1px solid var(--line-soft); background: rgb(255 248 219 / 28%); animation: feed-in 220ms ease-out; }
.feed-item::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: #a58b60; }
.feed-item.up::before { background: var(--green); }
.feed-item.down::before { background: var(--red); }
.feed-item.warning::before { background: var(--gold); }
.gossip-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #b38b58; border-radius: 50%; background: #f8e6b8; box-shadow: inset 0 0 0 2px rgb(255 251 224 / 58%); font-size: 17px; }
.gossip-body { min-width: 0; }
.feed-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.feed-source { overflow: hidden; color: #6e4e2e; letter-spacing: .045em; font: 900 9px/1 var(--story); white-space: nowrap; text-overflow: ellipsis; }
.feed-time { flex: 0 0 auto; color: #927c5c; font: 800 8px/1 var(--numbers); }
.feed-item p { margin: 0; color: #674f34; font-size: 11px; line-height: 1.35; }
.feed-ticker { display: inline-block; margin-right: 4px; padding: 2px 4px; border: 1px solid #7b9a69; border-radius: 3px; color: var(--green-dark); background: #e2e8b4; font: 900 8px/1 var(--story); }
.feed-item.type-order { background: rgb(211 229 170 / 47%); }
.feed-item.type-edge { background: rgb(220 197 224 / 48%); }
.feed-item.type-liquidation { background: rgb(232 177 154 / 55%); }
.feed-identity { min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
.feed-handle { flex: 0 1 auto; overflow: hidden; color: #88745a; font: 800 8px/1 var(--numbers); text-overflow: ellipsis; white-space: nowrap; }
.feed-social-cue { margin: -1px 0 5px; color: #55788f; letter-spacing: .1em; font: 900 7px/1 var(--story); }
.feed-item.is-social-post { background: linear-gradient(100deg, rgb(226 239 239 / 78%), rgb(255 249 222 / 58%)); }
.feed-item.is-social-post .gossip-avatar { border-radius: 9px; color: #f7f1e5; background: #17242d; font: 900 15px/1 var(--numbers); }
.feed-cashtag, .feed-hashtag { color: #286b91; font-weight: 900; white-space: nowrap; }

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 26px;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  border: 3px solid var(--wood-dark);
  border-radius: 6px;
  background: #f6e5b7;
  box-shadow: var(--shadow);
  color: #5b3f26;
  text-align: center;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: #7f352f; color: #722f2b; background: #efc9b5; }

body.game-dialog-open { overflow: hidden; }
.game-dialog-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(42 28 17 / 64%);
  backdrop-filter: blur(5px) saturate(.78);
  animation: game-dialog-backdrop-in 160ms ease-out;
}
.game-dialog-backdrop[hidden] { display: none; }
.game-dialog-panel {
  width: min(520px, 100%);
  padding: 26px 28px 24px;
  border: 4px solid var(--wood-dark);
  border-radius: 10px;
  color: var(--ink);
  background:
    linear-gradient(rgb(255 249 218 / 92%), rgb(241 220 166 / 96%)),
    var(--parchment);
  box-shadow: inset 0 0 0 2px rgb(255 250 221 / 78%), 0 18px 54px rgb(31 18 8 / 42%);
  animation: game-dialog-panel-in 180ms ease-out;
}
.game-dialog-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--red-dark);
  letter-spacing: .14em;
  font: 900 9px/1 var(--story);
}
.game-dialog-panel h2 {
  margin: 0;
  color: var(--wood-dark);
  font: 900 27px/1.05 var(--story);
}
.game-dialog-panel p {
  margin: 14px 0 22px;
  color: #624b31;
  font-size: 13px;
  line-height: 1.55;
}
.game-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.game-dialog-actions button {
  min-width: 132px;
  min-height: 42px;
  padding: 10px 16px;
  border: 2px solid var(--wood-dark);
  border-radius: 6px;
  cursor: pointer;
  font: 900 11px/1 var(--story);
  text-transform: uppercase;
}
.game-dialog-primary {
  color: #fff4dc;
  background: var(--red-dark);
  box-shadow: 0 3px 0 #4d211e;
}
.game-dialog-secondary {
  color: var(--wood-dark);
  background: var(--parchment-light);
  box-shadow: 0 3px 0 #9a7246;
}
.game-dialog-actions button:hover { filter: brightness(1.06); }
.game-dialog-actions button:active { transform: translateY(2px); box-shadow: none; }

body[data-ui-theme="city"] .game-dialog-backdrop {
  background: rgb(3 7 12 / 78%);
  backdrop-filter: blur(7px) saturate(.7);
}
body[data-ui-theme="city"] .game-dialog-panel {
  border-color: #8f744b;
  color: #e9dfcd;
  background:
    linear-gradient(145deg, rgb(24 33 44 / 98%), rgb(10 16 24 / 98%)),
    #0c131d;
  box-shadow: inset 0 0 0 1px rgb(218 184 125 / 28%), 0 22px 62px rgb(0 0 0 / 62%);
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}
body[data-ui-theme="city"] .game-dialog-kicker { color: #c7a66d; font-family: inherit; }
body[data-ui-theme="city"] .game-dialog-panel h2 { color: #f0e6d6; font-family: inherit; }
body[data-ui-theme="city"] .game-dialog-panel p { color: #aebbc6; }
body[data-ui-theme="city"] .game-dialog-actions button { border-color: #9c8054; font-family: inherit; }
body[data-ui-theme="city"] .game-dialog-primary { color: #fff2e7; background: #8b3f43; box-shadow: 0 3px 0 #3b191d; }
body[data-ui-theme="city"] .game-dialog-secondary { color: #e8ddca; background: #243341; box-shadow: 0 3px 0 #080d13; }

@keyframes game-dialog-backdrop-in { from { opacity: 0; } }
@keyframes game-dialog-panel-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (max-width: 570px) {
  .game-dialog-backdrop { align-items: end; padding: 14px; }
  .game-dialog-panel { width: 100%; padding: 22px 18px 18px; border-width: 3px; }
  .game-dialog-panel h2 { font-size: 23px; }
  .game-dialog-panel p { margin-bottom: 19px; font-size: 12px; }
  .game-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .game-dialog-actions button { width: 100%; }
  .game-dialog-primary { grid-row: 1; }
  .game-dialog-secondary { grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .game-dialog-backdrop,
  .game-dialog-panel { animation: none; }
  .game-dialog-actions button:active { transform: none; }
}

.calendar-backdrop {
  position: fixed;
  z-index: 45;
  inset: 0;
  padding: 18px;
  overflow-y: auto;
  background:
    linear-gradient(rgb(63 46 28 / 24%), rgb(62 43 23 / 48%)),
    radial-gradient(ellipse at 50% 4%, rgb(255 249 213 / 34%), transparent 48%);
  backdrop-filter: blur(7px) saturate(.82);
}
.calendar-backdrop[hidden] { display: none; }
.calendar-shell { width: min(1180px, 100%); margin: 0 auto; color: var(--ink); }
.calendar-topbar {
  min-height: 68px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 4px solid var(--wood-dark);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(#99693c, #714727);
  box-shadow: inset 0 0 0 2px rgb(226 176 101 / 38%), var(--shadow);
}
.calendar-brand { padding: 3px 0; }
.calendar-brand h1 { margin: 0; color: #fff1c9; font: 900 21px/1 var(--story); text-transform: lowercase; text-shadow: 0 1px #4e2e19; }
.calendar-bill { min-width: 196px; padding: 9px 12px; display: grid; gap: 5px; border: 2px solid #5a3922; border-radius: 5px; background: #ead093; text-align: right; box-shadow: inset 0 0 0 2px rgb(255 247 207 / 55%); }
.calendar-bill span { color: var(--red-dark); letter-spacing: .1em; font: 900 8px/1 var(--story); }
.calendar-bill strong { color: #603c25; font: 900 15px/1 var(--numbers); }
.calendar-bill small { color: #6c6842; letter-spacing: .08em; font: 900 6px/1.1 var(--story); }
.calendar-backdrop[data-wealth-tone="milestone"] .calendar-bill,
.calendar-backdrop[data-wealth-tone="stewardship"] .calendar-bill { box-shadow: inset 0 0 0 2px rgb(255 247 207 / 72%), 0 0 0 2px rgb(184 129 43 / 20%); }
.calendar-backdrop[data-wealth-tone="global"] .calendar-bill { background: linear-gradient(135deg, #f1dda6, #dfc179); }
.calendar-backdrop[data-wealth-tone="victory"] .calendar-bill { background: linear-gradient(135deg, #fff0b0, #dfad45); box-shadow: inset 0 0 0 2px rgb(255 252 222 / 86%), 0 0 16px rgb(242 199 84 / 48%); }
.calendar-intro { padding: 14px 24px 12px; border-inline: 4px solid var(--wood-dark); background: linear-gradient(90deg, #f7e8bb, #e8ce94); }
.calendar-kicker, .calendar-section-heading > div > span, .briefing-heading > div > span, .opening-focus span, .ledger-entry > span, .bill-countdown > span { color: var(--green-dark); letter-spacing: .13em; font: 900 8px/1 var(--story); }
.calendar-intro h2 { margin: 0; color: #54351f; font: 900 24px/1 var(--story); letter-spacing: -.025em; }
.calendar-intro p { max-width: 430px; margin: 0; color: #775a3b; font-size: 10px; line-height: 1.5; text-align: right; }
.calendar-route-panel { padding: 14px 18px 21px; border: 4px solid var(--wood-dark); border-top: 1px solid #af8b59; border-radius: 0 0 8px 8px; background: #f0dda8; box-shadow: inset 0 0 0 2px rgb(255 247 210 / 60%), var(--shadow); }
.calendar-section-heading { min-height: 42px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.calendar-section-heading h2 { margin: 5px 0 0; color: #553920; font: 900 18px/1 var(--story); }
.calendar-section-heading.compact { min-height: 46px; padding: 13px 15px 8px; }
.calendar-legend { display: flex; align-items: center; gap: 13px; color: #806444; font: 800 8px/1 var(--story); text-transform: uppercase; }
.calendar-legend span { display: flex; align-items: center; gap: 5px; }
.calendar-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #947552; }
.calendar-legend .settled::before { background: var(--green); }
.calendar-legend .today::before { background: var(--gold); box-shadow: 0 0 0 3px rgb(197 138 46 / 20%); }
.calendar-route { position: relative; margin-top: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.route-line { position: absolute; top: 77px; left: 7%; right: 7%; z-index: 0; border-top: 4px double #a67a45; opacity: .74; }
.day-node { min-width: 0; min-height: 122px; padding: 10px 9px 11px; position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; border: 2px solid #a57d4a; border-radius: 6px; background: linear-gradient(#f9ecc1, #e6ce96); box-shadow: 0 3px 0 rgb(97 66 34 / 24%); cursor: pointer; color: #5b4028; text-align: center; transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease; }
.day-node:hover { filter: brightness(1.03); transform: translateY(-2px); }
.day-node.selected { border: 4px solid #a56729; background: linear-gradient(#fff0bd, #e7c77d); box-shadow: inset 0 0 0 2px #fff7d8, 0 6px 0 #795020; transform: translateY(-5px); }
.day-node.settled-day { border-color: #668651; background: linear-gradient(#edf0c2, #cfda91); }
.day-node.current-day { border-color: #a56729; }
.day-node.missed-day { filter: saturate(.55); opacity: .78; }
.day-node.milestone { border-color: #8b4637; background: linear-gradient(#f3d5b2, #dda17b); }
.day-state { color: #82613d; letter-spacing: .12em; font: 900 7px/1 var(--story); }
.day-node.current-day .day-state { color: var(--red-dark); }
.day-node time { display: flex; align-items: baseline; gap: 5px; color: #745537; font: 900 8px/1 var(--story); }
.day-node time strong { color: #53351f; font: 900 18px/1 var(--numbers); }
.day-node i { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid #755333; border-radius: 50%; color: #fff1ca; background: #85613c; box-shadow: 0 0 0 4px #e7d29d; font: 900 11px/1 var(--numbers); }
.day-node.current-day i { border-color: #784a20; background: var(--gold); box-shadow: 0 0 0 5px rgb(197 138 46 / 24%); }
.day-node.settled-day i { background: var(--green); }
.day-node.missed-day i { background: #997d64; }
.day-node.milestone i { background: var(--red); }
.day-node b { font-size: 11px; line-height: 1.1; }
.day-node small { min-height: 20px; color: #876b4b; font-size: 8px; line-height: 1.25; }
.calendar-detail-grid { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(285px, .75fr); gap: 12px; }
.briefing-card, .month-ledger { border: 4px solid var(--wood-dark); border-radius: 8px; background: linear-gradient(#f8e9bb, #e8d09a); box-shadow: inset 0 0 0 2px rgb(255 247 211 / 52%), var(--shadow); }
.briefing-card { padding: 17px; }
.briefing-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.briefing-heading h2 { margin: 5px 0 0; color: #53361f; font: 900 24px/1 var(--story); }
.window-chip { padding: 6px 8px; border: 1px solid #9c6b33; border-radius: 3px; color: var(--red-dark); background: #edcf8b; letter-spacing: .08em; font: 900 7px/1 var(--story); white-space: nowrap; }
.signal-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 2px solid #a17a48; border-radius: 5px; }
.signal-grid article { min-width: 0; padding: 11px; border-right: 1px solid #b58f5a; background: rgb(255 244 207 / 45%); }
.signal-grid article:last-child { border-right: 0; }
.signal-grid span { color: #836442; letter-spacing: .1em; font: 900 7px/1 var(--story); }
.signal-grid strong { margin-top: 7px; display: block; color: #594027; font-size: 11px; }
.signal-grid p { margin: 6px 0 0; color: #84694a; font-size: 8px; line-height: 1.35; }
.opening-focus { margin-top: 12px; padding: 11px; display: grid; grid-template-columns: minmax(110px, .4fr) 1.6fr; gap: 14px; align-items: center; border: 1px dashed #a17845; border-radius: 4px; background: rgb(233 213 163 / 48%); }
.opening-focus[hidden] { display: none; }
.opening-focus p { margin: 4px 0 0; color: #826647; font-size: 8px; line-height: 1.3; }
.focus-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.focus-options button { min-height: 31px; padding: 6px; border: 1px solid #9a7547; border-radius: 3px; background: #eddbab; cursor: pointer; color: #65472c; font: 900 7px/1.15 var(--story); }
.focus-options button.active { border: 2px solid #3f6d36; color: #fff5d3; background: var(--green); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%); }
.focus-options button:disabled { opacity: .5; cursor: not-allowed; }
.start-day-button { width: 100%; min-height: 46px; margin-top: 12px; border: 3px solid #36582f; border-radius: 6px; background: linear-gradient(#7caf57, #4d823d); box-shadow: 0 3px 0 #304b2a; cursor: pointer; color: #fff7d8; letter-spacing: .1em; font: 900 11px/1 var(--story); }
.start-day-button span { margin-left: 8px; font-size: 16px; }
.start-day-button:disabled { border-color: #897760; background: #bcae8d; box-shadow: none; cursor: not-allowed; color: #6f624f; }
.month-ledger { overflow: hidden; }
.ledger-entry { margin-inline: 10px; padding: 11px 10px; display: grid; gap: 5px; border-top: 1px solid rgb(135 96 51 / 24%); }
.ledger-entry strong { color: #5a3d25; font-size: 11px; }
.ledger-entry p { margin: 0; color: #826649; font-size: 8px; line-height: 1.35; }
.ledger-entry.positive strong { color: var(--green-dark); }
.ledger-entry.missed { opacity: .72; }
.ledger-entry.current { margin-block: 5px; border: 2px solid #b07932; border-radius: 4px; background: #f5dfa7; }
.ledger-entry.current.settled { border-color: #5f824e; background: #e4e8ae; }
.bill-countdown { margin: 10px 0 0; padding: 13px 15px; display: grid; gap: 5px; border-top: 3px solid #7d4d31; background: #dba77a; }
.bill-countdown > span { color: var(--red-dark); }
.bill-countdown strong { color: #5e3827; font: 900 15px/1 var(--numbers); }
.bill-countdown p { margin: 0; color: #754a32; font-size: 8px; }

.menu-backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  padding: 10px;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 28%, rgb(255 241 179 / 20%), transparent 39%),
    linear-gradient(rgb(63 43 25 / 22%), rgb(46 31 18 / 68%));
  backdrop-filter: blur(8px) saturate(.82);
}
.menu-backdrop[hidden] { display: none; }
.entrance-screen {
  position: fixed;
  z-index: 110;
  inset: 0;
  isolation: isolate;
  padding: clamp(18px, 3vw, 42px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #4e503b;
  background-image:
    linear-gradient(180deg, rgb(38 40 31 / 14%) 0 18%, transparent 42%, rgb(29 24 17 / 10%) 68%, rgb(25 20 14 / 46%) 100%),
    url("assets/illustrations/wealth-family-legacy-start-wallpaper-v4.png");
  background-position: center, 50% 50%;
  background-size: cover, cover;
  background-repeat: no-repeat;
}
.entrance-screen[hidden] { display: none; }
.entrance-screen::before,
.entrance-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.entrance-screen::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 7%, rgb(255 243 195 / 22%) 0 15%, transparent 46%),
    linear-gradient(180deg, transparent 0 62%, rgb(25 20 14 / 7%) 72%, rgb(25 20 14 / 32%) 100%);
}
.entrance-screen::after {
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 48%, rgb(24 17 11 / 42%) 100%);
}
.entrance-card {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  min-height: calc(100dvh - clamp(36px, 6vw, 84px));
  padding: clamp(12px, 2vw, 28px) clamp(10px, 3vw, 38px) clamp(20px, 4vh, 48px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  border: 0;
  background: transparent;
  text-align: center;
}
.entrance-title-art {
  width: min(500px, 48vw);
  height: auto;
  margin-top: clamp(4px, 2.5vh, 24px);
  display: block;
  filter: drop-shadow(0 2px 0 rgb(255 245 203 / 54%)) drop-shadow(0 5px 10px rgb(48 31 18 / 32%));
}
.entrance-action {
  grid-row: 3;
  align-self: end;
  min-width: min(340px, 90%);
  margin: 0;
  padding: 17px 28px 14px;
  display: grid;
  gap: 7px;
  border: 4px solid #35572e;
  border-radius: 8px;
  color: #fff4cf;
  background: linear-gradient(#79aa56, #48763a);
  box-shadow: inset 0 0 0 2px rgb(255 255 211 / 22%), 0 5px 0 #294527, 0 10px 22px rgb(52 35 20 / 24%);
  cursor: pointer;
  animation: entrance-pulse 1.8s ease-in-out infinite;
}
.entrance-action strong { letter-spacing: .16em; font: 900 clamp(15px, 3vw, 21px)/1 var(--story); }
.entrance-action small { color: #dce8b8; letter-spacing: .12em; font: 800 8px/1 var(--story); }
.entrance-action:hover { filter: brightness(1.06); transform: translateY(-1px); }
.entrance-action:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgb(255 255 211 / 22%), 0 2px 0 #294527; }
.entrance-action:focus-visible { outline: 3px solid #fff4b8; outline-offset: 5px; }
.entrance-action:disabled { opacity: .72; cursor: wait; animation: none; }
@keyframes entrance-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1) drop-shadow(0 0 8px rgb(255 239 162 / 30%)); }
}
@media (min-width: 571px) {
  .entrance-card { padding-top: 0; }
  .entrance-title-art { margin-top: 0; transform: translateY(-26px); }
}
.main-menu {
  position: relative;
  isolation: isolate;
  width: min(640px, 100%);
  min-height: 960px;
  padding: 220px 70px 185px;
  border: 0;
  background: url("assets/ui/main-menu/main-menu-frame-unified-v1.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 26px 28px rgb(43 25 13 / 58%));
  text-align: center;
}
.menu-board-content { position: relative; z-index: 1; }
.menu-heading { position: relative; z-index: 1; }
.visually-hidden { 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; }
.menu-title-art { width: 86%; height: auto; margin: 0 auto 10px; display: block; }
.run-card { position: relative; z-index: 1; margin-top: 6px; text-align: left; }
.run-primary-action {
  width: 100%;
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.run-primary-action[hidden] { display: none; }
.run-heading {
  position: relative;
  width: 100%;
  min-height: 86px;
  padding: 17px 31px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 1px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 14px;
  background: url("assets/ui/main-menu/continue-action-unified-v1.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 2px rgb(83 51 25 / 18%));
  transition: filter .16s ease, transform .16s ease;
}
.run-heading > * { position: relative; z-index: 1; }
.run-status-divider { width: 1px; height: 45px; display: block; background: rgb(235 213 149 / 48%); box-shadow: 1px 0 rgb(50 82 37 / 45%); }
.run-status-copy,
.run-status-amount { min-width: 0; }
.run-status-copy { display: grid; gap: 6px; }
.run-action-label { color: #fff4cf; letter-spacing: .055em; text-shadow: 0 2px rgb(39 71 31 / 55%); font: 900 15px/1 var(--story); }
.run-week-title { color: inherit; font: inherit; }
.run-status-amount { display: grid; justify-items: end; gap: 3px; }
.run-status-amount > span { color: #e6dba9; letter-spacing: .11em; font: 900 8px/1 var(--story); }
.run-status-amount strong { color: #fff4cf; white-space: nowrap; text-shadow: 0 1px rgb(39 71 31 / 45%); font: 900 13px/1 var(--numbers); }
.run-duration { color: #e1e9bd; font: 800 8px/1.2 var(--story); }
.run-action-arrow { color: #fff4cf; text-align: right; text-shadow: 0 2px rgb(39 71 31 / 55%); font: 900 22px/1 var(--story); }
.painted-shop-button { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.painted-shop-button img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; filter: drop-shadow(0 1px 1px rgb(76 48 24 / 20%)); transition: filter .16s ease; }
.painted-shop-button > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: #57381f; letter-spacing: .11em; font: 900 10px/1 var(--story); pointer-events: none; }
.painted-shop-button:hover:not(:disabled) img { filter: brightness(1.05) drop-shadow(0 2px 2px rgb(76 48 24 / 24%)); }
.painted-shop-button:active:not(:disabled) { transform: translateY(1px); }
.market-sense-shop .painted-shop-button:focus-visible { outline: none; box-shadow: none; }
.market-sense-shop .painted-shop-button:focus-visible img { filter: brightness(1.05) drop-shadow(0 0 2px #fff5be) drop-shadow(0 0 5px #315d2c); }
.run-stakes { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 2px solid #a17a48; border-radius: 4px; }
.run-stakes div { min-width: 0; padding: 9px 8px; display: grid; gap: 5px; border-right: 1px solid #b59059; background: rgb(239 220 170 / 48%); }
.run-stakes div:last-child { border-right: 0; }
.run-stakes strong { color: #573b24; font: 900 13px/1 var(--numbers); }
.run-beats { margin: 13px 0 15px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.run-beats li { min-width: 0; padding: 0 9px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; border-right: 1px solid rgb(132 96 52 / 26%); }
.run-beats li:first-child { padding-left: 0; }
.run-beats li:last-child { padding-right: 0; border-right: 0; }
.run-beats li > span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #fff4d2; background: var(--green-dark); font: 900 9px/1 var(--numbers); }
.run-beats div { min-width: 0; display: grid; gap: 3px; }
.run-beats strong { color: #62442a; font-size: 9px; line-height: 1.1; }
.run-beats small { color: #8a6c4b; font-size: 8px; line-height: 1.25; }
.menu-action-stack { margin-top: 7px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.character-select {
  width: min(460px, 100%);
  min-width: 0;
  margin-inline: auto;
}
.character-select-heading {
  margin-bottom: 7px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
}
.character-select-heading > span { height: 1px; background: rgb(116 82 47 / 42%); }
.character-select-heading h3 {
  margin: 0;
  color: #62432a;
  letter-spacing: .16em;
  font: 900 9px/1 var(--story);
}
.character-option-grid {
  --generation-rail-width: 120px;
  --generation-card-gap: 12px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.character-option-grid::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(rgb(80 112 57 / 72%), rgb(122 104 75 / 46%));
}
.character-route-option {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--generation-rail-width) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--generation-card-gap);
}
.character-generation {
  position: relative;
  min-height: 46px;
  margin: 0;
  padding: 7px 9px 7px 23px;
  display: flex;
  align-items: center;
  color: #52371f;
  background: linear-gradient(90deg, rgb(235 214 161 / 16%), rgb(235 214 161 / 66%));
  border: 1px solid rgb(116 82 47 / 24%);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  box-shadow: inset 0 1px rgb(255 247 214 / 42%);
  letter-spacing: .12em;
  white-space: normal;
  text-align: left;
  font: 900 9.5px/1.22 var(--story);
}
.character-generation > span {
  position: absolute;
  z-index: 1;
  left: 2px;
  width: 9px;
  height: 9px;
  border: 2px solid #f0dca6;
  border-radius: 50%;
  background: #55783e;
  box-shadow: 0 0 0 1px rgb(77 55 34 / 38%);
}
.character-option {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 9px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 3px solid #6a492d;
  border-radius: 7px;
  color: #4e321f;
  background:
    linear-gradient(90deg, rgb(255 247 211 / 68%), rgb(226 201 145 / 38%)),
    #e8d19a url("assets/ui/reference-slices/parchment-tile.png") center / 290px auto repeat;
  box-shadow: inset 0 0 0 1px rgb(255 247 210 / 62%), 0 3px 0 #4d321f, 0 5px 9px rgb(69 43 22 / 18%);
  text-align: left;
}
.character-option-farmer { border-color: #4a6d35; cursor: pointer; }
.character-option-farmer::after {
  content: "SELECT";
  position: absolute;
  right: 6px;
  top: 5px;
  padding: 3px 5px;
  border-radius: 3px;
  color: #f9efc8;
  background: #4f743a;
  letter-spacing: .11em;
  font: 900 6px/1 var(--story);
}
.character-option-farmer:hover { filter: brightness(1.04); transform: translateY(-1px); }
.character-option-farmer:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgb(255 247 210 / 62%), 0 1px 0 #4d321f; }
.character-option:focus-visible { outline: 3px solid #fff4b8; outline-offset: 3px; }
.character-portrait {
  width: 60px;
  height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #745035;
  border-radius: 50% 50% 44% 44%;
  background-color: #c9b078;
  box-shadow: inset 0 0 0 2px rgb(255 241 190 / 45%);
}
.character-portrait-farmer {
  background-image: url("assets/characters/kang-man-bok-farmer-card-v1.png");
  background-position: center;
  background-size: cover;
}
.character-option-copy { min-width: 0; display: grid; align-content: center; gap: 5px; }
.character-option-copy strong { padding-right: 2px; font: 900 15px/1.05 var(--story); }
.character-option-copy small { color: #6d4e32; font: 800 10px/1.1 var(--story); }
.character-option-state { color: #55783e; letter-spacing: .07em; font: 900 6px/1.15 var(--story); }
.character-option-heiress {
  border-color: #824154;
  color: #4b2b35;
  background:
    linear-gradient(90deg, rgb(255 246 223 / 72%), rgb(211 184 177 / 42%)),
    #dfc9a2 url("assets/ui/reference-slices/parchment-tile.png") center / 290px auto repeat;
  box-shadow: inset 0 0 0 1px rgb(255 247 226 / 56%), 0 3px 0 #5c303d, 0 5px 9px rgb(65 37 43 / 18%);
  cursor: pointer;
}
.character-option-heiress::after {
  content: "SELECT";
  position: absolute;
  right: 6px;
  top: 5px;
  padding: 3px 5px;
  border-radius: 3px;
  color: #fff0d2;
  background: #824154;
  letter-spacing: .11em;
  font: 900 6px/1 var(--story);
}
.character-option-heiress .character-portrait {
  border-color: #824154;
  background-color: #b69b86;
  background-image: url("assets/characters/han-seo-yun-heiress-card-v1.png");
  background-position: center;
  background-size: cover;
}
.character-option-heiress .character-option-copy small { color: #6d4b50; }
.character-option-heiress .character-option-state { color: #824154; }
.character-option-heiress:hover { filter: brightness(1.04); transform: translateY(-1px); }
.character-option-heiress:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgb(255 247 226 / 56%), 0 1px 0 #5c303d; }
.persona-picker-backdrop {
  position: fixed;
  z-index: 180;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgb(28 20 14 / 78%);
  backdrop-filter: blur(5px);
}
.persona-picker-backdrop[hidden] { display: none; }
.persona-picker {
  width: min(650px, 100%);
  padding: 30px;
  border: 4px solid #67472d;
  border-radius: 16px;
  color: #4e321f;
  background:
    linear-gradient(rgb(255 248 219 / 90%), rgb(227 203 150 / 88%)),
    #e8d19a url("assets/ui/reference-slices/parchment-tile.png") center / 290px auto repeat;
  box-shadow: inset 0 0 0 2px rgb(255 249 220 / 75%), 0 18px 55px rgb(14 9 5 / 55%);
  text-align: center;
}
.persona-picker-heading { display: grid; justify-items: center; gap: 8px; }
.persona-picker-eyebrow { color: #55783e; letter-spacing: .16em; font: 900 8px/1 var(--story); }
.persona-picker-heading h2 { margin: 0; font: 900 28px/1.1 var(--story); }
.persona-picker-heading p { max-width: 480px; margin: 0; color: #755639; font: 700 11px/1.45 var(--story); }
.persona-picker-options { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.persona-card {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 3px solid #4f743a;
  border-radius: 10px;
  color: inherit;
  background: rgb(255 248 220 / 64%);
  box-shadow: inset 0 0 0 1px rgb(255 255 232 / 72%), 0 4px 0 #4d321f;
  text-align: left;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease;
}
.persona-card:hover { filter: brightness(1.04); transform: translateY(-2px); }
.persona-card:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgb(255 255 232 / 72%), 0 1px 0 #4d321f; }
.persona-card:focus-visible,
.persona-picker-back:focus-visible { outline: 3px solid #fff4b8; outline-offset: 3px; box-shadow: 0 0 0 6px #315d2c; }
.persona-card-portrait {
  width: 98px;
  aspect-ratio: 2 / 3;
  display: block;
  border: 2px solid #745035;
  border-radius: 50% 50% 44% 44%;
  object-fit: cover;
  box-shadow: inset 0 0 0 2px rgb(255 241 190 / 45%);
}
.persona-card-copy { min-width: 0; display: grid; gap: 7px; }
.persona-card-copy strong { font: 900 18px/1.08 var(--story); }
.persona-card-copy small { color: #6d4e32; font: 800 10px/1.2 var(--story); }
.persona-card-copy span { color: #55783e; letter-spacing: .1em; font: 900 7px/1.2 var(--story); }
.persona-picker[data-campaign-route="han-seo-yun"] .persona-card { border-color: #344a66; }
.persona-picker[data-campaign-route="han-seo-yun"] .persona-picker-eyebrow,
.persona-picker[data-campaign-route="han-seo-yun"] .persona-card-copy span { color: #344a66; }
.persona-picker-back {
  min-width: 130px;
  margin-top: 22px;
  padding: 11px 24px;
  border: 2px solid #765333;
  border-radius: 7px;
  color: #583a24;
  background: #ead39c;
  letter-spacing: .12em;
  font: 900 10px/1 var(--story);
  cursor: pointer;
}
body.persona-picker-open { overflow: hidden; }
.menu-action {
  position: relative;
  width: 100%;
  aspect-ratio: 6.2 / 1;
  min-height: 0;
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-action-art { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; filter: drop-shadow(0 2px 2px rgb(69 43 22 / 24%)); transition: filter .16s ease; }
.menu-action-divider { height: 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; color: #668148; font-size: 8px; }
.menu-action-divider::before,
.menu-action-divider::after { content: ""; height: 1px; background: rgb(116 82 47 / 38%); }
.shop-menu-action-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 17px; color: #57381f; letter-spacing: .12em; font: 900 14px/1 var(--story); pointer-events: none; }
.shop-menu-action-label b { color: #557742; font-size: 20px; }
.shop-menu-action { width: 88%; justify-self: center; }
.shop-menu-action:hover { transform: translateY(-1px); }
.shop-menu-action:hover .menu-action-art { filter: brightness(1.05) drop-shadow(0 3px 2px rgb(87 55 28 / 23%)); }
.shop-menu-action:active { transform: translateY(1px); }
.shop-menu-action:active .menu-action-art { filter: brightness(.97) drop-shadow(0 1px 1px rgb(87 55 28 / 20%)); }
.run-primary-action:hover .run-heading { filter: brightness(1.06) drop-shadow(0 4px 3px rgb(55 39 21 / 28%)); transform: translateY(-1px); }
.run-primary-action:active .run-heading { filter: brightness(.97) drop-shadow(0 1px 1px rgb(55 39 21 / 24%)); transform: translateY(1px); }
.main-menu .run-primary-action:focus-visible { outline: none; box-shadow: none; }
.main-menu .run-primary-action:focus-visible .run-heading { filter: brightness(1.05) drop-shadow(0 0 2px #fff5be) drop-shadow(0 0 5px #315d2c); }
.main-menu .menu-action:focus-visible { outline: none; box-shadow: none; }
.main-menu .menu-action:focus-visible .menu-action-art { filter: brightness(1.05) drop-shadow(0 0 2px #fff5be) drop-shadow(0 0 5px #315d2c); }
.menu-action:disabled { cursor: not-allowed; transform: none; }
.menu-action:disabled .menu-action-art { filter: grayscale(.62) opacity(.62); }
@media (max-height: 780px) and (min-width: 761px) {
  .menu-backdrop { place-items: start center; }
}
.market-sense-shop {
  position: fixed;
  z-index: 80;
  inset: 0;
  padding: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(39 24 12 / 76%);
  backdrop-filter: blur(8px) saturate(.78);
}
.market-sense-shop[hidden] { display: none; }
.market-sense-shop-panel {
  position: relative;
  width: min(1280px, calc(100vw - 24px), calc((100dvh - 24px) * 1.5633));
  aspect-ratio: 1568 / 1003;
  min-height: 0;
  padding: clamp(25px, 3vw, 44px) clamp(42px, 5.7vw, 82px) clamp(20px, 2vw, 30px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: clamp(7px, 1vw, 13px);
  overflow: hidden;
  border: 0;
  background: url("assets/ui/market-sense-shop/shop-backdrop-v1.png") center / 100% 100% no-repeat #6c4527;
  filter: drop-shadow(0 24px 30px rgb(27 15 7 / 70%));
  color: #50331f;
  isolation: isolate;
}
.shop-close-corner {
  position: absolute;
  z-index: 5;
  top: clamp(16px, 2.2vw, 30px);
  right: clamp(16px, 2.2vw, 30px);
  width: 38px;
  height: 38px;
  border: 3px solid #6e431f;
  border-radius: 50%;
  color: #59361d;
  background: #f2d99f;
  box-shadow: inset 0 0 0 2px #b98a4c, 0 3px 0 rgb(54 31 14 / 38%);
  font: 900 25px/1 var(--story);
  cursor: pointer;
}
.market-sense-shop-heading {
  min-width: 0;
  padding: 0 clamp(28px, 5vw, 76px) 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.market-sense-shop-heading-copy { min-width: 0; padding-left: clamp(70px, 9vw, 130px); }
.shop-eyebrow { color: #527242; letter-spacing: .16em; font: 900 8px/1 var(--story); }
.market-sense-shop-heading h2 { margin: 3px 0 4px; color: #4b2d19; font: 900 clamp(30px, 4vw, 49px)/.92 var(--story); text-shadow: 0 1px rgb(255 244 204 / 72%); }
.market-sense-shop-heading p { max-width: 600px; margin: 0 auto; color: #62442a; font: 700 clamp(8px, .9vw, 11px)/1.35 var(--story); }
.shop-balance { flex: 0 0 auto; min-width: 154px; padding: 8px 12px 8px 8px; display: flex; align-items: center; gap: 9px; border: 3px solid #986a34; border-radius: 13px; background: rgb(250 226 168 / 90%); box-shadow: inset 0 0 0 2px rgb(255 249 218 / 66%), 0 3px 0 rgb(76 45 20 / 25%); text-align: left; }
.shop-balance > span { width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid #81511d; border-radius: 50%; color: #fff0a1; background: #be8127; box-shadow: inset 0 0 0 3px rgb(255 226 130 / 45%); font: 900 10px/1 var(--numbers); }
.shop-balance div { display: grid; gap: 4px; }
.shop-balance small { color: #745033; letter-spacing: .08em; font: 900 6px/1.05 var(--story); }
.shop-balance strong { color: #315b32; white-space: nowrap; font: 900 17px/1 var(--numbers); }
.shop-selected-detail {
  min-width: 0;
  min-height: clamp(102px, 14.3vw, 154px);
  padding: clamp(10px, 1.3vw, 17px);
  display: grid;
  grid-template-columns: clamp(76px, 9vw, 112px) minmax(0, 1fr) minmax(190px, 24%);
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  border: 3px solid #92632f;
  border-radius: 13px;
  background: rgb(252 232 182 / 88%);
  box-shadow: inset 0 0 0 3px rgb(255 249 218 / 55%), 0 4px 0 rgb(72 41 18 / 18%);
}
.shop-selected-icon,
.shop-item-icon {
  display: grid;
  place-items: center;
  color: #f6e5ad;
  background: url("assets/ui/main-menu/status-fill.png") center / 100% 100% no-repeat #66502c;
  text-shadow: 0 2px #3d2b17;
  font-family: var(--numbers);
  font-weight: 900;
}
.shop-selected-icon { width: 100%; aspect-ratio: 1; border: 4px solid #7c552d; border-radius: 12px; box-shadow: inset 0 0 0 3px #aa8251; font-size: clamp(22px, 3vw, 39px); }
.shop-selected-copy { min-width: 0; }
.shop-selected-meta { display: flex; align-items: center; gap: 10px; color: #6d4b2f; letter-spacing: .12em; font: 900 7px/1 var(--story); }
.shop-selected-state { margin-left: auto; padding: 5px 9px; border: 1px solid #9b7745; border-radius: 99px; background: #ead39a; }
.shop-selected-state.ready { border-color: #557644; color: #30572f; background: #dce7ad; }
.shop-selected-state.owned { border-color: #41653b; color: #fff4ce; background: #527545; }
.shop-selected-copy h3 { margin: 5px 0 5px; color: #4b2e1c; font: 900 clamp(20px, 2.4vw, 32px)/1 var(--story); }
.shop-selected-copy > p { margin: 0; color: #67472d; font: 700 clamp(8px, .8vw, 10px)/1.38 var(--story); }
.shop-selected-cost { margin-top: 8px; display: flex; align-items: baseline; gap: 13px; }
.shop-selected-cost span { color: #765234; letter-spacing: .12em; font: 900 7px/1 var(--story); }
.shop-selected-cost strong { color: #315b32; font: 900 clamp(15px, 1.8vw, 22px)/1 var(--numbers); }
.shop-selected-actions { min-width: 0; padding-left: clamp(10px, 1.3vw, 18px); display: grid; align-content: center; gap: 8px; border-left: 1px solid rgb(121 82 43 / 30%); }
.shop-selected-requirements { min-height: 36px; }
.shop-requirements { margin: 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.shop-requirements li { display: flex; justify-content: space-between; gap: 8px; color: #76573a; font-size: 7px; line-height: 1.2; }
.shop-requirements li strong { color: #634029; text-align: right; font-size: 7px; }
.shop-requirements-ready { margin: 0; color: #3e6738; font-size: 8px; font-weight: 900; line-height: 1.3; }
.shop-detail-purchase { width: 100%; height: clamp(36px, 4.2vw, 48px); }
.shop-detail-purchase > span { color: #fff5d3; text-shadow: 0 1px #36572d; }
.shop-category-tabs { padding-inline: clamp(28px, 5.5vw, 80px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.shop-category-tabs button { min-width: 0; height: clamp(37px, 4.5vw, 52px); padding: 5px 9px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 3px solid #66401f; border-radius: 10px 10px 3px 3px; color: #e4bc71; background: rgb(75 47 25 / 92%); box-shadow: inset 0 0 0 2px rgb(173 119 57 / 38%), 0 3px 0 rgb(43 24 11 / 45%); letter-spacing: .04em; font: 900 clamp(8px, 1vw, 13px)/1 var(--story); cursor: pointer; }
.shop-category-tabs button > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #b1854d; border-radius: 50%; color: #f1d493; font: 900 9px/1 var(--numbers); }
.shop-category-tabs button[aria-selected="true"] { color: #f3d593; background: #476135; box-shadow: inset 0 0 0 2px rgb(196 170 91 / 42%), 0 3px 0 rgb(43 24 11 / 45%); }
.market-sense-shop-items { min-height: 0; padding: 8px clamp(21px, 3.3vw, 48px) 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(135px, 17vh, 160px); gap: clamp(8px, 1.1vw, 15px); align-content: start; overflow: hidden; }
.market-sense-shop-item {
  position: relative;
  min-width: 0;
  min-height: 114px;
  padding: 18px 8px 9px;
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  justify-items: center;
  align-items: center;
  gap: 3px;
  border: 3px solid #76502b;
  border-radius: 11px;
  color: #51321f;
  background: rgb(247 219 157 / 91%);
  box-shadow: inset 0 0 0 2px rgb(255 247 208 / 58%), 0 4px 0 rgb(47 26 11 / 42%);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.market-sense-shop-item.selected { border-color: #d5a13d; box-shadow: inset 0 0 0 2px #f8d77d, 0 0 10px 3px rgb(255 199 72 / 90%), 0 4px 0 rgb(47 26 11 / 42%); }
.market-sense-shop-item .shop-item-state { position: absolute; z-index: 1; top: -8px; left: -7px; padding: 5px 9px; border: 2px solid #6c481f; border-radius: 4px; color: #f3dda0; background: #61733d; box-shadow: 0 2px 0 rgb(48 29 13 / 35%); letter-spacing: .08em; font: 900 6px/1 var(--story); transform: rotate(-2deg); }
.market-sense-shop-item.ready .shop-item-state { color: #fff1b5; background: #6a873e; }
.market-sense-shop-item.owned .shop-item-state { color: #fff6d4; background: #476a41; }
.market-sense-shop-item.locked .shop-item-state { color: #e1cf9c; background: #75684b; }
.shop-item-icon { width: clamp(38px, 4.4vw, 56px); height: clamp(38px, 4.4vw, 56px); border: 3px solid #7e582f; border-radius: 50%; box-shadow: inset 0 0 0 2px #ad8553; font-size: clamp(12px, 1.5vw, 18px); }
.market-sense-shop-item .shop-item-tier { color: #80603b; letter-spacing: .1em; font: 900 6px/1 var(--story); }
.market-sense-shop-item > strong { max-width: 100%; color: #50311e; font: 900 clamp(11px, 1.25vw, 16px)/1.05 var(--story); }
.market-sense-shop-item .shop-item-cost { width: 100%; min-height: 24px; padding: 4px 6px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 2px solid #8f6335; border-radius: 5px; color: #315b32; background: #edcc88; box-shadow: inset 0 0 0 1px rgb(255 245 197 / 60%); white-space: nowrap; font: 900 clamp(9px, 1.1vw, 13px)/1 var(--numbers); }
.market-sense-shop-item .shop-item-cost small { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #8a5b22; border-radius: 50%; color: #fff1a4; background: #bc7e27; font: 900 5px/1 var(--numbers); }
.shop-pagination { z-index: 2; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 18px; color: #f0d292; font: 900 9px/1 var(--numbers); }
.shop-pagination button { width: 54px; height: 32px; border: 2px solid #6c431f; border-radius: 5px; color: #f0cf87; background: #75502b; box-shadow: inset 0 0 0 1px #aa7a42, 0 2px 0 rgb(43 24 11 / 42%); font: 900 18px/1 var(--story); cursor: pointer; }
.shop-pagination button:disabled { opacity: .42; cursor: not-allowed; }
.shop-page-position { min-width: 92px; display: grid; justify-items: center; gap: 5px; }
.shop-page-dots { display: flex; justify-content: center; gap: 5px; }
.shop-page-dots i { width: 7px; height: 7px; display: block; border: 1px solid #d5ab63; border-radius: 50%; background: #674624; box-shadow: inset 0 0 0 1px rgb(64 36 16 / 35%); }
.shop-page-dots i.active { background: #f0cd7b; box-shadow: 0 0 5px rgb(255 210 99 / 75%); }
.painted-shop-button:disabled { cursor: not-allowed; }
.painted-shop-button:disabled img { filter: grayscale(.6) opacity(.6); }
.painted-shop-button:disabled > span { color: #77664c; text-shadow: none; }
.market-sense-shop-status { min-height: 12px; margin: 0; color: #f1d397; text-align: center; text-shadow: 0 1px #3d2615; font-size: 8px; font-weight: 900; }
.shop-close-button { position: absolute; right: clamp(45px, 6vw, 86px); bottom: clamp(18px, 2.2vw, 31px); width: 120px; height: 34px; display: block; }
.market-sense-shop :is(button, [tabindex]):focus-visible { outline: 3px solid #fff0a6; outline-offset: 3px; }

.upgrade-panel { min-height: 0; overflow: hidden; }
.owned-upgrade-actions { max-height: 150px; padding: 8px 10px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; }
.owned-upgrade-chip { min-width: 0; padding: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgb(126 91 52 / 34%); border-radius: 5px; background: rgb(255 242 202 / 55%); }
.owned-upgrade-chip > div { min-width: 0; display: grid; gap: 3px; }
.owned-upgrade-chip strong { overflow: hidden; color: #5a3d22; font: 900 9px/1.1 var(--story); white-space: nowrap; text-overflow: ellipsis; }
.owned-upgrade-chip small { color: #796044; font: 800 7px/1.25 var(--numbers); }
.owned-upgrade-chip button { flex: 0 0 auto; min-height: 28px; padding: 6px 8px; border: 2px solid #567344; border-radius: 4px; color: #fff5d5; background: #61864e; font: 900 7px/1 var(--story); }
.owned-upgrade-chip button:disabled { border-color: #8e8068; color: #7a6c54; background: #c9b991; }
.closing-auction-actions { margin: 12px 0; padding: 12px; border: 2px solid #9b7749; border-radius: 5px; background: #f8e7b6; }
.closing-auction-actions p { margin: 0 0 10px; color: #6f5337; font-size: 9px; line-height: 1.4; }

.result-backdrop,
.campaign-end-backdrop { position: fixed; z-index: 40; inset: 0; padding: 20px; display: grid; place-items: center; overflow-y: auto; background: rgb(72 47 25 / 64%); backdrop-filter: blur(4px); }
.campaign-end-backdrop { z-index: 60; background: rgb(48 34 22 / 76%); }
.result-backdrop[hidden],
.campaign-end-backdrop[hidden] { display: none; }
.result-card { width: min(500px, 100%); padding: 27px; border: 5px solid var(--wood-dark); border-radius: 10px; background: linear-gradient(#fff0c5, #e9d099); box-shadow: inset 0 0 0 3px var(--wood-light), 0 24px 80px rgb(69 43 23 / 55%); text-align: center; }
.result-kicker { color: var(--red-dark); letter-spacing: .13em; font: 900 9px/1 var(--story); }
.result-card h2 { margin: 9px 0 7px; color: #573a21; font: 900 31px/1 var(--story); letter-spacing: -.025em; text-transform: uppercase; }
.result-card > p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.result-equity { margin: 19px 0 11px; padding: 13px; display: grid; gap: 5px; border: 2px solid #8f6b3e; border-radius: 5px; background: #f8e7b6; }
.result-equity span, .result-grid span { color: var(--muted); letter-spacing: .08em; font: 900 8px/1 var(--story); }
.result-equity strong { color: var(--green-dark); font: 900 27px/1 var(--numbers); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid #9b7749; border-radius: 4px; overflow: hidden; }
.result-grid div { padding: 10px 6px; display: grid; gap: 6px; border-right: 1px solid #b89664; background: rgb(255 244 205 / 48%); }
.result-grid div:last-child { border-right: 0; }
.result-grid strong { font: 900 11px/1 var(--numbers); }
.result-lesson { margin: 14px 0 !important; color: #765626 !important; font-style: italic; }
.campaign-end-card { width: min(560px, 100%); }
.campaign-end-card .result-equity { margin-top: 17px; }
.deadline-resolution {
  margin: 14px 0;
  padding: 13px 15px;
  display: grid;
  gap: 6px;
  border: 2px solid #8e6b3f;
  border-radius: 5px;
  color: #654729;
  background: #f2dda9;
  text-align: left;
}
.deadline-resolution strong { letter-spacing: .1em; font: 900 10px/1 var(--story); }
.deadline-resolution span { font-size: 10px; line-height: 1.45; }
.deadline-resolution.paid { border-color: #557747; color: #3f6338; background: #e2e6ae; }
.deadline-resolution.missed { border-color: #9a5545; color: #873d35; background: #ecc7a5; }
.deadline-resolution.victory { border-color: #9b7126; color: #654516; background: linear-gradient(135deg, #fff0b8, #e4ca78); box-shadow: inset 0 0 0 2px rgb(255 251 222 / 70%); }
.result-recap {
  margin: 13px 0 14px;
  padding: 11px 12px;
  border: 1px solid #a17a48;
  border-radius: 4px;
  background: rgb(255 244 205 / 56%);
  text-align: left;
}
.result-recap[hidden] { display: none; }
.result-recap span {
  color: var(--green-dark);
  letter-spacing: .12em;
  font: 900 8px/1 var(--story);
  text-transform: uppercase;
}
.result-recap p {
  margin: 8px 0 0;
  color: #6a4a2d;
  font-size: 9px;
  line-height: 1.35;
}

.story-message-backdrop {
  position: fixed;
  z-index: 60;
  inset: 0;
  padding: clamp(18px, 5vw, 68px) 18px;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 28%, rgb(242 211 143 / 14%), transparent 42%),
    linear-gradient(rgb(28 39 28 / 62%), rgb(49 31 18 / 76%));
  backdrop-filter: blur(7px) saturate(.7);
}

.story-message-backdrop[hidden] { display: none; }
body.story-message-open { overflow: hidden; }

.story-message-card {
  position: relative;
  width: min(720px, 100%);
  min-height: 430px;
  padding: clamp(58px, 8vw, 78px) clamp(28px, 7vw, 76px) clamp(30px, 5vw, 46px);
  border: 5px solid #725033;
  border-radius: 5px 5px 18px 18px;
  outline: 2px solid rgb(242 211 151 / 72%);
  outline-offset: -13px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 18% 20%, rgb(255 255 255 / 42%), transparent 25%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgb(111 76 38 / 2%) 18px 19px),
    linear-gradient(135deg, #fff3cf, #ecd39b);
  box-shadow: inset 0 0 42px rgb(132 91 43 / 16%), 0 30px 90px rgb(26 18 10 / 58%);
}

.story-message-card::before,
.story-message-card::after {
  content: "";
  position: absolute;
  bottom: 15px;
  width: 54px;
  height: 18px;
  border-bottom: 2px solid rgb(95 121 61 / 55%);
}

.story-message-card::before { left: 23px; border-radius: 0 0 0 80%; transform: rotate(7deg); }
.story-message-card::after { right: 23px; border-radius: 0 0 80%; transform: rotate(-7deg); }

.story-day-plaque {
  position: absolute;
  top: -23px;
  left: 50%;
  min-width: min(360px, 76%);
  min-height: 46px;
  padding: 13px 30px;
  border: 3px solid #294a35;
  border-radius: 6px;
  outline: 1px solid #a5824c;
  outline-offset: -6px;
  color: #f5db9d;
  background: linear-gradient(#244d3a, #183728);
  box-shadow: 0 5px 12px rgb(50 32 17 / 42%);
  letter-spacing: .14em;
  text-align: center;
  transform: translateX(-50%);
  font: 900 clamp(9px, 1.5vw, 12px)/1 var(--story);
  white-space: nowrap;
}

.story-message-heading {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 25px;
}

.story-sender-mark {
  width: 96px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 3px double #6e5134;
  border-radius: 50%;
  color: #f5dfaa;
  background:
    radial-gradient(circle at 35% 28%, rgb(255 255 255 / 17%), transparent 30%),
    linear-gradient(145deg, #537052, #284735);
  box-shadow: inset 0 0 0 7px #d1b87d, 0 3px 0 rgb(90 60 31 / 24%);
  letter-spacing: -.08em;
  font: 900 29px/1 var(--numbers);
}

.story-message-kicker {
  color: #6b7a42;
  letter-spacing: .16em;
  font: 900 8px/1 var(--story);
}

.story-message-heading h2 {
  margin: 6px 0 12px;
  color: #173e2d;
  font: 900 clamp(30px, 5vw, 44px)/.95 var(--story);
  letter-spacing: -.035em;
}

.story-message-heading p {
  margin: 0;
  color: #725739;
  font-size: 14px;
}

.story-message-heading p span { margin-right: 8px; font-style: italic; }
.story-message-heading p strong { color: #4c3925; font-weight: 700; }

.story-market-callout,
.morning-note-market-callout {
  display: flex;
  align-items: stretch;
  border: 2px solid #6b5639;
  border-radius: 4px;
  overflow: hidden;
  background: #f9ecc2;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 42%), 0 3px 0 rgb(83 55 29 / 20%);
}

.story-market-callout[hidden] { display: none; }
.story-market-callout { width: min(430px, 100%); margin-top: 24px; }
.story-market-callout > span,
.morning-note-market-callout > span {
  min-width: 116px;
  padding: 13px 18px;
  display: grid;
  place-items: center;
  color: #fff5d7;
  background: #294b35;
  letter-spacing: .08em;
  font: 900 clamp(18px, 3vw, 26px)/1 var(--numbers);
}

.story-market-callout > div,
.morning-note-market-callout > div {
  min-width: 0;
  padding: 9px 16px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.story-market-callout small,
.morning-note-market-callout small {
  color: #7e6949;
  letter-spacing: .13em;
  font: 900 8px/1 var(--story);
}

.story-market-callout strong,
.morning-note-market-callout strong {
  color: #315b3a;
  font: 900 clamp(20px, 3vw, 27px)/1 var(--numbers);
}

.story-market-callout[data-tone="down"] > span,
.morning-note-market-callout[data-tone="down"] > span { background: #78352f; }
.story-market-callout[data-tone="down"] strong,
.morning-note-market-callout[data-tone="down"] strong { color: #8c4037; }

.story-rule {
  margin: 24px 0 19px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a27b43;
  font-size: 17px;
}

.story-rule::before,
.story-rule::after { content: ""; flex: 1; border-top: 1px solid rgb(135 96 51 / 45%); }

.story-message-body {
  max-width: 560px;
  margin: 0;
  color: #382b1d;
  font: 400 clamp(20px, 3vw, 27px)/1.45 var(--story);
  text-wrap: balance;
}

.story-run-rewards {
  margin-top: 20px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .62fr);
  gap: 9px;
  border: 1px solid rgb(135 96 51 / 38%);
  border-radius: 6px;
  color: #5e4931;
  background: rgb(255 248 219 / 46%);
  font: 800 10px/1.3 var(--story);
}

.story-run-rewards[hidden] { display: none; }
.story-run-rewards-intro {
  grid-column: 1 / -1;
  color: #6d5638;
  letter-spacing: .12em;
  font: 900 8px/1 var(--story);
  text-transform: uppercase;
}

.story-run-reward {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid rgb(106 78 45 / 30%);
  border-radius: 5px;
  color: #294b35;
  background: rgb(250 240 205 / 46%);
}

.story-run-reward-active {
  border-width: 2px;
  border-color: #426746;
  background: linear-gradient(135deg, rgb(237 241 190 / 88%), rgb(250 232 181 / 72%));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 36%);
}

.story-run-reward i {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid #6e5134;
  border-radius: 50%;
  color: #fff0bd;
  background: #35583f;
  box-shadow: inset 0 0 0 2px rgb(213 188 126 / 65%);
  font: 900 14px/1 var(--numbers);
  font-style: normal;
}

.story-run-reward-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.story-run-reward-type {
  color: #7a6040;
  letter-spacing: .11em;
  font: 900 7px/1 var(--story);
}

.story-run-reward strong {
  font: 900 13px/1.08 var(--story);
}

.story-run-reward p {
  margin: 0;
  color: #5d4a33;
  font: 700 9px/1.4 var(--story);
}

.story-run-reward.groundhog-day strong {
  color: #204c31;
  font-size: 17px;
}

.story-run-reward.groundhog-day p {
  color: #3e3729;
  font-size: 10px;
  line-height: 1.45;
}

.story-run-reward-passive {
  align-self: stretch;
  opacity: .82;
}

.story-run-reward-passive i {
  width: 29px;
  height: 29px;
  font-size: 11px;
}

.story-continue-button {
  width: min(330px, 100%);
  min-height: 58px;
  margin: auto auto 0;
  border: 4px solid #2b4d35;
  border-radius: 6px;
  outline: 2px solid #bd9554;
  outline-offset: -8px;
  color: #fff1c5;
  background: linear-gradient(#315c42, #183c2a);
  box-shadow: inset 0 1px rgb(255 255 255 / 18%), 0 5px 0 #6d4a2d;
  cursor: pointer;
  letter-spacing: .13em;
  font: 900 14px/1 var(--story);
}

.story-continue-button span { margin-left: 12px; font-size: 20px; }
.story-continue-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.story-continue-button:active { box-shadow: 0 1px 0 #6d4a2d; transform: translateY(3px); }

/* The shared between-day wire follows the active city route instead of
   falling back to the Farmer's parchment notice. */
body[data-ui-theme="city"] .story-message-backdrop {
  background:
    linear-gradient(rgb(6 11 18 / 72%), rgb(7 11 17 / 90%)),
    url("assets/illustrations/city-chart-surface-v1.png") center / cover fixed no-repeat,
    #08101a;
  backdrop-filter: blur(9px) saturate(.75);
}

body[data-ui-theme="city"] .story-message-card {
  border: 2px solid #303b47;
  border-top-color: #a2875d;
  border-radius: 4px;
  outline: 1px solid rgb(198 163 105 / 22%);
  outline-offset: -11px;
  color: #e8e1d5;
  background:
    repeating-linear-gradient(90deg, transparent 0 62px, rgb(226 214 192 / 2.5%) 62px 63px),
    linear-gradient(145deg, rgb(27 36 48 / 99%), rgb(10 16 24 / 99%));
  box-shadow: inset 0 0 48px rgb(0 0 0 / 24%), 0 30px 90px rgb(0 0 0 / 68%);
}

body[data-ui-theme="city"] .story-message-card::before,
body[data-ui-theme="city"] .story-message-card::after {
  width: 92px;
  height: 24px;
  border-color: rgb(162 135 93 / 30%);
  border-radius: 0;
}

body[data-ui-theme="city"] .story-day-plaque {
  border: 1px solid #a2875d;
  border-radius: 2px;
  outline-color: rgb(241 222 185 / 10%);
  color: #ead9b8;
  background: linear-gradient(#672e3e, #3c1925);
  box-shadow: inset 0 0 0 1px rgb(255 236 203 / 8%), 0 6px 18px rgb(0 0 0 / 48%);
}

body[data-ui-theme="city"] .story-sender-mark {
  border: 1px solid #8e754e;
  border-radius: 3px;
  color: #dbc79d;
  background: linear-gradient(145deg, #2d3947, #111923);
  box-shadow: inset 0 0 0 1px rgb(255 239 207 / 7%), 0 3px 10px rgb(0 0 0 / 38%);
  letter-spacing: .08em;
}

body[data-ui-theme="city"] .story-message-kicker { color: #b9a77f; }
body[data-ui-theme="city"] .story-message-heading h2 { color: #eee7da; }
body[data-ui-theme="city"] .story-message-heading p { color: #aaa49b; }
body[data-ui-theme="city"] .story-message-heading p strong { color: #cfbb94; }
body[data-ui-theme="city"] .story-market-callout,
body[data-ui-theme="city"] .morning-note-market-callout {
  border-color: #625661;
  background: linear-gradient(100deg, #151f2a, #23161e);
  box-shadow: inset 0 0 0 1px rgb(255 241 214 / 5%), 0 4px 13px rgb(0 0 0 / 28%);
}
body[data-ui-theme="city"] :is(.story-market-callout, .morning-note-market-callout) > span {
  color: #f3e6cc;
  background: #315b4a;
}
body[data-ui-theme="city"] :is(.story-market-callout, .morning-note-market-callout)[data-tone="down"] > span { background: #733343; }
body[data-ui-theme="city"] :is(.story-market-callout, .morning-note-market-callout) small { color: #a99b83; }
body[data-ui-theme="city"] :is(.story-market-callout, .morning-note-market-callout) strong { color: #93c1a5; }
body[data-ui-theme="city"] :is(.story-market-callout, .morning-note-market-callout)[data-tone="down"] strong { color: #d1848c; }
body[data-ui-theme="city"] .story-rule { color: #9f865f; }
body[data-ui-theme="city"] .story-rule::before,
body[data-ui-theme="city"] .story-rule::after { border-top-color: rgb(201 176 132 / 20%); }
body[data-ui-theme="city"] .story-message-body { color: #d8d1c6; }

body[data-ui-theme="city"] .story-run-rewards {
  border-block-color: rgb(201 176 132 / 18%);
  color: #bdb5aa;
  background: rgb(4 10 17 / 24%);
}

body[data-ui-theme="city"] .story-run-reward { color: #d8cab1; }
body[data-ui-theme="city"] .story-run-reward i {
  border-color: #8e754e;
  color: #ead9b8;
  background: #253342;
  box-shadow: inset 0 0 0 2px rgb(201 169 106 / 18%);
}

body[data-ui-theme="city"] .story-continue-button {
  border: 1px solid #af8c5c;
  border-radius: 2px;
  outline: 1px solid rgb(255 232 195 / 10%);
  outline-offset: -5px;
  color: #fff8ea;
  background: linear-gradient(#7e3949, #572534);
  box-shadow: inset 0 0 0 1px rgb(255 232 195 / 8%), 0 4px 0 #270e17;
}

body[data-ui-theme="city"] .story-continue-button:active {
  box-shadow: 0 1px 0 #270e17;
}

.result-card button { width: 100%; min-height: 44px; border: 3px solid #3c6033; border-radius: 6px; background: linear-gradient(#78aa56, #4e843e); box-shadow: 0 3px 0 #324f2c; cursor: pointer; color: #fff7d8; font: 900 10px/1 var(--story); }
.result-card button span { margin-left: 8px; font-size: 16px; }
.result-card .secondary { margin-top: 9px; min-height: 36px; border-width: 2px; border-color: #7e633f; color: #64472c; background: #ead5a2; box-shadow: 0 2px 0 #aa824e; font-size: 8px; }
.result-card .menu-return { margin-top: 9px; min-height: 34px; border-width: 2px; border-color: #8c693f; color: #6c4b2c; background: #ead6a4; box-shadow: 0 2px 0 #ad8651; font-size: 8px; }
.result-card > small { display: block; margin-top: 8px; color: #8c795a; font-size: 8px; }

.footer-disclaimer { margin: 11px 0 0; color: #f2dfb3; text-align: center; letter-spacing: .09em; text-shadow: 0 1px #684727; text-transform: uppercase; font: 800 8px/1 var(--story); }

@keyframes feed-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 821px) and (min-height: 850px) {
  .chart-panel { min-height: 385px; }
  .chart-wrap { height: 297px; }
  .order-panel, .position-panel { min-height: 275px; }
  .positions-list { min-height: 175px; }
  .empty-positions { height: 170px; }
}

@media (max-width: 1180px) {
  .app-shell { padding-inline: 12px; }
  .game-grid { grid-template-columns: 260px minmax(500px, 1fr); }
  .right-column { grid-column: 1 / -1; grid-template-columns: 1fr; grid-template-rows: minmax(220px, auto); }
  .market-feed { max-height: 310px; }
}

@media (max-width: 820px) {
  .calendar-detail-grid { grid-template-columns: 1fr; }
  .month-ledger { display: grid; grid-template-columns: repeat(3, 1fr); }
  .month-ledger .calendar-section-heading, .month-ledger .bill-countdown { grid-column: 1 / -1; }
  .ledger-entry { margin: 0; border-top: 1px solid rgb(135 96 51 / 24%); border-right: 1px solid rgb(135 96 51 / 24%); }
  .ledger-entry.current { margin: 5px; }
  .app-shell { padding: 8px 8px 20px; }
  .topbar { align-items: flex-start; }
  .prototype-tag { display: none; }
  .market-clock { padding: 0 8px; }
  .account-strip { grid-template-columns: 1fr; }
  .metric { min-height: 62px; }
  .capacity-metric { grid-column: 1 / -1; }
  .game-grid { grid-template-columns: 1fr; }
  .watch-panel { order: 2; }
  .watch-list { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, minmax(74px, auto)); }
  .watch-card:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .center-column { order: 1; }
  .right-column { order: 3; grid-column: auto; grid-template-columns: 1fr; }
  .edge-card { min-height: 92px; }
  .chart-wrap { height: 235px; }
}

@media (max-width: 570px) {
  .calendar-backdrop { padding: 7px; }
  .calendar-topbar { min-height: 58px; padding: 7px 8px; }
  .calendar-topbar .brand-mark { width: 32px; height: 32px; font-size: 16px; }
  .calendar-brand h1 { font-size: 14px; }
  .calendar-bill { min-width: 130px; padding: 7px; }
  .calendar-bill span { font-size: 6px; }
  .calendar-bill strong { font-size: 10px; }
  .calendar-intro { padding: 12px; }
  .calendar-intro h2 { font-size: 21px; }
  .calendar-route-panel { padding: 12px 9px 17px; }
  .calendar-legend { display: none; }
  .calendar-route { margin-inline: -1px; padding: 5px 2px 9px; grid-template-columns: repeat(5, 128px); overflow-x: auto; scrollbar-color: #89633c #dec38a; }
  .route-line { left: 50px; right: auto; width: 530px; }
  .day-node { min-height: 116px; }
  .briefing-card { padding: 13px 10px; }
  .briefing-heading h2 { font-size: 20px; }
  .signal-grid { grid-template-columns: 1fr; }
  .signal-grid article { border-right: 0; border-bottom: 1px solid #b58f5a; }
  .signal-grid article:last-child { border-bottom: 0; }
  .opening-focus { grid-template-columns: 1fr; }
  .focus-options { grid-template-columns: 1fr; }
  .focus-options button { min-height: 34px; }
  .month-ledger { display: block; }
  .ledger-entry { margin-inline: 10px; border-right: 0; }
  .ledger-entry.current { margin-block: 5px; }
  body { background: linear-gradient(180deg, #acd3d8 0 8rem, #b6c684 8rem 13rem, #9c7547 13rem 100%); }
  .app-shell { padding-inline: 6px; }
  .topbar { min-height: 54px; padding: 5px; gap: 5px; }
  .brand-lockup { gap: 4px; }
  .brand-mark { width: 32px; height: 32px; font-size: 16px; }
  .brand-line { padding: 5px 7px; }
  .brand-line h1 { max-width: 104px; font-size: 16px; line-height: 1; }
  .session-controls { gap: 3px; }
  .market-clock span:nth-child(2), .control-button { display: none; }
  .market-clock { min-height: 32px; padding: 0 5px; background: rgb(82 50 29 / 65%); }
  .market-clock strong { min-width: 41px; font-size: 11px; }
  .bill-goal { width: 69px; padding: 4px 5px; gap: 3px; }
  .bill-goal span { font-size: 7px; }
  .bill-goal strong { font-size: 9px; }
  .icon-button { width: 31px; height: 32px; }

  .account-strip { min-height: 102px; grid-template-columns: 1fr; gap: 3px; padding: 3px; }
  .metric { min-height: 52px; padding: 7px 5px; gap: 3px; border-radius: 3px; }
  .metric::before { display: none; }
  .metric .label { font-size: 7px; letter-spacing: .04em; }
  .metric strong { font-size: 13px; }
  .primary-metric strong { font-size: 19px; }
  .primary-metric .account-value-inline strong { font-size: 12px; }
  .metric small { font-size: 7px; }
  .capacity-metric { min-height: 52px; grid-column: 1 / -1; padding: 6px 7px; }
  .capacity-metric .metric-icon { display: none; }
  .capacity-stat strong { font-size: 10px; }
  .capacity-stat small { display: none; }

  .game-grid { gap: 8px; margin-top: 8px; }
  .watch-panel { order: 1; }
  .watch-panel .panel-header { min-height: 36px; padding: 6px 8px; }
  .watch-panel .panel-header h2 { font-size: 13px; }
  .live-chip { font-size: 7px; }
  .watch-list { grid-template-columns: repeat(4, 1fr); grid-template-rows: 62px; }
  .watch-card { min-height: 62px; padding: 5px 3px; grid-template-columns: minmax(0, 1fr); place-items: center; border-right: 1px solid var(--line-soft); }
  .watch-card:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .watch-card:last-child { border-right: 0; }
  .watch-card.active { border-left: 4px solid var(--wood-dark); transform: translateY(-2px) rotate(-.3deg); }
  .watch-card.active::before { display: none; }
  .watch-quote { width: 100%; gap: 4px; }
  .watch-main { display: grid; justify-items: end; gap: 3px; }
  .watch-main strong { justify-self: start; font-size: 9px; }
  .watch-identity small { display: none; }
  .watch-price { font-size: 10px; }
  .watch-sub { justify-content: space-between; gap: 2px; }
  .watch-sparkline { display: block; width: 31px; height: 11px; }
  .watch-sparkline path { stroke-width: 1.5; }
  .watch-change { padding: 2px 3px; font-size: 7px; }

  .center-column { order: 2; gap: 8px; }
  .chart-panel { min-height: 0; }
  .chart-header { min-height: 64px; padding: 7px 9px; grid-template-columns: minmax(130px, 1fr) auto; gap: 7px; }
  .asset-heading { gap: 5px; }
  .selected-emblem { width: 35px; height: 35px; }
  .asset-heading > div { display: grid; gap: 3px; }
  .asset-heading h2 { font-size: 13px; }
  .ticker-badge { width: fit-content; padding: 3px 5px; font-size: 9px; }
  .mission-chip { grid-row: 2; grid-column: 1 / -1; width: 100%; height: 25px; }
  .quote-block strong { font-size: 20px; }
  .quote-block span { font-size: 8px; }
  .chart-wrap { height: 180px; }
  .chart-footer { grid-template-columns: 44fr 15fr 37fr; font-size: 6px; }
  .chart-footer span:first-child { font-size: 0; }
  .chart-footer span:first-child::after { content: "DAWN"; font-size: 6px; }
  .chart-footer span:last-child { font-size: 0; }
  .chart-footer span:last-child::after { content: "TWILIGHT"; font-size: 6px; }

  .trade-row { grid-template-columns: 1fr; gap: 8px; }
  .order-panel, .position-panel { min-height: 235px; }
  .right-column { gap: 8px; }
  .edge-card { grid-template-columns: 32px 1fr; }
  .edge-card button { grid-column: 1 / -1; width: 100%; }
  .feed-item { min-height: 68px; }
  .result-card { padding: 22px 15px; }
  .menu-backdrop { padding: 12px; place-items: start center; }
  .main-menu { width: 100%; min-height: 640px; margin: 0; padding: 108px 26px 110px; }
  .run-card { margin-top: 3px; }
  .run-heading { min-height: 68px; padding: 12px 21px; grid-template-columns: minmax(0, 1.45fr) 1px minmax(0, 1fr) 17px; gap: 7px; }
  .run-status-divider { height: 37px; }
  .run-status-copy { gap: 4px; }
  .run-action-label { white-space: nowrap; font-size: clamp(10px, 3vw, 12px); }
  .run-duration { font-size: 7px; }
  .run-status-amount > span { font-size: 6px; }
  .run-status-amount strong { font-size: clamp(8px, 2.5vw, 10px); }
  .run-action-arrow { font-size: 16px; }
  .shop-menu-action-label { gap: 13px; font-size: 11px; }
  .shop-menu-action-label b { font-size: 16px; }
  .menu-action { min-height: 0; padding: 0; }
  .character-option-grid { --generation-rail-width: 110px; --generation-card-gap: 10px; gap: 7px; }
  .character-generation { min-height: 44px; padding: 6px 8px 6px 20px; letter-spacing: .1em; font-size: 9px; }
  .character-option { min-height: 96px; padding: 7px; grid-template-columns: 46px minmax(0, 1fr); gap: 6px; }
  .character-portrait { width: 46px; height: 72px; }
  .character-option-copy strong { font-size: clamp(11px, 3.6vw, 14px); }
  .character-option-copy small { font-size: clamp(7px, 2.5vw, 9px); }
  .persona-picker-backdrop { padding: 12px; place-items: start center; }
  .persona-picker { width: 100%; max-height: calc(100dvh - 24px); padding: 20px 14px; overflow-y: auto; }
  .persona-picker-heading h2 { font-size: 22px; }
  .persona-picker-heading p { font-size: 9px; }
  .persona-picker-options { margin-top: 15px; gap: 8px; }
  .persona-card { padding: 8px; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; text-align: center; }
  .persona-card-portrait { width: min(100%, 104px); }
  .persona-card-copy { gap: 4px; }
  .persona-card-copy strong { font-size: clamp(13px, 4.3vw, 17px); }
  .persona-card-copy small { font-size: 8px; }
  .persona-card-copy span { font-size: 6px; }
  .persona-picker-back { margin-top: 16px; }
  .market-sense-shop { padding: 10px; place-items: start center; }
  .market-sense-shop-panel { width: 100%; max-height: calc(100dvh - 20px); padding: 25px 17px 22px; border-width: 19px; border-image-width: 27px 22px; }
  .market-sense-shop-heading { align-items: flex-start; gap: 13px; padding-bottom: 14px; }
  .market-sense-shop-heading h2 { font-size: 25px; }
  .market-sense-shop-heading p { font-size: 8px; }
  .shop-balance { padding: 7px 9px 7px 7px; gap: 6px; }
  .shop-balance > span { width: 30px; height: 30px; font-size: 7px; }
  .shop-balance strong { font-size: 11px; }
  .market-sense-shop-items { margin-top: 13px; grid-template-columns: 1fr; gap: 10px; }
  .market-sense-shop-item { padding: 14px; }
  .market-sense-shop-item h3 { margin-top: 9px; font-size: 19px; }
  .market-sense-shop-item > p { min-height: 0; }
  .shop-item-cost { margin-top: 9px; }
  .shop-requirements,
  .shop-requirements-ready { min-height: 0 !important; margin-block: 9px 11px !important; }
  .shop-purchase-button { height: 44px; }
  .owned-upgrade-actions { max-height: 220px; grid-template-columns: 1fr; }
}

/* Calendar score history: completed days reopen the immutable result card. */
.day-node.historical-result-available {
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgb(82 112 59 / 22%);
}

.day-node.historical-result-available::after {
  content: "VIEW SCORE";
  position: absolute;
  top: 5px;
  right: 5px;
  color: #4c693c;
  letter-spacing: .05em;
  font: 900 clamp(5px, .55vw, 8px)/1 var(--story);
}

.day-node.historical-result-available:hover {
  background-color: rgb(220 228 157 / 58%);
  box-shadow: inset 0 0 0 3px rgb(73 107 53 / 34%);
}

.day-node.historical-result-available:focus-visible {
  z-index: 3;
  outline: 3px solid #315f39;
  outline-offset: -3px;
}

.result-backdrop[data-result-mode="history"] {
  background:
    radial-gradient(circle at 50% 30%, rgb(247 219 157 / 12%), transparent 36%),
    linear-gradient(rgb(35 48 35 / 46%), rgb(60 38 21 / 66%));
}

.historical-result-card #continue-button { max-width: 360px; margin-inline: auto; }

/* Market Sense cabinet layout: tablet and phone use one scroll surface. */
@media (max-width: 900px) {
  .market-sense-shop { padding: 6px; place-items: stretch; }
  .market-sense-shop-panel {
    width: 100%;
    height: calc(100dvh - 12px);
    aspect-ratio: auto;
    padding: 52px 24px 24px;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    background-size: auto 100%;
    background-position: center top;
  }
  .market-sense-shop-heading { padding: 0 44px 0 0; }
  .market-sense-shop-heading-copy { padding-left: 0; }
  .market-sense-shop-heading h2 { font-size: clamp(29px, 5.2vw, 43px); }
  .shop-selected-detail { grid-template-columns: 90px minmax(0, 1fr); }
  .shop-selected-actions { grid-column: 1 / -1; padding: 10px 0 0; grid-template-columns: minmax(0, 1fr) minmax(190px, 32%); align-items: center; border-top: 1px solid rgb(121 82 43 / 30%); border-left: 0; }
  .shop-category-tabs { padding-inline: 0; }
  .market-sense-shop-items { padding: 8px 3px 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 142px; overflow: visible; }
  .shop-close-button { position: relative; right: auto; bottom: auto; width: 140px; height: 38px; margin: 0 auto; }
}

@media (max-width: 570px) {
  .market-sense-shop-panel { padding: 50px 12px 18px; display: block; background-size: auto 100%; }
  .shop-close-corner { top: 12px; right: 12px; width: 34px; height: 34px; font-size: 21px; }
  .market-sense-shop-heading { margin-bottom: 10px; padding: 0; grid-template-columns: 1fr; gap: 9px; text-align: center; }
  .market-sense-shop-heading h2 { font-size: 31px; }
  .market-sense-shop-heading p { max-width: 330px; font-size: 9px; }
  .shop-balance { min-width: 170px; justify-self: center; }
  .shop-selected-detail { min-height: 0; margin-bottom: 10px; padding: 11px; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
  .shop-selected-icon { border-width: 3px; font-size: 21px; }
  .shop-selected-copy h3 { font-size: 21px; }
  .shop-selected-copy > p { font-size: 8px; }
  .shop-selected-state { padding: 4px 6px; }
  .shop-selected-actions { padding-top: 8px; grid-template-columns: 1fr; gap: 8px; }
  .shop-selected-requirements { min-height: 0; }
  .shop-detail-purchase { height: 42px; }
  .shop-category-tabs { margin-bottom: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .shop-category-tabs button { height: 40px; font-size: 9px; }
  .shop-category-tabs button > span { width: 21px; height: 21px; }
  .market-sense-shop-items { margin: 0 0 9px; padding: 8px 2px 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 136px; gap: 9px; }
  .market-sense-shop-item { min-height: 136px; padding: 17px 6px 8px; }
  .market-sense-shop-item > strong { font-size: 11px; }
  .shop-item-icon { width: 42px; height: 42px; font-size: 13px; }
  .market-sense-shop-item .shop-item-cost { font-size: 10px; }
  .shop-pagination { margin-bottom: 7px; }
  .market-sense-shop-status { margin-bottom: 5px; color: #f4d799; }
  .shop-close-button { margin: 0 auto 16px; }
}

/* Market Sense Shop v2: generated surfaces are composed around live controls. */
.market-sense-shop {
  padding: 10px;
  overflow: hidden;
  place-items: center;
}

.market-sense-shop-panel {
  width: min(1240px, calc(100vw - 20px));
  height: min(870px, calc(100dvh - 20px));
  aspect-ratio: auto;
  padding: 18px 36px 14px;
  display: grid;
  grid-template-rows: 96px 142px 48px minmax(0, 1fr) 56px 10px;
  gap: 7px;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 10px solid #4d2c16;
  border-radius: 16px;
  background:
    linear-gradient(rgb(48 28 13 / 12%), rgb(35 20 10 / 30%)),
    url("assets/ui/market-sense-shop/shop-backdrop-v1.png") center / cover no-repeat #5a341a;
  box-shadow: inset 0 0 0 3px #a36b34, 0 24px 48px rgb(22 12 6 / 72%);
  filter: none;
}

.shop-close-corner {
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-width: 3px;
  background: #f4dda8;
  box-shadow: inset 0 0 0 2px #bd8e4e, 0 3px 0 #4c2c17;
}

.market-sense-shop-heading {
  min-height: 0;
  padding: 10px 78px 10px 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  border: 18px solid transparent;
  border-image: url("assets/ui/market-sense-shop/shop-card-v1.png") 150 fill / 18px / 0 stretch;
  background: #efcf8e;
  text-align: left;
}

.market-sense-shop-heading-copy {
  position: relative;
  top: 0;
  height: 100%;
  padding-left: 0;
  display: flex;
  align-items: center;
}
.market-sense-shop-heading h2 {
  margin: 0;
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1;
}

.shop-balance {
  min-width: 190px;
  padding: 9px 14px 9px 9px;
  background: #efd699;
}
.shop-balance > span { width: 44px; height: 44px; }
.shop-balance small { font-size: 7px; }
.shop-balance strong { font-size: 19px; }

.shop-selected-detail {
  min-height: 0;
  padding: 9px 15px;
  grid-template-columns: 100px minmax(0, 1fr) minmax(220px, 25%);
  gap: 16px;
  border: 20px solid transparent;
  border-radius: 12px;
  border-image: url("assets/ui/market-sense-shop/shop-card-v1.png") 160 fill / 20px / 0 stretch;
  background: #efd49b;
  box-shadow: 0 5px 0 rgb(50 28 13 / 38%);
}

.shop-selected-icon,
.shop-item-icon,
.shop-tab-icon {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.shop-icon-research { background-image: url("assets/ui/market-sense-shop/category-research-v1.png"); }
.shop-icon-trading { background-image: url("assets/ui/market-sense-shop/category-trading-v1.png"); }
.shop-icon-discipline { background-image: url("assets/ui/market-sense-shop/category-discipline-v1.png"); }
.shop-icon-utility { background-image: url("assets/ui/market-sense-shop/category-utility-v1.png"); }

.shop-selected-icon {
  width: 92px;
  height: 92px;
  aspect-ratio: auto;
  border: 4px solid #76502b;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px #d4a661;
}
.shop-selected-meta { font-size: 8px; }
.shop-selected-state { padding: 6px 10px; font-size: 7px; }
.shop-selected-copy h3 { margin: 5px 0 4px; font-size: clamp(22px, 2.2vw, 30px); }
.shop-selected-copy > p { max-width: 650px; color: #52331e; font-size: 9px; line-height: 1.3; }
.shop-selected-cost { margin-top: 6px; }
.shop-selected-cost span { font-size: 8px; }
.shop-selected-cost strong { font-size: 20px; }
.shop-selected-actions { padding-left: 18px; gap: 10px; border-left-color: rgb(93 55 25 / 42%); }
.shop-selected-requirements { min-height: 34px; }
.shop-requirements li,
.shop-requirements li strong { font-size: 8px; }
.shop-requirements-ready { color: #315b32; font-size: 9px; }
.shop-detail-purchase { height: 40px; }
.shop-detail-purchase > span { color: #fff8dc; text-shadow: 0 2px #284b25; }

.shop-category-tabs {
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.shop-category-tabs button {
  height: 48px;
  padding: 5px 14px;
  gap: 10px;
  border-radius: 9px 9px 3px 3px;
  font-size: clamp(10px, 1.1vw, 14px);
}
.shop-category-tabs button > .shop-tab-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 2px solid #b78645;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 226 150 / 50%);
}

.market-sense-shop-items {
  min-height: 0;
  margin: 0;
  padding: 12px 14px 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(var(--shop-card-rows, 2), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
  align-content: stretch;
  overflow: visible;
  border: 9px solid #4e2c16;
  border-radius: 10px;
  background:
    linear-gradient(rgb(36 20 10 / 35%), rgb(36 20 10 / 35%)),
    url("assets/ui/market-sense-shop/shop-shelf-v1.png") center / 100% 100% repeat-y #392113;
  box-shadow: inset 0 0 0 2px #8d592d;
}

.market-sense-shop-item {
  min-height: 0;
  height: 100%;
  padding: 8px 9px 7px;
  grid-template-rows: 42px auto minmax(21px, auto) 23px;
  gap: 2px;
  border: 11px solid transparent;
  border-radius: 12px;
  border-image: url("assets/ui/market-sense-shop/shop-card-v1.png") 160 fill / 11px / 0 stretch;
  background: #edce8f;
  box-shadow: 0 5px 0 rgb(38 21 10 / 48%);
}
.market-sense-shop-item.selected {
  border-color: transparent;
  filter: brightness(1.04);
  box-shadow: 0 0 0 3px #e1a53d, 0 0 15px 5px rgb(255 194 62 / 78%), 0 5px 0 rgb(38 21 10 / 48%);
}
.market-sense-shop-item .shop-item-state {
  top: -7px;
  left: -6px;
  padding: 5px 9px;
  font-size: 7px;
}
.shop-item-icon {
  width: 42px;
  height: 42px;
  border: 3px solid #76502b;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #d2a05b;
  font-size: 0;
}
.market-sense-shop-item .shop-item-tier { font-size: 5px; }
.market-sense-shop-item > strong { font-size: clamp(10px, 1vw, 14px); }
.market-sense-shop-item .shop-item-cost { min-height: 23px; padding-block: 2px; font-size: clamp(9px, .9vw, 12px); }

.shop-pagination {
  min-height: 56px;
  margin: 0 auto;
  padding: 8px 26px;
  gap: 24px;
  border: 4px solid #4f2e17;
  border-radius: 9px;
  color: #f5d998;
  background: url("assets/ui/market-sense-shop/shop-shelf-v1.png") center / 100% 100% no-repeat #5d391f;
  box-shadow: inset 0 0 0 2px #a36c37, 0 4px 0 rgb(36 20 10 / 55%);
  font-size: 14px;
}
.shop-pagination button {
  width: 72px;
  height: 38px;
  border-width: 3px;
  border-radius: 7px;
  color: #ffe5a3;
  font-size: 25px;
}
.shop-pagination button:disabled { opacity: .48; }
.shop-page-position { min-width: 130px; gap: 7px; }
.shop-page-dots { gap: 8px; }
.shop-page-dots i { width: 10px; height: 10px; border-width: 2px; }
.market-sense-shop-status { min-height: 14px; font-size: 10px; }
.shop-close-button { display: none; }

@media (max-width: 900px) {
  .market-sense-shop-panel {
    width: min(760px, calc(100vw - 12px));
    height: calc(100dvh - 12px);
    padding: 48px 18px 18px;
    gap: 9px;
    background:
      linear-gradient(rgb(48 28 13 / 8%), rgb(35 20 10 / 28%)),
      url("assets/ui/market-sense-shop/shop-cabinet-phone-v1.png") center top / cover no-repeat #593419;
  }
  .market-sense-shop-heading { padding: 14px 54px 14px 20px; }
  .market-sense-shop-heading-copy { padding: 0; }
  .shop-selected-detail { grid-template-columns: 92px minmax(0, 1fr); }
  .shop-selected-icon { width: 84px; height: 84px; }
  .shop-selected-actions {
    grid-column: 1 / -1;
    padding: 9px 0 0;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    border-top: 1px solid rgb(93 55 25 / 35%);
    border-left: 0;
  }
  .market-sense-shop-items { grid-auto-rows: minmax(146px, 1fr); }
}

@media (max-width: 570px) {
  .market-sense-shop { padding: 4px; }
  .market-sense-shop-panel {
    width: 100%;
    height: calc(100dvh - 8px);
    padding: 42px 9px 10px;
    display: grid;
    grid-template-rows: auto auto auto minmax(174px, 1fr) auto auto auto;
    gap: 7px;
    border-width: 6px;
    border-radius: 10px;
    background:
      linear-gradient(rgb(48 28 13 / 10%), rgb(35 20 10 / 24%)),
      url("assets/ui/market-sense-shop/shop-cabinet-phone-v1.png") center top / auto 100% no-repeat #593419;
  }
  .shop-close-corner { top: 7px; right: 7px; width: 34px; height: 34px; font-size: 21px; }
  .market-sense-shop-heading {
    min-height: 0;
    margin: 0;
    padding: 6px 34px 6px 8px;
    grid-template-columns: 1fr;
    gap: 4px;
    border-width: 10px;
    border-image-width: 10px;
    text-align: left;
  }
  .market-sense-shop-heading-copy { top: 0; height: auto; }
  .market-sense-shop-heading h2 { margin: 0; font-size: 25px; line-height: 1; white-space: nowrap; }
  .shop-balance { min-width: 150px; padding: 4px 8px 4px 5px; gap: 6px; border-width: 2px; border-radius: 8px; justify-self: start; }
  .shop-balance > span { width: 25px; height: 25px; border-width: 2px; font-size: 6px; }
  .shop-balance div { gap: 2px; }
  .shop-balance small { font-size: 4px; }
  .shop-balance strong { font-size: 10px; }
  .shop-selected-detail {
    min-height: 0;
    margin: 0;
    padding: 8px;
    grid-template-columns: 58px minmax(0, 1fr) 96px;
    gap: 7px;
    border-width: 11px;
    border-image-width: 11px;
  }
  .shop-selected-icon { width: 54px; height: 54px; border-width: 2px; border-radius: 8px; }
  .shop-selected-meta { gap: 4px; font-size: 5px; }
  .shop-selected-state { padding: 3px 5px; font-size: 5px; }
  .shop-selected-copy h3 { margin: 3px 0; font-size: 16px; }
  .shop-selected-copy > p { font-size: 7px; line-height: 1.25; }
  .shop-selected-cost { margin-top: 4px; gap: 6px; }
  .shop-selected-cost span { font-size: 5px; }
  .shop-selected-cost strong { font-size: 13px; }
  .shop-selected-actions {
    grid-column: auto;
    padding: 0 0 0 6px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    border-top: 0;
    border-left: 1px solid rgb(93 55 25 / 35%);
  }
  .shop-selected-requirements { min-height: 0; }
  .shop-requirements { gap: 2px; }
  .shop-requirements li,
  .shop-requirements li strong { font-size: 5px; }
  .shop-requirements-ready { font-size: 6px; }
  .shop-detail-purchase { height: 31px; }
  .shop-detail-purchase > span { font-size: 7px; }
  .shop-category-tabs { margin: 0; gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-category-tabs button { height: 34px; padding: 3px 7px; gap: 6px; border-width: 2px; font-size: 8px; }
  .shop-category-tabs button > .shop-tab-icon { width: 23px; height: 23px; flex-basis: 23px; }
  .market-sense-shop-items {
    min-height: 174px;
    margin: 0;
    padding: 10px 8px 13px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(154px, 1fr);
    grid-auto-rows: minmax(154px, 1fr);
    gap: 8px;
    border-width: 6px;
  }
  .market-sense-shop-item { min-height: 154px; padding: 13px 7px 8px; border-width: 11px; border-image-width: 11px; }
  .shop-item-icon { width: 48px; height: 48px; border-width: 2px; }
  .market-sense-shop-item > strong { font-size: 11px; }
  .market-sense-shop-item .shop-item-cost { min-height: 23px; font-size: 9px; }
  .market-sense-shop-item .shop-item-state { top: -5px; left: -5px; padding: 4px 6px; font-size: 5px; }
  .shop-pagination { min-height: 54px; margin: 0 auto; padding: 5px 12px; gap: 11px; font-size: 10px; }
  .shop-pagination button { width: 51px; height: 36px; font-size: 20px; }
  .shop-page-position { min-width: 90px; gap: 4px; }
  .shop-page-dots { gap: 5px; }
  .shop-page-dots i { width: 7px; height: 7px; border-width: 1px; }
  .market-sense-shop-status { min-height: 10px; margin: 0; font-size: 7px; }
  .shop-close-button { position: relative; inset: auto; width: 126px; height: 34px; margin: 0 auto; display: block; }
}

/* Category art already includes its own painted medallion. */
.market-sense-shop .shop-selected-icon,
.market-sense-shop .shop-item-icon,
.market-sense-shop .shop-category-tabs button > .shop-tab-icon {
  border: 0;
  outline: 0;
  border-radius: 50%;
  background-color: transparent;
  background-position: center;
  background-size: 118% 118%;
  box-shadow: none;
}

.market-sense-shop .market-sense-shop-item {
  padding: 4px 8px 5px;
  grid-template-rows: minmax(50px, 1fr) 31px 22px;
  gap: 2px;
  border-width: 6px;
  border-image-width: 6px;
}

.market-sense-shop .shop-item-icon {
  width: 54px;
  height: 54px;
}

.market-sense-shop .market-sense-shop-item > strong {
  width: 100%;
  height: 31px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  overflow-wrap: anywhere;
  color: #50311e;
  font-size: clamp(10px, .95vw, 13px);
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
}

.market-sense-shop .market-sense-shop-item .shop-item-cost {
  min-height: 22px;
  height: 22px;
  margin: 0;
  padding-block: 2px;
}

@media (max-width: 570px) {
  .market-sense-shop .market-sense-shop-item {
    padding: 6px 7px 8px;
    grid-template-rows: minmax(68px, 1fr) 40px 24px;
    border-width: 7px;
    border-image-width: 7px;
  }

  .market-sense-shop .shop-item-icon {
    width: 68px;
    height: 68px;
  }

  .market-sense-shop .market-sense-shop-item > strong {
    height: 40px;
    padding-inline: 2px;
    font-size: 11px;
    line-height: 1.08;
  }

  .market-sense-shop .market-sense-shop-item .shop-item-cost {
    min-height: 24px;
    height: 24px;
  }
}

/* Focused header refinement: reference-derived rails, parchment inset, and medallion overlap. */
.calendar-topbar {
  min-height: 116px;
  padding: 18px 18px 17px;
  overflow: visible;
  isolation: isolate;
  border: 14px solid transparent;
  border-radius: 9px 9px 4px 4px;
  border-image: url("assets/ui/reference-slices/header-chassis-9slice.png") 38 42 / 14px / 2px stretch;
  background: #8c5a31 url("assets/ui/reference-slices/header-wood-field.png") center / 360px 100% repeat-x;
  box-shadow: inset 0 0 0 1px rgb(255 226 158 / 22%), 0 7px 0 #3f2818, 0 12px 24px rgb(45 27 14 / 28%);
}

.calendar-topbar::before,
.calendar-topbar::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10px;
  right: 10px;
  height: 11px;
  pointer-events: none;
  background: url("assets/ui/reference-slices/header-rail-strip.png") center / auto 100% repeat-x;
  opacity: .86;
}

.calendar-topbar::before { top: 7px; }
.calendar-topbar::after { bottom: 6px; transform: rotate(180deg); }

.calendar-identity {
  width: min(45.5%, 520px);
  gap: 8px;
}

.calendar-seal {
  width: 88px;
  height: 88px;
  margin-left: -10px;
  z-index: 5 !important;
}

.calendar-brand {
  width: min(405px, calc(100% - 82px));
  height: 78px;
  padding: 10px 23px 9px;
  overflow: hidden;
  border: 2px solid #956333;
  border-radius: 10px 5px 9px 4px;
  background: #efdaa5 url("assets/ui/reference-slices/parchment-tile.png") center / 390px auto repeat;
  box-shadow: inset 0 0 0 3px rgb(255 240 191 / 58%), inset 0 -5px 9px rgb(137 85 38 / 10%), 0 3px 0 rgb(66 39 20 / 48%);
  transform: rotate(-.12deg);
}

.calendar-brand::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(139 91 45 / 36%);
  border-radius: 7px 3px 6px 3px;
  pointer-events: none;
}

.calendar-brand h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(27px, 3.15vw, 40px);
  letter-spacing: -.025em;
  text-shadow: 0 1px rgb(255 238 190 / 66%);
}

.calendar-header-scene {
  width: 35%;
  height: 82px;
  left: 45%;
  top: 17px;
  border: 3px solid #76502c;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgb(255 232 174 / 30%), 0 2px 0 rgb(54 32 17 / 48%);
}

.calendar-header-family {
  width: 270px;
  height: 166px;
  left: 50%;
  top: -15px;
  z-index: 7 !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 3px rgb(51 30 15 / 30%));
}

.calendar-bill {
  width: min(270px, 25%);
  min-width: 225px;
  height: 82px;
  padding: 12px 18px 11px;
  filter: drop-shadow(0 3px 2px rgb(48 28 14 / 24%));
}

.calendar-bill span { font-size: clamp(7px, .72vw, 9px); }
.calendar-bill strong { font-size: clamp(15px, 1.65vw, 21px); }

@media (max-width: 760px) {
  .calendar-topbar {
    min-height: 130px;
    padding: 12px 10px 11px;
    grid-template-columns: minmax(0, 1fr) 126px;
    grid-template-rows: 54px 58px;
    border-width: 8px;
    border-image-width: 8px;
    box-shadow: inset 0 0 0 1px rgb(255 226 158 / 18%), 0 5px 0 #3f2818, 0 9px 18px rgb(45 27 14 / 24%);
  }

  .calendar-topbar::before,
  .calendar-topbar::after { left: 5px; right: 5px; height: 7px; }
  .calendar-topbar::before { top: 3px; }
  .calendar-topbar::after { bottom: 3px; }

  .calendar-identity { width: 100%; gap: 4px; }
  .calendar-seal { width: 49px; height: 49px; margin-left: -3px; }
  .calendar-brand { width: calc(100% - 50px); height: 54px; padding: 8px 15px; border-width: 1px; }
  .calendar-brand h1 { font-size: clamp(16px, 4.9vw, 19px); white-space: nowrap; }
  .calendar-header-scene { width: 100%; height: 58px; left: auto; top: auto; border-width: 2px; }
  .calendar-header-family { width: 145px; height: 92px; left: 31%; top: 47px; transform: translateX(-50%); }
  .calendar-bill { width: 126px; min-width: 0; height: 58px; padding: 8px; }
  .calendar-bill span { font-size: 5.5px; }
  .calendar-bill strong { font-size: clamp(8px, 2.7vw, 11px); }
}

/* Desktop trading reflow: semantic columns mirror the visual reading order. */
#game-app .session-action-bar { display: none; }

#game-app .feed-scope {
  color: #7b684d;
  letter-spacing: .04em;
  font-size: .58em;
  white-space: nowrap;
}

#game-app .chart-footer {
  padding-inline: 14px;
  grid-template-columns: minmax(0, 1fr);
}

/* Keep the established tablet composition despite the column-owned DOM. */
@media (min-width: 701px) and (max-width: 1180px) {
  #game-app .center-column,
  #game-app .right-column { display: contents !important; }

  #game-app .chart-panel { grid-column: 2; grid-row: 1; }
  #game-app .trade-row { grid-column: 3; grid-row: 1; }
  #game-app .feed-panel { grid-column: 1 / -1; grid-row: 2; }
}

@media (min-width: 1181px) {
  #game-app .topbar { min-height: 76px; height: auto; }

  #game-app .session-controls {
    width: min(500px, 49%);
    min-width: 470px;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 190px;
    align-items: center;
    gap: 9px;
  }

  #game-app .session-action-bar {
    min-width: 0;
    min-height: 38px;
    padding-left: 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px;
    align-items: center;
    gap: 7px;
    border-left: 1px solid rgb(100 73 42 / 34%);
  }

  #game-app .session-transport {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
    gap: 4px;
  }

  #game-app .session-action-bar :is(.control-button, .restart-day-button) {
    min-width: 0;
    height: 30px;
    padding: 0 7px;
    border: 1px solid #80613d;
    border-radius: 3px;
    color: #674b2d;
    background: linear-gradient(#f8e9bd, #dec38c);
    box-shadow: inset 0 1px rgb(255 250 221 / 72%);
    letter-spacing: .025em;
    font: 900 7px/1 var(--story);
    white-space: nowrap;
  }

  #game-app .session-action-bar :is(.control-button, .restart-day-button):hover {
    filter: brightness(1.05);
  }

  #game-app .session-action-bar .restart-day-button {
    border-color: #9b7761;
    color: #805544;
    background: #e8d7b5;
  }

  #game-app .game-grid {
    grid-template-columns: minmax(0, 22fr) minmax(0, 52fr) minmax(0, 26fr);
    align-items: start;
  }

  #game-app .watch-panel {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
  }

  #game-app .center-column {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-content: start;
  }

  #game-app .center-column > :is(.chart-panel, .feed-panel) {
    grid-column: 1;
    grid-row: auto;
  }

  #game-app .right-column {
    min-width: 0;
    height: auto;
    grid-column: 3;
    grid-row: 1;
    display: block !important;
    align-self: start;
  }

  #game-app .right-column .trade-row {
    min-width: 0;
    height: auto;
    grid-column: auto;
    grid-row: auto;
  }

  #game-app .feed-panel {
    min-height: 250px;
    max-height: 280px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  #game-app .market-feed {
    min-height: 0;
    height: auto;
    max-height: none;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-ui-theme="city"] #game-app .session-action-bar {
    border-left-color: rgb(185 151 96 / 34%);
  }

  body[data-ui-theme="city"] #game-app .session-action-bar :is(.control-button, .restart-day-button) {
    border-color: #625d57;
    color: #ded5c5;
    background: linear-gradient(#26313e, #151d28);
    box-shadow: inset 0 1px rgb(255 242 215 / 6%);
  }

  body[data-ui-theme="city"] #game-app .session-action-bar .restart-day-button {
    border-color: #704c54;
    color: #c7aeb0;
    background: #251d24;
  }
}

/* Phone upgrade desk: fixed detail above a direct-purchase scrolling list. */
@media (max-width: 570px) {
  .market-sense-shop-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    overflow: hidden;
  }
  .shop-selected-detail { grid-template-columns: 58px minmax(0, 1fr); }
  .shop-selected-actions,
  .shop-selected-cost { display: none; }
  .market-sense-shop-items {
    min-height: 190px;
    padding: 8px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .market-sense-shop-row {
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 7px;
    align-items: stretch;
  }
  .market-sense-shop-row:last-child { margin-bottom: 0; }
  .market-sense-shop .market-sense-shop-item {
    min-width: 0;
    min-height: 86px;
    padding: 8px 8px 8px 9px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 2px 7px;
    align-items: center;
    text-align: left;
  }
  .market-sense-shop .shop-item-icon {
    width: 54px;
    height: 54px;
    grid-row: 1 / 3;
    grid-column: 1;
  }
  .market-sense-shop .market-sense-shop-item > strong {
    width: auto;
    height: auto;
    padding: 0;
    grid-row: 1;
    grid-column: 2;
    justify-content: flex-start;
    font-size: 11px;
    text-align: left;
  }
  .market-sense-shop .market-sense-shop-item .shop-item-cost {
    min-height: 20px;
    height: 20px;
    grid-row: 2;
    grid-column: 2;
    justify-content: flex-start;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 8px;
  }
  .market-sense-shop .market-sense-shop-item .shop-item-cost small { display: none; }
  .shop-row-purchase {
    min-width: 0;
    padding: 8px 6px;
    display: grid;
    place-content: center;
    gap: 6px;
    border: 3px solid #31562f;
    border-radius: 7px;
    color: #fff8d7;
    background: linear-gradient(#71924f, #466a3d);
    box-shadow: inset 0 0 0 2px rgb(255 244 190 / 20%), 0 3px 0 #294329;
    font: 900 9px/1 var(--story);
    text-align: center;
    cursor: pointer;
  }
  .shop-row-purchase strong { color: #ffe29a; white-space: nowrap; font: 900 10px/1 var(--numbers); }
  .shop-row-purchase:disabled {
    border-color: #695d49;
    color: #d7c9a8;
    background: linear-gradient(#7c725d, #5d5648);
    box-shadow: inset 0 0 0 2px rgb(255 244 190 / 10%);
    cursor: not-allowed;
  }
  .shop-row-purchase:disabled strong { color: #d8c69a; }
  .shop-pagination { display: none; }
}

@media (max-width: 700px) {
  #game-app .feed-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    order: initial;
  }
  #game-app .center-column > #owned-upgrades-panel:has([data-upgrade-action="event_radar"]),
  #game-app .center-column > #owned-upgrades-panel:has([data-upgrade-action="private_whisper"]) {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  #game-app .right-column { display: contents !important; }
}

/* Han's market uses hard-edged candle geometry against the dark chart. */
body[data-ui-theme="city"] #game-app .chart-candle { filter: none; }

/* Route-owned city trading presentation ---------------------------------- */
.city-desk-wordmark { display: none; }

body.ui-theme-loading #game-app {
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
}

body[data-ui-theme="city"]:not(.menu-open) {
  color-scheme: dark;
  color: #eee7d7;
  background:
    linear-gradient(rgb(8 13 21 / 76%), rgb(10 14 22 / 91%)),
    url("assets/illustrations/city-chart-surface-v1.png") center / cover fixed no-repeat,
    #0b111a;
}

body[data-ui-theme="city"] #game-app {
  --ink: #eee7d7;
  --muted: #aaa49b;
  --line: #665e59;
  --line-soft: rgb(214 201 179 / 15%);
  --wood-dark: #080d14;
  --wood: #131b27;
  --wood-light: #4a4039;
  --parchment: #151d29;
  --parchment-light: #202a38;
  --parchment-deep: #101721;
  --green: #69a989;
  --green-dark: #8bc4a5;
  --green-soft: #203d34;
  --red: #b96b72;
  --red-dark: #d58a8f;
  --red-soft: #40252b;
  --gold: #b39462;
  --blue: #7995aa;
  --violet: #8c7187;
  font-family: Inter, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  opacity: 1;
  transform: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

body[data-ui-theme="city"] #game-app .topbar {
  border-color: #070b11;
  background:
    linear-gradient(90deg, rgb(7 11 17 / 78%) 0 32%, transparent 43% 70%, rgb(7 10 16 / 76%)),
    var(--campaign-portrait-image) center 18% / min(16vw, 190px) auto no-repeat,
    url("assets/illustrations/city-chart-surface-v1.png") center / cover no-repeat,
    #0b121c;
  box-shadow:
    inset 0 0 0 1px rgb(190 153 96 / 55%),
    inset 0 -22px 32px rgb(4 7 12 / 44%),
    0 7px 18px rgb(0 0 0 / 38%);
}

body[data-ui-theme="city"] #game-app .topbar::after {
  height: 7px;
  border-top-color: rgb(184 148 91 / 55%);
  background: linear-gradient(90deg, #0c121b, #5f2735 47% 53%, #0c121b);
}

body[data-ui-theme="city"] #game-app .brand-mark {
  border-color: #87714e;
  background: linear-gradient(145deg, #232d39, #101722);
  box-shadow: inset 0 0 0 2px rgb(211 183 132 / 24%), 0 3px 10px rgb(0 0 0 / 42%);
}

body[data-ui-theme="city"] #game-app .brand-mark svg { fill: none; stroke: #c9b58e; }

body[data-ui-theme="city"] #game-app .brand-line {
  border: 1px solid rgb(188 155 101 / 56%);
  border-left: 3px solid #7d3142;
  border-radius: 2px;
  color: #f2ecdf;
  background: linear-gradient(100deg, rgb(8 13 20 / 94%), rgb(18 25 35 / 83%));
  box-shadow: inset 0 0 0 1px rgb(255 242 211 / 6%), 0 3px 12px rgb(0 0 0 / 38%);
  transform: none;
}

body[data-ui-theme="city"] #game-app .brand-line h1 {
  color: #f1eadb;
  letter-spacing: -.02em;
  text-shadow: 0 2px 8px rgb(0 0 0 / 78%);
}

body[data-ui-theme="city"] #game-app .brand-tagline { display: none; }
body[data-ui-theme="city"] #game-app .city-desk-wordmark {
  display: block;
  color: #c5b99f;
  letter-spacing: .13em;
  font: 650 8px/1.1 Inter, "Noto Sans KR", "Malgun Gothic", sans-serif;
  text-transform: none;
  white-space: nowrap;
  user-select: text;
}

body[data-ui-theme="city"] #game-app .session-controls {
  border-color: rgb(185 151 96 / 42%);
  background: rgb(7 11 17 / 76%);
  box-shadow: inset 0 0 0 1px rgb(255 239 209 / 6%);
  backdrop-filter: blur(5px);
}

body[data-ui-theme="city"] #game-app :is(.header-week-card, .header-rent-card) {
  border: 1px solid #625d57;
  border-top-color: #9d835b;
  border-radius: 2px;
  background: linear-gradient(145deg, rgb(31 41 54 / 94%), rgb(13 19 28 / 96%));
  box-shadow: inset 0 0 0 1px rgb(255 242 215 / 5%), 0 2px 8px rgb(0 0 0 / 32%);
}
body[data-ui-theme="city"] #game-app :is(.header-week-card, .header-rent-card) span { color: #aaa398; }
body[data-ui-theme="city"] #game-app :is(.header-week-card, .header-rent-card) strong { color: #f3ecdd; }
body[data-ui-theme="city"] #game-app .header-rent-card small { color: #d18a91; }
body[data-ui-theme="city"] #game-app .header-rent-card small.goal-met { color: #9ac8ad; }
body[data-ui-theme="city"] #game-app .goal-track { background: #26303c; }
body[data-ui-theme="city"] #game-app .goal-progress { background: linear-gradient(90deg, #5f2735, #a15b69); }

body[data-ui-theme="city"] #game-app .account-strip {
  border-color: #090e15;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 44px),
    linear-gradient(90deg, #0c131d, #222a34 48%, #0c121b);
  box-shadow: inset 0 0 0 1px rgb(188 153 98 / 34%), 0 5px 14px rgb(0 0 0 / 32%);
}

body[data-ui-theme="city"] #game-app .metric {
  border-color: #4e5660;
  color: #eee7d8;
  background: linear-gradient(135deg, rgb(35 45 58 / 97%), rgb(16 23 33 / 98%));
  box-shadow: inset 0 0 0 1px rgb(255 245 222 / 5%), 0 2px 8px rgb(0 0 0 / 30%);
}
body[data-ui-theme="city"] #game-app .pnl-metric {
  border-left-color: #793445;
  background: linear-gradient(115deg, #222b37, #121a25 66%, #241720);
}
body[data-ui-theme="city"] #game-app .capacity-metric.leverage-metric {
  border-color: #4d5965;
  background: linear-gradient(120deg, #202b38, #101822);
}
body[data-ui-theme="city"] #game-app .metric-icon {
  border-color: rgb(196 171 125 / 25%);
  border-radius: 2px;
  background: rgb(8 13 20 / 54%);
  stroke: #c2ad84;
}
body[data-ui-theme="city"] #game-app :is(.label, .account-balance-stat span, .leverage-heading span, .leverage-scale, #capacity-detail) { color: #a9a39a; }
body[data-ui-theme="city"] #game-app .account-balance-stat {
  border-color: rgb(205 191 169 / 15%);
  border-radius: 2px;
  background: rgb(4 8 13 / 31%);
}
body[data-ui-theme="city"] #game-app :is(.account-balance-stat strong, .leverage-readout strong) { color: #f1eadb; }
body[data-ui-theme="city"] #game-app input[type="range"] { accent-color: #843a4b; }

body[data-ui-theme="city"] #game-app .panel {
  border-color: #252e39;
  border-radius: 4px;
  color: #eae3d6;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px),
    linear-gradient(145deg, #19222d, #0e151f);
  box-shadow: inset 0 0 0 1px rgb(190 159 105 / 18%), 0 6px 16px rgb(0 0 0 / 35%);
}
body[data-ui-theme="city"] #game-app :is(.panel-header, .chart-header) {
  border-bottom-color: #4a4140;
  color: #efe8dc;
  background: linear-gradient(100deg, #242d38, #111923 72%, #23131a);
}
body[data-ui-theme="city"] #game-app :is(.panel-header h2, .asset-heading h2) { color: #eee8dc; }
body[data-ui-theme="city"] #game-app .feed-panel::after { display: none; }

body[data-ui-theme="city"] #game-app .watch-benchmark {
  border-color: #394651;
  border-radius: 2px;
  color: #cbc4b8;
  background: linear-gradient(110deg, #101a25, #18242f);
}
body[data-ui-theme="city"] #game-app :is(.market-index-label, #market-index-symbol) { color: #c5ad7e; }
body[data-ui-theme="city"] #game-app .watch-card {
  border-bottom-color: rgb(215 203 181 / 10%);
  background: rgb(13 20 29 / 62%);
}
body[data-ui-theme="city"] #game-app .watch-card.active {
  border-color: #7d3546;
  color: #f0eadd;
  background: linear-gradient(90deg, rgb(104 40 56 / 42%), rgb(22 30 40 / 96%));
  box-shadow: inset 0 0 0 1px rgb(226 202 158 / 12%), 2px 2px 8px rgb(0 0 0 / 35%);
  transform: translateX(3px);
}
body[data-ui-theme="city"] #game-app :is(.watch-main strong, .watch-price, .watch-identity small) { color: #e9e2d6; }
body[data-ui-theme="city"] #game-app .watch-change.up {
  color: #b9ecd0;
  background: #254a3c;
}
body[data-ui-theme="city"] #game-app .watch-change.down {
  color: #ffd2d4;
  background: #5a2933;
}
body[data-ui-theme="city"] #game-app :is(.watch-day-pnl.positive, .market-index-change.positive, .pnl-value.positive) { color: #8fd2ad !important; }
body[data-ui-theme="city"] #game-app :is(.watch-day-pnl.negative, .market-index-change.negative, .pnl-value.negative) { color: #e18e96 !important; }
body[data-ui-theme="city"] #game-app :is(.market-index-price, .market-index-change) {
  color: #e4ddd0;
  text-shadow: 0 1px 2px rgb(0 0 0 / 65%);
}
body[data-ui-theme="city"] #game-app .watch-add-symbol {
  border-top-color: #343d48;
  color: #8f918f;
  background: #111923;
}
body[data-ui-theme="city"] #game-app .watch-add-symbol span { color: #a8895f; }

body[data-ui-theme="city"] #game-app .chart-wrap {
  background:
    linear-gradient(rgb(8 13 20 / 35%), rgb(8 13 20 / 48%)),
    url("assets/illustrations/city-chart-surface-v1.png") center 48% / cover no-repeat,
    #0b121c;
}
body[data-ui-theme="city"] #game-app .chart-wrap::after {
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 54px, rgb(219 206 181 / 3%) 54px 55px),
    linear-gradient(90deg, rgb(7 11 17 / 12%), transparent 38% 68%, rgb(69 24 37 / 12%));
}
body[data-ui-theme="city"] #game-app .chart-grid { stroke: #81909d; opacity: .35; }
body[data-ui-theme="city"] #game-app .chart-label { fill: #d8d1c4; stroke: #111824; stroke-width: 4px; }
body[data-ui-theme="city"] #game-app .ticker-badge {
  border-color: #b49766;
  color: #f2e6ce;
  background: #27333f;
  box-shadow: inset 0 0 0 1px rgb(255 239 204 / 7%);
}
body[data-ui-theme="city"] #game-app .quote-block strong {
  color: #f2eadc;
  text-shadow: 0 2px 5px rgb(0 0 0 / 62%);
}
body[data-ui-theme="city"] #game-app .quote-block span.positive { color: #91d0ae !important; }
body[data-ui-theme="city"] #game-app .quote-block span.negative { color: #e38d96 !important; }
body[data-ui-theme="city"] #game-app .chart-candle-up :is(.chart-candle-wick, .chart-candle-body, .chart-candle-open) {
  stroke: #86d5ab;
}
body[data-ui-theme="city"] #game-app .chart-candle-up .chart-candle-body { fill: #3f9a73; }
body[data-ui-theme="city"] #game-app .chart-candle-down :is(.chart-candle-wick, .chart-candle-body, .chart-candle-open) {
  stroke: #f09aa0;
}
body[data-ui-theme="city"] #game-app .chart-candle-down .chart-candle-body { fill: #bd5662; }
body[data-ui-theme="city"] #game-app .chart-candle-body { stroke-width: 1.8; }
body[data-ui-theme="city"] #game-app .chart-candle-wick { stroke-width: 1.65; }
body[data-ui-theme="city"] #game-app .chart-candle { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 72%)); }
body[data-ui-theme="city"] #game-app .chart-footer { color: #b7b0a5; background: #111923; }
body[data-ui-theme="city"] #game-app .chart-empty { color: #aaa498; }
body[data-ui-theme="city"] #game-app .current-price-pill-up rect { fill: #427a63; stroke: #7ab093; }
body[data-ui-theme="city"] #game-app .current-price-pill-down rect { fill: #843d4b; stroke: #ca7a83; }

body[data-ui-theme="city"] #game-app :is(.product-button, .preset-row button, .quantity-control button, .control-button, .icon-button) {
  border-color: #4e5863;
  border-radius: 2px;
  color: #ded7ca;
  background: linear-gradient(#26313e, #151e29);
  box-shadow: inset 0 1px rgb(255 246 224 / 5%), 0 2px 4px rgb(0 0 0 / 24%);
}
body[data-ui-theme="city"] #game-app .product-button small { color: #a9a39a; }
body[data-ui-theme="city"] #game-app .product-button.active {
  border-color: #ad7780;
  color: #fff8eb;
  background: linear-gradient(#7c3948, #572735);
}
body[data-ui-theme="city"] #game-app .product-button.active small { color: #efe1d0; }
body[data-ui-theme="city"] #game-app .product-button.locked { filter: grayscale(.25); opacity: .58; }
body[data-ui-theme="city"] #game-app :is(.product-detail, .quantity-label, .order-estimate, .position-symbol small, .position-stat span) { color: #aaa49b; }
body[data-ui-theme="city"] #game-app .quantity-control input {
  border-color: #4e5863;
  color: #f0e9dc;
  background: #0c141e;
}
body[data-ui-theme="city"] #game-app :is(.order-status, .live-chip, .feed-count, .mission-chip) {
  border-color: #615756;
  border-radius: 2px;
  color: #d8ccb8;
  background: #202832;
}
body[data-ui-theme="city"] #game-app .order-status.locked { color: #c8bdad; background: #363139; }

body[data-ui-theme="city"] #game-app .market-feed {
  background:
    linear-gradient(rgb(10 16 24 / 88%), rgb(13 19 28 / 86%)),
    url("assets/illustrations/city-chart-surface-v1.png") center bottom / cover no-repeat;
}
body[data-ui-theme="city"] #game-app .feed-item {
  border-bottom-color: rgb(215 203 181 / 10%);
  color: #ded7ca;
  background: rgb(18 26 37 / 78%);
}
body[data-ui-theme="city"] #game-app .feed-item p { color: #cbc4b8; }
body[data-ui-theme="city"] #game-app .gossip-avatar { border-color: #66555b; background: #202936; }
body[data-ui-theme="city"] #game-app .feed-item.is-social-post { background: linear-gradient(100deg, rgb(18 37 48 / 94%), rgb(18 26 37 / 86%)); }
body[data-ui-theme="city"] #game-app .feed-item.is-social-post .gossip-avatar { border-color: #597487; color: #f1ece2; background: #0b131b; }
body[data-ui-theme="city"] #game-app :is(.feed-handle, .feed-social-cue) { color: #819eae; }
body[data-ui-theme="city"] #game-app :is(.feed-cashtag, .feed-hashtag) { color: #75b1cf; }
body[data-ui-theme="city"] #game-app .feed-ticker { color: #e9d9bd; background: #603041; }
body[data-ui-theme="city"] #game-app .empty-positions svg { display: none; }
body[data-ui-theme="city"] #game-app .empty-positions::before {
  content: "◇";
  color: #9e825d;
  font: 300 44px/1 Inter, sans-serif;
}
body[data-ui-theme="city"] #game-app .empty-positions-copy strong { color: #d9d2c6; }
body[data-ui-theme="city"] #game-app .empty-positions-copy span { color: #9e9a93; }
body[data-ui-theme="city"] #game-app .empty-positions-copy small { color: #ae9771; }

body[data-ui-theme="city"] #game-app :is(button, input, summary):focus-visible {
  outline: 2px solid #e2c28e;
  outline-offset: 2px;
}

body[data-ui-theme="city"].morning-note-open #game-app { visibility: hidden; }
body[data-ui-theme="city"] .morning-note-backdrop {
  background:
    linear-gradient(rgb(6 11 18 / 68%), rgb(7 11 17 / 86%)),
    url("assets/illustrations/city-chart-surface-v1.png") center / cover fixed no-repeat,
    #08101a;
  backdrop-filter: blur(8px) saturate(.78);
}
body[data-ui-theme="city"] .morning-note-card {
  border: 2px solid #2e3844;
  border-top-color: #a2875d;
  border-radius: 4px;
  outline: 1px solid rgb(198 163 105 / 23%);
  outline-offset: -10px;
  color: #e8e1d5;
  background:
    repeating-linear-gradient(90deg, transparent 0 62px, rgb(226 214 192 / 2.5%) 62px 63px),
    linear-gradient(145deg, rgb(27 36 48 / 98%), rgb(10 16 24 / 98%));
  box-shadow: inset 0 0 45px rgb(0 0 0 / 21%), 0 30px 90px rgb(0 0 0 / 64%);
}
body[data-ui-theme="city"] .morning-note-card::before { border-color: rgb(202 168 109 / 16%); }
body[data-ui-theme="city"] .morning-note-heading { border-bottom-color: #5f3540; }
body[data-ui-theme="city"] .morning-note-sun {
  border: 1px solid #8e754e;
  border-radius: 3px;
  color: #dbc79d;
  background:
    linear-gradient(rgb(9 14 22 / 10%), rgb(9 14 22 / 40%)),
    var(--campaign-portrait-image) center 18% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(255 239 207 / 7%), 0 3px 10px rgb(0 0 0 / 38%);
}
body[data-ui-theme="city"] .morning-note-sun span { visibility: hidden; }
body[data-ui-theme="city"] .morning-note-eyebrow { color: #b9a77f; }
body[data-ui-theme="city"] .morning-note-heading h2 { color: #eee7da; letter-spacing: -.02em; }
body[data-ui-theme="city"] .morning-note-heading p { color: #aaa49b; }
body[data-ui-theme="city"] .morning-note-item {
  border-color: #3f4953;
  border-top-color: color-mix(in srgb, var(--note-asset-color), #c5ae82 32%);
  border-radius: 3px;
  color: #e5ded1;
  background: linear-gradient(145deg, rgb(31 41 53 / 96%), rgb(16 23 33 / 98%));
  box-shadow: inset 0 0 0 1px rgb(255 245 222 / 4%), 0 4px 13px rgb(0 0 0 / 24%);
}
body[data-ui-theme="city"] .morning-note-item::after { display: none; }
body[data-ui-theme="city"] .morning-note-source-icon {
  border-color: #62595a;
  border-radius: 2px;
  background: #111a25;
}
body[data-ui-theme="city"] :is(.morning-note-route, .morning-note-market-label) { color: #b7a37f; }
body[data-ui-theme="city"] .morning-note-item-heading strong { color: #eee8dd; }
body[data-ui-theme="city"] .morning-note-item-heading strong small { color: #aaa49c; }
body[data-ui-theme="city"] .morning-note-confidence {
  border-color: #5b5557;
  border-radius: 2px;
  color: #d5c9b7;
  background: #242c36;
}
body[data-ui-theme="city"] .tone-up .morning-note-confidence { color: #a5cbb4; background: #1d382f; }
body[data-ui-theme="city"] .tone-down .morning-note-confidence { color: #d69a9f; background: #3e232b; }
body[data-ui-theme="city"] .morning-note-item h3 { color: #f0e9dc; }
body[data-ui-theme="city"] .morning-note-item p { color: #c2bcb2; }
body[data-ui-theme="city"] .morning-note-item-social {
  border-color: #435360;
  border-top-color: #6f91a3;
  background: linear-gradient(145deg, rgb(20 37 49 / 98%), rgb(12 20 29 / 99%));
}
body[data-ui-theme="city"] .morning-note-social-source { color: #91a9b5; border-bottom-color: rgb(134 166 182 / 19%); }
body[data-ui-theme="city"] .morning-note-social-x { border-color: #678496; color: #f2ede4; background: #0b1219; }
body[data-ui-theme="city"] .morning-note-social-source > span:last-child { color: #7f8d94; }
body[data-ui-theme="city"] .morning-note-social-avatar { border-color: #607b89; color: #dce6e8; background: #253d4a; }
body[data-ui-theme="city"] .morning-note-social-author strong { color: #eee8dd; }
body[data-ui-theme="city"] .morning-note-social-author div span { color: #91a3ab; }
body[data-ui-theme="city"] .morning-note-item .morning-note-social-post { color: #e4e2dc; }
body[data-ui-theme="city"] :is(.morning-note-cashtag, .morning-note-hashtag) { color: #79b6d3; }
body[data-ui-theme="city"] .morning-note-social-context { border-color: rgb(131 158 171 / 19%); color: #aeb8b9; background: rgb(4 11 17 / 25%); }
body[data-ui-theme="city"] .morning-note-social-context strong { color: #91a9b5; }
body[data-ui-theme="city"] .morning-note-research { color: #cfbb94; background: #242d36; }
body[data-ui-theme="city"] .morning-note-item footer { border-top-color: rgb(205 193 172 / 12%); color: #aaa49b; }
body[data-ui-theme="city"] .morning-note-item-kospi {
  border-color: #4c5660;
  background: linear-gradient(100deg, #151f2a, #23161e);
}
body[data-ui-theme="city"] .morning-note-market-symbol { color: #e7dfd2; }
body[data-ui-theme="city"] .tone-up .morning-note-market-move { color: #93c1a5; }
body[data-ui-theme="city"] .tone-down .morning-note-market-move { color: #d1848c; }
body[data-ui-theme="city"] .morning-note-continue {
  border-color: #af8c5c;
  border-radius: 2px;
  color: #fff8ea;
  background: linear-gradient(#7e3949, #572534);
  box-shadow: inset 0 0 0 1px rgb(255 232 195 / 10%), 0 4px 0 #270e17;
}

@media (max-width: 700px) {
  body[data-ui-theme="city"]:not(.menu-open) {
    background:
      linear-gradient(rgb(8 13 21 / 82%), rgb(8 12 19 / 92%)),
      url("assets/illustrations/city-chart-surface-v1.png") center / auto 100% fixed no-repeat,
      #090e16;
  }
  body[data-ui-theme="city"] #game-app .topbar {
    background-position: center, 61% 18%, center;
    background-size: auto, 124px auto, cover;
  }
  body[data-ui-theme="city"] #game-app .topbar::before { color: #d9c6a1; text-shadow: 0 2px #070a0f; }
  body[data-ui-theme="city"] #game-app .brand-lockup::after {
    display: block;
    width: 52px;
    height: 42px;
    right: 7px;
    top: 6px;
    border: 1px solid rgb(203 169 112 / 62%);
    border-radius: 2px;
    background:
      linear-gradient(rgb(7 11 17 / 8%), rgb(7 11 17 / 22%)),
      var(--campaign-portrait-image) center 18% / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgb(255 238 205 / 8%), 0 2px 7px rgb(0 0 0 / 42%);
  }
  body[data-ui-theme="city"] #game-app .brand-line { margin-left: 30px; padding-inline: 10px; }
  body[data-ui-theme="city"] #game-app .brand-line h1 { font-size: 17px; }
  body[data-ui-theme="city"] #game-app .city-desk-wordmark { font-size: 6px; letter-spacing: .09em; }
  body[data-ui-theme="city"] #game-app .watch-card.active {
    border-left-color: #8e4151;
    background: linear-gradient(90deg, #44202c, #18212c);
  }
  body[data-ui-theme="city"] #game-app summary.panel-header::after { color: #c1aa83; }
}

@media (prefers-reduced-motion: reduce) {
  body.ui-theme-loading #game-app { transform: none; }
  body[data-ui-theme="city"] #game-app { transition: none; }
}

/* Final interaction and hierarchy refinements. */
.market-sense-shop-panel {
  grid-template-rows: 92px 154px minmax(0, 1fr) 56px 10px;
}

.market-sense-shop-heading-copy,
.market-sense-shop-heading .shop-balance {
  transform: translateY(-12px);
}

.shop-selected-copy h3 {
  margin: 2px 0 5px;
  font-size: clamp(19px, 1.8vw, 24px);
}

.shop-selected-copy > p {
  max-width: 720px;
  color: #3f291b;
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 750;
  line-height: 1.42;
}

@media (max-width: 570px) {
  .market-sense-shop-panel {
    grid-template-rows: auto auto minmax(174px, 1fr) auto auto auto;
  }

  .market-sense-shop-heading-copy,
  .market-sense-shop-heading .shop-balance { transform: translateY(-3px); }
  .shop-selected-copy h3 { font-size: 15px; }
  .shop-selected-copy > p { font-size: 9px; line-height: 1.35; }
}

/* Run rewards drawer anchored to the existing calendar summary. */
button.calendar-bill {
  appearance: none;
  cursor: pointer;
  font: inherit;
}

button.calendar-bill:hover { filter: drop-shadow(0 4px 3px rgb(48 28 14 / 32%)) brightness(1.03); }
button.calendar-bill:focus-visible { outline: 3px solid #fff0b5; outline-offset: 3px; }

.calendar-rewards-panel {
  width: min(330px, 42vw);
  padding: 12px;
  position: absolute !important;
  z-index: 30 !important;
  top: calc(100% - 8px);
  right: 18px;
  display: grid;
  gap: 10px;
  border: 3px solid #724a28;
  border-radius: 8px;
  color: #573820;
  background: #efd99f url("assets/ui/reference-slices/parchment-tile.png") center / 330px auto repeat;
  box-shadow: inset 0 0 0 2px rgb(255 243 199 / 62%), 0 7px 0 rgb(68 40 20 / 52%), 0 14px 28px rgb(42 25 13 / 34%);
}

.calendar-rewards-panel[hidden] { display: none; }
.calendar-rewards-panel > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 9px; }
.calendar-rewards-panel > div > span { letter-spacing: .1em; font: 900 7px/1 var(--story); }
.calendar-reward-icons { min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; }

.calendar-reward-icon {
  width: 34px;
  height: 34px;
  position: relative;
  flex: 0 0 auto;
  border: 2px solid #76502b;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px #d4a661, 0 2px 0 rgb(76 45 23 / 35%);
}

.calendar-reward-icon::after {
  content: attr(data-reward-name);
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: 180px;
  padding: 6px 8px;
  border-radius: 4px;
  color: #fff2c5;
  background: #274836;
  box-shadow: 0 3px 8px rgb(37 22 12 / 30%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity .12s ease, transform .12s ease;
  font: 800 8px/1.2 var(--story);
}

.calendar-reward-icon:hover::after,
.calendar-reward-icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.calendar-reward-icon:focus-visible { outline: 2px solid #315b42; outline-offset: 2px; }
.calendar-reward-empty { color: #80684c; font: 700 8px/1 var(--story); }

@media (max-width: 760px) {
  .calendar-rewards-panel { width: min(300px, calc(100vw - 28px)); top: calc(100% - 5px); right: 7px; padding: 10px; }
  .calendar-rewards-panel > div { grid-template-columns: 70px minmax(0, 1fr); }
  .calendar-reward-icon { width: 30px; height: 30px; }
}

/* Calendar cohesion pass: one compact framed object at desktop sizes. */
@media (min-width: 761px) {
  .calendar-backdrop {
    padding: 12px 18px 16px;
  }

  .calendar-shell {
    width: min(1040px, 100%);
    min-height: 0;
  }

  .calendar-topbar {
    min-height: 116px;
    height: 116px;
    padding: 13px 15px 12px;
    border-width: 11px;
    border-image-width: 11px;
    border-radius: 9px 9px 0 0;
    box-shadow: inset 0 0 0 1px rgb(255 226 158 / 22%), 0 4px 0 #3f2818, 0 8px 16px rgb(45 27 14 / 22%);
  }

  .calendar-topbar::before,
  .calendar-topbar::after {
    left: 8px;
    right: 8px;
    height: 8px;
  }

  .calendar-topbar::before { top: 4px; }
  .calendar-topbar::after { bottom: 4px; }

  .calendar-identity {
    width: min(43%, 430px);
    gap: 5px;
  }

  .calendar-seal {
    width: 68px;
    height: 68px;
    margin-left: -5px;
  }

  .calendar-brand {
    width: min(350px, calc(100% - 62px));
    height: 62px;
    padding: 8px 20px;
  }

  .calendar-brand h1 {
    font-size: clamp(24px, 2.8vw, 33px);
  }

  .calendar-header-scene {
    width: 38%;
    height: 72px;
    left: 42%;
    top: 13px;
  }

  .calendar-header-family {
    width: 200px;
    height: 122px;
    top: -3px;
  }

  .calendar-bill {
    width: min(230px, 24%);
    min-width: 205px;
    height: 68px;
    padding: 10px 17px 9px;
  }

  .calendar-bill span { font-size: clamp(7px, .68vw, 8px); }
  .calendar-bill strong { font-size: clamp(15px, 1.5vw, 18px); }

  .calendar-month-card {
    min-height: 446px;
    height: 446px;
    padding: 16px 28px 20px;
    border-width: 12px;
    border-top-width: 9px;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px rgb(112 72 32 / 16%), inset 0 0 28px rgb(117 76 34 / 10%);
  }

  .calendar-month-heading {
    height: 40px;
    flex-basis: 40px;
  }

  .calendar-month-heading h2 {
    font-size: clamp(24px, 2.5vw, 30px);
    letter-spacing: .07em;
  }

  .calendar-weekdays {
    height: 24px;
    flex-basis: 24px;
    font-size: 7px;
  }

  .calendar-route.calendar-month-grid {
    min-height: 0;
  }

  .calendar-day,
  .day-node {
    min-height: 0;
    padding: 5px 7px;
  }

  .day-node.current-day time {
    width: 43px;
    height: 43px;
    font-size: 20px;
  }

  .calendar-actions {
    width: 100%;
    min-height: 76px;
    margin: -2px auto 0;
    padding: 7px 15% 10px;
    gap: 8px;
    border: 10px solid transparent;
    border-top-width: 7px;
    border-radius: 0 0 9px 9px;
    border-image: url("assets/ui/reference-slices/calendar-frame-9slice.png") 64 / 10px / 1px stretch;
    background: #77502f url("assets/ui/reference-slices/wood-tile.png") center / auto 100% repeat-x;
    box-shadow: 0 5px 0 #3f2818, 0 9px 18px rgb(45 27 14 / 24%);
  }

  .calendar-drawer summary,
  .calendar-actions > .calendar-menu-button,
  .calendar-actions > .start-day-button,
  .log-drawer summary {
    height: 54px;
    min-height: 54px;
    padding: 8px 16px;
  }

  .log-drawer summary {
    color: #51351f;
    background-image: url("assets/ui/reference-slices/button-cream-normal.png");
  }

  .log-drawer summary:hover {
    background-image: url("assets/ui/reference-slices/button-cream-hover.png");
  }

  .log-drawer summary:active {
    background-image: url("assets/ui/reference-slices/button-cream-pressed.png");
  }

  .calendar-action-copy strong,
  .calendar-actions > .start-day-button .calendar-action-copy strong,
  .log-drawer .calendar-action-copy strong {
    font-size: 13px;
  }

  .calendar-garden-cluster-left {
    width: 122px;
    height: 76px;
    left: -18px;
    bottom: -7px;
  }

  .calendar-garden-cluster-right {
    width: 128px;
    height: 79px;
    right: -20px;
    bottom: -8px;
  }

}

/* Calendar cohesion pass: one compact framed object at desktop heights. */
@media (min-width: 761px) {
  .calendar-backdrop {
    padding: 10px;
  }

  .calendar-shell {
    width: min(1120px, 100%);
    height: clamp(600px, calc(100dvh - 20px), 740px);
    min-height: 600px;
    max-height: 740px;
  }

  .calendar-topbar {
    height: 88px;
    min-height: 88px;
    padding: 9px 14px 10px;
    gap: 12px;
    border-width: 10px;
    border-image-width: 10px;
    border-radius: 12px 12px 2px 2px;
    box-shadow: inset 0 0 0 1px rgb(255 226 158 / 20%), 0 4px 0 #3f2818, 0 8px 16px rgb(45 27 14 / 24%);
  }

  .calendar-topbar::before,
  .calendar-topbar::after {
    left: 7px;
    right: 7px;
    height: 7px;
  }

  .calendar-topbar::before { top: 4px; }
  .calendar-topbar::after { bottom: 3px; }

  .calendar-identity {
    width: min(42%, 440px);
    gap: 5px;
  }

  .calendar-seal {
    width: 62px;
    height: 62px;
    margin-left: -5px;
  }

  .calendar-brand {
    width: min(350px, calc(100% - 58px));
    height: 57px;
    padding: 7px 17px;
    border-width: 1px;
    border-radius: 8px 4px 7px 3px;
  }

  .calendar-brand::after { inset: 4px; }

  .calendar-brand h1 {
    font-size: clamp(22px, 2.45vw, 31px);
    letter-spacing: -.018em;
  }

  .calendar-header-scene {
    width: 32%;
    height: 60px;
    left: 43.5%;
    top: 9px;
    border-width: 2px;
    opacity: .94;
  }

  .calendar-header-family {
    width: 176px;
    height: 106px;
    left: 51%;
    top: -9px;
  }

  .calendar-bill {
    width: min(222px, 23%);
    min-width: 200px;
    height: 59px;
    padding: 8px 12px;
    gap: 3px;
  }

  .calendar-bill span {
    font-size: clamp(6px, .64vw, 8px);
    letter-spacing: .085em;
  }

  .calendar-bill strong { font-size: clamp(13px, 1.45vw, 18px); }

  .calendar-month-card {
    min-height: 0;
    margin-top: -2px;
    padding: 7px 13px 10px;
    border-width: 16px;
    border-image-width: 16px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 0 #422819, 0 10px 20px rgb(45 28 15 / 22%);
  }

  .calendar-month-heading {
    height: 34px;
    flex-basis: 34px;
    gap: 10px;
  }

  .calendar-month-heading h2 {
    font-size: clamp(22px, 2.25vw, 28px);
    letter-spacing: .055em;
  }

  .calendar-month-heading > span {
    font-size: 12px;
    opacity: .72;
  }

  .calendar-weekdays {
    height: 23px;
    flex-basis: 23px;
    font-size: clamp(7px, .68vw, 9px);
  }

  .calendar-route.calendar-month-grid { min-height: 0; }

  .calendar-day,
  .day-node {
    padding: clamp(3px, .42vw, 6px);
    font-size: clamp(7px, .76vw, 11px);
  }

  .day-node time { font-size: clamp(8px, .86vw, 12px); }
  .day-node i { font-size: clamp(12px, 1.35vw, 18px); }
  .day-result { font-size: clamp(5px, .56vw, 8px); }
  .day-node.current-day time {
    width: clamp(34px, 3.55vw, 46px);
    height: clamp(34px, 3.55vw, 46px);
    font-size: clamp(15px, 1.55vw, 20px);
  }

  .calendar-actions {
    width: calc(100% - 30px);
    height: 70px;
    min-height: 70px;
    margin: -13px auto 0;
    padding: 8px 24px 7px;
    grid-template-columns: 1fr 1.22fr 1fr;
    gap: 9px;
    border: 10px solid transparent;
    border-radius: 0 0 10px 10px;
    border-image: url("assets/ui/reference-slices/header-chassis-9slice.png") 38 42 / 10px / 1px stretch;
    background: #895b34 url("assets/ui/reference-slices/header-wood-field.png") center / 360px 100% repeat-x;
    box-shadow: inset 0 0 0 1px rgb(255 226 158 / 18%), 0 5px 0 #3f2818, 0 9px 16px rgb(45 27 14 / 23%);
  }

  .calendar-drawer summary,
  .calendar-actions > .calendar-menu-button,
  .calendar-actions > .start-day-button,
  .log-drawer summary {
    height: 44px;
    min-height: 44px;
    padding: 7px 15px;
  }

  .calendar-actions .log-drawer summary {
    color: #51351f;
    background-image: url("assets/ui/reference-slices/button-cream-normal.png");
  }

  .calendar-actions .log-drawer summary:hover { background-image: url("assets/ui/reference-slices/button-cream-hover.png"); }
  .calendar-actions .log-drawer summary:active { background-image: url("assets/ui/reference-slices/button-cream-pressed.png"); }

  .calendar-action-copy strong,
  .calendar-actions > .start-day-button .calendar-action-copy strong,
  .log-drawer .calendar-action-copy strong { font-size: clamp(12px, 1.12vw, 15px); }

  .calendar-actions > .start-day-button .calendar-action-copy strong {
    font-size: clamp(10px, .92vw, 12px);
  }

  .calendar-action-trail,
  .calendar-actions > .start-day-button .calendar-action-trail,
  .log-drawer .calendar-action-trail {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }

  .calendar-garden-cluster-left {
    width: 102px;
    height: 64px;
    left: -24px;
    bottom: -10px;
  }

  .calendar-garden-cluster-right {
    width: 108px;
    height: 67px;
    right: -25px;
    bottom: -10px;
  }

}

/* Settings and spouse portraits ------------------------------------------- */
.settings-menu-action {
  width: 88%;
  justify-self: center;
}

.settings-menu-action:hover { transform: translateY(-1px); }
.settings-menu-action:hover .menu-action-art { filter: brightness(1.05) drop-shadow(0 3px 2px rgb(87 55 28 / 23%)); }
.settings-menu-action:active { transform: translateY(1px); }
.settings-menu-action:active .menu-action-art { filter: brightness(.97) drop-shadow(0 1px 1px rgb(87 55 28 / 20%)); }

.settings-menu {
  position: fixed;
  z-index: 90;
  inset: 0;
  padding: 18px;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgb(39 24 12 / 78%);
  backdrop-filter: blur(8px) saturate(.78);
}

.settings-menu[hidden] { display: none; }

.settings-panel {
  position: relative;
  width: min(570px, 100%);
  padding: clamp(28px, 5vw, 48px);
  border: 8px solid transparent;
  border-image: url("assets/ui/reference-slices/calendar-frame-9slice.png") 42 / 8px stretch;
  border-radius: 10px;
  outline: 2px solid rgb(255 239 187 / 55%);
  outline-offset: -13px;
  color: #4b301d;
  background: #ead39d url("assets/ui/reference-slices/parchment-tile.png") center / 390px auto repeat;
  box-shadow: inset 0 0 28px rgb(112 70 30 / 14%), 0 26px 70px rgb(24 14 8 / 52%);
}

.settings-close-corner {
  position: absolute;
  top: 14px;
  right: 15px;
  width: 34px;
  height: 34px;
  border: 2px solid #795534;
  border-radius: 50%;
  color: #684326;
  background: #efdca8;
  box-shadow: inset 0 0 0 2px rgb(255 246 208 / 60%), 0 2px 0 #9a7040;
  cursor: pointer;
  font: 900 20px/1 var(--story);
}

.settings-heading { text-align: center; }
.settings-eyebrow { color: #63804c; letter-spacing: .18em; font: 900 8px/1 var(--story); }
.settings-heading h2 { margin: 7px 0 8px; color: #274d34; font: 900 clamp(31px, 5vw, 43px)/1 var(--story); }
.settings-heading p { margin: 0; color: #76583a; font-size: 12px; line-height: 1.45; }

.display-settings,
.music-settings,
.spouse-settings {
  min-width: 0;
  margin: 22px 0 0;
  padding: 18px;
  border: 2px solid rgb(126 86 43 / 48%);
  border-radius: 7px;
  background: rgb(255 244 204 / 35%);
}

.display-settings legend,
.music-settings legend,
.spouse-settings legend {
  padding: 0 11px;
  color: #5d4028;
  letter-spacing: .11em;
  text-align: center;
  text-transform: uppercase;
  font: 900 9px/1 var(--story);
}

.display-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.display-mode-option {
  min-width: 0;
  min-height: 78px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 3px solid #a47a46;
  border-radius: 7px;
  color: #5c402a;
  background: linear-gradient(#f7e8b9, #ddc185);
  box-shadow: inset 0 0 0 2px rgb(255 249 218 / 52%), 0 3px 0 #8b6239;
  cursor: pointer;
  text-align: left;
}

.display-mode-option:hover { filter: brightness(1.03); transform: translateY(-1px); }
.display-mode-option:active { transform: translateY(2px); }
.display-mode-option[aria-pressed="true"] {
  border-color: #3e6b38;
  color: #29492f;
  background: linear-gradient(#e8edb6, #bdcf82);
  box-shadow: inset 0 0 0 2px rgb(255 255 213 / 60%), 0 3px 0 #4f693d;
}

.display-mode-option:disabled { opacity: .52; cursor: not-allowed; filter: grayscale(.4); transform: none; }
.display-mode-option > span:nth-child(2) { min-width: 0; display: grid; gap: 6px; }
.display-mode-option strong { color: inherit; letter-spacing: .06em; font: 900 11px/1 var(--story); }
.display-mode-option small { color: #7d6245; font-size: 8px; line-height: 1.3; }
.display-mode-option i { opacity: 0; color: #355a35; font: 900 17px/1 var(--story); }
.display-mode-option[aria-pressed="true"] i { opacity: 1; }

.display-mode-icon {
  position: relative;
  width: 36px;
  height: 27px;
  display: block;
  border: 3px solid currentColor;
  border-radius: 3px;
  opacity: .82;
}

.display-mode-icon-windowed::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid currentColor;
}

.display-mode-icon-fullscreen::before,
.display-mode-icon-fullscreen::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-color: currentColor;
  border-style: solid;
}

.display-mode-icon-fullscreen::before { border-width: 2px 0 0 2px; }
.display-mode-icon-fullscreen::after { border-width: 0 2px 2px 0; }
.display-mode-help { margin: 11px 2px 0; display: block; color: #76583a; text-align: center; font-size: 8px; line-height: 1.35; }

.music-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
}

.music-toggle { min-height: 72px; }
.music-note-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  font: 900 23px/1 var(--story);
}

.music-volume-control {
  min-width: 0;
  padding: 12px 14px;
  display: grid;
  align-content: center;
  gap: 12px;
  border: 3px solid #a47a46;
  border-radius: 7px;
  color: #5c402a;
  background: linear-gradient(#f7e8b9, #ddc185);
  box-shadow: inset 0 0 0 2px rgb(255 249 218 / 52%), 0 3px 0 #8b6239;
}

.music-volume-control > span { display: flex; justify-content: space-between; gap: 10px; }
.music-volume-control strong,
.music-volume-control output { letter-spacing: .06em; font: 900 9px/1 var(--story); }
.music-volume-control input { width: 100%; accent-color: #416e49; cursor: pointer; }
.music-volume-control > small { color: #76583a; font-size: 8px; line-height: 1.2; }
.music-volume-control { grid-column: 1 / -1; }
.music-background-toggle { min-height: 72px; }
.music-background-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  font: 900 20px/1 var(--story);
}

@media (max-width: 570px) {
  .entrance-screen {
    padding: 12px;
    background-image:
      linear-gradient(180deg, rgb(38 40 31 / 14%) 0 18%, transparent 42%, rgb(29 24 17 / 10%) 68%, rgb(25 20 14 / 46%) 100%),
      url("assets/illustrations/wealth-family-legacy-start-wallpaper-mobile-v4.png");
    background-position: center, 50% 50%;
  }
  .entrance-card {
    min-height: calc(100dvh - 24px);
    padding: clamp(16px, 3vh, 28px) 8px clamp(22px, 5vh, 42px);
  }
  .entrance-title-art {
    width: min(330px, 88vw);
    margin-top: clamp(4px, 2vh, 16px);
  }
  .entrance-action {
    min-width: min(315px, 92vw);
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entrance-action { animation: none; }
}

.spouse-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spouse-option {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 9px 12px 9px 8px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  border: 3px solid #a47a46;
  border-radius: 7px;
  color: #5c402a;
  background: linear-gradient(#f7e8b9, #ddc185);
  box-shadow: inset 0 0 0 2px rgb(255 249 218 / 52%), 0 3px 0 #8b6239;
  cursor: pointer;
  text-align: left;
}

.spouse-option:hover { filter: brightness(1.03); transform: translateY(-1px); }
.spouse-option:active { transform: translateY(2px); }
.spouse-option[aria-pressed="true"] {
  border-color: #3e6b38;
  color: #29492f;
  background: linear-gradient(#e8edb6, #bdcf82);
  box-shadow: inset 0 0 0 2px rgb(255 255 213 / 60%), 0 3px 0 #4f693d;
}

.spouse-option-placeholder {
  width: 72px;
  height: 88px;
  display: block;
  border: 2px solid #8a653d;
  border-radius: 36px 36px 9px 9px;
  background-color: #d9c28c;
  background-image: url("assets/characters/spouses-v1.png");
  background-repeat: no-repeat;
  background-size: 200% auto;
  box-shadow: inset 0 0 0 2px rgb(255 243 198 / 42%);
}

.spouse-option-portrait-girl { background-position: left top; }
.spouse-option-portrait-boy { background-position: right top; }
.spouse-option > span:nth-child(2) { min-width: 0; display: grid; gap: 6px; }
.spouse-option strong { color: inherit; letter-spacing: .08em; font: 900 13px/1 var(--story); }
.spouse-option small { color: #7d6245; font-size: 8px; line-height: 1.3; }
.spouse-option i { opacity: 0; color: #355a35; font: 900 19px/1 var(--story); }
.spouse-option[aria-pressed="true"] i { opacity: 1; }

.settings-status { min-height: 18px; margin: 13px 0 7px; color: #4c6c3b; text-align: center; font: 800 9px/1.4 var(--story); }
.settings-done-button {
  width: min(300px, 100%);
  min-height: 53px;
  margin: 0 auto;
  display: block;
  border: 4px solid #2d5136;
  border-radius: 6px;
  outline: 2px solid #bd9554;
  outline-offset: -8px;
  color: #fff1c5;
  background: linear-gradient(#416e49, #244a32);
  box-shadow: 0 4px 0 #6d4a2d;
  cursor: pointer;
  letter-spacing: .13em;
  font: 900 12px/1 var(--story);
}

.settings-menu button:focus-visible { outline: 3px solid #f5c95f; outline-offset: 3px; }

.story-sender-mark[data-story-portrait] {
  overflow: hidden;
  color: transparent;
  background-color: #d6bd82;
  background-repeat: no-repeat;
}

.story-sender-mark[data-story-portrait^="spouse-"] {
  background-image: url("assets/characters/spouses-v1.png");
  background-size: 200% auto;
}

.story-sender-mark[data-story-portrait="spouse-girl"] { background-position: left top; }
.story-sender-mark[data-story-portrait="spouse-boy"] { background-position: right top; }
.story-sender-mark[data-story-portrait="banker"] {
  background-image: url("assets/characters/banker-v1.png");
  background-position: center top;
  background-size: 240% auto;
}

@media (max-width: 570px) {
  .settings-menu { padding: 10px; }
  .settings-panel { padding: 34px 18px 24px; }
  .settings-heading p { padding-inline: 15px; font-size: 10px; }
  .display-settings,
  .music-settings,
  .spouse-settings { margin-top: 16px; padding: 12px; }
  .display-mode-options { grid-template-columns: 1fr; gap: 9px; }
  .display-mode-option { min-height: 66px; }
  .music-options { grid-template-columns: 1fr; gap: 9px; }
  .spouse-options { grid-template-columns: 1fr; gap: 9px; }
  .spouse-option { min-height: 94px; grid-template-columns: 62px minmax(0, 1fr) 22px; }
  .spouse-option-placeholder { width: 62px; height: 74px; }
  .settings-status { margin-top: 9px; }
}

/* Run-to-run desk builds */
.build-board {
  margin-top: 12px;
  padding: 12px;
  border: 2px solid #7d603c;
  border-radius: 5px;
  background: rgb(255 247 211 / 42%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%);
}

.build-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.build-heading span,
.build-option > div > span {
  color: var(--green-dark);
  letter-spacing: .13em;
  font: 900 8px/1 var(--story);
}

.build-heading h3 {
  margin: 3px 0 0;
  color: #533820;
  font: 900 18px/1 var(--story);
}

.build-heading > strong {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid #8a693f;
  border-radius: 999px;
  color: #fff5d3;
  background: var(--green);
  letter-spacing: .08em;
  font: 900 8px/1 var(--story);
}

.build-board > p {
  margin: 7px 0 0;
  color: #755a3d;
  font-size: 9px;
  line-height: 1.35;
}

.build-options {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.build-option {
  min-width: 0;
  padding: 9px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  border: 1px solid #a27d4c;
  border-radius: 4px;
  background: #ead5a4;
}

.build-option.selected {
  border: 2px solid #3f6d36;
  background: #f2e2b3;
  box-shadow: inset 0 0 0 2px rgb(91 132 64 / 14%);
}

.build-option.locked:not(.selected) { background: #dfcba0; }
.build-option h4 { margin: 3px 0 0; color: #563b25; font: 900 13px/1.1 var(--story); }
.build-option > p { margin: 0; color: #6f573e; font-size: 9px; line-height: 1.35; }
.build-option dl { margin: 0; display: grid; gap: 4px; }
.build-option dl > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 5px; }
.build-option dt { color: var(--green-dark); font: 900 7px/1.3 var(--story); }
.build-option dd { margin: 0; color: #6c5135; font-size: 8px; line-height: 1.3; }
.build-option button {
  min-height: 30px;
  border: 1px solid #6a5134;
  border-radius: 3px;
  color: #fff6d7;
  background: #6d8f4d;
  cursor: pointer;
  letter-spacing: .08em;
  font: 900 8px/1 var(--story);
}
.build-option button:disabled { cursor: default; color: #76664f; background: #c8b792; opacity: .8; }
.build-option.selected button:disabled { color: #f8efd1; background: #496f3d; opacity: 1; }
.build-board .build-transparency { color: #536848; font-weight: 800; }
.menu-progression { margin: 12px 0 0; color: #496f3d; font: 900 8px/1.3 var(--story); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 570px) {
  .build-board { padding: 10px 8px; }
  .build-heading { align-items: flex-start; }
  .build-heading h3 { font-size: 16px; }
  .build-options { grid-template-columns: 1fr; }
  .build-option { min-height: 0; }
  .build-option button { min-height: 36px; }

  .story-message-backdrop { padding: 48px 12px 16px; place-items: center; }
  .story-message-card { min-height: min(530px, calc(100dvh - 70px)); padding: 54px 22px 24px; }
  .story-day-plaque { top: -18px; min-width: 88%; min-height: 39px; padding: 11px 12px; }
  .story-message-heading { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .story-sender-mark { width: 64px; font-size: 21px; box-shadow: inset 0 0 0 4px #d1b87d, 0 3px 0 rgb(90 60 31 / 24%); }
  .story-message-heading h2 { margin-bottom: 9px; font-size: clamp(25px, 9vw, 34px); }
  .story-message-heading p { font-size: 12px; }
  .story-message-heading p span { display: block; margin: 0 0 3px; }
  .story-rule { margin: 23px 0 20px; }
  .story-message-body { font-size: clamp(19px, 6vw, 23px); line-height: 1.5; }
  .story-run-rewards { grid-template-columns: 1fr; padding: 10px; }
  .story-run-rewards-intro { grid-column: 1; }
  .story-run-reward { padding: 9px; }
  .story-run-reward.groundhog-day strong { font-size: 16px; }
  .story-run-reward.groundhog-day p { font-size: 10px; }
  .story-run-reward-passive { padding-block: 7px; }
  .story-continue-button { min-height: 56px; margin-top: 22px; }
}

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

/* Illustrated interface pass ------------------------------------------------ */

html { background: #80613f; }

body {
  background:
    linear-gradient(180deg, rgb(255 246 210 / 8%), rgb(93 69 38 / 18%)),
    url("assets/illustrations/chart-landscape.png") center bottom / cover fixed no-repeat;
}

body::before {
  inset: auto 0 0;
  height: 32vh;
  opacity: .38;
  background:
    radial-gradient(80% 95% at 0 100%, #526842 0 31%, transparent 32%),
    radial-gradient(85% 100% at 100% 100%, #607544 0 29%, transparent 30%);
}

/* Calendar overworld: month-first illustrated hierarchy ------------------- */

.calendar-backdrop {
  padding: clamp(10px, 2.2vw, 24px);
  background:
    linear-gradient(rgb(58 45 27 / 20%), rgb(52 37 21 / 46%)),
    url("assets/illustrations/chart-landscape.png") center / cover fixed no-repeat;
  backdrop-filter: blur(3px) saturate(.88);
}

.calendar-shell {
  width: min(1180px, 100%);
  min-height: calc(100dvh - clamp(20px, 4.4vw, 48px));
  display: flex;
  flex-direction: column;
}

.calendar-topbar {
  min-height: 82px;
  padding: 9px;
  border: 6px solid #604023;
  border-radius: 15px 15px 6px 6px;
  background:
    linear-gradient(90deg, rgb(255 236 174 / 9%), transparent 25% 75%, rgb(255 236 174 / 9%)),
    linear-gradient(#9f7041, #744725);
  box-shadow: inset 0 0 0 2px #bd8750, 0 8px 24px rgb(49 31 17 / 35%);
}

.calendar-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-seal {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 3px solid #76502d;
  border-radius: 50%;
  color: #315e34;
  background: #f5dda0;
  box-shadow: inset 0 0 0 4px #d2ae68;
  font-size: 26px;
}

.calendar-brand {
  padding: 8px clamp(12px, 2vw, 25px);
  border: 2px solid #7b552f;
  border-radius: 5px;
  background: linear-gradient(100deg, #fae7b2, #e9ca87);
  box-shadow: inset 0 0 0 2px rgb(255 248 212 / 58%);
}

.calendar-brand h1 {
  color: #49301d;
  font-size: clamp(22px, 3.1vw, 35px);
  letter-spacing: -.045em;
  text-shadow: 0 1px #fff0c1;
}

.calendar-bill {
  min-width: clamp(188px, 25vw, 270px);
  padding: 10px 14px;
  border: 3px solid #72502f;
  border-radius: 6px;
  background: linear-gradient(#f9e7b8, #e7c684);
  box-shadow: inset 0 0 0 2px rgb(255 250 219 / 72%), 0 3px 0 rgb(67 42 22 / 22%);
}

.calendar-bill span { font-size: 9px; }
.calendar-bill strong { font-size: clamp(15px, 2.1vw, 21px); }

.calendar-month-card {
  flex: 1;
  min-height: 440px;
  padding: 15px 18px 18px;
  border: 7px solid #654326;
  border-top-width: 4px;
  border-radius: 4px 4px 13px 13px;
  outline: 2px solid #b78249;
  outline-offset: -11px;
  background:
    radial-gradient(circle at 14% 8%, rgb(255 255 255 / 42%), transparent 25%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgb(119 81 39 / 2.5%) 22px 23px),
    linear-gradient(135deg, #fff0c4, #e7ca8c);
  box-shadow: inset 0 0 32px rgb(115 74 34 / 14%), 0 10px 28px rgb(49 31 17 / 34%);
}

.calendar-month-heading {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #718448;
}

.calendar-month-heading h2 {
  margin: 0;
  color: #416039;
  letter-spacing: .06em;
  text-transform: uppercase;
  font: 900 clamp(22px, 3vw, 31px)/1 var(--story);
}

.calendar-month-heading > span:last-child { transform: scaleX(-1); }

.calendar-weekdays,
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  min-height: 30px;
  align-items: center;
  color: #735335;
  text-align: center;
  text-transform: uppercase;
  font: 900 9px/1 var(--story);
}

.calendar-route.calendar-month-grid {
  min-height: 355px;
  margin: 0;
  gap: 0;
  overflow: visible;
  border: 1px solid rgb(129 89 45 / 35%);
  border-width: 1px 0 0 1px;
  scrollbar-width: auto;
}

.calendar-day {
  min-width: 0;
  min-height: 58px;
  padding: 7px 9px;
  position: relative;
  border: 0;
  border-right: 1px solid rgb(129 89 45 / 30%);
  border-bottom: 1px solid rgb(129 89 45 / 30%);
  color: #74583a;
  background: rgb(255 247 218 / 14%);
  font: 700 13px/1 var(--numbers);
}

.calendar-day.outside-month { background: rgb(114 79 40 / 3%); }
.calendar-day > time { display: block; }

.day-node {
  min-height: 58px;
  padding: 6px 8px;
  z-index: 1;
  display: block;
  border: 0;
  border-right: 1px solid rgb(129 89 45 / 30%);
  border-bottom: 1px solid rgb(129 89 45 / 30%);
  border-radius: 0;
  color: #65482e;
  background: rgb(255 247 218 / 17%);
  box-shadow: none;
  text-align: left;
  transform: none;
}

.day-node:hover {
  filter: none;
  background: rgb(255 248 218 / 46%);
  transform: none;
}

.day-node.selected { border: 0; border-right: 1px solid rgb(129 89 45 / 30%); border-bottom: 1px solid rgb(129 89 45 / 30%); background: rgb(255 248 218 / 24%); box-shadow: none; transform: none; }
.day-node.settled-day { border-color: rgb(129 89 45 / 30%); background: rgb(226 229 172 / 20%); }
.day-node.missed-day { filter: none; opacity: .78; }
.day-node.milestone { border-color: rgb(129 89 45 / 30%); background: rgb(223 173 120 / 12%); }

.day-node time {
  width: auto;
  height: auto;
  display: block;
  color: #5f422a;
  font: 900 15px/1 var(--numbers);
}

.day-node time strong { color: inherit; font: inherit; }

.day-state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* P&L anime impact -------------------------------------------------------- */

.pnl-impact-overlay {
  position: fixed;
  z-index: 24;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  mix-blend-mode: screen;
  pointer-events: none;
}

.pnl-impact-overlay[hidden] { display: none; }

#game-app .pnl-value {
  --pnl-impact-base-font-size: 31px;
  --pnl-impact-max-font-size: 48px;
}

#game-app .pnl-summary,
#game-app .pnl-metric[data-impact-tier] {
  position: relative;
  overflow: visible;
}

#game-app .pnl-summary > .label,
#game-app .pnl-value[data-impact-tier] {
  position: relative;
  z-index: 31;
}

#game-app .pnl-value[data-impact-tier] {
  width: fit-content;
  max-width: 100%;
  align-items: baseline;
  color: color-mix(in srgb, var(--green-dark), #58f018 var(--pnl-impact-energy-mix, 0%)) !important;
  font-family: var(--numbers);
  font-style: normal;
  font-weight: 900;
  line-height: var(--pnl-impact-line-height, 1);
  letter-spacing: var(--pnl-impact-letter-spacing, -.025em);
  font-size: var(--pnl-impact-font-size, var(--pnl-impact-base-font-size)) !important;
  transform-origin: left center;
  filter: drop-shadow(0 0 var(--pnl-impact-glow-blur, 0) rgb(255 215 35 / var(--pnl-impact-glow-alpha, 0)));
}

#game-app .pnl-value[data-impact-direction="loss"] {
  color: color-mix(in srgb, var(--red), #f04cff var(--pnl-impact-energy-mix, 0%)) !important;
  filter: drop-shadow(0 0 var(--pnl-impact-glow-blur, 0) rgb(160 64 255 / var(--pnl-impact-glow-alpha, 0)));
}

#game-app .pnl-value[data-impact-tier] > span {
  color: inherit !important;
  font: inherit;
  -webkit-text-stroke: var(--pnl-impact-stroke, 0) #173d0d;
  paint-order: stroke fill;
  text-shadow:
    1px 1px 0 rgb(242 255 211 / var(--pnl-impact-shadow-alpha, 0)),
    2px 2px 0 rgb(16 43 9 / var(--pnl-impact-shadow-alpha, 0)),
    -1px -1px 0 rgb(16 43 9 / var(--pnl-impact-shadow-alpha, 0)),
    0 0 var(--pnl-impact-glow-blur, 0) rgb(246 255 98 / var(--pnl-impact-glow-alpha, 0));
}

#game-app .pnl-value[data-impact-direction="loss"] > span {
  -webkit-text-stroke-color: #361245;
  text-shadow:
    1px 1px 0 rgb(255 224 255 / var(--pnl-impact-shadow-alpha, 0)),
    2px 2px 0 rgb(44 12 63 / var(--pnl-impact-shadow-alpha, 0)),
    -1px -1px 0 rgb(32 26 88 / var(--pnl-impact-shadow-alpha, 0)),
    0 0 var(--pnl-impact-glow-blur, 0) rgb(235 80 255 / var(--pnl-impact-glow-alpha, 0));
}

#game-app .pnl-value[data-impact-tier] .pnl-percent {
  font-size: var(--pnl-impact-percent-size, .46em);
  letter-spacing: -.025em;
}

@media (prefers-reduced-motion: reduce) {
  .pnl-impact-overlay { display: none !important; }
}

.day-node i {
  width: auto;
  height: auto;
  margin: 6px auto 0;
  display: block;
  border: 0;
  border-radius: 0;
  color: #6a4b30;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font: 900 22px/1 var(--story);
}

.day-node.current-day i,
.day-node:not(.settled-day):not(.missed-day) i { display: none; }

.day-node.current-day {
  border-color: rgb(129 89 45 / 30%);
  background: radial-gradient(circle at 50% 48%, rgb(221 224 145 / 30%), transparent 55%);
}

.day-node.current-day time {
  width: 49px;
  height: 49px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 4px solid #819847;
  border-radius: 50%;
  color: #365736;
  background: #f2e9b5;
  box-shadow: 0 0 0 4px rgb(115 142 69 / 15%);
  font-size: 22px;
}

.day-result {
  margin-top: 2px;
  display: block;
  color: #436938;
  text-align: center;
  font: 900 9px/1 var(--numbers);
}

.day-result.negative,
.day-result.missed { color: #9a493d; }
.day-node:not(.settled-day):not(.missed-day):not(.current-day) .day-result { color: #9a6d43; opacity: .72; }

.calendar-actions {
  margin: 11px auto 0;
  width: min(900px, 100%);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.1fr) minmax(180px, 1fr);
  align-items: start;
  gap: 10px;
}

.calendar-drawer { min-width: 0; }
.calendar-drawer[open] { grid-column: 1 / -1; }
.calendar-drawer summary,
.calendar-actions > .start-day-button {
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 4px solid #6d4a2b;
  border-radius: 7px;
  color: #54381f;
  background: linear-gradient(#f7e6b7, #dfbf7e);
  box-shadow: inset 0 0 0 2px rgb(255 249 216 / 58%), 0 4px 0 rgb(73 45 24 / 28%);
  cursor: pointer;
  list-style: none;
  letter-spacing: .02em;
  font: 900 15px/1 var(--story);
}

.calendar-drawer summary::-webkit-details-marker { display: none; }
.calendar-drawer summary::after { content: "▾"; margin-left: auto; font-size: 11px; }
.calendar-drawer[open] summary::after { transform: rotate(180deg); }

.calendar-actions > .start-day-button {
  border-color: #315237;
  color: #fff2c8;
  background: linear-gradient(#668f4b, #3f6d3d);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 14%), 0 4px 0 #29462e;
  letter-spacing: .1em;
  font-size: 11px;
}

.calendar-actions > .start-day-button:disabled { border-color: #806e50; color: #75654c; background: #c9b98f; box-shadow: none; }

.log-drawer summary {
  border-color: #315237;
  color: #fff1c7;
  background: linear-gradient(#668f4b, #3f6d3d);
}

.calendar-drawer-body {
  margin-top: 8px;
  padding: 14px;
  border: 4px solid #654326;
  border-radius: 7px;
  background: linear-gradient(#f9e9ba, #e5c88c);
  box-shadow: inset 0 0 0 2px rgb(255 249 216 / 55%), 0 6px 20px rgb(51 33 18 / 25%);
}

.calendar-drawer .opening-focus { margin-top: 0; }
.calendar-drawer .build-board { margin-top: 10px; }
.month-ledger { display: block; overflow: visible; }
.month-ledger > h2 { margin: 0 10px 8px; color: #553920; font: 900 18px/1 var(--story); }
.ledger-entry { margin-inline: 10px; border-right: 0; }
.bill-countdown { margin-top: 8px; border-radius: 4px; }

@media (max-width: 570px) {
  .calendar-backdrop { padding: 6px; }
  .calendar-shell { min-height: calc(100dvh - 12px); }
  .calendar-topbar { min-height: 66px; padding: 6px; gap: 6px; border-width: 4px; }
  .calendar-identity { gap: 6px; }
  .calendar-seal { width: 37px; height: 37px; border-width: 2px; box-shadow: inset 0 0 0 2px #d2ae68; font-size: 17px; }
  .calendar-brand { padding: 6px 8px; }
  .calendar-brand h1 { max-width: 138px; font-size: 19px; }
  .calendar-bill { min-width: 115px; padding: 7px 8px; }
  .calendar-bill span { font-size: 6px; }
  .calendar-bill strong { font-size: 10px; }
  .calendar-month-card { min-height: 0; padding: 8px 6px 9px; flex: 0 0 auto; border-width: 5px; outline-offset: -8px; }
  .calendar-month-heading { min-height: 38px; gap: 9px; }
  .calendar-month-heading h2 { font-size: 19px; }
  .calendar-weekdays { min-height: 24px; font-size: 7px; }
  .calendar-route.calendar-month-grid { min-height: 0; margin: 0; padding: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; }
  .calendar-day, .day-node { min-height: 46px; padding: 4px; font-size: 9px; }
  .day-node time { font-size: 10px; }
  .day-node i { margin-top: 4px; font-size: 15px; }
  .day-node.current-day time { width: 34px; height: 34px; border-width: 3px; box-shadow: 0 0 0 2px rgb(115 142 69 / 15%); font-size: 15px; }
  .day-result { font-size: 6px; }
  .calendar-actions { grid-template-columns: 1fr; gap: 8px; }
  .calendar-actions > .start-day-button { order: -1; }
  .calendar-drawer[open] { grid-column: auto; }
  .calendar-drawer summary, .calendar-actions > .start-day-button { min-height: 47px; padding: 10px 14px; }
  .calendar-drawer-body { padding: 10px 7px; }
  .calendar-drawer .opening-focus { grid-template-columns: 1fr; }
  .calendar-drawer .focus-options { grid-template-columns: repeat(3, 1fr); }
  .month-ledger { display: block; }
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-shell {
  min-height: 100vh;
  padding: 12px 18px 22px;
}

.topbar {
  min-height: 72px;
  padding: 6px 10px;
  position: relative;
  isolation: isolate;
  align-items: center;
  overflow: hidden;
  border-width: 5px;
  border-radius: 14px 14px 5px 5px;
  background:
    linear-gradient(90deg, rgb(255 244 204 / 15%) 0 31%, transparent 48% 72%, rgb(54 37 21 / 23%)),
    url("assets/illustrations/masthead.png") center 33% / 100% 260px no-repeat,
    #a9ccca;
  box-shadow:
    inset 0 0 0 3px rgb(225 177 101 / 78%),
    inset 0 -24px 38px rgb(66 43 23 / 25%),
    0 8px 20px rgb(70 45 24 / 28%);
}

.topbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 14px;
  background:
    linear-gradient(178deg, transparent 0 34%, rgb(78 48 25 / 22%) 35% 42%, transparent 43%),
    linear-gradient(#80532e, #5d3b23);
  border-top: 2px solid rgb(64 40 22 / 62%);
}

.brand-lockup { align-self: center; gap: 8px; }

.brand-mark {
  width: 44px;
  height: 44px;
  border-width: 3px;
  background: linear-gradient(#f7e8ad, #d9ba6e);
  box-shadow: inset 0 0 0 3px #ad7c3d, 0 4px 0 rgb(67 42 23 / 32%);
}

.brand-mark svg {
  width: 29px;
  height: 29px;
  fill: #7eaa50;
  stroke: #3f6735;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-line {
  gap: 12px;
  padding: 7px 12px;
  border-width: 3px;
  border-radius: 7px;
  background:
    linear-gradient(104deg, rgb(255 255 255 / 23%), transparent 29% 71%, rgb(127 78 34 / 8%)),
    linear-gradient(#fff0bd, #e2c37e);
  box-shadow: inset 0 0 0 3px rgb(255 251 219 / 62%), 0 5px 0 rgb(72 45 24 / 32%);
  transform: rotate(-.7deg);
}

.brand-line h1 {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.015em;
  text-transform: lowercase;
}

.prototype-tag { padding: 5px 7px; font-size: 9px; }

.session-controls {
  align-self: center;
  padding: 4px;
  gap: 5px;
  border: 2px solid rgb(72 45 24 / 72%);
  border-radius: 7px;
  background: rgb(86 55 29 / 66%);
  box-shadow: inset 0 0 0 1px rgb(255 234 180 / 22%);
  backdrop-filter: blur(2px);
}

.bill-goal { width: 102px; min-height: 38px; }
.bill-goal span { font-size: 10px; }
.bill-goal strong { font-size: 13px; }
.market-clock { min-height: 38px; font-size: 10px; }
.market-clock strong { font-size: 15px; }
.control-button, .icon-button { height: 36px; font-size: 10px; }
.icon-button { width: 36px; font-size: 18px; }

.account-strip {
  min-height: 91px;
  padding: 7px;
  gap: 7px;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  border-width: 5px;
  border-top: 0;
  background:
    repeating-linear-gradient(91deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 42px),
    linear-gradient(90deg, #744727, #a36e38 48%, #6d462a);
}

.metric {
  min-height: 75px;
  padding: 10px 12px 9px 58px;
  gap: 5px;
  border: 2px solid #9e7a46;
  border-radius: 7px;
  box-shadow: inset 0 0 0 3px rgb(255 249 210 / 52%), 0 2px 0 rgb(60 38 20 / 18%);
}

.metric::before { display: none; }

.metric-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  border: 1px solid rgb(84 59 33 / 30%);
  border-radius: 45% 55% 50% 46%;
  background: rgb(255 249 216 / 55%);
  fill: none;
  stroke: #55783e;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%) rotate(-2deg);
}

.pnl-metric .metric-icon { stroke: #55783e; }
.capacity-metric .metric-icon { stroke: #477f91; }
.pnl-metric {
  display: grid;
  grid-template-columns: minmax(150px, .95fr) minmax(190px, 1.05fr);
  align-items: center;
  column-gap: 12px;
}
.pnl-summary { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.label { font-size: 10px; }
.metric strong { font-size: 21px; }
.primary-metric strong { font-size: 31px; }
.primary-metric .account-value-inline strong { font-size: 17px; }
.metric small { font-size: 11px; }
.capacity-stat strong { font-size: 16px; }
.capacity-stat small { font-size: 9px; }

.capacity-metric {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(145px, .65fr);
  grid-template-rows: auto auto 6px;
  column-gap: 12px;
  align-content: center;
}

.capacity-metric > .metric-heading { grid-column: 1; grid-row: 1; }
.capacity-metric > .capacity-grid { grid-column: 1; grid-row: 2; }
.capacity-metric > .leverage-control {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  padding: 4px 7px;
}
.capacity-metric > .leverage-control input { margin-block: 5px 1px; }
.capacity-metric > .margin-track { grid-column: 1 / -1; grid-row: 3; }

.game-grid { gap: 12px; margin-top: 12px; }

.panel {
  border-width: 5px;
  border-radius: 10px;
  background:
    linear-gradient(100deg, transparent 0 48%, rgb(146 108 57 / 5%) 49% 51%, transparent 52%),
    radial-gradient(circle at 10% 15%, rgb(255 255 255 / 30%), transparent 24%),
    var(--parchment);
  box-shadow: inset 0 0 0 3px var(--wood-light), 0 7px 18px rgb(74 48 24 / 26%);
}

.feed-panel::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 5px;
  top: 5px;
  width: 24px;
  height: 13px;
  border-radius: 100% 0 100% 0;
  background: #8ba85b;
  box-shadow: -13px 7px 0 -3px #668344;
  opacity: .72;
  transform: rotate(16deg);
  pointer-events: none;
}

.chart-panel, .feed-panel { position: relative; }

.panel-header {
  min-height: 58px;
  padding: 11px 15px;
  border-bottom: 2px solid #a9824f;
  background:
    linear-gradient(95deg, rgb(255 255 255 / 20%), transparent 45%),
    linear-gradient(#faedc7, #e9ce92);
}

.panel-header.compact { min-height: 52px; }
.panel-header h2 { font-size: 20px; }
.watch-panel .panel-header h2 { font-size: 20px; }
.live-chip, .feed-count { font-size: 10px; }

.watch-list { grid-template-rows: repeat(4, minmax(90px, 1fr)); }
.watch-card {
  min-height: 92px;
  padding: 11px 13px;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 2px solid rgb(128 93 51 / 19%);
}
.watch-card.active {
  border: 2px solid #80542d;
  border-left-width: 8px;
  background:
    linear-gradient(90deg, rgb(255 246 202 / 15%), transparent),
    linear-gradient(#efd297, #f8e8bb);
  box-shadow: inset 0 0 0 3px rgb(255 249 216 / 65%), 3px 3px 0 #6e4729;
  transform: translateX(4px) rotate(-.35deg);
}
.watch-quote { gap: 8px; }
.watch-main strong { font-size: 16px; }
.watch-price { font-size: 17px; }
.watch-sparkline { width: 80px; height: 24px; }
.watch-change { padding: 4px 6px; font-size: 10px; }

.chart-header {
  min-height: 70px;
  padding: 10px 16px;
  background:
    linear-gradient(95deg, rgb(255 255 255 / 22%), transparent 52%),
    linear-gradient(#f9eac0, #e8ca8d);
}
.selected-emblem { width: 50px; height: 50px; }
.asset-heading h2 { font-size: 19px; }
.ticker-badge { font-size: 12px; }
.mission-chip { height: 34px; font-size: 10px; }
.mission-chip strong { font-size: 10px; }
.quote-block strong { font-size: 31px; }
.quote-block span { font-size: 12px; }

.market-index-strip {
  min-width: 0;
  min-height: 54px;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto 22px;
  grid-template-areas:
    "label symbol name price change"
    "spark spark spark spark spark";
  gap: 3px 6px;
  align-items: center;
  border: 1px solid rgb(83 110 74 / 36%);
  border-radius: 5px;
  color: #70583a;
  background: linear-gradient(110deg, rgb(255 252 218 / 54%), rgb(188 214 166 / 42%));
}
.market-index-label { grid-area: label; color: #4d7567; letter-spacing: .08em; font: 900 7px/1 var(--story); }
.market-index-strip > strong { grid-area: symbol; color: #3f6258; font: 900 10px/1 var(--numbers); }
#market-index-name { grid-area: name; overflow: hidden; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
#market-index-sparkline { grid-area: spark; width: 100%; height: 22px; }
#market-index-sparkline path { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#market-index-sparkline.down path { stroke: var(--red); }
.market-index-price { grid-area: price; }
.market-index-change { grid-area: change; }
.market-index-price, .market-index-change { justify-self: end; white-space: nowrap; font: 900 9px/1 var(--numbers); }

.chart-wrap {
  height: 260px;
  isolation: isolate;
  background:
    linear-gradient(rgb(255 249 224 / 20%), rgb(255 244 204 / 14%)),
    url("assets/illustrations/chart-landscape.png") center / cover no-repeat,
    #f6e8c1;
}
.chart-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(255 219 141 / 5%), transparent 40% 68%, rgb(130 99 151 / 7%));
  pointer-events: none;
}
.chart-scenery { display: none; }
#price-chart { z-index: 1; }
.chart-grid { stroke: #765b38; stroke-width: 1.1; opacity: .46; }
.chart-candle-wick { stroke-width: 1.35; }
.chart-candle-body { stroke-width: 1.2; }
.chart-label { fill: #59452f; font-size: 11px; stroke: #fff1c8; stroke-width: 3px; }
.event-marker { stroke: #fff7db; stroke-width: 2; }
.current-marker { stroke-width: 3; fill: #fff9dc; }
.current-line { stroke-width: 1.4; opacity: .55; }
.chart-footer { height: 27px; padding-inline: 14px; font-size: 9px; }

.trade-row { gap: 12px; }
.order-panel, .position-panel { min-height: 258px; }
.product-picker {
  margin: 0 12px 5px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.product-button {
  min-width: 0;
  height: 38px;
  padding: 4px 3px;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 1px solid #9a7547;
  border-radius: 4px;
  color: #6e5131;
  background: #ead6a4;
  cursor: pointer;
  text-align: center;
}
.product-button strong { overflow: hidden; font: 900 8px/1 var(--story); white-space: nowrap; text-overflow: ellipsis; }
.product-button small { color: #876e4c; font: 900 7px/1 var(--numbers); }
.product-button.active { border: 2px solid #46713f; color: #fff7d7; background: linear-gradient(#719c52, #4d7d40); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%); }
.product-button.active small { color: #edf3c4; }
.product-button.locked { cursor: not-allowed; filter: saturate(.5); opacity: .68; }
.product-detail { min-height: 11px; margin: 0 12px 6px; overflow: hidden; color: #796344; font: 800 8px/1.35 var(--story); white-space: nowrap; text-overflow: ellipsis; }
.quantity-label, .order-estimate { font-size: 10px; }
.quantity-control { grid-template-columns: 44px 1fr 44px; }
.quantity-control button, .quantity-control input { height: 42px; }
.preset-row button { height: 30px; font-size: 10px; box-shadow: 0 2px 0 rgb(96 65 34 / 24%); }

.empty-positions { gap: 8px; }
.empty-positions svg {
  width: 72px;
  height: 72px;
  fill: #d9bd78;
  stroke: #6c7f43;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 1px rgb(90 61 32 / 18%));
}
.empty-positions p { font-size: 13px; font-style: italic; }
.position-panel .panel-header > span { font-size: 10px; }
.position-symbol strong { font-size: 13px; }
.position-symbol small, .position-stat span { font-size: 10px; }
.position-stat strong { font-size: 12px; }
.realized-row { font-size: 10px; }
.realized-row strong { font-size: 13px; }

.right-column { grid-template-rows: minmax(450px, 1fr); gap: 12px; }
.edge-card {
  min-height: 102px;
  grid-template-columns: 43px 1fr auto;
  border-width: 5px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 15% 20%, rgb(255 255 255 / 38%), transparent 28%),
    linear-gradient(120deg, #ead8d5, #d4becd);
}
.edge-icon { width: 42px; height: 46px; }
.edge-icon svg { width: 30px; height: 30px; fill: none; stroke: #76527d; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.edge-copy .label { font-size: 9px; }
.edge-copy strong { font-size: 13px; }
.edge-copy p { font-size: 11px; }
.edge-card button { min-width: 82px; height: 40px; font-size: 9px; }

.panel-title-icon { width: 22px; height: 22px; margin-right: 7px; fill: none; stroke: #6e5132; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -5px; }
.market-feed {
  position: relative;
  background:
    linear-gradient(rgb(250 231 184 / 72%), rgb(250 231 184 / 46%)),
    url("assets/illustrations/chart-landscape.png") center bottom / 135% auto no-repeat;
}

@media (min-width: 1181px) {
  .right-column { position: relative; min-height: 0; }
  .right-column > .feed-panel { position: absolute; inset: 0; }
  .market-feed {
    min-height: 0;
    max-height: none;
  }
}

.feed-item { min-height: 82px; padding: 12px; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; border-bottom: 2px solid rgb(130 93 49 / 18%); background: rgb(255 249 222 / 62%); }
.feed-item::before { width: 4px; top: 7px; bottom: 7px; }
.gossip-avatar { width: 40px; height: 40px; border-width: 2px; font-size: 19px; }
.feed-source { font-size: 11px; }
.feed-time { font-size: 10px; }
.feed-item p { color: #56412c; font-size: 13px; line-height: 1.38; }
.feed-ticker { padding: 3px 5px; font-size: 10px; }

@media (min-width: 1181px) and (min-height: 980px) {
  .chart-panel { min-height: 440px; }
  .chart-wrap { height: 340px; }
  .order-panel, .position-panel { min-height: 280px; }
  .positions-list { min-height: 180px; }
  .empty-positions { height: 176px; }
}

@media (min-width: 1181px) and (max-height: 979px) {
  .account-strip { min-height: 82px; }
  .metric { min-height: 67px; }
  .chart-panel { min-height: 342px; }
  .chart-header { min-height: 64px; }
  .chart-wrap { height: 228px; }
  .order-panel .panel-header, .position-panel .panel-header { min-height: 45px; margin-bottom: 4px; padding-block: 7px; }
  .product-picker { margin-bottom: 2px; }
  .product-button { height: 30px; padding-block: 2px; }
  .product-detail { min-height: 9px; margin-bottom: 3px; }
  .quantity-label { margin-bottom: 3px; }
  .quantity-control button, .quantity-control input { height: 32px; }
  .preset-row { margin-block: 3px 4px; }
  .preset-row button { height: 23px; }
  .order-estimate { margin-bottom: 4px; }
}

@media (max-width: 1180px) {
  .topbar { background-position: center, center 31%, center; }
  .brand-line h1 { font-size: 25px; }
  .session-controls { padding: 5px; }
  .game-grid { grid-template-columns: 260px minmax(500px, 1fr); }
  .right-column { grid-template-rows: minmax(230px, auto); }
}

@media (min-width: 821px) and (max-width: 1366px) and (max-height: 1024px) {
  .app-shell { padding-top: 8px; }
  .topbar {
    min-height: 72px;
    padding-block: 6px;
    background-size: auto, 100% 260px, auto;
  }
  .brand-mark { width: 46px; height: 46px; }
  .brand-mark svg { width: 31px; height: 31px; }
  .bill-goal, .market-clock { min-height: 40px; }
  .control-button, .icon-button { height: 38px; }
  .icon-button { width: 38px; }
  .account-strip { min-height: 0; }
  .metric { min-height: 70px; padding-block: 8px; }
  .chart-panel { min-height: 0; }
  .chart-header { min-height: 56px; padding-block: 8px; }
  .selected-emblem { width: 44px; height: 44px; }
  .chart-wrap { height: 200px; }
  .chart-footer { height: 24px; }
  .order-panel .panel-header,
  .position-panel .panel-header { min-height: 48px; }
  .quantity-control button,
  .quantity-control input { height: 40px; }
}

@media (min-width: 980px) and (max-width: 1366px) and (max-height: 1024px) {
  .center-column {
    grid-template-columns: minmax(370px, 1.55fr) minmax(235px, 1fr);
    grid-template-rows: auto;
    align-content: start;
    align-items: start;
  }
  .chart-panel { grid-column: 1; grid-row: 1; }
  .trade-row {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr;
  }
  .watch-panel { align-self: start; }
}

@media (max-width: 820px) {
  .app-shell { padding: 8px 8px 20px; }
  .topbar { min-height: 68px; padding: 5px 7px; align-items: center; background-size: auto 300px; background-position: 58% 42%; }
  .brand-line { padding: 8px 10px; }
  .brand-line h1 { font-size: 21px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-mark svg { width: 29px; height: 29px; }
  .bill-goal { min-height: 40px; }
  .market-clock { min-height: 40px; }
  .control-button, .icon-button { height: 38px; }
  .icon-button { width: 38px; }
  .account-strip {
    min-height: 0;
    grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr);
  }
  .metric { min-height: 70px; }
  .pnl-metric {
    padding: 6px 7px;
    grid-template-columns: minmax(94px, .9fr) minmax(96px, 1.1fr);
    column-gap: 4px;
  }
  .pnl-metric .metric-icon { display: none; }
  .pnl-summary { gap: 3px; }
  .pnl-summary > strong { font-size: 20px; }
  .pnl-metric .account-value-inline { gap: 3px; }
  .pnl-metric .account-value-inline span { font-size: 7px; letter-spacing: .04em; }
  .pnl-metric .account-value-inline strong { font-size: 13px; }
  .pnl-metric .market-index-strip {
    min-height: 50px;
    padding: 4px 6px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 20px;
    grid-template-areas:
      "symbol price change"
      "spark spark spark";
    gap: 2px 5px;
  }
  .pnl-metric .market-index-label,
  .pnl-metric #market-index-name { display: none; }
  .pnl-metric #market-index-sparkline { height: 20px; }
  .pnl-metric .market-index-price,
  .pnl-metric .market-index-change { font-size: 8px; }
  .game-grid { grid-template-columns: minmax(0, 1fr); }
  .right-column { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(360px, auto); }
  .watch-list { grid-template-rows: repeat(2, minmax(88px, auto)); }
  .chart-wrap { height: 270px; }
}

@media (max-width: 570px) {
  body { background: linear-gradient(rgb(255 245 205 / 12%), rgb(84 62 34 / 18%)), url("assets/illustrations/chart-landscape.png") center bottom / auto 100% fixed no-repeat; }
  .app-shell { padding-inline: 5px; }
  .topbar { min-height: 60px; padding: 4px 5px; gap: 4px; border-width: 4px; background-size: auto 240px; background-position: 57% 39%; }
  .brand-lockup { gap: 3px; }
  .brand-mark { display: none; }
  .brand-line { padding: 7px 8px; border-width: 2px; }
  .brand-line h1 { max-width: 116px; font-size: 16px; line-height: .95; }
  .session-controls { padding: 4px; gap: 3px; }
  .bill-goal { width: 72px; min-height: 37px; padding: 4px 5px; }
  .market-clock { min-height: 37px; }
  .icon-button { width: 35px; height: 37px; }

  .account-strip { min-height: 118px; grid-template-columns: 1fr; gap: 4px; padding: 4px; border-width: 4px; }
  .metric { min-height: 56px; padding: 7px 5px; gap: 4px; border-width: 1px; }
  .capacity-metric { display: flex; flex-direction: column; }
  .metric-icon { display: none; }
  .metric .label { font-size: 8px; }
  .metric strong { font-size: 14px; }
  .primary-metric strong { font-size: 21px; }
  .primary-metric .account-value-inline strong { font-size: 13px; }
  .metric small { font-size: 8px; }
  .capacity-metric { min-height: 52px; }
  .capacity-stat strong { font-size: 11px; }

  .pnl-metric {
    min-height: 66px;
    padding: 6px;
    grid-template-columns: minmax(125px, .9fr) minmax(0, 1.1fr);
    column-gap: 7px;
  }
  .pnl-summary { gap: 2px; }
  .pnl-metric .market-index-strip {
    min-height: 48px;
    padding: 4px 6px;
    grid-template-rows: auto 18px;
  }
  .pnl-metric #market-index-sparkline { width: 100%; height: 18px; }
  .pnl-metric .market-index-price,
  .pnl-metric .market-index-change { font-size: 8px; }

  .panel { border-width: 4px; }
  .panel-header { min-height: 42px; padding: 7px 9px; }
  .watch-panel .panel-header h2, .panel-header h2 { font-size: 15px; }
  .watch-list { grid-template-rows: 72px; }
  .watch-card { min-height: 72px; padding: 6px 4px; grid-template-columns: minmax(0, 1fr); }
  .watch-card.active { border-left-width: 5px; transform: translateY(-2px) rotate(-.3deg); }
  .watch-main strong { font-size: 10px; }
  .watch-price { font-size: 11px; }
  .watch-sub { justify-content: flex-end; }
  .watch-sparkline { display: none; }
  .watch-performance { width: 100%; gap: 2px; }
  .watch-change { padding: 2px 3px; font-size: 8px; }
  .watch-position { font-size: 6px; }
  .watch-day-pnl { font-size: 7px; }

  .chart-header { min-height: 64px; padding: 7px 9px; }
  .selected-emblem { width: 38px; height: 38px; }
  .asset-heading h2 { font-size: 14px; }
  .ticker-badge { font-size: 10px; }
  .quote-block strong { font-size: 23px; }
  .quote-block span { font-size: 9px; }
  .mission-chip { height: 26px; }
  .chart-wrap { height: 205px; }
  .chart-label { font-size: 10px; }
  .chart-footer { height: 25px; font-size: 7px; }
  .chart-footer span:first-child::after, .chart-footer span:last-child::after { font-size: 7px; }

  .trade-row { gap: 9px; }
  .order-panel, .position-panel { min-height: 255px; }
  .product-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-picker { margin-inline: 8px; gap: 3px; }
  .product-button { height: 36px; }
  .product-button strong { font-size: 8px; }
  .product-detail { margin-inline: 8px; }
  .quantity-control button, .quantity-control input { height: 42px; }
  .feed-item { min-height: 76px; padding: 10px; grid-template-columns: 38px minmax(0, 1fr); }
  .gossip-avatar { width: 38px; height: 38px; }
  .feed-source { font-size: 10px; }
  .feed-time { font-size: 9px; }
  .feed-item p { font-size: 12px; }
}

/* Pre-market briefing */
body.morning-note-open { overflow: hidden; }

/* The briefing is a pre-trading screen, not an overlay on the trading desk. */
body.morning-note-open #game-app { visibility: hidden; }

.morning-note-backdrop {
  position: fixed;
  z-index: 70;
  inset: 0;
  padding: clamp(12px, 3vw, 38px);
  display: grid;
  place-items: center;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 10%, rgb(255 227 152 / 17%), transparent 32%),
    linear-gradient(rgb(26 45 38 / 72%), rgb(54 33 19 / 82%));
  backdrop-filter: blur(7px) saturate(.72);
}

.morning-note-backdrop[hidden] { display: none; }

.morning-note-card {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - clamp(24px, 6vw, 76px));
  padding: clamp(24px, 4vw, 42px);
  overflow-y: auto;
  border: 5px solid #68462b;
  border-radius: 5px 5px 17px 17px;
  outline: 2px solid rgb(255 238 190 / 72%);
  outline-offset: -13px;
  background:
    radial-gradient(circle at 83% 7%, rgb(255 255 255 / 42%), transparent 24%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgb(109 76 41 / 3%) 23px 24px),
    linear-gradient(135deg, #fff4d2, #e7cd94);
  box-shadow: inset 0 0 50px rgb(127 84 35 / 17%), 0 32px 100px rgb(22 14 8 / 65%);
}

.morning-note-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgb(128 88 46 / 28%);
  border-radius: 2px 2px 11px 11px;
}

.morning-note-heading {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 3px double #8c693f;
}

.morning-note-sun {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 3px double #6c4b2e;
  border-radius: 50%;
  color: #755326;
  background: radial-gradient(circle, #f8dd86 0 34%, #d49b39 35% 52%, #f0d798 53%);
  box-shadow: inset 0 0 0 5px rgb(255 244 199 / 48%), 0 3px 0 rgb(95 61 29 / 22%);
  font-size: 31px;
}

.morning-note-eyebrow {
  color: #5b7a45;
  letter-spacing: .17em;
  font: 900 9px/1 var(--story);
}

.morning-note-heading h2 {
  margin: 5px 0 6px;
  color: #2d5239;
  font: 900 clamp(34px, 5vw, 50px)/.92 var(--story);
  letter-spacing: -.035em;
}

.morning-note-heading p {
  margin: 0;
  color: #75583a;
  letter-spacing: .11em;
  font: 900 9px/1 var(--story);
}

.morning-note-list {
  position: relative;
  margin-top: 19px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

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

.morning-note-item {
  position: relative;
  min-width: 0;
  min-height: 255px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  border: 2px solid #9b7647;
  border-top: 6px solid var(--note-asset-color);
  border-radius: 4px;
  background: rgb(255 248 221 / 68%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%), 0 3px 0 rgb(93 61 30 / 13%);
}

.morning-note-item::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgb(121 83 42 / 10%);
}

.morning-note-item-kospi {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 12px 16px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.morning-note-market-label {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  color: #846847;
  letter-spacing: .16em;
  font: 900 8px/1 var(--story);
}

.morning-note-market-summary {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 18px;
}

.morning-note-market-symbol {
  color: var(--note-asset-color);
  font: 900 clamp(18px, 3vw, 26px)/1 var(--numbers);
}

.morning-note-market-move {
  color: #745b3b;
  font: 900 clamp(22px, 4vw, 32px)/1 var(--numbers);
}

.tone-up .morning-note-market-move { color: #416737; }
.tone-down .morning-note-market-move { color: #884438; }

.morning-note-item-heading {
  position: relative;
  z-index: 1;
  min-height: 43px;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.morning-note-source-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--note-asset-color) 65%, #4d3825);
  border-radius: 50%;
  color: #fff4cc;
  background: var(--note-asset-color);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 28%);
  font: 900 17px/1 var(--numbers);
}

.morning-note-route {
  display: block;
  margin-bottom: 5px;
  color: #8a6a45;
  letter-spacing: .11em;
  font: 900 7px/1 var(--story);
}

.morning-note-item-heading strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--note-asset-color);
  font: 900 14px/1 var(--numbers);
}

.morning-note-item-heading strong small {
  overflow: hidden;
  color: #7b664a;
  font: 700 7px/1 var(--story);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.morning-note-confidence {
  align-self: start;
  padding: 4px 5px;
  border: 1px solid #a78659;
  border-radius: 2px;
  color: #745b3b;
  background: #ead9a9;
  letter-spacing: .06em;
  font: 900 6px/1 var(--story);
  white-space: nowrap;
}

.tone-up .morning-note-confidence { color: #416737; background: #e3e9b7; }
.tone-down .morning-note-confidence { color: #884438; background: #efd2bd; }

.morning-note-item-social {
  border-color: #7690a0;
  border-top-color: #385b70;
  background: linear-gradient(145deg, rgb(239 247 241 / 92%), rgb(255 248 221 / 78%));
}

.morning-note-social-source {
  position: relative;
  z-index: 1;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgb(59 92 110 / 18%);
  color: #426c82;
  letter-spacing: .11em;
  font: 900 7px/1 var(--story);
}

.morning-note-social-x {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #426c82;
  border-radius: 7px;
  color: #fff8e9;
  background: #17242d;
  font: 900 11px/1 var(--numbers);
}

.morning-note-social-source > span:last-child { margin-left: auto; color: #7d8179; }
.morning-note-social-author { position: relative; z-index: 1; margin-top: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.morning-note-social-avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #638397; border-radius: 50%; color: #24495d; background: #cfe0df; font: 900 9px/1 var(--numbers); }
.morning-note-social-author div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.morning-note-social-author strong { overflow: hidden; color: #3d403b; font: 900 10px/1 var(--story); text-overflow: ellipsis; white-space: nowrap; }
.morning-note-social-author div span { overflow: hidden; color: #687c84; font: 800 8px/1 var(--numbers); text-overflow: ellipsis; white-space: nowrap; }
.morning-note-item .morning-note-social-post { margin-top: 11px; color: #333c40; font-size: 12px; line-height: 1.38; }
.morning-note-cashtag, .morning-note-hashtag { color: #286f96; font-weight: 900; white-space: nowrap; }
.morning-note-social-context { position: relative; z-index: 1; margin-top: 9px; padding: 7px 8px; display: grid; gap: 4px; border: 1px solid rgb(82 110 121 / 18%); border-radius: 3px; color: #665844; background: rgb(255 255 255 / 30%); font-size: 8px; line-height: 1.35; }
.morning-note-social-context strong { color: #51758a; letter-spacing: .1em; font: 900 6px/1 var(--story); }

.morning-note-item h3 {
  position: relative;
  z-index: 1;
  margin: 15px 0 8px;
  color: #4c3422;
  font: 900 16px/1.18 var(--story);
  letter-spacing: -.012em;
}

.morning-note-item p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #6c5439;
  font-size: 10px;
  line-height: 1.48;
}

.morning-note-research-labels {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.morning-note-research {
  padding: 4px 5px;
  border: 1px solid #55733c;
  border-radius: 2px;
  color: #345327;
  background: #e3e9b7;
  letter-spacing: .06em;
  font: 900 7px/1 var(--story);
}

.morning-note-item footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 7px;
  border-top: 1px solid rgb(132 96 52 / 25%);
  color: #846847;
  letter-spacing: .08em;
  font: 900 6px/1 var(--story);
}

.morning-note-actions {
  position: relative;
  margin-top: 19px;
  display: flex;
  justify-content: center;
}

.morning-note-continue {
  width: min(340px, 100%);
  min-height: 54px;
  border: 4px solid #2b4d35;
  border-radius: 6px;
  outline: 2px solid #bd9554;
  outline-offset: -8px;
  color: #fff1c5;
  background: linear-gradient(#4d784b, #254e36);
  box-shadow: inset 0 1px rgb(255 255 255 / 18%), 0 5px 0 #6d4a2d;
  cursor: pointer;
  letter-spacing: .12em;
  font: 900 12px/1 var(--story);
}

.morning-note-continue span { margin-left: 10px; font-size: 18px; }
.morning-note-continue:hover { filter: brightness(1.08); transform: translateY(-1px); }
.morning-note-continue:active { box-shadow: 0 1px 0 #6d4a2d; transform: translateY(3px); }

@media (max-width: 780px) {
  .morning-note-backdrop {
    place-items: start center;
    padding: 10px;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .morning-note-card {
    max-height: none;
    padding: 24px 20px;
    overflow: visible;
  }
  .morning-note-heading { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .morning-note-sun { width: 50px; height: 50px; font-size: 22px; }
  .morning-note-heading h2 { font-size: 34px; }
  .morning-note-list { grid-template-columns: 1fr; }
  .morning-note-item { min-height: 205px; }
  .morning-note-item-kospi { min-height: 0; }
}

@media (max-width: 420px) {
  .morning-note-card { padding: 22px 14px; border-width: 4px; }
  .morning-note-heading { padding: 0 3px 14px; }
  .morning-note-eyebrow { font-size: 7px; }
  .morning-note-heading h2 { margin-block: 4px; font-size: 29px; }
  .morning-note-heading p { font-size: 7px; }
  .morning-note-item { min-height: 220px; padding: 12px; }
  .morning-note-item-kospi { min-height: 0; padding: 12px; }
  .morning-note-market-summary { gap: 12px; }
  .morning-note-item h3 { font-size: 15px; }
  .morning-note-continue { min-height: 51px; font-size: 10px; }
}

/* Decision hierarchy: balances, leverage, then tradable assets. */
.topbar .session-controls {
  padding: 0;
  gap: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.account-strip {
  min-height: 106px;
  grid-template-columns: minmax(320px, .92fr) minmax(430px, 1.08fr);
}

.account-strip .metric { min-height: 90px; }

.pnl-metric {
  padding: 11px 14px 10px 62px;
  grid-template-columns: minmax(180px, 1fr) minmax(230px, .95fr);
  gap: 18px;
}

.account-balance-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.account-balance-stat {
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgb(89 102 50 / 28%);
  border-radius: 5px;
  background: rgb(255 250 216 / 38%);
}

.account-balance-stat span {
  color: #6d7244;
  letter-spacing: .08em;
  font: 900 8px/1 var(--story);
}

.account-balance-stat strong,
.primary-metric .account-balance-stat strong {
  overflow: hidden;
  color: #415e39;
  font: 900 17px/1 var(--numbers);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capacity-metric.leverage-metric {
  min-width: 0;
  padding: 10px 14px 10px 66px;
  display: block;
  background:
    linear-gradient(105deg, rgb(255 255 255 / 36%), transparent 42%),
    linear-gradient(135deg, #d9e9df, #a8d2d1);
}

.leverage-metric .metric-icon {
  width: 45px;
  height: 45px;
  stroke: #326f7f;
  background: rgb(244 249 216 / 68%);
}

.capacity-metric.leverage-metric > .leverage-control {
  margin: 0;
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
}

.leverage-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.leverage-control .leverage-heading label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: #275f72;
  letter-spacing: .09em;
  font: 900 12px/1 var(--story);
}

.leverage-heading label small {
  max-width: 100%;
  overflow: hidden;
  color: #4c7478;
  letter-spacing: .02em;
  font: 800 9px/1 var(--story);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leverage-readout {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.leverage-readout span {
  color: #4c7478;
  letter-spacing: .07em;
  font: 900 7px/1 var(--story);
}

.leverage-readout #permitted-leverage,
.capacity-metric .leverage-readout #permitted-leverage {
  color: #234f61;
  font: 900 30px/.85 var(--numbers);
  text-shadow: 0 1px rgb(255 255 255 / 65%);
}

.capacity-metric.leverage-metric > .leverage-control input,
.leverage-metric .leverage-control input {
  width: 100%;
  height: 12px;
  margin: 10px 0 6px;
  border: 2px solid rgb(39 87 100 / 35%);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgb(29 67 74 / 18%), 0 1px rgb(255 255 255 / 55%);
}

.leverage-metric .leverage-control input::-webkit-slider-thumb {
  width: 25px;
  height: 25px;
  border: 3px solid #2c6170;
  background: radial-gradient(circle at 40% 35%, #fff7d3 0 25%, #e7c878 68%);
  box-shadow: 0 2px 0 #79572e, 0 0 0 3px rgb(255 249 210 / 58%);
}

.leverage-metric .leverage-control input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid #2c6170;
  background: radial-gradient(circle at 40% 35%, #fff7d3 0 25%, #e7c878 68%);
  box-shadow: 0 2px 0 #79572e, 0 0 0 3px rgb(255 249 210 / 58%);
}

.leverage-metric .leverage-control input:focus-visible {
  outline: 3px solid #fff5be;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px #326f7f;
}

.leverage-metric .leverage-control input:disabled { opacity: .72; }

.leverage-metric .leverage-scale {
  margin: 0 0 5px;
  align-items: center;
  color: #4d757a;
  letter-spacing: .035em;
  font: 800 7px/1 var(--numbers);
}

.leverage-metric .leverage-scale strong {
  padding: 3px 7px;
  border: 1px solid rgb(42 96 110 / 30%);
  border-radius: 99px;
  color: #245d6e;
  background: rgb(255 250 218 / 46%);
  font: 900 8px/1 var(--numbers);
}

.leverage-metric .leverage-control p {
  color: #436a70;
  font: 800 8px/1.2 var(--numbers);
}

.watch-benchmark {
  min-width: 0;
  min-height: 92px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(55px, 1fr) auto;
  grid-template-rows: 1fr;
  grid-template-areas: "identity spark quote";
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 2px solid rgb(87 111 82 / 34%);
  border-radius: 0;
  color: #385d57;
  background:
    linear-gradient(100deg, rgb(255 255 255 / 36%), transparent 55%),
    linear-gradient(135deg, #d6e7ce, #b7d8d3);
  box-shadow: inset 0 0 0 3px rgb(255 249 218 / 34%);
}

.market-index-identity {
  grid-area: identity;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "symbol name"
    "tag tag";
  align-items: baseline;
  gap: 4px 6px;
}

.watch-benchmark .market-index-label { grid-area: label; color: #416d64; font-size: 7px; }
.watch-benchmark .market-index-identity > strong { grid-area: symbol; color: #294f4d; font: 900 16px/1 var(--numbers); }
.watch-benchmark #market-index-name { grid-area: name; color: #61766a; font: 800 8px/1 var(--story); }
.watch-benchmark .market-index-identity small {
  grid-area: tag;
  width: max-content;
  padding: 3px 5px;
  border: 1px solid rgb(63 100 92 / 36%);
  border-radius: 2px;
  color: #526f67;
  background: rgb(255 250 220 / 45%);
  letter-spacing: .07em;
  font: 900 6px/1 var(--story);
}

.watch-benchmark #market-index-sparkline {
  grid-area: spark;
  width: 100%;
  height: 40px;
  filter: drop-shadow(0 1px rgb(255 255 255 / 60%));
}

.market-index-quote {
  grid-area: quote;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.watch-benchmark .market-index-price,
.watch-benchmark .market-index-change {
  justify-self: auto;
  color: #294f4d;
  font-size: 12px;
}

.watch-benchmark .market-index-change { font-size: 10px; }
.watch-panel .watch-list { grid-template-rows: repeat(4, minmax(82px, 1fr)); }

.chart-footer {
  min-height: 39px;
  height: auto;
  padding: 4px 7px 4px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.market-session-labels {
  min-width: 0;
  display: grid;
  grid-template-columns: 44fr 15fr 37fr;
  align-items: center;
}

.chart-utilities {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chart-footer .control-button,
.chart-footer .icon-button {
  min-width: 0;
  width: auto;
  height: 27px;
  padding: 0 8px;
  display: block;
  border-width: 1px;
  border-radius: 3px;
  color: #73593a;
  background: rgb(255 243 202 / 55%);
  box-shadow: none;
  text-shadow: none;
  font: 900 8px/1 var(--story);
}

.chart-footer .speed-button { min-width: 32px; }
.chart-footer .icon-button { min-width: 29px; padding-inline: 6px; font-size: 14px; }

@media (max-width: 1180px) {
  .account-strip { grid-template-columns: minmax(280px, .82fr) minmax(410px, 1.18fr); }
  .pnl-metric { grid-template-columns: minmax(145px, .85fr) minmax(205px, 1.15fr); gap: 10px; }
  .account-balance-stat { padding-inline: 7px; }
  .account-balance-stat strong,
  .primary-metric .account-balance-stat strong { font-size: 14px; }
}

@media (max-width: 820px) {
  .account-strip { grid-template-columns: minmax(0, 1fr); }
  .account-strip .metric { min-height: 86px; }
  .pnl-metric {
    padding: 9px 11px;
    grid-template-columns: minmax(150px, .8fr) minmax(260px, 1.2fr);
    gap: 12px;
  }
  .capacity-metric.leverage-metric { padding: 10px 13px 10px 64px; }
  .watch-panel .watch-list { grid-template-rows: repeat(2, minmax(82px, auto)); }
  .watch-benchmark { min-height: 84px; }
}

@media (max-width: 570px) {
  .topbar .session-controls { padding: 0; gap: 3px; }
  .topbar .bill-goal {
    width: 86px;
    padding: 4px 6px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
  }
  .topbar .bill-goal span { font-size: 7px; white-space: nowrap; }
  .topbar .bill-goal strong { font-size: 12px; text-align: center; }
  .topbar .bill-goal .goal-track { width: 100%; grid-column: 1; }
  .account-strip { min-height: 0; }
  .account-strip .metric { min-height: 76px; }
  .pnl-metric {
    min-height: 86px;
    padding: 7px;
    grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr);
    gap: 6px;
  }
  .account-balance-grid { gap: 4px; }
  .account-balance-stat { min-height: 52px; padding: 5px; gap: 5px; }
  .account-balance-stat span { font-size: 6px; }
  .account-balance-stat strong,
  .primary-metric .account-balance-stat strong { font-size: 10px; }
  .capacity-metric.leverage-metric { min-height: 95px; padding: 9px; }
  .leverage-metric .metric-icon { display: none; }
  .leverage-control .leverage-heading label { font-size: 10px; }
  .leverage-heading label small { font-size: 7px; }
  .leverage-readout span { display: none; }
  .leverage-readout #permitted-leverage,
  .capacity-metric .leverage-readout #permitted-leverage { font-size: 25px; }
  .capacity-metric.leverage-metric > .leverage-control input,
  .leverage-metric .leverage-control input { height: 11px; margin-top: 9px; }
  .leverage-metric .leverage-control input::-webkit-slider-thumb { width: 23px; height: 23px; }
  .leverage-metric .leverage-scale { font-size: 6px; }
  .leverage-metric .leverage-scale strong { padding: 2px 5px; font-size: 6px; }
  .watch-benchmark {
    min-height: 72px;
    padding: 7px;
    grid-template-columns: 96px minmax(45px, 1fr) auto;
    gap: 7px;
  }
  .watch-benchmark #market-index-sparkline { height: 30px; }
  .watch-benchmark .market-index-price { font-size: 10px; }
  .watch-benchmark .market-index-change { font-size: 8px; }
  .watch-panel .watch-list { grid-template-rows: 72px; }
  .chart-footer { min-height: 37px; height: auto; padding-left: 8px; gap: 6px; }
  .market-session-labels { grid-template-columns: 1fr 1fr; }
  .market-session-labels span:nth-child(2) { display: none; }
  .market-session-labels span:first-child,
  .market-session-labels span:last-child { font-size: 7px; }
  .market-session-labels span:first-child::after,
  .market-session-labels span:last-child::after { content: none; }
  .chart-footer .control-button,
  .chart-footer .icon-button { height: 25px; padding-inline: 6px; font-size: 7px; }
  .chart-footer .control-button,
  .chart-footer .speed-button { display: block; }
  .chart-footer .icon-button { min-width: 26px; font-size: 13px; }
}

/* Weekly result comparison */
.result-backdrop {
  padding: clamp(12px, 3vw, 34px);
  background:
    radial-gradient(circle at 50% 30%, rgb(247 219 157 / 16%), transparent 36%),
    linear-gradient(rgb(35 48 35 / 66%), rgb(60 38 21 / 82%));
  backdrop-filter: blur(7px) saturate(.72);
}

.day-result-card {
  position: relative;
  isolation: isolate;
  width: min(570px, 100%);
  padding: 31px 32px 24px;
  border: 0;
  border-radius: 13px;
  outline: 2px solid #d3a35d;
  outline-offset: -10px;
  background-color: #8e5c32;
  background-image: url("assets/ui/painted-wood.png");
  background-size: 520px;
  box-shadow:
    inset 0 0 0 5px #4d301d,
    inset 0 0 0 9px rgb(209 154 83 / 76%),
    0 28px 80px rgb(35 22 13 / 68%);
}

.day-result-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 17px;
  border: 1px solid rgb(116 76 40 / 54%);
  border-radius: 6px;
  background-color: #f4e0ac;
  background-image:
    linear-gradient(rgb(255 248 216 / 20%), rgb(217 184 119 / 16%)),
    url("assets/ui/painted-parchment.png");
  background-size: auto, 520px;
  box-shadow: inset 0 0 24px rgb(118 76 38 / 19%);
}

.day-result-card::after {
  content: "•                         •";
  position: absolute;
  inset: 7px 14px auto;
  color: #3f2819;
  text-align: justify;
  letter-spacing: 0;
  text-shadow: 0 1px #d6a05b;
  font: 900 18px/1 var(--numbers);
  pointer-events: none;
}

.day-result-card.has-comparison { width: min(890px, 100%); }

.result-celebration {
  position: relative;
  max-width: 650px;
  margin: 0 auto;
  padding: 3px 36px 14px;
  text-align: center;
}

.result-celebration::before,
.result-celebration::after {
  content: "❧";
  position: absolute;
  top: 18px;
  color: #6e8246;
  font-size: 22px;
  opacity: .78;
}

.result-celebration::before { left: 2px; transform: rotate(-18deg); }
.result-celebration::after { right: 2px; transform: rotate(198deg); }

.day-result-card .result-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8c472f;
  letter-spacing: .18em;
  font-size: 9px;
}

.day-result-card .result-kicker::before,
.day-result-card .result-kicker::after {
  content: "";
  width: 30px;
  height: 1px;
  background: #a77748;
}

.day-result-card h2 {
  margin: 8px 0 6px;
  color: #4e341e;
  text-shadow: 0 1px #fff2c6;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -.035em;
}

.result-celebration > p {
  max-width: 590px;
  margin: 0 auto;
  color: #735c3e;
  font-size: 10px;
  line-height: 1.45;
}

.result-summary-body,
.campaign-end-body { margin-top: 17px; }

.day-result-card.has-comparison .result-summary-body {
  display: grid;
  grid-template-columns: minmax(270px, .85fr) minmax(390px, 1.15fr);
  align-items: stretch;
  gap: 16px;
}

.result-score-summary .result-equity,
.campaign-score-summary .result-equity { margin: 0 0 11px; }

.day-result-card .result-score-summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.day-result-card .result-equity {
  position: relative;
  min-height: 82px;
  padding: 13px 16px 13px 60px;
  place-content: center;
  border: 2px solid #82582f;
  border-radius: 8px;
  background:
    linear-gradient(95deg, rgb(255 251 220 / 58%), transparent 55%),
    rgb(229 220 157 / 72%);
  box-shadow: inset 0 0 0 3px rgb(255 245 198 / 42%), 0 2px 0 rgb(105 70 36 / 24%);
  text-align: left;
}

.day-result-card .result-equity::after {
  content: "";
  position: absolute;
  left: 45px;
  top: 13px;
  bottom: 13px;
  width: 1px;
  background: rgb(116 91 52 / 29%);
}

.day-result-card .result-equity svg {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #587b3e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
}

.day-result-card .result-equity span { color: #705a3c; letter-spacing: .14em; }
.day-result-card .result-equity strong { color: #356332; text-shadow: 0 1px #fff4bf; font-size: 31px; }

.day-result-card .result-grid {
  grid-template-columns: repeat(4, 1fr);
  border-color: #997044;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgb(255 245 202 / 54%);
}

.day-result-card .result-grid div {
  padding: 10px 5px 9px;
  background: rgb(255 246 211 / 38%);
}

.day-result-card .result-grid span { font-size: 7px; }
.day-result-card .result-grid strong { color: #503921; font-size: 12px; }

.result-market-sense-breakdown {
  display: block;
  margin-top: 5px;
  color: #705a3c;
  font: 800 7px/1.3 var(--story);
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.result-character-note {
  position: relative;
  min-height: 76px;
  margin-top: 11px;
  padding: 12px 12px 12px 91px;
  display: flex;
  align-items: center;
  border: 1px solid #9b7749;
  border-radius: 7px;
  background: rgb(255 244 205 / 45%);
  overflow: hidden;
  text-align: left;
}

.result-character-note img {
  position: absolute;
  left: -7px;
  bottom: -4px;
  width: 99px;
  height: 78px;
  object-fit: cover;
  object-position: 16% 42%;
  filter: saturate(.82) sepia(.08);
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}

body[data-family-portrait="boy"] .result-character-note img {
  object-position: 84% 42%;
}

.day-result-card .result-character-note .result-lesson {
  margin: 0 !important;
  color: #674c2e !important;
  font-size: 10px;
  line-height: 1.4;
}

.day-result-card.margin-call-result-card { width: min(650px, 100%); }

.margin-call-aftermath {
  margin-top: 12px;
  padding: 13px;
  border: 2px solid #9b5d42;
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(255 240 203 / 72%), rgb(224 196 143 / 54%));
  box-shadow: inset 0 0 0 2px rgb(255 249 218 / 42%);
  color: #563a27;
  text-align: left;
}
.margin-call-aftermath[hidden] { display: none; }

.margin-call-aftermath > header span,
.margin-call-capital > span {
  display: block;
  color: #8c472f;
  font: 900 7px/1.2 var(--story);
  letter-spacing: .14em;
}

.margin-call-aftermath h3 {
  margin: 3px 0 9px;
  color: #4e341e;
  font: 900 16px/1.15 var(--story);
}

.margin-call-positions {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
}

.margin-call-positions li {
  min-width: 0;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgb(125 80 49 / 42%);
  border-radius: 5px;
  background: rgb(255 248 218 / 48%);
}

.margin-call-positions li span { min-width: 0; display: grid; gap: 2px; }
.margin-call-positions li strong { font-size: 10px; }
.margin-call-positions li small { color: #735c3e; font-size: 8px; line-height: 1.35; }
.margin-call-positions li b { flex: 0 0 auto; font: 900 11px/1 var(--numbers); }

.margin-call-capital {
  margin-top: 8px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 10px;
  border-block: 1px solid rgb(125 80 49 / 38%);
}

.margin-call-capital strong { color: #704130; font: 900 20px/1 var(--numbers); }
.margin-call-capital small { grid-column: 1 / -1; color: #725d45; font-size: 8px; line-height: 1.4; }

.margin-call-decision {
  margin-top: 9px;
  padding: 10px;
  border-radius: 6px;
  background: rgb(244 226 173 / 70%);
}

.margin-call-decision[data-margin-call-decision="offer"] { border-left: 4px solid #587b3e; }
.margin-call-decision[data-margin-call-decision="terminal"] { border-left: 4px solid #9b5d42; }
.margin-call-decision strong { display: block; color: #4d6035; font-size: 11px; }
.margin-call-decision[data-margin-call-decision="terminal"] strong { color: #844733; }
.margin-call-decision p { margin: 4px 0 0; color: #604832; font-size: 9px; line-height: 1.5; }

.day-result-card .result-character-note .result-lesson::before {
  content: "“";
  margin-right: 2px;
  color: #78904e;
  font-size: 20px;
  line-height: 0;
  vertical-align: -5px;
}

.day-result-card .result-recap {
  margin: 10px 0 0;
  border-color: #a77b49;
  background: rgb(246 225 174 / 58%);
}

.run-comparison {
  min-width: 0;
  padding: 15px 16px 13px;
  border: 2px solid #687549;
  border-radius: 8px;
  color: #4c563b;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 40%), transparent 62%),
    rgb(220 223 163 / 88%);
  box-shadow: inset 0 0 0 3px rgb(255 250 218 / 36%), 0 2px 0 rgb(84 96 58 / 22%);
  text-align: left;
}

.run-comparison[hidden] { display: none; }

.run-comparison-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.run-comparison-heading span {
  display: block;
  margin-bottom: 4px;
  color: #68704c;
  letter-spacing: .09em;
  font: 900 7px/1 var(--story);
}

.run-comparison-heading h3 {
  margin: 0;
  color: #3b5237;
  font: 900 19px/1 var(--story);
}

.run-comparison-heading > strong {
  flex: 0 0 auto;
  max-width: 94px;
  padding: 7px 9px;
  border: 2px solid #557747;
  border-radius: 6px;
  color: #315d34;
  background: linear-gradient(#edf0b6, #cbdc91);
  box-shadow: inset 0 0 0 2px rgb(255 255 222 / 45%);
  text-align: center;
  letter-spacing: .045em;
  font: 900 9px/1.12 var(--numbers);
}

.run-comparison > p {
  margin: 7px 0 8px;
  color: #657052;
  font-size: 8px;
  line-height: 1.35;
}

.distribution-plot {
  position: relative;
  height: 91px;
  padding: 25px 7px 8px;
  border: 1px solid rgb(85 102 68 / 45%);
  border-radius: 5px;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.7%, rgb(80 91 60 / 22%) 49.7% 50.3%, transparent 50.3%),
    repeating-linear-gradient(90deg, rgb(81 93 64 / 8%) 0 1px, transparent 1px 10%),
    rgb(255 250 219 / 58%);
  box-shadow: inset 0 1px 5px rgb(80 68 41 / 10%);
}

.distribution-bars {
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.distribution-bar {
  height: var(--bar-height);
  min-height: 3px;
  flex: 1;
  border: 1px solid rgb(65 100 96 / 25%);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#91b5ab, #5f8f88);
  opacity: .78;
}

.current-run-marker {
  position: absolute;
  z-index: 3;
  top: 5px;
  bottom: 6px;
  width: 3px;
  border-radius: 99px;
  background: #b85a3f;
  box-shadow: 0 0 0 1px rgb(255 248 211 / 78%);
  transform: translateX(-50%);
}

.current-run-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff3c4;
  border-radius: 50%;
  background: #b85a3f;
  box-shadow: 0 1px 0 #6c3c2c;
  transform: translate(-50%, 0);
}

.current-run-marker span {
  position: absolute;
  top: 0;
  right: 5px;
  padding: 3px 5px;
  border-radius: 2px;
  color: #fff4d0;
  background: #91452f;
  letter-spacing: .035em;
  font: 900 7px/1 var(--numbers);
  white-space: nowrap;
}

.previous-run-markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.previous-run-marker {
  position: absolute;
  bottom: calc(6px + (var(--marker-row) * 7px));
  width: 7px;
  height: 7px;
  border: 1px solid #fff1c3;
  border-radius: 50%;
  background: #765981;
  box-shadow: 0 1px 0 #523b5c;
  transform: translateX(-50%);
}

.distribution-axis {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  color: #777355;
  letter-spacing: .04em;
  font: 800 6px/1 var(--numbers);
}

.distribution-legend {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  color: #6b674d;
  font: 900 6px/1 var(--story);
}

.distribution-legend span { display: inline-flex; align-items: center; gap: 4px; }
.distribution-legend span::before { content: ""; width: 7px; height: 7px; display: inline-block; border-radius: 2px; background: #6d9a91; }
.distribution-legend .current-legend::before { border-radius: 99px; background: #b85a3f; }
.distribution-legend .previous-legend::before { border-radius: 50%; background: #765981; }

.run-comparison .previous-runs-summary {
  margin: 7px 0 0;
  overflow: hidden;
  color: #655c49;
  font: italic 7px/1.25 var(--story);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-result-card .result-actions {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgb(130 91 49 / 35%);
}

.result-action-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.groundhog-explainer {
  margin: 0 0 10px;
  padding: 10px 13px;
  display: grid;
  gap: 3px;
  border: 2px solid #b4873e;
  border-radius: 7px;
  color: #503821;
  background: linear-gradient(135deg, #fff0b6, #e9ca79);
  box-shadow: inset 0 0 0 2px rgb(255 250 215 / 65%), 0 3px 0 rgb(103 66 31 / 20%);
  text-align: left;
}

.groundhog-explainer[hidden] { display: none; }
.groundhog-explainer span { color: #9a4b2d; font: 900 7px/1 var(--story); letter-spacing: .13em; }
.groundhog-explainer strong { color: #315f38; font: 900 15px/1.05 var(--story); letter-spacing: .035em; }
.groundhog-explainer p { margin: 0; color: #675036; font-size: 9px; line-height: 1.35; }

.day-result-card .result-action-grid > button { margin: 0; }

.day-result-card #continue-button {
  grid-column: 1 / -1;
  min-height: 50px;
  border-color: #30562d;
  border-radius: 7px;
  background:
    linear-gradient(rgb(255 255 255 / 12%), transparent 45%),
    linear-gradient(#6fa14e, #477b3b);
  box-shadow: inset 0 0 0 2px rgb(188 218 127 / 24%), 0 4px 0 #294926;
  letter-spacing: .075em;
  font-size: 11px;
}

.day-result-card #replay-button,
.day-result-card #groundhog-button,
.day-result-card #menu-button {
  grid-column: span 3;
  min-height: 34px;
  margin: 0;
  border-color: #8a663d;
  border-radius: 5px;
  color: #5f4328;
  background: linear-gradient(#f3e1b3, #d9bd82);
  box-shadow: inset 0 0 0 1px rgb(255 247 208 / 48%), 0 2px 0 #a47b49;
  letter-spacing: .07em;
  font-size: 8px;
}

.day-result-card #groundhog-button:not([hidden]) ~ #menu-button { grid-column: span 2; }
.day-result-card #groundhog-button:not([hidden]),
.day-result-card #replay-button:has(+ #groundhog-button:not([hidden])) { grid-column: span 2; }

.day-result-card.groundhog-featured #groundhog-button {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 52px;
  border-color: #294e2c;
  border-radius: 7px;
  color: #fff7d4;
  background:
    linear-gradient(rgb(255 255 255 / 12%), transparent 45%),
    linear-gradient(#72a34f, #3f7439);
  box-shadow: inset 0 0 0 2px rgb(204 229 151 / 28%), 0 4px 0 #274927, 0 0 0 3px rgb(225 184 83 / 24%);
  font-size: 11px;
}

.day-result-card.groundhog-featured #continue-button {
  grid-column: span 3;
  grid-row: 2;
  min-height: 36px;
  border-color: #8a663d;
  color: #5f4328;
  background: linear-gradient(#f3e1b3, #d9bd82);
  box-shadow: inset 0 0 0 1px rgb(255 247 208 / 48%), 0 2px 0 #a47b49;
  font-size: 8px;
}

.day-result-card.groundhog-featured #replay-button { grid-column: span 3; grid-row: 2; }
.day-result-card.groundhog-featured #menu-button { grid-column: 1 / -1; grid-row: 3; }

.day-result-card .result-actions > small {
  display: block;
  margin-top: 10px;
  color: #806c4f;
  font-size: 8px;
}

@media (max-width: 790px) {
  .day-result-card.has-comparison { width: min(590px, 100%); }
  .day-result-card.has-comparison .result-summary-body { grid-template-columns: 1fr; }
}

@media (max-width: 570px) {
  .result-backdrop,
  .campaign-end-backdrop { padding: 10px; place-items: start center; }
  .day-result-card,
  .day-result-card.has-comparison { padding: 27px 25px 20px; }
  .day-result-card::before { inset: 14px; }
  .result-celebration { padding-inline: 22px; }
  .result-celebration::before,
  .result-celebration::after { font-size: 17px; }
  .day-result-card.has-comparison .result-summary-body { gap: 9px; }
  .day-result-card.has-comparison .result-equity { margin-bottom: 7px; }
  .day-result-card.has-comparison .result-equity strong { font-size: 22px; }
  .day-result-card.has-comparison .result-grid div { padding-block: 7px; }
  .run-comparison { padding: 10px; }
  .distribution-plot { height: 84px; }
  .deadline-resolution { margin-block: 10px; }
  .margin-call-aftermath { padding: 10px; }
}

@media (max-width: 410px) {
  .day-result-card,
  .day-result-card.has-comparison { padding: 25px 21px 18px; }
  .day-result-card::before { inset: 12px; }
  .day-result-card h2 { font-size: 24px; }
  .result-celebration > p { font-size: 9px; }
  .day-result-card .result-equity { min-height: 73px; padding-left: 52px; }
  .day-result-card .result-equity::after { left: 40px; }
  .day-result-card .result-equity svg { left: 10px; width: 22px; height: 22px; }
  .day-result-card .result-equity strong { font-size: 25px; }
  .result-character-note { padding-left: 78px; }
  .result-character-note img { left: -13px; width: 92px; }
  .margin-call-positions li { align-items: flex-start; }
  .margin-call-positions li small { font-size: 7px; }
  .margin-call-capital strong { font-size: 17px; }
  .run-comparison-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .run-comparison-heading h3 { font-size: 16px; }
  .distribution-legend { gap-inline: 6px; }
  .day-result-card #replay-button,
  .day-result-card #groundhog-button,
  .day-result-card #menu-button,
  .day-result-card #groundhog-button:not([hidden]) ~ #menu-button,
  .day-result-card #groundhog-button:not([hidden]),
  .day-result-card #replay-button:has(+ #groundhog-button:not([hidden])) { grid-column: 1 / -1; }
}

/* Calendar hybrid material system: painted plates + constructed SVG detail. */
.calendar-backdrop {
  background-color: #8c7953;
  background-image: url("assets/illustrations/chart-landscape.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: multiply;
}

.calendar-shell { position: relative; }

.calendar-topbar {
  min-height: 92px;
  padding: 15px 18px;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 13px 13px 5px 5px;
  background-color: #8d5f34;
  background-image: url("assets/ui/painted-wood.png");
  background-position: center 48%;
  background-size: 610px auto;
  background-blend-mode: multiply;
  box-shadow: inset 0 -9px 13px rgb(55 31 17 / 28%), 0 8px 0 #422718, 0 13px 26px rgb(42 26 14 / 34%);
}

.calendar-topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: url("assets/ui/calendar-header-frame.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.calendar-topbar::before {
  content: "";
  position: absolute;
  inset: 11px 25% 11px 31%;
  z-index: 1;
  border: 3px solid #5a351e;
  border-radius: 5px;
  background: url("assets/illustrations/masthead.png") 66% 52% / cover no-repeat;
  box-shadow: inset 0 0 0 2px rgb(239 206 135 / 34%), inset 0 -10px 14px rgb(63 43 23 / 16%), 0 2px 0 rgb(57 33 18 / 42%);
  opacity: .9;
  pointer-events: none;
}

.calendar-topbar > * { position: relative; z-index: 2; }

.calendar-seal {
  width: 64px;
  height: 64px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.calendar-seal img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 1px rgb(54 31 16 / 35%));
}

.calendar-brand,
.calendar-bill {
  border: 3px solid #704721;
  background-color: #f0d99d;
  background-image: url("assets/ui/calendar-button-wear.svg"), url("assets/ui/painted-parchment.png");
  background-position: center, center;
  background-size: 100% 100%, 430px auto;
  background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 2px rgb(255 246 201 / 70%), inset 0 -5px 8px rgb(118 78 35 / 14%), 0 3px 0 rgb(68 40 20 / 42%);
  clip-path: polygon(1% 4%, 97% 2%, 100% 13%, 98% 92%, 78% 96%, 55% 94%, 30% 97%, 2% 94%, 0 71%, 1% 35%);
}

.calendar-brand { padding: 9px 26px 10px; }
.calendar-brand h1 { color: #4c2e1a; text-shadow: 0 1px #fff0b8, 1px 2px rgb(91 53 25 / 18%); }
.calendar-bill {
  padding: 11px 16px 10px;
  clip-path: polygon(2% 3%, 98% 5%, 100% 33%, 98% 96%, 65% 94%, 36% 97%, 2% 94%, 0 57%);
}

.calendar-bill span { color: #7a3930; text-shadow: 0 1px #f8e9b0; }
.calendar-bill strong { color: #5b351f; text-shadow: 0 1px #fff0b8; }

.calendar-month-card {
  position: relative;
  isolation: isolate;
  border: 8px solid transparent;
  border-top-width: 7px;
  border-image: url("assets/ui/painted-wood.png") 95 / 8px / 0 round;
  border-radius: 5px 5px 14px 14px;
  outline: 2px solid #714522;
  outline-offset: -12px;
  background-color: #eed89e;
  background-image: url("assets/ui/painted-parchment.png");
  background-position: center;
  background-size: 650px auto;
  box-shadow: inset 0 0 0 3px rgb(112 72 32 / 22%), inset 0 0 34px rgb(117 76 34 / 18%), 0 9px 0 #4b2e1c, 0 16px 30px rgb(43 26 14 / 32%);
}

.calendar-month-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 3;
  border-radius: inherit;
  background: url("assets/ui/calendar-paper-wear.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.calendar-month-card > * { position: relative; z-index: 1; }
.calendar-month-heading h2 { color: #3f6038; text-shadow: 0 1px #fff0bb, 1px 2px rgb(83 60 31 / 15%); }
.calendar-month-heading > span { color: #778a43; filter: drop-shadow(0 1px #fff1bd); }
.calendar-weekdays { color: #67472d; text-shadow: 0 1px #fff0bc; }

.calendar-route.calendar-month-grid {
  border-color: rgb(105 68 33 / 46%);
  box-shadow: inset 0 1px rgb(255 244 197 / 38%);
}

.calendar-day,
.day-node {
  border-color: rgb(105 68 33 / 38%);
  background-color: rgb(249 232 179 / 30%);
  background-image: url("assets/ui/painted-parchment.png");
  background-position: center;
  background-size: 480px auto;
  background-blend-mode: soft-light;
}

.calendar-day:nth-child(3n),
.day-node:nth-child(3n) { background-position: 28% 68%; }
.calendar-day:nth-child(4n),
.day-node:nth-child(4n) { background-position: 71% 23%; }
.calendar-day.outside-month { background-color: rgb(111 77 42 / 9%); background-blend-mode: multiply; }

.day-node:hover {
  filter: brightness(1.04) saturate(1.03);
  background-color: rgb(255 240 190 / 52%);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 2px rgb(118 82 40 / 24%);
}

.day-node.settled-day { background-color: rgb(193 205 137 / 32%); background-blend-mode: multiply; }
.day-node.missed-day { background-color: rgb(199 181 150 / 25%); background-blend-mode: multiply; }
.day-node.current-day { background-color: rgb(216 221 144 / 35%); background-blend-mode: soft-light; }

.day-node.current-day time {
  border: 4px solid #718c42;
  background-color: #e9dda0;
  background-image: url("assets/ui/painted-parchment.png");
  background-position: 35% 44%;
  background-size: 260px auto;
  box-shadow: inset 0 0 0 2px rgb(255 244 194 / 50%), 0 0 0 4px rgb(94 120 55 / 17%), 0 3px 0 rgb(84 63 33 / 20%);
}

.day-node i { text-shadow: 0 1px #f7e5ab; }
.day-result { text-shadow: 0 1px #f5e8b8; }

.calendar-actions {
  width: min(930px, calc(100% - 190px));
  margin: 18px auto 2px;
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(215px, 1fr) minmax(260px, 1.12fr) minmax(215px, 1fr);
  gap: 13px;
}

.calendar-actions > :not(.calendar-garden-cluster) { position: relative; z-index: 2; }

.calendar-garden-cluster {
  width: 145px;
  height: 91px;
  position: absolute;
  bottom: -4px;
  z-index: 1;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgb(48 32 17 / 28%));
}

.calendar-garden-cluster-left { left: -151px; }
.calendar-garden-cluster-right { right: -151px; }

.calendar-drawer summary,
.calendar-actions > .start-day-button {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 8px 12px 9px 9px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  border: 5px solid #633d22;
  border-radius: 9px 7px 10px 7px;
  color: #4f321e;
  background-color: #e4c37d;
  background-image: url("assets/ui/calendar-button-wear.svg"), url("assets/ui/painted-parchment.png");
  background-position: center, center;
  background-size: 100% 100%, 430px auto;
  background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 2px #b38147, inset 0 0 0 4px rgb(255 244 196 / 60%), inset 0 -8px 12px rgb(104 64 27 / 14%), 0 5px 0 #422719, 0 9px 16px rgb(48 30 16 / 24%);
  cursor: pointer;
  list-style: none;
  text-align: left;
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.calendar-drawer summary::before,
.calendar-actions > .start-day-button::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border: 1px solid rgb(94 56 27 / 46%);
  border-radius: 4px 3px 6px 3px;
  pointer-events: none;
}

.calendar-drawer summary::after { content: none; }
.calendar-drawer summary::-webkit-details-marker { display: none; }

.calendar-drawer summary:hover,
.calendar-actions > .start-day-button:hover { filter: brightness(1.05) saturate(1.04); transform: translateY(-2px) rotate(-.12deg); }

.calendar-drawer summary:active,
.calendar-actions > .start-day-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px #a87943, inset 0 0 0 4px rgb(255 244 196 / 48%), inset 0 6px 12px rgb(78 45 22 / 20%), 0 2px 0 #422719;
}

.calendar-action-icon,
.calendar-actions > .start-day-button .calendar-action-icon {
  width: 48px;
  height: 48px;
  margin: 0;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 2px solid #76502c;
  border-radius: 50%;
  background-color: #ebd391;
  background-image: url("assets/ui/painted-parchment.png");
  background-position: 30% 28%;
  background-size: 260px auto;
  box-shadow: inset 0 0 0 2px rgb(255 243 189 / 72%), inset 0 -5px 7px rgb(102 61 25 / 18%), 0 3px 0 #4d301d, 0 5px 8px rgb(59 36 19 / 20%);
  font-size: inherit;
}

.calendar-action-icon img {
  width: 43px;
  height: 43px;
  display: block;
  filter: drop-shadow(0 1px 0 rgb(255 239 181 / 72%));
}

.calendar-action-copy,
.calendar-actions > .start-day-button .calendar-action-copy {
  min-width: 0;
  margin: 0;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  font-size: inherit;
}

.calendar-action-copy small {
  color: #74603f;
  letter-spacing: .16em;
  font: 900 7px/1 var(--story);
}

.calendar-action-copy strong {
  overflow: hidden;
  letter-spacing: .01em;
  font: 900 15px/1 var(--story);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px #fff0b6;
}

.calendar-action-trail,
.calendar-actions > .start-day-button .calendar-action-trail {
  width: 21px;
  height: 21px;
  margin: 0;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(92 58 29 / 48%);
  border-radius: 50%;
  background: rgb(255 238 180 / 34%);
  box-shadow: inset 0 1px rgb(255 255 255 / 34%);
  font: 900 10px/1 var(--story);
  transition: transform 150ms ease;
}

.calendar-drawer[open] .calendar-action-trail { transform: rotate(180deg); }

.calendar-actions > .start-day-button,
.log-drawer summary {
  border-color: #2f4e34;
  color: #fff0bd;
  background-color: #587642;
  background-image: url("assets/ui/calendar-button-wear.svg"), url("assets/ui/painted-wood.png");
  background-position: center, center 42%;
  background-size: 100% 100%, 410px auto;
  background-blend-mode: normal, multiply;
  box-shadow: inset 0 0 0 2px #8f7b42, inset 0 0 0 4px rgb(238 222 149 / 29%), inset 0 -9px 13px rgb(24 51 27 / 24%), 0 5px 0 #223a27, 0 9px 16px rgb(39 40 21 / 27%);
}

.calendar-actions > .start-day-button::before,
.log-drawer summary::before { border-color: rgb(229 207 128 / 38%); }
.calendar-actions > .start-day-button .calendar-action-copy small,
.log-drawer .calendar-action-copy small { color: #d7d59a; }
.calendar-actions > .start-day-button .calendar-action-copy strong { letter-spacing: .1em; font-size: 11px; }
.calendar-actions > .start-day-button .calendar-action-copy strong,
.log-drawer .calendar-action-copy strong { text-shadow: 0 1px #24422b; }
.calendar-actions > .start-day-button .calendar-action-trail,
.log-drawer .calendar-action-trail { border-color: rgb(239 218 138 / 37%); background: rgb(247 229 155 / 11%); }
.calendar-actions > .start-day-button .start-action-trail { font-size: 14px; }

.calendar-actions > .start-day-button:disabled {
  border-color: #74664e;
  color: #6d624e;
  background-color: #a99b7a;
  background-image: url("assets/ui/calendar-button-wear.svg"), url("assets/ui/painted-wood.png");
  background-blend-mode: normal, luminosity;
  box-shadow: inset 0 0 0 2px #97896b, inset 0 0 0 4px rgb(234 218 177 / 23%), 0 3px 0 #665844;
  cursor: not-allowed;
  filter: saturate(.45);
}

.calendar-actions > .start-day-button:disabled:hover { transform: none; }

.calendar-drawer-body,
.month-ledger,
.calendar-drawer .opening-focus,
.calendar-drawer .build-board,
.build-option,
.ledger-entry.current,
.bill-countdown {
  background-color: #ead29a;
  background-image: url("assets/ui/painted-parchment.png");
  background-position: center;
  background-size: 520px auto;
}

.calendar-drawer-body {
  margin-top: 10px;
  border: 6px solid transparent;
  border-image: url("assets/ui/painted-wood.png") 95 / 6px / 0 round;
  outline: 2px solid #5f3b21;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 2px rgb(255 242 190 / 42%), 0 5px 0 #482b1b, 0 9px 18px rgb(46 28 15 / 24%);
}

.calendar-drawer .opening-focus { border: 2px dashed #916b3d; box-shadow: inset 0 0 0 2px rgb(255 242 193 / 28%); }
.calendar-drawer .build-board { border-color: #76502d; box-shadow: inset 0 0 0 2px rgb(255 242 193 / 32%); }
.build-option { border: 2px solid #987044; box-shadow: inset 0 0 0 1px rgb(255 242 193 / 26%), 0 2px 0 rgb(92 57 29 / 16%); }
.build-option.selected { border-color: #3e6b38; background-blend-mode: multiply; }

.focus-options button,
.build-option button {
  background-color: #d9c08a;
  background-image: url("assets/ui/calendar-button-wear.svg"), url("assets/ui/painted-parchment.png");
  background-size: 100% 100%, 320px auto;
  background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 1px rgb(255 244 199 / 45%), 0 2px 0 rgb(80 49 25 / 28%);
}

.focus-options button.active,
.build-option button:not(:disabled) {
  background-color: #587744;
  background-image: url("assets/ui/calendar-button-wear.svg"), url("assets/ui/painted-wood.png");
  background-blend-mode: normal, multiply;
}

.ledger-entry { border-color: rgb(110 72 36 / 30%); }
.ledger-entry.current { border: 2px solid #99703c; box-shadow: inset 0 0 0 2px rgb(255 240 188 / 28%); }
.bill-countdown { border: 3px solid #805035; box-shadow: inset 0 0 0 2px rgb(255 236 180 / 32%); }

@media (max-width: 570px) {
  .calendar-backdrop { background-attachment: scroll; }
  .calendar-topbar { min-height: 70px; padding: 8px; border-width: 0; box-shadow: inset 0 -6px 9px rgb(55 31 17 / 24%), 0 5px 0 #422718, 0 8px 17px rgb(42 26 14 / 28%); }
  .calendar-topbar::before { display: none; }
  .calendar-seal { width: 42px; height: 42px; }
  .calendar-brand { padding: 7px 10px; }
  .calendar-brand h1 { font-size: 18px; }
  .calendar-bill { padding: 8px 9px; }
  .calendar-month-card { border-width: 6px; border-image-width: 6px; outline-offset: -9px; box-shadow: inset 0 0 0 2px rgb(112 72 32 / 18%), inset 0 0 22px rgb(117 76 34 / 13%), 0 6px 0 #4b2e1c, 0 10px 20px rgb(43 26 14 / 25%); }
  .calendar-actions { width: 100%; margin-top: 14px; grid-template-columns: 1fr; gap: 9px; }
  .calendar-garden-cluster { display: none; }
  .calendar-actions > .start-day-button { order: -1; }
  .calendar-drawer[open] { grid-column: auto; }
  .calendar-drawer summary,
  .calendar-actions > .start-day-button { min-height: 60px; padding: 6px 10px 7px 7px; grid-template-columns: 41px minmax(0, 1fr) 19px; gap: 8px; border-width: 4px; box-shadow: inset 0 0 0 2px #a87943, inset 0 0 0 3px rgb(255 244 196 / 46%), 0 4px 0 #422719, 0 7px 12px rgb(48 30 16 / 21%); }
  .calendar-action-icon,
  .calendar-actions > .start-day-button .calendar-action-icon { width: 40px; height: 40px; }
  .calendar-action-icon img { width: 37px; height: 37px; }
  .calendar-action-copy { gap: 3px; }
  .calendar-action-copy small { font-size: 6px; }
  .calendar-action-copy strong { font-size: 13px; }
  .calendar-action-trail,
  .calendar-actions > .start-day-button .calendar-action-trail { width: 18px; height: 18px; font-size: 9px; }
  .calendar-drawer-body { border-width: 5px; border-image-width: 5px; outline-offset: -5px; }
  .build-option dl > div { grid-template-columns: 46px minmax(0, 1fr); gap: 7px; }
}

/* Calendar raster-first correction: the reference painting is the UI chassis. */
.calendar-backdrop {
  padding: 8px;
  display: grid;
  place-items: center;
  overflow: auto;
  background: #806a48 url("assets/illustrations/chart-landscape.png") center / cover fixed no-repeat;
  backdrop-filter: none;
}

.calendar-shell {
  width: min(1586px, 100%, calc((100dvh - 16px) * 1.59879));
  min-height: 0;
  aspect-ratio: 1586 / 992;
  margin: auto;
  position: relative;
  display: block;
  overflow: visible;
  background: none;
  filter: drop-shadow(0 13px 22px rgb(48 30 16 / 35%));
}

.calendar-topbar {
  width: auto;
  height: 19.5%;
  min-height: 0;
  padding: 0;
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.calendar-topbar::before,
.calendar-topbar::after { content: none; }
.calendar-topbar > * { position: absolute; z-index: auto; }
.calendar-seal { display: none; }

.calendar-identity {
  width: 34%;
  height: 58%;
  left: 9.3%;
  top: 22%;
  display: block;
}

.calendar-brand {
  position: static;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: none;
  box-shadow: none;
}

.calendar-brand h1 {
  margin: 0;
  color: #4b2f1c;
  font-size: clamp(20px, 2.7vw, 40px);
  line-height: .92;
  letter-spacing: -.045em;
  text-shadow: 0 1px rgb(255 238 183 / 75%);
}

.calendar-bill {
  width: 23.5%;
  min-width: 0;
  height: 54%;
  right: 3.5%;
  top: 22%;
  padding: 0 3%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: none;
  box-shadow: none;
  text-align: right;
}

.calendar-bill span {
  color: #7e3e36;
  letter-spacing: .1em;
  font-size: clamp(6px, .72vw, 10px);
  text-shadow: 0 1px rgb(255 237 180 / 72%);
}

.calendar-bill strong {
  color: #593621;
  font-size: clamp(13px, 1.7vw, 24px);
  text-shadow: 0 1px rgb(255 237 180 / 72%);
}

.calendar-month-card {
  width: auto;
  height: 63.8%;
  min-height: 0;
  padding: 1.2% 2.2% 1.5%;
  position: absolute;
  inset: 19.3% 3.5% auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}

.calendar-month-card::before { content: none; }
.calendar-month-card > * { position: relative; z-index: auto; }

.calendar-month-heading {
  min-height: 0;
  height: 9.5%;
  flex: 0 0 9.5%;
  gap: 14px;
  color: #718447;
}

.calendar-month-heading h2 {
  color: #45643c;
  font-size: clamp(20px, 2.4vw, 35px);
  text-shadow: 0 1px rgb(255 238 184 / 75%);
}

.calendar-weekdays {
  min-height: 0;
  height: 7%;
  flex: 0 0 7%;
  color: #65452d;
  font-size: clamp(6px, .7vw, 10px);
  text-shadow: 0 1px rgb(255 238 184 / 70%);
}

.calendar-route.calendar-month-grid {
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
  border: 1px solid rgb(111 77 41 / 34%);
  border-width: 1px 0 0 1px;
  box-shadow: none;
}

.calendar-day,
.day-node,
.calendar-day:nth-child(3n),
.day-node:nth-child(3n),
.calendar-day:nth-child(4n),
.day-node:nth-child(4n) {
  min-height: 0;
  padding: clamp(3px, .55vw, 8px);
  border: 0;
  border-right: 1px solid rgb(111 77 41 / 30%);
  border-bottom: 1px solid rgb(111 77 41 / 30%);
  border-radius: 0;
  color: #694a30;
  background: transparent;
  box-shadow: none;
  filter: none;
  font-size: clamp(7px, .86vw, 13px);
}

.calendar-day.outside-month { background: rgb(104 75 43 / 2%); }
.day-node:hover { background: rgb(255 241 190 / 24%); transform: none; box-shadow: inset 0 0 0 2px rgb(102 131 58 / 20%); }
.day-node.settled-day { background: rgb(183 199 124 / 9%); }
.day-node.missed-day { background: rgb(157 120 92 / 5%); opacity: .78; }
.day-node.current-day { background: rgb(202 218 137 / 12%); }
.day-node.selected { background: rgb(202 218 137 / 9%); }

.day-node time { color: #5c3f28; font-size: clamp(8px, .98vw, 15px); }
.day-node.current-day time {
  width: clamp(30px, 3.9vw, 54px);
  height: clamp(30px, 3.9vw, 54px);
  border: clamp(2px, .28vw, 4px) solid #7e9648;
  color: #365638;
  background: rgb(241 231 178 / 86%);
  box-shadow: 0 0 0 4px rgb(111 137 67 / 14%);
  font-size: clamp(14px, 1.8vw, 24px);
}

.day-node i { margin-top: clamp(2px, .4vw, 6px); color: #65472e; font-size: clamp(13px, 1.65vw, 23px); text-shadow: none; }
.day-result { color: #466b39; font-size: clamp(5px, .62vw, 9px); text-shadow: none; }

.calendar-actions {
  width: auto;
  height: 11.2%;
  margin: 0;
  position: absolute;
  inset: auto 22.8% 3.8% 22.8%;
  z-index: 7;
  display: grid;
  grid-template-columns: 1.12fr 1.05fr 1fr;
  align-items: stretch;
  gap: 1.2%;
}

.calendar-garden-cluster { display: none; }
.calendar-drawer { min-width: 0; position: static; }
.calendar-drawer[open] { grid-column: auto; }
.calendar-actions > :not(.calendar-garden-cluster) { position: static; z-index: auto; }

.calendar-drawer summary,
.calendar-actions > .calendar-menu-button,
.calendar-actions > .calendar-shop-button,
.calendar-actions > .start-day-button,
.log-drawer summary {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 10% 8%;
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 0;
  color: #51351f;
  background: none;
  box-shadow: none;
  filter: none;
  list-style: none;
  text-align: center;
  transform: none;
}

.calendar-actions > .start-day-button,
.log-drawer summary { color: #fff2c3; }
.calendar-drawer summary::before,
.calendar-drawer summary::after,
.calendar-actions > .start-day-button::before { content: none; }

.calendar-drawer summary:hover,
.calendar-actions > .start-day-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.calendar-drawer summary:active,
.calendar-actions > .start-day-button:active { filter: brightness(.94); transform: translateY(2px); box-shadow: none; }

.calendar-action-icon,
.calendar-actions > .start-day-button .calendar-action-icon { display: none; }

.calendar-action-copy,
.calendar-actions > .start-day-button .calendar-action-copy {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: clamp(2px, .3vw, 4px);
  font-size: inherit;
}

.calendar-action-copy small,
.calendar-actions > .start-day-button .calendar-action-copy small,
.log-drawer .calendar-action-copy small {
  color: inherit;
  opacity: .72;
  letter-spacing: .15em;
  font-size: clamp(5px, .52vw, 8px);
}

.calendar-action-copy strong,
.calendar-actions > .start-day-button .calendar-action-copy strong,
.log-drawer .calendar-action-copy strong {
  color: inherit;
  letter-spacing: .01em;
  font-size: clamp(11px, 1.25vw, 18px);
  text-shadow: 0 1px rgb(79 48 24 / 20%);
}

.calendar-actions > .start-day-button .calendar-action-copy strong { letter-spacing: .08em; font-size: clamp(8px, .82vw, 12px); }

.calendar-action-trail,
.calendar-actions > .start-day-button .calendar-action-trail,
.log-drawer .calendar-action-trail {
  width: 18px;
  height: 18px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  box-shadow: none;
  font-size: clamp(8px, .8vw, 12px);
}

.calendar-actions > .start-day-button:disabled {
  color: rgb(89 76 55 / 68%);
  background: none;
  box-shadow: none;
  filter: grayscale(.65);
}

.calendar-drawer-body {
  width: min(780px, calc(100vw - 28px));
  max-height: 64dvh;
  margin: 0;
  padding: 18px;
  position: fixed;
  left: 50%;
  top: 47%;
  z-index: 80;
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 7px solid #674326;
  border-radius: 10px;
  outline: 2px solid #b07b43;
  outline-offset: -11px;
  background: #efdba6 url("assets/ui/reference-slices/parchment-tile.png") center / 520px auto repeat;
  box-shadow: 0 0 0 100vmax rgb(48 32 18 / 50%), 0 12px 28px rgb(43 27 15 / 35%);
}

.calendar-drawer .opening-focus,
.calendar-drawer .build-board,
.build-option,
.ledger-entry.current,
.bill-countdown,
.focus-options button,
.build-option button,
.focus-options button.active,
.build-option button:not(:disabled) {
  background-image: none;
}

.calendar-drawer .opening-focus,
.calendar-drawer .build-board,
.build-option,
.ledger-entry.current,
.bill-countdown { background-color: rgb(240 219 167 / 54%); }

.focus-options button { background: rgb(231 208 151 / 76%); }
.focus-options button.active,
.build-option button:not(:disabled) { background: #577943; }
@media (max-width: 570px) {
  .calendar-backdrop { padding: 0; display: block; background-attachment: scroll; }

  .calendar-shell {
    width: 100%;
    min-height: 0;
    aspect-ratio: 941 / 1672;
    margin: 0;
    background-image: none;
    filter: none;
  }

  .calendar-topbar { height: 12.2%; }
  .calendar-identity { width: 27%; height: 53%; left: 13.2%; top: 23%; }
  .calendar-brand h1 { font-size: clamp(13px, 4.6vw, 18px); line-height: .9; }
  .calendar-bill { width: 21%; height: 50%; right: 2.5%; top: 21%; padding: 0 2%; gap: 3px; }
  .calendar-bill span { overflow: hidden; font-size: clamp(4px, 1.15vw, 6px); white-space: nowrap; text-overflow: ellipsis; }
  .calendar-bill strong { font-size: clamp(7px, 2.25vw, 10px); }

  .calendar-month-card {
    height: 48.7%;
    padding: 2.2% 3.2% 2.4%;
    inset: 12.2% 4.6% auto;
  }

  .calendar-month-heading { height: 8%; flex-basis: 8%; gap: 8px; }
  .calendar-month-heading h2 { font-size: clamp(17px, 5.3vw, 21px); }
  .calendar-weekdays { height: 6%; flex-basis: 6%; font-size: clamp(5px, 1.6vw, 7px); }
  .calendar-day,
  .day-node { padding: 3px; font-size: clamp(6px, 1.9vw, 8px); }
  .day-node time { font-size: clamp(7px, 2.1vw, 9px); }
  .day-node i { margin-top: 2px; font-size: clamp(10px, 3.2vw, 13px); }
  .day-result { font-size: clamp(4px, 1.35vw, 6px); }
  .day-node.current-day time { width: clamp(29px, 9.2vw, 36px); height: clamp(29px, 9.2vw, 36px); font-size: clamp(13px, 4.2vw, 17px); box-shadow: 0 0 0 2px rgb(111 137 67 / 14%); }

  .calendar-actions {
    width: auto;
    height: 26.2%;
    inset: 62.1% 6.3% auto;
    grid-template-columns: 1fr;
    grid-template-rows: 1.18fr 1fr 1fr;
    gap: 2.8%;
  }

  .calendar-actions > .start-day-button { order: 0; }
  .calendar-drawer[open] { grid-column: auto; }
  .calendar-drawer summary,
  .calendar-actions > .start-day-button,
  .log-drawer summary {
    min-height: 0;
    padding: 4% 7%;
    grid-template-columns: minmax(0, 1fr) 17px;
  }

  .calendar-action-copy small,
  .calendar-actions > .start-day-button .calendar-action-copy small,
  .log-drawer .calendar-action-copy small { font-size: clamp(5px, 1.5vw, 7px); }
  .calendar-action-copy strong,
  .calendar-actions > .start-day-button .calendar-action-copy strong,
  .log-drawer .calendar-action-copy strong { font-size: clamp(12px, 4vw, 16px); }
  .calendar-actions > .start-day-button .calendar-action-copy strong { font-size: clamp(9px, 2.8vw, 12px); }
  .calendar-action-trail,
  .calendar-actions > .start-day-button .calendar-action-trail,
  .log-drawer .calendar-action-trail { width: 17px; height: 17px; font-size: 9px; }

  .calendar-drawer-body {
    width: calc(100vw - 18px);
    max-height: 72dvh;
    padding: 14px 10px;
    top: 45%;
    border-width: 5px;
    outline-offset: -8px;
  }
}

/* Calendar sliced-art pipeline: repeatable materials, nine-slice frame, props, and plate states. */
.calendar-backdrop {
  padding: clamp(8px, 1.6vw, 18px);
  display: block;
  overflow: auto;
  background: #7b6848 url("assets/illustrations/chart-landscape.png") center / cover fixed no-repeat;
}

.calendar-shell {
  width: min(1180px, 100%);
  min-height: calc(100dvh - clamp(16px, 3.2vw, 36px));
  aspect-ratio: auto;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: none;
  filter: none;
}

.calendar-topbar {
  width: 100%;
  height: auto;
  min-height: 104px;
  padding: 10px 16px;
  position: relative;
  inset: auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 7px solid #56351f;
  border-radius: 15px 15px 6px 6px;
  background: #895b34 url("assets/ui/reference-slices/wood-tile.png") center / auto 100% repeat-x;
  box-shadow: inset 0 0 0 2px rgb(221 162 88 / 48%), 0 7px 0 #3e2718, 0 12px 24px rgb(47 29 15 / 30%);
}

.calendar-topbar::before,
.calendar-topbar::after { content: none; }
.calendar-topbar > * { position: relative; z-index: 2; }

.calendar-identity {
  width: min(48%, 510px);
  height: auto;
  min-width: 0;
  left: auto;
  top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-seal {
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  display: block;
  border: 0;
  background: none;
  box-shadow: none;
}

.calendar-seal img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 3px 2px rgb(49 29 15 / 30%)); }

.calendar-brand {
  width: min(390px, 100%);
  height: 72px;
  padding: 10px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: url("assets/ui/reference-slices/button-cream-normal.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.calendar-brand h1 { color: #4b2f1c; font-size: clamp(24px, 3.1vw, 38px); line-height: .94; }
.calendar-header-scene {
  width: 30%;
  height: 78px;
  position: absolute !important;
  left: 47%;
  top: 10px;
  z-index: 1 !important;
  object-fit: cover;
  object-position: center;
  border: 4px solid #654123;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgb(238 206 137 / 32%);
}

.calendar-header-family {
  width: 190px;
  height: 112px;
  position: absolute !important;
  left: 44%;
  top: -10px;
  z-index: 4 !important;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px rgb(54 32 16 / 25%));
  pointer-events: none;
}

.calendar-bill {
  width: min(270px, 25%);
  min-width: 210px;
  height: 75px;
  right: auto;
  top: auto;
  padding: 11px 17px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: url("assets/ui/reference-slices/bill-plate.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.calendar-bill span { font-size: clamp(7px, .75vw, 10px); }
.calendar-bill strong { font-size: clamp(14px, 1.7vw, 22px); }

.calendar-month-card {
  width: 100%;
  height: auto;
  min-height: 470px;
  padding: 16px 20px 20px;
  position: relative;
  inset: auto;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: 22px solid transparent;
  border-radius: 10px;
  border-image: url("assets/ui/reference-slices/calendar-frame-9slice.png") 64 / 22px / 3px stretch;
  outline: 0;
  background: #f0dca8 url("assets/ui/reference-slices/parchment-tile.png") center / 580px auto repeat;
  box-shadow: 0 9px 0 #422819, 0 15px 26px rgb(45 28 15 / 28%);
}

.calendar-month-card::before { content: none; }
.calendar-month-heading { height: 48px; flex: 0 0 48px; }
.calendar-month-heading h2 { font-size: clamp(23px, 2.7vw, 34px); }
.calendar-weekdays { height: 31px; flex: 0 0 31px; font-size: clamp(7px, .75vw, 10px); }

.calendar-route.calendar-month-grid {
  min-height: 355px;
  flex: 1 1 auto;
  border-color: rgb(112 76 39 / 33%);
}

.calendar-day,
.day-node,
.calendar-day:nth-child(3n),
.day-node:nth-child(3n),
.calendar-day:nth-child(4n),
.day-node:nth-child(4n) {
  background: rgb(255 244 207 / 5%);
  border-color: rgb(112 76 39 / 28%);
}

.calendar-actions {
  width: min(900px, calc(100% - 170px));
  height: auto;
  min-height: 78px;
  margin: 12px auto 0;
  position: relative;
  inset: auto;
  z-index: 7;
  display: grid;
  grid-template-columns: 1.12fr 1.05fr 1fr;
  align-items: stretch;
  gap: 10px;
}

.calendar-actions > :not(.calendar-garden-cluster) { position: relative; z-index: 2; }
.calendar-garden-cluster { display: block; position: absolute; z-index: 1; object-fit: contain; pointer-events: none; }
.calendar-garden-cluster-left { width: 180px; height: 112px; left: -85px; bottom: -15px; }
.calendar-garden-cluster-right { width: 188px; height: 116px; right: -85px; bottom: -16px; }

.calendar-drawer { min-width: 0; position: static; }
.calendar-drawer[open] { grid-column: auto; }

.calendar-drawer summary,
.calendar-actions > .calendar-menu-button,
.calendar-actions > .start-day-button,
.calendar-actions > .calendar-shop-button,
.calendar-actions > .calendar-lifestyle-button,
.log-drawer summary {
  width: 100%;
  height: 78px;
  min-height: 78px;
  margin: 0;
  padding: 12px 20px;
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 0;
  color: #51351f;
  background: url("assets/ui/reference-slices/button-cream-normal.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: none;
  transform: none;
}

.calendar-actions > .start-day-button,
.calendar-actions > .calendar-shop-button,
.calendar-actions > .calendar-lifestyle-button,
.log-drawer summary {
  color: #fff1c3;
  background-image: url("assets/ui/reference-slices/button-green-normal.png");
}

.calendar-drawer summary:hover,
.calendar-actions > .calendar-menu-button:hover { background-image: url("assets/ui/reference-slices/button-cream-hover.png"); filter: none; transform: translateY(-1px); }
.calendar-actions > .start-day-button:hover,
.calendar-actions > .calendar-shop-button:hover,
.calendar-actions > .calendar-lifestyle-button:hover,
.log-drawer summary:hover { background-image: url("assets/ui/reference-slices/button-green-hover.png"); filter: none; transform: translateY(-1px); }
.calendar-drawer summary:active,
.calendar-actions > .calendar-menu-button:active { background-image: url("assets/ui/reference-slices/button-cream-pressed.png"); filter: none; transform: translateY(2px); }
.calendar-actions > .start-day-button:active,
.calendar-actions > .calendar-shop-button:active,
.calendar-actions > .calendar-lifestyle-button:active,
.log-drawer summary:active { background-image: url("assets/ui/reference-slices/button-green-pressed.png"); filter: none; transform: translateY(2px); }

.calendar-drawer summary::before,
.calendar-drawer summary::after,
.calendar-actions > .start-day-button::before { content: none; }
.calendar-action-icon,
.calendar-actions > .start-day-button .calendar-action-icon { display: none; }
.calendar-action-copy strong,
.calendar-actions > .start-day-button .calendar-action-copy strong,
.log-drawer .calendar-action-copy strong { font-size: clamp(12px, 1.4vw, 18px); }
.calendar-actions > .start-day-button .calendar-action-copy strong { font-size: clamp(9px, 1vw, 12px); }
.calendar-actions > .calendar-shop-button .calendar-action-copy strong { font-size: clamp(9px, 1vw, 13px); }

.calendar-drawer-body {
  width: min(780px, calc(100vw - 28px));
  max-height: 64dvh;
  margin: 0;
  padding: 20px;
  position: fixed;
  left: 50%;
  top: 47%;
  z-index: 80;
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 18px solid transparent;
  border-radius: 10px;
  border-image: url("assets/ui/reference-slices/calendar-frame-9slice.png") 64 / 18px / 2px stretch;
  outline: 0;
  background: #efdba6 url("assets/ui/reference-slices/parchment-tile.png") center / 520px auto repeat;
  box-shadow: 0 0 0 100vmax rgb(48 32 18 / 50%), 0 12px 28px rgb(43 27 15 / 35%);
}

.calendar-drawer .opening-focus,
.calendar-drawer .build-board,
.build-option,
.ledger-entry.current,
.bill-countdown { background: rgb(240 219 167 / 50%) url("assets/ui/reference-slices/parchment-tile.png") center / 420px auto repeat; }
.focus-options button,
.build-option button { background: url("assets/ui/reference-slices/button-cream-normal.png") center / 100% 100% no-repeat; }
.focus-options button:hover,
.build-option button:hover { background-image: url("assets/ui/reference-slices/button-cream-hover.png"); }
.focus-options button.active,
.build-option button:not(:disabled) { background: url("assets/ui/reference-slices/button-green-normal.png") center / 100% 100% no-repeat; }
@media (max-width: 760px) {
  .calendar-backdrop { padding: 5px; background-attachment: scroll; }
  .calendar-shell { width: 100%; min-height: calc(100dvh - 10px); }

  .calendar-topbar {
    min-height: 126px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    grid-template-rows: 56px 56px;
    gap: 4px 6px;
    border-width: 5px;
  }

  .calendar-identity {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 1;
    gap: 4px;
  }
  .calendar-seal { width: 48px; height: 48px; }
  .calendar-brand { width: calc(100% - 52px); height: 56px; padding: 8px 16px; }
  .calendar-brand h1 { font-size: clamp(16px, 4.9vw, 19px); white-space: nowrap; }
  .calendar-header-scene {
    width: 100%;
    height: 56px;
    position: relative !important;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 2;
    border-width: 2px;
  }
  .calendar-header-family { width: 112px; height: 78px; left: 17%; top: 51px; }
  .calendar-bill {
    width: 126px;
    min-width: 0;
    height: 56px;
    padding: 8px 8px;
    grid-column: 2;
    grid-row: 2;
  }
  .calendar-bill span { max-width: 100%; overflow: hidden; font-size: 5.5px; white-space: nowrap; text-overflow: ellipsis; }
  .calendar-bill strong { font-size: clamp(8px, 2.7vw, 11px); }

  .calendar-month-card {
    min-height: 455px;
    padding: 11px 7px 12px;
    border-width: 14px;
    border-image-width: 14px;
  }

  .calendar-month-heading { height: 39px; flex-basis: 39px; gap: 8px; }
  .calendar-month-heading h2 { font-size: clamp(19px, 5.8vw, 24px); }
  .calendar-weekdays { height: 25px; flex-basis: 25px; font-size: 6px; }
  .calendar-route.calendar-month-grid { min-height: 365px; }
  .calendar-day,
  .day-node { padding: 3px; font-size: 8px; }
  .day-node time { font-size: 9px; }
  .day-node i { margin-top: 2px; font-size: 13px; }
  .day-result { font-size: 5px; }
  .day-node.current-day time { width: 34px; height: 34px; font-size: 16px; }

  .calendar-actions {
    width: 100%;
    min-height: 0;
    margin-top: 10px;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .calendar-actions > .start-day-button { order: 0; }
  .calendar-drawer[open] { grid-column: auto; }
  .calendar-drawer summary,
  .calendar-actions > .calendar-menu-button,
  .calendar-actions > .calendar-shop-button,
  .calendar-actions > .calendar-lifestyle-button,
  .calendar-actions > .start-day-button,
  .log-drawer summary { height: 64px; min-height: 64px; padding: 9px 18px; }
  .calendar-action-copy strong,
  .calendar-actions > .start-day-button .calendar-action-copy strong,
  .log-drawer .calendar-action-copy strong { font-size: 15px; }
  .calendar-actions > .start-day-button .calendar-action-copy strong { font-size: 11px; }
  .calendar-actions > .calendar-shop-button .calendar-action-copy strong { font-size: 12px; }
  .calendar-garden-cluster-left { width: 112px; height: 70px; left: -5px; bottom: -48px; }
  .calendar-garden-cluster-right { width: 118px; height: 73px; right: -5px; bottom: -48px; }
  .calendar-actions { margin-bottom: 44px; }

  .calendar-drawer-body {
    width: calc(100vw - 16px);
    max-height: 72dvh;
    padding: 14px 10px;
    top: 45%;
    border-width: 12px;
    border-image-width: 12px;
  }
}

/* A single illustrated life-path board, with farm as the default theme. */
body.lifestyle-open { overflow: hidden; }

.lifestyle-planner {
  --lifestyle-ink: #4a301d;
  --lifestyle-muted: #785f3f;
  --lifestyle-paper: #f3dfaa;
  --lifestyle-paper-deep: #d9b66f;
  --lifestyle-accent: #476b37;
  --lifestyle-accent-soft: #dce8b4;
  --lifestyle-frame: #633d24;
  position: fixed;
  inset: 0;
  z-index: 170;
  padding: clamp(8px, 2vw, 24px);
  display: grid;
  place-items: center;
  color: var(--lifestyle-ink);
  background: rgb(26 17 10 / 82%);
  backdrop-filter: blur(2px);
}
.lifestyle-planner[hidden] { display: none; }
.lifestyle-planner[data-lifestyle-theme="farm"] { color-scheme: light; }
.lifestyle-planner[data-lifestyle-theme="city"] {
  --lifestyle-ink: #dce4ee;
  --lifestyle-muted: #98a7ba;
  --lifestyle-paper: #111923;
  --lifestyle-paper-deep: #182331;
  --lifestyle-accent: #5aae80;
  --lifestyle-accent-soft: #1e3a31;
  --lifestyle-frame: #334252;
  color-scheme: dark;
}
.lifestyle-panel {
  width: min(1240px, 100%);
  height: min(900px, calc(100dvh - clamp(16px, 4vw, 48px)));
  min-height: 0;
  padding: clamp(15px, 2vw, 24px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 7px solid var(--lifestyle-frame);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgb(255 249 220 / 52%), transparent 115px),
    linear-gradient(90deg, rgb(126 83 39 / 7%) 1px, transparent 1px),
    url("assets/ui/reference-slices/parchment-tile.png") center / 480px auto,
    var(--lifestyle-paper);
  box-shadow:
    inset 0 0 0 2px #f8e8b4,
    inset 0 0 28px rgb(103 60 27 / 18%),
    0 20px 55px rgb(17 10 5 / 58%);
}
.lifestyle-panel::before {
  content: "";
  height: 7px;
  position: absolute;
  inset: 0 0 auto;
  background: linear-gradient(90deg, #719351, #a1b96c 42%, #d5bd69 70%, #719351);
  opacity: .72;
}
.lifestyle-planner[data-lifestyle-theme="city"] .lifestyle-panel {
  background:
    linear-gradient(rgb(78 111 142 / 10%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(78 111 142 / 10%) 1px, transparent 1px),
    var(--lifestyle-paper);
  background-size: 24px 24px;
  box-shadow: inset 0 0 0 1px #526272, 0 18px 45px rgb(0 0 0 / 55%);
}
.lifestyle-close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 4;
  border: 2px solid #e0bc71;
  border-radius: 50%;
  color: #fff4cb;
  background: #6f4328;
  box-shadow: 0 2px 0 #402515;
  font: 900 20px/1 var(--story);
  cursor: pointer;
}
.lifestyle-close:hover { background: #815034; transform: translateY(-1px); }
.lifestyle-close:focus-visible { outline: 3px solid #f2bd54; outline-offset: 2px; }
.lifestyle-heading {
  min-height: 70px;
  padding: 2px 50px 12px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--lifestyle-frame) 36%, transparent);
}
.lifestyle-heading h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font: 900 clamp(29px, 3.8vw, 43px)/.95 var(--story);
}
.lifestyle-heading h2::before {
  content: "";
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  background: url("assets/ui/calendar-seal.svg") center / contain no-repeat;
}
.lifestyle-finances {
  min-width: 250px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.lifestyle-finances div { padding: 3px 14px; }
.lifestyle-finances div + div { border-left: 1px solid color-mix(in srgb, var(--lifestyle-muted) 34%, transparent); }
.lifestyle-finances dt,
.lifestyle-node dt { color: var(--lifestyle-muted); letter-spacing: .11em; font: 900 7px/1 var(--story); }
.lifestyle-finances dd { margin: 5px 0 0; color: var(--lifestyle-accent); font: 900 15px/1 var(--numbers); }
.lifestyle-trees {
  min-height: 0;
  margin: 10px -4px 0;
  padding: 0 4px 18px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(10px, 1.4vw, 17px);
  scrollbar-color: color-mix(in srgb, var(--lifestyle-frame) 55%, transparent) transparent;
}
.lifestyle-branch {
  --branch-color: #658247;
  --branch-tint: #e4eaba;
  min-width: 0;
  padding: 0 2px;
}
.lifestyle-branch-city { --branch-color: #6b6884; --branch-tint: #e1d8df; }
.lifestyle-branch-travel { --branch-color: #b06d45; --branch-tint: #f1d4ae; }
.lifestyle-branch-yachting { --branch-color: #437b85; --branch-tint: #cfe2d7; }
.lifestyle-branch h3 {
  min-height: 41px;
  margin: 0 0 12px;
  padding: 10px 8px 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-bottom: 3px solid var(--branch-color);
  border-radius: 6px 6px 2px 2px;
  color: var(--branch-color);
  background: linear-gradient(180deg, color-mix(in srgb, var(--branch-tint) 84%, var(--lifestyle-paper)), var(--branch-tint));
  letter-spacing: .075em;
  font: 900 11px/1 var(--story);
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgb(75 46 25 / 12%);
}
.lifestyle-branch h3::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(0deg, currentColor 0 34%, transparent 35%);
  opacity: .82;
}
.lifestyle-branch-city h3::before { border-radius: 2px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }
.lifestyle-branch-travel h3::before { border: 0; border-radius: 0; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.lifestyle-branch-yachting h3::before { border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 34%, transparent 0 22%, currentColor 24% 36%, transparent 38%), linear-gradient(0deg, currentColor 0 25%, transparent 26%); }
.lifestyle-node-list { display: grid; gap: 18px; }
.lifestyle-node {
  min-height: 119px;
  padding: 11px 11px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--branch-color) 35%, #a58350);
  border-radius: 8px;
  color: var(--lifestyle-ink);
  background: linear-gradient(150deg, rgb(255 250 222 / 82%), color-mix(in srgb, var(--branch-tint) 33%, var(--lifestyle-paper)));
  box-shadow: 0 3px 7px rgb(83 50 27 / 13%);
}
.lifestyle-node:not(:last-child)::after {
  content: "↓";
  height: 18px;
  position: absolute;
  left: 50%;
  bottom: -19px;
  z-index: 1;
  color: color-mix(in srgb, var(--branch-color) 75%, var(--lifestyle-muted));
  font: 900 14px/18px Georgia, serif;
  transform: translateX(-50%);
}
.lifestyle-node.owned {
  border-color: color-mix(in srgb, var(--lifestyle-accent) 65%, #8a6b3c);
  background: linear-gradient(140deg, #edf1ca, var(--lifestyle-accent-soft));
}
.lifestyle-node.ready {
  border-color: #9f7a2e;
  box-shadow: 0 0 0 2px rgb(224 180 74 / 30%), 0 4px 9px rgb(83 50 27 / 18%);
}
.lifestyle-node.locked { color: color-mix(in srgb, var(--lifestyle-ink) 78%, #96856d); }
.lifestyle-node.unavailable-path { opacity: .55; }
.lifestyle-node-tier { color: var(--branch-color); letter-spacing: .13em; font: 900 7px/1 var(--story); }
.lifestyle-node h4 { margin: 6px 0 10px; font: 900 15px/1.02 var(--story); }
.lifestyle-node dl {
  margin: auto 0 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.lifestyle-node dl div { min-width: 0; }
.lifestyle-node dl div + div { padding-left: 9px; border-left: 1px solid color-mix(in srgb, var(--lifestyle-muted) 25%, transparent); }
.lifestyle-node dd { margin: 4px 0 0; font: 900 10px/1 var(--numbers); }
.lifestyle-node-passive {
  margin: 9px 0 0;
  padding: 7px 8px;
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--lifestyle-accent) 42%, transparent);
  border-radius: 5px;
  color: var(--lifestyle-accent);
  background: color-mix(in srgb, var(--lifestyle-accent-soft) 48%, transparent);
}
.lifestyle-node-passive strong { letter-spacing: .07em; font: 900 9px/1 var(--numbers); }
.lifestyle-node-passive span { color: var(--lifestyle-muted); font: 700 7px/1.25 var(--story); }
.lifestyle-node button {
  min-height: 31px;
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  color: #fff3c8;
  background: var(--lifestyle-accent) url("assets/ui/reference-slices/button-green-normal.png") center / 100% 100% no-repeat;
  letter-spacing: .055em;
  font: 900 8px/1 var(--story);
  cursor: pointer;
}
.lifestyle-node button:hover:not(:disabled) { background-image: url("assets/ui/reference-slices/button-green-hover.png"); transform: translateY(-1px); }
.lifestyle-node button:disabled {
  color: #725f45;
  background: #d7c598 url("assets/ui/reference-slices/button-cream-normal.png") center / 100% 100% no-repeat;
  filter: saturate(.55);
  cursor: default;
}
.lifestyle-node.owned button:disabled { color: #39572e; filter: saturate(.8); }
.lifestyle-node button:focus-visible { outline: 3px solid #f2bd54; outline-offset: 2px; }
.lifestyle-status {
  margin: 9px 0 0;
  color: var(--lifestyle-accent);
  font: 800 9px/1.35 var(--story);
  text-align: center;
}
.lifestyle-status:empty { display: none; }
.lifestyle-planner[data-lifestyle-theme="city"] .lifestyle-heading,
.lifestyle-planner[data-lifestyle-theme="city"] .lifestyle-branch h3,
.lifestyle-planner[data-lifestyle-theme="city"] .lifestyle-node { background: #151f2b; box-shadow: none; }
.lifestyle-planner[data-lifestyle-theme="city"] .lifestyle-node.owned { background: #192e29; }
.lifestyle-planner[data-lifestyle-theme="city"] .lifestyle-node button:disabled { color: #aab1ba; background: #27323e; }

@media (max-width: 900px) and (min-width: 701px) {
  .lifestyle-trees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .lifestyle-planner { padding: 6px; }
  .lifestyle-panel { height: calc(100dvh - 12px); padding: 13px 9px; border-width: 4px; border-radius: 10px; }
  .lifestyle-close { width: 36px; height: 36px; top: 9px; right: 8px; }
  .lifestyle-heading { min-height: 104px; padding: 0 38px 10px 2px; display: grid; align-content: center; gap: 9px; }
  .lifestyle-heading h2 { font-size: 29px; }
  .lifestyle-finances { width: 100%; min-width: 0; }
  .lifestyle-finances div { padding: 2px 9px; }
  .lifestyle-trees {
    margin-top: 8px;
    padding-right: 10vw;
    display: flex;
    gap: 11px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
  }
  .lifestyle-branch { flex: 0 0 min(84vw, 330px); scroll-snap-align: start; }
  .lifestyle-branch h3 { top: 0; }
  .lifestyle-node { min-height: 114px; }
}

/* Local-development controls are created only on localhost/file builds. */
.debug-dock {
  position: fixed;
  z-index: 100;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(290px, calc(100vw - 24px));
  color: #eef8f3;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  filter: drop-shadow(0 8px 18px rgb(12 20 18 / 34%));
}

.debug-dock details { width: 100%; display: grid; justify-items: end; }
.debug-dock summary {
  width: fit-content;
  min-width: 92px;
  min-height: 34px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #8ab8a5;
  border-radius: 5px;
  color: #d9f8e9;
  background: #182b27;
  box-shadow: inset 0 0 0 1px rgb(229 255 243 / 8%);
  cursor: pointer;
  list-style: none;
  letter-spacing: .08em;
  font-size: 8px;
}

.debug-dock summary::-webkit-details-marker { display: none; }
.debug-dock summary span {
  padding: 3px 4px;
  border-radius: 3px;
  color: #13221e;
  background: #7fe1b1;
  font-weight: 900;
  letter-spacing: .04em;
}
.debug-dock summary strong { font-size: 9px; }
.debug-dock summary i { font-size: 10px; transition: transform 140ms ease; }
.debug-dock details:not([open]) summary i { transform: rotate(180deg); }

.debug-panel {
  width: 290px;
  max-width: 100%;
  margin-bottom: 6px;
  padding: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid #8ab8a5;
  border-radius: 7px;
  background: rgb(18 34 31 / 96%);
  box-shadow: inset 0 0 0 1px rgb(229 255 243 / 8%);
}

.debug-panel header { display: grid; gap: 3px; }
.debug-panel header span { color: #7fe1b1; letter-spacing: .14em; font-size: 8px; font-weight: 900; }
.debug-panel header output { color: #b9d2c7; font-size: 9px; }

.debug-panel button,
.debug-panel input {
  min-height: 34px;
  border: 1px solid #608778;
  border-radius: 4px;
  color: #e9fff5;
  background: #243e37;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.debug-panel button { padding: 8px 10px; cursor: pointer; }
.debug-panel button:hover:not(:disabled) { border-color: #9ce0c2; background: #31564a; }
.debug-panel button:disabled { opacity: .44; cursor: not-allowed; }
.debug-panel .debug-skip { color: #10241c; background: #7fe1b1; border-color: #bdf9db; }
.debug-panel .debug-skip:hover:not(:disabled) { background: #9beac6; }
.debug-panel .debug-heiress { color: #f4e7ca; border-color: #a98752; background: #47253a; }
.debug-panel .debug-heiress:hover:not(:disabled) { border-color: #e0bf7d; background: #62324e; }
.debug-panel .debug-market-sense { color: #d8f4ff; border-color: #6297aa; background: #244653; }
.debug-panel .debug-market-sense:hover:not(:disabled) { border-color: #9dddf5; background: #305c6d; }
.debug-panel .debug-music { color: #fff0bb; border-color: #ad8a45; background: #493a20; }
.debug-panel .debug-music:hover:not(:disabled),
.debug-panel .debug-music.active { border-color: #f0ca72; background: #655028; }
.debug-panel .debug-unlock-all { color: #ede1ff; border-color: #8d76b5; background: #3b3150; }
.debug-panel .debug-unlock-all:hover:not(:disabled),
.debug-panel .debug-unlock-all.active { border-color: #c7acf5; background: #51416d; }
.debug-panel .debug-reset { min-height: 28px; padding: 6px 8px; color: #b9d2c7; background: transparent; }

.debug-amount { display: grid; gap: 4px; color: #a8c4b8; letter-spacing: .08em; font-size: 8px; }
.debug-input { position: relative; display: block; }
.debug-input b { position: absolute; z-index: 1; left: 10px; top: 50%; transform: translateY(-50%); color: #7fe1b1; font-size: 11px; }
.debug-input input { width: 100%; padding: 7px 10px 7px 24px; }
.debug-cash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.debug-cash-actions button:first-child { color: #ffb8ad; border-color: #9e625c; background: #472d2d; }
.debug-cash-actions button:last-child { color: #aef3c9; }
.debug-status { min-height: 22px; color: #8faea1; font-size: 8px; line-height: 1.35; }
.debug-status.error { color: #ffaaa0; }

@media (max-width: 570px) {
  .debug-dock {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(270px, calc(100vw - 16px));
  }
  .debug-panel { width: 270px; max-height: min(410px, calc(100vh - 64px)); overflow-y: auto; }
}

/* Compact trading dashboard redesign.
   Keep this final and scoped: the stylesheet contains several historical visual passes. */
body:not(.menu-open) {
  background:
    radial-gradient(circle at 50% 0, rgb(255 250 218 / 58%), transparent 42rem),
    linear-gradient(180deg, #b8d4d1 0, #d5d8b9 42%, #b49a6d 100%);
}

body:not(.menu-open)::before { display: none; }

#game-app {
  width: min(1160px, 100%);
  min-height: 0;
  padding: 10px 12px 14px;
}

#game-app .topbar {
  min-height: 76px;
  padding: 7px 12px;
  border-width: 4px;
  border-radius: 10px 10px 3px 3px;
  background:
    linear-gradient(90deg, rgb(255 244 204 / 18%) 0 31%, transparent 48% 72%, rgb(54 37 21 / 18%)),
    url("assets/illustrations/masthead.png") center 34% / cover no-repeat,
    #a9ccca;
  box-shadow: inset 0 0 0 2px rgb(225 177 101 / 72%), 0 5px 12px rgb(70 45 24 / 22%);
}

#game-app .brand-line {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

#game-app .brand-tagline {
  color: #795b38;
  letter-spacing: .11em;
  font: 900 8px/1 var(--story);
  text-transform: lowercase;
  white-space: nowrap;
}

#game-app .account-strip {
  min-height: 0;
  padding: 6px;
  gap: 6px;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  border-width: 4px;
}

#game-app .account-strip .metric {
  min-height: 82px;
  padding-top: 8px;
  padding-bottom: 8px;
}

#game-app .pnl-metric {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 6px;
}

#game-app .account-balance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#game-app .game-grid {
  display: grid;
  grid-template-columns: minmax(0, 22fr) minmax(0, 52fr) minmax(0, 26fr);
  grid-template-rows: auto;
  gap: 10px;
  margin-top: 10px;
  align-items: stretch;
}

#game-app .center-column { display: contents; }

#game-app .watch-panel {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
}

#game-app .chart-panel {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: start;
}

#game-app .chart-wrap {
  height: auto;
  min-height: 0;
  aspect-ratio: 1.45 / 1;
}

#game-app .chart-label { font-size: 14px; }
#game-app .position-reference-label { font-size: 13px; }

#game-app .trade-row {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}

#game-app .order-panel,
#game-app .position-panel { min-height: 254px; }

#game-app .panel {
  border-width: 4px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--wood-light), 0 4px 11px rgb(74 48 24 / 20%);
}

#game-app summary.panel-header {
  display: flex;
  list-style: none;
  cursor: default;
}

#game-app summary.panel-header::-webkit-details-marker { display: none; }

/* The compact phone layout uses native disclosure rows. Above phone size the
   ticket remains fully visible whether or not the details element is open. */
@media (min-width: 701px) {
  #game-app details.order-panel:not([open]) > .product-picker { display: grid; }
  #game-app details.order-panel:not([open]) > .product-detail { display: block; }
  #game-app details.order-panel:not([open]) > .direct-order-actions { display: grid; }
  #game-app details.order-panel:not([open]) > .quantity-label { display: flex; }
  #game-app details.order-panel:not([open]) > .quantity-control { display: grid; }
  #game-app details.order-panel:not([open]) > .preset-row { display: grid; }
  #game-app details.order-panel:not([open]) > .order-estimate { display: flex; }
  #game-app details.position-panel:not([open]) > .positions-list { display: block; }
  #game-app details.position-panel:not([open]) > .realized-row { display: flex; }
}

/* Permanent upgrades stay off the live trading surface. */
#game-app .center-column > .upgrade-panel,
#game-app > .footer-disclaimer { display: none !important; }

#game-app .center-column > #owned-upgrades-panel:has([data-upgrade-action="event_radar"]),
#game-app .center-column > #owned-upgrades-panel:has([data-upgrade-action="private_whisper"]) {
  display: block !important;
}

#game-app .right-column {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  display: grid !important;
}

#game-app .feed-panel {
  min-height: 170px;
  max-height: 210px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#game-app .market-feed {
  min-height: 0;
  height: auto;
  max-height: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  overflow-x: auto;
  overflow-y: hidden;
}

/* These target-reference details belong to the full desktop cabinet. */
#game-app .watch-add-symbol { display: none; }

#game-app .current-price-pill { pointer-events: none; }
#game-app .current-price-pill rect {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 1px rgb(70 45 25 / 24%));
}
#game-app .current-price-pill text {
  fill: #fff7d5;
  font: 900 17px/1 var(--numbers);
  paint-order: stroke;
  stroke: rgb(48 49 29 / 28%);
  stroke-width: 1px;
}
#game-app .current-price-pill-up rect { fill: #4f8442; stroke: #315d34; }
#game-app .current-price-pill-down rect { fill: #b35443; stroke: #78382f; }

#game-app .empty-positions-copy {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
}
#game-app .empty-positions-copy strong {
  color: #715a3c;
  font: 900 12px/1 var(--story);
}
#game-app .empty-positions-copy span,
#game-app .empty-positions-copy small { display: none; }

@media (min-width: 981px) {
  #game-app .watch-panel { align-self: stretch; }
  #game-app .watch-panel .watch-list {
    grid-template-rows: repeat(4, minmax(64px, 1fr));
  }

  #game-app .trade-row {
    grid-template-rows: minmax(254px, 3fr) minmax(180px, 2fr);
    align-content: stretch;
  }
  #game-app .order-panel,
  #game-app .position-panel {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #game-app .order-panel .direct-order-actions { margin-top: auto; }
  #game-app .position-panel .positions-list { flex: 1; }

  #game-app .account-strip {
    border-width: 3px;
    border-color: #704d2d;
    background: linear-gradient(90deg, #8b613b, #a67847 46%, #805938);
    box-shadow: inset 0 0 0 1px rgb(237 196 125 / 42%), 0 4px 10px rgb(70 45 24 / 17%);
  }

  #game-app .panel {
    border-width: 3px;
    border-color: #704d2d;
    background:
      linear-gradient(100deg, transparent 0 48%, rgb(146 108 57 / 4%) 49% 51%, transparent 52%),
      #f4e4b8;
    box-shadow: inset 0 0 0 1px rgb(210 160 91 / 72%), 0 4px 10px rgb(74 48 24 / 17%);
  }

  #game-app :is(.panel-header, .chart-header) {
    border-bottom-color: #b58b52;
    background: linear-gradient(#faedc9, #ead39d);
  }

  #game-app .pnl-metric {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px;
    border-color: #b8a668;
    background:
      linear-gradient(105deg, rgb(255 255 255 / 30%), transparent 48%),
      linear-gradient(135deg, #f0edc7, #dce3aa);
  }

  #game-app .capacity-metric.leverage-metric {
    border-color: #9eaa7b;
    background:
      linear-gradient(105deg, rgb(255 255 255 / 30%), transparent 46%),
      linear-gradient(135deg, #eee8c4, #ceddca);
  }

  #game-app .account-balance-stat {
    border-color: rgb(112 89 52 / 24%);
    background: rgb(255 246 208 / 55%);
  }

  #game-app .chart-panel {
    grid-template-rows: auto minmax(36px, 1fr) auto;
    align-self: stretch;
  }

  #game-app .chart-wrap {
    width: 100%;
    align-self: start;
  }

  #game-app .chart-footer {
    border-top: 0;
    background: #ead7a7;
  }

  #game-app .watch-add-symbol {
    width: 100%;
    min-height: 39px;
    padding: 0 13px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-top: 1px solid #b68d55;
    color: #6f5b3c;
    background: linear-gradient(#f4e3b9, #e6ce99);
    box-shadow: inset 0 1px rgb(255 249 219 / 68%);
    letter-spacing: .07em;
    cursor: default;
    opacity: 1;
  }

  #game-app .watch-add-symbol span { color: #547149; font: 900 17px/1 var(--story); }
  #game-app .watch-add-symbol strong { font: 900 8px/1 var(--story); }

  #game-app .empty-positions { height: 154px; gap: 8px; }
  #game-app .empty-positions-copy { gap: 5px; }
  #game-app .empty-positions-copy strong { font-size: 13px; }
  #game-app .empty-positions-copy span,
  #game-app .empty-positions-copy small { display: block; }
  #game-app .empty-positions-copy span { color: #8b7555; font: 700 9px/1.2 var(--story); }
  #game-app .empty-positions-copy small {
    color: #527348;
    font: 900 8px/1.2 var(--story);
  }

  #game-app .feed-panel {
    min-height: 132px;
    max-height: 150px;
  }
}

/* Tablet landscape keeps the same three functional columns at a denser scale. */
@media (min-width: 701px) and (max-width: 1180px) {
  #game-app .pnl-value { --pnl-impact-base-font-size: 22px; }
  #game-app { padding: 5px 7px 9px; }
  #game-app .topbar { min-height: 64px; padding-block: 5px; }
  #game-app .account-strip { padding: 5px; gap: 5px; }
  #game-app .account-strip .metric { min-height: 74px; padding-top: 6px; padding-bottom: 6px; }
  #game-app .pnl-metric { gap: 4px; }
  #game-app .pnl-summary {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  #game-app .pnl-summary > strong { font-size: 22px; }
  #game-app .account-balance-grid { gap: 4px; }
  #game-app .account-balance-stat {
    min-height: 36px;
    padding: 4px 6px;
    gap: 3px;
  }
  #game-app .account-balance-stat span { font-size: 8px; }
  #game-app .account-balance-stat strong,
  #game-app .primary-metric .account-balance-stat strong { font-size: 12px; }
  #game-app .game-grid {
    grid-template-columns: minmax(0, 23fr) minmax(0, 51fr) minmax(0, 26fr);
    gap: 7px;
    margin-top: 7px;
  }
  #game-app .panel { border-width: 3px; }
  #game-app .panel-header { min-height: 42px; padding: 6px 9px; }
  #game-app .panel-header h2,
  #game-app .watch-panel .panel-header h2 { font-size: 15px; }
  #game-app .watch-benchmark { min-height: 60px; padding: 6px; gap: 6px; }
  #game-app .watch-list { grid-template-rows: repeat(4, minmax(58px, 1fr)); }
  #game-app .watch-card {
    min-height: 58px;
    padding: 5px 6px;
    grid-template-columns: minmax(0, 1fr);
  }
  #game-app .watch-main strong,
  #game-app .watch-price { font-size: 11px; }
  #game-app .watch-sparkline { width: 42px; }
  #game-app .chart-header { min-height: 52px; padding: 6px 8px; }
  #game-app .selected-emblem { width: 38px; height: 38px; }
  #game-app .asset-heading h2 { font-size: 14px; }
  #game-app .quote-block strong { font-size: 23px; }
  #game-app .chart-wrap { min-height: 0; aspect-ratio: 1.45 / 1; }
  #game-app .order-panel { min-height: 270px; }
  #game-app .position-panel { min-height: 154px; }
  #game-app .product-picker {
    margin: 0 6px 3px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
  }
  #game-app .product-button { height: 31px; padding: 2px 1px; gap: 1px; }
  #game-app .product-button strong { font-size: 8px; }
  #game-app .product-button small { font-size: 8px; }
  #game-app .product-detail,
  #game-app .direct-order-actions,
  #game-app .quantity-label,
  #game-app .quantity-control,
  #game-app .preset-row,
  #game-app .order-estimate { margin-left: 6px; margin-right: 6px; }
  #game-app .product-detail { min-height: 8px; margin-bottom: 3px; font-size: 8px; }
  #game-app .direct-order-actions { margin-bottom: 4px; gap: 4px; }
  #game-app .quantity-label { margin-bottom: 3px; font-size: 8px; }
  #game-app .direct-order-button,
  #game-app .quantity-control button,
  #game-app .quantity-control input { height: 32px; }
  #game-app .preset-row { margin-top: 3px; margin-bottom: 3px; }
  #game-app .preset-row button { height: 23px; font-size: 8px; }
  #game-app .order-estimate { margin-bottom: 3px; font-size: 8px; }
  #game-app .positions-list { min-height: 72px; max-height: 78px; padding-inline: 7px; }
  #game-app .positions-list:has(.empty-positions) { overflow-y: hidden; }
  #game-app .empty-positions { height: 72px; gap: 3px; }
  #game-app .empty-positions svg { width: 42px; height: 42px; }
  #game-app .empty-positions p { font-size: 10px; }
  #game-app .position-row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding-block: 6px; }
  #game-app .position-stat { display: flex; justify-content: space-between; text-align: left; }
  #game-app .realized-row { min-height: 31px; }
}

/* Mid-size screens retain the same primary trading row and feed placement. */
@media (min-width: 701px) and (max-width: 1180px) {
  #game-app .game-grid {
    grid-template-columns: minmax(0, 23fr) minmax(0, 51fr) minmax(0, 26fr);
  }

  #game-app .right-column { grid-column: 1 / -1; grid-row: 2; display: grid !important; }
}

/* Phone portrait keeps ticker selection and the selected live chart together,
   then presents closed Order and Positions disclosure rows below. */
@media (max-width: 700px) {
  #game-app .pnl-value {
    --pnl-impact-base-font-size: 21px;
    --pnl-impact-max-font-size: 40px;
  }
  html,
  body { min-width: 0; overflow-x: clip; }
  body:not(.menu-open) {
    background: linear-gradient(180deg, #573820 0, #322218 100%);
  }

  #game-app {
    width: 100%;
    padding: 5px 5px 10px;
  }

  #game-app .topbar {
    min-height: 100px;
    padding: 5px 7px 7px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 42px 42px;
    gap: 4px;
    background-position: center 35%;
  }

  #game-app .topbar::before {
    content: "☰";
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 16px;
    color: #fff0c5;
    text-shadow: 0 2px #4e321d;
    font: 900 22px/1 var(--story);
  }

  #game-app .brand-lockup {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  #game-app .brand-lockup::after {
    content: "";
    width: 42px;
    height: 42px;
    position: absolute;
    right: 9px;
    top: 7px;
    border: 2px solid #6e4728;
    border-radius: 50%;
    background: #e8cb8a url("assets/ui/reference-slices/header-family-medallion.png") center / cover no-repeat;
    box-shadow: inset 0 0 0 2px rgb(255 244 199 / 55%), 0 2px 0 rgb(70 43 22 / 35%);
  }

  #game-app .brand-mark { display: none; }
  #game-app .brand-line { padding: 7px 12px; transform: none; }
  #game-app .brand-line h1 { max-width: none; font-size: 19px; white-space: nowrap; }
  #game-app .brand-tagline { display: none; }
  #game-app .session-controls {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
  }
  #game-app .bill-goal,
  #game-app .market-clock { width: 100%; min-height: 40px; }

  #game-app .account-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  #game-app .account-strip .metric { min-height: 74px; }
  #game-app .pnl-metric {
    grid-template-columns: minmax(112px, .82fr) minmax(0, 1.18fr);
    grid-template-rows: auto;
    gap: 7px;
  }
  #game-app .account-balance-grid { gap: 3px; }
  #game-app .account-balance-stat {
    min-height: 48px;
    padding: 4px 3px;
    gap: 4px;
  }
  #game-app .account-balance-stat span {
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
  }
  #game-app .account-balance-stat strong,
  #game-app .primary-metric .account-balance-stat strong { font-size: 9px; }
  #game-app .capacity-metric.leverage-metric { min-height: 84px; }

  #game-app .game-grid {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 4px;
    margin-top: 4px;
  }
  #game-app .center-column { display: contents; }
  #game-app .chart-panel {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    grid-template-rows: 40px minmax(0, 1fr) 22px;
  }
  #game-app .watch-panel {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
  }
  #game-app .trade-row {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #game-app .right-column {
    grid-column: 1 / -1;
    grid-row: 3;
    display: block !important;
  }
  #game-app .watch-benchmark { display: none; }
  #game-app .watch-panel > .panel-header,
  #game-app .chart-header {
    min-height: 40px;
    height: 40px;
    padding: 5px 6px;
  }
  #game-app .watch-panel .panel-header h2 { font-size: 12px; }
  #game-app .watch-session-clock {
    display: grid;
    justify-items: end;
    gap: 1px;
  }
  #game-app .watch-session-clock .status-dot,
  #game-app .watch-session-clock span:nth-child(2) { display: none; }
  #game-app .watch-session-clock strong { font-size: 9px; }
  #game-app .watch-list {
    height: 160px;
    max-height: 160px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-rows: 40px;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: contain;
    touch-action: manipulation;
  }
  #game-app .watch-card,
  #game-app .watch-card.active {
    min-height: 40px;
    height: 40px;
    padding: 3px 5px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    transform: none;
  }
  #game-app .watch-card.active {
    border-left: 4px solid #6c482a;
    background: linear-gradient(90deg, #f8dfa0, #f4e7ba);
    box-shadow: inset 0 0 0 1px rgb(255 249 216 / 55%);
  }
  #game-app .watch-card.active::before { display: none; }
  #game-app .watch-quote { gap: 1px; }
  #game-app .watch-main,
  #game-app .watch-sub { gap: 2px; }
  #game-app .watch-main strong,
  #game-app .watch-price { font-size: 9px; }
  #game-app .watch-main { display: flex; }
  #game-app .watch-identity small,
  #game-app .watch-position,
  #game-app .watch-day-pnl { display: none; }
  #game-app .watch-sub {
    min-width: 0;
    justify-content: space-between;
  }
  #game-app .watch-sparkline {
    width: 40px;
    height: 10px;
    display: block;
    flex: 0 1 40px;
    overflow: hidden;
  }
  #game-app .watch-sparkline path { stroke-width: 1.5; }
  #game-app .watch-performance { width: auto; flex: 0 0 auto; }
  #game-app .watch-change { padding: 1px 3px; font-size: 7px; }
  #game-app .watch-capital-weight {
    width: 100%;
    height: 3px;
    display: block;
    overflow: hidden;
    border-radius: 99px;
    background: rgb(100 79 48 / 17%);
    box-shadow: inset 0 1px 1px rgb(70 48 27 / 18%);
  }
  #game-app .watch-capital-weight > span {
    width: var(--position-weight);
    min-width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--asset-color);
    opacity: .82;
  }
  #game-app .watch-capital-weight.flat > span { width: 0; }
  #game-app .watch-card.active .watch-capital-weight {
    background: rgb(82 59 33 / 26%);
  }

  #game-app .chart-header { gap: 4px; }
  #game-app .asset-heading { min-width: 0; gap: 4px; }
  #game-app .selected-emblem { display: none; }
  #game-app .asset-heading h2 {
    max-width: 104px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #game-app .ticker-badge { padding: 2px 4px; font-size: 8px; }
  #game-app .quote-block strong { font-size: 16px; }
  #game-app .quote-block span { font-size: 8px; }
  #game-app .chart-wrap {
    width: 100%;
    height: 160px;
    min-height: 160px;
    aspect-ratio: auto;
  }
  #game-app .chart-footer {
    min-height: 22px;
    height: 22px;
    padding-inline: 6px;
  }
  #game-app .market-session-labels { font-size: 6px; }
  #game-app .chart-label { font-size: 18px; }
  #game-app .position-reference-label { font-size: 16px; }

  #game-app .order-panel,
  #game-app .position-panel,
  #game-app .feed-panel { min-height: 0; height: auto; }
  #game-app summary.panel-header {
    min-height: 44px;
    margin: 0;
    padding: 7px 10px;
    cursor: pointer;
  }
  #game-app summary.panel-header::after {
    content: "+";
    margin-left: 8px;
    color: #73502e;
    font: 900 20px/1 var(--story);
  }
  #game-app details[open] > summary.panel-header::after { content: "−"; }
  #game-app .order-panel[open],
  #game-app .position-panel[open] { min-height: 235px; }
  #game-app .feed-panel[open] { min-height: 250px; }
  #game-app .market-feed {
    max-height: 260px;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Short desktop composition: keep the complete trading loop visible at
   1280x800 without borrowing the denser tablet or phone layouts. */
@media (min-width: 1181px) and (max-width: 1366px) and (max-height: 820px) {
  #game-app .pnl-value { --pnl-impact-base-font-size: 24px; }
  #game-app { padding: 6px 10px 8px; }

  #game-app .topbar {
    min-height: 64px;
    height: 64px;
    padding-block: 5px;
  }

  #game-app .account-strip { padding: 4px; gap: 4px; }
  #game-app .account-strip .metric { min-height: 70px; padding-block: 6px; }
  #game-app .pnl-metric { gap: 4px; }
  #game-app .pnl-summary {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  #game-app .pnl-summary > strong { font-size: 24px; }
  #game-app .account-balance-grid { gap: 4px; }
  #game-app .account-balance-stat {
    min-height: 32px;
    padding: 3px 6px;
    gap: 2px;
  }
  #game-app .account-balance-stat span { font-size: 8px; }
  #game-app .account-balance-stat strong,
  #game-app .primary-metric .account-balance-stat strong { font-size: 11px; }
  #game-app .game-grid { gap: 8px; margin-top: 8px; }
  #game-app .panel { border-width: 3px; }

  #game-app .panel-header,
  #game-app .panel-header.compact,
  #game-app .order-panel .panel-header,
  #game-app .position-panel .panel-header {
    min-height: 42px;
    margin-bottom: 3px;
    padding: 6px 10px;
  }

  #game-app .panel-header h2,
  #game-app .watch-panel .panel-header h2 { font-size: 16px; }

  #game-app .watch-benchmark {
    min-height: 60px;
    padding: 6px 8px;
    gap: 7px;
  }

  #game-app .watch-benchmark #market-index-sparkline { height: 28px; }
  #game-app .watch-panel .watch-list { grid-template-rows: repeat(4, minmax(64px, 1fr)); }
  #game-app .watch-card {
    min-height: 64px;
    padding: 5px 7px;
    grid-template-columns: minmax(0, 1fr);
  }
  #game-app .watch-main strong,
  #game-app .watch-price { font-size: 12px; }
  #game-app .watch-sparkline { width: 52px; height: 18px; }

  #game-app .chart-header { min-height: 56px; padding: 7px 10px; }
  #game-app .selected-emblem { width: 40px; height: 40px; }
  /* Keep the plotted data at its authored geometry on short desktops. The
     surrounding row may scroll vertically; the chart itself must not squash. */
  #game-app .chart-wrap { height: auto; aspect-ratio: 1.45 / 1; }
  #game-app .chart-footer { min-height: 34px; height: 34px; }

  #game-app .trade-row {
    gap: 8px;
    grid-template-rows: minmax(240px, 3fr) minmax(144px, 2fr);
  }
  #game-app .order-panel { min-height: 240px; height: auto; padding-bottom: 6px; }
  #game-app .position-panel { min-height: 144px; height: auto; }
  #game-app .product-picker { margin: 0 8px 2px; gap: 3px; }
  #game-app .product-button { height: 28px; padding-block: 2px; }
  #game-app .product-detail { min-height: 8px; margin: 0 8px 2px; font-size: 8px; }
  #game-app .direct-order-actions { margin: 0 8px 3px; gap: 5px; }
  #game-app .quantity-label { margin: 0 8px 2px; }
  #game-app .quantity-control { margin: 0 8px; grid-template-columns: 32px 1fr 32px; }
  #game-app .quantity-control button,
  #game-app .quantity-control input { height: 30px; }
  #game-app .preset-row { margin: 2px 8px 3px; }
  #game-app .preset-row button { height: 20px; }
  #game-app .order-estimate { margin: 0 8px 3px; }
  #game-app .positions-list { min-height: 0; max-height: none; padding-inline: 8px; }
  #game-app .positions-list:has(.empty-positions) { overflow-y: hidden; }
  #game-app .empty-positions { height: 100%; gap: 3px; }
  #game-app .empty-positions svg { width: 34px; height: 34px; }
  #game-app .empty-positions-copy { gap: 2px; }
  #game-app .empty-positions-copy strong { font-size: 9px; }
  #game-app .empty-positions-copy span,
  #game-app .empty-positions-copy small { display: block; font-size: 8px; }
  #game-app .realized-row { min-height: 30px; padding-inline: 8px; }

  #game-app .right-column { height: 120px; grid-template-rows: 120px; }
  #game-app .feed-panel { min-height: 120px; max-height: 120px; }
  #game-app .feed-item {
    min-height: 70px;
    padding: 8px 9px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
  }
  #game-app .gossip-avatar { width: 34px; height: 34px; }
  #game-app .feed-source { font-size: 10px; }
  #game-app .feed-time { font-size: 9px; }
  #game-app .feed-item p { font-size: 11px; line-height: 1.3; }
}

/* The target separates Week and Rent in the masthead and keeps the live
   session beside the Watchlist, where it remains useful while trading. */
#game-app .session-controls {
  width: min(270px, 34%);
  min-width: 230px;
  display: block;
}

#game-app .bill-goal {
  position: relative;
  width: 100%;
  min-height: 52px;
  padding: 0 0 5px;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#game-app .header-week-card,
#game-app .header-rent-card {
  min-width: 0;
  padding: 6px 9px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 2px solid #76502e;
  border-radius: 5px;
  background: linear-gradient(#fff2c8, #ead39c);
  box-shadow: inset 0 0 0 1px rgb(255 251 222 / 72%), 0 2px 0 rgb(73 45 23 / 28%);
  text-align: center;
}

#game-app :is(.header-week-card, .header-rent-card) span {
  color: #796144;
  letter-spacing: .1em;
  font: 900 7px/1 var(--story);
}

#game-app :is(.header-week-card, .header-rent-card) strong {
  overflow: hidden;
  color: #4f3a27;
  font: 900 15px/1 var(--numbers);
  white-space: nowrap;
  text-overflow: ellipsis;
}

#game-app .header-week-card strong { font-size: 17px; }
#game-app .header-rent-card small {
  overflow: hidden;
  color: #9a402d;
  font: 900 6px/1 var(--numbers);
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#game-app .header-rent-card small.goal-met { color: #39713c; }
#game-app .bill-goal .goal-track {
  position: absolute;
  right: 8px;
  bottom: 1px;
  left: 8px;
  width: auto;
  height: 3px;
}

#game-app .watch-session-clock {
  min-height: 0;
  padding: 0;
  gap: 5px;
  border: 0;
  color: #5f5336;
  background: transparent;
  box-shadow: none;
  font-size: 8px;
}

#game-app .watch-session-clock strong {
  min-width: 0;
  color: #5a452f;
  font-size: 11px;
}

@media (max-width: 700px) {
  body:not(.menu-open) {
    background: linear-gradient(180deg, #6a4a2d 0, #4b3423 100%);
  }
  #game-app .session-controls { width: 100%; min-width: 0; }
  #game-app .bill-goal { min-height: 40px; padding-bottom: 3px; }
  #game-app .header-week-card,
  #game-app .header-rent-card { padding: 4px 8px; }
  #game-app .watch-session-clock span:nth-child(2) { display: inline; }
  #game-app .account-strip { border-width: 3px; }
  #game-app .pnl-metric {
    border-color: #a99b66;
    background: linear-gradient(135deg, #f2edcc, #dfe3b9);
  }
  #game-app .capacity-metric.leverage-metric {
    border-color: #9aa17d;
    background: linear-gradient(135deg, #efe8c5, #d2ddd1);
  }
  #game-app .panel {
    border-width: 3px;
    box-shadow: inset 0 0 0 1px var(--wood-light), 0 3px 8px rgb(53 33 19 / 18%);
  }
}

/* Final calendar-header material layer; kept last so general calendar breakpoints cannot flatten it. */
.calendar-topbar {
  min-height: 116px;
  padding: 18px 18px 17px;
  overflow: visible;
  isolation: isolate;
  border: 14px solid transparent;
  border-radius: 9px 9px 4px 4px;
  border-image: url("assets/ui/reference-slices/header-chassis-9slice.png") 38 42 / 14px / 2px stretch;
  background: #8c5a31 url("assets/ui/reference-slices/header-wood-field.png") center / 360px 100% repeat-x;
  box-shadow: inset 0 0 0 1px rgb(255 226 158 / 22%), 0 7px 0 #3f2818, 0 12px 24px rgb(45 27 14 / 28%);
}

.calendar-topbar::before,
.calendar-topbar::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10px;
  right: 10px;
  height: 11px;
  pointer-events: none;
  background: url("assets/ui/reference-slices/header-rail-strip.png") center / auto 100% repeat-x;
  opacity: .86;
}

.calendar-topbar::before { top: 7px; }
.calendar-topbar::after { bottom: 6px; transform: rotate(180deg); }

.calendar-identity { width: min(45.5%, 520px); gap: 8px; }
.calendar-seal { width: 88px; height: 88px; margin-left: -10px; z-index: 5 !important; }

.calendar-brand {
  width: fit-content;
  max-width: calc(100% - 82px);
  height: 78px;
  padding: 10px 23px 9px;
  overflow: hidden;
  border: 2px solid #956333;
  border-radius: 10px 5px 9px 4px;
  background: #efdaa5 url("assets/ui/reference-slices/parchment-tile.png") center / 390px auto repeat;
  box-shadow: inset 0 0 0 3px rgb(255 240 191 / 58%), inset 0 -5px 9px rgb(137 85 38 / 10%), 0 3px 0 rgb(66 39 20 / 48%);
  transform: rotate(-.12deg);
}

.calendar-brand::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(139 91 45 / 36%);
  border-radius: 7px 3px 6px 3px;
  pointer-events: none;
}

.calendar-brand h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(27px, 3.15vw, 40px);
  letter-spacing: -.025em;
  text-shadow: 0 1px rgb(255 238 190 / 66%);
  white-space: nowrap;
}

.calendar-header-scene {
  width: 35%;
  height: 82px;
  left: 45%;
  top: 17px;
  border: 3px solid #76502c;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgb(255 232 174 / 30%), 0 2px 0 rgb(54 32 17 / 48%);
}

.calendar-header-family {
  width: 270px;
  height: 166px;
  left: 50%;
  top: -15px;
  z-index: 7 !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 3px rgb(51 30 15 / 30%));
}

.calendar-bill {
  width: min(270px, 25%);
  min-width: 225px;
  height: 82px;
  padding: 12px 18px 11px;
  filter: drop-shadow(0 3px 2px rgb(48 28 14 / 24%));
}

.calendar-bill span { font-size: clamp(7px, .72vw, 9px); }
.calendar-bill strong { font-size: clamp(15px, 1.65vw, 21px); }

@media (max-width: 760px) {
  .calendar-topbar {
    min-height: 130px;
    padding: 12px 10px 11px;
    grid-template-columns: minmax(0, 1fr) 126px;
    grid-template-rows: 54px 58px;
    border-width: 8px;
    border-image-width: 8px;
    box-shadow: inset 0 0 0 1px rgb(255 226 158 / 18%), 0 5px 0 #3f2818, 0 9px 18px rgb(45 27 14 / 24%);
  }

  .calendar-topbar::before,
  .calendar-topbar::after { left: 5px; right: 5px; height: 7px; }
  .calendar-topbar::before { top: 3px; }
  .calendar-topbar::after { bottom: 3px; }
  .calendar-identity { width: 100%; gap: 4px; }
  .calendar-seal { width: 49px; height: 49px; margin-left: -3px; }
  .calendar-brand { width: fit-content; max-width: calc(100% - 50px); height: 54px; padding: 8px 15px; border-width: 1px; }
  .calendar-brand h1 { font-size: clamp(16px, 4.9vw, 19px); white-space: nowrap; }
  .calendar-header-scene { width: 100%; height: 58px; left: auto; top: auto; border-width: 2px; }
  .calendar-header-family { width: 145px; height: 92px; left: 31%; top: 47px; transform: translateX(-50%); }
  .calendar-bill { width: 126px; min-width: 0; height: 58px; padding: 8px; }
  .calendar-bill span { font-size: 5.5px; }
  .calendar-bill strong { font-size: clamp(8px, 2.7vw, 11px); }
}

/* Authoritative trading reflow: keep after every historical layout pass. */
#game-app .chart-footer { padding-inline: 14px; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1181px) {
  #game-app .feed-panel { overflow: hidden; }
  #game-app .feed-panel > .market-feed { height: 220px; max-height: 220px; }
}

@media (min-width: 701px) and (max-width: 1180px) {
  #game-app .center-column,
  #game-app .right-column { display: contents !important; }
  #game-app .chart-panel { grid-column: 2; grid-row: 1; }
  #game-app .trade-row { grid-column: 3; grid-row: 1; }
  #game-app .feed-panel { grid-column: 1 / -1; grid-row: 2; }
}

@media (min-width: 1181px) {
  #game-app .topbar { min-height: 76px; height: auto; }
  #game-app .session-controls {
    width: min(500px, 49%);
    min-width: 470px;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 190px;
    align-items: center;
    gap: 9px;
  }
  #game-app .session-action-bar { display: grid; grid-template-columns: minmax(0, 1fr) 74px; }
  #game-app .game-grid {
    grid-template-columns: minmax(0, 22fr) minmax(0, 52fr) minmax(0, 26fr);
    align-items: start;
  }
  #game-app .watch-panel { grid-column: 1; grid-row: 1; align-self: start; }
  #game-app .watch-panel .watch-list {
    flex: 0 0 auto;
    grid-template-rows: repeat(4, auto);
  }
  #game-app .watch-card,
  #game-app .watch-card.active {
    transform: none;
  }
  #game-app .watch-card.active {
    box-shadow: inset 0 0 0 2px rgb(255 249 216 / 65%);
  }
  #game-app .watch-card.active::before {
    top: 0;
    bottom: 0;
  }
  #game-app .center-column {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-content: start;
  }
  #game-app .center-column > :is(.chart-panel, .feed-panel) { grid-column: 1; grid-row: auto; }
  #game-app .right-column {
    min-width: 0;
    height: auto;
    grid-column: 3;
    grid-row: 1;
    display: block !important;
    align-self: start;
  }
  #game-app .right-column .trade-row {
    min-width: 0;
    height: auto;
    grid-column: auto;
    grid-row: auto;
  }
  #game-app .feed-panel {
    min-height: 250px;
    max-height: 280px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }
  #game-app .market-feed {
    min-height: 0;
    height: auto;
    max-height: none;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (max-width: 700px) {
  #game-app .feed-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    order: initial;
  }
  #game-app .center-column > #owned-upgrades-panel:has([data-upgrade-action="event_radar"]),
  #game-app .center-column > #owned-upgrades-panel:has([data-upgrade-action="private_whisper"]) {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  #game-app .right-column { display: contents !important; }
}

body[data-ui-theme="city"] #game-app .chart-candle { filter: none; }

/* The Han route owns its polished family-office mark; Farmer keeps the
   original crafted sprout SVG. Keep this after the historical header passes. */
.brand-mark-han {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
  pointer-events: none;
}

body[data-ui-theme="city"] #game-app .brand-mark {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-ui-theme="city"] #game-app .brand-mark-farmer { display: none; }
body[data-ui-theme="city"] #game-app .brand-mark-han {
  display: block;
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 48%));
}

@media (max-width: 700px) {
  body[data-ui-theme="city"] #game-app .topbar::before { display: none; }
  body[data-ui-theme="city"] #game-app .brand-mark {
    position: absolute;
    z-index: 3;
    left: 7px;
    top: 6px;
    width: 42px;
    height: 42px;
    display: grid;
  }
}

/* Direct order actions replace the former stateful direction toggle. */
#game-app .direct-order-actions {
  margin: 0 8px;
  display: grid;
  gap: 6px;
}

#game-app .direct-order-group {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#game-app .direct-order-group > span {
  color: #755d3f;
  letter-spacing: .1em;
  font: 900 7px/1 var(--story);
}

#game-app .direct-order-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#game-app .direct-order-button {
  min-width: 0;
  min-height: 42px;
  padding: 6px 4px;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 2px solid #557347;
  border-radius: 5px;
  color: #fff8db;
  background: linear-gradient(#719f55, #4b7c3e);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%), 0 2px 0 #31512d;
  cursor: pointer;
  text-align: center;
}

#game-app .direct-order-button strong {
  overflow: hidden;
  letter-spacing: .02em;
  font: 900 8px/1 var(--story);
  white-space: nowrap;
  text-overflow: ellipsis;
}

#game-app .direct-order-button small {
  overflow: hidden;
  color: rgb(255 249 216 / 78%);
  font: 800 6px/1 var(--numbers);
  white-space: nowrap;
  text-overflow: ellipsis;
}

#game-app .direct-order-button:is(.sell-short, .sell-position) {
  border-color: #8a463b;
  background: linear-gradient(#c76551, #994237);
  box-shadow: inset 0 0 0 1px rgb(255 238 211 / 18%), 0 2px 0 #6d302a;
}

#game-app .direct-order-group-close .direct-order-button {
  border-width: 1px;
  color: #644a31;
  background: linear-gradient(#f2ddb0, #dbc18c);
  box-shadow: inset 0 1px rgb(255 249 221 / 72%), 0 1px 0 #8f6c40;
}

#game-app .direct-order-group-close .direct-order-button small { color: #856b4d; }

#game-app .direct-order-button:active:not(:disabled) { transform: translateY(1px); }
#game-app .direct-order-button:disabled {
  border-color: #8a7c64;
  color: #776d5d;
  background: #c8bda4;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .72;
}
#game-app .direct-order-button:disabled small { color: #7d7362; }

body[data-ui-theme="city"] #game-app .direct-order-group > span { color: #aaa298; }
body[data-ui-theme="city"] #game-app .direct-order-button {
  border-color: #526e63;
  border-radius: 2px;
  color: #ece6d9;
  background: linear-gradient(#2d594b, #203e36);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%), 0 2px 0 #090e15;
}
body[data-ui-theme="city"] #game-app .direct-order-button:is(.sell-short, .sell-position) {
  border-color: #82515b;
  background: linear-gradient(#713443, #4f2531);
}
body[data-ui-theme="city"] #game-app .direct-order-group-close .direct-order-button {
  color: #d3ccc0;
  background: #202a35;
}
body[data-ui-theme="city"] #game-app .direct-order-button small { color: #aaa49b; }
body[data-ui-theme="city"] #game-app .direct-order-button:disabled {
  border-color: #454c52;
  color: #777b7d;
  background: #1a212a;
  opacity: .68;
}

.closing-auction-action-grid {
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.closing-auction-action-grid button { min-width: 0; font-size: 8px; }
.closing-auction-action-grid button:disabled { opacity: .45; cursor: not-allowed; }

@media (min-width: 701px) {
  #game-app details.order-panel:not([open]) > .direct-order-actions { display: grid; }
}

@media (min-width: 1181px) {
  #game-app .right-column .order-panel { min-height: 300px; }
}

@media (min-width: 701px) and (max-width: 1180px) {
  #game-app .direct-order-actions { margin-inline: 6px; gap: 4px; }
  #game-app .direct-order-button { min-height: 36px; padding-block: 4px; }
  #game-app .direct-order-button strong { font-size: 7px; }
}

@media (max-width: 700px) {
  #game-app .direct-order-actions { margin: 0 10px 10px; }
  #game-app .direct-order-button { min-height: 46px; }
  #game-app .direct-order-button strong { font-size: 9px; }
}

/* Unified Han family-office trading masthead ----------------------------
   The selected persona owns one complete office scene. Live identity,
   objective, and transport UI remain semantic HTML over that scene. */
body[data-ui-theme="city"] #game-app .topbar {
  min-height: 84px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid #070b11;
  border-radius: 5px 5px 2px 2px;
  background:
    linear-gradient(90deg, rgb(5 9 15 / 78%) 0 29%, rgb(5 9 15 / 15%) 43% 65%, rgb(5 9 15 / 76%) 79% 100%),
    linear-gradient(180deg, rgb(5 8 13 / 3%), rgb(5 8 13 / 28%)),
    var(--campaign-trading-masthead-image) 50% 45% / cover no-repeat,
    #0b121c;
  box-shadow:
    inset 0 0 0 1px rgb(190 153 96 / 46%),
    inset 0 -20px 30px rgb(3 6 10 / 38%),
    0 7px 18px rgb(0 0 0 / 38%);
}

body[data-ui-theme="city"] #game-app .topbar::after {
  height: 4px;
  border-top: 1px solid rgb(184 148 91 / 46%);
  background: linear-gradient(90deg, #0c121b, #642b3a 46% 54%, #0c121b);
}

body[data-ui-theme="city"] #game-app .brand-lockup {
  width: min(420px, 36%);
  min-width: 300px;
  align-self: stretch;
  gap: 10px;
}

body[data-ui-theme="city"] #game-app .brand-line {
  min-width: 0;
  padding: 3px 0;
  gap: 5px;
  border: 0;
  border-radius: 0;
  color: #f2ecdf;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-ui-theme="city"] #game-app .brand-line h1 {
  font-size: clamp(23px, 2.15vw, 31px);
  letter-spacing: -.025em;
  text-shadow: 0 2px 10px rgb(0 0 0 / 92%);
}

body[data-ui-theme="city"] #game-app .city-desk-wordmark {
  color: #d3c6aa;
  font-size: 8px;
  letter-spacing: .15em;
  text-shadow: 0 1px 5px #000;
}

body[data-ui-theme="city"] #game-app .session-controls {
  width: min(510px, 48%);
  min-width: 460px;
  padding: 4px;
  border: 1px solid rgb(191 157 101 / 30%);
  border-radius: 3px;
  background: rgb(7 11 17 / 62%);
  box-shadow: inset 0 0 0 1px rgb(255 241 214 / 4%);
  backdrop-filter: blur(6px);
}

@media (min-width: 701px) and (max-width: 1180px) {
  body[data-ui-theme="city"] #game-app .topbar { min-height: 72px; }
  body[data-ui-theme="city"] #game-app .brand-lockup { width: 34%; min-width: 260px; }
  body[data-ui-theme="city"] #game-app .brand-line h1 { font-size: clamp(20px, 2.4vw, 26px); }
  body[data-ui-theme="city"] #game-app .session-controls { min-width: 440px; }
}

@media (max-width: 700px) {
  body[data-ui-theme="city"] #game-app .topbar {
    min-height: 152px;
    padding: 5px 7px 7px;
    grid-template-rows: 54px 84px;
    background:
      linear-gradient(90deg, rgb(5 9 15 / 68%) 0 56%, rgb(5 9 15 / 7%) 76% 100%),
      linear-gradient(180deg, rgb(5 8 13 / 3%), rgb(5 8 13 / 34%)),
      var(--campaign-trading-masthead-image) 29% 53% / auto 390% no-repeat,
      #0b121c;
  }

  body[data-ui-theme="city"] #game-app .brand-lockup {
    width: 100%;
    min-width: 0;
    padding: 0 62px 0 45px;
    justify-content: flex-start;
  }

  body[data-ui-theme="city"] #game-app .brand-lockup::after { display: none; }
  body[data-ui-theme="city"] #game-app .brand-line { margin: 0; padding: 4px 0; }
  body[data-ui-theme="city"] #game-app .brand-line h1 { font-size: clamp(17px, 5.2vw, 20px); }
  body[data-ui-theme="city"] #game-app .city-desk-wordmark { font-size: 6px; letter-spacing: .08em; }
  body[data-ui-theme="city"] #game-app .session-controls {
    width: 100%;
    min-width: 0;
    padding: 3px;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 40px 34px;
    border-color: rgb(191 157 101 / 26%);
    background: rgb(7 11 17 / 68%);
  }

  body[data-ui-theme="city"] #game-app .session-action-bar {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 4px;
    border-left: 0;
  }

  body[data-ui-theme="city"] #game-app .session-transport {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  body[data-ui-theme="city"] #game-app .session-action-bar :is(.control-button, .restart-day-button) {
    min-width: 0;
    height: 34px;
    padding-inline: 4px;
    display: block;
    overflow: hidden;
    font-size: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Phone session controls: keep the live clock and transport in reach, with
   secondary game actions behind a real (keyboard-accessible) menu button. */
#game-app :is(.mobile-game-menu-toggle, .mobile-game-menu, .mobile-session-clock) {
  display: none;
}

@media (max-width: 700px) {
  #game-app .topbar {
    min-height: 132px;
    grid-template-rows: 42px 78px;
    overflow: visible;
  }

  #game-app .topbar::before { display: none; }

  #game-app .mobile-game-menu-toggle {
    position: absolute;
    z-index: 32;
    left: 8px;
    top: 7px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 2px solid #795333;
    border-radius: 7px;
    color: #fff0c5;
    background: linear-gradient(#805c3b, #51351f);
    box-shadow: inset 0 1px rgb(255 244 199 / 28%), 0 2px 0 rgb(44 27 15 / 45%);
    text-shadow: 0 2px #4e321d;
    font: 900 22px/1 var(--story);
  }

  #game-app .mobile-game-menu-toggle[aria-expanded="true"] {
    color: #4e321d;
    background: #f2d997;
  }

  #game-app .mobile-game-menu-toggle:focus-visible {
    outline: 3px solid #fff1a8;
    outline-offset: 2px;
  }

  #game-app .mobile-game-menu {
    position: absolute;
    z-index: 31;
    left: 8px;
    top: 53px;
    width: 156px;
    padding: 7px;
    display: grid;
    gap: 6px;
    border: 3px solid #6e4728;
    border-radius: 7px;
    background: #ead29b;
    box-shadow: inset 0 0 0 1px #fff0be, 0 8px 18px rgb(38 23 13 / 55%);
  }

  #game-app .mobile-game-menu[hidden] { display: none; }

  #game-app .mobile-game-menu button {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #8c6841;
    border-radius: 4px;
    color: #583b23;
    background: linear-gradient(#fff0c7, #dabb7c);
    letter-spacing: .04em;
    font: 900 10px/1 var(--story);
    text-align: left;
  }

  #game-app .mobile-game-menu button:last-child {
    border-color: #9b7761;
    color: #774b3d;
    background: #e4cda6;
  }

  #game-app .session-controls,
  body[data-ui-theme="city"] #game-app .session-controls {
    width: 100%;
    min-width: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 40px 34px;
    gap: 4px;
  }

  #game-app .session-action-bar,
  body[data-ui-theme="city"] #game-app .session-action-bar {
    min-width: 0;
    min-height: 34px;
    padding: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 76px;
    align-items: stretch;
    gap: 4px;
    border-left: 0;
  }

  #game-app .mobile-session-clock {
    min-width: 0;
    height: 34px;
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid #80613d;
    border-radius: 3px;
    color: #6a4b2d;
    background: #f0d8a3;
    font-family: var(--story);
  }

  #game-app .mobile-session-clock span {
    font-size: 5px;
    font-weight: 900;
    letter-spacing: .08em;
  }

  #game-app .mobile-session-clock strong {
    font-size: 10px;
    line-height: 1;
  }

  #game-app .session-transport,
  body[data-ui-theme="city"] #game-app .session-transport {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  #game-app .session-action-bar :is(.control-button, .restart-day-button),
  body[data-ui-theme="city"] #game-app .session-action-bar :is(.control-button, .restart-day-button) {
    min-width: 0;
    height: 34px;
    padding-inline: 3px;
    display: block;
    overflow: hidden;
    border: 1px solid #80613d;
    border-radius: 3px;
    color: #674b2d;
    background: linear-gradient(#f8e9bd, #dec38c);
    box-shadow: inset 0 1px rgb(255 250 221 / 72%);
    letter-spacing: 0;
    font: 900 7px/1 var(--story);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #game-app .session-action-bar .restart-day-button,
  body[data-ui-theme="city"] #game-app .session-action-bar .restart-day-button {
    border-color: #9b7761;
    color: #805544;
    background: #e8d7b5;
  }

  body[data-ui-theme="city"] #game-app .mobile-game-menu-toggle {
    border-color: #756550;
    color: #e9d6b5;
    background: linear-gradient(#26313e, #111923);
    text-shadow: 0 2px #070a0f;
  }

  body[data-ui-theme="city"] #game-app .mobile-session-clock {
    border-color: #625d57;
    color: #ded5c5;
    background: #151d28;
  }
}