:root{
  --bg: #d1c3f8;
  --ink: #2f1f5e;
  --button-bg: #e1d9fc;
  --button-border: #4c3a8a;
  --shadow: #2f1f5e;
  --card-bg: #ffffff;
  --accent: #ffb86b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:"Patrick Hand", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background-color: var(--bg);
  position:relative;
  overflow:hidden;
}

.badge{ position:fixed; top:16px; right:16px; display:inline-block; z-index:10; background: #1e1b2e; color: #fff; padding: 10px 16px; border-radius: 12px; font-family: "Press Start 2P", monospace; border: 4px solid #fff; box-shadow: 0 6px 0 #b889ff; cursor: pointer; font-size: 12px; }
.badge:active { transform: translateY(4px); box-shadow: 0 2px 0 #b889ff; }
.badge-img{ width:48px; height:48px; display:block; border-radius:10px; border:4px solid #2f1f5e; box-shadow:0 4px 0 #2f1f5e; }

.clouds { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.cloud {
  position: absolute;
  opacity: 0.9;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes drift-ltr {
  from { transform: translateY(10px) rotate(-2deg); left: -250px; }
  to   { transform: translateY(-10px) rotate(2deg); left: 100vw; }
}
@keyframes drift-rtl {
  from { transform: translateY(-10px) rotate(2deg); left: 100vw; }
  to   { transform: translateY(10px) rotate(-2deg); left: -250px; }
}

.cloud-1 {
  width: 200px;
  top: 10%;
  animation-name: drift-ltr;
  animation-duration: 55s;
  animation-delay: -10s;
}

.cloud-2 {
  width: 120px;
  top: 30%;
  animation-name: drift-rtl;
  animation-duration: 70s;
  animation-delay: -25s;
}

.cloud-3 {
  width: 150px;
  top: 55%;
  animation-name: drift-ltr;
  animation-duration: 40s;
  animation-delay: -5s;
}

.cloud-4 {
  width: 180px;
  top: 75%;
  animation-name: drift-rtl;
  animation-duration: 60s;
  animation-delay: 0s;
}

.app{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; padding:48px 16px}

.hero h1{
  margin:0; color:var(--ink); text-shadow: 4px 4px 0 #fff;
  font-family:"Press Start 2P", monospace; font-size:28px; letter-spacing:1px;
  text-align:center;
}

.checker-form { width:min(600px, 90vw); }

.card{
  width:min(600px, 90vw);
  background: var(--card-bg);
  border-radius:16px; border:4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding:24px;
}

.input-row{ display:flex; gap:12px }
.input-row input{
  flex:1; padding:18px 16px; border:4px solid var(--ink); border-radius:14px;
  background:#f7f3ff; color:var(--ink); font-size:18px; font-family:"Patrick Hand";
  box-shadow: inset 4px 4px 0 rgba(0,0,0,.1);
}
.input-row input:focus { outline: none; background: #fff; }

.input-row button{
  padding:14px 24px; border:4px solid var(--button-border); border-radius:100px; background:var(--button-bg); color:var(--button-border); font-family:"Press Start 2P"; cursor:pointer;
  box-shadow:0 6px 0 var(--button-border); transition: transform .05s ease-in-out, box-shadow .05s ease-in-out;
  text-transform: uppercase;
  font-size: 14px;
}
.input-row button:active{ transform: translateY(4px); box-shadow:0 2px 0 var(--button-border); }

.result-card {
  width: min(450px, 90vw);
  aspect-ratio: 1 / 1;
  background-image: url('public/cardbackground.png');
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.pink-card {
  position: relative;
  width: 59%;
  height: 70%;
  background: linear-gradient(180deg, #FFD6F5 0%, #8c92ff 100%);
  border-radius: 25px;
  box-shadow: inset 0 10px 30px 0px rgba(0, 0, 0, 0.2);
}

.name-overlay {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  color: var(--ink);
}

.profile-pic-overlay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 5px solid white;
  background-color: #e0e0e0;
  object-fit: cover;
  z-index: 2;
}

.cloud-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 30%;
  background-image: url('public/cloudcard1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
  z-index: 1;
}

.percent-overlay {
  position: absolute;
  bottom: 11px;
  left: 27px;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  color: var(--ink);
}

.loading-message {
  font-family: "Press Start 2P", monospace;
  font-size: 18px;
  color: var(--ink);
  text-shadow: 2px 2px 0 #fff;
  padding: 24px;
}

.hidden{ display:none }

.sparkles{ position:fixed; inset:0; pointer-events:none; opacity:.5; z-index: -1; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

@media (max-width:480px){
  .app { justify-content: center; }
  .hero h1{ font-size:22px }
  .percent{ font-size:24px }
  .input-row { flex-direction: column; }
}