.kms-hp { --hp-purple-dark: #1f0a35; --hp-purple: #2d0f4f; --hp-purple-light: #4a1d7a; --hp-orange: #ff7a1a; --hp-orange-light: #ffb648; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; overflow-x: hidden; }
.kms-hp * { box-sizing: border-box; }
.kms-hp img { max-width: 100%; }

/* Full-bleed breakout: makes banner/dark sections span the viewport even
   when the active theme wraps page content in a narrower container. */
.kms-hp-ticker, .kms-hp-hero, .kms-hp-stats, .kms-hp-section-dark, .kms-hp-footer {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Ticker */
.kms-hp-ticker { display: flex; align-items: center; gap: 10px; background: var(--hp-purple-dark); color: #fff; padding: 8px 16px; overflow: hidden; font-size: 13px; }
.kms-hp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; flex-shrink: 0; animation: kms-hp-pulse 1.4s infinite; }
@keyframes kms-hp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.kms-hp-ticker-track { white-space: nowrap; overflow: hidden; }
.kms-hp-ticker-track span { display: inline-block; animation: kms-hp-scroll 28s linear infinite; padding-left: 100%; }
@keyframes kms-hp-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Hero */
.kms-hp-hero { background-size: cover; background-position: center; padding: 90px 20px; text-align: center; color: #fff; }
.kms-hp-hero-inner { max-width: 760px; margin: 0 auto; }
.kms-hp-eyebrow { display: inline-block; background: var(--hp-orange); color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 18px; }
.kms-hp-hero h1 { font-size: 44px; line-height: 1.15; font-weight: 900; margin: 0 0 16px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.kms-hp-hero p { font-size: 16px; opacity: .9; max-width: 560px; margin: 0 auto 28px; }
.kms-hp-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.kms-hp-btn { padding: 13px 28px; border-radius: 30px; font-weight: 700; text-decoration: none; font-size: 14px; transition: transform .15s ease; }
.kms-hp-btn:hover { transform: translateY(-2px); }
.kms-hp-btn-primary { background: var(--hp-orange); color: #fff; }
.kms-hp-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); }

/* Stats strip */
.kms-hp-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--hp-purple); }
.kms-hp-stat-box { text-align: center; padding: 26px 10px; border-right: 1px solid rgba(255,255,255,.08); }
.kms-hp-stat-box:last-child { border-right: none; }
.kms-hp-stat-num { display: block; color: var(--hp-orange-light); font-size: 30px; font-weight: 800; }
.kms-hp-stat-label { display: block; color: #d8c8ee; font-size: 12px; margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

/* Section shell */
.kms-hp-section { max-width: 1180px; margin: 0 auto; padding: 46px 20px; }
/* max-width:none (not 100%) so it isn't capped by this widget's own parent
   width — 100% would resolve against the immediate container instead of
   the viewport, breaking the 100vw breakout above and misaligning the box. */
.kms-hp-section-dark { max-width: none; background: var(--hp-purple-dark); padding: 0; }
.kms-hp-container { max-width: 1180px; margin: 0 auto; padding: 46px 20px; }
.kms-hp-section-dark .kms-hp-section-head h2, .kms-hp-section-dark .kms-hp-link { color: #fff; }
.kms-hp-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.kms-hp-section-head h2 { font-size: 24px; font-weight: 800; color: var(--hp-purple-dark); margin: 0; }
.kms-hp-link { color: var(--hp-orange); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }

/* Fixtures */
.kms-hp-fixtures { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kms-hp-fixture-card { background: #fff; border: 1px solid #ece4f6; border-radius: 12px; padding: 18px; box-shadow: 0 2px 8px rgba(45,15,79,.06); }
.kms-hp-fixture-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 12px; color: #8b7fa0; }
.kms-hp-badge { padding: 3px 10px; border-radius: 12px; font-weight: 700; font-size: 11px; text-transform: uppercase; }
.kms-hp-badge-live { background: #ff3b3b; color: #fff; }
.kms-hp-badge-done { background: #eee; color: #666; }
.kms-hp-badge-upcoming { background: #fff1e2; color: var(--hp-orange); }
.kms-hp-fixture-teams { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kms-hp-fixture-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; }
.kms-hp-fixture-team img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.kms-hp-fixture-team span { font-size: 13px; font-weight: 600; color: var(--hp-purple-dark); }
.kms-hp-fixture-team strong { font-size: 20px; color: var(--hp-orange); }
.kms-hp-fixture-vs { font-size: 12px; font-weight: 700; color: #b7abcb; }
.kms-hp-fixture-venue { margin-top: 14px; font-size: 12px; color: #9a8fae; text-align: center; }

/* Top performers */
.kms-hp-performers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 26px; }
.kms-hp-performer-card { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, var(--hp-purple), var(--hp-purple-dark)); border-radius: 14px; padding: 20px; color: #fff; }
.kms-hp-performer-card-alt { background: linear-gradient(135deg, #3a1560, #1f0a35); }
.kms-hp-performer-card img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; border: 3px solid var(--hp-orange); }
.kms-hp-performer-num { display: block; font-size: 34px; font-weight: 900; color: var(--hp-orange-light); }
.kms-hp-performer-label { display: block; font-size: 12px; color: #d8c8ee; text-transform: uppercase; }
.kms-hp-performer-name { display: block; font-size: 15px; font-weight: 700; margin-top: 4px; }

.kms-hp-leader-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kms-hp-leader-list { background: #faf7fd; border-radius: 10px; padding: 16px 18px; }
.kms-hp-leader-list h4 { margin: 0 0 10px; color: var(--hp-purple-dark); font-size: 14px; }
.kms-hp-leader-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #e5dcf0; color: #4a3d5c; }
.kms-hp-leader-row:last-child { border-bottom: none; }
.kms-hp-leader-row strong { color: var(--hp-orange); }

/* Points table */
.kms-hp-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.kms-hp-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.kms-hp-table thead th { text-align: left; color: #cdb8ec; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 14px 16px; background: rgba(255,255,255,.04); border-bottom: 2px solid var(--hp-orange); }
.kms-hp-table tbody td { padding: 14px 16px; color: #fff; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.kms-hp-table tbody tr:last-child td { border-bottom: none; }
.kms-hp-table tbody tr { transition: background .15s ease; }
.kms-hp-table tbody tr:hover { background: rgba(255,255,255,.05); }

/* Left-edge colour bar showing qualification zone, PKL-style */
.kms-hp-table tbody tr { border-left: 3px solid transparent; }
.kms-hp-zone-qualify { border-left-color: #2fbf5f !important; }
.kms-hp-zone-playin { border-left-color: var(--hp-orange) !important; }

.kms-hp-pos-cell { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.kms-hp-medal { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #1f0a35; }
.kms-hp-medal-1 { background: #ffd75e; }
.kms-hp-medal-2 { background: #d7dbe0; }
.kms-hp-medal-3 { background: #e2a765; }

.kms-hp-team-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.kms-hp-team-cell img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.kms-hp-form-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 800; margin-right: 3px; color: #fff; }
.kms-hp-form-w { background: #2fbf5f; }
.kms-hp-form-l { background: #e2483a; }

.kms-hp-table-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: #cdb8ec; }
.kms-hp-table-legend span { display: inline-flex; align-items: center; gap: 6px; }
.kms-hp-table-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.kms-hp-legend-qualify { background: #2fbf5f; }
.kms-hp-legend-playin { background: var(--hp-orange); }

/* Teams grid */
.kms-hp-teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.kms-hp-team-card { background: #fff; border: 1px solid #ece4f6; border-radius: 12px; padding: 20px 14px; text-align: center; box-shadow: 0 2px 8px rgba(45,15,79,.05); }
.kms-hp-team-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.kms-hp-team-card h4 { margin: 0 0 10px; font-size: 14px; color: var(--hp-purple-dark); }
.kms-hp-team-mini-stats { display: flex; justify-content: center; gap: 14px; font-size: 11px; color: #8b7fa0; }
.kms-hp-team-mini-stats strong { display: block; color: var(--hp-purple-dark); font-size: 15px; }

/* News */
.kms-hp-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kms-hp-news-card { background: #fff; border: 1px solid #ece4f6; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(45,15,79,.05); }
.kms-hp-news-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.kms-hp-news-body { padding: 14px 16px; }
.kms-hp-news-tag { display: inline-block; color: var(--hp-orange); font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.kms-hp-news-body h4 { margin: 0; font-size: 14px; line-height: 1.4; color: var(--hp-purple-dark); }

/* Footer */
.kms-hp-footer { background: var(--hp-purple-dark); padding: 30px 20px; text-align: center; }
.kms-hp-footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.kms-hp-footer-links a { color: #d8c8ee; text-decoration: none; font-size: 13px; font-weight: 600; }
.kms-hp-footer-links a:hover { color: var(--hp-orange-light); }
.kms-hp-footer-note { color: #6f6086; font-size: 12px; margin: 0; }

@media (max-width: 640px) {
	.kms-hp-hero h1 { font-size: 30px; }
	.kms-hp-stats { grid-template-columns: repeat(2, 1fr); }
	.kms-hp-stat-box:nth-child(2) { border-right: none; }
}