/* ============================================================
   BB RUST — COMMUNITY MAP  (shares the bbrust.com "Field HUD" chassis)
   Tokens: Void #08040a · Plate rgba(255,73,239,.1) + #ff49ef frame
   Phosphor #ebe2f0 text · Signal #d63bc8 · Threat #dc143c
   Amber #e8b34b · Azure #00a8ff · Blurple #5865F2 (Discord only)
   Type: Mochi Boom DEMO (display) / Google Sans Code (everything else)
   ============================================================ */
:root{
  --void:#08040a;
  --plate:rgba(16,9,21,.68);
  --plate-hi:rgba(24,14,31,.82);
  --plate-pink:rgba(255,73,239,.1);
  --frame:#ff49ef;
  --chrome:rgba(177,160,190,.24);
  --chrome-hi:rgba(177,160,190,.45);
  --bracket:rgba(217,196,228,.6);
  --text:#ebe2f0;
  --dim:#a494b1;
  --faint:#6f5c7c;
  --signal:#d63bc8;
  --blurple:#5865F2;
  --threat:#dc143c;
  --threat-txt:#ff6079;
  --amber:#e8b34b;
  --azure:#00a8ff;
  --ok:#8fe28f;
  --f-disp:'Google Sans Code',Consolas,'Courier New',monospace;
  --f-mono:'Google Sans Code',Consolas,'Courier New',monospace;
  --f-head:'Mochi Boom DEMO',var(--f-disp);
  --gap:14px;
  --pad:16px;
}
@font-face{
  font-family:'Mochi Boom DEMO';
  src:local('Mochi Boom DEMO'),url('./Mochi Boom DEMO.ttf') format('truetype');
  font-display:swap;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void)}
body{
  font-family:var(--f-mono);font-size:16px;line-height:1.5;color:var(--text);
  background:var(--void);overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;
}
img{max-width:100%;display:block}
a{color:var(--text)}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:1px solid var(--signal);outline-offset:2px}
[hidden]{display:none!important}
.dim{color:var(--dim)}
.faint{color:var(--faint)}

/* ---- console shell ---------------------------------------- */
.console{position:relative;z-index:2;max-width:1720px;margin:0 auto;padding:12px 16px 24px;flex:1 0 auto;width:100%}

/* ---- plates ------------------------------------------------ */
.plate{
  position:relative;background:var(--plate-pink);border:2px solid var(--frame);border-radius:16px;
  overflow:hidden;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.p-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px var(--pad) 9px;border-bottom:1px solid var(--chrome);
}
.p-head h2{
  font-family:var(--f-head);font-weight:400;font-size:var(--head-size,36px);white-space:nowrap;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.05;
}
.p-head h2.h-small{font-size:26px}
.p-head h2 .h-tail{font-family:var(--f-mono);font-weight:600;color:var(--dim);font-size:.42em;letter-spacing:.16em;margin-left:.3em;vertical-align:middle}   /* "· AUGUST 2026 WIPE" — mono face: the demo heading font has no digits */
.p-sub{display:block;font-family:var(--f-mono);font-weight:400;font-size:14px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-top:-3px;white-space:normal}
.p-tag{font-size:13px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rail .p-head h2:not(.h-small){font-size:clamp(22px,2.2vw,36px)}   /* rail is 3/12 wide now — keep the heading on one line */
.p-body{padding:var(--pad)}

/* ---- MOD-01: strip — the standard bbrust.com header (same rules as the live site) ---- */
.strip{margin-bottom:var(--gap)}
.strip-main{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:14px var(--pad)}
.strip-id{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.strip-word{height:84px;width:auto;max-width:min(56vw,320px);object-fit:contain}
.strip-buns{height:84px;width:auto;object-fit:contain;flex:none}
/* flex-basis 0 + a floor: the nav gives up width (its rows re-wrap) before the auth/Discord group wraps to a 2nd row */
.strip-nav{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 1 0;min-width:min(100%,300px);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.strip-nav-row{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center}
.strip-nav a,.strip-nav a:visited{color:#fff;text-decoration:none}
.strip-nav a:hover{color:var(--signal)}
.strip-right{display:flex;flex-direction:column;align-items:center;gap:8px;margin-left:auto}   /* Discord over Steam, stacked (same as bbrust.com) */
.auth-area{display:flex;align-items:center;gap:10px}
.discord-btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--blurple);color:#fff;
  font-family:var(--f-disp);font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:10px 18px;border-radius:999px;transition:filter .15s;white-space:nowrap;
}
.discord-btn:hover{filter:brightness(1.12)}
.discord-btn svg{width:19px;height:15px;flex:none}

/* auth widgets */
/* Valve's official "Sign in through Steam" image button (sits_landing.png, 114×43) */
.steam-btn{display:inline-flex;align-items:center;line-height:0;border-radius:3px;transition:filter .15s,transform .15s}
.steam-btn img{display:block;width:114px;height:43px}
.steam-btn:hover{filter:brightness(1.12)}
.steam-btn.pulse{animation:btn-pulse 1.2s ease-out 2}
@keyframes btn-pulse{0%{box-shadow:0 0 0 0 rgba(214,59,200,.8)}100%{box-shadow:0 0 0 18px rgba(214,59,200,0)}}
.dev-btn{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px dashed var(--amber);padding:6px 10px;text-decoration:none;border-radius:4px;white-space:nowrap}
.dev-btn:hover{background:rgba(232,179,75,.12)}
.user-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--chrome-hi);background:rgba(9,4,14,.55);padding:6px 12px 6px 6px;border-radius:999px}
.user-chip img,.user-chip .ava-fallback{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--chrome-hi);display:grid;place-items:center;font-size:15px;background:var(--plate-hi)}
.user-chip .u-wrap{min-width:0;max-width:220px}
.user-chip .u-name{font-weight:600;font-size:15px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .u-sub{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400;white-space:nowrap}
.user-chip .u-sub.ph{color:var(--amber)}
.user-chip form{display:inline}
.user-chip .out{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:4px 6px}
.user-chip .out:hover{color:var(--text)}

/* ---- deck -------------------------------------------------- */
.deck{display:grid;gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}   /* rail = map panel height */
.deck > *,.rail > *{min-width:0}
.mod-stage{grid-column:1/10;display:flex;flex-direction:column}   /* rail = 3/12 (was 4/12) */
.rail{grid-column:10/13;display:flex;flex-direction:column;gap:var(--gap);min-height:0;contain:size}
/* contain:size — the rail's content must NOT size the grid row (an auto row grows to its tallest item's content), or a long
   ALL MARKERS list stretches the whole deck instead of scrolling. With it the row = map panel height and the rail is stretched to match. */
.mod-you{flex:0 0 auto}
.mod-list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}   /* ALL MARKERS fills what's left … */
.mod-list .poi-list{flex:1 1 auto;min-height:0;max-height:none}          /* … and its list scrolls inside */

/* ---- MAP STAGE -------------------------------------------- */
.stage{
  position:relative;overflow:hidden;background:#1a3640;   /* = map.jpg's edge ocean at the 60 % default saturation; app.js re-samples + re-filters it live */
  height:clamp(520px,calc(100vh - 230px),980px);
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;outline:none;
}
.stage.dragging{cursor:grabbing}
.stage.placing{cursor:crosshair}
.stage.over-base{cursor:pointer}   /* hovering one of your own TC circles */
.stage-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.map-pending{position:absolute;left:0;top:0;width:2048px;height:2048px;display:grid;place-items:center;text-align:center;padding:10%;box-sizing:border-box;
  font-size:clamp(28px,3vw,56px);line-height:1.4;color:var(--dim);background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 40px,transparent 40px 80px);border:2px dashed var(--chrome-hi)}
.stage-world img{display:block;width:2048px;height:2048px;max-width:none;pointer-events:none;image-rendering:auto}
.stage-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage-markers{position:absolute;inset:0;pointer-events:none;overflow:visible}

/* pins: anchored at the bottom tip */
.pin{
  position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;
  width:0;height:0;will-change:transform;
}
.pin-body{
  position:absolute;left:-15px;top:-36px;width:30px;height:30px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--pc,var(--signal));
  border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.55);
  transition:transform .12s;
}
.pin-ico{
  position:absolute;left:-15px;top:-36px;width:30px;height:30px;display:grid;place-items:center;
  font-size:15px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));pointer-events:none;
}
.pin::after{ /* ground dot */
  content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(0,0,0,.4);
}
.pin-label{
  position:absolute;left:14px;top:-30px;white-space:nowrap;pointer-events:none;
  font-size:12px;font-weight:600;letter-spacing:.03em;color:#fff;
  background:rgba(9,4,14,.72);border:1px solid rgba(255,255,255,.18);padding:2px 6px;border-radius:4px;
  text-shadow:0 1px 2px #000;max-width:180px;overflow:hidden;text-overflow:ellipsis;
}
.pin:hover .pin-body,.pin.sel .pin-body{transform:rotate(-45deg) scale(1.18)}
.pin.sel::before{
  content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;
  border:2px solid var(--pc,var(--signal));animation:pin-ring 1.4s ease-out infinite;
}
@keyframes pin-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.pin.mine .pin-body{border-color:#fff;box-shadow:0 0 0 2px var(--signal),0 2px 8px rgba(0,0,0,.55)}
.pin.dimmed{opacity:.28}
.ghost-pin{pointer-events:none;opacity:.85;z-index:5}
.ghost-pin .pin-ico{top:-36px}
.ghost-pin .pin-body{background:var(--signal)}

/* popup */
.popup{
  position:absolute;z-index:6;width:min(300px,80%);
  background:rgba(12,6,16,.94);border:1px solid var(--frame);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);padding:12px 14px 10px;
  transform:translate(-50%,calc(-100% - 48px));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.popup::after{
  content:"";position:absolute;left:calc(50% + var(--ax,0px));bottom:-7px;width:12px;height:12px;
  background:rgba(12,6,16,.94);border-right:1px solid var(--frame);border-bottom:1px solid var(--frame);
  transform:translateX(-50%) rotate(45deg);
}
.popup.below{transform:translate(-50%,14px)}
.popup.below::after{bottom:auto;top:-7px;border-right:none;border-bottom:none;border-left:1px solid var(--frame);border-top:1px solid var(--frame)}
.popup .pp-cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pc,var(--signal));display:flex;align-items:center;gap:6px}
.popup .pp-title{font-family:var(--f-disp);font-weight:700;font-size:17px;letter-spacing:.02em;margin:2px 0 4px;word-wrap:break-word}
.popup .pp-title-lead{padding-right:24px;margin-top:0}   /* first line of the marker popup: leave room for the ✕ */
.popup .pp-ico{font-size:16px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.popup .pp-note{font-size:13px;color:#d2cad8;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;margin-bottom:8px}
.popup .pp-img{display:block;margin:2px 0 8px;border-radius:6px;overflow:hidden;border:1px solid var(--chrome);background:#000}
.popup .pp-img img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}   /* same 4:3 frame the player cropped in */
.popup .pp-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);letter-spacing:.04em;border-top:1px solid var(--chrome);padding-top:8px}
.popup .pp-meta img,.popup .pp-meta .ava-fallback{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--chrome-hi);display:grid;place-items:center;font-size:10px;background:var(--plate-hi)}
.popup .pp-meta b{color:var(--text);font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popup .pp-meta .grid{margin-left:auto;font-weight:600;color:var(--text)}
.popup .pp-cat .pp-grid{margin-left:auto;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:none;color:var(--text)}
/* privacy switch (YOUR MARKERS): show/hide your name on your vending machines */
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 4px;padding:10px 12px;border:1px solid var(--chrome);border-radius:8px;font-size:12px;color:var(--dim);cursor:pointer;letter-spacing:.02em}
.pref-row b{display:block;color:var(--text);font-weight:600;font-size:14px;letter-spacing:.02em}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{position:absolute;opacity:0;width:0;height:0;margin:0}
.switch i{position:absolute;inset:0;background:rgba(177,160,190,.25);border:1px solid var(--chrome-hi);border-radius:999px;transition:background .15s,border-color .15s}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .15s}
.switch input:checked + i{background:var(--signal);border-color:var(--signal)}
.switch input:checked + i::after{transform:translateX(18px)}
.switch input:focus-visible + i{box-shadow:0 0 0 3px rgba(214,59,200,.35)}
.switch input:disabled + i{opacity:.6}
.popup .pp-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.popup .x-btn{position:absolute;top:6px;right:8px}
.mini-btn{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--chrome-hi);border-radius:4px;color:var(--text)}
.mini-btn:hover{border-color:var(--bracket);background:var(--plate-hi)}
.mini-btn.danger{color:var(--threat-txt);border-color:rgba(220,20,60,.5)}
.mini-btn.danger:hover{background:rgba(220,20,60,.15)}
.x-btn{font-size:14px;color:var(--dim);padding:4px 8px;line-height:1}
.x-btn:hover{color:var(--text)}

/* floating hud */
.hud{position:absolute;z-index:4;display:flex;gap:6px;align-items:center}
.hud-tl{left:12px;top:12px}
.hud-br{right:12px;bottom:12px;flex-direction:column}
.hud-bl{left:12px;bottom:12px}
.hud-btn{
  min-width:36px;height:36px;padding:0 10px;display:grid;place-items:center;
  background:rgba(9,4,14,.78);border:1px solid var(--chrome-hi);color:var(--text);
  font-size:18px;line-height:1;border-radius:6px;transition:background .15s,border-color .15s;
}
.hud-btn:hover{background:rgba(24,14,31,.95);border-color:var(--bracket)}
.hud-add{
  font-family:var(--f-disp);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--signal);border-color:transparent;color:#fff;padding:0 16px;border-radius:999px;height:38px;
}
.hud-add:hover{background:var(--signal);filter:brightness(1.12);border-color:transparent}
.hud-add.on{background:var(--amber);color:#1a1206}
.hud-toggle{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.hud-toggle input{accent-color:var(--signal);width:14px;height:14px;cursor:pointer}
.place-hint{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:5;
  background:rgba(232,179,75,.95);color:#1a1206;font-size:13px;font-weight:600;letter-spacing:.06em;
  padding:8px 14px;border-radius:999px;display:flex;gap:12px;align-items:center;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.place-hint .link-btn{color:#1a1206;text-decoration:underline;font-size:12px}
.link-btn{font-size:12px;letter-spacing:.06em;color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.link-btn:hover{color:var(--text)}

/* legend */
.legend-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:9px var(--pad) 11px;border-top:1px solid var(--chrome)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.layer-toggles{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 12px;margin-left:auto}
#map-img{will-change:filter}   /* filter = the fixed house look set by app.js (saturate 60 %) */
.legend .leg{display:inline-flex;align-items:center;gap:6px}
.legend .leg i{width:10px;height:10px;border-radius:50%;background:var(--pc);display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.35)}

/* ---- RAIL: your markers ----------------------------------- */
.quota{margin:6px 0 12px}
.quota-row{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.quota-row b{color:var(--text);font-size:16px;letter-spacing:.04em}
.quota-bar{height:4px;background:rgba(177,160,190,.14);position:relative;margin-top:5px}
.quota-bar i{position:absolute;inset:0 auto 0 0;background:var(--azure);min-width:3px;transition:width .3s}
.quota-bar.full i{background:var(--threat)}
.signin-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.signin-cta p{font-size:14px;color:#d2cad8;line-height:1.5}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:600;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid transparent;
}
.btn.primary{background:var(--signal);color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.primary:disabled{opacity:.5;filter:none;cursor:not-allowed}
.btn.ghost-btn{border-color:var(--chrome-hi);color:var(--text)}
.btn.ghost-btn:hover{border-color:var(--bracket);background:var(--plate-hi)}
.btn.small{font-size:12px;padding:6px 12px}

/* ---- RAIL: all markers list ------------------------------- */
.list-tools{padding:10px var(--pad) 8px;border-bottom:1px solid var(--chrome);display:grid;gap:8px}
.list-tools input[type=search]{
  width:100%;background:rgba(9,4,14,.6);border:1px solid var(--chrome-hi);color:var(--text);
  padding:8px 10px;border-radius:6px;font-size:14px;
}
.list-tools input[type=search]::placeholder{color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--chrome);padding:3px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
}
.chip:hover{border-color:var(--chrome-hi);color:var(--text)}
.chip.on{color:#fff;border-color:var(--pc,var(--signal));background:color-mix(in srgb,var(--pc,var(--signal)) 25%,transparent)}
.poi-list{list-style:none;max-height:520px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--chrome-hi) transparent}
.poi-list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px var(--pad);border-bottom:1px solid rgba(177,160,190,.12);cursor:pointer}
.poi-list li:hover,.poi-list li.sel{background:var(--plate-hi)}
.poi-list li.sel{box-shadow:inset 3px 0 0 var(--signal)}
.poi-list .li-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;background:color-mix(in srgb,var(--pc,var(--signal)) 28%,transparent);border:1px solid var(--pc,var(--signal))}
.poi-list .li-main{min-width:0}
.poi-list .li-title{font-weight:600;font-size:15px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poi-list .li-sub{font-size:12px;color:var(--dim);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poi-list .li-sub .mine{color:var(--signal)}
.poi-list .li-grid{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.06em;text-align:right}
.poi-list .li-time{display:block;font-size:11px;color:var(--faint);font-weight:400;letter-spacing:.06em}
.poi-list .empty{padding:18px var(--pad);color:var(--faint);font-size:14px;grid-template-columns:1fr;cursor:default}
.poi-list .empty:hover{background:none}
.poi-list.my-list{max-height:none;overflow:visible;margin:2px 0 6px}
.poi-list.my-list li{padding-left:0;padding-right:0;margin:0}
.poi-list.my-list li:last-child{border-bottom:none}
.poi-list.my-list .li-sub{display:flex;gap:6px;align-items:center;overflow:visible}
.poi-list.my-list .li-sub button{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:0;line-height:1.3}
.poi-list.my-list .li-sub button:hover{color:var(--text)}
.poi-list.my-list .li-sub button.del:hover{color:var(--threat-txt)}
.poi-list.my-list .li-sub .sep{color:var(--faint)}

/* ---- help (ghost module) ---------------------------------- */
.ghost{background:rgba(16,9,21,.38);border:1px dashed var(--chrome-hi)}
.ghost .p-head{border-bottom-style:dashed}
.ghost .p-tag{color:var(--amber)}
.ghost-body{padding:12px var(--pad) 14px;color:var(--dim)}
.help-list{padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.5}
.help-list b{color:var(--text);font-weight:600}

/* ---- footer ----------------------------------------------- */
/* ---- copyright footer — identical to bbrust.com's ---------- */
.copyright{
  position:relative;z-index:2;flex:none;margin:8px auto 16px;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:rgba(9,4,14,.8);
  border:1px solid var(--chrome);padding:8px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.copyright img{height:44px;width:auto;object-fit:contain}

/* ---- modal ------------------------------------------------ */
.modal{position:fixed;inset:0;z-index:60;background:rgba(9,4,14,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-card{width:min(520px,100%);background:rgba(22,10,28,.97);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column}
.modal-card .p-head h2{font-size:30px}
.form-body{padding:14px var(--pad) 6px;display:grid;gap:14px}
.form-pos{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px;letter-spacing:.06em;border:1px solid var(--chrome);padding:8px 10px;border-radius:8px;background:rgba(9,4,14,.4)}
.form-pos b{font-size:16px;font-weight:700;color:var(--text)}
.lab{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.counter{color:var(--faint);letter-spacing:.06em}
.counter.warn{color:var(--amber)}
.field{display:block}
.field input,.field textarea{
  width:100%;background:rgba(9,4,14,.6);border:1px solid var(--chrome-hi);color:var(--text);
  padding:9px 10px;border-radius:6px;font-size:15px;resize:vertical;
}
.field input:focus,.field textarea:focus{border-color:var(--signal);outline:none}
/* marker image zone (file / paste / drop → client-side JPEG thumbnail) */
.img-zone{display:flex;align-items:center;gap:12px;padding:10px;border:1px dashed var(--chrome-hi);border-radius:8px;background:rgba(9,4,14,.4);outline:none}
.img-zone:focus-visible,.img-zone.drag{border-color:var(--signal);box-shadow:0 0 0 3px rgba(214,59,200,.25)}
.img-zone img{width:104px;height:78px;object-fit:cover;border-radius:6px;border:1px solid var(--chrome-hi);flex:none;background:#000}
.img-crop{width:288px;height:216px;max-width:100%;border-radius:6px;border:1px solid var(--chrome-hi);background:#000;flex:none;cursor:grab;touch-action:none;display:block}
.img-crop.drag{cursor:grabbing}
.img-zoom{display:grid;grid-template-columns:auto minmax(50px,1fr) auto;align-items:center;gap:6px;min-width:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.img-zoom input[type=range]{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:4px;border-radius:2px;background:rgba(177,160,190,.22);outline:none;cursor:pointer;margin:0}
.img-zoom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--signal);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.img-zoom input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--signal);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.img-zoom output{font-family:var(--f-mono);font-size:12px;color:var(--text);min-width:4ch;text-transform:none;letter-spacing:0}
@media (max-width:640px){ .img-zone{flex-wrap:wrap} .img-crop{width:100%;height:auto;aspect-ratio:4/3} }
.img-zone-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.img-zone-actions{display:flex;gap:6px;flex-wrap:wrap}
.img-hint{font-size:12px;color:var(--faint);letter-spacing:.03em}
.img-zone.busy{opacity:.6;pointer-events:none}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cat-opt{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;border:1px solid var(--chrome);border-radius:8px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:center;cursor:pointer;line-height:1.2;
}
.cat-opt .ci{font-size:20px;line-height:1}
.cat-opt:hover{border-color:var(--chrome-hi);color:var(--text)}
.cat-opt.on{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 22%,transparent);color:#fff}
.cat-opt input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}   /* explicit size: .field input{width:100%} must not stretch these and overflow the card */
.form-err{font-size:13px;color:var(--threat-txt);border:1px solid rgba(220,20,60,.5);padding:7px 10px;border-radius:6px;background:rgba(220,20,60,.08)}
.form-foot{display:flex;justify-content:flex-end;gap:8px;padding:10px var(--pad) 14px;border-top:1px solid var(--chrome);margin-top:8px}

/* ---- toasts ----------------------------------------------- */
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:rgba(12,6,16,.95);border:1px solid var(--chrome-hi);color:var(--text);font-size:13px;letter-spacing:.04em;
  padding:9px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:toast-in .2s ease-out;max-width:min(90vw,560px);text-align:center;
}
.toast.err{border-color:var(--threat);color:var(--threat-txt)}
.toast.ok{border-color:var(--ok)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- responsive ------------------------------------------- */
@media (max-width:1080px){
  .deck{grid-template-columns:1fr}
  .mod-stage{grid-column:1/2}
  .rail{grid-column:1/2;contain:none}   /* single column: the rail is its own row again, so it must size to its content */
  .mod-list .poi-list{max-height:520px}
  .strip-nav{order:3;flex-basis:100%}
  .strip-right{margin-left:0;width:100%}
  .stage{height:min(78vh,720px)}
}
@media (max-width:640px){
  .console{padding:10px 10px 16px}
  .strip-main{gap:14px}
  .strip-word{height:68px}
  .strip-buns{height:68px}
  .p-head h2{font-size:28px}
  .stage{height:min(72vh,calc(100vw - 24px))}
  .mod-stage .p-tag{display:none}
  .p-sub{letter-spacing:.08em}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .poi-list{max-height:380px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- TC snapping (base/shop markers) --------------------- */
.form-pos-base{flex-direction:column;align-items:stretch;gap:8px}
.form-pos-base .lab{margin:0}
.base-list{display:grid;gap:6px;max-height:200px;overflow:auto}
.base-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--chrome);border-radius:8px;cursor:pointer;font-size:13px}
.base-opt:hover{border-color:var(--chrome-hi);background:var(--plate-hi)}
.base-opt.on{border-color:var(--signal);background:rgba(214,59,200,.14)}
.base-opt input{position:absolute;opacity:0;pointer-events:none}
.bo-grid{font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--text);min-width:3.5ch}
.bo-meta{color:var(--dim);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-xy{font-size:12px;white-space:nowrap}
.form-nobase{font-size:13px;color:var(--amber);border:1px dashed var(--amber);padding:8px 10px;border-radius:6px;line-height:1.45}
.vtag{margin-left:auto;font-size:10px;letter-spacing:.12em;color:var(--ok);border:1px solid rgba(143,226,143,.5);padding:1px 6px;border-radius:999px;white-space:nowrap}
.vmark{color:var(--ok);font-weight:700}
.tc-block{margin-top:14px;border-top:1px solid var(--chrome);padding-top:10px}
.tc-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.tc-tag{color:var(--faint);letter-spacing:.08em;text-transform:none}
.tc-list{list-style:none;display:grid;gap:6px;max-height:300px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--chrome-hi) transparent;padding-right:2px}
.tc-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border:1px dashed rgba(255,73,239,.45);border-radius:8px;font-size:13px}
.tc-list .bo-grid{font-size:14px}
.tc-actions{display:flex;gap:4px;align-items:center}
.tc-actions .mini-btn{padding:3px 7px;font-size:10px}
.tc-actions .mini-btn:disabled{opacity:.4;cursor:not-allowed}
.tc-marked{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}

/* ---- vending machine layer -------------------------------- */
.vend{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto;cursor:pointer;will-change:transform}
.vend-dot{
  position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;   /* round shop icons */
  display:grid;place-items:center;font-size:12px;line-height:1;
  background:rgba(9,24,14,.85);border:1.5px solid var(--ok);
  box-shadow:0 1px 5px rgba(0,0,0,.5);transition:transform .12s;
}
.vend:hover .vend-dot,.vend.sel .vend-dot{transform:scale(1.25)}
.vend.sel .vend-dot{box-shadow:0 0 0 3px rgba(143,226,143,.35),0 1px 5px rgba(0,0,0,.5)}
.vend.npc .vend-dot{border-color:var(--azure);background:rgba(9,14,24,.85)}
.vend.unlisted .vend-dot{border-style:dashed;opacity:.72}
/* vendor-name debug label: raw shopName next to every tile, toggled by "Vendor names" */
.vend-label{
  display:none;position:absolute;left:14px;top:-9px;white-space:nowrap;pointer-events:none;
  font-family:var(--f-mono);font-size:11px;line-height:1.3;letter-spacing:.01em;color:#e9ffe9;
  background:rgba(4,12,6,.78);border:1px solid rgba(143,226,143,.55);border-left-width:3px;
  padding:1px 5px;border-radius:3px;max-width:170px;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 2px #000;
}
.vend.named .vend-label{display:block}
/* chat emoji rendered inline in shop names (Rust built-ins animate; BB server emoji are static) */
.remoji{display:inline-block;height:1.25em;width:auto;vertical-align:-0.28em;margin:0 .05em;image-rendering:auto;pointer-events:none}
.vend-label .remoji{height:1.4em;vertical-align:-0.35em}
.vend.npc .vend-label{color:#e3f3ff;background:rgba(4,10,20,.78);border-color:rgba(0,168,255,.6)}
.vend.unlisted .vend-label{opacity:.72;border-style:dashed;border-left-style:solid}
.vend.sel .vend-label{left:17px;color:#fff;border-color:#fff}
.vend:hover,.vend.sel{z-index:4}
.vtag.off{color:var(--amber);border-color:rgba(232,179,75,.5)}
.vend-orders{display:grid;gap:2px;margin:2px 0 8px;max-height:240px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--chrome-hi) transparent}
.vo{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:7px;align-items:center;font-size:12.5px;padding:2px 0}
.vo + .vo{border-top:1px solid rgba(177,160,190,.1)}
.vo.out{opacity:.45}
.vo-ico{width:22px;height:22px;object-fit:contain}
.vo-fallback{display:grid;place-items:center;font-size:13px}
.vo-what{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d2cad8}
.vo-price{display:inline-flex;align-items:center;gap:3px;font-weight:600;color:var(--text);white-space:nowrap}
.vo-cur{width:15px;height:15px;object-fit:contain}
.vo-stock{font-size:11px;color:var(--dim);min-width:3ch;text-align:right}
.vo-stock.zero{color:var(--threat-txt)}