/* The human gets a room, and enough space to see what work is doing to them. */
.human-strip {
  display: grid; grid-template-columns: minmax(260px,340px) minmax(0,1fr);
  gap: 0; padding: 0; margin: 0 0 16px; overflow: hidden;
  background: #111b28; border: 1px solid #2c3b50; border-radius: 8px;
}
body.is-intro .human-strip { max-width: none; margin-inline: 0; }
.human-room { position: relative; min-width: 0; min-height: 196px; overflow: hidden; background: #1a2833; border-right: 1px solid #34404b; }
/* The progressing room is code-native art so the human stays in the same scene
   while working, searching, or resting. No bitmap swap breaks the illusion. */
.human-room-art { display: none; }
.human-life-scene { position: absolute; inset: 0; background: #26373f; }
.human-life-scene svg { display: block; width: 100%; height: 100%; }
.human-room::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 30px #080e181c; }
.human-room.is-resting::after { background: #7cb59c0c; }
.human-room.is-bunker::after { box-shadow: inset 0 0 28px #07131b44; }
.human-dashboard { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: 20px 30px; padding: 24px 32px; min-width: 0; }
.human-strip .human-metric { width: auto; min-width: 0; }
.human-strip .human-metric>span { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 11px; font-size: 11px; letter-spacing: .25px; color: #a2b4ca; }
.human-strip .human-metric b { display: block; font-size: 46px; line-height: 1; font-weight: 600; letter-spacing: -1.7px; color: #c4b3ef; }
.human-strip .human-metric.happiness-metric b { color: #8cdbbb; }
.human-strip .meter { height: 8px; border-radius: 3px; background: #28344a; }
.human-strip .meter>span { border-radius: inherit; }
.human-strip.needs-break .human-metric:first-child b { color: #f0b77e; }
.human-actions { grid-column: 1; align-self: start; }
.human-dashboard>.life-shop { grid-column: 2; align-self: start; min-width: 0; }
.human-strip #break-button { max-width: none; min-height: 34px; padding: 8px 14px; font-size: 10px; white-space: normal; }
.manual-copy { display: flex; align-items: center; min-width: 0; gap: 7px; text-align: left; }
.manual-copy #manual-title { min-width: 0; line-height: 1.35; }
.manual-typist { display: block; flex: 0 0 42px; width: 42px; height: 32px; overflow: visible; }
.manual-typist svg { display: block; width: 100%; height: 100%; overflow: visible; }
.manual-button.is-working { min-height: 54px; }
.find-typist { display: block; flex: 0 0 42px; width: 42px; height: 32px; }
.find-typist svg { display: block; width: 100%; height: 100%; }
.room-work-screen,.room-search-screen,.room-crash-screen,.room-panic-face,.room-panic-marks,.room-key-taps,.room-sweat,.room-mouth-tired,.room-rest-arms,.room-rest-face,.room-rest-cues { display: none; }
.is-tired .room-mouth-normal { display: none; }
.is-tired .room-mouth-tired { display: block; }
.is-working .room-work-screen,.manual-typist .room-work-screen { display: block; }
.is-working .room-ai-face,.manual-typist .room-ai-face,
.is-searching .room-ai-face,.find-typist .room-ai-face { display: none; }
.is-searching .room-search-screen,.find-typist .room-search-screen { display: block; }
.room-job-scroll { clip-path: inset(0 0 17px 0); }
.is-working .room-person,.manual-typist .room-person { animation: human-typing-body calc(var(--typing-speed,155ms)*2) steps(2,end) infinite; }
.is-working .room-arm,.manual-typist .room-arm { transform-origin: 166px 157px; animation: human-typing-arm var(--typing-speed,155ms) steps(2,end) infinite; }
.is-working .room-arm-front,.manual-typist .room-arm-front { animation-direction: reverse; transform-origin: 141px 157px; }
.is-working .room-head,.manual-typist .room-head { transform-origin: 148px 129px; animation: human-typing-head calc(var(--typing-speed,155ms)*3) steps(2,end) infinite; }
.is-working .room-key-taps,.manual-typist .room-key-taps { display: block; animation: human-typing-keys calc(var(--typing-speed,155ms)*2) steps(2,end) infinite; }
.is-working .room-sweat,.manual-typist .room-sweat,.is-bunker .room-sweat { display: block; animation: human-typing-sweat .7s linear infinite; }
.is-working .room-work-screen,.manual-typist .room-work-screen { animation: human-typing-screen .4s steps(2,end) infinite; }
.room-steam { animation: human-typing-steam 1.8s ease-out infinite; }
.is-searching .room-search-lens,.find-typist .room-search-lens { animation: human-job-lens 1s ease-in-out infinite; }
.is-searching .room-job-scroll,.find-typist .room-job-scroll { animation: human-job-scan .75s steps(3,end) infinite; }
.is-searching .room-head,.find-typist .room-head { transform-origin: 148px 129px; animation: human-job-look 1.5s ease-in-out infinite; }
.is-searching .room-arm-front,.find-typist .room-arm-front { transform-origin: 141px 157px; animation: human-job-click .75s steps(2,end) infinite; }
/* The keyboard can wait. The same human settles back and takes a slow sip. */
.human-room .room-person { transform-origin: 145px 195px; transition: transform .5s ease-out; }
.human-room.is-resting::after { background: #8ac7ac0c; box-shadow: inset 0 0 38px #a3d1b512; transition: background .6s,box-shadow .6s; }
.human-room.is-resting .room-person { transform: rotate(-9deg); animation: human-rest-settle .65s ease-out both,human-rest-breathe 4.6s .65s ease-in-out infinite; }
.human-room.is-resting .room-head { transform: rotate(-4deg); transform-origin: 148px 129px; }
.human-room.is-resting .room-rest-arms,.human-room.is-resting .room-rest-face,.human-room.is-resting .room-rest-cues { display: block; }
.human-room.is-resting .room-arm,.human-room.is-resting .room-sweat,.human-room.is-resting .room-desk-coffee { display: none; }
.human-room.is-resting .room-rest-sip { transform-origin: 146px 158px; animation: human-rest-sip 5s .8s ease-in-out infinite; }
.human-room.is-resting .room-rest-steam { animation: human-rest-steam 2.8s ease-out infinite; }
.human-room.is-resting .room-rest-exhale { animation: human-rest-exhale 4.6s ease-out infinite; }
.human-room.is-resting .room-rest-exhale--late { animation-delay: .7s; opacity: 0; }
@keyframes human-rest-settle { from { transform: rotate(0); } to { transform: rotate(-9deg); } }
@keyframes human-rest-breathe { 0%,100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-10deg) translateY(-1.5px); } }
@keyframes human-rest-sip { 0%,18%,86%,100% { transform: rotate(0); } 40%,63% { transform: rotate(-20deg); } }
@keyframes human-rest-steam { 0% { opacity: .15; transform: translateY(3px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translate(-2px,-9px); } }
@keyframes human-rest-exhale { 0%,20% { opacity: 0; transform: translate(-5px,4px); } 42% { opacity: .65; } 82%,100% { opacity: 0; transform: translate(9px,-6px); } }
.room-profit-tick { animation: human-profit-tick 3s steps(2,end) infinite; }
.is-bunker:not(.is-working):not(.is-searching):not(.is-resting) .room-head { transform-origin: 148px 129px; animation: human-bunker-flinch 4s steps(2,end) infinite; }
.room-leak { animation: human-leak 1.7s linear infinite; }
.room-puddle { transform-origin: 77px 247px; animation: human-puddle 1.7s ease-out infinite; }
@keyframes human-typing-body { 50% { transform: translate(1px,1px); } }
@keyframes human-typing-arm { 50% { transform: rotate(-9deg); } }
@keyframes human-typing-head { 50% { transform: rotate(4deg) translateY(1px); } }
@keyframes human-typing-keys { 50% { transform: translateY(-5px); } }
@keyframes human-typing-sweat { from { transform: translateY(-4px); opacity: .9; } to { transform: translateY(12px); opacity: 0; } }
@keyframes human-typing-screen { 50% { transform: translateX(2px); } }
@keyframes human-typing-steam { from { transform: translateY(2px); opacity: .65; } to { transform: translateY(-7px); opacity: 0; } }
@keyframes human-job-lens { 0%,100% { transform: translate(-9px,0); } 45% { transform: translate(7px,4px); } 75% { transform: translate(2px,-3px); } }
@keyframes human-job-scan { 50% { transform: translateY(-5px); } }
@keyframes human-job-look { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(5deg) translateX(2px); } }
@keyframes human-job-click { 50% { transform: rotate(-4deg); } }
@keyframes human-profit-tick { 50% { opacity: .5; } }
@keyframes human-bunker-flinch { 0%,85%,100% { transform: translateX(0); } 88% { transform: translateX(-2px) rotate(-3deg); } 92% { transform: translateX(1px); } }
@keyframes human-leak { from { transform: translateY(0); opacity: .9; } to { transform: translateY(100px); opacity: 0; } }
@keyframes human-puddle { from { transform: scale(.3); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
/* Outages override every normal activity, keeping the purchased room intact. */
.human-room.is-outage::after { background: #673d5015; box-shadow: inset 0 0 28px #26151e55; }
.human-room.is-outage .room-ai-face,.human-room.is-outage .room-work-screen,
.human-room.is-outage .room-search-screen,.human-room.is-outage .room-key-taps { display: none; }
.human-room.is-outage .room-crash-screen,.human-room.is-outage .room-panic-face,
.human-room.is-outage .room-panic-marks,.human-room.is-outage .room-sweat { display: block; }
.human-room.is-outage .room-person { animation: human-outage-panic .65s ease-in-out infinite; }
.human-room.is-outage .room-head { transform-origin: 148px 129px; animation: human-outage-head .8s ease-in-out infinite; }
.human-room.is-outage .room-arm-back { transform-origin: 166px 157px; transform: rotate(-75deg); animation: human-outage-arm-back .7s ease-in-out infinite; }
.human-room.is-outage .room-arm-front { transform-origin: 141px 157px; transform: rotate(-108deg); animation: human-outage-arm-front .85s ease-in-out infinite; }
.human-room.is-outage .room-sweat { animation: human-typing-sweat 1s linear infinite; }
.human-room.is-outage .room-panic-marks { animation: human-outage-marks 1.5s ease-in-out infinite; }
.human-room.is-outage .room-crash-glitch { animation: human-crash-glitch 3s steps(2,end) infinite; }
@keyframes human-outage-panic { 0%,100% { transform: translate(-1px,0); } 50% { transform: translate(2px,-2px); } }
@keyframes human-outage-head { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes human-outage-arm-back { 0%,100% { transform: rotate(-63deg); } 50% { transform: rotate(-87deg); } }
@keyframes human-outage-arm-front { 0%,100% { transform: rotate(-105deg); } 50% { transform: rotate(-122deg); } }
@keyframes human-outage-marks { 0%,100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes human-crash-glitch { 0%,88%,100% { opacity: .2; transform: translateX(0); } 90%,94% { opacity: .7; transform: translateX(3px); } }
@media(max-width:850px) {
  .human-strip { grid-template-columns: minmax(220px,300px) minmax(0,1fr); }
  .human-dashboard { padding: 20px; gap: 18px 20px; }
  .human-strip .human-metric b { font-size: 40px; }
}
@media(max-width:680px) {
  .human-strip { grid-template-columns: minmax(0,1fr); margin-bottom: 13px; }
  .human-room { min-height: 160px; height: 160px; border-right: 0; border-bottom: 1px solid #34404b; }
  .human-dashboard { padding: 16px; gap: 15px 23px; }
  .human-strip .human-metric>span { font-size: 10px; gap: 6px; margin-bottom: 9px; }
  .human-strip .human-metric b { font-size: 36px; letter-spacing: -1.2px; }
  .human-strip .meter { height: 7px; }
  .human-strip #break-button { font-size: 10px; padding: 7px 12px; min-height: 34px; }
  .manual-typist,.find-typist { flex-basis: 38px; width: 38px; height: 30px; }
}
@media(prefers-reduced-motion:reduce) {
  .human-life-scene *,.manual-typist *,.find-typist * { animation: none!important; }
  .human-strip .meter>span { transition: none; }
  .room-sweat { opacity: .75; }
  .human-room .room-person,.human-room.is-resting::after { transition: none; }
  .human-room.is-resting .room-rest-steam { opacity: .6; }
  .human-room.is-resting .room-rest-exhale { opacity: .3; }
}

.human-life-scene .room-purchased-prop.is-new{animation:room-prop-arrive .8s ease-out both;transform-box:fill-box;transform-origin:center}
@keyframes room-prop-arrive{0%{opacity:0;filter:brightness(2.5)}50%{opacity:1;filter:brightness(1.5)}100%{opacity:1;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.human-life-scene .room-purchased-prop.is-new{animation:none}}
