/* ============================================================
   Drop-In Trivia — BEM Stylesheet
   Block: .trivia
   All selectors are scoped under .trivia — zero global leakage.
   Theme: Dark Bistro — #0d0d0d bg, amber #f5a623 accent, off-white text
   ============================================================ */

/* ── Custom properties (scoped to .trivia) ────────────────── */
.trivia {
  --t-bg:          #0d0d0d;
  --t-surface:     #161616;
  --t-surface-2:   #1f1f1f;
  --t-border:      #2a2a2a;
  --t-gold:        #f5a623;
  --t-gold-dim:    #c47d0e;
  --t-text:        #f0ede8;
  --t-text-muted:  #8a8580;
  --t-correct:     #27ae60;
  --t-wrong:       #e74c3c;
  --t-radius:      14px;
  --t-radius-sm:   8px;
  --t-transition:  0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --t-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Hide when the HTML hidden attribute is set.
   Required because .trivia { display: flex } has higher specificity
   than the browser's built-in [hidden] { display: none } rule.     */
.trivia[hidden] { display: none !important; }

/* ── Overlay container ────────────────────────────────────── */
.trivia {
  position:         fixed;
  inset:            0;
  z-index:          500;
  background:       var(--t-bg);
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
  font-family:      var(--t-font);
  color:            var(--t-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Header ───────────────────────────────────────────────── */
.trivia__header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          14px 16px 10px;
  border-bottom:    1px solid var(--t-border);
  flex-shrink:      0;
}

.trivia__logo {
  font-size:        13px;
  font-weight:      700;
  letter-spacing:   0.15em;
  text-transform:   uppercase;
  color:            var(--t-gold);
}

.trivia__logo-dot {
  display:          inline-block;
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background:       var(--t-gold);
  margin-right:     6px;
  vertical-align:   middle;
}

.trivia__pill-back {
  background:       none;
  border:           1px solid #444;
  color:            var(--t-text-muted);
  border-radius:    50px;
  padding:          11px 32px;
  font-size:        0.9rem;
  font-weight:      700;
  font-family:      var(--t-font);
  cursor:           pointer;
  width:            min(280px, 100%);
  display:          block;
  margin:           16px auto 0;
  transition:       border-color var(--t-transition), color var(--t-transition);
  letter-spacing:   0.08em;
}

.trivia__pill-back:hover {
  border-color:     #888;
  color:            var(--t-text);
}

/* ── Progress bar ─────────────────────────────────────────── */
.trivia__progress {
  height:           3px;
  background:       var(--t-border);
  flex-shrink:      0;
}

.trivia__progress-fill {
  height:           100%;
  background:       linear-gradient(90deg, var(--t-gold-dim), var(--t-gold));
  width:            0%;
  transition:       width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scrollable body ──────────────────────────────────────── */
.trivia__body {
  flex:             1;
  overflow-y:       auto;
  overflow-x:       hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Error banner ─────────────────────────────────────────── */
.trivia__error-msg {
  background:       rgba(231, 76, 60, 0.15);
  border:           1px solid rgba(231, 76, 60, 0.4);
  color:            #ff6b6b;
  font-size:        13px;
  padding:          10px 16px;
  text-align:       center;
}

/* ── Screens ─────────────────────────────────────────────── */
.trivia__screen {
  display:          none;
  min-height:       100%;
  padding:          0 0 32px;
}

.trivia__screen--active {
  display:          block;
}

/* ── Already played screen ───────────────────────────────── */
.trivia__screen--done {
  display:          none;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  padding:          40px 24px;
  text-align:       center;
}

.trivia__screen--done.trivia__screen--active {
  display:          flex;
}

.trivia__done-icon {
  font-size:        52px;
  margin-bottom:    16px;
  line-height:      1;
}

.trivia__done-heading {
  font-size:        26px;
  font-weight:      800;
  color:            var(--t-text);
  margin:           0 0 8px;
  letter-spacing:   -0.02em;
}

.trivia__done-nick {
  color:            var(--t-gold);
}

.trivia__done-sub {
  font-size:        15px;
  color:            var(--t-text-muted);
  margin:           0 0 20px;
}

.trivia__done-score {
  font-size:        42px;
  font-weight:      900;
  color:            var(--t-gold);
  letter-spacing:   -0.03em;
  line-height:      1;
}

.trivia__done-return {
  font-size:        14px;
  color:            var(--t-text-muted);
  margin:           16px 0 24px;
  line-height:      1.5;
}

/* ── Nickname screen ──────────────────────────────────────── */
.trivia__screen--nickname {
  display:          none;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  padding:          40px 24px;
  text-align:       center;
}

.trivia__screen--nickname.trivia__screen--active {
  display:          flex;
}

.trivia__nickname-icon {
  font-size:        52px;
  margin-bottom:    16px;
  line-height:      1;
}

.trivia__nickname-heading {
  font-size:        26px;
  font-weight:      800;
  color:            var(--t-text);
  margin:           0 0 8px;
  letter-spacing:   -0.02em;
}

.trivia__nickname-sub {
  font-size:        14px;
  color:            var(--t-text-muted);
  margin:           0 0 28px;
  line-height:      1.5;
}

.trivia__nickname-form {
  width:            100%;
  max-width:        320px;
  display:          flex;
  flex-direction:   column;
  gap:              12px;
}

.trivia__nickname-input {
  width:            100%;
  background:       var(--t-surface-2);
  border:           1.5px solid var(--t-border);
  border-radius:    var(--t-radius);
  color:            var(--t-text);
  font-size:        17px;
  font-family:      var(--t-font);
  font-weight:      600;
  text-align:       center;
  padding:          14px 16px;
  outline:          none;
  transition:       border-color var(--t-transition);
  box-sizing:       border-box;
  letter-spacing:   0.02em;
}

.trivia__nickname-input::placeholder {
  color:            var(--t-text-muted);
  font-weight:      400;
}

.trivia__nickname-input:focus {
  border-color:     var(--t-gold);
}

.trivia__nickname-error {
  font-size:        13px;
  color:            #ff6b6b;
  text-align:       center;
  min-height:       18px;
}

.trivia__nickname-btn {
  background:       var(--t-gold);
  border:           none;
  border-radius:    var(--t-radius);
  color:            #0d0d0d;
  font-size:        16px;
  font-family:      var(--t-font);
  font-weight:      800;
  letter-spacing:   0.05em;
  padding:          16px;
  cursor:           pointer;
  transition:       background var(--t-transition), transform 0.1s;
  text-transform:   uppercase;
}

.trivia__nickname-btn:hover { background: var(--t-gold-dim); }
.trivia__nickname-btn:active { transform: scale(0.97); }
.trivia__nickname-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Start screen ─────────────────────────────────────────── */
.trivia__screen--start {
  display:          none;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  padding:          32px 24px;
  text-align:       center;
}

.trivia__screen--start.trivia__screen--active {
  display:          flex;
}

.trivia__start-badge {
  display:          inline-block;
  background:       rgba(245, 166, 35, 0.12);
  border:           1px solid rgba(245, 166, 35, 0.3);
  color:            var(--t-gold);
  font-size:        11px;
  font-weight:      700;
  letter-spacing:   0.15em;
  text-transform:   uppercase;
  padding:          5px 14px;
  border-radius:    99px;
  margin-bottom:    20px;
}

.trivia__start-heading {
  font-size:        30px;
  font-weight:      900;
  color:            var(--t-text);
  margin:           0 0 10px;
  letter-spacing:   -0.02em;
  line-height:      1.1;
}

.trivia__start-nick {
  color:            var(--t-gold);
}

.trivia__start-sub {
  font-size:        14px;
  color:            var(--t-text-muted);
  margin:           0 0 12px;
  line-height:      1.5;
}

.trivia__start-rules {
  background:       var(--t-surface);
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  padding:          16px 20px;
  margin:           12px 0 28px;
  text-align:       left;
  width:            100%;
  max-width:        320px;
}

.trivia__start-rules-item {
  display:          flex;
  align-items:      flex-start;
  gap:              10px;
  font-size:        13px;
  color:            var(--t-text-muted);
  line-height:      1.4;
  padding:          4px 0;
}

.trivia__start-rules-icon {
  color:            var(--t-gold);
  flex-shrink:      0;
  font-size:        15px;
}

.trivia__start-btn {
  background:       var(--t-gold);
  border:           none;
  border-radius:    var(--t-radius);
  color:            #0d0d0d;
  font-size:        18px;
  font-family:      var(--t-font);
  font-weight:      900;
  letter-spacing:   0.06em;
  padding:          18px 48px;
  cursor:           pointer;
  transition:       background var(--t-transition), transform 0.1s, box-shadow var(--t-transition);
  text-transform:   uppercase;
  box-shadow:       0 4px 24px rgba(245, 166, 35, 0.25);
  width:            100%;
  max-width:        320px;
}

.trivia__start-btn:hover {
  background:       var(--t-gold-dim);
  box-shadow:       0 6px 32px rgba(245, 166, 35, 0.35);
}

.trivia__start-btn:active   { transform: scale(0.97); }
.trivia__start-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.trivia__change-nick {
  background:       transparent;
  border:           none;
  color:            var(--t-text-muted);
  font-size:        12px;
  font-family:      var(--t-font);
  text-decoration:  underline;
  cursor:           pointer;
  margin-top:       12px;
  padding:          4px;
}

.trivia__change-nick:hover { color: var(--t-text); }

/* ── Question screen ──────────────────────────────────────── */
.trivia__screen--question {
  padding:          20px 16px 32px;
}

.trivia__question-meta {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  margin-bottom:    20px;
}

.trivia__question-num {
  font-size:        13px;
  font-weight:      700;
  color:            var(--t-gold);
  letter-spacing:   0.1em;
  text-transform:   uppercase;
}

.trivia__question-wrongs {
  font-size:        12px;
  color:            var(--t-text-muted);
}

.trivia__question-card {
  background:       var(--t-surface);
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  padding:          22px 20px;
  margin-bottom:    20px;
  min-height:       90px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.trivia__question-text {
  font-size:        19px;
  font-weight:      700;
  color:            var(--t-text);
  line-height:      1.4;
  text-align:       center;
  margin:           0;
}

/* Slide-in animation for question transitions */
@keyframes trivia-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.trivia__question-text--slide-in {
  animation: trivia-slide-in 0.3s var(--t-transition) both;
}

/* Shake on wrong answer */
@keyframes trivia-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}

.trivia__screen--shake {
  animation: trivia-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ── 2×2 Answer grid ──────────────────────────────────────── */
.trivia__answer-grid {
  display:          grid;
  grid-template-columns: 1fr 1fr;
  gap:              10px;
}

.trivia__answer-btn {
  background:       var(--t-surface-2);
  border:           1.5px solid var(--t-border);
  border-radius:    var(--t-radius);
  color:            var(--t-text);
  font-size:        14px;
  font-family:      var(--t-font);
  font-weight:      600;
  line-height:      1.35;
  padding:          18px 12px;
  text-align:       center;
  cursor:           pointer;
  transition:       background var(--t-transition),
                    border-color var(--t-transition),
                    transform 0.1s,
                    color var(--t-transition);
  min-height:       80px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

@media (hover: hover) {
  .trivia__answer-btn:hover:not(:disabled) {
    background: var(--t-surface);
    color:      var(--t-gold);
  }
}

.trivia__answer-btn:active:not(:disabled) { transform: scale(0.97); }

.trivia__answer-btn:disabled { cursor: not-allowed; }

.trivia__answer-btn--correct {
  border-color:     var(--t-correct) !important;
  background:       rgba(39, 174, 96, 0.15) !important;
  color:            #2ecc71 !important;
}

.trivia__answer-btn--wrong {
  border-color:     var(--t-wrong) !important;
  background:       rgba(231, 76, 60, 0.15) !important;
  color:            #ff6b6b !important;
}

/* ── Result screen ────────────────────────────────────────── */
.trivia__screen--result {
  display:          none;
  flex-direction:   column;
  align-items:      center;
  padding:          28px 16px 40px;
}

.trivia__screen--result.trivia__screen--active {
  display:          flex;
}

.trivia__result-trophy {
  font-size:        56px;
  line-height:      1;
  margin-bottom:    12px;
}

.trivia__result-heading {
  font-size:        26px;
  font-weight:      900;
  color:            var(--t-text);
  margin:           0 0 6px;
  letter-spacing:   -0.02em;
  text-align:       center;
}

.trivia__result-nick {
  color:            var(--t-gold);
}

.trivia__result-card {
  background:       var(--t-surface);
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  padding:          20px 32px;
  margin:           20px 0 8px;
  text-align:       center;
  width:            100%;
  max-width:        280px;
}

.trivia__result-score-label {
  font-size:        12px;
  font-weight:      700;
  letter-spacing:   0.12em;
  text-transform:   uppercase;
  color:            var(--t-text-muted);
  display:          block;
  margin-bottom:    6px;
}

.trivia__result-score {
  font-size:        42px;
  font-weight:      900;
  color:            var(--t-gold);
  letter-spacing:   -0.03em;
  line-height:      1;
}

.trivia__result-wrongs {
  font-size:        13px;
  color:            var(--t-text-muted);
  margin-top:       8px;
  display:          block;
}

.trivia__result-prize {
  font-size:        14px;
  color:            var(--t-text);
  background:       rgba(245, 166, 35, 0.08);
  border:           1px solid rgba(245, 166, 35, 0.2);
  border-radius:    var(--t-radius-sm);
  padding:          10px 16px;
  margin:           12px 0 20px;
  text-align:       center;
  width:            100%;
  max-width:        280px;
}

/* ── Hall of Fame card (yesterday's winner) ───────────────── */
.trivia__hof {
  background:       linear-gradient(135deg, #1a1400, #1f1a00);
  border:           1px solid rgba(245, 166, 35, 0.3);
  border-radius:    var(--t-radius);
  padding:          16px 20px;
  margin:           0 0 16px;
  width:            100%;
  max-width:        320px;
}

.trivia__hof-eyebrow {
  font-size:        10px;
  font-weight:      700;
  letter-spacing:   0.18em;
  text-transform:   uppercase;
  color:            var(--t-gold);
  display:          block;
  margin-bottom:    8px;
}

.trivia__hof-winner {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
}

.trivia__hof-name {
  font-size:        18px;
  font-weight:      800;
  color:            var(--t-text);
}

.trivia__hof-score {
  font-size:        14px;
  font-weight:      700;
  color:            var(--t-gold);
}

/* ── Leaderboard ──────────────────────────────────────────── */
.trivia__lb {
  width:            100%;
  max-width:        320px;
  margin:           8px 0;
}

.trivia__lb-heading {
  font-size:        13px;
  font-weight:      700;
  letter-spacing:   0.12em;
  text-transform:   uppercase;
  color:            var(--t-text-muted);
  margin:           0 0 10px;
  text-align:       center;
}

.trivia__lb-table {
  width:            100%;
  border-collapse:  separate;
  border-spacing:   0 4px;
}

.trivia__lb-row td {
  background:       var(--t-surface);
  padding:          10px 12px;
  font-size:        14px;
}

.trivia__lb-row td:first-child { border-radius: var(--t-radius-sm) 0 0 var(--t-radius-sm); }
.trivia__lb-row td:last-child  { border-radius: 0 var(--t-radius-sm) var(--t-radius-sm) 0; }

.trivia__lb-row--me td {
  background:       rgba(245, 166, 35, 0.1);
  border-color:     rgba(245, 166, 35, 0.25);
}

.trivia__lb-rank  { width: 36px; color: var(--t-text-muted); font-weight: 700; }
.trivia__lb-nick  { color: var(--t-text); font-weight: 600; }
.trivia__lb-score { text-align: right; color: var(--t-gold); font-weight: 700; width: 56px; }
.trivia__lb-empty { text-align: center; color: var(--t-text-muted); font-size: 13px; padding: 16px; }

/* ── Play again / CTA buttons ─────────────────────────────── */
.trivia__play-again-btn {
  background:       transparent;
  border:           1.5px solid var(--t-border);
  border-radius:    var(--t-radius);
  color:            var(--t-text-muted);
  font-size:        14px;
  font-family:      var(--t-font);
  font-weight:      600;
  padding:          14px 32px;
  cursor:           pointer;
  transition:       border-color var(--t-transition), color var(--t-transition);
  margin-top:       16px;
  width:            100%;
  max-width:        320px;
}

.trivia__play-again-btn:hover {
  border-color:     var(--t-text-muted);
  color:            var(--t-text);
}

/* ── Divider ──────────────────────────────────────────────── */
.trivia__divider {
  width:            100%;
  max-width:        320px;
  height:           1px;
  background:       var(--t-border);
  margin:           20px 0 16px;
}

/* ── Instructions screen ─────────────────────────────────── */
.trivia__screen--instructions {
  display:          none;
  flex-direction:   column;
  align-items:      center;
  padding:          28px 24px 40px;
  text-align:       center;
}

.trivia__screen--instructions.trivia__screen--active {
  display:          flex;
}

.trivia__instructions-badge {
  display:          inline-block;
  background:       rgba(245, 166, 35, 0.12);
  border:           1px solid rgba(245, 166, 35, 0.3);
  color:            var(--t-gold);
  font-size:        11px;
  font-weight:      700;
  letter-spacing:   0.15em;
  text-transform:   uppercase;
  padding:          5px 14px;
  border-radius:    99px;
  margin-bottom:    16px;
}

.trivia__instructions-heading {
  font-size:        28px;
  font-weight:      900;
  color:            var(--t-text);
  margin:           0 0 6px;
  letter-spacing:   -0.02em;
  line-height:      1.1;
}

.trivia__instructions-sub {
  font-size:        14px;
  color:            var(--t-text-muted);
  margin:           0 0 20px;
  line-height:      1.5;
}

.trivia__instructions-card {
  background:       var(--t-surface);
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  padding:          8px 16px;
  width:            100%;
  max-width:        360px;
  text-align:       left;
}

.trivia__instructions-item {
  display:          flex;
  align-items:      flex-start;
  gap:              12px;
  padding:          14px 0;
  border-bottom:    1px solid var(--t-border);
}

.trivia__instructions-item:last-child {
  border-bottom:    none;
}

.trivia__instructions-icon {
  flex-shrink:      0;
  font-size:        20px;
  line-height:      1;
  margin-top:       2px;
}

.trivia__instructions-text {
  display:          flex;
  flex-direction:   column;
  gap:              3px;
}

.trivia__instructions-text > strong {
  font-size:        14px;
  font-weight:      700;
  color:            var(--t-text);
  letter-spacing:   0.01em;
}

.trivia__instructions-text > span {
  font-size:        12.5px;
  color:            var(--t-text-muted);
  line-height:      1.45;
}

.trivia__instructions-text > span strong {
  color:            var(--t-gold);
  font-weight:      700;
}

.trivia__instructions-next-btn {
  background:       var(--t-gold);
  border:           none;
  border-radius:    var(--t-radius);
  color:            #0d0d0d;
  font-size:        18px;
  font-family:      var(--t-font);
  font-weight:      900;
  letter-spacing:   0.06em;
  padding:          18px 48px;
  cursor:           pointer;
  transition:       background var(--t-transition), transform 0.1s, box-shadow var(--t-transition);
  text-transform:   uppercase;
  box-shadow:       0 4px 24px rgba(245, 166, 35, 0.25);
  width:            100%;
  max-width:        360px;
  margin-top:       24px;
}

.trivia__instructions-next-btn:hover {
  background:       var(--t-gold-dim);
  box-shadow:       0 6px 32px rgba(245, 166, 35, 0.35);
}

.trivia__instructions-next-btn:active {
  transform:        scale(0.97);
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-height: 600px) {
  .trivia__question-card  { padding: 14px 16px; }
  .trivia__answer-btn     { min-height: 60px; padding: 12px 10px; font-size: 13px; }
  .trivia__result-trophy  { font-size: 40px; }
  .trivia__result-score   { font-size: 34px; }
}

@media (min-width: 420px) {
  .trivia__screen--instructions,
  .trivia__screen--nickname,
  .trivia__screen--start,
  .trivia__screen--result {
    padding-left:   32px;
    padding-right:  32px;
  }
  .trivia__screen--question { padding-left: 24px; padding-right: 24px; }
}