/* =====================================================
   CQC QUALIFIER QUEST
   Guild Leaderboard Theme
=====================================================*/

:root{

    --cqc-bg:#08182f;
    --cqc-card:#0f2343;
    --cqc-card2:#132b52;

    --cqc-gold:#f4c84b;
    --cqc-gold2:#d8a62d;

    --cqc-white:#ffffff;
    --cqc-text:#d8e4ff;

    --cqc-green:#39d98a;
    --cqc-red:#ff5c5c;

    --cqc-border:rgba(255,255,255,.08);

}

.cqc-guild-board{

    background:linear-gradient(180deg,#10284d,#08182f);

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);

    color:#fff;

    font-family:inherit;

    border:1px solid rgba(255,255,255,.06);

}

.cqc-board-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 32px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.cqc-board-header h2{

    margin:0;

    color:var(--cqc-gold);

    font-size:30px;

    font-weight:700;

}

.cqc-board-header p{

    margin:8px 0 0;

    color:#c9d6ef;

    font-size:15px;

}

.cqc-live{

    display:flex;

    align-items:center;

    gap:10px;

    background:#13331f;

    color:#69ffb2;

    padding:10px 18px;

    border-radius:50px;

    font-weight:700;

    font-size:14px;

}

.cqc-live span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#34ff87;

    animation:cqcPulse 1.2s infinite;

}

@keyframes cqcPulse{

    0%{

        transform:scale(.8);

        opacity:.6;

    }

    50%{

        transform:scale(1.25);

        opacity:1;

    }

    100%{

        transform:scale(.8);

        opacity:.6;

    }

}

.cqc-board-list{

    padding:20px;

}

.cqc-board-row{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    margin-bottom:15px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    transition:.25s;

}

.cqc-board-row:hover{

    transform:translateY(-3px);

    background:rgba(255,255,255,.07);

}

.cqc-rank-number{

    width:55px;

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#fff;

}

.cqc-avatar{

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    color:#c8d4e8;

    background:#2b3870;

    flex-shrink:0;
    
    border: 2px solid #ffffff1a;

}

.cqc-player{

    flex:1;

}

.cqc-player-name{

    font-size:20px;

    font-weight:700;

    color:#fff;

}

.cqc-player-rank{

    margin-top:5px;

    color:#c6d4ef;

    font-size:14px;

}

.cqc-you{

    margin-left:8px;

    color:#4eff9e;

    font-weight:700;

}

.cqc-stats{

    display:flex;

    gap:40px;

}

.cqc-stat{

    text-align:right;

}

.cqc-stat .label{

    display:block;

    color:#95a8c8;

    font-size:13px;

    margin-bottom:6px;

}

.cqc-stat strong{

    color:#fff;

    font-size:22px;

}

/* ---------------------------------------------------------------------
   "Your Next Milestone" card — [cqc_rank_progress]
--------------------------------------------------------------------- */
.cqc-qq-progress {
	background: var(--cqc-card2);
	border: 1px solid var(--cqc-border);
	border-radius: 18px;
	padding: 24px 28px;
	color: var(--cqc-white);
	font-family: inherit;
	max-width: 100%;
	box-sizing: border-box;
}

.cqc-qq-milestone-label {
	color: var(--cqc-gold);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.cqc-qq-milestone-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.cqc-qq-milestone-text {
	color: var(--cqc-white);
	font-size: 16px;
}

.cqc-qq-milestone-bonus {
	color: var(--cqc-green);
	font-weight: 700;
}

.cqc-qq-milestone-fraction {
	color: var(--cqc-gold);
	font-weight: 700;
	font-size: 24px;
	white-space: nowrap;
}

.cqc-qq-bar {
	background: rgba(255,255,255,0.08);
	border-radius: 20px;
	height: 9px;
	overflow: hidden;
	margin-bottom: 10px;
}

.cqc-qq-bar-fill {
	background: linear-gradient(90deg, var(--cqc-green), var(--cqc-gold));
	height: 100%;
	border-radius: 20px;
	transition: width 0.4s ease;
}

.cqc-qq-bar-labels {
	display: flex;
	justify-content: space-between;
	color: #95a8c8;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Mobile fixes — leaderboard design untouched, just prevents overflow
   and cramped text below ~640px.
--------------------------------------------------------------------- */
.cqc-guild-board,
.cqc-board-header,
.cqc-board-list,
.cqc-board-row {
	box-sizing: border-box;
	max-width: 100%;
}

@media (max-width: 640px) {

	.cqc-board-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 20px;
	}

	.cqc-board-header h2 {
		font-size: 20px;
	}

	.cqc-board-header p {
		font-size: 13px;
	}

	.cqc-live {
		align-self: flex-start;
		padding: 8px 14px;
		font-size: 12px;
	}

	.cqc-board-list {
		padding: 12px;
	}

	.cqc-board-row {
		flex-wrap: wrap;
		gap: 10px;
		padding: 14px;
	}

	.cqc-rank-number {
		width: 26px;
		font-size: 16px;
	}

	.cqc-avatar {
		width: 42px;
		height: 42px;
		font-size: 15px;
	}

	.cqc-player {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cqc-player-name {
		font-size: 16px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cqc-player-rank {
		font-size: 12px;
	}

	.cqc-stats {
		flex-basis: 100%;
		justify-content: flex-start;
		gap: 28px;
		margin-top: 2px;
		padding-left: 68px; /* roughly lines up under the player name */
	}

	.cqc-stat {
		text-align: left;
	}

	.cqc-stat strong {
		font-size: 17px;
	}

	.cqc-qq-progress {
		padding: 18px 20px;
	}

	.cqc-qq-milestone-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.cqc-qq-milestone-fraction {
		font-size: 20px;
	}
}

@media (max-width: 380px) {
	.cqc-stats {
		padding-left: 0;
	}
}
/* ---------------------------------------------------------------------
   Target Selector — [cqc_target_selector]
--------------------------------------------------------------------- */
.cqc-target-selector {
	font-family: inherit;
	max-width: 100%;
	box-sizing: border-box;
}

.cqc-target-form {
	background: #10193a;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	padding: 22px 24px;
}

.cqc-target-row {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
}

.cqc-target-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 220px;
}

.cqc-target-field label {
	color: #95a8c8;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cqc-target-field select {
	background: #0c1330;
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
}

.cqc-target-lock-btn {
	background: linear-gradient(90deg, #F2C94C, #D4A017);
	color: #10193a;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 13px;
	border: none;
	border-radius: 8px;
	padding: 13px 22px;
	cursor: pointer;
	white-space: nowrap;
}

.cqc-target-lock-btn:hover {
	filter: brightness(1.05);
}

.cqc-target-clear-btn {
	background: transparent;
	color: #95a8c8;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 13px;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 8px;
	padding: 13px 22px;
	cursor: pointer;
	white-space: nowrap;
}

.cqc-target-clear-btn:hover {
	background: rgba(255,255,255,0.06);
	color: #ffffff;
}

.cqc-target-confirm {
	color: #22c55e;
	font-size: 14px;
	margin-top: 14px;
}

.cqc-target-error {
	color: #ef4444;
	font-size: 14px;
	margin-top: 14px;
}

.cqc-target-links {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cqc-target-link-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #10193a;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
	padding: 10px 14px;
}

.cqc-target-link-code {
	flex: 1 1 auto;
	color: #F2C94C;
	font-size: 13px;
	overflow-x: auto;
	white-space: nowrap;
}

.cqc-target-copy-btn {
	background: rgba(255,255,255,0.08);
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.cqc-target-copy-btn:hover {
	background: rgba(255,255,255,0.15);
}

@media (max-width: 640px) {
	.cqc-target-row {
		flex-direction: column;
		align-items: stretch;
	}
	.cqc-target-lock-btn,
	.cqc-target-clear-btn {
		width: 100%;
	}
	.cqc-target-link-row {
		flex-direction: column;
		align-items: stretch;
	}
}