*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#0e1426;--pn:#171f3a;--pn2:#1f2a4d;--ln:#2d3a66;--tx:#eef1fb;--mu:#98a3c7;--ac:#ffc94d;--rd:#ef4b52;--gr:#4cd37a;--bl:#4c93ee}
body.day{--bg:#e9e4d6;--pn:#fbf6e8;--pn2:#efe6cf;--ln:#d5c9a8;--tx:#241d12;--mu:#76694c}
body{font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh}
a{color:inherit;text-decoration:none}
.bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 10px 6px;max-width:860px;margin:0 auto}
.bar h1{font-size:15px;flex:1 1 100%;display:flex;gap:8px;align-items:baseline}
.bar h1 small{color:var(--mu);font-weight:400;font-size:12px}
.btn{border:1px solid var(--ln);background:var(--pn);color:var(--tx);border-radius:9px;padding:7px 10px;font:inherit;font-size:13px;cursor:pointer;min-height:36px}
.btn.on{background:var(--ac);color:#241d12;border-color:var(--ac);font-weight:600}
.btn.rd.on{background:var(--rd);color:#fff;border-color:var(--rd)}
.btn.gr.on{background:var(--gr);color:#0d2a17;border-color:var(--gr)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.wrap{display:flex;justify-content:center;padding:4px 0 24px}
.dev{position:relative;background:var(--pn);border:1px solid var(--ln);overflow:hidden;width:390px;max-width:100%}
.dev.tablet{width:770px}
.hud{display:flex;gap:6px;padding:8px;background:#0c1224}
.hud div{flex:1;border:2px solid #2a3766;border-radius:8px;padding:5px 6px;font-size:12px;color:#dfe6ff;background:#141d3b;text-align:center;white-space:nowrap}
.hud i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:0}
.scene{position:relative;isolation:isolate;z-index:0;margin:0 auto;overflow:hidden;image-rendering:pixelated;background:#7a4a28}
.scene .wall{position:absolute;left:0;top:0;right:0;height:144px;background:url(a/wall_back_navy.png) repeat-x;background-size:96px 144px}
.scene .floor{position:absolute;left:0;right:0;top:144px;bottom:0;background:url(a/floor_wood_a.png);background-size:96px 96px}
.scene img,.scene canvas,.scene .sp{position:absolute;image-rendering:pixelated}
.scene .sp{width:256px;height:256px;background-size:2560px 1024px}
.scene img,.scene .sp{pointer-events:none}
.scene canvas.mach{cursor:pointer}
.scene .shade{position:absolute;inset:0;pointer-events:none;background:#0a1030;opacity:0;transition:opacity .2s}
body.night .scene .shade{opacity:.28}
.scene .grid{position:absolute;inset:0;pointer-events:none;display:none;background-image:linear-gradient(#fff6 1px,transparent 1px),linear-gradient(90deg,#fff6 1px,transparent 1px);background-size:96px 96px;background-position:0 0}
.scene.showgrid .grid{display:block}
.scene .foot{position:absolute;border:2px dashed #ffc94d;display:none;pointer-events:none;z-index:900;color:#ffc94d;font:600 11px system-ui;padding:1px 3px;background:#0008}
.scene.showgrid .foot{display:block}
.mach{cursor:pointer}
.mach.hl{filter:drop-shadow(0 0 0 #fff)}
.tapme{position:absolute;z-index:901;font:600 11px system-ui;color:#241d12;background:var(--ac);padding:3px 7px;border-radius:9px;pointer-events:none;animation:bob 1.2s ease-in-out infinite;white-space:nowrap}
@keyframes bob{50%{transform:translateY(-3px)}}
.pop{position:absolute;z-index:902;background:#4cd37a;color:#07210f;font:700 12px system-ui;padding:4px 8px;border-radius:10px;border:2px solid #0b3a1c;pointer-events:none;white-space:nowrap;animation:pop 3s forwards}
@keyframes pop{0%{transform:translateY(8px) scale(.5);opacity:0}12%{transform:translateY(0) scale(1.1);opacity:1}20%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.tray{padding:10px;display:flex;flex-direction:column;gap:8px}
.tray .lbl{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chips .btn{padding:8px 2px;font-size:12px;text-align:center;line-height:1.15}
.info{margin:0 10px 10px;border:1px solid var(--ln);background:var(--pn2);border-radius:10px;padding:9px 11px;font-size:13px}
.info b{display:block;margin-bottom:2px}
.info p{color:var(--mu)}
.info .row{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.tag{font-size:11px;border:1px solid var(--ln);border-radius:20px;padding:2px 8px;color:var(--mu)}
.nav{display:flex;gap:6px;padding:8px;background:#0c1224}
.nav div{flex:1;border:2px solid #2a3766;border-radius:8px;padding:6px 0;font-size:11px;text-align:center;color:#9fb0e6;background:#141d3b}
.nav div.on{border-color:#4c93ee;color:#fff;background:#1b2c5c}
.sheet{position:absolute;isolation:isolate;left:0;right:0;bottom:0;background:var(--pn);border-top:2px solid var(--ln);border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .18s;z-index:50;max-height:78%;overflow:auto;box-shadow:0 -8px 24px #0008;color:var(--tx)}
.sheet.open{transform:none}
.tablet .sheet{left:0;right:auto;top:0;bottom:0;width:330px;max-height:none;border-radius:0;border-top:0;border-right:2px solid var(--ln);transform:translateX(-105%)}
.tablet .sheet.open{transform:none}
.sheet .gr{width:38px;height:4px;background:var(--ln);border-radius:4px;margin:7px auto}
.tablet .sheet .gr{display:none}
.sheet header{display:flex;align-items:center;gap:8px;padding:6px 12px 8px}
.sheet header h2{font-size:16px;flex:1}
.sheet header .x{width:34px;height:34px;border-radius:50%;border:1px solid var(--ln);background:var(--pn2);color:var(--tx);font-size:16px}
.sec{padding:4px 12px 8px}
.sec h3{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-bottom:5px;display:flex;gap:6px;align-items:center}
.sec h3 i{width:9px;height:9px;border-radius:50%;display:inline-block}
.job{border:1px solid var(--ln);background:var(--pn2);border-radius:10px;padding:8px 10px;margin-bottom:6px;font-size:13px}
.job.need{border-color:var(--rd);background:#ef4b5220}
.job .n{color:var(--mu);font-size:12px;margin-right:5px}
.job .pb{height:5px;background:var(--ln);border-radius:5px;margin-top:6px;overflow:hidden}
.job .pb u{display:block;height:100%;background:var(--ac)}
.job .acts{display:flex;gap:6px;margin-top:7px}
.job .acts .btn{flex:1;min-height:38px}
.job.new{border-color:var(--gr);background:#4cd37a22}
.more{font-size:12px;color:var(--mu);padding:2px 2px 6px}
.empty{color:var(--mu);font-size:13px;padding:2px 2px 8px}
.idx{max-width:880px;margin:0 auto;padding:12px}
.idx h1{font-size:20px}
.idx p.lead{color:var(--mu);margin:4px 0 12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.card{border:1px solid var(--ln);background:var(--pn);border-radius:12px;overflow:hidden;display:block}
.card .th{background:#2c2540;height:128px;position:relative;overflow:hidden}
.card .th canvas{position:absolute;image-rendering:pixelated;left:50%;bottom:10px;transform:translateX(-50%)}
.card .th .fl{position:absolute;left:0;right:0;bottom:0;height:26px;background:#7a4a28 url(a/floor_wood_a.png);background-size:48px 48px;image-rendering:pixelated}
.card .tx{padding:8px 10px}
.card .tx b{font-size:14px}
.card .tx span{display:block;color:var(--mu);font-size:12px}
.card .num{position:absolute;left:6px;top:6px;z-index:2;background:var(--ac);color:#241d12;font-weight:700;border-radius:8px;padding:1px 7px;font-size:13px}

.dev:not(.tablet) .sheet{position:static;transform:none;display:none;max-height:none;border-radius:0;border-top:2px solid var(--ln);box-shadow:none}
.dev:not(.tablet) .sheet.open{display:block}
.dev:not(.tablet) .sheet .gr{display:none}
.dev.sopen:not(.tablet) .tray,.dev.sopen:not(.tablet) .info{display:none}