/*
 * Football Pool — Arabjo Theme CSS v3.3 (Unified Color System)
 *
 * Hybrid color strategy:
 *   1. Default tokens are dark-mode by default (matches site default)
 *   2. `body.rb-light-trigger` (or html[data-theme=light]) overrides tokens
 *      for light mode in one place
 *   3. Foxiz CSS variables (--rb-*) are read where they exist, with our own
 *      tokens as the fallback
 *
 * This guarantees readable text in BOTH modes without per-rule overrides.
 * Hero stays burgundy in dark mode, switches to elegant gray in light mode.
 */

/* ============================================================
 *  RESETS — neutralize the plugin's matchinfo grid layout
 * ============================================================ */
.arabjo-theme,
.arabjo-theme.matchinfo,
.arabjo-theme.matchinfo.new-layout,
.matchinfo.arabjo-theme.new-layout.input {
	display: block !important;
	grid-template-columns: none !important;
	grid-gap: 0 !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
	border: none !important;
	border-radius: 14px !important;
	overflow: hidden !important;
}

.arabjo-theme > .matchtype,
.arabjo-theme > .matchdate,
.arabjo-theme > .matchtitle { display: none !important; }

/* ============================================================
 *  COLOR TOKENS — DARK MODE (DEFAULT)
 *  Surface colors fall through to Foxiz's variables when available.
 *  Hero is burgundy in dark mode.
 * ============================================================ */
.arabjo-theme {
	/* Brand (constant across modes) */
	--aj-brand:        #7d2330;
	--aj-brand-dark:   #4a141d;
	--aj-brand-light:  #9a3140;

	/* Semantic accents (constant) */
	--aj-gold:         #9a3140;  /* كان ذهبي — حُوِّل لبوردو (الذهبي فقط للميداليات) */
	--aj-gold-dark:    #7d2330;
	--aj-green:        #22c55e;
	--aj-red:          #ef4444;

	/* Surfaces — dark mode (subtle tints relative to site background)
	 * We use semi-transparent whites so the card sits *just above* whatever
	 * background Foxiz applies, rather than fighting it with a fixed color. */
	--aj-surf:         rgba(255, 255, 255, 0.04);
	--aj-surf-2:       rgba(255, 255, 255, 0.08);
	--aj-surf-strip:   rgba(0, 0, 0, 0.20);
	--aj-border:       rgba(255, 255, 255, 0.10);

	/* Text — dark mode (white on dark surfaces) */
	--aj-text:         #ffffff;
	--aj-text-dim:     rgba(255, 255, 255, 0.85);
	--aj-muted:        rgba(255, 255, 255, 0.55);

	/* Hero — dark mode (burgundy gradient) */
	--aj-hero-bg:      linear-gradient(135deg, #7d2330 0%, #4a141d 50%, #421018 100%);
	--aj-hero-text:    #ffffff;
	--aj-hero-overlay-1: rgba(255, 255, 255, 0.15);
	--aj-hero-overlay-2: rgba(0, 0, 0, 0.30);
	--aj-hero-stat-bg: rgba(0, 0, 0, 0.35);
	--aj-hero-pill-bg: rgba(0, 0, 0, 0.40);

	/* Inputs — translucent dark tint that works in both modes */
	--aj-input-bg:     rgba(0, 0, 0, 0.25);

	/* Typography */
	--aj-font:         'Tajawal', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
	--aj-radius:       14px;
	--aj-radius-sm:    8px;

	font-family: var(--aj-font);
	direction: rtl;
	color: var(--aj-text);
	background: transparent;
}

/* ============================================================
 *  COLOR TOKENS — LIGHT MODE
 *  We treat DARK as the default and switch to LIGHT when ANY of:
 *    1. `.arabjo-theme[data-aj-mode="light"]` — set by our JS after it
 *       computes the page's actual background luminance. Most reliable.
 *    2. body.rb-light-trigger — Foxiz's explicit light-mode class
 *    3. html[data-theme="light"] — generic data attribute
 *    4. @media (prefers-color-scheme: light) — OS preference fallback
 * ============================================================ */
.arabjo-theme[data-aj-mode="light"],
body.rb-light-trigger .arabjo-theme,
html[data-theme="light"] .arabjo-theme,
html[data-rb-mode="light"] .arabjo-theme,
.rb-light-trigger .arabjo-theme {
	/* Surfaces — light mode (subtle dark tints over site bg) */
	--aj-surf:         rgba(0, 0, 0, 0.03);
	--aj-surf-2:       rgba(0, 0, 0, 0.06);
	--aj-surf-strip:   rgba(0, 0, 0, 0.04);
	--aj-border:       rgba(0, 0, 0, 0.10);

	/* Text — light mode (dark text on light surfaces) */
	--aj-text:         #111827;
	--aj-text-dim:     rgba(0, 0, 0, 0.75);
	--aj-muted:        rgba(0, 0, 0, 0.55);

	/* Hero — light mode (elegant dark gray, not red) */
	--aj-hero-bg:      linear-gradient(135deg, #2d3142 0%, #1f2433 50%, #14171f 100%);
	--aj-hero-text:    #ffffff;
	--aj-hero-overlay-1: rgba(255, 255, 255, 0.08);
	--aj-hero-overlay-2: rgba(0, 0, 0, 0.20);
	--aj-hero-stat-bg: rgba(255, 255, 255, 0.10);
	--aj-hero-pill-bg: rgba(255, 255, 255, 0.12);

	/* Inputs — light mode (slightly darker than the card surface) */
	--aj-input-bg:     rgba(0, 0, 0, 0.05);
}

/* OS-level light preference, only when JS hasn't already classified the mode. */
@media (prefers-color-scheme: light) {
	body:not(.rb-dark-trigger):not(.rb-dark) .arabjo-theme:not([data-aj-mode]) {
		--aj-surf:         rgba(0, 0, 0, 0.03);
		--aj-surf-2:       rgba(0, 0, 0, 0.06);
		--aj-surf-strip:   rgba(0, 0, 0, 0.04);
		--aj-border:       rgba(0, 0, 0, 0.10);
		--aj-text:         #111827;
		--aj-text-dim:     rgba(0, 0, 0, 0.75);
		--aj-muted:        rgba(0, 0, 0, 0.55);
		--aj-hero-bg:      linear-gradient(135deg, #2d3142 0%, #1f2433 50%, #14171f 100%);
		--aj-input-bg:     rgba(0, 0, 0, 0.05);
	}
}

.arabjo-theme *, .arabjo-theme *::before, .arabjo-theme *::after { box-sizing: border-box; }

/* ============================================================
 *  HERO — uses --aj-hero-* tokens which change per mode
 * ============================================================ */
.aj-hero {
	background: var(--aj-hero-bg);
	color: var(--aj-hero-text);
	padding: 14px;
	position: relative;
	overflow: hidden;
}
.aj-hero::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(circle at 90% 10%, var(--aj-hero-overlay-1) 0, transparent 40%),
		radial-gradient(circle at 10% 90%, var(--aj-hero-overlay-2) 0, transparent 50%);
	pointer-events: none;
}
.aj-hero-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; position: relative; z-index: 1; }
.aj-hero-logo {
	width: 30px; height: 30px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 900; font-size: 13px;
	color: var(--aj-hero-text);
}
.aj-hero-brand { font-size: 11px; opacity: 0.9; font-weight: 500; color: var(--aj-hero-text); }
.aj-hero-pill {
	margin-right: auto;
	background: var(--aj-hero-pill-bg);
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 10px; font-weight: 600;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--aj-hero-text);
}
.aj-hero-title {
	font-size: 18px; font-weight: 900; line-height: 1.2;
	position: relative; z-index: 1;
	color: var(--aj-hero-text);
	margin: 0;
}
.aj-hero-sub {
	font-size: 11px; opacity: 0.85; margin-top: 2px;
	position: relative; z-index: 1;
	color: var(--aj-hero-text);
}

.aj-hero-stats {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
	margin-top: 12px; position: relative; z-index: 1;
}
.aj-hero-stat {
	background: var(--aj-hero-stat-bg);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 6px 4px;
	text-align: center;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.aj-hero-stat-num { font-size: 16px; font-weight: 900; line-height: 1; color: var(--aj-hero-text); }
.aj-hero-stat-num small { font-size: 9px; opacity: 0.7; font-weight: 400; }
.aj-hero-stat-lbl { font-size: 9px; opacity: 0.8; margin-top: 2px; font-weight: 500; color: var(--aj-hero-text); }

/* ============================================================
 *  PROGRESS BAR
 * ============================================================ */
.aj-progress {
	margin: 12px; padding: 10px 12px;
	background: linear-gradient(135deg, rgba(142,42,57, 0.08), transparent);
	border: 1px solid rgba(142,42,57, 0.2);
	border-radius: 10px;
	display: flex; align-items: center; gap: 10px;
}
.aj-progress-icon {
	width: 28px; height: 28px;
	background: var(--aj-brand);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; flex-shrink: 0;
	color: #fff;
}
.aj-progress-text { font-size: 11px; font-weight: 700; color: var(--aj-text); flex: 1; }
.aj-progress-text b { color: var(--aj-brand-light); }
.aj-progress-bar {
	height: 6px;
	background: var(--aj-surf-2);
	border-radius: 3px; overflow: hidden;
	margin-top: 5px;
}
.aj-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--aj-brand-light), var(--aj-brand));
	border-radius: 3px;
	transition: width 0.5s ease;
	position: relative; overflow: hidden;
}
.aj-progress-fill::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	animation: aj-shimmer 2s infinite;
}
@keyframes aj-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

/* ============================================================
 *  DAY SEPARATOR
 * ============================================================ */
.aj-round-title { display: none; }
.aj-date-row {
	display: flex; align-items: center; gap: 8px;
	margin: 14px 12px 8px;
	color: var(--aj-muted);
	font-size: 11px; font-weight: 600;
}
.aj-date-row::before, .aj-date-row::after {
	content: ''; flex: 1; height: 1px;
	background: linear-gradient(90deg, transparent, var(--aj-border), transparent);
}
.aj-date-row-text {
	background: var(--aj-surf);
	padding: 4px 12px;
	border-radius: 20px;
	border: 1px solid var(--aj-border);
	font-weight: 700;
	color: var(--aj-text-dim);
}

/* ============================================================
 *  MATCH CARD
 * ============================================================ */
.arabjo-theme .aj-match {
	display: block !important;
	width: auto !important;
	background: var(--aj-surf) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: var(--aj-radius) !important;
	padding: 0 !important;
	margin: 0 12px 10px !important;
	position: relative !important;
	overflow: hidden !important;
	grid-column: unset !important;
	grid-row: unset !important;
	color: var(--aj-text);
}
.arabjo-theme .aj-match.closed { opacity: 0.65; }

/* MATCH OF THE ROUND */
.arabjo-theme .aj-match.aj-mult-2,
.arabjo-theme .aj-match.aj-mult-3,
.arabjo-theme .aj-match.aj-mult-4,
.arabjo-theme .aj-match.aj-mult-5 {
	background: linear-gradient(135deg, rgba(142,42,57, 0.12) 0%, var(--aj-surf) 100%) !important;
	border: none !important;
	box-shadow: 0 0 0 1.5px var(--aj-brand), 0 4px 16px rgba(142,42,57, 0.20);
}

.aj-mor-banner {
	background: linear-gradient(90deg, var(--aj-brand) 0%, var(--aj-brand-dark) 100%);
	padding: 8px 12px;
	display: flex; align-items: center; justify-content: space-between;
	position: relative; overflow: hidden;
	color: #fff;
}
.aj-mor-banner::before {
	content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 50%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
	animation: aj-shimmer 3s infinite;
}
.aj-mor-tag {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 900; font-size: 11px; color: #fff;
	position: relative; z-index: 1;
}
.aj-mor-fire { font-size: 14px; animation: aj-flame 1s infinite alternate; }
@keyframes aj-flame { from { transform: scale(1); } to { transform: scale(1.15) rotate(-3deg); } }
.aj-mor-mult {
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	padding: 2px 9px;
	border-radius: 5px;
	font-weight: 900; font-size: 11px;
	position: relative; z-index: 1;
}

/* === STATUS STRIP === */
.aj-status-strip {
	padding: 7px 12px;
	background: var(--aj-surf-strip);
	border-bottom: 1px solid var(--aj-border);
	display: flex; align-items: center; justify-content: space-between;
	font-size: 10px;
	color: var(--aj-muted);
}
.aj-status {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 8px;
	border-radius: 5px;
	font-weight: 600; font-size: 10px;
}
.aj-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.aj-status-open { background: rgba(34, 197, 94, 0.18); color: #16a34a; }
.aj-status-locked { background: rgba(239, 68, 68, 0.18); color: #dc2626; }
.aj-status-final { background: rgba(156, 163, 175, 0.20); color: var(--aj-muted); }
.aj-status-final::before { content: '✓'; width: auto; height: auto; background: none; }

/* Light mode tweaks for status pill contrast */
body.rb-light-trigger .arabjo-theme .aj-status-open,
html[data-theme="light"] .arabjo-theme .aj-status-open { color: #15803d; }

/* === COUNTDOWN — boxed segments (days / hours / minutes / seconds) === */
/* === COMPACT COUNTDOWN — inline pills ===
 *
 * Layout: 🕒 [20 ي] [17 س] [27 د] [38 ث]
 * Each cell is a small pill where the number sits *beside* the unit
 * (not stacked above it). On a phone this halves the vertical space
 * the countdown used to take and reads naturally right-to-left. */
.aj-countdown-box {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.aj-cd-icon {
	font-size: 12px;
	line-height: 1;
	opacity: 0.7;
}
.aj-cd-grid {
	display: inline-flex;
	gap: 4px;
	flex-wrap: wrap;
}
.aj-cd-cell {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: 3px 6px;
	background: var(--aj-surf-2);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	white-space: nowrap;
}
.aj-cd-num {
	font-size: 12px;
	font-weight: 800;
	color: var(--aj-text);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.aj-cd-unit {
	font-size: 9px;
	color: var(--aj-muted);
	font-weight: 600;
}
/* Hide the old stacked-label visually but keep it for screen readers. */
.aj-cd-lbl,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Urgency tiers — JS toggles these classes on the box. */
.aj-countdown-box.urgent .aj-cd-cell {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.4);
}
.aj-countdown-box.urgent .aj-cd-num { color: #ef4444; }
.aj-countdown-box.critical .aj-cd-cell {
	background: rgba(239, 68, 68, 0.22);
	border-color: #ef4444;
	animation: aj-blink 1.2s infinite;
}
.aj-countdown-box.critical .aj-cd-num { color: #dc2626; }
.aj-countdown-box.started .aj-cd-num { color: var(--aj-muted); }
@keyframes aj-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }

@media (max-width: 480px) {
	.aj-countdown-box { gap: 4px; }
	.aj-cd-cell { padding: 2px 5px; }
	.aj-cd-num { font-size: 11px; }
	.aj-cd-unit { font-size: 8px; }
}

.aj-user-pred-note { display: inline-flex; align-items: center; gap: 4px; color: var(--aj-muted); font-size: 10px; }
.aj-user-pred-note strong { color: var(--aj-text-dim); font-weight: 700; }

/* === MATCH BODY === */
.aj-match-body {
	padding: 14px 12px 12px;
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
	gap: 8px !important;
	align-items: center !important;
}
.aj-team {
	display: flex; flex-direction: column; align-items: center;
	gap: 5px; text-align: center; min-width: 0;
}
.aj-flag {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--aj-surf-2);
	border: 2px solid var(--aj-border);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	overflow: hidden; flex-shrink: 0;
}
.aj-flag img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.aj-flag-initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	font-size: 16px;
	font-weight: 900;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark));
	color: #fff;
	border-radius: 50%;
}
.aj-team-name {
	font-size: 11px; font-weight: 600;
	color: var(--aj-text);
	line-height: 1.2;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.aj-center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.aj-score-row {
	display: flex; align-items: center; gap: 5px;
	background: var(--aj-input-bg);
	padding: 5px 8px;
	border-radius: 10px;
	border: 1px solid var(--aj-border);
}
.aj-score-row.final {
	background: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.3);
}

.arabjo-theme .aj-score-row input,
.arabjo-theme .aj-score-row input.prediction,
.arabjo-theme .aj-score-row input[type="text"],
.arabjo-theme .aj-score-row input[type="number"] {
	width: 30px !important; height: 32px !important;
	background: transparent !important;
	border: none !important;
	color: var(--aj-text) !important;
	font-size: 18px !important; font-weight: 900 !important;
	text-align: center !important;
	outline: none !important;
	padding: 0 !important; margin: 0 !important;
	font-family: var(--aj-font) !important;
	box-shadow: none !important;
	appearance: textfield; -moz-appearance: textfield;
}
.arabjo-theme .aj-score-row input::-webkit-outer-spin-button,
.arabjo-theme .aj-score-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.arabjo-theme .aj-score-row input:focus { color: var(--aj-brand) !important; }
.arabjo-theme .aj-score-row.final input { color: #16a34a !important; }
.aj-sep { color: var(--aj-muted); font-weight: 900; font-size: 14px; }
.aj-mini-info { font-size: 9px; color: var(--aj-muted); text-align: center; line-height: 1.2; }
.aj-mini-info b { color: var(--aj-green); font-weight: 700; font-size: 10px; }
.aj-mini-info .joker-hint { color: var(--aj-gold); font-weight: 700; }

/* === FOOTER — centered action row (joker · save · stats) === */
.aj-match-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: var(--aj-surf-strip);
	border-top: 1px solid var(--aj-border);
	gap: 8px;
	/* Keep all three controls (joker · save · stats) on ONE line — they
	 * shrink to fit rather than wrapping to a second row, which looked
	 * untidy on narrow phones. */
	flex-wrap: nowrap;
}
.aj-match-foot.has-save .aj-save-btn { flex: 0 1 auto; min-width: 0; }
.aj-match-foot.no-save { justify-content: space-between; }
/* Allow the joker box and stats link to shrink so the row never wraps. */
.aj-match-foot .fp-joker-box,
.aj-match-foot .aj-predictions-link {
	flex: 0 1 auto;
	min-width: 0;
}
.aj-match-foot .aj-predictions-link {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* === SAVE BUTTON (in-card) — compact, matches joker/stats sizing ===
 *
 * NB: the plugin sets very aggressive defaults on `input[type=submit]`
 * elsewhere in this stylesheet (background gradient, padding 13px, width
 * 100% via .submit-button + .save-button rules). When our button picks up
 * any of those because the user agent treats <button type="submit"> as
 * a submit, the whole pill explodes back to a giant red bar. So we mark
 * the layout-critical properties as !important to lock the size down. */
.arabjo-theme .aj-save-btn,
.arabjo-theme button.aj-save-btn,
.arabjo-theme button[type="submit"].aj-save-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	background: var(--aj-brand) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--aj-radius-sm) !important;
	font-family: var(--aj-font) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 6px rgba(142,42,57, 0.25) !important;
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
	white-space: nowrap !important;
	min-height: 32px !important;
	height: 32px !important;
	line-height: 1 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	text-align: center !important;
}
.arabjo-theme .aj-save-btn:hover {
	background: var(--aj-brand-dark) !important;
	box-shadow: 0 3px 10px rgba(142,42,57, 0.35) !important;
}
.arabjo-theme .aj-save-btn:active { transform: scale(0.97) !important; }
.arabjo-theme .aj-save-btn .aj-save-ico { font-size: 12px; }
.arabjo-theme .aj-save-btn.is-saving { opacity: 0.75; cursor: wait !important; }
.arabjo-theme .aj-save-btn.is-saved {
	background: var(--aj-green) !important;
	pointer-events: none;
}

/* Inline status message that replaces the toast — appears below the
 * footer for ~2.5s after a save completes. */
.aj-save-status {
	display: none;
	margin: 0 12px 12px;
	padding: 8px 12px;
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.35);
	border-radius: var(--aj-radius-sm);
	color: var(--aj-green);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	animation: aj-save-fade 0.25s ease;
}
.aj-save-status.is-visible { display: block; }
.aj-save-status.is-error {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.35);
	color: var(--aj-red);
}
@keyframes aj-save-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Hide the plugin's global save button — every card now has its own. */
.arabjo-shell .buttonblock { display: none !important; }

/* Hide the plugin's top-of-page "تم حفظ التغييرات" notice — we show
 * inline feedback under each card's save button instead. */
.arabjo-shell .messageblock,
.arabjo-shell .messages,
.arabjo-shell #predictions-saved,
.arabjo-shell .updated-notice {
	display: none !important;
}

/* Mobile-friendly footer: stays on one line, items shrink + labels
 * compress so the three controls always fit side by side. */
@media (max-width: 480px) {
	.aj-match-foot { gap: 6px; padding: 10px; flex-wrap: nowrap; }
	.arabjo-theme .aj-save-btn { padding: 6px 10px !important; font-size: 11px !important; }
	.aj-match-foot .aj-predictions-link { font-size: 11px; padding: 6px 8px; }
	.aj-match-foot .fp-joker-box { transform: scale(0.95); }
}

/* === JOKER — creative card-style === */
.arabjo-theme .fp-joker-box {
	background-image: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	background: linear-gradient(135deg, var(--aj-surf-2), var(--aj-surf)) !important;
	border: 1.5px solid rgba(154, 49, 64, 0.4) !important;
	border-radius: var(--aj-radius-sm) !important;
	font-size: 10px !important; font-weight: 700 !important;
	color: var(--aj-gold-dark) !important;
	cursor: pointer !important;
	width: auto !important; height: auto !important;
	min-width: 0 !important; min-height: 0 !important;
	transition: all 0.2s ease;
	position: relative; overflow: hidden;
}
.arabjo-theme .fp-joker-box::before {
	content: '🃏';
	font-size: 16px; line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.arabjo-theme .fp-joker-box::after { content: 'الجوكر'; font-weight: 800; }
.arabjo-theme .fp-joker-box:hover {
	background: rgba(154, 49, 64, 0.08) !important;
	border-color: var(--aj-gold) !important;
	transform: translateY(-1px);
}
.arabjo-theme .fp-joker-box.fp-joker {
	background: linear-gradient(135deg, var(--aj-gold), var(--aj-gold-dark)) !important;
	color: #1a0f00 !important;
	border-color: var(--aj-gold) !important;
	box-shadow: 0 3px 12px rgba(154, 49, 64, 0.45), 0 0 0 2px rgba(154, 49, 64, 0.2) !important;
	animation: aj-joker-glow 2s ease-in-out infinite;
}
.arabjo-theme .fp-joker-box.fp-joker::after { content: '✨ مفعّل'; }
@keyframes aj-joker-glow {
	0%, 100% { box-shadow: 0 3px 12px rgba(154, 49, 64, 0.45), 0 0 0 2px rgba(154, 49, 64, 0.2); }
	50%      { box-shadow: 0 5px 18px rgba(154, 49, 64, 0.65), 0 0 0 3px rgba(154, 49, 64, 0.3); }
}
.arabjo-theme .fp-joker-box.readonly {
	opacity: 0.3 !important; cursor: not-allowed !important;
	background: var(--aj-surf-2) !important;
	color: var(--aj-muted) !important;
	border-color: var(--aj-border) !important;
}
.arabjo-theme .fp-joker-box.fp-admin-multiplier {
	background: var(--aj-surf-2) !important;
	color: var(--aj-muted) !important;
	border-color: var(--aj-border) !important;
	cursor: not-allowed !important; opacity: 0.6 !important;
}
.arabjo-theme .fp-joker-box.fp-admin-multiplier::before { content: '⛔'; font-size: 14px; }
.arabjo-theme .fp-joker-box.fp-admin-multiplier::after { content: 'مقفل'; }

/* === JOKER USED ELSEWHERE (v6.0.3) ===
 * Shown on the OTHER matches of a round that already has its joker.
 * Darker/muted look so it's clear the joker is currently placed on
 * another match — but it stays fully clickable so the user can move it. */
.arabjo-theme .fp-joker-box.aj-joker-elsewhere {
	background: linear-gradient(135deg, #2a2a2a, #1c1c1c) !important;
	color: #888 !important;
	border-color: rgba(154, 49, 64, 0.25) !important;
	box-shadow: none !important;
	animation: none !important;
	opacity: 1 !important;       /* not faded — just dark */
	cursor: pointer !important;  /* still movable */
}
.arabjo-theme .fp-joker-box.aj-joker-elsewhere::before {
	content: '🃏';
	filter: grayscale(0.7) brightness(0.85);
}
.arabjo-theme .fp-joker-box.aj-joker-elsewhere::after { content: 'الجوكر' !important; }
.arabjo-theme .fp-joker-box.aj-joker-elsewhere:hover {
	background: linear-gradient(135deg, #333, #242424) !important;
	border-color: var(--aj-gold) !important;
	color: #aaa !important;
	transform: translateY(-1px);
}
.arabjo-theme .fp-joker-box.aj-joker-saving {
	opacity: 0.6 !important;
	cursor: wait !important;
	pointer-events: none;
}


/* === PREDICTIONS LINK === */
.aj-predictions-link {
	display: inline-flex !important; align-items: center !important; gap: 4px !important;
	padding: 5px 10px !important;
	background: var(--aj-surf-2) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: var(--aj-radius-sm) !important;
	font-size: 10px !important; font-weight: 600 !important;
	color: var(--aj-muted) !important;
	cursor: pointer !important; text-decoration: none !important;
	transition: all 0.15s ease; font-family: var(--aj-font);
}
.aj-predictions-link:hover {
	color: var(--aj-text) !important;
	background: var(--aj-surf-2) !important;
	border-color: var(--aj-brand) !important;
	text-decoration: none !important;
}
.aj-predictions-link .aj-ico { font-size: 11px; }

/* === SPONSOR STRIP (round sponsor — rendered by the Extras plugin) === */
.arabjo-theme .aj-sponsor-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 9px 14px;
	background: var(--aj-surf-strip);
	border-top: 1px solid var(--aj-border);
	border-radius: 0 0 var(--aj-radius) var(--aj-radius);
	text-decoration: none;
	transition: background 0.18s ease;
}
.arabjo-theme a.aj-sponsor-strip:hover {
	background: var(--aj-surf-2);
}
.arabjo-theme .aj-sponsor-strip .aj-sponsor-rule {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--aj-border), transparent);
	max-width: 70px;
}
.arabjo-theme .aj-sponsor-strip .aj-sponsor-body {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.arabjo-theme .aj-sponsor-strip .aj-sponsor-label {
	font-size: 9px;
	font-weight: 700;
	color: var(--aj-muted);
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.arabjo-theme .aj-sponsor-strip .aj-sponsor-logo {
	height: 22px;
	width: auto;
	max-width: 90px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.arabjo-theme .aj-sponsor-strip .aj-sponsor-name {
	font-size: 11px;
	font-weight: 800;
	color: var(--aj-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 140px;
}
.arabjo-theme a.aj-sponsor-strip .aj-sponsor-name {
	color: var(--aj-brand);
}
.arabjo-theme .aj-sponsor-strip .aj-sponsor-ext {
	font-size: 9px;
	color: var(--aj-muted);
	opacity: 0.7;
}
@media (max-width: 420px) {
	.arabjo-theme .aj-sponsor-strip .aj-sponsor-rule { max-width: 32px; }
	.arabjo-theme .aj-sponsor-strip .aj-sponsor-name { max-width: 96px; }
}

/* ============================================================
 *  GUEST CTA
 * ============================================================ */
.aj-guest-cta {
	margin: 12px;
	padding: 14px;
	background: linear-gradient(135deg, rgba(142,42,57, 0.10), var(--aj-surf));
	border: 1px solid rgba(142,42,57, 0.3);
	border-radius: 12px;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	color: var(--aj-text);
}
.aj-guest-cta-large { flex-direction: column; text-align: center; padding: 18px; }
.aj-guest-cta-icon { font-size: 28px; flex-shrink: 0; }
.aj-guest-cta-large .aj-guest-cta-icon { font-size: 40px; }
.aj-guest-cta-body { flex: 1; min-width: 150px; }
.aj-guest-cta-title { font-size: 13px; font-weight: 800; color: var(--aj-text); margin-bottom: 3px; }
.aj-guest-cta-large .aj-guest-cta-title { font-size: 16px; }
.aj-guest-cta-sub { font-size: 10px; color: var(--aj-muted); line-height: 1.4; }
.aj-guest-cta-large .aj-guest-cta-sub { font-size: 11px; max-width: 320px; margin: 0 auto; }
.aj-guest-cta-actions {
	display: flex; gap: 6px; flex-shrink: 0; width: 100%;
}
.aj-guest-cta-large .aj-guest-cta-actions { width: 100%; max-width: 320px; margin: 0 auto; }
@media (min-width: 480px) { .aj-guest-cta-actions { width: auto; } }

.aj-btn {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	padding: 8px 14px !important;
	border-radius: 8px !important;
	font-size: 11px !important; font-weight: 700 !important;
	text-decoration: none !important;
	font-family: var(--aj-font);
	transition: all 0.15s ease;
	flex: 1; min-width: 0;
}
.aj-btn-primary {
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark)) !important;
	color: #fff !important;
	box-shadow: 0 3px 10px rgba(142,42,57, 0.4);
}
.aj-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(142,42,57, 0.5); }
.aj-btn-ghost {
	background: var(--aj-surf) !important;
	color: var(--aj-text) !important;
	border: 1px solid var(--aj-border) !important;
}
.aj-btn-ghost:hover { background: var(--aj-surf-2) !important; }

.aj-guest-preview-note {
	margin: 0 12px 8px;
	padding: 8px 12px;
	background: rgba(154, 49, 64, 0.08);
	border: 1px solid rgba(154, 49, 64, 0.25);
	border-radius: 8px;
	color: #b45309;
	font-size: 11px; font-weight: 600;
	text-align: center;
}
body:not(.rb-light-trigger):not([data-theme="light"]) .arabjo-theme .aj-guest-preview-note {
	color: #fcd34d;
}

.aj-guest-match .aj-guest-predict-cta {
	display: flex !important;
	flex-direction: column; align-items: center; gap: 4px;
	padding: 8px 14px !important;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark)) !important;
	color: #fff !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	font-family: var(--aj-font);
	transition: all 0.15s ease;
	min-width: 90px;
}
.aj-guest-match .aj-guest-predict-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(142,42,57, 0.45);
	text-decoration: none !important;
}
.aj-guest-lock { font-size: 16px; }
.aj-guest-predict-text { font-size: 11px; font-weight: 700; }

/* ============================================================
 *  STANDALONE PARTICIPANTS-PREDICTIONS PAGE
 * ============================================================ */
.arabjo-mp-page { padding: 0; }
.aj-back-bar {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px;
	background: var(--aj-surf);
	border-bottom: 1px solid var(--aj-border);
}
.aj-back-btn {
	background: var(--aj-surf-2) !important;
	border: 1px solid var(--aj-border) !important;
	width: 32px !important; height: 32px !important;
	border-radius: 8px !important;
	color: var(--aj-text) !important;
	font-size: 16px !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	text-decoration: none !important; font-family: var(--aj-font);
}
.aj-back-info { flex: 1; }
.aj-back-title { font-size: 14px; font-weight: 700; color: var(--aj-text); }
.aj-back-sub { font-size: 10px; color: var(--aj-muted); }

.aj-mp-summary { background: var(--aj-hero-bg); padding: 14px; }
.aj-mp-card {
	background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 10px;
	display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
}
.aj-mp-team { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aj-mp-flag {
	width: 32px; height: 32px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; overflow: hidden;
}
.aj-mp-flag img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.aj-mp-team-name { font-size: 11px; font-weight: 700; color: #fff; }
.aj-mp-score { text-align: center; }
.aj-mp-vs { font-size: 9px; opacity: 0.8; letter-spacing: 1px; font-weight: 700; color: #fff; }
.aj-mp-result { font-size: 24px; font-weight: 900; line-height: 1; margin-top: 2px; color: #fff; }
.aj-mp-result-pending { font-size: 16px; font-weight: 700; opacity: 0.7; color: #fff; }
.aj-mp-status {
	font-size: 9px; padding: 2px 8px; border-radius: 5px; margin-top: 4px;
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.aj-mp-body { padding: 12px; }
.aj-mp-totals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.aj-mp-tot-card {
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 8px;
	padding: 10px;
	color: var(--aj-text);
}
.aj-mp-tot-head { font-size: 10px; color: var(--aj-muted); margin-bottom: 5px; }
.aj-mp-tot-val { font-size: 18px; font-weight: 900; color: var(--aj-brand); }
.aj-mp-tot-sub { font-size: 9px; color: var(--aj-muted); margin-top: 2px; }

.aj-mp-dist {
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	padding: 12px; margin-bottom: 12px;
}
.aj-mp-dist-title { font-size: 12px; font-weight: 700; margin-bottom: 10px; color: var(--aj-text); }
.aj-mp-dist-row {
	display: grid; grid-template-columns: 70px 1fr 40px; gap: 8px;
	align-items: center; margin-bottom: 7px; font-size: 10px;
}
.aj-mp-dist-row:last-child { margin-bottom: 0; }
.aj-mp-dist-lbl { color: var(--aj-text); font-weight: 500; }
.aj-mp-dist-track { height: 18px; background: var(--aj-input-bg); border-radius: 5px; overflow: hidden; }
.aj-mp-dist-fill {
	height: 100%; display: flex; align-items: center;
	padding: 0 6px; font-size: 9px; font-weight: 700; color: #fff;
	min-width: 22px; transition: width 0.5s ease;
}
.aj-mp-dist-fill.home { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.aj-mp-dist-fill.draw { background: linear-gradient(90deg, #6b7280, #4b5563); }
.aj-mp-dist-fill.away { background: linear-gradient(90deg, #1f2937, #374151); }
.aj-mp-dist-pct { text-align: left; color: var(--aj-muted); font-weight: 700; font-size: 11px; }

.aj-mp-locked-hint {
	padding: 12px;
	background: rgba(154, 49, 64, 0.08);
	border: 1px solid rgba(154, 49, 64, 0.25);
	border-radius: 8px; font-size: 11px;
	color: #b45309;
	text-align: center; margin-bottom: 12px;
}
body:not(.rb-light-trigger):not([data-theme="light"]) .arabjo-theme .aj-mp-locked-hint {
	color: #fcd34d;
}

.aj-mp-users-title {
	font-size: 11px; font-weight: 700; color: var(--aj-muted);
	margin-bottom: 8px; display: flex; justify-content: space-between;
}
.aj-mp-users-title b { color: var(--aj-text); }

.aj-mp-user-row {
	display: grid; grid-template-columns: auto 1fr auto auto;
	gap: 8px; align-items: center; padding: 9px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 8px; margin-bottom: 6px;
	color: var(--aj-text);
}
.aj-mp-user-row.me {
	border-color: var(--aj-brand);
	background: linear-gradient(90deg, rgba(142,42,57, 0.10), transparent);
}
.aj-mp-user-row.acc-full { border-right: 3px solid var(--aj-green); }
.aj-mp-user-row.acc-partial { border-right: 3px solid var(--aj-gold); }
.aj-mp-user-row.acc-wrong { border-right: 3px solid var(--aj-red); }

.aj-mp-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark));
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.aj-mp-user-info { min-width: 0; }
.aj-mp-user-name {
	font-size: 11px; font-weight: 700; color: var(--aj-text);
	display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.aj-me-tag { font-size: 8px; background: var(--aj-brand); padding: 1px 5px; border-radius: 3px; font-weight: 700; color: #fff; }
.aj-joker-tag {
	font-size: 8px; background: rgba(154, 49, 64, 0.15);
	color: var(--aj-gold-dark); padding: 1px 5px; border-radius: 3px; font-weight: 700;
}
.aj-mp-user-rank { font-size: 9px; color: var(--aj-muted); }
/* Meta line — sits under the name. Holds the showcase badges first
 * (so they're always visible) and then the "rank · points" caption.
 * Flex with gap keeps things readable, and wrapping is allowed if
 * a long name pushed everything to a tight width. */
.aj-mp-user-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	flex-wrap: wrap;
}
.aj-mp-user-meta .aj-showcase { margin: 0; }
.aj-mp-user-pred {
	display: inline-flex; align-items: center; gap: 3px;
	background: var(--aj-input-bg);
	padding: 4px 8px; border-radius: 6px;
	font-weight: 900; font-size: 13px;
	border: 1px solid var(--aj-border);
	color: var(--aj-text);
}
.aj-mp-user-pts { text-align: center; min-width: 36px; }
.aj-mp-pts-num { font-size: 13px; font-weight: 900; color: var(--aj-green); line-height: 1; }
.aj-mp-pts-num.zero { color: var(--aj-muted); }
.aj-mp-pts-lbl { font-size: 8px; color: var(--aj-muted); margin-top: 1px; }

/* ============================================================
 *  RANKING PAGE
 * ============================================================ */
.aj-rank-tabs {
	display: flex; gap: 6px; padding: 12px;
	background: transparent;
	border-bottom: 1px solid var(--aj-border);
	overflow-x: auto; scrollbar-width: none;
}
.aj-rank-tabs::-webkit-scrollbar { display: none; }
.aj-rank-tab {
	flex: 1; min-width: max-content;
	padding: 10px 14px !important;
	background: var(--aj-surf) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: 10px !important;
	font-size: 11px !important; font-weight: 700 !important;
	color: var(--aj-muted) !important;
	text-decoration: none !important;
	display: inline-flex !important; align-items: center; justify-content: center; gap: 5px;
	transition: all 0.15s ease; font-family: var(--aj-font);
}
.aj-rank-tab:hover { color: var(--aj-text) !important; border-color: var(--aj-brand) !important; text-decoration: none !important; }
.aj-rank-tab.active {
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark)) !important;
	border-color: var(--aj-brand) !important;
	color: #fff !important;
	box-shadow: 0 3px 10px rgba(142,42,57, 0.4);
}
.aj-rank-tab-ico { font-size: 13px; }

/* === Filter rows === */
.aj-filter-row {
	padding: 10px 12px;
	border-bottom: 1px solid var(--aj-border);
}
.aj-filter-label { font-size: 10px; color: var(--aj-muted); font-weight: 700; margin-bottom: 6px; }
.aj-filter-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.aj-filter-pills.aj-filter-scroll {
	flex-wrap: nowrap; overflow-x: auto;
	scrollbar-width: none; padding-bottom: 4px;
}
.aj-filter-pills.aj-filter-scroll::-webkit-scrollbar { display: none; }
.aj-filter-pill {
	display: inline-block;
	padding: 5px 11px !important;
	background: var(--aj-surf) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: 16px !important;
	font-size: 10px !important; font-weight: 600 !important;
	color: var(--aj-muted) !important;
	text-decoration: none !important;
	white-space: nowrap; flex-shrink: 0;
	transition: all 0.15s ease;
	font-family: var(--aj-font);
}
.aj-filter-pill:hover { color: var(--aj-text) !important; border-color: var(--aj-brand) !important; text-decoration: none !important; }
.aj-filter-pill.active {
	background: var(--aj-brand) !important;
	border-color: var(--aj-brand) !important;
	color: #fff !important;
}

/* === Podium === */
.aj-podium {
	display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
	padding: 14px 12px 4px; align-items: end;
}
.aj-podium-card {
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
	padding: 12px 8px;
	text-align: center;
	position: relative;
	transition: transform 0.2s;
	color: var(--aj-text);
}
.aj-podium-card.me { border: 2px solid var(--aj-brand); background: linear-gradient(180deg, rgba(142,42,57, 0.10), var(--aj-surf)); }
.aj-podium-card.p1 {
	order: 2;
	transform: translateY(-8px);
	border: 1.5px solid var(--aj-gold);
	background: linear-gradient(180deg, rgba(154, 49, 64, 0.10), var(--aj-surf));
	box-shadow: 0 6px 18px rgba(154, 49, 64, 0.15);
}
.aj-podium-card.p2 { order: 1; border-color: rgba(156, 163, 175, 0.4); }
.aj-podium-card.p3 { order: 3; border-color: rgba(180, 83, 9, 0.4); }
.aj-podium-medal { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.aj-podium-avatar {
	width: 36px; height: 36px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark));
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 900; color: #fff;
}
.aj-podium-card.p1 .aj-podium-avatar { background: linear-gradient(135deg, var(--aj-gold), var(--aj-gold-dark)); color: #1a0f00; }
.aj-podium-name {
	font-size: 11px; font-weight: 700;
	color: var(--aj-text);
	margin-bottom: 4px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aj-podium-score { font-size: 13px; font-weight: 900; color: var(--aj-brand); }
.aj-podium-card.p1 .aj-podium-score { color: var(--aj-gold-dark); font-size: 15px; }

/* === Ranking rows === */
.aj-rank-list { padding: 0 12px 20px; }
.aj-rank-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.aj-rank-row {
	display: grid;
	/* pos · avatar · identity(name+badge, flex) · score(prominent) */
	grid-template-columns: 32px 30px 1fr auto;
	gap: 8px; align-items: center;
	padding: 9px 10px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	transition: all 0.15s;
	color: var(--aj-text);
}
.aj-rank-row:hover { background: var(--aj-surf-2); }
.aj-rank-row.me {
	border-color: var(--aj-brand);
	background: linear-gradient(90deg, rgba(142,42,57, 0.10), transparent);
}
.aj-rank-pos { font-size: 13px; font-weight: 900; color: var(--aj-brand); text-align: center; }
.aj-rank-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark));
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 900; color: #fff;
	overflow: hidden;
}
/* Identity = name + showcase badge inline, right after the name. */
.aj-rank-identity {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	overflow: hidden;
}
.aj-rank-name-row {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow: hidden;
}
.aj-rank-name {
	font-size: 12px; font-weight: 700;
	color: var(--aj-text);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-rank-identity .aj-showcase {
	margin: 0;
	flex-shrink: 0;
}
/* Compact title under the name in ranking rows. */
.aj-rank-identity .aj-titles-compact {
	display: flex;
	min-width: 0;
	overflow: hidden;
}
/* Simple, clean score — gold number with a small label, no heavy box. */
.aj-rank-score {
	flex-shrink: 0;
	display: flex;
	align-items: baseline;
	gap: 3px;
	min-width: 0;
}
.aj-rank-score-num {
	font-size: 16px;
	font-weight: 900;
	color: var(--aj-gold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.aj-rank-score-lbl {
	font-size: 9px;
	color: var(--aj-muted);
	font-weight: 600;
}

@media (max-width: 380px) {
	.aj-rank-row { grid-template-columns: 28px 28px 1fr auto; gap: 6px; padding: 8px 8px; }
	.aj-rank-name { font-size: 11px; }
	.aj-rank-score-num { font-size: 15px; }
}

/* ============================================================
 *  MATCHES PAGE
 * ============================================================ */
.aj-matches-filters {
	background: var(--aj-surf);
	border-bottom: 1px solid var(--aj-border);
}
.aj-matches-list { padding: 0 0 20px; }
.aj-match.aj-simple .aj-score-display {
	font-size: 18px; font-weight: 900;
	color: var(--aj-text);
	background: var(--aj-input-bg);
	padding: 6px 14px; border-radius: 10px;
	border: 1px solid var(--aj-border);
}
.aj-match.aj-simple .aj-pending-score { font-size: 15px; font-weight: 700; color: var(--aj-muted); }
.aj-time-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--aj-muted); font-weight: 600; }
.aj-matchtype-tag { font-size: 10px; color: var(--aj-muted); font-weight: 600; }

/* === Empty state === */
.aj-empty-state {
	padding: 40px 20px;
	text-align: center;
	color: var(--aj-muted);
	font-size: 13px; font-weight: 600;
}

/* ============================================================
 *  TEAMS PAGE
 * ============================================================ */
.aj-teams-body { padding: 12px; }
.aj-group-block { margin-bottom: 18px; }
.aj-group-block:last-child { margin-bottom: 0; }

.aj-group-title {
	font-size: 13px; font-weight: 800;
	color: var(--aj-text);
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 10px; padding: 8px 12px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
}
.aj-group-icon { font-size: 16px; }
.aj-group-count {
	margin-right: auto;
	background: var(--aj-brand);
	color: #fff;
	padding: 1px 8px;
	border-radius: 12px;
	font-size: 10px; font-weight: 800;
}

.aj-teams-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.aj-team-card {
	display: flex !important;
	flex-direction: column; align-items: center; gap: 8px;
	padding: 14px 8px !important;
	background: var(--aj-surf) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: 12px !important;
	text-decoration: none !important;
	color: var(--aj-text) !important;
	transition: all 0.15s ease;
}
.aj-team-card:hover {
	border-color: var(--aj-brand) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(142,42,57, 0.15);
	text-decoration: none !important;
}
.aj-team-card-flag {
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	font-size: 28px;
	background: var(--aj-surf-2);
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--aj-border);
}
.aj-team-card-flag img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.aj-team-card-name {
	font-size: 11px; font-weight: 700;
	color: var(--aj-text);
	text-align: center; line-height: 1.2;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Single team profile */
.aj-team-hero {
	padding: 24px 16px;
	background: var(--aj-hero-bg);
	text-align: center;
	position: relative; overflow: hidden;
}
.aj-team-hero::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 20%, var(--aj-hero-overlay-1), transparent 60%);
}
.aj-team-hero-logo {
	width: 100px; height: 100px;
	margin: 0 auto 12px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 48px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	position: relative; z-index: 1; overflow: hidden;
}
.aj-team-hero-logo img { width: 80%; height: 80%; object-fit: contain; }
.aj-team-hero-name {
	font-size: 22px !important; font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 8px !important;
	position: relative; z-index: 1;
}
.aj-team-hero-group {
	display: inline-flex !important; align-items: center; gap: 5px;
	padding: 4px 12px !important;
	background: rgba(0, 0, 0, 0.35) !important;
	color: #fff !important;
	border-radius: 16px !important;
	font-size: 11px !important; font-weight: 600 !important;
	text-decoration: none !important;
	position: relative; z-index: 1;
}
.aj-team-bio {
	margin-top: 12px; font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5; max-width: 400px;
	margin-inline: auto;
	position: relative; z-index: 1;
}
.aj-team-section-title {
	font-size: 13px; font-weight: 800;
	color: var(--aj-text);
	display: flex; align-items: center; gap: 8px;
	padding: 14px 12px 8px;
}
.aj-team-section-icon { font-size: 16px; }
.aj-team-section-count {
	margin-right: auto;
	background: var(--aj-brand);
	color: #fff;
	padding: 1px 8px;
	border-radius: 12px;
	font-size: 10px; font-weight: 800;
}

/* ============================================================
 *  LEGACY CLEANUP
 * ============================================================ */
.arabjo-theme .matchtype, .arabjo-theme .matchdate,
.arabjo-theme .user-score, .arabjo-theme .matchstats,
.arabjo-theme .match-card-header, .arabjo-theme .match-card-footer,
.arabjo-theme .fp-icon, .arabjo-theme .actual-score:empty { display: none !important; }
.arabjo-theme .fp-prediction-form { background: transparent; padding: 0; border: none; }

.arabjo-theme input[type="submit"].submit-button,
.arabjo-theme .save-button {
	display: block;
	width: calc(100% - 24px);
	margin: 16px 12px 12px !important;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark)) !important;
	color: #fff !important;
	border: none !important;
	padding: 13px !important;
	border-radius: 12px !important;
	font-size: 13px !important; font-weight: 900 !important;
	cursor: pointer !important;
	font-family: var(--aj-font) !important;
	box-shadow: 0 6px 16px rgba(142,42,57, 0.5) !important;
	text-align: center;
}

/* ============================================================
 *  RESPONSIVE
 * ============================================================ */
@media (min-width: 768px) {
	.aj-hero { padding: 18px; }
	.aj-hero-title { font-size: 22px; }
	.aj-hero-stat-num { font-size: 20px; }
	.aj-hero-stat-lbl { font-size: 11px; }
	.aj-match-body { padding: 16px 14px; }
	.aj-flag { width: 50px; height: 50px; font-size: 22px; }
	.aj-team-name { font-size: 13px; }
	.arabjo-theme .aj-score-row input { width: 36px !important; height: 36px !important; font-size: 22px !important; }
}

/* ============================================================
 *  v3.4 — Questions, Statistics, Badges, Share
 * ============================================================ */

/* === SECTION TITLE (shared by questions, stats, badges) === */
.aj-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 12px 8px;
	font-size: 13px;
	font-weight: 800;
	color: var(--aj-text);
}
.aj-section-icon { font-size: 16px; }
.aj-section-sub {
	margin-right: auto;
	font-size: 10px;
	font-weight: 600;
	color: var(--aj-muted);
}

/* ============================================================
 *  BONUS QUESTIONS
 * ============================================================ */
.aj-questions-section {
	margin-top: 18px;
	padding-top: 4px;
	border-top: 1px solid var(--aj-border);
}
.arabjo-theme .questions-block {
	padding: 0 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.arabjo-theme .aj-question {
	background: var(--aj-surf) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: var(--aj-radius) !important;
	padding: 0 !important;
	overflow: hidden;
	color: var(--aj-text);
}
.arabjo-theme .aj-question.closed {
	opacity: 0.7;
}
.aj-question-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: var(--aj-surf-strip);
	border-bottom: 1px solid var(--aj-border);
	font-size: 10px;
	color: var(--aj-muted);
}
.aj-question-nr {
	background: var(--aj-brand);
	color: #fff;
	padding: 2px 8px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 800;
}
.aj-question-nr .nr {
	color: #fff;
}
.aj-question-deadline {
	font-size: 10px;
	color: var(--aj-muted);
	font-weight: 600;
}
.aj-question-body { padding: 12px; }
.aj-question-text {
	font-size: 13px;
	font-weight: 700;
	color: var(--aj-text);
	line-height: 1.4;
	margin-bottom: 10px;
}
.aj-question-body .bonus.image {
	margin: 0 0 10px;
}
.aj-question-body .bonus.image img {
	max-width: 100%;
	border-radius: 8px;
}
.aj-question-answer {
	margin-top: 8px;
}

/* The actual input fields generated by the plugin */
.arabjo-theme .aj-question input[type="text"],
.arabjo-theme .aj-question input[type="number"],
.arabjo-theme .aj-question textarea,
.arabjo-theme .aj-question select {
	width: 100%;
	background: var(--aj-input-bg) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	color: var(--aj-text) !important;
	font-family: var(--aj-font) !important;
	font-size: 13px !important;
	box-shadow: none !important;
	outline: none !important;
}
.arabjo-theme .aj-question input[type="text"]:focus,
.arabjo-theme .aj-question textarea:focus {
	border-color: var(--aj-brand) !important;
}
.arabjo-theme .aj-question textarea {
	min-height: 70px;
	resize: vertical;
}
.arabjo-theme .aj-question label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	margin: 4px 0;
	background: var(--aj-input-bg);
	border: 1px solid var(--aj-border);
	border-radius: 8px;
	font-size: 12px;
	color: var(--aj-text);
	cursor: pointer;
	transition: all 0.15s ease;
}
.arabjo-theme .aj-question label:hover {
	border-color: var(--aj-brand);
}
.arabjo-theme .aj-question input[type="radio"],
.arabjo-theme .aj-question input[type="checkbox"] {
	width: auto !important;
	margin: 0;
	accent-color: var(--aj-brand);
}

/* User answer display (closed state) */
.arabjo-theme .aj-question .answer {
	padding: 8px 10px;
	background: var(--aj-input-bg);
	border-radius: 8px;
	font-size: 12px;
	color: var(--aj-text);
	font-weight: 600;
	margin: 0;
}
.arabjo-theme .aj-question .correct-answer {
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.30);
	color: var(--aj-green);
	margin-top: 6px;
}
.arabjo-theme .aj-question .no-answer::after {
	content: 'لا توجد إجابة';
	color: var(--aj-muted);
	font-style: italic;
}

.aj-question-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: var(--aj-surf-strip);
	border-top: 1px solid var(--aj-border);
	font-size: 10px;
	color: var(--aj-muted);
	flex-wrap: wrap;
	gap: 6px;
}
.aj-question-points {
	font-weight: 700;
	color: var(--aj-gold-dark);
}
.aj-question-foot .reminder {
	background: rgba(154, 49, 64, 0.15);
	color: var(--aj-gold-dark);
	padding: 2px 8px;
	border-radius: 5px;
	font-weight: 700;
	font-size: 10px;
}
.aj-question-foot .question-stats-link {
	margin-right: auto;
}
.aj-question-foot .question-stats-link img {
	width: 14px;
	height: 14px;
	opacity: 0.6;
}

/* ============================================================
 *  STATISTICS PAGE
 * ============================================================ */
.arabjo-stats-page .aj-hero-stats { background: var(--aj-hero-bg); }

.aj-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding: 14px 12px;
}
@media (min-width: 600px) {
	.aj-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.aj-stat-card {
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
	padding: 14px 10px;
	text-align: center;
	color: var(--aj-text);
}
.aj-stat-card-icon { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.aj-stat-card-num {
	font-size: 22px;
	font-weight: 900;
	color: var(--aj-brand);
	line-height: 1;
}
.aj-stat-card-lbl {
	font-size: 11px;
	font-weight: 700;
	color: var(--aj-text);
	margin-top: 4px;
}
.aj-stat-card-sub {
	font-size: 9px;
	color: var(--aj-muted);
	margin-top: 2px;
}

/* === BADGES === */
.aj-badges-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
	padding: 0 12px 12px;
}
.aj-badge {
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
	padding: 12px 8px;
	text-align: center;
	color: var(--aj-text);
	transition: transform 0.15s ease;
}
.aj-badge:hover { transform: translateY(-2px); }
.aj-badge.earned {
	background: linear-gradient(180deg, rgba(154, 49, 64, 0.10), var(--aj-surf));
	border-color: rgba(154, 49, 64, 0.40);
	box-shadow: 0 3px 12px rgba(154, 49, 64, 0.15);
}
.aj-badge.locked {
	opacity: 0.45;
	filter: grayscale(80%);
}
.aj-badge-icon { font-size: 32px; line-height: 1; margin-bottom: 4px; }
.aj-badge-name {
	font-size: 11px;
	font-weight: 800;
	color: var(--aj-text);
	margin-bottom: 2px;
}
.aj-badge.earned .aj-badge-name { color: var(--aj-gold-dark); }
.aj-badge-desc {
	font-size: 9px;
	color: var(--aj-muted);
	line-height: 1.3;
}

/* === ROUND ACCURACY CHART === */
.aj-rounds-chart {
	padding: 0 12px 12px;
}
.aj-round-row {
	display: grid;
	grid-template-columns: 80px 1fr 40px;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
	font-size: 11px;
}
.aj-round-name {
	color: var(--aj-text);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aj-round-bar-wrap {
	height: 22px;
	background: var(--aj-input-bg);
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--aj-border);
}
.aj-round-bar {
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 8px;
	background: linear-gradient(90deg, var(--aj-brand-dark), var(--aj-brand));
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	transition: width 0.5s ease;
	min-width: 0;
}
.aj-round-pct {
	font-size: 11px;
	font-weight: 800;
	color: var(--aj-brand);
	text-align: left;
}

/* === SHARE BLOCK === */
.aj-share-block {
	margin: 18px 12px 24px;
	padding: 14px;
	background: linear-gradient(135deg, rgba(142,42,57, 0.10), var(--aj-surf));
	border: 1px solid rgba(142,42,57, 0.25);
	border-radius: 12px;
	text-align: center;
}
.aj-share-title {
	font-size: 12px;
	font-weight: 800;
	color: var(--aj-text);
	margin-bottom: 10px;
}
.aj-share-buttons {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}
.aj-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 12px !important;
	border-radius: 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #fff !important;
	text-decoration: none !important;
	font-family: var(--aj-font);
	transition: all 0.15s ease;
}
.aj-share-btn:hover {
	transform: translateY(-1px);
	text-decoration: none !important;
}
.aj-share-btn.fb { background: #1877F2 !important; }
.aj-share-btn.wa { background: #25D366 !important; }
.aj-share-btn.tw { background: #1DA1F2 !important; }
.aj-share-btn.fb:hover { box-shadow: 0 3px 10px rgba(24, 119, 242, 0.4); }
.aj-share-btn.wa:hover { box-shadow: 0 3px 10px rgba(37, 211, 102, 0.4); }
.aj-share-btn.tw:hover { box-shadow: 0 3px 10px rgba(29, 161, 242, 0.4); }

/* Countdown critical state (< 5 minutes) — strong red pulse */
.aj-countdown.critical {
	background: var(--aj-red) !important;
	border-color: var(--aj-red) !important;
	color: #fff !important;
	animation: aj-pulse 0.8s infinite;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
}
@keyframes aj-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
	70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ============================================================
 *  v3.4.2 — Quick Links, Predict CTA, User Profile
 * ============================================================ */

/* === QUICK LINKS (below hero, for logged-in users) === */
.aj-quick-links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding: 8px 12px;
	overflow-x: auto;
	scrollbar-width: none;
}
.aj-quick-links::-webkit-scrollbar { display: none; }
.aj-quick-link {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 6px !important;
	background: var(--aj-surf) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	color: var(--aj-text) !important;
	font-family: var(--aj-font);
	transition: all 0.15s ease;
}
.aj-quick-link:hover {
	border-color: var(--aj-brand) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(142,42,57, 0.15);
	text-decoration: none !important;
}
.aj-quick-icon { font-size: 20px; line-height: 1; }
.aj-quick-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--aj-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* === PREDICT CTA in match center (matches/teams page) === */
.aj-predict-cta {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 14px !important;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark)) !important;
	color: #fff !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	font-family: var(--aj-font);
	min-width: 90px;
	box-shadow: 0 3px 10px rgba(142,42,57, 0.35);
	transition: all 0.15s ease;
}
.aj-predict-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(142,42,57, 0.5);
	text-decoration: none !important;
}
.aj-predict-cta-icon { font-size: 18px; line-height: 1; }
.aj-predict-cta-text { font-size: 11px; font-weight: 800; }
.aj-predict-cta-time { font-size: 10px; opacity: 0.85; font-weight: 600; }

/* === USER PROFILE PAGE === */
.arabjo-profile-page { color: var(--aj-text); }
.aj-profile-hero {
	padding: 24px 16px;
	background: var(--aj-hero-bg);
	text-align: center;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.aj-profile-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.15), transparent 60%);
	pointer-events: none;
}
.aj-profile-avatar {
	width: 90px; height: 90px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--aj-gold), var(--aj-gold-dark));
	display: flex; align-items: center; justify-content: center;
	font-size: 38px; font-weight: 900;
	color: #1a0f00;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	position: relative;
	z-index: 1;
}
.aj-profile-name {
	font-size: 20px !important; font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 6px !important;
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.aj-profile-rank {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 16px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	position: relative;
	z-index: 1;
	margin-bottom: 12px;
}
.aj-profile-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 16px;
	position: relative;
	z-index: 1;
}
.aj-profile-stat {
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 8px;
	padding: 10px 4px;
	text-align: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.aj-profile-stat-num {
	font-size: 18px;
	font-weight: 900;
	color: #fff;
	line-height: 1;
}
.aj-profile-stat-lbl {
	font-size: 10px;
	opacity: 0.85;
	color: #fff;
	margin-top: 4px;
}

.aj-profile-recent {
	padding: 0 12px 20px;
}
.aj-profile-pred {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 8px;
	align-items: center;
	padding: 10px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	margin-bottom: 6px;
	color: var(--aj-text);
}
.aj-profile-pred.acc-full { border-right: 3px solid var(--aj-green); }
.aj-profile-pred.acc-partial { border-right: 3px solid var(--aj-gold); }
.aj-profile-pred.acc-wrong { border-right: 3px solid var(--aj-red); }

.aj-profile-pred-teams {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--aj-text);
	overflow: hidden;
}
.aj-profile-pred-team {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aj-profile-pred-vs {
	color: var(--aj-muted);
	font-weight: 500;
	font-size: 9px;
}
.aj-profile-pred-scores {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 10px;
}
.aj-profile-pred-user {
	background: var(--aj-input-bg);
	padding: 2px 8px;
	border-radius: 5px;
	font-weight: 800;
	color: var(--aj-text);
}
.aj-profile-pred-real {
	font-size: 9px;
	color: var(--aj-muted);
	font-weight: 600;
}
.aj-profile-pred-points {
	min-width: 36px;
	text-align: center;
	font-size: 13px;
	font-weight: 900;
}
.aj-profile-pred-points.pos { color: var(--aj-green); }
.aj-profile-pred-points.zero { color: var(--aj-muted); }

/* Make podium and rank rows look clickable */
a.aj-rank-row { text-decoration: none !important; cursor: pointer; }
a.aj-rank-row:hover { background: var(--aj-surf-2); }
a.aj-podium-card { text-decoration: none !important; cursor: pointer; }

/* Empty state for predictions page (no open matches) */
.aj-empty-predictions {
	margin: 14px 12px 24px;
	padding: 32px 20px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	text-align: center;
}
.aj-empty-icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 14px;
	opacity: 0.9;
}
.aj-empty-title {
	font-size: 14px;
	font-weight: 800;
	color: var(--aj-text);
	margin-bottom: 6px;
}
.aj-empty-sub {
	font-size: 11px;
	color: var(--aj-muted);
	line-height: 1.5;
	margin-bottom: 16px;
	max-width: 360px;
	margin-inline: auto;
}
.aj-empty-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.aj-empty-actions .aj-btn {
	flex: 0 1 auto;
	min-width: 140px;
}

/* ============================================================
 *  v3.5.0 — Round dividers, Steppers, Stats tabs, FAB
 * ============================================================ */

/* === ROUND DIVIDER (section header between matchtypes) === */
.aj-round-divider {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 18px 12px 8px;
	padding: 12px 14px;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark));
	border-radius: 12px;
	box-shadow: 0 3px 12px rgba(142,42,57, 0.25);
	position: relative;
	overflow: hidden;
}
.aj-round-divider::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%);
	pointer-events: none;
}
.aj-round-divider-main {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 1;
}
.aj-round-divider-icon {
	width: 32px; height: 32px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.aj-round-divider-text {
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	flex: 1;
}
/* First divider has no top margin */
.aj-round-divider:first-child { margin-top: 0; }

/* === ROUND SPONSOR CREDIT (inside the divider) ===
 *
 * A single line under the round name: "🎁 جوائز هذه الجولة مقدمة من …
 * SponsorName ↗". Sits inside a translucent pill that contrasts gently
 * with the burgundy header. Wraps cleanly on narrow screens — label
 * drops to its own line and the name + logo stay together. */
.aj-round-sponsor-credit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	position: relative;
	z-index: 1;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.aj-round-sponsor-label {
	font-size: 14px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.92);
	white-space: nowrap;
}
.aj-round-sponsor-logo {
	width: 20px;
	height: 20px;
	object-fit: contain;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.85);
	padding: 1px;
}
.aj-round-sponsor-name {
	font-size: 14px;
	font-weight: 800;
	color: var(--aj-gold) !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.aj-round-sponsor-name:hover {
	color: #fff !important;
	text-decoration: underline !important;
}
.aj-round-sponsor-name .aj-sponsor-ext {
	font-size: 10px;
	opacity: 0.85;
}

@media (max-width: 480px) {
	.aj-round-sponsor-credit { padding: 6px 8px; }
	.aj-round-sponsor-label { font-size: 10px; }
	.aj-round-sponsor-name { font-size: 11px; }
}

/* Round name prefix inside status pill */
.aj-round-pfx {
	color: var(--aj-muted);
	font-weight: 600;
}

/* === PREDICTION INPUTS (clear & simple) === */
.aj-score-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--aj-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
	text-align: center;
}
.arabjo-theme .aj-match .aj-pred-input,
.arabjo-theme .aj-match input[type="number"] {
	width: 42px !important;
	height: 42px !important;
	background: var(--aj-input-bg) !important;
	border: 2px solid var(--aj-border) !important;
	border-radius: 9px !important;
	padding: 0 !important;
	text-align: center !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--aj-text) !important;
	font-family: var(--aj-font) !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	outline: none !important;
	transition: all 0.2s ease;
}
.arabjo-theme .aj-pred-input::-webkit-outer-spin-button,
.arabjo-theme .aj-pred-input::-webkit-inner-spin-button,
.arabjo-theme .aj-match input[type="number"]::-webkit-outer-spin-button,
.arabjo-theme .aj-match input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.arabjo-theme .aj-pred-input.is-empty,
.arabjo-theme .aj-match input[type="number"].is-empty {
	border-color: rgba(142,42,57, 0.55) !important;
	box-shadow: 0 0 0 2px rgba(142,42,57, 0.08) !important;
}
/* Filled state — subtle "soft" confirmation, not a loud green */
.arabjo-theme .aj-pred-input.has-value,
.arabjo-theme .aj-match input[type="number"].has-value {
	border-color: rgba(255, 255, 255, 0.18) !important;
	background: var(--aj-input-bg) !important;
	color: var(--aj-text) !important;
}
.arabjo-theme[data-aj-mode="light"] .aj-pred-input.has-value,
.arabjo-theme[data-aj-mode="light"] .aj-match input[type="number"].has-value {
	border-color: rgba(0, 0, 0, 0.18) !important;
}
.arabjo-theme .aj-pred-input:focus,
.arabjo-theme .aj-match input[type="number"]:focus {
	border-color: var(--aj-gold) !important;
	box-shadow: 0 0 0 3px rgba(154, 49, 64, 0.20) !important;
}
.arabjo-theme .aj-pred-input::placeholder {
	font-size: 18px;
	color: var(--aj-brand);
	opacity: 0.55;
	font-weight: 700;
}

/* Compact hero variant (tournament-only) */
.aj-hero-compact {
	padding: 20px 14px 18px;
	text-align: center;
}
.aj-hero-tournament {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.aj-hero-trophy { font-size: 16px; }
.aj-hero-tournament-name { font-size: 13px; font-weight: 800; }
.aj-hero-compact .aj-hero-sub {
	margin-top: 10px;
	font-size: 12px;
	opacity: 0.85;
}
.aj-hero-compact .aj-hero-stats {
	margin-top: 14px;
}

/* "No prediction" pill in recent matches */
.aj-profile-pred-user.aj-no-pred {
	background: rgba(154, 49, 64, 0.15) !important;
	color: var(--aj-gold-dark) !important;
	font-style: italic;
	font-size: 9px !important;
	font-weight: 700 !important;
	padding: 3px 8px !important;
}
.aj-profile-pred.acc-none { border-right-color: rgba(154, 49, 64, 0.6); }

/* Participant rows as links */
a.aj-mp-user-row { text-decoration: none !important; }
a.aj-mp-user-row:hover { background: var(--aj-surf-2); }

/* === STATS TABS === */
.aj-stats-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin: 14px 12px 0;
	padding: 4px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
}
.aj-stats-tab {
	background: transparent;
	border: 0;
	padding: 10px 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--aj-muted);
	cursor: pointer;
	border-radius: 7px;
	transition: all 0.15s ease;
	font-family: var(--aj-font);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	white-space: nowrap;
}
.aj-stats-tab:hover {
	color: var(--aj-text);
}
.aj-stats-tab.active {
	background: var(--aj-brand);
	color: #fff;
	box-shadow: 0 2px 8px rgba(142,42,57, 0.30);
}
.aj-tab-counter {
	display: inline-block;
	min-width: 18px;
	padding: 0 5px;
	background: rgba(255, 255, 255, 0.20);
	border-radius: 10px;
	font-size: 9px;
	font-weight: 800;
}
.aj-stats-tab:not(.active) .aj-tab-counter {
	background: var(--aj-surf-2);
	color: var(--aj-text);
}

/* === STATS PANELS === */
.aj-stats-panel {
	display: none;
	margin-top: 14px;
	animation: aj-panel-fade 0.25s ease;
}
.aj-stats-panel.active {
	display: block;
}
@keyframes aj-panel-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Quick links — 3 columns variant for stats page */
.aj-quick-links-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* === FAB (floating action button) === */
.aj-fab {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
	border: 0;
	font-size: 22px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(142,42,57, 0.40);
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
	font-family: var(--aj-font);
	-webkit-tap-highlight-color: transparent;
}
.aj-fab.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.aj-fab:hover {
	background: var(--aj-brand-dark);
	box-shadow: 0 6px 20px rgba(142,42,57, 0.50);
	transform: translateY(-2px);
}


/* ============================================================
 *  v3.5.2 — Profile redesign, Rules page, Active quick links
 * ============================================================ */

/* === PROFILE HEADER (logged user identity + logout) === */
.aj-hero-profile {
	padding: 18px 14px;
}
.aj-profile-id {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
}
.aj-profile-id-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--aj-gold), var(--aj-gold-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 900;
	color: #1a0f00;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
	flex-shrink: 0;
}
.aj-profile-id-info {
	flex: 1;
	min-width: 0;
}
.aj-profile-id-name {
	font-size: 16px;
	font-weight: 900;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aj-profile-id-sub {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
}
.aj-logout-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 14px !important;
	background: rgba(0, 0, 0, 0.30) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 10px !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	transition: all 0.15s ease;
	font-family: var(--aj-font);
	flex-shrink: 0;
}
.aj-logout-btn:hover {
	background: rgba(239, 68, 68, 0.85) !important;
	border-color: var(--aj-red) !important;
	text-decoration: none !important;
}
.aj-logout-icon { font-size: 14px; }

/* === UPDATED QUICK LINKS — works on any page, supports active state === */
.aj-quick-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
	gap: 6px;
	padding: 10px 12px;
	overflow-x: auto;
	scrollbar-width: none;
}
.aj-quick-link.is-active {
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark)) !important;
	border-color: var(--aj-brand) !important;
	box-shadow: 0 4px 12px rgba(142,42,57, 0.30);
	pointer-events: none;
}
.aj-quick-link.is-active .aj-quick-icon,
.aj-quick-link.is-active .aj-quick-label {
	color: #fff !important;
}

/* === RULES PAGE === */
.arabjo-rules-page { color: var(--aj-text); }
.aj-rules-content {
	padding: 16px 12px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.aj-rule-card {
	display: flex;
	gap: 14px;
	padding: 16px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	transition: all 0.2s ease;
}
.aj-rule-card:hover {
	border-color: rgba(142,42,57, 0.40);
	transform: translateY(-1px);
}
.aj-rule-card.aj-rule-cta {
	background: linear-gradient(135deg, rgba(142,42,57, 0.15), var(--aj-surf));
	border-color: rgba(142,42,57, 0.45);
}
.aj-rule-icon {
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark));
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
	box-shadow: 0 3px 10px rgba(142,42,57, 0.25);
}
.aj-rule-body { flex: 1; min-width: 0; }
.aj-rule-title {
	font-size: 15px !important;
	font-weight: 900 !important;
	color: var(--aj-text) !important;
	margin: 0 0 8px !important;
}
.aj-rule-body p {
	font-size: 12px;
	line-height: 1.7;
	color: var(--aj-text);
	margin: 0 0 8px;
}
.aj-rule-body p:last-child { margin-bottom: 0; }
.aj-rule-note {
	background: rgba(154, 49, 64, 0.10);
	border-right: 3px solid var(--aj-gold);
	padding: 8px 10px !important;
	border-radius: 6px;
	font-size: 11px !important;
	color: var(--aj-gold-dark) !important;
}

/* Points grid inside scoring rule card */
.aj-rules-points-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
	margin-top: 8px;
}
.aj-rule-point {
	background: var(--aj-input-bg);
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	padding: 10px 8px;
	text-align: center;
}
.aj-rule-point-num {
	font-size: 24px;
	font-weight: 900;
	color: var(--aj-gold);
	line-height: 1;
}
.aj-rule-point-lbl {
	font-size: 10px;
	color: var(--aj-muted);
	font-weight: 600;
	margin-top: 2px;
}
.aj-rule-point-desc {
	font-size: 10px;
	color: var(--aj-text);
	margin-top: 6px;
	line-height: 1.3;
}


/* ============================================================
 *  v4.0.0 — Avatar upload, full match list
 * ============================================================ */

/* === AVATAR with edit button === */
.aj-profile-id-avatar {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: visible;
	background: linear-gradient(135deg, var(--aj-gold), var(--aj-gold-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 900;
	color: #1a0f00;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
	flex-shrink: 0;
}
.aj-profile-id-avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	z-index: 1;
}
.aj-profile-id-avatar.has-image { background: transparent; }
.aj-avatar-letter {
	font-size: 22px;
	font-weight: 900;
	color: #1a0f00;
}

.aj-avatar-edit {
	position: absolute;
	bottom: -4px;
	left: -4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
	border: 2px solid var(--aj-surf);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	padding: 0;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
	transition: all 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.aj-avatar-edit:hover {
	background: var(--aj-brand-dark);
	transform: scale(1.1);
}
.aj-avatar-edit-icon { line-height: 1; }

/* Status messages under avatar */
.aj-avatar-status {
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	position: relative;
	z-index: 1;
}
.aj-status-loading {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.aj-status-success {
	background: rgba(34, 197, 94, 0.20);
	color: #fff;
	border: 1px solid rgba(34, 197, 94, 0.50);
}
.aj-status-error {
	background: rgba(239, 68, 68, 0.20);
	color: #fff;
	border: 1px solid rgba(239, 68, 68, 0.50);
}

/* Member profile avatar (other users) — supports image too */
.aj-profile-avatar {
	overflow: hidden;
}
.aj-profile-avatar.has-image {
	background: transparent !important;
}
.aj-profile-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}


/* Rank/Podium/Participants avatar images */
.aj-rank-avatar,
.aj-podium-avatar,
.aj-mp-avatar {
	overflow: hidden;
}
.aj-rank-avatar img,
.aj-podium-avatar img,
.aj-mp-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}


/* ============================================================
 *  v4.1.0 — Points breakdown (matches + achievements)
 * ============================================================ */
.aj-points-breakdown {
	margin: 14px 12px 0;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	overflow: hidden;
}
.aj-points-breakdown-title {
	padding: 10px 14px;
	background: var(--aj-surf-strip);
	border-bottom: 1px solid var(--aj-border);
	font-size: 12px;
	font-weight: 800;
	color: var(--aj-text);
	display: flex;
	align-items: center;
	gap: 6px;
}
.aj-points-breakdown-rows {
	display: flex;
	flex-direction: column;
}
.aj-points-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--aj-border);
}
.aj-points-row:last-child { border-bottom: 0; }
.aj-points-row-icon {
	width: 36px; height: 36px;
	background: var(--aj-input-bg);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.aj-points-row-info { flex: 1; min-width: 0; }
.aj-points-row-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--aj-text);
}
.aj-points-row-sub {
	font-size: 10px;
	color: var(--aj-muted);
	margin-top: 2px;
}
.aj-points-row-num {
	font-size: 20px;
	font-weight: 900;
	color: var(--aj-text);
	white-space: nowrap;
}
.aj-points-row-total {
	background: linear-gradient(135deg, rgba(142,42,57, 0.10), transparent);
	border-top: 2px solid var(--aj-brand);
}
.aj-points-row-total .aj-points-row-icon {
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark));
	color: #fff;
}
.aj-points-row-total .aj-points-row-num {
	color: var(--aj-brand);
}


/* ============================================================
 *  v5.0.0 — Showcase system (badges next to name)
 * ============================================================ */

/* Compact badge icons displayed inline with names */
.aj-showcase {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 0 6px;
	vertical-align: middle;
}
.aj-showcase-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	font-size: 11px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	transition: transform 0.15s ease;
	position: relative;
}
.arabjo-theme[data-aj-mode="light"] .aj-showcase-badge {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.08);
}
.aj-showcase-badge.tier-prestige {
	background: linear-gradient(135deg, rgba(154, 49, 64, 0.20), rgba(142,42,57, 0.20));
	border-color: var(--aj-gold);
	box-shadow: 0 0 6px rgba(154, 49, 64, 0.35);
}
.aj-showcase-badge:hover {
	transform: scale(1.2);
}
.aj-showcase-small .aj-showcase-badge {
	width: 16px;
	height: 16px;
	font-size: 10px;
}

/* === Showcase picker (in profile page) === */
.aj-showcase-picker {
	margin: 8px 12px 0;
	padding: 14px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
}
.aj-showcase-hint {
	font-size: 12px;
	color: var(--aj-muted);
	margin: 0 0 12px;
	text-align: center;
}
.aj-showcase-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.aj-showcase-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 8px;
	background: var(--aj-input-bg);
	border: 2px solid var(--aj-border);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: var(--aj-font);
	color: var(--aj-text);
	-webkit-tap-highlight-color: transparent;
}
.aj-showcase-item i {
	font-size: 22px;
}
.aj-showcase-item-name {
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--aj-text);
}
.aj-showcase-item:hover {
	border-color: var(--aj-brand);
	transform: translateY(-2px);
}
.aj-showcase-item.is-picked {
	border-color: var(--aj-gold);
	background: rgba(154, 49, 64, 0.10);
	box-shadow: 0 4px 12px rgba(154, 49, 64, 0.20);
}
.aj-showcase-item.tier-prestige {
	background: linear-gradient(135deg, rgba(154, 49, 64, 0.06), rgba(142,42,57, 0.06));
}
.aj-showcase-item.tier-prestige::before {
	content: '👑';
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 12px;
}
.aj-showcase-check {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 18px;
	height: 18px;
	background: var(--aj-gold);
	color: #1a0f00;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}
.aj-showcase-status {
	margin-top: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}
.aj-showcase-status.aj-status-loading {
	background: var(--aj-surf-2);
	color: var(--aj-muted);
}
.aj-showcase-status.aj-status-success {
	background: rgba(34, 197, 94, 0.15);
	color: var(--aj-green);
}
.aj-showcase-status.aj-status-error {
	background: rgba(239, 68, 68, 0.15);
	color: var(--aj-red);
}

/* Joker mark on recent matches */
.aj-joker-mark {
	display: inline-block;
	margin-right: 4px;
	font-size: 12px;
	vertical-align: middle;
}


/* ============================================================
 *  v5.0.1 — Profile strip in pool page hero
 * ============================================================ */
.aj-hero-profile-strip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 12px;
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.aj-hero-strip-user {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	text-decoration: none !important;
	color: #fff !important;
}
.aj-hero-strip-user:hover .aj-hero-strip-name {
	color: var(--aj-gold);
}
.aj-hero-strip-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--aj-gold), var(--aj-gold-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 900;
	color: #1a0f00;
	flex-shrink: 0;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}
.aj-hero-strip-avatar.has-image { background: transparent; }
.aj-hero-strip-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aj-hero-strip-info {
	flex: 1;
	min-width: 0;
}
.aj-hero-strip-name {
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.aj-hero-strip-sub {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.70);
	margin-top: 2px;
}
.aj-hero-strip-logout {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 10px !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 16px;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.aj-hero-strip-logout:hover {
	background: rgba(239, 68, 68, 0.85) !important;
	border-color: var(--aj-red) !important;
}


/* ============================================================
 *  v5.1.0 — Round sponsor strip
 *  (sponsor strip styles are defined inline near .aj-match-foot)
 * ============================================================ */

/* ============================================================
 *  v5.4.0 — Pending match state in profile recent list
 * ============================================================ */
.aj-profile-pred.acc-pending {
	border-right: 3px solid rgba(154, 49, 64, 0.6);
	opacity: 0.92;
}
.aj-profile-pred-pending {
	font-size: 9px;
	color: var(--aj-gold-dark);
	font-style: italic;
	font-weight: 700;
	background: rgba(154, 49, 64, 0.12);
	padding: 2px 8px;
	border-radius: 5px;
}
.aj-profile-pred-points.pending {
	color: var(--aj-gold-dark);
	font-size: 16px;
}

/* ============================================================

/* ============================================================
 *  v5.4.4 — "كيف كسبت نقاطي" inline section
 *  Same row layout as the recent-predictions list, but with a
 *  bolder section header (gold accent + sticky-style emphasis)
 *  so the user knows this is the points-breakdown they wanted.
 * ============================================================ */
.aj-points-list-inline {
	margin-top: 4px;
}
/* The section title above this list gets a touch of accent. */
.aj-points-list-inline + .aj-empty-state { margin-top: 0; }

/* Section sub-text — show the running total in bold gold so users
 * see "8 من 8 مباراة" at a glance and connect it to the tile above. */
.aj-section-sub b {
	color: var(--aj-gold);
	font-weight: 900;
}

/* ============================================================
 *  v5.5.0 — "تصفح توقعاتي" CTA on the statistics page,
 *  + standalone user-predictions page wrapper.
 * ============================================================ */

/* === The CTA button on the statistics page === */
.aj-predictions-cta {
	margin: 18px 12px 8px;
}
.aj-predictions-cta-btn {
	display: flex !important;
	align-items: center;
	gap: 14px;
	padding: 16px 18px !important;
	background: linear-gradient(135deg, var(--aj-brand), var(--aj-brand-dark)) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
	text-decoration: none !important;
	color: #fff !important;
	font-family: var(--aj-font);
	box-shadow: 0 6px 18px rgba(142,42,57, 0.25);
	position: relative;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aj-predictions-cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%);
	pointer-events: none;
}
.aj-predictions-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(142,42,57, 0.4);
	text-decoration: none !important;
}
.aj-predictions-cta-btn:active { transform: translateY(0); }

.aj-predictions-cta-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: rgba(0, 0, 0, 0.30);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	position: relative;
	z-index: 1;
}
.aj-predictions-cta-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	position: relative;
	z-index: 1;
}
.aj-predictions-cta-title {
	font-size: 15px;
	font-weight: 900;
	color: #fff;
	line-height: 1.2;
}
.aj-predictions-cta-sub {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 600;
	line-height: 1.3;
}
.aj-predictions-cta-arrow {
	flex-shrink: 0;
	font-size: 22px;
	font-weight: 900;
	color: var(--aj-gold);
	transition: transform 0.2s ease;
	position: relative;
	z-index: 1;
}
.aj-predictions-cta-btn:hover .aj-predictions-cta-arrow {
	transform: translateX(-4px);
}

/* === Standalone user-predictions page wrapper === */
.arabjo-user-predictions-page { color: var(--aj-text); }
.arabjo-user-predictions-page .aj-hero-profile { margin-bottom: 8px; }

/* The filter pills row sits between the hero and the match list. */
.aj-user-pred-filters {
	display: flex;
	gap: 6px;
	padding: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}
.aj-user-pred-filters::-webkit-scrollbar { display: none; }
.aj-user-pred-filters .aj-filter-pill {
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 16px;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 700;
	color: var(--aj-muted);
	font-family: var(--aj-font);
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}
.aj-user-pred-filters .aj-filter-pill:hover {
	color: var(--aj-text);
	border-color: var(--aj-brand);
}
.aj-user-pred-filters .aj-filter-pill.active {
	background: var(--aj-brand);
	border-color: var(--aj-brand);
	color: #fff;
}

/* Plugin's core HTML wrapper — give it consistent padding so the cards
 * line up with the rest of the theme. */
.aj-user-pred-list {
	padding: 0 0 24px;
}
/* Hide the plugin's "Below are all the predictions for X" intro and
 * statistics teaser since our hero already shows the user identity. */
.aj-user-pred-list .user-page-intro,
.aj-user-pred-list .statistics { display: none !important; }

/* When a filter is active, hide cards that don't match. */
.aj-user-pred-list[data-aj-active-filter="finished"] .aj-match:not(.aj-match-finished) { display: none !important; }
.aj-user-pred-list[data-aj-active-filter="upcoming"] .aj-match.aj-match-finished { display: none !important; }

/* ============================================================
 *  v5.7.0 — Compact match cards on the user-predictions page
 *
 *  Layout (mobile-first, RTL-aware):
 *    ┌──────────────────────────────────────────────┐
 *    │ flag  team1   3-2   team2  flag       +8     │
 *    │                                       نقطة    │
 *    ├──────────────────────────────────────────────┤
 *    │ توقعك: 2-1 · اتجاه صحيح                       │
 *    ├──────────────────────────────────────────────┤
 *    │ 📌 مرحلة المجموعات · الجولة الأولى            │
 *    └──────────────────────────────────────────────┘
 * ============================================================ */

.arabjo-theme .aj-match.aj-match-compact {
	background: var(--aj-surf) !important;
	border: 1px solid var(--aj-border) !important;
	border-radius: 12px !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	overflow: hidden !important;
	contain: layout;
}
/* Safety: any stray <img> inside a compact card is capped. */
.aj-match-compact img {
	max-width: 32px !important;
	max-height: 32px !important;
}

/* === Top row: teams + score + points ===
 * Five columns: flag-team-name | score | name-team-flag | points
 * Using grid with the points as a fixed-width tail. */
.aj-cmp-main {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
}
.aj-cmp-team {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.aj-cmp-home { justify-content: flex-start; }
.aj-cmp-away { justify-content: flex-end; flex-direction: row-reverse; }
.aj-cmp-flag {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.arabjo-theme .aj-cmp-flag img,
.aj-match-compact .aj-cmp-flag img,
.aj-match-compact .aj-cmp-flag img.flag,
.aj-match-compact img.flag {
	width: 26px !important;
	height: 26px !important;
	max-width: 26px !important;
	max-height: 26px !important;
	min-width: 0 !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	display: block !important;
	margin: 0 !important;
}
.aj-cmp-flag .aj-flag-initial {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--aj-surf-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	color: var(--aj-muted);
}
.aj-cmp-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--aj-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aj-cmp-score {
	flex-shrink: 0;
	min-width: 56px;
	text-align: center;
}
.aj-cmp-final {
	font-size: 17px;
	font-weight: 900;
	color: var(--aj-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.aj-cmp-final .aj-cmp-dash { color: var(--aj-muted); margin: 0 2px; }
.aj-cmp-vs {
	font-size: 11px;
	font-weight: 800;
	color: var(--aj-muted);
	letter-spacing: 0.05em;
}

/* === Points cell (top-right of the card) === */
.aj-cmp-points-cell {
	flex-shrink: 0;
}
.aj-cmp-pts-box {
	min-width: 50px;
	padding: 6px 8px;
	border-radius: 8px;
	text-align: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
}
.arabjo-theme[data-aj-mode="light"] .aj-cmp-pts-box,
body.rb-light-trigger .aj-cmp-pts-box {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.08);
}
.aj-cmp-pts-box.acc-full {
	background: rgba(34, 197, 94, 0.12);
	border-color: rgba(34, 197, 94, 0.30);
}
.aj-cmp-pts-box.acc-partial {
	background: rgba(154, 49, 64, 0.12);
	border-color: rgba(154, 49, 64, 0.30);
}
.aj-cmp-pts-box.acc-wrong {
	background: rgba(239, 68, 68, 0.10);
	border-color: rgba(239, 68, 68, 0.25);
}
.aj-cmp-pts-num {
	font-size: 16px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.aj-cmp-pts-box.acc-full    .aj-cmp-pts-num { color: var(--aj-green); }
.aj-cmp-pts-box.acc-partial .aj-cmp-pts-num { color: var(--aj-gold-dark); }
.aj-cmp-pts-box.acc-wrong   .aj-cmp-pts-num { color: var(--aj-red); }
.aj-cmp-pts-box.acc-pending .aj-cmp-pts-num,
.aj-cmp-pts-box.acc-none    .aj-cmp-pts-num { color: var(--aj-muted); font-size: 14px; }
.aj-cmp-pts-lbl {
	font-size: 9px;
	color: var(--aj-muted);
	font-weight: 600;
	margin-top: 2px;
}
/* Joker icon — sits at the top-right corner of the points box. */
.aj-cmp-pts-box .aj-cmp-joker {
	position: absolute;
	top: -6px;
	right: -6px;
	font-size: 14px;
	background: var(--aj-surf);
	border-radius: 50%;
	padding: 1px;
	line-height: 1;
}

/* === Footer row — user's prediction summary === */
.aj-cmp-foot {
	padding: 8px 14px;
	border-top: 1px dashed var(--aj-border);
	font-size: 12px;
}
.aj-cmp-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.aj-cmp-yourpred {
	color: var(--aj-muted);
	font-weight: 600;
}
.aj-cmp-yourpred b {
	color: var(--aj-text);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	margin-right: 2px;
}
.aj-cmp-acc {
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 11px;
}
.aj-cmp-row.acc-full    .aj-cmp-acc { background: rgba(34,197,94,0.15);  color: var(--aj-green); }
.aj-cmp-row.acc-partial .aj-cmp-acc { background: rgba(154, 49, 64,0.15); color: var(--aj-gold-dark); }
.aj-cmp-row.acc-wrong   .aj-cmp-acc { background: rgba(239,68,68,0.12);  color: var(--aj-red); }
.aj-cmp-row.acc-pending .aj-cmp-acc { background: rgba(148,163,184,0.15);color: var(--aj-muted); }
.aj-cmp-row.acc-none    .aj-cmp-acc { background: rgba(148,163,184,0.12);color: var(--aj-muted); font-style: italic; }

/* === Round label (bottom caption) === */
.aj-cmp-round {
	padding: 6px 14px;
	border-top: 1px solid var(--aj-border);
	background: rgba(255, 255, 255, 0.02);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}
.arabjo-theme[data-aj-mode="light"] .aj-cmp-round,
body.rb-light-trigger .aj-cmp-round {
	background: rgba(0, 0, 0, 0.02);
}
.aj-cmp-round-pill {
	font-size: 10px;
	font-weight: 700;
	color: var(--aj-muted);
	letter-spacing: 0.01em;
}
/* Participants link — opens the "everyone's predictions" page for a
 * finished match. Small pill, burgundy tint, sits opposite the round. */
.aj-cmp-participants {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	color: var(--aj-brand-light) !important;
	background: rgba(142,42,57, 0.10);
	border: 1px solid rgba(142,42,57, 0.20);
	padding: 3px 8px;
	border-radius: 8px;
	text-decoration: none !important;
	transition: all 0.15s ease;
	white-space: nowrap;
}
.aj-cmp-participants:hover {
	background: var(--aj-brand);
	border-color: var(--aj-brand);
	color: #fff !important;
}
.aj-cmp-participants-ico { font-size: 11px; }

/* Left accent border by accuracy. */
.aj-match-compact:has(.aj-cmp-pts-box.acc-full)    { border-right: 3px solid var(--aj-green) !important; }
.aj-match-compact:has(.aj-cmp-pts-box.acc-partial) { border-right: 3px solid var(--aj-gold) !important; }
.aj-match-compact:has(.aj-cmp-pts-box.acc-wrong)   { border-right: 3px solid var(--aj-red) !important; }
.aj-match-compact:has(.aj-cmp-pts-box.acc-pending) { border-right: 3px solid rgba(148,163,184,0.5) !important; }

@media (max-width: 480px) {
	.aj-cmp-main {
		grid-template-columns: 1fr auto 1fr auto;
		gap: 5px;
		padding: 10px 10px;
	}
	.aj-cmp-name { font-size: 11px; }
	.aj-cmp-final { font-size: 15px; }
	.aj-cmp-pts-box { min-width: 44px; padding: 5px 6px; }
	.aj-cmp-pts-num { font-size: 14px; }
	.aj-cmp-pts-lbl { font-size: 8px; }
	.aj-cmp-flag,
	.aj-match-compact .aj-cmp-flag img,
	.aj-match-compact img.flag,
	.aj-cmp-flag .aj-flag-initial { width: 22px !important; height: 22px !important; }
	.aj-cmp-foot { padding: 7px 10px; font-size: 11px; }
	.aj-cmp-round { padding: 5px 10px; }
}

/* ============================================================
 *  v5.8.0 — Honorary badges (prestige tier) distinct styling
 * ============================================================ */
.aj-section-title-prestige {
	color: var(--aj-gold);
}
.aj-section-title-prestige .aj-section-icon {
	filter: drop-shadow(0 0 6px rgba(154, 49, 64, 0.4));
}
.aj-honor-tag {
	background: linear-gradient(135deg, rgba(154, 49, 64, 0.22), rgba(142,42,57, 0.22));
	border: 1px solid var(--aj-gold);
	color: var(--aj-gold) !important;
	padding: 3px 9px;
	border-radius: 10px;
	font-size: 9px;
	font-weight: 700;
}
.aj-badges-grid-prestige {
	margin-bottom: 18px;
	padding: 16px 12px;
	background:
		radial-gradient(circle at 50% 0%, rgba(154, 49, 64, 0.12), transparent 70%),
		linear-gradient(135deg, rgba(154, 49, 64, 0.06), rgba(142,42,57, 0.05));
	border: 1px solid rgba(154, 49, 64, 0.30);
	border-radius: 16px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}
.aj-badges-grid-prestige::before {
	content: '✨';
	position: absolute;
	top: 8px;
	left: 10px;
	font-size: 13px;
	opacity: 0.55;
}
/* Medallion-style honorary award: a round gold disc with a ribbon feel,
 * the icon centered, the name underneath as a title. */
.aj-badge-prestige {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 116px;
	padding: 14px 8px 12px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	animation: none !important;
}
.aj-badge-prestige .aj-badge-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, #ffe9a8 0%, #9a3140 45%, #c8881a 100%);
	border: 3px solid #fff3d0;
	box-shadow:
		0 0 0 2px #c8881a,
		0 6px 18px rgba(154, 49, 64, 0.45),
		inset 0 2px 6px rgba(255, 255, 255, 0.6),
		inset 0 -3px 8px rgba(142,42,57, 0.30);
	position: relative;
	animation: aj-medallion-pulse 3s ease-in-out infinite;
	margin: 0;
}
/* Little ribbon tails under the disc. */
.aj-badge-prestige .aj-badge-icon::before,
.aj-badge-prestige .aj-badge-icon::after {
	content: '';
	position: absolute;
	bottom: -10px;
	width: 9px;
	height: 18px;
	background: linear-gradient(180deg, #7d2330, #4a141d);
	z-index: -1;
}
.aj-badge-prestige .aj-badge-icon::before { left: 16px; transform: rotate(8deg); }
.aj-badge-prestige .aj-badge-icon::after  { right: 16px; transform: rotate(-8deg); }
.aj-badge-prestige .aj-badge-name {
	font-size: 12px;
	font-weight: 900;
	color: var(--aj-gold) !important;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	line-height: 1.25;
}
.aj-badge-prestige .aj-badge-desc {
	font-size: 9px;
	color: var(--aj-muted);
	text-align: center;
	line-height: 1.3;
}
.aj-badge-crown {
	position: absolute;
	top: -8px;
	right: 50%;
	transform: translateX(50%);
	font-size: 17px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
	z-index: 2;
}
@keyframes aj-medallion-pulse {
	0%, 100% { box-shadow: 0 0 0 2px #c8881a, 0 6px 18px rgba(154, 49, 64,0.45), inset 0 2px 6px rgba(255,255,255,0.6), inset 0 -3px 8px rgba(142,42,57,0.30); }
	50%      { box-shadow: 0 0 0 2px #d89a2a, 0 8px 26px rgba(154, 49, 64,0.65), inset 0 2px 6px rgba(255,255,255,0.7), inset 0 -3px 8px rgba(142,42,57,0.30); }
}
@media (max-width: 420px) {
	.aj-badge-prestige { width: 96px; padding: 12px 4px 10px; }
	.aj-badge-prestige .aj-badge-icon { width: 56px; height: 56px; font-size: 26px; }
	.aj-badge-prestige .aj-badge-name { font-size: 11px; }
}

/* Mark prestige badges in the showcase strip (used on rankings / lists). */
.aj-showcase-badge.tier-prestige {
	background: linear-gradient(135deg, rgba(154, 49, 64, 0.30), rgba(142,42,57, 0.30)) !important;
	border: 1px solid var(--aj-gold) !important;
	box-shadow: 0 0 8px rgba(154, 49, 64, 0.45) !important;
}
.aj-showcase-badge.tier-prestige::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 5px;
	pointer-events: none;
}

/* Showcase picker — prestige items get the same gold treatment. */
.aj-showcase-item.tier-prestige {
	background: linear-gradient(135deg, rgba(154, 49, 64, 0.12), rgba(142,42,57, 0.08)) !important;
	border-color: var(--aj-gold) !important;
}
.aj-showcase-item.tier-prestige .aj-showcase-item-name {
	color: var(--aj-gold) !important;
}

/* ============================================================
 *  v5.8.0 — Round champion banner (on pool/predictions page)
 * ============================================================ */
.aj-champion-banner {
	margin: 0 12px 14px;
	padding: 12px 14px;
	background: linear-gradient(135deg,
		rgba(154, 49, 64, 0.18) 0%,
		rgba(142,42,57, 0.18) 100%);
	border: 1px solid var(--aj-gold);
	border-radius: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--aj-text);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aj-champion-banner:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(154, 49, 64, 0.25);
	text-decoration: none !important;
}
.aj-champion-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(154, 49, 64, 0.25), transparent 70%);
	pointer-events: none;
}
.aj-champion-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, var(--aj-gold), #d49b1d);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 4px 14px rgba(154, 49, 64, 0.4);
	position: relative;
	z-index: 1;
}
.aj-champion-body {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
}
.aj-champion-title {
	font-size: 10px;
	font-weight: 700;
	color: var(--aj-gold);
	letter-spacing: 0.05em;
	margin-bottom: 2px;
}
.aj-champion-name {
	font-size: 14px;
	font-weight: 900;
	color: var(--aj-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aj-champion-pts {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 900;
	color: var(--aj-gold);
	background: rgba(0, 0, 0, 0.25);
	padding: 5px 10px;
	border-radius: 8px;
	position: relative;
	z-index: 1;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 *  v5.8.0 — Joker reminder card (above matches list)
 * ============================================================ */
.aj-joker-reminder {
	margin: 0 12px 12px;
	padding: 10px 12px;
	background: linear-gradient(135deg, rgba(154, 49, 64, 0.12), rgba(154, 49, 64, 0.04));
	border: 1px dashed var(--aj-gold);
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
}
.aj-joker-reminder-icon {
	flex-shrink: 0;
	font-size: 22px;
	animation: aj-joker-wiggle 2.5s ease-in-out infinite;
}
@keyframes aj-joker-wiggle {
	0%, 100% { transform: rotate(0); }
	25%      { transform: rotate(-8deg); }
	75%      { transform: rotate(8deg); }
}
.aj-joker-reminder-body {
	flex: 1;
	color: var(--aj-text);
}
.aj-joker-reminder-title {
	font-weight: 800;
	color: var(--aj-gold-dark);
	font-size: 12px;
}
.aj-joker-reminder-sub {
	font-size: 11px;
	color: var(--aj-muted);
	margin-top: 1px;
}

/* ============================================================
 *  v5.8.0 — Points progression chart (profile page)
 * ============================================================ */
.aj-progress-chart {
	margin: 8px 12px 16px;
	padding: 14px 12px 10px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
}
.aj-progress-chart-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.aj-progress-chart-title {
	font-size: 13px;
	font-weight: 800;
	color: var(--aj-text);
	display: flex;
	align-items: center;
	gap: 6px;
}
.aj-progress-chart-meta {
	font-size: 10px;
	color: var(--aj-muted);
	font-weight: 600;
}
.aj-progress-svg {
	width: 100%;
	height: 140px;
	display: block;
}
.aj-progress-line {
	fill: none;
	stroke: var(--aj-gold);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.aj-progress-area {
	fill: url(#aj-progress-grad);
	opacity: 0.6;
}
.aj-progress-dot {
	fill: var(--aj-gold);
	stroke: var(--aj-surf);
	stroke-width: 2;
}
.aj-progress-axis {
	stroke: var(--aj-border);
	stroke-width: 1;
	stroke-dasharray: 2 3;
}
.aj-progress-label {
	font-size: 9px;
	fill: var(--aj-muted);
	font-family: var(--aj-font);
}
.aj-progress-empty {
	padding: 24px 12px;
	text-align: center;
	color: var(--aj-muted);
	font-size: 12px;
	font-weight: 600;
}

/* ============================================================
 *  v5.8.0 — Rules page wrapper styling
 * ============================================================ */
.aj-rules-page .aj-section-title {
	margin-top: 20px;
}
.aj-rules-page .aj-rule-card {
	margin: 0 12px 10px;
	padding: 12px 14px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
}
.aj-rules-page .aj-rule-card h3 {
	font-size: 13px;
	font-weight: 800;
	color: var(--aj-text);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.aj-rules-page .aj-rule-card p {
	font-size: 12px;
	color: var(--aj-text-dim);
	line-height: 1.6;
	margin: 0;
}
.aj-rules-page .aj-rule-icon {
	width: 30px;
	height: 30px;
	background: rgba(142,42,57, 0.12);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}
.aj-rules-page .aj-points-table {
	margin: 8px 12px 18px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
	overflow: hidden;
}
.aj-rules-page .aj-points-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	border-bottom: 1px solid var(--aj-border);
}
.aj-rules-page .aj-points-row:last-child { border-bottom: none; }
.aj-rules-page .aj-points-row-label {
	font-size: 12px;
	color: var(--aj-text);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}
.aj-rules-page .aj-points-row-value {
	font-size: 16px;
	font-weight: 900;
	color: var(--aj-gold);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 *  v5.9.0 — Achievements guide page + profile guide link
 * ============================================================ */

/* Link card on the profile that points to the full guide. */
.aj-ach-guide-link {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 12px 14px;
	padding: 12px 14px;
	background: var(--aj-surf);
	border: 1px dashed var(--aj-border);
	border-radius: 12px;
	text-decoration: none !important;
	color: var(--aj-text);
	transition: all 0.15s ease;
}
.aj-ach-guide-link:hover {
	border-color: var(--aj-gold);
	background: rgba(154, 49, 64, 0.06);
}
.aj-ach-guide-ico { font-size: 20px; flex-shrink: 0; }
.aj-ach-guide-text { flex: 1; font-size: 12px; font-weight: 700; }
.aj-ach-guide-link .aj-ach-guide-arrow {
	font-size: 18px; color: var(--aj-gold); font-weight: 900;
}

/* Guide page list. */
.arabjo-achievements-guide .aj-ach-guide-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 12px 18px;
}
.aj-ach-guide-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 12px;
}
.aj-ach-guide-card.is-earned {
	border-color: rgba(34, 197, 94, 0.4);
	background: linear-gradient(135deg, rgba(34,197,94,0.06), var(--aj-surf));
}
.aj-ach-guide-card.prestige {
	border: 2px solid var(--aj-gold);
	background: linear-gradient(135deg, rgba(154, 49, 64,0.10), rgba(142,42,57,0.05));
	box-shadow: 0 2px 10px rgba(154, 49, 64,0.15);
}
.aj-ach-guide-icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	background: rgba(255,255,255,0.04);
	border-radius: 12px;
}
.aj-ach-guide-card.prestige .aj-ach-guide-icon {
	background: rgba(154, 49, 64,0.12);
}
.aj-ach-guide-body { flex: 1; min-width: 0; }
.aj-ach-guide-name {
	font-size: 14px;
	font-weight: 800;
	color: var(--aj-text);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.aj-ach-guide-card.prestige .aj-ach-guide-name { color: var(--aj-gold); }
.aj-ach-guide-how {
	font-size: 12px;
	color: var(--aj-muted);
	margin-top: 3px;
	line-height: 1.5;
}
.aj-ach-guide-done {
	font-size: 9px;
	font-weight: 700;
	color: var(--aj-green);
	background: rgba(34,197,94,0.15);
	padding: 2px 8px;
	border-radius: 6px;
}
.aj-ach-guide-tag {
	display: inline-block;
	margin-top: 6px;
	font-size: 10px;
	font-weight: 700;
	color: var(--aj-gold);
	background: rgba(154, 49, 64,0.12);
	padding: 3px 9px;
	border-radius: 8px;
}

/* User's own rules-page content, wrapped in the Arabjo shell. */
.aj-rules-user-content {
	margin: 8px 12px 18px;
	padding: 16px 18px;
	background: var(--aj-surf);
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	color: var(--aj-text);
	line-height: 1.8;
	font-size: 14px;
}
.aj-rules-user-content h1,
.aj-rules-user-content h2,
.aj-rules-user-content h3 {
	color: var(--aj-text);
	font-weight: 800;
	margin: 16px 0 8px;
}
.aj-rules-user-content h1:first-child,
.aj-rules-user-content h2:first-child,
.aj-rules-user-content h3:first-child { margin-top: 0; }
.aj-rules-user-content p { margin: 0 0 12px; color: var(--aj-text-dim); }
.aj-rules-user-content ul,
.aj-rules-user-content ol { margin: 0 0 12px; padding-right: 22px; color: var(--aj-text-dim); }
.aj-rules-user-content li { margin-bottom: 6px; }
.aj-rules-user-content a { color: var(--aj-gold); }
.aj-rules-user-content img { max-width: 100%; height: auto; border-radius: 10px; }
.aj-rules-user-content strong { color: var(--aj-text); }

/* Tiny version stamp — bottom of the profile, for verifying the live build. */
.aj-version-stamp {
	text-align: center;
	font-size: 9px;
	color: var(--aj-muted);
	opacity: 0.5;
	padding: 8px 0 4px;
	letter-spacing: 0.05em;
}

/* ============================================================
 *  v5.9.5 — Honorary "Title" pill (e.g. بطل الجولة الأولى)
 *  Shown next to the user's name across ranking / lists / profile.
 *  Distinct gold gradient with a subtle shine; truncates gracefully
 *  on narrow phones so it never breaks the row layout.
 * ============================================================ */
.aj-title-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 140px;
	padding: 2px 8px 2px 6px;
	border-radius: 999px;
	background: linear-gradient(135deg, #9a3140 0%, #d8941a 55%, #7d2330 140%);
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 2px 6px rgba(154, 49, 64, 0.35),
				inset 0 1px 0 rgba(255, 255, 255, 0.35);
	vertical-align: middle;
	position: relative;
	overflow: hidden;
}
.aj-title-pill-ico {
	font-size: 9px;
	color: #3a1d05;
	flex-shrink: 0;
}
.aj-title-pill-text {
	font-size: 10px;
	font-weight: 900;
	color: #3a1d05;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Subtle moving shine. */
.aj-title-pill::after {
	content: '';
	position: absolute;
	top: 0; left: -60%;
	width: 40%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
	transform: skewX(-20deg);
	animation: aj-title-shine 3.5s ease-in-out infinite;
}
@keyframes aj-title-shine {
	0%, 100% { left: -60%; }
	50%      { left: 130%; }
}

/* In tight contexts (rank rows) cap the width tighter so the score
 * always stays visible. */
.aj-rank-identity .aj-title-pill { max-width: 110px; }
.aj-mp-user-meta  .aj-title-pill { max-width: 130px; }
/* In the profile hero there's plenty of room — show the full title. */
.aj-profile-id-titles .aj-title-pill,
.aj-profile-titles .aj-title-pill { max-width: none; }

@media (max-width: 420px) {
	.aj-title-pill { max-width: 96px; padding: 2px 7px 2px 5px; }
	.aj-title-pill-text { font-size: 9px; }
	.aj-rank-identity .aj-title-pill { max-width: 84px; }
}
@media (max-width: 360px) {
	.aj-rank-identity .aj-title-pill { max-width: 70px; }
}

/* ============================================================
 *  v5.9.6 — Honorary medallions (clean rebuild)
 *  Round gold award discs with crown + ribbon feel.
 * ============================================================ */
.aj-medallions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin: 0 12px 18px;
	padding: 18px 12px;
	background:
		radial-gradient(circle at 50% 0%, rgba(154, 49, 64,0.12), transparent 70%),
		linear-gradient(135deg, rgba(154, 49, 64,0.06), rgba(142,42,57,0.05));
	border: 1px solid rgba(154, 49, 64,0.30);
	border-radius: 16px;
	position: relative;
}
.aj-medallions::before {
	content: '✨';
	position: absolute;
	top: 8px; left: 10px;
	font-size: 13px;
	opacity: 0.55;
}
.aj-medallion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 120px;
}
.aj-medallion-disc {
	position: relative;
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #ffe9a8 0%, #9a3140 45%, #c8881a 100%);
	border: 3px solid #fff3d0;
	box-shadow:
		0 0 0 2px #c8881a,
		0 6px 18px rgba(154, 49, 64,0.45),
		inset 0 2px 6px rgba(255,255,255,0.6),
		inset 0 -3px 8px rgba(142,42,57,0.30);
	animation: aj-medallion-pulse 3s ease-in-out infinite;
}
/* Ribbon tails. */
.aj-medallion-disc::before,
.aj-medallion-disc::after {
	content: '';
	position: absolute;
	bottom: -11px;
	width: 10px;
	height: 20px;
	background: linear-gradient(180deg, #7d2330, #4a141d);
	z-index: -1;
}
.aj-medallion-disc::before { left: 17px; transform: rotate(9deg); }
.aj-medallion-disc::after  { right: 17px; transform: rotate(-9deg); }
.aj-medallion-icon {
	font-size: 30px;
	color: #3a1d05;
	line-height: 1;
}
.aj-medallion-icon i { color: #3a1d05 !important; }
.aj-medallion-crown {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 17px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
	z-index: 2;
}
.aj-medallion-name {
	font-size: 12px;
	font-weight: 900;
	color: var(--aj-gold);
	text-align: center;
	line-height: 1.25;
	text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.aj-medallion-desc {
	font-size: 9px;
	color: var(--aj-muted);
	text-align: center;
	line-height: 1.3;
}
@keyframes aj-medallion-pulse {
	0%, 100% { box-shadow: 0 0 0 2px #c8881a, 0 6px 18px rgba(154, 49, 64,0.45), inset 0 2px 6px rgba(255,255,255,0.6), inset 0 -3px 8px rgba(142,42,57,0.30); }
	50%      { box-shadow: 0 0 0 2px #d89a2a, 0 8px 26px rgba(154, 49, 64,0.65), inset 0 2px 6px rgba(255,255,255,0.7), inset 0 -3px 8px rgba(142,42,57,0.30); }
}
@media (max-width: 420px) {
	.aj-medallion { width: 100px; }
	.aj-medallion-disc { width: 60px; height: 60px; }
	.aj-medallion-icon { font-size: 26px; }
	.aj-medallion-name { font-size: 11px; }
}

/* ============================================================
 *  v5.9.7 — Honorary titles under the name (profile pages)
 *  + compact title variant in ranking rows.
 *  Titles are a SEPARATE system from showcase badges.
 * ============================================================ */

/* Titles container under the name on profile pages. */
.aj-profile-id-titles,
.aj-profile-titles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
	justify-content: center;
}
.aj-profile-id-titles { justify-content: flex-start; }

/* The profile (full) title pills can be a touch larger & wrap. */
.aj-titles-full {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Compact title (ranking) — smaller, single line, truncates hard. */
.aj-titles-compact .aj-title-pill {
	max-width: 150px;
	padding: 1px 7px 1px 5px;
}
.aj-titles-compact .aj-title-pill-text {
	font-size: 9px;
}

@media (max-width: 420px) {
	.aj-titles-compact .aj-title-pill { max-width: 110px; }
	.aj-rank-name { font-size: 11px; }
}
@media (max-width: 360px) {
	.aj-titles-compact .aj-title-pill { max-width: 88px; }
}

/* ============================================================
 *  v6.0.1 — "Save All" floating action button
 *  Fixed bottom-center on the prediction page; saves every match
 *  in one tap. Sits above the scroll-top FAB, mobile-friendly.
 * ============================================================ */
.aj-save-all-fab {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 16px;
	background: linear-gradient(135deg, var(--aj-gold), var(--aj-gold-dark));
	color: #1a0f00;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(154, 49, 64, 0.45), 0 2px 5px rgba(0,0,0,0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.aj-save-all-fab:hover {
	transform: translateX(-50%) translateY(-2px);
	box-shadow: 0 7px 20px rgba(154, 49, 64, 0.55), 0 3px 7px rgba(0,0,0,0.3);
}
.aj-save-all-fab:active { transform: translateX(-50%) translateY(0); }
.aj-save-all-ico { font-size: 13px; line-height: 1; }
.aj-save-all-fab.is-saving { opacity: 0.8; cursor: wait; }
.aj-save-all-fab.is-saved {
	background: linear-gradient(135deg, #34c759, #28a745);
	color: #fff;
}
@media (max-width: 480px) {
	.aj-save-all-fab {
		bottom: 12px;
		padding: 7px 14px;
		font-size: 11px;
	}
	.aj-save-all-ico { font-size: 12px; }
}

/* Give the pool shell breathing room at the bottom so the floating
 * "save all" button never covers the last match card. */
.arabjo-shell { padding-bottom: 60px; }


/* ============================================================
 *  استثناء: الذهبي مسموح فقط على الميداليات والكؤوس
 * ============================================================ */
:root, .arabjo-theme { --aj-medal-gold: #d4a23a; --aj-medal-gold-d: #a8801f; }
.aj-podium-card.p1 .aj-podium-avatar { background: linear-gradient(135deg, var(--aj-medal-gold), var(--aj-medal-gold-d)) !important; color:#1a0f00 !important; }
.aj-podium-card.p1 { border-color: var(--aj-medal-gold) !important; background: linear-gradient(180deg, rgba(212,162,58,0.10), var(--aj-surf)) !important; box-shadow: 0 6px 18px rgba(212,162,58,0.15) !important; }
.aj-podium-card.p1 .aj-podium-score { color: var(--aj-medal-gold) !important; }
.aj-podium-card.p1 .aj-podium-medal { filter: none; }