:root {
  --bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --text: #222222;
  --text-muted: #666666;
  --heading: #667eea;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --border: #e0e0e0;
  --primary: #667eea;
  --primary-2: #764ba2;
  --on-primary: #ffffff;
  --secondary: #6c757d;
  --success-bg: #e8f5e9;
  --success: #4caf50;
  --info-bg: #fff3cd;
  --info: #856404;
  --connected-bg: #d4edda;
  --connected: #155724;
  --danger: #dc3545;
  --success-strong: #28a745;
  --shadow-rgb: 0,0,0;
}
:root[data-theme="dark"] {
  --bg: linear-gradient(135deg, #0f1324 0%, #1c1630 100%);
  --text: #e6e6e6;
  --text-muted: #a3a3a3;
  --heading: #9bb1ff;
  --surface: #171a21;
  --surface-2: #1d212a;
  --border: #2a2f3a;
  --primary: #8aa0ff;
  --primary-2: #b07cff;
  --on-primary: #0e1020;
  --secondary: #8b949e;
  --success-bg: #0f2a19;
  --success: #6bd18a;
  --info-bg: #3a320f;
  --info: #e3c25c;
  --connected-bg: #0f2a19;
  --connected: #7ee2a8;
  --danger: #ff6b81;
  --success-strong: #3ddc97;
  --shadow-rgb: 0,0,0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Theme tokens */
    --bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --text: #222;
    --text-muted: #666;
    --heading: #667eea;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --border: #e0e0e0;
    --primary: #667eea;
    --primary-2: #764ba2; /* for gradients */
    --on-primary: #ffffff;
    --secondary: #6c757d;
    --success-bg: #e8f5e9;
    --success: #4caf50;
    --info-bg: #fff3cd;
    --info: #856404;
    --connected-bg: #d4edda;
    --connected: #155724;
    --danger: #dc3545;
    --success-strong: #28a745;
    --shadow-rgb: 0,0,0;
}

:root[data-theme="dark"] {
    --bg: linear-gradient(135deg, #0f1324 0%, #1c1630 100%);
    --text: #e6e6e6;
    --text-muted: #a3a3a3;
    --heading: #9bb1ff;
    --surface: #171a21;
    --surface-2: #1d212a;
    --border: #2a2f3a;
    --primary: #8aa0ff;
    --primary-2: #b07cff;
    --on-primary: #0e1020;
    --secondary: #8b949e;
    --success-bg: #0f2a19;
    --success: #6bd18a;
    --info-bg: #3a320f;
    --info: #e3c25c;
    --connected-bg: #0f2a19;
    --connected: #7ee2a8;
    --danger: #ff6b81;
    --success-strong: #3ddc97;
    --shadow-rgb: 0,0,0;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] *, html[data-theme] {
    transition: background-color 180ms, color 180ms, border-color 180ms, box-shadow 180ms;
  }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 900px;
    width: 100%;
    padding: 40px;
}

h1 {
    color: #667eea;
    text-align: center;
    margin-bottom: 30px;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
}

.setup-screen, .game-screen {
    display: none;
}

.setup-screen.active, .game-screen.active {
    display: block;
}

.input-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
}

input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

input:focus {
    outline: none;
    border-color: #667eea;
}

button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

button:active {
    transform: translateY(0);
}

.room-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.room-info strong {
    color: #667eea;
}

.players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.player-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 3px solid transparent;
    transition: all 0.3s;
}

.player-card.voted {
    border-color: #4caf50;
    background: #e8f5e9;
}

.player-card.me {
    border-color: #667eea;
    background: #e3f2fd;
}

.player-name {
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.player-status {
    font-size: 14px;
    color: #666;
}

.player-vote {
    font-size: 32px;
    font-weight: bold;
    color: #667eea;
    margin-top: 10px;
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

.card {
    width: 80px;
    height: 110px;
    background: white;
    border: 3px solid #667eea;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #667eea;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.card.selected {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-10px);
}

.actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.actions button {
    flex: 1;
}

.secondary-btn {
    background: #6c757d;
}

.results {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
}

.results h3 {
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

.result-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 36px;
    font-weight: bold;
    color: #667eea;
}

.stat-label {
    font-size: 14px;
    color: #666;
}

.connection-status {
    text-align: center;
    padding: 10px;
    background: #fff3cd;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #856404;
}

.connection-status.connected {
    background: #d4edda;
    color: #155724;
}

/* Setup two-block layout */
.setup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 700px) {
    .setup-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.setup-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e0e0e0;
}
.setup-card:focus-within {
    border-color: #667eea;
}
.field-error {
    color: #b00020;
    font-size: 13px;
    margin-top: 6px;
    min-height: 1em;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Modal styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-overlay.open {
    display: flex;
}
.modal-dialog {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    padding: 20px;
    border: 2px solid #e0e0e0;
}
.modal-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #333;
}
.modal-message {
    color: #444;
    margin-bottom: 16px;
}
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.btn-inline {
    width: auto;
    padding: 8px 14px;
    font-size: 14px;
}
.modal-success .modal-title { color: #155724; }
.modal-success .modal-dialog { border-color: #28a745; }
.modal-error .modal-title { color: #721c24; }
.modal-error .modal-dialog { border-color: #dc3545; }

/* --- Responsive and mobile alignment improvements --- */
/* Scale main title gracefully across devices */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); }

/* Improve room info wrapping for long URLs on mobile */
.room-info small {
  line-height: 1.35;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Allow the URL to shrink and wrap on small screens without pushing the button off-screen */
#shareUrl { flex: 1 1 auto; min-width: 0; }
#shareUrl { color: var(--primary); }
#shareUrl { word-break: break-all; overflow-wrap: anywhere; }
/* Ensure clear spacing between inline text and the copy button */
.room-info small button { margin-inline-start: 10px; }

/* Actions: stack on small screens */
@media (max-width: 480px) {
  body { padding: 12px; }
  .container {
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  }
  .room-info { padding: 12px; }
  .players {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  .cards-container { gap: 10px; }
  .card {
    width: 64px;
    height: 90px;
    font-size: 20px;
    border-width: 2px;
  }
  .player-vote { font-size: 28px; }
  .actions { flex-direction: column; gap: 10px; }
  .results { padding: 16px; }
  .stat-value { font-size: 28px; }
  .stat-label { font-size: 12px; }
  .modal-dialog { padding: 16px; width: calc(100% - 24px); }
}

/* Ultra-small phones: tighten grid to avoid overflow */
@media (max-width: 360px) {
  .players { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .header { gap: 4px; }
}

/* Tablet tweaks */
@media (min-width: 481px) and (max-width: 820px) {
  .container { padding: 28px; }
  .players { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .card { width: 72px; height: 100px; font-size: 22px; }
}

/* Respect iOS safe areas */
@supports (padding: max(0px)) {
  body {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* --- Theming: CSS variable mappings overriding legacy colors --- */
:root {
    /* Theme tokens */
    --bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --text: #222222;
    --text-muted: #666666;
    --heading: #667eea;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --border: #e0e0e0;
    --primary: #667eea;
    --primary-2: #764ba2; /* for gradients */
    --on-primary: #ffffff;
    --secondary: #6c757d;
    --success-bg: #e8f5e9;
    --success: #4caf50;
    --info-bg: #fff3cd;
    --info: #856404;
    --connected-bg: #d4edda;
    --connected: #155724;
    --danger: #dc3545;
    --success-strong: #28a745;
    --shadow-rgb: 0,0,0;
}

:root[data-theme="dark"] {
    --bg: linear-gradient(135deg, #0f1324 0%, #1c1630 100%);
    --text: #e6e6e6;
    --text-muted: #a3a3a3;
    --heading: #9bb1ff;
    --surface: #171a21;
    --surface-2: #1d212a;
    --border: #2a2f3a;
    --primary: #8aa0ff;
    --primary-2: #b07cff;
    --on-primary: #0e1020;
    --secondary: #8b949e;
    --success-bg: #0f2a19;
    --success: #6bd18a;
    --info-bg: #3a320f;
    --info: #e3c25c;
    --connected-bg: #0f2a19;
    --connected: #7ee2a8;
    --danger: #ff6b81;
    --success-strong: #3ddc97;
    --shadow-rgb: 0,0,0;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] *, html[data-theme] { transition: background-color 180ms, color 180ms, border-color 180ms, box-shadow 180ms; }
}

/* Apply tokens to components */
body { background: var(--bg); color: var(--text); }
.container { background: var(--surface); box-shadow: 0 20px 60px rgba(var(--shadow-rgb),0.3); }
h1 { color: var(--heading); }
label { color: var(--text); }
input { border-color: var(--border); background: var(--surface); color: var(--text); }
input:focus { border-color: var(--primary); }
button { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); color: var(--on-primary); box-shadow: none; }
button:hover { box-shadow: 0 5px 15px color-mix(in sRGB, var(--primary) 40%, transparent); }
.room-info { background: var(--surface-2); }
.room-info strong { color: var(--primary); }
.players {}
.player-card { background: var(--surface-2); border-color: transparent; }
.player-card.voted { border-color: var(--success); background: var(--success-bg); }
.player-card.me { border-color: var(--primary); background: color-mix(in sRGB, var(--primary) 8%, var(--surface)); }
.player-name { color: var(--text); }
.player-status { color: var(--text-muted); }
.player-vote { color: var(--primary); }
.card { background: var(--surface); border-color: var(--primary); color: var(--primary); }
.card.selected { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); color: var(--on-primary); }
.secondary-btn { background: var(--secondary); color: #fff; }
.results { background: var(--surface-2); }
.results h3 { color: var(--text); }
.stat-value { color: var(--primary); }
.stat-label { color: var(--text-muted); }
.connection-status { background: var(--info-bg); color: var(--info); }
.connection-status.connected { background: var(--connected-bg); color: var(--connected); }
.setup-card { background: var(--surface-2); border-color: var(--border); }
.setup-card:focus-within { border-color: var(--primary); }
.modal-dialog { background: var(--surface); border-color: var(--border); }
.modal-title { color: var(--text); }
.modal-message { color: var(--text); }
.modal-success .modal-title { color: var(--connected); }
.modal-success .modal-dialog { border-color: var(--success-strong); }
.modal-error .modal-title { color: var(--danger); }
.modal-error .modal-dialog { border-color: var(--danger); }

/* Topbar theme toggle */
.topbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 20px; padding: 6px 10px; width: auto; }
.theme-toggle:hover { transform: none; box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.25); }




/* Final dark theme overrides to ensure readability */
:root[data-theme="dark"] {
  --on-primary: #ffffff; /* ensure strong contrast on primary buttons and selected cards */
}

/* Header layout to align title with theme toggle (works on mobile) */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 44px; /* keep enough touch target height */
}
.header h1 {
  margin: 0;
  grid-column: 2;
  justify-self: center;
  text-align: center;
}
.header .theme-toggle {
  grid-column: 3;
  justify-self: end;
  position: static;
  transform: none;
}