:root{--bg:#cfe6f2;--panel:rgba(255,255,255,.92);--panel2:rgba(244,250,252,.95);--line:#bcd6df;--text:#17323d;--soft:#33515c;--muted:#5a7480;--teal:#0e8fa3;--teal2:#0a6f80;--green:#2e9e57;--gold:#f2a900;--bad:#d4412b;--warn:#c98300;--r:16px;--sh:0 4px 18px rgba(20,60,80,.22)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.4 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{overflow:hidden}
#app{position:relative;height:100vh;height:100dvh;width:100%;overflow:hidden}
body.embed-mode #app{height:100vh;height:100dvh}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,#gl:focus-visible{outline:3px solid #ff9f1a;outline-offset:2px}
.hud{position:absolute;z-index:4;pointer-events:none}.hud>*{pointer-events:auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);backdrop-filter:blur(6px)}
/* top bar */
#topL{left:12px;top:10px;display:flex;gap:8px;align-items:center}
#topC{left:50%;top:10px;transform:translateX(-50%)}
#topR{right:12px;top:10px;display:flex;gap:6px;align-items:center}
.pill{display:flex;align-items:center;gap:8px;padding:6px 14px;min-height:46px;border-radius:999px}
.site{font:700 16px Inter}.stars{display:flex;gap:2px;font-size:24px;line-height:1;color:#c7d3d8}.stars b{font-weight:400}.stars b.on{color:var(--gold);text-shadow:0 1px 0 #b57a00}
.ibtn{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;font:700 20px Inter;padding:0;box-shadow:var(--sh)}
.ibtn:disabled{opacity:.4}.ibtn[aria-pressed=true]{background:var(--teal);color:#fff;border-color:var(--teal2)}
#budget{display:flex;align-items:center;gap:10px;padding:6px 16px;min-height:50px;border-radius:999px}
.coin{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe48a,#e0a416);border:2px solid #b27a07;flex:none}
#cost{font:800 20px/1 Inter;font-variant-numeric:tabular-nums}#cost.over{color:var(--bad)}
#bbar{width:120px;height:10px;border-radius:6px;background:#dbe8ee;position:relative;overflow:hidden}#bbar i{position:absolute;left:0;top:0;bottom:0;background:var(--teal);width:0}#bbar i.over{background:var(--bad)}#bbar u{position:absolute;top:-2px;bottom:-2px;width:3px;background:var(--gold);text-decoration:none}
.small{font:600 12px Inter;color:var(--muted)}
#fps{font:700 12px Inter;padding:4px 9px;min-height:0;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
/* parts */
#parts{left:12px;top:72px;width:196px;padding:10px;display:flex;flex-direction:column;gap:8px;max-height:calc(100% - 200px);overflow:auto}
#parts h3{margin:0;font:800 12px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.row{display:flex;gap:6px}.row>*{flex:1}
.pbtn{min-height:56px;border-radius:14px;border:2px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:700 13px Inter;padding:2px 4px}
.pbtn[aria-pressed=true]{border-color:var(--teal);background:#e3f6f9;box-shadow:0 0 0 2px rgba(14,143,163,.25)}
.pbtn:disabled{opacity:.45;cursor:not-allowed}
.sw{display:block;width:44px;height:11px;border-radius:6px}.sw.wood{background:linear-gradient(#c58a4d,#8a5a2b)}.sw.steel{background:linear-gradient(#f4f7f8,#8a98a0)}.sw.cable{background:repeating-linear-gradient(90deg,#444 0 3px,#777 3px 6px)}
.szb{min-height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;font:800 15px Inter}.szb[aria-pressed=true]{border-color:var(--teal);background:#e3f6f9}
.tool{min-height:50px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 12px Inter;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.tool span{font-size:19px;line-height:1}.tool[aria-pressed=true]{border-color:var(--green);background:#e5f7ea}
select{width:100%;min-height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 14px Inter;padding:0 8px;color:var(--text)}
/* test panel */
#testp{right:12px;bottom:12px;width:232px;padding:10px;display:flex;flex-direction:column;gap:8px}
#testBtn{min-height:62px;border-radius:16px;border:0;background:var(--green);color:#fff;font:800 22px Inter;box-shadow:0 4px 0 #1f7a41}
#testBtn:active{transform:translateY(2px);box-shadow:0 2px 0 #1f7a41}#testBtn.stop{background:var(--bad);box-shadow:0 4px 0 #8f2615}
#testp .row button{min-height:46px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 13px Inter}
#testp .row button[aria-pressed=true]{border-color:var(--teal);background:#e3f6f9}
#testp .row button:disabled{opacity:.4}
.kv{display:flex;justify-content:space-between;gap:8px;font:600 13px Inter}.kv b{font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--teal);height:34px}
/* legend */
#legend{left:50%;bottom:12px;transform:translateX(-50%);padding:8px 14px;display:flex;flex-direction:column;gap:4px;align-items:stretch;width:min(380px,calc(100% - 520px))}
#lgbar{height:12px;border-radius:7px;border:1px solid var(--line)}
#legend .lab{display:flex;justify-content:space-between;font:700 11px Inter;color:var(--soft)}
#viewrow{display:flex;gap:4px}#viewrow button{flex:1;min-height:36px;border-radius:10px;border:2px solid var(--line);background:#fff;font:700 12px Inter}#viewrow button[aria-pressed=true]{border-color:var(--teal);background:#e3f6f9}
#status{left:50%;top:70px;transform:translateX(-50%);max-width:min(520px,92%);text-align:center;pointer-events:none}
.toast{display:inline-block;background:#173a47;color:#fff;border-radius:14px;padding:9px 16px;font:700 14px/1.3 Inter;box-shadow:var(--sh);animation:tin .2s}
.toast.bad{background:#a93420}.toast.good{background:#1f7a41}.toast.warn{background:#8a5b00}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}
#ghost{position:absolute;z-index:5;pointer-events:none;background:#173a47;color:#fff;border-radius:10px;padding:5px 10px;font:700 12px/1.25 Inter;display:none;max-width:230px}
#ghost.bad{background:#a93420}
/* member card */
#mcard{left:50%;bottom:92px;transform:translateX(-50%);width:min(420px,calc(100% - 24px));padding:12px 14px;display:none}
#mcard h4{margin:0 0 4px;font:800 16px Inter}#mcard p{margin:4px 0;font:600 13px/1.4 Inter;color:var(--soft)}
#mcard .row button{min-height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 13px Inter}
.xb{position:absolute;right:8px;top:6px;width:40px;height:40px;border-radius:12px;border:0;background:transparent;font-size:22px}
/* modals */
.modal{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(10,40,55,.5);padding:12px}
.modal.open{display:flex}
.sheet{background:#fff;color:var(--text);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);width:min(640px,100%);max-height:calc(100% - 8px);overflow:auto;padding:18px 20px;position:relative}
.sheet h2{margin:0 0 8px;font:800 22px Inter}.sheet h3{margin:14px 0 4px;font:800 15px Inter}.sheet p{margin:6px 0;font:500 14px/1.5 Inter;color:var(--soft)}
.sheet .x{position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:12px;border:0;background:#eef5f8;font-size:22px}
.big{min-height:54px;padding:0 20px;border-radius:14px;border:0;background:var(--teal);color:#fff;font:800 17px Inter;box-shadow:0 3px 0 var(--teal2)}.big.alt{background:#fff;color:var(--text);border:2px solid var(--line);box-shadow:none}.big.go{background:var(--green);box-shadow:0 3px 0 #1f7a41}
.rstars{font-size:54px;letter-spacing:6px;text-align:center;color:#c7d3d8;line-height:1.1}.rstars b{font-weight:400}.rstars b.on{color:var(--gold);text-shadow:0 2px 0 #b57a00}
table.t{border-collapse:collapse;width:100%;font:600 12px Inter}table.t th,table.t td{border-bottom:1px solid #e1ecf0;padding:5px 6px;text-align:right}table.t th:first-child,table.t td:first-child{text-align:left}
.eq{font:600 13px/1.5 "JetBrains Mono",ui-monospace,Consolas,monospace;background:#f1f7fa;border-radius:10px;padding:8px 10px;margin:6px 0;overflow:auto;white-space:pre-wrap}
details{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:8px 0}summary{font:800 15px Inter;cursor:pointer;min-height:32px}
.ok{color:#1f7a41;font-weight:800}.no{color:var(--bad);font-weight:800}
.tg{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #e1ecf0;font:700 14px Inter}.tg button{min-width:76px;min-height:42px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 13px Inter}.tg button[aria-pressed=true]{background:var(--teal);color:#fff;border-color:var(--teal2)}
.map{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.site-c{border:2px solid var(--line);border-radius:16px;padding:12px;text-align:left;background:#f5fafc;min-height:120px;display:flex;flex-direction:column;gap:3px}.site-c b{font:800 17px Inter}.site-c:disabled{opacity:.5}.site-c[aria-pressed=true]{border-color:var(--teal);background:#e3f6f9}
#tour{left:50%;bottom:96px;transform:translateX(-50%);width:min(440px,calc(100% - 24px));padding:14px 16px;display:none;border:2px solid var(--gold)}
#tour p{margin:0 0 10px;font:700 15px/1.4 Inter}#tour .row button{min-height:46px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 14px Inter}#tour .row .nx{background:var(--teal);color:#fff;border-color:var(--teal2)}
#load,#err{position:absolute;inset:0;z-index:30;background:linear-gradient(#cfe6f2,#e9f5fa);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}
#err{display:none}#load h1,#err h1{margin:0;font:800 26px Inter}#load .bar{width:min(300px,80%);height:12px;border-radius:7px;background:#fff;overflow:hidden;border:1px solid var(--line)}#load .bar i{display:block;height:100%;width:0;background:var(--teal);transition:width .2s}
#live{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#dbg{position:absolute;left:12px;bottom:12px;z-index:9;font:600 11px/1.3 monospace;background:rgba(0,0,0,.65);color:#fff;padding:5px 8px;border-radius:8px;display:none;white-space:pre}
@media (max-width:760px){
  #topL{left:8px;top:6px}.site{font-size:13px}.stars{font-size:16px}#topL .pill{padding:4px 10px;gap:6px}
  #topR #fps{position:absolute;right:0;top:calc(100% + 6px)}
  #topC{top:56px}#budget{padding:4px 12px;min-height:44px}#bbar{width:70px}#cost{font-size:18px}
  #topR{right:8px;top:6px;gap:4px}.ibtn{width:44px;height:44px}
  #parts{left:0;right:0;top:auto;bottom:0;width:auto;max-height:none;border-radius:16px 16px 0 0;padding:6px 8px;flex-direction:row;flex-wrap:wrap;gap:5px;align-items:stretch}
  #parts h3{display:none}#parts .grp{display:flex;gap:5px;flex:1 1 calc(50% - 5px)}#parts .pbtn{flex:1;min-width:0;min-height:56px;padding:2px 0;font-size:12px}#parts .sw{width:30px}#parts .szb{flex:1;min-width:0;min-height:56px}#parts .tool{flex:1;min-width:0;min-height:56px}#parts select{min-height:56px;font-size:13px}
  #testp{left:8px;right:8px;bottom:150px;top:auto;width:auto;padding:6px;gap:6px;flex-direction:row;align-items:stretch}#testBtn{flex:2;min-height:56px;font-size:19px}#testp .row{flex:3}#testp .row button{min-height:56px}#testp .kv,#testp input[type=range],#bImp{display:none}#testp .row:last-child{display:none}
  #legend{left:8px;right:8px;transform:none;width:auto;bottom:auto;top:104px;padding:4px 8px}#legend #lgarr,#legend #viewrow{display:none}
  #mcard{bottom:222px}#tour{bottom:222px}#status{top:100px}
  .map{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
/* workshop additions */
#chips{left:200px;right:340px;top:10px;display:flex;gap:6px;justify-content:center;overflow-x:auto;padding:2px 2px 6px}
.chip{min-height:50px;min-width:62px;border-radius:14px;border:2px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:700 12px Inter;padding:2px 8px;box-shadow:var(--sh)}
.chip span{font-size:21px;line-height:1}.chip[aria-pressed=true]{border-color:var(--teal);background:#e3f6f9}.chip i{font-style:normal;font-size:11px;color:var(--gold);letter-spacing:1px;min-height:12px}
#ctl{left:12px;top:72px;width:268px;padding:12px;display:none;flex-direction:column;gap:10px;max-height:calc(100% - 180px);overflow:auto}
#ctl h3,#meters h3{margin:0;font:800 12px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ctl-row{display:flex;flex-direction:column;gap:2px}.ctl-row label{display:flex;justify-content:space-between;font:700 13px Inter}.ctl-row label b{font-variant-numeric:tabular-nums;color:var(--teal2)}
.seg{display:flex;gap:4px}.seg button{flex:1;min-height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 13px Inter;padding:0 4px}.seg button[aria-pressed=true]{border-color:var(--teal);background:#e3f6f9}
.act{min-height:50px;border-radius:14px;border:0;background:var(--green);color:#fff;font:800 17px Inter;box-shadow:0 3px 0 #1f7a41}.act.alt{background:#fff;color:var(--text);border:2px solid var(--line);box-shadow:none}
#meters{right:12px;top:72px;width:264px;padding:12px;display:none;flex-direction:column;gap:6px}
#meters .kv{padding:2px 0;border-bottom:1px dashed #d8e6ec}.kv .u{font-weight:500;color:var(--muted);margin-left:3px}.kv.in b{color:#1b5fb0}.kv.out b{color:#1f7a41}
#msg{font:600 13px/1.35 Inter;color:var(--soft);background:#f1f7fa;border-radius:10px;padding:6px 9px}
#goal{left:50%;bottom:14px;transform:translateX(-50%);width:min(560px,calc(100% - 600px));padding:10px 14px;display:none;flex-direction:column;gap:6px}
#goal b{font:800 15px Inter}#goal p{margin:0;font:600 13px/1.35 Inter;color:var(--soft)}#goal input{min-height:44px;width:110px;border-radius:12px;border:2px solid var(--line);padding:0 8px;font:700 16px Inter}
#goal .row button{min-height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 13px Inter}
.slot{display:flex;flex-direction:column;gap:4px}.slot .seg{flex-wrap:wrap}.slot .seg button{min-height:48px;font-size:12px}
.sank svg{width:100%;height:64px;display:block}
.dim{opacity:.55}
@media (max-width:760px){
  #chips{left:8px;right:8px;top:58px;gap:4px;justify-content:flex-start}.chip{min-width:56px;min-height:48px;padding:2px 4px;font-size:11px}
  #ctl{left:0;right:0;top:auto;bottom:0;width:auto;max-height:36%;border-radius:16px 16px 0 0;padding:8px 12px}
  #meters{left:8px;right:8px;top:116px;width:auto;padding:6px 10px;max-height:150px;overflow:auto}#meters .kv{font-size:12px}#meters .sank,#meters h3,#meters .why{display:none}
  #goal{left:8px;right:8px;transform:none;width:auto;bottom:auto;top:266px;padding:6px 10px}
  #status{top:108px}#tour{bottom:38%}
}
@media (max-width:760px){
  #topL{display:none}#topR{left:8px;right:8px;justify-content:flex-end}#topR #fps{position:static;margin-right:auto}
  #topR .ibtn{width:44px;height:44px}
  #meters{max-height:116px}#meters .kv:nth-child(n+7){display:none}
  #ctl{max-height:34%}
  #tour{bottom:36%;padding:8px 12px}#tour p{font-size:13px;margin:0 0 6px}#tour .row button{min-height:44px}
}
body.embed-mode #app{height:100vh;height:100dvh}