/* A shared sea-glass rail; gold marks only the current destination. */
.op-content-hidden { display:none!important; }
#ui { --hub-height:calc(58px + env(safe-area-inset-top, 0px)); }
#ui.hub-open > .screen.menu,
#ui.hub-open > .screen.boards,
#ui.hub-open > .screen.chal { top:var(--hub-height); }
#ui.hub-open > .screen.boards.titlespage .bd-rail { display:none; }
#ui.hub-open > .screen.boards.titlespage .bd-body { grid-template-columns:minmax(0,1fr); }
.hub-nav {
  position:absolute; inset:0 0 auto; z-index:25; height:var(--hub-height);
  box-sizing:border-box; padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));
  pointer-events:auto; color:#e9fbff; background:linear-gradient(180deg,#123c53,#082838);
  border-bottom:1px solid #3d879c; box-shadow:0 3px 12px #00152066;
}
.hub-nav[hidden] { display:none; }
.hub-links { display:grid; grid-template-columns:112px repeat(4,minmax(0,170px)); justify-content:center; height:58px; gap:6px; }
.hub-link {
  position:relative; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:0 12px; border:0; border-radius:7px 7px 0 0; background:transparent;
  color:#b5deed; font:800 16px/1 var(--display); letter-spacing:.035em; cursor:pointer;
  transition:background .15s,color .15s; -webkit-tap-highlight-color:transparent;
}
.hub-link::after { content:''; position:absolute; bottom:0; left:18%; right:18%; height:3px; border-radius:3px 3px 0 0; background:transparent; }
.hub-icon { display:flex; flex-shrink:0; color:#75dce2; }
.hub-link:hover { background:#1b5266; color:#fff; }
.hub-link[aria-current="page"] { color:#ffe18c; background:linear-gradient(0deg,#b08c2626,transparent 80%); }
.hub-link[aria-current="page"] .hub-icon { color:#ffe18c; }
.hub-link[aria-current="page"]::after { background:#ffd05c; }
.hub-link:focus-visible { outline:2px solid #e5fbff; outline-offset:-5px; }
.hub-link:active .hub-icon { transform:translateY(1px); }
@media(max-width:620px) {
  .hub-nav { padding-inline:max(6px,env(safe-area-inset-left,0px)) max(6px,env(safe-area-inset-right,0px)); }
  .hub-links { grid-template-columns:42px 1.3fr .85fr 1.25fr .85fr; gap:1px; }
  .hub-link { flex-direction:column; gap:4px; padding:5px 2px; font-size:11px; letter-spacing:0; white-space:nowrap; }
  .hub-icon svg { width:20px; height:20px; }
  .hub-link[data-hub="home"] .hub-label { display:none; }
}
@media(prefers-reduced-motion:reduce) { .hub-link { transition:none; } }
html.op-a11y-still .hub-link { transition:none; }