/* ==========================================================================
   Kingsgate: Tower Defense game skin
   Storybook look from the game: warm sunburst, parchment cards, wood frames,
   gold title with a red ribbon. Loaded after dynokod.css on /kingsgate/ pages.
   ========================================================================== */

.kg{
  --wood:#6b3f22;--wood-2:#8a5a2b;--wood-3:#5a331b;--wood-dark:#3e2212;
  --parch:#fff3d6;--parch-2:#f7e3b5;--parch-line:#e2c48a;
  --kg-ink:#2b1d12;--kg-brown:#7a3e14;
  --kg-gold:#ffd447;--kg-red:#e03d38;--kg-red-deep:#9a221f;
  --kg-green:#3fb854;--kg-green-deep:#2a7d38;
  --kg-orange:#ee963e;--kg-orange-2:#f2a552;
  --kg-purple:#7b4fe0;--kg-purple-deep:#5530b0;
  background:#fbe9c8;color:var(--kg-ink);
}
.kg .lilita,.kg h2,.kg h3{font-family:"Lilita One",var(--font-display);font-weight:400;letter-spacing:.01em}

/* ---------- game sub-nav ---------- */
.game-bar{position:sticky;top:var(--header-h);z-index:40;background:linear-gradient(#7a4828,#5a331b);border-bottom:4px solid var(--wood-dark);box-shadow:0 4px 0 rgba(0,0,0,.12)}
.game-bar .wrap{display:flex;align-items:center;gap:16px;height:56px}
.game-bar .gname{display:flex;align-items:center;gap:10px;color:#fff6e6;text-decoration:none;font:400 20px/1 "Lilita One",var(--font-display);flex:none}
.game-bar .gname img{width:34px;height:34px;border-radius:9px;border:2px solid #fff3d6}
.game-bar nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 90%,transparent)}
.game-bar nav::-webkit-scrollbar{display:none}
.game-bar nav a{flex:none;color:#f3dcb8;text-decoration:none;font:400 17px/1 "Lilita One",var(--font-display);letter-spacing:.02em;padding:9px 12px;border-radius:10px;transition:background .2s,color .2s}
.game-bar nav a:hover,.game-bar nav a.active{background:rgba(255,255,255,.12);color:var(--kg-gold)}
@media (max-width:640px){.game-bar .gname span{display:none}.game-bar nav{-webkit-mask:linear-gradient(90deg,#000 80%,transparent)}}

/* ---------- shared game UI pieces ---------- */
.kg-card{background:var(--parch);border:4px solid var(--wood-2);border-radius:26px;box-shadow:0 8px 0 var(--wood),0 18px 36px -12px rgba(60,25,5,.35)}
.kg-btn{--b:var(--kg-green);--bd:var(--kg-green-deep);--bt:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:400 21px/1 "Lilita One",var(--font-display);letter-spacing:.03em;color:var(--bt);background:var(--b);text-decoration:none;padding:15px 26px;border-radius:18px;border:3px solid rgba(0,0,0,.12);box-shadow:0 6px 0 var(--bd),0 12px 22px -10px rgba(0,0,0,.4);cursor:pointer;transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out),filter .2s}
.kg-btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--bd),0 16px 26px -10px rgba(0,0,0,.45);filter:brightness(1.06)}
.kg-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--bd)}
.kg-btn svg{width:22px;height:22px}
.kg-btn.wood{--b:#b47a47;--bd:var(--wood)}
.kg-btn.purple{--b:var(--kg-purple);--bd:var(--kg-purple-deep)}
.kg-btn.red{--b:var(--kg-red);--bd:var(--kg-red-deep)}
.soon-badge{display:inline-flex;align-items:center;gap:12px;background:#111;color:#fff;border-radius:14px;padding:10px 20px 10px 16px;box-shadow:0 6px 0 #000,0 12px 22px -10px rgba(0,0,0,.5);border:2px solid #333;text-align:left}
.soon-badge svg{width:26px;height:26px;flex:none}
.soon-badge small{display:block;font:700 11px/1.1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#bdbdbd}
.soon-badge strong{display:block;font:600 19px/1.15 var(--font-display)}
.kg-section{padding:clamp(70px,9vw,120px) 0;position:relative}
.kg-head{text-align:center;max-width:720px;margin:0 auto clamp(36px,5vw,56px)}
.kg-head h2{font-size:clamp(36px,5.4vw,60px);line-height:1.02;color:var(--kg-brown);margin:0 0 14px}
.kg-head p{font-size:clamp(17px,1.6vw,20px);color:#5a3a1f;margin:0}
.kg-kicker{display:inline-block;font:800 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#fff6e6;background:var(--kg-red);padding:8px 14px;border-radius:999px;margin-bottom:16px;box-shadow:0 3px 0 var(--kg-red-deep)}

/* ---------- hero ---------- */
.kg-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--kg-orange);padding:clamp(48px,7vw,90px) 0 clamp(90px,11vw,150px)}
.kg-hero .sunburst{position:absolute;left:50%;top:-30%;width:220vmax;height:220vmax;margin-left:-110vmax;margin-top:-110vmax;top:0;z-index:-2;background:repeating-conic-gradient(from 0deg,var(--kg-orange-2) 0 6deg,var(--kg-orange) 6deg 12deg);animation:spin 160s linear infinite}
.kg-hero::after{content:"";position:absolute;inset:auto 0 0;height:40%;z-index:-1;background:linear-gradient(transparent,rgba(238,150,62,.7))}
.cloud{position:absolute;z-index:-1;width:180px;height:60px;background:#fff7e8;border-radius:60px;opacity:.85;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:80px;height:80px;left:24px;top:-38px}
.cloud::after{width:60px;height:60px;left:90px;top:-26px}
.cloud.c1{top:12%;animation-duration:70s;animation-delay:-20s}
.cloud.c2{top:46%;transform:scale(.7);animation-duration:95s;animation-delay:-60s;opacity:.6}
.cloud.c3{top:72%;transform:scale(1.15);animation-duration:120s;animation-delay:-5s;opacity:.5}
@keyframes drift{from{left:-260px}to{left:110%}}
.kg-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center}
.kg-hero .intro{text-align:center}
.kg-hero .icon{width:clamp(108px,12vw,148px);height:auto;margin:0 auto;border-radius:32px;border:6px solid var(--parch);box-shadow:0 8px 0 var(--wood),0 18px 30px rgba(60,20,0,.35);animation:bob 4.5s ease-in-out infinite}
.kg-hero h1.kg-title{font-size:clamp(56px,9.4vw,118px);margin-top:16px}
.kg-hero .kg-ribbon{font-size:clamp(20px,2.6vw,30px);padding:7px 36px}
.kg-hero .kg-ribbon::before,.kg-hero .kg-ribbon::after{top:11px;border-width:20px}
.kg-hero .kg-ribbon::before{left:-28px}.kg-hero .kg-ribbon::after{right:-28px}
.kg-hero .lead{font-size:clamp(18px,1.8vw,22px);font-weight:700;color:#3a210f;max-width:580px;margin:20px auto 30px;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.kg-hero .ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.kg-hero .note{margin:18px 0 0;font-size:14px;font-weight:700;color:#5a2a0c;opacity:.8}
.kg-hero .device{position:relative;justify-self:center;width:clamp(230px,24vw,300px)}
.kg-hero .device .phone{position:relative;width:100%;border-radius:38px;padding:9px;background:linear-gradient(160deg,#8a5a2b,#4a2814);box-shadow:0 40px 70px -24px rgba(70,25,0,.75),inset 0 0 0 2px rgba(255,255,255,.18)}
.kg-hero .device .phone img{border-radius:30px}
.kg-hero .device .float{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;background:var(--parch);border:3px solid var(--wood-2);border-radius:16px;padding:8px 12px;font:400 17px/1 "Lilita One",var(--font-display);color:var(--kg-brown);box-shadow:0 5px 0 var(--wood);animation:bob 4s ease-in-out infinite;white-space:nowrap}
.kg-hero .device .float svg{width:22px;height:22px}
.kg-hero .device .f1{left:-22%;top:18%}
.kg-hero .device .f2{right:-20%;top:46%;animation-delay:-1.4s}
.kg-hero .device .f3{left:-14%;bottom:12%;animation-delay:-2.6s}
@media (max-width:900px){
  .kg-hero .wrap{grid-template-columns:1fr}
  .kg-hero .device{width:min(250px,62vw);margin-top:20px}
  .kg-hero .device .f1{left:-30%}.kg-hero .device .f2{right:-28%}.kg-hero .device .f3{left:-24%}
}
.hero-stats{position:relative;z-index:3;margin:-60px auto 0;max-width:900px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--parch);border:4px solid var(--wood-2);border-radius:24px;box-shadow:0 8px 0 var(--wood),0 24px 40px -18px rgba(60,25,5,.45);overflow:hidden}
.hero-stats div{text-align:center;padding:18px 10px;border-right:3px dashed var(--parch-line)}
.hero-stats div:last-child{border-right:0}
.hero-stats strong{display:block;font:400 clamp(30px,4vw,44px)/1 "Lilita One",var(--font-display);color:var(--kg-red)}
.hero-stats span{font-weight:800;font-size:14px;color:#6a4322;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:600px){.hero-stats{grid-template-columns:repeat(2,1fr);margin-top:-50px}.hero-stats div:nth-child(2){border-right:0}.hero-stats div:nth-child(-n+2){border-bottom:3px dashed var(--parch-line)}}

/* ---------- screenshots ---------- */
.shots-wrap{position:relative}
.shots-wrap .track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px var(--gutter) 26px;scroll-padding:0 var(--gutter);scrollbar-width:none}
.shots-wrap .track::-webkit-scrollbar{display:none}
.shot{flex:none;width:clamp(220px,17.5vw,270px);scroll-snap-align:start;border:0;padding:0;background:none;cursor:zoom-in;border-radius:26px;transition:transform .35s var(--ease-out)}
.shot img{width:100%;border-radius:26px;border:5px solid var(--parch);box-shadow:0 8px 0 var(--wood),0 20px 30px -14px rgba(60,25,5,.5)}
.shot:hover{transform:translateY(-6px) rotate(-1deg)}
.shots-wrap .ctrl{display:flex;justify-content:center;gap:14px;margin-top:6px}
.round-btn{width:54px;height:54px;border-radius:50%;border:3px solid var(--wood-2);background:var(--parch);color:var(--kg-brown);display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 0 var(--wood);transition:transform .15s,box-shadow .15s,opacity .2s}
.round-btn svg{width:24px;height:24px}
.round-btn:hover{transform:translateY(-2px)}
.round-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--wood)}
.round-btn[disabled]{opacity:.4;cursor:default;transform:none}
@media (min-width:1300px){.shots-wrap .track{justify-content:center}.shots-wrap .ctrl{display:none}}

/* ---------- towers ---------- */
.towers{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1100px){.towers{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.towers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.towers{grid-template-columns:1fr}}
.tower{position:relative;text-align:center;padding:26px 18px 24px;transition:transform .35s var(--ease-spring)}
.tower:hover{transform:translateY(-8px) rotate(-1deg)}
.tower .medal{--c:var(--kg-green);width:86px;height:86px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 60%);border:5px solid var(--kg-gold);box-shadow:0 5px 0 #b8860b,inset 0 -6px 0 rgba(0,0,0,.15)}
.tower .medal svg{width:42px;height:42px}
.tower h3{font-size:26px;color:var(--kg-brown);margin:0 0 6px}
.tower p{font-size:15.5px;color:#5a3a1f;margin:0 0 14px}
.tower .stat{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.tower .stat span{font:800 11.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--parch-2);border:2px solid var(--parch-line);color:var(--kg-brown)}
.towers-note{text-align:center;margin-top:30px;font-weight:700;color:#6a4322}

/* ---------- demo ---------- */
.demo-sec{background:linear-gradient(#5a331b,#3e2212);color:#f3dcb8;overflow:hidden}
.demo-sec .kg-head h2{color:var(--kg-gold);text-shadow:0 4px 0 #2b1608}
.demo-sec .kg-head p{color:#f3dcb8}
.demo{max-width:860px;margin:0 auto;padding:14px;background:#8a5a2b;border-radius:30px;box-shadow:0 10px 0 #2b1608,0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 3px #a8733f}
.demo .hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 4px 12px}
.hud .pill{display:inline-flex;align-items:center;gap:6px;background:#4a2814;color:#fff6e6;border-radius:12px;padding:7px 12px;font:400 18px/1 "Lilita One",var(--font-display);box-shadow:inset 0 2px 0 rgba(0,0,0,.25)}
.hud .pill svg{width:18px;height:18px}
.hud .spacer{flex:1}
.tower-pick{display:flex;gap:6px}
.tower-pick button{display:inline-flex;align-items:center;gap:6px;border:3px solid transparent;background:#f7e3b5;color:var(--kg-brown);border-radius:12px;padding:6px 10px;font:400 16px/1 "Lilita One",var(--font-display);cursor:pointer;box-shadow:0 3px 0 #6b3f22;transition:transform .12s,background .2s}
.tower-pick button .c{display:inline-flex;align-items:center;gap:3px;font-size:14px;color:#a0700f}
.tower-pick button[aria-pressed="true"]{background:#fff3d6;border-color:var(--kg-gold);transform:translateY(-2px)}
.tower-pick button:disabled{opacity:.5}
.tower-pick i{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(0,0,0,.2)}
.demo .stage{position:relative;border-radius:20px;overflow:hidden;background:#9fd36b;box-shadow:inset 0 0 0 3px #5a331b}
.demo canvas{width:100%;height:auto;aspect-ratio:560/400;touch-action:manipulation;cursor:pointer}
.demo canvas:focus-visible{outline:4px solid var(--kg-gold);outline-offset:-4px}
.demo .overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(43,22,8,.55);backdrop-filter:blur(2px);text-align:center;padding:20px;transition:opacity .3s}
.demo .overlay[hidden]{display:none}
.demo .overlay .box{background:var(--parch);border:4px solid var(--wood-2);border-radius:22px;box-shadow:0 7px 0 var(--wood);padding:22px 26px;max-width:380px;color:var(--kg-ink)}
.demo .overlay h3{font-size:32px;color:var(--kg-brown);margin:0 0 6px}
.demo .overlay p{margin:0 0 16px;font-size:16px}
.demo .overlay .stars{display:flex;justify-content:center;gap:6px;margin:-4px 0 12px}
.demo .overlay .stars svg{width:40px;height:40px}
@media (max-width:640px){
  .demo{padding:10px;border-radius:22px}
  .tower-pick{order:5;width:100%}
  .tower-pick button{flex:1;justify-content:center;padding:8px 4px;font-size:15px}
  .demo .overlay{padding:10px}
  .demo .overlay .box{padding:12px 14px;border-radius:16px}
  .demo .overlay h3{font-size:22px;margin-bottom:2px}
  .demo .overlay p{font-size:13.5px;line-height:1.4;margin-bottom:10px}
  .demo .overlay .stars svg{width:28px;height:28px}
  .demo .overlay .kg-btn{font-size:17px;padding:10px 16px}
}
.demo .tip{margin:12px 6px 2px;font-size:14.5px;color:#f7e3b5;display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between}
.demo .tip b{color:var(--kg-gold);font-weight:800}

/* ---------- lands map ---------- */
.lands-sec{background:radial-gradient(70% 60% at 50% 0%,#fff3d6,transparent 70%),#fbe9c8}
.map{position:relative;max-width:760px;margin:0 auto;padding:10px 0}
.map svg.road{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.map .road-bed{fill:none;stroke:#e6c48d;stroke-width:30;stroke-linecap:round;stroke-linejoin:round}
.map .road-line{fill:none;stroke:#c8955a;stroke-width:5;stroke-linecap:round;stroke-dasharray:2 14}
.map .road-glow{fill:none;stroke:var(--kg-gold);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.map ol{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:26px}
.land{display:flex;align-items:center;gap:16px;width:max-content;max-width:100%;transition:transform .5s var(--ease-spring),opacity .4s}
.land:nth-child(odd){margin-left:6%}
.land:nth-child(even){margin-left:auto;margin-right:6%;flex-direction:row-reverse;text-align:right}
.land .node{--c:var(--kg-green);flex:none;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 60%,#fff),var(--c) 65%);border:5px solid #fff3d6;box-shadow:0 6px 0 rgba(0,0,0,.22),0 0 0 4px var(--kg-gold);font:400 30px/1 "Lilita One",var(--font-display);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.land .label{position:relative;background:var(--parch);border:3px solid var(--parch-line);border-radius:14px;padding:8px 14px 9px;box-shadow:0 4px 0 rgba(107,63,34,.35)}
.land .label strong{display:block;font:400 clamp(20px,2.4vw,26px)/1.1 "Lilita One",var(--font-display);color:var(--kg-brown)}
.land .label span{font-size:14.5px;font-weight:700;color:#7a5634}
.land.locked .node{--c:#9b8a76;box-shadow:0 6px 0 rgba(0,0,0,.18),0 0 0 4px #c9b89a}
.land.locked .node svg{width:28px;height:28px}
.land.locked .label strong{color:#9b8a76}
.js .map .land{opacity:0;transform:scale(.7)}
.js .map .land.lit{opacity:1;transform:none}
.land.lit .node{animation:pop .6s var(--ease-spring)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@media (max-width:560px){
  .land:nth-child(odd){margin-left:0}
  .land:nth-child(even){margin-right:0}
  .land .node{width:60px;height:60px;font-size:24px}
}

/* ---------- bosses ---------- */
.bosses{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){.bosses{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .bosses{gap:14px}
  .boss{padding:16px 10px 12px}
  .boss .wanted{font-size:11px;margin-bottom:8px}
  .boss .portrait{height:68px;margin-bottom:10px}
  .boss .portrait svg{width:44px;height:44px}
  .boss h3{font-size:18px;margin-bottom:8px}
  .boss.more p{font-size:17px}
}
.boss{--c:#c0392b;position:relative;padding:22px 20px 20px;background:#f4dfb2;border:4px solid var(--wood-2);border-radius:18px;box-shadow:0 7px 0 var(--wood);rotate:var(--tilt,0deg)}
.boss:nth-child(odd){--tilt:-1.2deg}.boss:nth-child(even){--tilt:1.2deg}
.boss:hover{rotate:0deg;transform:translateY(-6px) scale(1.02)}
.boss::before{content:"";position:absolute;top:-12px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e0e0e0,#7a7a7a);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.boss .wanted{font:400 14px/1 "Lilita One",var(--font-display);letter-spacing:.18em;color:#8a5a2b;text-align:center;margin-bottom:12px}
.boss .portrait{height:104px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c) 45%,#fff),var(--c));border:3px solid rgba(0,0,0,.15);margin-bottom:14px;overflow:hidden}
.boss .portrait svg{width:62px;height:62px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25));transition:transform .4s var(--ease-spring)}
.boss:hover .portrait svg{transform:scale(1.15) rotate(-6deg)}
.boss h3{font-size:24px;color:var(--kg-brown);text-align:center;margin:0 0 10px}
.hp{display:flex;align-items:center;gap:8px;background:#3e2212;border-radius:8px;padding:5px 8px}
.hp svg{width:16px;height:16px;flex:none}
.hp .bar{flex:1;height:10px;border-radius:5px;background:#5a331b;overflow:hidden}
.hp .bar i{display:block;height:100%;width:0;background:linear-gradient(#ff5b54,#d02f2a);border-radius:5px;transition:width 1.4s var(--ease-out)}
.boss.in .hp .bar i,.no-js .hp .bar i{width:100%}
.boss.more{display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(-45deg,#f4dfb2 0 12px,#eed5a2 12px 24px);border-style:dashed}
.boss.more p{font:400 22px/1.2 "Lilita One",var(--font-display);color:#8a5a2b;margin:0}

/* ---------- upgrades ---------- */
.upgrades-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.upgrades-grid{grid-template-columns:1fr}}
.upgrades-grid .copy h2{font-size:clamp(36px,5vw,56px);color:var(--kg-brown);line-height:1.02;margin:0 0 16px}
.upgrades-grid .copy p{font-size:18px;color:#5a3a1f}
.star-meter{display:flex;align-items:center;gap:16px;margin:26px 0 8px;background:var(--parch);border:4px solid var(--wood-2);border-radius:20px;padding:14px 18px;box-shadow:0 6px 0 var(--wood);max-width:420px}
.star-meter svg{width:46px;height:46px;flex:none;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{transform:rotate(12deg) scale(1.1)}}
.star-meter strong{font:400 40px/1 "Lilita One",var(--font-display);color:var(--kg-brown)}
.star-meter span{display:block;font-weight:700;font-size:14px;color:#7a5634}
.upg-panel{background:linear-gradient(#6b3f22,#55311a);border:4px solid #3e2212;border-radius:26px;padding:16px;box-shadow:0 10px 0 #2b1608,0 30px 50px -20px rgba(0,0,0,.5)}
.upg-panel .title{display:flex;align-items:center;justify-content:space-between;color:#fff6e6;font:400 22px/1 "Lilita One",var(--font-display);padding:6px 8px 14px}
.upg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:520px){.upg-list{grid-template-columns:1fr}}
.upg{display:flex;align-items:center;gap:10px;background:#8a5a2b;border-radius:14px;padding:8px 10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);transition:transform .25s var(--ease-spring),background .2s}
.upg:hover{transform:scale(1.03);background:#9a6833}
.upg .ic{--c:#888;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--c);border:3px solid #ffd447}
.upg .ic svg{width:20px;height:20px}
.upg strong{display:block;font:400 16px/1.1 "Lilita One",var(--font-display);color:#fff6e6;letter-spacing:.02em}
.upg span{display:block;font-size:12.5px;font-weight:700;color:#bff0a0;line-height:1.25}
.upg .pips{margin-left:auto;display:flex;gap:3px;flex:none}
.upg .pips i{width:9px;height:9px;border-radius:50%;background:#5a331b}
.upg .pips i.on{background:#ffd447}
.upg .pips i.m{background:#ff8a3d}

/* ---------- fair play ---------- */
.fair{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
@media (max-width:860px){.fair{grid-template-columns:1fr}}
.fair .left{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,48px);background:var(--kg-green);color:#fff;position:relative;overflow:hidden}
.fair .left::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.fair .left h2{font-size:clamp(34px,4.6vw,52px);line-height:1.02;margin:0 0 14px;color:#fff;text-shadow:0 4px 0 var(--kg-green-deep)}
.fair .left p{font-size:18px;color:#eaffe0;margin:0 0 10px;max-width:440px}
.fair .left .big{font:400 clamp(64px,9vw,104px)/1 "Lilita One",var(--font-display);color:#fff;text-shadow:0 6px 0 var(--kg-green-deep);margin:10px 0 0}
.fair .left .big small{display:block;font:800 15px/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;text-shadow:none;color:#d7f7c8;margin-top:6px}
.fair .right{padding:clamp(24px,4vw,44px)}
.fair ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fair li{display:flex;gap:14px;align-items:flex-start;background:var(--parch-2);border:3px solid var(--parch-line);border-radius:16px;padding:14px 16px}
.fair li .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--c,var(--kg-gold));box-shadow:0 3px 0 rgba(0,0,0,.18)}
.fair li .ic svg{width:24px;height:24px}
.fair li strong{display:block;font:400 20px/1.15 "Lilita One",var(--font-display);color:var(--kg-brown);margin-bottom:2px}
.fair li p{margin:0;font-size:15.5px;color:#5a3a1f}

/* ---------- details + faq ---------- */
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.details{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.details{grid-template-columns:1fr}}
.details div{background:var(--parch);border:3px solid var(--parch-line);border-radius:16px;padding:16px 18px}
.details dt{font:800 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#a0703c;margin-bottom:6px}
.details dd{margin:0;font:400 20px/1.2 "Lilita One",var(--font-display);color:var(--kg-brown)}
.details dd small{display:block;font:700 14px/1.35 var(--font-body);color:#7a5634;margin-top:4px}
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--parch);border:3px solid var(--parch-line);border-radius:16px;margin:12px 0;transition:background .2s,border-color .2s}
.faq details[open]{border-color:var(--wood-2);background:#fff7e3}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;font:400 20px/1.2 "Lilita One",var(--font-display);color:var(--kg-brown)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--kg-gold);color:var(--kg-brown);font-size:24px;box-shadow:0 3px 0 #b8860b;transition:transform .3s var(--ease-spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 20px 18px;color:#4a2f18}
.faq details>div p{margin:0 0 .6em}
.faq a{color:#a0360f;font-weight:700}

/* ---------- final cta ---------- */
.final{position:relative;overflow:hidden;isolation:isolate;background:var(--kg-orange);text-align:center;padding:clamp(80px,10vw,130px) 0}
.final .sunburst{position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;z-index:-1;background:repeating-conic-gradient(from 0deg,var(--kg-orange-2) 0 6deg,var(--kg-orange) 6deg 12deg);animation:spin 160s linear infinite reverse}
.final h2{font-size:clamp(40px,6.4vw,76px);color:var(--kg-gold);line-height:1;margin:0 auto 18px;max-width:900px;text-shadow:-3px -3px 0 #5a2a0c,3px -3px 0 #5a2a0c,-3px 3px 0 #5a2a0c,3px 3px 0 #5a2a0c,0 8px 0 #5a2a0c}
.final p{font-size:20px;font-weight:700;color:#3a210f;margin:0 auto 30px;max-width:560px}
.final .ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}

/* ---------- support page ---------- */
.kg-page-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--kg-orange);text-align:center;padding:clamp(44px,6vw,72px) 0 clamp(60px,8vw,90px)}
.kg-page-hero .sunburst{position:absolute;left:50%;top:0;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;z-index:-1;background:repeating-conic-gradient(from 0deg,var(--kg-orange-2) 0 6deg,var(--kg-orange) 6deg 12deg);animation:spin 160s linear infinite}
.kg-page-hero .icon{width:96px;height:96px;margin:0 auto;border-radius:24px;border:5px solid var(--parch);box-shadow:0 7px 0 var(--wood)}
.kg-page-hero .kg-title{font-size:clamp(46px,7vw,80px);margin-top:14px}
.help-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-50px;position:relative;z-index:2}
@media (max-width:860px){.help-cards{grid-template-columns:1fr}}
.help-cards .kg-card{padding:22px 22px 24px;text-align:center}
.help-cards .ic{width:60px;height:60px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--c,var(--kg-gold));border:4px solid #fff3d6;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.help-cards .ic svg{width:28px;height:28px}
.help-cards h2{font-size:24px;color:var(--kg-brown);margin:0 0 6px}
.help-cards p{margin:0 0 14px;color:#5a3a1f;font-size:16px}
.help-cards a:not(.kg-btn){color:#a0360f;font-weight:800}
.kg-prose{background:var(--parch);border:4px solid var(--wood-2);border-radius:26px;box-shadow:0 8px 0 var(--wood);padding:clamp(22px,4vw,44px);max-width:900px;margin:0 auto}
.kg-prose h1{font:400 clamp(30px,4vw,44px)/1.1 "Lilita One",var(--font-display);color:var(--kg-brown);margin:0 0 .6em}
.kg-prose h2{font-size:clamp(24px,2.6vw,30px);color:var(--kg-brown);margin:1.6em 0 .5em}
.kg-prose a{color:#a0360f}
.kg-prose ul{padding-left:1.3em}
.kg-prose li{margin:.35em 0}
.kg-prose table{border-collapse:collapse;width:100%;font-size:15px;margin:1em 0 1.4em}
.kg-prose td,.kg-prose th{border:1px solid #e3c991;padding:.55em .6em;vertical-align:top;text-align:left}
.kg-prose th{background:#f7e6bd}
.kg-prose code{background:#f3ead7;padding:.05em .3em;border-radius:4px;font-size:.9em}
.kg-prose .table-scroll{overflow-x:auto}
.kg-prose .toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.4em;padding:0;list-style:none}
.kg-prose .toc li{margin:0}
.toc a{display:inline-block;text-decoration:none;font-weight:800;font-size:14px;padding:7px 12px;border-radius:999px;background:var(--parch-2);border:2px solid var(--parch-line);color:var(--kg-brown)!important}
.toc a:hover{background:#fff}