/* ==========================================================
   Vítr
   ========================================================== */

.wind-title {
    margin-top: 28px;
    margin-bottom: 14px;

    font-size: 20px;
    font-weight: 600;

    color: #9ca3af;
}

.wind-panel {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 34px;
    flex-wrap: nowrap;
}

.wind-speed-block,
.wind-direction-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wind-speed-block {
    min-width: 110px;
}

.wind-direction-block {
    width: 110px;
}

.wind-value {

    font-size: 34px;
    font-weight: 600;

    color: #67e8f9;
}


/* ==========================================================
   Kompas
   ========================================================== */

.compass-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compass{

    position:relative;

    width:110px;
    height:110px;

    border-radius:50%;

    border:2px solid #4b5563;

    background:#1f2937;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.35);
}


/* ---------- světové strany ---------- */

.compass-label{

    position:absolute;

    font-size:13px;
    font-weight:600;

    color:#cbd5e1;
}

.north{

    top:6px;
    left:50%;

    transform:translateX(-50%);
}

.east{

    right:8px;
    top:50%;

    transform:translateY(-50%);
}

.south{

    bottom:6px;
    left:50%;

    transform:translateX(-50%);
}

.west{

    left:8px;
    top:50%;

    transform:translateY(-50%);
}


/* ---------- střed ---------- */

.compass-center {
    position: absolute;

    left: 50%;
    top: 50%;

	width:14px;
	height:14px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #f59e0b;

    box-shadow:
         0 0 0 5px rgba(245,158,11,.18);

    z-index: 3;
}


/* ==========================================================
   Ručička kompasu
   ========================================================== */

/* Celý otočný bod je přesně ve středu kompasu */
/* Otočná vrstva přes celý kompas */
.compass-arrow {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(0deg);
    transform-origin: 50% 50%;

	transition: transform .6s cubic-bezier(.25,.8,.25,1);

    z-index: 2;
    pointer-events: none;
}

/* Bílá část ručičky od středu směrem nahoru */
.compass-arrow::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 20px;

    width: 3px;
    height: 55%;

    transform: translateX(-50%);

    background: #ffffff;
    border-radius: 3px;
}

/* Trojúhelníková špička */
.compass-arrow::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 20px;

    width: 0;
    height: 0;

    transform: translateX(-50%);

	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:11px solid white;
}


/* ==========================================================
   Mobil
   ========================================================== */

@media (max-width:430px){

    .wind-panel{

        gap:24px;
    }

    .wind-value{

        font-size:34px;
    }

    .compass{

        width:100px;
        height:100px;
    }

}