/* SPACE QUACK — legal and support documents (privacy, terms, support, impressum, Japanese
   disclosure). Layered on space-quack.css, which owns the tokens, header, footer and star
   field. Nothing here is decorative: these pages are read, so the type is calm and the
   measure is short. */

.doc-page .site-header {
  position: static;
  padding-bottom: 8px;
}

/* In-game browser: the game opens these pages with ?inApp=1 and draws its own close bar;
   assets/js/inapp.js sets .in-app-browser on <html>, so the site header is not shown twice. */
.in-app-browser .site-header { display: none !important; }

/* ------------------------------------------------------------------ document */

.doc {
  padding: clamp(32px, 7vw, 88px) 0 clamp(56px, 9vw, 120px);
}
.doc__shell {
  max-width: calc(780px + 2 * (var(--gutter) + var(--safe-x)));
}

.doc__head { margin-bottom: clamp(28px, 5vw, 48px); }
.doc__eyebrow {
  margin-bottom: 14px;
  color: var(--sq-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.doc__title {
  color: var(--sq-ivory);
  font-size: clamp(34px, 6.4vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.doc__lede {
  max-width: 62ch;
  margin-top: 18px;
  color: var(--sq-slate);
  font-size: 17px;
  line-height: 1.6;
}
.doc__meta {
  margin-top: 16px;
  color: var(--sq-quiet);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.doc__lang {
  margin-bottom: 18px;
  color: var(--sq-quiet);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.doc__lang a { padding: 6px 2px; }
.doc__lang a[aria-current="page"] { color: var(--sq-ivory); }
@media (hover: hover) and (pointer: fine) {
  .doc__lang a:not([aria-current]):hover { color: var(--sq-ivory); }
}
.doc__changes {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--sq-slate-muted);
  font-size: 13px;
  line-height: 1.55;
}
.doc__changes strong { color: var(--sq-ivory-soft); font-weight: 600; }

.doc__summary {
  margin: 0 0 clamp(28px, 5vw, 44px);
  padding: 20px 22px;
  border: 1px solid var(--sq-hairline);
  border-left: 3px solid var(--sq-gold);
  border-radius: 10px;
  background: rgba(18, 24, 39, .72);
  color: var(--sq-ivory-soft);
  font-size: 15px;
  line-height: 1.65;
}
.doc__summary strong { color: var(--sq-ivory); font-weight: 600; }

.doc__toc {
  margin-bottom: clamp(32px, 6vw, 56px);
  padding: 20px 22px 18px;
  border: 1px solid var(--sq-hairline);
  border-radius: 10px;
}
.doc__toc h2 {
  margin-bottom: 12px;
  color: var(--sq-quiet);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.doc__toc ol {
  display: grid;
  gap: 2px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .doc__toc ol { grid-template-columns: 1fr 1fr; }
}
.doc__toc a {
  display: block;
  padding: 6px 0;
  color: var(--sq-slate);
  font-size: 14px;
  line-height: 1.4;
  transition: color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .doc__toc a:hover { color: var(--sq-ivory); }
}

.doc__body section { scroll-margin-top: 24px; }
.doc__body section + section { margin-top: clamp(32px, 5vw, 48px); }
.doc__body h2 {
  margin-bottom: 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(236, 234, 229, .1);
  color: var(--sq-ivory);
  font-size: clamp(20px, 3.2vw, 25px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .02em;
}
.doc__body h3 {
  margin: 24px 0 8px;
  color: var(--sq-ivory);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
}
.doc__body p,
.doc__body li {
  color: var(--sq-slate);
  font-size: 16px;
  line-height: 1.7;
}
.doc__body p + p,
.doc__body p + ul,
.doc__body ul + p,
.doc__body p + ol,
.doc__body ol + p { margin-top: 14px; }
.doc__body ul,
.doc__body ol { margin: 0; padding-left: 1.25em; }
.doc__body li + li { margin-top: 8px; }
.doc__body li::marker { color: var(--sq-quiet); }
.doc__body strong { color: var(--sq-ivory); font-weight: 600; }
.doc__body a {
  color: var(--sq-ivory);
  text-decoration: underline;
  text-decoration-color: rgba(236, 234, 229, .4);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .doc__body a:hover { text-decoration-color: var(--sq-gold); }
}

.doc__facts {
  display: grid;
  gap: 2px;
  margin: 0;
}
.doc__facts div {
  display: grid;
  gap: 2px 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(236, 234, 229, .08);
}
@media (min-width: 640px) {
  .doc__facts div { grid-template-columns: minmax(150px, 220px) 1fr; }
}
.doc__facts dt { color: var(--sq-quiet); font-size: 13px; letter-spacing: .04em; }
.doc__facts dd { margin: 0; color: var(--sq-ivory-soft); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }

.doc__table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--sq-hairline);
  border-radius: 10px;
}
.doc__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.doc__table th,
.doc__table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(236, 234, 229, .08);
  color: var(--sq-slate);
  text-align: left;
  vertical-align: top;
}
.doc__table th {
  color: var(--sq-quiet);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.doc__table tr:last-child td { border-bottom: 0; }

.doc__contact {
  margin-top: 8px;
  padding: 22px;
  border: 1px solid var(--sq-hairline);
  border-radius: 10px;
  background: rgba(18, 24, 39, .72);
}
.doc__contact p { color: var(--sq-slate); }
.doc__contact .doc__mail {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  color: var(--sq-ink);
  background: var(--sq-ivory);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Bilingual (Japanese disclosure): the Japanese leads, the English follows quieter. */
.doc__body .en { color: var(--sq-quiet); font-size: 14px; }

/* ------------------------------------------------------------------ footer links */

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
}
.site-footer__nav a {
  padding: 8px 0;
  color: var(--sq-slate-muted);
  font-size: 12px;
  letter-spacing: .08em;
  transition: color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__nav a:hover { color: var(--sq-ivory); }
}
.site-footer__nav a[aria-current="page"] { color: var(--sq-ivory); }

.site-footer__company {
  max-width: 96ch;
  margin-top: 6px;
  color: var(--sq-quiet);
  font-size: 11.5px;
  line-height: 1.65;
  letter-spacing: .02em;
}
.site-footer__company a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(236, 234, 229, .3); }

.doc-page .site-footer { margin-top: 0; }
.doc-page .site-footer__row {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
@media (min-width: 720px) {
  .site-footer--links .site-footer__row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "studio nav" "line legal" "company company";
    justify-items: start;
    align-items: center;
  }
  .site-footer--links .site-footer__studio { grid-area: studio; }
  .site-footer--links .site-footer__nav { grid-area: nav; justify-content: flex-end; }
  .site-footer--links .site-footer__line { grid-area: line; }
  .site-footer--links .site-footer__legal { grid-area: legal; justify-self: end; }
  .site-footer--links .site-footer__company { grid-area: company; }
  .doc-page .site-footer__row { justify-items: start; text-align: left; }
}