html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Base design canvas 1280x843 */
.desktop-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 843px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  z-index: 0;
}

/* Scaling wrapper: scale desktop-layer to fit screen, no scroll */
@media (min-width: 1px) {
  #app {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.ui-button {
  position: absolute;
  display: inline-block;
  cursor: pointer;
}

.ui-button img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Header & fixed UI for desktop baseline positions (1280x843) */
.logo {
  left: 77px;
  top: 70px;
  width: 98px;
  height: 65px;
}

.language {
  left: 1153px;
  top: 67px;
  width: 50px;
  height: 50px;
}

.lifetime {
  left: 77px;
  top: 697px;
  width: 178px;
  height: 46px;
}

.ai-dot {
  left: 1153px;
  top: 693px;
  width: 50px;
  height: 50px;
  background: transparent;
  border: none;
  padding: 0;
}

.ai-dot img {
  border-radius: 50%;
}

/* Draggables (desktop absolute positions) */
.draggable {
  position: absolute;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  z-index: 5; /* always above nav-layer */
}

.draggable:active {
  cursor: grabbing;
}

.cooked {
  left: 260px;
  top: 157px;
  width: 200px;
  height: 200px;
}

.aroud {
  left: 413.02px;
  top: 99px;
  width: 200px;
  height: 172.68px;
}

.butter {
  left: 588px;
  top: 99px;
  width: 236px;
  height: 184px;
}

.conv {
  left: 760px;
  top: 117px;
  width: 242px;
  height: 185px;
}

.five {
  left: 873px;
  top: 288px;
  width: 174px;
  height: 91px;
}

.water {
  left: 841px;
  top: 392px;
  width: 200px;
  height: 109px;
}

.thecake {
  left: 813px;
  top: 487px;
  width: 200px;
  height: 203px;
}

.thecup {
  left: 938px;
  top: 510px;
  width: 122px;
  height: 180px;
}

.camarsh {
  left: 586px;
  top: 493px;
  width: 277px;
  height: 258px;
}

.nut {
  left: 438px;
  top: 527px;
  width: 180px;
  height: 180px;
}

.seven {
  left: 212px;
  bottom: 126px;
  width: 229px;
  height: 267px;
}

.jelly-phone {
  left: 178px;
  top: 322px;
  width: 262px;
  height: 169px;
}

/* Card 77 */
.card-77 {
  position: absolute;
  left: 460px;
  top: 302px;
  width: 337px;
  height: 213px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.card-77-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform-origin: top left;
  transform: scale(0.25);
  transition: opacity 0.3s ease;
}

.card-face.back {
  opacity: 0;
}

.card-77:hover .card-face.front {
  opacity: 0;
}

.card-77:hover .card-face.back {
  opacity: 1;
}

/* Nav layer (under draggables) */
.nav-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* sits visually under draggables */
}

.nav-btn {
  position: absolute;
  display: block;
  pointer-events: auto;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.nav-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-btn:hover {
  transform: scale(1.5);
}

/* Positions (desktop) */
.nav-btn.cooked-sub {
  left: 285px;
  top: 250px;
  width: 150px;
  height: 33px;
}

.nav-btn.aroud-sub {
  left: 500px;
  top: 145px;
  width: 48px;
  height: 70px;
}

.nav-btn.hilde-sub {
  left: 640px;
  top: 156px;
  width: 100px;
  height: 80px;
}

.nav-btn.conv-sub {
  left: 802px;
  top: 196px;
  width: 153px;
  height: 61px;
}

.nav-btn.hundred-sub {
  left: 921px;
  top: 322px;
  width: 38px;
  height: 17px;
}

.nav-btn.water-sub {
  left: 898px;
  top: 440px;
  width: 76px;
  height: 61px;
}

.nav-btn.the-sub {
  left: 878px;
  top: 563px;
  width: 113px;
  height: 61px;
}

.nav-btn.rmsh-sub {
  left: 647px;
  top: 600px;
  width: 159px;
  height: 61px;
}

.nav-btn.nut-sub {
  left: 457px;
  top: 583px;
  width: 141px;
  height: 70px;
}

.nav-btn.nrutseab-sub {
  left: 265px;
  top: 561px;
  width: 106px;
  height: 70px;
}

.nav-btn.aroud2-sub {
  left: 270px;
  top: 380px;
  width: 48px;
  height: 70px;
}

/* Footer */
.footer-link {
  position: absolute;
  left: calc(50% - 119.5px); /* center within 239px width */
  bottom: 24px;
  width: 239px;
  height: 39px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  color: #000000;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: none;
}

/* (All breakpoints share same 1280x843 layout; scaling handled in JS) */