/* ==========================================================================
   🧱 NUMBERBLOCKS PLAYGROUND - CSS STYLE SYSTEM (MEGA EXPANSION)
   ========================================================================== */

/* Font & Core Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-drag: none;
}

body {
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background-color: #e0f2fe;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: none;
}

/* 🌤️ Sky Background with Parallax Clouds */
.sky-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 60%, #f0fdf4 100%);
  z-index: 1;
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 100px;
  filter: blur(4px);
  animation: floatClouds linear infinite;
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}

.cloud-1 {
  width: 200px;
  height: 60px;
  top: 8%;
  left: -200px;
  animation-duration: 45s;
}
.cloud-1::before { width: 80px; height: 80px; top: -40px; left: 30px; }
.cloud-1::after { width: 100px; height: 100px; top: -50px; left: 80px; }

.cloud-2 {
  width: 280px;
  height: 80px;
  top: 20%;
  left: -280px;
  animation-duration: 65s;
  animation-delay: 10s;
  opacity: 0.7;
}
.cloud-2::before { width: 110px; height: 110px; top: -55px; left: 40px; }
.cloud-2::after { width: 130px; height: 130px; top: -65px; left: 110px; }

.cloud-3 {
  width: 150px;
  height: 50px;
  top: 35%;
  left: -150px;
  animation-duration: 35s;
  animation-delay: 5s;
  opacity: 0.9;
}
.cloud-3::before { width: 60px; height: 60px; top: -30px; left: 20px; }
.cloud-3::after { width: 80px; height: 80px; top: -40px; left: 60px; }

@keyframes floatClouds {
  0% { transform: translateX(-10vw); }
  100% { transform: translateX(110vw); }
}

/* 🏢 Premium Glassmorphic Container */
.app-container {
  position: relative;
  z-index: 2;
  width: 96vw;
  height: 95vh;
  max-width: 1250px;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  border: 2.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 36px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 📣 App Header */
.app-header {
  padding: 12px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.2);
}

.logo-area {
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #1e3a8a;
  text-shadow: 1px 1px 0 #fff, 2.5px 2.5px 0 rgba(0,0,0,0.08);
}

.main-title .highlight {
  color: #ef4444;
}

.subtitle {
  font-size: 13px;
  font-weight: 800;
  color: #4b5563;
  margin-top: -3px;
}

.controls-area {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Buttons */
.btn-icon {
  background: rgba(255, 255, 255, 0.75);
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  padding: 9px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-icon:hover {
  transform: scale(1.1);
  background: #fff;
}

.btn-icon svg {
  fill: #3b82f6;
  transition: fill 0.2s;
}

.btn-sound-off svg {
  fill: #9ca3af;
}

.btn-text {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: white;
  padding: 8px 18px;
  font-weight: 800;
  font-size: 14px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
}

.btn-text:hover {
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.85);
  border: 2.5px solid rgba(30, 58, 138, 0.25);
  color: #1e3a8a;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 14px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #ffffff;
  transform: translateY(-1px);
  border-color: #1e3a8a;
}


/* ==========================================================================
   🗂️ MAIN TABS MENU
   ========================================================================== */

.app-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 24px;
  background: rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.tab-button {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #1e3a8a;
  padding: 10px 24px;
  font-weight: 800;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.04);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab-button:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.tab-button.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.tab-button.active:hover {
  transform: translateY(0);
}

.tab-emoji {
  font-size: 20px;
}


/* ==========================================================================
   🎨 WORKSPACES CONTROL (VIEW CONTROLLER)
   ========================================================================== */

.playground-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 85%);
}

.view-content {
  display: none;
  width: 100%;
  height: 100%;
}

.view-content.active {
  display: flex;
  flex-direction: column;
}

/* Play Board overlay grid */
.playground-board {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.playground-board::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(30, 58, 138, 0.08) 2px, transparent 2px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Interactive Guide Tip */
.guide-tip {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(30, 58, 138, 0.65);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.guide-hand {
  font-size: 48px;
  margin-bottom: 8px;
  animation: tapGuide 1.5s ease-in-out infinite;
}

.guide-tip p {
  font-family: 'Nanum Pen Script', cursive, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

@keyframes tapGuide {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.1); }
}


/* ==========================================================================
   🧩 VIEW 2: BUILDER ZONE DASHBOARD & WORKSPACE
   ========================================================================== */

.game-dashboard {
  flex: 1;
  display: flex;
  padding: 16px;
  gap: 16px;
  height: 100%;
  overflow: hidden;
}

.builder-mission-card {
  width: 320px;
  background: rgba(255, 255, 255, 0.65);
  border: 2.5px solid rgba(255,255,255,0.7);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.mission-title {
  font-size: 16px;
  font-weight: 800;
  color: #1e3a8a;
  margin-bottom: 15px;
  text-align: center;
  text-transform: uppercase;
  background: #dbeafe;
  padding: 6px 16px;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(30, 58, 138, 0.05);
}

.target-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
  position: relative;
}

.target-bubble {
  font-size: 48px;
  font-weight: 900;
  color: #ef4444;
  background: white;
  border: 4px solid #ef4444;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(239, 68, 68, 0.15);
  z-index: 2;
  margin-bottom: -15px;
  animation: targetBounce 2s ease-in-out infinite alternate;
}

@keyframes targetBounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.05); }
}

/* Glow Silhouette Box for Target block shapes */
.target-silhouette {
  flex: 1;
  width: 100%;
  max-height: 280px;
  background: rgba(30, 58, 138, 0.05);
  border: 3.5px dashed rgba(30, 58, 138, 0.25);
  border-radius: 16px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 20px;
  margin-top: 10px;
  overflow: hidden;
  transition: all 0.3s;
}

.target-silhouette.matching {
  background: rgba(16, 185, 129, 0.08);
  border-color: #10b981;
  box-shadow: 0 0 25px rgba(16,185,129,0.3);
}

.stars-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.star-slot {
  font-size: 26px;
  color: #e2e8f0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: color 0.3s;
}

.star-slot.active {
  color: #fbbf24;
  text-shadow: 0 4px 10px rgba(251, 191, 36, 0.4);
}

.score-label {
  font-size: 14px;
  font-weight: 800;
  color: #475569;
}

.builder-workspace-panel {
  flex: 1;
  background: rgba(255, 255, 255, 0.55);
  border: 2.5px solid rgba(255,255,255,0.7);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.builder-workspace-panel .panel-header {
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: #1e3a8a;
}

.mini-board {
  flex: 1;
}

.dropzone-guide {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 58, 138, 0.08);
  border: 2px dashed rgba(30, 58, 138, 0.2);
  color: rgba(30, 58, 138, 0.5);
  font-size: 14px;
  font-weight: 800;
  padding: 10px 24px;
  border-radius: 30px;
  pointer-events: none;
  z-index: 1;
  text-align: center;
}


/* ==========================================================================
   ⚖️ VIEW 3: NUMBER SEESAW
   ========================================================================== */

.seesaw-dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  height: 100%;
}

.seesaw-info-panel {
  background: rgba(255, 255, 255, 0.65);
  border: 2.5px solid rgba(255,255,255,0.7);
  border-radius: 24px;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.seesaw-mission {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seesaw-mission-label {
  font-size: 16px;
  font-weight: 800;
  color: #1e3a8a;
}

.seesaw-target-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 56px;
  padding: 0 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
  font-size: 32px;
  font-weight: 900;
  border: 3px solid #f59e0b;
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.25);
}

.seesaw-instruction {
  flex: 1;
  font-family: 'Nanum Pen Script', cursive, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #1d4ed8;
  text-align: center;
}

.seesaw-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.seesaw-stage-panel {
  flex: 1;
  background: rgba(255, 255, 255, 0.55);
  border: 2.5px solid rgba(255,255,255,0.7);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}

/* Seesaw visualization (top portion) */
.seesaw-visual {
  position: relative;
  height: 300px;
  flex: 0 0 auto;
  padding-top: 12px;
  overflow: visible;
}

.seesaw-beam {
  position: absolute;
  left: 50%;
  bottom: 90px;
  width: 70%;
  max-width: 540px;
  height: 18px;
  background: linear-gradient(180deg, #93c5fd, #2563eb);
  border: 3px solid #1e3a8a;
  border-radius: 50px;
  transform-origin: 50% 50%;
  transform: translateX(-50%) rotate(-12deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 12px rgba(30, 58, 138, 0.18);
  z-index: 2;
}

.seesaw-beam.balanced {
  background: linear-gradient(180deg, #6ee7b7, #059669);
  border-color: #047857;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.25), 0 6px 12px rgba(5, 150, 105, 0.3);
}

.seesaw-pan {
  position: absolute;
  bottom: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.seesaw-pan-left  { left: -12px; }
.seesaw-pan-right { right: -12px; }

.pan-label {
  font-family: 'Nanum Pen Script', cursive, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1e3a8a;
  margin-bottom: 2px;
}

.pan-bubble {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: white;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.seesaw-pan-left .pan-bubble {
  background: linear-gradient(135deg, #fb923c, #ea580c);
}

.seesaw-pan-right .pan-bubble {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
}

.pan-bubble.match {
  background: linear-gradient(135deg, #34d399, #059669) !important;
  animation: panPulse 0.6s ease-in-out infinite alternate;
}

@keyframes panPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

.seesaw-fulcrum {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-bottom: 64px solid #475569;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15));
  z-index: 1;
}

.seesaw-base {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 220px;
  height: 16px;
  background: linear-gradient(180deg, #64748b, #334155);
  border-radius: 8px;
  z-index: 0;
}

/* Workspace below the seesaw */
.seesaw-board {
  flex: 1;
  margin: 10px 14px 14px;
  border-radius: 22px;
  background: rgba(219, 234, 254, 0.45);
  border: 2.5px dashed rgba(96, 165, 250, 0.6);
  position: relative;
  overflow: hidden;
}

.seesaw-hint {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Nanum Pen Script', cursive, sans-serif;
  font-size: 20px;
  color: rgba(30, 58, 138, 0.55);
  pointer-events: none;
  white-space: nowrap;
}

.seesaw-trash {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.85);
  border: 3px dashed #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  z-index: 3;
  pointer-events: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.seesaw-trash.hover-active {
  background: #fee2e2;
  border-color: #ef4444;
  transform: scale(1.15) rotate(-6deg);
}

.seesaw-actions .score-label {
  font-size: 15px;
  font-weight: 800;
  color: #1e3a8a;
  background: #dbeafe;
  padding: 6px 14px;
  border-radius: 50px;
}


/* ==========================================================================
   👾 MULTI-COLUMN CHARACTER RENDERING (PLACE-VALUE 11-30)
   ========================================================================== */

/* Align columns side-by-side */
.numberblock-character {
  display: flex;
  flex-direction: row !important; /* Forces side-by-side columns! */
  align-items: flex-end;          /* Align bases at the bottom! */
  gap: 4px;
  position: absolute;
  cursor: grab;
  transform-origin: bottom center;
  transition: transform 0.15s ease-out;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
  z-index: 5;
}

.character-column {
  display: flex;
  flex-direction: column-reverse; /* Stack blocks inside columns bottom-up */
}

/* Striped White/Red block for 10-Towers (Ten blocks base-10) */
.block-val-ten-base {
  background: linear-gradient(135deg, #ffffff, #f1f5f9);
  border: 3.5px solid #ef4444 !important;
  box-shadow: 
    inset -4px -4px 0px rgba(239, 68, 68, 0.08), 
    inset 4px 4px 0px rgba(255, 255, 255, 0.6);
}

/* Stretched custom face drawings for large numbers */
.face-char-large .cartoon-eye {
  width: 15px;
  height: 15px;
  border-width: 2px;
}

.face-char-large .cartoon-mouth {
  width: 14px;
  height: 8px;
  border-radius: 0 0 10px 10px;
}

/* Special spawner color for Ten */
.color-10 {
  background: linear-gradient(135deg, #ffffff, #e2e8f0);
  border: 2px solid #ef4444 !important;
}


/* ==========================================================================
   🧸 DOCK FOR BLOCK SPAWNING
   ========================================================================== */

.app-dock {
  background: rgba(255, 255, 255, 0.35);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dock-title {
  font-size: 13px;
  font-weight: 800;
  color: #1e3a8a;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.spawn-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-spawn {
  background: rgba(255, 255, 255, 0.85);
  border: 3px solid transparent;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-spawn:hover {
  transform: translateY(-4px) scale(1.05);
  background: #fff;
  box-shadow: 0 8px 15px rgba(0,0,0,0.08);
}

.btn-spawn span {
  font-size: 14px;
  font-weight: 800;
  color: #334155;
}

/* Spawn buttons coloring & highlights */
.spawn-1:hover { border-color: #ff4d4d; }
.spawn-2:hover { border-color: #ff944d; }
.spawn-3:hover { border-color: #ffe066; }
.spawn-4:hover { border-color: #4dff88; }
.spawn-5:hover { border-color: #4da6ff; }
.spawn-10:hover { border-color: #ef4444; }

/* 3D Toy Preview in spawn dock */
.btn-block-preview {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.15), inset 2px 2px 0 rgba(255,255,255,0.25);
}
.color-1 { background: linear-gradient(135deg, #ff4d4d, #cc0000); }
.color-2 { background: linear-gradient(135deg, #ff944d, #e65c00); }
.color-3 { background: linear-gradient(135deg, #ffe066, #e6b800); }
.color-4 { background: linear-gradient(135deg, #4dff88, #00b33c); }
.color-5 { background: linear-gradient(135deg, #4da6ff, #0066cc); }


/* ==========================================================================
   👾 INTERACTIVE NUMBERBLOCK CHARACTER STYLING & ANIMATIONS
   ========================================================================== */

.numberblock-character:active {
  cursor: grabbing;
}

/* Magnified state during dragging */
.numberblock-character.dragging {
  z-index: 100;
  transform: scale(1.08) rotate(1.5deg);
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25));
}

/* Snapping target visual feedback */
.numberblock-character.snap-ready {
  animation: snapPulse 0.5s ease-in-out infinite alternate;
}

@keyframes snapPulse {
  0% { filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.4)) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15)); }
  100% { filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.85)) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15)); }
}

/* 🧱 Basic Block Unit */
.block-unit {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  position: relative;
  box-sizing: border-box;
  border: 3.5px solid rgba(0, 0, 0, 0.22);
  /* 3D Toy effect beveling */
  box-shadow: 
    inset -4px -4px 0px rgba(0, 0, 0, 0.18), 
    inset 4px 4px 0px rgba(255, 255, 255, 0.35);
  transition: background 0.3s;
}

/* Block Unit Colors by Value (1 to 10) */
.block-val-1  { background: linear-gradient(135deg, #ff4d4d, #cc0000); }
.block-val-2  { background: linear-gradient(135deg, #ff944d, #e65c00); }
.block-val-3  { background: linear-gradient(135deg, #ffe066, #e6b800); }
.block-val-4  { background: linear-gradient(135deg, #4dff88, #00b33c); }
.block-val-5  { background: linear-gradient(135deg, #4da6ff, #0066cc); }
.block-val-6  { background: linear-gradient(135deg, #d279ff, #8c00cc); }
.block-val-7-1 { background: linear-gradient(135deg, #ff4d4d, #cc0000); }
.block-val-7-2 { background: linear-gradient(135deg, #ff944d, #e65c00); }
.block-val-7-3 { background: linear-gradient(135deg, #ffe066, #e6b800); }
.block-val-7-4 { background: linear-gradient(135deg, #4dff88, #00b33c); }
.block-val-7-5 { background: linear-gradient(135deg, #4da6ff, #0066cc); }
.block-val-7-6 { background: linear-gradient(135deg, #4f46e5, #3730a3); }
.block-val-7-7 { background: linear-gradient(135deg, #d279ff, #8c00cc); }
.block-val-8  { background: linear-gradient(135deg, #ff66cc, #cc0088); }
.block-val-9  { background: linear-gradient(135deg, #cccccc, #777777); }
.block-val-10 { background: linear-gradient(135deg, #ffffff, #e2e8f0); border-color: #ef4444; }

/* 🔢 Floating Numberling Bubble */
.numberling {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 3.5px solid #1e3a8a;
  color: #1e3a8a;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  animation: floatNumberling 2.5s ease-in-out infinite alternate;
  z-index: 10;
  pointer-events: none;
}

@keyframes floatNumberling {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-5px); }
}


/* ==========================================================================
   👀 CUSTOM EMBEDDED FACIAL FEATURES FOR TOWER TOPS
   ========================================================================== */

.face-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 6px 4px;
}

/* Eyes general */
.eyes-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.cartoon-eye {
  background: white;
  border-radius: 50%;
  border: 2.5px solid #1e293b;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.pupil {
  width: 50%;
  height: 50%;
  background: #0f172a;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pupil-sparkle {
  width: 35%;
  height: 35%;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 20%;
  left: 20%;
}

/* Mouth general */
.cartoon-mouth {
  width: 18px;
  height: 10px;
  border-radius: 0 0 14px 14px;
  background: #881337;
  border: 2.5px solid #1e293b;
  position: relative;
  overflow: hidden;
}

/* Open mouth for active surprise (dragging) */
.dragging .cartoon-mouth {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #881337;
}

/* 🔴 character 1 (One) unique face */
.face-char-1 .cartoon-eye {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

/* 🟠 character 2 (Two) unique face */
.face-char-2 .eyes-row {
  position: relative;
}
.face-char-2 .cartoon-eye {
  width: 18px;
  height: 18px;
}
.face-char-2::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 6px;
  width: 42px;
  height: 18px;
  border: 3px solid #8b5cf6;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 🟡 character 3 (Three) unique face */
.face-char-3 .cartoon-eye {
  width: 14px;
  height: 14px;
}
.crown-decoration {
  position: absolute;
  top: -12px;
  display: flex;
  gap: 3px;
  z-index: 5;
}
.crown-peak {
  width: 10px;
  height: 12px;
  background: #fbbf24;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: 1.5px solid #1e293b;
}

/* 🟢 character 4 (Four) unique face */
.face-char-4 .cartoon-eye {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

/* 🔵 character 5 (Five) unique face */
.star-mask {
  position: absolute;
  top: 2px;
  width: 52px;
  height: 24px;
  background: #3b82f6;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border: 2px solid #1e3a8a;
  z-index: 1;
}
.face-char-5 .eyes-row {
  z-index: 2;
}
.face-char-5 .cartoon-eye {
  width: 16px;
  height: 16px;
}

/* 🟣 character 6 (Six) unique face */
.face-char-6 .cartoon-eye {
  width: 16px;
  height: 16px;
}
.dice-spot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #4a044e;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
}
.spot-top-left { top: 8px; left: 8px; }
.spot-bottom-right { bottom: 8px; right: 8px; }

/* 🌈 character 7 (Seven) unique face */
.face-char-7 .cartoon-eye {
  width: 16px;
  height: 16px;
}
.face-char-7 .cartoon-mouth {
  background: #be123c;
}

/* 💗 character 8 (Eight) unique face */
.face-char-8 .cartoon-eye {
  width: 16px;
  height: 16px;
}
.octo-arm {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #f472b6;
  border: 2.5px solid #1e293b;
  border-radius: 50%;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.1);
  z-index: -1;
}
.arm-left-1 { left: -11px; top: 12px; }
.arm-left-2 { left: -11px; top: 30px; }
.arm-right-1 { right: -11px; top: 12px; }
.arm-right-2 { right: -11px; top: 30px; }

/* 🪙 character 9 (Nine) unique face */
.face-char-9 .cartoon-eye {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

/* ⚪🔴 character 10 (Ten) unique face */
.face-char-10 .cartoon-eye {
  width: 18px;
  height: 18px;
}
.star-hand {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #f87171;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border: 1px solid #7f1d1d;
  z-index: 2;
}
.hand-left { left: -12px; top: 20px; }
.hand-right { right: -12px; top: 20px; }


/* ==========================================================================
   💥 DYNAMIC EFFECTS & RIPPLES
   ========================================================================== */

/* Confetti Particles */
.confetti-particle {
  position: absolute;
  pointer-events: none;
  z-index: 99;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  animation: explodeParticle 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes explodeParticle {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(var(--rotate));
    opacity: 0;
  }
}

/* Merge Shockwave Ripple */
.merge-ripple {
  position: absolute;
  border-radius: 50%;
  border: 6px solid rgba(59, 130, 246, 0.6);
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(59,130,246,0) 70%);
  pointer-events: none;
  z-index: 90;
  transform: translate(-50%, -50%) scale(0.1);
  animation: rippleAnimation 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes rippleAnimation {
  0% {
    width: 50px;
    height: 50px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.1);
  }
  100% {
    width: 350px;
    height: 350px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Double-Click Split Slash Cut */
.split-flash {
  position: absolute;
  background: white;
  width: 8px;
  height: 80px;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
  z-index: 92;
  animation: flashCut 0.3s ease-out forwards;
}

@keyframes flashCut {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleY(0) rotate(45deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.3) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleY(0) rotate(45deg); }
}