/* Phones (I1): the bottom tab bar, the safe areas, and the site's fixes for a 390 px screen. Linked only by layout() in src/pages.ts, so game pages never load it. Tokens only. */
.tabbar{display:none}

/* Clear of the notch in landscape: the ☰ button, the page and the footer keep to the safe area. */
.menu-spot{top:calc(.625rem + env(safe-area-inset-top));margin:calc(.625rem + env(safe-area-inset-top)) 0 0 calc(.75rem + env(safe-area-inset-left))}
.page,.foot,.dev-in{padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}

/* A touch phone, upright or turned (a phone on its side is under 500 px tall; a tablet never is). A desktop window of any width keeps the ☰ menu alone. */
@media (hover:none) and (pointer:coarse) and (max-width:700px),(hover:none) and (pointer:coarse) and (max-height:500px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;height:calc(3.5rem + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);--label:var(--cream);background:var(--navy-800);border-top:2px solid var(--gold-700);box-shadow:0 -.5rem 1.5rem var(--x-000000-a45)}
  .tab{position:relative;flex:1 1 0;min-width:2.75rem;min-height:2.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;color:var(--label);font:600 .75rem/1.1 var(--font-display);letter-spacing:.04em;text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
  .tab svg{display:block;width:1.5rem;height:1.5rem}
  .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab[aria-current="page"]{color:var(--gold-300)}
  .tab[aria-current="page"]::before{content:"";position:absolute;top:-2px;left:28%;right:28%;height:.1875rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--gold-300)}
  .tab:active{background:var(--navy-700)}
  .tab:focus-visible{outline:2px solid var(--gold-300);outline-offset:-.25rem;border-radius:var(--radius-sm)}
  /* Room under the last thing on the page, and the ☰ menu keeps only what the bar has not got. */
  body:has(>.tabbar){padding-bottom:calc(3.5rem + env(safe-area-inset-bottom))}
  body:has(>.tabbar) .foot{padding-bottom:var(--space-5)}
  body:has(>.tabbar) .side-links .in-tabbar{display:none}
}

/* Touch screens of any size: every tap target at least 44 px. */
@media (pointer:coarse){
  .foot a:not(.foot-icon){display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:var(--space-1)}
  input[type=checkbox],input[type=radio]{width:1.5rem;height:2.75rem;font-size:1rem}
  /* A link on a line of its own (Forgot password?, a ticket's event) is a full target; one inside a sentence gets a little height without moving the text. */
  form p>a:only-child,h2>a:only-child,h3>a:only-child{display:inline-flex;align-items:center;min-height:2.75rem}
  form a{padding-block:var(--space-1)}
}

/* The one-time install hint (js/install-hint.js): above the tab bar, inside the safe areas. */
.install-hint{position:fixed;z-index:29;left:max(var(--space-3),env(safe-area-inset-left));right:max(var(--space-3),env(safe-area-inset-right));bottom:calc(3.5rem + env(safe-area-inset-bottom) + var(--space-2));display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-3);border:1px solid var(--gold-700);border-radius:var(--radius-md);background:var(--navy-800);color:var(--cream);box-shadow:0 -.5rem 1.5rem var(--x-000000-a45)}
.install-hint p{flex:1;margin:0;font:400 .9375rem/1.35 var(--font-ui)}
.install-hint-x{flex:none;width:2.75rem;height:2.75rem;border:0;border-radius:var(--radius-sm);background:none;color:var(--gold-300);font:400 1.75rem/1 var(--font-ui);cursor:pointer}
.install-hint-x:focus-visible{outline:2px solid var(--gold-300);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){.tab{transition:none}}