:root{
  --bg:#0e1020; --panel:#171a2f; --ink:#e9eeff; --muted:#a8b0c7;
  --accent:#77e1ff; --ok:#58e08f; --warn:#ffcd57; --bad:#ff6b81; --line:#23294a;
  --blueCard:#1e3a8a;
  --hostAccent:#ffdc73; --hostPanel:#302a15; --hostBorder:#ffdc73;
  --danger:#ff5252;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 800px at 10% -10%,#182041 0,#0e1020 60%);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:16px;display:grid;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.lobby.host-mode{background:linear-gradient(180deg, rgba(255,220,115,.08), rgba(255,220,115,.02)), var(--hostPanel);border-color:var(--hostBorder)}
.chat-card{margin-top:14px}
h1{margin:0 0 6px;font-size:24px}
h3,h4{margin:0 0 10px}
.no-margin{margin:0}
.muted{color:var(--muted)}
input,select,button{border-radius:12px;border:1px solid #273056;background:#1d2445;color:var(--ink);padding:10px 12px}
button{cursor:pointer;font-weight:700;transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
button:disabled{opacity:.7;cursor:not-allowed;filter:grayscale(.2)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp{flex:1}
.btn-primary{background:linear-gradient(90deg,#3ccfff,#77e1ff);border:none}
.btn-good{background:linear-gradient(90deg,#4fe097,#9ef2c7);border:none}
.btn-warn{background:linear-gradient(90deg,#ffb84d,#ffd27a);border:none;color:#1b1300}
.btn-danger{background:linear-gradient(90deg,#ff7676,#ff5252);border:none;color:#2b0000}
.lift-on-hover:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.grid{display:grid;gap:12px}
.two{grid-template-columns:1fr 1fr}
.pill{padding:2px 8px;border-radius:999px;background:#222a52;color:#c7cff2;font-size:12px}
.list{display:grid;gap:8px}
.player{display:flex;flex-direction:column;background:#1a2042;border:1px solid #2a3264;border-radius:10px;padding:8px 10px}
.player .rowtop{display:flex;justify-content:space-between;align-items:center;width:100%}
.player .voters{margin-top:6px;font-size:12px;color:#c7cff2;opacity:.85}
.player.clickable{cursor:pointer}
.player.selected{outline:2px solid var(--accent)}
.player.disabled{opacity:.6;cursor:not-allowed}
.player .badge{padding:2px 8px;border-radius:999px;background:#222a52;color:#c7cff2;font-size:12px}
.me{outline:2px solid var(--accent)}
.strike{text-decoration:line-through;opacity:.6}
.impostor-name{color:var(--bad);font-weight:900}
.chat{height:260px;overflow:auto;background:#121634;border:1px solid #232a55;border-radius:12px;padding:8px}
.chat p{margin:6px 0}
.small{font-size:13px}
.big{font-size:28px;font-weight:800}

/* Notificaciones (abajo-derecha) */
.notices{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column-reverse;
  gap:10px;
  z-index:60;
  align-items:flex-end;
}
.notice{
  min-width:min(360px,92vw);
  background:#1d223d;
  border:1px solid #2b315a;
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  opacity:.98;
  animation:slideIn .25s ease both;
}
.notice.info{border-color:#2b315a}
.notice.warn{border-color:#ffcd57}
.notice.error{border-color:#ff6b81}
.notice .title{font-weight:800;margin-bottom:4px}
.notice .close{margin-left:auto;background:transparent;border:none;color:#cfd6ff;font-weight:800;cursor:pointer}
@keyframes slideIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Server Status (abajo izquierda) */
.server-status{
  position:fixed;left:16px;bottom:16px;display:flex;gap:10px;align-items:center;
  background:#1d223d;border:1px solid #2b315a;border-radius:12px;padding:10px 12px;
  box-shadow:0 10px 25px rgba(0,0,0,.4);z-index:55
}
.server-status .dot{
  width:12px;height:12px;border-radius:999px;background:#ff6b81;
  animation:pulse 1.8s ease-in-out infinite;
}
.server-status .dot.ok{ background:#58e08f; }
@keyframes pulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,0.0) }
  50%{ transform:scale(1.15); box-shadow:0 0 12px 2px rgba(88,224,143,.35) }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,0.0) }
}
.btn-compact{
  margin-left:10px;padding:6px 10px;border-radius:10px;border:1px solid #2b315a;
  background:#1d2445;color:#e9eeff;font-weight:800;cursor:pointer;
}
.btn-compact:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.35); }

/* Flip */
.flip-scene{perspective:1000px}
.flip-card{position:relative;width:100%;min-height:200px;border-radius:14px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);outline:none;}
.flip-card.is-toggled{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;overflow:hidden;}
.flip-face.front{background:#0f1740;border:1px solid #2c366c}
.flip-face.back{background:#0f1434;border:1px solid #2c366c;transform:rotateY(180deg)}

/* Carta: roles (colores y peso) */
.reveal-card .role{font-weight:900;letter-spacing:.5px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.reveal-card .role.impostor{color:var(--bad)}
.reveal-card .role.crew{color:var(--ok)}

/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(6,10,26,.88);display:flex;align-items:center;justify-content:center;z-index:40;}
.countdown-number{font-size:22vw;line-height:1;font-weight:900;color:#e9eeff;text-shadow:0 10px 40px rgba(0,0,0,.6);animation:pop .8s ease both;}

.stage{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(1200px 800px at 10% -10%,#19224b 0,#0f132a 60%);z-index:30}
.stage-top{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:14px}
.stage-top .chip{background:#1a2042;border:1px solid #2a3264;border-radius:999px;padding:6px 12px;color:#cdd4ff;font-weight:700}
.stage-center{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.stage-scene{width:min(620px,92vw)}
.stage-card{min-height:360px}

.blue-card{background:var(--blueCard);position:relative;width:100%;height:100%}
.blue-card canvas{position:absolute;inset:0;width:100%;height:100%}

/* Voting / Results */
.overlay-vote{background:rgba(6,10,26,.95)}
.vote-panel{background:#151a38;border:1px solid #293164;border-radius:16px;padding:16px;min-width:min(760px,94vw)}
.center{text-align:center}

.result-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.result-name{min-width:120px;font-weight:700}
.result-bar{flex:1;height:16px;background:#1a2042;border:1px solid #2a3264;border-radius:999px;position:relative;overflow:hidden}
.result-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#3ccfff,#77e1ff)}
.result-voters{font-size:12px;color:#c7cff2;margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@keyframes pop{
  0%{transform:scale(.8);opacity:.2}
  100%{transform:scale(1);opacity:1}
}