/* ROAM page (2026-10-11) -- js/roam.js. Served as /css/roam.css.
   Uses the site's theme tokens (style.css :root and the seasonal skins) so it
   follows Halloween / Christmas / ... like every other page. */

.rm-page { padding-top: 18px; padding-bottom: 40px; max-width: 1640px; }
.rm-dim { color: var(--text-dim); }
.rm-good { color: var(--good); }
.rm-bad { color: var(--bad); }
.rm-pad { padding: 14px 4px; }
.rm-label { font: 600 11px var(--display-font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.rm-big { font: 700 22px var(--display-font); letter-spacing: .02em; }
.rm-big .frag-icon { width: 20px; height: 20px; }
.rm-ico { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; flex: 0 0 auto; }
.rm-ico-sm { width: 16px; height: 16px; }
.rm-ico-lg { width: 40px; height: 40px; }
.rm-ico-xl { width: 64px; height: 64px; }
.rm-ico.rm-dim { opacity: .35; filter: grayscale(1); }

/* ---- header + server tabs ---- */
.rm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.rm-title { margin: 0; font: 800 34px var(--display-font); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--gold) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-head-text p { margin: 4px 0 0; color: var(--text-dim); max-width: 520px; font-size: 14px; }
.rm-servers { display: flex; gap: 8px; flex-wrap: wrap; }
.rm-srv { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px; padding: 10px 14px; border-radius: 12px; cursor: pointer;
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text); text-align: left; transition: border-color .15s, transform .1s, background .15s; }
.rm-srv:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); }
.rm-srv.active { border-color: var(--gold); background: linear-gradient(180deg, var(--accent-wash), var(--bg-panel)); box-shadow: var(--ring); }
.rm-srv-name { font: 700 14px var(--display-font); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.rm-srv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.rm-srv-pot { font: 700 18px var(--display-font); }
.rm-srv-meta { font-size: 11px; color: var(--text-dim); }

/* ---- layout ---- */
.rm-layout { display: grid; grid-template-columns: minmax(0, calc(100vh - 150px)) minmax(400px, 1fr); gap: 14px; align-items: start; }
.rm-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rm-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; margin-top: 14px; }
@media (max-width: 1180px) { .rm-layout, .rm-bottom { grid-template-columns: 1fr; } }

/* ---- map ---- */
.rm-map-panel { padding: 10px; position: sticky; top: 76px; }
@media (max-width: 1180px) { .rm-map-panel { position: static; } }
.rm-map { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #0b3a50; }
/* zoomed to the island: shows 14%..86% of the image (layer and image move together) */
.rm-map-img { position: absolute; inset: -19.444%; width: 138.889%; height: 138.889%; object-fit: cover; user-select: none; pointer-events: none; }
.rm-map-layer { position: absolute; inset: -19.444%; }
.rm-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(0,0,0,.55); }
/* monuments: a name under each one; its traced outline lights up on hover and stays while picked */
.rm-mon { position: absolute; transform: translate(-50%, 3px); padding: 0 2px; border: 0; background: none; cursor: pointer; z-index: 2; font: 600 10px var(--display-font); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px #000, 0 0 6px #000; white-space: nowrap; transition: color .15s; }
.rm-mon.hov, .rm-mon:hover { color: #fff; }
.rm-mon.sel { color: var(--gold); }
.rm-mon.locked:not(.sel) { color: rgba(255,255,255,.55); }
.rm-mon-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.rm-mon-o polygon { fill: transparent; stroke: transparent; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: all; cursor: pointer; transition: stroke .15s, fill .15s; }
.rm-mon-o.hov polygon, .rm-mon-o:hover polygon { stroke: rgba(255,255,255,.95); fill: rgba(255,255,255,.12); filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.rm-mon-o.sel polygon { stroke: var(--gold); fill: rgba(255,200,80,.14); filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.rm-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; padding: 0; border-radius: 6px; cursor: pointer; z-index: 3; overflow: hidden;
  border: 2px solid #9e9e9e; background: var(--bg-panel-3, #1b2234); box-shadow: 0 2px 6px rgba(0,0,0,.7); transition: transform .15s; }
.rm-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-pin b { font: 700 12px var(--display-font); color: var(--text); }
.rm-pin:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 5; }
.rm-pin.a1 { border-color: #b07a3f; } .rm-pin.a2 { border-color: #a9adb3; } .rm-pin.a3 { border-color: #6f8aa3; } .rm-pin.a4 { border-color: #e8c35a; }
.rm-pin.me { width: 32px; height: 32px; border-color: var(--good); box-shadow: 0 0 0 3px rgba(53,208,127,.35), 0 2px 8px rgba(0,0,0,.7); z-index: 4; }
.rm-pin.sel { box-shadow: 0 0 0 3px var(--bad), 0 0 16px var(--bad); z-index: 6; }
.rm-pin.prot::after { content: ''; position: absolute; inset: -2px; border-radius: 6px; border: 2px dashed rgba(120,200,255,.9); pointer-events: none; }
.rm-map-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 4px 0; font-size: 11px; color: var(--text-dim); }
.rm-map-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.rm-leg-mon { border-radius: 45% 20% 40% 25%; border: 1.5px solid #fff; background: rgba(255,255,255,.12); } /* a monument outline */
.rm-leg-base { border-radius: 3px; border: 2px solid #9e9e9e; }
.rm-leg-me { border-radius: 3px; border: 2px solid var(--good); }
.rm-leg-prot { border-radius: 3px; border: 2px dashed rgba(120,200,255,.9); }
/* map pings */
#rm-pings { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.rm-ping { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; animation: rmPing 2.4s ease-out forwards; }
.rm-ping.good { background: rgba(53,208,127,.6); } .rm-ping.bad { background: rgba(255,92,92,.7); }
.rm-ping.go { background: rgba(255,255,255,.55); } .rm-ping.held { background: rgba(160,190,220,.6); }
.rm-ping.boom { background: radial-gradient(circle, #fff6c2 0 20%, #ffb13b 35%, #ff4d1f 60%, transparent 70%); animation: rmBoom 2.4s ease-out forwards; }
@keyframes rmPing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
@keyframes rmBoom { 0% { transform: scale(.3); opacity: 1; } 20% { transform: scale(4); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }

/* ---- my base ---- */
.rm-me { padding: 14px 16px; }
.rm-me-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rm-me-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.rm-me-clock { text-align: right; }
.rm-me-base { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.rm-me-armor { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 11px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); grid-row: span 2; }
.rm-me-armor .rm-ico { width: 52px; height: 52px; }
.rm-me-stats { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--text-dim); }
.rm-me-stats span { display: inline-flex; align-items: center; gap: 4px; }
.rm-me-stats .rm-ico { width: 18px; height: 18px; }
.rm-prot { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #a9d8ff; background: rgba(80,160,255,.14); border: 1px solid rgba(120,200,255,.35); }
.rm-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-top: 12px; }
.rm-inv-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 8px; background: var(--bg-panel-2); border: 1px solid var(--border-soft); }
.rm-inv-cell .rm-ico { width: 30px; height: 30px; }
.rm-inv-cell span { font: 700 12px var(--display-font); }
.rm-inv-cell.empty { opacity: .45; }
.rm-empty { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--bg-panel-2); font-size: 13px; color: var(--text-dim); }
.rm-empty strong { color: var(--text); }

/* ---- action tabs ---- */
.rm-actions { padding: 0; overflow: hidden; }
.rm-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--border); }
.rm-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px; border: 0; background: none; color: var(--text-dim); cursor: pointer;
  font: 600 11px var(--display-font); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: color .15s, background .15s; }
.rm-tab .rm-ico { width: 26px; height: 26px; opacity: .7; }
.rm-tab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.rm-tab.active { color: var(--text); border-bottom-color: var(--gold); background: linear-gradient(0deg, var(--accent-wash), transparent); }
.rm-tab.active .rm-ico { opacity: 1; }
.rm-tab-body { padding: 14px 16px 16px; max-height: 760px; overflow-y: auto; }
.rm-block { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.rm-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.rm-block-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.rm-block-head > .rm-ico { width: 34px; height: 34px; }
.rm-block-head h4, .rm-card h4, .rm-mini h4, .rm-site h4 { margin: 0; font: 700 14px var(--display-font); letter-spacing: .04em; text-transform: uppercase; }
.rm-block-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.rm-note { font-size: 12px; color: var(--text-dim); margin-top: 8px; line-height: 1.45; }
.rm-lock-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rm-lock-row input { flex: 1 1 120px; min-width: 0; }
.rm-chips { display: flex; gap: 4px; }
.rm-chips button { padding: 6px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); cursor: pointer; font: 600 12px var(--display-font); }
.rm-chips button:hover { border-color: var(--gold); }
.rm-upgrade { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; padding: 10px; border-radius: 10px; background: var(--bg-panel-2); }
.rm-up-to { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.rm-up-to strong { font: 700 13px var(--display-font); letter-spacing: .04em; text-transform: uppercase; }
.rm-upgrade .rm-up-cost { grid-column: 1; }
.rm-upgrade .btn { grid-column: 2; grid-row: 1 / span 2; }
.rm-up-cost { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0; }
.rm-cost { display: inline-flex; align-items: center; gap: 3px; font: 600 12px var(--display-font); }
.rm-cost .rm-ico { width: 18px; height: 18px; }
.rm-cost.short { color: var(--bad); }
.rm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .rm-two { grid-template-columns: 1fr; } }
.rm-mini { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; background: var(--bg-panel-2); font-size: 12px; }
.rm-mini .btn { margin-top: 6px; padding: 6px 12px; font-size: 12px; }
.rm-pending { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; font: 600 12px var(--display-font); color: var(--good); }
.rm-pending .rm-ico { width: 18px; height: 18px; }
.rm-wide { width: 100%; margin-top: 10px; }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.rm-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .rm-grid-3 { grid-template-columns: 1fr 1fr; } }
.rm-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 12px; text-align: center; font-size: 11.5px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--bg-panel-2); border: 1px solid var(--border-soft); transition: border-color .15s, transform .12s; }
.rm-card:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); transform: translateY(-2px); }
.rm-card .btn { width: 100%; margin-top: auto; padding: 7px 8px; }
.rm-card .rm-up-cost { justify-content: center; }
.rm-yield { font: 700 14px var(--display-font); display: flex; align-items: center; gap: 4px; }
/* roam list */
.rm-sites { display: flex; flex-direction: column; gap: 6px; }
.rm-site { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: var(--bg-panel-2); border: 1px solid var(--border-soft); transition: border-color .15s; }
.rm-site:hover { border-color: var(--border); }
.rm-site.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.rm-site-ico .rm-ico { width: 38px; height: 38px; padding: 3px; border-radius: 50%; background: rgba(0,0,0,.35); }
.rm-site h4 { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rm-card-need .rm-ico { width: 18px; height: 18px; }
.rm-card-need.short { filter: grayscale(1); opacity: .5; }
.rm-odds { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; margin-top: 2px; }
.rm-odds .frag-icon { width: 12px; height: 12px; }
.rm-loot { display: flex; flex-wrap: wrap; gap: 3px 9px; margin-top: 3px; font: 600 11px var(--display-font); color: var(--text-dim); }
.rm-loot span { display: inline-flex; align-items: center; gap: 2px; }
.rm-loot .rm-ico { width: 16px; height: 16px; }
.rm-loot i { font-style: normal; color: color-mix(in srgb, var(--text-dim) 70%, transparent); }
.rm-site .btn { padding: 7px 14px; }
/* raid */
.rm-target { padding: 12px; border-radius: 12px; background: var(--bg-panel-2); border: 1px solid var(--border); }
.rm-target-who { display: flex; gap: 10px; align-items: center; }
.rm-target-who img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.rm-target-who h4 { margin: 0; font: 700 15px var(--display-font); cursor: pointer; }
.rm-target-who .rm-dim { font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rm-booms { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rm-boom { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 9px; background: rgba(0,0,0,.2); font-size: 12px; }
.rm-boom strong { font: 700 13px var(--display-font); letter-spacing: .04em; text-transform: uppercase; }
.rm-chance { display: inline-block; padding: 0 7px; border-radius: 999px; font: 700 12px var(--display-font);
  background: color-mix(in srgb, var(--good) calc(var(--p) * 100%), var(--bad)); color: #0b0f17; }
.rm-targets { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 260px; overflow-y: auto; }
.rm-trow { display: grid; grid-template-columns: 26px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent;
  background: rgba(255,255,255,.02); color: var(--text); cursor: pointer; text-align: left; font-size: 12.5px; }
.rm-trow:hover { background: rgba(255,255,255,.05); }
.rm-trow.sel { border-color: var(--bad); }
.rm-trow img, .rm-trow > i { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: var(--bg-panel-3, #1b2234); }
.rm-trow-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rm-trow .rm-ico { width: 18px; height: 18px; }
.rm-trow-val { font: 600 12px var(--display-font); }

/* ---- feed + leaderboard ---- */
.rm-feed-panel h3, .rm-lb-panel h3 { margin: 0 0 8px; font: 700 14px var(--display-font); letter-spacing: .1em; text-transform: uppercase; }
.rm-feed { display: flex; flex-direction: column; gap: 2px; max-height: 330px; overflow-y: auto; }
.rm-feed-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 6px 6px; border-radius: 8px; font-size: 12.5px; }
.rm-feed-row:hover { background: rgba(255,255,255,.03); }
.rm-feed-row b { color: var(--text); }
.rm-feed-row span { color: var(--text-dim); }
.rm-feed-row .frag-icon { width: 12px; height: 12px; }
.rm-feed-row time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.rm-feed-row.hot { background: linear-gradient(90deg, rgba(255,120,40,.12), transparent 70%); }
.rm-lb-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.rm-lb-tabs button { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; font: 600 11px var(--display-font); letter-spacing: .05em; text-transform: uppercase; }
.rm-lb-tabs button.active { color: var(--text); border-color: var(--gold); background: var(--accent-wash); }
.rm-lb-row { display: grid; grid-template-columns: 22px 26px 1fr auto; gap: 8px; align-items: center; padding: 5px 4px; border-radius: 7px; font-size: 13px; }
.rm-lb-row.me { background: rgba(53,208,127,.1); }
.rm-lb-row img, .rm-lb-row > i { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: var(--bg-panel-3, #1b2234); }
.rm-lb-rank { font: 700 13px var(--display-font); color: var(--text-dim); text-align: center; }
.rm-lb-row:nth-child(1) .rm-lb-rank { color: #f5c518; } .rm-lb-row:nth-child(2) .rm-lb-rank { color: #c9d1dc; } .rm-lb-row:nth-child(3) .rm-lb-rank { color: #d08a4a; }
.rm-lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.rm-lb-val { font: 600 12px var(--display-font); }
.rm-last { font-size: 12px; margin-top: 10px; }

/* ---- rules ---- */
.rm-rules { margin-top: 14px; }
.rm-rules summary { cursor: pointer; font: 700 14px var(--display-font); letter-spacing: .1em; text-transform: uppercase; }
.rm-rules h4 { margin: 16px 0 4px; font: 700 13px var(--display-font); letter-spacing: .06em; text-transform: uppercase; }
.rm-rules p { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 6px 0; }
.rm-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.rm-table th { text-align: left; font: 600 11px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 5px 8px; border-bottom: 1px solid var(--border); }
.rm-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); }

/* ---- result card + toasts ---- */
.rm-result { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(3,5,10,.55); backdrop-filter: blur(2px); animation: rmFade .18s ease-out; }
.rm-result.hidden { display: none; }
.rm-result-card { min-width: 280px; max-width: 420px; padding: 22px 26px; border-radius: 16px; text-align: center; background: var(--bg-panel); border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: rmPop .25s cubic-bezier(.2,1.4,.4,1); }
.rm-result.good .rm-result-card { border-color: var(--good); box-shadow: 0 0 40px rgba(53,208,127,.25), 0 20px 60px rgba(0,0,0,.6); }
.rm-result.bad .rm-result-card { border-color: var(--bad); box-shadow: 0 0 40px rgba(255,92,92,.25), 0 20px 60px rgba(0,0,0,.6); }
.rm-result h3 { margin: 8px 0 6px; font: 700 20px var(--display-font); letter-spacing: .04em; text-transform: uppercase; }
.rm-result.shake .rm-result-card { animation: rmShake .45s ease-in-out; }
.rm-res-line { font: 600 14px var(--display-font); margin: 4px 0; }
.rm-res-line .frag-icon { width: 14px; height: 14px; }
.rm-res-loot, .rm-result-card > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0; }
.rm-result-card > div { flex-direction: column; align-items: center; gap: 4px; }
.rm-got { display: inline-flex; align-items: center; gap: 4px; font: 700 18px var(--display-font); color: var(--good); }
.rm-roaming { display: flex; gap: 8px; justify-content: center; padding: 10px; }
.rm-roaming i { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); animation: rmDot 1s ease-in-out infinite; }
.rm-roaming i:nth-child(2) { animation-delay: .15s; } .rm-roaming i:nth-child(3) { animation-delay: .3s; }
.rm-fuse { width: 180px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin: 10px auto; }
.rm-fuse i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff4d1f, #ffd34d); transform-origin: left; animation: rmFuse 1.45s linear forwards; }
.rm-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 950; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.rm-toast { max-width: 360px; padding: 10px 14px; border-radius: 10px; background: var(--bg-panel); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; animation: rmSlide .2s ease-out; transition: opacity .4s, transform .4s; }
.rm-toast.good { border-color: var(--good); } .rm-toast.bad { border-color: var(--bad); }
.rm-toast.out { opacity: 0; transform: translateY(8px); }
.rm-toast .rm-ico { width: 18px; height: 18px; }
@keyframes rmFade { from { opacity: 0; } }
@keyframes rmPop { from { transform: scale(.8); opacity: 0; } }
@keyframes rmShake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(3px, -1px); } }
@keyframes rmDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
@keyframes rmFuse { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes rmSlide { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .rm-ping, .rm-result-card, .rm-roaming i, .rm-fuse i { animation-duration: .01s !important; } }
.rm-srv-pot .frag-icon { width: 16px; height: 16px; vertical-align: -2px; margin-right: 2px; }
.rm-me-sub .frag-icon, .rm-note .frag-icon, .rm-dim .frag-icon, .rm-block-head .frag-icon, .rm-boom .frag-icon, .rm-trow .frag-icon, .rm-lb-val .frag-icon, .rm-last .frag-icon, .rm-toast .frag-icon, .rm-cost .frag-icon { width: 13px; height: 13px; vertical-align: -2px; }
@media (max-width: 640px) {
  .rm-servers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .rm-srv { min-width: 0; padding: 8px 9px; }
  .rm-srv-name { font-size: 12px; }
  .rm-srv-pot { font-size: 15px; }
  .rm-srv-meta { font-size: 10px; }
  .rm-pin { width: 18px; height: 18px; border-radius: 4px; border-width: 1.5px; }
  .rm-pin.me { width: 22px; height: 22px; }
  .rm-pin b { font-size: 10px; }
  .rm-title { font-size: 28px; }
  .rm-tab-body { padding: 12px; max-height: none; }
  .rm-tab span { font-size: 10px; }
}

/* spawn / join (2026-10-11) */
.rm-join { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(232,196,120,.10), transparent 70%), var(--bg-panel-2); border: 1px solid rgba(232,196,120,.3); }
.rm-join-art .rm-ico { width: 52px; height: 52px; }
.rm-join-body { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.rm-join-body strong { font: 700 15px var(--display-font); letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.rm-join-body .frag-icon { width: 13px; height: 13px; vertical-align: -2px; }
.rm-join .btn { padding: 10px 18px; }
@media (max-width: 520px) { .rm-join { grid-template-columns: auto 1fr; } .rm-join .btn { grid-column: 1 / -1; } }
.rm-bag { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; padding: 1px; border: 0; border-radius: 50%; cursor: pointer; z-index: 3;
  background: rgba(10,13,19,.75); box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.rm-bag .rm-ico { width: 100%; height: 100%; }
.rm-bag.me { box-shadow: 0 0 0 2px var(--good), 0 1px 6px rgba(0,0,0,.6); z-index: 4; }
.rm-map.placing .rm-map-layer { cursor: crosshair; }
.rm-map.placing::before { content: 'Click a spot on land to build your base'; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 8;
  padding: 6px 14px; border-radius: 999px; background: rgba(10,13,19,.85); border: 1px solid var(--gold); font: 600 12px var(--display-font); letter-spacing: .05em; text-transform: uppercase; color: var(--text); pointer-events: none; white-space: nowrap; }
.rm-ghost { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 8px; z-index: 6; pointer-events: none; display: grid; place-items: center;
  background: rgba(47,125,253,.25); border: 2px dashed var(--gold); animation: rmGhost 1.2s ease-in-out infinite; }
.rm-ghost .rm-ico { width: 24px; height: 24px; }
@keyframes rmGhost { 50% { transform: translate(-50%, -50%) scale(1.12); } }
.rm-place { background: linear-gradient(90deg, rgba(232,196,120,.08), transparent 60%); border-radius: 10px; padding: 10px 10px 4px; margin-bottom: 12px; }

/* server picker (2026-10-11): choose Daily / Weekly / Monthly, then that server's map */
.rm-picker[hidden], #rm-game[hidden], .rm-servers[hidden] { display: none !important; }
.rm-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .rm-pick-grid { grid-template-columns: 1fr; } }
.rm-pick { display: flex; flex-direction: column; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left; color: var(--text);
  background: var(--bg-panel); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s, box-shadow .18s; }
.rm-pick:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px var(--gold); }
.rm-pick-map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b3a50; }
.rm-pick-map img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.rm-pick:hover .rm-pick-map img { transform: scale(1.06); }
.rm-pick-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--bg-panel)); }
.rm-pick-badge { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; font: 700 11px var(--display-font); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(53,208,127,.9); color: #062012; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.rm-pick-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 18px 18px; margin-top: -26px; position: relative; z-index: 1; }
.rm-pick-body h3 { margin: 0; font: 800 28px var(--display-font); letter-spacing: .08em; text-transform: uppercase; }
.rm-pick-body p { margin: 0; font-size: 13px; color: var(--text-dim); }
.rm-pick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.rm-pick-stats span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg-panel-2); font: 600 10px var(--display-font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.rm-pick-stats b { font: 700 16px var(--display-font); letter-spacing: .02em; color: var(--text); text-transform: none; }
.rm-pick-stats .frag-icon { width: 14px; height: 14px; vertical-align: -2px; }
.rm-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.rm-pick-in, .rm-pick-join, .rm-pick-closed { font-size: 12.5px; font-weight: 600; }
.rm-pick-in { color: var(--good); } .rm-pick-join { color: #e8c478; } .rm-pick-closed { color: var(--text-dim); }
.rm-pick-in .frag-icon, .rm-pick-join .frag-icon { width: 13px; height: 13px; vertical-align: -2px; }
.rm-pick-cta { padding: 9px 16px; border-radius: 10px; font: 700 13px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 85%, #fff), var(--gold)); box-shadow: 0 6px 16px var(--accent-glow); white-space: nowrap; }
.rm-back { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); cursor: pointer; font: 700 13px var(--display-font); letter-spacing: .06em; text-transform: uppercase; align-self: stretch; }
.rm-back:hover { border-color: var(--gold); }
@media (max-width: 640px) { .rm-servers .rm-back { grid-column: 1 / -1; } }
/* phones: a touch less zoom and smaller monument names so the edge ones (oil rigs, harbor) aren't clipped */
@media (max-width: 640px) {
  .rm-map-img { inset: -15%; width: 130%; height: 130%; }
  .rm-map-layer { inset: -15%; }
  .rm-mon { font-size: 8px; letter-spacing: .03em; }
  .rm-bag { width: 18px; height: 18px; }
}

/* map grid + travel (2026-10-12): Rust-style squares (A0 top left), your square, your route */
.rm-map-grid { position: absolute; inset: -19.444%; pointer-events: none; }
.rm-gc { position: absolute; box-sizing: border-box; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); transition: background .2s; }
.rm-gc.c0 { border-left: 1px solid rgba(255,255,255,.16); } .rm-gc.r0 { border-top: 1px solid rgba(255,255,255,.16); }
.rm-gc b { position: absolute; left: 3px; top: 2px; font: 600 9px var(--display-font); letter-spacing: .03em; color: rgba(255,255,255,.6); text-shadow: 0 1px 2px #000, 0 0 3px #000; line-height: 1; }
.rm-map.nogrid .rm-gc { border-color: transparent; }
.rm-map.nogrid .rm-gc b { display: none; }
.rm-gc.path { background: rgba(255,92,92,.16); }
.rm-gc.path b, .rm-gc.dest b, .rm-gc.home b { display: block; color: #fff; }
.rm-gc.dest { background: rgba(255,196,80,.2); box-shadow: inset 0 0 0 2px rgba(255,196,80,.95); }
.rm-gc.home { background: rgba(53,208,127,.22); box-shadow: inset 0 0 0 2px var(--good); animation: rmHome 2.2s ease-in-out infinite; }
@keyframes rmHome { 50% { background: rgba(53,208,127,.38); } }
.rm-gc.walk { animation: rmWalk .45s ease-out both; }
@keyframes rmWalk { 0% { background: rgba(255,255,255,0); } 40% { background: rgba(255,255,255,.5); } 100% { background: rgba(255,92,92,.3); } }
.rm-gc.dead { background: rgba(255,40,40,.55) !important; box-shadow: inset 0 0 0 2px #ff4d4d; animation: none; }
.rm-home-tag { position: absolute; transform: translate(-50%, calc(-100% - 4px)); z-index: 4; pointer-events: none; white-space: nowrap; padding: 3px 8px; border-radius: 999px;
  font: 700 10px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: #062012; background: var(--good); box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.rm-home-tag::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--good); }
.rm-home-tag.el { transform: translate(-14px, calc(-100% - 4px)); } .rm-home-tag.el::after { left: 14px; }
.rm-home-tag.er { transform: translate(calc(-100% + 14px), calc(-100% - 4px)); } .rm-home-tag.er::after { left: auto; right: 10px; margin-left: 0; }
.rm-home-tag.eb { transform: translate(-50%, 4px); } .rm-home-tag.eb.el { transform: translate(-14px, 4px); } .rm-home-tag.eb.er { transform: translate(calc(-100% + 14px), 4px); }
.rm-home-tag.eb::after { bottom: auto; top: -4px; border: 4px solid transparent; border-top: 0; border-bottom-color: var(--good); }
.rm-trip { margin-top: 3px; font-size: 11.5px; color: var(--text-dim); }
.rm-leg-home { border-radius: 2px; background: rgba(53,208,127,.35); border: 2px solid var(--good); }
.rm-leg-path { border-radius: 2px; background: rgba(255,92,92,.35); border: 1px solid rgba(255,92,92,.8); }
.rm-grid-btn { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); cursor: pointer;
  font: 600 10.5px var(--display-font); letter-spacing: .06em; text-transform: uppercase; }
.rm-grid-btn.off { color: var(--text-dim); }
@media (max-width: 640px) {
  .rm-map-grid { inset: -15%; }
  .rm-gc b { display: none; font-size: 7px; left: 1px; top: 1px; }
  .rm-home-tag { font-size: 8.5px; padding: 2px 6px; }
}

/* kits + tools (2026-10-12) */
.rm-loadout { margin: 4px 0 12px; }
.rm-loadout .rm-label { margin-bottom: 6px; }
.rm-kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rm-kit { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.rm-kit:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); }
.rm-kit.sel { border-color: var(--gold); background: linear-gradient(180deg, var(--accent-wash), var(--bg-panel-2)); box-shadow: var(--ring); }
.rm-kit.none { opacity: .7; border-style: dashed; }
.rm-kit.none .rm-ico { filter: grayscale(.7); }
.rm-kit .rm-ico-lg { width: 34px; height: 34px; }
.rm-kit span { display: flex; flex-direction: column; min-width: 0; }
.rm-kit b { font: 700 12px var(--display-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-kit i { font-style: normal; font-size: 11px; color: var(--text-dim); }
.rm-kit.none i { color: #e8c478; }
.rm-kit-note { margin-top: 6px; font-size: 11.5px; }
.rm-need-kit { margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; background: rgba(255,92,92,.1); border: 1px solid rgba(255,92,92,.35); }
.rm-need-kit a { color: var(--gold); }
.rm-farm-risk { font-size: 11.5px; color: #ff9b9b; margin: 2px 0 4px; }
.rm-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1500px) { .rm-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rm-grid-4 { grid-template-columns: 1fr 1fr; } }
.rm-two-btn { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rm-two-btn .rm-act { flex: 1 1 auto; }

/* walking (2026-10-12): you, your route, the walk panel, death */
.rm-map.walkable .rm-map-layer { cursor: crosshair; }
.rm-gc.you { background: rgba(124,196,255,.2); box-shadow: inset 0 0 0 2px #7cc4ff; }
.rm-you { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; z-index: 5; pointer-events: none; overflow: hidden;
  background: #7cc4ff; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(124,196,255,.45), 0 2px 8px rgba(0,0,0,.7); animation: rmYou 1.8s ease-in-out infinite; }
.rm-you img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes rmYou { 50% { box-shadow: 0 0 0 7px rgba(124,196,255,.15), 0 2px 8px rgba(0,0,0,.7); } }
.rm-home-tag.out { background: #7cc4ff; color: #04203a; }
.rm-home-tag.out::after { border-top-color: #7cc4ff; }
.rm-home-tag.out.eb::after { border-bottom-color: #7cc4ff; border-top-color: transparent; }
.rm-dest { position: absolute; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; z-index: 4; pointer-events: none; border: 2px solid rgba(255,196,80,.95); box-shadow: 0 0 0 4px rgba(255,196,80,.25); }
.rm-status { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--bg-panel-2); font: 700 13px var(--display-font); letter-spacing: .05em; text-transform: uppercase; }
.rm-status .rm-act { margin-left: auto; padding: 5px 12px; }
.rm-status.home { box-shadow: inset 3px 0 0 var(--good); }
.rm-status.out { box-shadow: inset 3px 0 0 #7cc4ff; }
.rm-status.dead { box-shadow: inset 3px 0 0 var(--bad); color: #ff9b9b; }
.rm-walk, .rm-dead { margin: 8px 0; padding: 12px; border-radius: 12px; background: var(--bg-panel-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.rm-walk { border-color: rgba(255,196,80,.5); }
.rm-dead { border-color: rgba(255,92,92,.5); background: linear-gradient(180deg, rgba(255,92,92,.08), var(--bg-panel-2)); }
.rm-walk-head, .rm-dead-head { display: flex; gap: 10px; align-items: center; }
.rm-walk-head div, .rm-dead-head div { display: flex; flex-direction: column; gap: 2px; }
.rm-walk-head strong, .rm-dead-head strong { font: 700 14px var(--display-font); letter-spacing: .04em; text-transform: uppercase; }
.rm-walk-head span, .rm-dead-head span { font-size: 12.5px; color: var(--text-dim); }
.rm-walk-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rm-walk-btns .rm-act { flex: 1 1 auto; }
.rm-take { display: flex; flex-direction: column; gap: 6px; }
.rm-take-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.rm-take-row > span:first-child { width: 38px; color: var(--text-dim); font: 600 10.5px var(--display-font); letter-spacing: .08em; text-transform: uppercase; }
.rm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); cursor: pointer; font-size: 11.5px; }
.rm-chip .rm-ico { width: 18px; height: 18px; }
.rm-chip.sel { border-color: var(--gold); box-shadow: var(--ring); }
.rm-step { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--border); }
.rm-step button { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); cursor: pointer; line-height: 1; }
.rm-step b { min-width: 14px; text-align: center; }
.rm-got.lost { opacity: .75; text-decoration: line-through; }
.rm-inv-label { margin: 10px 0 4px; }
.rm-inv-label i { font-style: normal; color: #ff9b9b; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.rm-left { font: 600 12px var(--display-font); letter-spacing: .04em; color: var(--text-dim); }
.rm-card.out { opacity: .55; }
.rm-site.here { border-color: rgba(124,196,255,.6); }
.rm-here { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 10px var(--display-font); letter-spacing: .06em; text-transform: uppercase; background: #7cc4ff; color: #04203a; vertical-align: 2px; }
.rm-craft-src { margin-bottom: 8px; }

/* boxes + inventory (2026-10-12): Rust-style slot grids */
.rm-box { margin-top: 10px; }
.rm-box-head { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; cursor: pointer; font-size: 12px; }
.rm-box-head b { font: 700 12px var(--display-font); letter-spacing: .05em; text-transform: uppercase; }
.rm-box-head i { font-style: normal; color: var(--gold); font-size: 11px; }
.rm-box-head .rm-chip { margin-left: auto; }
.rm-box.sel .rm-slots { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); }
.rm-crate { margin: 8px 0; padding: 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid rgba(53,208,127,.45); background: linear-gradient(180deg, rgba(53,208,127,.08), var(--bg-panel-2)); }
.rm-crate.raid { border-color: rgba(255,177,59,.55); background: linear-gradient(180deg, rgba(255,177,59,.1), var(--bg-panel-2)); }
.rm-crate .rm-box-head { margin: 4px 0 0; cursor: default; }

/* ---- inside your base (2026-10-13): rendered room, neon boxes, the open box ---- */
.rm-basev[hidden], .rm-map[hidden], .rm-map-legend[hidden], #rm-inside-btn[hidden] { display: none !important; }
.rm-basev { position: relative; }
.rm-basev-scene { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #08080b; }
.rm-basev-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-bxsvg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.rm-bxp { fill: transparent; stroke: transparent; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: all; outline: none; transition: stroke .15s, fill .15s; }
.rm-bxp:hover, .rm-bxp:focus-visible, .rm-bxp.open { stroke: var(--bx); fill: color-mix(in srgb, var(--bx) 12%, transparent); filter: drop-shadow(0 0 6px var(--bx)); }
.rm-bxtag { position: absolute; z-index: 2; transform: translate(-50%, 2px); display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-size: 11px; color: #fff; background: rgba(8,8,12,.85); border: 1px solid color-mix(in srgb, var(--bx) 60%, transparent); opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; }
.rm-bxtag b { font: 700 11px var(--display-font); letter-spacing: .05em; text-transform: uppercase; color: var(--bx); }
.rm-bxtag.hover, .rm-bxtag.show { opacity: 1; transform: translate(-50%, 6px); }
.rm-basev-top { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; align-items: center; gap: 8px; z-index: 2; font-size: 12px; color: #fff; pointer-events: none; }
.rm-basev-top > * { pointer-events: auto; }
.rm-basev-top > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(8,8,12,.72); }
.rm-basev-top .rm-ico { width: 18px; height: 18px; }
.rm-basev-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(8,8,12,.72); color: #c9c9d2; font-size: 12px; z-index: 2; pointer-events: none; }
.rm-boxp { position: absolute; right: 10px; top: 48px; max-height: calc(100% - 58px); width: min(390px, 48%); overflow: auto; z-index: 3; padding: 12px; border-radius: 12px; background: rgba(12,12,16,.95); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--bx) 45%, var(--border)); box-shadow: 0 0 30px color-mix(in srgb, var(--bx) 18%, transparent), 0 10px 30px rgba(0,0,0,.5); }
.rm-boxp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rm-boxp-head img { width: 72px; height: 54px; object-fit: contain; }
.rm-boxp-head h4 { margin: 0; font: 700 17px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: var(--bx); text-shadow: 0 0 10px color-mix(in srgb, var(--bx) 55%, transparent); }
.rm-boxp-head span { font-size: 12px; color: var(--text-dim); }
.rm-boxp-x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.rm-boxp-empty { font-size: 12px; margin: 0 0 6px; }
.rm-boxp-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; flex-wrap: wrap; }
.rm-boxp-foot .btn { margin-left: auto; }
@media (max-width: 760px) { .rm-boxp { position: static; width: auto; max-height: none; margin-top: 8px; } }
.rm-boxlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rm-boxchip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 5px 8px 5px 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); cursor: pointer; text-align: left; }
.rm-boxchip img { grid-row: 1 / 3; width: 44px; height: 33px; object-fit: contain; }
.rm-boxchip b { font: 700 11.5px var(--display-font); letter-spacing: .05em; text-transform: uppercase; color: var(--bx); }
.rm-boxchip span { font-size: 11px; color: var(--text-dim); }
.rm-boxchip:hover, .rm-boxchip.open { border-color: color-mix(in srgb, var(--bx) 60%, var(--border)); }
@media (max-width: 420px) { .rm-boxlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- furnace (2026-10-13) ---- */
.rm-fire { position: absolute; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s; }
.rm-fire.on { opacity: 1; }
.rm-fire::before, .rm-fire::after { content: ""; position: absolute; border-radius: 50%; }
.rm-fire::before { inset: -20% -10%; background: radial-gradient(ellipse at 50% 60%, #fff3c4 0%, #ffb347 30%, #ff5a0d 60%, transparent 75%); mix-blend-mode: screen; animation: rm-flicker 1.3s infinite steps(1, end); }
.rm-fire::after { inset: -220% -160%; background: radial-gradient(ellipse at 50% 55%, rgba(255,120,30,.45), rgba(255,80,10,.12) 45%, transparent 70%); mix-blend-mode: screen; animation: rm-flicker 2.1s infinite ease-in-out alternate; }
@keyframes rm-flicker { 0% { opacity: .95; } 18% { opacity: .7; } 33% { opacity: 1; } 51% { opacity: .78; } 70% { opacity: .92; } 86% { opacity: .66; } 100% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .rm-fire::before, .rm-fire::after { animation: none; } }
.rm-furnp .rm-boxp-head .rm-ico-lg { width: 54px; height: 54px; }
.rm-furn-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.rm-furn-row > .rm-ico { width: 32px; height: 32px; }
.rm-furn-name b { display: block; font-size: 12.5px; }
.rm-furn-name span { font-size: 11px; color: var(--text-dim); }
.rm-furn-row .rm-chips button:disabled { opacity: .4; cursor: not-allowed; }
.rm-furn-out { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.rm-furnp .rm-label { margin-top: 10px; }
.rm-furn-out .rm-got { font-size: 14px; }
.rm-furn-out .rm-got .rm-ico { width: 22px; height: 22px; }
.rm-basev-btns { margin-left: auto; display: inline-flex; gap: 6px; }
.rm-basev-btns .rm-grid-btn { margin-left: 0; }
/* workbench in the base room: an empty spot shows as a faint dashed outline until you build one */
.rm-bxp.ghost { stroke: color-mix(in srgb, var(--bx) 45%, transparent); stroke-dasharray: 6 5; }
.rm-bxp.ghost:hover, .rm-bxp.ghost:focus-visible, .rm-bxp.ghost.open { stroke-dasharray: none; }
.rm-wbp .rm-boxp-head .rm-ico-lg { width: 54px; height: 54px; }
@media (min-width: 761px) { .rm-wbp { left: 10px; right: auto; } } /* the bench is on the right: keep it in view */
.rm-wb-unl { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.rm-wb-unl span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 8px; background: var(--bg-panel-2); border: 1px solid var(--border); font-size: 12px; }
.rm-wb-unl .rm-ico { width: 22px; height: 22px; }
.rm-wbp .rm-up-cost { margin: 0; }
.rm-boxchip.none img { filter: grayscale(1) brightness(.6); } /* furnace not crafted yet */
/* Tool Cupboard panel: your base at a glance + the next wall upgrade */
.rm-tcp .rm-boxp-head .rm-ico-lg { width: 54px; height: 54px; }
.rm-tc-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin: 2px 0 8px; }
.rm-tc-info div { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--bg-panel-2); border: 1px solid var(--border); }
.rm-tc-info span { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.rm-tc-info b { font-size: 12.5px; white-space: nowrap; }
.rm-tc-info .frag-icon { width: 12px; height: 12px; vertical-align: -2px; }
.rm-tc-up { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; margin: 0 0 8px; padding: 6px 8px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--bx) 45%, var(--border)); }
.rm-tc-up-to { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.rm-tc-up-to .rm-ico { width: 26px; height: 26px; }
.rm-tc-up .rm-up-cost { margin: 0; }
.rm-tc-up .btn { grid-column: 2; grid-row: 1 / span 2; }
.rm-tc-max { margin: 0 0 8px; font-size: 12px; }
.rm-upgrade + .rm-upgrade { margin-top: 8px; }
/* daily upkeep (roam_lib UPKEEP): cost, next due, how long the TC covers it */
.rm-tc-upkeep { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin: 0 0 8px; padding: 6px 8px; border-radius: 8px; background: var(--bg-panel-2); border: 1px solid var(--border); font-size: 12px; }
.rm-tc-upkeep > span:first-child { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rm-tc-upkeep > span:last-child { display: block; }
.rm-tc-upkeep > span:last-child .rm-timer { display: inline; } /* not .rm-loot span's inline-flex */
.rm-tc-upkeep.short { border-color: color-mix(in srgb, var(--bad) 55%, var(--border)); }
.rm-tc-upkeep.short > span:last-child { color: var(--bad); }
.rm-block .rm-tc-upkeep { margin: 8px 0 0; }

/* ---- slots + the loot screen (redone 2026-10-13) ---- */
.rm-slots { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 5px; padding: 6px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.05); transition: box-shadow .12s, background .12s; }
.rm-slots.drop-ok { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bx, var(--gold)) 75%, transparent); background: color-mix(in srgb, var(--bx, var(--gold)) 9%, rgba(0,0,0,.3)); }
.rm-slot { position: relative; aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center; user-select: none; -webkit-user-select: none; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.rm-slot.full { cursor: grab; touch-action: manipulation; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.11), rgba(255,255,255,.035) 72%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: box-shadow .12s, transform .1s; }
.rm-slot.full:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px rgba(255,190,90,.2); }
.rm-slot.full:active { transform: scale(.95); }
.rm-slot .rm-ico { width: 72%; height: 72%; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.rm-slot b { position: absolute; right: 4px; bottom: 2px; pointer-events: none; font: 700 11px var(--display-font); letter-spacing: .02em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.rm-slot.lifting { opacity: .28; }
.rm-slot.pop { animation: rm-slot-pop .3s ease-out; }
@keyframes rm-slot-pop { 0% { transform: scale(.82); } 55% { transform: scale(1.1); } 100% { transform: none; } }
.rm-fly { position: fixed; z-index: 990; pointer-events: none; display: grid; place-items: center; transition: transform .26s cubic-bezier(.3,.75,.25,1), opacity .26s; }
.rm-fly .rm-ico { width: 72%; height: 72%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.rm-ghost { position: fixed; z-index: 990; pointer-events: none; width: 58px; height: 58px; border-radius: 7px; display: grid; place-items: center; transform: translate(-50%, -55%) rotate(-4deg); background: rgba(28,28,34,.92); box-shadow: 0 14px 34px rgba(0,0,0,.65), inset 0 0 0 1px var(--gold); }
.rm-ghost .rm-ico { width: 72%; height: 72%; }
.rm-ghost b { position: absolute; right: 4px; bottom: 2px; font: 700 11px var(--display-font); color: #fff; text-shadow: 0 1px 2px #000; }
body.rm-dragging, body.rm-dragging * { cursor: grabbing !important; }
.rm-tip { position: fixed; z-index: 995; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); padding: 5px 9px; border-radius: 7px; white-space: nowrap; font-size: 12px; color: #fff; background: rgba(8,8,12,.96); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.rm-tip[hidden] { display: none; }
.rm-tip i { font-style: normal; color: var(--text-dim); margin-left: 8px; }
.rm-split { position: fixed; z-index: 996; width: 236px; padding: 11px; border-radius: 11px; display: flex; flex-direction: column; gap: 9px; background: #15151b; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 50px rgba(0,0,0,.65); animation: rmPop .14s ease-out; }
.rm-split-head { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.rm-split-head .rm-ico { grid-row: 1 / 3; width: 34px; height: 34px; }
.rm-split-head b { font-size: 13px; }
.rm-split-head span { font-size: 11px; color: var(--text-dim); }
.rm-split input[type=range] { width: 100%; accent-color: var(--gold); }
.rm-split-row { display: flex; gap: 6px; }
.rm-split-row input { flex: 1; min-width: 0; padding: 5px 7px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); font: inherit; font-size: 13px; }
.rm-split-row button { padding: 0 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); cursor: pointer; font-size: 12px; }
.rm-split-row button:hover { border-color: var(--gold); }
body.rm-loot-open { overflow: hidden; }
#rm-loot { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 16px; }
#rm-loot[hidden] { display: none; }
.rm-loot-back { position: absolute; inset: 0; background: rgba(4,5,8,.66); backdrop-filter: blur(3px); animation: rmFade .15s; }
.rm-loot-card { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 8fr); gap: 16px 22px; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(24,24,30,.98), rgba(12,12,16,.98)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 90px rgba(0,0,0,.65); animation: rmSlide .18s ease-out; }
.rm-loot-card.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(860px, 100%); }
.rm-loot-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rm-loot-head { display: flex; align-items: center; gap: 10px; padding-right: 30px; }
.rm-loot-head img, .rm-loot-head .rm-ico { width: 50px; height: 42px; object-fit: contain; flex: none; }
.rm-loot-head h4 { margin: 0; font: 700 17px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: var(--bx, #fff); text-shadow: 0 0 12px color-mix(in srgb, var(--bx, #fff) 35%, transparent); }
.rm-loot-head span { font-size: 12px; color: var(--text-dim); }
.rm-loot-inv .rm-loot-head h4 { color: #fff; text-shadow: none; }
.rm-loot-bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.rm-loot-bar i { display: block; height: 100%; background: var(--bx, var(--gold)); transition: width .25s; }
.rm-loot-inv .rm-loot-bar i { background: var(--gold); }
.rm-loot-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 4px; }
.rm-loot-sub b { font: 700 12px var(--display-font); letter-spacing: .05em; text-transform: uppercase; }
.rm-loot-sub span { color: var(--text-dim); }
.rm-loot-sub .rm-chip { margin-left: auto; }
.rm-loot-acts { display: flex; gap: 8px; justify-content: flex-end; align-items: center; min-height: 36px; }
.rm-loot-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.rm-loot-x:hover { border-color: var(--gold); }
.rm-loot-foot { grid-column: 1 / -1; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); font-size: 11.5px; color: var(--text-dim); }
.rm-loot-foot b { color: var(--text); font-weight: 600; }
.rm-bxtag i { font-style: normal; }
@media (max-width: 760px) {
  #rm-loot { place-items: end stretch; padding: 0; }
  .rm-loot-card, .rm-loot-card.even { grid-template-columns: minmax(0, 1fr); width: 100%; max-height: 90vh; border-radius: 16px 16px 0 0; padding: 14px 12px 12px; }
  .rm-loot-inv { order: 2; }
  .rm-loot-foot { order: 3; }
  .rm-loot-foot span:nth-child(3), .rm-loot-foot span:nth-child(4) { display: none; }
  .rm-slots { gap: 4px; padding: 5px; }
  #rm-loot .rm-slots:not([data-drop^="furn:"]) { --cols: 6 !important; }
  .rm-slot b { font-size: 10px; }
}
/* the furnace on the loot screen: Rust's 1 fuel / 2 ore / 3 output slots */
.rm-furn { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 18px; align-items: end; justify-items: start; padding: 2px 0; }
.rm-furn-grp { display: flex; flex-direction: column; gap: 5px; }
.rm-furn-grp > span { font: 600 10.5px var(--display-font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.rm-furn .rm-slots { grid-template-columns: repeat(var(--cols), 70px); width: max-content; }
.rm-furn-prog { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; gap: 4px; }
.rm-furn-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.rm-furn-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff5a1f, #ffb13b); box-shadow: 0 0 10px rgba(255,130,40,.7); transition: width 1s linear; }
.rm-furn-what { font-size: 11.5px; color: var(--text-dim); min-height: 15px; }
.rm-furn-outg { grid-column: 1 / -1; }
.rm-furn-note { font-size: 11.5px; }
.rm-slot.ghost .rm-ico { opacity: .13; filter: grayscale(1); }
@media (max-width: 760px) { .rm-furn .rm-slots { grid-template-columns: repeat(var(--cols), 62px); } }

/* ---------- walk around the square you're in (js/roam3d.js, 2026-10-14) ---------- */
.rm-sq3d[hidden] { display: none !important; }
.rm-sq3d { position: relative; }
.rm-sq3d-scene { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #0d0b12; }
.rm-sq3d-scene:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.rm-sq3d-gl { position: absolute; inset: 0; }
.rm-sq3d-gl canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.rm-sq3d-top { pointer-events: none; }
.rm-sq3d-top .rm-basev-btns { pointer-events: auto; }
.rm-sq3d-load { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--text-dim); font: 600 13px var(--display-font); letter-spacing: .05em; background: #0d0b12; }
@media (max-width: 700px) { .rm-sq3d-scene { aspect-ratio: 4 / 5; } }
/* the workbench / furnace panel over the 3D view when you're inside your base (owner 2026-10-15) */
#rm-sq3d-panel .rm-boxp { z-index: 6; }
@media (max-width: 760px) { #rm-sq3d-panel .rm-boxp { position: absolute; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 62%; margin: 0; } }
.rm-look-wide { margin: 0 0 10px; }
/* the square's HUD (drawn by roam3d.js) */
.r3-hud { position: absolute; inset: 0; pointer-events: none; color: #fff; }
.r3-cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.r3-aim { position: absolute; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .15s; }
.r3-aim.on { opacity: 1; }
.r3-aim b { display: block; font: 700 12px var(--display-font); text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 1px 3px #000; }
.r3-aim i { display: block; width: 120px; height: 5px; margin: 5px auto 0; background: rgba(0,0,0,.55); border-radius: 3px; overflow: hidden; }
.r3-aim span { display: block; height: 100%; background: var(--gold, #ff8a2a); transition: width .12s; }
.r3-tip { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); padding: 5px 11px; border-radius: 8px; background: rgba(10,8,14,.6); font-size: 11.5px; white-space: nowrap; }
.r3-hit { display: none; position: absolute; right: 18px; bottom: 54px; width: 72px; height: 72px; border-radius: 50%; border: 2px solid #ff8a2a; background: rgba(255,138,42,.25); color: #fff; font: 700 15px var(--display-font); pointer-events: auto; }
@media (pointer: coarse) { .r3-hit { display: block; } .r3-tip { white-space: normal; width: 80%; text-align: center; } }
.r3-pops { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); }
.r3-pop { font: 700 17px var(--display-font); color: #9dff8a; text-shadow: 0 1px 4px #000; text-align: center; white-space: nowrap; animation: r3up 1.4s ease-out forwards; }
.r3-pop.bad { color: #ff6a5a; }
@keyframes r3up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-50px); opacity: 0; } }
.r3-msg { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px; background: rgba(10,8,14,.75); opacity: 0; transition: opacity .2s; font-size: 13px; }
.r3-msg.on { opacity: 1; }
/* your base summary (Base tab + Tool Cupboard): pieces by grade, raid odds, Build in 3D */
.rm-bp, .rm-tc-bp { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 8px 0; }
.rm-tc-bp { gap: 6px; margin: 6px 0; }
.rm-bp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-bp-g { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 6px; background: rgba(255,255,255,.06); font-size: 12px; }
.rm-bp-g .rm-ico { width: 20px; height: 20px; }
/* base building in 3D (owner 2026-10-14): tool bar, the Plan's pieces / the Hammer's grades, what you're aiming at */
.r3-build { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(96%, 760px); pointer-events: none; }
.r3-build[hidden], .r3-build [hidden] { display: none !important; }
.r3-build button { pointer-events: auto; cursor: pointer; border: 1px solid rgba(255,255,255,.18); background: rgba(10,8,14,.72); color: #e8e4ee; border-radius: 7px; font: 700 11px var(--display-font); letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px; }
.r3-build button.on { border-color: var(--gold, #ff8a2a); color: #fff; background: rgba(255,138,42,.28); box-shadow: 0 0 10px rgba(255,138,42,.35); }
.r3-tools { display: flex; gap: 6px; }
.r3-tools button { min-width: 112px; padding: 8px 12px; font-size: 12px; }
.r3-tools b { display: inline-block; min-width: 16px; margin-right: 6px; padding: 0 4px; border-radius: 4px; background: rgba(255,255,255,.14); color: #fff; }
.r3-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
.r3-opts button.demo { border-color: rgba(255,80,70,.45); }
.r3-opts button.demo.on { background: rgba(255,60,50,.3); border-color: #ff5a4a; box-shadow: 0 0 10px rgba(255,70,60,.35); }
.r3-info { padding: 5px 11px; border-radius: 7px; background: rgba(10,8,14,.72); font-size: 12px; color: #c8ffd0; text-align: center; max-width: 100%; }
.r3-info.bad { color: #ffb0a8; }
@media (max-width: 640px) { .r3-opts button { padding: 5px 6px; font-size: 9.5px; } .r3-build { bottom: 64px; } }
/* gear slots (2026-10-15): the Gear screen, the gear line, gear on the Craft tab */
.rm-gearchip { cursor: pointer; border-bottom: 1px dashed transparent; }
.rm-gearchip:hover { color: var(--text); border-bottom-color: var(--gold); }
.rm-gearline { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 4px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s; }
.rm-gearline:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); }
.rm-gearline-ico { display: flex; flex-wrap: wrap; gap: 2px; flex: 0 1 auto; max-width: 46%; }
.rm-gearline-ico .rm-ico { width: 22px; height: 22px; }
.rm-gearline-ico .rm-ico:first-child { width: 30px; height: 30px; }
.rm-gearline-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: 12px; }
.rm-gearline-txt b { font: 700 13px var(--display-font); letter-spacing: .02em; }
.rm-gearline-txt i { font-style: normal; color: var(--text-dim); }
.rm-gearline-go { flex: none; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--border); font: 700 11px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.rm-slots.rm-gear { display: flex; flex-direction: column; gap: 8px; }
.rm-gear-arms, .rm-gear-wear { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.rm-gslot em { position: absolute; left: 5px; top: 3px; pointer-events: none; font: 700 9px var(--display-font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.rm-gslot.full em { color: color-mix(in srgb, var(--bx, var(--gold)) 80%, #fff); }
.rm-gslot.locked { opacity: .45; background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px); }
.rm-gear-stat { display: flex; flex-direction: column; justify-content: center; padding: 4px 8px; border-radius: 5px; background: rgba(255,255,255,.03); min-width: 0; }
.rm-gear-stat b { font: 700 20px var(--display-font); color: var(--bx, var(--gold)); }
.rm-gear-stat span { font-size: 10.5px; line-height: 1.25; color: var(--text-dim); }
.rm-gear-notes { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.rm-need { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 10px var(--display-font); letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; background: rgba(53,208,127,.16); color: var(--good); border: 1px solid rgba(53,208,127,.4); }
.rm-need.short { background: rgba(255,92,92,.12); color: var(--bad); border-color: rgba(255,92,92,.4); }
.rm-glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; margin-bottom: 14px; }
.rm-glist-armor { grid-template-columns: 1fr; gap: 6px; }
.rm-gtype { display: grid; grid-template-columns: 58px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.rm-gtype > span { align-self: center; font: 700 11px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.rm-gitem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel-2); min-width: 0; }
.rm-gitem.have { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.rm-gitem .rm-ico-lg { width: 34px; height: 34px; }
.rm-gitem-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rm-gitem-main b { font: 700 12.5px var(--display-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-gitem-main i { font-style: normal; font-size: 11px; color: var(--text-dim); }
.rm-gitem-main .rm-up-cost { margin: 2px 0 0; gap: 2px 8px; }
.rm-gitem-main .rm-cost { font-size: 11px; }
.rm-gitem-main .rm-cost .rm-ico { width: 15px; height: 15px; }
.rm-gbtns { display: flex; flex-direction: column; gap: 4px; flex: none; }
.rm-gbtns .rm-act { padding: 4px 10px; font-size: 11.5px; min-width: 62px; }
@media (max-width: 980px) { .rm-gtype { grid-template-columns: 1fr; } .rm-gtype > span { margin-top: 4px; } }
/* hotbar + crafting menu (2026-10-15, like Rust): 1 tool, 2 Building Plan, 3 Hammer, 4-6 doors; Q crafts */
.r3-hotbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 4px; pointer-events: none; }
.r3-slot { position: relative; width: 60px; height: 60px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); background: rgba(30,30,30,.72); color: #ddd; display: grid; place-items: center; pointer-events: auto; cursor: pointer; font: inherit; }
.r3-slot img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); pointer-events: none; }
.r3-slot b { position: absolute; left: 4px; top: 2px; font: 700 10px var(--display-font); color: rgba(255,255,255,.55); }
.r3-slot i { position: absolute; right: 4px; bottom: 2px; font: 700 11px var(--display-font); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.r3-slot em { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 2px 7px; border-radius: 4px; background: rgba(10,8,14,.85); font: 600 10.5px var(--display-font); font-style: normal; white-space: nowrap; opacity: 0; transition: opacity .12s; pointer-events: none; }
.r3-slot:hover em, .r3-slot.on em { opacity: 1; }
.r3-slot.on { border-color: rgba(120,190,255,.9); background: rgba(70,120,170,.45); box-shadow: inset 0 0 0 1px rgba(120,190,255,.5), 0 0 10px rgba(80,160,255,.35); }
.r3-slot.off { opacity: .4; }
.r3-slot.empty { cursor: default; background: rgba(20,20,20,.5); }
.r3-craft { margin-left: 6px; border-color: rgba(140,200,90,.5); background: rgba(70,95,40,.7); }
.r3-craft span { font: 700 11px var(--display-font); letter-spacing: .06em; text-transform: uppercase; color: #e6f5d0; }
@media (pointer: coarse) { .r3-hit { bottom: 92px; } }
@media (max-width: 640px) { .r3-slot { width: 44px; height: 44px; } .r3-slot img { width: 30px; height: 30px; } .r3-craft { margin-left: 3px; } }
.rm-cq-open { margin-left: auto; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(140,200,90,.5); background: rgba(70,95,40,.45); color: #e6f5d0; font: 700 11px var(--display-font); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.rm-cq-open b { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,.16); color: #fff; }
.rm-inv-label { display: flex; align-items: center; gap: 6px; }
.rm-craft-src .rm-cq-open { margin-left: 8px; }
.rm-cq { position: fixed; inset: 0; z-index: 820; display: grid; place-items: center; padding: 16px; }
.rm-cq[hidden] { display: none; }
.rm-cq-back { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.rm-cq-card { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; width: min(1040px, 100%); height: min(640px, calc(100vh - 32px)); padding: 14px; border-radius: 8px; background: rgba(24,24,24,.96); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.6); color: #ddd; }
.rm-cq-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; padding-right: 34px; }
.rm-cq-head h3 { margin: 0; font: 700 20px var(--display-font); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.rm-cq-head span { font-size: 12px; color: #9a9a9a; }
.rm-cq-x { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #ccc; font-size: 20px; cursor: pointer; }
.rm-cq-cats { display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.rm-cq-cats button { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 4px; border: 0; background: rgba(255,255,255,.04); color: #c8c8c8; font: 700 12px var(--display-font); letter-spacing: .06em; text-transform: uppercase; text-align: left; cursor: pointer; }
.rm-cq-cats button i { font-style: normal; font-size: 11px; color: #888; }
.rm-cq-cats button:hover { background: rgba(255,255,255,.08); }
.rm-cq-cats button.on { background: rgba(120,190,255,.18); color: #fff; box-shadow: inset 3px 0 0 #78beff; }
.rm-cq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-rows: 96px; gap: 5px; overflow: auto; align-content: start; padding: 2px; }
.rm-cq-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; border-radius: 4px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.035); color: #aaa; cursor: pointer; font: inherit; }
.rm-cq-tile .rm-ico { width: 46px; height: 46px; opacity: .45; filter: grayscale(.6); }
.rm-cq-tile.ok .rm-ico { opacity: 1; filter: none; }
.rm-cq-tile span { font-size: 10.5px; line-height: 1.15; text-align: center; max-height: 2.3em; overflow: hidden; }
.rm-cq-tile em { position: absolute; left: 4px; top: 3px; font: 700 9px var(--display-font); font-style: normal; color: #9fd8ff; }
.rm-cq-tile i { position: absolute; right: 5px; top: 3px; font: 700 10px var(--display-font); font-style: normal; color: #b6e08c; }
.rm-cq-tile:hover { background: rgba(255,255,255,.08); }
.rm-cq-tile.ok { color: #e8e8e8; }
.rm-cq-tile.sel { border-color: rgba(120,190,255,.85); background: rgba(70,120,170,.3); }
.rm-cq-none { grid-column: 1 / -1; padding: 20px; }
.rm-cq-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: auto; padding: 10px; border-radius: 6px; background: rgba(255,255,255,.035); }
.rm-cq-big { display: flex; gap: 10px; align-items: flex-start; }
.rm-cq-big .rm-ico-xl { width: 72px; height: 72px; flex: none; }
.rm-cq-big h4 { margin: 0 0 4px; font: 700 16px var(--display-font); letter-spacing: .04em; color: #fff; }
.rm-cq-big h4 i { font-style: normal; color: #9a9a9a; font-size: 13px; }
.rm-cq-big p { margin: 0 0 4px; font-size: 12px; color: #b8b8b8; line-height: 1.35; }
.rm-cq-ing { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.rm-cq-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 3px; background: rgba(255,255,255,.03); }
.rm-cq-row span:first-child { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rm-cq-row span:not(:first-child) { text-align: right; font: 600 12px var(--display-font); }
.rm-cq-row .rm-ico { width: 20px; height: 20px; }
.rm-cq-row.hd { background: none; color: #888; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.rm-cq-row.short span:last-child { color: #ff6f61; }
.rm-cq-wb { font-size: 12px; color: #9fd8ff; }
.rm-cq-wb.short { color: #ff9a8a; }
.rm-cq-go { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.rm-cq-n { display: flex; gap: 3px; }
.rm-cq-n button, .rm-cq-n input { height: 34px; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #ddd; font: 700 13px var(--display-font); }
.rm-cq-n button { min-width: 34px; cursor: pointer; }
.rm-cq-n button:disabled { opacity: .4; cursor: default; }
.rm-cq-n input { width: 52px; text-align: center; }
.rm-cq-craft { flex: 1 1 auto; min-height: 38px; background: linear-gradient(180deg, #6f9a34, #557a26) !important; border-color: #7fae3e !important; color: #f2ffe2 !important; }
.rm-cq-craft:disabled { filter: grayscale(.8); opacity: .55; }
.rm-cq-why { font-size: 12px; color: #ff9a8a; }
.rm-cq-foot { grid-column: 1 / -1; display: flex; gap: 16px; font-size: 11px; color: #888; }
.rm-cq-foot b { color: #ddd; }
body.rm-cq-on { overflow: hidden; }
@media (max-width: 860px) {
  .rm-cq { padding: 0; place-items: end stretch; }
  .rm-cq-card { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(140px, 1fr) auto auto; height: 100%; border-radius: 0; }
  .rm-cq-cats { flex-direction: row; overflow-x: auto; }
  .rm-cq-cats button { flex: none; gap: 6px; }
  .rm-cq-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); grid-auto-rows: 94px; }
  .rm-cq-info { max-height: 46vh; }
}

/* the Market tab: payout chart pools + buying from the map (2026-10-15) */
.rm-pools { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 0 0 10px; }
.rm-pool { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel-2); }
.rm-pool b { font: 700 12px var(--display-font); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.rm-pool span { font: 800 20px var(--display-font); }
.rm-pool i { font-style: normal; font-size: 11.5px; color: var(--good); }
.rm-mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; margin: 4px 0 14px; }
.rm-mrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel-2); min-width: 0; }
.rm-mrow.shut { opacity: .6; }
.rm-mrow .rm-ico-lg { width: 34px; height: 34px; flex: none; }
.rm-mrow-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rm-mrow-main b { font: 700 12.5px var(--display-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-mrow-main i { font-style: normal; font-size: 11px; color: var(--text-dim); }
.rm-mbuy { display: flex; align-items: center; gap: 4px; flex: none; }
.rm-mbuy input { width: 58px; height: 30px; padding: 0 4px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); font: 600 12px var(--display-font); text-align: center; }
.rm-mbuy .rm-dim { font-size: 11px; white-space: nowrap; }
@media (max-width: 640px) { .rm-mlist { grid-template-columns: 1fr; } .rm-mrow { flex-wrap: wrap; } .rm-mbuy { margin-left: auto; } }

/* supply drops, locked crates, extras (2026-10-17) */
.rm-grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 14px; }
.rm-grid-4 .rm-card .rm-mbuy { justify-content: center; }
.rm-crate.drop { border-color: rgba(80,170,255,.5); background: linear-gradient(180deg, rgba(80,170,255,.1), var(--bg-panel-2)); }
.rm-drop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 5px; }
.rm-drop-it { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.04); min-width: 0; }
.rm-drop-it .rm-ico { width: 26px; height: 26px; flex: none; }
.rm-drop-it span { flex: 1 1 auto; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-drop-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; padding: 2px; border-radius: 50%; border: 2px solid #4ea8ff; background: rgba(10,14,24,.85); cursor: pointer; z-index: 3; }
.rm-drop-pin .rm-ico { width: 100%; height: 100%; }
.rm-drop-pin.locked { border-color: #ffb13b; }
.rm-drop-pin.open { box-shadow: 0 0 0 3px rgba(78,168,255,.35), 0 0 12px rgba(78,168,255,.6); animation: rm-drop-pulse 1.6s ease-in-out infinite; }
.rm-drop-pin.locked.open { box-shadow: 0 0 0 3px rgba(255,177,59,.35), 0 0 12px rgba(255,177,59,.6); }
@keyframes rm-drop-pulse { 50% { transform: translate(-50%, -50%) scale(1.15); } }
.rm-mybag { position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 3px #000); }
.rm-mybag .rm-ico { width: 100%; height: 100%; }
.rm-hack { border: 1px solid rgba(255,177,59,.45); }
@media (prefers-reduced-motion: reduce) { .rm-drop-pin.open { animation: none; } }

/* the Bradley (2026-10-17) */
.rm-crate.bradley { border-color: rgba(255,80,60,.55); background: linear-gradient(180deg, rgba(255,80,60,.12), var(--bg-panel-2)); }
.rm-drop-pin.bradley { border-color: #ff4a3a; }
.rm-drop-pin.bradley:not(.open) { box-shadow: 0 0 0 3px rgba(255,74,58,.35), 0 0 12px rgba(255,74,58,.6); animation: rm-drop-pulse 1.2s ease-in-out infinite; }
.rm-bradley { border: 1px solid rgba(255,80,60,.5); }
.rm-hp { position: relative; height: 18px; margin: 4px 0 8px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.rm-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #c8321e, #ff6a3a); }
.rm-hp span { position: relative; display: block; text-align: center; font: 700 11px/18px var(--display-font); color: #fff; text-shadow: 0 1px 2px #000; }
@media (prefers-reduced-motion: reduce) { .rm-drop-pin.bradley:not(.open) { animation: none; } }