/* How to play + World of Kho Kho pages (uses the skin tokens, so every colour theme works) */
.k-subnav { position: sticky; top: 74px; z-index: 20; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.k-subnav .container { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding-block: .45rem; }
.k-subnav a { white-space: nowrap; padding: .45rem .95rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--text); }
.k-subnav a:hover, .k-subnav a:focus-visible { background: var(--k-sky-soft); color: var(--k-royal); }
html { scroll-padding-top: 130px; }

.k-play-card { height: 100%; padding: 1.6rem; border-radius: var(--k-radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); transition: transform .3s, box-shadow .3s, border-color .3s; position: relative; overflow: hidden; }
.k-play-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--k-grad-gold); }
.k-play-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-2); border-color: var(--k-sky); }
.k-play-card h3 { font-size: 1.2rem; font-weight: 800; margin: .9rem 0 .15rem; }
.k-play-card p { margin: 0 0 .5rem; color: var(--text); }
.k-play-sub { font-weight: 700; font-size: .86rem; color: var(--k-royal); margin: 0 0 .35rem !important; }
[data-bs-theme="dark"] .k-play-sub { color: var(--k-sky); }
.k-play-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font-size: 1.5rem; color: #fff; background: var(--k-grad-sky); box-shadow: 0 10px 22px color-mix(in srgb, var(--k-royal) 35%, transparent); }

/* court diagram */
.k-court-svg { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: var(--k-shadow-3); }
.cs-ground { fill: var(--k-deep); } .cs-field { fill: var(--k-sky-mid); }
[data-bs-theme="dark"] .cs-field { fill: #14283a; }
.cs-line { stroke: #fff; stroke-width: 3; } .cs-cross { fill: rgba(255, 255, 255, .85); } .cs-lane { fill: #fff; }
.cs-pole { fill: var(--k-gold); stroke: #0a0a0a; stroke-width: 2; }
.cs-seat { fill: var(--k-royal); stroke: #fff; stroke-width: 2.5; } .cs-arrow { fill: var(--k-gold); }
.cs-active { fill: var(--k-gold); stroke: #0a0a0a; stroke-width: 2.5; } .cs-run { fill: none; stroke: var(--k-gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cs-def { fill: #0a0a0a; stroke: #fff; stroke-width: 2.5; }
.cs-label { font: 700 12px var(--font-body); fill: var(--k-deep); } [data-bs-theme="dark"] .cs-label { fill: #cfe7f7; }
.k-legend { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .6rem; }
.k-legend li { display: flex; gap: .7rem; align-items: center; }
.k-legend i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.lg-chaser { background: var(--k-royal); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.lg-active { background: var(--k-gold); box-shadow: 0 0 0 2px #0a0a0a; } .lg-def { background: #0a0a0a; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.lg-pole { background: var(--k-gold); border-radius: 4px !important; width: 10px !important; height: 22px !important; box-shadow: 0 0 0 2px #0a0a0a; }

/* numbered rule steps */
.k-rules { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1rem; position: relative; }
.k-rules li { display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem; padding: 1.3rem; border-radius: var(--k-radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); }
.k-rules h3 { font-size: 1.25rem; font-weight: 800; margin: 0; } .k-rules p { margin: .2rem 0 0; max-width: 72ch; }
.k-step-n { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; color: #0a0a0a; background: var(--k-grad-gold); box-shadow: var(--k-shadow-gold); }
@media (max-width: 575.98px) { .k-rules li { grid-template-columns: 1fr; } }

.k-skill-col { height: 100%; padding: 1.5rem; border-radius: var(--k-radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); }
.k-skill-col h3 { font-size: 1.1rem; font-weight: 800; padding-bottom: .7rem; margin-bottom: .8rem; border-bottom: 3px solid var(--k-gold); display: inline-block; }
.k-skill { display: flex; gap: .85rem; padding: .7rem 0; } .k-skill + .k-skill { border-top: 1px dashed var(--line); }
.k-skill > i { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--k-sky-soft); color: var(--k-royal); }
[data-bs-theme="dark"] .k-skill > i { color: var(--k-sky); }
.k-skill b { display: block; } .k-skill p { margin: .1rem 0 0; font-size: .92rem; color: var(--kku-muted, #5a5f66); }
[data-bs-theme="dark"] .k-skill p { color: #9aa6b2; }

.k-lessons { background: var(--k-grad-dark); color: #fff; }
.k-lessons .section-title, .k-lessons .section-text { color: #fff; } .k-lessons .eyebrow { color: var(--k-gold); }
.k-lesson h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .3rem; }
.k-lesson-lead { display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; } .k-lesson-lead video { height: 100%; object-fit: cover; }
@media (max-width: 767.98px) { .k-lesson-lead { grid-template-columns: 1fr; } }

.k-cta-band { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 2rem; border-radius: 28px; color: #fff; background: var(--k-grad-hero); box-shadow: var(--k-shadow-3); }
.k-cta-band h2 { font-weight: 800; margin: 0 0 .3rem; color: #fff; } .k-cta-band p { margin: 0; opacity: .9; }

/* world timeline */
.k-world { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 1.4rem; }
.k-world::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 3px; background: linear-gradient(var(--k-gold), var(--k-sky)); border-radius: 3px; }
.k-world li { display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem; position: relative; padding: 1.3rem 1.4rem 1.3rem 1rem; margin-left: 0; border-radius: var(--k-radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); }
.k-world-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: var(--k-grad-sky); margin-left: -2.2rem; box-shadow: 0 0 0 5px var(--bg, #fff), var(--k-shadow-2); }
.k-world h2 { font-size: 1.25rem; font-weight: 800; margin: 0; } .k-world p { margin: .2rem 0 .4rem; }
@media (max-width: 575.98px) { .k-world { padding-left: 14px; } .k-world li { grid-template-columns: 1fr; padding-left: 1.2rem; } .k-world-ico { margin-left: 0; } .k-world::before { display: none; } }

/* home: learn-to-play and world strips */
.k-learn { background: linear-gradient(180deg, var(--k-tint), var(--surface)); }
.k-learn-list { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; display: grid; gap: .65rem; }
.k-learn-list li { display: flex; gap: .8rem; align-items: flex-start; }
.k-learn-list i { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--k-grad-gold); color: #0a0a0a; }
.k-learn-list span { padding-top: .1rem; } .k-learn-list b { font-weight: 800; }
.k-world-strip { background: var(--surface); }