/* ---------------------------------------------------------------------------
 * GAME ENGINE v0.8.0 - shared HUD, lobby, countdown, per-mode "arenas",
 * animations and podium results. Purely additive: nothing above this block
 * is modified, so Classic Quiz (and any markup not opting into these
 * classes) renders exactly as it did in 0.7.0.
 * --------------------------------------------------------------------- */
:root{
	--cplq-g-gold:#f59e0b; --cplq-g-xp:#8b5cf6; --cplq-g-streak:#f97316;
	--cplq-g-bg:#0b1220; --cplq-g-panel:#101a2e;
}

/* ---- Shared HUD bar (avatar / XP / streak / timer / sound) ---- */
.cplq-hud{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.cplq-hud-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cplq-hud-chip{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:13px;padding:6px 11px;border-radius:20px;background:#f1f5f9 !important;color:var(--cplq-s-text) !important;white-space:nowrap}
.cplq-hud-chip.xp{background:#f3e8ff !important;color:#6d28d9 !important}
.cplq-hud-chip.streak{background:#ffedd5 !important;color:#c2410c !important}
.cplq-hud-chip.streak.hot{animation:cplqStreakPulse 1s infinite}
@keyframes cplqStreakPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.cplq-sound-toggle{border:2px solid #e2e8f0;background:#fff !important;border-radius:50%;width:34px;height:34px;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.cplq-sound-toggle:active{transform:scale(.92)}

/* ---- Game Lobby card (shown while waiting for teacher to start) ---- */
.cplq-lobby-card{background:linear-gradient(160deg,#eef2ff,#f8fafc) !important;border:2px solid #c7d2fe;border-radius:18px;padding:18px 16px;margin:10px 0;text-align:left}
.cplq-lobby-mode{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;color:var(--cplq-s-text) !important;margin-bottom:4px}
.cplq-lobby-mode .em{font-size:28px}
.cplq-lobby-tagline{color:var(--cplq-s-muted) !important;font-size:14px;margin:0}

/* ---- Countdown overlay (3-2-1-GO) ---- */
.cplq-countdown-num{font-size:96px;font-weight:900;color:var(--cplq-s-primary-dark) !important;animation:cplqCountPop .9s ease}
.cplq-countdown-go{font-size:48px;font-weight:900;color:var(--cplq-s-green) !important;animation:cplqCountPop .7s ease}
@keyframes cplqCountPop{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}

/* ---- Between-question transition ---- */
.cplq-transition-card{padding:10px 4px}
.cplq-transition-xp{font-size:30px;font-weight:900;color:var(--cplq-g-xp) !important;margin:6px 0;animation:cplqFloatUp .6s ease}
@keyframes cplqFloatUp{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
.cplq-overtake-banner{margin-top:10px;background:#fff7ed !important;border:2px solid #fdba74;color:#9a3412 !important;font-weight:800;font-size:14px;padding:9px 12px;border-radius:12px;animation:cplqPop .45s ease}
.cplq-mode-caption{font-size:13px;font-weight:700;color:var(--cplq-s-primary-dark) !important;background:#eff6ff !important;display:inline-block;padding:5px 12px;border-radius:16px;margin-bottom:8px}

/* =========================== ARENAS =========================== */
.cplq-arena{border-radius:18px;padding:14px 12px;margin:6px 0 12px;background:#f8fafc !important;border:1px solid #e2e8f0;overflow:hidden}

/* ---- Quiz Race track ---- */
.cplq-arena-race{background:linear-gradient(180deg,#dbeafe,#eff6ff) !important}
.cplq-race-track{position:relative;height:auto;padding:10px 44px 10px 6px;background:repeating-linear-gradient(90deg,#fff 0 26px,#e2e8f0 26px 28px) !important;border-radius:14px}
.cplq-race-lane{position:relative;height:30px;margin-bottom:4px}
.cplq-race-lane:last-child{margin-bottom:0}
.cplq-race-runner{position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .6s cubic-bezier(.34,1.56,.64,1);font-size:20px;display:flex;flex-direction:column;align-items:center;line-height:1}
.cplq-race-runner.me{font-size:24px;filter:drop-shadow(0 0 0 transparent)}
.cplq-race-runner .tag{font-size:8.5px;font-weight:800;background:#0f172a;color:#fff;padding:1px 4px;border-radius:6px;margin-top:1px;white-space:nowrap;max-width:64px;overflow:hidden;text-overflow:ellipsis}
.cplq-race-runner.me .tag{background:var(--cplq-s-primary-dark)}
.cplq-race-finish{position:absolute;right:2px;top:0;bottom:0;display:flex;align-items:center;font-size:22px}
.cplq-race-meta{display:flex;justify-content:space-around;text-align:center;margin-top:10px;flex-wrap:wrap;gap:6px}
.cplq-race-meta div{font-size:12px;font-weight:800;color:var(--cplq-s-text) !important}
.cplq-race-meta b{display:block;font-size:16px}

/* ---- Ladder (Ladder Challenge / Knowledge Ladder) ---- */
.cplq-arena-ladder{background:linear-gradient(180deg,#ecfdf5,#f0fdf4) !important}
.cplq-ladder-rail{display:flex;flex-direction:column-reverse;gap:3px}
.cplq-ladder-rung{position:relative;border-top:3px solid #a7f3d0;padding:9px 6px 4px;display:flex;align-items:center;gap:6px;min-height:34px;flex-wrap:wrap}
.cplq-ladder-rung.top{border-top-color:var(--cplq-g-gold)}
.cplq-ladder-rung .rung-label{font-size:10px;font-weight:800;color:#065f46 !important;position:absolute;left:0;top:-9px;background:#f0fdf4;padding:0 4px}
.cplq-ladder-climber{font-size:18px;position:relative;animation:cplqClimbIn .5s ease}
.cplq-ladder-climber.me{font-size:22px}
.cplq-ladder-climber.eliminated{opacity:.35;filter:grayscale(1)}
@keyframes cplqClimbIn{0%{transform:translateY(14px) scale(.6);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.cplq-ladder-crown{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font-size:22px}

/* ---- Mission Mode map ---- */
.cplq-arena-mission{background:linear-gradient(180deg,#fff7ed,#fffbeb) !important}
.cplq-mission-path{display:flex;flex-direction:column;gap:2px}
.cplq-mission-node{display:flex;align-items:center;gap:10px;padding:8px 4px;position:relative}
.cplq-mission-node .dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;background:#e2e8f0;border:3px solid #cbd5e1}
.cplq-mission-node.done .dot{background:#bbf7d0;border-color:#22c55e}
.cplq-mission-node.current .dot{background:#fde68a;border-color:var(--cplq-g-gold);animation:cplqStreakPulse 1.1s infinite}
.cplq-mission-node.locked .dot{background:#f1f5f9;border-color:#e2e8f0;color:#94a3b8}
.cplq-mission-node.boss .dot{background:#fecaca;border-color:#ef4444}
.cplq-mission-node .label{font-weight:800;font-size:13.5px;color:var(--cplq-s-text) !important}
.cplq-mission-node .line{position:absolute;left:21px;top:42px;width:3px;height:14px;background:#cbd5e1}
.cplq-mission-crew{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap;max-width:110px;justify-content:flex-end}

/* ---- Escape Room ---- */
.cplq-arena-escape{background:linear-gradient(180deg,#1e1b4b,#312e81) !important;color:#fff !important}
.cplq-arena-escape *{color:#e0e7ff !important}
.cplq-escape-doors{display:flex;justify-content:space-between;gap:6px;margin-bottom:8px}
.cplq-escape-door{flex:1;text-align:center;font-size:22px;padding:8px 2px;border-radius:10px;background:rgba(255,255,255,.06) !important;border:2px solid rgba(255,255,255,.15)}
.cplq-escape-door.cleared{background:rgba(74,222,128,.18) !important;border-color:#4ade80}
.cplq-escape-door.current{border-color:var(--cplq-g-gold);animation:cplqStreakPulse 1.1s infinite}

/* ---- Mystery Case board ---- */
.cplq-arena-case{background:linear-gradient(180deg,#1c1917,#292524) !important}
.cplq-arena-case *{color:#f5f5f4 !important}
.cplq-case-meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;margin-bottom:6px}
.cplq-case-progress{display:flex;gap:4px}
.cplq-case-progress span{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.15)}
.cplq-case-progress span.done{background:#f59e0b}

/* ---- Team Battle bars ---- */
.cplq-arena-team{background:linear-gradient(180deg,#f8fafc,#f1f5f9) !important}
.cplq-team-row{margin-bottom:10px}
.cplq-team-row:last-child{margin-bottom:0}
.cplq-team-row-head{display:flex;justify-content:space-between;font-weight:800;font-size:13.5px;margin-bottom:4px;color:var(--cplq-s-text) !important}
.cplq-team-bar-track{background:#e2e8f0;border-radius:8px;height:16px;overflow:hidden}
.cplq-team-bar-fill{height:100%;border-radius:8px;transition:width .6s ease;background:var(--team-color,#64748b)}
.cplq-team-row.mine .cplq-team-row-head{color:var(--team-color,#0f172a) !important}

/* ---- Lifeline / codes / clue boxes retained + extended ---- */
.cplq-lifeline-bar{margin-top:8px}

/* ---- Answer feedback: richer XP/level-up animation ---- */
.cplq-feedback-card{animation:cplqPop .35s ease}
.cplq-feedback-badge{margin-top:10px;background:#fefce8 !important;border:2px solid #fde047;border-radius:14px;padding:10px 12px;font-weight:800;color:#854d0e !important;font-size:13.5px;animation:cplqPop .5s ease}

/* ---- Final result: podium ---- */
.cplq-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:18px 0 10px}
.cplq-podium-slot{flex:1;max-width:100px;text-align:center}
.cplq-podium-slot .em{font-size:26px}
.cplq-podium-slot .name{font-size:11.5px;font-weight:800;color:var(--cplq-s-text) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cplq-podium-bar{border-radius:10px 10px 0 0;margin-top:4px;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;font-weight:900;color:#fff !important}
.cplq-podium-slot.p1 .cplq-podium-bar{background:#f59e0b !important;height:78px}
.cplq-podium-slot.p2 .cplq-podium-bar{background:#94a3b8 !important;height:56px}
.cplq-podium-slot.p3 .cplq-podium-bar{background:#c2884a !important;height:40px}

/* ---- Confetti burst on victory ---- */
.cplq-confetti-wrap{position:relative;height:0}
.cplq-confetti{position:absolute;top:-10px;font-size:18px;animation:cplqConfettiFall 1.4s ease-in forwards}
@keyframes cplqConfettiFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(140px) rotate(220deg);opacity:0}}

@media(max-width:480px){
	.cplq-hud-chip{font-size:11.5px;padding:5px 9px}
	.cplq-race-runner .tag{max-width:44px}
	.cplq-mission-crew{max-width:70px}
}