body, html { margin:0; padding:0; font-family:'Quicksand',sans-serif; background:#f0f8ff; }

/* HOST Screen */
.bbr-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #d1f3ff, #fffafc);
  min-height: 100vh;
}

.host-box {
  background: #fff;
  border-radius: 20px;
  padding: 40px 30px;
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 188, 212, 0.15);
  border: 6px solid transparent;
  animation: pulseBorder 3s infinite alternate;
}

@keyframes pulseBorder {
  0% { border-color: #e0f7fa; }
  100% { border-color: #b2ebf2; }
}

.gender-options {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  gap: 20px;
}

.gender-radio {
  position: relative;
  padding: 14px 24px;
  border-radius: 12px;
  background: #e0f7fa;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  user-select: none;
}

.gender-radio input[type="radio"] {
  display: none;
}

.gender-radio span {
  pointer-events: none;
}

.gender-radio.boy.selected {
  background: #bbdefb;
  border-color: #2196f3;
}

.gender-radio.girl.selected {
  background: #f8bbd0;
  border-color: #e91e63;
}

.gender-radio.twins.selected {
  background: #c8e6c9;
  border-color: #4caf50;
}

.link-area {
  margin-top: 30px;
}

#generated-link {
  width: 100%;
  padding: 12px;
  font-size: 1em;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.btn-wrap {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.animated-btn {
  animation: popBtn 1.5s infinite;
}

.bbr-container { width:100%; min-height:100vh; height:auto; position:relative; overflow:hidden; }
.bbr-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* allows natural top-down layout */
  padding: 20px;
  position: relative; /* remove absolute positioning */
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh; /* still ensures it takes full screen if needed */
}
.bbr-start-box {
  border: 0.5px solid #2196f3;
  border-radius: 16px;
  background: linear-gradient(135deg, #e3f2fd, #ffffff); /* soft gradient */
  padding: 40px 20px;
  margin: 30px auto;
  max-width: 600px;
  box-shadow: 0 0 16px rgba(33, 150, 243, 0.1);
  text-align: center;
}
.bbr-screen.active { display:flex; animation:fadeIn 0.6s ease; }
.animated-title { font-size:2.5em; animation:float 3s ease-in-out infinite; color:#2196f3; }
.bbr-btn { padding:14px 28px; background:#00bcd4; color:#fff; font-size:1.2em; border:none; border-radius:12px; cursor:pointer; box-shadow:0 0 8px rgba(0,188,212,0.7); animation:popBtn 1.5s infinite; margin-top: 20px; }
@keyframes popBtn { 50% { transform:scale(1.05); } }
@keyframes float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);} }
.bbr-status { position:absolute; top:15px; left:15px; right:15px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:#333; font-size:1.1em; user-select: none;
  -webkit-user-select: none; /* For Safari */
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none; }
.score-wrap, .timer-wrap { flex:1 1 45%; min-width:140px; }
.bar-wrap { width:100%; height:14px; background:#ddd; border-radius:7px; overflow:hidden; margin-top:5px; box-shadow:inset 0 0 3px #aaa; }
#bbr-score-bar, #bbr-timer-bar { height:100%; width:0; background:linear-gradient(90deg,#4caf50,#2196f3); transition:width 0.3s ease; }
.bbr-bath-area { flex-grow:1; width:100%; height: 100%; position:relative; overflow:hidden; }
.bbr-tub { position:absolute; bottom:-50px; left:50%; transform:translateX(-50%); width:60%; max-width:500px; opacity:0.8; pointer-events:none; user-select: none;
  -webkit-user-select: none; /* For Safari */
  -moz-user-select: none;
  -ms-user-select: none; }

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #b2ebf2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  transition: opacity 0.4s ease;
  animation: rise 6s linear forwards;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.bubble span {
  display: inline-block;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* this forces GPU rendering of the emoji */
  pointer-events: none;
}

@keyframes rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-120vh) scale(1); opacity: 0; }
}

.bbr-reveal {
  background: linear-gradient(135deg, #2196f3, #e91e63);
  color: #fff;
  padding: 60px 20px 40px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.bbr-reveal {
  display: none !important;
}

/* Show only when it's the active screen */
.bbr-reveal.active {
  display: flex !important;
}

.bbr-reveal-box {
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  animation: fadeInUp 0.8s ease;
  width: 100%;
  max-width: 500px;
}

@keyframes fadeInUp { from {opacity:0; transform:translateY(40px);} to {opacity:1; transform:translateY(0);} }

.bbr-result { font-size:3.2em; font-weight:bold; text-shadow:0 0 8px rgba(255,255,255,0.7); margin-bottom:10px; margin-top: -30px; }
.reveal-msg { font-size:1.4em; margin-bottom:12px; color: #fff !important; font-weight: bold;}

.bbr-analytics {
  background: rgba(255,255,255,0.15);
  padding: 20px;
  border-radius: 16px;
  text-align: left;
  font-size: 1em;
  margin: 20px auto;
  animation: bounceIn 1s ease;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

@keyframes bounceIn {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.bbr-analytics ul { list-style:none; padding:0; margin:0; }
.bbr-analytics li { margin:4px 0; }

.bbr-share-text {
  font-size: 1.4em;
  margin-top: 24px;
  margin-bottom: 10px;
  color: #fff !important;
  font-weight: bold;
  display: none; /* hidden by default, shown if reveal is successful */
}

.bbr-share a { display:inline-block; margin:6px; background:#2196f3; color:#fff; padding:10px 20px; border-radius:6px; text-decoration:none; transition:background .3s; }
.bbr-share a:hover { background:#1976d2; }

.bbr-result {
  font-size: 3.2em;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
  margin-top: -30px;
  animation: pulseReveal 1.8s infinite ease-in-out;
}

@keyframes pulseReveal {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.9; }
}

.bbr-confetti {
  position: fixed;
  top: -20px;
  width: 14px;
  height: 14px;
  z-index: 9999;
  border-radius: 4px;
  opacity: 0.9;
  animation: confettiFall 2.8s ease-out forwards;
  pointer-events: none;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

body.td-animation-stack-type0 .td-animation-stack .entry-thumb, body.td-animation-stack-type0 .post img:not(.woocommerce-product-gallery img):not(.rs-pzimg), body.td-animation-stack-type0 .td-animation-stack .td-lazy-img {
	opacity: 1 !important;
}

@media(max-width:600px) { 
	.bbr-status{ flex-direction:column; }
	.gender-options {
		flex-direction: column;
		align-items: center;
	  }

  .gender-radio {
    width: 70%;
    max-width: 300px;
    text-align: center;
  }
}