@font-face {
  font-family: "AlternateGothic";
  src: url("../Assets/Fonts/AlternateGothicExCondATF-Heavy.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "AlternateGothicBlack";
  src: url("../Assets/Fonts/AlternateGothicExCondATF-Black.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "AndoBlack";
  src: url("../Assets/Fonts/Ando-Black.ttf") format("truetype");
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.viewport {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.app {
  position: relative;
  width: 1080px;
  height: 1920px;
  flex-shrink: 0;
  transform-origin: center center;
  overflow: hidden;
  background: #000;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
}

.screen.active {
  display: block;
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.img-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
  position: absolute;
  z-index: 5;
  touch-action: manipulation;
}

.img-btn:disabled {
  pointer-events: none;
  cursor: default;
}

.img-btn img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.img-btn[hidden],
.tap-zone[hidden],
.product-stage[hidden],
.product-preview[hidden] {
  display: none;
}

/* ===== TUTORIAL / GAMEPLAY SCREEN ===== */
.product-preview {
  position: absolute;
  left: 50%;
  top: 1250px;
  transform: translate(-50%, -50%);
  width: 980px;
  height: 680px;
  z-index: 4;
  pointer-events: none;
}

.preview-product {
  position: absolute;
  top: 50%;
  object-fit: contain;
  pointer-events: none;
}

.preview-center {
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  max-height: 680px;
  z-index: 3;
  background-color: #eaa3db;
  border: 0;
  border-radius: 56px;
  overflow: hidden;
}

.preview-left {
  left: 50%;
  transform: translate(calc(-50% - 285px + 10px), calc(-50% + 25px));
  width: 310px;
  max-height: 560px;
  z-index: 1;
}

.preview-right {
  left: 50%;
  transform: translate(calc(-50% + 285px - 10px), calc(-50% + 25px));
  width: 310px;
  max-height: 560px;
  z-index: 2;
}

.product-stage {
  position: absolute;
  left: 50%;
  top: 1300px;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 780px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.product-display {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tap-zone {
  position: absolute;
  inset: 0;
  z-index: 10;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

/* ===== BUTTONS (width only — height follows image aspect ratio) ===== */
.btn-start,
.btn-next,
.btn-try-again,
.btn-home {
  left: 119px;
  top: 1580px;
  width: 842px;
  z-index: 6;
}

.btn-tap-now {
  left: 119px;
  top: 1655px;
  width: 842px;
  z-index: 6;
}

/* ===== WIN SCREEN ===== */
.winner-stage {
  position: absolute;
  left: 50%;
  top: 1050px;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 900px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.winner-product {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ===== INPUT LOCK ===== */
.input-lock {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: transparent;
}

.input-lock[hidden] {
  display: none;
}