/* lane L (legal + consent + accessibility), 2026-09-30: policy sheets, the storage notice, sign-up consent + age fields,
   the under-13 parent path, the purchase consent box, Settings > Privacy & data / Legal / About, and a few global
   accessibility rules (visible keyboard focus, reduced motion on the gate). Sized in --u like the gate (css/onboarding.css). */

/* ---------- accessibility: visible keyboard focus everywhere (mouse and touch clicks don't show it) ---------- */
button:focus-visible, a:focus-visible, [role="tab"]:focus-visible, [role="switch"]:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #ffd76a; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(11, 7, 22, .75); }
.lg-body:focus-visible { outline-offset: -3px; }
h2[tabindex="-1"]:focus, h2[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; } /* dialogs focus their heading for screen readers */
@media (prefers-reduced-motion: reduce) {
  .wg-dust, .wg-logo, .wg-dot, .wg-form.busy .wg-submit, .fi-art { animation: none !important; }
  .lg-ov, .lg-ov.out, .lg-notice, .lg-notice.out, .lg-card { animation: none !important; transition: none !important; }
}

/* ---------- overlays (policy sheets, parent path, updated Terms, delete) ---------- */
.lg-ov { z-index: 1190; }
.lg-ov .lg-card { position: relative; text-align: left; }
.lg-x { position: absolute; top: calc(var(--u) * 12); right: calc(var(--u) * 12); z-index: 2; width: calc(var(--u) * 40); height: calc(var(--u) * 40); display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(190, 160, 255, .3); background: rgba(8, 4, 18, .7); color: var(--ink); cursor: pointer; padding: 0; }
.lg-x .ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.lg-x:hover { border-color: var(--gold-2, #e0a53a); }
.lg-ov a { color: #ffd76a; text-decoration: underline; text-underline-offset: 2px; }
.lg-ov .wg-head { padding-right: calc(var(--u) * 40); }
.lg-ov .wg-acts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 12); }
.lg-ov .wg-link { font-size: calc(var(--u) * 14); }

/* the document viewer: tabs, a scrolling body, a footer */
.lg-docov .lg-card { width: calc(var(--u) * 820); height: calc(100% - 32px); max-height: calc(100% - 32px); overflow: hidden; display: flex; flex-direction: column; padding: calc(var(--u) * 22) calc(var(--u) * 26); }
.lg-doc { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.lg-tabs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); padding-right: calc(var(--u) * 46); }
.lg-tabs button { appearance: none; cursor: pointer; border-radius: 99px; border: 1px solid rgba(190, 160, 255, .28); background: rgba(6, 3, 14, .55); color: #ddd2f2;
  font: 800 calc(var(--u) * 12.5) / 1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; padding: calc(var(--u) * 9) calc(var(--u) * 14); }
.lg-tabs button.on { color: #2b1600; border-color: transparent; background: linear-gradient(180deg, #ffe39a, #f0bd4f 45%, #c98a22); }
.lg-title { margin: calc(var(--u) * 14) 0 calc(var(--u) * 8); font: 800 calc(var(--u) * 26) / 1.15 var(--font-title); letter-spacing: .04em; color: #ffd76a; }
.lg-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: calc(var(--u) * 10); color: #e9e0fa; font-size: calc(var(--u) * 15.5); line-height: 1.6;
  -webkit-user-select: text; user-select: text; }
.lg-body h2 { margin: calc(var(--u) * 18) 0 calc(var(--u) * 6); font: 800 calc(var(--u) * 14) / 1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #ffd76a; }
.lg-body section:first-child h2 { margin-top: 0; }
.lg-body p { margin: 0 0 calc(var(--u) * 10); }
.lg-body ul { margin: 0 0 calc(var(--u) * 10); padding-left: calc(var(--u) * 22); }
.lg-body li { margin: 0 0 calc(var(--u) * 7); }
.lg-body b { color: #fff4d6; }
.lg-updated { margin-top: calc(var(--u) * 16) !important; color: #c9bde6; font-size: calc(var(--u) * 13.5); }
.lg-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 12); padding-top: calc(var(--u) * 12); margin-top: calc(var(--u) * 6); border-top: 1px solid rgba(190, 160, 255, .16); }
.lg-foot .lg-web { font-size: calc(var(--u) * 13.5); }
.lg-foot .btn { font-size: calc(var(--u) * 15); padding: calc(var(--u) * 11) calc(var(--u) * 26); }
body.portrait .lg-docov .lg-card { width: calc(100% - 40px); height: calc(100% - 80px); }
body.mobile:not(.portrait) .lg-docov .lg-card { width: calc(100% - 60px); height: calc(100% - 20px); max-height: calc(100% - 20px); padding: calc(var(--u) * 12) calc(var(--u) * 18); }
body.mobile:not(.portrait) .lg-title { margin: calc(var(--u) * 6) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 19); }
body.mobile:not(.portrait) .lg-tabs button { padding: calc(var(--u) * 7) calc(var(--u) * 12); }
body.mobile:not(.portrait) .lg-foot { padding-top: calc(var(--u) * 6); }
body.mobile:not(.portrait) .lg-docov .lg-body { font-size: calc(var(--u) * 17.5); } /* about 11.5px on a landscape phone */
body.mobile:not(.portrait) .lg-foot .btn { padding: calc(var(--u) * 8) calc(var(--u) * 22); }

/* updated Terms + under 13 */
.lg-sum { margin: calc(var(--u) * 6) 0 calc(var(--u) * 10); padding-left: calc(var(--u) * 20); color: #e9e0fa; font-size: calc(var(--u) * 14.5); line-height: 1.5; }
.lg-read { margin: 0 0 calc(var(--u) * 10); font-size: calc(var(--u) * 14); color: #ddd2f2; }
.lg-u13 .wg-form { gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 6); }
.lg-u13 .wg-form + .wg-form { margin-top: calc(var(--u) * 12); }
.lg-u13acts { align-items: center; }
.lg-danger { border-color: rgba(255, 110, 95, .6) !important; color: #ffd3cc !important; }
.lg-danger:hover { background: rgba(255, 90, 79, .16) !important; }
.lg-del .wg-submit.lg-danger { background: linear-gradient(180deg, #d9534a, #a8332c); color: #fff !important; }
body.mobile:not(.portrait) .lg-ov .wg-head p { font-size: calc(var(--u) * 13); }
body.mobile:not(.portrait) .lg-termsov .lg-sum { display: none; }

/* ---------- links row ("Terms · Privacy · Refunds · Cookies") ---------- */
.lg-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.lg-links a { color: #ffd76a; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lg-links i { font-style: normal; color: rgba(233, 220, 255, .5); }
.wg-foot .wg-legal { margin-left: calc(var(--u) * 10); pointer-events: auto; letter-spacing: .08em; }
.wg-foot .wg-legal a { color: rgba(255, 215, 106, .85); }
.lg-acctlinks { margin: 10px 0 0; font-size: 13px; text-align: center; color: var(--muted); }
body.mobile .lg-acctlinks { font-size: 18px; } body.portrait .lg-acctlinks { font-size: 20px; }
.lcs-legal .lg-links { margin-left: 4px; }

/* ---------- storage notice (first visit; never blocks play) ---------- */
.lg-notice { --u: 1px; position: absolute; left: 50%; bottom: calc(var(--u) * 18); z-index: 1170; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px);
  display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 20); border-radius: calc(var(--u) * 16);
  background: rgba(14, 8, 28, .94); border: 1px solid rgba(232, 186, 90, .5); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); color: #f3ecff; font-family: var(--font-ui);
  animation: lgUp .35s ease-out both; }
body.mobile .lg-notice { --u: 1.55px; } body.portrait .lg-notice { --u: 1.6px; bottom: calc(var(--u) * 40); } body.portrait.mobile .lg-notice { --u: 1.75px; }
.lg-notice.out { animation: lgDown .25s ease-in both; }
.lg-notice p { margin: 0; font-size: calc(var(--u) * 14.5); line-height: 1.35; }
.lg-notice .lg-more { appearance: none; background: none; border: 0; color: #ffd76a; text-decoration: underline; cursor: pointer; font: 600 calc(var(--u) * 14) var(--font-ui); padding: calc(var(--u) * 6); white-space: nowrap; }
.lg-notice .lg-ok { font-size: calc(var(--u) * 14); padding: calc(var(--u) * 8) calc(var(--u) * 20); border-radius: calc(var(--u) * 10); }
body.portrait .lg-notice { flex-wrap: wrap; justify-content: center; text-align: center; width: calc(100% - 60px); }
/* over the welcome gate: keep clear of the sign-up card (landscape: the logo side; portrait: the top) */
body.gate-on:not(.portrait) .lg-notice { left: 3%; transform: none; max-width: 40%; width: auto; flex-wrap: wrap; bottom: calc(var(--u) * 44); }
body.gate-on:not(.portrait) .lg-notice p { flex: 1 1 100%; }
body.gate-on.portrait .lg-notice { top: calc(var(--u) * 14); bottom: auto; }
body.gate-on:not(.portrait) .lg-notice, body.gate-on:not(.portrait) .lg-notice.out { animation-name: lgFade; }
@keyframes lgFade { from { opacity: 0; } }
@keyframes lgUp { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes lgDown { to { opacity: 0; transform: translate(-50%, 16px); } }

/* ---------- sign-up: birth year + I agree (gate card, account sheet) ---------- */
.lg-signup { display: grid; grid-template-columns: calc(var(--u, 1px) * 132) minmax(0, 1fr); gap: calc(var(--u, 1px) * 12); align-items: start; text-align: left; }
.lg-signup .lg-year input { text-align: center; letter-spacing: .08em; }
.lg-checks { display: flex; flex-direction: column; gap: calc(var(--u, 1px) * 7); padding-top: calc(var(--u, 1px) * 18); min-width: 0; }
.lg-signup .wg-check { align-items: flex-start; font-size: calc(var(--u, 1px) * 14); line-height: 1.35; }
.lg-signup .wg-check[hidden], .acctsheet .lg-signup .wg-check[hidden] { display: none; }
.lg-signup .wg-check input { margin-top: calc(var(--u, 1px) * 1); }
.lg-signup .wg-check a { color: #ffd76a; text-decoration: underline; text-underline-offset: 2px; }
.lg-hint { font-style: normal; font-size: calc(var(--u, 1px) * 12); line-height: 1.35; color: rgba(201, 189, 230, .9); }
body.mobile:not(.portrait) .wg-card .lg-hint { display: none; }
body.mobile:not(.portrait) .wg-card #wgCreate .wg-head p { display: none; } /* room for the birth year + consent row on landscape phones */
body.mobile:not(.portrait) .wg-card #wgCreate { gap: calc(var(--u) * 9); }
body.mobile:not(.portrait) .wg-card .lg-checks { padding-top: calc(var(--u) * 14); gap: calc(var(--u) * 4); }
body.mobile:not(.portrait) .wg-card .lg-signup .wg-check { font-size: calc(var(--u) * 12.5); }
/* account sheet (no --u there): the sheet's own field look */
.acctsheet .lg-signup { --u: 1px; margin: 2px 0 4px; }
body.mobile .acctsheet .lg-signup { --u: 1.35px; } body.portrait .acctsheet .lg-signup { --u: 1.5px; }
.acctsheet .lg-signup .wg-fld { display: flex; flex-direction: column; gap: 6px; }
.acctsheet .lg-signup .wg-fld > span { font: 800 calc(var(--u) * 10.5) / 1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.acctsheet .lg-signup .wg-fld input { width: 100%; box-sizing: border-box; height: calc(var(--u) * 40); border-radius: 10px; border: 1px solid var(--line); background: #1d1238; color: var(--ink); font: 500 calc(var(--u) * 16) var(--font-ui); }
.acctsheet .lg-signup .wg-check { display: flex; gap: 8px; cursor: pointer; color: var(--ink); }
.acctsheet .lg-signup .wg-check input { width: calc(var(--u) * 18); height: calc(var(--u) * 18); accent-color: var(--gold); flex: none; }
.acctsheet .lg-checks { padding-top: calc(var(--u) * 16); }

/* ---------- purchase consent (Buy Gems sheet) ---------- */
.lg-buy { display: flex; flex-direction: column; gap: 8px; margin: 8px auto 10px; max-width: 560px; text-align: left; }
.lg-bcheck { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.4; color: #ece3fb; padding: 10px 12px; border-radius: 12px;
  background: rgba(8, 4, 18, .5); border: 1px solid rgba(232, 186, 90, .35); }
.lg-bcheck input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--gold); }
.lg-bcheck a { color: #ffd76a; text-decoration: underline; }
body.mobile .lg-bcheck { font-size: 19px; gap: 14px; } body.mobile .lg-bcheck input { width: 28px; height: 28px; }
body.portrait .lg-bcheck { font-size: 21px; padding: 14px 16px; } body.portrait .lg-bcheck input { width: 30px; height: 30px; }
body.portrait .lg-buy { max-width: none; }

/* ---------- Settings: Privacy & data, Legal, About ---------- */
.settings.lg-set { margin-top: 18px; }
.lg-set .settxt p a { color: #ffd76a; }
.lg-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.lg-ctl .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.lg-ctl .btn .ico { width: 16px; height: 16px; }
.lg-docbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.lg-about { padding: 6px 6px 12px; color: #e3d9f6; font-size: 15px; line-height: 1.6; text-align: left; }
.lg-about p { margin: 6px 0; } .lg-about a { color: #ffd76a; }
.lg-set .err { color: #ff9d8f; min-height: 0; padding: 0 6px 8px; font-size: 14px; }
body.mobile .lg-about { font-size: 20px; } body.mobile .lg-ctl .btn { font-size: 18px; } body.mobile .lg-set .err { font-size: 19px; }
body.portrait .lg-set .set .lg-ctl { grid-column: 1 / -1; justify-content: flex-start; }
body.portrait .lg-ctl .btn { font-size: 21px; padding: 14px 20px; } body.portrait .lg-ctl .btn .ico { width: 22px; height: 22px; }
body.portrait .lg-about { font-size: 23px; } body.portrait .lg-set .err { font-size: 21px; }

/* guest account sheet (sign-up with consent) on portrait phones: the landscape phone width (1500px) overflowed the 900px portrait stage */
body.portrait #sheet .box.acctsheet, body.portrait #sheet .box.acctsheet.wide { width: calc(100% - 40px); max-width: calc(100% - 40px); }