/* Phone navigation: views/layouts/_mobile-nav-beam.php; behaviour in assets/js/mobile-nav-beam.js */
.nw { display: none; }
@media (max-width: 449px) {
    .nw { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: block; height: 66px; }
    .nw-bar { position: relative; display: grid; grid-template-columns: 1fr 1fr 74px 1fr 1fr; align-items: center; height: 100%; padding: 0 6px; border-radius: 24px; background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(160deg, #16123A, #0B0920); box-shadow: 0 18px 34px -14px rgba(11, 9, 32, .75), inset 0 0 0 1px rgba(255, 255, 255, .08); }
    .nw-wires { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; width: 100%; height: 110px; overflow: visible; pointer-events: none; }
    .nw-wire { fill: none; stroke: rgba(255, 154, 107, .38); stroke-width: 1.3; stroke-dasharray: 3 5; transition: stroke .3s; }
    .nw-wire.is-on { stroke: rgba(255, 154, 107, .95); stroke-dasharray: none; filter: drop-shadow(0 0 4px #EE5D38); }
    .nw-bead { fill: #FFD9C7; }
    .nw-spark { fill: #FFF1E8; opacity: 0; filter: drop-shadow(0 0 6px #EE5D38) drop-shadow(0 0 12px #EE5D38); }
    .nw-spark.is-flying { opacity: 1; }
    .nw-tab { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 0; color: rgba(255, 255, 255, .6); font-size: 10px; line-height: 1.3; text-align: center; -webkit-tap-highlight-color: transparent; transition: color .25s; }
    .nw-icon { position: relative; display: grid; place-items: center; width: 40px; height: 32px; border-radius: 12px; transition: background .3s, color .3s, box-shadow .3s; }
    .nw-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nw-tab.is-on { color: #fff; }
    .nw-tab.is-on .nw-icon { color: #fff; background: #EE5D38; box-shadow: 0 0 18px rgba(238, 93, 56, .75); }
    .nw-tab.is-hit .nw-icon { animation: nwHit .55s ease-out; }
    @keyframes nwHit {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 154, 107, .9); }
        40% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(255, 154, 107, 0); background: #EE5D38; color: #fff; }
        100% { transform: scale(1); }
    }
    .nw-k { position: relative; z-index: 3; display: grid; place-items: center; justify-self: center; width: 62px; height: 62px; margin-top: -30px; border-radius: 50%; background: #fff; box-shadow: 0 12px 26px -10px rgba(11, 9, 32, .8), 0 0 0 5px #0F0C2A; -webkit-tap-highlight-color: transparent; }
    .nw-k img { width: 44px; height: auto; }
    .nw-k-pulse { position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(238, 93, 56, .6); animation: nwPulse 2.6s ease-out infinite; }
    @keyframes nwPulse { 0% { box-shadow: 0 0 0 0 rgba(238, 93, 56, .55); } 100% { box-shadow: 0 0 0 14px rgba(238, 93, 56, 0); } }
    .nw-k.is-fire .nw-k-pulse { animation: nwFire .45s ease-out; }
    @keyframes nwFire { 0% { box-shadow: 0 0 0 0 rgba(255, 154, 107, .95); } 100% { box-shadow: 0 0 0 18px rgba(255, 154, 107, 0); } }
}
@media (max-width: 449px) and (prefers-reduced-motion: reduce) {
    .nw-k-pulse { animation: none; }
}