/* Persistent resources and a dense, purchase-first game surface. */
:root { --resource-height: 104px; }
html { scroll-padding-top: calc(var(--resource-height) + 12px); }
.topbar { height: 56px; }
.brand { font-size: 18px; }
.brand-mark { width: 30px; height: 30px; font-size: 25px; }
.resource-hud { position: sticky; top: 0; z-index: 100; background: #101925f5; border-bottom: 1px solid #344358; box-shadow: 0 5px 20px #0003; backdrop-filter: blur(15px); }
.hud-inner { max-width: 1600px; margin: auto; padding: 13px 28px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.hud-balance,.hud-tokens,.hud-shop { min-width: 0; }
.hud-balance { border-right: 1px solid #2c394b; padding-right: 28px; align-self: stretch; container-type: inline-size; }
.hud-label { display: flex; align-items: center; gap: 8px; color: #9eb1c9; letter-spacing: 1px; font-size: 9px; font-weight: 600; height: 20px; }
.resource-info { border: 1px solid #475c77; border-radius: 50%; color: #a4bad5; background: #1b2a3c; width: 18px; height: 18px; padding: 0; font: 10px ui-monospace,monospace; position: relative; }
.resource-info::after { content: ''; position: absolute; inset: -10px; }
.hud-value { color: #eef4fb; font-size: 31px; letter-spacing: -.8px; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-balance .hud-value { font-size: clamp(14px,calc(100cqi / var(--balance-width,3.2)),64px); line-height: 1.08; letter-spacing: -1.5px; margin: 4px 0; }
.hud-income { display: flex; gap: 7px; font-size: 9px; color: #7c94ad; margin-top: 4px; align-items: baseline; }
.hud-income #income-value { font-size: 11px; color: #82d9b4; font-variant-numeric: tabular-nums; }
.hud-tokens { padding-left: 28px; display: grid; grid-template-columns: minmax(0,1fr) 210px; column-gap: 12px; align-items: center; align-self: stretch; min-height: 112px; }
.hud-token-head { display: contents; }
.hud-token-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.hud-tokens .hud-value { color: #edc593; }
.hud-status { display: block; color: #86b39f; font: 8px ui-monospace,monospace; margin-top: 4px; letter-spacing: .7px; }
.resource-hud #mascot-slot { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 100%; min-height: 0; margin: 0; align-self: stretch; position: relative; }
.resource-hud #mascot-slot .dt-mascot { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.resource-hud #mascot-slot .dt-mascot__svg { width: 100%; height: 100%; }
.hud-tokens[data-mood="low"] .hud-status { color: #e5b46d; }
.hud-tokens.is-empty .hud-value,.hud-tokens.is-empty .hud-status { color: #ff929e; }
.hud-tokens.is-empty { background: #381d2944; border-radius: 5px; }
.hud-tokens.is-empty .hud-status { animation: hud-warning 1.3s ease-in-out infinite; }
.hud-shop { grid-column: 1; grid-row: 2; margin-top: 8px; justify-self: start; }
.token-refill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 26px; padding: 4px 8px; border: 1px solid #3d4a61; border-radius: 5px; background: #202c3d; color: #cfdae9; font-size: 10px; white-space: nowrap; position: relative; }
.token-refill::after { content: ''; position: absolute; inset: -7px 0; }
.token-refill strong { color: var(--amber); font-weight: 550; }
.token-refill:disabled { opacity: .5; }
.hud-tokens.is-empty .token-refill:not(:disabled) { border-color: #a86170; background: #54303c; }
.resource-popover { position: fixed; inset: auto; margin: 0; width: min(360px,calc(100vw - 24px)); border: 1px solid #4c6687; border-radius: 8px; background: #1a283b; color: #e1ecfa; padding: 16px; box-shadow: 0 14px 45px #0008; overflow: auto; }
.resource-popover::backdrop { background: transparent; }
.resource-popover-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.resource-popover-heading h2 { font-size: 15px; }
.resource-popover-heading button { width: 34px; height: 34px; border-radius: 5px; background: #24394f; color: #b6cbe3; font-size: 23px; }
.resource-popover p { font-size: 11px; line-height: 1.6; color: #9fb3cc; }
.resource-popover .balance-details { display: block; margin: 12px 0; padding: 0; }
.resource-popover .balance-details>div { display: flex; gap: 15px; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #34455b; }
.resource-popover .balance-details span { font-size: 11px; margin: 0; }
.resource-popover .balance-details strong { font-size: 12px; }
.resource-popover .mascot-caption { min-height: 0; margin: 14px 0 8px; }
.resource-popover .mascot-caption strong { font-size: 12px; }
.resource-popover .mascot-caption p { font-size: 11px; }
.resource-popover .mascot-stage { display: block; font-size: 9px; margin: 10px 0; color: #b6a3cd; }
.resource-popover .refill-row { flex-wrap: wrap; font-size: 11px; margin-top: 12px; padding-bottom: 0; }
.resource-popover .refill-row input { width: 18px; height: 18px; }
.resource-popover #autobuy-hint { font-size: 10px; }
main { padding: 18px 28px; }
footer>div { flex-wrap: wrap; }
.human-strip { margin: 0 0 10px; padding: 10px 14px; gap: 20px; }
.human-metric { width: 130px; }
.human-strip p { font-size: 9px; }
.human-strip .quiet-button { padding: 7px 10px; }
.system-banner { padding: 10px 13px; margin-bottom: 14px; min-height: 0; }
.system-banner strong { font-size: 10px; }
.system-banner>div>span { font-size: 9px; }
.game-grid { grid-template-columns: 270px minmax(0,1fr); gap: 16px; }
.desk-column { position: static; gap: 12px; }
.growth-column { display: grid; grid-template-columns: minmax(320px,1.1fr) minmax(300px,1fr); gap: 14px; align-items: start; }
.operations-panel { grid-column: 1; grid-row: 1 / span 2; }
.powerups-panel { grid-column: 2; grid-row: 1; }
.providers-panel { grid-column: 2; grid-row: 2; }
.growth-column>.panel>.panel-heading { padding: 12px 14px; min-height: 52px; }
.growth-column>.panel>.panel-heading h2 { font-size: 14px; letter-spacing: -.1px; }
.growth-column>.panel>.panel-heading p { font-size: 9px; margin-top: 4px; }
.team-total { display: flex; gap: 6px; align-items: baseline; }
.team-total strong { font-size: 18px; }
.team-total span { font-size: 8px; }
.operation-footer { display: block; padding: 9px 13px; font-size: 8px; }
.operation-footer>span { display: block; margin: 0; }
.operation-footer>span:first-child { display: none; }
.growth-column #powerup-list,.growth-column #provider-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.growth-column .concierge-row { padding: 10px; gap: 8px; flex-wrap: nowrap; }
.concierge-row .concierge-symbol { display: none; }
.concierge-row strong { font-size: 10px; }
.concierge-row p { font-size: 8px; margin-top: 3px; }
.concierge-row .buy-button { padding: 8px 7px; font-size: 9px; margin: 0; }

.job-desk .panel-heading { padding: 12px 14px; }
.job-supply { padding: 11px 14px; }
.job-supply strong { font-size: 22px; }
.find-button { padding: 10px; margin-top: 8px; }
.request-content { padding: 12px 14px; }
.request-content h3 { font-size: 15px; min-height: 40px; margin: 7px 0; }
.request-content p { font-size: 9px; min-height: 28px; }
.request-economy { margin-top: 11px; }
.approve-area { margin: 0 14px; }
.manual-area { margin: 0 14px 11px; }
.manual-button { position: relative; isolation: isolate; overflow: hidden; }
.manual-button .manual-progress { position: absolute; inset: 0 auto 0 0; width: 0; background: #b78b4138; pointer-events: none; z-index: -1; transition: width .2s linear; }
.manual-button.is-working:disabled { opacity: 1; color: #f1d4a6; border-color: #b68a4c; }
.manual-payoff { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#manual-duration { color: #af9f85; font: 9px ui-monospace,monospace; }
.manual-button.is-working #manual-duration { color: #f1d4a6; }
.human-strip.needs-break { border-color: #b17c4c; }
.human-strip.needs-break #break-button { color: #f4cc8f; border-color: #a87a42; background: #382c1e; }
@media(prefers-reduced-motion:reduce) { .manual-button .manual-progress { transition: none; } }
.approve-button { padding: 12px 9px; }
.approval-motto { padding: 7px 14px 9px; }
.job-counts { padding: 10px 14px; }
.analytics-panel { margin-top: 16px; }
#info-dialog { max-height: calc(100dvh - var(--resource-height) - 32px); margin-top: calc(var(--resource-height) + 16px); overflow: auto; }
@keyframes hud-warning { 50% { opacity: .5; } }
@media(max-width:1200px) {
  .hud-inner { padding: 12px 24px; }
  .hud-balance { padding-right: 24px; }
  .hud-tokens { padding-left: 24px; grid-template-columns: minmax(0,1fr) 190px; }
  .hud-value { font-size: 28px; }
  main { padding: 16px 24px; }
  .game-grid { grid-template-columns: 250px minmax(0,1fr); gap: 14px; }
  .growth-column { display: flex; flex-direction: column; gap: 14px; }
  .growth-column>.panel { width: 100%; }
  .growth-column #powerup-list,.growth-column #provider-list { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .human-metric { width: 115px; }
  .human-strip p { max-width: 300px; }
}
@media(max-width:850px) {
  .hud-inner { padding: 10px 16px; }
  .hud-balance { padding-right: 16px; }
  .hud-tokens { padding-left: 16px; grid-template-columns: minmax(0,1fr) 150px; column-gap: 4px; }
  .hud-value { font-size: 24px; }
  .hud-income { flex-wrap: wrap; gap: 3px; }
  .hud-income #income-value { font-size: 10px; }
  .hud-income>span:last-child { font-size: 8px; }
  .game-grid { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 12px; }
  .desk-column { display: flex; flex-direction: column; position: static; }
  .growth-column #powerup-list,.growth-column #provider-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .human-strip { flex-wrap: nowrap; gap: 16px; }
  .human-strip p { display: none; }
  .human-metric { width: auto; flex: 1; }
  .resource-popover .refill-row { font-size: 11px; }
}
@media(max-width:680px) {
  .topbar { height: 49px; padding: 0 14px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; font-size: 22px; }
  .brand small { font-size: 5px; margin-top: 3px; }
  #session-time { font-size: 8px; }
  .hud-inner { padding: 9px 14px; }
  .hud-balance { padding-right: 12px; }
  .hud-tokens { padding-left: 12px; grid-template-columns: minmax(0,1fr) 84px; min-height: 0; }
  .hud-token-copy { display: contents; }
  .hud-token-copy>.hud-label { grid-column: 1; grid-row: 1; }
  .hud-token-copy>.hud-value { grid-column: 1/-1; grid-row: 2; }
  .hud-token-copy>.hud-status { grid-column: 1/-1; grid-row: 3; }
  .hud-shop { grid-column: 1/-1; grid-row: 4; margin-top: 7px; width: auto; }
  .token-refill { min-height: 30px; width: auto; padding: 5px 7px; gap: 8px; font-size: 10px; }
  .hud-label { font-size: 8px; height: 16px; gap: 10px; }
  .resource-info { width: 16px; height: 16px; font-size: 9px; }
  .hud-value { font-size: 25px; line-height: 1.2; }
  .hud-balance .hud-value { font-size: clamp(14px,calc(100cqi / var(--balance-width,3.2)),42px); letter-spacing: -1px; }
  .hud-income { margin-top: 2px; font-size: 8px; gap: 4px; }
  .hud-income #income-value { font-size: 9px; }
  .hud-status { font-size: 7px; margin-top: 2px; }
  .resource-hud #mascot-slot { grid-column: 2; grid-row: 1; width: 84px; height: 60px; margin: -4px 0; justify-self: end; }
  main { padding: 13px 12px; }
  .human-strip { padding: 9px 10px; gap: 12px; margin-bottom: 10px; }
  .human-metric>span { font-size: 8px; }
  .human-strip .quiet-button { font-size: 8px; padding: 7px; }
  .system-banner { padding: 10px; gap: 7px; margin-bottom: 12px; }
  .system-banner strong { font-size: 10px; }
  .system-banner>div>span { font-size: 9px; line-height: 1.5; }
  .game-grid { display: flex; flex-direction: column; gap: 13px; }
  .desk-column { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
  .growth-column { gap: 13px; }
  .growth-column>.panel>.panel-heading { padding: 11px 12px; }
  .growth-column #powerup-list,.growth-column #provider-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .operations-panel .panel-heading p { display: none; }
  .job-supply { padding: 10px 13px; }
  .job-supply>p { display: none; }
  .request-content h3 { min-height: 0; font-size: 15px; }
  .request-content p { min-height: 0; font-size: 10px; }
  .request-economy { margin-top: 9px; }
  .approve-button strong { font-size: 13px; }
  .manual-button { font-size: 11px; }
  .approval-motto { display: none; }
  .manual-area { margin-top: 9px; }
  .job-counts { padding: 8px 14px; }
  .concierge-row>div:nth-child(2) { flex-basis: auto; }
  .concierge-row .buy-button { margin-left: 0; }
  .resource-popover .balance-details>div:last-child strong { font-size: 12px; }
  #info-dialog { padding: 24px 18px; }
}
@media(max-width:360px) {
  .hud-inner { padding: 8px 12px; }
  .hud-value { font-size: 21px; letter-spacing: -.6px; }
  .hud-tokens { grid-template-columns: minmax(0,1fr) 72px; }
  .resource-hud #mascot-slot { width: 72px; height: 56px; }
  .hud-income>span:last-child { display: none; }
  .human-strip .quiet-button { max-width: 76px; white-space: normal; }
}

/* The office grows around the player instead of arriving fully furnished. */
.discovery-hint { padding: 12px 16px; color: #8196ae; font-size: 11px; line-height: 1.6; text-align: center; }
body.is-intro .game-grid { display: block; max-width: 560px; margin-inline: auto; }
body.is-intro .job-desk .panel-heading { padding: 16px 20px; }
body.is-intro .job-supply,body.is-intro .request-content { padding: 18px 20px; }
body.is-intro .request-content h3 { font-size: 20px; line-height: 1.4; min-height: 0; }
body.is-intro .request-content p { min-height: 0; font-size: 12px; }
body.is-intro .approve-area { margin: 0 20px; }
body.is-intro .approve-button { min-height: 66px; }
body.is-intro .manual-area { margin-inline: 20px; margin-bottom: 20px; }
body.is-intro .human-strip { max-width: 560px; margin-inline: auto; }
body.is-intro .human-strip p { display: none; }
body.is-intro footer { max-width: 560px; margin-inline: auto; flex-wrap: wrap; justify-content: center; text-align: center; gap: 14px; }
@media(min-width:681px) {
  body:not(.has-power-shop):not(.is-intro) .game-grid { max-width: 1000px; margin-inline: auto; grid-template-columns: minmax(280px,.9fr) minmax(320px,1.1fr); }
  body:not(.has-power-shop) .growth-column { display: block; }
}
@media(max-width:680px) {
  body.is-intro .job-supply,body.is-intro .request-content { padding: 13px 16px; }
  body.is-intro .request-content h3 { font-size: 17px; }
  body.is-intro .request-content p { font-size: 11px; }
  body.is-intro .approve-area { margin-inline: 16px; }
  body.is-intro .manual-area { margin-inline: 16px; margin-bottom: 14px; }
}