body{

background:#111;

color:white;

text-align:center;

font-family:sans-serif;

margin:0;

}

h2{

margin-top:12px;

}

.scoreBox{

margin-top:8px;

}

#board{

margin:20px auto;

display:grid;

grid-template-columns:repeat(10,32px);

width:320px;

touch-action:none;

}

.cell{

width:32px;

height:32px;

border:1px solid #333;

background:#000;

transition:0.15s;

}

.fixed{

background:#00e5ff;

}

.active{

background:orange;

}

.flash{

background:white !important;

}

/* ボタン */

button{

font-size:18px;

margin:10px;

padding:10px 18px;

border:none;

border-radius:12px;

background:#00e5ff;

color:black;

}

/* ポップアップ */

.popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

display:flex;

justify-content:center;
align-items:center;

z-index:10;

}

/* カード */

.card{

background:white;

color:#333;

padding:25px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,0.4);

text-align:center;

animation:pop 0.2s ease;

}

/* 形ボタン */

.shapeBtn{

width:40px;
height:40px;

margin:8px;

background:#eee;

border-radius:8px;

display:inline-block;

border:2px solid #ccc;

}

/* アニメーション */

@keyframes pop{

from{

transform:scale(0.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.shapeGrid{

display:grid;

grid-template-columns:repeat(4,auto);

gap:10px;

justify-content:center;

margin-top:10px;

}

.shapeBtn{

display:grid;

grid-template-columns:repeat(4,10px);

grid-template-rows:repeat(4,10px);

gap:2px;

padding:8px;

background:#f8f8f8;

border-radius:10px;

cursor:pointer;

transition:0.15s;

}

.shapeBtn:hover{

transform:scale(1.1);

}

.miniCell{

width:10px;
height:10px;

background:#ddd;

border-radius:2px;

}

.miniFill{

background:#00e5ff;

}