.fk-lc {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.fk-lc-clock {
  width: var(--fk-lc-size);
  height: var(--fk-lc-size);
  border-radius: 999px;
  background: var(--fk-lc-bg);
  border: 2px solid var(--fk-lc-border);
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.fk-lc-face {
  position: absolute;
  inset: 0;
}

.fk-lc-number {
  position: absolute;
  color: var(--fk-lc-numbers);
  font-size: calc(var(--fk-lc-size) * 0.075);
  font-weight: 600;
  line-height: 1;
  transform: translate(-50%, -50%);
  user-select: none;
}

.fk-lc-number-12 { left: 50%; top: 14%; }
.fk-lc-number-1  { left: 68%; top: 19%; }
.fk-lc-number-2  { left: 81%; top: 33%; }
.fk-lc-number-3  { left: 86%; top: 50%; }
.fk-lc-number-4  { left: 81%; top: 67%; }
.fk-lc-number-5  { left: 68%; top: 81%; }
.fk-lc-number-6  { left: 50%; top: 86%; }
.fk-lc-number-7  { left: 32%; top: 81%; }
.fk-lc-number-8  { left: 19%; top: 67%; }
.fk-lc-number-9  { left: 14%; top: 50%; }
.fk-lc-number-10 { left: 19%; top: 33%; }
.fk-lc-number-11 { left: 32%; top: 19%; }

.fk-lc-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 90%;
  transform: translate(-50%, -90%) rotate(0deg);
  border-radius: 999px;
}

.fk-lc-hand-hour {
  width: 8px;
  height: calc(var(--fk-lc-size) * 0.26);
  background: var(--fk-lc-hour);
}

.fk-lc-hand-minute {
  width: 6px;
  height: calc(var(--fk-lc-size) * 0.34);
  background: var(--fk-lc-minute);
}

.fk-lc-hand-second {
  width: 2px;
  height: calc(var(--fk-lc-size) * 0.40);
  background: var(--fk-lc-second);
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.25);
}

.fk-lc-centre {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--fk-lc-centre);
  transform: translate(-50%, -50%);
}

.fk-lc-brand {
  position: absolute;
  left: 50%;
  top: calc(50% - 20px);
  transform: translate(-50%, -185%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fk-lc-brand-size, 11px);
  font-weight: 500;
  line-height: 1;
  color: var(--fk-lc-brand-colour, #cfcfcf);
  user-select: none;
  pointer-events: none;
  z-index: 5;
}

.fk-lc-message {
  margin: 0;
  text-align: center;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .fk-lc { gap: 12px; }
  .fk-lc-message { font-size: 14px; }
}