/* Light & Wonder guest Wi-Fi portal — hand-written, brand tokens (brief §7.2–7.4).
   Colour rules: body text black on white or white on dark; Blue only for primary buttons and
   links on white; on dark surfaces links and focus rings are Mint. Blue never carries text on
   black (2.79:1). Errors use a functional dark red plus an icon, never Salmon.
   Logical properties throughout, so Hebrew (dir=rtl) mirrors without overrides. */

:root {
  --lw-blue: #002bff;
  --lw-black: #000000;
  --lw-light-gray: #eaeaea;
  --lw-purple: #6d66ff;
  --lw-pink: #db05b3;
  --lw-mint: #77edb4;
  --lw-yellow-green: #84c100;
  --lw-salmon: #e25959;

  --page-deep: #00082a;
  --page-black: #000210;
  --ink: #000000;
  --ink-2: #3b3b3b;
  --line: #6b6b6b;
  --error: #b00020;
  --on-dark: #ffffff;
  --on-dark-2: #c9cce0;
  --notice-tint: #eaf0ff;

  --radius: 12px;
  --gap: 1rem;
  --font: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-dark);
  background-color: var(--page-deep);
  /* The "portal glow": deep blue biased, never flat black (brief §7.4). No image needed.
     It scrolls with the page: `fixed` janks on phones, and iOS Safari ignores it. */
  /* Composed for a phone first: Blue blooms behind the logo, Purple haloes the card's top
     corner, a trace of Mint rises from below. Wider screens spread it (see the media query). */
  background-image:
    radial-gradient(34rem 22rem at 18% -7rem, rgba(0, 43, 255, 0.72), transparent 70%),
    radial-gradient(26rem 22rem at 108% 16rem, rgba(109, 102, 255, 0.42), transparent 70%),
    radial-gradient(30rem 24rem at -12% 108%, rgba(119, 237, 180, 0.16), transparent 70%),
    linear-gradient(180deg, #000b36 0%, var(--page-deep) 38%, var(--page-black) 100%);
  padding-inline: 1rem;
  padding-block-end: 2.5rem;
}
@media (min-width: 48rem) {
  body {
    background-image:
      radial-gradient(64rem 34rem at 50% -14rem, rgba(0, 43, 255, 0.66), transparent 70%),
      radial-gradient(40rem 32rem at 88% 42%, rgba(109, 102, 255, 0.30), transparent 70%),
      radial-gradient(40rem 30rem at 10% 92%, rgba(119, 237, 180, 0.13), transparent 70%),
      linear-gradient(180deg, #000b36 0%, var(--page-deep) 40%, var(--page-black) 100%);
  }
}
p, li { text-wrap: pretty; }
/* Long compound words (German, Greek, Bulgarian, Ukrainian) break cleanly on a phone. */
:lang(de-AT) .card, :lang(el) .card, :lang(bg) .card, :lang(uk) .card {
  hyphens: auto;
  /* Only long words split (German compounds); never "Won-der" or "Lon-don". */
  hyphenate-limit-chars: 8 3 4;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 4;
}
/* Headlines and names never hyphenate: a brand or a place split by a hyphen reads as a typo. */
.headline, bdi { hyphens: manual; }

/* Scripts other than Latin, Greek and Cyrillic use the system's own fonts. */
:lang(zh-Hans) { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif; }
:lang(zh-Hant) { font-family: "PingFang TC", "PingFang HK", "Noto Sans CJK TC", "Microsoft JhengHei", system-ui, sans-serif; }
:lang(he) { font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", system-ui, sans-serif; }

a { color: var(--lw-mint); text-underline-offset: 0.18em; }
.card a { color: var(--lw-blue); }

:focus-visible { outline: 3px solid var(--lw-mint); outline-offset: 2px; }
.card :focus-visible { outline-color: var(--ink); }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem;
  background: var(--on-dark); color: var(--ink); padding: 0.5rem 1rem; border-radius: 6px; z-index: 10;
}
.skip-link:focus { inset-block-start: 0.5rem; }

.draft-banner {
  margin-inline: -1rem;
  padding: 0.375rem 1rem;
  background: var(--lw-yellow-green);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: center;
}

/* ---------------------------------------------------------------- masthead + card */

/* The logo is 40 px high on a phone (the guide's minimum is 30), so the form and Connect fit the
   first screen of a sign-in sheet. Its clear space is at least the width of its "W" (0.6 of the
   logo's height: 24 px here) on every side, and it lines up with the card's text. */
.masthead { max-inline-size: 30rem; margin-inline: auto; padding: 1.5rem 1.25rem; }
.masthead__logo { display: block; block-size: 2.5rem; inline-size: auto; max-inline-size: 100%; }
@media (min-width: 30rem) { .masthead { padding-inline: 2.25rem; } }
@media (min-width: 48rem) {
  .masthead { padding-block: 3rem 2.25rem; }
  .masthead__logo { block-size: 3.5rem; }
}

.card {
  max-inline-size: 30rem;
  margin-inline: auto;
  padding: 1.5rem 1.25rem 1.75rem;
  background: #ffffff;
  color: var(--ink);
  border-radius: 1.25rem;
  box-shadow:
    0 2.5rem 4.5rem -2rem rgba(0, 3, 26, 0.85),
    0 0.5rem 1.25rem rgba(0, 3, 26, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.09);
}
.card:focus { outline: none; }
@media (min-width: 30rem) { .card { padding: 2.25rem 2.25rem 2.5rem; } }

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lw-blue); /* 7.5:1 on white */
}
:lang(zh-Hans) .eyebrow, :lang(zh-Hant) .eyebrow, :lang(he) .eyebrow,
:lang(zh-Hans) .privacy-summary__title, :lang(zh-Hant) .privacy-summary__title,
:lang(he) .privacy-summary__title { letter-spacing: 0.02em; }

.headline {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
@media (min-width: 30rem) { .headline { font-size: 2rem; } }
.headline--legal { font-size: 1.5rem; }
.lead { margin: 0 0 1.125rem; font-size: 1.0625rem; }
.banner, .notice {
  margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-radius: 8px;
  background: var(--notice-tint); border-inline-start: 4px solid var(--lw-blue);
}
.tip, .help { margin: 1rem 0 0; color: var(--ink-2); }
.help__contact { unicode-bidi: isolate; }

/* ---------------------------------------------------------------------- the form */

.form { display: grid; gap: 1rem; }
/* An answered error clears itself as the guest types (portal.js); without JS it stays until the
   next submit. */
.is-resolved > .field__error { display: none; }
.field--error.is-resolved .field__input, .check--error.is-resolved .check__input { border-color: #767676; }

.field__label { display: block; font-weight: 700; font-size: 0.9375rem; margin-block-end: 0.375rem; }
.field__hint, .check__hint { margin: 0 0 0.375rem; font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); }
.field__input {
  display: block;
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 1rem; /* 16px: no iOS zoom-on-focus */
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid #767676; /* 4.5:1 on white */
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.field__input:hover { border-color: #4a4a4a; }
.field__input:focus-visible { outline: 3px solid var(--lw-blue); outline-offset: 1px; border-color: var(--lw-blue); }
/* Autofill keeps the card's white, not the browser's yellow. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #ffffff inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}

.field--error .field__input, .check--error .check__input { border-color: var(--error); }
.field__error {
  margin: 0 0 0.375rem;
  font-weight: 700;
  color: var(--error);
  padding-inline-start: 1.5rem;
  background: no-repeat left 0.2em / 1.125rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23b00020'/%3E%3Cpath d='M12 6v8M12 17.5v.5' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
[dir="rtl"] .field__error { background-position: right 0.2em; }

.check { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 0.75rem; align-items: start; }
.check[hidden] { display: none; }
.check .field__error, .check__hint { grid-column: 1 / -1; }
.check__hint { grid-column: 2; }
.check__input {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 1.5rem; /* target size >= 24px (WCAG 2.5.8) */
  block-size: 1.5rem;
  margin: 0;
  background: #ffffff;
  border: 1.5px solid #767676;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.check__input:hover { border-color: #4a4a4a; }
.check__input:checked {
  background: var(--lw-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
  border-color: var(--lw-blue);
}
.check__input:focus-visible { outline: 3px solid var(--lw-blue); outline-offset: 2px; }
.check__label { font-size: 1rem; line-height: 1.4; padding-block-start: 0.1rem; cursor: pointer; text-wrap: pretty; }
/* A convenience, not the consent: one step down, so the required box leads. */
.check--minor .check__label { font-size: 0.9375rem; padding-block-start: 0.125rem; }
@media (forced-colors: active) { .check__input { -webkit-appearance: auto; appearance: auto; } }

.privacy-summary {
  padding: 1rem 1.125rem 1.125rem;
  border-radius: 14px;
  background: #f4f6fb;
  border: 1px solid #e2e6f0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.privacy-summary__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink-2);
}
.privacy-summary__title::before {
  content: "";
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l8 3v6c0 4.9-3.4 8.7-8 10-4.6-1.3-8-5.1-8-10v-6z' fill='%23002bff'/%3E%3Cpath d='M8.3 12.2l2.6 2.6 5-5.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.privacy-summary__body p { margin: 0 0 0.5rem; }
.privacy-summary__body p:last-child { margin-block-end: 0; }
.fallback-note { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--ink-2); font-style: italic; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: 0.625rem 1.25rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: var(--lw-blue);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0.875rem 1.5rem -0.875rem rgba(0, 43, 255, 0.85);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.card a.button { color: #ffffff; }
.button:hover { background: #0022cc; box-shadow: 0 1rem 1.75rem -0.875rem rgba(0, 43, 255, 0.95); }
.button:active { transform: translateY(1px); box-shadow: 0 0.5rem 1rem -0.625rem rgba(0, 43, 255, 0.85); }
.button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Signing in: a small spinner after the label (still, with reduced motion). */
.button--busy { cursor: progress; }
.button--busy::after {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  margin-inline-start: 0.625em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.8s linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }

.link-button {
  justify-self: center;
  min-block-size: 2.75rem;
  padding: 0.5rem;
  font: inherit;
  color: var(--lw-blue);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.link-button[hidden] { display: none; }

.error-summary {
  margin: 0 0 1.25rem;
  padding: 1rem 1.125rem;
  background: #fdf1f2;
  border: 1px solid #f0c3ca;
  border-inline-start: 4px solid var(--error);
  border-radius: 12px;
}
/* Focused on load so screen readers announce it; it isn't a control, so no focus ring (its
   links have theirs). */
.error-summary:focus { outline: none; }
.error-summary__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 1.0625rem; }
.error-summary__title::before {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23b00020'/%3E%3Cpath d='M12 6v8M12 17.5v.5' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.error-summary__list { margin: 0; padding-inline-start: 1.25rem; }
.error-summary__list li + li { margin-block-start: 0.25rem; }
.error-summary__list a { color: var(--error); font-weight: 700; } /* 6.6:1 on the tint */

.steps { list-style: none; counter-reset: step; display: grid; gap: 0.875rem; margin: 0 0 1.5rem; padding: 0; }
.steps li { counter-increment: step; position: relative; min-block-size: 2rem; padding-block-start: 0.2rem; padding-inline-start: 2.75rem; }
.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: #eef1ff;
  color: var(--lw-blue); /* 6.9:1 on the tint */
  font-weight: 700;
}
.ssid { font-weight: 700; unicode-bidi: isolate; white-space: nowrap; }

/* --------------------------------------------------------- success: the Portal ring */

/* The ring is its own layer (::before) so it can draw itself around the white disc; the glow is
   another (::after). On arrival it draws, its colours swirl into place and the glow blooms, then
   the text rises in. Everything finishes within about 2.7 s and then holds still (WCAG 2.2.2:
   nothing moves for more than 5 s), runs only on the first view, and not at all with reduced
   motion. The final state is the plain state, so without animation the page looks the same. */
@property --portal-sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@property --portal-spin { syntax: "<angle>"; inherits: false; initial-value: 200deg; }

.portal-ring {
  position: relative;
  isolation: isolate;
  inline-size: min(17rem, 100%);
  aspect-ratio: 1;
  margin: 0.5rem auto 1.5rem;
  padding: 0.625rem;
  border-radius: 50%;
}
.portal-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from var(--portal-spin), var(--lw-blue), var(--lw-purple), var(--lw-mint), var(--lw-blue));
  -webkit-mask: conic-gradient(#000 var(--portal-sweep), transparent 0);
  mask: conic-gradient(#000 var(--portal-sweep), transparent 0);
}
.portal-ring::after {
  content: "";
  position: absolute;
  inset: -1.5rem;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 43, 255, 0.42), rgba(109, 102, 255, 0.22) 55%, rgba(119, 237, 180, 0.12) 75%, transparent);
}
.portal-ring__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  block-size: 100%;
  padding: 1.25rem;
  border-radius: 50%;
  background: #ffffff;
  text-align: center;
}
.portal-ring__check { inline-size: 2.5rem; block-size: 2.5rem; margin-block-end: 0.5rem; }
.portal-ring__check circle { fill: none; stroke: var(--lw-mint); stroke-width: 3; }
.portal-ring__check path { fill: none; stroke: var(--lw-blue); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.portal-ring__title { margin: 0 0 0.5rem; font-size: 1.5rem; line-height: 1.2; font-weight: 400; }
.portal-ring__time { margin: 0; font-size: 1.0625rem; }
.portal-ring__time time { font-weight: 700; white-space: nowrap; } /* "4:35 AM" never splits */

@media (prefers-reduced-motion: no-preference) {
  .portal-ring--arrive::before {
    animation: portal-draw 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both,
               portal-swirl 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .portal-ring--arrive::after { animation: portal-bloom 2.4s ease-out 0.3s both; }
  .portal-ring--arrive .portal-ring__inner { animation: portal-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  .portal-ring--arrive .portal-ring__check path { animation: portal-tick 0.5s ease-out 0.7s both; }
  .portal-ring--arrive .portal-ring__check circle { animation: portal-fade 0.4s ease-out 0.5s both; }
  .portal-ring--arrive .portal-ring__title { animation: portal-rise 0.5s ease-out 0.6s both; }
  .portal-ring--arrive .portal-ring__time { animation: portal-rise 0.5s ease-out 0.8s both; }
}
@keyframes portal-draw { from { --portal-sweep: 0deg; } }
@keyframes portal-swirl { from { --portal-spin: -160deg; } }
@keyframes portal-bloom {
  from { opacity: 0; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes portal-pop { from { transform: scale(0.94); } }
@keyframes portal-tick { from { stroke-dashoffset: 24; } }
@keyframes portal-fade { from { opacity: 0; } }
@keyframes portal-rise { from { opacity: 0; transform: translateY(0.4rem); } }

/* ------------------------------------------------------------------ legal pages */

.legal h2 { font-size: 1.1875rem; margin: 1.5rem 0 0.5rem; }
.legal h3 { font-size: 1.0625rem; margin: 1.25rem 0 0.375rem; }
.legal p, .legal li { max-inline-size: 65ch; }
.legal ul, .legal ol { padding-inline-start: 1.25rem; }
.legal li + li { margin-block-start: 0.375rem; }
.back { margin: 0 0 1rem; }
.back a { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 1.5rem; font-weight: 700; text-decoration: none; }
.back a:hover { text-decoration: underline; }
.back a::before { content: "\2190"; content: "\2190" / ""; }
[dir="rtl"] .back a::before { content: "\2192"; content: "\2192" / ""; }
mark.placeholder { background: #fff3a6; color: var(--ink); padding: 0 0.15em; border-radius: 3px; }
/* Drafts only: Legal's notes are left out of the text, one tap brings them back. */
.draft-notes {
  margin: 1.75rem 0 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid #e2e6f0;
  font-size: 0.875rem;
  color: var(--ink-2);
}

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

.footer {
  max-inline-size: 30rem;
  margin-inline: auto;
  padding-block-start: 1.5rem;
  color: var(--on-dark-2);
  font-size: 0.9375rem;
  text-align: center;
}
.footer__creators {
  margin: 0 auto;
  padding: 0.75rem 1rem;
  max-inline-size: 26rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--on-dark);
}
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; margin-block: 1rem; }
.footer__links a { display: inline-block; min-block-size: 1.5rem; padding-block: 0.25rem; }
.footer__legal { margin-block-start: 1.25rem; }

.lang-switch { margin-block: 0.75rem; }
.lang-switch__summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem;
  padding: 0.25rem 0.875rem; cursor: pointer; color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px;
}
.lang-switch__label { color: var(--on-dark-2); }
.lang-switch__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin: 0.75rem 0 0; padding: 0; list-style: none;
}
.lang-switch__option {
  display: inline-block; min-block-size: 2.25rem; padding: 0.375rem 0.75rem; font: inherit;
  color: var(--on-dark); background: transparent; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; text-decoration: none; cursor: pointer;
}
.lang-switch__option[aria-current="true"] { border-color: var(--lw-mint); color: var(--lw-mint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .button, .lang-switch__option, .lang-switch__summary { border: 2px solid ButtonText; }
  .portal-ring::before { background: CanvasText; -webkit-mask: none; mask: none; }
  .portal-ring::after { display: none; }
}