/* AI Thrones website: the game's toon look. Flat colours, no gradients, every shape outlined in a darker shade of its own colour. */
@font-face{font-family:Luckiest;src:url(/fonts/LuckiestGuy-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:Nunito;src:url(/fonts/Nunito-ExtraBold.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url(/fonts/Nunito-Black.ttf) format("truetype");font-weight:900;font-display:swap}
:root{
  --sky:#1d6aa8;--sky-d:#0e3a63;--grass:#3e8a29;--grass-d:#1d4a12;--navy:#10234a;--navy-d:#060f24;--ink:#1b2440;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 2 42 22 22 42 2 22Z' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='2'/%3E%3Ccircle cx='22' cy='22' r='2.2' fill='%23000' fill-opacity='.12'/%3E%3C/svg%3E");
  --gold:#ffc21a;--gold-d:#a8680a;--cream:#fff4d6;--cream-d:#c99a4a;--white:#fff;
  --closedai:#3f8cff;--closedai-d:#173f8a;--distopic:#8e3a6a;--distopic-d:#45132f;--crok:#e2338f;--crok-d:#6e0d44;
  --avidia:#7ad12b;--avidia-d:#2f6b12;--ducktype:#ff6fae;--ducktype-d:#a8245f;
  --people:#7ccf4a;--people-d:#3a7a1a;--media:#e2338f;--media-d:#6e0d44;--compute:#22b8c8;--compute-d:#0d5a63;--power:#ffb21a;--power-d:#8a5300;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--pattern),var(--grain),var(--sky);color:var(--ink);font:800 18px/1.5 Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* outlined toon text */
.toon{font-family:Luckiest,Impact,sans-serif;font-weight:400;letter-spacing:.5px;color:var(--c,var(--white));-webkit-text-stroke:calc(var(--sw,6px)) var(--d,var(--navy));paint-order:stroke fill;
  /* 3D depth like the logo: the letters stand on a solid extrusion in their own dark shade, with a soft drop shadow under it */
  --x:color-mix(in srgb,var(--d,var(--navy)) 70%,#000);
  text-shadow:0 .02em 0 var(--x),0 .04em 0 var(--x),0 .06em 0 var(--x),0 .08em 0 var(--x),0 .1em 0 var(--x),0 .12em 0 var(--x),0 .16em .14em rgba(0,0,0,.5)}
/* dark headings on white cards get a small extrusion too */
.card h3,.law h3,.post h1,.post h2{text-shadow:0 .03em 0 #b9c4dc,0 .06em 0 #93a0bf,0 .1em .08em rgba(0,0,0,.18)}
h1,h2,h3{margin:0;line-height:1.05}
h2.toon{font-size:clamp(34px,6.4vw,58px);--sw:7px}
h3.toon{font-size:clamp(24px,4vw,32px);--sw:5px}

/* top bar: the three pages only */
.top{position:sticky;top:0;z-index:20;background:var(--pattern),var(--grain),var(--navy);border-bottom:5px solid var(--navy-d)}
.top .wrap{display:flex;align-items:center;gap:10px;height:62px}
.top .brand img{height:46px;width:auto}
.top nav{margin-left:auto;display:flex;gap:6px}
.top nav a{text-decoration:none;font:400 18px/1 Luckiest,Impact,sans-serif;letter-spacing:.5px;color:var(--white);padding:10px 14px 8px;border-radius:12px;border:3px solid transparent;-webkit-text-stroke:4px var(--navy-d);paint-order:stroke fill}
.top nav a:hover{background:var(--sky-d);border-color:var(--navy-d)}
.top nav a[aria-current=page]{background:var(--gold);border-color:var(--gold-d);color:var(--white);-webkit-text-stroke:4px var(--gold-d)}
@media (max-width:520px){.top .brand img{height:38px}.top nav{gap:2px}.top nav a{font-size:15px;padding:9px 8px 7px}}

/* chunky game button (roy loves its bounce) */
.btn{display:inline-flex;align-items:center;justify-content:center;width:min(340px,86vw);aspect-ratio:900/299;background:url(/art/btn.png) center/contain no-repeat;
  font:400 clamp(17px,4.6vw,22px)/1 Luckiest,Impact,sans-serif;color:var(--white);padding-top:4px;text-decoration:none;-webkit-text-stroke:5px var(--gold-d);paint-order:stroke fill;animation:pulse 1.6s ease-in-out infinite}
.btn:hover{animation-duration:.8s}
@keyframes pulse{50%{transform:scale(1.06)}}

/* hero: the game's home screen parallax */
.hero{position:relative;overflow:hidden;background:var(--sky);border-bottom:6px solid var(--grass-d);height:clamp(380px,54.2vw,760px)}
.hero .stage{position:absolute;left:50%;top:0;height:100%;aspect-ratio:1848/851;min-width:100%;transform:translateX(-50%) scale(1.06);transform-origin:50% 12%}
.hero .layer{position:absolute;will-change:transform}
.hero .layer img{width:100%;height:100%}
.hero .logo{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{translate:0 -6px}}
@media (max-width:760px){.hero{height:clamp(340px,96vw,560px)}.hero .stage{left:52%}}

/* bands */
.band{padding:56px 0 64px;border-bottom:6px solid var(--bd)}
.band.grass{background:var(--pattern),var(--grain),var(--grass);--bd:var(--grass-d)}
.band.sky{background:var(--pattern),var(--grain),var(--sky);--bd:var(--sky-d)}
.band.navy{background:var(--pattern),var(--grain),var(--navy);--bd:var(--navy-d);color:#dfe8ff}
.band.cream{background:var(--cream);--bd:var(--cream-d)}
.center{text-align:center}
.lead{max-width:720px;margin:18px auto 0;font-size:clamp(18px,2.6vw,21px)}
.band.grass .lead,.band.sky .lead{color:var(--white);-webkit-text-stroke:5px var(--bd);paint-order:stroke fill}

/* framed panels: outline is a darker shade of the panel's own colour */
.panel{background:var(--c);border:5px solid var(--d);border-radius:20px;overflow:hidden}
.panel img{width:100%}

/* opening */
.opening{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;margin-top:34px}
.opening .panel{--c:var(--cream);--d:var(--navy)}
.speech{position:relative;background:var(--white);border:5px solid var(--navy);border-radius:26px;padding:18px 22px;font-size:20px;color:var(--ink)}
.speech+.speech{margin-top:18px}
.speech b{font-family:Luckiest,Impact,sans-serif;font-weight:400;color:var(--closedai);-webkit-text-stroke:3px var(--closedai-d);paint-order:stroke fill;letter-spacing:.5px}
.speech.tail:after{content:"";position:absolute;left:34px;bottom:-22px;border:14px solid transparent;border-top:18px solid var(--navy)}
@media (max-width:820px){.opening{grid-template-columns:1fr}}
.band.comicbg{position:relative;background:linear-gradient(rgba(14,58,99,.62),rgba(14,58,99,.62)),url(/art/comic-montage.jpg) center/cover no-repeat,var(--sky);padding:110px 0 120px}
.band.comicbg .wrap{position:relative}

/* realms */
.realms{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px}
.realm{--c:var(--rc);--d:var(--rd);display:flex;flex-direction:column}
.realm img{aspect-ratio:16/8;object-fit:cover;border-bottom:5px solid var(--d)}
.realm .txt{padding:16px 20px 20px;color:var(--white)}
.realm h3{--c:var(--white);--d:var(--rd)}
.realm p{margin:8px 0 0;-webkit-text-stroke:4px var(--rd);paint-order:stroke fill}
.realm .boss{display:inline-block;margin-top:12px;background:var(--rd);color:var(--white);border-radius:10px;padding:3px 10px 2px;font:400 16px/1.3 Luckiest,Impact,sans-serif;letter-spacing:.5px}
.realm.people{--rc:var(--people);--rd:var(--people-d)}.realm.media{--rc:var(--media);--rd:var(--media-d)}
.realm.compute{--rc:var(--compute);--rd:var(--compute-d)}.realm.power{--rc:var(--power);--rd:var(--power-d)}
/* realm guardians: the boss stands on the card's right edge, in the text band, never over the stage picture */
.realm{position:relative;overflow:visible}
.realm>img:first-child{border-radius:15px 15px 0 0}
.realm .txt{padding-right:150px}
.realm .guard{--s:1;position:absolute;right:-18px;bottom:-14px;width:auto;height:calc(196px*var(--s));aspect-ratio:auto;object-fit:contain;border:0;pointer-events:none;z-index:2;filter:drop-shadow(0 4px 0 rgba(0,0,0,.22)) drop-shadow(0 10px 8px rgba(0,0,0,.18))}
.realm.people .guard{--s:1.04}.realm.compute .guard,.realm.power .guard{--s:.9}.realm.power .guard{bottom:-8px}
@media (max-width:1100px){.realm .txt{padding-right:164px}.realm .guard{right:-8px}}
@media (max-width:900px){.realm .txt{padding-right:20px;padding-bottom:62px}.realm .boss{white-space:nowrap;font-size:13px;padding:4px 9px 3px;letter-spacing:0}.realm .guard{height:calc(124px*var(--s));right:-4px;bottom:-26px}.realm.power .guard{bottom:-20px}.realm.people .guard{--s:.94}.realm.compute .guard{--s:1}}
@media (max-width:760px){.realms{grid-template-columns:1fr;gap:40px}}

/* laws of war */
.laws{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px;align-items:start}
.law{--c:var(--white);--d:var(--navy-d);display:grid;grid-template-columns:62px 1fr;gap:14px;padding:18px 20px;color:var(--ink);border-radius:20px}
.law .n{width:58px;height:58px;border-radius:50%;background:var(--gold);border:5px solid var(--gold-d);display:grid;place-items:center;font:400 28px/1 Luckiest,Impact,sans-serif;color:var(--white);-webkit-text-stroke:4px var(--gold-d);paint-order:stroke fill;padding-top:4px}
.law h3{font:400 24px/1.1 Luckiest,Impact,sans-serif;color:var(--navy);letter-spacing:.5px}
.law p{margin:6px 0 0;font-size:17px}
.shot{--c:var(--navy);--d:var(--navy-d);margin-top:34px}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px}
.shots .shot{margin:0}
@media (max-width:760px){.laws,.shots{grid-template-columns:1fr}}

/* clans */
.clans{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px}
.clan{--c:var(--cc);--d:var(--cd);text-align:center;color:var(--white)}
.clan img{aspect-ratio:1;object-fit:cover;border-bottom:5px solid var(--d)}
.clan .who{padding:10px 8px 14px}
.clan h3{font-size:24px;--sw:5px;--c:var(--white);--d:var(--cd)}
.clan .tag{display:block;margin-top:2px;font:400 15px/1.2 Luckiest,Impact,sans-serif;letter-spacing:.5px;color:var(--cd)}
.clan q{display:block;margin-top:8px;font-size:15px;line-height:1.35;-webkit-text-stroke:4px var(--cd);paint-order:stroke fill;quotes:"“" "”"}
.clan.closedai{--cc:var(--closedai);--cd:var(--closedai-d)}.clan.distopic{--cc:var(--distopic);--cd:var(--distopic-d)}
.clan.crok{--cc:var(--crok);--cd:var(--crok-d)}.clan.avidia{--cc:var(--avidia);--cd:var(--avidia-d)}.clan.ducktype{--cc:var(--ducktype);--cd:var(--ducktype-d)}
.clan.distopic .tag,.clan.crok .tag{color:#ffd0e6}
@media (max-width:900px){.clans{grid-template-columns:repeat(6,1fr)}.clan{grid-column:span 2}.clan:nth-child(4){grid-column:2/span 2}}
@media (max-width:520px){.clans{grid-template-columns:repeat(2,1fr)}.clan,.clan:nth-child(4){grid-column:auto}.clan:last-child{grid-column:1/-1;max-width:50%;justify-self:center}}

/* news cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.card{--c:var(--white);--d:var(--navy-d);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .15s}
.card:hover{transform:translateY(-5px) rotate(-.6deg)}
.card img{aspect-ratio:16/9;object-fit:cover;border-bottom:5px solid var(--d)}
.card .txt{padding:14px 18px 18px}
.card .kick{font:400 14px/1 Luckiest,Impact,sans-serif;letter-spacing:.6px;color:var(--crok)}
.card h3{font:400 23px/1.1 Luckiest,Impact,sans-serif;color:var(--navy);margin-top:6px;letter-spacing:.4px}
.card p{margin:8px 0 0;font-size:16px}
.card time{display:block;margin-top:10px;font-size:14px;color:#6a7598}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* footer */
footer.foot{background:var(--pattern),var(--grain),var(--navy-d);color:#9fb2dd;text-align:center;padding:26px 16px calc(26px + env(safe-area-inset-bottom));font-size:15px}
footer.foot img{height:70px;width:auto;margin:0 auto 10px}
footer.foot a{color:var(--gold)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* the battle at the bottom: troops march on an Avidia tower and are zapped */
.battle-strip{position:relative;height:240px;background:var(--pattern),var(--grain),var(--grass);border-top:6px solid var(--grass-d)}
.battle-strip canvas{position:absolute;inset:0;width:100%;height:100%}

/* waiting list form on the homepage */
.waitlist{--c:var(--white);--d:var(--navy-d);max-width:460px;margin:30px auto 0;padding:18px 20px 12px;display:grid;gap:10px;text-align:center;overflow:visible}
.waitlist h3{--c:var(--gold);--d:var(--gold-d)}
.waitlist input,.waitlist textarea{font:800 17px/1.3 Nunito,sans-serif;color:var(--ink);background:var(--cream);border:4px solid var(--cream-d);border-radius:14px;padding:11px 14px;width:100%;resize:vertical}
.waitlist input:focus,.waitlist textarea:focus{outline:none;border-color:var(--sky)}
.waitlist .hp{position:absolute;left:-9999px;width:1px;height:1px}
.waitlist .pb-btn{width:min(340px,76vw)}
.waitlist .pb-btn:disabled{opacity:.6;cursor:default}
.waitlist .msg{margin:0;min-height:1.4em;color:var(--navy)}
.waitlist.done input,.waitlist.done textarea,.waitlist.done .pb-btn{display:none}
.waitlist.done .msg{font:400 24px/1.2 Luckiest,Impact,sans-serif;color:var(--grass)}
.waitlist .msg:empty{display:none}