/* Global reset */
* { box-sizing: border-box; margin:0; padding:0; }
html, body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background:#f0f4f8; color:#202B4A;
  overflow-x:hidden; width:100%; height:100%;
}
/* Viewport-based root font scaling */
html { font-size: 16px; }
@media (max-width: 600px) { html { font-size: 20px; } }

/* Header */
header {
  background:#008B8A; color:#fff; text-align:center;
  padding:1rem; font-size:1.5rem; font-weight:bold;
}

/* Container */
.container {
  max-width:960px; margin: auto; padding:1rem; width:100%;
  display:flex; flex-direction:column;
}

/* Controls */
.controls {
  display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem;
}
.controls button, .controls input {
  flex:1; min-width:120px;
  padding:0.75rem 1rem; font-size:1rem; border-radius:4px; border:1px solid #ccc;
}
.controls button {
  background:#1CB499; color:#fff; border:none; cursor:pointer;
  transition:background 0.2s;
}
.controls button:hover { background:#008B8A; }

/* Cards grid */
#cards {
  display:grid; gap:0.75rem;
  grid-template-columns:repeat(auto-fit,minmax(4rem,1fr));
  margin-bottom:1rem; width:100%;
}
.card {
  background:#1CB499; color:#fff; border-radius:8px;
  padding:1rem; text-align:center; font-size:1.25rem;
  cursor:pointer; transition:transform 0.2s,background 0.2s;
}
.card:hover { transform:scale(1.05); background:#008B8A; }
.card.selected { background:#202B4A; }

/* Avatars */
#avatars {
  display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem;
  min-height:2.5rem;
}
.avatar {
  background:#7883A0; color:#fff; padding:0.5rem 0.75rem;
  border-radius:16px; font-size:1rem;
}
.avatar.voted { background:#008B8A; }
.avatar.not-voted { background:#E6E6E6; color:#999; }

/* Panels */
#votes, #history {
  background:#fff; padding:1rem; border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1); margin-bottom:1rem;
  width:100%; overflow-x:auto;
}
#votes h2, #history h3 { font-size:1.25rem; margin-bottom:0.5rem; }
#votes p, #history div { font-size:1rem; margin:0.25rem 0; }
#history hr { border:none; border-top:1px solid #eee; margin:0.5rem 0; }

/* Action buttons */
.btn-action {
  background:#202B4A; color:#fff; border:none; border-radius:4px;
  padding:0.75rem 1rem; font-size:1rem; font-weight:600;
  cursor:pointer; margin-right:0.5rem;
  transition:background 0.2s, transform 0.1s;
}
.btn-action:hover { background:#7883A0; transform:translateY(-2px); }
.btn-action:active { background:#008B8A; transform:translateY(0); }