: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}}