/* 🎮 Игровое меню сайта Кевина — одно на все страницы (главная и «Игры").
   Неоновая бегущая рамка, карточка игрока, кнопки как в меню настоящей игры.
   Стрелки ↑ ↓ выбирают пункт, Enter — открыть (это делает gmenu.js). */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

nav.menu{
  --c1:#ff4fd8; --c2:#4fd1ff; --c3:#ffd23f;
  position:sticky; top:16px; z-index:5; align-self:flex-start;
  width:256px; flex:0 0 256px; margin:16px; padding:18px 16px 16px;
  display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(160deg, rgba(28,12,66,.9), rgba(8,5,28,.9));
  border-radius:22px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 12px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  font-family:'Russo One', system-ui, "Segoe UI", sans-serif; text-shadow:none; color:#fff;
}
/* бегущая неоновая рамка */
nav.menu::before{
  content:""; position:absolute; inset:-2px; border-radius:24px; padding:2px; pointer-events:none;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c1)); background-size:300% 100%;
  animation:gm-border 6s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* тонкие полоски, как на экране старой приставки */
nav.menu::after{
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px);
}
@keyframes gm-border{ to{ background-position:300% 0; } }
@keyframes gm-bob{ 50%{ transform:translateY(-3px) rotate(-7deg); } }
@keyframes gm-blink{ 50%{ opacity:.2; } }
@keyframes gm-xp{ from{ width:55%; } to{ width:88%; } }

/* логотип */
.gm-logo{ display:flex; align-items:center; gap:11px; position:relative; z-index:1; }
.gm-pad{
  width:48px; height:48px; flex:0 0 48px; border-radius:15px; display:grid; place-items:center; font-size:27px;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 20px rgba(255,79,216,.55);
  animation:gm-bob 2.6s ease-in-out infinite;
}
.gm-name{ flex:1; line-height:1; }
.gm-name b{
  display:block; font-weight:400; font-size:1.4rem; letter-spacing:2px;
  background:linear-gradient(90deg,#fff,var(--c3)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gm-name small{ font-size:.7rem; letter-spacing:5px; color:var(--c2); }

/* карточка игрока */
.gm-player{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:15px; background:rgba(255,255,255,.06); position:relative; z-index:1; }
.gm-ava{
  width:38px; height:38px; flex:0 0 38px; border-radius:50%; display:grid; place-items:center; font-size:20px;
  background:radial-gradient(circle at 35% 30%, #ffe58a, #ff9f1c); box-shadow:0 0 0 2px rgba(255,255,255,.2);
}
.gm-pinfo{ flex:1; font-family:system-ui,"Segoe UI",sans-serif; font-size:.78rem; color:#d6cfff; }
.gm-pinfo b{ font-family:'Russo One',system-ui,sans-serif; font-weight:400; font-size:.98rem; color:#fff; }
.gm-xp{ height:6px; border-radius:6px; background:rgba(255,255,255,.12); margin-top:5px; overflow:hidden; }
.gm-xp i{ display:block; height:100%; width:70%; border-radius:6px; background:linear-gradient(90deg,var(--c3),var(--c1)); animation:gm-xp 3s ease-in-out infinite alternate; }

/* пункты меню */
nav.menu a.gm-item{
  position:relative; z-index:1; display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:16px; text-decoration:none; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  transition:transform .15s, background .15s, box-shadow .15s;
}
.gm-ico{
  width:46px; height:46px; flex:0 0 46px; border-radius:13px; display:grid; place-items:center; font-size:25px;
  background:rgba(0,0,0,.38); transition:transform .15s, background .15s;
}
.gm-txt{ flex:1; line-height:1.15; }
.gm-txt b{ display:block; font-weight:400; font-size:1.18rem; }
.gm-txt small{ font-family:system-ui,"Segoe UI",sans-serif; font-size:.8rem; color:#bbb4ea; }
.gm-arrow{ color:var(--c3); opacity:0; transform:translateX(-6px); transition:opacity .15s, transform .15s; }
nav.menu a.gm-item:hover, nav.menu a.gm-item.sel{
  transform:translateX(5px) scale(1.02);
  background:linear-gradient(90deg, rgba(255,79,216,.38), rgba(79,209,255,.26));
  box-shadow:0 0 20px rgba(255,79,216,.35);
}
nav.menu a.gm-item:hover .gm-ico, nav.menu a.gm-item.sel .gm-ico{
  background:linear-gradient(135deg,var(--c1),var(--c2)); transform:rotate(-8deg) scale(1.08);
}
nav.menu a.gm-item:hover .gm-arrow, nav.menu a.gm-item.sel .gm-arrow{ opacity:1; transform:none; animation:gm-blink .8s steps(2) infinite; }
/* страница, на которой ты сейчас, — с жёлтой полоской слева */
nav.menu a.gm-item.on::before{
  content:""; position:absolute; left:-17px; top:12px; bottom:12px; width:5px; border-radius:0 6px 6px 0;
  background:var(--c3); box-shadow:0 0 10px var(--c3);
}
.gm-foot{ position:relative; z-index:1; text-align:center; font-size:.7rem; letter-spacing:3px; color:var(--c3); animation:gm-blink 1.3s steps(2) infinite; }

/* кнопка звука ветра (на главной) и выбор языка — в том же стиле */
nav.menu .sound-btn{
  border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.08);
  color:#fff; font-size:1.1rem; line-height:1; padding:7px 9px; cursor:pointer;
}
nav.menu .sound-btn:hover{ background:rgba(255,255,255,.2); }
nav.menu .kk-langbox{ margin-top:0; position:relative; z-index:1; }
nav.menu .kk-lbtn{
  font-family:system-ui,"Segoe UI",sans-serif; text-shadow:none; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
}
nav.menu .kk-lbtn:hover{ background:rgba(255,255,255,.18); }
nav.menu .kk-llist button{ font-family:system-ui,"Segoe UI",sans-serif; }

/* карточку игрока можно нажать — сменить ник */
nav.menu .gm-player{ cursor:pointer; transition:background .15s; }
nav.menu .gm-player:hover{ background:rgba(255,255,255,.14); }
.gm-pinfo .gm-nick{ display:inline-block; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.gm-xp i{ transition:width .4s; }

/* окошко «Придумай ник» */
#kk-nickbox{
  position:fixed; inset:0; z-index:20000; display:grid; place-items:center; padding:16px;
  background:rgba(5,1,15,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.kk-nickcard{
  --c1:#ff4fd8; --c2:#4fd1ff; --c3:#ffd23f;
  position:relative; width:min(420px,100%); padding:26px 24px 22px; border-radius:24px; text-align:center; color:#fff;
  background:linear-gradient(160deg, rgba(28,12,66,.97), rgba(8,5,28,.97));
  box-shadow:0 0 0 2px rgba(255,79,216,.6), 0 0 40px rgba(255,79,216,.45), 0 0 80px rgba(79,209,255,.25);
  font-family:'Russo One', system-ui, sans-serif; animation:kk-pop .25s ease-out;
}
@keyframes kk-pop{ from{ transform:scale(.85); opacity:0; } }
.kk-nickpad{
  width:64px; height:64px; margin:0 auto 10px; border-radius:18px; display:grid; place-items:center; font-size:36px;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 22px rgba(255,79,216,.6); animation:gm-bob 2.6s ease-in-out infinite;
}
.kk-nickcard h2{ margin:4px 0 6px; font-weight:400; font-size:1.7rem; text-shadow:0 0 14px var(--c1); }
.kk-nickcard p{ margin:0 0 16px; font-family:system-ui,"Segoe UI",sans-serif; color:#cfc6ff; font-size:.95rem; }
#kk-nickin{
  width:100%; padding:14px 16px; border-radius:14px; border:2px solid rgba(79,209,255,.6); outline:none;
  background:rgba(0,0,0,.4); color:#fff; font-family:'Russo One',system-ui,sans-serif; font-size:1.25rem; text-align:center;
}
#kk-nickin:focus{ border-color:var(--c3); box-shadow:0 0 16px rgba(255,210,63,.45); }
.kk-nickrow{ display:flex; justify-content:space-between; margin:8px 4px 14px; font-family:system-ui,sans-serif; font-size:.85rem; color:#9f97d6; min-height:1.2em; }
#kk-nickerr{ color:#ff6b8a; }
#kk-nickok{
  width:100%; padding:14px; border:none; border-radius:999px; cursor:pointer; color:#fff;
  font-family:'Russo One',system-ui,sans-serif; font-size:1.25rem; letter-spacing:2px;
  background:linear-gradient(90deg,var(--c1),#8f5bff,var(--c2)); box-shadow:0 0 22px rgba(255,79,216,.5); transition:transform .15s, opacity .15s;
}
#kk-nickok:hover:not(:disabled){ transform:scale(1.04); }
#kk-nickok:disabled{ opacity:.4; cursor:default; }
.kk-nickno{
  margin-top:10px; background:none; border:none; color:#9f97d6; font-family:system-ui,sans-serif; font-size:.95rem; cursor:pointer;
}
.kk-nickno:hover{ color:#fff; }

/* на телефоне меню становится полоской сверху */
@media (max-width:600px){
  nav.menu{
    position:relative; top:0; align-self:stretch; width:auto; flex:none; margin:8px; padding:10px;
    flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px;
  }
  .gm-logo{ width:100%; justify-content:center; }
  .gm-name{ flex:none; }
  .gm-pad{ width:34px; height:34px; flex-basis:34px; font-size:19px; border-radius:11px; }
  .gm-name b{ font-size:1.05rem; }
  .gm-player, .gm-foot, .gm-txt small, .gm-arrow{ display:none; }
  nav.menu a.gm-item{ padding:6px 12px 6px 6px; gap:8px; }
  nav.menu a.gm-item:hover{ transform:none; }
  nav.menu a.gm-item.on::before{ display:none; }
  .gm-ico{ width:32px; height:32px; flex-basis:32px; font-size:18px; border-radius:10px; }
  .gm-txt b{ font-size:.95rem; }
  nav.menu .kk-langbox{ width:auto; margin-top:0; }
}