/* Call of Duty-like UI skin for Call Matcher (UI-only, no logic changes) */
.cts-call-matcher {
	display: block;
	max-width: 680px;
	margin: 18px auto;
	border-radius: 10px;
	padding: 0;
	background: #000;
	color: #eee;
	box-shadow: 0 8px 30px rgba(0,0,0,0.6);
	overflow: visible;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.cts-call-matcher .cts-cm-wrapper { position: relative; display:block; padding:14px; }
.cts-cm-image { width:100%; height:auto; display:block; border-radius:6px; background:#000; border:2px solid rgba(255,255,255,0.03); box-shadow: inset 0 0 30px rgba(0,0,0,0.6); }

/* HUD top bar */
.cts-cm-hud {
	position: absolute;
	left: 12px;
	top: 12px;
	display:flex;
	gap:12px;
	align-items:center;
	z-index: 10;
}
.cts-cm-hud .cm-map-name { background: rgba(0,0,0,0.6); padding:6px 10px; border-radius:4px; font-weight:700; color:#fff; text-transform:uppercase; font-size:13px; letter-spacing:0.6px; }
.cts-cm-hud .cm-round { background: rgba(255,255,255,0.04); padding:6px 8px; border-radius:4px; font-size:12px; color:#ccc; }

/* Choices row styled as COD tiles */
.cts-cm-choices { display:flex; gap:12px; justify-content:center; margin:12px 0 15px 0; flex-wrap:wrap; }
.cts-cm-choice {
	background: #222;
	color:#fff;
	padding:10px 18px;
	border-radius:5px;
	border:none;
	box-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.6);
	cursor:pointer;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.8px;
}
.cts-cm-choice:hover { transform: translateY(-2px); }
.cts-cm-choice.correct { background: linear-gradient(180deg,#2b5a2b,#1f6a2f); border-color: rgba(0,0,0,0.6); }
.cts-cm-choice.wrong { background: linear-gradient(180deg,#5a1f1f,#6a1515); border-color: rgba(0,0,0,0.6); }

/* Feedback area (kept minimal, HUD-like) */
.cts-cm-feedback { min-height:1.2em; margin:6px 0; color:#cfcfcf; font-weight:600; text-align:center; }
.cts-cm-last-answer {
    min-height: 1.2em;
    margin: 4px 0 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: center;
    color: #f5d76e;
}
.cts-cm-last-answer.is-correct {
    color: #7bff9c;
}
.cts-cm-last-answer.is-revealed {
    color: #ff9f6e;
}
.cts-cm-last-answer {
    min-height: 1.2em;
    margin: 4px 0 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: center;
    color: #f5d76e;
}
.cts-cm-last-answer.is-correct {
    color: #7bff9c;
}
.cts-cm-last-answer.is-revealed {
    color: #ff9f6e;
}
.cts-cm-round-controls { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 14px; }
.cts-cm-round-controls .cts-cm-correct-count { 
    font-weight:700; 
    letter-spacing:0.4px; 
    text-align: center;
    font-size: 22px;
    margin: 20px 0;
    display: block;
    color: #fff;
}
.cts-cm-round-controls .cts-cm-round-result {
	font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
    display: block;
    color: #fff;
}
.cts-cm-round-history { 
    margin: 12px auto 0; 
    padding: 10px; 
    border-radius: 0; 
    background: transparent; 
    color: #dcdcdc; 
    font-size: 14px; 
    line-height: 1.4; 
    text-align: center;
    max-width: 300px;
}
.cts-cm-round-history.is-empty { display:none; }
.cts-cm-round-history-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cts-cm-round-history-item { 
    display:flex; 
    flex-direction: column;
    justify-content:center; 
    align-items:center; 
    background: transparent; 
    padding:6px 10px; 
}
.cts-cm-round-history-item-title { 
    font-weight:600; 
    letter-spacing:0.35px; 
    font-size: 16px;
    margin-bottom: 5px;
}
.cts-cm-round-history-item-score { 
    font-weight:500; 
    display: inline-block;
}
.cts-cm-round-history-item-status { 
    font-size: 12px; 
    color: #fff; 
    display: inline-block;
    text-transform: uppercase; 
    letter-spacing: 1px; 
    padding: 3px 8px;
    margin-left: 10px;
}

/* Next button styled like in the first screenshot */
/* Make selector specific to override WP `.button` defaults when present */
.cts-cm-next.button,
.cts-cm-next {
    display: block !important;
    background-color: #f0e10a !important;
    color: #000 !important;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 18px;
    padding: 12px 28px;
    border-radius: 30px;
    border: none !important;
    margin: 16px auto !important;
    cursor: pointer;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.32);
}
.cts-cm-next:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.36);
}
.cts-cm-next.disabled,
.cts-cm-next[disabled],
.cts-cm-next.button.disabled,
.cts-cm-next.button[disabled] {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
    background-color: #f0e10a !important;
    color: #000 !important;
}

.cts-cm-restart-round {
    /* Restart round button removed — kept for compatibility if needed */
    display: none !important;
}
@keyframes cm-pulse {
	0% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.9; }
	70% { transform: translate(-50%,-50%) scale(1.25); opacity: 0.0; }
	100% { transform: translate(-50%,-50%) scale(1.3); opacity: 0; }
}

/* small thin progress bar under image */
.cts-cm-progress { height:6px; background: rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; margin-top:14px; }
.cts-cm-progress > i { display:block; height:100%; width:0%; background: linear-gradient(90deg,#ff5e00,#ffd88f); transition: width 320ms ease; }

/* make admin preview area consistent */
#cm-admin-preview { margin-top:12px; }
.cm-preview-controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.cm-preview-controls label { font-size:13px; color:#ddd; }
.cm-preview-controls input[type="text"], .cm-preview-controls input[type="number"] { padding:6px; border:1px solid #333; border-radius:4px; background:#0f0f0f; color:#fff; }
.cm-preview-controls select { padding:6px; }

/* responsive */
@media (max-width:600px) {
	.cts-call-matcher { max-width: 94%; }
	.cts-cm-choices { gap:8px; }
	.cts-cm-choice { padding:8px 12px; font-size:13px; }
	.cts-cm-next { width:52px; height:52px; }
}