/* Landing64 — simulations (.ns-* NetSim, .bm-* BattleMap). Reads tokens.css. */
.ns-root, .bm-root { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; font-family: var(--l64-mono); color: var(--l64-text); text-transform: uppercase; }
.ns-root *, .bm-root * { box-sizing: border-box; }
.ns-panel, .bm-panel { position: relative; background: var(--l64-panel); border: 1px solid var(--l64-line); border-radius: var(--l64-radius); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ns-panel::before, .ns-panel::after, .bm-panel::before, .bm-panel::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; border: 0 solid var(--l64-teal); }
.ns-panel::before, .bm-panel::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.ns-panel::after, .bm-panel::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.ns-root button, .bm-root button { font: 700 11px/1 var(--l64-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--l64-soft); background: rgba(255,255,255,.04); border: 1px solid var(--l64-line-strong); border-radius: var(--l64-radius); padding: 11px 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ns-root button:hover, .bm-root button:hover { color: var(--l64-text); border-color: var(--l64-teal); }
.ns-root button:focus-visible, .bm-root button:focus-visible { outline: 2px solid var(--l64-gold); outline-offset: 2px; }
.ns-root button[aria-pressed="true"], .bm-root button[aria-pressed="true"] { background: var(--l64-teal-dim); color: var(--l64-teal); border-color: var(--l64-teal); }
.ns-root button:disabled { opacity: .45; cursor: default; }

/* --- NetSim --- */
.ns-stage { position: relative; height: 560px; order: 1; overflow: hidden; border: 1px solid var(--l64-line); border-radius: var(--l64-radius);
	background: radial-gradient(ellipse at 50% 60%, rgba(0,245,195,.07), transparent 60%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/48px 48px, var(--l64-bg2); }
.ns-glow { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(30px); opacity: .5; pointer-events: none; transition: opacity .6s; }
.ns-gA { background: var(--l64-srvA); } .ns-gB { background: var(--l64-srvB); } .ns-gC { background: var(--l64-teal); opacity: .35; }
.ns-img { position: absolute; top: 57%; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; transition: filter .5s, opacity .5s; user-select: none; }
.ns-iA { left: 17%; height: 70%; } .ns-iC { left: 50%; height: 44%; } .ns-iB { left: 83%; height: 70%; }
.ns-down .ns-iB { filter: brightness(.22) saturate(.3); } .ns-down .ns-gB { opacity: 0; }
.ns-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
.ns-cap, .ns-plab { position: absolute; transform: translateX(-50%); text-align: center; font: 700 10px/1.4 var(--l64-mono); letter-spacing: .1em; color: var(--l64-soft); width: min(300px, 30%); pointer-events: none; }
.ns-capA { color: var(--l64-srvA); } .ns-capB { color: var(--l64-srvB); } .ns-capC { color: var(--l64-teal); }
.ns-plab { color: var(--l64-muted); width: auto; white-space: nowrap; }
.ns-tip { position: absolute; z-index: 5; width: 220px; padding: 10px 12px; font-size: 10px; letter-spacing: .06em; pointer-events: none; background: var(--l64-panel-solid); }
.ns-tip[hidden] { display: none; }
.ns-tip b { display: block; margin-bottom: 6px; font-size: 11px; }
.ns-tip div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: var(--l64-text); } .ns-tip span { color: var(--l64-muted); }
.ns-hud { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 10px 12px; max-width: min(640px, 62%); }
.ns-head { display: flex; align-items: center; gap: 8px; font: 700 10px/1 var(--l64-mono); letter-spacing: .14em; color: var(--l64-teal); margin-bottom: 8px; }
.ns-live { width: 7px; height: 7px; background: var(--l64-teal); border-radius: 1px; box-shadow: 0 0 8px var(--l64-teal); animation: ns-blink 1.4s infinite; }
@keyframes ns-blink { 50% { opacity: .35; } }
.ns-cells { display: flex; gap: 16px; align-items: flex-end; }
.ns-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ns-cell b { font: 700 24px/1 var(--l64-display); letter-spacing: .02em; color: var(--l64-text); font-variant-numeric: tabular-nums; }
.ns-cell i { font: 500 9px/1.2 var(--l64-mono); font-style: normal; letter-spacing: .1em; color: var(--l64-muted); }
.ns-spk canvas { width: 120px; height: 30px; display: block; }
.ns-foot { margin-top: 8px; font: 700 10px/1 var(--l64-mono); letter-spacing: .1em; color: var(--l64-soft); }
.ns-banner { margin-top: 8px; padding: 7px 9px; font: 700 10px/1.5 var(--l64-mono); letter-spacing: .08em; color: #ff7a6e; border: 1px solid rgba(255,61,61,.5); background: rgba(255,61,61,.1); }
.ns-banner small { font-weight: 500; color: var(--l64-soft); } .ns-banner b { color: #ffd0cb; }
.ns-banner.ok { color: var(--l64-teal); border-color: var(--l64-teal); background: var(--l64-teal-dim); }
.ns-banner[hidden] { display: none; }
.ns-feed { position: absolute; z-index: 3; top: 12px; right: 12px; width: 300px; padding: 10px 12px; }
.ns-fh { font: 700 10px/1 var(--l64-mono); letter-spacing: .14em; color: var(--l64-muted); margin-bottom: 7px; }
.ns-rows { min-height: 76px; }
.ns-row { font: 600 11px/1.45 var(--l64-mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ns-in .35s var(--l64-ease); }
.ns-row em { font-style: normal; color: var(--l64-soft); } .ns-sys { color: var(--l64-gold); }
@keyframes ns-in { from { opacity: 0; transform: translateX(10px); } }
.ns-controls { order: 3; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 12px 14px; }
.ns-segw { display: flex; align-items: center; gap: 12px; } .ns-lab { font: 700 10px/1 var(--l64-mono); letter-spacing: .12em; color: var(--l64-muted); }
.ns-seg { display: flex; } .ns-seg button { border-radius: 0; margin-left: -1px; } .ns-seg button:first-child { border-radius: var(--l64-radius) 0 0 var(--l64-radius); margin: 0; } .ns-seg button:last-child { border-radius: 0 var(--l64-radius) var(--l64-radius) 0; }
.ns-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-fire { color: var(--l64-gold) !important; border-color: rgba(255,194,58,.55) !important; } .ns-fire:hover { background: rgba(255,194,58,.12) !important; }
@media (max-width: 1100px) { .ns-feed { width: 250px; } .ns-hud { max-width: 66%; } .ns-cells { gap: 12px; } .ns-spk { display: none; } }

/* phone: vertical layout */
.ns-v .ns-stage { height: 800px; }
.ns-v .ns-hud, .ns-v .ns-feed { position: relative; top: auto; left: auto; right: auto; width: auto; max-width: none; }
.ns-v .ns-hud { order: 0; } .ns-v .ns-feed { order: 2; }
.ns-v .ns-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ns-v .ns-cell b { font-size: 21px; } .ns-v .ns-spk { display: none; }
.ns-v .ns-iA, .ns-v .ns-iB, .ns-v .ns-iC { left: 50%; } .ns-v .ns-iA { top: 17%; height: 24%; } .ns-v .ns-iC { top: 50%; height: 17%; } .ns-v .ns-iB { top: 83%; height: 24%; }
.ns-v .ns-cap { width: min(210px, 56%); } .ns-v .ns-plab { font-size: 9px; }
.ns-v .ns-controls { flex-direction: column; align-items: stretch; } .ns-v .ns-segw { justify-content: space-between; }
.ns-v .ns-btns { display: grid; grid-template-columns: 1fr 1fr; } .ns-v .ns-btn { padding: 13px 8px; }
@media (prefers-reduced-motion: reduce) { .ns-live, .ns-row { animation: none; } .ns-img, .ns-glow { transition: none; } }
.ns-v .ns-cap, .ns-v .ns-plab { background: rgba(6,8,12,.82); padding: 3px 6px; }
.ns-v .ns-rows { min-height: 0; }

/* --- BattleMap --- */
.bm-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; }
.bm-stage { position: relative; height: 600px; overflow: hidden; border: 1px solid var(--l64-line); border-radius: var(--l64-radius); background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/40px 40px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/40px 40px, #0a0d12; }
.bm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bm-lab { display: flex; flex-direction: column; gap: 5px; font: 700 10px/1.35 var(--l64-mono); letter-spacing: .12em; color: var(--l64-soft); }
.bm-lab b { color: var(--l64-teal); display: flex; align-items: center; gap: 8px; } .bm-lab b::before { content: ""; width: 7px; height: 7px; background: var(--l64-teal); box-shadow: 0 0 8px var(--l64-teal); }
.bm-lab-in { position: absolute; top: 14px; left: 14px; max-width: 150px; pointer-events: none; } .bm-lab-out { display: none; }
.bm-legend { position: absolute; left: 14px; bottom: 14px; max-width: 150px; display: flex; flex-direction: column; gap: 7px; font: 700 9px/1.4 var(--l64-mono); letter-spacing: .08em; color: var(--l64-soft); pointer-events: none; }
.bm-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -1px; border-radius: 1px; }
.bm-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 14px 22px; background: rgba(6,8,12,.9); border: 1px solid var(--l64-line-strong); pointer-events: none; display: flex; flex-direction: column; gap: 6px; animation: ns-in .35s var(--l64-ease); }
.bm-banner b { font: 700 26px/1 var(--l64-display); letter-spacing: .05em; } .bm-banner span { font: 700 10px/1 var(--l64-mono); letter-spacing: .14em; color: var(--l64-soft); }
.bm-banner[hidden], .bm-tip[hidden], .bm-card[hidden] { display: none; }
.bm-tip { position: absolute; z-index: 4; width: 156px; padding: 9px 11px; font-size: 10px; letter-spacing: .06em; pointer-events: none; background: var(--l64-panel-solid); }
.bm-tip b, .bm-card b { display: block; font: 700 17px/1 var(--l64-display); letter-spacing: .04em; margin-bottom: 6px; }
.bm-tip div, .bm-card div:not(.bm-ch) { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font: 600 10px/1.3 var(--l64-mono); } .bm-tip span, .bm-card span { color: var(--l64-muted); } .bm-tip em, .bm-card em { font-style: normal; }
.bm-side { padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.bm-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 8px; }
.bm-sc b, .bm-mid b { display: block; font: 700 38px/1 var(--l64-display); font-variant-numeric: tabular-nums; } .bm-mid b { font-size: 26px; min-width: 96px; }
.bm-sc i, .bm-mid i { font: 700 10px/1 var(--l64-mono); font-style: normal; letter-spacing: .14em; color: var(--l64-muted); } .bm-sc.t b { color: var(--l64-t); } .bm-sc.ct b { color: var(--l64-ct); }
.bm-alive { text-align: center; font: 700 12px/1 var(--l64-mono); letter-spacing: .12em; padding: 9px 0; border-block: 1px solid var(--l64-line); } .bm-alive b { font-weight: 800; }
.bm-ctl { display: flex; flex-direction: column; gap: 8px; }
.bm-seg { display: grid; grid-template-columns: 1fr 1fr; } .bm-seg button { border-radius: 0; margin-left: -1px; padding: 10px 6px; font-size: 10px; } .bm-seg button:first-child { margin: 0; border-radius: var(--l64-radius) 0 0 var(--l64-radius); } .bm-seg button:last-child { border-radius: 0 var(--l64-radius) var(--l64-radius) 0; }
.bm-new { color: var(--l64-gold) !important; border-color: rgba(255,194,58,.55) !important; } .bm-new:hover { background: rgba(255,194,58,.12) !important; }
.bm-card { padding: 10px; border: 1px solid var(--l64-gold); background: rgba(255,194,58,.05); }
.bm-ch { display: flex; justify-content: space-between; align-items: center; font: 700 9px/1 var(--l64-mono); letter-spacing: .12em; color: var(--l64-gold); margin-bottom: 8px; } .bm-ch button { padding: 5px 7px !important; font-size: 9px !important; }
.bm-xs { font: 700 10px/1 var(--l64-mono); letter-spacing: .1em; color: var(--l64-teal); } .bm-xs b { font-size: 14px; }
.bm-feed { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--l64-line); padding-top: 10px; }
.bm-row { font: 600 10px/1.45 var(--l64-mono); letter-spacing: .02em; color: var(--l64-soft); animation: ns-in .3s var(--l64-ease); }
.bm-row i { font-style: normal; font-weight: 800; } .bm-row em { font-style: normal; font-size: 8px; margin-left: 4px; padding: 1px 4px; color: var(--l64-teal); border: 1px solid var(--l64-teal); letter-spacing: .1em; } .bm-sys { color: var(--l64-gold); }
@media (max-width: 1100px) { .bm-main { grid-template-columns: minmax(0, 1fr) 260px; } }
@media (max-width: 899px) {
	.bm-main { grid-template-columns: 1fr; } .bm-stage { height: auto; aspect-ratio: 1 / 1; }
	.bm-lab-in { display: none; } .bm-lab-out { display: flex; } .bm-legend { left: 8px; bottom: 8px; max-width: 128px; font-size: 8px; gap: 4px; }
	.bm-feed { max-height: 230px; }
}

/* lead: the restart banner lives in the stage (bottom centre, between the rack captions) so the HUD never grows over rack A */
.ns-stage > .ns-banner { position: absolute; z-index: 4; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; white-space: nowrap; text-align: center; backdrop-filter: blur(4px); }
.ns-v .ns-stage > .ns-banner { bottom: auto; top: 10px; }
/* kill feed names read like the in-game feed */
.ns-rows, .bm-feed { text-transform: none; }