:root{ 
    --bg:#0f1724; 
    --card:#0b1220; 
    --accent:#ffcc00; 
    --muted:#9aa4b2; 
    --glass: rgba(255,255,255,0.03); 
}

*{box-sizing:border-box}

body{
    font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;
    margin:0;
    background:linear-gradient(180deg,#071226 0%, #0f1724 100%);
    color:#e6eef6;
    -webkit-font-smoothing:antialiased;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* LOGIN BOX */
.login-box {
    width:100%;
    background:var(--card);
    padding:24px;
    border-radius:16px;
    box-shadow:0 6px 20px rgba(2,6,23,0.6);
    margin:auto;
}

h2 {
    margin-top:0;
    margin-bottom:20px;
    font-size:22px;
    text-align:center;
}

/* FORM */
label{
    font-size:14px;
    color:var(--muted);
    display:block;
    margin-bottom:6px
}

input[type=text], input[type=number], input[type=email], input[type=password], textarea, select{
    width:100%; 
    padding:14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.08);
    background:transparent;
    color:inherit;
    font-size:16px;
    margin-bottom:14px;
}

button{
    background:var(--accent);
    color:#081025;
    padding:14px;
    border-radius:12px;
    border:0;
    font-weight:600;
    cursor:pointer;
    width:100%;
    font-size:16px;
    transition:0.2s;
}

button:hover{ opacity:0.9; }

button.ghost{
    background:transparent; 
    color:var(--accent); 
    border:1px solid rgba(255,255,255,0.05);
    width:auto;
    padding:10px 14px;
}

.error {
    color:#ff6b6b;
    font-size:14px;
    margin-top:10px;
    text-align:center;
}

/* HEADER */
header{
    padding:20px; 
    display:flex; 
    gap:12px; 
    align-items:center; 
    justify-content:space-between;
    flex-wrap:wrap;
}

.brand{
    display:flex; 
    gap:12px; 
    align-items:center
}

.logo{
    width:48px;
    height:48px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--accent),#ff8a00);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#081025;
    font-weight:700;
    font-size:20px
}

h1{font-size:18px;margin:0}
p.lead{margin:0;color:var(--muted); font-size:13px}

/* MAIN LAYOUT */
main{padding:16px; max-width:1100px; margin:0 auto; flex:1}
.grid{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:900px){
     .grid{ grid-template-columns:360px 1fr }
}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:14px; 
    padding:14px; 
    box-shadow:0 6px 20px rgba(2,6,23,0.6);
}

/* PLAYERS */
.players-list{display:grid; gap:12px}

.player-card{
    display:flex; 
    flex-direction:column; 
    gap:8px; 
    padding:12px; 
    border-radius:12px; 
    background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01))
}

.player-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap}
.player-name{font-weight:700}

.numbers{display:flex; flex-wrap:wrap; gap:8px}

/* BUBBLES */
.bubble{
    width:44px;
    height:44px;
    border-radius:50%; 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    background:var(--glass); 
    color:var(--muted); 
    font-weight:700;
    font-size:15px;
}

.bubble.cross{
    opacity:0.25; 
    text-decoration:line-through; 
    color:#f2f7fb
}

.bubble.win{
    background:linear-gradient(90deg,var(--accent),#ff9b2b); 
    color:#081025
}

.player-card.winner {
  border: 2px solid rgba(255, 204, 0, 0.8);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
}

.bubble.win {
  background: rgba(255, 204, 0, 0.2);
  border: 2px solid rgba(255, 204, 0, 0.8);
  color: #ffcc00;
  font-weight: bold;
}

/* DRAW AREA */
.draw-area{display:flex; flex-direction:column; gap:10px}
.draw-grid{display:flex; gap:8px; flex-wrap:wrap}
.draw-num{
    width:44px;
    height:44px;
    border-radius:50%; 
    background:rgba(255,255,255,0.03); 
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700
}

.controls{display:flex; gap:8px; flex-wrap:wrap}
.small{padding:8px 10px; font-size:13px}

/* FOOTER */
footer{
    padding:20px;
    text-align:center;
    color:var(--muted); 
    font-size:13px
}

/* EXTRAS */
.winner-banner{
    padding:10px;
    border-radius:10px;
    background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    color:var(--accent);
    font-weight:700;
}

.muted-help{font-size:12px;color:var(--muted)}

/* RESPONSIVIDADE */
@media (max-width:600px){
    header { flex-direction:column; align-items:flex-start; gap:8px; }
    .grid { grid-template-columns:1fr; }
    .bubble, .draw-num { width:40px; height:40px; font-size:14px; }
    .login-box { padding:18px; border-radius:12px; }
    h2 { font-size:20px; }
    input, button { font-size:15px; }
}