:root{--tile:64px;--bg:#0a0d11;--panel:#151a21;--border:#323b46;--text:#f0f3f6;--muted:#9aa5b0;--accent:#ffc247}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overscroll-behavior:none}
body{min-height:100vh}
button{font:inherit}
.topbar{padding:8px 10px;background:#15191f;border-bottom:1px solid #2a313a;display:grid;gap:6px}
.brand{font-weight:800}.brand small{color:var(--muted)}
.stats,.timebar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px}
.stats span{background:#20262e;padding:5px 7px;border-radius:7px}
.timebar button{min-width:42px;min-height:36px;border:1px solid #3a4550;border-radius:7px;background:#20262e;color:#fff}
.timebar .active{border-color:var(--accent);color:var(--accent)}
#clock{margin-left:auto;font-variant-numeric:tabular-nums}

#viewport{position:relative;height:70vh;min-height:430px;overflow:hidden;touch-action:none;background:
linear-gradient(#11161c 1px,transparent 1px),linear-gradient(90deg,#11161c 1px,transparent 1px),#090c10;background-size:32px 32px}
#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#grid{display:grid;grid-template-columns:repeat(20,var(--tile));grid-template-rows:repeat(25,var(--tile))}
#elevators{position:absolute;left:0;top:0;width:1280px;height:1600px;pointer-events:none}
.cell{width:var(--tile);height:var(--tile);position:relative;border-right:1px solid #2a323b;border-bottom:1px solid #2a323b;background:#10151b}
.cell.floor1{box-shadow:inset 0 3px 0 #6d8166}
.cell.underground{background:#090c10}
.cell::after{content:attr(data-label);position:absolute;left:3px;top:2px;font-size:9px;color:#68737d;z-index:4;pointer-events:none}
.sprite{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.sprite.vacant{background-image:url('assets/vacant.png');opacity:.48;filter:brightness(.62) saturate(.7)}
.sprite.lobby{background-image:url('assets/lobby.png')}
.sprite.room{background-image:url('assets/room.png')}
.sprite.shaft{background-image:url('assets/elevator_shaft.png')}
.sprite.selected{outline:3px solid var(--accent);outline-offset:-3px}
.sprite.lobby.connected-left{clip-path:inset(0 0 0 5px)}
.sprite.lobby.connected-right{clip-path:inset(0 5px 0 0)}
.elevator-car{position:absolute;width:64px;height:64px;background:url('assets/elevator_car.png') center/cover no-repeat;z-index:8;transition:top .9s cubic-bezier(.45,.05,.25,1);pointer-events:none}

.hint{position:absolute;left:8px;bottom:8px;background:#000c;padding:6px 8px;border-radius:6px;font-size:11px;pointer-events:none}
#status{min-height:44px;padding:10px 12px;background:#151a21;border-top:1px solid #2b333c;font-size:13px}
.sheet{position:fixed;inset:0;background:#0009;display:flex;align-items:flex-end;justify-content:center;z-index:50}
.hidden{display:none!important}
.card{width:min(680px,100%);background:#171c23;border-radius:18px 18px 0 0;border-top:1px solid #3a4450;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));max-height:75vh;overflow:auto}
.card h2{margin:0 0 10px;font-size:18px}
.action,.closebtn{width:100%;min-height:54px;border:1px solid #3d4753;background:#222934;color:#fff;border-radius:10px;padding:10px 12px;margin-bottom:8px;text-align:left}
.action strong{display:block;font-size:15px}.action span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.action.danger{border-color:#733b3e;color:#ffd3d5}
.closebtn{text-align:center;background:#151a21}
.infoBox{padding:8px 4px 12px;line-height:1.55}
@media(min-width:700px){.topbar{grid-template-columns:auto 1fr auto;align-items:center}#viewport{height:78vh}}

/* v0.03 overrides */
html,body{background:linear-gradient(#18557e,#102b46)}
.topbar{display:block;background:linear-gradient(#1a5e8e,#123d60);padding:8px 10px 10px}
.stats{display:grid;grid-template-columns:1.35fr 1.35fr .9fr 1.25fr 1fr;gap:7px;align-items:stretch}
.stat{border-radius:14px;border:2px solid rgba(255,255,255,.78);box-shadow:inset 0 0 0 2px rgba(0,0,0,.07),0 2px 0 rgba(0,0,0,.14);padding:7px 9px;display:grid;align-content:center;min-width:0;color:#16202b}
.stat .label{font-weight:900;font-size:12px;white-space:nowrap}
.stat b{font-size:18px;line-height:1.05;white-space:nowrap}
.stat.money{background:linear-gradient(#f4ffe7,#d6f5c1);color:#1c612d}
.stat.income{background:linear-gradient(#fff7da,#ffe4a0);color:#b65a08}
.stat.population{background:linear-gradient(#ebf8ff,#c9ecff);color:#125da2}
.stat.datetime{background:linear-gradient(#fff0f7,#ffd7e7);color:#c8346c}
.stat.weather{background:linear-gradient(#f7efff,#e3cfff);color:#604496;grid-template-columns:auto 1fr;gap:5px}
#weatherIcon{font-size:24px}
.timebar{margin-top:8px}
.timebar button{min-width:58px;min-height:42px;border:none;border-radius:11px;color:white;font-size:18px;font-weight:900;box-shadow:inset 0 -3px 0 rgba(0,0,0,.17),0 2px 0 rgba(0,0,0,.15)}
#pause{background:#ff7b24}.speed[data-speed="1"]{background:#ffb618}.speed[data-speed="2"]{background:#59a936}.speed[data-speed="4"]{background:#178ada}.speed[data-speed="8"]{background:#8947c6}
.timebar .active{outline:3px solid #fff2a0;outline-offset:-3px}
#viewport{background:#112236}
.cell{width:var(--tile);height:var(--tile);border:1px solid #4e4e4e;background:#d7d4ce;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.cell.underground{background:#c9c6c0}
.cell::after{left:50%;top:50%;transform:translate(-50%,-50%);font-size:15px;font-weight:900;color:rgba(65,65,65,.33)}
.sprite.vacant{background:none;opacity:1;filter:none}
.sprite.shaft{background-image:url('assets/elevator_shaft.png');filter:brightness(.58) saturate(.45)}
/* one moving cabin only, not a whole moving tile */
.elevator-car{width:54px;height:54px;margin:5px;background:linear-gradient(90deg,#9dd8f2 0 47%,#36434d 47% 53%,#9dd8f2 53% 100%);border:3px solid #303740;border-radius:4px;box-shadow:inset 0 0 0 2px #b8e0f2,inset 0 -8px 0 rgba(0,0,0,.14),0 0 0 2px #171b20}
.hint{display:none!important}
@media(max-width:720px){
 .stats{grid-template-columns:1.35fr 1.35fr .9fr}
 .datetime{grid-column:1/3}.weather{grid-column:3}
 .stat b{font-size:16px}
}

/* v0.03 weather animation */
.weather #weatherIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  transform-origin:center;
}
.weather.sunny #weatherIcon{
  animation:weatherSun 2.8s ease-in-out infinite;
}
.weather.cloudy #weatherIcon{
  animation:weatherCloud 2.4s ease-in-out infinite;
}
.weather.rain #weatherIcon{
  animation:weatherRain 1.2s ease-in-out infinite;
}
.weather.typhoon #weatherIcon{
  animation:weatherTyphoon 1s linear infinite;
}
@keyframes weatherSun{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.15) rotate(8deg)}
}
@keyframes weatherCloud{
  0%,100%{transform:translateX(-2px) scale(1)}
  50%{transform:translateX(3px) scale(1.05)}
}
@keyframes weatherRain{
  0%,100%{transform:translateY(-2px)}
  50%{transform:translateY(3px)}
}
@keyframes weatherTyphoon{
  from{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.12)}
  to{transform:rotate(360deg) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .weather #weatherIcon{animation:none!important}
}

/* v0.03 clarification: animate ONLY the weather icon on the left */
.stat.weather,
.stat.weather.sunny,
.stat.weather.cloudy,
.stat.weather.rain,
.stat.weather.typhoon{
  animation:none!important;
  transform:none!important;
}
.stat.weather #weatherIcon{
  animation-name:none;
}
.stat.weather.sunny #weatherIcon{animation:weatherSun 2.8s ease-in-out infinite}
.stat.weather.cloudy #weatherIcon{animation:weatherCloud 2.4s ease-in-out infinite}
.stat.weather.rain #weatherIcon{animation:weatherRain 1.2s ease-in-out infinite}
.stat.weather.typhoon #weatherIcon{animation:weatherTyphoon 1s linear infinite}


/* ===== v0.04 / one-room apartment daily animation ===== */
.sprite.room{
  overflow:hidden;
  transition:filter .35s ease, opacity .35s ease;
}

/* 00:00-05:59 sleeping: whole room is dimmed */
.sprite.room.room-sleep{
  filter:brightness(.32) saturate(.65);
}
.sprite.room.room-sleep::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,18,35,.38);
  pointer-events:none;
}

/* 07:00 until resident returns: lights on, nobody inside */
.sprite.room.room-away{
  filter:brightness(1.02) saturate(.95);
}

/* active periods: 06:00-06:59 and after resident comes home */
.sprite.room.room-active{
  filter:brightness(1.08) saturate(1.04);
}

/* Tiny stick figure kept fully inside one 64x64 room tile */
.sprite.room.room-active::before{
  content:"";
  position:absolute;
  z-index:7;
  left:28px;
  top:23px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#222;
  box-shadow:
    0 8px 0 -2px #222,
    -5px 12px 0 -2px #222,
    5px 12px 0 -2px #222;
  transform-origin:50% 100%;
  animation:roomPersonBusy .62s steps(2,end) infinite;
  opacity:.88;
  pointer-events:none;
}

/* small alternate motion shadow gives a 'chaka-chaka' busy impression */
.sprite.room.room-active::after{
  content:"";
  position:absolute;
  z-index:6;
  left:25px;
  top:40px;
  width:14px;
  height:3px;
  border-radius:50%;
  background:rgba(0,0,0,.22);
  animation:roomPersonShadow .62s steps(2,end) infinite;
  pointer-events:none;
}

@keyframes roomPersonBusy{
  0%{transform:translate(-6px,0) rotate(-6deg)}
  50%{transform:translate(5px,-1px) rotate(7deg)}
  100%{transform:translate(-6px,0) rotate(-6deg)}
}
@keyframes roomPersonShadow{
  0%{transform:translateX(-4px) scaleX(.85)}
  50%{transform:translateX(5px) scaleX(1.05)}
  100%{transform:translateX(-4px) scaleX(.85)}
}


/* ===== v0.05 ===== */

/* Rank badge */
.stats{position:relative}
.rankBadge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.85);
  background:linear-gradient(#fff4a5,#ffcc31);
  color:#8c5a00;
  font-weight:1000;
  font-size:22px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 2px 0 rgba(0,0,0,.15);
}

/* Elevator waiting people overlay */
.waiting-group{
  position:absolute;
  width:64px;
  height:64px;
  pointer-events:none;
  z-index:15;
  overflow:visible;
}
.waiter{
  position:absolute;
  width:9px;
  height:26px;
  bottom:5px;
  transform-origin:50% 100%;
  opacity:.9;
}
.waiter .head{
  position:absolute;left:1px;top:0;
  width:7px;height:7px;border-radius:50%;
  background:#252525;
}
.waiter .body{
  position:absolute;left:3px;top:7px;
  width:3px;height:10px;background:#282828;border-radius:2px;
}
.waiter .leg1,.waiter .leg2{
  position:absolute;top:16px;width:2px;height:9px;background:#282828;border-radius:2px;
}
.waiter .leg1{left:2px;transform:rotate(5deg)}
.waiter .leg2{left:5px;transform:rotate(-5deg)}
.waiter .arm1,.waiter .arm2{
  position:absolute;top:9px;width:2px;height:8px;background:#282828;border-radius:2px;
  transform-origin:top center;
}
.waiter .arm1{left:1px}
.waiter .arm2{left:6px}

/* adopted variations 1-6 */
.waiter.pose1 .arm1{transform:rotate(3deg)}
.waiter.pose1 .arm2{transform:rotate(-3deg)}
.waiter.pose2 .arm1{transform:rotate(-55deg);top:10px}
.waiter.pose2 .arm2{transform:rotate(55deg);top:10px}
.waiter.pose3 .arm2{transform:rotate(-75deg);height:7px}
.waiter.pose4 .arm1{transform:rotate(-45deg)}
.waiter.pose4 .arm2{transform:rotate(-120deg);top:8px}
.waiter.pose5::after{
  content:"";
  position:absolute;left:6px;top:15px;width:7px;height:7px;
  border:1px solid #222;background:#343434;
}
.waiter.pose6 .arm1{transform:rotate(-18deg)}
.waiter.pose6 .arm2{transform:rotate(18deg)}

.waiter:nth-child(3n+1){animation:waitBob 1.3s ease-in-out infinite}
.waiter:nth-child(3n+2){animation:waitBob 1.6s ease-in-out infinite .2s}
.waiter:nth-child(3n){animation:waitBob 1.9s ease-in-out infinite .4s}
@keyframes waitBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}

/* Passenger dots inside cabin, maximum 10 */
.elevator-car .passenger-dots{
  position:absolute;
  left:4px;right:4px;bottom:4px;
  display:flex;flex-wrap:wrap;gap:2px;
  align-content:flex-end;
  pointer-events:none;
}
.elevator-car .passenger-dot{
  width:5px;height:8px;border-radius:50% 50% 35% 35%;
  background:#232323;opacity:.8;
}

/* subtle slow standard elevator */
.elevator-car{
  transition-property:top;
  transition-timing-function:cubic-bezier(.45,.05,.25,1);
}

/* long press extension indicator */
#viewport.extending{cursor:ns-resize}
#viewport.extending::after{
  content:"長押しドラッグ：エレベーター延長";
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  z-index:40;background:rgba(15,25,35,.9);color:white;
  padding:7px 12px;border-radius:12px;font-size:12px;font-weight:800;
}

/* ===== v0.06 two-tile shops ===== */
.shop-btn{font-weight:900}
.sprite.shop2{
  overflow:visible!important;
  z-index:5;
}
.shop-facade{
  position:absolute;inset:2px;
  border:2px solid rgba(35,35,45,.55);
  border-radius:9px;
  overflow:hidden;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);
}
.shop-facade::before{
  content:"";position:absolute;left:7px;right:7px;top:22px;height:26px;
  border-radius:4px;background:rgba(255,255,255,.58);
  border:2px solid rgba(40,40,50,.35);
}
.shop-sign{
  position:absolute;left:5px;right:5px;top:4px;height:17px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:1000;letter-spacing:.5px;
  border-radius:5px;background:rgba(255,255,255,.82);
  color:#222;z-index:3;
}
.shop-facade.ramen{background:linear-gradient(145deg,#ffd27c,#ff9f73)}
.shop-facade.convenience{background:linear-gradient(145deg,#b8f0ff,#9ee7ba)}
.shop-facade.hundred{background:linear-gradient(145deg,#f4c4ff,#c8c0ff)}
.shop-closed{filter:brightness(.38) saturate(.55)}
.shop-worker{
  position:absolute;z-index:8;width:7px;height:20px;bottom:7px;left:28px;
  animation-duration:var(--worker-speed,1.4s);
  animation-iteration-count:infinite;
  animation-timing-function:steps(3,end);
}
.shop-worker::before{
  content:"";position:absolute;left:1px;top:0;width:6px;height:6px;
  border-radius:50%;background:#3a3030;
}
.shop-worker::after{
  content:"";position:absolute;left:2px;top:6px;width:4px;height:11px;
  border-radius:2px;background:#56505a;
  box-shadow:-3px 4px 0 -1px #56505a,5px 3px 0 -1px #56505a;
}
.shop-worker.motion1{animation-name:workerWalk}
.shop-worker.motion2{animation-name:workerStock}
.shop-worker.motion3{animation-name:workerCounter}
.shop-worker.motion4{animation-name:workerSweep}
@keyframes workerWalk{0%{transform:translateX(-13px)}50%{transform:translateX(15px)}100%{transform:translateX(-13px)}}
@keyframes workerStock{0%,100%{transform:translate(-8px,0)}50%{transform:translate(8px,-4px) rotate(8deg)}}
@keyframes workerCounter{0%,100%{transform:translateX(-4px) scaleY(1)}50%{transform:translateX(7px) scaleY(.88)}}
@keyframes workerSweep{0%,100%{transform:translateX(-11px) rotate(-7deg)}50%{transform:translateX(12px) rotate(8deg)}}
.shop-variant-1 .shop-facade{border-radius:9px}
.shop-variant-2 .shop-facade{border-radius:3px;border-width:3px}
.shop-variant-3 .shop-facade::before{left:14px;right:4px}
.shop-variant-4 .shop-facade::before{left:4px;right:14px}
.shop-right-marker{opacity:0}

/* ===== v0.07 Daily Report ===== */
.daily-report-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,18,30,.58);
  backdrop-filter:blur(3px);
}
.daily-report-modal.hidden{display:none}
.daily-report-card{
  width:min(92vw,520px);
  border-radius:22px;
  padding:18px;
  background:linear-gradient(180deg,#fffdf6,#eef8ff);
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 18px 55px rgba(0,0,0,.28), inset 0 -5px 0 rgba(0,0,0,.08);
  color:#243044;
}
.daily-report-title{
  font-size:24px; font-weight:1000; text-align:center;
  margin-bottom:3px;
}
.daily-report-date{
  text-align:center; font-size:13px; opacity:.68; margin-bottom:14px;
}
.daily-report-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.daily-report-grid>div{
  border-radius:14px; padding:10px 6px;
  text-align:center; background:rgba(255,255,255,.9);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
}
.daily-report-grid span{display:block;font-size:12px;opacity:.72}
.daily-report-grid strong{display:block;margin-top:3px;font-size:17px}
.daily-report-profit-negative{color:#e22b2b!important}
.daily-report-profit-positive{color:#188d47!important}
.daily-report-comment-title{
  margin-top:15px; font-size:15px; font-weight:1000;
}
.daily-report-comments{
  margin-top:7px; min-height:64px; max-height:180px; overflow:auto;
  padding:10px 12px; border-radius:13px; background:rgba(255,255,255,.82);
  line-height:1.55; font-size:13px;
}
.daily-report-comment-row{margin:2px 0}
.daily-report-congestion{font-weight:800;color:#9b5d00}
.daily-report-close{
  width:100%;margin-top:14px;padding:11px 8px;border:0;border-radius:14px;
  font-weight:1000;font-size:16px;color:white;
  background:linear-gradient(#48a8ff,#2677df);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}


/* ===== v0.07 mobile/UI correction ===== */
@media(max-width:720px){
  .topbar{padding:7px 8px 9px}
  .stats{
    display:grid!important;
    grid-template-columns: .72fr 1.18fr 1.10fr!important;
    gap:6px!important;
  }
  .rankBadge{
    min-width:0!important;
    width:auto!important;
    padding:5px 4px!important;
    font-size:19px!important;
    border-radius:12px!important;
    white-space:nowrap;
    overflow:hidden;
  }
  .stat{padding:6px 8px!important;border-radius:12px!important}
  .stat .label{font-size:11px!important}
  .stat b{font-size:15px!important}
  .stat.population{grid-column:1/2!important}
  .stat.datetime{grid-column:2/3!important}
  .stat.weather{grid-column:3/4!important}
  #weatherIcon{font-size:22px!important}
  .timebar{display:grid!important;grid-template-columns:repeat(5,1fr);gap:7px!important}
  .timebar button{min-width:0!important;width:100%!important;min-height:40px!important;font-size:17px!important}
}

/* Elevator cabin: one dark metallic box inside the shaft, not a blue room-like tile */
.elevator-car{
  width:48px!important;
  height:54px!important;
  margin:5px 8px!important;
  background:linear-gradient(90deg,#3a4148 0 46%,#11161b 46% 54%,#3a4148 54% 100%)!important;
  border:3px solid #171c21!important;
  border-radius:4px!important;
  box-shadow:inset 0 0 0 2px #727b83,inset 0 -7px 0 rgba(0,0,0,.22),0 2px 3px rgba(0,0,0,.35)!important;
  z-index:12!important;
}
.elevator-car::before{
  content:"";position:absolute;left:3px;right:3px;top:3px;height:5px;
  background:#9aa2a8;border-radius:2px;opacity:.55;
}
.elevator-car .passenger-dots{display:none!important}

/* Construction sheet categories */
.build-category{
  width:100%;min-height:58px;border:2px solid rgba(255,255,255,.18);
  border-radius:13px;margin-bottom:9px;padding:10px 12px;text-align:left;
  color:#fff;background:linear-gradient(#2b445d,#203449);font-weight:900;
}
.build-category .sub{display:block;font-size:12px;font-weight:600;color:#c5d5e5;margin-top:2px}
.build-category.residential{background:linear-gradient(#55a65a,#3d8244)}
.build-category.shop{background:linear-gradient(#e48a31,#be641d)}
.build-back{background:#303946!important;text-align:center!important}
.selection-note{padding:8px 10px;margin-bottom:10px;border-radius:10px;background:#26313d;color:#dce8f3;font-size:12px}


/* ===== v0.07 fixed4: adopted shop graphics ===== */
.sprite.shop2.shop-graphic-anchor{
  overflow:visible!important;
  z-index:6;
  background:none!important;
}
.shop-graphic{
  position:absolute;
  inset:0;
  width:128px;
  height:64px;
  display:block;
  object-fit:fill;
  image-rendering:auto;
  border:0;
  border-radius:3px;
  pointer-events:none;
}
.sprite.shop2part.shop-right-marker{
  opacity:0!important;
  background:none!important;
}

/* Adjacent lobby tiles visually merge into one horizontal lobby. */
.cell.lobby-cell{
  overflow:visible;
}
.cell.lobby-cell.lobby-join-right{
  border-right-color:transparent!important;
}
.cell.lobby-cell.lobby-join-left{
  border-left-color:transparent!important;
}
.sprite.lobby.connected-left{
  left:-2px!important;
  clip-path:none!important;
}
.sprite.lobby.connected-right{
  right:-2px!important;
  clip-path:none!important;
}
.sprite.lobby.connected-left.connected-right{
  left:-2px!important;
  right:-2px!important;
}

/* ===== v0.07 fixed5: previous-day report HUD button ===== */
.report-hud-btn{
  min-width:118px;
  height:68px;
  padding:0 12px;
  border:0;
  border-radius:18px;
  font-weight:1000;
  font-size:14px;
  color:white;
  background:linear-gradient(180deg,#6f7fe8,#4d56c9);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 3px 0 rgba(0,0,0,.14);
}
.report-hud-btn:active{transform:translateY(2px)}

/* ===== v0.07 fixed6: compact report icon button ===== */
#prevReportBtn{
  min-width:68px!important;
  width:68px!important;
  padding:0!important;
  font-size:26px!important;
  line-height:1!important;
}

/* ===== v0.07 fixed7: compact HUD + message row ===== */
.hud-message{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  width:100%;
  height:40px;
  min-height:40px;
  margin-top:6px;
  padding:0 11px;
  border:2px solid rgba(255,255,255,.78);
  border-radius:12px;
  background:linear-gradient(180deg,#28384b,#1d2938);
  color:#eef7ff;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 2px 0 rgba(0,0,0,.14);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:720px){
  .topbar{
    padding:5px 7px 6px!important;
  }

  /* Two compact stat rows */
  .stats{
    grid-template-columns:.72fr 1.28fr 1.12fr!important;
    gap:4px!important;
  }

  .rankBadge,
  .stat{
    box-sizing:border-box!important;
    height:38px!important;
    min-height:38px!important;
    padding:3px 6px!important;
    border-radius:10px!important;
  }

  .rankBadge{
    font-size:17px!important;
  }

  /* Every HUD value is one line. */
  .stat{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  .stat .label{
    display:inline!important;
    flex:0 0 auto!important;
    font-size:10px!important;
    line-height:1!important;
    margin:0!important;
  }
  .stat b{
    display:inline!important;
    min-width:0!important;
    font-size:13px!important;
    line-height:1!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .stat.datetime{
    gap:4px!important;
  }
  .stat.datetime #dateLabel,
  .stat.datetime #clock{
    font-size:12px!important;
  }

  .stat.weather{
    grid-template-columns:none!important;
    gap:4px!important;
  }
  #weatherIcon{font-size:19px!important}

  /* Third row: pause, x1, x2, x4, x8, report all in one row. */
  .timebar{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:4px!important;
    margin-top:4px!important;
  }
  .timebar button,
  #prevReportBtn{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    border-radius:10px!important;
    font-size:15px!important;
  }
  #prevReportBtn{
    font-size:21px!important;
  }

  /* Fourth row: same vertical height as third row. */
  .hud-message{
    height:38px!important;
    min-height:38px!important;
    margin-top:4px!important;
    border-radius:10px!important;
    padding:0 9px!important;
    font-size:11px!important;
  }
}

/* ===== v0.07 fixed10: elevator people ===== */

/* Waiting people face LEFT toward the elevator. */
.waiter{
  transform:scaleX(-1);
}
.waiter:nth-child(3n+1){animation:waitBobLeft 1.3s ease-in-out infinite!important}
.waiter:nth-child(3n+2){animation:waitBobLeft 1.6s ease-in-out infinite .2s!important}
.waiter:nth-child(3n){animation:waitBobLeft 1.9s ease-in-out infinite .4s!important}
@keyframes waitBobLeft{
  0%,100%{transform:translateY(0) scaleX(-1)}
  50%{transform:translateY(-1px) scaleX(-1)}
}

/* Actual stick people inside the moving elevator car. */
.elevator-car .cabin-passengers{
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  top:8px;
  overflow:hidden;
  pointer-events:none;
  z-index:5;
}
.elevator-car .cabin-person{
  position:absolute;
  width:7px;
  height:19px;
  opacity:.92;
  transform-origin:50% 100%;
}
.elevator-car .cabin-person .head{
  position:absolute;
  left:1px;
  top:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#090909;
}
.elevator-car .cabin-person .body{
  position:absolute;
  left:3px;
  top:5px;
  width:2px;
  height:7px;
  background:#090909;
}
.elevator-car .cabin-person .leg1,
.elevator-car .cabin-person .leg2{
  position:absolute;
  top:11px;
  width:2px;
  height:7px;
  background:#090909;
  transform-origin:top center;
}
.elevator-car .cabin-person .leg1{left:2px;transform:rotate(7deg)}
.elevator-car .cabin-person .leg2{left:4px;transform:rotate(-7deg)}
.elevator-car .cabin-person .arm1,
.elevator-car .cabin-person .arm2{
  position:absolute;
  top:6px;
  width:2px;
  height:6px;
  background:#090909;
  transform-origin:top center;
}
.elevator-car .cabin-person .arm1{left:1px;transform:rotate(12deg)}
.elevator-car .cabin-person .arm2{left:5px;transform:rotate(-12deg)}


/* ===== v0.07 fixed11: adopted one-room graphics ===== */
.sprite.room{
  background-size:64px 64px!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  image-rendering:auto;
}
.sprite.room.room-active::before,
.sprite.room.room-active::after{
  content:none!important;
  display:none!important;
}
.sprite.room.room-vacant{
  filter:brightness(.96) saturate(.92);
}