/* App shell: side nav, top bar, page container, mobile tab bar, footer. */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.section { padding-block: var(--section) 0; }
.section:last-child { padding-bottom: var(--section); }
.view { min-height: calc(100vh - var(--top-h)); }
/* Legacy views (Match Centre, Admin, Player, Graphics, Lab) sit in the same page container */
.view-host > :not(.view) {
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding: clamp(24px, 4vw, 48px) var(--page-pad) var(--section);
}

/* ---- Shell columns ---- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.view-host { flex: 1; position: relative; isolation: isolate; overflow-x: clip; }

@media (min-width: 1100px) {
  .shell { margin-left: var(--nav-w); }
}

/* ---- Side nav (desktop) ---- */
.sidenav {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--nav-w);
  display: none; flex-direction: column; justify-content: center;
  padding: var(--s-6) var(--s-5) var(--s-6) clamp(28px, 2.6vw, 44px);
}
@media (min-width: 1100px) { .sidenav { display: flex; } }

.sidenav__list { display: flex; flex-direction: column; gap: 6px; }
.sidenav__link {
  position: relative; display: flex; align-items: center;
  min-height: 44px; padding-block: 6px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .1em; color: var(--text-2);
  transition: color var(--t-fast);
}
.sidenav__link span { display: inline-block; transform-origin: left center; transition: transform 420ms var(--ease-back), color var(--t-fast); }
.sidenav__link:hover { color: var(--text); }
.sidenav__link:hover span { transform: translateX(4px); }
.sidenav__link.is-active { color: var(--accent); }
.sidenav__link.is-active span { transform: translateX(6px) scale(1.7); text-shadow: 0 0 24px rgba(var(--accent-rgb), .35); }
.sidenav__link.is-active { margin-block: 10px; }

.sidenav__foot {
  position: absolute; left: clamp(28px, 2.6vw, 44px); bottom: var(--s-6);
  font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--font-display);
}

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.topbar__inner {
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  position: relative;
}
.topbar__inner::after {
  content: ""; position: absolute; left: var(--page-pad); right: var(--page-pad); bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .55) 70%, rgba(var(--accent-rgb), .15));
  transform-origin: left; transition: background 500ms var(--ease-out);
}

.wordmark { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--text); }
.wordmark img { width: 26px; height: auto; }
.wordmark span {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .06em; line-height: 1;
  transform: translateY(1px);
}

.topnav { display: flex; align-items: center; gap: clamp(8px, 2vw, 28px); }

/* Brand switch: a tiny ball that says where it will take you */
.brand-switch {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 14px 6px 6px; margin-left: var(--s-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.brand-switch:hover { border-color: rgba(var(--accent-rgb), .6); color: var(--text); background: rgba(var(--accent-rgb), .08); }
.brand-switch__ball {
  width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff, #E9E7E2 55%, #BDB9B1);
  box-shadow: inset -3px -4px 8px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.4);
  transition: transform 600ms var(--ease-back);
}
.brand-switch__ball::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 100%; height: 3px;
  border-block: 1px dashed #1F5B3A; transform: rotate(-35deg);
}
.brand-switch:hover .brand-switch__ball { transform: rotate(180deg); }
.brand-switch kbd {
  font: inherit; font-size: 10px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--text-3);
}

@media (max-width: 760px) {
  .brand-switch kbd, .brand-switch__label { display: none; }
  .brand-switch { padding: 6px; margin-left: 0; }
  .wordmark span { font-size: 18px; }
  .wordmark img { width: 21px; }
}

/* ---- Mobile tab bar ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(8, 7, 10, .82);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid var(--line);
}
.tabbar__link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; color: var(--text-3);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; line-height: 1.2; padding-inline: 2px;
}
.tabbar__link::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35;
  transition: transform var(--t), opacity var(--t);
}
.tabbar__link.is-active { color: var(--accent); }
.tabbar--scroll { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.tabbar--scroll::-webkit-scrollbar { display: none; }
.tabbar__link.is-active::before { opacity: 1; transform: scale(1.4); box-shadow: 0 0 12px var(--accent); }
@media (min-width: 1100px) { .tabbar { display: none; } }
@media (max-width: 1099px) { body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); } }

/* ---- Footer ---- */
.footer { padding-block: var(--s-8) var(--s-7); }
.footer__partners {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
  padding-block: var(--s-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.footer__partner { display: flex; flex-direction: column; gap: var(--s-3); min-height: 88px; justify-content: center; }
.footer__partner img { height: 40px; width: auto; object-fit: contain; object-position: left; }
.footer__partner--slot {
  border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  color: var(--text-2); transition: border-color var(--t-fast), color var(--t-fast);
}
.footer__partner--slot:hover { border-color: var(--accent); color: var(--text); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4);
  padding-top: var(--s-5); color: var(--text-3); font-size: var(--fs-sm);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__links a { color: var(--text-2); }
.footer__links a:hover { color: var(--accent); }
@media (max-width: 760px) { .footer__partners { grid-template-columns: 1fr; } }

/* ---- Route transition helpers ---- */
.view-host > .view { will-change: transform, opacity; }
.brand-wave {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: var(--wave-bg, var(--bg));
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }