*{
    margin: 0px;
    border: 0px;
    padding: 0px;
    box-sizing: border-box;
}
:root {
    font-size: 14px;
    /* 主色系 */
    --color-primary: rgb(99, 107, 47);      /* 軍綠，主背景 */
    --color-primary-dark: rgb(70, 76, 33);  /* 深軍綠，區塊邊框 */
    --color-primary-light: rgb(180, 185, 120); /* 淺軍綠，次要背景 */

    /* 強調色 */
    --color-accent: rgb(228, 203, 80);      /* 黃色，強調文字/按鈕 */
    --color-accent-dark: rgb(131, 74, 0);   /* 深橘棕，active 狀態 */

    /* 中性色 */
    --color-surface: rgb(240, 232, 210);    /* 米色，卡片背景 */
    --color-surface-dark: rgb(216, 201, 184); /* 深米色，區塊背景 */
    --color-border: rgb(170, 130, 99);      /* 棕色，統一邊框 */

    /* 文字 */
    --color-text-dark: rgb(40, 35, 20);     /* 深棕，主要文字 */
    --color-text-light: rgb(240, 232, 210); /* 米白，淺色背景上的文字 */
}
html {
  scroll-padding-top: 4.7rem;
}
.W{
    color: aliceblue;
    /* white-space: nowrap; */
}
.Y{
    color:rgb(228, 203, 80);
}
#green{
    color: rgb(2, 161, 2);
}
.M{
    color: rgb(133, 43, 218);
}
body {
    height: 100vh;
    padding: 0;
    background-image: url("./images/others/background.PNG");
    background-size: cover;
    background-position: top;
    background-repeat: repeat;
}
a{
    font-weight:bold;
    color: rgb(0, 0, 0);
    text-decoration: none;
}
a:hover{
    color:rgb(67, 132, 252);
    transform: scale(1.1);
    transition:  0.08s;
}
/* 讓所有具有 clickable-cell 類別的格子都顯示手指游標 */
.clickable-cell {
    cursor: pointer !important;
    transition: background-color 0.2s; /* 順便加個微動效，體驗更好 */
}

/* 懸停時變色，讓使用者知道可以點擊 */
.clickable-cell:hover {
    background-color: #f0f7ff; 
}
@media (max-width: 768px) {
    :root{
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    :root{
        font-size: 10px;
    }
}