:root{
  --bg:#090d1a;--text:#e2e8f0;--dim:#64748b;
  --purple:#a855f7;--green:#22c55e;--red:#ef4444;--gold:#facc15;--cyan:#22d3ee;
  --font:"Inter","Cairo",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
body{
  min-height:100vh;font-family:var(--font);
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(168,85,247,.15),transparent),
    radial-gradient(ellipse 60% 50% at 90% 100%,rgba(34,211,238,.1),transparent);
}

.home-btn{
  position:fixed;left:14px;top:14px;z-index:70;
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;text-decoration:none;
  background:rgba(0,0,0,.5);backdrop-filter:blur(16px);
}

.screen{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center}
.screen.active{display:flex;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── JOIN ── */
.join-wrap{width:min(440px,94vw)}
.join-hero{text-align:center;padding:20px}
.hero-icon{font-size:3rem;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.join-hero h1{
  margin:8px 0 4px;font-size:2rem;font-weight:900;
  background:linear-gradient(135deg,#c4b5fd,#67e8f9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.join-hero p{color:var(--dim);font-size:.9rem}
.join-form{
  background:rgba(0,0,0,.35);backdrop-filter:blur(20px);
  border-radius:20px;padding:20px;
  display:flex;flex-direction:column;gap:12px;
}
.join-actions{display:flex;flex-direction:column;gap:10px}
.join-row{display:flex;gap:8px}
.mode-select{display:flex;gap:16px;justify-content:center}
.mode-select label{display:flex;align-items:center;gap:5px;color:#94a3b8;font-size:.88rem;cursor:pointer}
.error-text{text-align:center;color:var(--red);font-size:.86rem;min-height:20px;margin-top:8px}

/* ── LOBBY ── */
.lobby-wrap{
  width:min(440px,94vw);text-align:center;
  background:rgba(0,0,0,.35);backdrop-filter:blur(20px);
  border-radius:20px;padding:28px;
}
.lobby-code{font-size:1rem;margin-bottom:6px}
.lobby-code strong{
  font-size:1.8rem;letter-spacing:.15em;
  background:linear-gradient(135deg,#fde68a,#f59e0b);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.lobby-mode{color:var(--dim);font-size:.82rem;margin-bottom:14px}
.player-list{list-style:none;padding:0;margin:0 0 14px}
.player-list li{
  padding:10px 14px;margin-bottom:6px;border-radius:12px;
  background:rgba(255,255,255,.04);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.92rem;
}
.player-list .ready-badge{color:var(--green);font-size:.8rem;font-weight:700}
.player-list .wait-badge{color:var(--dim);font-size:.8rem}
.hint{color:var(--dim);font-size:.84rem;margin-top:8px}

/* ── ROUND ── */
.round-wrap{
  width:min(560px,94vw);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.round-header{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-radius:14px;
  background:rgba(0,0,0,.35);backdrop-filter:blur(12px);
}
.round-info,.round-status{display:flex;gap:14px;font-size:.88rem;font-weight:700}
.round-info span:first-child{color:#c4b5fd}
.round-info span:last-child{color:var(--gold)}
#livesLabel{color:var(--red)}
#rescueLabel{color:var(--cyan)}

.timer-bar{
  width:100%;height:8px;border-radius:999px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.timer-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--gold),var(--red));
  transition:width .3s linear;
  width:100%;
}
.timer-num{font-size:2rem;font-weight:900;color:#f1f5f9;min-height:48px}
.timer-num.urgent{color:var(--red);animation:pulse .5s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

.prompt{
  font-size:1.5rem;font-weight:900;color:#f1f5f9;text-align:center;
  min-height:40px;
}

.options{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  width:100%;
}
.opt-btn{
  padding:14px 24px;border-radius:16px;
  border:2px solid rgba(100,116,139,.3);
  background:rgba(0,0,0,.3);backdrop-filter:blur(8px);
  color:var(--text);font-size:1.05rem;font-weight:700;
  cursor:pointer;min-width:100px;text-align:center;
  transition:transform .12s,border-color .2s,box-shadow .2s,background .2s;
}
.opt-btn:hover{
  transform:translateY(-3px);
  border-color:rgba(168,85,247,.6);
  box-shadow:0 6px 20px rgba(168,85,247,.2);
}
.opt-btn.selected{
  border-color:rgba(34,197,94,.6);
  background:rgba(34,197,94,.12);
  box-shadow:0 0 16px rgba(34,197,94,.2);
}
.opt-btn:disabled{opacity:.5;cursor:default;transform:none}

.pick-status{
  font-size:.88rem;color:var(--dim);min-height:24px;text-align:center;
}

/* ── RESULT ── */
.result-wrap{
  width:min(440px,94vw);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.result-icon{font-size:4rem;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.result-wrap h2{font-size:1.5rem;font-weight:900}
.result-wrap h2.success{color:var(--green)}
.result-wrap h2.fail{color:var(--red)}
.result-meta{font-size:.9rem;color:var(--dim);width:100%}

.picks-reveal{
  display:flex;flex-direction:column;gap:6px;
  margin:8px 0;width:100%;
}
.pick-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);
  animation:fadeIn .3s ease;
}
.pick-name{font-weight:700;color:#94a3b8;font-size:.9rem}
.pick-choice{font-size:1rem;font-weight:800;color:#f1f5f9}
.result-score{
  margin-top:8px;font-size:.92rem;font-weight:700;color:var(--gold);
}

/* ── GAME OVER ── */
.gameover-wrap{
  width:min(440px,94vw);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.go-icon{font-size:4.5rem;animation:float 2.5s ease-in-out infinite}
.gameover-wrap h2{font-size:1.6rem;font-weight:900}
.gameover-wrap p{color:var(--dim)}

/* ── BUTTONS ── */
.btn{
  border:none;border-radius:14px;padding:12px 28px;
  font-size:.95rem;font-weight:700;color:#fff;cursor:pointer;
  transition:transform .12s,box-shadow .2s,filter .2s;
}
.btn:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:not(:disabled):active{transform:translateY(1px) scale(.98)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn--primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 6px 20px rgba(124,58,237,.3)}
.btn--ghost{background:transparent;border:1px solid rgba(100,116,139,.45);color:#94a3b8}
.btn--start{
  width:100%;padding:14px;font-size:1.05rem;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  box-shadow:0 8px 28px rgba(124,58,237,.35);
}
.btn--rescue{
  padding:10px 24px;
  background:linear-gradient(135deg,#0891b2,#0e7490);
  box-shadow:0 6px 18px rgba(14,116,144,.3);
}

input{
  width:100%;padding:10px 14px;font-size:.95rem;
  border-radius:12px;border:1px solid rgba(71,85,105,.4);
  background:rgba(15,23,42,.8);color:var(--text);
}
input:focus{outline:none;border-color:rgba(168,85,247,.5);box-shadow:0 0 0 3px rgba(168,85,247,.1)}

.hidden{display:none!important}

@media(max-width:500px){
  .opt-btn{min-width:80px;padding:12px 16px;font-size:.92rem}
}