@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');
.woofie-game{max-width:720px;margin:20px auto;padding:16px;border-radius:16px;text-align:center;font-family:'Quicksand',sans-serif;background:linear-gradient(135deg,#ff9a9e,#fad0c4);color:#222;position:relative;box-shadow:0 10px 24px rgba(0,0,0,.08);}
.woofie-canvas-container{position:relative;width:100%;min-height:280px;}
.woofie-canvas-container canvas{position:absolute;inset:0;width:100%;height:100%;}
.woofie-statusbar{position:absolute;top:10px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;}
.woofie-score,.woofie-attempts{background:#ffffffcc;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.95rem;pointer-events:auto;}
.woofie-mute-btn{position:absolute;top:10px;left:10px;background:#ffffffcc;border:none;border-radius:8px;width:40px;height:40px;font-size:1.2rem;cursor:pointer;}
.woofie-options{margin-top:14px;}
.woofie-button{background:#fff;border:2px solid #5C9BF3;color:#214;border-radius:999px;padding:10px 14px;margin:6px;cursor:pointer;font-size:1rem;transition:transform .08s ease,background .2s ease,color .2s ease;}
.woofie-button:active{transform:translateY(1px) scale(.99);}
.woofie-button.is-correct{background:#5C9BF3;color:#fff;}
.woofie-button.is-wrong{background:#ffccd5;border-color:#ff6b81;}
.woofie-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:9999;}
.woofie-modal-card{width:90%;max-width:520px;background:#fff;border-radius:16px;padding:20px;box-shadow:0 20px 40px rgba(0,0,0,.2);text-align:center;}
.woofie-congrats-img{width:140px;height:auto;display:block;margin:0 auto 10px auto;}
.woofie-final-actions{display:flex;gap:10px;justify-content:center;margin-top:8px;flex-wrap:wrap;}
.woofie-restart{background:#fff;border:2px solid #22c55e;color:#065f46;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;}
.woofie-home{background:#fff;border:2px solid #3b82f6;color:#1d4ed8;border-radius:12px;padding:10px 14px;font-weight:700;text-decoration:none;display:inline-block;}


/* === Woofie Shapes: feedback overlay (v1.5.4) === */
#woofie-shapes-feedback{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 9999;
}
#woofie-shapes-feedback.show{ opacity: 1; }
#woofie-shapes-feedback .card{
  padding: 24px 36px;
  border-radius: 18px;
  font-family: "Baloo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 56px);
  color: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transform: scale(.97);
  animation: woofie-fb-pop .18s ease-out forwards;
}
#woofie-shapes-feedback.correct .card{ background: linear-gradient(180deg,#6fbf7f,#a7d7b5); }
#woofie-shapes-feedback.incorrect .card{ background: linear-gradient(180deg,#c96e6e,#e8a2a2); }
@keyframes woofie-fb-pop{
  from{ transform: scale(.97); }
  to{ transform: scale(1); }
}