/* ===============================
   Global / Reset
================================= */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg: #f31ea9;              /* page background */
  --panel: #dfeffe;           /* preview frame */
  --primary: #1a5fb4;         /* headings */
  --blue: #3b82f6;            /* upload button */
  --green: #27c15b;           /* download button */
  --ring: #2e79ff;            /* active color ring */
  --text: #0b2556;
  --muted: rgba(0,0,0,.12);
}

@font-face {
    font-family: 'newfont';
    src: url(./alphabet-playful/Alphabet\ Playful.otf);
}

html, body { height: 100%; }

body {
  font-family: 'newfont', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  min-height: 100vh;                     /* ensure full viewport height */
  background-image: url("./back.png");
  background-size: cover;                 /* scale to cover full screen */
  background-position: center;            /* center the image */
  background-repeat: no-repeat;           /* no tiling */
  background-attachment: fixed;           /* stays fixed on scroll */
  
  color: var(--text);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Links (if any) */
a{ color: inherit; text-decoration: none; }

/* ===============================
   Header
================================= */
.header {
  margin: 24px 0 8px;
}

.logo {
  width: clamp(160px, 24vw, 360px);
  height: auto;
}

.bathtub {
  width: clamp(130px, 18vw, 300px);
  display: block;
  margin: 12px auto 8px;
}

.maker-logo {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 14px;
  margin: 0 auto;

  /* glow effect */
  filter: drop-shadow(0 0 12px rgba(92, 88, 88, 0.7));
}


.join-btn {
  background: #55ccff;
  border: none;
  padding: 10px 22px;
  font-size: 18px;
  border-radius: 12px;
  cursor: pointer;
  color: #023047;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(85,204,255,.35);
  transition: transform .06s ease, box-shadow .15s ease, opacity .15s ease;
}
.join-btn:hover{ opacity:.92; }
.join-btn:active{ transform: translateY(1px); }

/* ===============================
   Custom Maker Section
================================= */
.custom-maker {
  width: min(720px, 92vw);
  margin: 28px auto 26px;
  padding: 0 18px 28px;
  background: transparent; /* the card itself is created below */
  border-radius: 18px;
}

.custom-maker h2,
.maker-title{
  margin: 8px 0 18px;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.25;
  color: var(--primary);
  font-weight: 900;
  letter-spacing: .2px;
}

/* Outer rounded frame (light blue with shadow) */
.nunu-frame{
  background: var(--panel);
  border-radius: 18px;
  padding: clamp(22px, 4.5vw, 36px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  width: 100%;
  margin: 0 auto 20px;
}

/* Inner preview area that holds background + PNG overlay */
.nunu-preview {
  width: min(460px, 84vw);
  height: min(380px, 70vw);
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

/* PNG overlay */
.nunu-preview .nunu-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* Subtitles */
.maker-subtitle{
  margin: 14px 0 10px;
  font-size: clamp(16px, 2.3vw, 19px);
  color: #fff;
  font-weight: 800;
}

/* Color options (9 dots, like screenshot) */
.color-options{
  display: grid;
  grid-template-columns: repeat(5, clamp(54px, 10vw, 64px));
  justify-content: center;
  gap: 18px 24px;
  margin: 8px auto 12px;
  padding: 0 8px;
}

/* Make the card narrower and centered */
.PINKY-frame{
  position: relative;
  background: rgba(255,255,255,.20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 12px;
  padding: 24px;
  margin: 0 auto 24px;          /* center */
  max-width: 520px;             /* <- limit the width */
  width: 100%;                  /* responsive within that limit */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
}

/* Keep the inner preview smaller than the frame */
.PINKY-preview{
  width: 220px;                 /* adjust to taste */
  max-width: 100%;              /* don’t overflow on small screens */
  aspect-ratio: 4 / 3;          /* keeps a nice shape */
  margin: 0 auto;
  border-radius: 16px;
  background: #fff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}

/* Image stays inside the box */
.PINKY-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.color,
.color-dot{
  width: clamp(44px, 9vw, 56px);
  height: clamp(44px, 9vw, 56px);
  border-radius: 999px;
  border: 3px solid var(--muted);
  background: #fff;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 0 0 4px transparent;
  transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease, opacity .15s ease;
}
.color:hover,
.color-dot:hover{ transform: translateY(-1px); }

.color.is-active,
.color-dot.is-active{
  /* white center and blue ring around, as in the screenshot */
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 4px var(--ring);
  border-color: #2e79ff22;
}

/* ===============================
   Upload & Download Buttons
================================= */
#uploadImage{ display:none; } /* hidden, triggered by label or custom button */

.btn,
.download-btn,
.btn-upload{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 16px;
  border: 0;
  font-family: 'newfont', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(16px, 2.2vw, 14px);
  font-weight: 400;
  cursor: pointer;
  color: #fff;
  transition: transform .06s ease, box-shadow .15s ease, opacity .15s ease;
  user-select: none;
}

/* Blue upload button */
.btn-upload{
  background: var(--blue);
  box-shadow: 0 8px 16px rgba(59,130,246,.35);
  margin: 6px 0 10px;
}
.btn-upload:hover{ opacity:.95; }
.btn-upload:active{ transform: translateY(1px); }

/* Green download button */
.download-btn{
  background: green;
  box-shadow: 0 8px 16px rgba(39,193,91,.35);
  margin: 16px auto 0;
}
.download-btn:hover{ opacity:.95; }
.download-btn:active{ transform: translateY(1px); }

/* If you use a <label> as upload button */
label.btn-upload{ cursor: pointer; }

/* ===============================
   Gallery
================================= */
.gallery {
  margin: 34px auto 60px;
  max-width: 1200px;
  padding: 0 16px 8px;
}

.gallery h2 {
  margin: 0 0 18px;
  color: var(--primary);
  font-size: clamp(32px, 4vw, 68px);
  font-weight: 900;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery-grid img {
  width: 100%;
  display: block;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
    filter: drop-shadow(0 0 12px rgba(92, 88, 88, 0.7));

  transition: transform .08s ease, box-shadow .12s ease, opacity .2s ease;
}
.gallery-grid img:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* ===============================f.btn, .download-btn, .btn-upload
   Responsive tweaks
================================= */
@media (max-width: 860px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .color-options{ grid-template-columns: repeat(5, clamp(44px, 10vw, 56px)); }
}