* {
    box-sizing: border-box;
}

body {
    margin:0;
    font-family: Arial, sans-serif;
    background:#f4f4f4;
}

header {
    background:#2e7d32;
    color:white;
    padding:15px;
    text-align:center;
    font-size:22px;
    font-weight:bold;
}

#map {
    height:85vh;
    width:100%;
}

.map-container{

    position:relative;

}

.panel {
    background:white;
    padding:15px;
    max-width:700px;
    margin:auto;
}

.section {
    margin-top:15px;
}

.title {
    font-weight:bold;
    margin-bottom:8px;
}

.buttons {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

button {
    border:none;
    border-radius:10px;
    padding:14px 8px;
    font-size:16px;
    background:#eeeeee;
}

button:hover {
    cursor:pointer;
}

.active {
    background:#2e7d32;
    color:white;
}

.footer {

    text-align:center;

    padding:20px 10px;

    margin-top:20px;

    font-size:14px;

    color:#666;

    background:#f4f4f4;

}

.footer a {

    color:#1565c0;

    text-decoration:none;

    margin:0 5px;

}

.footer a:hover {

    text-decoration:underline;

}

.settings-btn{

    position:absolute;

    top:10px;

    right:10px;

    z-index:1000;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:white;

    font-size:24px;

    box-shadow:0 2px 8px rgba(0,0,0,0.3);

}



.settings-btn:hover{

    cursor:pointer;

}


.share-btn-map{

    position:absolute;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

    z-index:1000;

    background:#4caf50;

    color:white;

    border:none;

    border-radius:30px;

    padding:14px 30px;

    font-size:18px;

    font-weight:bold;

    box-shadow:0 2px 8px rgba(0,0,0,0.3);

}
.share-btn-map:hover{

    cursor:pointer;

}


.send {

    display:block;

    width:80%;

    margin:10px auto 20px auto;

    background:#1565c0;

    color:white;

    padding:16px;

    border:none;

    border-radius:12px;

    font-size:14px;

    font-weight:bold;

}

.status {
    margin-top:10px;
    font-size:14px;
    color:#555;
}

.userinfo {
    margin-bottom:15px;
    padding:10px;
    background:#f0f0f0;
    border-radius:8px;
    font-size:14px;
}

.nickname-row {
    display:flex;
    gap:8px;
    margin-top:10px;
}

.nickname-row input {
    flex:1;
    padding:10px;
    border:1px solid #ccc;
    border-radius:6px;
}
.share-btn {

    display:block;

    width:70%;

    margin:10px auto 15px auto;

    padding:16px;

    border:none;

    border-radius:12px;

    background:#2e7d32;

    color:white;

    font-size:20px;

    font-weight:bold;

}

.share-btn:hover {

    cursor:pointer;

    opacity:0.95;

}



@media(max-width:600px){

    #map {
        height:75vh;
    }

    .buttons {
        grid-template-columns:repeat(2,1fr);
    }

    .nickname-row {
        flex-direction:column;
    }

}