/* Frosted "liquid glass" bars and the back button.
   Only the header and the tab bar are translucent; scorecards, scores and forms
   stay on solid backgrounds so they are always easy to read courtside.
   Browsers without backdrop blur, and anyone asking for more contrast or less
   transparency, get the original solid bars. */

/* Back button: shown on detail pages (a scorecard, all fixtures, team access). */
.back-button{display:inline-flex;align-items:center;gap:2px;min-height:40px;padding:0 14px 0 8px;margin-right:2px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap}
.back-button .ui-icon{width:20px;height:20px;stroke-width:2.4}
.back-button:active{transform:scale(.96)}
.back-button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

@media (max-width:520px){
  /* Make room for the back button on narrow phones: drop the shuttle mark and
     shorten the title to "H&P" while a detail page is open. */
  body.has-back .mark>.ui-icon,body.has-back .mark b span{display:none}
  .back-button{min-height:38px;padding:0 12px 0 6px;font-size:12px}
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* Header: content scrolls underneath and shows through, softly blurred. */
  .chrome{
    background:var(--floor);
    background:color-mix(in srgb,var(--floor) 70%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  }
  .back-button{
    background:color-mix(in srgb,var(--card) 62%,transparent);
    border-color:color-mix(in srgb,var(--line) 80%,transparent);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),0 4px 14px -8px rgb(16 35 29 / .35);
  }

  @media (max-width:760px){
    /* Phone tab bar: a floating glass capsule above the home indicator. */
    .app-nav{
      left:max(12px,env(safe-area-inset-left,0px));
      right:max(12px,env(safe-area-inset-right,0px));
      bottom:max(10px,env(safe-area-inset-bottom,0px));
      padding:6px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:28px;
      background:var(--card);
      background:color-mix(in srgb,var(--card) 64%,transparent);
      -webkit-backdrop-filter:blur(24px) saturate(190%);
      backdrop-filter:blur(24px) saturate(190%);
      box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),0 12px 34px -14px rgb(16 35 29 / .45);
    }
    .app-nav .mini{border-radius:22px}
    .app-nav [aria-current="page"]{background:color-mix(in srgb,var(--home) 15%,transparent);color:var(--home)}
    .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  }

  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .back-button,
    :root:not([data-theme="light"]) .app-nav{box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 12px 34px -14px rgb(0 0 0 / .7)}
  }
  :root[data-theme="dark"] .back-button,
  :root[data-theme="dark"] .app-nav{box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 12px 34px -14px rgb(0 0 0 / .7)}

  /* Accessibility settings win over the effect. */
  @media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
    .chrome{background:var(--floor);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
    .back-button,.app-nav{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--line)}
  }
}