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

body {
  font-family: 'Comic Sans MS', 'Arial', sans-serif;
  text-align: center;
  background: linear-gradient(135deg, #f5e6d3 0%, #d4a574 100%);
  min-height: 100vh;
  padding: 20px;
  user-select: none;
}

h1 {
  background: linear-gradient(135deg, #8b6f47 0%, #6b5638 100%);
  color: #fff5e6;
  padding: 25px;
  margin: 0 0 20px 0;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  font-size: 2.2em;
}

.controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background: linear-gradient(135deg, #a0826d 0%, #8b6f47 100%);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  transition: all 0.2s;
  font-weight: bold;
}

button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.28); }
button:active { transform: translateY(0); }

#score, #instruction {
  margin: 12px 0;
  font-size: 20px;
  font-weight: bold;
  color: #5a4332;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
}

.mode-section {
  margin: 20px auto;
  padding: 18px;
  background: rgba(255,255,255,0.4);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  max-width: 1100px;
}

.section-title { color: #5a4332; margin-bottom: 14px; }

.shapes-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 12px 0;
}

.shape-item { display:flex; flex-direction:column; align-items:center; gap:12px; }

.shape-label { font-size: 16px; font-weight: bold; color:#5a4332; }

.shape-variants { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

.shape {
  cursor: grab;
  border: 3px solid #333;
  transition: all 0.25s;
  position: relative;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-clip: padding-box;
}

.shape:active { cursor: grabbing; }
.shape:hover { transform: scale(1.05); box-shadow: 0 5px 20px rgba(0,0,0,0.18); }
.shape.dragging { opacity: 0.75; transform: scale(1.08) rotate(4deg); z-index: 1000; }

/* sizes */
.size-small { width: 80px; height: 80px; font-size: 14px; }
.size-medium { width: 110px; height: 110px; font-size: 18px; }
.size-large { width: 140px; height: 140px; font-size: 22px; }

/* shape basic styles */
.círculo { border-radius: 50%; }
.cuadrado { border-radius: 10px; }
.rectángulo { border-radius: 10px; }

/* triangle using clip-path — now keeps background color like other shapes */
.triángulo {
  /* triangle built by clipping a rectangle — border will follow clip */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  display: inline-block;
  /* keep border and background like other shapes */
}

/* triangle explicit heights (so proportions look triangular) */
.triángulo.size-small { width: 80px; height: 70px; }
.triángulo.size-medium { width: 110px; height: 95px; }
.triángulo.size-large { width: 140px; height: 120px; }

/* rectangle specific widths already handled by sizes in HTML generation if needed */
.rectángulo.size-small { width: 120px; height: 70px; }
.rectángulo.size-medium { width: 165px; height: 100px; }
.rectángulo.size-large { width: 210px; height: 130px; }

/* star uses inline SVG so it sets its own size in JS */

/* colors (applies to all shapes, triangles included) */
.color-1 { background: #FF6B6B; border-color: #c0392b; color: #FF6B6B; }
.color-2 { background: #4ECDC4; border-color: #0f8f7d; color: #4ECDC4; }
.color-3 { background: #FFE66D; border-color: #d4a80b; color: #FFE66D; }

/* click animations */
@keyframes spin { from { transform: rotate(0deg) scale(1.1); } to { transform: rotate(360deg) scale(1.1); } }
@keyframes bounce { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); } }
@keyframes glow { 0%,100%{ box-shadow: 0 0 10px rgba(255,107,107,0.5); } 50%{ box-shadow: 0 0 30px rgba(255,107,107,1), 0 0 50px rgba(78,205,196,0.8); } }

.shape.animate-spin { animation: spin 0.6s ease-in-out; }
.shape.animate-bounce { animation: bounce 0.6s ease-in-out; }
.shape.animate-glow { animation: glow 0.6s ease-in-out; }

/* drop zones */
.drop-zones { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin:20px 0; }
.drop-zone {
  border: 4px dashed #8b6f47;
  border-radius: 15px;
  background: rgba(255,255,255,0.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; transition: all 0.25s; padding: 18px;
}
.drop-zone.zone- círculo,
.drop-zone.zone-square,
.drop-zone.zone-triangle,
.drop-zone.zone-star { width: 200px; height: 200px; }
.drop-zone.zone-rectangle { width: 260px; height: 180px; }

.drop-zone.drag-over { background: rgba(139,111,71,0.18); border-color:#5a4332; transform: scale(1.03); }
.drop-zone.filled { background: rgba(139,111,71,0.28); border-style: solid; }

.drop-zone-label { font-size: 18px; font-weight: bold; color:#5a4332; margin-top:10px; }
.drop-zone-outline { opacity: 0.28; pointer-events: none; }

/* examples */
.example-container { margin-top: 18px; padding: 14px; background: rgba(255,255,255,0.5); border-radius: 12px; display:none; }
.example-container.show { display:block; animation: fadeIn 0.35s; }
@keyframes fadeIn { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform: translateY(0);} }

.examples-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:12px; }
.example-item { display:flex; flex-direction:column; align-items:center; gap:8px; background:white; padding:12px; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,0.08); }
.example-emoji { font-size: 64px; line-height:1; }
.example-label { font-size:14px; font-weight:bold; color:#5a4332; }

@media (max-width:768px) {
  h1 { font-size:1.6em; }
  .drop-zone { width: 160px !important; height: 160px !important; }
  .drop-zone.zone-rectangle { width:200px !important; height:140px !important; }
  .example-emoji { font-size:56px; }
}