/* QuizRoom — modern Bootstrap-5 based theme. Replaces the bespoke
 * gradient/animation soup in the legacy PHP files. */

:root {
  --qr-bg-1:   #1f2937;
  --qr-bg-2:   #111827;
  --qr-card:   #1f2937;
  --qr-border: #374151;
  --qr-blue:   #3b82f6;
  --qr-green:  #22c55e;
  --qr-yellow: #f59e0b;
  --qr-red:    #ef4444;
}

html, body { height: 100%; }
body.qr-body {
  background: linear-gradient(180deg, var(--qr-bg-2), var(--qr-bg-1));
  color: #e5e7eb;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

.qr-brand     { font-family: 'Lilita One', sans-serif; font-size: 1.4rem; }
.qr-headline  { font-family: 'Lilita One', sans-serif; color: #fff; }
.qr-section-title {
  font-family: 'Lilita One', sans-serif;
  color: #fff;
  margin-bottom: 1rem;
}
.qr-hero-logo { max-height: 180px; }

.qr-card {
  background: rgba(31, 41, 55, 0.85);
  border: 1px solid var(--qr-border);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.qr-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: #fff;
  margin-bottom: 0.75rem;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  position: relative;
}
.qr-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
.qr-tile h3   { margin: 0 0 .25rem; font-family: 'Lilita One', sans-serif; font-size: 1.4rem; }
.qr-tile p    { margin: 0; opacity: .95; }
.qr-tile-blue   { background: linear-gradient(135deg, #2563eb, #1e3a8a); }
.qr-tile-green  { background: linear-gradient(135deg, #16a34a, #14532d); }
.qr-tile-yellow { background: linear-gradient(135deg, #f59e0b, #b45309); }
.qr-tile-red    { background: linear-gradient(135deg, #ef4444, #7f1d1d); }
.qr-tile-secondary { background: linear-gradient(135deg, #475569, #1f2937); }
.qr-tile-done   { opacity: .55; }
.qr-tile-locked { pointer-events: none; opacity: .35; }
.qr-tile-tick   { font-size: 1.6rem; }

.qr-category-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .35rem;
  color: #fff;
}
.qr-category-grid li i { color: #93c5fd; margin-right: .35rem; }

.qr-footer { background: var(--qr-bg-2); border-top: 1px solid var(--qr-border); }

.qr-state { min-height: 180px; }
.qr-roomcode { font-family: 'Lilita One', sans-serif; font-size: 1.6rem; }

.qr-question {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.qr-choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: .75rem 1rem;
  margin-bottom: .5rem;
  border-radius: 10px;
  border: 1px solid var(--qr-border);
  background: #0f172a;
  color: #e5e7eb;
  font-weight: 500;
}
.qr-choice:hover { border-color: var(--qr-blue); }
.qr-choice.correct   { background: var(--qr-green); border-color: var(--qr-green); color: #fff; }
.qr-choice.incorrect { background: var(--qr-red);   border-color: var(--qr-red);   color: #fff; }
.qr-choice:disabled  { cursor: default; }

.qr-scoreboard { list-style: none; padding: 0; }
.qr-scoreboard li {
  display: flex;
  justify-content: space-between;
  padding: .4rem .75rem;
  border-bottom: 1px solid var(--qr-border);
}
.qr-scoreboard li:last-child { border-bottom: 0; }