:root{
  --bg:#080608;
  --surface:#0e0c0e;
  --surface2:#141014;
  --border:#3a2a1a;
  --accent:#c0392b;
  --accent-lt:#e74c3c;
  --accent-dk:#7b241c;
  --brass:#b5860d;
  --brass-lt:#d4a017;
  --brass-dk:#7a5c00;
  --text:#d4c5a9;
  --text-dim:#8a7a64;
  --text-sub:#5a4a38;
  --live:#39ff14;
  --font-display: 'Impact', 'Arial Black', sans-serif;
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
  --panel-w:320px;

  /* Type scale — sized for legibility at TV/couch distance, not just desktop arm's length.
     Each step replaces a specific old hardcoded px value; see mapping in comments below. */
  --fs-2xs:  13px;  /* was 8px  — micro labels, decorative corner watermark */
  --fs-xs:   15px;  /* was 9px  — most badges, pills, system messages */
  --fs-sm:   16px;  /* was 10px — secondary labels, timestamps */
  --fs-md:   18px;  /* was 11px — buttons, brand text, chat input */
  --fs-lg:   20px;  /* was 12px — chat message body, zoom controls */
  --fs-xl:   22px;  /* was 13px — section gems, stamp preview */
  --fs-2xl:  24px;  /* was 14px — password field */
  --fs-3xl:  28px;  /* was 17px — emoji picker glyphs */
  --fs-display-md: 56px;  /* was 48px — auth gate title */
  --fs-display-lg: 64px;  /* was 56px — offline screen title */
  --fs-icon-lg: 36px;     /* was 28px — clip play badge icon */
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);}

body.stream{display:flex;flex-direction:row;}
body.dock{display:flex;flex-direction:column;}
body.dock .stream-only{display:none!important;}

/* Hex grid background texture */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(192,57,43,0.03) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M14 0 L28 8 L28 24 L14 32 L0 24 L0 8Z' fill='none' stroke='rgba(181,134,13,0.06)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: auto, 28px 49px;
}

#video-section{flex:1;position:relative;background:#000;min-width:0;z-index:1;}
#video-section video{width:100%;height:100%;display:block;object-fit:contain;}

/* Corner bracket decoration on video */
#video-section::before,#video-section::after{
  content:'';position:absolute;width:40px;height:40px;pointer-events:none;z-index:2;
}
#video-section::before{top:8px;left:8px;border-top:2px solid var(--brass);border-left:2px solid var(--brass);}
#video-section::after{top:8px;right:8px;border-top:2px solid var(--brass);border-right:2px solid var(--brass);}

.offline{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;pointer-events:none;
  background:radial-gradient(ellipse at center, #1a0d0d 0%, #000 100%);
}
/* Cog wheel SVG as background to offline screen */
.offline::before{
  content:'⚙';position:absolute;font-size:320px;opacity:0.03;color:var(--brass);
  animation:cog-spin 60s linear infinite;
}
@keyframes cog-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.offline-name{
  font-family:var(--font-display);font-size:var(--fs-display-lg);font-weight:900;letter-spacing:6px;
  text-transform:uppercase;color:var(--brass-lt);
  text-shadow: 0 0 30px rgba(181,134,13,0.4), 3px 3px 0px #000;
  position:relative;z-index:1;
}
.offline-retry{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.2em;color:var(--text-sub);text-transform:uppercase;}
.offline-retry{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.2em;color:var(--text-sub);text-transform:uppercase;}

#video-auth-gate{
  position:absolute;inset:0;z-index:10;
  display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(ellipse at center, #1a0d0d 0%, #000 100%);
}
#video-auth-gate::before{
  content:'⚙';position:absolute;font-size:320px;opacity:0.03;color:var(--brass);
  animation:cog-spin 60s linear infinite;
}
#video-auth-gate.open{display:flex;}
.vag-gem{font-size:var(--fs-xl);color:var(--brass);letter-spacing:.6em;font-family:var(--font-mono);text-transform:uppercase;position:relative;z-index:1;}
.vag-title{
  font-family:var(--font-display);font-size:var(--fs-display-md);font-weight:900;letter-spacing:6px;
  text-transform:uppercase;color:var(--brass-lt);
  text-shadow:0 0 30px rgba(181,134,13,0.4),3px 3px 0px #000;
  position:relative;z-index:1;
}
#video-auth-gate input{
  background:#000;border:1px solid var(--border);color:var(--text);
  padding:10px 14px;font-family:var(--font-mono);font-size:var(--fs-2xl);
  outline:none;text-align:center;letter-spacing:.3em;width:min(260px, 80vw);
  transition:border-color .2s;box-shadow:inset 0 2px 4px rgba(0,0,0,0.6);
  position:relative;z-index:1;
}
#video-auth-gate input:focus{border-color:var(--brass);box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 0 0 1px var(--brass-dk);}
#vag-submit{
  background:var(--accent-dk);border:1px solid var(--accent);color:var(--text);cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-md);font-weight:bold;letter-spacing:.25em;
  padding:10px 28px;transition:all .15s;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  position:relative;z-index:1;
}
#vag-submit:hover{background:var(--accent-lt);border-color:var(--accent-lt);}
#vag-submit:disabled{opacity:.5;cursor:not-allowed;}
#vag-error{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent-lt);letter-spacing:.2em;min-height:14px;text-transform:uppercase;position:relative;z-index:1;}

#chat-panel{
  width:var(--panel-w);flex-shrink:0;
  display:flex;flex-direction:column;
  background:var(--surface);
  position:relative;overflow:hidden;z-index:1;
  border-left:1px solid var(--brass-dk);
}
body.stream #chat-panel{border-left:1px solid var(--brass-dk);}
body.dock #chat-panel{width:100%;flex:1;}

/* Vertical circuit line decoration */
#chat-panel::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
  background:linear-gradient(to bottom, transparent 0%, var(--brass-dk) 20%, var(--brass-dk) 80%, transparent 100%);
  opacity:0.4;pointer-events:none;
}

#panel-header{
  min-height:64px;height:auto;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;row-gap:8px;
  padding:10px 14px;gap:10px;
  background:linear-gradient(135deg, #1a0a0a 0%, #0e0c0e 100%);
  border-bottom:2px solid var(--brass-dk);
  position:relative;overflow:hidden;
}
/* Cog tooth pattern on header */
#panel-header::before{
  content:'';position:absolute;top:0;right:0;bottom:0;width:60px;
  background-image:repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(181,134,13,0.08) 4px, rgba(181,134,13,0.08) 5px);
  pointer-events:none;
}
/* Brass top line on header */
#panel-header::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass), transparent);
}
.brand{
  font-family:var(--font-mono);font-size:var(--fs-md);letter-spacing:.25em;
  color:var(--brass-lt);text-transform:uppercase;flex-shrink:0;position:relative;z-index:1;
  border-left:3px solid var(--accent);padding-left:8px;line-height:1.2;
}
.stream-status{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:bold;letter-spacing:.2em;color:var(--text-dim);position:relative;z-index:1;}
.dot{width:7px;height:7px;background:var(--text-sub);flex-shrink:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);}
.dot.live{background:var(--live);box-shadow:0 0 8px var(--live),0 0 20px rgba(57,255,20,0.4);animation:pulse 1.2s steps(2,start) infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.hdr-right{display:flex;align-items:center;gap:5px;flex-wrap:wrap;row-gap:4px;position:relative;z-index:1;}
.chatter-pill{display:flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-sub);letter-spacing:.1em;}
.chatter-pill .val{color:var(--brass-lt);font-weight:bold;}
.hdr-btn{
  background:none;border:1px solid transparent;cursor:pointer;
  font-size:var(--fs-lg);color:var(--text-sub);padding:3px 4px;line-height:1;
  transition:all .15s;
}
.hdr-btn:hover{color:var(--brass-lt);border-color:var(--brass-dk);}
.hdr-btn.active{color:var(--brass-lt);border-color:var(--brass-dk);background:rgba(181,134,13,0.1);}
.tool-row{display:flex;align-items:center;gap:5px;position:relative;z-index:1;}
.tool-btn{
  background:none;border:1px solid transparent;cursor:pointer;
  color:var(--text-sub);padding:5px;line-height:1;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.tool-btn svg{width:16px;height:16px;display:block;}
.tool-btn:hover{color:var(--brass-lt);border-color:var(--brass-dk);background:rgba(181,134,13,0.08);}
.tool-btn.active{color:var(--brass-lt);border-color:var(--brass-dk);background:rgba(181,134,13,0.1);}
.tool-btn.primary{border-color:var(--brass-dk);color:var(--brass-lt);}
.tool-divider{width:1px;height:18px;background:var(--border);margin:0 3px;}
.more-wrap{position:relative;}
.more-menu{
  display:none;position:fixed;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  min-width:170px;padding:4px;flex-direction:column;gap:1px;z-index:1000;
}
.more-menu.open{display:flex;}
.more-menu.mobile-anchored{
  top:auto!important;left:12px!important;right:12px!important;bottom:64px!important;
}
.mobile-only-item{display:none;}
.more-menu-item{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:4px;
  background:none;border:none;cursor:pointer;width:100%;text-align:left;
  color:var(--text);font-family:var(--font-sans);font-size:var(--fs-xs);
  transition:background .15s;
}
.more-menu-item svg{width:15px;height:15px;flex-shrink:0;color:var(--text-sub);}
.more-menu-item:hover{background:rgba(181,134,13,0.08);}
.more-menu-item.active{color:var(--brass-lt);}
.more-menu-item.active svg{color:var(--brass-lt);}


.collapse-panel{
  display:none;flex-direction:column;gap:10px;
  padding:10px 14px;flex-shrink:0;
  border-bottom:1px solid var(--border);
  background:rgba(14,12,14,0.95);
  position:relative;
}
/* Binary data texture on panels */
.collapse-panel::before{
  content:'01001101 01000101 01000011 01001000 01000001 01001110 01001001 01000011 01010101 01010011';
  position:absolute;bottom:3px;right:6px;font-family:var(--font-mono);font-size:7px;
  color:rgba(181,134,13,0.08);letter-spacing:.05em;pointer-events:none;white-space:nowrap;overflow:hidden;
}
.collapse-panel.open{display:flex;}
.cp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-xs);font-family:var(--font-mono);text-transform:uppercase;color:var(--text-dim);letter-spacing:.1em;}
.cp-row label{flex-shrink:0;color:var(--brass);}
.toggle{position:relative;width:32px;height:18px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;background:var(--border);cursor:pointer;transition:background .2s;clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);}
.toggle input:checked+.toggle-track{background:var(--accent-dk);}
.toggle-track::after{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;background:var(--text-dim);transition:transform .2s,background .2s;}
.toggle input:checked+.toggle-track::after{transform:translateX(14px);background:var(--accent-lt);}
.cp-slider{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--border);outline:none;cursor:pointer;}
.cp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:14px;background:var(--brass);cursor:pointer;clip-path:polygon(2px 0%,100% 0%,calc(100% - 2px) 100%,0% 100%);}
.cp-slider::-moz-range-thumb{width:10px;height:14px;background:var(--brass);cursor:pointer;border:none;}
.sound-types{display:flex;gap:4px;flex-wrap:wrap;}
.sound-type{padding:3px 7px;font-size:var(--fs-2xs);font-family:var(--font-mono);text-transform:uppercase;background:var(--surface2);border:1px solid var(--border);color:var(--text-sub);cursor:pointer;transition:all .15s;letter-spacing:.1em;clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);}
.sound-type:hover{border-color:var(--brass-dk);color:var(--text-dim);}
.sound-type.active{border-color:var(--brass);color:var(--brass-lt);background:rgba(181,134,13,0.15);}

#member-list{max-height:140px;overflow-y:auto;}
#member-list::-webkit-scrollbar{width:3px;}
#member-list::-webkit-scrollbar-thumb{background:var(--brass-dk);}
.member-item{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:var(--fs-sm);font-family:var(--font-mono);color:var(--text-dim);}
.member-dot{width:5px;height:5px;background:var(--brass-dk);flex-shrink:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);}
.member-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.member-badge{font-size:var(--fs-xs);color:var(--brass-lt);}
.member-me{font-size:var(--fs-xs);color:var(--accent);font-style:italic;}
.member-empty{padding:6px 2px;font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--text-sub);font-style:italic;text-align:center;letter-spacing:.1em;}

#chat-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:12px 14px 0;
  display:flex;flex-direction:column;gap:8px;
}
#chat-body::-webkit-scrollbar{width:3px;}
#chat-body::-webkit-scrollbar-thumb{background:var(--brass-dk);}
.chat-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.2em;color:var(--text-sub);
  text-align:center;padding:20px;line-height:3;text-transform:uppercase;
}
.chat-msg{display:flex;flex-direction:column;gap:2px;}
.chat-msg .who{font-size:var(--fs-sm);font-family:var(--font-mono);letter-spacing:.12em;color:var(--brass-lt);text-transform:uppercase;font-weight:bold;}
.verified-badge{font-size:var(--fs-xs);color:var(--brass-lt);margin-left:3px;}
.chat-msg .txt{font-size:var(--fs-lg);color:var(--text);line-height:1.6;font-weight:400;overflow-wrap:anywhere;}
.chat-emote{height:20px;vertical-align:middle;display:inline-block;margin:0 1px;}
.chat-clip-card{
  display:flex;align-items:center;gap:10px;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:8px;cursor:pointer;max-width:340px;
  transition:border-color .15s,background .15s;
}
.chat-clip-card:hover{border-color:var(--brass-dk);background:rgba(255,255,255,0.02);}
.chat-clip-thumb{position:relative;width:56px;height:56px;flex-shrink:0;background:#000;border-radius:6px;overflow:hidden;}
.chat-clip-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.chat-clip-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:rgba(255,255,255,0.85);text-shadow:0 0 8px rgba(0,0,0,0.8);
  pointer-events:none;
}
.chat-clip-duration{
  position:absolute;bottom:2px;right:2px;
  background:rgba(0,0,0,0.75);color:var(--brass-lt);
  font-family:var(--font-mono);font-size:var(--fs-2xs);padding:1px 3px;
}
.chat-clip-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.chat-clip-title{
  font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text);font-weight:bold;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-clip-user{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--brass-lt);letter-spacing:.05em;text-transform:uppercase;}
.chat-clip-unavailable{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;color:var(--text-sub);
  text-transform:uppercase;padding:4px 0;
}
.sys-msg{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.15em;color:var(--brass-dk);
  padding:4px 0;text-align:center;text-transform:uppercase;
  border-top:1px solid rgba(181,134,13,0.2);border-bottom:1px solid rgba(181,134,13,0.2);
  margin:4px 0;
}

#resize-handle{
  height:8px;flex-shrink:0;
  background:var(--surface2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  cursor:ns-resize;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
#resize-handle:hover{background:rgba(181,134,13,0.1);}
.resize-grip{width:28px;height:1px;background:var(--text-sub);}
#resize-handle:hover .resize-grip{background:var(--brass);}

#canvas-section{
  display:flex;flex-direction:column;
  height:260px;min-height:130px;flex-shrink:0;
  position:relative;
}
.ctool-row{
  display:flex;align-items:center;gap:5px;padding:5px 10px;
  flex-wrap:wrap;row-gap:6px;
  background:var(--surface2);flex-shrink:0;
  border-top:1px solid var(--border);
}
.ctool-row:first-child{border-top:none;}
.draw-colors{display:flex;gap:3px;align-items:center;}
.draw-color{width:13px;height:13px;cursor:pointer;border:1px solid transparent;transition:transform .15s;flex-shrink:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);}
.draw-color:hover{transform:scale(1.2);}
.draw-color.active{outline:1px solid var(--brass-lt);outline-offset:2px;}
.ctool-sep{width:1px;height:14px;background:var(--border);margin:0 3px;flex-shrink:0;}
.tool-btn{
  background:none;border:1px solid var(--border);cursor:pointer;
  color:var(--text-sub);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:bold;padding:3px 6px;
  transition:all .15s;white-space:nowrap;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  letter-spacing:.05em;
}
.tool-btn span{display:block;}
.tool-btn.lg{font-size:var(--fs-md);padding:3px 7px;}
.tool-btn:hover{border-color:var(--brass-dk);color:var(--text-dim);}
.tool-btn.active{border-color:var(--brass);color:var(--brass-lt);background:rgba(181,134,13,0.15);}
.stamp-indicator{display:none;align-items:center;gap:3px;margin-left:2px;}
.stamp-preview{font-size:var(--fs-xl);line-height:1;}
.stamp-cancel{background:none;border:none;cursor:pointer;color:var(--text-sub);font-size:var(--fs-sm);padding:0 2px;transition:color .15s;}
.stamp-cancel:hover{color:var(--accent);}
.zoom-controls{display:flex;align-items:center;gap:2px;}
.zoom-btn{background:none;border:1px solid var(--border);cursor:pointer;color:var(--text-sub);font-size:var(--fs-lg);font-weight:bold;width:34px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .15s;clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);}
.zoom-btn span{}
.zoom-btn:hover{border-color:var(--brass-dk);color:var(--brass-lt);}
#zoom-display{background:none;border:1px solid var(--border);cursor:pointer;color:var(--text);font-family:var(--font-mono);font-size:var(--fs-xs);padding:4px 8px;min-width:52px;text-align:center;transition:all .15s;clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);}
#zoom-display span{display:block;}
#zoom-display:hover{border-color:var(--brass-dk);}
#save-btn{margin-left:auto;}

#emoji-picker{
  position:absolute;left:0;right:0;bottom:0;
  top:calc(44px + 1px);
  z-index:20;display:none;flex-direction:column;
  background:var(--surface);border-top:2px solid var(--brass-dk);
}
#emoji-picker.open{display:flex;}
.ep-search{padding:5px 7px;flex-shrink:0;border-bottom:1px solid var(--border);}
.ep-search input{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:5px 7px;font-family:var(--font-mono);font-size:var(--fs-sm);outline:none;transition:border-color .15s;}
.ep-search input:focus{border-color:var(--brass);}
.ep-search input::placeholder{color:var(--text-sub);text-transform:uppercase;letter-spacing:.1em;}
.ep-cats{display:flex;gap:2px;padding:4px 5px;flex-shrink:0;overflow-x:auto;border-bottom:1px solid var(--border);scrollbar-width:none;}
.ep-cats::-webkit-scrollbar{display:none;}
.ep-cat{background:none;border:none;cursor:pointer;font-size:var(--fs-xl);padding:3px 4px;opacity:.4;transition:all .15s;flex-shrink:0;}
.ep-cat:hover{opacity:.75;background:rgba(181,134,13,0.08);}
.ep-cat.active{opacity:1;background:rgba(181,134,13,0.15);}
.ep-grid{flex:1;overflow-y:auto;padding:3px;display:flex;flex-wrap:wrap;align-content:flex-start;}
.ep-grid::-webkit-scrollbar{width:3px;}
.ep-grid::-webkit-scrollbar-thumb{background:var(--border);}
.ep-btn{background:none;border:none;cursor:pointer;font-size:var(--fs-3xl);width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:background .1s;flex-shrink:0;}
.ep-btn:hover{background:rgba(181,134,13,0.1);}

#canvas-viewport{flex:1;overflow:hidden;position:relative;background:#030203;}
#draw-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;}
#draw-canvas.pan-mode{cursor:grab;}
#draw-canvas.pan-mode:active{cursor:grabbing;}

#chat-foot{
  padding:10px 12px;flex-shrink:0;
  background:var(--surface2);
  border-top:1px solid var(--brass-dk);
  position:relative;
}
#chat-foot::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass-dk), transparent);
}
#chat-input{
  width:100%;background:#000;border:1px solid var(--border);color:var(--text);
  padding:9px 11px;font-family:var(--font-mono);font-size:var(--fs-md);
  outline:none;transition:border-color .2s;letter-spacing:.05em;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.6);
}
#chat-input::placeholder{color:var(--text-sub);text-transform:uppercase;letter-spacing:.15em;}
#chat-input:focus{border-color:var(--brass);box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 0 0 1px var(--brass-dk);}
#chat-input:disabled{color:var(--text-sub);cursor:not-allowed;background:var(--surface);}

#h-resize{
  width:8px;flex-shrink:0;
  background:var(--surface2);
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  cursor:ew-resize;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
#h-resize:hover{background:rgba(181,134,13,0.1);}
.h-grip{width:1px;height:36px;background:var(--text-sub);}
#h-resize:hover .h-grip{background:var(--brass);}
body.dock #h-resize{display:none;}

/* ===== Shared modal chrome (viewer + tool) ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.75);
}
.modal-overlay.open{display:flex;}
.modal-overlay.modal-layered{z-index:51;}
.modal-panel{
  width:min(720px, 92vw);max-height:82vh;max-height:82dvh;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--brass-dk);
  box-shadow:0 0 40px rgba(0,0,0,0.6);
  overflow:hidden;
}
.modal-panel-wide{width:min(1100px, 94vw);}
.modal-panel-narrow{width:min(520px, 92vw);}
.modal-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:2px solid var(--brass-dk);
  background:linear-gradient(135deg, #1a0a0a 0%, #0e0c0e 100%);
  flex-shrink:0;
}

/* ===== Clip viewer ===== */
#viewer-launch-tool{flex-shrink:0;}

#clips-grid{
  flex:1;min-height:0;overflow-y:auto;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;
}
#clips-grid::-webkit-scrollbar{width:10px;}
#clips-grid::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);}
#clips-grid::-webkit-scrollbar-thumb{background:var(--brass-dk);border:2px solid var(--surface);border-radius:5px;}
#clips-grid::-webkit-scrollbar-thumb:hover{background:var(--brass);}
#clips-grid{scrollbar-width:auto;scrollbar-color:var(--brass-dk) rgba(0,0,0,0.3);}
.clip-empty{
  text-align:center;padding:30px 10px;
  font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.2em;color:var(--text-sub);
  text-transform:uppercase;
}
.clip-card{
  background:var(--surface2);border:1px solid var(--border);
  display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px;
  transition:border-color .15s,background .15s;
}
.clip-card:hover{border-color:var(--brass-dk);background:rgba(255,255,255,0.02);}
.clip-thumb-wrap{
  position:relative;width:96px;height:96px;flex-shrink:0;
  background:#000;cursor:pointer;border-radius:8px;overflow:hidden;
}
.clip-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.clip-play-badge{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:rgba(255,255,255,0.85);text-shadow:0 0 10px rgba(0,0,0,0.8);
  pointer-events:none;
}
.clip-duration-badge{
  position:absolute;bottom:3px;right:3px;
  background:rgba(0,0,0,0.75);color:var(--brass-lt);
  font-family:var(--font-mono);font-size:var(--fs-2xs);padding:2px 4px;letter-spacing:.05em;
}
.clip-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.clip-title{
  font-family:var(--font-mono);font-size:var(--fs-md);color:var(--text);
  letter-spacing:.02em;font-weight:bold;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.clip-meta-sub{display:flex;align-items:center;gap:10px;}
.clip-user{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--brass-lt);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;}
.clip-time{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-sub);letter-spacing:.05em;white-space:nowrap;}
.clip-actions{display:flex;flex-direction:row;gap:6px;flex-shrink:0;}
.clip-copy-link,.clip-download,.clip-delete{
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;border-radius:8px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
}
.clip-copy-link svg,.clip-download svg,.clip-delete svg{width:17px;height:17px;flex-shrink:0;}
.clip-copy-link{color:var(--text-dim);background:rgba(255,255,255,0.03);border:1px solid var(--border);}
.clip-copy-link:hover{border-color:var(--text-dim);color:var(--text);}
.clip-copy-link:active{transform:scale(0.94);}
.clip-copy-link.copied{color:var(--live);background:rgba(57,255,20,0.1);border-color:var(--live);}
.clip-download{color:var(--brass-lt);background:rgba(181,134,13,0.08);border:1px solid var(--brass-dk);}
.clip-download:hover{background:var(--brass-dk);color:#0e0c0e;}
.clip-download:active{transform:scale(0.94);}
.clip-delete{color:#e88;background:rgba(200,60,60,0.08);border:1px solid #5c2626;}
.clip-delete:hover{background:#a33;border-color:#a33;color:#fff;}
.clip-delete:active{transform:scale(0.96);}
.clip-delete:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ===== Clip lightbox — sits above both modals, dims the entire page ===== */
#clip-lightbox{
  position:fixed;inset:0;z-index:60;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.92);
  padding:40px;
}
#clip-lightbox.open{display:flex;}
#clip-lightbox-video{
  max-width:92vw;max-height:88vh;max-height:88dvh;
  width:auto;height:auto;
  background:#000;
  border:1px solid var(--brass-dk);
  box-shadow:0 0 60px rgba(0,0,0,0.8);
}
#clip-lightbox-close{
  position:fixed;top:24px;right:28px;z-index:61;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  background:rgba(0,0,0,0.7);border:1px solid var(--brass-dk);color:var(--brass-lt);
  font-family:var(--font-mono);font-size:var(--fs-xl);
  cursor:pointer;transition:all .15s;
}
#clip-lightbox-close:hover{border-color:var(--brass);background:rgba(0,0,0,0.9);}

/* ===== Clip tool ===== */
#clip-create-row{
  padding:12px 16px;flex-shrink:0;font-family:var(--font-mono);
}
#clip-create-logged-in{display:none;align-items:center;gap:10px;flex-wrap:wrap;flex-direction:column;}
#clip-duration-label{font-size:var(--fs-sm);letter-spacing:.15em;color:var(--brass);white-space:nowrap;}
#clip-create-status{font-size:var(--fs-xs);letter-spacing:.1em;color:var(--text-sub);}
#clip-create-logged-out{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-sm);letter-spacing:.1em;color:var(--text-dim);}
#clip-login-link{color:var(--brass-lt);text-decoration:none;font-weight:bold;letter-spacing:.15em;}
#clip-login-link:hover{text-decoration:underline;}
#clip-preview-wrap{position:relative;background:#000;width:100%;max-width:480px;aspect-ratio:16/9;}
#clip-preview-video{width:100%;height:100%;display:block;object-fit:contain;background:#000;}
#clip-preview-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.2em;color:var(--text-sub);
  text-transform:uppercase;background:rgba(0,0,0,0.6);
}
#clip-timeline-wrap{width:100%;max-width:480px;}
#clip-preview-selection-btn{margin-top:10px;}
#clip-title-wrap{width:100%;max-width:480px;margin-top:14px;}
#clip-title-input{
  width:100%;background:#000;border:1px solid var(--border);color:var(--text);
  padding:9px 11px;font-family:var(--font-mono);font-size:var(--fs-md);
  outline:none;transition:border-color .2s;letter-spacing:.05em;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.6);
}
#clip-title-input::placeholder{color:var(--text-sub);text-transform:uppercase;letter-spacing:.1em;}
#clip-title-input:focus{border-color:var(--brass);box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 0 0 1px var(--brass-dk);}
#clip-timeline-track{
  position:relative;height:34px;background:var(--surface2);
  border:1px solid var(--border);margin-top:6px;cursor:pointer;
}
#clip-timeline-selected{
  position:absolute;top:0;bottom:0;
  background:rgba(181,134,13,0.25);
  border-left:1px solid var(--brass);border-right:1px solid var(--brass);
}
.clip-handle{
  position:absolute;top:-1px;bottom:-1px;width:12px;
  background:var(--brass);cursor:ew-resize;
  transform:translateX(-50%);
  clip-path:polygon(30% 0%,70% 0%,100% 15%,100% 85%,70% 100%,30% 100%,0% 85%,0% 15%);
  transition:background .1s,transform .1s,box-shadow .1s;
  touch-action:none;
  z-index:2;
}
.clip-handle:hover{background:var(--brass-lt);}
.clip-handle.dragging{
  background:var(--live);
  transform:translateX(-50%) scaleX(1.6) scaleY(1.08);
  box-shadow:0 0 12px var(--live),0 0 24px rgba(57,255,20,0.5);
  z-index:3;
}
.clip-handle-tooltip{
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  background:#000;border:1px solid var(--brass-dk);color:var(--brass-lt);
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.05em;
  padding:2px 6px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .15s;
}
.clip-handle.dragging .clip-handle-tooltip,
.clip-handle:hover .clip-handle-tooltip{opacity:1;}
#clip-timeline-labels{
  display:flex;justify-content:space-between;margin-top:5px;
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--text-sub);
}
#clip-duration-readout{color:var(--brass-lt);font-weight:bold;}

/* Small utility icon button overlaid on the preview video (e.g. refresh) —
   deliberately understated so it doesn't compete with the primary action. */
.clip-icon-btn{
  position:absolute;top:8px;right:8px;z-index:2;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.65);border:1px solid var(--brass-dk);color:var(--brass-lt);
  border-radius:50%;cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-md);
  transition:background .15s,border-color .15s;
}
.clip-icon-btn:hover{background:rgba(0,0,0,0.9);border-color:var(--brass);}
.clip-icon-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Footer: status readout + the one commit action, visually separated from
   the setup controls above (preview/refresh) so there's a single clear CTA. */
#clip-footer-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  width:100%;max-width:480px;
}
.clip-primary-btn{
  background:var(--brass-dk);border:1px solid var(--brass);color:#0e0c0e;
  cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-md);font-weight:bold;
  letter-spacing:.08em;padding:9px 22px;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:background .15s,box-shadow .15s,transform .1s;
  flex-shrink:0;
}
.clip-primary-btn span{display:block;}
.clip-primary-btn:hover{background:var(--brass-lt);box-shadow:0 0 14px rgba(181,134,13,0.4);}
.clip-primary-btn:active{transform:scale(0.97);}
.clip-primary-btn:disabled{opacity:.4;cursor:not-allowed;background:var(--brass-dk);box-shadow:none;transform:none;}

.capture-progress{
  display:none;width:100%;max-width:480px;height:5px;
  background:var(--surface2);border:1px solid var(--border);
  overflow:hidden;position:relative;margin-top:12px;
}
.capture-progress.active{display:block;}
.capture-progress-bar{
  position:absolute;top:0;left:-40%;height:100%;width:40%;
  background:var(--brass);
  animation:capture-sweep 1.1s ease-in-out infinite;
}
@keyframes capture-sweep{
  0%{left:-40%;}
  100%{left:100%;}
}
.tool-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ===== Fluid reflow ===== */
/* Same layout, same components, same type scale as desktop — just stacked
   vertically once there isn't enough width for video+chat side by side.
   Nothing here is a separate "mobile design": it's the same rules, applied
   at a width where the row layout no longer fits. */
#mobile-bar{
  display:none; /* shown only at the mobile breakpoint below */
  position:fixed;left:0;right:0;bottom:0;z-index:500;
  align-items:center;justify-content:space-around;
  background:linear-gradient(135deg, #1a0a0a 0%, #0e0c0e 100%);
  border-top:2px solid var(--brass-dk);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mb-btn{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--text-sub);font-family:var(--font-mono);font-size:var(--fs-2xs);
  letter-spacing:.05em;padding:4px 6px;flex:1;min-width:0;
}
.mb-btn svg{width:19px;height:19px;}
.mb-btn.active,.mb-btn:hover{color:var(--brass-lt);}
.mb-btn.primary{color:var(--brass-lt);}

@media (max-width: 860px){
  body.stream{
    flex-direction:column;
    overflow-y:auto;overflow-x:hidden;
  }
  body.stream #video-section{
    flex:none;width:100%;aspect-ratio:16/9;min-height:0;
  }
  body.stream #h-resize{display:none;}
  body.stream #chat-panel{
    width:100%;flex:1;min-height:0;
    border-left:none;border-top:1px solid var(--brass-dk);
    padding-bottom:var(--mobile-bar-h, 64px); /* clears the fixed mobile-bar — see js/mobile-bar.js */
  }
  .offline-name,.vag-title{font-size:clamp(28px, 9vw, 56px);letter-spacing:3px;}

  /* One control surface: the header toolbar and the per-feature status
     readouts are redundant with mobile-bar + the offline overlay, so
     they're hidden here rather than squeezed smaller. The buttons they
     contain still exist and still work — mobile-bar just triggers them
     (see js/mobile-bar.js) so there's exactly one place to tap. */
  body.stream #panel-header .tool-row,
  body.stream .stream-status{
    display:none;
  }

  /* Chat vs Draw share the same screen real estate below the header —
     only one is visible at a time, so whichever the person is using
     gets the full remaining height instead of both being squeezed. */
  body.stream #chat-panel.mode-chat #canvas-section,
  body.stream #chat-panel.mode-draw #chat-body{
    display:none;
  }
  body.stream #resize-handle{display:none;} /* drag-resize is a desktop-only affordance */
  body.stream #canvas-section{
    height:auto!important;min-height:0;flex:1;
  }

  /* The two canvas toolbars have more controls than fit one mobile row —
     scroll instead of wrap, so they stay one compact strip instead of
     eating multiple rows of height. */
  body.stream .ctool-row{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  }
  body.stream .ctool-row::-webkit-scrollbar{display:none;}

  #mobile-bar{
    display:flex;
  }
  .mobile-only-item{display:flex;}
}

/* Games / leaderboard iframe drawers — used by js/drawer.js */
.watch-track{width:60px;height:8px;border-radius:4px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;display:inline-block;vertical-align:middle}
.watch-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-dk),var(--brass));transition:width 1s linear}
#games-drawer,#leaderboard-drawer,#shop-drawer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9999;align-items:center;justify-content:center}
#games-drawer.open,#leaderboard-drawer.open,#shop-drawer.open{display:flex}
.games-drawer-panel{background:#0B0E13;width:98vw;height:96vh;
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column;border:1px solid #242C3A}
#games-drawer-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #242C3A;flex-shrink:0}
#games-frame,#leaderboard-frame,#shop-frame{flex:1;border:none;width:100%}