:root{
    --bg1:#0f0c29; --bg2:#302b63; --bg3:#24243e;
    --accent:#00e5ff; --accent2:#ff2e93; --gold:#ffd23f; --danger:#ff4d4d;
    --glass: rgba(255,255,255,0.08); --glass-border: rgba(255,255,255,0.18);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;font-family:'Segoe UI',Tahoma,sans-serif;
    background:linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));color:#fff;
    overflow:hidden;-webkit-user-select:none;user-select:none;}
  #stars{position:fixed;inset:0;z-index:0;pointer-events:none;}
  .star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.6;animation:twinkle 3s infinite ease-in-out;}
  @keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}

  #app{position:relative;z-index:1;max-width:1140px;margin:0 auto;height:100vh;padding:12px 14px;
    display:grid;grid-template-columns:170px 1fr 200px;grid-template-rows:auto 1fr auto;
    grid-template-areas:"header header header" "leftnav main rightnav" "footer footer footer";
    gap:10px;}

  @media (max-width:900px){
    html,body{overflow-y:auto;}
    #app{display:flex;flex-direction:column;height:auto;min-height:100vh;
      grid-template-columns:none;grid-template-rows:none;grid-template-areas:none;}
    #leftNav,#mainCol,#rightNav,#siteFooter,header{grid-area:auto;}
    #rightNav{display:none;} /* telefonda reklama yashiriladi, faqat saytda(desktop) turadi */
    #mainCol{flex:1 1 auto;}
    #arena{min-height:280px;}
  }

  @media (max-width:480px){
    #app{padding:8px 8px;gap:6px;}
    header{padding:6px 10px;gap:4px;}
    .brand{font-size:.88rem;gap:6px;}
    .brand .slogan{font-size:.65rem;flex-basis:100%;}
    .ip-notice{font-size:.58rem;line-height:1.3;}
    #leftNav,#rightNav{padding:8px;font-size:.75rem;gap:6px;}
    #leftNav .nav-title,#rightNav .nav-title{font-size:.62rem;}
    .chip.wide{padding:5px 8px;font-size:.75rem;}
    #hearts{gap:1px;}
    .heart{font-size:.7rem;}
    #levelBadge{font-size:.68rem;padding:6px 8px;}
    #arena{min-height:280px;}
    #inputBar{flex-wrap:wrap;gap:6px;}
    #wordInput{flex:1 1 100%;min-width:0;font-size:1rem;padding:10px 12px;}
    #inputBar .btn{flex:1 1 auto;font-size:.78rem;padding:9px 8px;white-space:nowrap;}
    .tier-chip,.topic-chip{font-size:.66rem;padding:4px 8px;}
    .panel{padding:20px 16px;max-width:94%;}
    .form-row{flex-direction:column;gap:8px;}
    #rightNav .nav-text{font-size:.7rem;}
    .nav-btn{font-size:.7rem;padding:7px 8px;}
    .course-row{font-size:.72rem;}
    #siteFooter{padding:6px 10px;font-size:.6rem;}
    .footer-full{display:none;}
    .footer-short{display:inline;}
    .word{padding:5px 10px;font-size:.92rem;max-width:78vw;overflow:hidden;text-overflow:ellipsis;}
    #cannonWrap{width:80px;height:60px;}
    #cannonMan{transform:scale(.85);transform-origin:bottom center;}
    .levelup-badge{font-size:1.5rem;}
    .levelup-idiom{font-size:.95rem;}
    .levelup-meaning{font-size:.78rem;}
  }

  header{grid-area:header;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(8px);
    border-radius:16px;padding:8px 14px;box-shadow:0 4px 24px rgba(0,0,0,.25);}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;flex-wrap:wrap;}
  .brand img{height:30px;border-radius:6px;background:#fff;padding:2px;}
  .brand .slogan{
    font-weight:600;font-size:.78rem;opacity:.85;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    letter-spacing:.2px;
  }
  .brand .flame{filter:drop-shadow(0 0 6px var(--accent2));animation:pulse 1.4s infinite;}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

  /* ---- LEFT NAV (player stats) ---- */
  #leftNav{grid-area:leftnav;display:flex;flex-direction:column;gap:8px;
    background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(8px);
    border-radius:16px;padding:12px;font-size:.82rem;font-weight:600;overflow-y:auto;}
  #leftNav .nav-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin-top:6px;}
  #leftNav .nav-title:first-child{margin-top:0;}
  .chip.wide{background:rgba(255,255,255,.07);border:1px solid var(--glass-border);padding:7px 10px;border-radius:12px;
    display:flex;align-items:center;gap:6px;width:100%;}
  #hearts{display:flex;gap:2px;flex-wrap:wrap;}
  .heart{transition:transform .25s;filter:drop-shadow(0 0 4px rgba(255,60,90,.6));font-size:.85rem;}
  .heart.lost{animation:heartPop .4s forwards;}
  @keyframes heartPop{0%{transform:scale(1.4);opacity:1}100%{transform:scale(0);opacity:0}}
  #levelBadge{background:linear-gradient(135deg,var(--accent),#6a5cff);padding:8px 10px;border-radius:12px;font-weight:800;
    box-shadow:0 0 14px rgba(0,229,255,.5);text-align:center;font-size:.78rem;}

  /* ---- RIGHT NAV (Victus ad) ---- */
  #rightNav{grid-area:rightnav;display:flex;flex-direction:column;gap:8px;
    background:linear-gradient(160deg, rgba(0,229,255,.10), rgba(255,46,147,.10));
    border:1px solid var(--glass-border);border-radius:16px;padding:12px;font-size:.8rem;overflow-y:auto;}
  #rightNav .nav-title{font-size:.75rem;font-weight:800;}
  #rightNav .nav-text{opacity:.85;font-size:.76rem;line-height:1.4;margin:0;}
  .nav-btn{display:block;text-align:center;background:rgba(255,255,255,.1);border:1px solid var(--glass-border);
    border-radius:10px;padding:8px 10px;color:#fff;text-decoration:none;font-weight:700;font-size:.76rem;transition:.2s;}
  .nav-btn:hover{background:rgba(255,255,255,.22);}

  /* ---- MAIN COLUMN ---- */
  #mainCol{grid-area:main;display:flex;flex-direction:column;min-height:0;}

  #arena{position:relative;flex:1;border-radius:20px;min-height:420px;
    background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 60%);
    border:1px solid var(--glass-border);overflow:hidden;}
  .grid-lines{position:absolute;inset:0;background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);background-size:40px 40px;}
  .danger-line{position:absolute;left:0;right:0;bottom:86px;height:2px;
    background:repeating-linear-gradient(90deg,var(--danger) 0 10px, transparent 10px 20px);opacity:.6;}

  .word{position:absolute;padding:7px 14px;border-radius:12px;
    background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.25);font-weight:700;font-size:1.08rem;letter-spacing:.4px;
    white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.35);}
  .word.explode{animation:explode .45s forwards;pointer-events:none;}
  @keyframes explode{0%{transform:scale(1);opacity:1;filter:blur(0);}100%{transform:scale(2.2);opacity:0;filter:blur(4px);}}
  .word.hitflash{animation:hitflash .35s forwards;}
  @keyframes hitflash{0%{transform:scale(1);}30%{transform:scale(1.15) rotate(-3deg);border-color:var(--danger);}100%{transform:scale(1) rotate(0);}}
  .word.target{
    border-color:#ff8a00;
    background:linear-gradient(135deg, rgba(255,138,0,.35), rgba(255,138,0,.12));
    box-shadow:0 0 10px #ff8a00, 0 0 22px rgba(255,138,0,.8), 0 0 2px #fff inset;
    animation:neonPulse 1s infinite ease-in-out;
  }
  @keyframes neonPulse{
    0%,100%{box-shadow:0 0 10px #ff8a00, 0 0 22px rgba(255,138,0,.7);}
    50%{box-shadow:0 0 16px #ff8a00, 0 0 34px rgba(255,138,0,1);}
  }
  .word.missed{
    background:linear-gradient(135deg, rgba(255,77,77,.3), rgba(255,77,77,.1));
    border-color:var(--danger);
    font-style:italic;
    opacity:1;
    animation:missedFall 3s ease-in forwards;
  }
  @keyframes missedFall{
    0%{opacity:1;}
    82%{opacity:1; transform:translateY(0);}
    100%{opacity:0; transform:translateY(40px);}
  }

  #particles{position:absolute;inset:0;pointer-events:none;z-index:5;}
  .particle{position:absolute;width:6px;height:6px;border-radius:50%;animation:pop .6s ease-out forwards;}
  @keyframes pop{0%{transform:translate(0,0) scale(1);opacity:1;}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}}
  .float-score{position:absolute;font-weight:800;font-size:1rem;color:var(--gold);animation:floatUp .8s ease-out forwards;pointer-events:none;text-shadow:0 0 8px rgba(0,0,0,.6);}
  @keyframes floatUp{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-50px);opacity:0;}}
  .combo-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:1.3rem;font-weight:900;z-index:6;
    background:linear-gradient(90deg,var(--accent2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;animation:comboShow .8s ease-out forwards;}
  @keyframes comboShow{0%{opacity:0;transform:translate(-50%,-10px) scale(.7);}20%{opacity:1;transform:translate(-50%,0) scale(1.15);}80%{opacity:1;}100%{opacity:0;transform:translate(-50%,-6px) scale(1);}}

  #cannonWrap{position:absolute;bottom:6px;left:50%;width:110px;height:80px;transform:translateX(-50%);z-index:4;pointer-events:none;}
  #cannonMan{position:absolute;inset:0;transition:transform .12s;}
  #cannonMan.flinch{animation:manFlinch .35s;}
  @keyframes manFlinch{0%{transform:translateX(0) rotate(0);}25%{transform:translateX(-6px) rotate(-6deg);}50%{transform:translateX(5px) rotate(4deg);}100%{transform:translateX(0) rotate(0);}}
  #barrel{transform-origin:55px 46px;transition:transform .1s ease-out;}
  #barrel.recoil{animation:recoil .18s ease-out;}
  @keyframes recoil{0%{transform-origin:55px 46px;}30%{transform:translate(-6px,3px) rotate(var(--aim,0deg));}100%{transform:rotate(var(--aim,0deg));}}
  .projectile{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff,var(--accent));box-shadow:0 0 10px var(--accent),0 0 20px var(--accent);z-index:5;pointer-events:none;}
  .enemy-shot{position:absolute;width:8px;height:14px;border-radius:4px;background:linear-gradient(var(--danger),#fff);box-shadow:0 0 10px var(--danger);z-index:5;pointer-events:none;}

  #inputBar{display:flex;gap:8px;margin-top:10px;align-items:center;}
  #wordInput{flex:1;padding:12px 16px;border-radius:14px;border:2px solid var(--glass-border);
    background:rgba(255,255,255,.08);color:#fff;font-size:1.1rem;outline:none;transition:border-color .2s, box-shadow .2s;}
  #wordInput:focus{border-color:var(--accent);box-shadow:0 0 18px rgba(0,229,255,.4);}
  #wordInput.wrong{animation:shake .35s;border-color:var(--danger);}
  @keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-6px);}80%{transform:translateX(6px);}}
  .btn{padding:12px 16px;border-radius:14px;border:none;font-weight:700;font-size:.95rem;cursor:pointer;
    transition:transform .12s, box-shadow .2s;color:#fff;background:linear-gradient(135deg,var(--accent2),#6a5cff);box-shadow:0 4px 16px rgba(255,46,147,.35);}
  .btn:hover{transform:translateY(-2px);}
  .btn.secondary{background:rgba(255,255,255,.1);border:1px solid var(--glass-border);box-shadow:none;}

  .overlay{position:fixed;inset:0;z-index:10;background:rgba(10,8,30,.88);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease;overflow-y:auto;}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .panel{background:linear-gradient(160deg, rgba(48,43,99,.92), rgba(15,12,41,.92));border:1px solid var(--glass-border);
    border-radius:22px;padding:28px 26px;text-align:center;max-width:440px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.5);
    animation:panelIn .35s cubic-bezier(.2,1.4,.4,1);margin:20px 0;}
  @keyframes panelIn{0%{transform:scale(.8) translateY(20px);opacity:0;}100%{transform:scale(1) translateY(0);opacity:1;}}
  .panel img.logo{height:44px;margin-bottom:6px;background:#fff;padding:4px;border-radius:8px;}
  .panel h1{margin:0 0 6px;font-size:1.5rem;}
  .panel p{opacity:.85;margin:6px 0 16px;line-height:1.5;font-size:.92rem;}
  .panel input[type=text]{width:100%;padding:11px 14px;border-radius:12px;border:2px solid var(--glass-border);
    background:rgba(255,255,255,.08);color:#fff;font-size:1rem;margin-bottom:12px;outline:none;}
  .level-slider-wrap{margin-bottom:16px;text-align:left;}
  .level-slider-wrap label{font-size:.85rem;opacity:.85;display:flex;justify-content:space-between;margin-bottom:6px;}
  #levelSlider{width:100%;accent-color:var(--accent);}
  .tier-presets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 18px;}
  .tier-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--glass-border);background:rgba(255,255,255,.06);
    cursor:pointer;font-size:.78rem;font-weight:600;transition:all .2s;}
  .tier-chip.active{background:linear-gradient(135deg,var(--accent),#6a5cff);box-shadow:0 0 14px rgba(0,229,255,.5);border-color:transparent;}
  .big-score{font-size:2.4rem;font-weight:900;background:linear-gradient(90deg,var(--gold),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0;}
  .course-ad{background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:14px;padding:12px;margin-top:14px;text-align:left;}
  .course-ad .ctitle{font-weight:800;font-size:.85rem;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
  .course-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;padding:6px 0;border-top:1px solid rgba(255,255,255,.08);}
  .course-row:first-of-type{border-top:none;}
  .course-row a{color:var(--accent);text-decoration:none;font-weight:700;}
  .footer-links{margin-top:12px;font-size:.78rem;opacity:.8;}
  .footer-links a{color:#fff;}
  /* ---- IP notice, footer, name/age form, leaderboard ---- */
  .ip-notice{font-size:.68rem;opacity:.55;letter-spacing:.2px;}
  #siteFooter{grid-area:footer;margin-top:0;padding:10px 14px;text-align:center;font-size:.72rem;opacity:.6;line-height:1.5;}
  #siteFooter a{color:#fff;opacity:.9;}
  .footer-short{display:none;}

  .form-row{display:flex;gap:10px;margin-bottom:12px;}
  .form-row input{flex:1;margin-bottom:0 !important;}
  .field-error{color:var(--danger);font-size:.75rem;text-align:left;margin:-6px 0 10px;display:none;}
  .field-error.show{display:block;}

  #leaderboardToggle{background:rgba(255,255,255,.08);border:1px solid var(--glass-border);border-radius:12px;
    padding:8px 12px;font-size:.8rem;font-weight:700;cursor:pointer;color:#fff;width:100%;margin-top:10px;}
  #leaderboardPanel{margin-top:10px;max-height:260px;overflow-y:auto;text-align:left;
    background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:14px;padding:10px 6px;display:none;}
  #leaderboardPanel.show{display:block;}
  .lb-row{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:.8rem;border-radius:8px;}
  .lb-row.me{background:rgba(0,229,255,.15);}
  .lb-rank{width:26px;font-weight:800;opacity:.7;text-align:center;}
  .lb-rank.top1{color:var(--gold);}
  .lb-rank.top2{color:#c9c9d8;}
  .lb-rank.top3{color:#d99a5b;}
  .lb-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lb-level{opacity:.8;font-size:.75rem;}
  .lb-empty{opacity:.6;font-size:.8rem;padding:10px;text-align:center;}
  .lb-loading{opacity:.6;font-size:.8rem;padding:10px;text-align:center;}

  /* ---- LEVEL UP POPUP + CONFETTI ---- */
  .levelup-overlay{z-index:20;background:rgba(10,8,30,.55);backdrop-filter:blur(3px);pointer-events:none;}
  .levelup-panel{
    pointer-events:none;
    background:linear-gradient(160deg, rgba(0,229,255,.18), rgba(255,46,147,.18)), linear-gradient(160deg, rgba(48,43,99,.95), rgba(15,12,41,.95));
    border:1px solid rgba(255,255,255,.3);
    box-shadow:0 0 40px rgba(0,229,255,.35), 0 20px 60px rgba(0,0,0,.5);
    animation:levelupPop .5s cubic-bezier(.2,1.6,.4,1);
    max-width:380px;
  }
  @keyframes levelupPop{
    0%{transform:scale(.5) rotate(-6deg);opacity:0;}
    60%{transform:scale(1.08) rotate(2deg);opacity:1;}
    100%{transform:scale(1) rotate(0);opacity:1;}
  }
  .levelup-badge{
    font-size:2rem;font-weight:900;margin-bottom:14px;
    background:linear-gradient(90deg,var(--gold),var(--accent2),var(--accent));
    background-size:200% auto;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:shine 1.8s linear infinite;
  }
  @keyframes shine{0%{background-position:0% center;}100%{background-position:200% center;}}
  .levelup-idiom{font-size:1.15rem;font-weight:800;font-style:italic;margin-bottom:8px;color:#fff;}
  .levelup-meaning{font-size:.88rem;opacity:.85;margin-bottom:16px;}
  .levelup-brand{font-size:.72rem;opacity:.7;border-top:1px solid rgba(255,255,255,.15);padding-top:10px;}
  .levelup-brand b{color:var(--accent);}

  #confettiLayer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:19;}
  .confetti-piece{
    position:absolute;top:-20px;width:9px;height:14px;opacity:.95;
    animation:confettiFall linear forwards;
  }
  @keyframes confettiFall{
    0%{transform:translateY(0) rotate(0deg);opacity:1;}
    100%{transform:translateY(110vh) rotate(720deg);opacity:.9;}
  }

  /* ---- Topic filter chips ---- */
  #topicPresets{max-height:130px;overflow-y:auto;padding:2px;}
  .topic-chip{padding:5px 10px;border-radius:999px;border:1px solid var(--glass-border);background:rgba(255,255,255,.06);
    cursor:pointer;font-size:.72rem;font-weight:600;transition:all .2s;}
  .topic-chip.active{background:linear-gradient(135deg,var(--accent2),var(--gold));box-shadow:0 0 14px rgba(255,46,147,.5);border-color:transparent;}