body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; background: #1a1a1a; color: #fff; padding: 20px; }
.controls { background: #333; padding: 20px; border-radius: 8px; width: 600px; text-align: center; margin-bottom: 20px; border: 1px solid #444; }
textarea { width: 95%; margin: 10px 0; background: #222; color: white; border: 1px solid #555; padding: 8px; border-radius: 4px; }
#genBtn { background: #2ecc71; color: white; border: none; padding: 10px 20px; font-weight: bold; cursor: pointer; border-radius: 4px; }
#genBtn:hover { background: #27ae60; }

#grid-container { position: relative; display: inline-block; margin-top: 20px; }

.grid {
    display: grid;
    grid-template-columns: repeat(5, 120px);
    grid-template-rows: repeat(5, 120px);
    gap: 8px;
    background: #444;
    padding: 8px;
    border-radius: 4px;
}

.cell {
    background: #fff; color: #000;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 10px; font-weight: bold; font-size: 13px;
    cursor: pointer; position: relative; user-select: none; border-radius: 2px;
    word-wrap: break-word; overflow: hidden;
}

/* The Red Cross */
.cell.marked::before, .cell.marked::after {
    content: ''; position: absolute; width: 120%; height: 6px; background: rgba(255, 0, 0, 0.8); top: 48%; left: -10%;
}
.cell.marked::before { transform: rotate(45deg); }
.cell.marked::after { transform: rotate(-45deg); }

/* Win Lines */
#win-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.bingo-line { stroke: rgba(255, 0, 0, 0.6); stroke-width: 12; stroke-linecap: round; }

/* Easter Egg Overlay */
#easter-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.95); display: flex; justify-content: center; align-items: center; z-index: 9999;
}
#easter-overlay img { max-width: 90%; max-height: 90%; }
.hidden { display: none !important; }