/* Стили страницы нарезки (slice.html). Игру и лабораторию не трогают.
   Интерфейс намеренно почти отсутствует: на экране должны быть фигуры и нож, а не панель. */

#cv { touch-action: none; cursor: crosshair; }

#ui { position: fixed; inset: 14px 16px auto 16px; z-index: 5; display: flex; align-items: flex-start;
  justify-content: space-between; pointer-events: none; }

#score { display: flex; align-items: baseline; gap: 8px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
#score b { font: 600 34px/1 -apple-system, system-ui, sans-serif; color: #eaf1ff; letter-spacing: -.02em; }
#score span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #7d8aa6; }
#score i { font: 600 18px/1 -apple-system, system-ui, sans-serif; font-style: normal; color: #ffd98a; opacity: 0; }
#score i.pop { opacity: 1; animation: pop .45s ease-out; }
@keyframes pop { from { transform: scale(1.5) translateY(-4px); opacity: 1; } to { transform: none; opacity: 1; } }

#tools { display: flex; gap: 8px; pointer-events: auto; }
#tools button { padding: 7px 12px; font-size: 12px; color: #cfe0ff; cursor: pointer;
  background: rgba(14,20,36,.55); border: 1px solid rgba(150,185,255,.22); border-radius: 999px;
  backdrop-filter: blur(6px); }
#tools button:hover { background: rgba(26,36,60,.7); }
#tools button.off { color: #6b7793; }

/* Монитор кадра — тот же вид, что в игре (.fps из style.css), но снизу: сверху слева счётчик
   резов. Скрывается кнопкой «кадр» или клавишей F: на страницу-релакс цифры лезть не должны. */
#fps { top: auto; bottom: 14px; left: 16px; opacity: .75; font-size: 11px; }
#fps.off { display: none; }

/* Баннер «нет WebGL2»: весь рендер нарезки — GPU, так что без контекста рисовать нечем.
   Показывается вместо немого чёрного экрана (см. конец src/slice-app.js).
   ⚠️ Правило `#glfail[hidden]` обязательно: селектор по id перебивает display:none, который
   атрибуту hidden даёт браузер, и баннер висел бы поверх игры ВСЕГДА. */
#glfail { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center;
  padding: 24px; text-align: center; font-size: 15px; color: #cfe0ff; background: #0b1020; }
#glfail[hidden] { display: none; }
#glfail b { color: #fff; }

#hint { position: fixed; left: 0; right: 0; bottom: 26px; z-index: 5; margin: 0; text-align: center;
  font-size: 14px; color: #93a3c4; pointer-events: none; transition: opacity .8s ease; }
#hint b { color: #dfe9ff; font-weight: 600; }
#hint.gone { opacity: 0; }