:root {
    --kl-navy: #0b1f43;
    --kl-navy-2: #07162f;
    --kl-navy-3: #040d1d;
    --kl-red: #d91f2d;
    --kl-red-dark: #9c111b;
    --kl-gold: #e5b23c;
    --kl-green: #12a76b;
    --kl-white: #ffffff;
    --kl-text: #18243a;
    --kl-muted: #758097;
    --kl-line: #dfe5ee;
    --kl-bg: #f4f6f9;
    --kl-shadow: 0 25px 70px rgba(7,22,47,.12);
}

.kl-page,
.kl-page * {
    box-sizing: border-box;
}

.kl-page {
    overflow: hidden;
    color: var(--kl-text);
    background: var(--kl-bg);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.kl-page img {
    max-width: 100%;
    display: block;
}

.kl-page a {
    text-decoration: none;
}

.kl-container {
    width: min(1440px, calc(100% - 44px));
    margin: 0 auto;
}

.kl-kicker {
    color: var(--kl-gold);
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .17em;
}

.kl-btn {
    min-height: 50px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 900;
    transition: .2s ease;
}

.kl-btn:hover {
    transform: translateY(-2px);
}

.kl-btn.red {
    background: var(--kl-red);
}

.kl-btn.red:hover {
    background: var(--kl-red-dark);
}

.kl-btn.ghost {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
}

.kl-flash-zone {
    padding-top: 12px;
}

.kl-flash {
    min-height: 48px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    font-weight: 850;
}

.kl-flash.success {
    color: #0d6941;
    border: 1px solid #bde5d1;
    background: #eaf8f1;
}

.kl-flash.error {
    color: #94171f;
    border: 1px solid #efc3c6;
    background: #fff0f1;
}

.kl-section {
    padding: 95px 0;
}

.kl-section-dark {
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(217,31,45,.18), transparent 28%),
        var(--kl-navy-3);
}

.kl-section-head {
    margin-bottom: 38px;
    display: grid;
    grid-template-columns: 1fr minmax(300px,.55fr);
    gap: 35px;
    align-items: end;
}

.kl-section-head > div > span {
    color: var(--kl-red);
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .16em;
}

.kl-section-head h2 {
    margin: 7px 0 0;
    color: var(--kl-navy);
    font-size: clamp(38px,5vw,68px);
    line-height: .98;
    font-weight: 1000;
    letter-spacing: -.04em;
}

.kl-section-head h2 strong {
    color: var(--kl-red);
}

.kl-section-head > p {
    margin: 0;
    color: var(--kl-muted);
    font-size: 12px;
    line-height: 1.9;
}

.kl-section-head.light h2 {
    color: #fff;
}

.kl-section-head.light > p {
    color: rgba(255,255,255,.54);
}

.kl-empty {
    grid-column: 1 / -1;
    padding: 55px 22px;
    text-align: center;
    color: var(--kl-muted);
    border: 1px dashed var(--kl-line);
    background: #fff;
}

.kl-empty.small {
    padding: 30px 20px;
}

/* =========================================================
   INDEX
========================================================= */

.kl-index-hero {
    min-height: 610px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 18% 30%, rgba(217,31,45,.35), transparent 25%),
        radial-gradient(circle at 82% 18%, rgba(229,178,60,.11), transparent 20%),
        linear-gradient(145deg, #040c1c, #0a2149);
}

.kl-index-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image:
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 55px 55px;
}

.kl-index-hero::after {
    content: "LIVE";
    position: absolute;
    left: -50px;
    bottom: -100px;
    color: rgba(255,255,255,.035);
    font-size: 280px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -.08em;
}

.kl-index-glow {
    width: 560px;
    height: 560px;
    position: absolute;
    right: -120px;
    bottom: -160px;
    border-radius: 50%;
    background: rgba(217,31,45,.22);
    filter: blur(90px);
}

.kl-index-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 65px;
    align-items: center;
}

.kl-index-hero h1 {
    margin: 12px 0;
    font-size: clamp(70px,10vw,145px);
    line-height: .82;
    font-weight: 1000;
    letter-spacing: -.065em;
}

.kl-index-hero h1 strong {
    display: inline-block;
    padding: 0 .13em .04em;
    color: #fff;
    background: var(--kl-red);
    transform: rotate(-2deg);
}

.kl-index-hero p {
    max-width: 720px;
    color: rgba(255,255,255,.66);
    font-size: 16px;
    line-height: 1.9;
}

.kl-index-actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kl-index-logo {
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
}

.kl-index-logo img {
    width: 210px;
    height: 235px;
    margin: 0 auto;
    object-fit: contain;
}

.kl-index-logo span {
    display: block;
    margin-top: 15px;
    color: var(--kl-gold);
    font-size: 11px;
    font-weight: 900;
}

.kl-challenge-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.kl-challenge-card {
    overflow: hidden;
    border: 1px solid var(--kl-line);
    background: #fff;
    box-shadow: 0 14px 35px rgba(10,32,70,.05);
}

.kl-challenge-card.is-live {
    border-color: rgba(217,31,45,.5);
    box-shadow: 0 20px 50px rgba(217,31,45,.10);
}

.kl-challenge-card-cover {
    height: 220px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 20%, rgba(217,31,45,.24), transparent 30%),
        var(--kl-navy);
}

.kl-challenge-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kl-challenge-card-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(5,15,36,.80), transparent 65%);
}

.kl-status-pill {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 7px 9px;
    color: #fff;
    background: var(--kl-red);
    font-size: 8px;
    font-weight: 950;
}

.kl-challenge-card-copy {
    padding: 18px;
}

.kl-challenge-card-copy > small {
    color: var(--kl-red);
    font-size: 8px;
    font-weight: 900;
}

.kl-challenge-card-copy h3 {
    margin: 6px 0;
    color: var(--kl-navy);
    font-size: 23px;
}

.kl-challenge-card-copy > p {
    min-height: 38px;
    color: var(--kl-muted);
    font-size: 10px;
    line-height: 1.7;
}

.kl-card-stats {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--kl-line);
    border-bottom: 1px solid var(--kl-line);
}

.kl-card-stats > div {
    padding: 12px 0;
}

.kl-card-stats > div:first-child {
    border-left: 1px solid var(--kl-line);
}

.kl-card-stats span,
.kl-card-stats strong {
    display: block;
}

.kl-card-stats span {
    color: var(--kl-muted);
    font-size: 8px;
}

.kl-card-stats strong {
    margin-top: 3px;
    color: var(--kl-navy);
}

.kl-mini-countdown {
    margin-top: 13px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--kl-navy);
    background: var(--kl-bg);
    font-size: 9px;
}

.kl-mini-countdown span {
    color: var(--kl-muted);
}

.kl-card-footer {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.kl-card-footer a {
    color: var(--kl-red);
    font-size: 10px;
    font-weight: 900;
}

.kl-registered-tag {
    padding: 5px 7px;
    color: #0c7549;
    background: #ebf9f2;
    font-size: 8px;
    font-weight: 900;
}

.kl-past-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}

.kl-past-card {
    min-height: 160px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    color: #fff;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.04);
}

.kl-past-card span {
    color: #ff6670;
    font-size: 8px;
}

.kl-past-card strong {
    margin-top: 8px;
    font-size: 18px;
}

.kl-past-card small {
    margin-top: auto;
    color: rgba(255,255,255,.44);
}

.kl-past-card b {
    margin-top: 7px;
    color: var(--kl-gold);
    font-size: 9px;
}

/* =========================================================
   LANDING PAGE
========================================================= */

.kl-landing-hero {
    min-height: 790px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--kl-navy-3);
}

.kl-landing-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: .42;
}

.kl-landing-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 25%, rgba(217,31,45,.28), transparent 25%),
        linear-gradient(90deg, rgba(4,13,29,.98), rgba(7,20,44,.84) 58%, rgba(7,20,44,.68));
}

.kl-grid-overlay {
    position: absolute;
    inset: 0;
    opacity: .07;
    background-image:
        linear-gradient(rgba(255,255,255,.20) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.20) 1px, transparent 1px);
    background-size: 54px 54px;
}

.kl-landing-layout {
    min-height: 790px;
    position: relative;
    z-index: 2;
    padding: 70px 0 50px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 34px;
    align-items: center;
}

.kl-landing-brand {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 30px;
    align-items: center;
}

.kl-landing-logo img {
    width: 270px;
    height: 310px;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.35));
}

.kl-live-lockup {
    text-align: center;
}

.kl-gold-line {
    display: inline-block;
    padding: 8px 18px;
    color: var(--kl-gold);
    border: 1px solid rgba(229,178,60,.75);
    font-size: 9px;
    font-weight: 900;
}

.kl-live-lockup h1 {
    margin: 18px 0 0;
    font-size: clamp(70px,9vw,130px);
    line-height: .80;
    font-weight: 1000;
    letter-spacing: -.06em;
}

.kl-live-lockup h1 strong {
    display: inline-block;
    padding: 0 .12em .04em;
    color: #fff;
    background: var(--kl-red);
    transform: rotate(-2deg);
}

.kl-live-lockup h2 {
    margin: 18px 0 0;
    font-size: 27px;
}

.kl-live-lockup > p {
    margin: 8px auto 0;
    max-width: 650px;
    color: rgba(255,255,255,.62);
    line-height: 1.8;
}

.kl-live-icons {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.76);
    font-size: 10px;
    font-weight: 850;
}

.kl-countdown-box {
    width: min(620px,100%);
    margin: 24px auto 0;
    padding: 18px 22px;
    border: 1px solid rgba(229,178,60,.75);
    background: rgba(4,13,29,.62);
    backdrop-filter: blur(12px);
}

.kl-countdown-box > span,
.kl-countdown-box > strong,
.kl-countdown-box > small {
    display: block;
}

.kl-countdown-box > span {
    color: var(--kl-gold);
    font-size: 10px;
    font-weight: 950;
}

.kl-countdown-box > strong {
    margin-top: 8px;
    font-size: 27px;
    letter-spacing: .04em;
}

.kl-countdown-box > small {
    margin-top: 9px;
    color: rgba(255,255,255,.54);
}

.kl-live-now-banner {
    width: fit-content;
    margin: 24px auto 0;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--kl-red);
    font-weight: 950;
}

.kl-live-now-banner i,
.kl-live-badge i,
.kl-live-count i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 7px rgba(255,255,255,.12);
}

.kl-registration-card {
    padding: 22px;
    border: 1px solid rgba(217,31,45,.7);
    background: rgba(8,24,54,.84);
    backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px rgba(0,0,0,.28);
}

.kl-reg-pill {
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    padding: 7px 11px;
    color: #fff;
    background: var(--kl-red);
    font-size: 8px;
    font-weight: 950;
}

.kl-reg-pill.success {
    background: var(--kl-green);
}

.kl-reg-pill.muted {
    background: #546077;
}

.kl-registration-card h3 {
    margin: 15px 0;
    text-align: center;
    font-size: 21px;
    line-height: 1.5;
}

.kl-registration-card h3 strong {
    display: block;
    margin-top: 4px;
    font-size: 26px;
    letter-spacing: .04em;
}

.kl-fee-box {
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
}

.kl-fee-box span,
.kl-fee-box strong {
    display: block;
}

.kl-fee-box span {
    color: rgba(255,255,255,.52);
    font-size: 9px;
}

.kl-fee-box strong {
    margin-top: 5px;
    color: var(--kl-gold);
    font-size: 27px;
}

.kl-balance-line {
    margin-top: 10px;
    text-align: center;
    color: rgba(255,255,255,.48);
    font-size: 9px;
}

.kl-balance-line strong {
    color: #fff;
}

.kl-register-btn {
    width: 100%;
    min-height: 52px;
    margin-top: 13px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    background: var(--kl-red);
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}

.kl-registration-closed {
    margin-top: 13px;
    padding: 13px;
    text-align: center;
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.08);
}

.kl-participant-number {
    padding: 14px;
    text-align: center;
    color: rgba(255,255,255,.54);
    background: rgba(255,255,255,.04);
}

.kl-participant-number strong {
    display: block;
    margin-top: 4px;
    color: var(--kl-gold);
    font-size: 24px;
}

.kl-participant-count {
    margin-top: 13px;
    padding: 13px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.10);
}

.kl-participant-count span,
.kl-participant-count strong,
.kl-participant-count small {
    display: block;
}

.kl-participant-count span {
    color: rgba(255,255,255,.48);
    font-size: 8px;
}

.kl-participant-count strong {
    margin-top: 3px;
    color: var(--kl-gold);
    font-size: 26px;
}

.kl-participant-count small {
    margin-top: 4px;
    color: #5cd894;
    font-size: 8px;
}

.kl-sponsor-card {
    min-height: 105px;
    position: relative;
    margin-top: 13px;
    padding: 15px;
    display: grid;
    grid-template-columns: 90px 1fr 34px;
    gap: 12px;
    align-items: center;
    color: #fff;
    border: 1px solid rgba(229,178,60,.72);
    background: rgba(7,20,44,.86);
}

.kl-sponsor-label {
    position: absolute;
    top: -11px;
    right: 50%;
    transform: translateX(50%);
    padding: 5px 12px;
    color: var(--kl-navy);
    background: var(--kl-gold);
    font-size: 8px;
    font-weight: 950;
}

.kl-sponsor-media {
    height: 65px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.kl-sponsor-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kl-sponsor-copy strong,
.kl-sponsor-copy span {
    display: block;
}

.kl-sponsor-copy strong {
    color: var(--kl-gold);
    font-size: 13px;
}

.kl-sponsor-copy span {
    margin-top: 5px;
    color: rgba(255,255,255,.56);
    font-size: 9px;
}

.kl-sponsor-arrow {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
}

.kl-landing-info-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 13px;
}

.kl-info-card {
    min-height: 340px;
    padding: 20px;
    border: 1px solid var(--kl-line);
    background: #fff;
}

.kl-info-title {
    margin: -20px -20px 18px;
    padding: 14px 18px;
    color: #fff;
    background: var(--kl-navy);
    font-weight: 950;
}

.kl-info-card.red-head .kl-info-title {
    background: var(--kl-red);
}

.kl-rule-list {
    display: grid;
    gap: 9px;
}

.kl-rule-list > div {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 9px;
    align-items: center;
}

.kl-rule-list span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--kl-navy);
    font-size: 9px;
    font-weight: 950;
}

.kl-rule-list p {
    margin: 0;
    color: var(--kl-muted);
    font-size: 10px;
    line-height: 1.6;
}

.kl-prize-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9px;
}

.kl-prize-grid > div {
    min-height: 118px;
    padding: 13px;
    text-align: center;
    border: 1px solid var(--kl-line);
    background: var(--kl-bg);
}

.kl-prize-grid b,
.kl-prize-grid strong,
.kl-prize-grid span {
    display: block;
}

.kl-prize-grid b {
    font-size: 28px;
}

.kl-prize-grid strong {
    margin-top: 5px;
    color: var(--kl-navy);
}

.kl-prize-grid span {
    margin-top: 4px;
    color: var(--kl-muted);
    font-size: 8px;
}

.kl-scoring-demo {
    display: grid;
    gap: 7px;
}

.kl-scoring-demo > div {
    min-height: 42px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--kl-bg);
}

.kl-scoring-demo span {
    color: var(--kl-muted);
    font-size: 9px;
}

.kl-scoring-demo strong {
    color: var(--kl-navy);
}

.kl-about-challenge {
    margin-top: 22px;
    padding: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(217,31,45,.22), transparent 25%),
        var(--kl-navy);
}

.kl-about-challenge > span {
    color: var(--kl-gold);
    font-size: 8px;
    font-weight: 950;
}

.kl-about-challenge h2 {
    margin: 6px 0;
    font-size: 30px;
}

.kl-about-challenge p {
    max-width: 850px;
    color: rgba(255,255,255,.58);
    line-height: 1.9;
}

/* =========================================================
   WAITING ROOM
========================================================= */

.kl-waiting-page {
    min-height: 100vh;
    background: var(--kl-navy-3);
}

.kl-waiting-hero {
    min-height: 880px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--kl-navy-3);
}

.kl-waiting-bg,
.kl-live-room-bg,
.kl-results-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(217,31,45,.25), transparent 25%),
        radial-gradient(circle at 78% 15%, rgba(229,178,60,.08), transparent 20%),
        linear-gradient(145deg, #040d1d, #0b234b);
}

.kl-waiting-layout {
    min-height: 880px;
    position: relative;
    z-index: 2;
    padding: 35px 0;
    display: grid;
    grid-template-columns: 300px 1fr 320px;
    gap: 16px;
    align-items: start;
}

.kl-waiting-user-panel,
.kl-waiting-info-panel {
    padding: 17px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(4,15,34,.72);
    backdrop-filter: blur(12px);
}

.kl-waiting-ok {
    padding: 14px;
    text-align: center;
    border: 1px solid rgba(18,167,107,.65);
    color: #6de0aa;
    background: rgba(18,167,107,.10);
}

.kl-waiting-ok strong,
.kl-waiting-ok span {
    display: block;
}

.kl-waiting-ok strong {
    font-size: 19px;
}

.kl-waiting-ok span {
    margin-top: 4px;
    color: rgba(255,255,255,.50);
    font-size: 8px;
}

.kl-user-card,
.kl-wallet-card,
.kl-waiting-participants {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
}

.kl-user-card {
    display: flex;
    align-items: center;
    gap: 11px;
}

.kl-user-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #53627e;
    font-size: 23px;
    font-weight: 1000;
}

.kl-user-card strong,
.kl-user-card span,
.kl-wallet-card span,
.kl-wallet-card strong,
.kl-waiting-participants span,
.kl-waiting-participants strong,
.kl-waiting-participants small {
    display: block;
}

.kl-user-card strong {
    font-size: 15px;
}

.kl-user-card span,
.kl-wallet-card span,
.kl-waiting-participants span {
    color: rgba(255,255,255,.44);
    font-size: 8px;
}

.kl-wallet-card strong,
.kl-waiting-participants strong {
    margin-top: 4px;
    color: var(--kl-gold);
    font-size: 22px;
}

.kl-waiting-participants small {
    margin-top: 3px;
    color: #5cda98;
    font-size: 8px;
}

.kl-waiting-center {
    min-width: 0;
}

.kl-live-header-lockup {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-align: center;
}

.kl-live-header-lockup img {
    width: 120px;
    height: 140px;
    object-fit: contain;
}

.kl-live-header-lockup h1 {
    margin: 0;
    font-size: clamp(54px,7vw,95px);
    line-height: .82;
    font-weight: 1000;
    letter-spacing: -.05em;
}

.kl-live-header-lockup h1 strong {
    display: inline-block;
    padding: 0 .12em .04em;
    background: var(--kl-red);
    transform: rotate(-2deg);
}

.kl-live-header-lockup p {
    margin: 15px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 15px;
}

.kl-waiting-countdown-card {
    padding: 28px;
    text-align: center;
    border: 1px solid rgba(217,31,45,.7);
    background: rgba(7,22,47,.78);
}

.kl-waiting-countdown-card > span {
    color: var(--kl-gold);
    font-size: 9px;
    font-weight: 950;
}

.kl-waiting-countdown-card h2 {
    margin: 8px auto 18px;
    max-width: 700px;
    font-size: 27px;
}

.kl-big-countdown strong {
    display: block;
    padding: 18px 12px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.045);
    font-size: clamp(33px,5vw,64px);
    letter-spacing: .08em;
}

.kl-waiting-status {
    margin-top: 12px;
    color: rgba(255,255,255,.44);
    font-size: 9px;
}

.kl-first-question-preview {
    margin-top: 14px;
    padding: 0 18px 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(7,22,47,.72);
}

.kl-first-question-preview > span {
    width: fit-content;
    margin: -1px auto 15px;
    padding: 7px 25px;
    display: block;
    color: #fff;
    background: var(--kl-red);
    font-size: 9px;
    font-weight: 950;
}

.kl-first-question-preview > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 15px;
    align-items: center;
}

.kl-first-question-preview b {
    font-size: 50px;
    text-align: center;
}

.kl-first-question-preview small,
.kl-first-question-preview strong,
.kl-first-question-preview p {
    display: block;
}

.kl-first-question-preview small {
    color: rgba(255,255,255,.42);
}

.kl-first-question-preview strong {
    margin-top: 3px;
    color: var(--kl-gold);
    font-size: 22px;
}

.kl-first-question-preview p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.48);
    font-size: 9px;
}

.kl-waiting-info-title {
    padding: 12px;
    color: #fff;
    background: var(--kl-red);
    font-weight: 950;
}

.kl-waiting-facts {
    display: grid;
}

.kl-waiting-facts > div {
    padding: 13px 3px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.kl-waiting-facts span,
.kl-waiting-facts strong {
    display: block;
}

.kl-waiting-facts span {
    color: rgba(255,255,255,.40);
    font-size: 8px;
}

.kl-waiting-facts strong {
    margin-top: 4px;
    font-size: 12px;
}

.kl-waiting-rules {
    margin-top: 16px;
}

.kl-waiting-rules h3 {
    font-size: 15px;
}

.kl-waiting-rules > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    align-items: center;
}

.kl-waiting-rules span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: 8px;
}

.kl-waiting-rules p {
    color: rgba(255,255,255,.55);
    font-size: 9px;
}

/* =========================================================
   LIVE QUESTION ROOM
========================================================= */

.kl-live-room {
    min-height: 100vh;
    background: var(--kl-navy-3);
}

.kl-live-room-shell {
    min-height: 900px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.kl-live-room-layout {
    min-height: 900px;
    position: relative;
    z-index: 2;
    padding: 25px 0;
    display: grid;
    grid-template-columns: 250px minmax(0,1fr) 340px;
    gap: 15px;
    align-items: start;
}

.kl-live-room-brand {
    min-height: 835px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(4,15,34,.75);
}

.kl-live-room-brand > img {
    width: 170px;
    height: 195px;
    margin: 0 auto;
    object-fit: contain;
}

.kl-live-room-brand > div:nth-child(2) {
    margin-top: 20px;
    text-align: center;
}

.kl-live-room-brand span {
    color: rgba(255,255,255,.42);
    font-size: 8px;
    font-weight: 900;
}

.kl-live-room-brand h1 {
    margin: 5px 0;
    font-size: 36px;
    line-height: .88;
    font-weight: 1000;
}

.kl-live-room-brand h1 strong {
    display: inline-block;
    padding: 0 5px 3px;
    background: var(--kl-red);
}

.kl-live-room-brand p {
    color: rgba(255,255,255,.56);
    line-height: 1.6;
}

.kl-live-count {
    margin-top: auto;
    padding: 13px;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    color: rgba(255,255,255,.68);
    border: 1px solid rgba(255,255,255,.08);
}

.kl-live-count i {
    background: var(--kl-red);
}

.kl-live-topbar {
    min-height: 70px;
    margin-bottom: 13px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(4,15,34,.72);
}

.kl-live-badge {
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--kl-red);
    font-size: 9px;
    font-weight: 950;
}

.kl-live-state-text {
    color: rgba(255,255,255,.48);
    font-size: 9px;
}

.kl-question-card {
    overflow: hidden;
    border: 1px solid rgba(68,122,196,.65);
    background: rgba(7,22,47,.86);
    box-shadow: 0 25px 70px rgba(0,0,0,.18);
}

.kl-question-head {
    min-height: 58px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.kl-question-head > div:first-child {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.kl-question-head span {
    color: rgba(255,255,255,.44);
    font-size: 9px;
}

.kl-question-head strong {
    font-size: 15px;
}

.kl-question-head > div:last-child {
    color: rgba(255,255,255,.63);
    font-size: 10px;
}

.kl-question-body {
    min-height: 540px;
    padding: 24px;
}

.kl-question-placeholder {
    min-height: 480px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

.kl-waiting-pulse {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(255,255,255,.10);
    border-top-color: var(--kl-red);
    border-radius: 50%;
    animation: klSpin 1s linear infinite;
}

@keyframes klSpin {
    to { transform: rotate(360deg); }
}

.kl-question-placeholder h2 {
    margin: 16px 0 5px;
    font-size: 28px;
}

.kl-question-placeholder p {
    color: rgba(255,255,255,.44);
}

.kl-question-live-content h2 {
    margin: 15px auto;
    max-width: 900px;
    text-align: center;
    font-size: clamp(30px,4vw,52px);
    line-height: 1.35;
}

.kl-question-image {
    max-width: 650px;
    max-height: 260px;
    margin: 0 auto 18px;
    overflow: hidden;
    text-align: center;
}

.kl-question-image img {
    max-height: 260px;
    margin: 0 auto;
    object-fit: contain;
}

.kl-question-timer {
    width: fit-content;
    min-width: 220px;
    margin: 22px auto;
    padding: 12px 18px;
    text-align: center;
    border: 1px solid rgba(217,31,45,.85);
    background: rgba(217,31,45,.08);
}

.kl-question-timer span,
.kl-question-timer strong {
    display: block;
}

.kl-question-timer span {
    color: #ff6d74;
    font-size: 8px;
}

.kl-question-timer strong {
    margin-top: 4px;
    color: #ff3641;
    font-size: 28px;
    letter-spacing: .08em;
}

.kl-text-answer-wrap input {
    width: 100%;
    min-height: 72px;
    padding: 0 18px;
    border: 1px solid rgba(108,151,214,.70);
    color: #fff;
    background: rgba(255,255,255,.045);
    font: inherit;
    font-size: 15px;
    outline: 0;
}

.kl-text-answer-wrap input:focus {
    border-color: #8ebcf5;
    box-shadow: 0 0 0 3px rgba(90,150,220,.10);
}

.kl-options-wrap {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

.kl-option-btn {
    min-height: 65px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    background: rgba(255,255,255,.04);
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.kl-option-btn strong {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
}

.kl-option-btn.selected {
    border-color: var(--kl-red);
    background: rgba(217,31,45,.13);
}

.kl-answer-submit {
    width: min(520px,100%);
    min-height: 58px;
    margin: 18px auto 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #fff;
    background: var(--kl-red);
    font: inherit;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
}

.kl-answer-submit:disabled {
    opacity: .48;
    cursor: wait;
}

#klAnswerForm > small {
    display: block;
    margin-top: 8px;
    text-align: center;
    color: rgba(255,255,255,.37);
    font-size: 8px;
}

.kl-answer-confirmation,
.kl-answer-result {
    margin-top: 13px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 1px solid rgba(18,167,107,.65);
    background: rgba(18,167,107,.11);
}

.kl-checkmark {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 4px solid #35ce88;
    border-radius: 50%;
    color: #35ce88;
    font-size: 24px;
    font-weight: 1000;
}

.kl-answer-confirmation strong,
.kl-answer-confirmation span,
.kl-answer-confirmation small {
    display: block;
}

.kl-answer-confirmation strong {
    font-size: 18px;
}

.kl-answer-confirmation span {
    margin-top: 3px;
    color: #52de9c;
}

.kl-answer-confirmation small {
    margin-top: 4px;
    color: rgba(255,255,255,.42);
}

.kl-answer-result {
    justify-content: space-between;
    border-color: rgba(229,178,60,.6);
    background: rgba(229,178,60,.08);
}

.kl-answer-result > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kl-answer-result > div:first-child > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--kl-navy);
    background: var(--kl-gold);
    font-weight: 1000;
}

.kl-answer-result strong,
.kl-answer-result p {
    margin: 0;
}

.kl-answer-result p {
    margin-top: 3px;
    color: rgba(255,255,255,.55);
}

.kl-result-points {
    text-align: center;
}

.kl-result-points span,
.kl-result-points strong {
    display: block;
}

.kl-result-points span {
    color: rgba(255,255,255,.42);
    font-size: 8px;
}

.kl-result-points strong {
    margin-top: 3px;
    color: var(--kl-gold);
    font-size: 28px;
}

.kl-live-sidebar {
    display: grid;
    gap: 13px;
}

.kl-live-user-card,
.kl-live-leaderboard {
    padding: 16px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(4,15,34,.74);
}

.kl-live-user-card {
    display: grid;
    grid-template-columns: 54px 1fr 90px;
    gap: 10px;
    align-items: center;
}

.kl-live-avatar {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #566681;
    font-size: 20px;
    font-weight: 1000;
}

.kl-live-user-card span,
.kl-live-user-card strong {
    display: block;
}

.kl-live-user-card > div:nth-child(2) span {
    color: rgba(255,255,255,.40);
    font-size: 8px;
}

.kl-live-user-card > div:nth-child(2) strong {
    margin-top: 2px;
}

.kl-live-points {
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.08);
}

.kl-live-points span {
    color: rgba(255,255,255,.40);
    font-size: 8px;
}

.kl-live-points strong {
    margin-top: 3px;
    color: var(--kl-gold);
    font-size: 27px;
}

.kl-side-head {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.kl-side-head h3 {
    margin: 0;
    font-size: 15px;
}

.kl-leader-list {
    margin-top: 8px;
}

.kl-leader-row {
    min-height: 48px;
    padding: 0 7px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.kl-leader-row:last-child {
    border-bottom: 0;
}

.kl-leader-rank {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.09);
    font-size: 9px;
    font-weight: 1000;
}

.kl-leader-row:nth-child(1) .kl-leader-rank {
    color: var(--kl-navy);
    background: var(--kl-gold);
}

.kl-leader-row:nth-child(2) .kl-leader-rank {
    color: var(--kl-navy);
    background: #c9d0dd;
}

.kl-leader-row:nth-child(3) .kl-leader-rank {
    color: var(--kl-navy);
    background: #c67d42;
}

.kl-leader-row strong {
    font-size: 10px;
}

.kl-leader-row b {
    color: var(--kl-gold);
}

.kl-loading-line {
    height: 40px;
    margin-top: 6px;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );
    background-size: 200% 100%;
    animation: klShimmer 1.4s infinite;
}

@keyframes klShimmer {
    to { background-position: -200% 0; }
}

/* =========================================================
   RESULTS
========================================================= */

.kl-results-page {
    background: var(--kl-navy-3);
}

.kl-results-hero {
    min-height: 790px;
    position: relative;
    overflow: hidden;
    padding: 60px 0 35px;
    color: #fff;
}

.kl-results-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 35%, rgba(229,178,60,.12), transparent 26%),
        linear-gradient(0deg, rgba(4,13,29,.96), rgba(4,13,29,.40));
}

.kl-results-hero > .kl-container {
    position: relative;
    z-index: 2;
}

.kl-results-title {
    text-align: center;
}

.kl-results-title > span {
    display: inline-block;
    padding: 7px 16px;
    color: var(--kl-gold);
    border: 1px solid rgba(229,178,60,.70);
    font-size: 9px;
    font-weight: 950;
}

.kl-results-title h1 {
    margin: 14px 0 2px;
    font-size: clamp(60px,8vw,118px);
    line-height: .9;
    font-weight: 1000;
    letter-spacing: -.055em;
}

.kl-results-title > strong {
    display: inline-block;
    padding: 3px 14px 8px;
    background: var(--kl-red);
    font-size: 28px;
    transform: rotate(-2deg);
}

.kl-results-title p {
    color: rgba(255,255,255,.58);
}

.kl-podium {
    width: min(880px,100%);
    margin: 55px auto 0;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 8px;
    align-items: end;
}

.kl-podium-card {
    min-height: 245px;
    position: relative;
    padding: 46px 18px 20px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}

.kl-podium-card.gold {
    min-height: 320px;
    border-color: rgba(229,178,60,.60);
    background: linear-gradient(180deg, rgba(229,178,60,.22), rgba(255,255,255,.035));
}

.kl-podium-card.silver {
    border-color: rgba(202,211,224,.45);
}

.kl-podium-card.bronze {
    border-color: rgba(199,126,70,.50);
}

.kl-crown {
    position: absolute;
    top: 13px;
    right: 50%;
    transform: translateX(50%);
    color: var(--kl-gold);
    font-size: 32px;
}

.kl-podium-card.silver .kl-crown {
    color: #d1d6df;
}

.kl-podium-card.bronze .kl-crown {
    color: #d38a4d;
}

.kl-podium-rank {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--kl-navy);
    background: var(--kl-gold);
    font-size: 27px;
    font-weight: 1000;
}

.kl-podium-card.silver .kl-podium-rank {
    background: #d1d6df;
}

.kl-podium-card.bronze .kl-podium-rank {
    background: #d38a4d;
}

.kl-podium-card h3 {
    margin: 0;
    font-size: 18px;
}

.kl-podium-card > strong {
    display: block;
    margin-top: 10px;
    color: var(--kl-gold);
    font-size: 19px;
}

.kl-my-final-card {
    width: min(380px,100%);
    margin: 35px auto 0;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(217,31,45,.75);
    background: rgba(7,22,47,.78);
}

.kl-my-final-card > span {
    color: #ff6971;
    font-size: 9px;
    font-weight: 950;
}

.kl-my-final-card h2 {
    margin: 6px 0;
    color: var(--kl-gold);
    font-size: 28px;
}

.kl-my-rank {
    margin: 12px 0;
}

.kl-my-rank strong,
.kl-my-rank small {
    display: block;
}

.kl-my-rank strong {
    font-size: 54px;
    line-height: 1;
}

.kl-my-rank small {
    margin-top: 4px;
    color: rgba(255,255,255,.45);
}

.kl-final-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid rgba(255,255,255,.09);
}

.kl-final-stats > div {
    padding: 12px 5px 0;
}

.kl-final-stats span,
.kl-final-stats strong {
    display: block;
}

.kl-final-stats span {
    color: rgba(255,255,255,.38);
    font-size: 7px;
}

.kl-final-stats strong {
    margin-top: 3px;
    font-size: 13px;
}

.kl-results-lower {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 18px;
    align-items: start;
}

.kl-badges-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.kl-badges-grid article {
    min-height: 180px;
    padding: 18px;
    text-align: center;
    border: 1px solid var(--kl-line);
    background: #fff;
}

.kl-badges-grid b,
.kl-badges-grid strong,
.kl-badges-grid span {
    display: block;
}

.kl-badges-grid b {
    font-size: 39px;
}

.kl-badges-grid strong {
    margin-top: 8px;
    color: var(--kl-navy);
}

.kl-badges-grid span {
    margin-top: 5px;
    color: var(--kl-muted);
    font-size: 9px;
    line-height: 1.6;
}

.kl-results-actions {
    padding: 20px;
    color: #fff;
    background: var(--kl-navy);
}

.kl-results-actions > span {
    color: var(--kl-gold);
    font-size: 9px;
    font-weight: 950;
}

.kl-results-actions a {
    min-height: 72px;
    margin-top: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    font-weight: 900;
}

.kl-results-actions a.red {
    background: var(--kl-red);
    border-color: var(--kl-red);
}

.kl-results-actions a small {
    margin-top: 4px;
    color: rgba(255,255,255,.55);
    font-weight: 400;
}

.kl-sponsor-thanks {
    padding: 60px 0;
    color: #fff;
    background: var(--kl-red);
}

.kl-sponsor-thanks > .kl-container {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 30px;
    align-items: center;
}

.kl-sponsor-thanks span {
    color: rgba(255,255,255,.52);
    font-size: 8px;
    font-weight: 900;
}

.kl-sponsor-thanks h2 {
    margin: 6px 0;
    font-size: 48px;
}

.kl-sponsor-thanks p {
    margin: 0;
    color: rgba(255,255,255,.67);
}

/* =========================================================
   MY CHALLENGES
========================================================= */

.kl-my-hero {
    padding: 110px 0 75px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(217,31,45,.25), transparent 25%),
        linear-gradient(145deg, #040d1d, #0b234b);
}

.kl-my-hero span {
    color: var(--kl-gold);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .16em;
}

.kl-my-hero h1 {
    margin: 10px 0;
    font-size: clamp(48px,7vw,90px);
    line-height: .95;
    font-weight: 1000;
}

.kl-my-hero h1 strong {
    color: rgba(255,255,255,.52);
}

.kl-my-hero p {
    color: rgba(255,255,255,.58);
}

.kl-my-list {
    overflow: hidden;
    border: 1px solid var(--kl-line);
    background: #fff;
}

.kl-my-list article {
    min-height: 95px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr 320px 130px;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid var(--kl-line);
}

.kl-my-list article:last-child {
    border-bottom: 0;
}

.kl-my-list article > div:first-child > span {
    color: var(--kl-red);
    font-size: 8px;
}

.kl-my-list h3 {
    margin: 4px 0;
    color: var(--kl-navy);
}

.kl-my-list p {
    margin: 0;
    color: var(--kl-muted);
    font-size: 9px;
}

.kl-my-list-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
}

.kl-my-list-stats > div {
    padding: 10px;
    text-align: center;
    background: var(--kl-bg);
}

.kl-my-list-stats span,
.kl-my-list-stats strong {
    display: block;
}

.kl-my-list-stats span {
    color: var(--kl-muted);
    font-size: 7px;
}

.kl-my-list-stats strong {
    margin-top: 3px;
    color: var(--kl-navy);
}

.kl-my-list article > div:last-child a {
    color: var(--kl-red);
    font-size: 9px;
    font-weight: 900;
}

.kl-my-list article > div:last-child a.live {
    padding: 8px 10px;
    color: #fff;
    background: var(--kl-red);
}

.kl-pagination {
    margin-top: 20px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1180px) {
    .kl-index-hero-inner {
        grid-template-columns: 1fr 290px;
        gap: 30px;
    }

    .kl-challenge-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .kl-past-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .kl-landing-layout {
        grid-template-columns: 1fr 320px;
    }

    .kl-landing-brand {
        grid-template-columns: 220px 1fr;
    }

    .kl-landing-logo img {
        width: 210px;
        height: 250px;
    }

    .kl-waiting-layout {
        grid-template-columns: 250px 1fr;
    }

    .kl-waiting-info-panel {
        grid-column: 1 / -1;
    }

    .kl-live-room-layout {
        grid-template-columns: 190px 1fr;
    }

    .kl-live-sidebar {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3,1fr);
    }

    .kl-live-room-brand {
        min-height: auto;
    }

    .kl-live-room-brand > img {
        width: 120px;
        height: 135px;
    }

    .kl-results-lower {
        grid-template-columns: 1fr 300px;
    }
}

@media(max-width:820px) {
    .kl-container {
        width: min(100% - 22px,1440px);
    }

    .kl-section {
        padding: 70px 0;
    }

    .kl-section-head {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kl-index-hero {
        min-height: 720px;
    }

    .kl-index-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .kl-index-logo {
        display: none;
    }

    .kl-index-actions {
        justify-content: center;
    }

    .kl-challenge-grid,
    .kl-landing-info-grid,
    .kl-badges-grid {
        grid-template-columns: 1fr;
    }

    .kl-past-grid {
        grid-template-columns: 1fr;
    }

    .kl-landing-layout,
    .kl-landing-brand {
        grid-template-columns: 1fr;
    }

    .kl-landing-logo {
        display: none;
    }

    .kl-registration-card {
        margin-bottom: 30px;
    }

    .kl-waiting-layout,
    .kl-live-room-layout {
        grid-template-columns: 1fr;
    }

    .kl-waiting-user-panel,
    .kl-waiting-info-panel {
        grid-column: auto;
    }

    .kl-live-room-brand {
        min-height: auto;
    }

    .kl-live-room-brand > img {
        display: none;
    }

    .kl-live-room-brand > div:nth-child(2) {
        margin-top: 0;
    }

    .kl-live-count {
        margin-top: 10px;
    }

    .kl-live-sidebar {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .kl-question-body {
        min-height: 480px;
        padding: 16px;
    }

    .kl-options-wrap {
        grid-template-columns: 1fr;
    }

    .kl-podium {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .kl-podium-card,
    .kl-podium-card.gold {
        min-height: 210px;
    }

    .kl-results-lower,
    .kl-sponsor-thanks > .kl-container {
        grid-template-columns: 1fr;
    }

    .kl-my-list article {
        grid-template-columns: 1fr;
    }

    .kl-my-list-stats {
        max-width: 430px;
    }
}

@media(max-width:520px) {
    .kl-index-hero h1 {
        font-size: 68px;
    }

    .kl-live-lockup h1 {
        font-size: 62px;
    }

    .kl-live-lockup h2 {
        font-size: 21px;
    }

    .kl-live-icons {
        gap: 9px;
    }

    .kl-countdown-box > strong {
        font-size: 18px;
    }

    .kl-registration-card {
        padding: 16px;
    }

    .kl-prize-grid {
        grid-template-columns: 1fr;
    }

    .kl-live-header-lockup {
        min-height: 145px;
    }

    .kl-live-header-lockup img {
        width: 80px;
        height: 95px;
    }

    .kl-live-header-lockup h1 {
        font-size: 46px;
    }

    .kl-waiting-countdown-card {
        padding: 20px 12px;
    }

    .kl-big-countdown strong {
        font-size: 25px;
    }

    .kl-first-question-preview > div {
        grid-template-columns: 55px 1fr;
    }

    .kl-live-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .kl-question-live-content h2 {
        font-size: 26px;
    }

    .kl-live-user-card {
        grid-template-columns: 45px 1fr;
    }

    .kl-live-points {
        grid-column: 1 / -1;
        padding-top: 10px;
        border-right: 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .kl-answer-confirmation,
    .kl-answer-result {
        align-items: flex-start;
        flex-direction: column;
    }

    .kl-final-stats {
        grid-template-columns: 1fr;
    }

    .kl-final-stats > div {
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .kl-my-list-stats {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   CHALLENGE REVIEW
========================================================= */

.kl-review-hero {
    padding: 105px 0 75px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 12%, rgba(217,31,45,.24), transparent 26%),
        linear-gradient(145deg, #040d1d, #0b234b);
}

.kl-review-hero > .kl-container > span {
    color: var(--kl-gold);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .15em;
}

.kl-review-hero h1 {
    margin: 10px 0;
    font-size: clamp(48px,7vw,90px);
    line-height: .95;
    font-weight: 1000;
}

.kl-review-hero h1 strong {
    color: rgba(255,255,255,.52);
}

.kl-review-hero p {
    color: rgba(255,255,255,.58);
}

.kl-review-list {
    display: grid;
    gap: 12px;
}

.kl-review-card {
    padding: 18px;
    display: grid;
    grid-template-columns: 55px 1fr 170px;
    gap: 18px;
    align-items: start;
    border: 1px solid var(--kl-line);
    background: #fff;
}

.kl-review-card.correct {
    border-right: 5px solid var(--kl-green);
}

.kl-review-card.incorrect {
    border-right: 5px solid var(--kl-red);
}

.kl-review-number {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--kl-navy);
    font-size: 18px;
    font-weight: 1000;
}

.kl-review-main > span {
    color: var(--kl-red);
    font-size: 8px;
    font-weight: 900;
}

.kl-review-main h2 {
    margin: 5px 0 14px;
    color: var(--kl-navy);
    font-size: 22px;
    line-height: 1.6;
}

.kl-review-image {
    max-width: 460px;
    max-height: 240px;
    margin-bottom: 14px;
    object-fit: contain;
}

.kl-review-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.kl-review-answers > div {
    padding: 11px;
    background: var(--kl-bg);
}

.kl-review-answers span,
.kl-review-answers strong {
    display: block;
}

.kl-review-answers span {
    color: var(--kl-muted);
    font-size: 8px;
}

.kl-review-answers strong {
    margin-top: 4px;
    color: var(--kl-navy);
}

.kl-review-explanation {
    margin: 12px 0 0;
    padding: 11px;
    color: #5d6980;
    background: #fff9e9;
    line-height: 1.8;
    font-size: 10px;
}

.kl-review-result {
    padding: 15px;
    text-align: center;
    background: var(--kl-bg);
}

.kl-review-result strong,
.kl-review-result span,
.kl-review-result small {
    display: block;
}

.kl-review-card.correct .kl-review-result > strong {
    color: var(--kl-green);
}

.kl-review-card.incorrect .kl-review-result > strong {
    color: var(--kl-red);
}

.kl-review-result span {
    margin-top: 8px;
    color: var(--kl-navy);
    font-size: 18px;
    font-weight: 950;
}

.kl-review-result small {
    margin-top: 6px;
    color: var(--kl-muted);
    font-size: 8px;
}

@media(max-width:760px) {
    .kl-review-card {
        grid-template-columns: 45px 1fr;
    }

    .kl-review-result {
        grid-column: 1 / -1;
    }

    .kl-review-answers {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   KARAMA LIVE UI REFINEMENT v1
   Sponsor visibility + Typography scale + Full-card click
   ========================================================= */

.kl-page {
    --kl-fs-micro: 10px;
    --kl-fs-small: 12px;
    --kl-fs-body: 14px;
    --kl-fs-card-title: 21px;
    --kl-fs-section-title: clamp(34px, 4.1vw, 54px);
    --kl-fs-hero-title: clamp(58px, 7vw, 96px);
}

/* Unified typography */
.kl-kicker,
.kl-section-head > div > span,
.kl-gold-line,
.kl-reg-pill,
.kl-status-pill,
.kl-challenge-card-copy > small,
.kl-rule-list span,
.kl-prize-grid span,
.kl-participant-count span,
.kl-participant-count small,
.kl-sponsor-label,
.kl-sponsor-copy span {
    font-size: var(--kl-fs-micro);
}

.kl-section-head > p,
.kl-challenge-card-copy > p,
.kl-rule-list p,
.kl-about-challenge p,
.kl-registration-card,
.kl-card-stats,
.kl-mini-countdown,
.kl-sponsor-copy,
.kl-scoring-demo {
    font-size: var(--kl-fs-small);
}

.kl-section-head h2 {
    font-size: var(--kl-fs-section-title);
    line-height: 1.08;
}

.kl-index-hero h1,
.kl-live-lockup h1 {
    font-size: var(--kl-fs-hero-title);
    line-height: .88;
}

.kl-index-hero p,
.kl-live-lockup > p {
    font-size: var(--kl-fs-body);
    line-height: 1.9;
}

.kl-live-lockup h2 {
    font-size: clamp(27px, 2.8vw, 38px);
    line-height: 1.25;
}

.kl-countdown-box > strong {
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.25;
}

.kl-registration-card h3 {
    font-size: 22px;
    line-height: 1.45;
}

.kl-registration-card h3 strong {
    font-size: 27px;
}

.kl-fee-box strong,
.kl-participant-count strong {
    font-size: 25px;
}

.kl-info-title {
    font-size: 15px;
    line-height: 1.35;
}

.kl-prize-grid strong,
.kl-scoring-demo strong {
    font-size: 13px;
}

.kl-about-challenge h2 {
    font-size: clamp(26px, 3vw, 38px);
}

/* Whole challenge card = one clickable surface */
.kl-challenge-card-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 14px;
    outline: none;
    transform: translateY(0);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.kl-challenge-card-link:hover {
    transform: translateY(-6px);
    border-color: rgba(217,31,45,.72);
    box-shadow: 0 24px 58px rgba(10,32,70,.14);
}

.kl-challenge-card-link:focus-visible {
    transform: translateY(-3px);
    border-color: var(--kl-red);
    box-shadow:
        0 0 0 4px rgba(217,31,45,.13),
        0 24px 58px rgba(10,32,70,.14);
}

.kl-challenge-card-link .kl-challenge-card-cover img {
    transition: transform .35s ease;
}

.kl-challenge-card-link:hover .kl-challenge-card-cover img {
    transform: scale(1.035);
}

.kl-challenge-card-copy {
    padding: 20px;
}

.kl-challenge-card-copy h3 {
    margin: 7px 0 5px;
    font-size: var(--kl-fs-card-title);
    line-height: 1.35;
}

.kl-challenge-card-copy > p {
    min-height: 42px;
    line-height: 1.75;
}

.kl-card-stats span {
    font-size: var(--kl-fs-micro);
}

.kl-card-stats strong {
    margin-top: 5px;
    font-size: 15px;
}

.kl-mini-countdown {
    min-height: 44px;
    align-items: center;
    font-size: var(--kl-fs-small);
}

.kl-card-footer {
    min-height: 42px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--kl-line);
}

.kl-card-footer-hint {
    color: var(--kl-muted);
    font-size: var(--kl-fs-micro);
}

.kl-card-open-cta {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 9px;
    color: #fff;
    background: var(--kl-red);
    font-size: 11px;
    font-weight: 950;
    transition: background .2s ease;
}

.kl-challenge-card-link:hover .kl-card-open-cta {
    background: var(--kl-red-dark);
}

.kl-card-open-cta b {
    font-size: 15px;
}

/* Premium sponsor spotlight */
.kl-sponsor-spotlight {
    grid-column: 1 / -1;
    min-height: 150px;
    margin-top: 4px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: minmax(280px,.65fr) minmax(520px,1.35fr);
    gap: 20px;
    align-items: center;
    border: 1px solid rgba(229,178,60,.62);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(229,178,60,.09),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            rgba(8,25,55,.96),
            rgba(4,15,34,.96)
        );
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
}

.kl-sponsor-spotlight-copy {
    padding-inline: 7px;
}

.kl-sponsor-spotlight-copy > span {
    color: var(--kl-gold);
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .12em;
}

.kl-sponsor-spotlight-copy h3 {
    margin: 7px 0 5px;
    color: #fff;
    font-size: clamp(22px,2.5vw,34px);
    line-height: 1.25;
}

.kl-sponsor-spotlight-copy h3 strong {
    color: var(--kl-gold);
}

.kl-sponsor-spotlight-copy p {
    margin: 0;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    line-height: 1.75;
}

.kl-sponsor-spotlight-card .kl-sponsor-card {
    min-height: 116px;
    margin-top: 0;
    padding: 18px 20px;
    grid-template-columns: 132px 1fr 46px;
    gap: 17px;
    border-radius: 12px;
    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );
}

.kl-sponsor-spotlight-card .kl-sponsor-media {
    height: 82px;
    padding: 5px;
    border-radius: 10px;
    background: rgba(255,255,255,.96);
}

.kl-sponsor-spotlight-card .kl-sponsor-copy strong {
    font-size: 18px;
    line-height: 1.25;
}

.kl-sponsor-spotlight-card .kl-sponsor-copy span {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.55;
}

.kl-sponsor-spotlight-card .kl-sponsor-arrow {
    width: 42px;
    height: 42px;
    font-size: 17px;
    border-color: rgba(229,178,60,.40);
    color: var(--kl-gold);
}

.kl-sponsor-spotlight-card .kl-sponsor-label {
    top: -12px;
    padding: 6px 16px;
    font-size: 9px;
}

/* Common sponsor partial remains readable elsewhere */
.kl-sponsor-card {
    border-radius: 11px;
}

.kl-sponsor-copy strong {
    font-size: 15px;
}

.kl-sponsor-copy span {
    font-size: 10px;
    line-height: 1.5;
}

/* Refined info cards */
.kl-landing-info-grid {
    gap: 16px;
}

.kl-info-card {
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(10,32,70,.055);
}

.kl-rule-list > div,
.kl-scoring-demo > div {
    min-height: 48px;
}

.kl-rule-list p {
    line-height: 1.7;
}

/* Desktop */
@media (min-width: 1181px) {
    .kl-landing-layout {
        grid-template-columns: minmax(0,1fr) 390px;
        gap: 28px;
    }

    .kl-registration-card {
        padding: 24px;
    }
}

/* Tablet/mobile */
@media (max-width: 1180px) {
    .kl-sponsor-spotlight {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .kl-sponsor-spotlight {
        grid-column: auto;
        margin-top: 0;
        padding: 16px;
    }

    .kl-sponsor-spotlight-card .kl-sponsor-card {
        grid-template-columns: 92px 1fr 38px;
    }

    .kl-sponsor-spotlight-card .kl-sponsor-media {
        height: 68px;
    }

    .kl-section-head h2 {
        font-size: clamp(32px,9vw,46px);
    }

    .kl-index-hero h1,
    .kl-live-lockup h1 {
        font-size: clamp(54px,13vw,74px);
    }
}

@media (max-width: 520px) {
    .kl-sponsor-spotlight {
        padding: 14px;
    }

    .kl-sponsor-spotlight-copy h3 {
        font-size: 23px;
    }

    .kl-sponsor-spotlight-card .kl-sponsor-card {
        grid-template-columns: 76px 1fr 34px;
        padding: 15px 12px;
    }

    .kl-sponsor-spotlight-card .kl-sponsor-media {
        height: 58px;
    }

    .kl-sponsor-spotlight-card .kl-sponsor-copy strong {
        font-size: 15px;
    }

    .kl-sponsor-spotlight-card .kl-sponsor-copy span {
        font-size: 10px;
    }

    .kl-card-open-cta {
        min-height: 32px;
        padding: 0 10px;
    }
}


/* =========================================================
   KARAMA LIVE FONT FIX v2
   Increase readability inside rules / prizes / scoring cards
   ========================================================= */

/* Card section headers */
.kl-info-title {
    min-height: 54px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 950;
}

/* RULES */
.kl-rule-list {
    gap: 12px;
}

.kl-rule-list > div {
    min-height: 58px !important;
    grid-template-columns: 38px 1fr;
    gap: 12px;
}

.kl-rule-list span {
    width: 34px;
    height: 34px;
    font-size: 13px !important;
    font-weight: 1000;
}

.kl-rule-list p {
    margin: 0;
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: #58657a;
}

/* PRIZES / BADGES */
.kl-prize-grid {
    gap: 12px;
}

.kl-prize-grid > div {
    min-height: 145px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kl-prize-grid b {
    font-size: 34px !important;
}

.kl-prize-grid strong {
    margin-top: 8px;
    font-size: 16px !important;
    line-height: 1.4;
}

.kl-prize-grid span {
    margin-top: 7px;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #68758a;
}

/* SCORING */
.kl-scoring-demo {
    gap: 9px;
}

.kl-scoring-demo > div {
    min-height: 58px !important;
    padding: 0 16px;
}

.kl-scoring-demo span {
    font-size: 14px !important;
    line-height: 1.55;
    color: #657287;
}

.kl-scoring-demo strong {
    font-size: 18px !important;
    line-height: 1.2;
    font-weight: 1000;
    color: var(--kl-navy);
}

/* Give all three cards more breathing room */
.kl-info-card {
    min-height: 390px;
    padding: 22px;
}

.kl-info-title {
    margin: -22px -22px 20px;
}

/* Make metadata throughout the challenge details less tiny */
.kl-card-stats span,
.kl-participant-count span,
.kl-participant-count small,
.kl-balance-line,
.kl-registration-card small {
    font-size: 12px !important;
}

/* Tablet */
@media (max-width: 820px) {
    .kl-info-title {
        font-size: 17px !important;
    }

    .kl-rule-list p {
        font-size: 15px !important;
    }

    .kl-prize-grid span {
        font-size: 14px !important;
    }

    .kl-scoring-demo span {
        font-size: 14px !important;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .kl-info-card {
        min-height: auto;
        padding: 18px;
    }

    .kl-info-title {
        margin: -18px -18px 18px;
        min-height: 50px;
        padding: 14px 16px;
        font-size: 16px !important;
    }

    .kl-rule-list p {
        font-size: 14px !important;
    }

    .kl-rule-list span {
        width: 32px;
        height: 32px;
        font-size: 12px !important;
    }

    .kl-prize-grid strong {
        font-size: 15px !important;
    }

    .kl-prize-grid span {
        font-size: 13px !important;
    }

    .kl-scoring-demo span {
        font-size: 13px !important;
    }

    .kl-scoring-demo strong {
        font-size: 17px !important;
    }
}