*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,sans-serif;
    background:#eef2f5;
    color:#2d3436;
    text-align:center;
    margin:0;
    padding:20px;
    overflow:hidden;
}

h1{
    margin-bottom:20px;
}

#gameBoard{
    position:relative;
    width:1200px;
    height:700px;
    margin:0 auto;
    background:#fff;
    border:1px solid #d8dde3;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.10);
    overflow:hidden;
}

.gameIcon{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    font-size:56px;
    cursor:pointer;
    user-select:none;
    transition:
        transform .15s,
        filter .15s;
}

.gameIcon:hover{
    transform:scale(1.18);
    filter:drop-shadow(0 0 10px rgba(255,255,255,.45));
}

.gameIcon:active{
    transform:scale(.95);
}

#menuScreen{
    width:460px;
    margin:70px auto;
    padding:35px;
    background:#fff;
    border:1px solid #d8dde3;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

#menuScreen h2{
    margin-bottom:35px;
    font-size:34px;
}

.menuGroup{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:25px;
}

.menuGroup label{
    font-size:18px;
    font-weight:bold;
}

#difficulty,
#goalCount{
    width:100%;
    height:48px;
    padding:0 14px;
    background:#ffffff;
    color:#2d3436;
    border:1px solid #d7dde5;
    border-radius:10px;
    font-size:18px;
    outline:none;
    transition:.2s;
}

#difficulty:hover,
#goalCount:hover{
    border-color:#8fb9ff;
}

#difficulty:focus,
#goalCount:focus{
    border-color:#4f8ef7;
}

#startButton{
    width:100%;
    height:54px;
    margin-top:15px;
    border:none;
    border-radius:10px;
    background:#28a745;
    color:#fff;
    font-size:22px;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
}

#startButton:hover{
    background:#31bf50;
    transform:translateY(-2px);
}

#startButton:active{
    transform:translateY(0);
}

#topButtons{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    gap:10px;
}

#restartButton,
#menuButton{
    width:50px;
    height:50px;
    border:none;
    border-radius:10px;
    background:#f1f3f5;
    border:1px solid #ccd3da;
    color:#2d3436;
    font-size:22px;
    cursor:pointer;
    transition:.2s;
}

#restartButton:hover,
#menuButton:hover{
    background:#e4e8ec;
}

#resultScreen{
    width:460px;
    margin:70px auto;
    padding:35px;
    background:#fff;
    border:1px solid #d8dde3;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    text-align:center;
}

#resultScreen h2{
    margin-bottom:25px;
    font-size:34px;
}

#resultTime{
    margin-bottom:30px;
    font-size:26px;
    font-weight:bold;
}

#playAgainButton,
#resultMenuButton{
    width:100%;
    height:54px;
    border:none;
    border-radius:10px;
    color:#fff;
    font-size:22px;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
}

#playAgainButton{
    margin-bottom:15px;
    background:#28a745;
}

#playAgainButton:hover{
    background:#31bf50;
    transform:translateY(-2px);
}

#resultMenuButton{
    background:#555;
}

#resultMenuButton:hover{
    background:#666;
    transform:translateY(-2px);
}

#targetBox{
    position:relative;
    width:1200px;
    height:90px;
    margin:0 auto 15px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    border:1px solid #d8dde3;
    border-radius:15px;
    bbox-shadow:0 10px 30px rgba(0,0,0,.10);
}

#readyButton{
    width:220px;
    height:54px;
    border:none;
    border-radius:10px;
    background:#28a745;
    color:#fff;
    font-size:24px;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
}

#readyButton:hover{
    background:#31bf50;
    transform:translateX(-50%) translateY(-2px);
}

#findBox{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
}

#readyButton,
#findBox{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

#targetText{
    font-size:28px;
    font-weight:bold;
}

#targetImage{
    width:70px;
    height:70px;
}

#targetImage{
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:56px;
}

select,
button{
    font-family:inherit;
}

button{
    user-select:none;
}

button:active{
    transform:translateY(0) scale(.98);
}

#recordBox{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    font-size:24px;
    font-weight:bold;
}

#recordTime{
    color:#0a7d2f;
}