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

body{
font-family:'Baloo 2','Arial',sans-serif;

background:
radial-gradient(circle at 15% 20%, rgba(255,255,255,.7) 0 35px, transparent 36px),
radial-gradient(circle at 85% 15%, rgba(255,255,255,.7) 0 45px, transparent 46px),
linear-gradient(
135deg,
#7ec8f2,
#a8ddf0,
#fff4c4,
#ffd6e8,
#c2f0d0
);
background-attachment:fixed;

padding:20px;
text-align:center;
position:relative;
overflow-x:hidden;
}

h1{
font-size:28px;
color:#ff69b4;
margin-bottom:6px;
}

.page-subtitle{
color:#888;
font-size:15px;
margin-bottom:18px;
}

/* ===== Dekorasi bintang background ===== */
.page-deco{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
overflow:hidden;
}

.deco-star{
position:absolute;
color:#ffd966;
opacity:.5;
font-size:22px;
animation:starPulse 3s ease-in-out infinite;
}

.s1{ top:8%; left:10%; animation-delay:0s; }
.s2{ top:15%; right:12%; animation-delay:1s; font-size:16px; }
.s3{ top:60%; left:6%; animation-delay:2s; font-size:18px; }

@keyframes starPulse{
0%,100%{transform:scale(1); opacity:.3;}
50%{transform:scale(1.3); opacity:.7;}
}

/* ===== Canvas mewarnai ===== */
.canvas-frame{
position:relative;
background:white;
border-radius:22px;
padding:12px;
max-width:520px;
margin:0 auto 20px;
box-shadow:0 6px 20px rgba(0,0,0,.12);
border:4px dashed #ffd1e3;
}

.zoom-controls{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:10px;
}

.zoom-controls button{
width:38px;
height:38px;
border:none;
border-radius:10px;
background:#fff0f6;
font-size:16px;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,.12);
transition:.2s;
}

.zoom-controls button:hover{
background:#ffd1e3;
transform:translateY(-2px);
}

.canvas-scroll{
overflow:auto;
max-width:100%;
border-radius:12px;
touch-action:pan-x pan-y;
-webkit-overflow-scrolling:touch;
}

.canvas-frame canvas{
display:block;
border-radius:12px;
cursor:pointer;
touch-action:pan-x pan-y;
}

.loading-msg{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#aaa;
font-size:16px;
}

.palette{
display:flex;
align-items:center;
gap:12px;
max-width:480px;
margin:0 auto 20px;
position:relative;
z-index:1;
overflow-x:auto;
overflow-y:hidden;
padding:8px 14px;
scroll-snap-type:x proximate;
-webkit-overflow-scrolling:touch;
}

.palette::-webkit-scrollbar{
height:6px;
}

.palette::-webkit-scrollbar-thumb{
background:#ffd1e6;
border-radius:10px;
}

.color-dot{
flex:0 0 auto;
width:44px;
height:44px;
border-radius:10px;
border:3px solid white;
box-shadow:0 3px 8px rgba(0,0,0,.18);
cursor:pointer;
transition:.2s;
scroll-snap-align:center;
}

.color-dot.selected{
border-color:#ff69b4;
transform:scale(1.15);
box-shadow:0 0 0 3px rgba(255,105,180,.3), 0 3px 8px rgba(0,0,0,.18);
}

.action-buttons{
display:flex;
justify-content:center;
align-items:flex-start;
gap:14px;
margin-bottom:20px;
position:relative;
z-index:1;
flex-wrap:wrap;
}

.action-buttons button{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
width:72px;
height:72px;
border:none;
border-radius:18px;
cursor:pointer;
font-family:'Baloo 2','Arial',sans-serif;
font-size:10px;
font-weight:700;
line-height:1;
transition:.15s;
padding:0;
}

.action-buttons button:active{
transform:scale(0.93);
}

.action-buttons button .btn-ico{
font-size:28px;
line-height:1;
display:block;
}

#btnUndo{ background:#dceffe; color:#0c447c; }
#btnReset{ background:#fde8e8; color:#a32d2d; }
#btnDone{ background:#e8f5e9; color:#27500a; }

.btn-back{
display:block;
width:fit-content;
margin:4px auto 18px;
padding:12px 25px;
background:white;
color:#ff69b4;
border:2px solid #ff69b4;
text-decoration:none;
border-radius:14px;
font-weight:bold;
font-family:'Baloo 2','Arial',sans-serif;
transition:.25s;
position:relative;
z-index:1;
}

.btn-back:hover{
background:#ff69b4;
color:white;
transform:translateY(-2px);
}

.card{
background:white;
padding:25px;
border-radius:20px;
margin:20px auto;
max-width:400px;
box-shadow:0 4px 10px rgba(0,0,0,.1);
font-size:18px;
color:#888;
}

/* ===== Confetti saat selesai ===== */
.confetti-layer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:999;
}

.confetti-piece{
position:absolute;
top:-30px;
width:10px;
height:10px;
border-radius:3px;
animation:confettiFall 2s ease-in forwards;
}

@keyframes confettiFall{
0%{
transform:translateY(0) rotate(0deg);
opacity:1;
}
100%{
transform:translateY(110vh) rotate(360deg);
opacity:.3;
}
}

/* ===== Mini Game: Tebak Warna ===== */
.game-question{
font-size:22px;
font-weight:bold;
color:#444;
margin-bottom:20px;
}

.color-options{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
max-width:420px;
margin:0 auto 20px;
}

.color-box{
width:70px;
height:70px;
border-radius:16px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,.15);
transition:.2s;
}

.color-box:hover{
transform:scale(1.08);
}

.game-feedback{
font-size:20px;
font-weight:bold;
min-height:30px;
margin-bottom:10px;
}

/* ===== Tombol Musik (sama seperti halaman lain) ===== */
#musicToggle{
position:fixed;
bottom:20px;
right:20px;
width:50px;
height:50px;
border-radius:50%;
border:none;
background:white;
box-shadow:0 4px 12px rgba(0,0,0,.2);
font-size:22px;
cursor:pointer;
z-index:100;
transition:.25s;
animation:musicBounce 1.4s ease-in-out infinite;
}

@keyframes musicBounce{
0%,100%{transform:scale(1);}
50%{transform:scale(1.15);}
}

#musicToggle:hover{
transform:scale(1.1);
animation:none;
}

@media(max-width:480px){
h1{
font-size:24px;
}
.color-dot{
width:38px;
height:38px;
}
.color-box{
width:60px;
height:60px;
}
}