.mobile-dock,
.mask-mobile-icon,
.mask-mobile-label {
  display: none;
}
@media (max-width: 760px) {
  :root {
    --dock-width: min(480px, calc(100vw - 24px));
    --dock-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    --dock-glass: #faf6efb8;
    --dock-edge: #ffffffb3;
    --dock-shadow: 0 8px 32px #30264224, inset 0 1px 0 #ffffff80;
    --dock-active: #7244a31a;
  }
  :root[data-theme="dark"],
  :root.neon {
    --dock-glass: #24202ec2;
    --dock-edge: #ffffff29;
    --dock-shadow: 0 8px 32px #0005, inset 0 1px 0 #ffffff12;
    --dock-active: #d6b4f526;
  }
  :root.neon {
    --dock-glass: #181329c2;
    --dock-active: #72f6e91f;
  }
  html {
    scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
  body {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .site-header #navigation,
  .site-header .menu-toggle:not([hidden]) {
    display: none !important;
  }
  .header-inner {
    flex-wrap: nowrap;
  }
  .mobile-dock,
  .mask-handle,
  .neon .mask-handle {
    position: fixed;
    bottom: var(--dock-bottom);
    z-index: 40;
    height: 68px;
    background: var(--dock-glass);
    border: 1px solid var(--dock-edge);
    box-shadow: var(--dock-shadow);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    color: var(--text);
  }
  .mobile-dock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: calc(var(--dock-width) - 78px);
    left: calc((100vw - var(--dock-width)) / 2);
    padding: 5px;
    border-radius: 25px;
  }
  .mobile-dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 48px;
    border-radius: 19px;
    color: var(--muted);
    font: 500 10px/1.2 var(--sans);
    transition: background 160ms ease, color 160ms ease;
  }
  .mobile-dock .ui-icon {
    width: 22px;
    height: 22px;
  }
  .mobile-dock a[aria-current="page"] {
    background: var(--dock-active);
    color: var(--accent-text);
    font-weight: 700;
  }
  .mobile-dock a:focus-visible,
  .mask-handle:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 3px;
  }
  .mask-handle,
  .neon .mask-handle {
    right: calc((100vw - var(--dock-width)) / 2);
    width: 68px;
    padding: 7px;
    border-radius: 24px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    transform: none;
  }
  .mask-handle > span:not(.mask-mobile-label) {
    display: none;
  }
  .mask-mobile-icon {
    display: block;
    width: 24px;
    height: 24px;
    color: var(--accent-text);
  }
  .mask-mobile-label {
    display: block;
    font: 600 10px/1.2 var(--sans);
    color: var(--accent-text);
  }
  .mask-handle:hover,
  .mask-handle:active,
  .neon .mask-handle:hover,
  .neon .mask-handle:active {
    transform: none;
    box-shadow: var(--dock-shadow);
    background: var(--header);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-dock,
    .mask-handle,
    .neon .mask-handle {
      background: var(--header);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-dock a { transition: none; }
}
@media print {
  .mobile-dock { display: none; }
}
/* Glass picks up the visual language of each world. */
@media (max-width: 760px) {
  :root {
    --dock-glass: #f6eedd80;
    --dock-edge: #ffffffb8;
    --dock-shadow: 0 12px 32px #30264226, 0 2px 5px #30264214, inset 0 1px 0 #fff, inset 0 -1px 0 #7244a329;
  }
  :root[data-theme="dark"] {
    --dock-glass: #29203382;
    --dock-edge: #eedaff45;
    --dock-shadow: 0 12px 36px #0006, 0 0 24px #b48bd612, inset 0 1px 0 #f5e4ff70, inset 0 -1px 0 #b48bd62e;
  }
  :root.neon {
    --dock-glass: #160f2780;
    --dock-edge: #b7fdf448;
    --dock-shadow: 0 12px 36px #0008, -5px 0 24px #ee69db18, 5px 0 24px #72f6e918, inset 0 1px 0 #affffb80, inset 0 -1px 0 #ee69db40;
  }
  .mobile-dock,
  .mask-handle,
  .neon .mask-handle {
    background: linear-gradient(145deg, #ffffff21, #ffffff03 42%, #b48bd610 75%, #ffffff15), var(--dock-glass);
    -webkit-backdrop-filter: blur(18px) saturate(175%);
    backdrop-filter: blur(18px) saturate(175%);
  }
  .mobile-dock::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid #ffffff12;
    border-radius: inherit;
    pointer-events: none;
  }
  .mobile-dock a {
    position: relative;
    border: 1px solid transparent;
    border-radius: 15px;
  }
  .mobile-dock a[aria-current="page"] {
    background: linear-gradient(145deg, #b48bd633, #b48bd610);
    border-color: #b48bd64a;
    box-shadow: inset 0 1px 0 #ffffff30, 0 2px 8px #30264212;
  }
  .scrapbook .mobile-dock a[aria-current="page"] {
    transform: rotate(-3deg);
  }
  .scrapbook .mobile-dock .ui-icon {
    stroke-width: 1.55;
  }
  .scrapbook .mobile-dock a:nth-child(2) .ui-icon { transform: rotate(4deg); }
  .scrapbook .mobile-dock a:nth-child(4) .ui-icon { transform: rotate(-4deg); }
  .neon .mobile-dock,
  .neon .mask-handle { border-radius: 18px; }
  .neon .mobile-dock a { border-radius: 11px; }
  .neon .mobile-dock .ui-icon,
  .neon .mask-mobile-icon {
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }
  .neon .mobile-dock a[aria-current="page"] {
    background: linear-gradient(145deg, #72f6e922, #72f6e906);
    border-color: #72f6e947;
    box-shadow: inset 0 1px 0 #72f6e959, 0 0 12px #72f6e90a;
  }
  .neon .mobile-dock a[aria-current="page"] .ui-icon,
  .neon .mask-mobile-icon {
    filter: drop-shadow(0 0 5px #72f6e94d);
  }
}
@media (max-width: 760px) {
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-dock, .mask-handle, .neon .mask-handle { background: var(--header); }
  }
}