:root{
  --accent:#4fc3ff; --accent2:#2bd44a; --panel:#0d2c44; --panel2:#13405f; --stroke:#2f86c6; --txt:#eaf6ff;
  --glass:rgba(7,32,52,.62); --glass-b:rgba(120,200,255,.28);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#02161f;
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Verdana,Arial,sans-serif;
  -webkit-user-select:none;user-select:none;color:var(--txt);
  -webkit-touch-callout:none;overscroll-behavior:none;touch-action:none;}
#game{display:block;position:absolute;inset:0;cursor:crosshair;touch-action:none;}

/* ===== overlays ===== */
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;overflow:hidden;
  background:radial-gradient(circle at 50% 25%,rgba(30,95,150,.7),rgba(6,40,70,.92) 55%,rgba(2,14,26,.97));
  backdrop-filter:blur(3px);}
/* живые пузырьки на фоне меню */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.bubbles span{position:absolute;bottom:-50px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),rgba(150,215,255,.1));
  border:1px solid rgba(200,235,255,.22);animation:bubbleRise linear infinite;}
@keyframes bubbleRise{0%{transform:translateY(0) scale(.6);opacity:0;}
  12%{opacity:.75;}88%{opacity:.45;}100%{transform:translateY(-112vh) scale(1.15);opacity:0;}}

.panel{position:relative;z-index:1;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--glass-b);
  border-radius:22px;padding:30px 38px;width:392px;max-width:93vw;text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 6px rgba(80,180,255,.06);
  max-height:94vh;overflow-y:auto;}
.logo{font-size:50px;font-weight:800;letter-spacing:1px;line-height:1;margin-bottom:4px;
  background:linear-gradient(180deg,#dff6ff,#3aa0e8 70%,#2b7fc6);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(80,180,255,.35));animation:logoFloat 3.4s ease-in-out infinite;}
.logo .logo-io{-webkit-text-fill-color:#37e85a;color:#37e85a;font-size:.74em;vertical-align:baseline;margin-left:.06em;}
@keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.tagline{font-size:13.5px;font-weight:500;color:#bfe2ff;opacity:.85;margin-bottom:20px;letter-spacing:.3px;}
.panel input{width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--stroke);font-family:inherit;
  background:rgba(4,28,46,.85);color:#fff;font-size:15px;margin-bottom:16px;outline:none;text-align:center;transition:.15s;}
.panel input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,195,255,.25);}
.btn{position:relative;overflow:hidden;width:100%;padding:14px;border:none;border-radius:13px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:17px;letter-spacing:.5px;
  background:linear-gradient(180deg,#37e85a,#1fae3e);color:#053018;transition:.15s;box-shadow:0 6px 18px rgba(43,212,74,.3);}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.55;pointer-events:none;filter:saturate(.4);}
.btn::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 3.6s ease-in-out infinite;}
@keyframes shine{0%{left:-70%;}35%,100%{left:150%;}}
#playBtn{animation:btnPulse 2.2s ease-in-out infinite;}
@keyframes btnPulse{0%,100%{box-shadow:0 6px 18px rgba(43,212,74,.3);}50%{box-shadow:0 8px 30px rgba(55,232,90,.6);}}
#deathStats{font-size:15px;margin-bottom:16px;line-height:1.7;}
.newRec{font-size:19px;font-weight:800;color:#ffe27a;margin-bottom:8px;letter-spacing:.5px;
  text-shadow:0 2px 12px rgba(255,210,60,.5);animation:recPulse 1.1s ease-in-out infinite;}
@keyframes recPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
.bestRow{margin-top:12px;font-size:14px;color:#ffe27a;font-weight:600;min-height:18px;}
.howto{margin-top:10px;font-size:12px;color:#bfe2ff;opacity:.75;line-height:1.5;}

/* ===== лидерборд в главном меню (топ-10 + место игрока) ===== */
#menuLB{margin-top:12px;background:rgba(3,22,38,.55);border:1px solid rgba(120,200,255,.22);
  border-radius:14px;padding:10px 14px;text-align:left;}
#menuLB h3{font-size:11px;letter-spacing:2px;color:var(--accent);text-align:center;margin-bottom:6px;opacity:.9;}
#menuLB ol{list-style:none;}
#menuLB li{display:flex;align-items:center;gap:8px;padding:2.5px 0;font-size:12.5px;opacity:.92;
  border-bottom:1px solid rgba(255,255,255,.05);}
#menuLB li:last-child{border-bottom:none;}
#menuLB li.me{color:#ffe27a;font-weight:700;}
#menuLB li.sep{justify-content:center;opacity:.5;font-weight:700;letter-spacing:3px;}
#menuLB li .rank{flex:0 0 22px;text-align:right;opacity:.55;font-weight:700;}
#menuLB li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#menuLB li .sc{flex:0 0 auto;font-weight:700;color:#ffe27a;min-width:42px;text-align:right;}
#menuLB li.me .sc{color:#fff;}

/* ===== мобильное управление: джойстик + БОЛЬШАЯ кнопка ускорения ===== */
#joy{position:absolute;z-index:12;width:120px;height:120px;border-radius:50%;pointer-events:none;
  background:rgba(20,70,110,.28);border:2px solid rgba(140,210,255,.38);}
#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(150,215,255,.9),rgba(40,110,170,.92));
  border:2px solid rgba(255,255,255,.55);box-shadow:0 4px 14px rgba(0,0,0,.45);}
#boostBtn{position:absolute;right:24px;bottom:104px;z-index:12;width:112px;height:112px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(60,160,235,.55),rgba(10,50,90,.75));
  border:3px solid rgba(140,210,255,.55);display:flex;align-items:center;justify-content:center;
  font-size:50px;box-shadow:0 10px 28px rgba(0,0,0,.45);touch-action:none;
  -webkit-user-select:none;user-select:none;}
#boostBtn.on{background:radial-gradient(circle at 50% 35%,rgba(110,210,255,.85),rgba(30,90,150,.9));
  transform:scale(.93);border-color:#fff;}
#boostBtn span{pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}

/* ===== заглушка «поверните устройство» в стиле Яндекс Игр ===== */
#rotate{position:absolute;inset:0;z-index:200;background:#1c1d22;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;}
.rotSvg{margin-bottom:18px;}
#rotTitle{font-size:26px;font-weight:700;color:#ffffff;text-align:center;padding:0 24px;
  font-family:'Segoe UI',system-ui,Arial,sans-serif;}
#rotSub{font-size:15px;font-weight:400;color:#b8b9bd;text-align:center;padding:0 32px;line-height:1.4;max-width:340px;}

/* ===== лента событий (килл-фид) ===== */
#killfeed{position:absolute;left:14px;top:16px;z-index:11;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.feedItem{font-size:13px;font-weight:600;color:#eaf6ff;background:rgba(8,40,66,.72);border:1px solid rgba(130,210,255,.3);
  padding:5px 12px;border-radius:14px;text-shadow:0 1px 3px rgba(0,0,0,.5);
  animation:feedIn .25s ease-out;transition:opacity .5s,transform .5s;}
.feedItem.kill{border-color:rgba(125,255,160,.45);}
.feedItem.kill b{color:#7dffa0;}
.feedItem.out{opacity:0;transform:translateX(-16px);}
@keyframes feedIn{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:none;}}

/* ===== centered bottom HUD ===== */
#hud{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:14px;
  padding:12px 16px;background:var(--glass);border:1px solid var(--glass-b);border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(8px);
  text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;}
.hudIcon{width:64px;height:64px;border-radius:16px;background:radial-gradient(circle at 50% 35%,rgba(80,170,230,.4),rgba(4,26,44,.7));
  border:1px solid var(--glass-b);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.hudMain{width:300px;}
.hudTop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
#hudName{font-size:17px;font-weight:800;color:#dff3ff;}
#hudLvl{font-size:12px;font-weight:700;color:#ffe27a;background:rgba(0,0,0,.25);padding:1px 8px;border-radius:10px;}
.barRow{display:flex;align-items:center;gap:8px;margin-top:5px;}
.barLab{width:24px;font-size:12px;font-weight:700;opacity:.85;text-align:center;}
.bar{flex:1;height:15px;background:rgba(0,0,0,.42);border-radius:9px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.12);}
.bar>i{display:block;height:100%;width:0%;border-radius:9px;transition:width .14s ease;}
.bar>b{position:absolute;inset:0;font-size:10.5px;line-height:15px;text-align:center;font-weight:700;letter-spacing:.3px;}
#hp i{background:linear-gradient(90deg,#34e06a,#16b34a);}
#xp i{background:linear-gradient(90deg,#ffe27a,#f3b50c);}
#boost i{background:linear-gradient(90deg,#7cd4ff,#2483e6);}
.hudGauges{display:flex;gap:10px;}
.gauge{display:flex;flex-direction:column;align-items:center;gap:2px;}
.gauge canvas{display:block;}
.gauge span{font-size:9.5px;opacity:.8;letter-spacing:.3px;}
.hudAbility{width:84px;text-align:center;border-left:1px solid rgba(255,255,255,.12);padding-left:12px;}
.abKey{font-size:10px;font-weight:800;color:#0a2c12;background:#7fe0a0;border-radius:7px;padding:2px 0;margin-bottom:4px;}
#abName{font-size:11px;line-height:1.25;opacity:.9;}

/* ===== leaderboard / minimap / hints ===== */
#leaderboard{position:absolute;right:16px;top:16px;z-index:10;width:220px;background:var(--glass);
  border:1px solid var(--glass-b);border-radius:14px;padding:12px 14px;backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  /* никогда не наезжает на миникарту снизу */
  max-height:calc(100vh - 175px);overflow:hidden;}
#leaderboard h3{font-size:12px;letter-spacing:2px;color:var(--accent);text-align:center;margin-bottom:8px;opacity:.9;}
#leaderboard ol{list-style:none;}
#leaderboard ol{counter-reset:none;}
#leaderboard li{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px;opacity:.92;
  border-bottom:1px solid rgba(255,255,255,.05);}
#leaderboard li:last-child{border-bottom:none;}
#leaderboard li.me{color:#ffe27a;font-weight:700;}
#leaderboard li .rank{flex:0 0 18px;text-align:right;opacity:.55;font-weight:700;}
#leaderboard li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#leaderboard li .sc{flex:0 0 auto;font-weight:700;color:#ffe27a;min-width:42px;text-align:right;}
#leaderboard li.me .sc{color:#fff;}

#minimap{position:absolute;right:16px;bottom:16px;z-index:10;border:1px solid var(--glass-b);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.45);}

#hint{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:11;font-size:15px;font-weight:700;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.7);opacity:0;transition:opacity .4s;background:rgba(20,80,120,.6);padding:7px 18px;
  border-radius:20px;border:1px solid rgba(150,220,255,.4);pointer-events:none;max-width:92vw;text-align:center;}

/* ===== evolution chooser (модалка по центру, ни на что не наезжает) ===== */
#evoModal{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:rgba(2,12,22,.5);backdrop-filter:blur(2px);pointer-events:auto;}
.evoTitle{font-weight:800;font-size:clamp(15px,3.6vw,18px);color:#ffe27a;text-shadow:0 2px 8px #000;letter-spacing:1px;}
#evolve{display:flex;gap:12px;flex-wrap:nowrap;justify-content:center;transform-origin:center center;}
.evoCard{width:clamp(96px,24vw,128px);background:linear-gradient(165deg,rgba(20,70,110,.96),rgba(8,40,64,.96));
  border:1px solid rgba(130,210,255,.5);border-radius:14px;padding:10px;cursor:pointer;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:.15s;flex:0 0 auto;}
.evoCard:hover{transform:translateY(-4px);border-color:#fff;box-shadow:0 14px 34px rgba(79,195,255,.4);}
.evoCard canvas{display:block;margin:0 auto 4px;}
.evoCard .nm{font-weight:700;font-size:13.5px;color:#dff3ff;}
.evoCard .ab{font-size:10px;opacity:.72;margin-top:2px;line-height:1.3;}

/* ===== загрузочный экран: чёрный фон + три мигающие точки ===== */
#loading{position:absolute;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;}
#loading .dots{display:flex;gap:15px;}
#loading .dots span{width:16px;height:16px;border-radius:50%;background:#4fc3ff;opacity:.4;
  box-shadow:0 0 14px rgba(79,195,255,.6);animation:dotPulse 1s infinite ease-in-out;}
#loading .dots span:nth-child(2){animation-delay:.18s;}
#loading .dots span:nth-child(3){animation-delay:.36s;}
@keyframes dotPulse{0%,80%,100%{transform:scale(.55);opacity:.35;}40%{transform:scale(1);opacity:1;}}

/* ===== меню смерти ===== */
@keyframes panelPop{0%{transform:scale(.78) translateY(26px);opacity:0;}
  55%{transform:scale(1.04) translateY(0);opacity:1;}100%{transform:scale(1);opacity:1;}}
.panel.death{width:392px;}
.panel.death.pop{animation:panelPop .42s cubic-bezier(.2,.85,.3,1.25);}
.deathTitle{font-size:36px;font-weight:800;color:#ff8a8a;margin-bottom:14px;letter-spacing:1px;
  text-shadow:0 3px 16px rgba(255,70,70,.35);}
.deathBtns{display:flex;flex-direction:column;gap:11px;margin-top:8px;}
.btn-ad{background:linear-gradient(180deg,#ffd451,#f0a200);color:#3a2600;box-shadow:0 6px 18px rgba(240,175,0,.32);}
.btn-respawn{background:linear-gradient(180deg,#37e85a,#1fae3e);color:#053018;}
.btn-menu{background:linear-gradient(180deg,#4a6e8a,#2f4d66);color:#eaf6ff;box-shadow:0 6px 16px rgba(0,0,0,.3);}

/* ===== адаптив: узкие экраны (мобильные) ===== */
@media (max-width: 860px), (max-aspect-ratio: 13/16) {
  #leaderboard{width:150px;padding:8px 10px;top:8px;right:8px;max-height:calc(100vh - 116px);}
  #leaderboard h3{font-size:10px;margin-bottom:5px;}
  #leaderboard li{font-size:11px;padding:2px 0;}
  #minimap{width:128px;height:84px;right:8px;bottom:8px;}
  #hud{left:8px;right:auto;bottom:8px;transform:none;gap:9px;padding:9px 11px;}
  .hudIcon{width:48px;height:48px;flex:0 0 auto;}
  .hudMain{width:min(44vw,230px);}
  #hudName{font-size:15px;}
  .deathTitle{font-size:30px;}
}
@media (max-width: 560px), (max-aspect-ratio: 10/16) {
  #leaderboard{width:130px;top:6px;right:6px;max-height:calc(100vh - 96px);}
  #leaderboard li{font-size:10px;}
  #leaderboard li .lv{font-size:9px;}
  #minimap{width:104px;height:68px;right:6px;bottom:6px;}
  #hud{left:6px;bottom:6px;gap:8px;padding:8px 9px;border-radius:16px;}
  .hudIcon{width:42px;height:42px;}
  .hudMain{width:min(46vw,200px);}
  .hudGauges{display:none;}
  #hudName{font-size:14px;}
  .hudTop{margin-bottom:4px;}
  .barLab{width:20px;font-size:11px;}
  .bar{height:13px;}
  #boostBtn{width:98px;height:98px;right:14px;bottom:90px;font-size:42px;}
  #killfeed{top:10px;left:10px;}
  .feedItem{font-size:11.5px;padding:4px 9px;}
  .panel{padding:22px 20px;}
  #menuLB li{font-size:11.5px;}
}

/* ===== низкие окна (широкие, но маленькой высоты): компактный интерфейс ===== */
@media (max-height: 620px) {
  #leaderboard{width:172px;padding:8px 10px;top:8px;right:8px;max-height:calc(100vh - 122px);}
  #leaderboard h3{font-size:10px;margin-bottom:5px;letter-spacing:1.5px;}
  #leaderboard li{font-size:11px;padding:2px 0;}
  #minimap{width:128px;height:84px;right:8px;bottom:8px;}
  #hud{bottom:8px;gap:9px;padding:8px 11px;border-radius:16px;}
  .hudIcon{width:44px;height:44px;}
  .hudMain{width:min(38vw,240px);}
  #hudName{font-size:14px;}
  .hudTop{margin-bottom:4px;}
  .bar{height:13px;}
  .barRow{margin-top:4px;}
  .gauge canvas{width:38px;height:38px;}
  #boostBtn{width:94px;height:94px;right:12px;bottom:100px;font-size:40px;}
  #joy{width:104px;height:104px;}
  #joyKnob{width:46px;height:46px;margin:-23px 0 0 -23px;}
  #hint{top:10px;font-size:13px;padding:5px 14px;}
  #killfeed{top:10px;left:10px;}
  .feedItem{font-size:11px;padding:3px 9px;}
  /* меню и экран смерти: всё компактнее, панель скроллится внутри себя */
  .panel{padding:14px 22px;}
  .logo{font-size:34px;margin-bottom:2px;}
  .tagline{font-size:11.5px;margin-bottom:10px;}
  .panel input{padding:9px 12px;margin-bottom:10px;font-size:14px;}
  .btn{padding:10px;font-size:15px;}
  .deathTitle{font-size:24px;margin-bottom:8px;}
  #deathStats{font-size:13px;margin-bottom:10px;line-height:1.5;}
  .newRec{font-size:15px;margin-bottom:5px;}
  .deathBtns{gap:7px;margin-top:4px;}
  .bestRow{margin-top:8px;font-size:12.5px;}
  .howto{margin-top:6px;font-size:11px;}
  #menuLB{margin-top:8px;padding:7px 10px;}
  #menuLB h3{font-size:10px;margin-bottom:4px;}
  #menuLB li{font-size:11px;padding:1.5px 0;}
  #rotTitle{font-size:21px;}
  #rotSub{font-size:13px;}
  .rotSvg{width:130px;height:100px;margin-bottom:8px;}
}
/* ===== совсем низкие окна: только топ-5 в игровом рейтинге, без лишнего ===== */
@media (max-height: 430px) {
  #leaderboard{max-height:calc(100vh - 105px);}
  #leaderboard li:nth-child(n+6){display:none;}
  #minimap{width:96px;height:64px;}
  .hudGauges{display:none;}
  .hudIcon{display:none;}
  .logo{font-size:28px;}
  .howto{display:none;}
  #boostBtn{width:84px;height:84px;bottom:84px;font-size:36px;}
}

.hidden{display:none!important;}