body{
    font-family:sans-serif;
    text-align:center;
    background:#faf8ef;
}

button{
    color: #fff900;
    background:#1fa6e0;
    border-radius:6px;
    border:2px solid #0e0bb2;
    margin-left: 60px;
}
button:hover{
        background:#bbd2db;
}

#board{
    width:430px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,100px);
    grid-gap:10px;
    background:#bbada0;
    padding:10px;
}

#score{
    font-size:24px;
    margin:10px;
    font-weight:bold;
}

.tile{
    width:100px;
    height:100px;
    line-height:100px;
    font-size:32px;
    font-weight:bold;
    background:#cdc1b4;
    border-radius:5px;
}

.n2    { background:#c6f6d5; }
.n4    { background:#9ae6b4; }
.n8    { background:#68d391; color:white}
.n16   { background:#38b2ac; color:white}
.n32   { background:#319795; color:white}
.n64   { background:#4299e1; color:yellow}
.n128  { background:#3182ce; color:white}
.n256  { background:#2b6cb0; color:white}
.n512  { background:#2c5282; color:white}
.n1024 { background:#2a4365; color:white}
.n2048 { background:#1a365d; color:white}

.controls{
    margin-top:20px;
    display:flex;
    justify-content:center;
    gap:40px;
}

.manual{
    text-align:center;
}

.manual button{
    width:70px;
    height:40px;
    margin:4px;
}

.ai{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
}

.ai button{
    width:100px;
    height:40px;
}

.gameLog{
    margin-top:20px;
    width:320px;
    height:150px;
    overflow-y:auto;
    border:1px solid #888;
    padding:5px;
    font-size:14px;
    background:#fafafa;
}
.howto{
    width:640px;
    margin:10px auto;
    text-align:left;
    font-size:14px;
}

.howto-header{
    cursor:pointer;
    background:#2c4444;
    color:#c6f6d5;
    padding:8px;
    border-radius:6px;
    user-select:none;
}

.howto-header:hover{
    background:#3a6666;
}

.howto-body{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
    background:#1c2e2e;
    color:#e0ffff;
    padding:0 8px;
    border-radius:6px;
}

.howto-body.open{
    max-height:400px;
    padding:8px;
}
.howto-illust{
    margin:10px 0;
    text-align:center;
}

.howto-illust .row{
    display:flex;
    justify-content:center;
    gap:5px;
}

.howto-illust span{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2c4444;
    color:#c6f6d5;
    border-radius:6px;
    font-weight:bold;
}

.arrow{
    margin:5px;
    color:#9ae6b4;
    font-size:12px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
}

/* 左：ボード */
.left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.right {
    margin-top:80px;
    width: 280px;
    background: #f0f0f0;
    box-sizing: border-box;
    border-left: 1px solid #ccc;
}

.param {
    margin-bottom: 20px;
}

.param label {
    display: block;
    margin-bottom: 5px;
}

.param input {
    width: 90%;
}