/* =====================================
   ぬりえゲーム
   style.css（前半）
===================================== */


/* ---------- 全体 ---------- */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    font-family:"Zen Maru Gothic",sans-serif;

    background:#FFF9EC;

    color:#333;

    text-align:center;

    min-height:100vh;

}

.container{

    width:min(1000px,95%);

    margin:auto;

    padding:30px 0 50px;

}

.hidden{

    display:none;

}


/* ---------- タイトル ---------- */

h1{

    font-size:48px;

    margin-bottom:12px;

}

.subtitle{

    font-size:26px;

    margin-bottom:40px;

}


/* ---------- モード ---------- */

.mode-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

    gap:28px;

}

.mode-button{

    background:white;

    border:4px solid #FFD66B;

    border-radius:24px;

    cursor:pointer;

    padding:30px 15px;

    transition:.25s;

    font-size:54px;

    font-weight:bold;

    font-family:inherit;

}

.mode-button span{

    display:block;

    margin-top:18px;

    font-size:28px;

}

.mode-button:hover{

    transform:translateY(-6px);

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}


/* ---------- 上部ボタン ---------- */

.top-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.top-buttons button{

    font-family:inherit;

    font-size:24px;

    font-weight:bold;

    padding:12px 26px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:white;

    transition:.2s;

}

#home-button{

    background:#42A5F5;

}

#reset-button{

    background:#FF9800;

}

#shuffle-button{

    background:#66BB6A;

}

.top-buttons button:hover{

    transform:scale(1.05);

}


/* ---------- 盤面 ---------- */

#board{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:25px;

    margin:35px auto;

    max-width:900px;

}


/* ---------- マス ---------- */

.item{

    width:140px;

    height:140px;

    margin:auto;

    background:white;

    border-radius:20px;

    border:4px solid #DDD;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.2s;

    user-select:none;

}

.item:hover{

    transform:scale(1.05);

}


/* ---------- SVG ---------- */

.item svg{

    width:105px;

    height:105px;

}


/* ---------- 文字 ---------- */

.text-item{

    font-size:72px;

    font-weight:bold;

    line-height:1;

    color:#333;

}

/* =====================================
   style.css（後半）
===================================== */


/* ---------- パレット ---------- */

.palette-area{

    margin-top:45px;

}

.palette-area h2{

    font-size:34px;

    margin-bottom:10px;

}

#color-name{

    font-size:26px;

    font-weight:bold;

    margin-bottom:22px;

}


/* ---------- パレット ---------- */

#palette{

    display:grid;

    grid-template-columns:repeat(6,64px);

    justify-content:center;

    gap:18px;

    margin:0 auto;

}


/* ---------- 色ボタン ---------- */

.color{

    width:64px;

    height:64px;

    border-radius:50%;

    border:3px solid #999;

    cursor:pointer;

    transition:.18s;

}

.color:hover{

    transform:scale(1.08);

}


/* ---------- 選択中 ---------- */

.color.selected{

    border:6px solid #333;

    transform:scale(1.18);

    box-shadow:0 0 12px rgba(0,0,0,.25);

}


/* ---------- ポン！ ---------- */

.pop{

    animation:pop .18s ease;

}

@keyframes pop{

    0%{

        transform:scale(.85);

    }

    70%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}


/* ---------- フェード ---------- */

.fade{

    animation:fade .25s;

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ---------- スマホ ---------- */

@media (max-width:900px){

    h1{

        font-size:40px;

    }

    .subtitle{

        font-size:22px;

    }

    .mode-grid{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }

    .mode-button{

        font-size:46px;

        padding:24px 12px;

    }

    .mode-button span{

        font-size:24px;

    }

    #board{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .item{

        width:130px;

        height:130px;

    }

    .item svg{

        width:95px;

        height:95px;

    }

    .text-item{

        font-size:64px;

    }

    .top-buttons button{

        font-size:20px;

        padding:10px 18px;

    }

    #palette{

        grid-template-columns:repeat(6,56px);

        gap:14px;

    }

    .color{

        width:56px;

        height:56px;

    }

}


/* ---------- 小さいスマホ ---------- */

@media (max-width:500px){

    h1{

        font-size:32px;

    }

    .subtitle{

        font-size:20px;

    }

    .mode-grid{

        grid-template-columns:1fr;

    }

    #board{

        gap:14px;

    }

    .item{

        width:110px;

        height:110px;

    }

    .item svg{

        width:82px;

        height:82px;

    }

    .text-item{

        font-size:56px;

    }

    #palette{

        grid-template-columns:repeat(6,46px);

        gap:10px;

    }

    .color{

        width:46px;

        height:46px;

    }

}


/* ---------- タップ時のハイライトを消す ---------- */

button,
.item{

    -webkit-tap-highlight-color:transparent;

}


/* ---------- SVGをきれいに表示 ---------- */

svg{

    overflow:visible;

}


/* ---------- ボタンの共通 ---------- */

button{

    font-family:inherit;

}


/* ---------- 文字を選択させない ---------- */

body{

    user-select:none;

}