/* CLEANED + ORGANIZED EARLY-2000s RETRO THEME */

:root{
  --bg:#000000;
  --fg:#b9dcb2;
  --link:#88ff88;
  --border:#333;
  --accent:#aef7ae;

  /* XP theme */
  --win-gray:#e5e5e5;
  --win-title:#d0d0d0;
  --win-shadow:#777;
  --win-blue-1:#0a3d91;
  --win-blue-2:#4a82e5;
}

/* GLOBAL RESET */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Verdana,"Courier New",monospace;
  font-size:14px;
  line-height:1.4;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.wrapper{
  max-width:880px;
  margin:24px auto;
  padding:0 12px;
}

/* HEADER */
.header{text-align:center;margin:10px 0}
.header h1{
  font-size:26px;
  color:var(--accent);
  text-transform:lowercase;
  margin:8px 0;
}

/* NAV */
.nav{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:10px 0 18px 0;
  flex-wrap:wrap;
}
.nav a{
  border:1px solid var(--border);
  padding:6px 10px;
  background:#060606;
  text-transform:lowercase;
}

/* SECTIONS */
.section{
  border:1px solid var(--border);
  padding:12px;
  margin:18px 0;
  background:#060606;
}
.section h2{
  color:var(--accent);
  margin:0 0 8px 0;
  text-transform:lowercase;
  font-size:16px;
}

/* TWO-COLUMN LAYOUT */
.flex-split{
  display:flex;
  gap:20px;
}
.updates-left{flex:2}
.orb-container{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#060606;
}

/* ASCII ORB */
#orb{
  white-space:pre;
  font-size:12px;
  line-height:12px;
  color:var(--accent);
}

/* ASCII DANCER */
.ascii-dancer-clean{text-align:center;margin:20px 0}
#asciiDancer{
  white-space:pre;
  font-size:5px;
  line-height:5px;
  color:var(--accent);
}

/* ASCII MOTION STUDIES WORDMARK */
#asciiMotionStudies{
  white-space:pre;
  font-size:9px;
  line-height:9px;
  color:var(--accent);
  text-align:center;
  margin:30px 0;
}

/* FOOTER */
.footer{text-align:center;padding:24px 0;font-size:12px;opacity:.8}

/* GIF BANNER */
.gif-banner{text-align:center;margin:30px 0 10px}
.gif-banner img{
  border:1px solid var(--border);
  background:#000;
  max-width:90%;
  image-rendering:pixelated;
}

/* ----------------------------------------------- */
/* WINDOWS XP POPUP WINDOW + DRAGGING              */
/* ----------------------------------------------- */

.popup-overlay{
  position:fixed;
  inset:0;
  display:none;
  z-index:99999;
  pointer-events:none;
}

/* the XP window itself */
.popup{
  position:fixed;
  background:var(--win-gray);
  border:2px solid #ffffff;
  outline:2px solid #000;
  box-shadow:5px 5px 0 var(--win-shadow);
  min-width:360px;
  max-width:520px;
  color:#000;
  pointer-events:auto;
  user-select:none;
}

.popup.dragging{
  opacity:.85;
  cursor:grabbing;
}

.popup.active{
  z-index:1000000;
}

/* XP TITLE BAR */
.titlebar{
  background:linear-gradient(to right,var(--win-blue-1),var(--win-blue-2));
  padding:4px 6px;
  font-size:12px;
  color:white;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2px solid #00306d;
  cursor:grab;
  user-select:none;
}

.controls{
  display:flex;
  gap:4px;
}

.winbtn{
  width:18px;
  height:16px;
  border:1px solid #000;
  background:#ececec;
  text-align:center;
  line-height:14px;
  font-size:9px;
  cursor:pointer;
  font-weight:bold;
}
.winbtn:hover{
  background:#ffffff;
}

/* BODY AREA */
.content{
  padding:10px;
  background:#ffffff;
  font-size:12px;
  color:#000;
}
.content.hide{
  display:none;
}

/* ACTION BUTTONS */
.actions{
  padding:8px 10px;
  background:#dcdcdc;
  border-top:1px solid #aaa;
  text-align:right;
}

.okbtn{
  min-width:75px;
  padding:3px 10px;
  border:1px solid #000;
  background:#e5e5e5;
  font-size:12px;
  cursor:pointer;
}
.okbtn:hover{
  background:#fff;
}

/* ----------------------------------------------- */
/* WINDOWS XP TASKBAR                              */
/* ----------------------------------------------- */

.xp-taskbar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:34px;
  background:linear-gradient(to top,#245edb,#3a76e5);
  border-top:2px solid #0f3fa8;
  display:flex;
  align-items:center;
  padding:2px 6px;
  z-index:999999;
}

.start-btn{
  background:linear-gradient(to bottom,#3a9e3a,#2e7d2e);
  border:2px solid #0f3f0f;
  color:white;
  font-weight:bold;
  padding:4px 10px;
  border-radius:3px;
  margin-right:10px;
  cursor:pointer;
  font-family:Verdana,sans-serif;
  font-size:13px;
}

.start-btn:hover{
  background:linear-gradient(to bottom,#4eb44e,#3a9e3a);
}

.taskbar-icons{
  display:flex;
  gap:10px;
}

.taskbar-icons img{
  width:24px;
  height:24px;
  cursor:pointer;
  image-rendering:pixelated;
}


/* --- STREAM PAGE --- */
.muted{opacity:.85}
.tiny{font-size:12px}

.stream-controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:12px 0 16px;
  padding:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
}
.stream-controls label{font-size:12px; opacity:.9}
.stream-controls input{
  flex:1 1 220px;
  min-width:220px;
  padding:8px 10px;
  border:1px solid var(--border);
  background:#0b0b0b;
  color:var(--fg);
  font-family:Verdana,"Courier New",monospace;
}
.btn{
  padding:8px 12px;
  border:1px solid var(--border);
  background:#111;
  color:var(--fg);
  cursor:pointer;
}
.btn:hover{filter:brightness(1.2)}

.stream-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:12px;
}
.stream-player, .stream-chat{
  border:1px solid var(--border);
  background:#050505;
  box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset;
}
.stream-frame{
  position:relative;
  width:100%;
  height:0;
}
.stream-player .stream-frame{padding-top:56.25%;} /* 16:9 */
.stream-chat .stream-frame{padding-top:150%;} /* tall chat */
.stream-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

@media (max-width: 820px){
  .stream-grid{grid-template-columns: 1fr;}
  .stream-chat .stream-frame{padding-top:110%;}
}