/* Fangs & Ferns in-game overlay — clean, restrained, ink+fern.
   Two widgets (map / status) hosted as separate frameless WebView2 windows,
   plus a browser-mode download landing. The window is layered + rounded by the
   shell, so the page body is transparent and each widget draws its own panel. */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0b0f0c; --panel:rgba(13,17,14,.94); --panel-2:rgba(255,255,255,.04);
  --bone:#eef1f6; --bone-80:rgba(238,241,246,.82); --bone-55:rgba(238,241,246,.56); --bone-34:rgba(238,241,246,.34);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --accent:#39c977; --accent-hot:#63e79c; --accent-glow:rgba(57,201,119,.40); --accent-faint:rgba(57,201,119,.12);
  --amber:#f5b14a; --amber-hot:#ffc874;
  --crimson:#f06a6a; --crimson-soft:rgba(240,106,106,.16);
  --water:#38bdf8; --food:#f5b14a; --stam:#c9dd85;
  --ui:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --display:'Alfa Slab One','Rockwell',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:13px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%;background:transparent;color:var(--bone-80);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden;user-select:none}
body{font-size:13px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
kbd{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--bone);line-height:1.4}

/* ── widget shell ─────────────────────────────────────────── */
.widget-root{height:100%}
.widget{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 46px -22px rgba(0,0,0,.85);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);overflow:hidden}

.w-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 9px 8px 12px;cursor:move;
  border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow);flex:0 0 auto}
.brand-name{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-80);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-head-tools{margin-left:auto;display:flex;align-items:center;gap:3px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;color:var(--bone-55);transition:.15s var(--ease)}
.icon-btn svg{width:15px;height:15px;fill:currentColor}
.icon-btn:hover{color:var(--bone);background:var(--panel-2)}
.icon-btn.danger:hover{color:var(--crimson);background:var(--crimson-soft)}
.w-follow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;padding:5px 9px;border-radius:7px;
  border:1px solid var(--line);color:var(--bone-55);transition:.15s var(--ease)}
.w-follow[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-faint)}
.w-follow:hover{color:var(--bone)}

/* ── MAP widget ───────────────────────────────────────────── */
.map-widget{min-height:0}
.map-body{position:relative;flex:1 1 auto;min-height:0;background:#06090f}
#leafmap{position:absolute;inset:0;width:100%;height:100%;background:#06090f}
.leaflet-container{background:#06090f;font:inherit;outline:none}
.leaflet-container a{color:var(--accent)}
.map-hud{position:absolute;left:9px;top:9px;z-index:500;display:flex;align-items:center;gap:7px;padding:4px 9px;border-radius:7px;
  background:rgba(8,11,9,.72);border:1px solid var(--line-2);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--bone-80);max-width:calc(100% - 18px)}
.map-coord{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.conn-dot{width:6px;height:6px;border-radius:50%;background:var(--bone-34);flex:0 0 auto;transition:.25s}
.conn-dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.map-controls{position:absolute;right:9px;top:9px;z-index:500;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.mc-btn{width:28px;height:28px;border-radius:7px;background:rgba(8,11,9,.78);border:1px solid var(--line);color:var(--bone-80);
  font-family:var(--mono);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s var(--ease);backdrop-filter:blur(8px)}
.mc-btn.wide{width:auto;padding:0 10px;height:24px;font-size:9px;letter-spacing:.10em;text-transform:uppercase;font-weight:600}
.mc-btn:hover{color:var(--bone);border-color:var(--accent);background:var(--accent-faint)}
.map-layers{position:absolute;left:9px;bottom:9px;z-index:500;display:flex;gap:5px}
.lyr-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;background:rgba(8,11,9,.78);border:1px solid var(--line);
  color:var(--bone-34);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:.15s var(--ease);backdrop-filter:blur(8px)}
.lyr-chip .sw{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:.5}
.lyr-chip .sw.ai{background:var(--amber)} .lyr-chip .sw.poi{background:var(--accent)}
.lyr-chip.on{color:var(--bone);border-color:var(--line)} .lyr-chip.on .sw{opacity:1}
.lyr-chip:hover{color:var(--bone-80)}
/* Drag-to-resize grip (map, bottom-right corner) */
.w-resize{position:absolute;right:0;bottom:0;width:20px;height:20px;z-index:600;cursor:nwse-resize;touch-action:none;opacity:.5;transition:opacity .15s var(--ease)}
.w-resize::after{content:"";position:absolute;right:3px;bottom:3px;width:10px;height:10px;
  background:linear-gradient(135deg,transparent 0 30%,var(--accent) 30% 46%,transparent 46% 62%,var(--accent) 62% 78%,transparent 78%)}
.w-resize:hover{opacity:1}
.map-empty{position:absolute;inset:0;z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;
  background:rgba(6,9,7,.72);backdrop-filter:blur(3px);font-family:var(--mono);font-size:11px;color:var(--bone-55);letter-spacing:.04em;line-height:1.5}

/* you-marker + AI dots (Leaflet divIcons) */
.you-marker{will-change:transform}
.you-marker .you-arrow{transform-origin:50% 50%}
.you-halo{width:26px;height:26px;border-radius:50%;background:var(--accent-faint);box-shadow:0 0 0 1px var(--accent-glow);animation:youpulse 1.8s ease-in-out infinite}
@keyframes youpulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.ai-dot{border-radius:50%;background:var(--amber);box-shadow:0 0 5px rgba(245,177,74,.6),0 0 0 1px rgba(0,0,0,.8)}
.poi-dot{border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.85)}
.poi-label{font-family:var(--mono);font-size:9px;color:var(--bone-80);white-space:nowrap;text-shadow:0 1px 2px #000,0 0 2px #000;pointer-events:none}

/* ── STATUS widget ────────────────────────────────────────── */
/* height:auto (NOT 100%) so requestResize measures content, never the window
   height back into itself (resize-echo trap). */
.status-widget{height:auto;gap:0;position:relative}

/* Combined mode: the live map docks into this section (its DOM moves in from
   the hidden map markup). Height is explicit (JS-driven, grip-resizable) so
   the content-height reporter keeps working; the map fills it via flex. */
.st-map{position:relative;flex:0 0 auto;height:300px;display:flex;flex-direction:column;overflow:hidden;
  border-top:1px solid var(--line-2);background:#06090f}
.st-map .map-body{flex:1 1 auto}

/* Spare map window while combined: explains itself instead of drawing a second map */
.map-combined{position:absolute;inset:0;z-index:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;padding:22px;background:rgba(6,9,7,.94)}
.map-combined .mc-title{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.map-combined .mc-text{font-family:var(--mono);font-size:10.5px;color:var(--bone-55);line-height:1.6;max-width:300px;letter-spacing:.02em}
.map-combined .mc-actions{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;justify-content:center}
#voice-frame{position:absolute;width:0;height:0;border:0;visibility:hidden;pointer-events:none}
.card{padding:12px;border-bottom:1px solid var(--line-2)}
.card:last-of-type{border-bottom:none}

/* prime + vitals */
.pc-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pc-title{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:var(--bone-55)}
.pc-count{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--bone);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pc-status{margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--bone-55)}
.pc-status.growing{color:var(--accent);border-color:var(--accent);background:var(--accent-faint)}
.pc-status.prime{color:var(--amber-hot);border-color:var(--amber);background:rgba(245,177,74,.12)}
.pc-status.elder{color:#c9a6ff;border-color:#9a7bd6;background:rgba(154,123,214,.14)}
.pc-sub{display:flex;flex-direction:column;gap:7px}
.pc-vitals{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
.meter-row{display:flex;align-items:center;gap:9px}
.meter-row .ml{flex:0 0 52px;font-family:var(--mono);font-size:9px;letter-spacing:.10em;text-transform:uppercase;color:var(--bone-34)}
.meter{flex:1 1 auto;height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;min-width:24px}
.meter.sm{height:6px}
.meter i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-hot));transition:width .35s var(--ease)}
.meter i.hp{background:linear-gradient(90deg,#e63b2e,#63e79c)}
.meter i.food{background:linear-gradient(90deg,#b9791f,var(--food))}
.meter i.water{background:linear-gradient(90deg,#1f6f9c,var(--water))}
.meter i.stam{background:linear-gradient(90deg,#7f8f45,var(--stam))}
.meter-row .mv{flex:0 0 auto;min-width:34px;text-align:right;font-family:var(--mono);font-size:10px;color:var(--bone-80);font-variant-numeric:tabular-nums}
.vit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:9px}
.vit{display:flex;align-items:center;gap:7px}
.vit .vl{flex:0 0 34px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-34)}
.pc-note{margin-top:8px;font-family:var(--mono);font-size:9.5px;color:var(--bone-34);letter-spacing:.03em;line-height:1.5}

/* voice */
.voice-card{display:flex;align-items:center;gap:11px}
.mic-ring{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.2s var(--ease)}
.mic-ring .ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;transition:.2s var(--ease)}
.mic-ring[data-live="true"]{background:var(--accent-faint);border-color:var(--accent)}
.mic-ring[data-live="true"] .ring{border-color:var(--accent-glow);animation:youpulse 1.4s ease-in-out infinite}
.mic-ring .mic-icon{width:20px;height:20px;fill:var(--bone-80)}
.mic-ring[data-live="true"] .mic-icon{fill:var(--accent-hot)}
.mic-ring .mic-muted{display:none}
.mic-ring[data-muted="true"] .mic-icon{display:none}
.mic-ring[data-muted="true"] .mic-muted{display:block;fill:var(--crimson)}
.vc-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.vc-status{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--bone-80);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--bone-34);flex:0 0 auto}
.voice-card[data-state="live"] .status-dot{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.voice-card[data-state="connecting"] .status-dot{background:var(--amber)}
.voice-card[data-state="error"] .status-dot{background:var(--crimson)}
.ptt-chip{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:3px 8px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-55)}
.vc-controls{display:flex;gap:6px}
.pill-btn{padding:5px 11px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--bone-80);
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;transition:.15s var(--ease)}
.pill-btn:hover{color:var(--bone);border-color:var(--line)}
.pill-btn[aria-pressed="true"]{color:var(--crimson);border-color:var(--crimson);background:var(--crimson-soft)}
#btn-connect[data-mode="connect"]{color:var(--accent);border-color:var(--accent);background:var(--accent-faint)}
.speakers{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;max-width:104px}
.speaker{display:flex;align-items:center;gap:6px;padding:3px 7px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:9px;color:var(--bone-55)}
.speaker.speaking{color:var(--accent);border-color:var(--accent)}
.spk-wave{display:inline-flex;align-items:flex-end;gap:1.5px;height:9px}
.spk-wave i{width:2px;height:3px;background:currentColor;border-radius:1px;opacity:.5}
.speaker.speaking .spk-wave i{animation:wave .7s ease-in-out infinite}
.speaker.speaking .spk-wave i:nth-child(2){animation-delay:.12s}
.speaker.speaking .spk-wave i:nth-child(3){animation-delay:.24s}
@keyframes wave{0%,100%{height:3px;opacity:.5}50%{height:9px;opacity:1}}
.spk-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.speakers-more{font-family:var(--mono);font-size:8.5px;color:var(--bone-34);padding-left:4px}

/* notices */
.hud-notice{padding:12px;border-top:1px solid var(--line-2)}
.hud-notice p{font-family:var(--mono);font-size:11px;color:var(--bone-80);line-height:1.5;letter-spacing:.02em}
.notice-actions{display:flex;gap:8px;margin-top:9px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--bone-80);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:.15s var(--ease)}
.btn:hover{color:var(--bone);border-color:var(--line)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04120a}
.btn.primary:hover{background:var(--accent-hot)}
.btn.sm{padding:6px 11px;font-size:9px}
.btn.big{padding:12px 18px;font-size:12px;width:100%}

/* ── settings drawer (shared) ─────────────────────────────── */
/* max-height is set by JS to the space the window actually has; the drawer
   scrolls inside it so Close is always reachable. */
.drawer{padding:12px;border-top:1px solid var(--line);background:rgba(8,11,9,.6);display:flex;flex-direction:column;gap:11px;
  overflow-y:auto;overscroll-behavior:contain;flex:0 1 auto}
.drawer::-webkit-scrollbar{width:8px}
.drawer::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.drawer::-webkit-scrollbar-track{background:transparent}
.set-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.set-row.col{flex-direction:column;align-items:stretch;gap:7px}
.set-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--bone-55)}
.set-value{font-family:var(--mono);font-size:10px;color:var(--bone-80)}
.bind-list{display:flex;flex-direction:column;gap:6px}
.bind-row{display:flex;align-items:center;gap:9px}
.bind-row .bl{flex:1 1 auto;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--bone-80)}
.bind-btn{flex:0 0 auto;min-width:92px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:7px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--bone);font-family:var(--mono);font-size:10px;transition:.15s var(--ease)}
.bind-btn:hover{border-color:var(--accent)}
.bind-btn.capturing{border-color:var(--amber);color:var(--amber-hot)}
input[type="range"]{width:130px;accent-color:var(--accent);cursor:pointer}
.switch-wrap{position:relative;display:inline-block;width:38px;height:21px;flex:0 0 auto}
.switch-wrap input{opacity:0;width:0;height:0}
.switch{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--line);transition:.18s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--bone-55);transition:.18s}
.switch-wrap input:checked + .switch{background:var(--accent);border-color:var(--accent)}
.switch-wrap input:checked + .switch::after{left:19px;background:#fff}
.set-note{font-family:var(--mono);font-size:9px;color:var(--bone-34);line-height:1.5;letter-spacing:.02em}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg-btn{padding:6px 11px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-55);transition:.15s}
.seg-btn.active{background:var(--accent-faint);color:var(--accent)}
.drawer-close{width:100%;margin-top:2px}

/* ── browser-mode landing ─────────────────────────────────── */
body[data-mode="browser"]{background:radial-gradient(ellipse 120% 90% at 50% -6%,#12161f 0%,#0b0f0c 55%,#03070a 100%);overflow:auto;user-select:auto}
.landing{max-width:960px;margin:0 auto;padding:clamp(30px,7vw,72px) 22px 60px}
.landing-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-55);margin-bottom:22px}
.landing-head h1{font-family:var(--display);font-size:clamp(30px,6vw,52px);color:var(--bone);letter-spacing:.01em;line-height:1.02}
.landing-head h1 .accent{color:var(--accent)}
.lede{margin-top:16px;max-width:640px;font-size:15px;line-height:1.65;color:var(--bone-55)}
.landing-grid{margin-top:38px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.lcard{padding:22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.lcard h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.lcard p{font-size:13px;line-height:1.6;color:var(--bone-55);margin-bottom:12px}
.lcard ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.lcard li{font-size:12.5px;line-height:1.5;color:var(--bone-80);padding-left:14px;position:relative}
.lcard li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.lcard li strong{color:var(--bone)}
.lcard ul.keys li{display:flex;align-items:center;gap:9px;padding-left:0}
.lcard ul.keys li::before{display:none}
.lcard .fine{font-size:11px;color:var(--bone-34);line-height:1.5;margin-top:12px;margin-bottom:0}
.lcard .fine a{color:var(--accent)}
.lcard a.btn{text-decoration:none}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}