*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{width:100%;height:100%;overflow:hidden;background:#0b1020;
    font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    user-select:none;touch-action:none;}
  canvas{display:block;}

  #vignette{position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.42) 100%);}
  #flash{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .18s ease-out;
    background:radial-gradient(circle at 50% 60%,rgba(255,60,40,.55),rgba(255,0,0,.15) 70%,transparent 100%);}
  #flash.on{opacity:1;transition:opacity .03s;}

  .hud{position:fixed;inset:0;pointer-events:none;padding:16px;display:flex;
    flex-direction:column;justify-content:space-between;}
  .row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
  .right{display:flex;align-items:center;gap:10px;}

  .pill{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
    background:rgba(10,16,32,.55);border:1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:#fff;font-weight:800;font-size:18px;letter-spacing:.4px;
    box-shadow:0 8px 24px rgba(0,0,0,.28);white-space:nowrap;}
  .pill .ico{font-size:17px;line-height:1;}
  .coins{color:#ffd54a;}
  .coins.pulse{animation:pulse .34s ease;}
  @keyframes pulse{0%{transform:scale(1)}42%{transform:scale(1.16)}100%{transform:scale(1)}}
  .dist .lbl{font-size:10px;opacity:.6;letter-spacing:1.6px;font-weight:700;}
  .spd{color:#ffffff;min-width:86px;justify-content:center;transition:color .18s;}
  .spd .lbl{font-size:9.5px;opacity:.55;letter-spacing:1.2px;font-weight:800;}
  .fps{color:#bfe9c8;min-width:76px;justify-content:center;font-variant-numeric:tabular-nums;
    transition:color .18s,border-color .18s;}
  .fps .lbl{font-size:9px;opacity:.55;letter-spacing:1px;font-weight:800;}
  .fps.warn{color:#ffe28a;border-color:rgba(255,213,74,.35);}
  .fps.bad{color:#ff9a8a;border-color:rgba(255,90,60,.4);}

  .density{color:#ffc65a;min-width:74px;justify-content:center;
    font-variant-numeric:tabular-nums;border-color:rgba(255,198,90,.35);}
  .density .lbl{font-size:9.5px;opacity:.65;letter-spacing:1.4px;font-weight:800;}
  .density .val{font-weight:900;letter-spacing:.2px;}
  .density.up{animation:densityUp .5s cubic-bezier(.2,1.3,.4,1);}
  @keyframes densityUp{
    0%{transform:scale(1)}
    40%{transform:scale(1.14);border-color:rgba(255,198,90,.95);
      box-shadow:0 0 22px rgba(255,198,90,.55),0 8px 24px rgba(0,0,0,.28);}
    100%{transform:scale(1)}}

  @media (max-width:900px){
    .density{min-width:56px;}
    .density .lbl{display:none;}
  }
  @media (max-width:700px){
    .density{min-width:50px;}
    .dist .lbl{display:none;}
  }

  @media (max-width:620px){
    .hud{padding:10px;}
    .pill{padding:7px 11px;font-size:15px;gap:6px;}
    .right{gap:6px;}
    .dist .lbl{display:none;}
    .spd{min-width:66px;}
    .spd .lbl{display:none;}
    .fps{min-width:54px;font-size:13px;}
    .fps .lbl{font-size:8px;}
    #fpsPill{position:fixed;top:92px;right:10px;min-width:48px;font-size:12px;
      padding:6px 9px;gap:4px;}
    #qualityBtn{display:none;}   /* mobilde başlangıç ekranındaki kalite düğmesi kullanılır */
  }

  .pill.gp{display:none;padding:9px 13px;font-size:16px;line-height:1;
    border-color:rgba(120,220,160,.45);box-shadow:0 0 18px rgba(80,220,140,.25),0 8px 24px rgba(0,0,0,.28);}
  .pill.gp.on{display:flex;animation:gpIn .35s ease;}
  @keyframes gpIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

  .iconbtn{pointer-events:auto;width:44px;height:44px;border-radius:50%;cursor:pointer;
    background:rgba(10,16,32,.55);border:1px solid rgba(255,255,255,.14);color:#fff;
    font-size:18px;display:grid;place-items:center;backdrop-filter:blur(10px);transition:transform .12s;}
  .iconbtn:active{transform:scale(.92);}
  @media (max-width:620px){
    .iconbtn{width:38px;height:38px;font-size:16px;}
  }

  .hint{align-self:center;margin:0 auto;color:#fff;font-size:13px;font-weight:600;letter-spacing:.4px;
    padding:8px 18px;border-radius:999px;background:rgba(10,16,32,.45);
    border:1px solid rgba(255,255,255,.1);opacity:.85;transition:opacity .6s;}
  .hint.hide{opacity:0;}
  @media (max-width:620px){
    .hint{font-size:11px;padding:6px 12px;max-width:calc(100vw - 20px);
      white-space:normal;text-align:center;line-height:1.35;border-radius:14px;}
  }

  #overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;
    background:radial-gradient(circle at 50% 38%,rgba(10,18,38,.62),rgba(3,6,14,.88));
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    transition:opacity .3s ease;}
  #overlay.hidden{opacity:0;pointer-events:none;}

  .panel{width:min(94vw,430px);padding:34px 28px 28px;border-radius:28px;text-align:center;color:#fff;
    max-height:calc(100vh - 32px);overflow-y:auto;
    background:linear-gradient(180deg,rgba(28,38,64,.96),rgba(11,16,30,.97));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
    animation:pop .35s cubic-bezier(.2,1.3,.4,1);}
  @keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

  .dev-logo{display:inline-flex;justify-content:center;margin:0 auto 16px;text-decoration:none;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
    transition:transform .15s ease,filter .15s ease;outline:none;}
  .dev-logo img{display:block;width:min(50vw,180px);height:auto;}
  .dev-logo:hover{transform:translateY(-1px) scale(1.02);
    filter:drop-shadow(0 8px 20px rgba(255,205,60,.28));}
  .dev-logo:active{transform:scale(.98);}
  .dev-logo:focus-visible{outline:2px solid rgba(255,213,74,.8);outline-offset:6px;border-radius:10px;}

  h1{font-size:36px;letter-spacing:2px;line-height:1.05;
    background:linear-gradient(180deg,#ffffff 25%,#ffd54a 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 4px 16px rgba(255,190,60,.35));}
  @media (max-width:620px){
    h1{font-size:30px;letter-spacing:1.4px;}
  }
  .sub{margin-top:10px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.7);}

  .stats{display:flex;gap:10px;margin-top:22px;}
  .stat{flex:1;padding:14px 8px;border-radius:16px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);}
  .stat .v{font-size:22px;font-weight:800;color:#ffd54a;}
  .stat .k{font-size:10px;letter-spacing:1.4px;opacity:.6;margin-top:4px;font-weight:700;}

  .keys{margin-top:20px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
  .key{padding:7px 12px;border-radius:9px;font-size:12px;font-weight:700;color:rgba(255,255,255,.85);
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);}

  button.primary{width:100%;margin-top:22px;padding:16px;border:0;border-radius:17px;
    font-size:18px;font-weight:900;letter-spacing:1.4px;color:#241705;cursor:pointer;
    background:linear-gradient(180deg,#ffe27a,#f5a623);
    box-shadow:0 14px 28px rgba(245,166,35,.35),inset 0 1px 0 rgba(255,255,255,.6);
    transition:transform .12s ease,box-shadow .12s ease;}
  button.primary:hover{box-shadow:0 16px 34px rgba(245,166,35,.45),inset 0 1px 0 rgba(255,255,255,.6);}
  button.primary:active{transform:scale(.975);}

  .newbest{display:inline-block;margin-top:14px;padding:6px 14px;border-radius:999px;font-size:11px;
    font-weight:800;letter-spacing:1.6px;color:#241705;background:linear-gradient(180deg,#ffe27a,#f5a623);}

  /* ---------- BOOST BARI (Street Fighter 2 tarzı) ---------- */
  #boostWrap{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:5;
    width:min(52vw,420px);pointer-events:none;}
  #boostWrap .cap{display:flex;justify-content:space-between;align-items:baseline;
    margin:0 5px 4px;font-size:10px;font-weight:900;letter-spacing:2.6px;
    color:#d6ecff;text-shadow:0 2px 6px rgba(0,0,0,.7);}
  #boostWrap .cap .pct{font-size:10px;opacity:.8;
    font-variant-numeric:tabular-nums;letter-spacing:.5px;}
  #boostBar{position:relative;height:20px;padding:2px;border-radius:5px;
    background:linear-gradient(180deg,#0a1020,#04070d);
    border:2px solid #e7f0fa;
    box-shadow:0 0 0 2px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.5),
      inset 0 2px 7px rgba(0,0,0,.85);}
  #boostFill{width:100%;height:100%;border-radius:2px;
    background:linear-gradient(180deg,#b6f7ff 0%,#2ad4f0 34%,#0d94da 70%,#06538f 100%);
    box-shadow:0 0 12px rgba(60,210,255,.65),inset 0 1px 0 rgba(255,255,255,.85);
    transition:width .09s linear,background .25s,box-shadow .25s;}
  #boostBar .ticks{position:absolute;inset:2px;border-radius:2px;pointer-events:none;
    background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),
      rgba(0,0,0,.42) calc(10% - 1px) 10%);}
  #boostWrap.full #boostFill{background:linear-gradient(180deg,#fffbd0 0%,#ffd94a 34%,#f5a623 70%,#a85a05 100%);
    box-shadow:0 0 18px rgba(255,205,70,.85),inset 0 1px 0 rgba(255,255,255,.9);}
  #boostWrap.full .cap{color:#ffe28a;}
  #boostWrap.low #boostFill{background:linear-gradient(180deg,#ffb3a0 0%,#ff5a3c 34%,#d61f1f 70%,#7d0808 100%);
    box-shadow:0 0 14px rgba(255,70,50,.75),inset 0 1px 0 rgba(255,255,255,.6);}
  #boostWrap.low .cap{color:#ffb0a4;}
  #boostWrap.hover #boostFill{animation:boostPulse .45s ease-in-out infinite alternate;}
  @keyframes boostPulse{from{filter:brightness(1)}to{filter:brightness(1.45)}}
  #boostWrap.gain #boostFill{animation:boostGain .28s ease-out;}
  @keyframes boostGain{0%{filter:brightness(2.4) saturate(1.5)}100%{filter:brightness(1) saturate(1)}}
  #boostWrap.deny{animation:boostDeny .28s ease;}
  @keyframes boostDeny{
    0%,100%{transform:translateX(-50%)}
    25%{transform:translateX(calc(-50% - 6px))}
    75%{transform:translateX(calc(-50% + 6px))}}
  #boostWrap.deny #boostBar{border-color:#ff6a5a;
    box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 22px rgba(255,70,50,.8),
      inset 0 2px 7px rgba(0,0,0,.85);}

  /* Can barı kaldırıldı; canlar state.lives içinde gizli tutuluyor. */

  @media (max-width:620px){
    #boostWrap{top:52px;width:calc(100% - 20px);max-width:360px;}
    #boostBar{height:16px;}
    #boostWrap .cap{font-size:9px;letter-spacing:2px;}
  }

  #padToast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,14px);z-index:30;
    padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:700;color:#eafff2;
    background:rgba(14,32,24,.82);border:1px solid rgba(110,230,160,.35);
    box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 22px rgba(80,220,140,.18);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
  #padToast.show{opacity:1;transform:translate(-50%,0);}

  /* ---------- GENİŞ EKRAN MARKA ŞERİDİ ---------- */
  #brandbar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:none;
    align-items:flex-end;justify-content:space-between;gap:16px;
    padding:12px 18px;pointer-events:none;}
  #brandbar .brand-logo{pointer-events:auto;display:inline-flex;align-items:center;
    padding:5px 9px;border-radius:10px;background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.55);text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.32);
    transition:transform .15s ease,filter .15s ease;}
  #brandbar .brand-logo img{display:block;width:clamp(70px,7.2vw,112px);height:auto;}
  #brandbar .brand-logo:hover{transform:translateY(-2px) scale(1.02);
    filter:drop-shadow(0 6px 14px rgba(255,205,60,.35));}
  #brandbar .brand-logo:active{transform:scale(.97);}
  #brandbar .brand-name{font-size:clamp(12px,1.35vw,18px);font-weight:900;
    letter-spacing:2px;text-transform:uppercase;white-space:nowrap;
    padding-bottom:2px;pointer-events:none;
    background:linear-gradient(180deg,#ffffff 20%,#ffd54a 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));}

  /* Widescreen / yatay ekran: sol altta TECH333, sağ altta oyun adı. */
  @media (orientation:landscape){
    #brandbar{display:flex;}
    .hud{padding-bottom:64px;}   /* ipucu şeridi marka alanının üstünde kalsın */
  }
  @media (orientation:landscape) and (max-width:620px){
    #brandbar{padding:8px 10px;}
    #brandbar .brand-logo{padding:4px 7px;border-radius:8px;}
    #brandbar .brand-logo img{width:70px;}
    #brandbar .brand-name{font-size:12px;letter-spacing:1.2px;}
    .hud{padding-bottom:56px;}
  }

  /* ---------- GRAFİK KALİTESİ ---------- */
  button.ghost{width:100%;margin-top:10px;padding:11px 14px;border:1px solid rgba(255,255,255,.16);
    border-radius:13px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);
    font-size:12px;font-weight:800;letter-spacing:.9px;cursor:pointer;
    transition:background .15s,transform .12s;}
  button.ghost:hover{background:rgba(255,255,255,.11);}
  button.ghost:active{transform:scale(.98);}
  button.ghost b{color:#ffd54a;}

  #qualityPop{position:fixed;z-index:40;top:50%;left:50%;
    transform:translate(-50%,-50%) scale(.96);width:min(90vw,320px);padding:18px;
    max-height:calc(100vh - 40px);overflow-y:auto;
    border-radius:20px;color:#fff;
    background:linear-gradient(180deg,rgba(28,38,64,.98),rgba(11,16,30,.99));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
    opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
  #qualityPop.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
  #qualityPop .qp-title{font-size:11px;font-weight:900;letter-spacing:2px;
    opacity:.7;margin-bottom:12px;text-align:center;}
  #qualityPop .qp-btn{display:flex;justify-content:space-between;align-items:center;
    width:100%;padding:12px 14px;margin-top:8px;border-radius:12px;cursor:pointer;color:#fff;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    font-size:14px;font-weight:800;transition:background .15s,border-color .15s,color .15s;}
  #qualityPop .qp-btn:hover{background:rgba(255,255,255,.11);}
  #qualityPop .qp-btn.active{background:rgba(255,213,74,.16);
    border-color:rgba(255,213,74,.55);color:#ffe28a;}
  #qualityPop .qp-btn .tag{font-size:10px;font-weight:800;letter-spacing:1px;opacity:.65;}
  #qualityPop .qp-sub{margin:12px 0 2px;font-size:10px;font-weight:900;
    letter-spacing:1.8px;opacity:.55;text-align:center;}
  #qualityPop .qp-sep{height:1px;background:rgba(255,255,255,.1);margin:16px 0 4px;}
  #qualityPop .qp-lang{display:flex;gap:8px;}
  #qualityPop .qp-lang .qp-btn{flex:1;justify-content:center;margin-top:6px;gap:8px;}
  #qualityPop .qp-note{margin-top:14px;font-size:11px;line-height:1.5;
    text-align:center;opacity:.62;font-variant-numeric:tabular-nums;}