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;
}

/* ABOUT Section */
.about-container {
  position: absolute;
  left: 110px;
  top: 803px; /* Just below footer: footer bottom (819px) + 4px gap */
  width: 1060px;
  height: 61px;
  z-index: 1000; /* Above everything including footer */
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-container.expanded {
  top: 407px; /* Expanded position - middle of screen */
  height: 440px;
}

.about-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cursor pointer only when minimized (clickable to expand) */
.about-container:not(.expanded) .about-frame {
  cursor: pointer;
}

/* Default cursor when expanded (not clickable, except for links) */
.about-container.expanded .about-frame {
  cursor: default;
}

.about-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
}

/* Minimized state - hide all content and show only ABOUT text via pseudo-element */
.about-container:not(.expanded) .about-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
}

.about-container.expanded .about-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 100% !important;
  width: 100% !important;
  clip: auto !important;
  clip-path: none !important;
  pointer-events: auto;
  transition: opacity 0.3s ease 0.2s;
}

/* Minimized state - ABOUT text */
.about-container:not(.expanded) .about-frame::before {
  content: 'ABOUT';
  position: absolute;
  left: 24px; /* 134 - 110 = 24px from frame left */
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
  text-align: left;
  color: #000000;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}

.about-title {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 104px;
  height: 31px;
  margin: 0;
  padding: 0;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
  text-align: left;
  color: #000000;
  text-transform: uppercase;
}

.about-main-text {
  position: absolute;
  left: 188px;
  top: 114px;
  width: 684px;
  height: 175px;
  font-family: 'Roboto Slab', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 20px;
  text-align: left;
  color: #000000;
}

.about-main-text p {
  margin: 0;
  padding: 0;
}

.about-main-text .about-bold {
  font-family: 'Roboto Slab', serif;
  font-weight: 900;
  color: #000000;
}

.about-buttons {
  position: absolute;
  left: 152px;
  top: 318px;
  width: 800px; /* Container width to contain all buttons */
  height: 26px;
}

.about-btn {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  text-align: left;
  color: #000000;
  text-decoration: none;
  width: 168px;
  height: 26px;
  display: block;
  transition: opacity 0.2s ease;
}

.about-btn:hover {
  opacity: 0.7;
}

.about-buttons .about-btn:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
}

.about-buttons .about-btn:nth-child(2) {
  position: absolute;
  left: 244px; /* 396 - 152 = 244px */
  top: 0;
}

.about-buttons .about-btn:nth-child(3) {
  position: absolute;
  left: 432px; /* 584 - 152 = 432px */
  top: 0;
}

.about-buttons .about-btn:nth-child(4) {
  position: absolute;
  left: 632px; /* 784 - 152 = 632px */
  top: 0;
}

.about-preview {
  position: absolute;
  left: 188px;
  top: 373px;
  width: 684px;
  height: 42px;
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  text-align: left;
  color: #000000;
}

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