/* =============================================
   KidCraft Studio – style.css  (v2 full)
   ============================================= */
:root {
  --primary: #7c3aed;
  --primary-light: #a78bfa;
  --secondary: #f59e0b;
  --accent: #ec4899;
  --success: #10b981;
  --danger: #ef4444;
  --bg-dark: #1e1b4b;
  --text: #fff;
  --radius: 18px;
  --shadow: 0 8px 32px rgba(0,0,0,0.28);
  --panel-w: 210px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;font-family:'Nunito',sans-serif;
  background:var(--bg-dark);color:var(--text);overflow:hidden;user-select:none;}

/* ===== SCREENS ===== */
.screen{position:fixed;inset:0;display:none;}
.screen.active{display:flex;flex-direction:column;}

/* ===== LANDING ===== */
#landing-screen{
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,#4c1d95 100%);
  overflow:hidden;
}
.stars-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,#fff 1px,transparent 1px),
    radial-gradient(circle,#fff 1px,transparent 1px);
  background-size:80px 80px,120px 120px;
  background-position:0 0,40px 40px;
  opacity:.15;animation:twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.1}to{opacity:.25}}
.hero-content{text-align:center;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;}
.logo-badge{font-size:80px;line-height:1;filter:drop-shadow(0 0 24px #f59e0b88);}
.hero-title{font-family:'Fredoka One',cursive;font-size:clamp(2.2rem,5vw,4.5rem);
  letter-spacing:2px;text-shadow:0 4px 20px rgba(0,0,0,.4);}
.hero-title .highlight{background:linear-gradient(90deg,#f59e0b,#ec4899);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:1.15rem;color:#c4b5fd;font-weight:600;line-height:1.6;}

.sample-preview{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.preview-card{
  background:rgba(255,255,255,.1);backdrop-filter:blur(12px);
  border:2px solid rgba(255,255,255,.2);border-radius:var(--radius);
  padding:16px 22px;display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;transition:transform .25s,background .25s;
}
.preview-card:hover{background:rgba(255,255,255,.2);transform:scale(1.08);}
.preview-emoji{font-size:46px;}
.preview-card span{font-weight:800;font-size:1rem;}

.big-btn{padding:14px 38px;font-family:'Fredoka One',cursive;font-size:1.3rem;
  border:none;border-radius:50px;background:linear-gradient(135deg,#f59e0b,#ec4899);
  color:#fff;cursor:pointer;box-shadow:0 6px 24px rgba(236,72,153,.45);
  transition:transform .18s,box-shadow .18s;}
.big-btn:hover{transform:scale(1.06);box-shadow:0 10px 32px rgba(236,72,153,.6);}
.big-btn:active{transform:scale(.97);}

.bounce-anim{animation:bounce 2s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.float-anim{animation:floatUD 3s ease-in-out infinite;}
.delay1{animation-delay:.8s;}.delay2{animation-delay:1.6s;}.delay3{animation-delay:2.4s;}
@keyframes floatUD{0%,100%{transform:translateY(0)rotate(0deg)}50%{transform:translateY(-14px)rotate(6deg)}}
.pulse-anim{animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 6px 24px rgba(236,72,153,.45)}50%{box-shadow:0 10px 48px rgba(236,72,153,.85)}}

/* ===== GAME SCREEN ===== */
#game-screen{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);}
.top-bar{height:60px;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;gap:8px;flex-shrink:0;z-index:20;}
.btn-icon{font-size:1.45rem;background:none;border:none;cursor:pointer;
  padding:6px 9px;border-radius:10px;transition:background .15s,transform .15s;color:#fff;}
.btn-icon:hover{background:rgba(255,255,255,.15);transform:scale(1.15);}

.project-tabs{display:flex;gap:4px;flex-wrap:wrap;}
.tab-btn{padding:7px 14px;border-radius:50px;border:2px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;font-family:'Nunito',sans-serif;
  font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s;}
.tab-btn:hover,.tab-btn.active{background:var(--primary);border-color:var(--primary-light);
  box-shadow:0 0 14px rgba(124,58,237,.5);}
.top-right-btns{display:flex;gap:4px;}

/* ===== WORKSPACE ===== */
.workspace{display:flex;flex:1;overflow:hidden;}

/* ===== LEFT PANEL ===== */
.pieces-panel{width:var(--panel-w);background:rgba(0,0,0,.35);backdrop-filter:blur(10px);
  border-right:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:6px;
  padding:10px 7px;overflow-y:auto;flex-shrink:0;}
.pieces-panel::-webkit-scrollbar{width:4px;}
.pieces-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px;}

.panel-title{font-family:'Fredoka One',cursive;font-size:1rem;color:#c4b5fd;
  text-align:center;letter-spacing:1px;}

/* --- Free Draw Tools --- */
.draw-tools{display:flex;flex-direction:column;gap:5px;padding:4px 0;}
.draw-tools.hidden{display:none;}
.draw-tool-btn{
  padding:8px 6px;border-radius:12px;border:2px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;font-family:'Nunito',sans-serif;
  font-size:.82rem;font-weight:700;cursor:pointer;text-align:center;
  transition:all .2s;
}
.draw-tool-btn:hover{background:rgba(255,255,255,.2);}
.draw-tool-btn.active{background:var(--primary);border-color:var(--primary-light);
  box-shadow:0 0 10px rgba(124,58,237,.5);}
.draw-label{font-size:.72rem;color:#a78bfa;text-align:center;}
#brush-size,#brush-opacity{width:100%;accent-color:var(--primary-light);}
.draw-clear-btn{
  padding:7px 6px;border-radius:12px;border:2px solid rgba(239,68,68,.4);
  background:rgba(239,68,68,.15);color:#fca5a5;font-size:.8rem;font-weight:700;
  cursor:pointer;font-family:'Nunito',sans-serif;transition:all .2s;
}
.draw-clear-btn:hover{background:rgba(239,68,68,.4);}

/* --- Piece panel --- */
#piece-panel-content.hidden{display:none;}
.piece-search input{width:100%;padding:6px 9px;border-radius:10px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  color:#fff;font-size:.82rem;font-family:'Nunito',sans-serif;outline:none;}
.piece-search input::placeholder{color:rgba(255,255,255,.4);}

.pieces-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.piece-item{
  background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.15);
  border-radius:13px;padding:7px 3px;
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;font-size:1.6rem;gap:2px;
  transition:all .2s;position:relative;overflow:hidden;
  -webkit-user-drag:none;user-drag:none;
}
.piece-item:hover{background:rgba(255,255,255,.22);border-color:var(--primary-light);
  transform:scale(1.08);box-shadow:0 4px 16px rgba(124,58,237,.4);}
.piece-item:active{transform:scale(.94);}
.piece-item span.piece-label{font-size:.6rem;color:#d1d5db;font-weight:700;text-align:center;}

.color-section h4,.size-section h4{font-size:.82rem;color:#a78bfa;text-align:center;}
.color-swatches{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:3px 0;}
.swatch{width:21px;height:21px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:transform .15s,border-color .15s;}
.swatch:hover,.swatch.active{transform:scale(1.35);border-color:#fff;}
#custom-color{width:100%;height:30px;border-radius:10px;
  border:2px solid rgba(255,255,255,.2);cursor:pointer;background:none;}
#piece-size{width:100%;accent-color:var(--primary-light);}

/* ===== CANVAS AREA ===== */
.canvas-area{flex:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .2s;}
.canvas-area.drag-over{box-shadow:inset 0 0 0 4px rgba(167,139,250,.7);}

#main-canvas{position:absolute;inset:0;width:100%;height:100%;}

#draw-canvas{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:5;}
#draw-canvas.active{pointer-events:all;cursor:crosshair;}
#draw-canvas.eraser-mode{cursor:cell;}

#canvas-overlay{position:absolute;inset:0;z-index:10;pointer-events:none;}
#canvas-overlay.pieces-active{pointer-events:auto;}

.placed-piece{
  position:absolute;pointer-events:all;cursor:move;
  display:flex;align-items:center;justify-content:center;
  line-height:1;transform-origin:center;user-select:none;
}
.placed-piece.selected{
  outline:3px dashed #f59e0b;outline-offset:4px;border-radius:8px;
  filter:drop-shadow(0 0 10px #f59e0baa);
}

#drop-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.1rem;color:rgba(255,255,255,.25);pointer-events:none;
  text-align:center;font-weight:700;font-family:'Fredoka One',cursive;
  transition:opacity .5s;}
#drop-hint.hidden,#draw-hint.hidden{display:none;}
#draw-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.1rem;color:rgba(255,255,255,.3);pointer-events:none;
  text-align:center;font-weight:700;font-family:'Fredoka One',cursive;}

/* ===== RIGHT PANEL ===== */
.right-panel{width:175px;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);
  border-left:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:7px;
  padding:10px 7px;overflow-y:auto;flex-shrink:0;}
.right-panel::-webkit-scrollbar{width:4px;}
.right-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px;}

.template-list{display:flex;flex-direction:column;gap:5px;}
.template-btn{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);
  border-radius:11px;color:#fff;font-family:'Nunito',sans-serif;font-size:.82rem;
  font-weight:700;padding:7px 5px;cursor:pointer;text-align:left;
  transition:all .2s;display:flex;align-items:center;gap:5px;}
.template-btn:hover{background:rgba(124,58,237,.35);border-color:var(--primary-light);
  transform:translateX(4px);}

.divider{border:none;border-top:1px solid rgba(255,255,255,.1);margin:3px 0;}

.bg-options{display:flex;flex-direction:column;gap:5px;}
.bg-btn{border:2px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;
  font-size:.75rem;font-weight:700;padding:7px 5px;cursor:pointer;text-align:center;
  transition:transform .15s,box-shadow .15s;font-family:'Nunito',sans-serif;}
.bg-btn:hover,.bg-btn.active{transform:scale(1.04);box-shadow:0 4px 16px rgba(0,0,0,.4);}
.bg-btn.active{outline:3px solid #fff;}

.effects-grid,.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.effect-btn,.sound-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;color:#fff;padding:6px 2px;font-size:.68rem;
  font-weight:700;cursor:pointer;text-align:center;
  transition:all .18s;font-family:'Nunito',sans-serif;}
.effect-btn:hover,.sound-btn:hover,.effect-btn.active{
  background:rgba(236,72,153,.3);border-color:var(--accent);transform:scale(1.06);}

/* ===== BOTTOM BAR ===== */
.bottom-bar{height:56px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;gap:8px;flex-shrink:0;z-index:20;}
.tool-group{display:flex;gap:5px;}
.tool-btn{padding:6px 12px;border-radius:30px;border:2px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;font-family:'Nunito',sans-serif;
  font-size:.82rem;font-weight:700;cursor:pointer;transition:all .18s;}
.tool-btn:hover{background:rgba(255,255,255,.18);}
.tool-btn.active{background:var(--primary);border-color:var(--primary-light);
  box-shadow:0 0 12px rgba(124,58,237,.5);}
.score-area{display:flex;gap:14px;font-size:.92rem;font-weight:700;}
.score-area b{color:#fbbf24;font-size:1.05rem;}
.btn-animate{padding:9px 20px;font-size:.95rem;
  background:linear-gradient(135deg,#7c3aed,#ec4899);}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;}
.modal-overlay.hidden{display:none;}
.modal-box{background:linear-gradient(135deg,#1e1b4b,#312e81);
  border:2px solid rgba(255,255,255,.2);border-radius:24px;padding:24px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);max-width:660px;width:95%;}
.modal-box h2{font-family:'Fredoka One',cursive;font-size:1.9rem;color:#fbbf24;}
#anim-canvas{border-radius:14px;border:3px solid rgba(255,255,255,.15);
  background:#0d1b2a;max-width:100%;}
.anim-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.anim-controls .big-btn{padding:11px 24px;font-size:1.05rem;}

/* ===== CELEBRATION ===== */
#celebration{position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;}
#celebration.hidden{display:none;}
.celeb-content{text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:14px;}
.celeb-emoji{font-size:90px;animation:bounce 1s ease-in-out infinite;}
.celeb-content h2{font-family:'Fredoka One',cursive;font-size:2.8rem;color:#fbbf24;
  text-shadow:0 0 30px #f59e0b;}

/* ===== CONFETTI ===== */
#confetti-container{position:absolute;inset:0;pointer-events:none;z-index:50;overflow:hidden;}
.confetti-piece{position:absolute;top:-20px;width:11px;height:11px;border-radius:2px;
  animation:confettiFall linear forwards;}
@keyframes confettiFall{
  0%{transform:translateY(0)rotate(0deg);opacity:1;}
  100%{transform:translateY(110vh)rotate(720deg);opacity:0;}
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .pieces-panel{width:135px;}
  .right-panel{display:none;}
  .tab-btn{padding:5px 9px;font-size:.78rem;}
  .bottom-bar{flex-wrap:wrap;height:auto;padding:5px;}
  .tool-btn{padding:5px 9px;font-size:.75rem;}
}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px;}