:root{
  --body:#24232e;--body-hi:#302f3c;--body-lo:#18171f;--ink:#8e8aa3;--ink-dim:#5d5a70;
  --yel:#f2c230;--yel-hi:#ffe27a;--yel-lo:#b98a12;--red:#e8432f;--red-hi:#ff8a6e;--red-lo:#9e2414;
}
html,body{margin:0;height:100%;background:#16151d;overflow:hidden;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
#app{position:fixed;left:0;right:0;top:0;height:var(--tg-viewport-stable-height,100dvh);display:flex;flex-direction:column}
#screen{position:relative;overflow:hidden;background:#050608}
#cv{display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}

/* ---------- компьютер: только экран, управление с клавиатуры ---------- */
body:not(.hh) #screen{flex:1;display:flex;align-items:center;justify-content:center}
body:not(.hh) #cv{width:min(100vw,960px,calc(100dvh*16/9));height:auto;box-shadow:0 0 70px rgba(20,40,120,.25)}
body:not(.hh) #pad{display:none}

/* ---------- телефон: экран сверху, пульт снизу ---------- */
body.hh #screen{flex:0 0 50%;border-bottom:3px solid #0c0b11}
body.hh #cv{width:100%;height:100%}
#pad{flex:1;position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:0 4.5vw calc(env(safe-area-inset-bottom) + 3vh);
  background:linear-gradient(180deg,var(--body-hi) 0%,var(--body) 22%,var(--body) 80%,var(--body-lo) 100%)}
#pad::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 5px)}

/* надпись и решётка динамика — как на «Брике» */
.brand{position:absolute;top:2.6vh;left:0;right:0;text-align:center;pointer-events:none;
  font-size:10px;font-weight:700;letter-spacing:.32em;color:var(--ink-dim)}
.brand b{color:var(--ink);font-weight:800}
.grille{position:absolute;left:6vw;bottom:calc(env(safe-area-inset-bottom) + 1.6vh);display:grid;grid-template-columns:repeat(6,5px);gap:5px;pointer-events:none;opacity:.55}
.grille i{width:5px;height:5px;border-radius:50%;background:var(--body-lo);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}

/* круглая кнопка */
.btn{position:relative;border:0;border-radius:50%;padding:0;margin:0;outline:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,var(--hi) 0%,var(--c) 45%,var(--lo) 100%);
  box-shadow:0 5px 0 var(--lo),0 7px 10px rgba(0,0,0,.45),inset 0 -2px 3px rgba(0,0,0,.25);
  transition:transform .04s,box-shadow .04s}
.btn.on{transform:translateY(4px);box-shadow:0 1px 0 var(--lo),0 2px 4px rgba(0,0,0,.45),inset 0 2px 4px rgba(0,0,0,.3);filter:brightness(1.12)}
.btn.yel{--c:var(--yel);--hi:var(--yel-hi);--lo:var(--yel-lo)}
.btn.red{--c:var(--red);--hi:var(--red-hi);--lo:var(--red-lo)}
.lab{position:absolute;left:50%;top:calc(100% + 11px);transform:translateX(-50%);white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink);pointer-events:none}

/* справа: граната и огонь рядом, огонь у края под большим пальцем */
.act{display:flex;align-items:center;gap:3.5vw;flex:none}
.act .btn{width:min(22vw,20vh,100px);height:min(22vw,20vh,100px)}
.act .btn.gren{width:min(17vw,16vh,80px);height:min(17vw,16vh,80px);margin-top:-8vh}

/* слева: крестовина из четырёх круглых кнопок */
.dpad{position:relative;width:min(40vw,36vh,180px);height:min(40vw,36vh,180px);flex:none}
.dpad .btn{position:absolute;width:36%;height:36%}
.dpad .up{left:32%;top:0}.dpad .down{left:32%;bottom:0}.dpad .left{left:0;top:32%}.dpad .right{right:0;top:32%}
.dpad .btn svg{position:absolute;inset:0;margin:auto;width:42%;height:42%;fill:var(--yel-lo);opacity:.85;pointer-events:none}