@font-face {
  font-family: "Russo One";
  src: url("assets/fonts/russo-one-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-display: swap;
}
@font-face {
  font-family: "Russo One";
  src: url("assets/fonts/russo-one-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+25A0-25FF;
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/press-start-2p-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: #07060f;
  overflow: hidden;
  font-family: "Russo One", system-ui, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#game-wrap {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 70, 255, 0.18), transparent 55%),
    linear-gradient(180deg, #120c2a, #05040a);
  position: relative;
}

canvas {
  display: block;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 100dvh;
  image-rendering: pixelated;
  background: #000;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 3px #241d44;
  cursor: pointer;
}

#touch-controls { display: none; }

/* ---------- Touch controls (phones / tablets, only during a fight) ---------- */
@media (pointer: coarse) {
  body.mobile-fight #touch-controls {
    display: block;
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 200px;
    flex: 0 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.mobile-fight canvas {
    width: min(100vw, calc((100dvh - 200px) * 16 / 9));
  }

  .touch-actions {
    position: absolute;
    bottom: calc(8px + env(safe-area-inset-bottom));
    right: max(10px, env(safe-area-inset-right));
    width: 222px;
    height: 140px;
  }
  #stick {
    position: absolute;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    width: 136px;
    height: 136px;
    border-radius: 50%;
    border: 2px solid rgba(255, 240, 166, 0.5);
    background: radial-gradient(circle, rgba(40, 30, 80, 0.75), rgba(12, 10, 30, 0.75));
    touch-action: none;
  }
  #stick .knob {
    position: absolute;
    left: 50%; top: 50%;
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: rgba(255, 240, 166, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }

  #touch-controls button {
    position: absolute;
    width: 68px;
    height: 64px;
    border-radius: 16px;
    border: 2px solid rgba(255, 240, 166, 0.75);
    background: rgba(18, 14, 40, 0.82);
    color: #fff6c8;
    font: 15px/1.05 "Russo One", system-ui, sans-serif;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    touch-action: none;
    padding: 0;
  }
  #touch-controls button.down { background: rgba(255, 240, 166, 0.35); transform: scale(0.95); }

  .act-light   { left: 0;     bottom: 0; }
  .act-heavy   { left: 77px;  bottom: 0; }
  .act-special { left: 154px; bottom: 0; background: rgba(90, 30, 120, 0.85) !important; }
  .act-throw   { left: 0;     top: 0; font-size: 12px !important; height: 56px !important; }
  .act-dash    { left: 77px;  top: 0; font-size: 12px !important; height: 56px !important; }
  .act-super   { left: 154px; top: 0; height: 56px !important; font-size: 13px !important; opacity: 0.55; }
  .act-super.ready { opacity: 1; background: rgba(255, 190, 60, 0.9) !important; color: #2a0d00 !important; animation: superPulse 0.6s infinite alternate; }
  @keyframes superPulse { from { box-shadow: 0 0 6px #ffd54a; } to { box-shadow: 0 0 22px #ffd54a; } }

  #touch-controls .pause-btn {
    left: max(14px, env(safe-area-inset-left));
    top: 4px;
    width: 46px;
    height: 46px;
    font-size: 15px;
  }

  /* Landscape phone: the scene sits in the middle, controls live in the side gutters — never over the fight. */
  @media (orientation: landscape) and (max-height: 600px) {
    body.mobile-fight { --gut: clamp(140px, 19vw, 210px); }
    body.mobile-fight canvas {
      width: min(calc(100vw - 2 * var(--gut)), calc(100dvh * 16 / 9));
      box-shadow: 0 0 0 2px #241d44;
    }
    body.mobile-fight #touch-controls {
      position: fixed;
      inset: 0;
      width: auto; height: auto; max-width: none;
      padding: 0;
      pointer-events: none;
    }
    body.mobile-fight #touch-controls > * { pointer-events: auto; }
    body.mobile-fight #stick {
      left: calc(max(0px, env(safe-area-inset-left)) + (var(--gut) - min(150px, var(--gut) - 16px)) / 2);
      bottom: max(14px, env(safe-area-inset-bottom));
      width: min(150px, calc(var(--gut) - 16px));
      height: min(150px, calc(var(--gut) - 16px));
    }
    body.mobile-fight #touch-controls .pause-btn {
      position: absolute;
      left: calc(max(8px, env(safe-area-inset-left)) + 4px);
      top: 10px;
      width: 44px; height: 44px;
      font-size: 14px;
      opacity: 0.8;
      transform: none;
    }
    body.mobile-fight .touch-actions {
      right: max(6px, env(safe-area-inset-right));
      bottom: max(10px, env(safe-area-inset-bottom));
      width: calc(var(--gut) - 12px);
      height: calc(100dvh - 20px);
      max-height: 330px;
    }
    /* two big rows at the bottom (РУКА НОГА / СПЕЦ ПАНЧ), small БРОСОК РЫВОК on top */
    body.mobile-fight .touch-actions button {
      width: calc(50% - 5px) !important;
      opacity: 0.92;
    }
    body.mobile-fight .act-light   { left: 0 !important;  right: auto; bottom: 0 !important; top: auto !important; height: 30% !important; }
    body.mobile-fight .act-heavy   { right: 0 !important; left: auto !important; bottom: 0 !important; top: auto !important; height: 30% !important; }
    body.mobile-fight .act-special { left: 0 !important;  bottom: calc(30% + 10px) !important; top: auto !important; height: 30% !important; }
    body.mobile-fight .act-super   { right: 0 !important; left: auto !important; bottom: calc(30% + 10px) !important; top: auto !important; height: 30% !important; }
    body.mobile-fight .act-throw   { left: 0 !important;  top: 0 !important; height: calc(40% - 20px) !important; max-height: 52px; font-size: 12px !important; }
    body.mobile-fight .act-dash    { right: 0 !important; left: auto !important; top: 0 !important; height: calc(40% - 20px) !important; max-height: 52px; font-size: 12px !important; }
  }
}

/* ---------- "Turn your phone" screen ---------- */
#rotate {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(120, 70, 255, 0.35), transparent 60%), #0b0820;
  color: #fff6c8; font-family: "Russo One", system-ui, sans-serif;
}
#rotate .phone {
  width: 70px; height: 116px; border: 4px solid #ffd54a; border-radius: 14px;
  animation: turnPhone 1.8s ease-in-out infinite;
}
@keyframes turnPhone { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
#rotate h2 { margin: 0; font-size: 24px; color: #ffd54a; }
#rotate p { margin: 0; font-size: 15px; color: #c9c2ff; max-width: 320px; }
#rotate button {
  font: 18px "Russo One", system-ui, sans-serif; color: #2a0d00; background: #ffd54a;
  border: 0; border-radius: 14px; padding: 14px 22px; box-shadow: 0 6px 20px rgba(255, 213, 74, 0.35);
}
#rotate .ios-tip { font-size: 14px; color: #fff6c8; background: rgba(255,213,74,0.1); border: 1px solid rgba(255,213,74,0.4); border-radius: 12px; padding: 10px 14px; }
#rotate .ios-tip[hidden] { display: none; }
#rotate .skip { background: transparent; color: #8d87b9; box-shadow: none; font-size: 14px; padding: 6px; }
@media (pointer: coarse) and (orientation: portrait) {
  body:not(.portrait-ok) #rotate { display: flex; }
}

/* the whole fight area ignores browser gestures: no double-tap zoom, no scrolling */
body.mobile-fight, body.mobile-fight #game-wrap, #touch-controls, #touch-controls * { touch-action: none; }
html { touch-action: manipulation; }