body {
  color: #464646;
  font-family: 'Roboto',arial,sans-serif; 
}

a.disabled {
    pointer-events: none;
    cursor: default;
    color: grey;
    text-decoration: none;
  }
  

/* 画面中央に配置 */
#gameWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-rows: repeat(11, 1fr);
    grid-template-columns: repeat(6, 1fr);
}

/* ゲームキャンバスのスタイル */
#gameCanvas {
    grid-row: 1 / 8;
    grid-column: 1 / 7;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin-top: 20px;
}

/* 一般的なボタンスタイル */
button {
    margin-top: -20px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    touch-action: manipulation;
        user-select: none; /* テキスト選択を無効にする */
    -webkit-user-select: none; /* WebKitブラウザ用 */
    -moz-user-select: none; /* Firefox用 */
    -ms-user-select: none; /* Internet Explorer/Edge用 */
}

/* ボタン（押されたとき） */
button:active {
    filter: brightness(80%);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* 上ボタン */
#upButton {
    grid-row: 9 / 10;
    grid-column: 2 / 3;
    background-color: #8db8f3;
}

/* 左ボタン */
#leftButton {
    grid-row: 10 / 11;
    grid-column: 1 / 2;
    background-color: #8db8f3;
}

/* 右ボタン */
#rightButton {
    grid-row: 10 / 11;
    grid-column: 3 / 4;
    background-color: #8db8f3;
}

/* 下ボタン */
#downButton {
    grid-row: 11 / 12;
    grid-column: 2 / 3;
    background-color: #8db8f3;
}

/* 特殊攻撃ボタン */
#specialAttackButton {
    grid-row: 9 / 10;
    grid-column: 5 / 6;
    background-color: #ffd700;
}

/* 通常攻撃ボタン */
#normalAttackButton {
    grid-row: 10 / 11;
    grid-column: 6 / 7;
    background-color: #f55151;
}