/* Browser-only navigation and accessibility; Android's original layout remains authoritative. */

.web-home { display:block; margin-top:18px; text-align:center; color:#bfc1c7; font-size:12px; }
.web-selection { margin:16px auto 0; max-width:36em; font-size:12px; color:#bec1c8; }
.web-selected { outline:1px solid rgba(255,255,255,.5); outline-offset:4px; }
.profile-veil.setup .web-delete { display:none; }
.web-delete { margin-top:12px; color:#c4b7ae; }
.web-nojs { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:30px; background:#040407; color:#eee; text-align:center; }
.web-nojs a { color:inherit; }
.hud-bar:focus-within { opacity:1!important; pointer-events:auto!important; }
#experience-screen canvas { touch-action:manipulation; }
/* Visibility must follow modal state immediately. A visibility transition on the
   blurred fixed overlay can remain visible in WebKit after aria-hidden is true. */
.profile-veil { transition:opacity .36s ease; }
/* Nested backdrop filters stall WebKit's software compositor on gallery canvases.
   Keep the tinted glass surfaces and borders without repeatedly blurring the page. */
.profile-veil, .about-overlay, .gallery-action, .card-index, .card-arrow, .hud-btn {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.profile-veil.editing { background:rgba(4,4,7,.95); }
.about-overlay { background:rgba(4,4,7,.94); }
/* Honor reduced motion for the whole browser UI, including modal visibility and
   gallery transforms. Canvas breathing only runs after an explicit session start. */
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
.gallery-footer { color:#8b8e96; }
a.gallery-action { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

.web-back { left:calc(1.25rem + var(--safe-left)); right:auto; text-decoration:none; }
@media(max-width:600px) {
  /* Reserve a separate row for the mirrored navigation buttons on narrow screens. */
  #gallery-screen { padding-top:calc(5rem + var(--safe-top)); }
}