/* JewelArte — App Global Styles */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background-color: #0c0f16;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background: #0c0f16;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #F3EFE6;
  overflow-x: hidden;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

/* App container — responsive, mobile-first */
.ds-app {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  background: linear-gradient(180deg, #20203a 0%, #1a1a2e 55%, #15152a 100%);
  position: relative;
  overflow-x: hidden;
}

/* Each screen fills at least the viewport */
.ds-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Tablet+ : centered container with shadow */
@media (min-width: 540px) {
  body {
    background: radial-gradient(120% 100% at 50% 0%, #1a2030 0%, #0c0f16 60%, #080a0f 100%);
  }
  .ds-app {
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
    border-left: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
  }
}

/* Desktop: more prominent shadow */
@media (min-width: 768px) {
  .ds-app {
    box-shadow: 0 0 120px rgba(0, 0, 0, 0.6);
  }
}

/* Safe area for notch / home-indicator */
@supports (padding: env(safe-area-inset-bottom)) {
  .ds-app {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Hide scrollbar but keep scroll */
.ds-app::-webkit-scrollbar { display: none; }
.ds-app { -ms-overflow-style: none; scrollbar-width: none; }

/* Loading spinner */
@keyframes ds-spin { to { transform: rotate(360deg); } }