/* Illustrated departments and small, playable customer moments. */
.city-feed{display:flex;align-items:center;gap:8px;min-height:39px;margin:0 14px;padding:7px 11px;border-bottom:1px solid #aad4c9;border-radius:0 0 10px 10px;background:linear-gradient(95deg,#e0f3e9,#f8f2d8);color:#315c63;font-size:11px;font-weight:800;line-height:1.35}
.city-feed>span:nth-child(2){flex:1;min-width:0}.city-feed-pulse{font-size:18px;color:#e9a952;animation:feed-glimmer 4s ease-in-out infinite}.city-feed small{flex:0 0 auto;color:#4d9293;font-size:8px;letter-spacing:.7px;font-weight:950}.city-feed .changed{animation:feed-arrive .35s ease-out}
@keyframes feed-glimmer{50%{transform:rotate(17deg) scale(1.14);opacity:.65}}@keyframes feed-arrive{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.visitor-card{position:relative;min-width:0;overflow:hidden;border:2px solid #f0d49d;border-bottom:5px solid #b99e70;border-radius:19px;background:#fffaea;color:#24445a;box-shadow:0 9px 18px #09374b38}
.visitor-heading{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:12px 16px 11px;overflow:hidden;border-bottom:3px solid #eecc88;background:linear-gradient(100deg,#163f64f5 0%,#236480d7 65%,#207b8294),var(--visitor-photo) center 46%/cover;color:#fff}
.visitor-heading .overline{color:#f7d88e;font-size:9px}.visitor-heading h2{margin:5px 0 0;font-size:17px;line-height:1.12;letter-spacing:-.3px;text-shadow:0 2px 4px #143854}.visitor-mia{position:absolute;right:5px;bottom:-19px;width:81px;height:86px;object-fit:contain;filter:drop-shadow(0 5px 3px #123e53aa)}
.visitor-body{padding:12px 15px 14px}.visitor-intro{display:flex;align-items:center;gap:10px}.visitor-avatar{position:relative;display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:3px solid #fff6d9;border-radius:15px;background:linear-gradient(145deg,#f2c78d,#db8e70);box-shadow:0 3px 0 #86695a,0 6px 10px #8156323d;color:white;font-size:23px;font-weight:1000;text-shadow:0 2px 2px #895753}.visitor-avatar:after{content:'';position:absolute;right:-5px;top:-5px;width:11px;height:11px;border:2px solid #fff7d5;border-radius:50%;background:#74cda8}.visitor-intro>div{min-width:0}.visitor-intro small{display:block;color:#ad8250;font-size:9px;font-weight:950;letter-spacing:.8px}.visitor-intro strong{display:block;margin-top:3px;color:#215572;font-size:15px;line-height:1.15}
.visitor-body>p{margin:11px 0;color:#506b72;font-size:12px;line-height:1.42;font-weight:720}.visitor-choices{display:grid;gap:7px}.visitor-choices button{position:relative;width:100%;min-height:42px;padding:9px 35px 9px 12px;border:1px solid #abd4ca;border-bottom:3px solid #7db4a8;border-radius:11px;background:linear-gradient(120deg,#f6fff5,#dff2e8);color:#2c6069;font-size:11px;font-weight:850;text-align:left;transition:transform .18s,filter .18s,box-shadow .18s}.visitor-choices button:after{content:'↗';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:18px;color:#2e9894}.visitor-choices button:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 5px 9px #519a8b36}.visitor-choices button:active{transform:translateY(1px)}
.visitor-answer{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #b7d9c9;border-radius:11px;background:#eaf7e9;animation:feed-arrive .3s ease-out}.visitor-answer img{flex:0 0 36px;width:36px;height:36px;object-fit:contain}.visitor-answer p{margin:0;color:#315967;font-size:11px;line-height:1.38;font-weight:780}.visitor-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;padding-top:9px;border-top:1px dashed #d9dcc5;color:#79908d;font-size:10px;font-weight:790}.visitor-foot strong{color:#ba8752;font-size:9px;letter-spacing:.6px;white-space:nowrap}.visitor-card.request-ready .visitor-avatar:after{animation:visitor-glow 1.9s ease-in-out infinite}.visitor-card.request-ready{border-color:#f6d38c}
@keyframes visitor-glow{50%{box-shadow:0 0 0 5px #7ee0b171}}

/* Each department is a little scene instead of a glyph on a flat tile. */
.upgrade-pane #upgradePanel .service-list{gap:16px}.upgrade-pane #upgradePanel .service{padding:0;border:2px solid #d8e4dc;border-bottom:5px solid #bad1c4;border-radius:17px;background:#fffdf3;box-shadow:0 5px 12px #3b65662b;transition:transform .22s,box-shadow .22s,border-color .22s}.upgrade-pane #upgradePanel .service:before{content:none}.upgrade-pane #upgradePanel .service:hover{transform:translateY(-2px);box-shadow:0 9px 18px #3b656638}.upgrade-pane #upgradePanel .service.active{border-color:#efbc6f;box-shadow:0 0 0 3px #ffe3a78c,0 9px 20px #7eaa9b51}
.service-scene{position:relative;display:block;width:100%;height:151px;overflow:hidden;padding:0;border:0;border-radius:13px 13px 0 0;background:#cde9e4;text-align:left;cursor:pointer}.service-scene:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#143c58a6);pointer-events:none}.service-scene>img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);animation:service-breathe 6s ease-in-out infinite alternate;transition:transform .28s}.service-scene:hover>img,.service-scene:focus-visible>img{animation-play-state:paused;transform:scale(1.065)}.service-scene-label,.service-scene-level,.service-scene-peek{position:absolute;z-index:1;display:block;padding:5px 7px;border:1px solid #fff7cf;border-radius:7px;background:#123e61d9;color:#fff8df;font-size:9px;font-weight:950;letter-spacing:.7px;box-shadow:0 2px 6px #06223a5e}.service-scene-label{top:10px;left:10px}.service-scene-level{top:10px;right:10px;background:#e5a651ed;color:#482d17}.service-scene-peek{right:10px;bottom:10px;background:#fbedd7eb;color:#174e66;font-size:8px}
@keyframes service-breathe{to{transform:scale(1.045) translateY(-1px)}}
.service-details{padding:10px 13px 13px}.service-details .service-top{gap:0}.service-details .service-main strong{font-size:16px;line-height:1.1}.service-details .service-main small{margin-top:3px;font-size:10px}.service-note{min-height:29px;margin:7px 0 2px;color:#547782;font-size:11px;line-height:1.35;font-weight:670}.service-details .service-meter{height:7px;margin:10px 0 9px;background:#e5efe4}.service-details .service-meter span{background:linear-gradient(90deg,var(--service),#73c7aa);box-shadow:0 0 7px var(--service);transition:width .5s}.service-details .service-meta{font-size:10px;gap:7px}
.service-details .service-buttons{gap:8px;grid-template-columns:1fr 1fr}.service-details .service-buttons button{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:49px;padding:7px 8px;border-radius:11px;text-align:left;line-height:1.15;font-size:11px;box-shadow:0 3px 8px #356b6330}.service-details .service-buttons button>span:last-child{min-width:0}.service-details .service-buttons button em{font-size:9px;line-height:1.2}.service-details .service-buttons button:disabled{box-shadow:none}.service-button-icon{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border:1px solid #fff5dc;border-radius:50%;background:#fff8e8ba;color:#b37532;font-size:20px;box-shadow:0 2px 0 #ae885d66}.service-buttons button:not(.upgrade-btn) .service-button-icon{color:#378d8b;background:#fffef3}.service-details .service-build{margin:11px 0 0;padding:8px 10px;border:1px solid #b9ddd2;border-radius:9px;background:#ebf7ee}.service-details .service-build div{height:7px;margin-top:7px}.service-details .service-build i{transition:width .7s;box-shadow:0 0 7px #55cdb6}.service.is-building .service-scene:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 10%,#fffce35c 35%,transparent 59%);animation:service-work 3s linear infinite;pointer-events:none}@keyframes service-work{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
/* A department's picture and suggested action reflect whether it can serve clients. */
.service.is-locked .service-scene>img{filter:grayscale(.28) saturate(.82);opacity:.9}.service.is-locked .service-scene-label{background:#385169ed}.service.is-locked .service-meter span{background:#aab9b4;box-shadow:none}
.service.needs-staff .service-scene>img{filter:saturate(.9) brightness(.93)}.service.needs-staff .service-scene-label{background:#a16036f2}.service.needs-staff .service-meta{color:#9d6342}.service-scene-wait{position:absolute;z-index:1;bottom:10px;left:10px;display:block;max-width:calc(100% - 120px);padding:5px 8px;border:1px solid #ffe5a9;border-radius:7px;background:#204d66ed;color:#fff8e8;box-shadow:0 3px 9px #15314980;font-size:9px;font-weight:950;letter-spacing:.45px;white-space:nowrap;pointer-events:none}
.service-details .service-buttons button.upgrade-btn.secondary-step:not(:disabled){background:linear-gradient(#f9f5e7,#e9e9d8);border-color:#dbd8bc;border-bottom-color:#b9baac;color:#647279}.service-details .service-buttons button.priority-step:not(:disabled){background:linear-gradient(#dafff0,#9bdfc7);border-color:#a7dcc7;border-bottom-color:#4eaa92;color:#1f675c;box-shadow:0 3px 8px #2b9e8559}
.boost-action{display:flex;align-items:center;gap:8px;text-align:left}.boost-copy{display:block;min-width:0}.boost-illustration{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;overflow:hidden;border:2px solid #fff8e7;border-radius:12px;background:#fffaf1;box-shadow:0 2px 0 #628f8e}.boost-illustration img{width:100%;height:100%;object-fit:contain}.boost-action.is-boosted{box-shadow:0 0 0 3px #8ce6cf66,0 7px 15px #40988a51}.boost-action.is-boosted .boost-illustration{animation:active-boost 2.7s ease-in-out infinite}@keyframes active-boost{50%{transform:translateY(-3px) rotate(-4deg)}}
.effect-layer{position:fixed;z-index:60;inset:0;pointer-events:none;overflow:hidden}.game-spark{position:absolute;color:#f4af46;font-size:17px;text-shadow:0 2px 3px #7c572b;animation:reward-fly .78s ease-out forwards}.game-spark.star{color:#78ddc9;font-size:21px;text-shadow:0 2px 5px #197b82}@keyframes reward-fly{from{opacity:1;transform:translate(-50%,-50%) scale(.4)}70%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15)}}
@media(max-width:860px){.visitor-card{margin-bottom:12px}.service-scene{height:136px}}
@media(max-width:600px){.city-feed{margin:0 9px;min-height:39px;padding:6px 8px;font-size:10px}.city-feed small{display:none}.visitor-heading{min-height:68px}.visitor-heading h2{font-size:16px}.visitor-body{padding:11px 12px}.service-scene{height:146px}.service-details .service-main strong{font-size:15px}.boost-illustration{flex-basis:35px;width:35px;height:35px}.boost-action{gap:5px}.boost-copy b{font-size:9px}.boost-copy small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.service-scene>img,.service.is-building .service-scene:before,.visitor-card.request-ready .visitor-avatar:after,.city-feed-pulse,.city-feed .changed,.visitor-answer,.boost-action.is-boosted .boost-illustration,.game-spark{animation:none!important}.service-scene>img{transform:none}}