/* Kaiju Kite Attack: the page goes technicolor. Colours lifted from the game. */
.kka-page{
  --sky:#3fc5ff; --red:#e8191b; --yel:#ffd400; --pink:#ff4fd8; --violet:#7b5cff; --green:#5be022;
  background:var(--sky);
}
.kka-page .site-head .nav a{color:#000}
.kka-page .site-foot{margin-top:0}

.kka-title{font-family:var(--pixel);font-weight:700;font-size:clamp(2.6rem,7.5vw,6rem);line-height:.95;color:var(--red);-webkit-text-stroke:3px var(--yel);paint-order:stroke fill;text-shadow:0 6px 0 #000;margin:0 0 .35em}
.kka-title.small{font-size:clamp(2rem,5vw,3.6rem)}
.kka-kicker{font-family:var(--pixel);font-size:.95rem;margin-bottom:1rem}
.kka-lede{font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.3;max-width:24ch}

/* hero: the trailer's striped sunset */
.kka-hero{position:relative;overflow:hidden;padding:clamp(2rem,5vw,4rem) 0 0;
  background:repeating-linear-gradient(180deg,#ff8fd8 0 14px,#ffb8e6 14px 20px,#c9a2ff 20px 34px,#ffd27a 34px 40px,#9fd7ff 40px 54px,#ffe6f6 54px 58px);}
.kka-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:end}
.kka-hero-grid>div:first-child{padding-bottom:clamp(2rem,5vw,3.5rem)}
.kaiju-face{position:relative;border:0;background:none;padding:0;cursor:pointer;justify-self:center;width:min(100%,480px);aspect-ratio:1;-webkit-tap-highlight-color:transparent}
.kaiju-face img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.kaiju-face .open{visibility:hidden}
.kaiju-face.roar .open{visibility:visible}
.kaiju-face.roar .shut{visibility:hidden}
.kaiju-face.roar{animation:quake .5s steps(8)}
@keyframes quake{0%,100%{transform:translate(0)}20%{transform:translate(-6px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,1px)}80%{transform:translate(3px,2px)}}
.poke{position:absolute;right:4%;top:10%;font-family:var(--pixel);font-size:.85rem;background:#fff;padding:.4em .6em;clip-path:var(--step)}
.kaiju-face:hover .poke,.kaiju-face:focus-visible .poke{background:var(--yel)}
.waves{height:56px;margin-top:-8px;position:relative;z-index:1;
  background:
   linear-gradient(180deg,transparent 0 24px,#2e6bff 24px 100%),
   repeating-linear-gradient(90deg,#fff 0 24px,#2e6bff 24px 48px,#9fd7ff 48px 72px,#2e6bff 72px 96px);}
@media (max-width:760px){.kka-hero-grid{grid-template-columns:1fr}.kaiju-face{width:min(80%,340px)}}

.kka-trailer{background:#2e6bff;padding:0 0 clamp(2rem,5vw,4rem)}
.kka-trailer video{width:100%;height:auto;background:#000;clip-path:var(--step);aspect-ratio:16/9}

.kka-paper{background:#fff;clip-path:var(--step);padding:clamp(1.5rem,4vw,3rem)}
.cols{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.kka-about{margin-top:clamp(2rem,6vw,4rem)}
.kka-about p{max-width:62ch}
.kka-list{margin:0;padding:0;list-style:none}
.kka-list li{padding:.55rem 0 .55rem 2rem;position:relative;border-bottom:3px dotted #000}
.kka-list li::before{content:"";position:absolute;left:0;top:.85rem;width:16px;height:16px;background:var(--green);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);outline:0}
.kka-list li:nth-child(3n+2)::before{background:var(--pink)}
.kka-list li:nth-child(3n)::before{background:var(--yel)}

.kka-page section h2.pix{margin-top:0}
.worlds,.gallery,.shots,.achievements,.specs{margin-top:clamp(3rem,7vw,5.5rem)}

.world-view{position:relative;clip-path:var(--step);overflow:hidden;background:#000}
.world-view img{width:100%;height:auto;image-rendering:pixelated}
.nino{position:absolute;left:46%;bottom:6%;width:calc(64px * var(--s,2));height:calc(64px * var(--s,2));background:url(/assets/img/kka/nino-stand.png) 0 0/200% 100% no-repeat;image-rendering:pixelated;animation:nino .7s steps(1) infinite}
@keyframes nino{0%{background-position:0 0}50%{background-position:100% 0}}
@media (max-width:640px){.nino{--s:1}}
.world-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-top:.8rem}
.world-tabs button{border:0;padding:0;background:#000;color:#fff;cursor:pointer;clip-path:var(--step);font-family:var(--pixel);font-size:.8rem}
.world-tabs img{width:100%;height:auto;image-rendering:pixelated;opacity:.55}
.world-tabs span{display:block;padding:.4rem 0}
.world-tabs [aria-selected=true]{background:var(--yel);color:#000}
.world-tabs [aria-selected=true] img,.world-tabs button:hover img{opacity:1}
@media (max-width:640px){.world-tabs{grid-template-columns:repeat(3,1fr)}}

.rogues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.rogues li{background:var(--bg);clip-path:var(--step);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.rogues img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
@media (max-width:640px){.rogues{grid-template-columns:repeat(2,1fr)}}

.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.shot-grid a{display:block;clip-path:var(--step);background:#000}
.shot-grid img{width:100%;height:auto}
@media (max-width:760px){.shot-grid{grid-template-columns:1fr 1fr}}

.praise{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:clamp(3rem,7vw,5rem)}
.praise figure{margin:0;background:var(--violet);color:#fff;clip-path:var(--step);padding:clamp(1.5rem,3vw,2.5rem)}
.praise blockquote{margin:0 0 1rem;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.3;font-weight:700}
.praise figcaption{font-family:var(--pixel);font-size:.9rem;color:var(--yel)}
@media (max-width:760px){.praise{grid-template-columns:1fr}}

.ach{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:.75rem}
.ach li{background:#000;color:#fff;clip-path:var(--step);padding:.9rem .5rem;text-align:center;font-size:.9rem;line-height:1.25}
.ach img{width:64px;height:64px;margin:0 auto .5rem;image-rendering:pixelated}
@media (max-width:900px){.ach{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.ach{grid-template-columns:repeat(2,1fr)}}

.specs .facts{grid-template-columns:max-content 1fr}
@media (max-width:480px){.specs .facts{grid-template-columns:1fr}.specs .facts dd{margin-bottom:.6rem}}

.kka-end{margin-top:clamp(3rem,7vw,5.5rem);padding:clamp(3rem,7vw,5rem) 0;background:var(--green) url(/assets/img/kka/worlds/world1.png) center bottom/cover no-repeat;image-rendering:pixelated}
.kka-end .wrap{background:#ffffffe6;clip-path:var(--step);padding:clamp(1.5rem,4vw,3rem)}