/* ===== RetroBlox 2006 — peak Windows-95 nostalgia ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: Tahoma, Verdana, "MS Sans Serif", sans-serif;
  font-size: 12px;
  background: #008080; /* classic teal desktop */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#scene-container { position: fixed; inset: 0; z-index: 0; }
#scene-container canvas { display: block; cursor: grab; }
#scene-container canvas:active { cursor: grabbing; }

.hidden-ui { display: none !important; }

/* ===== Win95 window chrome ===== */
.win95-window {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 1px 1px 0 #000;
  position: fixed;
  z-index: 10;
}
.win95-titlebar {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: bold;
  padding: 2px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.tb-collapse {
  width: 16px; height: 14px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  font-size: 10px; line-height: 10px;
  cursor: pointer; color: #000; font-weight: bold;
}
.tb-collapse:active { border-color: #808080 #ffffff #ffffff #808080; }

.win95-btn {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  padding: 2px 10px;
  font-family: inherit; font-size: 12px;
  cursor: pointer; color: #000;
}
.win95-btn:active { border-color: #808080 #ffffff #ffffff #808080; }

/* ===== Loading Screen ===== */
#loading-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(#3a6ea5, #004e8c);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s;
}
#loading-screen.fade-out { opacity: 0; }
.loader-window { position: static; width: 340px; max-width: 90vw; }
.loader-body { padding: 18px; text-align: center; }
.brick-logo { font-size: 44px; }
.loader-title {
  font-size: 22px; font-weight: bold; color: #000080;
  margin: 6px 0 14px; letter-spacing: 1px;
}
.progress-outer {
  height: 22px; background: #fff;
  border: 2px solid; border-color: #808080 #ffffff #ffffff #808080;
  margin-bottom: 8px; overflow: hidden;
}
.progress-inner {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, #0a3fa8 0 16px, #1084d0 16px 20px);
  transition: width 0.15s steps(1);
}
.loader-flavor { color: #333; font-size: 11px; height: 14px; }

/* ===== Toolbar ===== */
#toolbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: #c0c0c0;
  border-bottom: 2px solid #808080;
  padding: 3px 6px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.tb-title { font-weight: bold; color: #000080; margin-right: 8px; }
.tb-menu { cursor: pointer; padding: 1px 4px; }
.tb-menu:hover { background: #000080; color: #fff; }
.tb-stats { margin-left: auto; font-family: "Courier New", monospace; color: #333; }

/* ===== Player List ===== */
#player-list { top: 34px; right: 6px; width: 180px; }
.pl-body { padding: 4px; max-height: 220px; overflow-y: auto; background: #fff; margin: 3px; border: 1px solid #808080; }
.pl-body.collapsed { display: none; }
.pl-row { display: flex; align-items: center; gap: 5px; padding: 2px 3px; font-size: 12px; }
.pl-row:nth-child(even) { background: #eef; }
.pl-color { width: 12px; height: 12px; border: 1px solid #000; flex-shrink: 0; }
.pl-row span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dot { width: 8px; height: 8px; border-radius: 50%; background: #0c0; box-shadow: 0 0 2px #0f0; flex-shrink: 0; }

/* ===== Chat Box ===== */
#chat-box { bottom: 6px; left: 6px; width: 300px; max-width: 70vw; }
.chat-log {
  height: 130px; overflow-y: auto; background: #fff;
  margin: 3px; padding: 3px; border: 1px solid #808080;
  font-size: 12px; line-height: 1.35;
}
.chat-msg { word-wrap: break-word; }
.chat-name { font-weight: bold; }
.chat-sys { color: #0000cc; font-style: italic; }
.chat-input-row { display: flex; gap: 3px; padding: 3px; }
.chat-input-row input {
  flex: 1; font-family: inherit; font-size: 12px; padding: 2px 4px;
  border: 2px solid; border-color: #808080 #ffffff #ffffff #808080;
}
.chat-input-row input:focus { outline: none; }

/* ===== Controls Hint ===== */
#controls-hint { top: 34px; left: 6px; width: 150px; }
.ch-body { padding: 6px 8px; }
.ch-body div { margin: 2px 0; }

/* ===== Mobile Controls ===== */
#mobile-controls {
  position: fixed; bottom: 8px; right: 8px; z-index: 30;
  display: none; align-items: flex-end; gap: 20px;
}
.dpad { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dpad-mid { display: flex; gap: 40px; }
.mbtn {
  width: 52px; height: 52px;
  background: #c0c0c0;
  border: 3px solid; border-color: #ffffff #808080 #808080 #ffffff;
  font-size: 18px; font-weight: bold; color: #000080;
  cursor: pointer; touch-action: none;
}
.mbtn:active { border-color: #808080 #ffffff #ffffff #808080; }
.jump-btn { width: 70px; height: 70px; font-size: 13px; }

/* ===== Footer ===== */
#footer {
  position: fixed; bottom: 2px; right: 8px; z-index: 20;
  font-size: 11px;
}
#footer a { color: #0000ee; text-decoration: underline; }
#footer a:visited { color: #551a8b; }

/* mobile tweaks */
@media (max-width: 768px) {
  #chat-box { width: 220px; bottom: 90px; }
  .chat-log { height: 80px; }
  #player-list { width: 130px; }
  #toolbar .tb-menu { display: none; }
  #footer { bottom: 2px; left: 8px; right: auto; }
}
</parameter>