.playbuttonarea{
  background-color: aliceblue;
  grid-row: 3/4;
  grid-column: 1/3;
  margin: 5px 5px 10px 10px;
  border-radius: 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  --dot-color: rgba(0, 0, 255, 0.547);
  --dot-size: 2.5px;
  --spacing: 20px;

  /* Two gradients. The second one will be shifted. */
  background-image: 
    radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size)),
    radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));

  /* Set the pattern size */
  background-size: var(--spacing) var(--spacing);

  /* Shift the second gradient by half the spacing to create the offset */
  background-position: 0 0, 10px 10px;
  
}




:root {
    /* Matches the purple from your reference image */
    --btn-bg: #747bff; 
    
    /* NEW: Darker shade for the 3D shadow layer */
    --btn-shadow: #464cc4; 
    
    /* Grid line color */
    --line-color: rgba(111, 155, 249, 0.745); 
    /* Button Text */
    --text-color: #ffffff;
    
    /* Animation Configuration */
    --anim-duration: 0.5s;
    --stagger-step: 0.04s; 
    
    /* NEW: How thick the 3D layer is */
    --depth: 12px;

    /* Theme colors matching your previous project */
    --primary: #D2FF72;
    --secondary: #FFFFFF;
    --dark: #181C14;
    --hover: #CBF3BB;
}


/* BUTTON CONTAINER */
.grid-btn {
    position: relative;
    background-color: var(--btn-bg);
    color: var(--text-color);
    border: none;
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;
    width: 90%;
    padding: 40px 120px;
    cursor: none;
    overflow: hidden; 
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;

    /* NEW: The 3D Layer Effect */
    /* 0px blur creates the "2D" hard edge look */
    box-shadow: var(--depth) var(--depth) 0px var(--btn-shadow);
    
    /* Smooth movement for the press effect */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    
    /* Compensate spacing so it looks centered despite the shadow */
    margin-right: var(--depth);
    margin-bottom: var(--depth);
}



.grid-btn:active {
    /* PRESS EFFECT: */
    /* Move the button down and right to cover the shadow */
    transform: translate(calc(var(--depth) / 2), calc(var(--depth) / 2));
    
    /* Shrink the shadow so it looks like the button got closer to the "ground" */
    box-shadow: calc(var(--depth) / 2) calc(var(--depth) / 2) 0px var(--btn-shadow);
}


/* TEXT LAYER */
.btn-text {
    position: relative;
    z-index: 1; 
    pointer-events: none; 
}


/* GRID LINES (Shared Styles) */
.grid-line {
    position: absolute;
    background-color: var(--line-color);
    transition: all var(--anim-duration) cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--delay);
}


/* VERTICAL LINES */
.grid-line-v {
    top: 0;
    bottom: 0;
    width: 2px;
    height: 0%; 
    transform-origin: top; 
}


/* HORIZONTAL LINES */
.grid-line-h {
    left: 0;
    right: 0;
    height: 2px;
    width: 0%; 
    transform-origin: left; 
}

/* --- ACTIVE STATE (Triggered by JS) --- */
.grid-btn.active .grid-line-v { height: 100%; }
.grid-btn.active .grid-line-h { width: 100%; }