/* src/ui/MobileNav.css */

.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  bottom: 60px; /* remonté de ~2cm */
  width: 100%;
  pointer-events: none;
  z-index: var(--z-mobile-nav);
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  isolation: isolate;
}

@media (max-width: 620px) {
  .mobile-nav {
    display: flex;
  }
}

/* Voile d'ambiance */
.mobile-nav::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 50% 70%,
      color-mix(in oklab, var(--nav-accent, var(--accent)) 12%, transparent),
      transparent 70%),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0.012) 0 1px,
      rgba(0,0,0,0.012) 1px 2px),
    linear-gradient(180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.62) 100%);
}

.mobile-nav--open::before {
  opacity: 1;
}

.mobile-nav > * {
  position: relative;
  z-index: 1;
}

/* Couleur dynamique */
body[data-universe="cosmos"] { --nav-accent: var(--cosmos); }
body[data-universe="dragon"] { --nav-accent: var(--dragon); }
body[data-universe="ruines"] { --nav-accent: var(--ruines); }
body[data-universe="vitesse"] { --nav-accent: var(--vitesse); }
body[data-universe="paysage"] { --nav-accent: var(--paysage); }
body[data-universe="horizon"] { --nav-accent: var(--horizon); }

/* Boutons latéraux (Oracle et Jump) */
.mobile-nav__side {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  isolation: isolate;
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(circle at 50% 60%,
      rgba(0,0,0,0.18),
      rgba(0,0,0,0.70) 72%,
      rgba(0,0,0,0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 0 1px color-mix(in oklab, var(--nav-accent) 20%, transparent),
    0 0 18px color-mix(in oklab, var(--nav-accent) 18%, transparent),
    0 14px 30px rgba(0,0,0,0.42);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

.mobile-nav__side::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 24%, rgba(255,255,255,0.40) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 64%, rgba(255,255,255,0.32) 0 1px, transparent 2px),
    radial-gradient(30px 22px at 55% 40%,
      color-mix(in oklab, var(--nav-accent) 16%, transparent),
      transparent 72%);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events: none;
}

.mobile-nav__side-icon {
  position: relative;
  z-index: 2;
  font-size: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  transform: translateY(-0.02em);
}

.mobile-nav__side-icon::before {
  content: "⟡";
  font-size: 26px;
  color: rgba(255,255,255,0.92);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.75),
    0 0 14px color-mix(in oklab, var(--nav-accent) 22%, transparent);
  line-height: 1;
}

.mobile-nav__side-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,0.92),
      color-mix(in oklab, var(--nav-accent) 70%, transparent) 60%,
      transparent 72%);
  box-shadow:
    0 0 16px color-mix(in oklab, var(--nav-accent) 45%, transparent),
    0 0 32px color-mix(in oklab, var(--nav-accent) 25%, transparent);
  opacity: .80;
  transform: rotate(45deg) scale(.88);
  pointer-events: none;
}

#mobileSideOracle .mobile-nav__side-icon::before { content: "✶"; }
#mobileSideJump .mobile-nav__side-icon::before {
  content: "ᛋ";
  transform: translateY(-0.04em);
}

#mobileSideOracle .mobile-nav__side-icon::after {
  animation: oracleBreath 6.2s ease-in-out infinite;
}
#mobileSideJump .mobile-nav__side-icon::after {
  animation: jumpNerve 3.4s ease-in-out infinite;
}

@keyframes oracleBreath {
  0%,100% { transform: rotate(45deg) scale(.84); opacity: .62; }
  50% { transform: rotate(45deg) scale(1.06); opacity: .92; }
}

@keyframes jumpNerve {
  0% { transform: rotate(35deg) scale(.86); opacity: .70; }
  50% { transform: rotate(60deg) scale(1.02); opacity: .92; }
  100% { transform: rotate(35deg) scale(.86); opacity: .70; }
}

.mobile-nav__side:hover {
  transform: translateY(-1px) scale(1.06);
  border-color: rgba(255,255,255,0.22);
}
.mobile-nav__side:hover .mobile-nav__side-icon::after {
  box-shadow:
    0 0 22px color-mix(in oklab, var(--nav-accent) 55%, transparent),
    0 0 44px color-mix(in oklab, var(--nav-accent) 28%, transparent);
  opacity: .95;
}
.mobile-nav__side:active {
  transform: translateY(0px) scale(1.02);
  filter: brightness(1.06) saturate(1.06);
}

/* Toggle central */
.mobile-nav__toggle {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: calc(var(--z-mobile-nav) + 1);
  filter: drop-shadow(0 0 15px var(--nav-accent));
  transition: filter .25s ease, transform .25s ease;
}

.mobile-nav__toggle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
  animation: spin 3s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.mobile-nav__toggle::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--nav-accent), rgba(0,0,0,0.6));
  box-shadow: 0 0 20px var(--nav-accent);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.mobile-nav__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.mobile-nav__icon::before {
  content: '⟡';
  font-size: 30px;
  color: rgba(255,255,255,0.92);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.80),
    0 0 18px color-mix(in oklab, var(--nav-accent) 24%, transparent);
  transform: translateY(-0.02em);
}

.mobile-nav--open .mobile-nav__icon::before {
  content: '✕';
  font-size: 26px;
  transform: translateY(0.02em);
}

.mobile-nav:not(.mobile-nav--open) .mobile-nav__toggle {
  animation: toggleBreath 3.2s ease-in-out infinite;
}
.mobile-nav.mobile-nav--open .mobile-nav__toggle {
  animation: toggleOpenPulse 1.8s ease-in-out infinite;
}
.mobile-nav.mobile-nav--open .mobile-nav__toggle::after {
  box-shadow:
    0 0 26px color-mix(in oklab, var(--nav-accent) 55%, transparent),
    0 0 50px color-mix(in oklab, var(--nav-accent) 28%, transparent);
}

@keyframes toggleBreath {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 14px color-mix(in oklab, var(--nav-accent) 22%, transparent)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 0 26px color-mix(in oklab, var(--nav-accent) 34%, transparent)); }
}
@keyframes toggleOpenPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(.965); }
}

/* Radial univers */
.mobile-nav__radial {
  position: absolute;
  bottom: 320px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 380px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.mobile-nav--open .mobile-nav__radial {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav__item {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  --dot-accent: var(--item-color);
  background:
    radial-gradient(circle at 50% 60%,
      rgba(0,0,0,0.28),
      rgba(0,0,0,0.72) 72%,
      rgba(0,0,0,0.92) 100%),
    radial-gradient(circle at 40% 30%,
      rgba(255,255,255,0.10),
      transparent 55%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 0 -10px 18px rgba(0,0,0,0.45),
    0 0 0 1px color-mix(in oklab, var(--dot-accent) 32%, transparent),
    0 0 24px color-mix(in oklab, var(--dot-accent) 26%, transparent),
    0 16px 34px rgba(0,0,0,0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.78),
    0 0 14px color-mix(in oklab, var(--dot-accent) 14%, transparent);
  transform: scale(0) rotate(-360deg);
  opacity: 0;
  transition: transform .6s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  margin-left: -45px;
  margin-top: -45px;
  isolation: isolate;
  will-change: transform, opacity;
  z-index: var(--z-base);
}

.mobile-nav__item::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 24%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 64%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(34px 26px at 55% 40%,
      color-mix(in oklab, var(--dot-accent) 18%, transparent),
      transparent 72%);
  mix-blend-mode: screen;
  opacity: .56;
  pointer-events: none;
  z-index: 0;
}

.mobile-nav__item::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background:
    radial-gradient(80px 60px at 52% 56%,
      color-mix(in oklab, var(--dot-accent) 12%, transparent),
      transparent 76%);
  filter: blur(.7px);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  z-index: -1;
}

.mobile-nav--open .mobile-nav__item {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.mobile-nav__item:nth-child(1) { left: 90%; top: 50%; --i: 0; }
.mobile-nav__item:nth-child(2) { left: 70%; top: 84.64%; --i: 1; }
.mobile-nav__item:nth-child(3) { left: 30%; top: 84.64%; --i: 2; }
.mobile-nav__item:nth-child(4) { left: 10%; top: 50%; --i: 3; }
.mobile-nav__item:nth-child(5) { left: 30%; top: 15.36%; --i: 4; }
.mobile-nav__item:nth-child(6) { left: 70%; top: 15.36%; --i: 5; }

.mobile-nav--open .mobile-nav__item {
  transition-delay: calc(0.06s * var(--i));
}

.mobile-nav__item[data-target="cosmos"]::before  { animation-duration: 12.4s; }
.mobile-nav__item[data-target="dragon"]::before  { animation-duration: 7.6s;  }
.mobile-nav__item[data-target="ruines"]::before  { animation-duration: 13.4s; }
.mobile-nav__item[data-target="vitesse"]::before { animation-duration: 6.2s;  }
.mobile-nav__item[data-target="paysage"]::before { animation-duration: 10.8s; }
.mobile-nav__item[data-target="horizon"]::before { animation-duration: 14.6s; }

.mobile-nav__item {
  transition:
    transform .22s ease,
    opacity .30s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
}

.mobile-nav__item:hover {
  transform: translateY(-1px) scale(1.12) rotate(2deg);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 -10px 18px rgba(0,0,0,0.50),
    0 0 0 1px color-mix(in oklab, var(--dot-accent) 38%, transparent),
    0 0 28px color-mix(in oklab, var(--dot-accent) 30%, transparent),
    0 18px 40px rgba(0,0,0,0.50);
}
.mobile-nav__item:hover::after { opacity: .55; }
.mobile-nav__item:active {
  transform: translateY(0) scale(1.05);
  filter: brightness(1.05) saturate(1.05);
}

/* États actifs */
.mobile-nav__item.is-active {
  border-color: rgba(255,255,255,0.30);
  z-index: calc(var(--z-base) + 1);
  animation:
    activePulse 1.9s ease-in-out infinite,
    universePingShadow 3.2s ease-out infinite !important;
}

@keyframes activePulse {
  0%,100% { transform: scale(1.06); filter: brightness(1.00); }
  50% { transform: scale(1.10); filter: brightness(1.06); }
}
@keyframes universePingShadow {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.10),
      inset 0 -10px 18px rgba(0,0,0,0.55),
      0 0 0 1px color-mix(in oklab, var(--dot-accent) 48%, transparent),
      0 0 30px color-mix(in oklab, var(--dot-accent) 28%, transparent),
      0 20px 44px rgba(0,0,0,0.54),
      0 0 0 0 color-mix(in oklab, var(--dot-accent) 14%, transparent);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.10),
      inset 0 -10px 18px rgba(0,0,0,0.55),
      0 0 0 1px color-mix(in oklab, var(--dot-accent) 48%, transparent),
      0 0 30px color-mix(in oklab, var(--dot-accent) 28%, transparent),
      0 20px 44px rgba(0,0,0,0.54),
      0 0 0 18px rgba(0,0,0,0);
  }
}

.mobile-nav__item.is-active::before {
  opacity: .70;
  animation:
    mobileTwinklePos 10.2s ease-in-out infinite !important;
}

.mobile-nav__item.is-active::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 52%,
      color-mix(in oklab, var(--dot-accent) 40%, transparent) 0%,
      color-mix(in oklab, var(--dot-accent) 22%, transparent) 38%,
      transparent 72%);
  opacity: .30;
  filter: blur(0.4px);
  animation: activeColorBloom 2.6s ease-in-out infinite;
}

.mobile-nav__item[data-target="cosmos"].is-active::after  { animation-duration: 3.0s; }
.mobile-nav__item[data-target="dragon"].is-active::after  { animation-duration: 2.2s; }
.mobile-nav__item[data-target="ruines"].is-active::after  { animation-duration: 3.4s; }
.mobile-nav__item[data-target="vitesse"].is-active::after { animation-duration: 2.0s; }
.mobile-nav__item[data-target="paysage"].is-active::after { animation-duration: 3.1s; }
.mobile-nav__item[data-target="horizon"].is-active::after { animation-duration: 3.6s; }

/* Animations de base pour les items non actifs */
@keyframes itemBreath {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.25px) scale(1.015); }
}
@keyframes innerBreath {
  0%,100% { opacity: .54; }
  50% { opacity: .66; }
}
@keyframes mobileTwinklePos {
  0%,100% { background-position: 0 0, 0 0, 0 0, 0 0; opacity: .50; }
  50% {
    background-position: 8px -5px, -6px 4px, 5px 8px, 0 0;
    opacity: .72;
  }
}
.mobile-nav__item {
  animation: itemBreath 6.8s ease-in-out infinite;
}
.mobile-nav__item:nth-child(1) { animation-delay: .0s; }
.mobile-nav__item:nth-child(2) { animation-delay: .4s; }
.mobile-nav__item:nth-child(3) { animation-delay: .8s; }
.mobile-nav__item:nth-child(4) { animation-delay: 1.2s; }
.mobile-nav__item:nth-child(5) { animation-delay: 1.6s; }
.mobile-nav__item:nth-child(6) { animation-delay: 2.0s; }
.mobile-nav__item::before {
  animation:
    mobileTwinklePos 10.2s ease-in-out infinite,
    innerBreath 6.8s ease-in-out infinite;
}

@keyframes activeColorBloom {
  0%,100% { transform: scale(.92); opacity: .22; }
  50% { transform: scale(1.06); opacity: .46; }
}

/* Actions (PHOTO / SOUND) */
.mobile-nav__actions {
  position: absolute;
  bottom: 220px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  pointer-events: none;
}

.mobile-nav--open .mobile-nav__actions {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav__action {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 14px 28px 14px 42px;
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  position: relative;
  transform: translateY(20px);
  opacity: 0;
  transition:
    transform .50s cubic-bezier(.34,1.56,.64,1),
    opacity .30s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    color .22s ease,
    filter .22s ease;
}

.mobile-nav__action::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,0.92),
      color-mix(in oklab, var(--nav-accent) 70%, transparent) 60%,
      transparent 72%);
  box-shadow:
    0 0 20px color-mix(in oklab, var(--nav-accent) 45%, transparent),
    0 0 40px color-mix(in oklab, var(--nav-accent) 25%, transparent);
}

.mobile-nav__action::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--nav-accent) 26%, rgba(255,255,255,0.12)),
    transparent);
}

.mobile-nav__action:nth-child(1) { --j: 0; }
.mobile-nav__action:nth-child(2) { --j: 1; }

.mobile-nav--open .mobile-nav__action {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(0.07s * var(--j));
}

.mobile-nav__action:hover {
  transform: translateY(-4px) scale(1.03);
  color: rgba(255,255,255,0.94);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.48),
    0 0 50px color-mix(in oklab, var(--nav-accent) 14%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}
.mobile-nav__action:active {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.05);
}

/* Focus clavier */
.mobile-nav__item:focus-visible,
.mobile-nav__side:focus-visible,
.mobile-nav__toggle:focus-visible,
.mobile-nav__action:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.16),
    0 0 0 4px color-mix(in oklab, var(--nav-accent) 30%, transparent);
}

/* Sécurité: quand le menu n'est pas ouvert, aucune zone invisible ne doit capter le clic */
.mobile-nav:not(.mobile-nav--open) .mobile-nav__radial,
.mobile-nav:not(.mobile-nav--open) .mobile-nav__radial * {
  pointer-events: none !important;
}

/* Media queries pour petits écrans */
@media (max-width: 620px) {
  .mobile-nav {
    display: flex;
    gap: 40px;
    bottom: 60px;
  }
}

@media (max-width: 480px) {
  .mobile-nav {
    gap: 30px;
    bottom: 50px;
  }
  .mobile-nav__radial {
    bottom: 280px;
    width: 320px;
    height: 320px;
  }
  .mobile-nav__actions {
    bottom: 180px;
    gap: 20px;
  }
  .mobile-nav__action {
    padding: 12px 20px 12px 36px;
    font-size: 14px;
  }
  .mobile-nav__action::before {
    left: 12px;
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 360px) {
  .mobile-nav {
    gap: 20px;
    bottom: 40px;
  }
  .mobile-nav__radial {
    bottom: 240px;
    width: 280px;
    height: 280px;
  }
  .mobile-nav__actions {
    bottom: 140px;
    gap: 15px;
  }
  .mobile-nav__action {
    padding: 10px 16px 10px 30px;
    font-size: 12px;
  }
  .mobile-nav__action::before {
    left: 10px;
    width: 12px;
    height: 12px;
  }
}

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav__item,
  .mobile-nav__item::before,
  .mobile-nav__item::after,
  .mobile-nav__action,
  .mobile-nav__toggle,
  .mobile-nav__toggle::before,
  .mobile-nav__toggle::after,
  #mobileSideOracle .mobile-nav__side-icon::after,
  #mobileSideJump .mobile-nav__side-icon::after {
    animation: none !important;
    transition: none !important;
  }
}