/* static/styles/menu.css */

body.menu-bg, 
.menu-container,
#title,
.hint {
    color: white;
}


body.menu-bg{
  background:url('../pictures/purple_back.jpg') center/cover no-repeat fixed;
  font-family:system-ui,-apple-system,"Roboto",sans-serif;
  margin:0;
}

.menu-container{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  height:100vh;justify-content:center;padding:0 1.2rem;
}

.menu-btn{
  font-size:1.6rem;padding:1rem 2rem;max-width:380px;width:90%;
  border-radius:18px;border:none;cursor:pointer;
  background:rgba(255,255,255,.85);backdrop-filter:blur(4px);
  transition:.15s transform;
}
.menu-btn:active{transform:scale(.97);}

ul#playersList{
  width:100%;max-width:380px;padding:0;margin:0;
  list-style:none;background:rgba(0,0,0,.25);
  border-radius:12px;font-size:1.1rem;color:#fff;
}

.player-row{display:flex;justify-content:space-between;padding:.6rem 1rem;}
.player-row.me{background:rgba(255,255,255,.15);}
.player-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.2);}

#btn-ready{margin-top:1.2rem;}
#countdown{font-size:3rem;color:#fff;margin:1rem 0;}


/* Online/Offline dot in lobby */
.dot{
  display:inline-block;
  width:.6rem; height:.6rem;
  margin-right:.45rem;
  border-radius:50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset;
  vertical-align:middle;
}

/* If you ever add class-based coloring from JS, keep these hooks: */
.dot.online  { background:#2ecc71; }  /* green */
.dot.offline { background:#7f8c8d; }  /* grey */

/* Gentle pulse when online (optional – JS not required; pure CSS) */
@keyframes dotPulse {
  0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(46,204,113,.6); }
  70%  { transform:scale(1.06);box-shadow:0 0 0 6px rgba(46,204,113,0); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(46,204,113,0); }
}
.dot.online { animation: dotPulse 1.9s ease-out infinite; }

/* Tweak lobby rows so dots line up nicely */
.player-row span:first-child{
  display:flex; align-items:center; gap:.2rem;
}


/* Small creator-only kick button */
.kick-btn{
  margin-left:.6rem;
  border:none;
  background:transparent;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  opacity:.7;
}
.kick-btn:hover{ opacity:1; transform:scale(1.05); }
.kick-btn:active{ transform:scale(.98); }