/* The game's daytime sky as the one ground, the game's orange as the one accent, black ink for
   type and frames. All the other colour on the site comes from the game itself: its clips and the
   creature renders. Element colours appear only as small chips.
   The one orchestrated moment: on the home page the phone lands and Nerio pops up beside it to
   say hello. Clips play only while on screen. Both stop for reduced motion and for the
   "stop motion" switch in the accessibility panel (html.still). */

@font-face{font-family:Heebo;src:url(/fonts/heebo-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Heebo;src:url(/fonts/heebo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Secular;src:url(/fonts/secular-one.woff2) format("woff2");font-weight:400;font-display:swap}

:root{--sky:#e6f5fd;--paper:#fff;--ink:#16130f;--soft:#45413b;--accent:#ff8a2a;
  --fire:#ff8a2a;--water:#4fb3e8;--nature:#8bd64a;--stone:#c9a46c;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--sky);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:400 1.125rem/1.6 Heebo,system-ui,sans-serif;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Secular,Heebo,sans-serif;font-weight:400;line-height:1.1;margin:2.5rem 0 .75rem;text-wrap:balance}
h1{font-size:clamp(2.25rem,7vw,3.75rem);margin-top:0}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem)}
p,ul,ol,dl{margin:0 0 1rem}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:3px;text-decoration-color:var(--accent)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
main:focus{outline:none}
strong{font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;inset-inline-start:1rem;top:-10rem;z-index:5;padding:.75rem 1rem;background:var(--paper);border:3px solid var(--ink);border-radius:.75rem}
.skip:focus{top:1rem}

/* Header: wordmark, nav, the one button, the accessibility button, the other language. */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem;padding:.5rem max(1.25rem,calc((100% - 74rem)/2));background:var(--paper);border-bottom:3px solid var(--ink)}
.mark{font:400 2rem/1 Secular,sans-serif;text-decoration:none;min-height:3rem;display:inline-flex;align-items:center}
.top nav{order:3;flex-basis:100%}
.top nav ul{display:flex;flex-wrap:wrap;gap:0 1.25rem;margin:0;padding:0;list-style:none}
.top nav a{display:inline-flex;align-items:center;min-height:3rem;text-decoration:none;font-weight:700}
.top nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:4px;text-decoration-color:var(--accent)}
.top .get{margin-inline-start:auto}
.lang{display:inline-flex;align-items:center;min-height:3rem}
/* The accessibility panel. Each switch is a class on <html>: .big, .contrast, .links, .still. */
.top{position:relative}
.a11y-open{display:inline-flex;align-items:center;gap:.4rem;min-height:3rem;padding:0 .25rem;background:none;border:0;color:var(--ink);font:700 1rem/1 Heebo,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:.25em}
.a11y-open[hidden],.a11y[hidden]{display:none}
.a11y{position:absolute;top:calc(100% + .5rem);inset-inline-end:max(1rem,calc((100% - 74rem)/2));z-index:4;width:min(20rem,calc(100% - 2rem));
  background:var(--paper);border:3px solid var(--ink);border-radius:1.25rem;padding:1rem;box-shadow:0 6px 0 var(--ink)}
.a11y-title{margin:0 0 .5rem;font:400 1.25rem/1.2 Secular,sans-serif}
.a11y ul{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.a11y [data-pref]{display:flex;justify-content:space-between;align-items:center;gap:.75rem;width:100%;min-height:3rem;padding:0 1rem;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;font:700 1rem/1.2 Heebo,sans-serif;cursor:pointer;text-align:start}
.a11y [data-pref]::after{content:"";flex:none;width:1.1rem;height:1.1rem;border:2px solid var(--ink);border-radius:50%}
.a11y [aria-pressed="true"]{background:var(--accent)}
.a11y [aria-pressed="true"]::after{background:var(--ink)}
.a11y-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin:.75rem 0 0}
.reset{min-height:2.75rem;padding:0 .25rem;background:none;border:0;color:var(--ink);font:400 1rem/1 Heebo,sans-serif;text-decoration:underline;cursor:pointer}
.a11y-foot a{display:inline-flex;align-items:center;min-height:2.75rem}
html.big{font-size:125%}
html.contrast{--sky:#fff;--soft:var(--ink)}
.contrast :focus-visible{outline-width:4px}
.links a{text-decoration:underline!important;text-decoration-thickness:2px!important}
@media (min-width:60rem){.top nav{order:0;flex-basis:auto}}

main{display:block;max-width:46rem;margin:2rem auto 4rem;padding:2rem 1.25rem}
/* Reading pages sit on a sheet of paper. */
.plain main{background:var(--paper);border:3px solid var(--ink);border-radius:1.75rem;width:calc(100% - 2rem);padding:2rem clamp(1.25rem,4vw,2.5rem) 2.5rem}
.home main,.character main{max-width:none;margin:0;padding:0}

.lead{font-size:1.3rem;line-height:1.5}
.small{font-size:1rem;color:var(--soft)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.more{display:inline-flex;align-items:center;min-height:3rem;font-weight:700}

.get{display:inline-flex;align-items:center;justify-content:center;min-height:3.5rem;padding:.5rem 1.75rem;border-radius:999px;
  background:var(--accent);color:var(--ink);border:3px solid var(--ink);font:400 1.3rem/1.2 Secular,sans-serif;text-decoration:none;box-shadow:0 4px 0 var(--ink)}
.get:hover{background:var(--ink);color:var(--paper)}
.get:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.get.small{min-height:2.75rem;padding:.25rem 1.25rem;font-size:1.05rem;color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.get.small:hover{color:var(--paper)}
.get.ink{background:var(--ink);color:var(--paper)}
.get.ink:hover{background:var(--paper);color:var(--ink)}

/* A clip of the game in a landscape phone. */
.clip{margin:0}
.phone{display:block;background:var(--ink);border:clamp(6px,1.4vw,12px) solid var(--ink);border-radius:clamp(1.25rem,3.5vw,2.5rem);overflow:hidden;box-shadow:0 8px 0 rgba(22,19,15,.18)}
.phone video{width:100%;border-radius:clamp(.5rem,1.5vw,1rem);background:#bfe6fa}
.clip figcaption{font-size:1rem;color:var(--soft);margin-top:.75rem;text-align:center}

/* Home: the pitch and the game, side by side. */
.hero{display:grid;gap:2rem 3rem;align-items:center;max-width:78rem;margin:0 auto;padding:clamp(2rem,5vw,4rem) 1.25rem 3rem}
@media (min-width:60rem){.hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr)}}
.hero h1{font-size:clamp(2.5rem,6.5vw,4.4rem);line-height:1.02}
.stage{position:relative;padding-top:4.5rem}
.peek{position:absolute;top:0;inset-inline-end:-.5rem;width:clamp(6.5rem,17vw,10rem);z-index:1;pointer-events:none}
.peek img{filter:drop-shadow(0 6px 0 rgba(22,19,15,.18))}
.bubble{position:absolute;bottom:72%;inset-inline-end:85%;white-space:nowrap;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:.35rem 1rem;font:400 clamp(1rem,2.2vw,1.35rem)/1.2 Secular,sans-serif}
.bubble::after{content:"";position:absolute;bottom:-.7rem;inset-inline-end:1.2rem;width:1rem;height:1rem;background:var(--paper);border:3px solid var(--ink);border-top:0;border-inline-start:0;transform:rotate(45deg) skew(10deg,10deg)}
[dir="rtl"] .bubble::after{transform:rotate(45deg) skew(10deg,10deg) scaleX(-1)}

.home section{max-width:74rem;margin:0 auto;padding:3rem 1.25rem}
.home section>h2{margin-top:0}
.home .hero{max-width:78rem}

/* The four creatures, each in his own place in the game. */
.band{text-align:center}
.band .lead{max-width:40rem;margin-inline:auto}
.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem;margin:2rem 0 0;padding:0;list-style:none;text-align:start}
.world a{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;height:100%;padding:.75rem .75rem 1.25rem;background:var(--paper);border:3px solid var(--ink);border-radius:1.5rem;text-decoration:none}
.world .phone{width:100%;border-width:0;border-radius:1rem;box-shadow:none;margin-bottom:.5rem}
.world .phone video{border-radius:1rem}
.world .name{font:400 1.75rem/1.1 Secular,sans-serif;padding-inline:.25rem}
.world .who{font-size:1rem;color:var(--soft);padding-inline:.25rem}
.world a:hover{box-shadow:0 6px 0 var(--ink);transform:translateY(-3px)}
.world a:hover .name{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px}
.chip{display:inline-block;margin:0 .25rem;padding:.1rem .8rem;border-radius:999px;border:2px solid var(--ink);font-weight:700;font-size:1rem}
.fire .chip{background:var(--fire)}.water .chip{background:var(--water)}.nature .chip{background:var(--nature)}.stone .chip{background:var(--stone)}

/* A short text beside a clip; .flip puts the clip first. */
.split{display:grid;gap:2rem 3rem;align-items:center}
@media (min-width:60rem){
  .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .split.flip>div{order:2}
}
.shot{margin:1.5rem 0 0}
.shot img{border:3px solid var(--ink);border-radius:1rem;width:min(100%,26rem)}

.steps{list-style:none;padding:0;counter-reset:step}
.steps li{position:relative;padding-inline-start:3.5rem;counter-increment:step;margin-bottom:1.25rem;min-height:2.75rem}
.steps li::before{content:counter(step);position:absolute;inset-inline-start:0;top:-.2rem;width:2.6rem;height:2.6rem;display:grid;place-items:center;
  border-radius:50%;background:var(--accent);border:3px solid var(--ink);font:400 1.4rem/1 Secular,sans-serif}

/* What the four say, in their own bubbles. */
.talk h2{display:flex;align-items:center;gap:.75rem}
.talk h2 img{width:2.5rem;height:2.5rem}
.talk .lead{max-width:44rem}
.bubbles{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem 1.5rem;margin:2rem 0;padding:0;list-style:none}
.bubbles li{display:flex;align-items:center;gap:.75rem}
.bubbles img{width:5rem;height:5rem;object-fit:contain;flex:none}
.bubbles p{margin:0;background:var(--paper);border:3px solid var(--ink);border-radius:1.5rem;padding:.6rem 1.1rem;font:400 1.25rem/1.3 Secular,sans-serif}

.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding-inline-start:2.25rem;margin-bottom:.6rem}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.3rem;width:1.5rem;height:1.5rem;background:url(/img/check.svg) center/contain no-repeat}

.box{background:var(--paper);border:3px solid var(--ink);border-radius:1.75rem;padding:1.5rem clamp(1.25rem,4vw,2.5rem);margin:2.5rem 0}
.box h2{margin-top:0}
p.box{margin:0 0 1.5rem;padding:1rem 1.25rem}
.home section.box{max-width:46rem;margin:3rem auto;padding:1.5rem clamp(1.25rem,4vw,2.5rem)}
@media (max-width:48rem){.home section.box{margin-inline:1rem}}

/* The last word: the four as shadows on the game's orange. */
.home section.last{max-width:none;background:var(--accent);border-block:3px solid var(--ink);text-align:center;padding:3.5rem 1.25rem}
.last h2{font-size:clamp(2rem,6vw,3.4rem)}
.shadows{display:flex;justify-content:center;gap:clamp(.5rem,3vw,2rem);margin:1.5rem 0 2rem;padding:0;list-style:none}
.shadows img{width:clamp(4.5rem,14vw,9rem);filter:brightness(0)}
.last .row{justify-content:center}

/* A creature's own page. */
.one{max-width:52rem;margin:0 auto;padding:2.5rem 1.25rem 1rem}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:1rem 2rem;align-items:center}
.intro figure{margin:0}
.intro img{max-height:20rem;width:auto;margin-inline:auto}
.one h1{font-size:clamp(2.75rem,9vw,5rem);margin-bottom:.5rem}
.one .chip{margin:0}
.one .clip{margin:1rem 0 2.5rem}
.one>h2,.one>p{max-width:40rem}
blockquote{margin:1.25rem 0 0}
blockquote p{display:inline-block;background:var(--paper);border:3px solid var(--ink);border-radius:1.5rem;padding:.6rem 1.2rem;font:400 clamp(1.35rem,3.5vw,1.9rem)/1.3 Secular,sans-serif;margin:0}
@media (max-width:36rem){.intro{grid-template-columns:1fr}.intro figure{order:-1}.intro img{max-height:14rem}}
.others{max-width:52rem;margin:0 auto 3rem;padding:0 1.25rem}
.others ul{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:0;list-style:none}
.others a{display:inline-flex;align-items:center;min-height:3rem;padding:0 1.25rem;background:var(--paper);border:3px solid var(--ink);border-radius:999px;font-weight:700;text-decoration:none}
.others a:hover{background:var(--ink);color:var(--paper)}

.plain .four{margin-top:1.5rem}
.plain main:has(.four){max-width:74rem}

.faq dt{font-weight:700;font-size:1.2rem;margin-top:2rem}
.faq dd{margin:.25rem 0 0}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.5rem}
.facts dt{font-weight:700}
.facts dd{margin:0}
.copy{background:var(--sky);border:3px dashed var(--ink);border-radius:1.25rem;padding:1rem 1.25rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1.5rem;margin:1.5rem 0;padding:0;list-style:none}
.creature{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem .75rem;border:3px solid var(--ink);border-radius:1.25rem;text-decoration:none;text-align:center;height:100%}
.creature img{width:100%;height:9rem;object-fit:contain}
.creature .name{font:400 1.4rem/1.2 Secular,sans-serif}
.creature .meta{font-size:1rem;color:var(--soft)}
.plain .clip{margin:1.5rem 0}

/* Something Dan still has to supply. A test blocks deploy while one is on a page. */
.fill{outline:2px dashed var(--ink);outline-offset:2px;padding:0 .25rem;background:#fff3e8}

.bottom{background:var(--paper);border-top:3px solid var(--ink);font-size:1rem}
.bottom .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.5rem;max-width:74rem;margin:0 auto;padding:2rem 1.25rem 0}
.bottom h2{font:700 1rem/1.4 Heebo,sans-serif;margin:0 0 .25rem}
.bottom ul{list-style:none;margin:0;padding:0}
.bottom li a{display:inline-flex;align-items:center;min-height:2.75rem}
.bottom>p{max-width:74rem;margin:0 auto;padding:1.5rem 1.25rem 2.5rem;color:var(--soft)}

/* The one moment: the phone lands, then Nerio pops up beside it and says hello. */
@media (prefers-reduced-motion:no-preference){
  .hero .phone{animation:land .7s cubic-bezier(.2,.9,.3,1.2) both}
  .peek img{animation:pop .55s .55s cubic-bezier(.2,.9,.3,1.5) both}
  .bubble{animation:pop .4s 1.05s cubic-bezier(.2,.9,.3,1.6) both;transform-origin:bottom}
  .world a,.get{transition:transform .15s,box-shadow .15s}
  @keyframes land{from{opacity:0;transform:translateY(2.5rem) rotate(-2deg)}}
  @keyframes pop{from{opacity:0;transform:translateY(40%) scale(.6)}}
}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}