:root {
    --myclock-size: 130px;
}

.myclock-container {
    width: var(--myclock-size);
    height: var(--myclock-size);
    border-radius: 50%;
    position: fixed;
    left: 20px;
    bottom: 99px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    overflow: hidden;
    transition: transform 0.1s ease;
}

.myclock-shake {
    animation: shake 0.3s infinite;
}

.myclock-center-dot { width: 6px; height: 6px; background: red; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; box-shadow: 0 0 4px rgba(0,0,0,0.4); }
.myclock-hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; transform: translateX(-50%) rotate(0deg); border-radius: 6px; }
.myclock-hour { width: 4px; height: calc(var(--myclock-size) * 0.23); background: linear-gradient(to top, #000, #444); box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.myclock-minute { width: 3px; height: calc(var(--myclock-size) * 0.33); background: linear-gradient(to top, #0a0, #0f0); box-shadow: 0 2px 4px rgba(0,128,0,0.4); }
.myclock-second { width: 1.5px; height: calc(var(--myclock-size) * 0.40); background: red; box-shadow: 0 0 4px rgba(255,0,0,0.6); }
.myclock-number { position: absolute; color: #000; font-size: calc(var(--myclock-size) * 0.11); font-family: Arial, sans-serif; transform: translate(-50%, -50%); line-height: 1; }
.myclock-label { position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--myclock-size) * 0.10); font-family: Arial, sans-serif; color: #800000; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 1px rgba(255,100,100, 0.3);}
.myclock-date { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--myclock-size) * 0.10); font-family: Arial, sans-serif; color: #a85; line-height: 1; }