:root{
  --bg:#cc0000;
  --card:#141621;
  --text:#cc0000;
  --muted:#f3f4f6;
  --stroke:rgba(253, 253, 253, 0.12);
  --love:#efc0c0;
  --no:#9aa3b2;
  --shadow: 0 18px 60px rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background-color: var(--bg);
  background-image:
              radial-gradient(1200px 600px at 50% -50%, rgba(255,45,85,.01), transparent 60%),
              radial-gradient(900px 500px at 110% 20%, rgba(255,255,255,.01), transparent 55%);
  background-repeat: no-repeat, no-repeat;
  color:var(--text);
  position: relative;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("images/bg overlay.png");
  background-repeat: repeat;
  opacity: 0.35;
  z-index: 0;
  animation: hearts-drift-1 70s linear infinite;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("images/bg overlay.png");
  background-repeat: repeat;
  opacity: 0.18;
  z-index: 0;
  animation: hearts-drift-2 95s linear infinite;
}

.app{
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 16px 22px;
  min-height: 100%;
  display:flex;
  flex-direction:column;
  gap: 14px;
  position: relative;
  z-index: 1;
}

@keyframes hearts-drift-1{
  from{ background-position: 0 0; }
  to{ background-position: 240px 160px; }
}

@keyframes hearts-drift-2{
  from{ background-position: 60px -40px; }
  to{ background-position: -220px -140px; }
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{display:flex; align-items:center; gap:12px;}
.dot{
  width:14px; height:14px; border-radius:50%;
  background: var(--love);
  box-shadow: 0 0 0 6px rgba(255, 184, 197, 0.18);
}
.title{font-weight:700; letter-spacing:.2px; color: white;}
.subtitle{font-size:13px; color:var(--muted); margin-top:2px}
.progress{font-size:13px; color:var(--muted)}

.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.deck{
  width: 100%;
  height: 540px;
  position:relative;
  perspective: 1200px;
}

.emoji-burst{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow: visible;
  z-index: 30;
}

.emoji-burst .emoji{
  position:absolute;
  font-size: 52px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  animation: emoji-float 1000ms ease-out forwards;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

@keyframes emoji-float{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  20%{
    opacity: 1;
    transform: translate(calc(-50% + var(--dx) * 0.25), calc(-50% + var(--dy) * 0.25)) scale(1.05);
  }
  100%{
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.25);
  }
}

.card{
  position:absolute;
  inset:0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
  touch-action: none;
  transform: translateZ(0);
}

.card .media{
  height: 100%;
  background: #0e1018;
  position:relative;
}
.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}

.badge{
  z-index:2;
  position:absolute;
  top:16px; left:16px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight:700;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.badge.love{ color: var(--love); }
.badge.no{ color: var(--no); }

.card .meta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding: 18px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.75) 100%);
  z-index:2;
}
.model{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.model h3{
  color: white;
  margin:0;
  font-size:22px;
  letter-spacing:.2px;
}
.small{
  font-size:12px;
  color:var(--muted);
}

.bio{
  margin:0;
  color: rgba(243,244,246,.92);
  font-size:14px;
  line-height:1.35;
}

.controls{
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:center;
}

.btn{
  width:64px;
  height:64px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.9);
  color: var(--text);
  font-size: 28px;
  cursor:pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  transition: transform .08s ease, background .15s ease;
}
.btn:active{ transform: scale(.97); }
.btn-love{ border-color: rgba(255,45,85,.45); }
.btn-no{ border-color: rgba(154,163,178,.35); }

.btn-reset{
  width:auto;
  padding: 12px 16px;
  font-size: 14px;
}

.footer{
  text-align:center;
  color: var(--muted);
  font-size: 12px;
}

.hint{opacity:.9}

.done{
  text-align:center;
  padding: 22px 16px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  width: 100%;
}

.hidden{display:none}