:root {
     --size: 300px;
     /* watch diameter */
     --border: #111 10px solid;
     /* bezel */
     --brand: #000;
     /* hand + text colour */
     --accent: #e74c3c;
     /* second hand */
     --bg-off: #000;
     /* display off */
     --bg-on: #fff;
     /* display on */
     font-family: "Segoe UI", sans-serif;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 body {
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background: transparent;
 }

 /* ---- watch body ---- */
 #watch {
     width: calc(var(--size) + 40px);
     height: calc(var(--size) + 40px);
     background: #444;
     border-radius: 50%;
     position: relative;
     box-shadow: 0 0 25px rgba(0, 0, 0, .6);
     cursor: pointer;
     user-select: none; 
 }

 /* inner display area */
 #screen {
     width: var(--size);
     height: var(--size);
     background: var(--bg-off);
     border: var(--border);
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     overflow: hidden;
     transition: background .4s;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* ---------- ANALOG ---------- */
 .analog {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     display: none;
 }

 .number {
     position: absolute;
     font-weight: 600;
     color: var(--brand);
     transform: translate(-50%, -50%);
 }

 /* numbers placement */
 .n1 {
     top: 18%;
     left: 74%
 }

 .n2 {
     top: 29%;
     left: 85%
 }

 .n3 {
     top: 50%;
     left: 92%
 }

 .n4 {
     top: 71%;
     left: 85%
 }

 .n5 {
     top: 82%;
     left: 74%
 }

 .n6 {
     top: 88%;
     left: 50%
 }

 .n7 {
     top: 82%;
     left: 26%
 }

 .n8 {
     top: 71%;
     left: 15%
 }

 .n9 {
     top: 50%;
     left: 8%
 }

 .n10 {
     top: 29%;
     left: 15%
 }

 .n11 {
     top: 18%;
     left: 26%
 }

 .n12 {
     top: 12%;
     left: 50%
 }

 /* hands */
 .hand {
     position: absolute;
     bottom: 50%;
     left: 50%;
     transform-origin: bottom center;
     transform: translateX(-50%) rotate(90deg);
     background: #333;
     /* transition: transform 0.5s ease-in-out; */
 }




 .minute {
     height: 90px;
     width: 4px;
     background: #555;
     z-index: 2;
 }

 .hour {
     height: 60px;
     width: 6px;
     background: #000;
     z-index: 3;
 }

 .second {
     height: 100px;
     width: 2px;
     background: red;
     z-index: 1;
 }

 .center-dot {
     position: absolute;
     width: 12px;
     height: 12px;
     background: #000;
     border-radius: 50%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 4;
 }

 /* ---------- DIGITAL ---------- */
 .digital {
     display: none;
     font-size: 3rem;
     color: var(--brand);
     letter-spacing: 2px;
 }

 /* ---------- MODE CLASSES ---------- */
 .mode-analog #screen {
     background: var(--bg-on);
 }

 .mode-analog .analog {
     display: block
 }

 .mode-digital #screen {
     background: var(--bg-on);
 }

 .mode-digital .digital {
     display: block
 }