/* Container handles Dark/Light Mode automatically via JS */
.ascii-automaton-wrapper {
    background-color: var(--bg-color, #e0e0e0);
    color: var(--text-color, #111111);
    container-type: inline-size;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 2cqw; 
    border-radius: 4px;
    box-sizing: border-box;

    /* Prevent text selection and long-press context menus on mobile */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ascii-automaton-grid {
    display: grid;
    grid-template-columns: repeat(34, 1fr);
    
    /* 
      Math: The wrapper inner width is 96cqw (100 - 2 padding left - 2 padding right). 
      96 / 34 columns = ~2.82cqw per cell. 
      If SPACING_X < 1.0, the font becomes larger than the cell and naturally overlaps!
    */
    font-size: calc(96cqw / 34 / var(--spacing-x, 1)); 
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    line-height: var(--line-height, 1.0); 
    
    width: 100%; /* Always spans the full width symmetrically */
    margin: 0 auto; 
    text-align: center;
    padding-bottom: 4px;

    /* Prevent text selection targeting individual cells */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}