@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(135deg, #fce4ec, #e8eaf6, #e0f7fa, #fff3e0, #f3e5f5);
  background-size: 400% 400%;
  animation: gradientMove 20s ease infinite;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body.disco-active {
  animation: discoBackground 0.5s linear infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes discoBackground {
  0% { background-color: #ff0000; }
  16% { background-color: #ff8800; }
  33% { background-color: #ffff00; }
  50% { background-color: #00ff00; }
  66% { background-color: #0088ff; }
  83% { background-color: #8800ff; }
  100% { background-color: #ff0000; }
}

/* Rainbow bars - gentle */
.rainbow-bar {
  height: 6px;
  background: linear-gradient(90deg, #ff9a9e, #fad0c4, #a8edea, #fed6e3, #d4fc79, #fbc2eb);
  background-size: 200% 100%;
  animation: rainbowSlide 6s linear infinite;
}

.top-rainbow {
  position: sticky;
  top: 0;
  z-index: 100;
}

.bottom-rainbow {
  position: relative;
  z-index: 100;
}

@keyframes rainbowSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Soft rainbow border for cards */
.rainbow-border {
  border: 3px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.rainbow-border::before {
  content: "";
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  background: linear-gradient(90deg, #ff9a9e, #fad0c4, #a8edea, #fed6e3, #d4fc79, #fbc2eb, #ff9a9e);
  background-size: 300% 100%;
  animation: rainbowSlide 8s linear infinite;
  border-radius: 28px;
  z-index: -1;
}

/* Floating stickers */
.sticker {
  position: fixed;
  font-size: 2rem;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.sticker-1 { top: 5%; left: 3%; animation-delay: 0s; font-size: 2.5rem; }
.sticker-2 { top: 15%; right: 5%; animation-delay: 1s; font-size: 2rem; }
.sticker-3 { top: 30%; left: 8%; animation-delay: 2s; font-size: 1.8rem; }
.sticker-4 { top: 45%; right: 3%; animation-delay: 0.5s; font-size: 2.2rem; }
.sticker-5 { top: 60%; left: 2%; animation-delay: 1.5s; font-size: 2rem; }
.sticker-6 { top: 75%; right: 7%; animation-delay: 2.5s; font-size: 1.9rem; }
.sticker-7 { top: 10%; left: 50%; animation-delay: 3s; font-size: 2.1rem; }
.sticker-8 { top: 85%; left: 10%; animation-delay: 0.8s; font-size: 2.3rem; }
.sticker-9 { top: 50%; left: 92%; animation-delay: 1.2s; font-size: 2rem; }
.sticker-10 { top: 90%; right: 15%; animation-delay: 2.2s; font-size: 2.4rem; }
.sticker-11 { top: 35%; left: 93%; animation-delay: 1.8s; font-size: 2rem; }
.sticker-12 { top: 70%; left: 50%; animation-delay: 0.3s; font-size: 2.5rem; }
.sticker-13 { top: 25%; left: 45%; animation-delay: 1.3s; font-size: 1.8rem; }
.sticker-14 { top: 55%; right: 10%; animation-delay: 0.7s; font-size: 2.1rem; }
.sticker-15 { top: 80%; left: 40%; animation-delay: 2.8s; font-size: 1.9rem; }
.sticker-16 { top: 40%; left: 4%; animation-delay: 0.4s; font-size: 2rem; }
.sticker-17 { top: 65%; right: 4%; animation-delay: 1.7s; font-size: 2.3rem; }
.sticker-18 { top: 20%; right: 12%; animation-delay: 2.1s; font-size: 1.7rem; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-15px) rotate(5deg); }
  50% { transform: translateY(-25px) rotate(-3deg); }
  75% { transform: translateY(-10px) rotate(4deg); }
}

/* Header */
header {
  text-align: center;
  padding: 50px 20px 30px;
  position: relative;
  z-index: 1;
}

header h1 {
  font-family: 'Fredoka One', cursive;
  font-size: 3rem;
  color: #ff6b9d;
  text-shadow: 2px 2px 0 #fff;
}

.subtitle {
  font-size: 1.3rem;
  color: #7c4dff;
  margin-top: 10px;
  font-weight: 700;
}

.crown-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: #ff9100;
  margin-top: 5px;
}

/* Main content */
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 1;
}

/* Piano */
.music-zone h2 { color: #7c4dff; }

.piano {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  position: relative;
  height: 220px;
  user-select: none;
  -webkit-user-select: none;
  max-width: 100%;
  overflow-x: auto;
  touch-action: none;
}

.piano-key {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.08s;
  border-radius: 0 0 10px 10px;
}

.piano-key span {
  pointer-events: none;
}

.white-key {
  width: 52px;
  height: 220px;
  background: linear-gradient(180deg, #f0f0f0, #fff);
  border: 2px solid #ccc;
  color: #bbb;
  z-index: 1;
  margin: 0 1px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.white-key:hover {
  background: linear-gradient(180deg, #d1c4e9, #f3e5f5);
}

.white-key:active {
  background: linear-gradient(180deg, #b39ddb, #d1c4e9);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.15);
}

.black-key {
  width: 34px;
  height: 140px;
  background: linear-gradient(180deg, #1a1a1a, #333);
  border: 2px solid #000;
  color: #666;
  z-index: 2;
  margin: 0 -17px;
  font-size: 0.6rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.black-key:hover {
  background: linear-gradient(180deg, #333, #4a4a4a);
}

.black-key:active {
  background: linear-gradient(180deg, #555, #666);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}

/* Violin picture */
.violin-zone h2 { color: #c62828; }

.violin-picture {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  position: relative;
  width: 160px;
}

/* Scroll */
.vp-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.vp-head {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 40% 40%, #a1887f, #5d4037);
  border-radius: 50% 50% 20% 20%;
  border: 2px solid #4e342e;
}

.vp-pegbox {
  width: 30px;
  height: 50px;
  background: linear-gradient(180deg, #5d4037, #6d4c41);
  position: relative;
  border-left: 2px solid #4e342e;
  border-right: 2px solid #4e342e;
}

.vp-peg {
  width: 18px;
  height: 6px;
  background: #3e2723;
  border-radius: 3px;
  position: absolute;
  left: -12px;
}

.vp-peg:nth-child(1) { top: 8px; }
.vp-peg:nth-child(2) { top: 24px; }
.vp-peg.right { left: auto; right: -12px; }
.vp-peg:nth-child(3) { top: 16px; }
.vp-peg:nth-child(4) { top: 32px; }

.vp-neck {
  width: 24px;
  height: 60px;
  background: linear-gradient(180deg, #5d4037, #6d4c41);
  border-left: 2px solid #4e342e;
  border-right: 2px solid #4e342e;
}

/* Body */
.vp-body {
  width: 140px;
  height: 200px;
  background: radial-gradient(ellipse at 50% 40%, #d4a054, #b8860b, #8b6914);
  border-radius: 30px 30px 40px 40px;
  position: relative;
  box-shadow: inset 0 0 25px rgba(0,0,0,0.2), 0 8px 25px rgba(0,0,0,0.3);
  border: 2px solid #8b6914;
  overflow: hidden;
}

.vp-bout {
  position: absolute;
  width: 20px;
  height: 40px;
  background: rgba(255,255,255,0.05);
}

.vp-bout.top.left { top: 15px; left: -5px; border-radius: 0 50% 50% 0; background: transparent; border-right: 3px solid rgba(0,0,0,0.15); }
.vp-bout.top.right { top: 15px; right: -5px; border-radius: 50% 0 0 50%; background: transparent; border-left: 3px solid rgba(0,0,0,0.15); }
.vp-bout.bottom.left { bottom: 30px; left: -5px; border-radius: 0 50% 50% 0; background: transparent; border-right: 3px solid rgba(0,0,0,0.15); }
.vp-bout.bottom.right { bottom: 30px; right: -5px; border-radius: 50% 0 0 50%; background: transparent; border-left: 3px solid rgba(0,0,0,0.15); }

.vp-waist {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 30px;
  pointer-events: none;
}

.vp-fhole {
  position: absolute;
  font-family: 'Times New Roman', serif;
  font-size: 2.2rem;
  font-style: italic;
  color: #3e2723;
  opacity: 0.6;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.vp-fhole.left { left: 20px; }
.vp-fhole.right { right: 20px; transform: translateY(-50%) scaleX(-1); }

.vp-bridge {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  background: #d7ccc8;
  border-radius: 3px 3px 0 0;
  border: 1px solid #bcaaa4;
}

.vp-tailpiece {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 35px;
  background: #3e2723;
  border-radius: 5px 5px 10px 10px;
}

.vp-strings {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  height: 100%;
  align-items: stretch;
  padding: 10px 0 20px;
}

.vp-s {
  width: 2px;
  background: linear-gradient(180deg, #e0e0e0, #bdbdbd, #e0e0e0);
  border-radius: 1px;
  box-shadow: 0 0 2px rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 0 8px;
  background-clip: content-box;
  transition: box-shadow 0.1s;
}

.vp-s:hover {
  box-shadow: 0 0 8px rgba(255,255,255,0.8);
}

.vp-s:active {
  animation: vibrate 0.1s linear 3;
}

@keyframes vibrate {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.vp-s:first-child { width: 3px; }

.vp-chinrest {
  position: absolute;
  bottom: -5px;
  left: 10px;
  width: 35px;
  height: 25px;
  background: #3e2723;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* DJ Deck */
.dj-zone h2 { color: #e040fb; }

.dj-deck {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  border-radius: 20px;
  padding: 25px;
  margin-top: 15px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5), 0 8px 25px rgba(0,0,0,0.3);
}

.dj-turntable-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.dj-turntable {
  text-align: center;
}

.dj-record {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, #333 20%, #111 22%, #222 40%, #111 42%, #1a1a1a 60%, #111 62%, #0a0a0a 100%);
  margin: 0 auto;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  transition: box-shadow 0.3s;
}

.dj-record.spinning {
  animation: spin 1.5s linear infinite;
  box-shadow: 0 0 20px rgba(224,64,251,0.5);
}

.dj-record-label {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e040fb, #7c4dff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka One', cursive;
  font-size: 0.45rem;
  color: white;
  z-index: 2;
}

.dj-record-groove {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
}

.dj-record-groove { width: 70px; height: 70px; }
.dj-record-groove.g2 { width: 95px; height: 95px; }
.dj-record-groove.g3 { width: 118px; height: 118px; }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.dj-tt-label {
  font-family: 'Fredoka One', cursive;
  color: #e0e0e0;
  font-size: 0.8rem;
  margin-top: 8px;
}

.dj-mixer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 100px;
}

.dj-slider-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dj-label {
  font-family: 'Fredoka One', cursive;
  color: #e040fb;
  font-size: 0.7rem;
  margin-bottom: 4px;
}

.dj-slider {
  width: 80px;
  accent-color: #e040fb;
}

.dj-value {
  font-family: 'Fredoka One', cursive;
  color: #aaa;
  font-size: 0.65rem;
  margin-top: 2px;
}

.dj-stop-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 0.75rem;
  background: #c62828;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s;
}

.dj-stop-btn:hover { transform: scale(1.1); }
.dj-stop-btn:active { transform: scale(0.95); }

.dj-pad-title {
  font-family: 'Fredoka One', cursive;
  color: #e0e0e0;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.dj-pads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 0 auto 15px;
}

.dj-pad {
  padding: 18px 8px;
  border-radius: 10px;
  text-align: center;
  font-family: 'Fredoka One', cursive;
  font-size: 0.75rem;
  color: white;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  user-select: none;
}

.dj-pad:hover {
  transform: scale(1.05);
}

.dj-pad:active {
  transform: scale(0.9);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.pad-red { background: linear-gradient(135deg, #e53935, #c62828); box-shadow: 0 4px 12px rgba(229,57,53,0.4); }
.pad-orange { background: linear-gradient(135deg, #ff9100, #e65100); box-shadow: 0 4px 12px rgba(255,145,0,0.4); }
.pad-yellow { background: linear-gradient(135deg, #ffd600, #f9a825); box-shadow: 0 4px 12px rgba(255,214,0,0.4); color: #333; }
.pad-green { background: linear-gradient(135deg, #00c853, #00895a); box-shadow: 0 4px 12px rgba(0,200,83,0.4); }
.pad-cyan { background: linear-gradient(135deg, #00acc1, #006064); box-shadow: 0 4px 12px rgba(0,172,193,0.4); }
.pad-blue { background: linear-gradient(135deg, #2979ff, #0d47a1); box-shadow: 0 4px 12px rgba(41,121,255,0.4); }
.pad-purple { background: linear-gradient(135deg, #7c4dff, #4a148c); box-shadow: 0 4px 12px rgba(124,77,255,0.4); }
.pad-pink { background: linear-gradient(135deg, #ff1493, #c51162); box-shadow: 0 4px 12px rgba(255,20,147,0.4); }

.dj-fx-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}

.dj-fx-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 0.8rem;
  background: linear-gradient(135deg, #37474f, #263238);
  color: #80deea;
  border: 1px solid #546e7a;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
}

.dj-fx-btn:hover {
  background: linear-gradient(135deg, #546e7a, #37474f);
  transform: scale(1.05);
}

.dj-fx-btn:active {
  transform: scale(0.95);
}

/* Cards */
.card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 25px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-3px);
}

.card h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.about-me h2 { color: #ff6b9d; }
.hobbies h2 { color: #7c4dff; }
.favorites h2 { color: #ff9100; }
.fun-zone h2 { color: #00c853; }
.bonus-zone h2 { color: #00b4d8; }
.secret-zone h2 { color: #e040fb; }
.ultra-zone h2 { color: #ff3d00; }

.card p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
}

/* Hobby grid */
.hobby-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.hobby-item {
  background: linear-gradient(135deg, #e8daef, #d5f5e3);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s;
  cursor: default;
}

.hobby-item:nth-child(1) { background: linear-gradient(135deg, #ffcccc, #ffe0cc); }
.hobby-item:nth-child(2) { background: linear-gradient(135deg, #ccccff, #e0ccff); }
.hobby-item:nth-child(3) { background: linear-gradient(135deg, #ccffcc, #ccffe0); }
.hobby-item:nth-child(4) { background: linear-gradient(135deg, #ffffcc, #fff0cc); }
.hobby-item:nth-child(5) { background: linear-gradient(135deg, #ffccff, #ffcce0); }
.hobby-item:nth-child(6) { background: linear-gradient(135deg, #ccffff, #cce0ff); }

.hobby-item:hover {
  transform: scale(1.1) rotate(3deg);
}

.hobby-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}

.hobby-name {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: #555;
}

/* Favorites grid */
.fav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.fav-item {
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s;
}

.fav-item:nth-child(1) { background: linear-gradient(135deg, #ffccbc, #ffecb3); }
.fav-item:nth-child(2) { background: linear-gradient(135deg, #b3e5fc, #b2dfdb); }
.fav-item:nth-child(3) { background: linear-gradient(135deg, #f8bbd0, #e1bee7); }

.fav-item:hover {
  transform: scale(1.1) rotate(-3deg);
}

.fav-emoji { font-size: 3rem; margin-bottom: 8px; }
.fav-label { font-family: 'Fredoka One', cursive; font-size: 0.85rem; color: #888; margin-bottom: 5px; }
.fav-value { font-family: 'Fredoka One', cursive; font-size: 1.1rem; color: #555; }

/* Button grids */
.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.button-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.surprise-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 0.95rem;
  color: white;
  border: none;
  padding: 14px 8px;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.surprise-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.surprise-btn:active {
  transform: scale(0.95);
}

/* All button colors */
.btn-pink { background: linear-gradient(135deg, #ff6b9d, #ff3d7f); }
.btn-purple { background: linear-gradient(135deg, #c44dff, #7c4dff); }
.btn-blue { background: linear-gradient(135deg, #00b4d8, #0077b6); }
.btn-green { background: linear-gradient(135deg, #00c853, #00e676); }
.btn-orange { background: linear-gradient(135deg, #ff9100, #ffab40); }
.btn-teal { background: linear-gradient(135deg, #00bcd4, #26c6da); }
.btn-hotpink { background: linear-gradient(135deg, #ff1493, #ff69b4); }
.btn-gold { background: linear-gradient(135deg, #ffd700, #ffb300); color: #333; }
.btn-lime { background: linear-gradient(135deg, #76ff03, #64dd17); color: #333; }
.btn-coral { background: linear-gradient(135deg, #ff6f61, #ff8a65); }
.btn-sky { background: linear-gradient(135deg, #87ceeb, #00bfff); }
.btn-violet { background: linear-gradient(135deg, #9c27b0, #e040fb); }
.btn-red { background: linear-gradient(135deg, #ff4444, #cc0000); }
.btn-mint { background: linear-gradient(135deg, #00e5ff, #1de9b6); }
.btn-sunset { background: linear-gradient(135deg, #ff6b35, #f7c59f); }
.btn-candy { background: linear-gradient(135deg, #ff6fff, #ff99cc); }
.btn-space { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }
.btn-rose { background: linear-gradient(135deg, #e91e63, #f48fb1); }
.btn-indigo { background: linear-gradient(135deg, #3f51b5, #7986cb); }
.btn-amber { background: linear-gradient(135deg, #ffab00, #ffd54f); color: #333; }
.btn-cyan { background: linear-gradient(135deg, #00acc1, #4dd0e1); }
.btn-brown { background: linear-gradient(135deg, #795548, #a1887f); }
.btn-peach { background: linear-gradient(135deg, #ffab91, #ff8a65); }
.btn-lavender { background: linear-gradient(135deg, #b39ddb, #9575cd); }
.btn-forest { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
.btn-cherry { background: linear-gradient(135deg, #c62828, #ef5350); }
.btn-ocean { background: linear-gradient(135deg, #0277bd, #4fc3f7); }
.btn-plum { background: linear-gradient(135deg, #6a1b9a, #ab47bc); }
.btn-sunshine { background: linear-gradient(135deg, #f9a825, #ffee58); color: #333; }
.btn-bubblegum { background: linear-gradient(135deg, #f06292, #f8bbd0); }
.btn-emerald { background: linear-gradient(135deg, #00695c, #4db6ac); }
.btn-grape { background: linear-gradient(135deg, #4a148c, #7e57c2); }
.btn-lemon { background: linear-gradient(135deg, #f0f4c3, #cddc39); color: #333; }
.btn-watermelon { background: linear-gradient(135deg, #e53935, #43a047); }

.btn-rainbow {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a8edea, #fed6e3, #d4fc79);
  background-size: 300% 300%;
  animation: gradientMove 5s ease infinite;
}

.btn-mega-rainbow {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a8edea, #fed6e3, #d4fc79, #fbc2eb);
  background-size: 400% 400%;
  animation: gradientMove 4s ease infinite;
  font-size: 1rem;
  grid-column: span 2;
}

.btn-disco {
  background: linear-gradient(135deg, #ce93d8, #80deea, #fff59d);
  background-size: 300% 300%;
  animation: gradientMove 2s ease infinite;
}

.btn-fireworks { background: linear-gradient(135deg, #1a237e, #ff6f00); }
.btn-hearts { background: linear-gradient(135deg, #ff1493, #ff69b4, #ffb6c1); }
.btn-stars { background: linear-gradient(135deg, #ffd700, #fff44f); color: #333; }

.btn-all {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a8edea, #fed6e3, #d4fc79, #fbc2eb);
  background-size: 400% 400%;
  animation: gradientMove 3s ease infinite;
  grid-column: span 3;
  font-size: 1.1rem;
  padding: 18px;
}

.surprise-message {
  font-size: 1.3rem;
  margin-top: 20px;
  min-height: 40px;
  animation: popIn 0.5s ease;
  padding: 10px;
  color: #444;
}

/* Effect elements */
.emoji-rain {
  position: fixed;
  font-size: 2rem;
  pointer-events: none;
  z-index: 9999;
  animation: fall 2s ease-in forwards;
}

@keyframes fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(100vh) rotate(360deg); }
}

.firework-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}

.heart-float {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: heartRise 3s ease-out forwards;
}

@keyframes heartRise {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80vh) scale(1.5); }
}

.star-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: starPop 1s ease-out forwards;
}

@keyframes starPop {
  0% { opacity: 1; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.5) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(360deg); }
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Button counter */
.button-counter {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: #888;
  margin-top: 10px;
}

/* Footer */
footer {
  text-align: center;
  padding: 30px;
  position: relative;
  z-index: 1;
}

footer p {
  font-family: 'Fredoka One', cursive;
  color: #7c4dff;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 600px) {
  header h1 { font-size: 1.8rem; }

  .hobby-grid,
  .fav-grid,
  .button-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .button-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .btn-mega-rainbow { grid-column: span 2; }
  .btn-all { grid-column: span 2; }

  .sticker { font-size: 1.5rem; }

  .piano {
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 10px;
  }

  .white-key {
    width: 38px;
    min-width: 38px;
    height: 160px;
  }

  .black-key {
    width: 26px;
    min-width: 26px;
    height: 100px;
    margin: 0 -13px;
  }
}