/* Watch parts shared by swing.html and builder.html (2026-10-18). */
/* chains */
.chain { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; translate: -50% 0; }
.chain.links i { display: block; width: 6px; height: 11px; margin: -2px 0; border: 1px solid var(--dim); border-radius: 4px; }
.chain.links i:nth-child(even) { width: 2px; border-width: 1px; }
.chain.beads i { display: block; width: 3px; height: 3px; margin: 2.5px 0; border-radius: 50%; background: var(--dim); }
.chain.line { width: 1px; background: linear-gradient(var(--dim), var(--fg)); }
.ribbon { position: absolute; left: 0; top: 0; overflow: visible; }
.ribbon path { fill: none; stroke: var(--fg); stroke-width: 1; opacity: .7; }

/* the watch */
.wt { position: absolute; left: 0; width: 200px; translate: -50% 0; }
.bowr { position: relative; width: 20px; height: 20px; margin: 0 auto -2px; border: 1px solid var(--dim); border-radius: 50%; }
.crown { position: relative; width: 14px; height: 10px; margin: 0 auto -1px; border: 1px solid var(--dim); border-radius: 3px 3px 1px 1px;
  background: repeating-linear-gradient(90deg, transparent 0 2px, rgba(241,241,239,.25) 2px 3px); }
.case { position: relative; width: 200px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--dim);
  background: radial-gradient(circle at 50% 50%, #050505 66%, #101010 70%, #050505 100%); }
.case::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--line); }
.mk { position: absolute; width: 0; height: 0; }
.mk > * { position: absolute; translate: -50% -50%; }
.tk { display: block; width: 1px; height: 4px; background: rgba(241,241,239,.35); }
.tk.hr { height: 9px; width: 1.5px; background: var(--fg); }
.num { font: 300 14px/1 var(--serif); color: var(--fg); }
.num.sm { font-size: 11px; color: var(--dim); }
.suit { display: block; width: 11px; height: 11px; color: var(--fg); }
.suit svg { display: block; width: 100%; height: 100%; }
.hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; background: var(--fg); border-radius: 1px; }
.h { width: 2.5px; height: 25%; margin-left: -1.25px; } .m { width: 1.5px; height: 37%; margin-left: -.75px; }
.s { width: .8px; height: 41%; margin-left: -.4px; background: var(--grey); }
.s::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: .8px; height: 14px; translate: -50% 0; background: var(--grey); }
.breg .h::after, .breg .m::after { content: ""; position: absolute; left: 50%; top: 10%; width: 7px; height: 7px; translate: -50% 0; border-radius: 50%; border: 1px solid var(--fg); background: #050505; }
.leaf .h, .leaf .m { border-radius: 50% 50% 50% 50% / 90% 90% 10% 10%; } .leaf .h { width: 6px; margin-left: -3px; } .leaf .m { width: 4px; margin-left: -2px; }
.pin { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 2px #050505, 0 0 0 2.6px var(--dim); }
.sub { position: absolute; left: 50%; top: 66%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; border: 1px solid var(--line); }
.sub .hand.ss { width: .8px; height: 44%; margin-left: -.4px; background: var(--fg); }
.sub .pin { width: 3px; height: 3px; margin: -1.5px; box-shadow: none; }
.bun { position: absolute; color: var(--fg); }
.glass { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 46%, transparent 54%); background-size: 260% 100%; }
.shadow { position: absolute; left: 50%; width: 150px; height: 14px; margin-left: -75px; border-radius: 50%; background: radial-gradient(rgba(241,241,239,.09), transparent 70%); }
.word { position: absolute; left: 0; right: 0; text-align: center; font: italic 300 11px/1 var(--serif); color: var(--dim); letter-spacing: .04em; }
.date { position: absolute; right: 18%; top: 50%; translate: 0 -50%; padding: 2px 4px; border: 1px solid var(--line); font: 400 9px/1 var(--sans); color: var(--fg); font-variant-numeric: tabular-nums; }
.lume .tk.hr { background: var(--fg); box-shadow: 0 0 6px rgba(241,241,239,.6); }
.hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 11px; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }