/* QuizMaster Live — shared design tokens. All selectors are namespaced with .qml- */
.qml-player-app,
.qml-host-app,
.qml-admin-wrap {
	--qml-primary: #5B3DF5;
	--qml-primary-dark: #3F27B8;
	--qml-secondary: #00C2A8;
	--qml-accent: #FF6B4A;
	--qml-warn: #FFB703;
	--qml-danger: #EF476F;
	--qml-success: #2FBF71;
	--qml-bg: #150E2E;
	--qml-bg-light: #221749;
	--qml-surface: #2C1F5C;
	--qml-text: #F5F3FF;
	--qml-text-dim: #C6BCE8;
	--qml-radius: 16px;
	--qml-radius-sm: 10px;
	--qml-shadow: 0 10px 30px rgba(15, 8, 41, 0.35);
	--qml-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--qml-ans-a: #E4572E; /* red-orange triangle */
	--qml-ans-b: #2E86AB; /* blue diamond */
	--qml-ans-c: #F2B705; /* yellow circle */
	--qml-ans-d: #4C9F70; /* green square */
	--qml-ans-e: #9B5DE5;
	--qml-ans-f: #EF476F;

	font-family: var(--qml-font);
	box-sizing: border-box;
}
.qml-player-app *, .qml-host-app *, .qml-admin-wrap * { box-sizing: inherit; }

.qml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: var(--qml-radius-sm);
	padding: 12px 22px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
	background: var(--qml-primary);
	color: #fff;
	box-shadow: 0 4px 0 var(--qml-primary-dark);
}
.qml-btn:hover { filter: brightness(1.06); }
.qml-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qml-primary-dark); }
.qml-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.qml-btn.qml-btn-secondary { background: var(--qml-secondary); box-shadow: 0 4px 0 #009684; }
.qml-btn.qml-btn-accent { background: var(--qml-accent); box-shadow: 0 4px 0 #c94a2e; }
.qml-btn.qml-btn-danger { background: var(--qml-danger); box-shadow: 0 4px 0 #b23252; }
.qml-btn.qml-btn-ghost { background: transparent; color: var(--qml-text); box-shadow: none; border: 2px solid rgba(255,255,255,.25); }
.qml-btn.qml-btn-block { width: 100%; }
.qml-btn.qml-btn-lg { padding: 18px 28px; font-size: 20px; }

.qml-input, .qml-select, .qml-textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--qml-radius-sm);
	border: 2px solid rgba(255,255,255,.15);
	background: rgba(255,255,255,.06);
	color: var(--qml-text);
	font-size: 16px;
	font-family: inherit;
}
.qml-input::placeholder { color: var(--qml-text-dim); }
.qml-input:focus, .qml-select:focus, .qml-textarea:focus { outline: none; border-color: var(--qml-secondary); }

.qml-spinner {
	width: 46px; height: 46px; border-radius: 50%;
	border: 5px solid rgba(255,255,255,.2);
	border-top-color: var(--qml-secondary);
	animation: qml-spin 0.8s linear infinite;
}
@keyframes qml-spin { to { transform: rotate(360deg); } }

.qml-notice {
	padding: 12px 16px;
	border-radius: var(--qml-radius-sm);
	background: rgba(239,71,111,.15);
	color: #ffd0dd;
	border: 1px solid rgba(239,71,111,.4);
	font-weight: 600;
}
.qml-notice.qml-notice-success { background: rgba(47,191,113,.15); color: #cdf7de; border-color: rgba(47,191,113,.4); }

.qml-fade-in { animation: qml-fadein .25s ease both; }
@keyframes qml-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.qml-pop { animation: qml-pop .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes qml-pop { 0% { transform: scale(.7); opacity:0; } 100% { transform: scale(1); opacity:1; } }

:root{--qml-red:#d71920;--qml-red-dark:#a90f15;--qml-white:#fff}
.qml-btn{background:var(--qml-red)!important;border-color:var(--qml-red)!important}.qml-btn:hover{background:var(--qml-red-dark)!important}
.qml-answer-btn{min-height:120px}.qml-option-image{display:block;max-width:140px;max-height:90px;object-fit:contain;margin:8px auto;border-radius:8px}
.qml-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:18px auto}.qml-match-grid>div{display:grid;gap:10px}.qml-match-left,.qml-match-right{padding:14px;border:2px solid #ddd;border-radius:10px;background:#fff;font-size:16px;cursor:pointer}.qml-match-left.qml-selected,.qml-match-right.qml-selected{border-color:var(--qml-red);background:#fff0f1}.qml-match-left.qml-matched{border-color:#2e9b58}.qml-interactive-map{height:420px;border-radius:14px;overflow:hidden;border:2px solid #ddd;margin:12px 0}.qml-map-picked{text-align:center;margin:8px 0;font-weight:600}.qml-pair-row{display:flex;gap:8px;align-items:center;margin:8px 0}.qml-pair-row .qml-input{flex:1}

/* QuizMaster Live 2.1 — Slovenský Červený kríž inspired, accessible red/white theme. */
.qml-player-app,.qml-host-app,.qml-admin-wrap{--qml-primary:#d71920;--qml-primary-dark:#a80f15;--qml-secondary:#b51218;--qml-accent:#8f0e13;--qml-warn:#fff3cd;--qml-danger:#b51218;--qml-success:#176b3a;--qml-bg:#ffffff;--qml-bg-light:#f7f7f7;--qml-surface:#ffffff;--qml-text:#1b1b1b;--qml-text-dim:#555555;--qml-shadow:0 8px 24px rgba(0,0,0,.12);--qml-ans-a:#d71920;--qml-ans-b:#b51218;--qml-ans-c:#8f0e13;--qml-ans-d:#e11d25;--qml-ans-e:#c4141b;--qml-ans-f:#9f1016;}
.qml-player-app,.qml-host-app{background:#fff!important;color:#1b1b1b!important;border:1px solid #e5e5e5;}
.qml-btn,.qml-btn.qml-btn-secondary,.qml-btn.qml-btn-accent{background:var(--qml-red,#d71920)!important;color:#fff!important;box-shadow:0 4px 0 var(--qml-red-dark,#a80f15)!important;}
.qml-btn-ghost{color:#1b1b1b!important;border-color:#ccc!important;background:#fff!important;}
.qml-notice{background:#fff1f1!important;color:#7a0b10!important;border-color:#d71920!important;}
.qml-notice.qml-notice-success{background:#f1f8f3!important;color:#14552f!important;border-color:#176b3a!important;}
.qml-input,.qml-select,.qml-textarea{background:#fff!important;color:#1b1b1b!important;border-color:#cfcfcf!important;}
.qml-input::placeholder{color:#777!important;}
.qml-match-board{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:18px auto;align-items:start;}
.qml-match-column{display:grid;gap:10px;}
.qml-match-left,.qml-match-right{min-height:64px;padding:14px 16px;border:2px solid #d9d9d9;border-radius:12px;background:#fff;color:#1b1b1b;font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;text-align:left;}
.qml-match-right{cursor:grab;touch-action:none;user-select:none;border-color:#d71920;}
.qml-match-right:active{cursor:grabbing;}
.qml-match-right.qml-dragging{opacity:.55;transform:scale(.98);box-shadow:0 8px 20px rgba(0,0,0,.16);}
.qml-match-index{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:50%;background:#d71920;color:#fff;font-weight:900;}
.qml-drag-handle{font-size:22px;color:#d71920;line-height:1;}
.qml-match-status{margin:12px auto;text-align:center;font-weight:800;color:#7a0b10;}
.qml-slider-wrap{width:100%;margin:26px 0 18px;}
.qml-slider-value{font-size:42px!important;font-weight:900!important;color:#d71920!important;}
.qml-slider-wrap input[type=range]{width:100%;height:42px;cursor:pointer;accent-color:#d71920;touch-action:pan-y;}
.qml-slider-scale{display:flex;justify-content:space-between;color:#444;font-size:14px;font-weight:700;margin-top:4px;}
.qml-fullscreen-btn{background:#fff!important;color:#d71920!important;border:2px solid #d71920!important;box-shadow:none!important;}
.qml-host-app:fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0;padding:32px;overflow:auto;background:#fff!important;}
.qml-host-app:-webkit-full-screen{width:100vw;height:100vh;max-width:none;border-radius:0;padding:32px;overflow:auto;background:#fff!important;}
@media (max-width:700px){.qml-match-board{grid-template-columns:1fr;}.qml-match-left-column{order:1}.qml-match-right-column{order:2}.qml-match-right{min-height:58px}.qml-host-app:fullscreen{padding:14px;}}

/* QuizMaster Live 2.1.1 — robust custom number slider (Divi/theme independent). */
.qml-slider-control{position:relative;width:100%;height:52px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none;}
.qml-slider-track{position:relative;width:100%;height:12px;background:#e7e7e7;border:2px solid #cfcfcf;border-radius:999px;}
.qml-slider-fill{position:absolute;left:0;top:0;height:100%;width:50%;background:#d71920;border-radius:999px;}
.qml-slider-thumb{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;background:#fff;border:4px solid #d71920;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.qml-slider-control:focus-visible .qml-slider-thumb{outline:3px solid #111;outline-offset:3px;}
.qml-slider-control:active .qml-slider-thumb{transform:scale(1.08);}


.qml-question-stats { margin: 18px auto; padding: 12px 16px; max-width: 760px; text-align: center; background: #fff; border: 1px solid #ead2d2; border-radius: 12px; }
.qml-inline-leaderboard { margin: 18px auto; max-width: 760px; background: #fff; border: 1px solid #ead2d2; border-radius: 12px; padding: 16px 20px; }
.qml-inline-leaderboard h2 { margin: 0 0 10px; }
.qml-inline-leaderboard ol { margin: 0; padding: 0; list-style: none; }
.qml-inline-leaderboard li { display:flex; justify-content:space-between; gap:16px; padding: 8px 4px; border-bottom:1px solid #f0e5e5; }
.qml-inline-leaderboard li:last-child { border-bottom:0; }
.qml-inline-leaderboard li.qml-me { font-weight:700; }
.qml-qr-image { display:block; width:320px; max-width:80vw; height:auto; margin:0 auto; image-rendering:auto; background:#fff; padding:8px; border-radius:8px; }


/* v2.2.0: optional quiz sections / themed rounds */
.qml-section-themed {
  background: var(--qml-section-color, #f3f4f6) !important;
  transition: background .25s ease;
}
.qml-section-themed-inner {
  background: var(--qml-section-color, #f3f4f6);
  border-radius: 18px;
  padding: 18px;
  box-sizing: border-box;
}
.qml-section-badge {
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  margin:0 0 14px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#1b1b1b;
  font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.qml-section-badge img {
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:7px;
}
.qml-section-result {
  margin:20px auto 0;
  max-width:520px;
  padding:18px;
  background:rgba(255,255,255,.92);
  border-radius:16px;
  text-align:center;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
}
.qml-section-result h2 { margin:0 0 8px; }
.qml-section-percent {
  font-size:48px;
  line-height:1;
  font-weight:900;
  margin:8px 0;
}
.qml-section-history {
  display:grid;
  gap:8px;
  margin-top:14px;
  text-align:left;
}
.qml-section-history > div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 12px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  border-radius:9px;
}
.qml-final-sections {
  margin:22px auto;
  max-width:900px;
}
.qml-final-sections h2 { text-align:center; }
.qml-final-section-table { overflow-x:auto; }
.qml-final-section-row {
  display:grid;
  grid-template-columns: minmax(120px,1.5fr) repeat(auto-fit,minmax(90px,1fr));
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border-bottom:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.7);
}
.qml-final-section-head { font-weight:800; background:rgba(255,255,255,.9); }
.qml-section-editor {
  margin:18px 0;
  padding:16px;
  border:1px solid #dcdcde;
  border-radius:10px;
  background:#f8f9fa;
}
.qml-section-editor h3 { margin-top:0; }

/* v2.5.1: section identity during play */
.qml-section-badge.qml-section-icon-only {
  width: 48px; height: 48px;
  margin: 0 0 14px;
  padding: 6px;
  border-radius: 13px;
  justify-content: center;
}
.qml-section-badge.qml-section-icon-only img { width: 36px; height: 36px; border-radius: 8px; }
.qml-section-fallback {
  width:36px; height:36px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#d71920; color:#fff; font-weight:900; font-size:18px;
}
.qml-section-name-visually-hidden {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.qml-section-result-heading {
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:8px;
}
.qml-section-result-heading h2 { margin:0 !important; }
.qml-section-result-icon {
  width:64px; height:64px; flex:0 0 64px;
  object-fit:contain; border-radius:14px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.qml-section-result-fallback { font-size:28px; }
.qml-section-result-subtitle { margin-top:3px; color:#666; font-size:13px; font-weight:600; }

/* v2.5.1: paper-like drag/drop for matching pairs. The dragged card lifts
   from the surface while the surrounding cards use FLIP transitions. */
.qml-match-right {
  position:relative;
  transform-origin:50% 15%;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
  will-change:transform;
}
.qml-match-right.qml-dragging {
  z-index:20;
  opacity:1;
  transform:translateY(-10px) rotate(-1.5deg) scale(1.035) !important;
  box-shadow:0 18px 28px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.10);
  border-color:#b51218 !important;
  cursor:grabbing;
}
.qml-match-right.qml-drop-settle {
  animation:qml-paper-settle .28s cubic-bezier(.2,.85,.25,1);
}
@keyframes qml-paper-settle {
  0% { transform:translateY(-9px) rotate(-1.2deg) scale(1.025); box-shadow:0 15px 24px rgba(0,0,0,.16); }
  55% { transform:translateY(1px) rotate(.25deg) scale(1.005); box-shadow:0 7px 13px rgba(0,0,0,.10); }
  100% { transform:none; box-shadow:0 2px 8px rgba(0,0,0,.06); }
}
.qml-match-right.qml-flip-move {
  transition:transform .24s cubic-bezier(.22,.75,.25,1);
}
@media(prefers-reduced-motion:reduce){
  .qml-match-right.qml-flip-move, .qml-match-right.qml-drop-settle { transition:none; animation:none; }
}

/* v2.5.5: always show section icon and name together */
.qml-section-badge-visible {
  width: auto !important;
  height: auto !important;
  min-height: 48px;
  margin: 0 0 14px !important;
  padding: 6px 14px 6px 8px !important;
  justify-content: flex-start !important;
  box-sizing: border-box;
}
.qml-section-badge-visible .qml-section-title {
  display: inline-block;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  white-space: normal;
}
.qml-section-badge-visible .qml-section-fallback { flex: 0 0 36px; }

/* Keep the text side vertically centered against the corresponding left card. */
.qml-match-board { align-items: start; }
.qml-match-column { min-width: 0; }
.qml-match-right { align-self: start; box-sizing: border-box; justify-content: center; }
.qml-match-right .qml-match-content { width: 100%; display: flex; align-items: center; justify-content: flex-start; }
@media (max-width:700px) {
  .qml-section-badge-visible .qml-section-title { font-size: 14px; }
}


/* v2.6.5: section identity is an icon/name, not a full-width rounded badge. */
.qml-section-badge-visible {
  width:max-content !important;
  max-width:100% !important;
  min-height:36px !important;
  margin:0 0 14px !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.qml-section-badge-visible img,
.qml-section-badge-visible .qml-section-fallback {
  width:36px !important; height:36px !important; flex:0 0 36px !important;
  border-radius:7px !important;
}

.qml-section-history-name{display:flex;align-items:center;gap:8px;min-width:0;}
.qml-section-history-icon,.qml-section-history-fallback{width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:6px;}
.qml-section-history-fallback{display:inline-flex;align-items:center;justify-content:center;background:#d71920;color:#fff;font-weight:900;font-size:14px;}