/* styles.css - minimalista e responsivo para utilizadores */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0b74de;
  --danger:#e11d48;
  --radius:12px;
  --maxw:980px;
  --pad:14px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; background:var(--bg); color:#0f172a; -webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw); margin:20px auto; padding:18px;}

/* Card */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(12,15,20,0.06);
  padding:var(--pad);
}

/* Header */
.header {display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.brand{font-weight:700;font-size:1.05rem}
.small {font-size:0.9rem;color:var(--muted)}

/* Contestant block */
.contestant {display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.contestant .thumb{width:140px; height:140px; border-radius:10px; overflow:hidden; flex:0 0 140px; display:flex; align-items:center; justify-content:center; background:#f3f4f6}
.contestant img{max-width:100%; max-height:100%; object-fit:cover}

/* Buttons */
.actions{display:flex; gap:10px; margin-top:12px}
.btn{
  padding:10px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:600;
  box-shadow:0 2px 6px rgba(12,15,20,0.04);
}
.btn-primary{background:var(--accent); color:#fff}
.btn-ghost{background:transparent; border:1px solid #e6e9ee; color:#111}
.btn-danger{background:var(--danger); color:#fff}

/* Alerts */
.alert {padding:10px 12px; border-radius:8px; margin-top:10px; font-size:0.95rem}
.alert-info{background:#fffbea; color:#7c6a00}
.alert-success{background:#ecfdf5; color:#065f46}
.alert-warn{background:#fff4e6; color:#7a4b00}

/* Results grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-top:12px}
.result-card{text-align:center;padding:10px;border-radius:10px;background:var(--card)}
.result-card img{width:100%;height:120px;object-fit:cover;border-radius:8px}

/* Responsive */
@media (max-width:480px){
  .contestant {flex-direction:column; align-items:stretch}
  .contestant .thumb{width:100%; height:220px; flex:auto}
  .actions{flex-direction:column}
}