.floating-nav{ display:none; }

@media (max-width:640px){
  body{ padding-bottom:84px; }

  .floating-nav{
    display:flex; flex-wrap:nowrap; gap:8px; position:fixed;
    bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
    z-index:70; max-width:calc(100vw - 20px); padding:8px;
    background:rgba(15,22,33,.95); border:1px solid var(--line, #26333f); border-radius:30px;
    backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(0,0,0,.35);
  }

  .floating-nav a{
    display:flex; align-items:center; gap:6px; font-family:var(--font-display, sans-serif);
    font-weight:800; font-size:13.5px; text-transform:uppercase; white-space:nowrap;
    flex:0 0 auto; padding:10px 16px; border-radius:22px;
  }

  .floating-nav a.f-back{ color:var(--text, #edeff2); background:var(--panel-2, var(--panel2, #1b2635)); }
  .floating-nav a.f-home{ color:#181206; background:var(--amber, #f2a93b); }
  .floating-nav a:focus-visible{ outline:2px solid var(--teal, #4fb8ac); outline-offset:2px; }

  @media (max-width:360px){
    .floating-nav a{ font-size:12px; padding:9px 12px; }
  }
}