@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700&display=swap');

:root{
  --bg1:#fff3e0;
  --bg2:#ffe0ec;
  --accent:#ff6f91;
  --accent2:#ffb84c;
  --text:#4a3b52;
  --card:#ffffff;
}
body.blue-mode{
  --bg1:#e0f7ff; --bg2:#d0eaff; --accent:#2ec4f1; --accent2:#7ef9ff; --text:#1c3b4d; --card:#ffffff;
}
body.theme-orange{
  --bg1:#fff0dc; --bg2:#ffdca8; --accent:#ff9f1c; --accent2:#ff6f3c; --text:#4a2e00; --card:#fffaf0;
}
body.theme-green{
  --bg1:#e8fff0; --bg2:#c8ffdb; --accent:#2ecc71; --accent2:#00b894; --text:#0b3d24; --card:#ffffff;
}
body.theme-pink{
  --bg1:#ffe6f5; --bg2:#ffcdea; --accent:#ff2fb2; --accent2:#ff6fc9; --text:#4a0035; --card:#ffffff;
}
body.theme-dark{
  --bg1:#2a2a2e; --bg2:#3a3a40; --accent:#ffb84c; --accent2:#ff6f91; --text:#f0f0f0; --card:#3a3a40;
}

*{box-sizing:border-box; margin:0; padding:0; font-family:'Nunito', sans-serif;}
html{ transition: transform 0.6s ease; }
html.flipped{ transform: rotate(180deg); }
body{
  background:linear-gradient(160deg, var(--bg1), var(--bg2));
  color:var(--text);
  min-height:100vh;
  transition: background 0.8s ease, color 0.8s ease;
  overflow-x:hidden;
  position:relative;
}

.site-header{ text-align:center; padding:1.6rem 2rem; }
.logo{ font-family:'Baloo 2', sans-serif; font-size:1.7rem; font-weight:800; color:var(--text); }
.dot{ color:var(--accent); }

.hero{ text-align:center; padding:2.5rem 1.5rem 1.5rem; position:relative; }
.hero-doodle{ position:absolute; top:0.5rem; left:50%; font-size:1.6rem; transform:translateX(-3rem); animation:sparkle 2s ease infinite; }
@keyframes sparkle{ 0%,100%{ opacity:0.4; transform:translateX(-3rem) scale(1); } 50%{ opacity:1; transform:translateX(-3rem) scale(1.3); } }

.hero h1{
  font-family:'Baloo 2', sans-serif;
  font-size:3rem; font-weight:800; letter-spacing:-1px;
  color:var(--accent);
  text-shadow:2px 3px 0 rgba(0,0,0,0.06);
}
.subtitle{ margin-top:0.7rem; font-size:1.05rem; opacity:0.75; max-width:480px; margin-inline:auto; }

.hero-box{
  margin-top:1.8rem; display:flex; justify-content:center; gap:0.6rem; flex-wrap:wrap;
}
#linkInput{
  padding:0.9rem 1.3rem; width:280px; max-width:70vw;
  border-radius:30px; border:2px solid var(--accent); outline:none;
  font-size:1rem; font-family:inherit; background:var(--card); color:var(--text);
}
.cta{
  padding:0.9rem 1.8rem; background:var(--accent); color:#fff; border:none; border-radius:30px;
  font-size:1rem; font-weight:800; cursor:pointer; transition:0.25s;
  font-family:'Baloo 2', sans-serif; box-shadow:0 6px 16px rgba(255,111,145,0.35);
}
.cta:hover{ transform:translateY(-3px) scale(1.04); }
.cta.small{ padding:0.55rem 1.3rem; font-size:0.9rem; }
.cta.ghost{ background:transparent; border:2px solid var(--accent); color:var(--accent); box-shadow:none; }
.cta:disabled{ opacity:0.6; cursor:wait; }
.result{ margin-top:1.3rem; font-size:1.2rem; font-weight:700; min-height:1.8rem; color:var(--accent2); }

.game-bubble{ max-width:640px; margin:2.2rem auto 0; padding:0 1.5rem; }
.bubble-content{
  background:var(--card); border-radius:28px; padding:1.5rem 1.7rem;
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  border:3px dashed var(--accent2);
}
.bubble-emoji{ font-size:2.6rem; animation:bounce 2s ease infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.bubble-text{ flex:1; min-width:180px; }
.bubble-text h2{ font-family:'Baloo 2', sans-serif; font-size:1.3rem; color:var(--accent); }
.bubble-text p{ font-size:0.88rem; opacity:0.75; margin-top:0.2rem; }
.bubble-score{ display:block; margin-top:0.4rem; font-size:0.85rem; font-weight:700; }
.bubble-btn{ flex-shrink:0; }

.fun-zone{ max-width:1000px; margin:2.8rem auto 1rem; padding:0 1.5rem; text-align:center; }
.fun-title{ font-family:'Baloo 2', sans-serif; font-size:1.4rem; margin-bottom:1.8rem; color:var(--text); }

.notes-wall{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem 1.8rem;
}
.sticky-note{
  position:relative; width:180px; min-height:150px;
  border-radius:14px;
  padding:1.4rem 1rem 1rem;
  box-shadow:0 8px 18px rgba(0,0,0,0.1);
  cursor:pointer; transition:transform 0.25s ease, box-shadow 0.25s ease;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.4rem;
}
.sticky-note:nth-child(1){ transform:rotate(-3deg); background:#fff3b0; }
.sticky-note:nth-child(2){ transform:rotate(2deg); background:#ffd6e8; }
.sticky-note:nth-child(3){ transform:rotate(-2deg); background:#c8f0ff; }
.sticky-note:nth-child(4){ transform:rotate(3deg); background:#d4ffd6; }
.sticky-note:nth-child(5){ transform:rotate(-2deg); background:#ffe1c2; }
.sticky-note:nth-child(6){ transform:rotate(2deg); background:#e6d6ff; }
.sticky-note:hover{ transform:scale(1.07) rotate(0deg); box-shadow:0 14px 26px rgba(0,0,0,0.15); z-index:2; }
.sticky-note.flipped{ background:var(--accent); color:#fff; }
.note-pin{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:1.1rem; }
.note-icon{ font-size:1.9rem; }
.note-title{ font-family:'Baloo 2', sans-serif; font-size:0.92rem; font-weight:700; }
.note-text{ font-size:0.8rem; line-height:1.35; display:none; }
.sticky-note.flipped .note-title{ display:none; }
.sticky-note.flipped .note-icon{ display:none; }
.sticky-note.flipped .note-text{ display:block; }

.util-panel{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0.8rem;
  max-width:700px; margin:2.5rem auto 0; padding:0 1.5rem;
}
.util-item{ display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:700; }
.util-select{
  padding:0.5rem 0.9rem; border-radius:20px; border:2px solid var(--accent);
  font-size:0.85rem; background:var(--card); color:var(--text); cursor:pointer; font-family:inherit;
}
.util-btn{
  padding:0.55rem 1.2rem; border-radius:20px; border:2px solid var(--accent);
  font-size:0.85rem; font-weight:700; cursor:pointer; background:var(--card); color:var(--text);
  transition:0.2s; font-family:inherit;
}
.util-btn:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }

.footer-note{ text-align:center; padding:2.2rem 1rem 1rem; opacity:0.75; font-size:0.95rem; }
.secret-hint{ opacity:0.55; font-size:0.82rem; margin-top:0.3rem; }
.site-footer{ text-align:center; padding:1.5rem; opacity:0.55; font-size:0.85rem; }

.poppetje{
  position:absolute; width:26px; opacity:0.15; cursor:pointer;
  filter:grayscale(100%); transition:0.3s; z-index:5;
}
.poppetje:hover{opacity:0.6;}
.poppetje.found{opacity:0 !important; pointer-events:none;}

.game-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.game-overlay.hidden{ display:none; }
.game-modal{
  background:var(--card); border-radius:24px; padding:2rem; max-width:600px; width:90%;
  text-align:center; position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
.close-btn{
  position:absolute; top:1rem; right:1rem; background:none; border:none;
  color:var(--text); font-size:1.5rem; cursor:pointer;
}
.game-stats{ display:flex; justify-content:center; gap:1.5rem; align-items:center; margin:1rem 0; flex-wrap:wrap; }
.game-arena{
  position:relative; height:280px; background:rgba(0,0,0,0.04);
  border-radius:16px; overflow:hidden;
}
.game-target{
  position:absolute; font-size:2rem; cursor:pointer; user-select:none;
  animation:pop 0.3s ease;
}
@keyframes pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

#confettiCanvas{ position:fixed; inset:0; pointer-events:none; z-index:200; }
#confettiCanvas canvas{ position:absolute; top:0; left:0; width:100%; height:100%; }
.hidden{ display:none; }

@media (max-width:600px){
  .sticky-note{ width:44%; }
  .hero h1{ font-size:2.2rem; }
}