/* Khokho Uganda Cup page and the countdown (also used on the home page). */
.cup-hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem); background: radial-gradient(900px 420px at 80% 20%, rgba(255,212,0,.22), transparent 60%), linear-gradient(180deg, #fff, var(--k-sky-soft)); }
[data-bs-theme="dark"] .cup-hero { background: radial-gradient(900px 420px at 80% 20%, rgba(255,212,0,.12), transparent 60%), var(--k-deep); }
.cup-flag { position: absolute; inset: 0 0 auto 0; height: 10px; display: flex; } .cup-flag i { flex: 1; } .cup-flag i:nth-child(1) { background: #111; } .cup-flag i:nth-child(2) { background: #ffd400; } .cup-flag i:nth-child(3) { background: #d90000; }
.cup-hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(2.2rem, 5vw, 3.8rem); margin: .3rem 0 1rem; }
.cup-kicker { margin: 0; font-weight: 800; color: #d90000; }
.cup-lead { font-size: 1.1rem; max-width: 48ch; }
.cup-logo { width: min(100%, 560px); height: auto; border-radius: 28px; box-shadow: 0 28px 60px rgba(6,38,90,.28); transform: rotate(-1.5deg); background: #fff; }
@media (prefers-reduced-motion: no-preference) { .cup-logo { animation: cup-float 6s ease-in-out infinite; } @keyframes cup-float { 50% { transform: rotate(-1.5deg) translateY(-8px); } } }

.cup-clock { margin-top: -3rem; position: relative; z-index: 2; }
.cup-clock-card { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 28px; color: #fff; text-align: center; border: 2px solid var(--k-gold); box-shadow: 0 30px 70px rgba(6,38,90,.45);
    background: radial-gradient(700px 260px at 50% -20%, rgba(255,212,0,.28), transparent 65%), linear-gradient(135deg, #06265a, #0b4ba3); }
.cup-clock-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 0; color: #fff; }
.cup-clock-head p { margin: .2rem 0 1.2rem; opacity: .85; }
.cup-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1.1rem); max-width: 760px; margin: 0 auto; }
.cup-count .cc-unit { padding: clamp(.7rem, 2vw, 1.3rem) .3rem; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.cup-count b { display: block; font-family: var(--font-display); font-weight: 800; line-height: 1; font-size: clamp(2rem, 7vw, 4.2rem); color: var(--k-gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(255,212,0,.45); }
.cup-count .cc-unit span { display: block; margin-top: .4rem; font-weight: 700; font-size: clamp(.7rem, 1.6vw, .9rem); opacity: .9; }
.cup-count .cc-state { grid-column: 1 / -1; margin: .6rem 0 0; font-weight: 700; }
.cup-count.is-live .cc-state { color: var(--k-gold); font-size: 1.15rem; }
.cup-count.is-live .cc-unit b { animation: cup-pulse 1.4s ease-in-out infinite; }
@keyframes cup-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cup-count.is-live .cc-unit b { animation: none; } }
.cup-deadline { display: inline-flex; gap: .6rem; align-items: center; margin-top: 1.2rem; padding: .55rem 1.1rem; border-radius: 999px; background: rgba(217,0,0,.9); font-weight: 700; font-size: .92rem; }
.cup-deadline.closed { background: rgba(255,255,255,.18); }

.cup-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.cup-facts div { padding: 1rem 1.1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--k-gold); box-shadow: var(--k-shadow-1); }
.cup-facts dt { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--k-royal); line-height: 1.05; } [data-bs-theme="dark"] .cup-facts dt { color: var(--k-sky); }
.cup-facts dd { margin: .35rem 0 0; font-size: .9rem; }
@media (max-width: 767px) { .cup-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cup-card { padding: 1.5rem; border-radius: var(--k-radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); }
.cup-card h3 { font-weight: 800; font-size: 1.25rem; } .cup-card ol { padding-left: 1.1rem; display: grid; gap: .5rem; }

.cup-rules-sec { background: color-mix(in srgb, var(--k-sky-soft) 70%, var(--surface)); }
.cup-rules { display: grid; gap: .6rem; max-width: 900px; }
.cup-sec { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.cup-sec[open] { border-color: var(--k-sky); box-shadow: var(--k-shadow-1); }
.cup-sec summary { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none; }
.cup-sec summary::-webkit-details-marker { display: none; }
.cup-sec summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--k-royal); } .cup-sec[open] summary::after { content: "\2212"; }
.cs-n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--k-royal); color: #fff; font-weight: 800; }
.cs-t { font-weight: 800; font-size: 1.1rem; } .cs-t small { display: block; font-weight: 600; opacity: .75; font-size: .85rem; }
.cup-sec ul { list-style: none; margin: 0; padding: .2rem 1.1rem 1.1rem 1.1rem; display: grid; gap: .7rem; }
.cup-sec li { display: flex; gap: .8rem; align-items: flex-start; }
.cs-ref { flex: none; min-width: 2.4rem; text-align: center; padding: .1rem .5rem; border-radius: 8px; background: var(--k-sky-soft); color: var(--k-royal); font-weight: 800; font-size: .8rem; }
.cup-sign { margin-top: 1.5rem; font-weight: 700; }

/* the strip on the home page */
.cup-band { padding: 1.6rem 0; background: linear-gradient(135deg, #06265a, #0b4ba3); color: #fff; border-block: 4px solid var(--k-gold); }
.cup-band .cb-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; }
.cup-band img { width: 190px; height: auto; border-radius: 16px; background: #fff; }
.cup-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 2rem); margin: 0 0 .2rem; color: #fff; }
.cup-band p { margin: 0 0 .8rem; opacity: .9; }
.cup-band .cup-count { margin: 0; max-width: 460px; }
.cup-band .cup-count b { font-size: clamp(1.6rem, 4vw, 2.6rem); }
@media (max-width: 991px) { .cup-band .cb-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; } .cup-band img { width: 150px; } }