:root {
    
        --color-background: rgb(87, 184, 148);        /* Deep Sage */
        --color-text: rgb(26, 43, 60);                /* Deep blue-gray */
        --color-square-background: rgba(255, 255, 255, .98);
        --color-square-text: rgb(26, 43, 60);         /* Matching text color */
        --color-square-focus: rgb(123, 77, 255);      /* More vibrant purple for focus */
        --color-square-filled: rgb(98, 47, 234);      /* Stronger primary purple */
        --color-highlight-purple: rgb(98, 47, 234);   /* Primary purple */
        --color-highlight-purple-hover: rgb(123, 77, 255); /* Brighter purple for hover */
        --color-square-border: rgb(26, 43, 60);       /* Matching border color */
        --color-grid-background: rgb(217, 208, 248);  /* Warm cream */
    
    /* --color-background: rgb(126, 205, 162);
    --color-text: #0c001e;
    --color-square-background: rgba(255, 255, 255, .95);
    --color-square-text: #0c001e;
    --color-square-focus: #6782d4;
    --color-square-filled: #0B6ADD;
    --color-highlight-purple: #4816ed; 
    --color-highlight-purple-hover: #6241D9;
        --color-square-border: #000000; 

       --color-grid-background: rgb(226, 217, 247); 
    --color-border: #1b1b1b; */
    --texture-opacity: 40%; 
    --mobile-width: 90%; 
    --desktop-width: 90%; 


}



/* Font imports */



/* Base styles */


body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    
    background-image: linear-gradient(

    
    rgba(87, 184, 148, 0.95), 
    rgba(87, 184, 148, 0.95)
    ),
    url('/Textured\ Paper.png');
    background-repeat: repeat;
    /* background-image: url("/trellis.jpg"); */
    background-repeat: repeat;
    color: var(--color-text);
    position: relative;
    min-height: 100vh;
    z-index: -10;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -10;
}

/* Grid Layout */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    padding-top: 3rem; 
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}


/* Main area component styles */
.toolbar {
    grid-area: bingo-grid;
  
}
#ribbon {
    fill: var(--color-highlight-purple); 
}
#ribbon:hover {
    fill: var(--color-highlight-purple-hover); 
    cursor: pointer; 
}

.bingo-grid {
    grid-area: bingo-grid;
    padding-top: 2rem;
    height: min-content; /* Force height to match content
    min-height: min-content; */
    
}
#button-container {
    position: absolute; 
    right:24px; 
    top: -16px; 
    z-index: 5; 
    box-shadow: #002111;
}
#title {
   
    font-family: 'Poppins', serif;
    font-weight: 800;
  
}

/* hiding this for now */ 
#saveButton {
    display: none;
}

#grid {
    display: grid;
    border-radius: 10px; 
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    width: 90%;
    max-width: 800px;
    aspect-ratio: 1/1;

}
/* CSS Updates */
.square {
    /* Keep flex for centering but modify for better cursor control */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Add min-height to ensure consistent spacing */
    min-height: 100%;
    /* Keep all other existing properties */
    text-wrap: pretty;
    aspect-ratio: 1.01 / 1;
    border-radius: 5px;
    background-image: linear-gradient(var(--color-square-background), var(--color-square-background)),
        url('/Textured\ Paper.png');
    border: solid;
    border-color: var(--color-square-border);
    border-width: 4px;
    background-size: cover;
    transition: background-color 0.3s ease;
    font-size: 16px;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
    z-index: 0;
    cursor: text;
    caret-color: auto;
    white-space: pre-wrap;
    line-height: 1.2;
    touch-action: manipulation;
}

/* Add specific handling for empty squares */


.cursor-target {
    display: inline-block;
    height: 1em;
    margin-top: 50%;
}
.square:focus {
    outline: none;
    box-shadow: 0px 1px 5px #121212;
    transform: scale(1.3) rotate(var(--rotation));
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    
}

.square.playMode {
    cursor: pointer;
}
.square.filled {
    background-color: var(--color);
    background-image: linear-gradient(var(--color), var(--color)),
        url('/Textured\ Paper.png');
    color: rgb(0, 4, 32);
}

#toolbar {



   display: flex; 
   flex-wrap: wrap;
   /* width: var(--desktop-width); */
   row-gap:8px;

  

}

button , #loadButton{
    cursor: pointer; 
    padding: 12px;
    font-family: 'Poppins';
    font-weight: 400;
    margin: 0 0.5rem 0 0;
    border-radius: 3px; 
    border-style: none;
    background-color: #121212;
    color: #ffffff; 
    box-shadow:none; 
    outline: 0;
   
}

button:hover, #loadButton:hover {
background-color:#363636;
}

#loadButton.megModeButton {
    background-color: var(--color-highlight-purple);
}
#loadButton.megModeButton:hover {
    background-color: var(--color-highlight-purple-hover);
}

#emailInput {
    
    padding: 12px;
    font-family: 'Poppins';
    margin: 0 0.5rem 0 0;

    
}

#intro {
    grid-area: note; 
    margin-bottom:14px; 
    line-height: 160%; 
    text-wrap: pretty;
   
}
#grid.megModeGrid {
    background-color: var(--color-grid-background);
    padding: 8px; 
        }



/* Desktop Layout */

@media screen and (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-template-rows: min-content; 
        grid-template-areas:
            "title note"
            "title    main  "
            "title    toolbar";
        column-gap: 2rem;
        /* height: 100%; */
    }

 
    .title-area {
        position: relative; 
        grid-area: title;
        min-width: 150px;
    }
   
    #title {
    
        position: relative;
        /* transform: rotate(90deg); */
        writing-mode: vertical-lr;
        text-orientation: left;
        transform-origin: right top;
        white-space: nowrap;
        font-size: clamp(2rem, calc(8vw + 1rem), 7rem);
       margin: auto; 
        left: 0;  /* Add this */
        top: 0;   /* Add this */
    }

  

    .main-area {
        grid-area: main;
        display: grid;
        grid-template-rows: min-content auto;
        grid-template-areas:
            "bingo-grid";
        gap: 1rem;
    }
/* 
    .right-area {
        grid-area: right;
    } */

    .container {
        width: 90%;
        height:auto;
    
        box-sizing: border-box; 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
       
     
 
    }
    #toolbar {
        margin-top:16px; 
        flex-wrap: wrap;
    
    }
}

/* Mobile Layout */
@media screen and (max-width: 800px) {
.square {
    font-size: 14px; 
}

}


@media screen and (max-width: 767px) {


   .container {
    /* position: absolute;  */
    padding-left: 4px; 
    padding-right: 4px; 
    width: 98%;
        height:auto;
    
        box-sizing: border-box;
      
        /* top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
   }
.square {
    border-width: 3px; 
    font-size: 12px; /* Minimum font size to prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
    padding:2px; 
    touch-action: manipulation;
}
    #title {
        font-family: 'Poppins', serif;
        font-weight: 800;
        font-size: 42px; 
        text-align: left; 
        width: var(--mobile-width); 
        margin-left:auto; 
        margin-right: auto;
        height: auto;


    }
  #toolbar {
    width: var(--mobile-width); 
    margin-right: auto; 
    margin-left: auto; 
    margin-top:24px; 
  }
    
  .bingo-grid {

    padding-top:14px; 
  }

  #intro {
    width:var(--mobile-width);
    margin-left: auto; 
    margin-right: auto;
    line-height:140%; 
  }
    #grid {
    margin-top: 12px; 
    width:var(--mobile-width); 
    grid-gap: 2px; 
    margin-left: auto; 
    margin-right: auto; 
    aspect-ratio: auto; 

  }


      .grid {
          display: grid;
          /* grid-template-columns: 1fr; */
          grid-template-areas:   "title" "note""main"
          ;
          
      }
  
  
      
  
      .main-area {
        
          display: grid;
          grid-template-rows: auto auto auto;
          grid-template-areas:
             
              "bingo-grid"
              "toolbar";
          gap: 2rem;
      }

      #emailInput {
        padding: 12px;
        font-family: 'Poppins';
        margin: 0 0.5rem 0 0;
        font-size: 16px; /* Minimum font size to prevent zoom on iOS */
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
    }
  }
  

/* Square color variations */
.square:nth-child(1) { --color: rgba(255, 166, 71, 0.8); --rotation: -6deg; }   /* Orange more orange */
.square:nth-child(2) { --color: rgba(255, 223, 145, 0.8); --rotation: 4deg; }   /* Golden yellow */
.square:nth-child(3) { --color: rgba(164, 219, 156, 0.8); --rotation: -2deg; }  /* Fresh green */
.square:nth-child(4) { --color: rgba(98, 158, 123, 0.8); --rotation: 7deg; }    /* Deeper green */
.square:nth-child(5) { --color: rgba(255, 130, 182, 0.8); --rotation: -4deg; }  /* Hot pink */
.square:nth-child(6) { --color: rgba(255, 111, 54, 0.8); --rotation: 5deg; }    /* Vivid orange */
.square:nth-child(7) { --color: rgba(255, 217, 102, 0.8); --rotation: -7deg; }  /* Bright yellow */
.square:nth-child(8) { --color: rgba(156, 219, 124, 0.8); --rotation: 3deg; }   /* Lime green */
.square:nth-child(9) { --color: rgba(255, 88, 88, 0.8); --rotation: -5deg; }    /* Pure red */
.square:nth-child(10) { --color: rgba(255, 145, 220, 0.8); --rotation: 8deg; }  /* Bright magenta */
.square:nth-child(11) { --color: rgba(173, 216, 255, 0.8); --rotation: -3deg; } /* Sky blue */
.square:nth-child(12) { --color: rgba(82, 103, 189, 0.8); --rotation: 6deg; }   /* Royal blue */
.square:nth-child(13) { --color: rgba(255, 99, 178, 0.8); --rotation: -8deg; }  /* Deep pink */
.square:nth-child(14) { --color: rgba(255, 84, 34, 0.8); --rotation: 2deg; }    /* Red-orange */
.square:nth-child(15) { --color: rgba(134, 206, 255, 0.8); --rotation: -1deg; } /* Bright blue */
.square:nth-child(16) { --color: rgba(142, 236, 234, 0.8); --rotation: 7deg; }  /* Turquoise */