/* Pubquizzie – Pub quiz / drankspel theme */
:root {
  --bg: #0f0e12;
  --bg-card: #1a1820;
  --bg-elevated: #24212b;
  --text: #e8e4ef;
  --text-muted: #8a8598;
  --accent: #e8b923;
  --accent-dim: #c49a1a;
  --danger: #e84a4a;
  --danger-blink: #ff6b6b;
  --success: #4ae87a;
  --border: #2e2a36;
  --radius: 12px;
  --font: 'Segoe UI', system-ui, sans-serif;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, .btn {
  cursor: pointer;
  font: inherit;
  padding: .5rem 1rem;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  transition: background .15s, transform .1s;
}
button:hover, .btn:hover { background: var(--accent-dim); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, textarea, select {
  font: inherit;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text);
  width: 100%;
}
label { display: block; margin-bottom: .5rem; }
label span { display: block; margin-bottom: .25rem; color: var(--text-muted); font-size: .9rem; }

.error { color: var(--danger); margin-top: .5rem; }
.hint { color: var(--text-muted); font-size: .9rem; margin-top: .5rem; }

/* Landing */
.page-landing .header {
  text-align: center;
  padding: 2rem 1rem;
}
.page-landing .header h1 {
  font-size: 2.5rem;
  margin: 0 0 .5rem;
  color: var(--accent);
}
.page-landing .main {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}
.card h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.form button[type="submit"] { margin-top: .5rem; width: 100%; }
.result-urls { margin-top: 1rem; }
.result-urls a { word-break: break-all; }

/* Admin */
.page-admin .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.admin-header .tabs { display: flex; gap: 0; }
.admin-header .tab {
  padding: .5rem 1rem;
  background: transparent;
  color: var(--text-muted);
  border-radius: 0;
  font-weight: 500;
}
.admin-header .tab.active { background: var(--bg-elevated); color: var(--accent); }
.header-actions a { color: var(--accent); }

.main { padding: 1rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }

.builder-toolbar { display: flex; gap: .5rem; margin-bottom: 1rem; }
.slides-list { display: flex; flex-direction: column; gap: .5rem; }
.slide-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--bg-elevated);
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
}
.slide-item:hover { border-color: var(--accent-dim); }
.slide-item.active { border-color: var(--accent); background: rgba(232,185,35,.08); }
.slide-item .order { font-weight: 600; color: var(--text-muted); min-width: 1.5rem; }
.slide-item .preview { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-size: .9rem; }
.slide-item .type { font-size: .75rem; color: var(--text-muted); }
.slide-item .actions { display: flex; gap: .25rem; }
.slide-item .actions button { padding: .25rem .5rem; font-size: .85rem; background: var(--bg-card); color: var(--text); }
.slide-item .actions button:hover { background: var(--danger); color: #fff; }
.slide-item.dragging { opacity: .6; }

.slide-editor {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1rem;
}
.slide-editor h3 { margin: 0 0 1rem; }
.media-url-wrap { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }
.media-url-wrap input[type="text"] { flex: 1; min-width: 120px; }
.media-url-wrap input[type="file"] { max-width: 100%; }
.options-wrap { margin-top: 1rem; }
.options-wrap h4 { margin: 0 0 .5rem; font-size: 1rem; }
.options-wrap label { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1rem; }
.options-wrap label input[type="checkbox"] { width: auto; }
.form-actions { display: flex; gap: .5rem; margin-top: 1rem; }

.players-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.players-section h3 { margin: 0 0 .75rem; }
.form-inline { display: flex; gap: .5rem; margin-bottom: .75rem; }
.form-inline input { flex: 1; }
.players-list { list-style: none; padding: 0; margin: 0; }
.players-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  background: var(--bg-elevated);
  border-radius: 8px;
  margin-bottom: .25rem;
}
.players-list li .join-link { font-size: .85rem; color: var(--text-muted); word-break: break-all; }

/* Host */
.host-controls { margin-bottom: 1.5rem; }
.host-display { margin-bottom: 1.5rem; }
.host-slide {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  min-height: 200px;
}
.host-slide .slide-question { font-size: 1.25rem; margin-bottom: 1rem; }
.host-slide .slide-media { margin: 1rem 0; }
.host-slide .slide-media img { max-width: 100%; max-height: 300px; border-radius: 8px; }
.host-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
#slide-counter { color: var(--text-muted); }

.host-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
}
.host-sidebar h4 { margin: 0 0 .5rem; font-size: 1rem; }
.host-sidebar ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.host-sidebar li {
  padding: .4rem .6rem;
  border-radius: 6px;
  margin-bottom: .25rem;
  font-size: .9rem;
}
.host-sidebar li.offline { background: rgba(232,74,74,.15); color: var(--danger); }
.host-sidebar li.offline.blink { animation: blink 1s infinite; }
.host-sidebar li.moet-drinken { background: rgba(232,185,35,.15); color: var(--accent); }
#host-judge-actions { margin-top: .5rem; }
.host-sidebar #host-judge-toggles { margin-bottom: .5rem; }
.host-sidebar .judge-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; font-size: .9rem; }
.judge-row .name { flex: 1; min-width: 80px; }
.judge-row button { padding: .25rem .5rem; font-size: .85rem; }
.judge-row button.correct { background: var(--success); color: var(--bg); }
.judge-row button.wrong { background: var(--danger); color: #fff; }
.judge-row button.atje { background: var(--accent); color: var(--bg); }
.judge-row button.active { box-shadow: 0 0 0 2px var(--text); }
.judge-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
#host-scoreboard[hidden] {
  display: none !important;
}
.scoreboard {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 560px;
  width: 100%;
  border: 1px solid var(--border);
}
.scoreboard h2 { margin: 0 0 1rem; text-align: center; }
#scoreboard-table { width: 100%; border-collapse: collapse; }
#scoreboard-table th, #scoreboard-table td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
#scoreboard-table th { color: var(--text-muted); font-weight: 600; }
.scoreboard button { margin-top: 1rem; width: 100%; }

/* Play */
.page-play { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
.screen { display: none; width: 100%; max-width: 420px; }
.screen.active { display: block; }

.join-card, .lobby-card, .ended-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 2rem;
  border: 1px solid var(--border);
  max-width: 480px;
  width: 100%;
}
.join-card h1, .lobby-card h2, .ended-card h2 { margin: 0 0 1rem; text-align: center; }
.ended-card table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.ended-card th, .ended-card td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
.ended-card th { color: var(--text-muted); font-weight: 600; }
.page-play .screen.ended { max-width: 100%; }
.page-play .screen.ended.active { display: flex; align-items: center; justify-content: center; }
.join-card .form button { width: 100%; margin-top: .5rem; }

.focus-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: var(--danger);
  color: #fff;
  text-align: center;
  font-weight: 600;
  z-index: 100;
  animation: blink 1s infinite;
}
.focus-warning.hidden { display: none !important; }

.quiz-slide {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 420px;
}
.slide-question { font-size: 1.2rem; margin-bottom: 1rem; font-weight: 500; }
.slide-media { margin: 1rem 0; }
.slide-media img { max-width: 100%; border-radius: 8px; }
.slide-media video, .slide-media audio { max-width: 100%; }

.slide-answers { display: flex; flex-direction: column; gap: .5rem; }
.slide-answers button {
  text-align: left;
  padding: 1rem;
  background: var(--bg-elevated);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.slide-answers button:hover { border-color: var(--accent-dim); background: rgba(232,185,35,.08); }
.slide-answers button.selected { border-color: var(--accent); background: rgba(232,185,35,.12); }
.slide-answers button:disabled { opacity: .7; cursor: default; }

.slide-draw, .slide-open { margin-top: 1rem; }
#draw-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 220px;
  background: var(--bg-elevated);
  border-radius: 8px;
  border: 1px solid var(--border);
  touch-action: none;
}
.draw-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.draw-toolbar button, #draw-clear, #draw-submit { padding: .4rem .75rem; font-size: .9rem; }
.slide-open { display: flex; gap: .5rem; }
.slide-open input { flex: 1; }
#open-submit { flex-shrink: 0; }

/* Responsive */
@media (min-width: 768px) {
  #panel-host {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
  }
  #panel-host .host-controls { grid-column: 1 / -1; }
  #panel-host .host-display { grid-column: 1; }
  #panel-host .host-sidebar { grid-column: 2; margin-top: 0; }
  #panel-host #host-scoreboard { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .page-admin .header { flex-direction: column; align-items: stretch; }
  .admin-header .tabs { justify-content: stretch; }
  .admin-header .tab { flex: 1; }
}