/* One solid top surface; scrolling content never paints over iOS status UI. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-height: 102px;
}
html {
  background: var(--background);
  scroll-padding-top: calc(var(--header-height) + var(--safe-top) + 16px);
  scrollbar-width: none;
  /* Match Editorial: the browser owns momentum and boundary rubber-banding. */
  overscroll-behavior-y: auto;
}
body {
  position: relative;
  min-height: 100svh;
  background: var(--background);
  isolation: isolate;
  overscroll-behavior-y: auto;
}
.app-backdrop {
  /* This belongs to the scrolling document, NEVER to the viewport. A fixed
     gradient paints through the native iOS rubber-band gap above the header. */
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--background) calc(var(--header-height) + var(--safe-top)), transparent calc(var(--header-height) + var(--safe-top))),
    radial-gradient(ellipse 640px 620px at 85% 230px, #42226d38, transparent 80%),
    radial-gradient(ellipse 750px 900px at 12% 580px, #0c668135, transparent 85%),
    var(--background);
}
/* Hide only the indicator: touch, wheel, keyboard and modal scrolling remain. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
.device-safe-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: var(--background);
  z-index: 30;
  pointer-events: none;
}
.app-shell { align-items: start; }
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: calc(var(--header-height) + var(--safe-top));
  padding-top: var(--safe-top);
  background: var(--background);
  isolation: isolate;
}
.app-header::before {
  content: '';
  position: absolute;
  inset: 0 calc((min(1180px, 100vw) - 100vw) / 2 - 40px);
  background: var(--background);
  z-index: -1;
  pointer-events: none;
}
.profile-chip { min-width: 44px; min-height: 44px; justify-content: center; }
.skip-link { z-index: 40; }
.skip-link:focus { top: calc(var(--safe-top) + 10px); }
.welcome { height: 240px; overflow: visible; }
.welcome-art {
  top: 0;
  height: 240px;
  width: 420px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 90%, transparent), linear-gradient(transparent, #000 20%, #000 60%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 90%, transparent), linear-gradient(transparent, #000 20%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
}
dialog { max-height: calc(100dvh - max(var(--safe-top), var(--safe-bottom)) - max(var(--safe-top), var(--safe-bottom)) - 48px); }
.auth-screen { background: transparent; }

@media (max-width: 900px) and (min-width: 701px) {
  .app-header::before { inset-inline: -24px; }
}
@media (max-width: 700px) {
  :root { --header-height: 88px; --page-gutter: 20px; }
  .app-backdrop {
    background:
      linear-gradient(var(--background) calc(var(--header-height) + var(--safe-top)), transparent calc(var(--header-height) + var(--safe-top))),
      radial-gradient(ellipse 370px 520px at 100% 250px, #5931823b, transparent 85%),
      radial-gradient(ellipse 440px 800px at 0% 620px, #0c657539, transparent 85%),
      var(--background);
  }
  .app-shell {
    padding-left: max(var(--page-gutter), env(safe-area-inset-left));
    padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  }
  .app-header {
    height: calc(var(--header-height) + var(--safe-top));
    min-height: calc(var(--header-height) + var(--safe-top));
    gap: 10px;
    border-bottom: 1px solid #1c2a3c;
  }
  .app-header::before {
    inset-inline: calc((min(500px, 100vw) - 100vw) / 2 - var(--page-gutter));
    border-bottom: 1px solid #1c2a3c;
  }
  .wordmark { font-size: 1.62rem; letter-spacing: .32em; }
  .profile-chip { margin-left: auto; }
  .header-settings { display: none; }
  .welcome {
    height: 180px;
    margin: 12px calc(-1 * var(--page-gutter)) 0;
  }
  .welcome-art {
    top: 8px;
    right: 0;
    width: 255px;
    height: 170px;
  }
  .welcome-copy { padding-left: var(--page-gutter); }
  .welcome-copy h1 { font-size: 1.4rem; }
  .welcome-copy p { font-size: .8rem; max-width: 56%; }
  .featured-section .section-heading { margin-top: 4px; }
  .navigation { background: #07111e; backdrop-filter: none; }
  .auth-screen { padding-top: calc(25px + var(--safe-top)); }
}

/* Returning focus from a dialog must not draw a ring after a tap/click.
   Keyboard navigation retains the existing visible focus indicators. */
html[data-input-modality="pointer"] :is(button, a, [role="button"]):focus,
html[data-input-modality="pointer"] input:focus + .switch,
html[data-input-modality="pointer"] .avatar-option input:focus + .avatar-option-card {
  outline: none;
}

/* The same saved character appears in the header and player profile. */
.profile-chip .profile-avatar { width: 44px; height: 44px; object-fit: cover; }
.profile-avatar.large { width: 64px; height: 64px; object-fit: cover; }
.avatar-picker { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.avatar-picker legend { padding: 0; margin-bottom: 14px; font-size: .94rem; font-weight: 500; }
.avatar-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 380px; }
.avatar-option { position: relative; cursor: pointer; min-width: 0; }
.avatar-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-option-card { display: flex; align-items: center; flex-direction: column; gap: 9px; padding: 12px 12px 10px; background: #0b1727; border: 2px solid #293a51; border-radius: 18px; font-size: .875rem; }
.avatar-option-card img { width: 100%; max-width: 112px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.avatar-selection { color: #79d4ff; font-size: .75rem; visibility: hidden; }
.avatar-option input:checked + .avatar-option-card { border-color: #46bdff; background: #102a41; }
.avatar-option input:checked + .avatar-option-card .avatar-selection { visibility: visible; }
.avatar-option input:focus-visible + .avatar-option-card { outline: 2px solid #c0eaff; outline-offset: 4px; }
.avatar-picker:disabled .avatar-option { cursor: wait; }
.avatar-picker:disabled .avatar-option-card { opacity: .65; }
.avatar-status { color: #98abc2; font-size: .8125rem; line-height: 1.5; min-height: 1.5em; margin-top: 12px; }
@media (max-width: 360px) {
  :root { --page-gutter: 16px; }
  .wordmark { font-size: 1.4rem; letter-spacing: .28em; }
  .welcome-art { right: 0; width: 230px; }
  .welcome-copy h1 { font-size: 1.25rem; }
  .welcome-copy p { font-size: .76rem; }
}