/* 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:#2f9bea;--sky-d:#1a5f9e;--grass:#6cc93a;--grass-d:#3a7a1a;--navy:#10234a;--navy-d:#060f24;--ink:#1b2440;
  --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(--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;text-shadow:0 .08em 0 var(--d,var(--navy))}
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(--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(--grass);--bd:var(--grass-d)}
.band.sky{background:var(--sky);--bd:var(--sky-d)}
.band.navy{background: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}}

/* 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)}
@media (max-width:760px){.realms{grid-template-columns:1fr}}

/* 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(--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}}