/* H4F Mobile Footer Dock v1.4 — compact, native fallbacks for Dice + Network */
@media (max-width: 991px) {
  body.h4f-mobile-footer-dock-enabled {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The dock owns Dice on mobile; the header copy stays desktop-only. */
  .h4f-site-header .h4f-random-dice { display: none !important; }
  body.h4f-mobile-footer-dock-enabled .h4f-my-library-float,
  body.h4f-mobile-footer-dock-enabled [data-h4f-library-float] { display: none !important; }

  .h4f-mobile-footer-dock {
    position: fixed;
    z-index: 2147483000;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255,255,255,.085);
    background: linear-gradient(180deg, rgba(17,15,31,.96), rgba(7,8,18,.99));
    box-shadow: 0 -14px 31px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(19px) saturate(1.06);
    backdrop-filter: blur(19px) saturate(1.06);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  }
  .h4f-mobile-footer-dock.is-hidden { transform: translateY(calc(100% + 8px)); opacity: 0; pointer-events: none; }

  .h4f-mobile-footer-dock__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    width: min(100%, 600px);
    min-height: 55px;
    margin: 0 auto;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }

  .h4f-mobile-footer-dock__item {
    --dock-color: #b698ff;
    --dock-rgb: 182,152,255;
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: 0;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 3px 2px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: rgba(228,222,246,.72) !important;
    font: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1.05;
    text-decoration: none !important;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
    transition: transform .15s ease, color .15s ease;
  }
  .h4f-mobile-footer-dock__item::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .h4f-mobile-footer-dock__item:active { transform: translateY(1px) scale(.975); }
  .h4f-mobile-footer-dock__item:focus-visible { outline: 2px solid var(--dock-color); outline-offset: 2px; }
  .h4f-mobile-footer-dock__item:hover,
  .h4f-mobile-footer-dock__item.is-active,
  .h4f-mobile-footer-dock__item[aria-current='page'] { color: #fff !important; }
  .h4f-mobile-footer-dock__item:hover::before,
  .h4f-mobile-footer-dock__item.is-active::before,
  .h4f-mobile-footer-dock__item[aria-current='page']::before {
    border-color: rgba(var(--dock-rgb), .38);
    background: linear-gradient(145deg, rgba(var(--dock-rgb), .19), rgba(255,255,255,.03));
    box-shadow: 0 5px 13px rgba(var(--dock-rgb), .12), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .h4f-mobile-footer-dock__item--hub { --dock-color: #b292ff; --dock-rgb: 178,146,255; }
  .h4f-mobile-footer-dock__item--library { --dock-color: #ff79ad; --dock-rgb: 255,121,173; }
  .h4f-mobile-footer-dock__item--dice { --dock-color: #ffd07c; --dock-rgb: 255,208,124; }
  .h4f-mobile-footer-dock__item--network { --dock-color: #76ebe1; --dock-rgb: 118,235,225; }

  .h4f-mobile-footer-dock__icon { display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; color:var(--dock-color); line-height:0; transition:transform .15s ease,filter .15s ease; }
  .h4f-mobile-footer-dock__icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .h4f-mobile-footer-dock__icon--dice svg circle { fill:currentColor; stroke:none; }
  .h4f-mobile-footer-dock__item:active .h4f-mobile-footer-dock__icon { transform: translateY(-1px) scale(1.05); filter:drop-shadow(0 0 8px rgba(var(--dock-rgb),.5)); }
  .h4f-mobile-footer-dock__label { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .h4f-mobile-footer-dock__count { position:absolute; top:2px; right:calc(50% - 15px); display:inline-flex; min-width:14px; height:14px; align-items:center; justify-content:center; padding:0 3px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:#e94d88; box-shadow:0 0 0 2px rgba(13,12,28,.96),0 3px 9px rgba(236,72,133,.24); color:#fff; font-size:7.5px; font-weight:950; }
  .h4f-mobile-footer-dock__count[data-empty='true'] { display:none; }

  /* CSS :target makes Network work even with JavaScript disabled or delayed. */
  .h4f-mobile-network-sheet { position:fixed; z-index:2147483500; inset:0; display:none; opacity:0; pointer-events:none; }
  .h4f-mobile-network-sheet:target { display:block; opacity:1; pointer-events:auto; }
  .h4f-mobile-network-sheet__backdrop { position:absolute; inset:0; display:block; width:100%; height:100%; background:rgba(2,3,11,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .h4f-mobile-network-sheet__dialog { position:absolute; left:10px; right:10px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); padding:15px; border:1px solid rgba(118,235,225,.32); border-radius:20px; background:radial-gradient(circle at 91% 0%,rgba(118,235,225,.14),transparent 42%),radial-gradient(circle at 0% 100%,rgba(178,146,255,.15),transparent 46%),linear-gradient(145deg,rgba(21,17,42,.99),rgba(10,11,24,.99)); box-shadow:0 22px 58px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.08); transform:translateY(13px) scale(.985); transition:transform .22s ease; }
  .h4f-mobile-network-sheet:target .h4f-mobile-network-sheet__dialog { transform:translateY(0) scale(1); }
  .h4f-mobile-network-sheet__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .h4f-mobile-network-sheet__title-wrap { display:flex; align-items:center; gap:10px; min-width:0; }
  .h4f-mobile-network-sheet__mark { display:inline-flex; width:34px; height:34px; flex:0 0 auto; align-items:center; justify-content:center; border:1px solid rgba(118,235,225,.44); border-radius:11px; background:linear-gradient(145deg,rgba(118,235,225,.23),rgba(178,146,255,.16)); color:#7cebe4; }
  .h4f-mobile-network-sheet__mark svg,.h4f-mobile-network-sheet__close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .h4f-mobile-network-sheet__title-wrap>div>span { display:block; margin-bottom:2px; color:rgba(192,226,242,.68); font-size:8.5px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
  .h4f-mobile-network-sheet__title-wrap h2 { margin:0; color:#fff; font-size:20px; font-weight:900; letter-spacing:-.035em; line-height:1; }
  .h4f-mobile-network-sheet__close { display:inline-flex; width:31px; height:31px; flex:0 0 auto; align-items:center; justify-content:center; padding:0; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(255,255,255,.05); color:rgba(245,242,255,.92) !important; text-decoration:none !important; }
  .h4f-mobile-network-sheet__paths { display:grid; gap:8px; margin-top:14px; }
  .h4f-mobile-network-sheet__path { display:grid; grid-template-columns:33px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:59px; padding:9px; border:1px solid rgba(255,255,255,.10); border-radius:13px; background:rgba(255,255,255,.035); color:#fff !important; text-decoration:none !important; }
  .h4f-mobile-network-sheet__path--current { border-color:rgba(178,146,255,.34); background:linear-gradient(135deg,rgba(178,146,255,.17),rgba(255,255,255,.03)); }
  .h4f-mobile-network-sheet__path--hanime { border-color:rgba(118,235,225,.38); background:linear-gradient(135deg,rgba(118,235,225,.17),rgba(112,121,255,.10)); }
  .h4f-mobile-network-sheet__path-icon { display:inline-flex; width:33px; height:33px; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.07); color:#cfbfff; font-size:16px; font-weight:900; }
  .h4f-mobile-network-sheet__path--hanime .h4f-mobile-network-sheet__path-icon { color:#73eae3; }
  .h4f-mobile-network-sheet__path strong { display:block; color:#fff; font-size:12px; font-weight:900; line-height:1.15; }
  .h4f-mobile-network-sheet__path small { display:block; margin-top:3px; color:rgba(223,219,244,.63); font-size:10px; font-weight:600; line-height:1.25; }
  .h4f-mobile-network-sheet__path em { padding:5px 7px; border-radius:999px; background:rgba(255,255,255,.07); color:rgba(243,239,255,.84); font-size:8.5px; font-style:normal; font-weight:900; white-space:nowrap; }
  .h4f-mobile-network-sheet__path--hanime em { background:rgba(118,235,225,.14); color:#9df7f0; }
  .h4f-mobile-network-sheet__home { display:block; margin-top:11px; color:rgba(203,194,232,.72) !important; font-size:10px; font-weight:800; text-align:center; text-decoration:none !important; }

  body.h4f-mobile-footer-dock-keyboard-open .h4f-mobile-footer-dock { transform:translateY(calc(100% + 10px)); opacity:0; pointer-events:none; }
}
@media (min-width: 992px) { .h4f-mobile-footer-dock,.h4f-mobile-network-sheet { display:none !important; } }
@media (prefers-reduced-motion: reduce) { .h4f-mobile-footer-dock,.h4f-mobile-footer-dock__item,.h4f-mobile-network-sheet__dialog { transition:none !important; } }