/* barlow-condensed-vietnamese-400-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(barlow-condensed-vietnamese-400-normal-Dq9fsqrz.woff2) format('woff2'), url(barlow-condensed-vietnamese-400-normal-BHpO_q_4.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* barlow-condensed-latin-ext-400-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(barlow-condensed-latin-ext-400-normal-DPMBkgfB.woff2) format('woff2'), url(barlow-condensed-latin-ext-400-normal-DN7qpd_C.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-condensed-latin-400-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(barlow-condensed-latin-400-normal-Dc2u_eUW.woff2) format('woff2'), url(barlow-condensed-latin-400-normal-BXL2z6Kg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* barlow-condensed-vietnamese-500-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(barlow-condensed-vietnamese-500-normal-DjeaNLFD.woff2) format('woff2'), url(barlow-condensed-vietnamese-500-normal-CsrJDWc5.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* barlow-condensed-latin-ext-500-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(barlow-condensed-latin-ext-500-normal-yA5ONLQ9.woff2) format('woff2'), url(barlow-condensed-latin-ext-500-normal-B1RE8WP7.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-condensed-latin-500-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(barlow-condensed-latin-500-normal-BgYH2mbd.woff2) format('woff2'), url(barlow-condensed-latin-500-normal-HIEiP5Ov.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* barlow-condensed-vietnamese-600-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(barlow-condensed-vietnamese-600-normal-A5AYRdjN.woff2) format('woff2'), url(barlow-condensed-vietnamese-600-normal-CNlPk46_.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* barlow-condensed-latin-ext-600-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(barlow-condensed-latin-ext-600-normal-18ESti3H.woff2) format('woff2'), url(barlow-condensed-latin-ext-600-normal-Clv9cIcR.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-condensed-latin-600-normal */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(barlow-condensed-latin-600-normal-DepVgxBB.woff2) format('woff2'), url(barlow-condensed-latin-600-normal-BFJEwTuo.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* The legal pages of the web builds (privacy.html, terms.html; scripts/legal/pages.ts) and the support page
   (support.html): the game's look on a page of its own. The navy of the sidebar, the game's tabs, a dialog's green box
   with its title bar, yellow headings, cyan links and Barlow Condensed (scripts/legal/pages-plugin.ts adds its font
   faces). Built from scratch, like the game's own theme. No inline styles: the site's CSP allows none. Font sizes are
   in rem, so the browser's own text size makes them larger (to 150% and more); on a touch screen or a phone's width
   every tab and button is at least 48 pixels tall, the phone layout's targets (src/ui/phone.ts). */

:root {
  color-scheme: dark;
}

html {
  background: #000008;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: #f1f1f1;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
  background: linear-gradient(180deg, #0e0e8c 0, #08085e 240px, #04042e 640px, #000008 1200px) no-repeat, #000008;
}

.lp-page {
  box-sizing: border-box;
  max-width: 55rem;
  margin: 0 auto;
  padding: 18px 16px 32px;
}

.lp-head {
  text-align: center;
}

.lp-game {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: #ffff3c;
  text-decoration: none;
}

.lp-sub {
  margin: 2px 0 12px;
  font-size: 1.0625rem;
  color: #c9c9ff;
}

/* The game's tabs: the page on show is yellow with a yellow edge, so it shows without color too. */
.lp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 14px;
}

.lp-tabs a {
  flex: 1 1 150px;
  box-sizing: border-box;
  padding: 7px 8px;
  font-size: 1.125rem;
  line-height: 1.1;
  text-align: center;
  color: #f1f1f1;
  text-decoration: none;
  background: #1d1c78;
  border: 1px solid #08083a;
}

.lp-tabs a[aria-current='page'] {
  color: #ffff3c;
  background: #16155e;
  box-shadow:
    inset 0 0 0 1px #e4d800,
    inset 0 -3px 0 #e4d800;
}

/* A dialog of the game: its green box, the dark title bar and an inner frame. */
.lp-box {
  padding: 0 0 12px;
  background: #093e16;
  border: 2px solid #031d08;
  box-shadow:
    0 0 0 2px #0c0c66,
    8px 8px 0 rgba(0, 0, 0, 0.45);
}

.lp-title {
  margin: 10px;
  padding: 8px;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  background: #000024;
  border: 2px solid #1d1d90;
}

.lp-meta {
  margin: 0 14px 10px;
  text-align: center;
  color: #c9c9ff;
}

.lp-inner {
  margin: 0 10px;
  padding: 8px 18px 12px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lp-inner h2 {
  margin: 18px 0 6px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  color: #ffff3c;
}

.lp-inner > section:first-child h2 {
  margin-top: 6px;
}

.lp-inner p,
.lp-inner ul {
  margin: 0 0 10px;
}

/* A long word (an address) wraps rather than run out of its box at a large text size on a phone. */
.lp-inner p,
.lp-inner li {
  overflow-wrap: break-word;
}

.lp-inner ul {
  padding-left: 1.3em;
}

.lp-inner li + li {
  margin-top: 4px;
}

/* The short version: a frame of its own at the top. */
.lp-summary {
  padding: 2px 14px 4px;
  background: rgba(6, 8, 40, 0.62);
  border: 1px solid rgba(150, 150, 255, 0.22);
}

a {
  color: #62d8ff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

a:focus-visible {
  outline: 2px solid #62d8ff;
  outline-offset: 2px;
}

/* A detail the owner has still to fill in: boxed, so it shows without color too. */
.lp-placeholder {
  padding: 0 3px;
  color: #000;
  text-shadow: none;
  background: #ffa94f;
  outline: 1px dashed #fff;
}

.lp-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 1rem;
  color: #c9c9ff;
}

.lp-foot p {
  margin: 4px 0;
}

/* The grey button of the game's Back and Continue bars: back to the game, and the support page's address. */
.lp-play,
.lp-button {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 10px;
  padding: 6px 22px;
  font-size: 1.25rem;
  line-height: 1.1;
  color: #ededed;
  text-decoration: none;
  text-shadow: 1px 1px 0 #333;
  background: linear-gradient(#a6a6a6, #7a7a7a);
  border: 2px solid;
  border-color: #d0d0d0 #4a4a4a #4a4a4a #d0d0d0;
}

/* The support page (support.html): its address as a button at the top, and each section's links in a list. */
.lp-mail {
  margin: 0 0 10px;
  text-align: center;
}

.lp-mail .lp-button {
  margin-top: 2px;
  font-weight: 600;
  /* The address grows with the text size, but never past what a phone's width holds on one line after its @. */
  font-size: min(1.25rem, 5.6vw);
}

.lp-links {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.lp-links li + li {
  margin-top: 2px;
}

/* A finger's targets: at least 48 pixels tall (Android's 48 dp, 7.6 mm), as in the game's phone layout. */
@media (max-width: 560px), (pointer: coarse) {
  .lp-tabs a,
  .lp-play,
  .lp-button {
    min-height: 48px;
  }

  .lp-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lp-play,
  .lp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .lp-links a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 1.125rem;
  }

  .lp-page {
    padding: 12px 8px 24px;
  }

  .lp-game {
    font-size: 2rem;
  }

  .lp-inner {
    padding: 6px 12px 10px;
  }

  .lp-button {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (prefers-contrast: more) {
  body {
    background: #000;
    text-shadow: none;
  }

  .lp-box {
    background: #000;
    border-color: #fff;
  }

  .lp-inner,
  .lp-summary {
    background: #000;
    border-color: #fff;
  }
}

/* The game's navy tabs, green dialogs and beveled actions on a page that can scroll. */
.ws-page { max-width: 78rem; padding-top: 28px; }
.ws-page .lp-head { text-align: left; }
.ws-page .lp-game { display: inline-flex; align-items: center; min-height: 48px; font-size: clamp(2rem, 5vw, 3.5rem); }
.ws-page .lp-sub { margin: 6px 0 20px; }
.ws-page .lp-tabs { margin-bottom: 28px; }
.ws-page .lp-tabs a { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.ws-page h1, .ws-page h2, .ws-page h3 { text-wrap: balance; }
.ws-page p { max-width: 65ch; }
.ws-hero { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 32px; align-items: center; padding: 8px 0 42px; }
.ws-pitch h1 { margin: 0 0 20px; color: #ffff3c; font-size: clamp(2.75rem, 5vw, 4.75rem); font-weight: 600; line-height: 0.98; }
.ws-pitch p { margin: 12px 0; font-size: 1.375rem; }
.ws-page .lp-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; margin: 0; text-align: center; color: #111; text-shadow: none; font-weight: 600; }
.ws-page .ws-primary { padding: 12px 24px; font-size: 1.5rem; margin-top: 12px; }
.ws-pitch .ws-small { color: #c9c9ff; font-size: 1.0625rem; }
.ws-page figure { margin: 0; min-width: 0; }
.ws-page img { display: block; width: 100%; height: auto; background: #000024; }
.ws-hero figure { border: 2px solid #464694; box-shadow: 8px 8px 0 #000024; }
.ws-page figcaption { padding: 10px 14px; color: #ffff3c; background: #000024; font-size: 1.125rem; }
.ws-feature, .ws-buy { margin-bottom: 38px; }
.ws-feature-copy { padding: 4px 24px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ws-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 24px; }
.ws-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 24px; }
.ws-notes h3 { margin: 0 0 8px; color: #ffff3c; font-size: 1.5rem; line-height: 1.15; font-weight: 600; }
.ws-notes p { margin: 0; }
.ws-more { padding: 0 24px; margin: 0 0 12px; }
.ws-more a, .ws-notes a { display: inline-flex; align-items: center; min-height: 48px; }
.ws-buy-intro { padding: 0 24px 12px; }
.ws-buy-intro p { margin: 12px 0; }
.ws-stores { margin: 0 24px; }
.ws-store { display: grid; grid-template-columns: 1fr 1.4fr 0.8fr; gap: 28px; padding: 22px 0; border-top: 1px solid #64806a; align-items: start; }
.ws-store h3 { margin: 0 0 6px; color: #ffff3c; font-size: 1.625rem; font-weight: 600; }
.ws-store p { margin: 0; }
.ws-platforms { color: #d5e4d8; }
.ws-store-action { text-align: right; }
.ws-store-action .lp-button { margin-top: 10px; }
.ws-price { font-size: 1.375rem; }
.ws-state { color: #d5e4d8; }
.ws-last { text-align: center; padding: 0 12px 30px; }
.ws-last h2 { color: #ffff3c; font-size: 2rem; margin: 0; }
.ws-last p { margin: 8px auto; }
.ws-footer { border-top: 1px solid #464694; padding-top: 18px; color: #c9c9ff; font-size: 1rem; }
.ws-footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.ws-footer a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
@media (max-width: 760px) {
  .ws-hero { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
  .ws-pitch h1 { font-size: clamp(2.75rem, 12vw, 4.75rem); }
  .ws-pitch h1 br { display: none; }
  .ws-pitch h1 br::after { content: ' '; }
  .ws-pitch h1 { max-width: 13ch; }
  .ws-feature-copy, .ws-notes { grid-template-columns: 1fr; gap: 20px; }
  .ws-proof { grid-template-columns: 1fr; }
  .ws-store { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ws-store > p { grid-column: 1 / -1; grid-row: 2; }
  .ws-store-action { grid-column: 2; grid-row: 1; }
}
@media (max-width: 420px) {
  .ws-page .lp-tabs a { flex-basis: 40%; }
  .ws-feature-copy, .ws-proof, .ws-notes, .ws-buy-intro { padding-right: 16px; padding-left: 16px; }
  .ws-stores { margin-right: 16px; margin-left: 16px; }
  .ws-store { grid-template-columns: 1fr; }
  .ws-store-action { grid-column: 1; grid-row: 3; text-align: left; }
  .ws-hero figure { box-shadow: none; }
}
@media (prefers-contrast: more) {
  .ws-page { background: #000; }
  .ws-store { border-color: #fff; }
}