* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #111; color: #fff; }

.hidden { display: none !important; }

/* MENÜLER */
.menu {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #6B3410 0%, #C97B2C 55%, #F4A03A 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px;
}

.title {
  font-size: clamp(60px, 12vw, 140px);
  letter-spacing: 8px;
  color: #FFE066;
  text-shadow: 6px 6px 0 #3b1a06, 0 0 40px rgba(255,140,0,.7);
  margin-bottom: 60px;
  font-weight: 900;
}
.title-sm {
  font-size: 48px;
  letter-spacing: 4px;
  color: #FFE066;
  text-shadow: 3px 3px 0 #3b1a06;
  margin-bottom: 20px;
}
.subtitle { font-size: 22px; color: #fff; margin-bottom: 12px; opacity: .9; }

/* BUTONLAR */
.big-btn {
  font-size: 28px; padding: 18px 70px; margin: 10px; cursor: pointer;
  background: #FFD23F; color: #3b1a06; border: 4px solid #3b1a06;
  border-radius: 12px; font-weight: 800; letter-spacing: 2px;
  box-shadow: 0 6px 0 #3b1a06; transition: transform .1s;
}
.big-btn:hover { background: #FFAD3F; transform: translateY(-2px); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #3b1a06; }

.small-btn {
  font-size: 18px; padding: 12px 28px; margin: 6px; cursor: pointer;
  background: #FFD23F; color: #3b1a06; border: 3px solid #3b1a06;
  border-radius: 8px; font-weight: 700;
  box-shadow: 0 4px 0 #3b1a06;
}
.small-btn:hover { background: #FFAD3F; }
.small-btn.back { background: #c4584a; color: #fff; }

/* LOBİ LİSTESİ */
#lobby-list {
  width: min(700px, 90%);
  min-height: 200px; max-height: 45vh; overflow-y: auto;
  background: rgba(0,0,0,.35); border: 3px solid #3b1a06; border-radius: 10px;
  padding: 10px; margin-bottom: 20px;
}
.lobby-entry {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; margin: 6px 0; background: #fff5dc; color: #3b1a06;
  border-radius: 6px; border: 2px solid #3b1a06;
}
.lobby-entry .name { font-weight: 700; }
.lobby-entry .slots { font-family: monospace; }
.lobby-entry button {
  padding: 6px 14px; background: #3b1a06; color: #FFD23F;
  border: none; border-radius: 4px; cursor: pointer; font-weight: 700;
}
.lobby-entry button:hover { background: #6B3410; }
.lobby-empty { text-align: center; padding: 40px; opacity: .7; }

/* MP ALT BAR */
.mp-controls {
  position: fixed; left: 20px; right: 20px; bottom: 20px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
#btn-create-room { align-self: flex-start; }
.join-box { display: flex; gap: 8px; align-items: center; }
.join-box input {
  padding: 10px 14px; font-size: 18px; border-radius: 6px;
  border: 3px solid #3b1a06; width: 160px; text-transform: uppercase;
  font-family: monospace;
}

.error {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  background: #c4584a; color: #fff; padding: 12px 24px; border-radius: 6px;
  font-weight: 700; border: 3px solid #3b1a06;
}

/* ODA KURMA */
.setting-row {
  display: flex; align-items: center; gap: 14px;
  background: rgba(0,0,0,.3); padding: 16px 24px; border-radius: 10px;
  margin: 10px; min-width: 420px; border: 3px solid #3b1a06;
}
.setting-row label { min-width: 160px; font-weight: 700; }
.toggle {
  padding: 8px 20px; border: 3px solid #3b1a06; background: #fff5dc;
  color: #3b1a06; cursor: pointer; font-weight: 700; border-radius: 6px;
}
.toggle.active { background: #FFD23F; box-shadow: inset 0 0 0 2px #c97b2c; }
#max-players { flex: 1; }
#max-players-val { min-width: 30px; font-weight: 900; font-size: 22px; }

.lobby-code {
  margin-top: 20px; padding: 14px 24px;
  background: #000; color: #FFD23F; border-radius: 8px;
  font-family: monospace; font-size: 24px; letter-spacing: 4px;
  border: 3px solid #FFD23F;
}
.lobby-code-top {
  position: fixed; top: 20px; right: 20px;
  padding: 12px 20px; background: #000; color: #FFD23F;
  border: 3px solid #FFD23F; border-radius: 8px;
  font-family: monospace; font-size: 20px; letter-spacing: 3px;
}

/* NICKNAME PROMPT */
#nick-input {
  padding: 14px 20px; font-size: 22px; border-radius: 8px;
  border: 3px solid #3b1a06; width: min(360px, 80%);
  text-align: center; margin: 16px 0;
}

/* MP BAŞLIK */
.mp-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  background: rgba(0,0,0,.3); padding: 8px 16px; border-radius: 6px;
}
#mp-nick-label { font-weight: 700; color: #FFE066; }
.link-btn {
  background: transparent; border: none; color: #FFD23F;
  text-decoration: underline; cursor: pointer; font-size: 14px;
}

/* LOBİ İÇİ OYUNCU LİSTESİ */
#lobby-player-list {
  list-style: none; padding: 10px 0; margin: 10px 0;
  background: rgba(0,0,0,.3); border-radius: 8px;
  width: min(420px, 80%);
}
#lobby-player-list li {
  padding: 8px 18px; color: #fff; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
#lobby-player-list li:last-child { border-bottom: none; }

#lobby-wait-msg {
  margin: 14px 0; padding: 10px 20px;
  background: rgba(0,0,0,.4); border-radius: 6px;
  color: #FFE066; font-style: italic;
}

/* OYUN HUD */
#game-container { position: fixed; inset: 0; }
#game-canvas { display: block; width: 100%; height: 100%; }

#hud {
  position: fixed; inset: 0; pointer-events: none;
  font-family: 'Segoe UI', sans-serif;
}
#money {
  position: absolute; top: 20px; left: 20px;
  background: rgba(0,0,0,.6); color: #FFD23F; padding: 10px 18px;
  border-radius: 8px; font-size: 22px; font-weight: 800;
  border: 2px solid #FFD23F;
}
#hud-clock {
  position: absolute; top: 20px; right: 20px;
  background: rgba(0,0,0,.6); color: #FFD23F; padding: 10px 18px;
  border-radius: 8px; font-size: 22px; font-weight: 800;
  border: 2px solid #FFD23F;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}
#hud-clock.shop-open { color: #6cd06c; border-color: #6cd06c; }
#hud-clock.late { color: #ff7a3a; border-color: #ff7a3a; }

#fade-overlay {
  position: fixed; inset: 0; background: #000;
  z-index: 100; pointer-events: none; opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
#fade-overlay.show { opacity: 1; }

#rent-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 110;
}
.rent-popup-inner {
  background: #fff5dc; color: #3b1a06; padding: 30px 40px;
  border-radius: 14px; border: 5px solid #3b1a06;
  min-width: 360px; text-align: center;
}
.rent-popup-inner h3 {
  font-size: 28px; margin-bottom: 14px;
  border-bottom: 3px solid #3b1a06; padding-bottom: 10px;
}
#rent-popup-body { font-size: 18px; margin-bottom: 18px; line-height: 1.5; }
#controls-hint {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.5); color: #fff; padding: 8px 14px;
  border-radius: 6px; font-size: 13px;
}
#interact-hint {
  position: absolute; top: 55%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.7); color: #FFD23F; padding: 8px 16px;
  border-radius: 6px; font-size: 18px; font-weight: 700;
  display: none;
}
#interact-hint.show { display: block; }
#crosshair {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: 24px; text-shadow: 0 0 4px #000;
  opacity: .7;
}

/* KASA MENÜSÜ */
#cashier-menu {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #fff5dc; color: #3b1a06; padding: 30px 40px;
  border-radius: 14px; border: 5px solid #3b1a06;
  min-width: 380px; z-index: 10;
}
#cashier-menu h3 {
  text-align: center; font-size: 28px; margin-bottom: 20px;
  border-bottom: 3px solid #3b1a06; padding-bottom: 10px;
}
.order-btn {
  display: block; width: 100%; margin: 8px 0; padding: 14px;
  background: #FFD23F; border: 3px solid #3b1a06; color: #3b1a06;
  font-size: 18px; font-weight: 700; cursor: pointer; border-radius: 8px;
}
.order-btn:hover { background: #FFAD3F; }
.order-btn.close { background: #c4584a; color: #fff; margin-top: 16px; }
.order-btn:disabled { opacity: .4; cursor: not-allowed; }

/* PAUSE */
#pause-menu {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 20;
}
#pause-menu h3 { font-size: 48px; color: #FFD23F; margin-bottom: 30px; }

#game-over {
  position: fixed; inset: 0; background: rgba(10,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
#game-over .go-inner {
  background: linear-gradient(135deg, #3b0a0a, #821010);
  border: 3px solid #ff3030;
  border-radius: 12px;
  padding: 40px 60px;
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 40, 40, 0.5);
  max-width: 560px;
}
#game-over .go-title {
  font-size: 52px; color: #ff4040; margin-bottom: 16px;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 3px;
}
#game-over .go-msg { font-size: 20px; color: #fff; margin-bottom: 22px; }
#game-over .go-days { font-size: 32px; color: #FFE066; margin-bottom: 12px; font-weight: bold; }
#game-over .go-best { font-size: 22px; color: #fff; margin-bottom: 28px; }
#game-over .small-btn { font-size: 20px; padding: 12px 30px; }

#tutorial-banner {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #14803a, #20a045);
  color: #fff;
  border: 3px solid #5cff78;
  border-radius: 10px;
  padding: 10px 18px 12px 18px;
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
  min-width: 360px;
  max-width: 640px;
  z-index: 30;
  box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 20px rgba(92, 255, 120, 0.35);
  pointer-events: auto;
}
#tutorial-step-num {
  font-size: 12px; letter-spacing: 2px;
  opacity: 0.9; margin-bottom: 4px;
  text-transform: uppercase;
}
#tutorial-text {
  font-weight: bold;
  font-size: 18px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
#tutorial-skip {
  margin-top: 8px;
  background: rgba(0,0,0,.35);
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
#tutorial-skip:hover { background: rgba(0,0,0,.55); }

/* BİLGİSAYAR EKRANI - WindowsXP-esinli */
#computer-screen {
  position: fixed; inset: 0; z-index: 50;
  background: linear-gradient(180deg, #5b8fc6 0%, #92b9e0 55%, #d6efd2 75%, #6cb069 100%);
  font-family: Tahoma, 'Segoe UI', sans-serif;
}
.os-desktop { position: relative; width: 100%; height: 100%; }
.os-icons {
  position: absolute; top: 20px; left: 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.os-icon {
  width: 92px; padding: 8px;
  text-align: center; cursor: pointer; user-select: none;
  border-radius: 4px;
}
.os-icon:hover { background: rgba(255,255,255,0.2); outline: 1px dotted #fff; }
.os-icon-img {
  font-size: 48px; line-height: 1;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
.os-icon-label {
  color: white; text-shadow: 1px 1px 2px black;
  font-size: 13px; font-weight: 600; margin-top: 4px;
}

.os-window {
  position: absolute; top: 60px; left: 160px;
  background: #ece9d8;
  border: 1px solid #0a246a;
  border-radius: 6px 6px 0 0;
  box-shadow: 4px 4px 14px rgba(0,0,0,0.4);
  min-width: 420px; color: #000;
}
#os-window-sales { top: 50px; left: 200px; min-width: 680px; }
#os-window-rent { top: 80px; left: 240px; min-width: 420px; }
.os-titlebar {
  background: linear-gradient(180deg, #0a246a 0%, #3a6ea5 50%, #2459a0 100%);
  color: white; padding: 5px 8px; font-weight: bold; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: 6px 6px 0 0;
  cursor: move; user-select: none;
}
.os-window.dragging { box-shadow: 8px 8px 22px rgba(0,0,0,0.55); }

.rent-section { margin-bottom: 18px; }
.rent-section h4 {
  margin-bottom: 8px; color: #0a246a;
  font-size: 14px; border-bottom: 1px dashed #aaa; padding-bottom: 4px;
}
.rent-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px; background: #fff;
  border: 1px solid #ccc; border-radius: 3px; margin-bottom: 4px;
  font-size: 13px;
}
.rent-row.paid { background: #e6f5e6; border-color: #8bc88b; }
.rent-row.upcoming { background: #fff3d8; border-color: #d4b464; }
.rent-row.next { background: #ffd8c0; border-color: #d47840; font-weight: bold; }
.rent-row .day { font-weight: bold; min-width: 90px; }
.rent-row .amt { color: #c44; font-weight: bold; }
.rent-row .status { font-size: 11px; color: #555; }
.os-close {
  background: linear-gradient(180deg, #f4a4a4, #c44545);
  color: white; border: 1px solid #800;
  width: 22px; height: 18px;
  cursor: pointer; font-weight: bold; font-size: 14px;
  border-radius: 3px; line-height: 1;
}
.os-close:hover { background: linear-gradient(180deg, #f88, #d22); }
.os-body { padding: 16px; }

.upgrade-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: white;
  border: 1px solid #b8b8b8; border-radius: 4px; margin-bottom: 8px;
}
.upgrade-name { font-weight: bold; font-size: 14px; }
.upgrade-desc { font-size: 12px; color: #555; margin-top: 2px; }
.upgrade-buy {
  padding: 8px 14px;
  background: linear-gradient(180deg, #6cd06c, #3a9a3a);
  color: white; border: 1px solid #2a7a2a;
  border-radius: 4px; cursor: pointer;
  font-weight: bold; font-size: 13px;
}
.upgrade-buy:hover:not(:disabled) { background: linear-gradient(180deg, #8ce08c, #4aaa4a); }
.upgrade-buy:disabled {
  background: linear-gradient(180deg, #c0c0c0, #909090);
  border-color: #707070; cursor: not-allowed;
}

.sales-mistakes {
  margin-top: 12px; padding: 10px;
  background: #fff5e0; border: 1px solid #d4a464; border-radius: 4px;
  font-size: 13px; color: #5a3010;
}

/* TYCOON */
#os-window-tycoon { top: 30px; left: 280px; min-width: 460px; max-width: 460px; }
.tycoon-body { padding: 14px; }
.tycoon-stats {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, #fff5d8, #f1e0a8);
  border: 2px solid #b8941a; border-radius: 6px;
  padding: 8px 12px; margin-bottom: 10px;
  font-size: 14px;
}
.tycoon-money { font-size: 18px; font-weight: bold; color: #5a3a00; }
.tycoon-rates { color: #333; font-size: 13px; }
.tycoon-arena {
  position: relative; height: 180px; overflow: hidden;
  background: linear-gradient(180deg, #1a3a5c 0%, #2a5a8a 70%, #5cb85c 70%, #3a8a3a 100%);
  border: 2px solid #0a246a; border-radius: 6px;
  margin-bottom: 10px;
}
.tycoon-collector {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-size: 36px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
  z-index: 1;
}
.tycoon-ball {
  position: absolute; top: -20px;
  width: 28px; height: 28px;
  background: radial-gradient(circle at 30% 30%, #ffeb6e, #f4a01a 70%, #b86b00);
  color: #3a1f00; font-weight: bold; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid #5a3000;
  box-shadow: 0 0 6px rgba(255, 200, 0, 0.7);
  animation: tycoon-fall 1.2s linear forwards;
  pointer-events: none;
}
@keyframes tycoon-fall {
  0%   { top: -30px; transform: rotate(0deg); }
  85%  { top: calc(100% - 56px); transform: rotate(360deg); }
  90%  { top: calc(100% - 50px); transform: rotate(370deg) scale(1.3, 0.7); }
  100% { top: calc(100% - 50px); transform: rotate(360deg) scale(0.2, 0.2); opacity: 0; }
}
.tycoon-click-btn {
  width: 100%; padding: 14px; margin-bottom: 12px;
  background: linear-gradient(180deg, #ffe066 0%, #f4a01a 60%, #c47010 100%);
  color: #3a1f00; font-weight: bold; font-size: 18px;
  border: 3px solid #6a3500; border-radius: 8px;
  cursor: pointer; user-select: none;
  box-shadow: 0 4px 0 #6a3500;
  transition: transform 0.05s, box-shadow 0.05s;
}
.tycoon-click-btn:hover { background: linear-gradient(180deg, #ffea88, #ffb53a 60%, #d48020 100%); }
.tycoon-click-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #6a3500; }
.tycoon-section { margin-bottom: 10px; }
.tycoon-section h4 {
  color: #0a246a; font-size: 13px; margin-bottom: 4px;
  border-bottom: 1px dashed #aaa; padding-bottom: 2px;
}
.tycoon-buy {
  width: 100%; padding: 8px;
  background: linear-gradient(180deg, #6cd06c, #3a9a3a);
  color: white; border: 1px solid #2a7a2a;
  border-radius: 4px; cursor: pointer;
  font-weight: bold; font-size: 13px;
}
.tycoon-buy:hover:not(:disabled) { background: linear-gradient(180deg, #8ce08c, #4aaa4a); }
.tycoon-buy:disabled {
  background: linear-gradient(180deg, #c0c0c0, #909090);
  border-color: #707070; cursor: not-allowed;
}
.tycoon-maxed {
  text-align: center; padding: 6px;
  background: #fff3d8; border: 1px solid #d4a464;
  border-radius: 4px; color: #5a3010; font-weight: bold;
}
.tycoon-convert-btn {
  width: 100%; padding: 10px;
  background: linear-gradient(180deg, #5da6ff, #2a6dc7);
  color: white; border: 1px solid #14478a;
  border-radius: 4px; cursor: pointer;
  font-weight: bold; font-size: 14px;
}
.tycoon-convert-btn:hover:not(:disabled) { background: linear-gradient(180deg, #7db8ff, #3a7dd7); }
.tycoon-convert-btn:disabled {
  background: linear-gradient(180deg, #c0c0c0, #909090);
  border-color: #707070; cursor: not-allowed;
}
.tycoon-hint { font-size: 11px; color: #555; margin-top: 4px; text-align: center; }

/* CLICKER */
#os-window-clicker { top: 60px; left: 320px; min-width: 460px; max-width: 460px; }
.clicker-body { padding: 14px; }
.clicker-stage {
  position: relative; height: 180px;
  background: radial-gradient(ellipse at center, #fff7d8 0%, #f4d88a 60%, #c89640 100%);
  border: 2px solid #6a3500; border-radius: 6px;
  margin-bottom: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.clicker-burger {
  background: none; border: none; cursor: pointer;
  font-size: 110px; line-height: 1;
  filter: drop-shadow(4px 6px 4px rgba(0,0,0,0.4));
  user-select: none;
  transition: transform 0.05s;
}
.clicker-burger:hover { transform: scale(1.04); }
.clicker-burger:active { transform: scale(0.92); }
.clicker-float {
  position: absolute;
  font-weight: bold; font-size: 18px;
  color: #5a3000; text-shadow: 0 0 4px #fff, 0 0 6px #fff;
  pointer-events: none;
  animation: clicker-float-up 0.9s ease-out forwards;
}
@keyframes clicker-float-up {
  0%   { transform: translate(-50%, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -80px) scale(0.8); opacity: 0; }
}
.helper-row {
  display: flex; align-items: center; gap: 8px;
  background: white; border: 1px solid #b8b8b8; border-radius: 4px;
  padding: 6px 10px; margin-bottom: 5px;
  font-size: 13px;
}
.helper-emoji { font-size: 24px; line-height: 1; }
.helper-info { flex: 1; }
.helper-name { font-weight: bold; }
.helper-stats { font-size: 11px; color: #555; }
.helper-buy {
  padding: 6px 12px; min-width: 90px;
  background: linear-gradient(180deg, #6cd06c, #3a9a3a);
  color: white; border: 1px solid #2a7a2a;
  border-radius: 4px; cursor: pointer;
  font-weight: bold; font-size: 12px;
}
.helper-buy:hover:not(:disabled) { background: linear-gradient(180deg, #8ce08c, #4aaa4a); }
.helper-buy:disabled {
  background: linear-gradient(180deg, #c0c0c0, #909090);
  border-color: #707070; cursor: not-allowed;
}

.os-taskbar {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 32px;
  background: linear-gradient(180deg, #245edb, #1e3f9c);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; border-top: 1px solid #4a8ce8;
}
.os-start {
  background: linear-gradient(180deg, #4a8a4a, #2a5a2a);
  color: white; padding: 4px 14px;
  border-radius: 14px 4px 4px 14px;
  border: 1px solid #1a4a1a;
  font-size: 13px; font-weight: bold;
}
#os-close-screen {
  background: linear-gradient(180deg, #c44, #822);
  color: white; border: 1px solid #500;
  padding: 5px 14px; border-radius: 3px;
  cursor: pointer; font-size: 13px; font-weight: bold;
}
#os-close-screen:hover { background: linear-gradient(180deg, #e66, #a44); }

/* ===== CHAT HUD ===== */
#chat-hud {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 360px;
  max-width: 38vw;
  font-family: sans-serif;
  z-index: 50;
  pointer-events: none;
}
#chat-messages {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  max-height: 220px;
  overflow: hidden;
}
.chat-msg {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  word-wrap: break-word;
  animation: chat-fade-out 12s linear forwards;
}
.chat-msg .nick { color: #ffd24a; font-weight: bold; margin-right: 6px; }
.chat-msg.system {
  background: rgba(40, 60, 80, 0.55);
  font-style: italic;
}
.chat-msg.system .nick { color: #6cf; }
@keyframes chat-fade-out {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
#chat-hud.input-open .chat-msg {
  animation: none;
  opacity: 1;
}
#chat-hud.input-open #chat-messages {
  background: rgba(0, 0, 0, 0.35);
  padding: 6px;
  border-radius: 6px;
}
#chat-input-wrap {
  margin-top: 8px;
  pointer-events: auto;
}
#chat-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 2px solid #ffd24a;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* ===== VOICE HUD ===== */
#voice-hud {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-family: sans-serif;
  z-index: 50;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  flex-wrap: wrap;
  max-width: 360px;
}
.voice-btn {
  pointer-events: auto;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-family: sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.voice-btn:hover { background: rgba(255,255,255,0.15); }
.voice-btn:active { background: rgba(255,255,255,0.22); }
.voice-btn.hidden { display: none; }
#voice-hud .voice-peers { color: #ccc; font-size: 11px; padding: 0 4px; }
/* off durumu: hiç bağlı değil */
#voice-hud.off { border-color: rgba(255,255,255,0.15); }
#voice-hud.off .voice-btn { border-color: #ffd24a; color: #ffd24a; }
/* listening durumu: bağlı, mic kapalı (sadece dinliyor) */
#voice-hud.listening { border-color: #4488dd; }
#voice-hud.listening #voice-btn-toggle { border-color: #4488dd; color: #88c4ff; }
#voice-hud.listening #voice-btn-mic { border-color: #ffd24a; color: #ffd24a; }
/* talking durumu: bağlı, mic açık */
#voice-hud.talking { border-color: #4caf50; box-shadow: 0 0 12px rgba(76,175,80,0.3); }
#voice-hud.talking #voice-btn-toggle { border-color: #4488dd; color: #88c4ff; }
#voice-hud.talking #voice-btn-mic { border-color: #4caf50; color: #8efc8e; background: rgba(76,175,80,0.18); }
#voice-hud.error { border-color: #f55; }
#voice-hud.error .voice-btn { border-color: #f55; color: #f88; }