* { margin: 0; padding: 0; box-sizing: border-box; }
.cell.active { color: red !important; font-weight: bold !important; background-color: yellow !important; }
body { font-family: Arial, sans-serif; overflow-x: hidden; }
#d0 {
    height: 99vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 1fr 0.8fr 1fr 1fr 6fr 1fr 1fr 1fr;
        gap: 0.3vh;
}

.row { display: grid; gap: 0.4vh; }
.row-1 { grid-template-columns: repeat(1, 1fr); }
.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-3b { grid-template-columns: 1fr 4fr 1fr; }
.row-4 { grid-template-columns: repeat(4, 1fr);
}
.row-5 { grid-template-columns: repeat(5, 1fr); }
.row-5b { grid-template-columns: 1fr 2fr 4fr 1fr 1fr; }
.row-6 { grid-template-columns: repeat(6, 1fr); }
.row-7 { grid-template-columns: repeat(7, 1fr); }
.row-8 { grid-template-columns: repeat(8, 1fr); }
.row-9 { grid-template-columns: repeat(9, 1fr); }
.row-10 { grid-template-columns: repeat(10, 1fr); }
.row-11 { grid-template-columns: repeat(11, 1fr); }
.row-12 { grid-template-columns: repeat(12, 1fr); }
.cell { background-color: darkcyan; color: white; padding: 1vh; text-align: center; border-radius: 0.5vh; font-size: 3vh; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; }
p { font-size: 2vh; }
#ibelive { font-size: 2.5vh; }
#xxx1, #xxx2, #xxx3 { font-size: 2vh !important; border-top: 1px solid #ccc; }
.cell:hover { background-color: white; color: black; border:1px solid blue; transform: scale(0.95); }

/* 不可点击按钮不响应悬浮 */
.cell.cell-static:hover {
    background-color: darkcyan;
    color: white;
    border: none;
    transform: none;
    cursor: default;
}
/* Example of a non-clickable button
形如：<div class="cell cell-static">不可点击按钮</div>
*/