html, body { margin: 0; height: 100%; background: #2b2233; overflow: hidden; overscroll-behavior: none; }
body { -webkit-text-size-adjust: 100%; font-family: system-ui, sans-serif; }
canvas { image-rendering: auto; }

/* DOM buttons sit in the stage overlay; 1 logical pixel = var(--u) */
.gk-ui {
  position: absolute; pointer-events: auto; margin: 0; padding: 0; border: 0; cursor: pointer;
  background: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gk-ui:focus-visible { outline: calc(var(--u) * 3) solid #f3c33a; outline-offset: calc(var(--u) * 2); }

.hanggomb {
  right: calc(var(--u) * 10); top: calc(var(--u) * 10);
  width: calc(var(--u) * 34); height: calc(var(--u) * 34);
  border-radius: 50%; background: rgba(251, 244, 226, 0.92);
  box-shadow: 0 0 0 calc(var(--u) * 2) #2b2233;
  display: flex; align-items: center; justify-content: center;
}
.hanggomb svg { width: 64%; height: 64%; display: block; }
.hanggomb .ki { display: none; }
.hanggomb.nemitva .be { display: none; }
.hanggomb.nemitva .ki { display: inline; }

.vegegomb {
  top: calc(var(--u) * 566); height: calc(var(--u) * 50); width: calc(var(--u) * 146);
  border-radius: calc(var(--u) * 12);
  box-shadow: 0 0 0 calc(var(--u) * 2.5) #2b2233, 0 calc(var(--u) * 4) 0 calc(var(--u) * 2.5) #2b2233;
  display: none; align-items: center; justify-content: center;
}
.vegegomb.latszik { display: flex; }
.vegegomb:active { transform: translateY(calc(var(--u) * 3)); box-shadow: 0 0 0 calc(var(--u) * 2.5) #2b2233; }
.vegegomb img { height: calc(var(--u) * 30); width: auto; pointer-events: none; }
.vegegomb.megoszt { left: calc(var(--u) * 26); background: #2f6fb0; }
.vegegomb.ujra { left: calc(var(--u) * 188); background: #3f9a7c; }

.uzenet {
  position: absolute; left: 50%; top: calc(var(--u) * 520); transform: translateX(-50%);
  background: #2b2233; border-radius: calc(var(--u) * 8);
  padding: calc(var(--u) * 6) calc(var(--u) * 12); line-height: 0;
  opacity: 0; transition: opacity 0.25s; pointer-events: none; white-space: nowrap;
}
.uzenet img { height: calc(var(--u) * 24); width: auto; display: block; } /* the message is hand-lettered, not a font */
.uzenet.latszik { opacity: 1; }