/* =============================================================
   CosmoChat  ·  stiilid  (v3.4)
   ============================================================= */

/* ---- Font + värvi­muutujad ---- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap');

:root{
  --pink   : #ff4bc2;
  --violet : #7b3fff;
  --dark   : #0b0b12;
  --glass  : rgba(255,255,255,0.08);
  --grad   : linear-gradient(135deg,var(--pink),var(--violet));
  --fs-base: clamp(.9rem,.7rem + 1vw,1.1rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Orbitron',system-ui,sans-serif;
  font-size:var(--fs-base);
  background:var(--dark);
  color:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---- Ülemine riba & tabid ---- */
.topbar{
  background:var(--grad);
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  box-shadow:0 1px 8px rgba(0,0,0,.4);
}
.tabs{display:flex;align-items:center;gap:.25rem}
.tab,.add-room{
  background:transparent;
  border:none;
  color:#fff;
  font-size:1rem;
  padding:.4rem .9rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .25s,transform .15s;
}
.tab:hover,.add-room:hover{background:rgba(255,255,255,.15)}
.tab:active,.add-room:active{transform:scale(.95)}
.tab.active{background:#fff;color:var(--dark);font-weight:600}
.add-room{font-size:1.4rem;line-height:1}

/* hamburger */
.menu-btn{display:none;background:transparent;border:none;color:#fff;font-size:1.4rem}

/* ---- Põhijaotus ---- */
main{flex:1;display:flex;overflow:hidden}
.chat-view{
  width:100%;
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-areas:"chat sidebar";
}
.chat-area{grid-area:chat;display:flex;flex-direction:column;padding:1rem;overflow:hidden}
.messages{
  flex:1;list-style:none;overflow-y:auto;margin-bottom:.75rem;
  display:flex;flex-direction:column;gap:.5rem;padding-right:.25rem
}
.messages li{
  background:var(--glass);
  padding:.6rem .8rem;
  border-radius:12px;
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 4px rgba(255,255,255,.1)
}
.messages li.self{background:rgba(255,255,255,.2)}

.message-form{display:flex;gap:.25rem}
.message-form input{
  flex:1;padding:.7rem 1rem;border:none;border-radius:12px;
  background:rgba(255,255,255,.12);color:#fff
}
.message-form button{
  padding:.7rem 1rem;border:none;border-radius:12px;
  background:var(--pink);color:#fff;font-weight:600;cursor:pointer
}

/* ---- Sidebar ---- */
.sidebar{
  grid-area:sidebar;padding:1rem;background:var(--glass);
  backdrop-filter:blur(8px);overflow-y:auto;transition:transform .3s ease
}
.users{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.users li{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;
  border-radius:10px;cursor:pointer;transition:background .2s
}
.users li:hover{background:rgba(255,255,255,.1)}
.users li.self{font-weight:700;color:var(--pink)}
.users img{width:36px;height:36px;border-radius:50%}

/* ---- Modal & kasutaja paneel ---- */
.modal,.user-panel{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:grid;place-items:center;z-index:3000
}
.hidden{display:none}
.modal-content,.panel-content{
  background:var(--dark);padding:2rem;border-radius:20px;
  width:min(92%,420px);max-height:90vh;overflow-y:auto;
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 20px rgba(0,0,0,.45);
  position:relative
}
.close{position:absolute;top:1rem;right:1.2rem;font-size:1.6rem;cursor:pointer}

/* ---- Toa kaardid modal-is ---- */
.room-card{
  padding:.75rem;border-radius:12px;background:var(--glass);
  cursor:pointer;transition:background .2s;margin-bottom:.5rem
}
.room-card:hover{background:rgba(255,255,255,.12)}
.room-title{font-weight:600;font-size:1rem;margin-bottom:.25rem}
.room-desc{
  font-size:.8rem;opacity:.85;line-height:1.3;
  max-height:9em;overflow:hidden
}

/* ---- Mängu ootenimekiri (footer) ---- */
.game-footer{
  background:var(--glass);backdrop-filter:blur(8px);
  padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem
}
.player-slots{display:flex;gap:.5rem}
.slot{
  width:68px;height:68px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.25rem;
  border-radius:14px;border:2px dashed var(--violet);cursor:pointer;
  text-align:center;font-size:.7rem;transition:background .25s
}
.slot.self{background:var(--glass);border-style:solid}
.slot img{width:38px;height:38px;border-radius:50%}
.slot.filled{background:rgba(255,255,255,.12);border-style:solid}

.start-btn{
  padding:.7rem 1.1rem;border:none;border-radius:12px;
  background:var(--pink);color:#fff;font-weight:700;cursor:pointer;
  opacity:.5;transition:opacity .25s,transform .15s
}
.start-btn.enabled{opacity:1}
.start-btn:active{transform:scale(.95)}

/* ---- Responsiivsus ---- */
@media(max-width:768px){
  .chat-view{grid-template-columns:1fr;grid-template-areas:"chat"}
  .menu-btn{display:block}
  .sidebar{
    position:fixed;right:0;top:0;height:100%;width:80%;max-width:320px;
    transform:translateX(100%);z-index:2000;box-shadow:-2px 0 12px rgba(0,0,0,.6)
  }
  .sidebar.show{transform:translateX(0)}
}


.tab .close{font-weight:700;margin-left:6px;cursor:pointer}
.start-btn.enabled{opacity:1}

/* Close button fixed position */
.tab{position:relative;padding-right:22px}
.tab .close{position:absolute;right:6px;top:4px;display:inline-block;width:16px;text-align:center;opacity:.6}
.tab .close:hover{opacity:1}
.messages li.system{color:#888;font-style:italic;font-size:.9em}
/* new room input */
#newRoomName{width:100%;padding:.5rem;border:1px solid var(--gray);border-radius:8px;font-size:1rem}
.logout-btn{margin-left:auto;background:var(--red);color:#fff;border:none;border-radius:8px;padding:.4rem .8rem;cursor:pointer}