:root{
    --bg:#03060f; --bg2:#070b18; --ink:#f3f7ff; --muted:#9fb0c6; --faint:#5f7088;
    --panel:rgba(10,16,30,.62); --panel-line:rgba(140,170,210,.16);
    --cyan:#7dd3fc; --gold:#f4d35e; --violet:#a78bfa; --emerald:#34d399; --rose:#fb7185; --slate:#94a3b8;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:radial-gradient(120% 120% at 50% 0%,var(--bg2),var(--bg) 70%);color:var(--ink);font-family:var(--font);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
  #stage{position:fixed;inset:0}
  canvas{display:block;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  #stage canvas{width:100%!important;height:100%!important;display:block}
  .labels{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
  .lbl{position:absolute;left:0;top:0;font:600 12px/1.1 var(--font);letter-spacing:.2px;white-space:nowrap;
    padding:3px 8px;border-radius:8px;background:rgba(4,8,18,.6);border:1px solid rgba(150,180,220,.18);
    text-shadow:0 1px 4px rgba(0,0,0,.9);transition:opacity .25s ease;backdrop-filter:blur(3px);will-change:transform,opacity}
  .lbl small{display:block;font:700 9px/1.2 var(--mono);letter-spacing:.8px;text-transform:uppercase;opacity:.72;margin-top:1px}
  .lbl.area{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:1.6px;padding:5px 11px;background:rgba(4,8,18,.46)}
  .lbl.area .count{font:700 10px/1 var(--mono);opacity:.7;margin-left:6px}
  /* Agent identity stays readable independently of ordinary note labels. */
  .agent-marker{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;pointer-events:none;
    padding:5px 8px;border-radius:8px;background:rgba(4,8,18,.94);border:1px solid rgba(180,210,240,.45);
    transition:opacity .25s ease;will-change:transform,opacity;z-index:6;height:44px}
  .agent-rocket{flex:0 0 24px;width:24px;height:28px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85))}
  .agent-rocket svg{display:block;width:24px;height:28px}
  .agent-position{position:absolute;left:0;top:0;width:9px;height:9px;border:1px solid #fff;border-radius:50%;box-shadow:0 0 9px #fff;pointer-events:none;z-index:6}
  .agent-name{font:700 11px/1.45 var(--mono);letter-spacing:.2px;overflow:hidden;
    padding:0;min-width:0;
    text-shadow:0 1px 4px rgba(0,0,0,.9);backdrop-filter:blur(3px)}
  .agent-name>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .ui{position:fixed;z-index:10}
  .brand{top:calc(28px + env(safe-area-inset-top,0px));left:18px;display:flex;align-items:center;gap:11px}
  .glyph{width:30px;height:30px;border-radius:50%;flex:none;background:
      radial-gradient(circle at 50% 42%,#fff 0%,var(--gold) 26%,rgba(244,211,94,0) 70%),
      radial-gradient(circle at 50% 50%,rgba(125,211,252,.5),rgba(125,211,252,0) 72%);
    box-shadow:0 0 22px rgba(244,211,94,.5),inset 0 0 8px rgba(255,255,255,.5)}
  .brand h1{margin:0;font-size:15px;font-weight:700;letter-spacing:.3px}
  .brand .sub{font:700 9px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin-top:3px}
  .badge{display:inline-flex;align-items:center;gap:6px;font:700 9px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;
    padding:5px 9px;border-radius:99px;border:1px solid var(--panel-line);background:var(--panel);color:var(--muted);margin-left:4px;backdrop-filter:blur(8px)}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 8px var(--emerald);animation:bl 1.8s infinite}
  @keyframes bl{50%{opacity:.4}}

  .toolbar{top:calc(70px + env(safe-area-inset-top,0px));left:18px;display:flex;gap:7px;align-items:center}
  .search{width:230px;max-width:48vw;font:600 12px/1 var(--font);color:var(--ink);background:var(--panel);border:1px solid var(--panel-line);
    border-radius:10px;padding:9px 12px;outline:none;backdrop-filter:blur(9px)}
  .search::placeholder{color:var(--faint)}
  .search:focus{border-color:rgba(125,211,252,.45)}
  .iconbtn{font:700 11px/1 var(--font);color:var(--muted);background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;
    padding:9px 12px;cursor:pointer;backdrop-filter:blur(9px);transition:.16s}
  .iconbtn:hover{color:var(--ink);border-color:rgba(160,190,225,.34)}
  .iconbtn.on{color:var(--cyan);border-color:rgba(125,211,252,.4);background:rgba(125,211,252,.08)}
  .iconbtn.lang{font-family:var(--mono);letter-spacing:1px}

  .filterPanel{top:calc(112px + env(safe-area-inset-top,0px));left:18px;width:264px;max-width:84vw;max-height:62vh;overflow:auto;background:var(--panel);border:1px solid var(--panel-line);
    border-radius:13px;padding:12px 14px;backdrop-filter:blur(11px);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.2s}
  .filterPanel.show{opacity:1;transform:none;pointer-events:auto}
  .fsec{margin-bottom:11px}
  .fsec h5{margin:0 0 6px;font:700 8.5px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
  .chips{display:flex;flex-wrap:wrap;gap:5px}
  .chip{font:600 10.5px/1 var(--font);color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--panel-line);
    border-radius:99px;padding:5px 9px;cursor:pointer;transition:.14s}
  .chip:hover{color:var(--ink)}
  .chip.on{color:#04121f;background:var(--cyan);border-color:var(--cyan)}
  .ftoggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer;margin-top:4px}
  .ftoggle input{accent-color:var(--cyan)}

  .stats{top:calc(28px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:1px;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;overflow:hidden;backdrop-filter:blur(9px)}
  .stats div{padding:7px 14px;text-align:center;min-width:62px}
  .stats b{display:block;font:700 15px/1 var(--mono)}
  .stats span{font:700 8.5px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);margin-top:4px;display:block}

  .deck{bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;
    background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:7px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.45)}
  .seg{display:flex;gap:2px;background:rgba(0,0,0,.28);border-radius:10px;padding:2px}
  .seg button{appearance:none;border:0;background:transparent;color:var(--muted);font:700 11px/1 var(--font);letter-spacing:.3px;
    padding:9px 13px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.16s}
  .seg button .k{font:700 8px/1 var(--mono);opacity:.55;border:1px solid currentColor;border-radius:4px;padding:2px 3px}
  .seg button:hover{color:var(--ink);background:rgba(255,255,255,.05)}
  .seg button.on{color:#04121f;background:linear-gradient(180deg,var(--cyan),#5cc1ef);box-shadow:0 4px 16px rgba(125,211,252,.35)}
  .seg button.on .k{opacity:.6;border-color:rgba(4,18,31,.5)}
  .deck .div{width:1px;height:26px;background:var(--panel-line)}
  .btn{appearance:none;border:1px solid var(--panel-line);background:rgba(255,255,255,.03);color:var(--muted);
    font:700 11px/1 var(--font);padding:9px 12px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.16s}
  .btn:hover{color:var(--ink);border-color:rgba(160,190,225,.34)}
  .btn.on{color:var(--gold);border-color:rgba(244,211,94,.4);background:rgba(244,211,94,.08)}

  .mmwrap{right:18px;bottom:182px;background:var(--panel);border:1px solid var(--panel-line);border-radius:13px;padding:8px;backdrop-filter:blur(9px)}
  .mmwrap canvas{display:block;width:150px;height:150px;border-radius:7px;cursor:crosshair}

  .legend{right:18px;bottom:18px;background:var(--panel);border:1px solid var(--panel-line);border-radius:13px;padding:11px 13px;backdrop-filter:blur(9px);max-width:212px}
  .legend h4{margin:0 0 8px;font:700 8.5px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--faint)}
  .legend .row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin:5px 0}
  .legend .row b{color:var(--ink);font-weight:600}
  body:not(.legend-open) .legend,body:not(.legend-open) .mmwrap{display:none}
  .mk{width:13px;height:13px;flex:none;display:inline-flex;align-items:center;justify-content:center}
  .mk i{display:block;border-radius:50%}
  .mk.star i{width:11px;height:11px;background:radial-gradient(circle at 50% 42%,#fff,var(--gold) 55%,rgba(244,211,94,0));box-shadow:0 0 8px var(--gold)}
  .mk.planet i{width:9px;height:9px;background:radial-gradient(circle at 35% 30%,#cfe9ff,var(--cyan) 60%,#2f6f99)}
  .mk.moon i{width:6px;height:6px;background:radial-gradient(circle at 35% 30%,#e6eefc,#9fb3cf 70%,#566)}
  .mk.aster i{width:5px;height:5px;border-radius:2px;background:var(--slate);transform:rotate(20deg)}
  .mk.link i{width:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--cyan))}

  .inspector{left:18px;bottom:18px;max-width:300px;background:var(--panel);border:1px solid var(--panel-line);border-radius:13px;
    padding:13px 15px;backdrop-filter:blur(11px);opacity:0;transform:translateY(8px);transition:.25s;pointer-events:none}
  .inspector.show{opacity:1;transform:none;pointer-events:auto}
  .inspector .top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
  .inspector .bod{font:700 8px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;padding:3px 7px;border-radius:99px;border:1px solid currentColor}
  .inspector h3{margin:0;font-size:15px;font-weight:700;line-height:1.2}
  .inspector .path{font:600 11px/1.3 var(--mono);color:var(--faint);word-break:break-all;margin:2px 0 9px}
  .inspector .grid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px;margin:0}
  .inspector .grid dt{color:var(--faint);font:700 9px/1.6 var(--mono);letter-spacing:.6px;text-transform:uppercase}
  .inspector .grid dd{margin:0;color:var(--muted)}
  .linkchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;max-height:96px;overflow:auto}
  .linkchip{font:600 10.5px/1 var(--font);color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--panel-line);
    border-radius:8px;padding:5px 8px;cursor:pointer;transition:.14s;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .linkchip:hover{color:var(--ink);background:rgba(125,211,252,.12)}
  .inspector .x{position:absolute;top:9px;right:10px;width:24px;height:24px;border-radius:7px;border:1px solid var(--panel-line);background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
  .inspector .x:hover{color:var(--ink)}

  .hint{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:9;font:600 11px/1 var(--font);color:var(--faint);
    background:rgba(4,8,18,.5);border:1px solid var(--panel-line);border-radius:99px;padding:7px 14px;backdrop-filter:blur(6px);opacity:0;transition:opacity .4s;pointer-events:none}
  .hint.show{opacity:1}

  .flypad{left:22px;bottom:96px;width:104px;height:104px;border-radius:50%;background:rgba(10,16,30,.5);border:1px solid var(--panel-line);
    backdrop-filter:blur(8px);touch-action:none;display:none;align-items:center;justify-content:center}
  .flystick{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#cfe9ff,var(--cyan));box-shadow:0 4px 14px rgba(125,211,252,.4);pointer-events:none}
  .flybtns{left:138px;bottom:120px;display:none;flex-direction:column;gap:8px}
  .flybtns button{width:46px;height:46px;border-radius:12px;border:1px solid var(--panel-line);background:rgba(10,16,30,.5);color:var(--cyan);font-size:15px;backdrop-filter:blur(8px);cursor:pointer}

  .boot{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);transition:opacity .6s}
  .boot.gone{opacity:0;pointer-events:none}
  .ring{width:46px;height:46px;border-radius:50%;border:2px solid rgba(125,211,252,.18);border-top-color:var(--cyan);animation:sp 1s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}
  .boot p{font:600 12px/1 var(--font);color:var(--muted)}
  .err{max-width:420px;text-align:center;color:var(--rose);font-size:13px;line-height:1.5;padding:0 24px}

  body.capture .ui{display:none!important}
  body.capture .hint{display:none}

    .chronoBar{left:50%;transform:translateX(-50%);bottom:82px;display:none;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--panel-line);border-radius:11px;padding:9px 13px;backdrop-filter:blur(10px);z-index:11}
  .chronoBar.show{display:flex}
  .chronoBar input{width:min(46vw,340px);accent-color:#c084fc}
  .chronoBar span{font:600 11px/1 var(--mono);color:var(--muted);min-width:84px;text-align:center}
  @media (max-width:1320px){
    body.legend-open .legend{display:block;bottom:88px}
    body.legend-open .mmwrap{display:block;bottom:252px}
  }
  @media (max-width:1000px){
    .stats{display:none}
    .deck{flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100vw - 24px);gap:6px;padding:6px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
    .deck .div{display:none}
    .seg button{padding:9px 10px}
  }
  @media (max-width:760px),(pointer:coarse){
    .stats{display:none}
    .brand h1{font-size:13.5px}
    .brand{top:calc(20px + env(safe-area-inset-top,0px));left:12px}
    .toolbar{top:calc(62px + env(safe-area-inset-top,0px));left:12px}
    .search{width:150px}
    .filterPanel{left:12px;top:calc(104px + env(safe-area-inset-top,0px))}
    body.legend-open .legend{right:12px;bottom:calc(104px + env(safe-area-inset-bottom,0px));max-width:190px}
    body.legend-open .mmwrap{right:12px;bottom:calc(268px + env(safe-area-inset-bottom,0px))}
    .deck{flex-wrap:wrap;justify-content:center;max-width:94vw;gap:6px;padding:6px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
    .seg button{padding:9px 10px}
    .seg button .k{display:none}
    .inspector{max-width:calc(100vw - 24px);left:12px;bottom:96px;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .chronoBar{width:calc(100vw - 28px);bottom:calc(96px + env(safe-area-inset-bottom,0px))}
    .chronoBar input{flex:1;width:auto}
    body.flymode .flypad{display:flex}
    body.flymode .flybtns{display:flex}
    body.flymode .deck{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  }