/* Kindness Games — public site */
:root{--wrap:1140px;--hero-curve:60px}
body{background:#fff;color:var(--kg-ink);font-size:17px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
a{color:var(--kg-blue)}
h1,h2,h3,h4{font-family:var(--kg-display);font-weight:600;margin:0;letter-spacing:-.4px;color:var(--kg-ink)}
h1{font-size:clamp(38px,5.6vw,62px);line-height:1.02}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.08}
h3{font-size:22px}
p{margin:0 0 14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:16px;padding:15px 24px;font-family:var(--kg-display);font-weight:600;font-size:19px;text-decoration:none;color:#fff;background:var(--kg-blue);box-shadow:0 5px 0 var(--kg-blue-800);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--kg-blue-800)}
/* the deeper brand red: white button text clears 4.5:1 on it, the bright red does not */
.btn.red{background:var(--kg-red-600);box-shadow:0 5px 0 var(--kg-red-800)}
.btn.gold{background:var(--kg-gold);color:#5a3300;box-shadow:0 5px 0 var(--kg-gold-600)}
.btn.ghost{background:#fff;color:var(--kg-ink);box-shadow:0 0 0 2px var(--kg-line) inset}
.btn.white{background:#fff;color:var(--kg-blue-600);box-shadow:0 5px 0 rgba(0,0,0,.18)}
.btn.sm{font-size:16px;padding:11px 18px;border-radius:13px}
.btn.full{width:100%}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 15px;font-weight:800;font-size:14px;background:var(--kg-sky);color:var(--kg-blue-600)}
.pill.dark{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28)}
.pill.gold{background:var(--kg-gold);color:#5a3300}
.muted{color:var(--kg-ink-2)}
.small{font-size:15px}
.center{text-align:center}

/* header */
.site-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--kg-line)}
.site-top .wrap{display:flex;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.site-top img.logo{width:132px;height:auto}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:20px;font-weight:800;font-size:15px}
.site-nav a:not(.btn){color:var(--kg-ink-2);text-decoration:none}
.site-nav a:not(.btn):hover{color:var(--kg-blue)}
.site-nav a.btn{text-decoration:none}
@media (max-width:760px){.site-nav a.hide-sm{display:none}}

/* contest hero */
.hero{position:relative;background:linear-gradient(165deg,#0b3d91 0%,#1f6fe5 55%,#4a98ff 100%);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:var(--hero-curve);background:#fff;-webkit-mask:radial-gradient(60px 60px at 50% 0,transparent 98%,#000 100%);mask:radial-gradient(60px 60px at 50% 0,transparent 98%,#000 100%)}
/* the white curve eats the last 60px of the hero, so keep the content clear of it */
.hero .wrap{position:relative;z-index:2;padding-top:46px;padding-bottom:calc(var(--hero-curve) + 48px)}
.hero h1{color:#fff;text-shadow:0 4px 0 rgba(6,32,86,.35)}
.hero .kicker img{width:26px;height:auto}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;background:var(--kg-gold);color:#5a3300;font-family:var(--kg-display);font-weight:600;font-size:clamp(16px,2.1vw,21px);padding:9px 18px;border-radius:999px;box-shadow:0 4px 0 rgba(6,32,86,.25);margin-bottom:18px}
.hero .lead{font-size:19px;opacity:.95;max-width:560px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.hero-art{position:relative;justify-self:center;max-width:520px}
.hero-art img{width:100%;height:auto;filter:drop-shadow(0 26px 34px rgba(3,20,60,.45))}
.badge-coins{position:absolute;right:-6px;bottom:6px;background:#fff;color:#7a4a00;border-radius:20px;padding:10px 16px;font-family:var(--kg-display);font-weight:600;font-size:18px;display:flex;align-items:center;gap:8px;box-shadow:0 10px 24px rgba(3,20,60,.35)}
.badge-coins img{width:34px;height:auto}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero .lead{margin-inline:auto}.hero-cta,.hero-facts{justify-content:center}.hero-art{order:-1;max-width:330px}}

/* two contest cards */
.contests{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:-46px;position:relative;z-index:3}
.c-card{background:#fff;border-radius:28px;padding:22px 22px 24px;box-shadow:0 18px 44px -20px rgba(10,31,77,.45),0 0 0 1px var(--kg-line)}
.c-card .top{display:flex;align-items:center;gap:14px}
.c-card img.ic{width:66px;height:66px;object-fit:contain;flex:none}
.c-card h3{font-size:24px}
.c-card .prompt{background:var(--kg-cloud);border:1px dashed var(--kg-line);border-radius:16px;padding:12px 14px;font-weight:700;color:var(--kg-ink-2);margin:12px 0 14px}
.c-card .row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
@media (max-width:860px){.contests{grid-template-columns:1fr;margin-top:-30px}}

section.band{padding:66px 0}
section.band.tint{background:var(--kg-cloud);border-block:1px solid var(--kg-line)}
.sec-head{max-width:720px;margin:0 auto 34px;text-align:center}
.sec-head p{font-size:18px;color:var(--kg-ink-2);margin-top:10px}

/* app explainer */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fff;border-radius:24px;padding:20px;text-align:center;box-shadow:0 10px 30px -18px rgba(10,31,77,.5),0 0 0 1px var(--kg-line)}
.step img{height:96px;width:auto;margin:0 auto 10px;display:block}
.step b{font-family:var(--kg-display);font-weight:600;font-size:19px;display:block;margin-bottom:4px}
.step span{color:var(--kg-ink-2);font-size:15.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;justify-items:center;padding:4px 26px 8px}
.phone{width:100%;max-width:244px;border-radius:34px;padding:9px;background:linear-gradient(160deg,#20325f,#0a1f4d);box-shadow:0 22px 44px -22px rgba(10,31,77,.8)}
.phone img{width:100%;height:auto;aspect-ratio:640/1385;object-fit:cover;object-position:top;border-radius:26px;display:block}
.phone figcaption{color:#fff;text-align:center;font-weight:800;font-size:14px;line-height:1.35;padding:10px 4px 2px;opacity:.9}
.shots-wrap{background:linear-gradient(170deg,#1f6fe5,#0b3d91);border-radius:34px;padding:26px 0 18px;margin-top:8px}
@media (max-width:820px){
  .shots{display:flex;gap:16px;overflow-x:auto;padding:4px 20px 14px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .shots::-webkit-scrollbar{display:none}
  .phone{flex:0 0 auto;width:210px;scroll-snap-align:center}
}

/* member band */
.member{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.member ul{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:10px}
.member li{display:flex;gap:11px;align-items:flex-start;font-weight:700}
.member li svg{flex:none;margin-top:2px}
.member img.art{width:100%;max-width:460px;height:auto;justify-self:center}
@media (max-width:860px){.member{grid-template-columns:1fr;text-align:center}.member li{text-align:left}}

/* dates */
.dates{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.date{background:#fff;border-radius:22px;padding:18px;box-shadow:0 0 0 1px var(--kg-line);text-align:center}
.date b{display:block;font-family:var(--kg-display);font-weight:600;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--kg-blue)}
.date .d{font-family:var(--kg-display);font-weight:600;font-size:30px;margin:2px 0 4px}
.date span{color:var(--kg-ink-2);font-size:15px;font-weight:700}
@media (max-width:860px){.dates{grid-template-columns:1fr 1fr}}

/* forms */
.form-card{background:#fff;border-radius:28px;padding:26px;box-shadow:0 18px 44px -24px rgba(10,31,77,.5),0 0 0 1px var(--kg-line)}
.field{margin-bottom:16px}
.field label{display:block;font-weight:800;font-size:15px;margin-bottom:6px}
.field .hint{color:var(--kg-ink-3);font-size:14px;font-weight:700;margin-top:5px}
.input{width:100%;padding:14px 15px;border:2px solid var(--kg-line);border-radius:14px;font-size:16px;font-weight:700;background:#fbfcff;color:var(--kg-ink)}
.input:focus{outline:none;border-color:var(--kg-blue);background:#fff;box-shadow:0 0 0 4px rgba(31,111,229,.14)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.row2{grid-template-columns:1fr}}
.entry{border:2px solid var(--kg-line);border-radius:22px;padding:18px;margin-bottom:16px;position:relative;background:#fff}
.entry .e-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.entry .e-head b{font-family:var(--kg-display);font-weight:600;font-size:19px}
.entry .e-head [data-from]{flex:1;color:var(--kg-ink-3)}
.entry .e-head [data-from][hidden]{display:none}
.entry .rm{background:#fff;border:2px solid var(--kg-line);color:var(--kg-red-600);border-radius:12px;padding:7px 11px;font-weight:800;font-size:14px}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pick label{display:flex;align-items:center;gap:10px;border:2px solid var(--kg-line);border-radius:14px;padding:12px 14px;font-weight:800;cursor:pointer;background:#fbfcff}
.pick input{accent-color:var(--kg-blue);width:20px;height:20px}
.pick label.on{border-color:var(--kg-blue);background:#eef5ff}
.drop{border:2px dashed var(--kg-line);border-radius:16px;padding:18px;text-align:center;background:#fbfcff;cursor:pointer;display:block}
.drop.has{border-color:var(--kg-green);background:#f2fcf7}
.drop input{display:none}
.drop b{display:block;font-weight:800}
.check{display:flex;gap:12px;align-items:flex-start;background:var(--kg-cloud);border-radius:16px;padding:14px;font-weight:700}
.check input{width:22px;height:22px;accent-color:var(--kg-blue);flex:none;margin-top:1px}
.note{background:#fff8e6;border:1px solid #ffe3a3;border-radius:16px;padding:14px 16px;font-weight:700;color:#7a4a00}
.err{background:#fff0f1;border:1px solid #ffc9ce;color:#9e1320;border-radius:16px;padding:14px 16px;font-weight:800;margin-bottom:16px}
.ok-card{background:#f2fcf7;border:1px solid #b7e8cf;border-radius:22px;padding:20px;margin-bottom:16px}
.login-box{display:flex;gap:16px 20px;flex-wrap:wrap;align-items:center;background:#fff;border:2px dashed var(--kg-green);border-radius:16px;padding:14px 16px;margin-top:10px;font-weight:800}
.login-box > div:last-child{margin-left:auto}
.login-box div small{display:block;color:var(--kg-ink-3);font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.login-box div b{font-family:var(--kg-display);font-weight:600;font-size:24px;letter-spacing:1px}

footer.site{background:var(--kg-navy);color:#c9d6f5;padding:48px 0 34px;margin-top:10px}
footer.site .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px;align-items:start}
footer.site h4{color:#fff;font-size:18px;margin-bottom:10px}
footer.site a:not(.btn){color:#c9d6f5;text-decoration:none;display:block;padding:4px 0;font-weight:700}
footer.site a:not(.btn):hover{color:#fff}
footer.site .sack{display:flex;align-items:center;gap:12px;margin-top:14px;font-weight:800;font-size:13px}
footer.site .sack img{width:74px;height:auto;background:#fff;border-radius:12px;padding:5px}
footer.site .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;font-size:14px;opacity:.75}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}}

/* redeem bar */
.redeem-bar{display:block;background:linear-gradient(90deg,#c8102e,#ff3d5a 45%,#c8102e);color:#fff;text-decoration:none;padding:11px 16px;position:relative;z-index:60}
.redeem-bar .rb-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;text-align:center}
.redeem-bar .rb-tag{background:rgba(255,255,255,.2);border-radius:999px;padding:4px 12px;font-weight:800;font-size:14px;letter-spacing:.2px}
.redeem-bar b{font-family:var(--kg-display);font-weight:600;font-size:clamp(17px,2.2vw,21px);letter-spacing:.2px;text-transform:uppercase}
.redeem-bar .rb-go{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#c8102e;border-radius:999px;padding:5px 14px;font-weight:800;font-size:14px}
.redeem-bar:hover .rb-go{background:var(--kg-gold);color:#5a3300}
@media (max-width:600px){.redeem-bar{padding:10px 14px}.redeem-bar .rb-tag{font-size:13px}}
.site-top{top:0}

/* prizes */
.tier-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.tier-head h3{font-size:26px}
.tier-head .range{background:var(--kg-sky);color:var(--kg-blue-600);border-radius:999px;padding:5px 13px;font-weight:800;font-size:14px;white-space:nowrap}
.tier + .tier{margin-top:42px}
.tier .tier-note{color:var(--kg-ink-2);margin:-6px 0 18px;font-size:16px;max-width:760px}
.prize-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.prize{background:#fff;border-radius:22px;padding:14px;box-shadow:0 12px 30px -20px rgba(10,31,77,.55),0 0 0 1px var(--kg-line);display:flex;flex-direction:column}
.prize .ph{background:var(--kg-cloud);border-radius:16px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:11px}
.prize .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.prize .ph .none{font-size:34px;opacity:.35}
.prize b{font-family:var(--kg-display);font-weight:600;font-size:18px;line-height:1.2;display:block;margin-bottom:12px}
.prize b:has(+ p){margin-bottom:5px}
.prize p{color:var(--kg-ink-2);font-size:14.5px;margin:0 0 12px}
.prize .cost{display:inline-flex;align-items:center;gap:7px;background:var(--kg-gold);color:#5a3300;border-radius:999px;padding:6px 13px;font-family:var(--kg-display);font-weight:600;font-size:17px;margin-top:auto;align-self:flex-start}
.prize .cost img{width:21px;height:auto}
.prize.teaser .ph{aspect-ratio:1}
@media (max-width:520px){.prize-grid{grid-template-columns:1fr 1fr;gap:12px}.prize{padding:11px;border-radius:18px}.prize b{font-size:16px}.prize p{display:none}}

/* status chips + entry lists */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font-weight:800;font-size:13.5px;background:var(--kg-cloud);color:var(--kg-ink-2)}
.chip.wait{background:#fff5da;color:#7a4a00}
.chip.done{background:#e8faf0;color:#15794a}
.entry-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border:2px solid var(--kg-line);border-radius:20px;padding:16px;margin-bottom:12px;background:#fff}
.entry-row .who{flex:1;min-width:190px}
.entry-row .who b{font-family:var(--kg-display);font-weight:600;font-size:19px;display:block}
.entry-row .who span{color:var(--kg-ink-2);font-size:15px;font-weight:700}
.steps-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.step2{background:#fff;border-radius:24px;padding:22px;box-shadow:0 12px 34px -22px rgba(10,31,77,.5),0 0 0 1px var(--kg-line);position:relative}
.step2 .n{position:absolute;top:-14px;left:22px;background:var(--kg-blue);color:#fff;border-radius:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-family:var(--kg-display);font-weight:600;font-size:20px;box-shadow:0 5px 0 var(--kg-blue-800)}
.step2.later .n{background:var(--kg-gold);color:#5a3300;box-shadow:0 5px 0 var(--kg-gold-600)}
.step2 h3{margin:16px 0 6px;font-size:22px}
.step2 p{color:var(--kg-ink-2);margin:0 0 14px}
@media (max-width:760px){.steps-2{grid-template-columns:1fr}}
.code-in{font-family:var(--kg-display);font-weight:600;font-size:26px;letter-spacing:3px;text-align:center;text-transform:uppercase}
.copy-link{display:flex;gap:8px;align-items:center;background:var(--kg-cloud);border:1px dashed var(--kg-line);border-radius:14px;padding:10px 12px;margin-top:10px;font-size:14px;font-weight:700;word-break:break-all}
.copy-link button{flex:none;border:0;background:var(--kg-blue);color:#fff;border-radius:10px;padding:8px 12px;font-weight:800;font-size:13px;cursor:pointer}
.member-list{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:11px}
.member-list li{display:flex;gap:11px;align-items:flex-start;font-weight:700;text-align:left}
.member-list li svg{flex:none;margin-top:2px}
.vbox{border:2px solid var(--kg-line);border-radius:20px;padding:18px;margin:0 0 18px}
.vbox legend{font-family:var(--kg-display);font-weight:600;font-size:19px;padding:0 8px;color:var(--kg-ink)}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
@media (max-width:560px){.row3{grid-template-columns:1fr 1fr}.row3 .field:first-child{grid-column:1 / -1}}