:root {
  --pink:#ff4f9a;
  --light:#fff2f8;
  --purple:#8b5cf6;
  --ink:#42233a;
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    linear-gradient(rgba(255,238,247,.10), rgba(72,27,68,.20)),
    url("tropical-sunset-background.png") center center / cover fixed no-repeat;
  position:relative;
}
.hidden { display:none !important; }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:100; }
.cover {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
  overflow:hidden;
}
.envelope {
  width:min(92vw,520px);
  background:white;
  border:5px solid #ffd0e5;
  border-radius:28px;
  box-shadow:0 20px 60px rgba(94,45,79,.18);
  padding:54px 28px;
  text-align:center;
}
.envelope h1 { font-size:clamp(38px,10vw,68px); margin:10px 0; }
.envelope p { font-size:20px; }
button, .item-card a {
  border:0;
  background:var(--pink);
  color:white;
  padding:14px 22px;
  border-radius:999px;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.flower { position:absolute; font-size:100px; opacity:.55; }
.flower-left { left:4%; top:8%; transform:rotate(-18deg); }
.flower-right { right:4%; bottom:8%; transform:rotate(18deg); }
main { max-width:1100px; margin:auto; padding:28px 18px 60px; }
header { text-align:center; padding:20px 0 28px; }
header h1 { font-size:clamp(36px,8vw,64px); margin:6px; }
header p { font-size:20px; }
.controls {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:12px;
  margin:0 auto 24px;
}
input, select {
  width:100%;
  padding:15px;
  border:2px solid #f2c8de;
  border-radius:15px;
  background:white;
  font-size:17px;
}
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
}
.item-card {
  background:white;
  border-radius:22px;
  padding:20px;
  box-shadow:0 8px 25px rgba(83,42,70,.10);
  position:relative;
  min-height:230px;
  display:flex;
  flex-direction:column;
}
.item-card h2 { margin:12px 0 6px; font-size:22px; }
.item-card p { color:#72566a; flex:1; }
.item-card a { text-align:center; font-size:16px; }
.number {
  position:absolute;
  right:16px;
  top:15px;
  background:#fff0f7;
  color:var(--pink);
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
}
.store {
  font-weight:800;
  color:var(--purple);
  padding-right:40px;
}
.mini-flowers { font-size:28px; }
@media (max-width:600px) {
  .controls { grid-template-columns:1fr; }
  .flower { font-size:60px; }
}


/* Tropical background polish */
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(54,23,63,.13));
}

main {
  background:rgba(255,244,250,.10);
  border-radius:32px;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}

header {
  text-shadow:0 2px 12px rgba(255,255,255,.9);
}

header h1 {
  color:#41163e;
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  letter-spacing:-1px;
}

.controls input,
.controls select {
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(66,25,62,.16);
}

.item-card {
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 12px 30px rgba(62,29,61,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.cover {
  background:
    linear-gradient(rgba(255,225,239,.08),rgba(72,27,68,.16)),
    url("tropical-sunset-background.png") center center / cover fixed no-repeat;
}

.envelope {
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

@media (max-width:700px) {
  body {
    background-attachment:scroll;
    background-position:center top;
  }
  main {
    border-radius:0;
    padding-left:12px;
    padding-right:12px;
  }
}