/* ═══════════════════════════════════════════════════════════════
   Moj Islam – Kviz Izazov | Frontend Styles  v1.1
   Aesthetic: Svijetla tema · bjelina · smaragdno zelena · zlatna
   Fontovi:   Sistemski stack — bez Google Fonts (CSP-safe)
═══════════════════════════════════════════════════════════════ */

/* ── Sistemski font stack ── */
.mi-kviz-container,
.mi-leaderboard-wrap,
.mi-last-players-wrap {
  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-arabic: Georgia, "Times New Roman", serif;

  /* ── Paleta: Svijetla islamska tema ── */
  --c-bg:        #f0f4f0;
  --c-surface:   #ffffff;
  --c-card:      #ffffff;
  --c-card2:     #f7faf7;
  --c-border:    #d4e4d4;
  --c-border2:   #b8d4b8;

  --c-green:     #96a78d;
  --c-green2:    #96a78d;
  --c-green-lt:  #e6f4ed;
  --c-green-md:  #b8dfc8;

  --c-gold:      #b07d1a;
  --c-gold2:     #d4970f;
  --c-gold-lt:   #fef3d0;
  --c-gold-bg:   #fffbeb;

  --c-red:       #c0392b;
  --c-red-lt:    #fdecea;

  --c-text:      #1a2e1a;
  --c-text2:     #2d4a2d;
  --c-muted:     #5a7a5a;
  --c-muted2:    #7a9a7a;

  --c-shadow:    rgba(26,122,74,.10);
  --c-shadow2:   rgba(26,122,74,.18);

  --c-r:  16px;
  --c-r2: 12px;
  --c-r3: 8px;

  font-family: var(--f-sans);
  color: var(--c-text);
}

/* ══ LAYOUT ══════════════════════════════════════════════════ */
.mi-kviz-container {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  min-height: 520px;
}

.mi-screen { display: none; animation: miSlideIn .35s cubic-bezier(.25,.8,.25,1); }
.mi-screen.active { display: block; }

@keyframes miSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ INTRO ═══════════════════════════════════════════════════ */
#mi-kviz-intro {
  background: var(--c-surface);
  border-radius: var(--c-r);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 24px var(--c-shadow);
  padding: 52px 40px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#mi-kviz-intro::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--c-green) 0%, var(--c-green2) 40%, var(--c-gold2) 70%, var(--c-gold) 100%);
}
#mi-kviz-intro::after {
  content: '';
  position: absolute; bottom: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 40px solid var(--c-green-lt);
  pointer-events: none;
}
.mi-intro-orb {
  position: absolute; top: -40px; left: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 30px solid var(--c-green-lt);
  pointer-events: none;
}
.mi-intro-content { position: relative; z-index: 1; }

.mi-logo-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--c-gold2);
  border-radius: 50px;
  padding: 6px 20px;
  margin-bottom: 22px;
  background: var(--c-gold-bg);
}
.mi-logo-arabic {
  font-family: var(--f-arabic);
  font-size: 20px; color: var(--c-gold);
  letter-spacing: 1px; font-style: italic;
}

.mi-intro-title {
  font-size: 38px; font-weight: 800; color: var(--c-text);
  margin: 0 0 6px; line-height: 1.1; letter-spacing: -1px;
}
.mi-intro-title span { color: var(--c-green); }
.mi-intro-sub { color: var(--c-muted); font-size: 14px; margin: 0 0 28px; font-weight: 500; }

.mi-rules-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px auto;
    max-width: 520px;
    width: 100%;
}

.mi-rule {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mi-rule:nth-child(3) {
    max-width: 100%;
    margin: 0;
}


.mi-rule {
  border: 1.5px solid var(--c-border);
  border-radius: var(--c-r2);
  padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 12px; color: var(--c-muted); font-weight: 500;
  width: 100%;
}
/* Treća kartica zauzima oba stupca — centrirana */

.mi-rule strong { color: var(--c-text2); }
.mi-rule-icon {
  font-size: 18px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; margin-bottom: 2px;
}
.mi-rule:nth-child(1) { border-color: var(--c-green-md); background: var(--c-green-lt); }
.mi-rule:nth-child(1) .mi-rule-icon { background: rgba(26,122,74,.12); }
.mi-rule:nth-child(2) { border-color: #f5c6c2; background: var(--c-red-lt); }
.mi-rule:nth-child(2) .mi-rule-icon { background: rgba(192,57,43,.1); }
.mi-rule:nth-child(3) { border-color: #f0d898; background: var(--c-gold-bg); }
.mi-rule:nth-child(3) .mi-rule-icon { background: rgba(176,125,26,.1); }

.mi-guest-form { margin-bottom: 20px; }
.mi-guest-form input {
  width: 100%; background: var(--c-card2);
  border: 1.5px solid var(--c-border); border-radius: var(--c-r2);
  color: var(--c-text); padding: 12px 16px; font-size: 14px;
  font-family: var(--f-sans); box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.mi-guest-form input::placeholder { color: var(--c-muted2); }
.mi-guest-form input:focus {
  outline: none; border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(26,122,74,.12); background: var(--c-surface);
}

/* ── Buttons ── */
.mi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--c-r2);
  font-size: 14px; font-weight: 600; font-family: var(--f-sans);
  cursor: pointer; border: none; text-decoration: none;
  transition: all .2s cubic-bezier(.25,.8,.25,1);
}
.mi-btn svg { width: 18px; height: 18px; fill: currentColor; }
.mi-btn-primary {
  background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green2) 100%);
  color: #fff; box-shadow: 0 3px 14px var(--c-shadow2);
}
.mi-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 22px var(--c-shadow2); color: #fff; text-decoration: none; }
.mi-btn-accent {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold2) 100%);
  color: #fff; font-weight: 700; box-shadow: 0 3px 14px rgba(176,125,26,.25);
}
.mi-btn-accent:hover { transform: translateY(-2px); color: #fff; }
.mi-btn-ghost {
  background: var(--c-surface); color: var(--c-muted);
  border: 1.5px solid var(--c-border2);
}
.mi-btn-ghost:hover { border-color: var(--c-green); color: var(--c-green); background: var(--c-green-lt); text-decoration: none; }
.mi-btn-lg { padding: 15px 38px; font-size: 16px; border-radius: var(--c-r); }

/* ══ LOADING ═════════════════════════════════════════════════ */
#mi-kviz-loading {
  background: var(--c-surface); border-radius: var(--c-r);
  border: 1px solid var(--c-border); box-shadow: 0 4px 24px var(--c-shadow);
  padding: 80px 40px; text-align: center;
}
.mi-spinner-wrap p { color: var(--c-muted); margin-top: 20px; font-size: 14px; font-weight: 500; }
.mi-spinner {
  width: 52px; height: 52px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-green); border-right-color: var(--c-green2);
  border-radius: 50%; animation: miSpin .75s linear infinite; margin: 0 auto;
}
@keyframes miSpin { to { transform: rotate(360deg); } }

/* ══ QUESTION ════════════════════════════════════════════════ */
#mi-kviz-question {
  background: var(--c-surface); border-radius: var(--c-r);
  border: 1px solid var(--c-border); box-shadow: 0 4px 24px var(--c-shadow);
  overflow: hidden;
}
.mi-quiz-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--c-green); gap: 16px;
}
.mi-progress-wrap { flex: 1; display: flex; align-items: center; gap: 10px; }
.mi-progress-bar {
  flex: 1; height: 7px; background: rgba(255,255,255,.25);
  border-radius: 4px; overflow: hidden;
}
#mi-progress-fill {
  height: 100%; background: linear-gradient(90deg, #fff 0%, var(--c-gold-lt) 100%);
  border-radius: 4px; width: 0%; transition: width .5s ease;
}
#mi-q-counter { color: rgba(255,255,255,.85); font-size: 12px; white-space: nowrap; font-weight: 600; }
.mi-score-timer { display: flex; gap: 8px; align-items: center; }
.mi-score-badge {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700;
}
.mi-timer-badge {
  background: var(--c-gold-bg); border: 1px solid var(--c-gold2);
  color: var(--c-gold); padding: 4px 12px; border-radius: 20px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.mi-question-card { padding: 28px 24px 18px; }
#mi-q-media { margin-bottom: 16px; }
#mi-q-media img {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: var(--c-r2); border: 1.5px solid var(--c-border);
}
#mi-q-media audio { width: 100%; }
#mi-q-text { font-size: 18px; font-weight: 600; color: var(--c-text); line-height: 1.55; margin: 0; }

.mi-answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 24px 24px; }
.mi-answer-btn {
  background: var(--c-card2); border: 1.5px solid var(--c-border);
  border-radius: var(--c-r2); padding: 14px 16px;
  color: var(--c-text2); font-size: 14px; font-family: var(--f-sans); font-weight: 500;
  cursor: pointer; text-align: left; transition: all .18s; line-height: 1.4; display: flex; align-items: flex-start; gap: 0;
}
.mi-answer-btn:hover:not(:disabled) {
  border-color: var(--c-green); background: var(--c-green-lt); color: var(--c-green);
  transform: translateY(-1px); box-shadow: 0 3px 12px var(--c-shadow);
}
.mi-answer-btn.correct { border-color: var(--c-green); background: var(--c-green-lt); color: var(--c-green); animation: miPop .3s ease; }
.mi-answer-btn.wrong   { border-color: var(--c-red); background: var(--c-red-lt); color: var(--c-red); }
.mi-answer-btn.reveal-correct { border-color: var(--c-green); background: var(--c-green-lt); color: var(--c-green); }
.mi-answer-btn:disabled { cursor: not-allowed; }

@keyframes miPop { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }

.mi-feedback {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; margin: 0 24px 20px; border-radius: var(--c-r2);
  font-size: 14px; font-weight: 600; animation: miSlideIn .25s ease;
}
.mi-feedback.hidden { display: none; }
.mi-feedback.correct-fb { background: var(--c-green-lt); color: var(--c-green); border: 1.5px solid var(--c-green-md); }
.mi-feedback.wrong-fb   { background: var(--c-red-lt);   color: var(--c-red);   border: 1.5px solid #f5c6c2; }
#mi-feedback-icon { font-size: 20px; }

/* ══ CHALLENGE ═══════════════════════════════════════════════ */
#mi-kviz-challenge {
  background: var(--c-surface); border-radius: var(--c-r);
  border: 2px solid var(--c-gold2);
  box-shadow: 0 4px 28px rgba(176,125,26,.15);
  padding: 36px 30px 28px; text-align: center;
  overflow: hidden; position: relative;
}
#mi-kviz-challenge::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold2) 50%, var(--c-green2) 100%);
}
#mi-kviz-challenge::after {
  content: '⭐'; position: absolute; top: 14px; right: 18px;
  font-size: 22px; opacity: .2;
}
.mi-challenge-header { margin-bottom: 22px; }
.mi-challenge-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold2) 100%);
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; padding: 5px 14px; border-radius: 20px;
  margin-bottom: 12px; text-transform: uppercase;
}
#mi-challenge-title { font-size: 21px; font-weight: 700; color: var(--c-text); margin: 0 0 6px; }
.mi-hint { color: var(--c-muted); font-size: 13px; margin: 0; font-style: italic; }

#mi-challenge-area { margin: 18px 0; min-height: 80px; }

.mi-word-bank, .mi-word-slots {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0;
}
.mi-word-chip {
  background: var(--c-surface); border: 1.5px solid var(--c-border2);
  border-radius: var(--c-r3); padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: var(--c-text2);
  cursor: pointer; transition: all .15s; user-select: none;
}
.mi-word-chip:hover { border-color: var(--c-gold2); background: var(--c-gold-bg); color: var(--c-gold); }
.mi-word-chip.placed { background: var(--c-gold-bg); border-color: var(--c-gold2); color: var(--c-gold); }
.mi-slots-label { color: var(--c-muted); font-size: 12px; margin: 8px 0 4px; }

.mi-memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mi-memory-card {
  background: var(--c-card2); border: 1.5px solid var(--c-border);
  border-radius: var(--c-r3); padding: 10px 6px;
  font-size: 12px; font-weight: 600; color: var(--c-text2);
  cursor: pointer; text-align: center; transition: all .2s;
  min-height: 52px; display: flex; align-items: center; justify-content: center;
}
.mi-memory-card:hover  { border-color: var(--c-green); background: var(--c-green-lt); }
.mi-memory-card.flipped { border-color: var(--c-green); background: var(--c-green-lt); color: var(--c-green); }
.mi-memory-card.matched { border-color: var(--c-gold2); background: var(--c-gold-bg); color: var(--c-gold); cursor: default; }

.mi-ch-input {
  width: 100%; background: var(--c-card2);
  border: 2px solid var(--c-border); border-radius: var(--c-r2);
  color: var(--c-text); font-size: 18px; font-family: var(--f-sans); font-weight: 700;
  padding: 14px; text-align: center; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s; letter-spacing: 2px;
}
.mi-ch-input:focus {
  outline: none; border-color: var(--c-gold2);
  box-shadow: 0 0 0 3px rgba(212,151,15,.15); background: var(--c-surface);
}

.mi-seq-display { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.mi-seq-num {
  background: var(--c-card2); border: 1.5px solid var(--c-border);
  border-radius: var(--c-r3); padding: 10px 14px;
  font-size: 16px; font-weight: 700; color: var(--c-text);
}
.mi-seq-num.unknown { border-color: var(--c-gold2); background: var(--c-gold-bg); color: var(--c-gold); }
.mi-seq-options { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mi-seq-opt {
  background: var(--c-card2); border: 1.5px solid var(--c-border2);
  border-radius: var(--c-r3); padding: 10px 20px;
  font-size: 15px; font-weight: 600; color: var(--c-text2);
  cursor: pointer; transition: all .15s; font-family: var(--f-sans);
}
.mi-seq-opt:hover  { border-color: var(--c-gold2); background: var(--c-gold-bg); color: var(--c-gold); }
.mi-seq-opt.selected { border-color: var(--c-gold2); background: var(--c-gold-bg); color: var(--c-gold); }

.mi-tile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; max-width: 240px; margin: 0 auto 14px;
}
.mi-tile {
  background: var(--c-card2); border: 1.5px solid var(--c-border);
  border-radius: var(--c-r3); height: 78px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer; transition: all .15s; user-select: none;
  box-shadow: 0 1px 4px var(--c-shadow);
}
.mi-tile:hover { border-color: var(--c-green); background: var(--c-green-lt); }
.mi-tile.empty { background: var(--c-bg); border-style: dashed; border-color: var(--c-border2); box-shadow: none; }
.mi-tile.solved-tile { background: var(--c-green-lt); border-color: var(--c-green); }

#mi-kviz-challenge .mi-btn { margin: 6px 4px 0; }

#mi-challenge-result {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--c-r2);
  font-size: 14px; font-weight: 600; margin: 10px 0 4px;
}
#mi-challenge-result.correct-fb { background: var(--c-green-lt); color: var(--c-green); border: 1.5px solid var(--c-green-md); }
#mi-challenge-result.wrong-fb   { background: var(--c-red-lt);   color: var(--c-red);   border: 1.5px solid #f5c6c2; }

#mi-challenge-stats {
  border-top: 1px solid var(--c-border);
  padding-top: 10px;
  margin-top: 6px !important;
}

/* ══ RESULT ══════════════════════════════════════════════════ */
#mi-kviz-result {
  background: var(--c-surface); border-radius: var(--c-r);
  border: 1px solid var(--c-border); box-shadow: 0 4px 28px var(--c-shadow);
  overflow: hidden; text-align: center; position: relative; padding: 52px 36px 44px;
}
#mi-kviz-result::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--c-green) 0%, var(--c-green2) 35%, var(--c-gold2) 65%, var(--c-gold) 100%);
}
.mi-result-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(26,122,74,.07) 0%, transparent 55%),
              radial-gradient(ellipse at 90% 100%, rgba(176,125,26,.06) 0%, transparent 45%);
  pointer-events: none;
}
.mi-result-content { position: relative; z-index: 1; }
.mi-result-medal {
  font-size: 70px; line-height: 1; margin-bottom: 10px; display: block;
  animation: miBounce .55s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes miBounce {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
#mi-kviz-result h2 { font-size: 26px; font-weight: 800; color: var(--c-text); margin: 0 0 26px; }
.mi-result-stats { display: flex; justify-content: center; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.mi-stat-box {
  background: var(--c-card2); border: 1.5px solid var(--c-border);
  border-radius: var(--c-r); padding: 18px 26px; min-width: 105px;
}
.mi-stat-value { display: block; font-size: 30px; font-weight: 800; color: var(--c-green); line-height: 1; }
.mi-stat-label { display: block; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 5px; font-weight: 600; }
.mi-register-hint {
  color: var(--c-muted); font-size: 13px; margin-bottom: 20px;
  background: var(--c-gold-bg); border: 1px solid #f0d898;
  border-radius: var(--c-r3); padding: 10px 16px; display: inline-block;
}
.mi-register-hint a { color: var(--c-gold); text-decoration: none; font-weight: 700; }
.mi-register-hint a:hover { text-decoration: underline; }

/* ══ LEADERBOARD ═════════════════════════════════════════════ */
.mi-leaderboard-wrap { max-width: 760px; margin: 0 auto; }
.mi-lb-header { margin-bottom: 20px; }
.mi-lb-title { font-size: 22px; font-weight: 600; color: var(--c-text); margin: 0; display: flex; align-items: center; gap: 10px; }
.mi-arabic-accent { font-family: var(--f-arabic); font-size: 24px; color: var(--c-gold); font-style: italic; }

.mi-lb-table-wrap {
  background: var(--c-surface); border: 1.5px solid var(--c-border);
  border-radius: var(--c-r); overflow: hidden; box-shadow: 0 2px 16px var(--c-shadow);
}
.mi-lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mi-lb-table thead tr { background: var(--c-green); }
.mi-lb-table th {
  color: rgba(255,255,255,.92); text-transform: uppercase;
  font-size: 11px; letter-spacing: .6px; font-weight: 500; padding: 12px 16px; text-align: left;
}
.mi-lb-table td { padding: 13px 16px; border-bottom: 1px solid var(--c-border); color: var(--c-text2); vertical-align: middle; }
.mi-lb-table tr:last-child td { border-bottom: none; }
.mi-lb-table tbody tr:hover td { background: var(--c-green-lt); }
.mi-top-1 td { background: linear-gradient(90deg, #fffbeb 0%, #fff 100%) !important; }
.mi-top-2 td { background: linear-gradient(90deg, #f5f5f5 0%, #fff 100%) !important; }
.mi-top-3 td { background: linear-gradient(90deg, #fff2e8 0%, #fff 100%) !important; }
.mi-top-1:hover td, .mi-top-2:hover td, .mi-top-3:hover td { background: var(--c-green-lt) !important; }

.mi-rank { font-size: 15px; width: 30px; }
.mi-player { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.mi-avatar { border-radius: 50%; vertical-align: middle; border: 2px solid var(--c-border); }
.mi-avatar-guest {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-card2); border: 1.5px solid var(--c-border); border-radius: 50%; font-size: 15px; flex-shrink: 0;
}
.mi-member-badge { background: var(--c-green-lt); color: var(--c-green); font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700; border: 1px solid var(--c-green-md); }
.mi-guest-badge  { background: #f1f5f1; color: var(--c-muted); font-size: 10px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--c-border); font-weight: 600; }
.mi-score-cell { color: var(--c-green); font-size: 10px; font-weight: 200; }
.mi-empty { text-align: center; color: var(--c-muted2); padding: 40px; font-style: italic; }

.mi-lb-pagination { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.mi-page-btn {
  padding: 7px 13px; border-radius: var(--c-r3);
  border: 1.5px solid var(--c-border2); background: var(--c-surface);
  color: var(--c-muted); cursor: pointer; font-family: var(--f-sans); font-size: 13px; font-weight: 600; transition: all .15s;
}
.mi-page-btn:hover  { border-color: var(--c-green); color: var(--c-green); background: var(--c-green-lt); }
.mi-page-btn.active { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.mi-page-prev, .mi-page-next { padding: 7px 16px; font-weight: 600; min-width: 110px; }
.mi-page-dots { padding: 7px 6px; color: var(--c-muted); font-size: 13px; align-self: center; }
.mi-page-prev:disabled, .mi-page-next:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ══ LAST PLAYERS ════════════════════════════════════════════ */
.mi-last-players-wrap {
  background: var(--c-surface); border: 1.5px solid var(--c-border);
  border-radius: var(--c-r); padding: 20px; box-shadow: 0 2px 12px var(--c-shadow);
}
.mi-lp-title { font-size: 15px; font-weight: 700; color: var(--c-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--c-border); }
.mi-lp-list { list-style: none; margin: 0; padding: 0; }
.mi-lp-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--c-border); }
.mi-lp-item:last-child { border-bottom: none; }
.mi-lp-avatar { border-radius: 50%; width: 38px; height: 38px; flex-shrink: 0; border: 2px solid var(--c-border); }
.mi-lp-avatar-guest {
  width: 38px; height: 38px; background: var(--c-card2); border: 1.5px solid var(--c-border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.mi-lp-info { flex: 1; }
.mi-lp-info strong { display: block; font-size: 13px; color: var(--c-text); font-weight: 600; }
.mi-lp-info span   { font-size: 11px; color: var(--c-muted); font-weight: 500; }
.mi-lp-time { font-size: 11px; color: var(--c-muted2); white-space: nowrap; }

/* ══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 560px) {
  #mi-kviz-intro    { padding: 36px 20px 30px; }
  .mi-rules-grid    { grid-template-columns: 1fr; gap: 8px; }
  .mi-rule:nth-child(3) { grid-column: auto; max-width: 100%; }
  .mi-answers-grid  { grid-template-columns: 1fr; padding: 0 16px 20px; }
  .mi-question-card { padding: 20px 16px 12px; }
  .mi-feedback      { margin: 0 16px 16px; }
  .mi-result-stats  { gap: 10px; }
  .mi-stat-box      { min-width: 85px; padding: 14px 16px; }
  .mi-stat-value    { font-size: 24px; }
  #mi-q-text        { font-size: 16px; }
  .mi-intro-title   { font-size: 28px; }
  .mi-memory-grid   { grid-template-columns: repeat(4, 1fr); }
  #mi-kviz-challenge { padding: 28px 18px 22px; }
  .mi-lb-table th, .mi-lb-table td { padding: 10px 10px; font-size: 12px; }
	.mi-quiz-header { flex-wrap: wrap; gap: 8px; }
.mi-progress-wrap { width: 100%; flex: none; order: 2; }
.mi-score-timer { order: 1; margin-left: auto; }
#mi-q-counter { font-size: 11px; }
}
/* ── Audio MCQ opcije ────────────────────────────────────────────── */
.mi-opt-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 10px;
    background: var(--c-surface, #f8faf8);
    border: 1.5px solid var(--c-border2, #d0e8d0);
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text, #1a2e1a);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s, background .18s, transform .12s, box-shadow .18s;
    position: relative;
    overflow: hidden;
}
.mi-opt-btn::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-border2, #d0e8d0);
    transition: background .18s;
}
.mi-opt-btn:hover {
    border-color: var(--c-green, #1a7a4a);
    background: var(--c-green-light, #edf7f1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,122,74,.12);
}
.mi-opt-btn.selected {
    border-color: var(--c-green, #1a7a4a);
    background: var(--c-green-light, #edf7f1);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(26,122,74,.18);
}
.mi-opt-btn.selected::before {
    background: var(--c-green, #1a7a4a);
    box-shadow: 0 0 0 3px rgba(26,122,74,.2);
}
.mi-opt-btn.correct-ans {
    border-color: var(--c-green, #1a7a4a) !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
}
.mi-opt-btn.wrong-ans {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

/* ── Neaktivni igrači u rang listi ─────────────────────────── */
.mi-lb-inactive { opacity: 0.55; }
.mi-lb-inactive .mi-player a { color: var(--c-muted, #5a7a5a) !important; }
.mi-lb-inactive-sep td { letter-spacing: .3px; }