body {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
    margin: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
    table-layout: fixed; /* Important for responsiveness */
}

/* Base styles for desktop */
.shengxiao { height: 50px; }
.shengxiao td {
	text-align: center;
	vertical-align: middle;
	font-weight: 700;
	font-size: 30px;
}
.haoma td {
	text-align: center;
	vertical-align: top;
    padding: 5px;
}
table, td, th { border: 2px solid #000; }

.blue, .green, .red {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: inline-block;
	color: #fff;
	box-shadow: 0 10px 10px rgba(0,0,0,.1);
	margin-bottom: 10px;
	margin-left: 5px;
	position: relative;
	overflow: hidden;
}

.red { background: linear-gradient(to bottom,red,maroon); }
.blue { background: linear-gradient(to bottom,#0000f4,#000b3d); }
.green { background: linear-gradient(to bottom,#07dc07,#567200); }

.smaller-ball {
	width: 45px!important;
	height: 45px!important;
}

.ball-number-abs {
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 29px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,.5);
}

.ball-number-abs.smaller-ball { font-size: 25px!important; }

.ball-wuxing-inner-abs {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,.5);
}

.ball-wuxing-inner-abs.smaller-ball {
	font-size: 14px!important;
	top: 28px;
}

div[contenteditable=true] {
	height: auto; /* Allow height to adjust */
    min-height: 20px;
	border: none;
	outline: 0;
	font-size: 35px;
	font-weight: 700;
	padding: 0 5px 5px 5px;
    white-space: pre-wrap; /* Allow wrapping */
}

/* Controls - Toolbar style instead of Sidebar */
.controls {
	text-align: center;
	padding: 10px;
	background-color: #f0f0f0;
	border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.controls select {
    padding: 5px;
    font-size: 16px;
}

.controls .bg-options {
    display: flex;
    gap: 10px;
}

.controls .bg-options span {
    cursor: pointer;
    padding: 5px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.controls .bg-options span:hover {
    background: #eee;
}

#shengcheng-btn {
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
	color: #333;
	background-color: #3cf;
	outline: 0;
	padding: 5px 15px;
	cursor: pointer;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .controls {
        flex-direction: row;
        justify-content: space-between;
        padding: 5px;
        gap: 5px;
    }
    
    .controls .bg-options {
        display: none; /* Hide background options on mobile if space is tight, or make them smaller */
    }
    
    /* Ensure content is not hidden by controls if fixed, but here controls are static at top */

    #imgs {
        padding: 5px !important; /* Reduce padding */
        width: 100% !important;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    table {
        width: 100% !important;
    }

    /* Reduce table cell padding */
    td, th {
        padding: 1px !important;
        border-width: 1px !important;
    }

    /* Shrink fonts in headers */
    .shengxiao td { font-size: 14px !important; height: 25px; }
    div[contenteditable=true] { font-size: 18px !important; }

    /* Shrink balls significantly */
    .blue, .green, .red, .smaller-ball {
        width: 24px !important;
        height: 24px !important;
        margin-left: 1px !important;
        margin-bottom: 2px !important;
        box-shadow: none !important; /* Remove shadow for space */
    }

    /* Shrink text inside balls */
    .ball-number-abs, .ball-number-abs.smaller-ball {
        font-size: 14px !important;
        top: 2px !important;
    }

    .ball-wuxing-inner-abs, .ball-wuxing-inner-abs.smaller-ball {
        font-size: 8px !important;
        top: 16px !important;
        /* Sometimes wuxing might be too small to read, but necessary to fit */
    }
}

/* Modal adjustments */
.image-modal { z-index: 3000; }
.modal-content { max-width: 95%; max-height: 90%; }
.close-modal-btn { top: 10px; right: 10px; font-size: 30px; }
#imagePlaceholder img { width: 100%; height: auto; }

.toast { z-index: 4000; }

.dibu { display: none !important; } /* Hide footer on mobile/desktop by default as per original design or requirement? Original had display:none then block. */