:root{
  --bg0:#070712;
  --bg1:#0b0b18;

  --ink:#ffffff;
  --muted: rgba(255,255,255,.78);
  --line: rgba(255,255,255,.14);

  --pink:#ff4fd8;
  --cyan:#00d4ff;
  --violet:#7c5cff;
  --lime:#34ffb6;
  --gold:#ffd36a;

  --shadow: 0 28px 90px rgba(0,0,0,.55);
  --radius: 22px;
  --max: 860px;
}

/* ======================
   Base Reset
====================== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html, body{
  height:100%;
}

body{
  color: var(--ink);
  font-family: "Poppins", sans-serif;

  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(255,79,216,.22), transparent 55%),
    radial-gradient(900px 620px at 85% 25%, rgba(0,212,255,.20), transparent 55%),
    radial-gradient(900px 700px at 30% 90%, rgba(52,255,182,.14), transparent 60%),
    radial-gradient(900px 650px at 90% 90%, rgba(124,92,255,.16), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* ======================
   Ambient Glow Layer
====================== */
.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.6;
  background:
    radial-gradient(640px 440px at 15% 20%, rgba(255,211,106,.14), transparent 60%),
    radial-gradient(600px 460px at 85% 75%, rgba(255,79,216,.12), transparent 60%),
    radial-gradient(640px 500px at 60% 10%, rgba(0,212,255,.10), transparent 60%);
  animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe{
  0%,100% { transform: scale(1); opacity:.52; }
  50%     { transform: scale(1.02); opacity:.68; }
}

/* ======================
   Corner Cats
====================== */
.corner-cats{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.corner-cat{
  position:absolute;
  font-size: clamp(42px, 6vw, 72px);
  opacity:.9;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.6));
  animation: bob 3.8s ease-in-out infinite;
  user-select:none;
}

@keyframes bob{
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(10px) rotate(2deg); }
}

.tl{ top: 14px; left: 14px; animation-delay:.1s; }
.tr{ top: 14px; right: 14px; animation-delay:.6s; }
.bl{ bottom: 14px; left: 14px; animation-delay:.9s; }
.br{ bottom: 14px; right: 14px; animation-delay:.3s; }

/* ======================
   Layout
====================== */
.wrap{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
}

.card{
  width: min(var(--max), 94vw);
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  backdrop-filter: blur(14px);
}

/* ======================
   Header
====================== */
.top{
  padding: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;

  background:
    radial-gradient(900px 260px at 12% 0%, rgba(255,79,216,.22), transparent 55%),
    radial-gradient(900px 260px at 95% 0%, rgba(0,212,255,.18), transparent 55%);
}

.brand h1{
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing:.2px;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.brand p{
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.panel{
  padding: 22px;
  text-align: center;
}

/* ======================
   Status Pill
====================== */
.pill{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.inline{
  display:inline-block;
  margin-bottom:10px;
}



/* ======================
   Typography
====================== */
.big{
  font-size: clamp(18px, 2vw, 22px);
  margin-bottom:10px;
}

.small{
  color: var(--muted);
  font-size: 14px;
}

/* ======================
   Buttons
====================== */
.row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
  justify-content:center; /* centers buttons horizontally */
}

.column{
  flex-direction:column;
  align-items:center; /* centers vertically in column */
}

button{
  font-family: inherit;
  border-radius: 16px;
  padding: 12px 14px;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  transition: transform .08s ease, filter .15s ease, border-color .15s ease;
} 

.btn{
  min-width: 180px;
}

button:hover{
  filter: brightness(1.08);
  border-color: rgba(255,255,255,.22);
}

button:active{
  transform: translateY(1px) scale(.99);
}

.btn{
  border:none;
  font-weight:800;
  color:#060610;
  background:
    linear-gradient(90deg,
      var(--pink),
      var(--cyan),
      var(--lime),
      var(--gold)
    );
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
} 

#shareBtn{
  background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  color: white;
  font-weight: 700;
}

.ghost{
  background: rgba(0,0,0,.20);
}

.choice{
  width: min(520px, 90%);
  text-align:center;
  font-weight:600;
  padding:16px;
  font-size:15px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  transition: all .2s ease;
}

.choice:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}

/* ======================
   Progress Bar
====================== */
.progress{
  margin-top: 14px;
  height: 12px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
}

.bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--pink), var(--cyan), var(--lime), var(--gold));
  transition: width .25s ease;
}

/* ======================
   Result
====================== */
.resultBox{
  margin-top:14px;
  padding:16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 300px at 10% 10%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(900px 300px at 95% 35%, rgba(0,212,255,.18), transparent 55%),
    rgba(0,0,0,.18);
  box-shadow: 0 20px 55px rgba(0,0,0,.32);
}

.type{
  font-size: 34px;
  margin-top:6px;
  letter-spacing:1px;
}

.catName{
  font-size:20px;
  margin-top:4px;
}

/* ======================
   Utility
====================== */
.hide{
  display:none !important;
}

/* ======================
   Mobile
====================== */
@media (max-width:560px){
  body{
    overflow:auto;
  }
  .wrap{
    min-height:100%;
  }
  .corner-cat{
    opacity:.75;
  }
} 

/* ======================
   Flower Barrage (many floating flowers)
====================== */

.flowers{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* behind the quiz card */
  overflow: hidden;
}

/* Base flower particle */
.flower{
  position: absolute;
  bottom: -12vh;
  opacity: .85;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.40));
  animation-name: floatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  /* gentle side sway */
  transform: translateX(0);
}

/* Move upward + rotate */
@keyframes floatUp{
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  100% { transform: translateY(-130vh) translateX(var(--drift)) rotate(360deg); }
}

/* Each flower: position, speed, size, drift, and “tint” glow */
.f1  { left: 4%;  font-size: 18px; animation-duration: 10s; animation-delay: -1s;  --drift:  8vw;  }
.f2  { left: 10%; font-size: 24px; animation-duration: 14s; animation-delay: -8s;  --drift: -6vw; }
.f3  { left: 16%; font-size: 20px; animation-duration: 12s; animation-delay: -4s;  --drift:  10vw; }
.f4  { left: 22%; font-size: 28px; animation-duration: 16s; animation-delay: -12s; --drift: -8vw; }
.f5  { left: 28%; font-size: 19px; animation-duration: 11s; animation-delay: -6s;  --drift:  6vw;  }
.f6  { left: 34%; font-size: 26px; animation-duration: 15s; animation-delay: -10s; --drift: -10vw;}
.f7  { left: 40%; font-size: 21px; animation-duration: 13s; animation-delay: -3s;  --drift:  7vw;  }
.f8  { left: 46%; font-size: 30px; animation-duration: 18s; animation-delay: -14s; --drift: -7vw; }
.f9  { left: 52%; font-size: 18px; animation-duration: 10.5s; animation-delay: -2s; --drift:  9vw; }
.f10 { left: 58%; font-size: 25px; animation-duration: 14.5s; animation-delay: -9s; --drift: -9vw; }
.f11 { left: 64%; font-size: 22px; animation-duration: 12.5s; animation-delay: -5s; --drift:  8vw; }
.f12 { left: 70%; font-size: 29px; animation-duration: 17s; animation-delay: -13s; --drift: -6vw; }
.f13 { left: 76%; font-size: 20px; animation-duration: 11.5s; animation-delay: -7s; --drift:  10vw;}
.f14 { left: 82%; font-size: 27px; animation-duration: 15.5s; animation-delay: -11s;--drift: -10vw;}
.f15 { left: 88%; font-size: 19px; animation-duration: 10.8s; animation-delay: -4s;--drift:  6vw; }
.f16 { left: 94%; font-size: 31px; animation-duration: 18.5s; animation-delay: -15s;--drift: -8vw;}
.f17 { left: 6%;  font-size: 16px; animation-duration: 9.5s; animation-delay: -6s; --drift:  12vw;}
.f18 { left: 33%; font-size: 17px; animation-duration: 10.2s; animation-delay: -8s;--drift: -12vw;}
.f19 { left: 61%; font-size: 16px; animation-duration: 9.8s; animation-delay: -3s; --drift:  11vw;}
.f20 { left: 79%; font-size: 17px; animation-duration: 10.7s; animation-delay: -12s;--drift: -11vw;}

/* Optional: extra colorful glow by emoji type */
.flower{
  mix-blend-mode: screen; /* makes colors pop on dark bg */
}

/* ===== Certificate Name Input ===== */
.nameBox{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  text-align: center;
}

.nameInput{
  margin-top: 10px;
  width: min(420px, 92%);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  outline: none;
}

.nameInput::placeholder{
  color: rgba(255,255,255,.55);
}

.nameInput:focus{
  border-color: rgba(0,212,255,.55);
  box-shadow: 0 0 0 4px rgba(0,212,255,.15);
}

.hint{
  margin-top: 10px;
  opacity: .9;
}