/* ======================= пульт для касаний =======================
   Показывается только на сенсорных экранах. Стик рисуется на канвасе там,
   где игрок коснулся поля: направление пальца и есть заданный курс, потому
   что камера не вращается, а управление задано относительно карты. */
#pad{display:none}
body.touch #pad{
  display:grid;grid-template-columns:repeat(3,auto);gap:7px;
  position:absolute;right:12px;bottom:12px;z-index:6;pointer-events:auto;
}
.pbtn{
  width:70px;height:52px;padding:0;
  background:var(--panel);border:1px solid var(--edge-hot);border-radius:4px;
  color:var(--ink);font-family:var(--f-mono);font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(7px);cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;
  transition:background .1s ease,border-color .1s ease;
}
.pbtn:hover{background:var(--panel);box-shadow:none}
.pbtn.held{background:rgba(127,212,232,.3);border-color:var(--ice);color:#07131a}
/* ускорение держат дольше всех и ищут глазами первым — оно и выделено */
#btnThrust{border-color:rgba(127,212,232,.45);color:var(--ice)}
#btnThrust.held{background:var(--ice);border-color:var(--ice);color:#07131a}
.pbtn.off{opacity:.35}
.pbtn:active{transform:none}
body.touch #radarWrap{bottom:76px;right:12px}

/* на сенсорном экране нижний левый угол отдан большому пальцу */
body.touch #task{display:none}

/* компактный HUD для узких экранов: панели не должны съедать поле */
@media (max-width:720px){
  #ladder{display:none}
  #task{max-width:min(300px,52vw)}
  #radarWrap{padding:6px}
  #radar{width:82px;height:82px}
  .corner{padding:7px 9px;border-radius:3px}
  #status{min-width:0;max-width:46vw}
  #formName{font-size:15px;gap:6px}
  #formHint{display:none}
  #tele{gap:9px;padding-top:6px;margin-top:6px}
  #tele b{font-size:11px}
  #tele i{font-size:7.5px;letter-spacing:.1em}
  #teleRad{display:none}
  #score{min-width:0}
  #scoreVal{font-size:19px}
  #scoreMeta,#tierMeta,#galaxyTag{font-size:9px}
  .eyebrow{font-size:8px;margin-bottom:3px}
  .cell{width:13px;height:7px}
  #bannerTitle{font-size:clamp(20px,6.4vw,30px)}
  #bannerSub{font-size:10px;letter-spacing:.1em}
  #evoRow{font-size:9px}
  .sheet{padding:18px 16px;border-radius:4px}
  h1{font-size:clamp(26px,8.6vw,40px)}
  .lede{font-size:13px}
  dl{grid-template-columns:1fr;gap:2px 0}
  dt{margin-top:7px}
  button{padding:13px 20px;font-size:14px;min-height:46px}
  .start{gap:11px}
  #modeRow,#skinRow,#galaxyRow{gap:7px}
  .mode,.gal{padding:11px 12px}
  .skin{min-width:74px;padding:8px}
  .skin canvas{width:40px;height:40px}
}
/* ===================== горизонтальная ориентация =====================
   Геометрия тут другая, а не просто «меньше»: высоты мало, ширины много,
   большие пальцы лежат в нижних углах, а вырез уходит на бок. Поэтому панели
   раскладываются в строку вдоль верхней кромки, нижние углы остаются пустыми
   под пальцы, а радар уезжает в нижнюю середину — единственное место внизу,
   которое ничем не занято при хвате двумя руками. */
@media (orientation:landscape) and (max-height:520px){
  /* верхняя полоса: панели становятся строками, чтобы не есть высоту */
  /* компактные правила выше привязаны к узкой ШИРИНЕ, а ландшафтный телефон
     шириной 844 под них не попадает — поэтому здесь всё нужное повторено */
  #status{
    top:8px;left:8px;max-width:36vw;
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:6px 10px;
  }
  #status > .eyebrow,#formHint,#teleRad{display:none}
  .eyebrow{font-size:8px;margin-bottom:2px}
  .cell{width:13px;height:7px}
  #tele i{font-size:7.5px;letter-spacing:.1em}
  #formName{font-size:14px;gap:5px}
  #formDot{width:9px;height:9px}
  #integrity{margin-top:0;gap:4px}
  #integrity .eyebrow{display:none}
  #tele{margin-top:0;padding-top:0;border-top:0;gap:11px}
  #tele b{font-size:11px}


  #score{top:8px;right:8px;padding:6px 10px;text-align:right}
  #score > .eyebrow{display:none}
  #scoreVal{font-size:17px}
  #scoreMeta{margin-top:2px;font-size:8.5px}
  #tierMeta{font-size:8.5px;margin-top:1px}
  #tierBar{margin-top:3px}
  #galaxyTag{display:none !important}

  /* подсказка и список дозревающих биосфер — в верхнюю середину */
    #evoRow{display:none}
  #task{display:none}
  #ladder{display:none}

  /* радар в нижнюю середину: внизу по бокам лежат пальцы */
  #radarWrap, body.touch #radarWrap{
    bottom:8px;right:auto;left:50%;transform:translateX(-50%);padding:5px;
  }
  #radar{width:64px;height:64px}

  /* пульт в один ряд: четыре кнопки 2×2 съели бы треть высоты экрана */
  body.touch #pad{
    right:8px;bottom:8px;grid-template-columns:repeat(4,auto);gap:6px;
  }
  .pbtn{width:58px;height:44px;font-size:9px;letter-spacing:.06em}

  /* баннер поднят выше середины, чтобы не оказаться под радаром */
  #banner{top:40%}
  #bannerTitle{font-size:clamp(18px,4.4vh,26px)}
  #bannerSub{font-size:9px;margin-top:5px}

  /* меню: ширины хватает на две колонки, экономим прокрутку */
  .screen{align-items:start}
  .sheet{
    width:min(96vw,900px);max-height:96vh;padding:16px 20px;margin:2vh 0;
  }
  h1{font-size:clamp(22px,5.2vh,32px);margin-bottom:9px}
  .lede{font-size:12px;margin-bottom:16px;max-width:none}
  h2{margin:16px 0 8px;font-size:13px}
  dl{grid-template-columns:auto 1fr;gap:4px 12px}
  dt{margin-top:0}
  dd{font-size:11.5px}
  .kicker{margin-bottom:9px}
  .start{margin-top:18px}
  button{padding:11px 20px;min-height:42px;font-size:13px}
  #modeRow{grid-template-columns:1fr 1fr}
  .mode,.gal{padding:9px 11px}
  .mode span,.gal span{font-size:11px}
  .skin{min-width:66px;padding:7px}
  .skin canvas{width:36px;height:36px}
  #final{gap:12px}
  .stat b{font-size:20px}
}

/* совсем низкие окна: прячем всё, что не обязательно */
@media (max-height:380px){
  #radarWrap, body.touch #radarWrap{display:none}
  #tele{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}

/* Пальцевые экраны: поле крупнее — иначе Safari на iOS зумит страницу, когда
   в поле текст меньше 16px, и обратно сам не отъезжает. */
@media (pointer:coarse){
  :root{--in-size:16px}
  /* 340px хватает самой длинной подписи; поле не тянется на весь ландшафт,
     поэтому кнопка остаётся рядом, а на узком экране поле ужимается и
     кнопка переносится вниз сама. */
  #overName .fld,#boardTools .fld{flex:0 1 340px}
}

/* ========================= планшеты =========================
   Кнопки 70×52 задумывались под телефон, где они занимают заметную долю
   экрана. На iPad тот же размер превращается в мелкую мишень в углу
   большого холста, а тормоз ещё и удерживают пальцем, а не тыкают.
   Условие по высоте отсекает телефоны в ландшафте: там ширина тоже
   за 700px, но места под крупный пульт нет. */
@media (pointer:coarse) and (min-width:700px) and (min-height:700px){
  .pbtn{
    width:112px;height:80px;
    font-size:13px;letter-spacing:.12em;border-radius:6px;
  }
  body.touch #pad{right:22px;bottom:22px;gap:12px}
  body.touch #radarWrap{bottom:124px;right:22px}
  /* лесенка форм центрирована по низу и заезжала под выросший пульт */
  body.touch #ladder{bottom:124px}
}