body{
margin:0;
background:#2b2b2b;
font-family:Arial;
color:white;
overflow-x:hidden;
}

/* ===================== */
/* TOP PANEL */
/* ===================== */

#topbar{
display:flex;
flex-wrap:wrap;
background:#111;
padding:8px;
border-bottom:3px solid #444;
align-items:center;
}

.leader img{
width:70px;
height:70px;
border:2px solid #555;
}

.leader-info{
margin-left:10px;
flex:1;
}

.title{
color:#aaa;
font-size:12px;
}

.name{
font-size:18px;
font-weight:bold;
margin-bottom:6px;
}

/* stats */

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:4px;
font-size:12px;
}

.stats div{
background:#1f1f1f;
padding:4px;
border:1px solid #444;
text-align:center;
}

/* ===================== */
/* MAP */
/* ===================== */

#map{
width:100%;
text-align:center;
}

svg{
width:100%;
max-width:900px;
height:auto;
background:#dcdcdc;
border:3px solid #333;
}

/* province */

.province{
fill:#7f8c8d;
stroke:#222;
stroke-width:1;
cursor:pointer;
transition:0.2s;
}

.province:hover{
fill:#f39c12;
}

.player{
fill:#27ae60;
}

.enemy{
fill:#c0392b;
}

/* ===================== */
/* TOOLTIP */
/* ===================== */

#tooltip{
position:absolute;
background:black;
color:white;
padding:6px 10px;
font-size:12px;
border-radius:4px;
pointer-events:none;
display:none;
z-index:1000;
}

/* ===================== */
/* PANEL INFO */
/* ===================== */

#panel{
padding:10px;
font-size:14px;
text-align:center;
}

/* ===================== */
/* BOTTOM MENU */
/* ===================== */

#menu{
position:fixed;
bottom:0;
width:100%;
background:#111;
border-top:3px solid #444;
display:flex;
justify-content:space-around;
padding:6px 0;
}

#menu button{
flex:1;
background:#2c2c2c;
border:none;
color:white;
padding:10px 0;
font-size:12px;
cursor:pointer;
}

#menu button:active{
background:#555;
}

/* ===================== */
/* SMALL PHONE */
/* ===================== */

@media (max-width:500px){

.leader img{
width:60px;
height:60px;
}

.name{
font-size:16px;
}

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

}

#map{
overflow:auto;
touch-action:pan-x pan-y;
}

#map-container{
position:relative;
width:100%;
height:60vh;
overflow:hidden;
background:#cfcfcf;
}

#map-wrapper{
position:absolute;
top:0;
left:0;
transform-origin:0 0;
touch-action:none;
}

#map svg{
width:900px;
height:auto;
}

#map-wrapper{
transition: transform 0.05s linear;
transform-origin: center center;
}