/* Bundled OFL display fonts (see assets/fonts/OFL.txt) */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/anton.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('../assets/fonts/oswald-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../assets/fonts/oswald-700.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #07051a;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: 'Oswald', Arial, sans-serif;
}

#stagewrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  image-rendering: auto;
  background: #07051a;
}

#touchlayer {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 10;
  /* one responsive unit drives every control size and position, so the whole
     pad scales with screen height and never collides with the HUD on small
     phones while staying thumb sized on tablets */
  --u: clamp(8px, 2.7vh, 15px);
}

#touchlayer .stickzone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45%;
  height: 75%;
  pointer-events: auto;
}

#touchlayer .stickbase {
  position: absolute;
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: rgba(140, 120, 255, 0.12);
  border: 2px solid rgba(180, 160, 255, 0.35);
}

#touchlayer .stickbase.hidden { display: none; }

#touchlayer .sticknub {
  position: absolute;
  left: calc(var(--u) * 2.4);
  top: calc(var(--u) * 2.4);
  width: calc(var(--u) * 3.2);
  height: calc(var(--u) * 3.2);
  border-radius: 50%;
  background: rgba(190, 170, 255, 0.45);
}

#touchlayer .tbtn {
  position: absolute;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(80, 60, 160, 0.30);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.05s, transform 0.05s;
}

#touchlayer .tbtn.on { background: rgba(170, 150, 255, 0.55); transform: scale(0.92); }

/* six face buttons: LP MP HP on top, LK MK HK below, in a shallow thumb arc */
#touchlayer .b { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); font-size: calc(var(--u) * 1.05); }

#touchlayer .lp { right: calc(var(--u) * 11.5); bottom: calc(var(--u) * 11.5); }
#touchlayer .mp { right: calc(var(--u) * 6);    bottom: calc(var(--u) * 13.3); }
#touchlayer .hp { right: calc(var(--u) * 0.9);  bottom: calc(var(--u) * 11.5); }
#touchlayer .lk { right: calc(var(--u) * 11.5); bottom: calc(var(--u) * 6.4); }
#touchlayer .mk { right: calc(var(--u) * 6);    bottom: calc(var(--u) * 8.2); }
#touchlayer .hk { right: calc(var(--u) * 0.9);  bottom: calc(var(--u) * 6.4); }

#touchlayer .throw {
  right: calc(var(--u) * 16.5); bottom: calc(var(--u) * 8);
  background: rgba(200, 90, 60, 0.35);
}

#touchlayer .sp {
  width: calc(var(--u) * 3.9); height: calc(var(--u) * 3.9); font-size: calc(var(--u) * 0.85);
  background: rgba(60, 130, 200, 0.35);
}
#touchlayer .s1 { right: calc(var(--u) * 6.5);  bottom: calc(var(--u) * 18); }
#touchlayer .s2 { right: calc(var(--u) * 1.2);  bottom: calc(var(--u) * 16.6); }
#touchlayer .su {
  right: calc(var(--u) * 12);   bottom: calc(var(--u) * 16.6);
  background: rgba(255, 200, 70, 0.30);
  border-color: rgba(255, 220, 120, 0.5);
}

#touchlayer .pausebtn {
  width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2);
  right: calc(var(--u) * 0.9); top: calc(var(--u) * 4.5);
  font-size: calc(var(--u) * 1);
  background: rgba(255, 255, 255, 0.12);
}

#rotatehint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #07051a;
  color: #ffc73a;
  font-weight: 900;
  font-size: 20px;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

@media (orientation: portrait) and (pointer: coarse) {
  #rotatehint { display: flex; }
}