/* Kuroshiro bottom menu (.lob-nav), shared by every page that has one.
   Needs /shared/tokens.css. The markup comes from /shared/nav.js.
   Changing this file? Bump its ?v= number on every page that links it. */

.lob-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  padding: 8px 0 20px;
  display: flex; justify-content: space-evenly; align-items: flex-end;
  border-top: 2px solid rgba(201,168,76,.5);
  background: var(--gold);
  transition: opacity .2s;
}
.lob-nav.nav-hidden { opacity: 0; pointer-events: none; }
.lob-nav-item {
  color: rgba(13,13,16,.55); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--sans);
  font-size: 7px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 800;
  cursor: pointer; transition: color .18s;
  flex: 1; min-width: 0; padding: 4px 2px 10px; background: none; border: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lob-nav-item:hover { color: rgba(13,13,16,.75); }
.lob-nav-item.active { color: var(--ink-10); }
.lob-nav-item.active::after {
  content: ''; display: block;
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2px; background: var(--ink-10); border-radius: 1px;
}
.lob-nav-ja {
  font-family: 'Shippori Mincho', serif; font-weight: 600;
  font-size: 14px; letter-spacing: .06em; color: inherit; opacity: .72;
}
.lob-nav-item.active .lob-nav-ja { opacity: 1; }
.lob-nav-item { position: relative; }

/* Friends notification dot (the lobby shows it; other pages keep it hidden) */
.fr-notif-dot {
  position: absolute; top: 3px; right: calc(50% - 16px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold);
  pointer-events: none;
}
.fr-notif-dot.hidden { display: none; }