/* AccelaOffice — UI styling. Plain CSS, no framework. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #11161c;
  color: #ecf0f1;
}

/* ---------------- Fullscreen game canvas ---------------- */
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; }
#game canvas { display: block; }

/* ---------------- Splash (login photo) ---------------- */
#splash {
  position: fixed; inset: 0; z-index: 200;
  background: url(/game-assets/LoginBackground/LoginBackground.png) center / cover no-repeat #11161c;
}
/* Anchored under the "ACCELERATE OFFICE" title baked into the photo. */
#login-anchor {
  position: absolute; left: 28%; top: 44%;
  transform: translate(-50%, -50%);
}
#login-word {
  display: inline-block;
  font-family: "Arial Black", system-ui, sans-serif;
  font-weight: 900; font-size: clamp(28px, 5vw, 76px); letter-spacing: 3px;
  color: #ffd23f; -webkit-text-stroke: 3px #4a2f12; text-transform: uppercase;
  cursor: pointer; user-select: none;
  animation: login-glow 1.4s ease-in-out infinite alternate,
             login-float 2.2s ease-in-out infinite alternate;
}
#login-word:hover { color: #ffe27a; }
@keyframes login-glow {
  from { text-shadow: 0 0 6px rgba(255, 210, 63, 0.35), 0 0 2px rgba(255, 160, 0, 0.3); }
  to   { text-shadow: 0 0 24px rgba(255, 210, 63, 0.95), 0 0 44px rgba(255, 140, 0, 0.6); }
}
@keyframes login-float {
  from { transform: translateY(4px); }
  to   { transform: translateY(-10px); }
}

/* ---------------- Join screen ---------------- */
#join-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(17, 22, 28, 0.82), rgba(17, 22, 28, 0.93)),
              url(/game-assets/LoginBackground/LoginBackground.png) center / cover no-repeat;
}
#join-screen .panel {
  background: #233140; padding: 28px; border-radius: 12px; width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); text-align: center;
}
#join-screen h1 { margin: 0 0 4px; font-size: 28px; }
#join-screen .subtitle { margin: 0 0 22px; color: #95a5a6; font-size: 14px; }
#join-screen label {
  display: block; text-align: left; font-size: 12px; color: #95a5a6; margin: 14px 0 6px;
}
.muted { color: #7f8c8d; }
#name-input {
  width: 100%; padding: 12px; border: 1px solid #3d566e; background: #11161c;
  color: #ecf0f1; border-radius: 8px; font-size: 16px;
}

/* avatar picker grid */
#avatar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.avatar-tile {
  display: flex; justify-content: center; align-items: flex-end;
  padding: 6px; border: 2px solid transparent; border-radius: 10px;
  background: #1b2631; cursor: pointer; transition: border-color .12s, opacity .12s;
}
.avatar-tile:hover { border-color: #3d566e; }
.avatar-tile.selected { border-color: #2ecc71; background: #1e3a2f; }
.avatar-tile.taken { opacity: 0.28; cursor: not-allowed; filter: grayscale(1); }
.avatar-thumb {
  width: 56px; height: 84px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

#join-btn {
  width: 100%; margin-top: 18px; padding: 12px; border: 0; border-radius: 8px;
  background: #2ecc71; color: #0b3d2e; font-size: 16px; font-weight: 700; cursor: pointer;
}
#join-btn:disabled { opacity: 0.5; cursor: default; }
.note { font-size: 12px; color: #7f8c8d; margin: 14px 0 0; }

/* ---------------- Overlay (on top of the canvas) ---------------- */
#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#overlay button, #overlay input, #overlay #online-list { pointer-events: auto; }

#toolbar { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; }
.tbtn {
  width: 40px; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 18px; background: rgba(20, 28, 38, 0.78); color: #ecf0f1; backdrop-filter: blur(4px);
}
.tbtn:hover { background: rgba(52, 73, 94, 0.9); }
.tbtn.active { background: #2ecc71; }
.tbtn.muted { background: #e74c3c; }
.zone {
  font-size: 12px; padding: 8px 12px; border-radius: 10px; white-space: nowrap;
  background: rgba(20, 28, 38, 0.78); backdrop-filter: blur(4px);
}
.zone.active { background: rgba(46, 204, 113, 0.25); color: #2ecc71; }

#online-list {
  position: absolute; top: 12px; right: 12px; min-width: 120px;
  background: rgba(20, 28, 38, 0.78); backdrop-filter: blur(4px); border-radius: 10px; padding: 8px 10px;
}
.online-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.3); }

#chatbar { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(520px, 80vw); }
#chat-input {
  width: 100%; padding: 12px 16px; border: 0; border-radius: 24px;
  background: rgba(20, 28, 38, 0.92); color: #ecf0f1; font-size: 15px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45); outline: 2px solid #2ecc71;
}

#door-prompt {
  position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%);
  background: rgba(20, 28, 38, 0.9); padding: 8px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
}
#toast {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%);
  background: rgba(20, 28, 38, 0.92); padding: 10px 18px; border-radius: 10px; font-size: 14px;
}

/* ---------------- Crisp name labels + chat bubbles ---------------- */
#nameplates { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.plate {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  white-space: nowrap;
}
.plate-name {
  font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 2px #000, 0 0 3px #000; /* readable over any background */
}
.chat-bubble {
  max-width: 200px; white-space: normal; text-align: center;
  font-size: 13px; color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; /* "nothing behind it" — just text */
}