/* 追加: 共通サイズ（JS で上書き） */
:root {
--cell-px: 56px; /* セル一辺のpx（暫定） */
--die-font-size: 32px; /* 絵文字フォントサイズ（暫定） */
}

body {background-color: #ffffff; background-image: repeating-linear-gradient(to bottom, rgba(255, 77, 77, 0.50), rgba(255, 77, 77, 0.50) 50px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100px), repeating-linear-gradient(to right, rgba(255, 77, 77, 0.50), rgba(255, 77, 77, 0.50) 50px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100px); margin: 0; font-size: 18px; text-align: center; overflow: hidden;}
h1 {font-size: 22px; text-align: center; font-weight: bold; border: 2px outset orange; background: white;}
h2 {font-size: 20px; text-align: center; font-weight: bold; background: white; border-radius: 10px;}
p {font-size: 18px; text-align: center; background: white; border-radius: 9px;}

section {display: flex; justify-content: space-between; align-items: center; background: white; color: black; background: white; border: 1px solid gray; border-radius: 9px;}
#scoreboard {font-size: 1.2em;}
#gameboard {width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 10px; min-height: 50vh; box-sizing: border-box;}

/* セル */
.cell {aspect-ratio: 1 / 1; border: 2px solid #ccc; background: #eee; font-size: var(--die-font-size); line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer;}
.cell:focus {outline: 3px solid orange; outline-offset: 0; border-color: orange;}

/* 「次のサイコロ」もセルと同じ見た目・サイズに */
#current-die {display: inline-flex; align-items: center; justify-content: center; width: var(--cell-px); height: var(--cell-px); border: 2px solid #ccc; background: #eee; font-size: var(--die-font-size); margin-left: 10px; aspect-ratio: 1/1;}

#intro {border: 2px outset orange; background: white; color: black;}
#game-nav {list-style-type: none; text-align: center; font-size: 18px;}
#game-nav li {list-style-type: none; text-align: left;}
.nav-btn {border: 2px solid orange; border-radius: 8px; background: white; color: black; font-weight: bold; font-size: 20px;}
#titlepic {text-align: center;}