:root{
  --chrome-bg: #2b2f38;
  --chrome-bg2: #21242b;
  --bar-normal: #4b5563;
  --bar-vsign: #d4a017;
  --bar-fist: #c0392b;
  --accent-cyan: #33e0d6;
  --accent-orange: #ff9d3d;
}
*{box-sizing:border-box;}
html,body{
  margin:0; height:100%;
  background: radial-gradient(circle at 30% 20%, #3a3f4b, #14161b 70%);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  overflow:hidden;
}
#app-window{
  width:min(94vw, 640px);
  background:var(--chrome-bg);
  border-radius:10px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  overflow:hidden;
}
#titlebar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--chrome-bg2);
  padding:7px 10px 7px 12px;
  -webkit-user-select:none; user-select:none;
}
#titlebar .title{
  display:flex; align-items:center; gap:8px;
  color:#c7cbd4; font-size:12.5px; letter-spacing:.2px;
}
#titlebar .title svg{opacity:.8}
#winbtns{display:flex; gap:6px;}
#winbtns span{
  width:12px;height:12px;border-radius:50%;
  display:inline-block; opacity:.9;
}
.b-min{background:#f5c542}
.b-max{background:#3ec26f}
.b-close{background:#e35b5b}

#mode-banner{
  padding:7px 14px;
  font-size:12.5px; font-weight:600; letter-spacing:.6px;
  color:#fff; text-transform:uppercase;
  background:var(--bar-normal);
  transition: background .25s ease;
}
#mode-banner.vsign{background:var(--bar-vsign); color:#1f1a05;}
#mode-banner.fist{background:var(--bar-fist);}
#mode-banner.thumbsup{background:#2e86de;}

#stage{
  position:relative;
  aspect-ratio: 4/3;
  background:#000;
  overflow:hidden;
}
#video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scaleX(-1);
  transition: filter .25s ease;
}
#overlay{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform:scaleX(-1);
}
#tint{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  mix-blend-mode:multiply;
}
#tint.fist{opacity:.55; background:#e05353;}
#tint.vsign{opacity:.12; background:#000;}

#caption{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  padding:20px; text-align:center;
}
#caption span{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:clamp(24px, 6.2vw, 40px);
  color:#fff;
  -webkit-text-stroke: 2.5px #1a1a1a;
  paint-order: stroke fill;
  line-height:1.15;
  opacity:0;
  transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease;
}
#caption span.show{opacity:1; transform:scale(1);}
#caption span.fist-text{ -webkit-text-stroke: 2.5px #7a1010; }

#hint{
  position:absolute; right:10px; bottom:8px;
  font-size:10.5px; color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.35);
  padding:2px 7px; border-radius:4px;
  letter-spacing:.3px;
}

#status-line{
  padding:8px 14px 10px;
  font-size:11px; color:#8c92a3;
  display:flex; justify-content:space-between; gap:8px;
  background:var(--chrome-bg2);
}
#status-line b{color:#c7cbd4; font-weight:600;}

#boot{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  background:#0d0f13; color:#9aa1b0; font-size:13px; text-align:center; padding:24px;
}
#boot button{
  background:var(--accent-cyan); border:none; color:#08211f;
  font-family:'JetBrains Mono'; font-weight:600; font-size:13px;
  padding:9px 18px; border-radius:6px; cursor:pointer;
}
#boot button:hover{filter:brightness(1.08);}
#boot .err{color:#e79a9a; max-width:280px;}