/* ── WEB FONTS ─────────────────────────────────────────────── */
@font-face{font-family:'Fira Code';src:url('../fonts/fira-code.woff2') format('woff2');font-weight:400;font-style:normal}
@font-face{font-family:'Fira Code';src:url('../fonts/fira-code-bold.woff2') format('woff2');font-weight:700;font-style:normal}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-400.ttf') format('truetype');font-weight:400;font-style:normal}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-500.ttf') format('truetype');font-weight:500;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono.woff2') format('woff2');font-weight:400;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-bold.woff2') format('woff2');font-weight:700;font-style:normal}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono.woff2') format('woff2');font-weight:400;font-style:normal}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-bold.woff2') format('woff2');font-weight:700;font-style:normal}
/* @font-face{font-family:'Syne';src:url('../../assets/fonts/syne-400.woff2') format('woff2');font-weight:400;font-style:normal} */
/* @font-face{font-family:'Syne';src:url('../../assets/fonts/syne-600.woff2') format('woff2');font-weight:600;font-style:normal} */
/* @font-face{font-family:'Syne';src:url('../../assets/fonts/syne-700.woff2') format('woff2');font-weight:700;font-style:normal} */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --font:'Courier New','Lucida Console',Consolas,monospace;
  --fz:14px;--lh:1.45;
  --topbar-h:40px;--sidebar-rail-w:32px;--side-panel-w:300px;
  --side-panel-min-w:300px;--side-panel-max-w:460px;
  --fb-quick-char-panel-h:0px;
  --display: 'Syne', sans-serif;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--fz)}

/* ── APP SHELL ─────────────────────────────────────────── */
#app{display:flex;flex-direction:column;height:100vh;width:100%;overflow:hidden;position:relative}

/* ── TOP BAR ───────────────────────────────────────────── */
#topbar{
  display:flex;align-items:center;gap:10px;
  padding:5px 12px;
  background:var(--bg3);border-bottom:1px solid var(--border);
  flex-shrink:0;z-index:20;min-height:var(--topbar-h);
}
#logo{
  font-size:12px;font-weight:bold;letter-spacing:3px;color:var(--fg);
  text-transform:uppercase;text-shadow:0 0 10px rgba(var(--accent-rgb),.08);flex-shrink:0;
}
#logo-sep{color:var(--fg4);letter-spacing:1px}
#logo-frost{color:var(--logo-frost);text-shadow:0 0 10px rgba(var(--logo-frost-glow),.22)}
#logo-byte{color:var(--logo-byte);text-shadow:0 0 8px rgba(var(--logo-byte-glow),.08)}
/* Protocol negotiation badges */
#protocol-bar{display:none;gap:5px;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
.proto-badge{
  font-size:10px;color:var(--fg3);letter-spacing:.5px;
  border:1px solid var(--border2);padding:1px 4px;
  transition:color .2s,border-color .2s;
}
.proto-badge:hover{color:var(--fg2);border-color:var(--fg4)}
#topbar-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;position:relative}
.top-btn{
  background:none;border:1px solid var(--border2);color:var(--fg4);
  font-family:var(--font);font-size:10px;padding:2px 6px;cursor:pointer;
  transition:all .15s;
}
.top-btn:hover{border-color:var(--fg3);color:var(--fg)}
.top-btn.active{border-color:var(--fg3);color:var(--fg);background:var(--bg4)}
#fb-quick-char-wrap{position:relative;display:flex;align-items:center}
#fb-quick-char-panel{
  position:fixed;top:var(--topbar-h);left:var(--sidebar-rail-w);right:calc(var(--side-panel-w) + 11px);
  background:
    linear-gradient(180deg, rgba(21,28,37,.985), rgba(16,22,30,.96)),
    radial-gradient(circle at top left, rgba(var(--accent-rgb),.055), transparent 38%);
  border-right:1px solid var(--border2);border-bottom:1px solid var(--border2);
  box-shadow:0 16px 32px rgba(0,0,0,.42);
  padding:14px 16px 12px;display:flex;flex-direction:column;gap:12px;
  max-height:min(580px, calc(100vh - var(--topbar-h) - 16px));overflow:auto;
  opacity:0;transform:translateY(calc(-100% - 10px));pointer-events:none;
  transition:opacity .2s ease,transform .22s ease;z-index:60;
}
#fb-quick-char-wrap.fb-open #fb-quick-char-panel{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
.fb-quick-char-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fb-quick-char-title{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--fg2)}
.fb-quick-char-copy{max-width:760px;font-size:12px;line-height:1.6;color:var(--fg3)}
.fb-quick-char-list{display:flex;flex-wrap:wrap;gap:10px}
.fb-quick-char-item{display:flex;flex:0 0 calc((100% - 40px) / 5);min-width:0;max-width:none;align-items:stretch}
.fb-quick-char-chip{
  display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  position:relative;
  min-width:0;height:200px;padding:14px 16px;border:1px solid var(--border2);
  background:
    linear-gradient(180deg, rgba(7,11,17,.72), rgba(10,15,21,.9)),
    radial-gradient(circle at top right, rgba(var(--accent-rgb),.16), transparent 44%),
    var(--fb-char-card-bg, url('../images/background/default.webp'));
  background-color:var(--bg3);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  color:var(--fg3);font-family:var(--font);font-size:12px;text-align:left;cursor:pointer;transition:all .15s;
  border-radius: 4px;
}
.fb-quick-char-chip:hover{
  border-color:var(--fg3);color:var(--fg);
  background:
    linear-gradient(180deg, rgba(7,11,17,.62), rgba(10,15,21,.82)),
    radial-gradient(circle at top right, rgba(var(--accent-rgb),.2), transparent 48%),
    var(--fb-char-card-bg, url('../images/background/default.webp'));
  background-color:var(--bg4);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.fb-quick-char-chip.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.12)}
.fb-quick-char-chip-head{
  display:flex;
  width:100%;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.fb-quick-char-chip-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  max-width:100%;
  padding:0;
  background:none;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.7px;
  text-transform:uppercase;
}
.fb-quick-char-chip-link-linked{
  color:#cce8b2;
}
.fb-quick-char-chip-link-pending{
  color:#ecd495;
}
.fb-quick-char-chip-link-label{
  font-weight:700;
}
.fb-quick-char-chip-link-detail{
  color:inherit;
  opacity:.88;
}
.fb-quick-char-chip-name{
  display:block;
  flex:1 1 auto;
  min-width:0;
  font-size:16px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fb-quick-char-chip-level{
  flex:0 0 auto;
  font-size:12px;
  line-height:1.1;
  color:var(--fg4);
  font-weight:700;
  text-transform:uppercase;
  white-space:nowrap;
  min-width:0;
  background-color: #1616165c;
  padding: 4px;
  border-radius: 8px;
}
.fb-quick-char-chip-level-full{
  display:none;
}
.fb-quick-char-chip-level-abbrev{
  display:inline;
}
@supports (container-type: inline-size){
  .fb-quick-char-chip{
    container-type:inline-size;
  }
  @container (min-width:260px){
    .fb-quick-char-chip-level-full{
      display:inline;
    }
    .fb-quick-char-chip-level-abbrev{
      display:none;
    }
  }
}
.fb-quick-char-slot{
  border-style:solid;
  color:var(--fg4);
  opacity:.58;
  filter:saturate(.72) brightness(.72);
}
.fb-quick-char-slot .fb-quick-char-chip-name{
  color:var(--fg2);
}
.fb-quick-char-slot .fb-quick-char-chip-detail,
.fb-quick-char-slot .fb-quick-char-chip-meta{
  color:var(--fg4);
}
.fb-quick-char-slot:hover,
.fb-quick-char-slot.active{
  opacity:.9;
  filter:saturate(.9) brightness(.9);
}
.fb-quick-char-slot:hover .fb-quick-char-chip-name,
.fb-quick-char-slot:hover .fb-quick-char-chip-detail,
.fb-quick-char-slot:hover .fb-quick-char-chip-meta,
.fb-quick-char-slot.active .fb-quick-char-chip-name,
.fb-quick-char-slot.active .fb-quick-char-chip-detail,
.fb-quick-char-slot.active .fb-quick-char-chip-meta{
  color:inherit;
}
.fb-quick-char-chip-detail{
  display:none;
}
.fb-quick-char-chip-class{
  display:none;
}
.fb-quick-char-chip-meta{
  display:none;
}
.fb-quick-char-chip-line{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:8px;
  max-width:100%;
}
.fb-quick-char-chip-label{
  flex:0 0 auto;
  font-size:10px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--fg4);
}
.fb-quick-char-chip-value{
  min-width:0;
  font-size:12px;
  line-height:1.35;
  color:var(--fg2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fb-quick-char-chip-divider{
  display:block;
  width:100%;
  height:1px;
  margin:10px 0 8px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb), .34), rgba(255,255,255,.08));
}
.fb-quick-char-chip-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:100%;
}
.fb-quick-char-chip-stat{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
}
.fb-quick-char-chip-stat-label{
  flex:0 0 auto;
  font-size:9px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--fg4);
}
.fb-quick-char-chip-stat-value{
  min-width:0;
  font-size:10px;
  line-height:1.3;
  color:var(--fg3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fb-quick-char-chip-footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin-top:auto;
  padding-top:12px;
}
.fb-quick-char-chip-link-spacer{
  flex:1 1 auto;
}
.fb-quick-char-chip-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 11px;
  border:1px solid rgba(var(--accent-rgb), .42);
  border-radius:999px;
  background:rgba(9,14,20,.74);
  color:var(--fg2);
  font-size:10px;
  line-height:1.2;
  letter-spacing:.9px;
  text-transform:uppercase;
  font-weight:700;
}
.fb-quick-char-item .fb-quick-char-chip{cursor:grab}
.fb-quick-char-item.fb-char-dragging{opacity:.45}
.fb-quick-char-item.fb-char-dragging .fb-quick-char-chip{cursor:grabbing}
.fb-quick-char-empty{
  width:100%;padding:14px;border:1px dashed var(--border2);font-size:12px;line-height:1.55;color:var(--fg4)
}
.fb-quick-char-actions{display:flex;justify-content:flex-end;padding-top:2px;border-top:1px solid var(--border)}
#conn-indicator{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--fg4)}
#conn-text{margin-left: 20px;}
#conn-text.offline{color:var(--err)}
#conn-text.connected{color:var(--fg)}
#conn-text.connecting{color:var(--warn)}
#conn-dot{
  display:none;
  width:8px;height:8px;border-radius:50%;background:var(--err);
  box-shadow:0 0 6px var(--err);transition:background .3s,box-shadow .3s;
}
#conn-dot.connected{background:var(--fg);box-shadow:0 0 6px var(--fg)}
#conn-dot.connecting{background:var(--warn);box-shadow:0 0 6px var(--warn);animation:blink-dot 1s infinite}
@keyframes blink-dot{0%,100%{opacity:1}50%{opacity:.3}}

/* ── BODY (sidebar + content column) ───────────────────── */
#fb-body{display:flex;flex:1;overflow:hidden}
#fb-content{display:flex;flex-direction:column;flex:1;overflow:hidden;min-width:0;transition:padding-top .22s ease}
#app.fb-quick-char-visible #fb-content{padding-top:var(--fb-quick-char-panel-h)}

/* ── MAIN ──────────────────────────────────────────────── */
#main{display:flex;flex:1;overflow:hidden}

/* ── OUTPUT SECTION  (history + split bar + live pane) ── */
#output-section{display:flex;flex-direction:column;flex:1;overflow:hidden;min-width:0;position:relative}
#output-section::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:50;
  opacity:0;
  transition:opacity .3s ease;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0,0,0,.18) 3px,
    rgba(0,0,0,.18) 4px
  );
}
#output-section.scanlines::after{opacity:1}

/* Scanlines - whole page */
html.scanlines::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
  opacity:1;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0,0,0,.18) 3px,
    rgba(0,0,0,.18) 4px
  );
}

/* Flicker animation */
@keyframes flicker{
  0%,19%,21%,23%,100%{opacity:1}
  20%,22%{opacity:.82}
}

/* Flicker - mud window only */
#output-section.flicker{animation:flicker 8s infinite}

/* Flicker - whole page */
html.flicker{animation:flicker 8s infinite}

/* Vignette effect - mud window only */
#output-section{position:relative}
#output-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%);
  pointer-events:none;z-index:9;opacity:0;transition:opacity .4s;
}
#output-section.vignette::before{opacity:1}

/* Vignette effect - whole page */
html.vignette::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%);
  pointer-events:none;z-index:9;opacity:1;transition:opacity .4s;
}

/* Text glow effect - mud window only */
#output-wrap.textglow .mud-line{
  text-shadow:0 0 8px rgba(79,255,176,.35),0 0 20px rgba(79,255,176,.1);
}

/* Text glow effect - whole page */
html.textglow *{
  text-shadow:0 0 8px rgba(79,255,176,.35),0 0 20px rgba(79,255,176,.1);
}

/* ── OUTPUT HISTORY (top, scrollable) ──────────────────── */
#output-wrap{
  flex:1;min-height:60px;overflow-y:auto;overflow-x:auto;
  padding:8px 10px 4px;background:var(--bg);
  scroll-behavior:auto;position:relative;
}
#output{display:flex;flex-direction:column;min-height:100%}

/* ── SPLIT BAR — thin 1px line with wider invisible grab area ── */
#split-bar{
  display:none;  /* hidden until live pane is shown */
  height:9px;flex-shrink:0;position:relative;
  cursor:row-resize;user-select:none;background:var(--bg2);
  z-index:2;
}
/* the visible line sits in the middle of the 9px hit zone */
#split-bar::after{
  content:'';position:absolute;left:10px;right:10px;top:4px;height:1px;
  background:var(--fg4);transition:background .15s, box-shadow .15s;
  box-shadow:0 0 4px rgba(var(--glow-rgb),.14);
}
#split-bar:hover::after,#split-bar.dragging::after{
  background:var(--accent);
  box-shadow:0 0 6px rgba(var(--accent-rgb),.24);
}
#split-bar::before{
  content:'';
  position:absolute;
  left:50%;
  top:2px;
  width:26px;
  height:5px;
  transform:translateX(-50%);
  border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  opacity:.9;
}
#split-grip{display:none}

/* ── LIVE PANE (bottom, always newest) ──────────────────── */
#live-wrap{
  display:none;  /* hidden until scrolled up */
  flex-shrink:0;overflow-x:auto;overflow-y:hidden;position:relative;
  background:var(--bg);border-top:none;
}
/* inner content anchored to bottom so newest lines always visible */
#live-output{
  position:absolute;bottom:0;left:0;right:0;
  padding:2px 10px 4px;
  display:flex;flex-direction:column;
}
/* separator line above the live pane */
#live-wrap::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--border2);z-index:1;
}
.mud-line{
  line-height:var(--lh);white-space:pre-wrap;overflow-wrap:anywhere;
  min-height:calc(var(--lh) * 1em);
}
.mud-line.sys{color:var(--fg4);font-style:italic}
.mud-line.sys.err{color:var(--err)}
.mud-line.sys.ok{color:var(--fg3)}
.mud-line.sys.warn{color:var(--warn)}
.mud-line.sys.info{color:var(--info)}
.mud-line.echo{color:var(--fg4)}
.mud-line.ts::before{
  content:attr(data-ts);color:var(--fg4);font-size:10px;margin-right:6px;
}
/* Scroll-to-bottom button */
#scroll-btn{
  display:none;position:sticky;bottom:8px;left:calc(100% - 40px);
  background:var(--bg3);border:1px solid var(--border2);color:var(--fg3);
  font-family:var(--font);font-size:12px;padding:3px 8px;cursor:pointer;
  z-index:5;
}
#scroll-btn:hover{color:var(--fg)}

/* ── SIDE PANEL ────────────────────────────────────────── */
#side{
  width:var(--side-panel-w);background:var(--bg2);border-left:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;
}
#side-resize{
  width:11px;flex-shrink:0;position:relative;cursor:col-resize;user-select:none;
  background:var(--bg2);border-right:1px solid var(--border);
}
#side-resize::before{
  content:'';position:absolute;top:0;bottom:0;left:5px;width:1px;background:var(--border2);
  transition:background .15s;
}
#side-resize::after{
  content:'⋮';position:absolute;top:50%;left:1px;width:9px;height:24px;transform:translateY(-50%);
  font-size:10px;line-height:24px;text-align:center;color:var(--border2);opacity:.6;
  transition:color .15s, opacity .15s;font-family:monospace;
}
#side-resize:hover::before,
#side-resize.dragging::before{
  background:var(--accent);
}
#side-resize:hover::after,
#side-resize.dragging::after{
  color:var(--accent);opacity:1;
}
.panel{border-bottom:1px solid var(--border);padding:6px 8px;flex-shrink:0;}
.panel-title{
  font-size:9px;color:var(--fg4);font-family: var(--display);text-transform:uppercase;letter-spacing:2px;
  margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid var(--border);
}
/* Room chips row */
#room-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:5px}
#room-chips span:empty{display:none}
#room-vnum,#room-zone,#world-time{font-size:9px;color:var(--fg3);white-space:nowrap}
#room-vnum::before{content:'[Room: '}
#room-vnum::after{content:']'}
#room-zone::before{content:'[Area: '}
#room-zone::after{content:']'}
#world-time::before{content:'['}
#world-time::after{content:']'}
#room-name{font-size:11px;color:var(--fg2);margin-bottom:5px;font-weight:bold}

/* Exits */
#exits-list{display:flex;flex-wrap:wrap;gap:3px;min-height:16px}
.exit-btn{
  background:var(--bg3);border:1px solid var(--fg4);color:var(--fg2);
  font-family:var(--font);font-size:11px;padding:2px 6px;cursor:pointer;
  transition:all .12s;user-select:none;
}
.exit-btn:hover{background:var(--fg4);color:var(--bg)}

/* Stats */
#char-stats{font-size:11px;display:flex;flex-direction:column;gap:2px}
.stat-row{display:flex;justify-content:space-between;align-items:center;gap:4px;min-width:0}
.stat-label{color:var(--fg4);flex-shrink:0}
.stat-val{color:var(--fg);font-weight:bold;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.stat-bar{height:4px;background:var(--bg3);overflow:hidden;margin-top:1px;border-radius:1px}
.stat-bar-fill{height:100%;transition:width .4s ease}
.hp-fill{background:var(--hp);box-shadow:0 0 4px rgba(var(--hp-rgb),.38)}
.mp-fill{background:var(--mp);box-shadow:0 0 4px rgba(var(--mp-rgb),.34)}
.mv-fill{background:var(--mv);box-shadow:0 0 4px rgba(var(--mv-rgb),.34)}
.xp-fill{background:var(--xp);box-shadow:0 0 4px rgba(var(--xp-rgb),.32)}

/* 2-column paired stat rows */
.stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
.stat-pair .stat-row{min-width:0}

/* 5-column attribute grid (STR/INT/WIS/DEX/CON) */
.stat-attrs{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:2px;margin:4px 0 2px;text-align:center;
  background:var(--bg3);border:1px solid var(--border);padding:3px 2px;
}
.stat-attrs div{display:flex;align-items:baseline;justify-content:center;gap:3px}
.stat-attrs .stat-label{font-size:9px;color:var(--fg4)}
.stat-attrs .stat-val{font-size:11px}

/* Target panel */
#target-name{font-size:11px;color:var(--fg2);font-weight:bold;margin-bottom:3px}

/* Affects tags */
#affects-list{display:flex;flex-wrap:wrap;gap:2px;padding:2px 0}
.affect-tag{font-size:9px;color:var(--fg3);border:1px solid var(--border2);padding:1px 3px;cursor:default}
/* Inventory list */
#inventory-list{display:flex;flex-direction:column;gap:1px;padding:2px 0;max-height:180px;overflow-y:auto}
.inv-item{font-size:10px;color:var(--fg3);padding:1px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ── BOTTOM INPUT ──────────────────────────────────────── */
#bottombar{
  padding:5px 8px;background:var(--bg3);
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:6px;flex-shrink:0;min-width:0;
}
#prompt{color:var(--fg4);font-size:13px;flex-shrink:0;user-select:none;min-width:24px}
#input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--fg);font-family:var(--font);font-size:var(--fz);
  caret-color:var(--accent);min-width:0;width:0;
}
#input::placeholder{color:var(--fg4)}

/* ── RECONNECT BANNER ──────────────────────────────────── */
#reconnect-banner{
  display:none;position:fixed;top:38px;left:50%;transform:translateX(-50%);
  background:#231912;border:1px solid var(--warn);color:var(--warn);
  padding:6px 16px;font-size:11px;z-index:100;text-align:center;
  box-shadow:0 0 20px rgba(231,169,93,.18);
}

/* ── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--fg4)}

/* ── ANSI ATTRS ────────────────────────────────────────── */
.a-d{opacity:.55}
.a-i{font-style:italic}
.a-u{text-decoration:underline}
.a-s{text-decoration:line-through}
.a-blink{animation:ansi-blink 1s step-end infinite}
@keyframes ansi-blink{0%,100%{opacity:1}50%{opacity:0}}
.a-rev{filter:invert(1)}

/* ── TRIGGER TOGGLE + SYSTEM CLOCK (bottom bar) ─────────── */
.bottom-icon-btn{
  background:var(--menu-button-bg);border:1px solid var(--menu-button-border);color:var(--fg3);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:all .15s;padding:0;
}
.bottom-icon-btn svg{width:13px;height:13px}
.bottom-icon-btn:hover{background:var(--menu-button-hover);border-color:var(--menu-button-border-hover);color:var(--fg)}
#btn-triggers.triggers-off{color:var(--fg4);border-color:var(--border);opacity:.5}
#btn-triggers.triggers-off:hover{opacity:1;color:var(--warn);border-color:var(--warn)}
.sys-clock{
  font-family:'Fira Code','Courier New',monospace;font-size:11px;
  color:var(--fg4);flex-shrink:0;cursor:pointer;user-select:none;
  padding:2px 4px;white-space:nowrap;transition:color .15s;
  border:1px solid transparent;
}
.sys-clock:hover{color:var(--fg2);border-color:var(--border2)}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:720px){
  #side{display:none}
  #side-resize{display:none}
  #protocol-bar{display:none}
  :root{--side-panel-w:0px}
}
@media(max-width:480px){
  :root{--fz:13px}
  #topbar{padding:4px 8px}
  #logo{font-size:11px;letter-spacing:2px}
  :root{--sidebar-rail-w:0px}
  #fb-quick-char-panel{
    left:0;right:0;padding:12px 12px 10px;max-height:min(320px, calc(100vh - var(--topbar-h) - 8px));
  }
  .fb-quick-char-chip{flex-basis:100%;max-width:none;min-width:0}
}

/* ── GLOW on green ─────────────────────────────────────── */
.ansi-glow{text-shadow:0 0 3px currentColor}

/* ── SIDEBAR NAVIGATION RAIL ───────────────────────────────── */
#fb-sidebar{
  display:flex;flex-direction:column;align-items:center;
  width:var(--sidebar-rail-w);flex-shrink:0;
  background:var(--bg3);border-right:1px solid var(--border);
  padding:6px 0;gap:4px;z-index:10;box-sizing:border-box;
}
.fb-sb-btn{
  width:32px;height:32px;background:none;border:none;
  color:var(--fg4);cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:0;transition:all .15s;flex-shrink:0;position:relative;box-sizing:border-box;
}
.fb-sb-btn::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:18px;background:transparent;transition:background .15s;
}
.fb-sb-btn svg{width:18px;height:18px}
.fb-sb-btn:hover{color:var(--fg2);background:var(--menu-hover)}
.fb-sb-btn.fb-sb-active{color:var(--accent);background:var(--menu-active)}
.fb-sb-btn.fb-sb-active::before{background:var(--accent)}
.fb-sb-spacer{flex:1}

/* ── CLIENT LOG PANEL ───────────────────────────────────────── */
#fb-log-panel{
  display:none;flex-direction:column;flex:1;overflow:hidden;min-width:0;
  background:var(--bg);
}
#fb-log-panel.fb-active{display:flex}
#fb-log-toolbar{
  display:flex;align-items:center;gap:6px;
  padding:4px 8px;background:var(--bg3);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
#fb-log-clear{
  background:var(--menu-button-bg);border:1px solid var(--menu-button-border);color:var(--fg4);
  font-family:var(--font);font-size:10px;padding:2px 6px;cursor:pointer;
  transition:all .15s;
}
#fb-log-clear:hover{background:var(--menu-button-hover);border-color:var(--menu-button-border-hover);color:var(--fg)}
#fb-log-traffic{
  display:flex;flex-direction:column;gap:8px;
  padding:8px;border-bottom:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(14,20,28,.98), rgba(10,14,20,.98)),
    radial-gradient(circle at top left, rgba(var(--accent-rgb),.12), transparent 55%);
  flex-shrink:0;
}
.fb-traffic-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.fb-traffic-card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(15,20,27,.94), rgba(10,14,19,.94));
  padding:8px 9px 7px;display:flex;flex-direction:column;gap:6px;min-width:0;
}
.fb-traffic-card-label{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--fg4);
}
.fb-traffic-card-total{
  font-size:16px;line-height:1;color:var(--fg);font-weight:600;
}
.fb-traffic-card-sent .fb-traffic-card-total{color:#c8d6e4}
.fb-traffic-card-recv .fb-traffic-card-total{color:#8ce2bc}
.fb-traffic-card-graph{
  height:46px;display:flex;align-items:flex-end;
}
.fb-traffic-sparkline{
  width:100%;height:100%;display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:2px;align-items:end;
}
.fb-traffic-bar{
  display:block;border-radius:1px 1px 0 0;min-height:4px;
  background:rgba(180,195,212,.55);
}
.fb-traffic-sparkline-recv .fb-traffic-bar{background:linear-gradient(180deg, rgba(0,255,160,.92), rgba(0,180,116,.42))}
.fb-traffic-sparkline-sent .fb-traffic-bar{background:linear-gradient(180deg, rgba(158,194,228,.92), rgba(100,130,172,.42))}
.fb-traffic-rows{
  display:flex;flex-direction:column;gap:4px;max-height:190px;overflow:auto;padding-right:2px;
}
.fb-traffic-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.02);
  padding:5px 7px;
}
.fb-traffic-row-label{
  display:flex;align-items:center;gap:6px;min-width:0;
}
.fb-traffic-row-title{
  font-size:11px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fb-traffic-row-meta{
  font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--fg4);
  border:1px solid var(--border2);padding:1px 4px;flex-shrink:0;
}
.fb-traffic-row-stats{
  font-size:10px;color:var(--fg4);white-space:nowrap;flex-shrink:0;
}
#fb-log-list{flex:1;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.fb-log-entry{
  font-size:11px;line-height:1.4;display:flex;gap:6px;align-items:baseline;
  padding:1px 0;border-bottom:1px solid var(--border);
}
.fb-log-ts{color:var(--fg4);font-size:10px;flex-shrink:0;white-space:nowrap}
.fb-log-msg{color:var(--fg3);word-break:break-all;min-width:0}
.fb-log-entry.fb-log-ok .fb-log-msg{color:var(--fg2)}
.fb-log-entry.fb-log-err .fb-log-msg{color:var(--err)}
.fb-log-entry.fb-log-warn .fb-log-msg{color:var(--warn)}
.fb-log-entry.fb-log-info .fb-log-msg{color:var(--info)}
.fb-log-entry.fb-log-sent .fb-log-msg{color:var(--fg4)}
.fb-log-entry.fb-log-trigger .fb-log-msg{color:var(--accent)}
@media (max-width: 520px){
  .fb-traffic-cards{grid-template-columns:1fr}
  .fb-traffic-row{flex-direction:column;align-items:flex-start}
}

/* ── CHARACTER OVERLAY ──────────────────────────────────────── */
#fb-char-overlay{
  position:absolute;top:32px;left:var(--sidebar-rail-w);bottom:0;right:0;
  background:var(--bg2);z-index:50;display:flex;flex-direction:column;box-sizing:border-box;
}
.fb-guest-welcome{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:24px;background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.08), transparent 60%),
    linear-gradient(180deg, rgba(14,20,28,.99), rgba(10,14,20,.99));
}
.fb-guest-welcome-card{
  width:min(520px,100%);display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.fb-guest-welcome-logo{
  display:flex;align-items:baseline;gap:10px;font-size:28px;font-weight:bold;letter-spacing:1.5px;line-height:1;
}
.fb-guest-welcome-divider{color:var(--fg4);font-weight:300;font-size:20px}
.fb-guest-welcome-mud{font-size:22px;font-weight:500;letter-spacing:.5px}
.fb-guest-welcome-tagline{font-size:11px;color:var(--fg4);letter-spacing:.3px;margin:0}
.fb-guest-welcome-sep{width:100%;height:1px;background:var(--border);opacity:.5}
.fb-guest-welcome-copy{font-size:12px;line-height:1.7;color:var(--fg3);margin:0}
.fb-guest-welcome-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.fb-guest-welcome-play{
  background:var(--accent)!important;color:#000!important;
  border-color:var(--accent)!important;font-weight:600;
}
.fb-guest-welcome-play:hover{opacity:.88}
.fb-guest-welcome-signin{text-decoration:none;background:transparent}
.fb-guest-welcome-hint{font-size:10px;color:var(--fg4);margin:0;line-height:1.5}
/* Header */
.fb-ov-hdr{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--bg3);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.fb-ov-avatar{
  width:32px;height:32px;background:var(--bg4);border:1px solid var(--fg4);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  color:var(--fg2);font-size:14px;font-weight:bold;flex-shrink:0;
}
.fb-ov-identity{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.fb-ov-name{font-size:13px;color:var(--fg);font-weight:bold;cursor:pointer;transition:color .15s}
.fb-ov-name:hover{color:var(--accent)}
.fb-ov-server{font-size:10px;color:var(--fg4)}
.fb-ov-guest-avatar{color:var(--fg4)}
.fb-ov-guest-avatar svg{width:18px;height:18px}
.fb-ov-login-cta{flex-shrink:0;text-decoration:none}
.fb-ov-hdr:has(.fb-ov-guest-avatar) .fb-ov-name{cursor:default}
.fb-ov-hdr:has(.fb-ov-guest-avatar) .fb-ov-name:hover{color:var(--fg)}
.fb-ov-profile-tools{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:240px;
}
.fb-ov-profile-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.fb-char-select{
  min-width:0;
  flex:1;
}
.fb-ov-mini-btn{
  padding:4px 8px;
  font-size:10px;
  white-space:nowrap;
}
.fb-ov-mini-btn:disabled{
  opacity:.45;
  cursor:default;
}
.fb-ov-mini-btn:disabled:hover{
  border-color:var(--border2);
  color:var(--fg4);
}
.fb-ov-close{
  background:none;border:none;color:var(--fg4);font-family:var(--font);
  font-size:20px;cursor:pointer;padding:0 4px;transition:color .15s;line-height:1;
  flex-shrink:0;
}
.fb-ov-close:hover{color:var(--fg)}
/* ── TAB BAR ─────────────────────────────────────────────── */
.fb-tab-bar{
  display:flex;background:var(--bg3);border-bottom:1px solid var(--border);
  flex-shrink:0;overflow-x:auto;white-space:nowrap;
}
.fb-tab-bar::-webkit-scrollbar{height:3px}
.fb-tab-bar::-webkit-scrollbar-thumb{background:var(--border2)}
.fb-tab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--fg4);font-family:var(--font);font-size:12px;
  padding:8px 15px;cursor:pointer;transition:all .15s;
}
.fb-tab:hover{color:var(--fg2)}
.fb-tab.fb-tab-active{color:var(--fg);border-bottom-color:var(--accent)}

/* ── OVERLAY BODY (3-COLUMN LAYOUT) ───────────────────── */
.fb-ov-body{
  flex:1;overflow:hidden;
  display:grid;grid-template-columns:160px 1fr 200px;
}
.fb-ov-nav{
  display:flex;flex-direction:column;border-right:1px solid var(--border);
  padding:0;flex-shrink:0;overflow-y:auto;
}
.fb-ov-nav-section-hdr{
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--fg4);padding:12px 16px 8px;margin-top:4px;font-weight:600;
}
.fb-ov-nav-section-hdr:first-child{margin-top:0}
.fb-ov-nav-item{
  background:transparent;border:none;border-left:2px solid transparent;
  color:var(--fg4);font-family:var(--font);font-size:13px;text-align:left;
  padding:10px 16px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:10px;
}
.fb-ov-nav-icon{
  min-width:16px;
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  text-align:center;
  flex-shrink:0;
}
.snav-ico{
  width:16px;
  height:16px;
  display:block;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.fb-ov-nav-label{flex:1}
.fb-ov-nav-item:hover{color:var(--fg2);background:var(--menu-hover)}
.fb-ov-nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--menu-active)}
.fb-ov-content{
  overflow-y:auto;padding:0 24px 24px;display:flex;flex-direction:column;
}
.fb-ov-tips{
  border-left:1px solid var(--border);overflow-y:auto;padding:16px;
}

/* ── SECTION HEADER ──────────────────────────────────────── */
.fb-section-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px 7px;flex-shrink:0;
}
.fb-section-title{font-size:11px;color:var(--fg3);text-transform:uppercase;letter-spacing:1.5px;font-weight:bold}
.fb-section-hint{font-size:11px;color:var(--fg4)}

/* ── LIST CONTAINER ──────────────────────────────────────── */
.fb-ov-list{display:flex;flex-direction:column;padding:0 16px 16px}

/* ── ALIAS ROWS ──────────────────────────────────────────── */
.fb-alias-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 0;border-bottom:1px solid var(--border);
}
.fb-alias-key{
  width:80px;background:var(--bg4);border:1px solid var(--fg4);
  color:var(--fg2);font-family:var(--font);font-size:13px;
  padding:5px 8px;outline:none;text-align:center;flex-shrink:0;
  transition:border-color .15s;
  border-radius: 4px;
}
.fb-alias-key:focus{border-color:var(--accent)}
.fb-alias-key::placeholder{color:var(--fg4);text-align:center}
.fb-arrow{color:var(--fg4);font-size:13px;flex-shrink:0}
.fb-alias-val{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--border2);
  color:var(--fg);font-family:var(--font);font-size:13px;
  padding:5px 2px;outline:none;min-width:0;transition:border-color .15s;
}
.fb-alias-val:focus{border-bottom-color:var(--fg3)}

/* ── TRIGGER ROWS ────────────────────────────────────────── */
.fb-trigger-row{
  display:flex;flex-direction:column;gap:6px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.fb-trigger-top{display:flex;align-items:center;gap:6px}
.fb-trigger-bot{display:flex;align-items:center;gap:8px;padding-left:2px}
.fb-trigger-pat{
  flex:1;background:var(--bg3);border:1px solid var(--border2);
  color:var(--fg);font-family:var(--font);font-size:13px;
  padding:6px 8px;outline:none;min-width:0;transition:border-color .15s;
}
.fb-trigger-pat:focus{border-color:var(--fg3)}
.fb-trigger-cmd{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--border2);
  color:var(--fg3);font-family:var(--font);font-size:13px;
  padding:4px 2px;outline:none;min-width:0;transition:border-color .15s;
}
.fb-trigger-cmd:focus{border-bottom-color:var(--fg3)}

/* Tag select */
.fb-trigger-tag{
  background:var(--bg4);border:1px solid var(--border2);
  color:var(--fg3);font-family:var(--font);font-size:11px;
  padding:4px 6px;outline:none;cursor:pointer;flex-shrink:0;
}
.fb-tag-auto{color:var(--fg2);border-color:var(--fg4)}
.fb-tag-combat{color:#ef9277;border-color:#8f4b3c}
.fb-tag-nav{color:#86acd9;border-color:#446487}
.fb-tag-misc{color:var(--fg4)}

/* Toggle switch */
.fb-toggle{
  position:relative;display:inline-flex;align-items:center;
  width:42px;height:22px;flex-shrink:0;cursor:pointer;
}
.fb-toggle input{opacity:0;width:0;height:0;position:absolute}
.fb-toggle-track{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(74,90,118,.35);border:1px solid rgba(98,120,156,.28);
  border-radius:999px;transition:background .2s,border-color .2s,box-shadow .2s;
}
.fb-toggle:hover .fb-toggle-track{border-color:rgba(128,153,198,.4)}
.fb-toggle input:checked ~ .fb-toggle-track{
  background:rgba(10, 12, 15, 0.41);border-color:rgba(121,156,221,.45);
  box-shadow:0 0 0 1px rgba(121,156,221,.08) inset;
}
.fb-toggle-track::after{
  content:'';position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:#6b7c9e;transition:transform .2s,background .2s,box-shadow .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.fb-toggle input:checked ~ .fb-toggle-track::after{
  transform:translateX(20px);background:#8eaee0;box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 1px 5px rgba(0,0,0,.32);
}

/* Row delete */
.fb-row-del{
  background:none;border:none;color:var(--fg4);font-family:var(--font);
  font-size:18px;cursor:pointer;padding:0 4px;transition:color .15s;
  line-height:1;flex-shrink:0;
}
.fb-row-del:hover{color:var(--err)}

/* Add row button */
.fb-add-row-btn{
  background:var(--menu-button-bg);border:1px dashed var(--menu-button-border);color:var(--fg4);
  font-family:var(--font);font-size:12px;padding:7px 14px;cursor:pointer;
  transition:all .15s;align-self:flex-start;margin-top:10px;
}
.fb-add-row-btn:hover{background:var(--menu-button-hover);border-color:var(--menu-button-border-hover);color:var(--fg)}

/* ── KEY CHIP (buttons tab) ──────────────────────────────── */
.fb-key-chip{
  min-width:80px;background:var(--menu-button-bg);border:1px solid var(--menu-button-border);
  color:var(--fg2);font-family:var(--font);font-size:12px;
  padding:5px 8px;cursor:pointer;text-align:center;flex-shrink:0;
  transition:all .15s;white-space:nowrap;
  border-radius: 4px;
}
.fb-key-chip:hover{background:var(--menu-button-hover);border-color:var(--accent);color:var(--fg)}
.fb-key-chip.fb-key-capturing{
  background:var(--menu-button-active);border-color:var(--accent);color:var(--accent);
  animation:ansi-blink .7s step-end infinite;
}

/* ── PREFERENCES ─────────────────────────────────────────── */
.fb-section-desc{
  padding:16px;margin:0 0 16px;
  background:var(--bg1);border:1px solid rgba(98,120,156,.16);border-radius:4px;
  color:#7a8fa0;font-size:11px;line-height:1.6;font-style:italic;
  letter-spacing:.01em;
}
.fb-pref-row{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;
}
.fb-pref-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.fb-pref-label{color:var(--fg);font-size:13px;font-weight:500;letter-spacing:.01em}
.fb-pref-desc{color:#556a88;font-size:11px;line-height:1.45}

/* Font size slider */
.fb-fontsize-wrap{display:flex;align-items:center;gap:12px;flex-shrink:0}
.fb-fontsize-slider{width:140px;height:5px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--bg3),var(--bg3));border-radius:3px;outline:none;cursor:pointer}
.fb-fontsize-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--fg2);cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:background .15s,border-color .15s}
.fb-fontsize-slider::-webkit-slider-thumb:hover{background:var(--fg);border-color:rgba(255,255,255,.2)}
.fb-fontsize-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg2);cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:background .15s,border-color .15s}
.fb-fontsize-slider::-moz-range-thumb:hover{background:var(--fg);border-color:rgba(255,255,255,.2)}
.fb-fontsize-hint{color:var(--fg3);font-size:11px;min-width:30px;text-align:right;font-variant-numeric:tabular-nums}

/* Preview panel */
.fb-pref-preview-container{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.fb-pref-preview{background:var(--bg0);border:1px solid rgba(98,120,156,.24);border-radius:4px;overflow:hidden;position:relative}
.fb-pref-preview::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%);
  pointer-events:none;z-index:5;opacity:0;transition:opacity .4s;border-radius:4px;
}
.fb-pref-preview.pv-vignette::before{opacity:1}
.fb-pref-preview-header{background:var(--bg1);padding:8px 12px;font-size:11px;color:var(--fg3);font-weight:500;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.05)}
.fb-pref-preview-content{padding:12px;font-family:var(--font);font-size:var(--fz,14px);line-height:1.4;color:var(--fg);min-height:170px;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;}
.preview-line{white-space:pre-wrap;word-wrap:break-word}
.preview-line:empty{height:1em}
.preview-line.ts{display:flex;gap:6px;align-items:flex-start}
.pv-ts{color:var(--fg4);flex-shrink:0;font-variant-numeric:tabular-nums;font-size:inherit}

/* Preview textglow effect */
.fb-pref-preview.pv-textglow .preview-line{
  text-shadow:0 0 8px rgba(79,255,176,.35),0 0 20px rgba(79,255,176,.1);
}
/* Preview scanlines effect */
.fb-pref-preview.pv-scanlines::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.18) 3px,rgba(0,0,0,.18) 4px);
}
/* Preview flicker effect */
.fb-pref-preview.pv-flicker{animation:flicker 8s infinite}

/* Vitals preview */
.preview-vitals{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05)}
.pv-pip{flex:1;height:4px;border-radius:1px;background:var(--border)}
.pv-lit-hp{background:var(--fg3)}
.pv-lit-mn{background:var(--teal-dim)}
.pv-lit-mv{background:var(--amber-dim)}
.pv-pill{flex:1;background:var(--bg2);padding:6px;border-radius:2px}

/* Custom dropdown */
.fb-dropdown{position:relative;flex-shrink:0;align-self:center}
.fb-dropdown-btn{
  display:flex;align-items:center;gap:6px;
  background:var(--menu-button-bg);border:1px solid var(--menu-button-border);color:var(--fg);
  font-family:var(--font);font-size:12px;padding:7px 11px;
  cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;white-space:nowrap;min-width:190px;
  justify-content:space-between;
  border-radius:4px;
}
.fb-dropdown-btn:hover{border-color:var(--menu-button-border-hover);background:var(--menu-button-hover)}
.fb-dd-open .fb-dropdown-btn{
  border-color:var(--menu-button-border-hover);background:var(--menu-button-active);
  box-shadow:0 0 0 1px rgba(121,156,221,.08) inset;
}
.fb-dd-arrow{color:var(--fg4);font-size:9px;flex-shrink:0}
.fb-dropdown-label{flex:1;text-align:left}
.fb-dropdown-label.has-swatch::before{
  content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--swatch,transparent);margin-right:7px;vertical-align:middle;
}
.fb-dropdown-menu{
  display:none;position:absolute;right:0;top:calc(100% + 2px);
  background:var(--menu-surface);border:1px solid var(--menu-button-border-hover);
  z-index:200;min-width:100%;flex-direction:column;
  border-radius:4px;overflow:hidden;
}
.fb-dd-open .fb-dropdown-menu{display:flex}
.fb-dropdown-opt{
  background:transparent;border:none;color:var(--fg3);font-family:var(--font);
  font-size:12px;padding:7px 12px;cursor:pointer;text-align:left;
  transition:background .1s;white-space:nowrap;
}
.fb-dropdown-opt.has-swatch::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--swatch,transparent);margin-right:7px;vertical-align:middle;
}
.fb-dropdown-opt:hover{background:var(--menu-hover);color:var(--fg)}
.fb-dropdown-opt.fb-dropdown-opt-active{background:var(--menu-active);color:var(--fg)}

/* ── FOOTER ──────────────────────────────────────────────── */
.fb-ov-footer{
  display:flex;align-items:center;padding:9px 14px;
  background:var(--bg3);border-top:1px solid var(--border);flex-shrink:0;gap:8px;
}
.fb-ov-status{font-size:11px;color:var(--fg4);flex:1}
.fb-ov-actions{display:flex;gap:5px}
.fb-io-btn{
  background:var(--menu-button-bg);border:1px solid var(--menu-button-border);color:var(--fg4);
  font-family:var(--font);font-size:11px;padding:5px 12px;cursor:pointer;
  transition:all .15s;
}
.fb-io-btn:hover{background:var(--menu-button-hover);border-color:var(--menu-button-border-hover);color:var(--fg)}
.fb-done-btn{background:var(--menu-button-active)!important;border-color:var(--accent)!important;color:var(--fg)!important}
.fb-done-btn:hover{background:var(--fg3)!important;color:var(--bg)!important}

/* ── RULE ENGINE — shared form controls ─────────────────── */
/* Generic select used for match type, action type, etc. */
.fb-rule-select{
  background:var(--bg4);border:1px solid var(--border2);
  color:var(--fg3);font-family:var(--font);font-size:12px;
  padding:4px 6px;outline:none;cursor:pointer;flex-shrink:0;
  transition:border-color .15s;
}
.fb-rule-select:focus{border-color:var(--fg3)}

/* Trigger name field */
.fb-trig-name{
  flex:1;min-width:60px;background:transparent;border:none;
  border-bottom:1px solid var(--border2);color:var(--fg4);
  font-family:var(--font);font-size:12px;padding:4px 2px;outline:none;
  transition:border-color .15s;
}
.fb-trig-name:focus{border-bottom-color:var(--fg3);color:var(--fg)}

/* Numeric priority / seconds inputs */
.fb-prio-inp{
  width:80px;background:var(--bg4);border:1px solid var(--border2);
  color:var(--fg3);font-family:var(--font);font-size:12px;
  padding:4px 4px;outline:none;text-align:center;flex-shrink:0;
  transition:border-color .15s;
}
.fb-prio-inp:focus{border-color:var(--fg3);color:var(--fg)}

/* Inline checkbox + label pairs */
.fb-inline-label{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:var(--fg4);cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.fb-inline-label input{cursor:pointer;accent-color:var(--fg3);width:12px;height:12px}

/* Color picker inputs */
.fb-color-inp{
  width:28px;height:24px;padding:0;border:1px solid var(--border2);
  background:var(--bg4);cursor:pointer;flex-shrink:0;outline:none;
}
.fb-color-inp:focus{border-color:var(--fg3)}
.fb-color-lbl{font-size:11px;color:var(--fg4);flex-shrink:0}

/* ── ACTIONS WITHIN TRIGGERS ─────────────────────────────── */
.fb-actions-wrap{
  display:flex;flex-direction:column;gap:4px;
  padding:6px 0 3px 10px;border-left:2px solid var(--border2);
  margin-left:2px;
}
.fb-actions-label{font-size:10px;color:var(--fg4);text-transform:uppercase;letter-spacing:.8px}
.fb-action-row{
  display:flex;align-items:center;gap:6px;padding:2px 0;
}
.fb-action-params{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.fb-action-type-sel{flex-shrink:0;font-size:11px;padding:3px 5px}
.fb-var-name-inp{
  width:90px;background:var(--bg4);border:1px solid var(--border2);
  color:var(--fg2);font-family:var(--font);font-size:13px;
  padding:4px 6px;outline:none;flex-shrink:0;transition:border-color .15s;
}
.fb-var-name-inp:focus{border-color:var(--accent)}
.fb-win-btn-row{
  align-items:center;
  gap:8px;
}
.fb-win-btn-label-inp{
  width:160px;
  min-width:120px;
}
.fb-win-btn-cmd-inp{
  flex:1 1 260px;
  min-width:180px;
}
.fb-win-btn-size-wrap{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
  flex-shrink:0;
  padding:2px 6px;
  background:var(--menu-surface);
}
.fb-win-slider-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
.fb-win-slider{
  width:92px;
  accent-color:var(--accent);
}
.fb-win-slider-value{
  min-width:42px;
  font-size:11px;
  color:var(--fg4);
  text-align:right;
}
.fb-win-preview-block{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 0 2px;
}
.fb-win-preview-frame{
  padding:10px;
  border:1px solid var(--menu-button-border);
  background:var(--menu-surface);
}
.fb-win-preview{
  max-width:100%;
}
.fb-win-preview .fb-win-col-btn{
  opacity:.6;
  cursor:default;
}
.fb-win-preview-empty{
  font-size:11px;
  color:var(--fg4);
  padding:4px 2px;
}
.fb-login-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:12px 0;
}
.fb-login-char-tabs{
  margin-bottom:20px;
}
.fb-login-copy{
  font-size:11px;
  color:var(--fg4);
  line-height:1.6;
}
.fb-login-link-state{
  padding:10px 12px;
  border:1px solid var(--border2);
  background:rgba(11,15,22,.62);
  font-size:11px;
  line-height:1.5;
  color:var(--fg3);
}
.fb-login-link-state-linked{
  border-color:rgba(127, 194, 113, .28);
  color:#d7ebc5;
}
.fb-login-link-state-pending{
  border-color:rgba(224, 190, 109, .28);
  color:#f0ddb1;
}
.fb-login-link-state-recorded{
  border-color:rgba(110, 178, 226, .28);
  color:#c8e2f4;
}
.fb-login-notice{
  padding:9px 11px;
  border:1px solid rgba(var(--accent-rgb),.35);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.06));
  color:var(--fg2);
  font-size:11px;
  line-height:1.5;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.08) inset;
}
.fb-login-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.fb-login-config-row{
  gap:8px;
}
.fb-login-config-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.fb-login-config-select{
  flex:1 1 260px;
  min-width:220px;
}
.fb-login-config-btn{
  flex:0 0 auto;
  white-space:nowrap;
}
.fb-login-inp{
  width:100%;
}
.fb-login-secret-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.fb-login-reveal{
  flex-shrink:0;
  padding:5px 10px;
}
.fb-login-tips{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-top:8px;
  border-top:1px solid var(--border2);
  font-size:11px;
  color:var(--fg4);
}
.fb-login-token{
  color:var(--accent);
  font-family:'Fira Code','Courier New',monospace;
}

/* ── TRIGGER DEBUG / TEST PANEL ──────────────────────────── */
.fb-debug-wrap{
  margin-top:16px;padding:12px 0;border-top:1px solid var(--border2);
}
.fb-debug-title{font-size:11px;color:var(--fg4);text-transform:uppercase;letter-spacing:.8px}
.fb-debug-out{
  margin-top:8px;padding:8px 10px;background:var(--bg3);
  border:1px solid var(--border2);font-size:12px;min-height:32px;
  display:flex;flex-direction:column;gap:3px;
}
.fb-debug-hit{color:var(--fg2)}
.fb-debug-miss{color:var(--fg4)}
.fb-debug-acts{padding-left:12px}
.fb-debug-act{color:var(--fg3);font-size:11px}
.fb-debug-meta{color:var(--accent);font-size:11px;margin-top:5px;padding-top:5px;border-top:1px solid var(--border)}

/* ── ABOUT TAB ───────────────────────────────────────────── */
.fb-about-wrap{
  padding:20px 24px 28px;display:flex;flex-direction:column;gap:24px;
  max-width:770px;
}
/* Hero row: logo + meta stacked beside it */
.fb-about-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fb-about-logo{font-size:32px;font-weight:bold;letter-spacing:2px;line-height:1;flex-shrink:0}
.fb-about-frost{color:var(--logo-frost);text-shadow:0 0 10px rgba(var(--logo-frost-glow),.25)}
.fb-about-byte{color:var(--logo-byte);text-shadow:0 0 8px rgba(var(--logo-byte-glow),.08)}
.fb-about-meta{display:flex;flex-direction:column;gap:3px;padding-bottom:2px}
.fb-about-tagline{font-size:12px;color:var(--fg2);letter-spacing:.3px}
.fb-about-version{font-size:10px;color:var(--fg4)}
/* Description */
.fb-about-desc{
  font-size:12px;color:var(--fg2);line-height:1.7;
  border-left:2px solid var(--fg4);padding-left:12px;
}
/* Sections */
.fb-about-block{display:flex;flex-direction:column;gap:8px}
.fb-about-section-title{
  font-size:10px;font-weight:bold;color:var(--fg);
  text-transform:uppercase;letter-spacing:1.5px;
  padding-bottom:5px;border-bottom:1px solid var(--border2);
}
/* Two-column grid for feature lists */
.fb-about-grid{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;
}
.fb-about-grid li{
  font-size:11px;color:var(--fg3);line-height:1.55;
  padding-left:10px;position:relative;
}
.fb-about-grid li::before{
  content:'▸';position:absolute;left:0;
  color:var(--fg4);font-size:9px;top:2px;
}
.fb-about-code{color:var(--accent);font-family:var(--font);font-size:10px}
/* Footer */
.fb-about-footer{
  font-size:11px;color:var(--fg4);
  padding-top:12px;border-top:1px solid var(--border);
}
.fb-about-link{color:var(--accent);text-decoration:none}
.fb-about-link:hover{color:var(--fg);text-decoration:underline}

/* ── HIGHLIGHT LINE STYLES (applied by pipeline) ─────────── */
/* Background highlights override bg; fg tints un-colored spans.
   Inline style attributes are set directly by terminalRenderer.js. */

/* ── VITALS BAR ──────────────────────────────────────────── */
#fb-vitals-bar{flex-shrink:0}

/* ── Style C: segments (DEFAULT) ────────────────────────── */
#fb-vitals-bar.style-segments{
  background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);
  padding:8px 14px;display:flex;flex-direction:column;gap:5px;
}
.fb-vit-row{display:flex;align-items:center;gap:8px}
.fb-vit-lbl{
  font-family:'Fira Code','Courier New',monospace;font-size:8px;
  text-transform:uppercase;color:var(--fg4);width:16px;flex-shrink:0;line-height:1;
}
.fb-vit-pips{display:flex;gap:2px;flex:1;align-items:center}
.fb-vit-pip{flex:1;height:4px;border-radius:1px;background:var(--border)}
.fb-vit-lit-hp{background:var(--fg3)}
.fb-vit-lit-mn{background:var(--teal-dim)}
.fb-vit-lit-mv{background:var(--amber-dim)}
.fb-vit-val{
  font-family:'Fira Code','Courier New',monospace;font-size:8px;color:var(--fg4);
  width:76px;text-align:right;flex-shrink:0;line-height:1;white-space:nowrap;
}

/* ── Style B: pills ──────────────────────────────────────── */
#fb-vitals-bar.style-pills{
  background:var(--bg2);border-top:1px solid var(--border);padding:6px 10px;
}
.fb-vit-pills{display:flex;gap:6px}
.fb-vit-pill{
  flex:1;background:var(--bg3);border:1px solid var(--border2);
  border-radius:6px;padding:7px 10px;display:flex;flex-direction:column;gap:4px;
}
.fb-vit-pill-lbl{
  font-family:'Fira Code','Courier New',monospace;font-size:8px;
  text-transform:uppercase;color:var(--fg4);line-height:1;
}
.fb-vit-pill-track{height:2px;background:var(--border);border-radius:1px;overflow:hidden}
.fb-vit-pill-fill{height:100%;border-radius:1px;transition:width .4s ease}
.fb-vit-pill-nums{
  display:flex;justify-content:space-between;
  font-family:'Fira Code','Courier New',monospace;font-size:9px;line-height:1;
}
.fb-vit-pill-cur{color:var(--fg2)}
.fb-vit-pill-max{color:var(--fg4)}

/* ── Style A: inline ─────────────────────────────────────── */
#fb-vitals-bar.style-inline{
  background:var(--bg2);border-top:1px solid var(--border);height:36px;
}
.fb-vit-inline{display:flex;height:100%}
.fb-vit-inline-item{flex:1;display:flex;align-items:center;gap:6px;padding:0 14px}
.fb-vit-inline-sep{width:1px;background:var(--border);flex-shrink:0;margin:8px 0}
.fb-vit-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.fb-vit-dot-hp{background:var(--fg3)}
.fb-vit-dot-mn{background:var(--teal-dim)}
.fb-vit-dot-mv{background:var(--amber-dim)}
.fb-vit-inline-track{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.fb-vit-inline-fill{height:100%;border-radius:2px;transition:width .4s ease}
.fb-vit-inline-val{
  font-family:'Fira Code','Courier New',monospace;font-size:9px;
  color:var(--fg4);flex-shrink:0;line-height:1;
}

/* Shared fill colours */
.fb-vit-fill-hp{background:var(--fg3)}
.fb-vit-fill-mn{background:var(--teal-dim)}
.fb-vit-fill-mv{background:var(--amber-dim)}

/* ── LOCATION SECTION (replaces old room panel) ──────────── */
/* Area chip */
.fb-loc-area{
  display:inline-block;font-family:'Fira Code','Courier New',monospace;
  font-size:9px;color:var(--fg4);background:var(--bg4);
  border:1px solid var(--border);border-radius:4px;
  padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.fb-loc-area:empty{display:none}
/* Override old bracket pseudo-content */
#room-zone::before,#room-zone::after{content:''}

/* Room name — slightly updated margin */
#room-name{font-size:11px;color:var(--fg2);font-weight:500;margin-top:5px;margin-bottom:3px}

/* Room vnum — "Room NNN" format */
.fb-loc-id{font-family:'Fira Code','Courier New',monospace;font-size:9px;color:var(--fg4);margin-bottom:3px}
.fb-loc-id:empty{display:none}
#room-vnum::before{content:'Room '}
#room-vnum::after{content:''}

/* World time */
.fb-loc-wtime{
  display:block;font-family:'Fira Code','Courier New',monospace;
  font-size:9px;color:var(--fg4);margin-bottom:4px;
}
.fb-loc-wtime:empty{display:none}
#world-time::before,#world-time::after{content:''}

/* ── CUSTOM PANELS (Windows) ─────────────────────────────── */
.fb-win {
  flex-shrink: 0;
  background: var(--win-panel-bg, var(--bg2));
  border-bottom: 1px solid var(--win-panel-border, var(--border));
}
.fb-win-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 8px; background: var(--win-panel-bg, var(--bg3)); border-bottom: 1px solid var(--win-panel-border, var(--border));
  cursor: default; user-select: none; min-height: 24px;
}
.fb-win-name {
  font-size: 10px; color: var(--win-panel-text, var(--fg4)); text-transform: uppercase; letter-spacing: 1px;
}
.fb-win-col-btn {
  background: none; border: none; color: var(--win-panel-text, var(--fg4)); font-size: 10px;
  cursor: pointer; padding: 0 4px; line-height: 1; transition: color .15s;
}
.fb-win-col-btn:hover { color: var(--win-panel-text, var(--fg2)); }
.fb-win-body { overflow: hidden; transition: max-height .2s ease; }
.fb-win-body-has-output {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fb-win-collapsed .fb-win-body { display: none; }
.fb-win-btns {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 8px;
  flex-shrink: 0;
}
.fb-win-btn {
  background: var(--win-btn-bg, var(--bg3)); border: 1px solid var(--win-btn-border, var(--fg4)); color: var(--win-btn-text, var(--fg2));
  font-family: var(--font); font-size: 12px; padding: 4px 10px;
  cursor: pointer; transition: all .12s; user-select: none;
  border-radius: 4px;
}
.fb-win-btn:hover {
  background: var(--win-btn-hover-bg, var(--win-btn-bg, var(--win-btn-border, var(--fg4))));
  color: var(--win-btn-text, var(--bg)); border-color: var(--win-btn-border, var(--fg4));
}
.fb-win-out {
  overflow-y: auto; padding: 4px 10px;
  border-top: 1px solid var(--win-panel-border, var(--border));
  background: var(--win-panel-bg, var(--bg));
  flex: 1 1 auto;
  min-height: 0;
  color: var(--win-panel-text, var(--fg3));
}
.fb-win-resize {
  height: 9px;
  flex-shrink: 0;
  cursor: row-resize;
  position: relative;
  background: transparent;
}
.fb-win-resize::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 1px;
  background: var(--border2);
  transition: background .15s;
}
.fb-win-resize:hover::after,
.fb-win-resizing .fb-win-resize::after {
  background: var(--fg4);
}
.fb-win-out-line {
  font-size: 12px; line-height: 1.4; white-space: pre-wrap; word-break: break-word;
  color: inherit;
}
.fb-win-color-wrap{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.fb-win-btn-color-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}