/* Mindria's colours, taken from the game (SceneTheme, Palette): the violet
   field, the gold of the stars, the lavender of the secondary text. */
:root{--gold:#fcc73d;--gold-soft:#ffd976;--ink:#fff7e6;--muted:#bab0e6;--lav:#a894ff;
  --panel:rgba(255,255,255,.055);--line:rgba(168,148,255,.30);--field-top:#211c66;--field-mid:#1c1757;--field-bottom:#171247}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 560px at 50% -12%,rgba(168,148,255,.30),transparent 60%),
    linear-gradient(170deg,var(--field-top) 0%,var(--field-mid) 50%,var(--field-bottom) 100%);background-attachment:fixed}
a{color:var(--gold-soft);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:780px;margin:0 auto;padding:28px 16px 72px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:10px;color:inherit}
.brand:hover{text-decoration:none}
.brand .name{font-size:19px;font-weight:800;color:var(--gold);letter-spacing:.2px}
.markicon{display:inline-block}
.langsel select{background:rgba(0,0,0,.25);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:6px 30px 6px 13px;font-size:13px;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23fcc73d' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
h1{color:var(--gold);font-size:30px;font-weight:900;line-height:1.2;margin:.1em 0 .1em}
h2{color:var(--gold-soft);font-size:19px;font-weight:800;margin:1.7em 0 .45em}
.sub{color:var(--muted);font-size:13.5px;margin:.2em 0 1.8em}
.note{color:var(--muted);font-size:13px;margin:-1.2em 0 1.4em;padding:10px 14px;border-left:3px solid var(--lav);background:rgba(168,148,255,.08);border-radius:8px}
[dir="rtl"] .note{border-left:0;border-right:3px solid var(--lav)}
/* Surfaces in relief, as in the game: a lit top edge and a soft drop. */
.panel,.contact,.faq,.card{background:var(--panel);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 26px rgba(8,4,30,.35)}
.panel{border-radius:20px;padding:22px 24px}
p{margin:.7em 0}ul{padding-left:1.15em;margin:.5em 0}li{margin:.35em 0}
.contact{border-radius:20px;padding:22px 24px;margin-bottom:22px}
.contact .mail{font-size:22px;font-weight:800;color:var(--gold);word-break:break-all}
.contact p{margin:.4em 0 0;color:var(--muted);font-size:14px}
.faq{border-radius:18px;padding:6px 20px;margin-top:6px}
.faq details{border-bottom:1px solid rgba(255,255,255,.08);padding:14px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;color:var(--ink);font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--gold);margin-right:10px;font-weight:800}
.faq details[open] summary::before{content:"\2013"}
.faq p{margin:.6em 0 .2em;color:var(--muted);font-size:14.5px}
footer{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:13px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:16px}footer a{color:var(--muted)}
[dir="rtl"] .langsel select{padding:6px 13px 6px 30px;background-position:left 11px center}
[dir="rtl"] .faq summary::before{margin-right:0;margin-left:10px}
.hero{text-align:center;padding:6px 0 4px}
/* The icon carries its own rounded mask (Icon Composer's render). */
.hero .appicon{display:inline-block;filter:drop-shadow(0 16px 30px rgba(6,3,28,.55))}
.hero h1{font-size:42px;line-height:1.1;margin:.3em 0 .1em}
.tag{color:var(--lav);font-size:20px;font-weight:800;margin:0 0 .8em}
.lede{opacity:.94;max-width:580px;margin:0 auto 1.6em;font-size:16.5px}
.badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px}
.badge{display:inline-block;line-height:0}
.badge img{height:54px;width:auto;display:block}
.badge:hover{text-decoration:none}
/* Google Play: the clear space is inside the PNG, so the image is taller
   for the same 54-point visible badge as the App Store's. */
.badge.play img{height:70px}
.badge.play.legacy img{height:80px}
@media(max-width:420px){.badge img{height:46px}.badge.play img{height:60px}.badge.play.legacy img{height:68px}}
.soon{display:inline-block;margin-top:4px;color:var(--ink);font-size:14.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:rgba(255,255,255,.05)}
.badges+.soon{display:block;border:0;background:none;padding:0;margin-top:12px;color:var(--muted);font-size:13.5px;font-weight:400}
.shots{margin:42px 0 6px}
.shots h2{text-align:center;margin:0 0 .8em}
/* A strip that scrolls sideways on a phone and shows six at once on a
   wide screen; the page itself never scrolls sideways. */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:44%;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 2px 12px;-webkit-overflow-scrolling:touch}
@media(min-width:700px){.strip{grid-auto-columns:1fr;overflow-x:visible}}
.strip img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);scroll-snap-align:start;
  box-shadow:0 12px 28px rgba(6,3,28,.45);display:block}
@media(max-width:560px){.hero h1{font-size:34px}}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:38px 0 8px}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{border-radius:18px;padding:18px}
.card h3{color:var(--gold-soft);font-weight:800;margin:.1em 0 .35em;font-size:17px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:30px 0 4px}
.chip{border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600}