/* Layout: full-screen 3D map; paper-notebook HUD cards pinned to edges; catalogs dock above the toolbar */
:root{
  --paper:#f3eee3; --paper2:#e7dfcd; --ink:#2b2724; --muted:#6f675c;
  --brick:#b5452e; --teal:#2d6c70; --gold:#cf9428; --moss:#5d8a3f; --sky:#1b2033;
  --zr:#6fae55; --zc:#4f85c4; --zi:#d6a03a;
  --fd:'Neucha','Comic Sans MS','Segoe Print',cursive;
  --fb:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--sky);color:var(--ink);font-family:var(--fb);-webkit-user-select:none;user-select:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:14px 11px 15px 12px;box-shadow:3px 3px 0 rgba(43,39,36,.85)}
.num{font-variant-numeric:tabular-nums;font-weight:800}
button,select{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
kbd{font-family:var(--fb);font-size:10px;font-weight:800;border:1.5px solid var(--ink);border-radius:4px;padding:0 4px;background:#fff;line-height:14px;display:inline-block}

#hud{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));display:flex;gap:10px;align-items:flex-start;pointer-events:none;flex-wrap:wrap}
#hud>*{pointer-events:auto}
.city{display:flex;gap:10px;align-items:center;padding:6px 12px 6px 8px}
.city .nm{font-family:var(--fd);font-size:21px;line-height:1}
.city .rk{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);margin-top:3px}
.city .rk b{color:var(--brick);font-weight:800}
.bar{width:70px;height:6px;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden;background:#fff}
.bar i{display:block;height:100%;background:var(--brick);width:0}
.stats{display:flex;align-items:stretch;padding:5px 6px}
.st{display:flex;gap:7px;align-items:center;padding:0 12px;border-right:1.5px dashed rgba(43,39,36,.3)}
.st:last-child{border-right:0}
.st svg{width:24px;height:24px;flex:none}
.st .v{font-size:19px;line-height:1}
.st .l{font-size:10.5px;color:var(--muted);line-height:1.2}
.st .l.pos{color:var(--moss)} .st .l.neg{color:var(--brick)}
.speed{display:flex;gap:4px;align-items:center}
.speed button{width:30px;height:28px;border:2px solid var(--ink);border-radius:8px;background:#fff;display:grid;place-items:center;padding:0}
.speed button svg{width:14px;height:14px}
.speed button.on{background:var(--brick);color:#fff}
.util{display:flex;gap:2px;align-items:center;padding:5px 8px}
.util .st{padding:0 7px;gap:5px}
.util .st svg{width:20px;height:20px}
.util .st .v{font-size:14px}
.util .bad{color:var(--brick)}
.dem{display:flex;gap:4px;align-items:flex-end;padding:4px 10px 4px 8px}
.dem .lab{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.08em}
.dcol{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:800}
.dbar{width:12px;height:30px;border:1.5px solid var(--ink);border-radius:4px;background:#fff;position:relative;overflow:hidden}
.dbar i{position:absolute;left:0;right:0;bottom:0;height:0}
.spacer{flex:1}

#news{position:fixed;left:calc(10px + env(safe-area-inset-left,0px));top:calc(84px + env(safe-area-inset-top,0px));width:300px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.nc{padding:8px 11px 7px;pointer-events:auto;animation:pop .35s ease-out}
.nc .h{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}
.nc .h b{color:var(--ink);font-weight:800}
.nc .t{font-size:13px;line-height:1.35;margin-top:3px}
.nc .f{font-size:10.5px;color:var(--muted);margin-top:3px}
.nc.warn{border-color:var(--brick)} .nc.warn .h b{color:var(--brick)}
@keyframes pop{from{transform:translateY(-6px);opacity:.3}to{transform:none;opacity:1}}
#ticker{position:fixed;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top,0px));max-width:min(520px,calc(100vw - 680px));min-width:260px;padding:4px 10px;font-size:12.5px;display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden}
#ticker .tag{background:var(--brick);color:#fff;font-weight:800;font-size:10px;border-radius:4px;padding:1px 6px;flex:none}
#ticker .tx{overflow:hidden;text-overflow:ellipsis;font-family:Georgia,'Times New Roman',serif;font-style:italic}
#legend{position:fixed;left:50%;transform:translateX(-50%);top:calc(104px + env(safe-area-inset-top,0px));padding:5px 12px;font-size:12px;font-weight:700;display:flex;gap:12px;align-items:center}
#legend i{display:inline-block;width:18px;height:8px;border-radius:3px;margin-right:4px;vertical-align:middle}

#tasks{position:fixed;right:calc(10px + env(safe-area-inset-right,0px));top:calc(84px + env(safe-area-inset-top,0px));width:270px;padding:9px 12px 10px}
#tasks .hd{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer}
#tasks .hd b{font-family:var(--fd);font-size:17px;font-weight:400}
.dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.dots i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--moss)}
.dots i.d{background:var(--moss)} .dots i.c{background:var(--brick);border-color:var(--brick)}
.tk{display:flex;gap:10px;margin-top:8px;align-items:flex-start}
.tk .n{width:24px;height:24px;border-radius:50%;background:var(--brick);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.tk .tt{font-weight:800;font-size:14px}
.tk .td{font-size:12px;color:var(--muted);line-height:1.35;margin-top:2px}
#tasks .hide{display:block;margin-top:6px;margin-left:auto;font-size:11px;color:var(--muted);background:none;border:0;text-decoration:underline;padding:0}
#tasks.min .tk,#tasks.min .hide{display:none}
#tasks.done .tk .n{background:var(--moss)}

#toolbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));display:flex;gap:2px;padding:6px;overflow-x:auto;scrollbar-width:thin}
.tb{position:relative;flex:none;width:72px;padding:6px 2px 5px;border:2px solid transparent;border-radius:10px;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:700}
.tb svg{width:26px;height:26px}
.tb kbd{position:absolute;top:3px;right:6px;font-size:9px;line-height:12px;padding:0 3px}
.tb:hover{background:var(--paper2)}
.tb.on{border-color:var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink)}
.tb.red{color:var(--brick)}
.tsep{width:1.5px;background:rgba(43,39,36,.25);margin:6px 4px;flex:none}
#sub{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(98px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;padding:6px}
#sub button{border:2px solid var(--ink);border-radius:9px;background:#fff;padding:5px 10px;font-size:12.5px;font-weight:700;display:flex;gap:6px;align-items:center}
#sub button.on{background:var(--ink);color:var(--paper)}
#sub i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* catalog (roads, utilities, housing) */
#cat{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));width:min(1040px,calc(100vw - 20px));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
#cat>*{pointer-events:auto}
.catTop{display:flex;gap:10px;align-items:center;padding:6px 12px;flex-wrap:wrap;justify-content:center;max-width:100%}
.ct{font-size:12px;font-weight:800;color:var(--muted)}
.surfs{display:flex;gap:4px}
.sw{width:32px;height:26px;border:2px solid rgba(43,39,36,.35);border-radius:7px;padding:0;overflow:hidden;background:#fff}
.sw canvas{width:100%;height:100%;display:block}
.sw.on{border-color:var(--brick);box-shadow:0 0 0 2px var(--brick)}
.vsep{width:1.5px;height:26px;background:rgba(43,39,36,.25)}
#bridgeSel{border:2px solid var(--ink);border-radius:8px;background:#fff;padding:3px 6px;font-weight:700;font-size:12.5px}
.lvb{width:28px;height:28px;border:2px solid var(--ink);border-radius:8px;background:#fff;font-weight:800;font-size:16px;line-height:1;padding:0}
.lv{display:flex;flex-direction:column;align-items:center;min-width:58px;line-height:1.05}
.lv b{font-size:15px}.lv small{font-size:10px;color:var(--muted);font-weight:700}
.catMain{width:100%;padding:8px 12px 12px}
.catHd{display:flex;gap:8px;align-items:center}
.catHd .ttl{font-family:var(--fd);font-size:20px;text-decoration:underline;text-decoration-color:var(--brick);text-underline-offset:4px;margin-right:6px;white-space:nowrap}
.chip{border:2px solid var(--ink);border-radius:9px;background:#efd9cf;padding:2px 8px;font-size:12px;font-weight:800;white-space:nowrap}
.tabs{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.tab{border:0;background:none;padding:5px 9px;font-size:12.5px;font-weight:800;border-radius:8px;white-space:nowrap;color:var(--ink)}
.tab small{color:var(--muted);font-weight:700;margin-left:3px}
.tab.on{color:var(--brick);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.tab:hover{background:var(--paper2)}
.ib{width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;background:#fff;padding:0;font-weight:800;flex:none}
.cards{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 4px;scrollbar-width:thin}
.catMain.min .cards{display:none}
.rc{position:relative;flex:none;width:142px;border:2px solid var(--ink);border-radius:12px;background:#fbf8f2;padding:6px;text-align:left;display:flex;flex-direction:column;gap:2px;box-shadow:2px 2px 0 rgba(43,39,36,.6)}
.rc canvas{width:100%;height:64px;border-radius:7px;display:block;background:#ece5d6}
.rc b{font-size:12.5px;margin-top:4px;line-height:1.2}
.rc small{font-size:10.5px;color:var(--muted);line-height:1.2;min-height:13px}
.rc .pr{font-size:11.5px;font-weight:800;margin-top:2px}
.rc .out{font-size:11px;color:var(--muted);font-weight:700}
.rc.on{border-color:var(--brick);background:#fbeee8;box-shadow:2px 2px 0 var(--brick)}
.rc:hover{transform:translateY(-1px)}
.rc.lock{opacity:.55;border-color:rgba(43,39,36,.45);box-shadow:none}
.rc .lk{position:absolute;left:50%;top:52px;transform:translateX(-50%);background:#fff;border:1.5px solid rgba(43,39,36,.5);border-radius:10px;padding:0 7px;font-size:10.5px;font-weight:800;white-space:nowrap}
.rc .sz{position:absolute;left:10px;top:10px;background:#fff;border:1.5px solid var(--ink);border-radius:8px;padding:0 5px;font-size:10px;font-weight:800}

#tip{position:fixed;pointer-events:none;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:3px 10px;font-size:12.5px;font-weight:700;white-space:nowrap;transform:translate(14px,14px);box-shadow:2px 2px 0 var(--ink)}
#tip .bad{color:var(--brick)}
#toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(140px + env(safe-area-inset-top,0px));background:var(--ink);color:var(--paper);border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none}
#toast.show{opacity:1}
#modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(27,32,51,.35);padding:16px;z-index:60}
#modal .card{max-width:340px;padding:16px 18px}
#modal h3{font-family:var(--fd);font-weight:400;font-size:24px;margin:0 0 6px}
#modal p{margin:0 0 12px;font-size:14px;line-height:1.45;color:var(--muted)}
.btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.btn{border:2px solid var(--ink);border-radius:10px;padding:7px 14px;font-weight:800;background:#fff;box-shadow:2px 2px 0 var(--ink)}
.btn.pri{background:var(--brick);color:#fff}
.btn:active{transform:translate(2px,2px);box-shadow:none}
#info{position:fixed;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(104px + env(safe-area-inset-bottom,0px));width:270px;padding:10px 13px}
body.catOpen #info{bottom:calc(330px + env(safe-area-inset-bottom,0px))}
#info h4{margin:0 20px 2px 0;font-family:var(--fd);font-weight:400;font-size:19px}
#info .sb{font-size:11.5px;color:var(--muted);margin-bottom:4px}
#info .row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;border-bottom:1px dashed rgba(43,39,36,.2)}
#info .row:last-child{border:0}
#info .x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:18px;line-height:1}
.ok{color:var(--moss);font-weight:800}.no{color:var(--brick);font-weight:800}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.town{position:absolute;transform:translate(-50%,-120%);background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:2px 2px 0 var(--ink)}
.town span{font-weight:600;color:var(--muted);font-size:10.5px;margin-left:4px}

#loading{position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;gap:48px;padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));flex-wrap:wrap;z-index:50;transition:opacity .5s;overflow:auto}
#loading.out{opacity:0;pointer-events:none}
.polaroid{width:min(340px,80vw);aspect-ratio:1;max-width:100%;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:10px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg);position:relative}
.polaroid:before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(214,170,80,.6);transform:rotate(2deg)}
.polaroid canvas{width:100%;height:100%;border-radius:6px;display:block;background:#dcd6c8}
.lside{width:min(420px,90vw)}
.lside .eb{color:var(--brick);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lside h1{font-family:var(--fd);font-weight:400;font-size:48px;margin:4px 0 2px;line-height:1}
.lside .sub{color:var(--muted);font-weight:700}
.pbar{height:16px;border:2px solid var(--ink);border-radius:9px;margin-top:22px;overflow:hidden;background:#fff}
.pbar i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--brick) 0 6px,#cf6a4d 6px 12px);transition:width .2s}
.pst{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-top:6px}
.pst span:last-child{color:var(--muted)}
.tipbox{margin-top:22px;border-left:3px solid var(--brick);background:#fff;padding:10px 14px;border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.45}
.tipbox b{display:block;margin-bottom:2px}
#start{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
#start .btn{font-size:16px;padding:9px 18px}

@media (max-width:1250px){#ticker{display:none}}
@media (max-width:1000px){.dem{display:none}}
@media (max-width:760px){
  #news{width:min(260px,70vw)} #news .nc:nth-child(n+2){display:none}
  #tasks{width:220px} .util{display:none}
  .st{padding:0 7px} .st .l{display:none} .city .rk{display:none}
  #info{right:10px;left:10px;width:auto}
  .catTop .ct{display:none}
}
@media (prefers-reduced-motion:reduce){.nc{animation:none}#loading{transition:none}}