html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  -webkit-text-size-adjust: 100%;
}

.screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: var(--app-height, 100vh);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.room {
  position: relative;
  height: var(--app-height, 100vh);
  width: calc(var(--app-height, 100vh) * var(--ratio));
  max-width: 100vw;
  max-height: calc(100vw / var(--ratio));
  aspect-ratio: var(--w) / var(--h);
}

.room img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hit,
.field,
.upload {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.hit {
  display: block;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.hit::after,
.upload::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgba(245, 205, 92, 0.72),
    0 0 18px rgba(245, 205, 92, 0.54);
  background: rgba(245, 205, 92, 0.10);
  transition: opacity 120ms ease, transform 120ms ease;
}

.hit:active::after,
.hit.pressed::after,
.upload:active::after,
.upload.pressed::after {
  opacity: 1;
  transform: scale(0.985);
}

.field {
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(245, 226, 178, 0.95);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, calc(var(--room-w, 390px) * 0.04), 28px);
  line-height: 1.2;
  padding: 0 3%;
  caret-color: rgba(245, 205, 92, 0.95);
}

.field:focus,
.field.focused {
  text-shadow: 0 0 8px rgba(245, 205, 92, 0.58);
}

.field::placeholder {
  color: transparent;
}

.phone-field {
  font-size: clamp(14px, calc(var(--room-w, 390px) * 0.033), 24px);
  text-align: center;
  letter-spacing: 0.015em;
}

textarea.field {
  resize: none;
  padding-top: 2%;
}

.code-field {
  color: rgba(245, 226, 178, 0.98);
  font-weight: 700;
  text-align: center;
}

.signup-code-field {
  font-size: clamp(22px, calc(var(--room-w, 390px) * 0.066), 54px);
  letter-spacing: 0.44em;
  padding-left: 0.44em;
  padding-right: 0;
}

.phone-code-field {
  font-size: clamp(22px, calc(var(--room-w, 390px) * 0.064), 52px);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  padding-right: 0;
}

.choice.selected {
  outline: 2px solid rgba(239, 198, 91, 0.7);
  outline-offset: -2px;
}

.agreement.selected::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 5%;
  width: 52%;
  height: 78%;
  border-right: 3px solid rgba(239, 198, 91, 0.95);
  border-bottom: 3px solid rgba(239, 198, 91, 0.95);
  transform: rotate(42deg);
}

.select-field {
  font-size: clamp(11px, calc(var(--room-w, 390px) * 0.026), 20px);
  color: rgba(245, 226, 178, 0.95);
  appearance: none;
  -webkit-appearance: none;
}

.upload {
  opacity: 0;
  cursor: pointer;
}

.code-keypad {
  position: fixed;
  left: 50%;
  bottom: max(4px, env(safe-area-inset-bottom));
  z-index: 200;
  width: min(58vw, 250px);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid rgba(245, 205, 92, 0.50);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.64);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.74), inset 0 0 12px rgba(145, 95, 28, 0.18);
  transform: translateX(-50%);
}

.code-keypad.open {
  display: grid;
}

.code-keypad button {
  min-height: 30px;
  border: 1px solid rgba(245, 205, 92, 0.62);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(42, 29, 8, 0.95), rgba(170, 126, 36, 0.92));
  color: rgba(255, 232, 158, 0.98);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}

.code-keypad button:active {
  transform: scale(0.96);
  filter: brightness(1.18);
}

.phone-typer {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 210;
  width: min(64vw, 280px);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid rgba(245, 205, 92, 0.46);
  border-radius: 12px;
  background: rgba(15, 7, 3, 0.78);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.80), inset 0 0 14px rgba(133, 73, 24, 0.22);
  transform: translateX(-50%);
}

.phone-typer.open {
  display: grid;
}

.phone-typer button {
  min-height: 34px;
  border: 1px solid rgba(245, 205, 92, 0.44);
  border-radius: 10px;
  background: rgba(82, 31, 19, 0.72);
  color: rgba(245, 226, 178, 0.96);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.phone-typer button[data-phone-key="OK"] {
  grid-column: 1 / -1;
  min-height: 36px;
  background: linear-gradient(135deg, rgba(89, 58, 15, 0.96), rgba(194, 143, 42, 0.92));
}

.phone-typer button:active {
  background: rgba(151, 93, 37, 0.82);
}

.text-typer {
  position: fixed;
  left: 50%;
  bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 220;
  width: min(88vw, 430px);
  display: none;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid rgba(245, 205, 92, 0.42);
  border-radius: 12px;
  background: rgba(5, 4, 3, 0.78);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.78), inset 0 0 12px rgba(133, 73, 24, 0.18);
  transform: translateX(-50%);
}

.text-typer.open {
  display: grid;
}

.text-typer button {
  min-height: 32px;
  border: 1px solid rgba(245, 205, 92, 0.38);
  border-radius: 8px;
  background: rgba(58, 35, 15, 0.80);
  color: rgba(245, 226, 178, 0.96);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.text-typer button[data-text-key="space"] {
  grid-column: span 3;
}

.text-typer button[data-text-key="del"],
.text-typer button[data-text-key="ok"] {
  grid-column: span 2;
}

.text-typer button:active {
  background: rgba(151, 93, 37, 0.82);
}

.native-field {
  z-index: 80;
  pointer-events: auto;
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
  background: transparent;
}