/* Quiz infernal — écrans du jeu, statistiques, classements, formulaires.
   Les couleurs viennent du thème (variables --qi-*) ; valeurs de secours ici. */
:root {
	--qi-bg: #110428;
	--qi-surface: #1c0a45;
	--qi-surface-2: #27115c;
	--qi-line: #3a2277;
	--qi-ink: #fff8e8;
	--qi-muted: #beb3dc;
	--qi-fire: #ff4343;
	--qi-ember: #fdd018;
	--qi-neon: #087dff;
	--qi-cyan: #07cece;
	--qi-good: #2bd47d;
	--qi-bad: #ff4d5e;
	--qi-radius: 18px;
	--qi-display: "Bungee", "Atkinson Hyperlegible", system-ui, sans-serif;
	--qi-body: "Atkinson Hyperlegible", system-ui, sans-serif;
	/* Graphiques (validés pour fond sombre). */
	--viz-1: #d95926;
	--viz-2: #3987e5;
	--viz-good: #0ca30c;
	--viz-bad: #d03b3b;
	--viz-grid: rgba(255, 243, 228, .09);
	--viz-axis: #a893b3;
	--viz-empty: rgba(255, 243, 228, .04);
}

.qi-app { font-family: var(--qi-body); color: var(--qi-ink); }
.qi-app *, .qi-dialog * { box-sizing: border-box; }
.qi-app button, .qi-app input, .qi-app select, .qi-app textarea, .qi-dialog button, .qi-dialog textarea { font-family: inherit; }
.qi-muted { color: var(--qi-muted); }
.qi-small { font-size: .85rem; }
.qi-loading { padding: 3rem 1rem; text-align: center; color: var(--qi-muted); animation: qi-pulse 1.2s ease-in-out infinite; }
.qi-error { color: var(--qi-bad); font-weight: 700; }
.qi-empty { padding: 2rem; text-align: center; color: var(--qi-muted); }
@keyframes qi-pulse { 50% { opacity: .45; } }

/* ---------- Boutons ---------- */
.qi-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	min-height: 48px; padding: .7em 1.4em; border-radius: 999px; border: 2px solid transparent;
	font: 700 1rem/1 var(--qi-body); cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, box-shadow .15s;
}
.qi-btn:active { transform: scale(.97); }
.qi-btn-go { background: linear-gradient(135deg, var(--qi-fire), #ff7a3d); color: #fff; box-shadow: 0 6px 24px -6px rgba(255, 70, 60, .6); }
.qi-btn-go:hover { box-shadow: 0 8px 30px -4px rgba(255, 70, 60, .8); color: #fff; }
.qi-btn-ghost { background: transparent; border-color: var(--qi-line); color: var(--qi-ink); }
.qi-btn-ghost:hover { border-color: var(--qi-ember); color: var(--qi-ink); }
.qi-btn:disabled { opacity: .5; cursor: default; }
.qi-btn:focus-visible, .qi-choice:focus-visible, .qi-chip:focus-visible, .qi-mode:focus-visible, .qi-level:focus-visible { outline: 3px solid var(--qi-ember); outline-offset: 3px; }
.qi-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.25rem; }

/* ---------- Choix du mode ---------- */
.qi-play { max-width: 980px; margin: 0 auto; }
.qi-setup-block { margin: 0 0 2rem; }
.qi-setup-block h2 { font: 400 1.35rem/1.2 var(--qi-display); letter-spacing: .02em; margin: 0 0 .9rem; }
.qi-setup-block h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--qi-muted); margin: 1.2rem 0 .6rem; }
.qi-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; }
.qi-mode {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: left;
	padding: 1.1rem 1.1rem 1.2rem; border-radius: var(--qi-radius); border: 2px solid var(--qi-line); background: var(--qi-surface);
	color: var(--qi-ink); cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
}
.qi-mode:hover { transform: translateY(-2px); border-color: var(--qi-ember); }
.qi-mode.on { border-color: var(--qi-fire); background: linear-gradient(160deg, rgba(255, 90, 31, .22), rgba(255, 61, 139, .12)); box-shadow: 0 0 0 1px var(--qi-fire) inset; }
.qi-mode.locked { opacity: .75; }
.qi-mode-icon { font-size: 2rem; line-height: 1; }
.qi-mode-name { font: 400 1.15rem/1.1 var(--qi-display); }
.qi-mode-desc { font-size: .92rem; color: var(--qi-muted); }
.qi-mode-competitive.on { border-color: var(--qi-ember); background: linear-gradient(160deg, rgba(255, 176, 58, .22), rgba(255, 90, 31, .12)); }

.qi-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.qi-chips-help { display: block; margin: -.3rem 0 .6rem; }
.qi-chip {
	min-height: 40px; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid var(--qi-line); background: var(--qi-surface);
	color: var(--qi-ink); font: 600 .95rem/1 var(--qi-body); cursor: pointer;
}
.qi-chip:hover { border-color: var(--qi-ember); }
.qi-chip.on { background: var(--qi-fire); border-color: var(--qi-fire); color: #fff; }
.qi-chip:disabled { opacity: .35; cursor: default; }
.qi-setup-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
.qi-levels { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.qi-level { min-height: 40px; padding: .45rem .85rem; border-radius: 10px; border: 1.5px solid var(--qi-line); background: var(--qi-surface); color: var(--qi-ink); font: 600 .9rem/1 var(--qi-body); cursor: pointer; }
.qi-level.on { border-color: var(--qi-ember); background: var(--qi-surface-2); box-shadow: 0 0 0 1px var(--qi-ember) inset; }
.qi-level:disabled { opacity: .35; }
.qi-region { display: flex; flex-direction: column; gap: .45rem; }
.qi-region label { font: 400 1.05rem/1.2 var(--qi-display); }
.qi-region small { color: var(--qi-muted); }
.qi-select, .qi-input, .qi-dialog textarea {
	width: 100%; min-height: 46px; padding: .6rem .8rem; border-radius: 12px; border: 1.5px solid var(--qi-line);
	background: var(--qi-surface); color: var(--qi-ink); font: 1rem/1.3 var(--qi-body);
}
.qi-select:focus, .qi-input:focus, .qi-dialog textarea:focus { outline: none; border-color: var(--qi-ember); }
.qi-setup-go { text-align: center; }
.qi-setup-go .qi-btn-go { font-size: 1.2rem; min-height: 60px; padding: 0 2.4rem; }

/* ---------- Partie ---------- */
.qi-hud { margin-bottom: 1rem; }
.qi-hud-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; font-weight: 700; }
.qi-progress-text { margin-right: auto; color: var(--qi-muted); }
.qi-score { color: var(--qi-ember); }
.qi-streak.hot { color: var(--qi-fire); animation: qi-flicker .6s ease-in-out infinite alternate; }
@keyframes qi-flicker { to { text-shadow: 0 0 12px rgba(255, 90, 31, .9); } }
.qi-lives span { font-size: 1.15rem; }
.qi-bar { height: 6px; border-radius: 3px; background: var(--qi-surface-2); margin-top: .6rem; overflow: hidden; }
.qi-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--qi-fire), var(--qi-ember)); transition: width .4s; }

.qi-card {
	position: relative; padding: clamp(1.1rem, 4vw, 2.2rem); border-radius: calc(var(--qi-radius) + 6px);
	background: radial-gradient(120% 90% at 50% 0%, var(--qi-surface-2), var(--qi-surface)); border: 1.5px solid var(--qi-line);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.qi-card.is-right { border-color: var(--qi-good); }
.qi-card.is-wrong { border-color: var(--qi-bad); animation: qi-shake .35s; }
@keyframes qi-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.qi-q-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; font-size: .9rem; }
.qi-cat { color: var(--qi-muted); font-weight: 700; }
.qi-lvl { display: inline-block; padding: .2em .65em; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .03em; }
.qi-lvl-1 { background: rgba(43, 212, 125, .16); color: #7ff0b3; }
.qi-lvl-2 { background: rgba(255, 214, 58, .15); color: #ffe07a; }
.qi-lvl-3 { background: rgba(255, 140, 50, .18); color: #ffb37a; }
.qi-lvl-4 { background: rgba(255, 61, 139, .18); color: #ff8fbd; }
.qi-lvl-5 { background: linear-gradient(90deg, #ff3b1f, #b3001e); color: #fff; box-shadow: 0 0 14px rgba(255, 59, 31, .55); }
.qi-q-img { margin: 0 0 1.2rem; text-align: center; }
.qi-q-img img { display: inline-block; max-width: 100%; max-height: 280px; width: auto; border-radius: 12px; background: rgba(255, 248, 232, .06); }
.qi-q-img img[src$=".svg"] { padding: .6rem; min-width: 200px; }
.qi-q-img figcaption { margin-top: .35rem; font-size: .75rem; color: var(--qi-muted); }
.qi-comp-stage { gap: 1rem; }
.qi-question { font: 700 clamp(1.3rem, 3.4vw, 2rem)/1.3 var(--qi-body); margin: 0 0 1.5rem; text-wrap: balance; }
.qi-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.qi-choices-tf { grid-template-columns: 1fr 1fr; }
.qi-choice {
	display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .8rem 1rem; text-align: left;
	border-radius: 14px; border: 2px solid var(--qi-line); background: rgba(255, 243, 228, .04); color: var(--qi-ink);
	font: 600 1.05rem/1.3 var(--qi-body); cursor: pointer; transition: border-color .12s, background .12s, transform .12s;
}
.qi-choice:hover:not(:disabled) { border-color: var(--qi-ember); background: rgba(255, 176, 58, .08); transform: translateY(-1px); }
.qi-choice:disabled { cursor: default; }
.qi-key { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--qi-surface-2); font: 400 .95rem/1 var(--qi-display); color: var(--qi-ember); }
.qi-choice.picked { border-color: var(--qi-ember); }
.qi-choice.right { border-color: var(--qi-good); background: rgba(43, 212, 125, .14); }
.qi-choice.right .qi-key { background: var(--qi-good); color: #062; }
.qi-choice.wrong { border-color: var(--qi-bad); background: rgba(255, 77, 94, .14); }
.qi-choice.wrong .qi-key { background: var(--qi-bad); color: #fff; }
.qi-choice img { max-width: 100%; height: auto; max-height: 64px; }
.qi-feedback:empty { display: none; }
.qi-feedback { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px dashed var(--qi-line); }
.qi-verdict { display: block; font: 400 1.5rem/1.2 var(--qi-display); margin-bottom: .3rem; }
.is-right .qi-verdict { color: var(--qi-good); }
.is-wrong .qi-verdict { color: var(--qi-bad); }
.qi-explain { margin: .6rem 0; color: var(--qi-ink); opacity: .9; }
.qi-facts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .92rem; color: var(--qi-muted); }
.qi-facts .up { color: var(--qi-good); }
.qi-facts .down { color: var(--qi-bad); }

.qi-timer { height: 8px; border-radius: 4px; background: var(--qi-surface); overflow: hidden; margin: -0.4rem 0 1rem; }
.qi-timer span { display: block; height: 100%; background: linear-gradient(90deg, var(--qi-ember), var(--qi-fire)); transform-origin: left; }
.qi-timer.late span { background: var(--qi-bad); }
.qi-timer-q span { background: linear-gradient(90deg, var(--qi-neon), var(--qi-fire)); }

/* Compétitif */
.qi-comp-intro { text-align: center; padding: 4rem 1rem; }
.qi-comp-intro p { font: 400 1.3rem/1.3 var(--qi-display); }
.qi-countdown { font: 400 clamp(5rem, 20vw, 9rem)/1 var(--qi-display); color: var(--qi-fire); text-shadow: 0 0 40px rgba(255, 90, 31, .7); }
.qi-countdown.pop { animation: qi-pop .8s ease-out; }
@keyframes qi-pop { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }
.qi-comp-stage { min-height: 150px; display: grid; place-items: center; margin-bottom: 1.2rem; }
.qi-comp-img { max-width: 100%; height: auto; }
.qi-comp-gone { font: 400 1.4rem/1.2 var(--qi-display); color: var(--qi-muted); }
.qi-card-comp .qi-choice { justify-content: flex-start; }

/* ---------- Bilan ---------- */
.qi-summary { text-align: center; }
.qi-sum-title { font: 400 clamp(1.8rem, 5vw, 2.8rem)/1.1 var(--qi-display); margin: .5rem 0 1.5rem; background: linear-gradient(90deg, var(--qi-ember), #ff8a2a, var(--qi-fire)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 0 0 1.2rem; }
.qi-tile { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border-radius: 16px; background: var(--qi-surface); border: 1px solid var(--qi-line); text-align: left; }
.qi-tile-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--qi-muted); }
.qi-tile-value { font: 400 1.6rem/1.1 var(--qi-display); color: var(--qi-ink); }
.qi-tile-sub { font-size: .85rem; color: var(--qi-muted); }
.qi-record { font: 400 1.2rem/1.3 var(--qi-display); color: var(--qi-ember); }
.qi-week-rank { font-weight: 700; }
.qi-cta { margin: 1.5rem auto; padding: 1.3rem; max-width: 640px; border-radius: var(--qi-radius); background: linear-gradient(135deg, rgba(255, 90, 31, .16), rgba(255, 61, 139, .12)); border: 1px solid var(--qi-line); text-align: center; }
.qi-cta-top h2 { font: 400 1.5rem/1.2 var(--qi-display); margin: 0 0 .5rem; }

/* ---------- Tableaux ---------- */
.qi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qi-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.qi-table th, .qi-table td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--qi-line); white-space: nowrap; }
.qi-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qi-muted); font-weight: 700; }
.qi-table-sort th button { all: unset; cursor: pointer; }
.qi-table-sort th button:focus-visible { outline: 2px solid var(--qi-ember); }
.qi-table small { color: var(--qi-muted); }
.qi-summary .qi-table { max-width: 560px; margin: 0 auto 1rem; }

/* ---------- Statistiques ---------- */
.qi-stat-head { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end; margin-bottom: 1rem; }
.qi-stat-who h1 { font: 400 clamp(2rem, 6vw, 3.2rem)/1 var(--qi-display); margin: 0 0 .3rem; overflow-wrap: anywhere; }
.qi-stat-rating { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.qi-big { font: 400 3rem/1 var(--qi-display); color: var(--qi-ember); }
.qi-stat-own { grid-column: 1 / -1; display: flex; gap: .6rem; flex-wrap: wrap; }
.qi-stat-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0; margin: 0 0 1.5rem; background: var(--qi-bg); scrollbar-width: none; }
.qi-stat-nav a { flex: none; padding: .45rem .9rem; border-radius: 999px; background: var(--qi-surface); border: 1px solid var(--qi-line); color: var(--qi-ink); text-decoration: none; font-weight: 700; font-size: .9rem; }
.qi-stat-nav a:hover { border-color: var(--qi-ember); }
.qi-stat-block { margin: 0 0 2.6rem; scroll-margin-top: 4rem; }
.qi-stat-block > h2 { font: 400 1.6rem/1.2 var(--qi-display); margin: 0 0 .4rem; }
.qi-stat-block h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
.qi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.qi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.qi-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.qi-mini .qi-table th { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--qi-ink); }
.qi-qlist ol { padding-left: 1.2rem; margin: 0; }
.qi-qlist li { margin: 0 0 .7rem; }
.qi-qtext { display: block; }
/* Mot en **gras** dans un énoncé : les énoncés sont déjà en gras, le mot ressort par la couleur. */
.qi-question strong, .qi-party-question strong, .qi-party-q-small strong { color: var(--qi-ember); }
.qi-qtext strong { font-weight: 700; }
.qi-qlist .qi-muted { font-size: .85rem; }
.qi-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; }
.qi-badge { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border-radius: 16px; background: var(--qi-surface); border: 1px solid var(--qi-line); opacity: .55; filter: grayscale(.8); }
.qi-badge.earned { opacity: 1; filter: none; border-color: var(--qi-ember); box-shadow: 0 0 20px -8px var(--qi-ember); }
.qi-badge-icon { font-size: 2rem; }
.qi-badge small { color: var(--qi-muted); }
.qi-badge-bar { height: 5px; border-radius: 3px; background: var(--qi-surface-2); overflow: hidden; margin-top: .3rem; }
.qi-badge-bar span { display: block; height: 100%; background: var(--qi-ember); }

/* Graphiques */
.qi-chart-box { position: relative; width: 100%; }
.qi-chart { display: block; width: 100%; height: auto; overflow: visible; }
.qi-chart-scroll { overflow-x: auto; }
.qi-chart-heat { height: auto; }
.qi-grid { stroke: var(--viz-grid); stroke-width: 1; }
.qi-axis { fill: var(--viz-axis); font: 11px var(--qi-body); }
.qi-axis-strong { fill: var(--qi-ink); font-size: 12px; }
.qi-axis-title { font-size: 12px; }
.qi-s1 { fill: var(--viz-1); }
.qi-s2 { fill: var(--viz-2); }
.qi-good { fill: var(--viz-good); }
.qi-bad { fill: var(--viz-bad); }
.qi-s1-stroke { stroke: var(--viz-1); }
.qi-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.qi-area { fill: var(--viz-1); opacity: .12; }
.qi-dot { fill: var(--viz-1); stroke: var(--qi-bg); stroke-width: 2; }
.qi-cross { stroke: var(--viz-axis); stroke-dasharray: 3 3; }
.qi-ref { stroke: var(--qi-ink); stroke-width: 2; opacity: .6; }
.qi-track { fill: rgba(255, 243, 228, .05); }
.qi-bubble { fill: var(--viz-1); fill-opacity: .35; stroke: var(--viz-1); stroke-width: 2; }
.qi-bubble-icon { font-size: 13px; pointer-events: none; }
.qi-hit { fill: transparent; }
.qi-mark:hover .qi-s1, .qi-mark:hover .qi-s2, .qi-mark:hover .qi-good, .qi-mark:hover .qi-bad { filter: brightness(1.2); }
.qi-mark:hover .qi-bubble { fill-opacity: .6; }
.qi-cell-text { fill: var(--qi-ink); font: 700 12px var(--qi-body); pointer-events: none; }
.qi-cell-text.dark { fill: #2a1210; }
.qi-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .85rem; color: var(--qi-muted); margin-bottom: .4rem; }
.qi-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.qi-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.qi-swatch.qi-s1 { background: var(--viz-1); }
.qi-swatch.qi-s2 { background: var(--viz-2); }
.qi-swatch.qi-good { background: var(--viz-good); }
.qi-swatch.qi-bad { background: var(--viz-bad); }
.qi-swatch.qi-ref-swatch { width: 3px; height: 14px; background: var(--qi-ink); opacity: .6; border-radius: 1px; }
.qi-tip { position: fixed; z-index: 100000; display: none; max-width: 280px; padding: .55rem .7rem; border-radius: 10px; background: #0d0512; border: 1px solid var(--qi-line); color: var(--qi-ink); font: .85rem/1.4 var(--qi-body); pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

/* ---------- Classements ---------- */
.qi-tabs { display: flex; flex-wrap: wrap; gap: .8rem 2rem; }
.qi-tab-group { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.qi-tab-title { font: 700 .72rem/1 var(--qi-body); letter-spacing: .08em; text-transform: uppercase; color: var(--qi-muted); }
.qi-tab-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.qi-tabs button { flex: none; min-height: 42px; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--qi-line); background: var(--qi-surface); color: var(--qi-ink); font: 700 .9rem/1 var(--qi-body); cursor: pointer; }
.qi-tabs button[aria-selected="true"] { background: var(--qi-fire); border-color: var(--qi-fire); color: #fff; }
.qi-board-cat { margin: 0 0 2.2rem; scroll-margin-top: 150px; }
.qi-board-cat-title { margin: 0 0 .6rem; font: 400 1.35rem/1.2 var(--qi-display); color: var(--qi-ink); }
.qi-board-cat-title a { color: inherit; text-decoration: none; }
.qi-board-cat-title a:hover { color: var(--qi-ember); }
.qi-board-more { margin-top: .6rem; min-height: 40px; padding: .45rem 1rem; border-radius: 999px; border: 1.5px dashed var(--qi-ember); background: transparent; color: var(--qi-ember); font: 700 .9rem/1 var(--qi-body); cursor: pointer; }
.qi-board-more:hover { background: rgba(255, 176, 58, .1); }
.qi-board tr[hidden] { display: none; }
.qi-board-filters { display: flex; gap: .6rem; margin: .8rem 0 1rem; flex-wrap: wrap; }
.qi-board-filters .qi-select { width: auto; min-width: 200px; }
/* Sous l'en-tête collant du thème (68 px + bordure). */
.qi-board-filters.qi-sticky { position: sticky; top: 69px; z-index: 40; margin-inline: -16px; padding: .6rem 16px; background: rgba(17, 4, 40, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(58, 34, 119, .7); }
.qi-board td.qi-rank { font: 400 1.05rem/1 var(--qi-display); width: 3.2rem; }
.qi-board tr.top td { font-weight: 700; }
.qi-board tr.me td { background: rgba(255, 176, 58, .1); }
.qi-board a { color: var(--qi-ink); font-weight: 700; }
.qi-val { font: 400 1.05rem/1 var(--qi-display); color: var(--qi-ember); }

/* ---------- Formulaires ---------- */
.qi-form { display: flex; flex-direction: column; gap: .2rem; max-width: 460px; }
.qi-field { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 .8rem; }
.qi-field label { font-weight: 700; }
.qi-check label { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.qi-check input { width: 20px; height: 20px; accent-color: var(--qi-fire); }
.qi-hp { position: absolute !important; left: -9999px; }
.qi-form-msg:empty { display: none; }
.qi-form-msg { padding: .7rem .9rem; border-radius: 10px; }
.qi-form-msg.err { background: rgba(255, 77, 94, .15); color: #ffb3bb; }
.qi-form-msg.ok { background: rgba(43, 212, 125, .14); color: #a6f5cb; }
.qi-switch { margin-top: .8rem; }
.qi-btn-google { background: #fff; color: #1f1f1f; width: 100%; max-width: 460px; }
.qi-g { font: 900 1.1rem/1 Arial, sans-serif; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qi-or { display: flex; align-items: center; gap: .8rem; max-width: 460px; margin: 1rem 0; color: var(--qi-muted); }
.qi-or::before, .qi-or::after { content: ""; flex: 1; height: 1px; background: var(--qi-line); }

/* Dialogue de signalement */
.qi-dialog { max-width: 480px; width: calc(100% - 32px); padding: 1.4rem; border-radius: var(--qi-radius); border: 1px solid var(--qi-line); background: var(--qi-surface); color: var(--qi-ink); font-family: var(--qi-body); }
.qi-dialog::backdrop { background: rgba(10, 3, 14, .75); }
.qi-dialog h3 { font: 400 1.3rem/1.2 var(--qi-display); margin: 0 0 .4rem; }
.qi-radios { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.qi-radios label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.qi-radios input { accent-color: var(--qi-fire); width: 18px; height: 18px; }

/* Notifications et confettis */
.qi-toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100001; display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 420px); }
.qi-toast { padding: .8rem 1rem; border-radius: 12px; background: #0d0512; border: 1px solid var(--qi-line); color: var(--qi-ink); font: 600 .95rem/1.3 var(--qi-body); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: opacity .5s, transform .5s; }
.qi-toast-error { border-color: var(--qi-bad); }
.qi-toast-ok { border-color: var(--qi-good); }
.qi-toast.out { opacity: 0; transform: translateY(10px); }
.qi-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100002; overflow: hidden; }
.qi-confetti span { position: absolute; top: -30px; width: 10px; height: 14px; border-radius: 2px 2px 50% 50%; background: hsl(var(--hue), 100%, 55%); font-size: 20px; animation: qi-fall linear forwards; }
.qi-confetti span:not(:empty) { background: none; width: auto; height: auto; }
@keyframes qi-fall { to { transform: translate(var(--drift), 110vh) rotate(540deg); opacity: .9; } }

.qi-ad { margin: 1.5rem auto; text-align: center; }
.qi-break { text-align: center; padding: 1rem 0; }
.qi-break-label { color: var(--qi-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.qi-break .qi-ad { min-height: 250px; }
.qi-break .qi-actions { margin-top: 2rem; }
/* Vrai nom sous le pseudonyme : administrateurs seulement, sur grand écran. */
.qi-real { display: block; font-size: .78rem; font-weight: 400; color: var(--qi-muted); }
h1 .qi-real { font-size: 1rem; margin-top: .2rem; }
/* Titres par catégorie : Spécialiste (jaune), Diable (rouge). */
.qi-titles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.qi-title { display: inline-block; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--qi-line); background: var(--qi-surface); color: var(--qi-ink); font: 700 .74rem/1.3 var(--qi-body); white-space: nowrap; }
.qi-title-spec { border-color: rgba(253, 208, 24, .55); background: rgba(253, 208, 24, .1); color: #fde68a; }
.qi-title-devil { border-color: #ff4343; background: rgba(255, 67, 67, .18); color: #ffd0d0; }
.qi-title-next { display: block; margin-top: .25rem; color: var(--qi-muted); font-size: .78rem; }

@media (max-width: 720px) {
	.qi-choices { grid-template-columns: 1fr; }
	.qi-choices-tf { grid-template-columns: 1fr 1fr; }
	.qi-setup-row, .qi-grid-2, .qi-grid-3, .qi-minis { grid-template-columns: 1fr; }
	.qi-stat-head { grid-template-columns: 1fr; }
	.qi-stat-rating { align-items: flex-start; }
	.qi-hide-sm { display: none; }
	.qi-board .qi-val small { display: block; margin-top: .2rem; }
	.qi-real { display: none; }
	.qi-title { white-space: normal; }
	.qi-board-filters .qi-select { min-width: 0; flex: 1; }
	.qi-tab-group { flex: 1 1 100%; }
	.qi-tab-row { display: grid; grid-template-columns: 1fr 1fr; }
	.qi-tabs button { padding: .5rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
	.qi-app *, .qi-confetti * { animation: none !important; transition: none !important; }
}

/* ---------- Défis ---------- */
.qi-challenge { text-align: center; max-width: 820px; margin: 0 auto; }
.qi-challenge-kicker { font: 400 1rem/1 var(--qi-display); color: var(--qi-ember); letter-spacing: .06em; }
.qi-challenge-go, .qi-share-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; margin: 1rem 0; }
.qi-challenge-go .qi-input { max-width: 260px; }
.qi-share-row .qi-input { flex: 1 1 260px; max-width: 460px; font-family: ui-monospace, monospace; font-size: .9rem; }
.qi-challenge-box { margin: 1.5rem auto; max-width: 820px; }
.qi-challenge-offer, .qi-share { padding: 1.2rem; border-radius: var(--qi-radius); border: 1.5px dashed var(--qi-ember); background: rgba(253, 208, 24, .06); }
/* Barre de partage : pastilles rondes sobres, couleur du réseau au survol. */
.qi-sharebar { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.1rem; margin: 1.1rem 0 .3rem; }
.qi-sb { --b: var(--qi-ember); --bi: #1a0b0b; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 56px; padding: 0; border: 0; background: none; color: var(--qi-muted); font: inherit; font-size: .74rem; letter-spacing: .02em; text-decoration: none; cursor: pointer; }
.qi-sb-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--qi-ink); background: rgba(255, 255, 255, .05); border: 1px solid var(--qi-line); transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.qi-sb:hover, .qi-sb:focus-visible { color: var(--qi-ink); outline: none; }
.qi-sb:hover .qi-sb-ico, .qi-sb:focus-visible .qi-sb-ico { transform: translateY(-3px); background: var(--b); border-color: transparent; color: var(--bi); box-shadow: 0 8px 22px -8px var(--b); }
.qi-sb:focus-visible .qi-sb-ico { outline: 2px solid var(--qi-ember); outline-offset: 3px; }
.qi-sb:active .qi-sb-ico { transform: translateY(-1px) scale(.96); }
.qi-sb-facebook { --b: #1877f2; --bi: #fff; }
.qi-sb-instagram { --b: #e1306c; --bi: #fff; }
.qi-sb-instagram:hover .qi-sb-ico, .qi-sb-instagram:focus-visible .qi-sb-ico { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.qi-sb-x { --b: #f4f4f5; --bi: #0f0f10; }
.qi-sb-tiktok { --b: #111; --bi: #fff; }
.qi-sb-tiktok:hover .qi-sb-ico, .qi-sb-tiktok:focus-visible .qi-sb-ico { box-shadow: -3px -2px 0 #25f4ee, 3px 2px 0 #fe2c55; }
.qi-sb-teams { --b: #5b5fc7; --bi: #fff; }
@media (prefers-reduced-motion: reduce) { .qi-sb-ico { transition: none; } .qi-sb:hover .qi-sb-ico { transform: none; } }
.qi-share-dialog { max-width: 600px; text-align: center; }
.qi-share-dialog h3 { margin: 0 0 .3rem; }
.qi-share-dialog::backdrop { background: rgba(8, 2, 20, .7); backdrop-filter: blur(3px); }
.qi-dialog-x { position: absolute; top: .5rem; right: .7rem; border: 0; background: none; color: var(--qi-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.qi-dialog-x:hover { color: var(--qi-ink); }
.qi-dialog-x:focus { outline: none; }
.qi-dialog-x:focus-visible { color: var(--qi-ember); }
.qi-challenge-cmp td.ok { color: var(--qi-good); }
.qi-challenge-cmp td.ko { color: var(--qi-bad); }
.qi-challenge-cmp td:first-child { white-space: normal; min-width: 240px; text-align: left; }
.qi-challenge-cmp small { display: block; }

/* ---------- Ligues ---------- */
.qi-league-head { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.qi-league-tier { display: flex; align-items: center; gap: 1rem; }
.qi-league-icon { font-size: 4rem; line-height: 1; filter: drop-shadow(0 0 18px rgba(255, 67, 67, .5)); }
.qi-league-tier > div { display: flex; flex-direction: column; gap: .2rem; }
.qi-countdown-small { color: var(--qi-muted); font-size: .95rem; }
.qi-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.qi-ladder li { display: flex; gap: .5rem; align-items: center; padding: .3rem .8rem; border-radius: 999px; color: var(--qi-muted); font-weight: 700; font-size: .9rem; opacity: .6; }
.qi-ladder li.on { background: var(--qi-surface-2); color: var(--qi-ink); opacity: 1; box-shadow: 0 0 0 1.5px var(--qi-ember) inset; }
.qi-ladder li.past { opacity: .85; }
.qi-league-last { padding: .9rem 1.1rem; border-radius: 14px; margin: 0 0 1.2rem; font-weight: 700; background: var(--qi-surface); }
.qi-league-last.league_up { border-left: 5px solid var(--qi-good); }
.qi-league-last.league_down { border-left: 5px solid var(--qi-bad); }
.qi-league tr.zone-up td:first-child { box-shadow: 4px 0 0 var(--qi-good) inset; }
.qi-league tr.zone-down td:first-child { box-shadow: 4px 0 0 var(--qi-bad) inset; }
.qi-zone.up { color: var(--qi-good); }
.qi-zone.down { color: var(--qi-bad); }
.qi-legend-line { font-size: .9rem; display: flex; gap: 1.2rem; }
@media (max-width: 720px) { .qi-league-head { grid-template-columns: 1fr; } .qi-ladder { flex-direction: row; flex-wrap: wrap; } }

/* ---------- Mode soirée ---------- */
.qi-party { max-width: 1200px; margin: 0 auto; }
.qi-party-opts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.5rem 0; }
.qi-party-opts label { display: flex; flex-direction: column; gap: .4rem; font-weight: 700; }
.qi-input-sm { width: 120px; }
.qi-btn-xl { font-size: 1.4rem; min-height: 68px; padding: 0 2.6rem; }
.qi-party-lobby { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; text-align: center; margin: 1rem 0 2rem; }
.qi-party-join-text { font-size: 1.4rem; margin: .3rem 0; color: var(--qi-muted); }
.qi-party-url { font: 400 clamp(1.1rem, 2.4vw, 1.9rem)/1.2 var(--qi-display); margin: .2rem 0 1rem; overflow-wrap: break-word; }
.qi-party-code { font: 400 clamp(3.5rem, 11vw, 7.5rem)/1 var(--qi-display); letter-spacing: .12em; color: var(--qi-ember); margin: .2rem 0; text-shadow: 0 0 30px rgba(253, 208, 24, .35); }
.qi-qr { background: #fff; border-radius: 18px; padding: 14px; width: min(360px, 100%); margin: 0 auto; }
.qi-qr svg { display: block; width: 100%; height: auto; }
.qi-party-names { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; min-height: 3rem; margin-bottom: 1.5rem; }
.qi-party-names .qi-chip { font-size: 1.1rem; animation: qi-pop .5s ease-out; }
.qi-party-bar { color: var(--qi-muted); margin-bottom: .6rem; }
.qi-party-code-small { font-family: var(--qi-display); color: var(--qi-ember); letter-spacing: .08em; }
.qi-party-top { display: flex; justify-content: space-between; font-weight: 700; color: var(--qi-muted); font-size: 1.2rem; }
.qi-party-timer { height: 14px; margin: .8rem 0 1.2rem; }
.qi-party-img img { max-height: 36vh; }
.qi-party-question { font: 700 clamp(1.8rem, 4.2vw, 3.2rem)/1.2 var(--qi-body); text-align: center; margin: .6rem 0 1.4rem; text-wrap: balance; }
.qi-party-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.qi-party-choice { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 96px; padding: 1rem 1.4rem; border-radius: 18px; font: 700 clamp(1.2rem, 2.6vw, 2rem)/1.2 var(--qi-body); color: #fff; transition: opacity .3s, transform .3s; }
.qi-party-choice.dim { opacity: .3; }
.qi-party-choice.right { transform: scale(1.03); box-shadow: 0 0 0 5px #fff, 0 0 40px rgba(255, 255, 255, .35); }
.qi-party-dist { margin-left: auto; font-family: var(--qi-display); font-size: 1.6rem; background: rgba(0, 0, 0, .25); border-radius: 12px; padding: .2rem .7rem; }
.qi-shape { font-size: 1.4em; line-height: 1; }
.qi-party .red { background: #e5304a; }
.qi-party .blue { background: #0a6fe0; }
.qi-party .yellow { background: #b88a00; }
.qi-party .cyan { background: #067f7f; }
.qi-party-answered { font: 400 1.3rem/1 var(--qi-display); color: var(--qi-muted); align-self: center; }
.qi-party-explain { text-align: center; font-size: 1.3rem; margin: 1.2rem auto 0; max-width: 60ch; }
.qi-party-board { list-style: none; counter-reset: pb; padding: 0; margin: 1rem auto; max-width: 720px; }
.qi-party-board li { counter-increment: pb; display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem; border-radius: 14px; background: var(--qi-surface); margin: .5rem 0; font-size: 1.5rem; font-weight: 700; }
.qi-party-board li::before { content: counter(pb); font-family: var(--qi-display); color: var(--qi-ember); width: 2.2rem; }
.qi-party-board li strong { margin-left: auto; font-family: var(--qi-display); color: var(--qi-ember); }
.qi-podium { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; margin: 2rem 0; }
.qi-podium-step { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: min(30vw, 220px); padding: 1rem .6rem; border-radius: 18px 18px 0 0; background: var(--qi-surface-2); font-size: 1.3rem; text-align: center; overflow-wrap: anywhere; }
.qi-podium-step.step-1 { min-height: 260px; background: linear-gradient(180deg, rgba(253, 208, 24, .35), var(--qi-surface-2)); }
.qi-podium-step.step-2 { min-height: 200px; }
.qi-podium-step.step-3 { min-height: 160px; }
.qi-podium-medal { font-size: 3rem; }
.qi-party-player { max-width: 520px; }
.qi-party-join { margin: 1rem auto; }
.qi-party-code-input { font: 400 2rem/1 var(--qi-display); letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.qi-party-me { display: flex; justify-content: space-between; padding: .6rem .2rem 1rem; font-size: 1.1rem; }
.qi-party-wait { text-align: center; padding: 2rem 1rem; font-size: 1.2rem; }
.qi-party-wait.is-right .qi-verdict { color: var(--qi-good); }
.qi-party-wait.is-wrong .qi-verdict { color: var(--qi-bad); }
.qi-party-big { font-size: 4rem; margin: 0; }
.qi-party-q-small { text-align: center; font-weight: 700; font-size: 1.15rem; margin: 0 0 1rem; }
.qi-party-pad { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.qi-party-key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 26vh; padding: .8rem; border: 0; border-radius: 20px; color: #fff; font: 700 1.05rem/1.2 var(--qi-body); cursor: pointer; }
.qi-party-key .qi-shape { font-size: 2.6rem; }
.qi-party-key:disabled { opacity: .35; }
.qi-party-key.picked { opacity: 1; box-shadow: 0 0 0 5px #fff; }
@media (max-width: 720px) { .qi-party-lobby { grid-template-columns: 1fr; } .qi-party-choices { grid-template-columns: 1fr; } }

/* Drapeau sans emoji (Québec). */
.qi-flag-img { display: inline-block; width: auto; height: .8em; vertical-align: -.05em; border-radius: 1px; }

/* ---------- Consentement aux témoins (includes/Consent.php) ---------- */
.qi-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--qi-surface); border-top: 2px solid var(--qi-fire); box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); }
.qi-consent[hidden] { display: none; }
.qi-consent-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.6rem; width: min(var(--wrap, 1120px), 100% - 32px); margin-inline: auto; padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom)); }
.qi-consent-bar p { flex: 1 1 26rem; margin: 0; color: var(--qi-muted); font-size: .95rem; line-height: 1.5; }
.qi-consent-bar strong { font: 400 1.05rem/1 "Bungee", sans-serif; color: var(--qi-ember); margin-right: .3rem; }
.qi-consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.qi-consent-actions .qi-btn { min-height: 44px; padding: .6em 1.2em; }
.qi-consent-panel { width: min(34rem, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 1.6rem; border: 1.5px solid var(--qi-line); border-radius: 22px; background: var(--qi-surface); color: var(--qi-ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.qi-consent-panel::backdrop { background: rgba(8, 2, 20, .7); }
.qi-consent-panel h2 { font: 400 1.4rem/1.15 "Bungee", sans-serif; margin: 0 0 .6rem; }
.qi-consent-panel p { color: var(--qi-muted); font-size: .95rem; }
.qi-consent-cat { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 0; border-top: 1px solid var(--qi-line); cursor: pointer; }
.qi-consent-cat input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--qi-fire); flex: none; }
.qi-consent-cat input:disabled { cursor: not-allowed; }
.qi-consent-cat small { color: var(--qi-muted); font-size: .8rem; margin-left: .4rem; }
.qi-consent-text { display: block; color: var(--qi-muted); font-size: .92rem; margin-top: .15rem; }
.qi-consent-small { font-size: .85rem; border-top: 1px solid var(--qi-line); padding-top: .9rem; }
.qi-consent-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.qi-consent-link:hover { color: var(--qi-ink); }
@media (max-width: 640px) {
	.qi-consent-actions { width: 100%; }
	.qi-consent-actions .qi-btn { flex: 1 1 auto; }
	.qi-consent-panel { padding: 1.2rem; }
}

/* ---------- Pages /quiz/ (liste, catégorie, questions les plus difficiles) ---------- */
.qi-quizpage { padding-bottom: 4rem; }
.qi-crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 1.6rem 0 0; padding: 0; font-size: .88rem; color: var(--qi-muted); }
.qi-crumbs li + li::before { content: "›"; margin-right: .3rem; }
.qi-crumbs a { color: var(--qi-muted); }
.qi-quizpage .page-head { padding-top: 1rem; }
.qi-quiz-head { position: relative; }
.qi-quiz-ico { display: block; font-size: 2.6rem; line-height: 1; margin-bottom: .5rem; }
.qi-quiz-facts { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: .4rem 0 1.4rem; padding: 0; }
.qi-quiz-facts li { padding: .7rem 1rem; border-radius: 14px; background: var(--qi-surface); border: 1px solid var(--qi-line); color: var(--qi-muted); font-size: .9rem; }
.qi-quiz-facts strong { display: block; font: 400 1.4rem/1.1 var(--qi-display); color: var(--qi-ember); }
.qi-quiz-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 2rem; }
.qi-quiz-sec { margin: 2.6rem 0 0; }
.qi-quiz-sec h2 { font: 400 clamp(1.3rem, 3.4vw, 1.7rem)/1.15 var(--qi-display); margin: 0 0 .5rem; }
.qi-quiz-sub { color: var(--qi-muted); margin: 0 0 1rem; max-width: 65ch; }
.qi-sample { list-style: none; counter-reset: qs; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .8rem; }
.qi-sample > li { counter-increment: qs; padding: 1rem 1.1rem; border-radius: 16px; background: var(--qi-surface); border: 1px solid var(--qi-line); }
.qi-sample-q { margin: 0 0 .7rem; font-weight: 700; font-size: 1.05rem; }
.qi-sample-q::before { content: counter(qs) ". "; color: var(--qi-ember); }
.qi-sample-a { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .4rem; list-style: none; margin: 0; padding: 0; }
.qi-sample-a li { padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--qi-line); font-size: .95rem; }
.qi-hard-meta { margin: 0 0 .4rem; font-size: .85rem; color: var(--qi-muted); }
.qi-hard details { margin-top: .8rem; }
.qi-hard summary { cursor: pointer; color: var(--qi-ember); font-weight: 700; }
.qi-hard details p { margin: .5rem 0 0; }
.qi-quiz-week { display: flex; align-items: center; gap: 1rem; max-width: 460px; padding: 1rem 1.2rem; border-radius: 16px; border: 1.5px solid var(--qi-ember); background: linear-gradient(160deg, rgba(255, 176, 58, .16), rgba(255, 90, 31, .08)); color: var(--qi-ink); text-decoration: none; }
.qi-quiz-week:hover { color: var(--qi-ink); border-color: var(--qi-fire); }
.qi-quiz-week .ico { font-size: 2.2rem; }
.qi-quiz-week small { display: block; color: var(--qi-muted); font-size: .8rem; }
.qi-quiz-week strong { display: block; font: 400 1.25rem/1.2 var(--qi-display); margin: .15rem 0; }